summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 14:02:52 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 14:02:52 +0100
commitdefdf4ede0f42134c076b6a2c70519e2db629fba (patch)
tree6b9116114724c14ce1f1bb7015ff717e2f9e40be /src
parentImproved action menu (diff)
downloadiro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.tar.gz
iro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.tar.bz2
iro-design-defdf4ede0f42134c076b6a2c70519e2db629fba.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_vars.scss5
-rw-r--r--src/objects/_action-menu.scss23
-rw-r--r--src/objects/_button.scss2
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 ),