diff options
-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 | ), |