MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change shadow variables to small, medium, large

This commit is contained in:
Konstantinos Triantafyllou 2022-04-18 14:09:54 +03:00
parent f7efc69c9b
commit c98b39a5a5
8 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/structure/button.css
View File

@ -24,12 +24,12 @@
}
.uk-button-default {
box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
}
.uk-button-default:hover {
color: var(--button-default-color-hover);
box-shadow: var(--shadow-hover);
box-shadow: var(--shadow-small);
}
.uk-button-primary {
@ -37,7 +37,7 @@
background-image: var(--button-primary-background-image);
color: var(--button-primary-color);
border-color: var(--button-primary-border-color);
box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
}
.uk-button-primary:hover {
@ -45,7 +45,7 @@
background-image: var(--button-primary-background-image-hover);
color: var(--button-primary-color-hover);
border-color: var(--button-primary-border-color-hover);
box-shadow: var(--shadow-hover);
box-shadow: var(--shadow-small);
}
.uk-button-secondary {
@ -53,7 +53,7 @@
background-image: var(--button-secondary-background-image);
color: var(--button-secondary-color);
border-color: var(--button-secondary-border-color);
box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
}
.uk-button-secondary:hover {
@ -61,5 +61,5 @@
background-image: var(--button-secondary-background-image-hover);
color: var(--button-secondary-color-hover);
border-color: var(--button-secondary-border-color-hover);
box-shadow: var(--shadow-hover);
box-shadow: var(--shadow-small);
}

4
css/structure/card.css
View File

@ -4,9 +4,9 @@
}
.uk-card {
box-shadow: var(--shadow-main);
box-shadow: var(--shadow-large);
}
.uk-card.uk-card-hover:hover {
box-shadow: var(--shadow-hover);
box-shadow: var(--shadow-small);
}

2
css/structure/icon.css
View File

@ -67,7 +67,7 @@
.uk-icon-button {
border: none;
box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
}
.uk-icon-button.uk-disabled {

4
css/structure/input.css
View File

@ -276,9 +276,9 @@
--input-padding-vertical: 10px;
--input-font-size: 14px;
--input-background-hover: var(--muted-color);
--input-shadow-hover: var(--shadow-small);
--input-shadow-hover: var(--shadow-medium);
--input-background-focus: var(--default-color);
--input-shadow-focus: var(--shadow-small);
--input-shadow-focus: var(--shadow-medium);
}
.input-wrapper.x-small {

4
css/structure/offcanvas.css
View File

@ -1,7 +1,7 @@
:root {
--offcanvas-background-color: var(--default-color);
--offcanvas-shadow: var(--shadow-main-dark);
--offcanvas-button-shadow: var(--shadow-small);
--offcanvas-shadow: var(--shadow-large-dark);
--offcanvas-button-shadow: var(--shadow-medium);
}
.offcanvas-switcher {

2
css/structure/pill.css
View File

@ -2,7 +2,7 @@
/* Alternative Pills*/
--pill-alt-color: var(--placeholder-color);
--pill-alt-background: var(--light-color);
--pill-alt-shadow: var(--shadow-main);
--pill-alt-shadow: var(--shadow-large);
--pill-alt-color-hover: var(--secondary-color);
--pill-alt-background-active: none;
--pill-alt-background-active-image: linear-gradient(122deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);

2
css/structure/search-input.css
View File

@ -64,5 +64,5 @@
.outer {
--search-input-background: var(--default-color);
--search-input-shadow: var(--shadow-small);
--search-input-shadow: var(--shadow-medium);
}

29
css/structure/shadow.css
View File

@ -1,32 +1,35 @@
:root {
/** Light Background */
--shadow-main: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
--shadow-small: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07);
--shadow-hover: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.07);
--shadow-small: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.07);
--shadow-medium: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07);
--shadow-large: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
/** Dark Background*/
--shadow-main-dark: -15px -15px 20px rgb(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3);
--shadow-small-dark: -5px -5px 15px rgb(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.3);
--shadow-hover-dark: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.3);
--shadow-small-dark: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.3);
--shadow-medium-dark: -5px -5px 15px rgb(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.3);
--shadow-large-dark: -15px -15px 20px rgb(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3);
/** Modifiers */
--shadow-inset: inset -3px -3px 6px rgb(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
--shadow-default: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}
/***/
.dark {
--shadow-main: var(--shadow-main-dark);
--shadow-small: var(--shadow-small-dark);
--shadow-hover: var(--shadow-hover-dark);
}
.uk-box-shadow {
box-shadow: var(--shadow-main);
--shadow-medium: var(--shadow-medium-dark);
--shadow-large: var(--shadow-large-dark);
}
.uk-box-shadow-small {
box-shadow: var(--shadow-small);
}
.uk-box-shadow-medium {
box-shadow: var(--shadow-medium);
}
.uk-box-shadow-large {
box-shadow: var(--shadow-large);
}
.uk-box-shadow-inner {
box-shadow: var(--shadow-inset);
}