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

Add shadow modifiers. Add label primary and secondary. Add disable behaviour in icon-button

This commit is contained in:
Konstantinos Triantafyllou 2022-04-18 11:26:08 +03:00
parent a47c66f480
commit f7efc69c9b
9 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/import.css vendored
View File

@ -12,6 +12,7 @@
@import "structure/height.css";
@import "structure/icon.css";
@import "structure/input.css";
@import "structure/label.css";
@import "structure/link.css";
@import "structure/list.css";
@import "structure/navbar.css";

17
css/structure/button.css
View File

@ -2,7 +2,7 @@
/* Default */
--button-default-color-hover: var(--primary-color);
/* Primary */
/* Primary */
--button-primary-background: var(--primary-color);
--button-primary-background-image: none;
--button-primary-color: var(--light-color);
@ -22,14 +22,22 @@
--button-secondary-color-hover: var(--light-color);
--button-secondary-border-color-hover: transparent;
}
.uk-button-default {
box-shadow: var(--shadow-small);
}
.uk-button-default:hover {
color: var(--button-default-color-hover);
box-shadow: var(--shadow-hover);
}
.uk-button-primary {
background-color: var(--button-primary-background);
background-image: var(--button-primary-background-image);
color: var(--button-primary-color);
border-color: var(--button-primary-border-color);
box-shadow: var(--shadow-small);
}
.uk-button-primary:hover {
@ -37,6 +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);
}
.uk-button-secondary {
@ -44,6 +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);
}
.uk-button-secondary:hover {
@ -51,8 +61,5 @@
background-image: var(--button-secondary-background-image-hover);
color: var(--button-secondary-color-hover);
border-color: var(--button-secondary-border-color-hover);
}
.uk-icon-button {
border: none;
box-shadow: var(--shadow-hover);
}

8
css/structure/card.css
View File

@ -2,3 +2,11 @@
box-shadow: none;
border: 1px solid var(--muted-color);
}
.uk-card {
box-shadow: var(--shadow-main);
}
.uk-card.uk-card-hover:hover {
box-shadow: var(--shadow-hover);
}

9
css/structure/icon.css
View File

@ -64,3 +64,12 @@
height: 96px;
}
/**/
.uk-icon-button {
border: none;
box-shadow: var(--shadow-small);
}
.uk-icon-button.uk-disabled {
box-shadow: none;
}

6
css/structure/input.css
View File

@ -178,7 +178,7 @@
color: inherit;
width: 100%;
min-height: 24px;
line-height: inherit;
line-height: 24px;
resize: none;
cursor: inherit;
}
@ -276,9 +276,9 @@
--input-padding-vertical: 10px;
--input-font-size: 14px;
--input-background-hover: var(--muted-color);
--input-shadow-hover: var(--shadow-button);
--input-shadow-hover: var(--shadow-small);
--input-background-focus: var(--default-color);
--input-shadow-focus: var(--shadow-button);
--input-shadow-focus: var(--shadow-small);
}
.input-wrapper.x-small {

14
css/structure/label.css Normal file
View File

@ -0,0 +1,14 @@
:root {
--label-primary: var(--primary-color);
--label-secondary: var(--secondary-color);
}
.uk-label.uk-label-primary {
border-color: var(--label-primary);
color: var(--label-primary);
}
.uk-label.uk-label-secondary {
border-color: var(--label-secondary);
color: var(--label-secondary);
}

2
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-button);
--offcanvas-button-shadow: var(--shadow-small);
}
.offcanvas-switcher {

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

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

33
css/structure/shadow.css
View File

@ -1,13 +1,36 @@
: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);
/** Dark Background*/
--shadow-main-dark: -15px -15px 20px rgb(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3);
--shadow-button: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07);
--shadow-button-dark: -5px -5px 15px rgb(255, 255, 255, 0.05), 5px 5px 15px 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);
/** Modifiers */
--shadow-inset: inset -3px -3px 6px rgb(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
--shadow-nav: 0 3px 6px 0 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-button: var(--shadow-button-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);
}
.uk-box-shadow-small {
box-shadow: var(--shadow-small);
}
.uk-box-shadow-inner {
box-shadow: var(--shadow-inset);
}
.uk-box-no-shadow {
box-shadow: none;
}