diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-08 14:02:52 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-08 14:02:52 +0100 |
| commit | defdf4ede0f42134c076b6a2c70519e2db629fba (patch) | |
| tree | 6b9116114724c14ce1f1bb7015ff717e2f9e40be | |
| parent | Improved action menu (diff) | |
| download | iro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.tar.gz iro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.tar.bz2 iro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.zip | |
Update
| -rw-r--r-- | src/_vars.scss | 5 | ||||
| -rw-r--r-- | src/objects/_action-menu.scss | 23 | ||||
| -rw-r--r-- | src/objects/_button.scss | 2 |
3 files changed, 26 insertions, 4 deletions
diff --git a/src/_vars.scss b/src/_vars.scss index e838a82..9537429 100644 --- a/src/_vars.scss +++ b/src/_vars.scss | |||
| @@ -90,8 +90,9 @@ media.$unit-intervals: ( | |||
| 90 | @return ( | 90 | @return ( |
| 91 | --hi: blend.scale($base, $lightness: 15%, $chroma: 20%), | 91 | --hi: blend.scale($base, $lightness: 15%, $chroma: 20%), |
| 92 | --main: $base, | 92 | --main: $base, |
| 93 | --lo: blend.scale($base, $lightness: -15%), | 93 | --lo: blend.scale($base, $lightness: -15%, $chroma: -20%), |
| 94 | --lo2: blend.scale($base, $lightness: -25%), | 94 | --lo2: blend.scale($base, $lightness: -25%, $chroma: -40%), |
| 95 | --semi: rgba($base, .4), | ||
| 95 | --selection: rgba($base, .99), | 96 | --selection: rgba($base, .99), |
| 96 | --fg: #fff, | 97 | --fg: #fff, |
| 97 | ); | 98 | ); |
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index e908fdf..2c922f8 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
| @@ -32,6 +32,12 @@ | |||
| 32 | --disabled: ( | 32 | --disabled: ( |
| 33 | --label: fn.global-color(--fg-hi3), | 33 | --label: fn.global-color(--fg-hi3), |
| 34 | ), | 34 | ), |
| 35 | --key-focus: ( | ||
| 36 | --bg: fn.global-color(--obj-hi), | ||
| 37 | --label: fn.global-color(--fg-lo), | ||
| 38 | --border: fn.global-color(--focus --fill), | ||
| 39 | --shadow: fn.global-color(--focus --shadow), | ||
| 40 | ), | ||
| 35 | ), | 41 | ), |
| 36 | ), | 42 | ), |
| 37 | ), 'colors'); | 43 | ), 'colors'); |
| @@ -76,7 +82,8 @@ | |||
| 76 | display: block; | 82 | display: block; |
| 77 | box-sizing: border-box; | 83 | box-sizing: border-box; |
| 78 | width: 100%; | 84 | width: 100%; |
| 79 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | 85 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); |
| 86 | border: 2px solid transparent; | ||
| 80 | color: fn.color(--item --disabled --label); | 87 | color: fn.color(--item --disabled --label); |
| 81 | 88 | ||
| 82 | &:link, | 89 | &:link, |
| @@ -97,6 +104,20 @@ | |||
| 97 | color: currentColor; | 104 | color: currentColor; |
| 98 | } | 105 | } |
| 99 | } | 106 | } |
| 107 | |||
| 108 | @include iro.bem-at-theme('keyboard') { | ||
| 109 | &:focus { | ||
| 110 | border-radius: 2px; | ||
| 111 | border-color: fn.color(--item --key-focus --border); | ||
| 112 | background-color: fn.color(--item --key-focus --bg); | ||
| 113 | box-shadow: fn.color(--item --key-focus --shadow); | ||
| 114 | color: fn.color(--item --key-focus --label); | ||
| 115 | |||
| 116 | @include iro.bem-elem('icon') { | ||
| 117 | color: currentColor; | ||
| 118 | } | ||
| 119 | } | ||
| 120 | } | ||
| 100 | } | 121 | } |
| 101 | } | 122 | } |
| 102 | 123 | ||
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 0df0148..e5fcfaa 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
| @@ -51,7 +51,7 @@ | |||
| 51 | ), | 51 | ), |
| 52 | --key-focus: ( | 52 | --key-focus: ( |
| 53 | --bg: transparent, | 53 | --bg: transparent, |
| 54 | --label: fn.global-color(--accent --primary --lo2), | 54 | --label: fn.global-color(--focus --text), |
| 55 | --border: fn.global-color(--focus --fill), | 55 | --border: fn.global-color(--focus --fill), |
| 56 | --shadow: fn.global-color(--focus --shadow), | 56 | --shadow: fn.global-color(--focus --shadow), |
| 57 | ), | 57 | ), |
