diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_objects.scss | 4 | ||||
-rw-r--r-- | src/objects/_badge.scss | 8 | ||||
-rw-r--r-- | src/objects/_button.scss | 30 | ||||
-rw-r--r-- | src/objects/_field-label.scss (renamed from src/.old/objects/_field-label.scss) | 57 | ||||
-rw-r--r-- | src/objects/_text-field.scss (renamed from src/.old/objects/_text-field.scss) | 129 |
5 files changed, 110 insertions, 118 deletions
diff --git a/src/_objects.scss b/src/_objects.scss index 68bf3a7..3dd5176 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -4,8 +4,8 @@ | |||
4 | @use 'objects/divider'; | 4 | @use 'objects/divider'; |
5 | @use 'objects/badge'; | 5 | @use 'objects/badge'; |
6 | @use 'objects/button'; | 6 | @use 'objects/button'; |
7 | // @use 'objects/text-field'; | 7 | @use 'objects/text-field'; |
8 | // @use 'objects/field-label'; | 8 | @use 'objects/field-label'; |
9 | // @use 'objects/radio'; | 9 | // @use 'objects/radio'; |
10 | // @use 'objects/checkbox'; | 10 | // @use 'objects/checkbox'; |
11 | // @use 'objects/switch'; | 11 | // @use 'objects/switch'; |
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 0d95751..23ae305 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -12,19 +12,19 @@ $themes: accent positive negative warning; | |||
12 | --rounding: fn.global-dim(--rounding), | 12 | --rounding: fn.global-dim(--rounding), |
13 | --font-size: fn.global-dim(--font-size --100), | 13 | --font-size: fn.global-dim(--font-size --100), |
14 | 14 | ||
15 | --50: ( | 15 | --sm: ( |
16 | --pad-b: fn.global-dim(--size --50), | 16 | --pad-b: fn.global-dim(--size --50), |
17 | --pad-i: fn.global-dim(--size --115), | 17 | --pad-i: fn.global-dim(--size --115), |
18 | --pad-i-pill: fn.global-dim(--size --150), | 18 | --pad-i-pill: fn.global-dim(--size --150), |
19 | --font-size: fn.global-dim(--font-size --75), | 19 | --font-size: fn.global-dim(--font-size --75), |
20 | ), | 20 | ), |
21 | --200: ( | 21 | --lg: ( |
22 | --pad-b: fn.global-dim(--size --125), | 22 | --pad-b: fn.global-dim(--size --125), |
23 | --pad-i: fn.global-dim(--size --175), | 23 | --pad-i: fn.global-dim(--size --175), |
24 | --pad-i-pill: fn.global-dim(--size --225), | 24 | --pad-i-pill: fn.global-dim(--size --225), |
25 | --font-size: fn.global-dim(--font-size --150), | 25 | --font-size: fn.global-dim(--font-size --150), |
26 | ), | 26 | ), |
27 | --300: ( | 27 | --xl: ( |
28 | --pad-b: fn.global-dim(--size --160), | 28 | --pad-b: fn.global-dim(--size --160), |
29 | --pad-i: fn.global-dim(--size --225), | 29 | --pad-i: fn.global-dim(--size --225), |
30 | --pad-i-pill: fn.global-dim(--size --300), | 30 | --pad-i-pill: fn.global-dim(--size --300), |
@@ -179,7 +179,7 @@ $themes: accent positive negative warning; | |||
179 | border-radius: 10em; | 179 | border-radius: 10em; |
180 | } | 180 | } |
181 | 181 | ||
182 | @each $size in '50' '200' '300' { | 182 | @each $size in sm lg xl { |
183 | @include iro.bem-modifier($size) { | 183 | @include iro.bem-modifier($size) { |
184 | padding-block: fn.dim(--#{$size} --pad-b); | 184 | padding-block: fn.dim(--#{$size} --pad-b); |
185 | padding-inline: fn.dim(--#{$size} --pad-i); | 185 | padding-inline: fn.dim(--#{$size} --pad-i); |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index d3588f6..a823f17 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -47,11 +47,24 @@ $themes: primary accent positive negative warning; | |||
47 | --line-height: 1.4, | 47 | --line-height: 1.4, |
48 | --pad-i: fn.global-dim(--size --225), | 48 | --pad-i: fn.global-dim(--size --225), |
49 | --pad-b: fn.global-dim(--size --65), | 49 | --pad-b: fn.global-dim(--size --65), |
50 | --border: fn.global-dim(--border --medium), | ||
50 | --rounding: 10em, | 51 | --rounding: 10em, |
52 | --font-size: fn.global-dim(--font-size --100), | ||
51 | 53 | ||
54 | --sm: ( | ||
55 | --pad-i: fn.global-dim(--size --150), | ||
56 | --pad-b: fn.global-dim(--size --25), | ||
57 | --font-size: fn.global-dim(--font-size --75), | ||
58 | ), | ||
52 | --lg: ( | 59 | --lg: ( |
53 | --pad-i: fn.global-dim(--size --300), | 60 | --pad-i: fn.global-dim(--size --300), |
54 | --pad-b: fn.global-dim(--size --100), | 61 | --pad-b: fn.global-dim(--size --100), |
62 | --font-size: fn.global-dim(--font-size --150), | ||
63 | ), | ||
64 | --xl: ( | ||
65 | --pad-i: fn.global-dim(--size --400), | ||
66 | --pad-b: fn.global-dim(--size --150), | ||
67 | --font-size: fn.global-dim(--font-size --200), | ||
55 | ), | 68 | ), |
56 | ), | 69 | ), |
57 | --colors: ( | 70 | --colors: ( |
@@ -121,11 +134,12 @@ $themes: primary accent positive negative warning; | |||
121 | display: inline-block; | 134 | display: inline-block; |
122 | padding-block: fn.dim(--pad-b); | 135 | padding-block: fn.dim(--pad-b); |
123 | padding-inline: fn.dim(--pad-i); | 136 | padding-inline: fn.dim(--pad-i); |
124 | border: 2px solid transparent; | 137 | border: fn.dim(--border) solid transparent; |
125 | border-radius: fn.dim(--rounding); | 138 | border-radius: fn.dim(--rounding); |
126 | border-color: fn.color(--disabled --bg); | 139 | border-color: fn.color(--disabled --bg); |
127 | background-color: fn.color(--disabled --bg); | 140 | background-color: fn.color(--disabled --bg); |
128 | color: fn.color(--disabled --label); | 141 | color: fn.color(--disabled --label); |
142 | font-size: fn.dim(--font-size); | ||
129 | font-weight: 500; | 143 | font-weight: 500; |
130 | line-height: fn.dim(--line-height); | 144 | line-height: fn.dim(--line-height); |
131 | text-align: center; | 145 | text-align: center; |
@@ -141,9 +155,12 @@ $themes: primary accent positive negative warning; | |||
141 | box-shadow: none; | 155 | box-shadow: none; |
142 | } | 156 | } |
143 | 157 | ||
144 | @include iro.bem-modifier('lg') { | 158 | @each $size in sm lg xl { |
145 | padding-block: fn.dim(--lg --pad-b); | 159 | @include iro.bem-modifier($size) { |
146 | padding-inline: fn.dim(--lg --pad-i); | 160 | padding-block: fn.dim(--#{$size} --pad-b); |
161 | padding-inline: fn.dim(--#{$size} --pad-i); | ||
162 | font-size: fn.dim(--#{$size} --font-size); | ||
163 | } | ||
147 | } | 164 | } |
148 | 165 | ||
149 | @include button-variant(); | 166 | @include button-variant(); |
@@ -160,6 +177,7 @@ $themes: primary accent positive negative warning; | |||
160 | &:focus-visible { | 177 | &:focus-visible { |
161 | border-color: fn.color(--key-focus --border); | 178 | border-color: fn.color(--key-focus --border); |
162 | background-color: fn.color(--key-focus --bg); | 179 | background-color: fn.color(--key-focus --bg); |
180 | box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); | ||
163 | color: fn.color(--key-focus --label); | 181 | color: fn.color(--key-focus --label); |
164 | } | 182 | } |
165 | } | 183 | } |
diff --git a/src/.old/objects/_field-label.scss b/src/objects/_field-label.scss index 2127a09..9f267cb 100644 --- a/src/.old/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -4,49 +4,46 @@ | |||
4 | @include iro.props-namespace('field-label') { | 4 | @include iro.props-namespace('field-label') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --spacing-x: fn.global-dim(--size --150), | 7 | --spacing-i: fn.global-dim(--size --150), |
8 | --spacing-y: fn.global-dim(--size --85), | 8 | --spacing-b: fn.global-dim(--size --85), |
9 | --label-font-size: fn.global-dim(--font-size --75), | 9 | --label-font-size: fn.global-dim(--font-size --75), |
10 | --hint-font-size: fn.global-dim(--font-size --75), | 10 | --hint-font-size: fn.global-dim(--font-size --75), |
11 | ), | 11 | ), |
12 | ), 'dims'); | ||
13 | |||
14 | @include iro.props-store(( | ||
15 | --colors: ( | 12 | --colors: ( |
16 | --label: fn.global-color(--fg-hi), | 13 | --label: fn.global-color(--text-mute), |
17 | --hint: fn.global-color(--fg-hi), | 14 | --hint: fn.global-color(--text-mute), |
18 | --error-hint: fn.global-color(--accent --error --quiet --fg), | 15 | --error-hint: fn.global-color(--negative --900), |
19 | --disabled: fn.global-color(--fg-hi3), | 16 | --disabled: fn.global-color(--text-disabled), |
20 | ), | 17 | ), |
21 | ), 'colors'); | 18 | )); |
22 | 19 | ||
23 | @include iro.bem-object(iro.props-namespace()) { | 20 | @include iro.bem-object(iro.props-namespace()) { |
24 | display: block; | 21 | display: block; |
25 | 22 | ||
26 | @include iro.bem-elem('label') { | 23 | @include iro.bem-elem('label') { |
27 | display: block; | 24 | display: block; |
28 | flex: 0 0 auto; | 25 | flex: 0 0 auto; |
29 | padding-right: fn.dim(--spacing-x); | 26 | padding-inline-end: fn.dim(--spacing-i); |
30 | color: fn.color(--label); | 27 | color: fn.color(--label); |
31 | font-size: fn.dim(--label-font-size); | 28 | font-size: fn.dim(--label-font-size); |
32 | font-weight: 400; | 29 | font-weight: 400; |
33 | line-height: 1.3; | 30 | line-height: 1.3; |
34 | 31 | ||
35 | @include iro.bem-next-elem('content') { | 32 | @include iro.bem-next-elem('content') { |
36 | margin-top: fn.dim(--spacing-y); | 33 | margin-block-start: fn.dim(--spacing-b); |
37 | } | 34 | } |
38 | } | 35 | } |
39 | 36 | ||
40 | @include iro.bem-elem('content') { | 37 | @include iro.bem-elem('content') { |
41 | display: block; | 38 | display: block; |
42 | width: 100%; | 39 | inline-size: 100%; |
43 | } | 40 | } |
44 | 41 | ||
45 | @include iro.bem-elem('hint') { | 42 | @include iro.bem-elem('hint') { |
46 | display: block; | 43 | display: block; |
47 | margin-top: fn.dim(--spacing-y); | 44 | margin-block-start: fn.dim(--spacing-b); |
48 | color: fn.color(--hint); | 45 | color: fn.color(--hint); |
49 | font-size: fn.dim(--hint-font-size); | 46 | font-size: fn.dim(--hint-font-size); |
50 | } | 47 | } |
51 | 48 | ||
52 | @include iro.bem-is('invalid') { | 49 | @include iro.bem-is('invalid') { |
@@ -61,7 +58,7 @@ | |||
61 | } | 58 | } |
62 | } | 59 | } |
63 | 60 | ||
64 | @include iro.bem-modifier('left', 'right') { | 61 | @include iro.bem-modifier('align-start', 'align-end') { |
65 | display: flex; | 62 | display: flex; |
66 | align-items: baseline; | 63 | align-items: baseline; |
67 | 64 | ||
@@ -69,20 +66,20 @@ | |||
69 | display: inline-block; | 66 | display: inline-block; |
70 | 67 | ||
71 | @include iro.bem-next-elem('content') { | 68 | @include iro.bem-next-elem('content') { |
72 | margin-top: 0; | 69 | margin-block-start: 0; |
73 | } | 70 | } |
74 | } | 71 | } |
75 | } | 72 | } |
76 | 73 | ||
77 | @include iro.bem-modifier('left') { | 74 | @include iro.bem-modifier('align-start') { |
78 | @include iro.bem-elem('label') { | 75 | @include iro.bem-elem('label') { |
79 | text-align: left; | 76 | text-align: start; |
80 | } | 77 | } |
81 | } | 78 | } |
82 | 79 | ||
83 | @include iro.bem-modifier('right') { | 80 | @include iro.bem-modifier('align-end') { |
84 | @include iro.bem-elem('label') { | 81 | @include iro.bem-elem('label') { |
85 | text-align: right; | 82 | text-align: end; |
86 | } | 83 | } |
87 | } | 84 | } |
88 | } | 85 | } |
diff --git a/src/.old/objects/_text-field.scss b/src/objects/_text-field.scss index 88c4535..de5bcd1 100644 --- a/src/.old/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -2,126 +2,116 @@ | |||
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @mixin invalid { | 4 | @mixin invalid { |
5 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | ||
6 | |||
5 | @include iro.bem-sibling-elem('bg') { | 7 | @include iro.bem-sibling-elem('bg') { |
6 | border-color: fn.color(--error --border); | 8 | inset-block: $focus-border-offset; |
7 | box-shadow: fn.color(--error --shadow); | 9 | inset-inline: $focus-border-offset; |
10 | border: fn.dim(--focus --border) solid fn.color(--error --border); | ||
11 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | ||
8 | } | 12 | } |
9 | 13 | ||
10 | &:hover { | 14 | &:hover { |
11 | @include iro.bem-sibling-elem('bg') { | 15 | @include iro.bem-sibling-elem('bg') { |
12 | border-color: fn.color(--error --hover --border); | 16 | border-color: fn.color(--error --hover --border); |
13 | box-shadow: fn.color(--error --hover --shadow); | ||
14 | } | 17 | } |
15 | } | 18 | } |
16 | 19 | ||
17 | &:focus { | 20 | &:focus { |
18 | @include iro.bem-sibling-elem('bg') { | 21 | @include iro.bem-sibling-elem('bg') { |
19 | border-color: fn.color(--error --focus --border); | 22 | border-color: fn.color(--error --focus --border); |
20 | box-shadow: fn.color(--error --focus --shadow); | ||
21 | } | 23 | } |
22 | } | 24 | } |
23 | } | 25 | } |
24 | 26 | ||
25 | @mixin keyboard-focus { | 27 | @mixin keyboard-focus { |
26 | @include iro.bem-sibling-elem('bg') { | 28 | @include iro.bem-sibling-elem('bg') { |
27 | border-color: fn.color(--key-focus --border); | 29 | border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border); |
28 | box-shadow: fn.color(--key-focus --shadow); | ||
29 | } | 30 | } |
30 | } | 31 | } |
31 | 32 | ||
32 | @include iro.props-namespace('text-field') { | 33 | @include iro.props-namespace('text-field') { |
33 | @include iro.props-store(( | 34 | @include iro.props-store(( |
34 | --dims: ( | 35 | --dims: ( |
35 | --pad-x: fn.global-dim(--size --125), | 36 | --line-height: 1.4, |
36 | --pad-y: fn.global-dim(--size --125), | 37 | --pad-i: fn.global-dim(--size --125), |
37 | --border: fn.global-dim(--border --thin), | 38 | --pad-b: fn.global-dim(--size --125), |
38 | --rounding: 2px, | 39 | --border: fn.global-dim(--border --thin), |
40 | --rounding: fn.global-dim(--rounding), | ||
39 | 41 | ||
40 | --extended: ( | 42 | --extended: ( |
41 | --pad: fn.global-dim(--size --50), | 43 | --pad: fn.global-dim(--size --50), |
42 | --rounding: 6px, | ||
43 | ), | 44 | ), |
44 | 45 | ||
45 | --focus: ( | 46 | --focus: ( |
46 | --border: fn.global-dim(--border --medium), | 47 | --border: fn.global-dim(--border --medium), |
48 | ), | ||
49 | --key-focus: ( | ||
50 | --border: fn.global-dim(--border --thick), | ||
47 | ) | 51 | ) |
48 | ), | 52 | ), |
49 | ), 'dims'); | ||
50 | |||
51 | @include iro.props-store(( | ||
52 | --colors: ( | 53 | --colors: ( |
53 | --bg: fn.global-color(--bg-hi2), | 54 | --bg: fn.global-color(--base --50), |
54 | --placeholder: fn.global-color(--fg-hi2), | 55 | --placeholder: fn.global-color(--text-mute-more), |
55 | --text: fn.global-color(--fg), | 56 | --text: fn.global-color(--text), |
56 | --border: fn.global-color(--obj-lo), | 57 | --border: fn.global-color(--border-strong), |
57 | --shadow: 0 0 0 0 transparent, | ||
58 | 58 | ||
59 | --hover: ( | 59 | --hover: ( |
60 | --border: fn.global-color(--fg-hi2), | 60 | --border: fn.global-color(--text-mute-more), |
61 | --shadow: 0 0 0 0 transparent, | ||
62 | ), | 61 | ), |
63 | --focus: ( | 62 | --focus: ( |
64 | --border: fn.global-color(--accent --primary --solid --bg), | 63 | --border: fn.global-color(--accent --900), |
65 | --shadow: 0 0 0 0 transparent, | ||
66 | ), | 64 | ), |
67 | --key-focus: ( | 65 | --key-focus: ( |
68 | --border: fn.global-color(--focus --fill), | 66 | --border: fn.global-color(--yellow-static --400), |
69 | --shadow: fn.global-color(--focus --shadow), | ||
70 | ), | 67 | ), |
71 | --error: ( | 68 | --error: ( |
72 | --border: fn.global-color(--accent --error --solid --bg-hi), | 69 | --border: fn.global-color(--negative --900), |
73 | --shadow: 0 0 0 0 transparent, | ||
74 | 70 | ||
75 | --hover: ( | 71 | --hover: ( |
76 | --border: fn.global-color(--accent --error --solid --bg), | 72 | --border: fn.global-color(--negative --800), |
77 | --shadow: 0 0 0 0 transparent, | ||
78 | ), | 73 | ), |
79 | --focus: ( | 74 | --focus: ( |
80 | --border: fn.global-color(--accent --error --solid --bg), | 75 | --border: fn.global-color(--negative --800), |
81 | --shadow: 0 0 0 0 transparent, | ||
82 | ), | 76 | ), |
83 | ), | 77 | ), |
84 | --disabled: ( | 78 | --disabled: ( |
85 | --bg: fn.global-color(--obj-hi), | 79 | --bg: fn.global-color(--border-mute), |
86 | --placeholder: fn.global-color(--fg-hi3), | 80 | --placeholder: fn.global-color(--text-disabled), |
87 | --text: fn.global-color(--fg-hi3), | 81 | --text: fn.global-color(--text-disabled), |
88 | --border: fn.global-color(--obj-hi), | 82 | --border: fn.global-color(--border-mute), |
89 | --shadow: 0 0 0 0 transparent, | ||
90 | ), | 83 | ), |
91 | ), | 84 | ), |
92 | ), 'colors'); | 85 | )); |
93 | 86 | ||
94 | @include iro.bem-object(iro.props-namespace()) { | 87 | @include iro.bem-object(iro.props-namespace()) { |
95 | $line-height: 1.4; | ||
96 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | 88 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); |
97 | 89 | ||
98 | position: relative; | 90 | position: relative; |
99 | min-width: 0; | 91 | min-inline-size: 0; |
100 | border-radius: fn.dim(--rounding); | 92 | border-radius: fn.dim(--rounding); |
101 | background-color: fn.color(--bg); | 93 | background-color: fn.color(--bg); |
102 | 94 | ||
103 | @include iro.bem-elem('bg') { | 95 | @include iro.bem-elem('bg') { |
104 | display: block; | 96 | display: block; |
105 | position: absolute; | 97 | position: absolute; |
106 | top: 0; | 98 | inset-block: 0; |
107 | right: 0; | 99 | inset-inline: 0; |
108 | bottom: 0; | 100 | border: fn.dim(--border) solid fn.color(--border); |
109 | left: 0; | 101 | border-radius: fn.dim(--rounding); |
110 | border: fn.dim(--border) solid fn.color(--border); | 102 | pointer-events: none; |
111 | border-radius: fn.dim(--rounding); | ||
112 | box-shadow: fn.color(--shadow); | ||
113 | pointer-events: none; | ||
114 | } | 103 | } |
115 | 104 | ||
116 | @include iro.bem-elem('native') { | 105 | @include iro.bem-elem('native') { |
117 | box-sizing: border-box; | 106 | box-sizing: border-box; |
118 | width: 100%; | 107 | inline-size: 100%; |
119 | padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x); | 108 | padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); |
109 | padding-inline: fn.dim(--pad-i); | ||
120 | border: 1px solid transparent; | 110 | border: 1px solid transparent; |
121 | background-color: transparent; | 111 | background-color: transparent; |
122 | color: fn.color(--text); | 112 | color: fn.color(--text); |
123 | font: inherit; | 113 | font: inherit; |
124 | line-height: $line-height; | 114 | line-height: fn.dim(--line-height); |
125 | resize: none; | 115 | resize: none; |
126 | appearance: none; | 116 | appearance: none; |
127 | 117 | ||
@@ -134,7 +124,6 @@ | |||
134 | &:hover { | 124 | &:hover { |
135 | @include iro.bem-sibling-elem('bg') { | 125 | @include iro.bem-sibling-elem('bg') { |
136 | border-color: fn.color(--hover --border); | 126 | border-color: fn.color(--hover --border); |
137 | box-shadow: fn.color(--hover --shadow); | ||
138 | } | 127 | } |
139 | } | 128 | } |
140 | 129 | ||
@@ -142,19 +131,21 @@ | |||
142 | outline: 0; | 131 | outline: 0; |
143 | 132 | ||
144 | @include iro.bem-sibling-elem('bg') { | 133 | @include iro.bem-sibling-elem('bg') { |
145 | top: $focus-border-offset; | 134 | inset-block: $focus-border-offset; |
146 | right: $focus-border-offset; | 135 | inset-inline: $focus-border-offset; |
147 | bottom: $focus-border-offset; | ||
148 | left: $focus-border-offset; | ||
149 | border: fn.dim(--focus --border) solid fn.color(--focus --border); | 136 | border: fn.dim(--focus --border) solid fn.color(--focus --border); |
150 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | 137 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); |
151 | box-shadow: fn.color(--focus --shadow); | ||
152 | } | 138 | } |
153 | } | 139 | } |
154 | 140 | ||
155 | &:invalid { | 141 | &:invalid { |
156 | @include invalid; | 142 | @include invalid; |
157 | } | 143 | } |
144 | |||
145 | &:focus-visible, | ||
146 | &:invalid:focus-visible { | ||
147 | @include keyboard-focus; | ||
148 | } | ||
158 | } | 149 | } |
159 | 150 | ||
160 | @include iro.bem-modifier('extended') { | 151 | @include iro.bem-modifier('extended') { |
@@ -167,7 +158,7 @@ | |||
167 | @include iro.bem-elem('native') { | 158 | @include iro.bem-elem('native') { |
168 | &:focus { | 159 | &:focus { |
169 | @include iro.bem-sibling-elem('bg') { | 160 | @include iro.bem-sibling-elem('bg') { |
170 | border-radius: calc(fn.dim(--extended --rounding) - $focus-border-offset); | 161 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); |
171 | } | 162 | } |
172 | } | 163 | } |
173 | } | 164 | } |
@@ -176,29 +167,15 @@ | |||
176 | @include iro.bem-is('invalid') { | 167 | @include iro.bem-is('invalid') { |
177 | @include iro.bem-elem('native') { | 168 | @include iro.bem-elem('native') { |
178 | @include invalid; | 169 | @include invalid; |
179 | } | ||
180 | } | ||
181 | 170 | ||
182 | @include iro.bem-at-theme('keyboard') { | 171 | &:focus-visible { |
183 | @include iro.bem-elem('native') { | ||
184 | &:focus, | ||
185 | &:invalid:focus { | ||
186 | @include keyboard-focus; | 172 | @include keyboard-focus; |
187 | } | 173 | } |
188 | } | 174 | } |
189 | |||
190 | @include iro.bem-is('invalid') { | ||
191 | @include iro.bem-elem('native') { | ||
192 | &:focus { | ||
193 | @include keyboard-focus; | ||
194 | } | ||
195 | } | ||
196 | } | ||
197 | } | 175 | } |
198 | 176 | ||
199 | @include iro.bem-is('disabled') { | 177 | @include iro.bem-is('disabled') { |
200 | background-color: fn.color(--disabled --bg); | 178 | background-color: fn.color(--disabled --bg); |
201 | box-shadow: fn.color(--disabled --shadow); | ||
202 | 179 | ||
203 | @include iro.bem-elem('native') { | 180 | @include iro.bem-elem('native') { |
204 | color: fn.color(--disabled --text); | 181 | color: fn.color(--disabled --text); |