diff --git a/css/import.css b/css/import.css index f964cc0..4d4c6af 100644 --- a/css/import.css +++ b/css/import.css @@ -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"; diff --git a/css/structure/button.css b/css/structure/button.css index 949e81c..c7d572d 100644 --- a/css/structure/button.css +++ b/css/structure/button.css @@ -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); } diff --git a/css/structure/card.css b/css/structure/card.css index 3dbf1ba..58e97c0 100644 --- a/css/structure/card.css +++ b/css/structure/card.css @@ -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); +} diff --git a/css/structure/icon.css b/css/structure/icon.css index c8c2ea3..a4a1de1 100644 --- a/css/structure/icon.css +++ b/css/structure/icon.css @@ -64,3 +64,12 @@ height: 96px; } /**/ + +.uk-icon-button { + border: none; + box-shadow: var(--shadow-small); +} + +.uk-icon-button.uk-disabled { + box-shadow: none; +} diff --git a/css/structure/input.css b/css/structure/input.css index 71ce0d2..19fb455 100644 --- a/css/structure/input.css +++ b/css/structure/input.css @@ -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 { diff --git a/css/structure/label.css b/css/structure/label.css new file mode 100644 index 0000000..674a868 --- /dev/null +++ b/css/structure/label.css @@ -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); +} diff --git a/css/structure/offcanvas.css b/css/structure/offcanvas.css index 1bb19ab..ca899d7 100644 --- a/css/structure/offcanvas.css +++ b/css/structure/offcanvas.css @@ -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 { diff --git a/css/structure/search-input.css b/css/structure/search-input.css index 7e8e4c7..edca91d 100644 --- a/css/structure/search-input.css +++ b/css/structure/search-input.css @@ -64,5 +64,5 @@ .outer { --search-input-background: var(--default-color); - --search-input-shadow: var(--shadow-button); + --search-input-shadow: var(--shadow-small); } diff --git a/css/structure/shadow.css b/css/structure/shadow.css index 63881c4..650fd8d 100644 --- a/css/structure/shadow.css +++ b/css/structure/shadow.css @@ -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; }