diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 69 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 3 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 83 | ||||
-rw-r--r-- | src/objects/_divider.scss (renamed from src/objects/_rule.scss) | 2 | ||||
-rw-r--r-- | src/objects/_header.scss | 31 | ||||
-rw-r--r-- | src/objects/_heading.scss | 17 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 2 | ||||
-rw-r--r-- | src/objects/_list-group.scss | 2 | ||||
-rw-r--r-- | src/objects/_sidebar.scss | 36 | ||||
-rw-r--r-- | src/objects/_table.scss | 2 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 36 |
11 files changed, 157 insertions, 126 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 83321da..2dcbb12 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -15,44 +15,33 @@ | |||
15 | --bg: fn.global-color(--bg-hi), | 15 | --bg: fn.global-color(--bg-hi), |
16 | --label: fn.global-color(--fg), | 16 | --label: fn.global-color(--fg), |
17 | --border: fn.global-color(--obj-lo), | 17 | --border: fn.global-color(--obj-lo), |
18 | --shadow: 0 0 0 0 transparent, | ||
19 | 18 | ||
20 | --hover: ( | 19 | --hover: ( |
21 | --bg: fn.global-color(--bg-hi2), | 20 | --bg: fn.global-color(--bg-hi2), |
22 | --label: fn.global-color(--fg-lo), | 21 | --label: fn.global-color(--fg-lo), |
23 | --border: fn.global-color(--fg-hi2), | 22 | --border: fn.global-color(--fg-hi2), |
24 | --shadow: 0 0 0 0 transparent, | ||
25 | ), | 23 | ), |
26 | --active: ( | 24 | --active: ( |
27 | --bg: fn.global-color(--obj-hi), | 25 | --bg: fn.global-color(--obj-hi), |
28 | --label: fn.global-color(--fg-lo), | 26 | --label: fn.global-color(--fg-lo), |
29 | --border: fn.global-color(--fg-hi2), | 27 | --border: fn.global-color(--fg-hi2), |
30 | --shadow: 0 0 0 0 transparent, | ||
31 | ), | 28 | ), |
32 | --selected: ( | 29 | --selected: ( |
33 | --bg: fn.global-color(--obj-hi), | 30 | --bg: fn.global-color(--obj-hi), |
34 | --label: fn.global-color(--fg), | 31 | --label: fn.global-color(--fg), |
35 | --border: fn.global-color(--fg-hi3), | 32 | --border: fn.global-color(--fg-hi3), |
36 | --shadow: 0 0 0 0 transparent, | ||
37 | 33 | ||
38 | --hover: ( | 34 | --hover: ( |
39 | --label: fn.global-color(--fg-lo), | 35 | --label: fn.global-color(--fg-lo), |
40 | --border: fn.global-color(--fg-hi2), | 36 | --border: fn.global-color(--fg-hi2), |
41 | --shadow: 0 0 0 0 transparent, | ||
42 | ), | ||
43 | --key-focus: ( | ||
44 | --bg: fn.global-color(--obj-hi), | ||
45 | ), | 37 | ), |
46 | ), | 38 | ), |
47 | --disabled: ( | 39 | --disabled: ( |
48 | --bg: fn.global-color(--obj-hi), | 40 | --bg: fn.global-color(--obj-hi), |
49 | --label: fn.global-color(--fg-hi3), | 41 | --label: fn.global-color(--fg-hi3), |
50 | --border: fn.global-color(--obj-hi), | 42 | --border: fn.global-color(--obj-hi), |
51 | --shadow: 0 0 0 0 transparent, | ||
52 | ), | 43 | ), |
53 | --key-focus: ( | 44 | --key-focus: ( |
54 | --bg: fn.global-color(--bg-hi2), | ||
55 | --label: fn.global-color(--fg-lo), | ||
56 | --border: fn.global-color(--focus --fill), | 45 | --border: fn.global-color(--focus --fill), |
57 | --shadow: fn.global-color(--focus --shadow), | 46 | --shadow: fn.global-color(--focus --shadow), |
58 | ), | 47 | ), |
@@ -74,19 +63,10 @@ | |||
74 | --hover: ( | 63 | --hover: ( |
75 | --label: fn.global-color(--fg-lo), | 64 | --label: fn.global-color(--fg-lo), |
76 | ), | 65 | ), |
77 | --key-focus: ( | ||
78 | --bg: fn.global-color(--obj), | ||
79 | ), | ||
80 | ), | 66 | ), |
81 | --disabled: ( | 67 | --disabled: ( |
82 | --label: fn.global-color(--fg-hi3), | 68 | --label: fn.global-color(--fg-hi3), |
83 | ), | 69 | ), |
84 | --key-focus: ( | ||
85 | --bg: fn.global-color(--bg-hi2), | ||
86 | --label: fn.global-color(--fg-lo), | ||
87 | --border: fn.global-color(--focus --fill), | ||
88 | --shadow: fn.global-color(--focus --shadow), | ||
89 | ), | ||
90 | ), | 70 | ), |
91 | ), | 71 | ), |
92 | ), 'colors'); | 72 | ), 'colors'); |
@@ -98,7 +78,6 @@ | |||
98 | border: 1px solid fn.color(--disabled --border); | 78 | border: 1px solid fn.color(--disabled --border); |
99 | border-radius: fn.dim(--rounding); | 79 | border-radius: fn.dim(--rounding); |
100 | background-color: fn.color(--disabled --bg); | 80 | background-color: fn.color(--disabled --bg); |
101 | box-shadow: fn.color(--disabled --shadow); | ||
102 | color: fn.color(--disabled --label); | 81 | color: fn.color(--disabled --label); |
103 | line-height: 1; | 82 | line-height: 1; |
104 | text-align: center; | 83 | text-align: center; |
@@ -111,59 +90,36 @@ | |||
111 | &:enabled { | 90 | &:enabled { |
112 | border-color: fn.color(--border); | 91 | border-color: fn.color(--border); |
113 | background-color: fn.color(--bg); | 92 | background-color: fn.color(--bg); |
114 | box-shadow: fn.color(--shadow); | ||
115 | color: fn.color(--label); | 93 | color: fn.color(--label); |
116 | 94 | ||
117 | &:hover { | 95 | &:hover { |
118 | border-color: fn.color(--hover --border); | 96 | border-color: fn.color(--hover --border); |
119 | background-color: fn.color(--hover --bg); | 97 | background-color: fn.color(--hover --bg); |
120 | box-shadow: fn.color(--hover --shadow); | ||
121 | color: fn.color(--hover --label); | 98 | color: fn.color(--hover --label); |
122 | } | 99 | } |
123 | 100 | ||
124 | &:active { | 101 | &:active { |
125 | border-color: fn.color(--active --border); | 102 | border-color: fn.color(--active --border); |
126 | background-color: fn.color(--active --bg); | 103 | background-color: fn.color(--active --bg); |
127 | box-shadow: fn.color(--active --shadow); | ||
128 | color: fn.color(--active --label); | 104 | color: fn.color(--active --label); |
129 | } | 105 | } |
130 | } | 106 | } |
131 | 107 | ||
132 | @include iro.bem-at-theme('keyboard') { | ||
133 | &:focus { | ||
134 | border-color: fn.color(--key-focus --border); | ||
135 | background-color: fn.color(--key-focus --bg); | ||
136 | box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
137 | color: fn.color(--key-focus --label); | ||
138 | } | ||
139 | } | ||
140 | |||
141 | @include iro.bem-is('selected') { | 108 | @include iro.bem-is('selected') { |
142 | &:link, | 109 | &:link, |
143 | &:visited, | 110 | &:visited, |
144 | &:enabled { | 111 | &:enabled { |
145 | border-color: fn.color(--selected --border); | 112 | border-color: fn.color(--selected --border); |
146 | background-color: fn.color(--selected --bg); | 113 | background-color: fn.color(--selected --bg); |
147 | box-shadow: fn.color(--selected --shadow); | ||
148 | color: fn.color(--selected --label); | 114 | color: fn.color(--selected --label); |
149 | 115 | ||
150 | &:hover, | 116 | &:hover, |
151 | &:active { | 117 | &:active { |
152 | border-color: fn.color(--selected --hover --border); | 118 | border-color: fn.color(--selected --hover --border); |
153 | background-color: fn.color(--selected --bg); | 119 | background-color: fn.color(--selected --bg); |
154 | box-shadow: fn.color(--selected --hover --shadow); | ||
155 | color: fn.color(--selected --hover --label); | 120 | color: fn.color(--selected --hover --label); |
156 | } | 121 | } |
157 | } | 122 | } |
158 | |||
159 | @include iro.bem-at-theme('keyboard') { | ||
160 | &:focus { | ||
161 | border-color: fn.color(--key-focus --border); | ||
162 | background-color: fn.color(--selected --key-focus --bg); | ||
163 | box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
164 | color: fn.color(--key-focus --label); | ||
165 | } | ||
166 | } | ||
167 | } | 123 | } |
168 | 124 | ||
169 | @include iro.bem-modifier('quiet') { | 125 | @include iro.bem-modifier('quiet') { |
@@ -195,15 +151,6 @@ | |||
195 | } | 151 | } |
196 | } | 152 | } |
197 | 153 | ||
198 | @include iro.bem-at-theme('keyboard') { | ||
199 | &:focus { | ||
200 | border-color: fn.color(--quiet --key-focus --border); | ||
201 | background-color: fn.color(--quiet --key-focus --bg); | ||
202 | box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); | ||
203 | color: fn.color(--quiet --key-focus --label); | ||
204 | } | ||
205 | } | ||
206 | |||
207 | @include iro.bem-is('selected') { | 154 | @include iro.bem-is('selected') { |
208 | background-color: fn.color(--quiet --selected --bg); | 155 | background-color: fn.color(--quiet --selected --bg); |
209 | color: fn.color(--quiet --disabled --label); | 156 | color: fn.color(--quiet --disabled --label); |
@@ -224,14 +171,16 @@ | |||
224 | color: fn.color(--quiet --selected --hover --label); | 171 | color: fn.color(--quiet --selected --hover --label); |
225 | } | 172 | } |
226 | } | 173 | } |
174 | } | ||
175 | } | ||
227 | 176 | ||
228 | @include iro.bem-at-theme('keyboard') { | 177 | @include iro.bem-at-theme('keyboard') { |
229 | &:focus { | 178 | &:link, |
230 | border-color: fn.color(--quiet --key-focus --border); | 179 | &:visited, |
231 | background-color: fn.color(--quiet --selected --key-focus --bg); | 180 | &:enabled { |
232 | box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); | 181 | &:focus { |
233 | color: fn.color(--quiet --key-focus --label); | 182 | border-color: fn.color(--key-focus --border); |
234 | } | 183 | box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); |
235 | } | 184 | } |
236 | } | 185 | } |
237 | } | 186 | } |
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 89c4b3c..88e84d6 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -19,7 +19,7 @@ | |||
19 | @include iro.props-store(( | 19 | @include iro.props-store(( |
20 | --colors: ( | 20 | --colors: ( |
21 | --shadow: 0 .2em .5em rgba(#000, .1), | 21 | --shadow: 0 .2em .5em rgba(#000, .1), |
22 | --border: fn.global-color(--obj-lo), | 22 | --border: rgba(#000, .2), |
23 | --separator: fn.global-color(--obj), | 23 | --separator: fn.global-color(--obj), |
24 | --icon: fn.global-color(--fg-hi), | 24 | --icon: fn.global-color(--fg-hi), |
25 | --item: ( | 25 | --item: ( |
@@ -43,6 +43,7 @@ | |||
43 | @include iro.props-store(( | 43 | @include iro.props-store(( |
44 | --colors: ( | 44 | --colors: ( |
45 | --shadow: 0 .2em .5em rgba(#000, .5), | 45 | --shadow: 0 .2em .5em rgba(#000, .5), |
46 | --border: rgba(#fff, .2), | ||
46 | ), | 47 | ), |
47 | ), 'colors-dark'); | 48 | ), 'colors-dark'); |
48 | 49 | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 54e9c59..f6e8e63 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -1,18 +1,20 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @use 'header'; | ||
5 | |||
4 | @include iro.props-namespace('dialog') { | 6 | @include iro.props-namespace('dialog') { |
5 | @include iro.props-store(( | 7 | @include iro.props-store(( |
6 | --dims: ( | 8 | --dims: ( |
7 | --pad-x: fn.global-dim(--size --300), | ||
8 | --pad-y: fn.global-dim(--size --300), | ||
9 | --width-sm: iro.fn-px-to-rem(500px), | 9 | --width-sm: iro.fn-px-to-rem(500px), |
10 | --width-md: iro.fn-px-to-rem(800px), | 10 | --width-md: iro.fn-px-to-rem(800px), |
11 | --width-lg: iro.fn-px-to-rem(1100px), | 11 | --width-lg: iro.fn-px-to-rem(1100px), |
12 | --rounding: 3px, | 12 | --rounding: 3px, |
13 | --sidebar: ( | 13 | --border: 1px, |
14 | --pad-x: fn.global-dim(--size --150), | 14 | |
15 | --pad-y: fn.global-dim(--size --300), | 15 | --body: ( |
16 | --pad-x: fn.global-dim(--size --200), | ||
17 | --pad-y: fn.global-dim(--size --200), | ||
16 | ) | 18 | ) |
17 | ), | 19 | ), |
18 | ), 'dims'); | 20 | ), 'dims'); |
@@ -26,20 +28,18 @@ | |||
26 | 28 | ||
27 | @include iro.props-store(( | 29 | @include iro.props-store(( |
28 | --colors: ( | 30 | --colors: ( |
31 | --border: rgba(#000, .05), | ||
29 | --shadow: 0 .2em .5em rgba(#000, .2), | 32 | --shadow: 0 .2em .5em rgba(#000, .2), |
33 | |||
30 | --sidebar: ( | 34 | --sidebar: ( |
31 | --bg: fn.global-color(--bg), | ||
32 | --border: fn.global-color(--obj), | 35 | --border: fn.global-color(--obj), |
33 | ) | 36 | ), |
34 | ), | 37 | ), |
35 | ), 'colors'); | 38 | ), 'colors'); |
36 | 39 | ||
37 | @include iro.props-store(( | 40 | @include iro.props-store(( |
38 | --colors: ( | 41 | --colors: ( |
39 | --sidebar: ( | 42 | --border: rgba(#fff, .2), |
40 | --bg: fn.global-color(--bg-hi2), | ||
41 | --border: fn.global-color(--bg-hi2), | ||
42 | ), | ||
43 | ), | 43 | ), |
44 | ), 'colors-dark'); | 44 | ), 'colors-dark'); |
45 | 45 | ||
@@ -48,9 +48,9 @@ | |||
48 | grid-template-rows: auto 1fr auto; | 48 | grid-template-rows: auto 1fr auto; |
49 | grid-template-columns: auto 1fr; | 49 | grid-template-columns: auto 1fr; |
50 | grid-template-areas: | 50 | grid-template-areas: |
51 | 'sidebar header' | 51 | 'sidebar-header header' |
52 | 'sidebar body' | 52 | 'sidebar body' |
53 | 'sidebar footer'; | 53 | 'sidebar footer'; |
54 | position: relative; | 54 | position: relative; |
55 | box-sizing: border-box; | 55 | box-sizing: border-box; |
56 | width: 100%; | 56 | width: 100%; |
@@ -59,7 +59,7 @@ | |||
59 | overflow: hidden; | 59 | overflow: hidden; |
60 | border-radius: fn.dim(--rounding); | 60 | border-radius: fn.dim(--rounding); |
61 | background-color: fn.global-color(--bg); | 61 | background-color: fn.global-color(--bg); |
62 | box-shadow: fn.color(--shadow); | 62 | box-shadow: 0 0 0 1px fn.color(--border), fn.color(--shadow); |
63 | color: fn.global-color(--fg); | 63 | color: fn.global-color(--fg); |
64 | 64 | ||
65 | @include iro.bem-modifier('sm') { | 65 | @include iro.bem-modifier('sm') { |
@@ -70,52 +70,41 @@ | |||
70 | max-width: fn.dim(--width-lg); | 70 | max-width: fn.dim(--width-lg); |
71 | } | 71 | } |
72 | 72 | ||
73 | @include iro.bem-elem('sidebar') { | 73 | @include iro.bem-elem('sidebar-header') { |
74 | grid-area: sidebar; | 74 | grid-area: sidebar-header; |
75 | padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); | 75 | border-right: 1px solid fn.color(--sidebar --border); |
76 | border-right: 1px solid fn.color(--sidebar --border); | 76 | |
77 | background-color: fn.color(--sidebar --bg); | 77 | @include iro.bem-sibling-elem('header') { |
78 | grid-area: header; | ||
79 | } | ||
78 | } | 80 | } |
79 | 81 | ||
80 | @include iro.bem-elem('header') { | 82 | @include iro.bem-elem('header') { |
81 | grid-area: header; | 83 | grid-area: sidebar-header / sidebar-header / header / header; |
82 | margin: fn.dim(--pad-y) fn.dim(--pad-x) 0; | 84 | } |
83 | 85 | ||
84 | @include iro.bem-sibling-elem('body') { | 86 | @include iro.bem-elem('close-btn') { |
85 | &::before { | 87 | margin-left: auto; |
86 | display: none; | ||
87 | } | ||
88 | } | ||
89 | } | 88 | } |
90 | 89 | ||
91 | @include iro.bem-elem('body') { | 90 | @include iro.bem-elem('label') { |
92 | grid-area: body; | 91 | padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x)); |
93 | min-height: 0; | 92 | } |
94 | margin: fn.dim(--pad-y) fn.dim(--pad-x); | ||
95 | 93 | ||
96 | &::before { | 94 | @include iro.bem-elem('sidebar') { |
97 | content: ''; | 95 | grid-area: sidebar; |
98 | width: fn.global-dim(--size --500); | ||
99 | height: fn.global-dim(--size --500); | ||
100 | float: right; | ||
101 | } | ||
102 | } | 96 | } |
103 | 97 | ||
104 | @include iro.bem-elem('close-btn') { | 98 | @include iro.bem-elem('body') { |
105 | position: absolute; | 99 | grid-area: body; |
106 | top: fn.global-dim(--size --150); | 100 | min-height: 0; |
107 | right: fn.global-dim(--size --150); | 101 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); |
108 | font-size: fn.global-dim(--font-size --150); | ||
109 | } | 102 | } |
110 | 103 | ||
111 | @include iro.bem-elem('footer') { | 104 | @include iro.bem-elem('footer') { |
112 | grid-area: footer; | 105 | grid-area: footer; |
113 | justify-content: flex-end; | 106 | justify-content: flex-end; |
114 | margin: 0 fn.dim(--pad-x) fn.dim(--pad-y); | 107 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); |
115 | } | ||
116 | |||
117 | @include iro.bem-elem('title') { | ||
118 | margin-top: 0; | ||
119 | } | 108 | } |
120 | } | 109 | } |
121 | } | 110 | } |
diff --git a/src/objects/_rule.scss b/src/objects/_divider.scss index ba09414..cef598f 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_divider.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @include iro.props-namespace('rule') { | 4 | @include iro.props-namespace('divider') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --margin-y: fn.global-dim(--size --85), | 7 | --margin-y: fn.global-dim(--size --85), |
diff --git a/src/objects/_header.scss b/src/objects/_header.scss new file mode 100644 index 0000000..773d584 --- /dev/null +++ b/src/objects/_header.scss | |||
@@ -0,0 +1,31 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('header') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-x: fn.global-dim(--size --75), | ||
8 | --pad-y: fn.global-dim(--size --75) | ||
9 | ), | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.props-store(( | ||
13 | --colors: ( | ||
14 | --border: fn.global-color(--obj), | ||
15 | ), | ||
16 | ), 'colors'); | ||
17 | |||
18 | @include iro.bem-object(iro.props-namespace()) { | ||
19 | border-bottom: 1px solid fn.color(--border); | ||
20 | |||
21 | @include iro.bem-elem('content') { | ||
22 | display: flex; | ||
23 | box-sizing: border-box; | ||
24 | align-items: center; | ||
25 | height: 100%; | ||
26 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
27 | background-color: fn.global-color(--bg); | ||
28 | color: fn.global-color(--fg); | ||
29 | } | ||
30 | } | ||
31 | } | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 48088ba..3c14c99 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -23,12 +23,15 @@ | |||
23 | @include iro.bem-object(iro.props-namespace()) { | 23 | @include iro.bem-object(iro.props-namespace()) { |
24 | @include mx.set-font(--headline); | 24 | @include mx.set-font(--headline); |
25 | 25 | ||
26 | display: block; | 26 | display: block; |
27 | margin-top: fn.dim(--in-page-margin --top); | ||
28 | margin-bottom: 0; | ||
29 | 27 | ||
30 | & + & { | 28 | @include iro.bem-at-theme('typography') { |
31 | margin-top: fn.dim(--in-page-margin --top-sibling); | 29 | margin-top: fn.dim(--in-page-margin --top); |
30 | margin-bottom: 0; | ||
31 | |||
32 | & + & { | ||
33 | margin-top: fn.dim(--in-page-margin --top-sibling); | ||
34 | } | ||
32 | } | 35 | } |
33 | 36 | ||
34 | @include iro.bem-modifier('xxl') { | 37 | @include iro.bem-modifier('xxl') { |
@@ -54,8 +57,8 @@ | |||
54 | @include iro.bem-modifier('sm') { | 57 | @include iro.bem-modifier('sm') { |
55 | @include mx.set-font(--standard, ( | 58 | @include mx.set-font(--standard, ( |
56 | --line-height: null, | 59 | --line-height: null, |
57 | --size: fn.global-dim(--font-size --100), | 60 | --size: fn.global-dim(--font-size --100), |
58 | --weight: 500 | 61 | --weight: 700 |
59 | )); | 62 | )); |
60 | 63 | ||
61 | color: fn.color(--strong); | 64 | color: fn.color(--strong); |
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index f3addf7..435ff88 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -1,6 +1,8 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @use 'action-button'; | ||
5 | |||
4 | @include iro.props-namespace('lightbox') { | 6 | @include iro.props-namespace('lightbox') { |
5 | @include iro.props-store(( | 7 | @include iro.props-store(( |
6 | --dims: ( | 8 | --dims: ( |
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss index 521bc19..1093ad8 100644 --- a/src/objects/_list-group.scss +++ b/src/objects/_list-group.scss | |||
@@ -31,7 +31,7 @@ | |||
31 | border-top: 1px solid fn.color(--border); | 31 | border-top: 1px solid fn.color(--border); |
32 | } | 32 | } |
33 | 33 | ||
34 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'action') { | 34 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
35 | &:hover { | 35 | &:hover { |
36 | background-color: fn.color(--hover); | 36 | background-color: fn.color(--hover); |
37 | } | 37 | } |
diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss new file mode 100644 index 0000000..bf8dd59 --- /dev/null +++ b/src/objects/_sidebar.scss | |||
@@ -0,0 +1,36 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('sidebar') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-x: fn.global-dim(--size --75), | ||
8 | --pad-y: fn.global-dim(--size --75) | ||
9 | ), | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.props-store(( | ||
13 | --colors: ( | ||
14 | --border: fn.global-color(--obj), | ||
15 | ), | ||
16 | ), 'colors'); | ||
17 | |||
18 | @include iro.bem-object(iro.props-namespace()) { | ||
19 | border-width: 0 1px 0 0; | ||
20 | border-style: solid; | ||
21 | border-color: fn.color(--border); | ||
22 | |||
23 | @include iro.bem-elem('content') { | ||
24 | box-sizing: border-box; | ||
25 | height: 100%; | ||
26 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
27 | background-color: fn.global-color(--bg); | ||
28 | color: fn.global-color(--fg); | ||
29 | } | ||
30 | |||
31 | @include iro.bem-modifier('right') { | ||
32 | border-right-width: 0; | ||
33 | border-left-width: 1px; | ||
34 | } | ||
35 | } | ||
36 | } | ||
diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 410492b..1365d05 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss | |||
@@ -5,7 +5,7 @@ | |||
5 | @include iro.props-namespace('table') { | 5 | @include iro.props-namespace('table') { |
6 | @include iro.props-store(( | 6 | @include iro.props-store(( |
7 | --dims: ( | 7 | --dims: ( |
8 | --pad-x: fn.global-dim(--size --200), | 8 | --pad-x: fn.global-dim(--size --175), |
9 | --pad-y: fn.global-dim(--size --125), | 9 | --pad-y: fn.global-dim(--size --125), |
10 | --rounding: 3px, | 10 | --rounding: 3px, |
11 | --50: ( | 11 | --50: ( |
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index e9330ce..1e18f0a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -37,6 +37,11 @@ | |||
37 | --border-width: fn.global-dim(--border-width --thin), | 37 | --border-width: fn.global-dim(--border-width --thin), |
38 | --border-radius: 2px, | 38 | --border-radius: 2px, |
39 | 39 | ||
40 | --extended: ( | ||
41 | --pad: fn.global-dim(--size --50), | ||
42 | --border-radius: 6px, | ||
43 | ), | ||
44 | |||
40 | --focus: ( | 45 | --focus: ( |
41 | --border-width: fn.global-dim(--border-width --medium), | 46 | --border-width: fn.global-dim(--border-width --medium), |
42 | ) | 47 | ) |
@@ -87,7 +92,8 @@ | |||
87 | ), 'colors'); | 92 | ), 'colors'); |
88 | 93 | ||
89 | @include iro.bem-object(iro.props-namespace()) { | 94 | @include iro.bem-object(iro.props-namespace()) { |
90 | $line-height: 1.4; | 95 | $line-height: 1.4; |
96 | $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); | ||
91 | 97 | ||
92 | position: relative; | 98 | position: relative; |
93 | min-width: 0; | 99 | min-width: 0; |
@@ -133,14 +139,12 @@ | |||
133 | outline: 0; | 139 | outline: 0; |
134 | 140 | ||
135 | @include iro.bem-sibling-elem('bg') { | 141 | @include iro.bem-sibling-elem('bg') { |
136 | $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); | 142 | top: $focus-border-offset; |
137 | 143 | right: $focus-border-offset; | |
138 | top: $offset; | 144 | bottom: $focus-border-offset; |
139 | right: $offset; | 145 | left: $focus-border-offset; |
140 | bottom: $offset; | ||
141 | left: $offset; | ||
142 | border: fn.dim(--focus --border-width) solid fn.color(--focus --border); | 146 | border: fn.dim(--focus --border-width) solid fn.color(--focus --border); |
143 | border-radius: calc(fn.dim(--border-radius) - $offset); | 147 | border-radius: calc(fn.dim(--border-radius) - $focus-border-offset); |
144 | box-shadow: fn.color(--focus --shadow); | 148 | box-shadow: fn.color(--focus --shadow); |
145 | } | 149 | } |
146 | } | 150 | } |
@@ -150,6 +154,22 @@ | |||
150 | } | 154 | } |
151 | } | 155 | } |
152 | 156 | ||
157 | @include iro.bem-modifier('extended') { | ||
158 | padding: fn.dim(--extended --pad); | ||
159 | |||
160 | @include iro.bem-multi('&', 'elem' 'bg') { | ||
161 | border-radius: calc(fn.dim(--border-radius) + fn.dim(--extended --pad)); | ||
162 | } | ||
163 | |||
164 | @include iro.bem-elem('native') { | ||
165 | &:focus { | ||
166 | @include iro.bem-sibling-elem('bg') { | ||
167 | border-radius: calc(fn.dim(--extended --border-radius) - $focus-border-offset); | ||
168 | } | ||
169 | } | ||
170 | } | ||
171 | } | ||
172 | |||
153 | @include iro.bem-is('invalid') { | 173 | @include iro.bem-is('invalid') { |
154 | @include iro.bem-elem('native') { | 174 | @include iro.bem-elem('native') { |
155 | @include invalid; | 175 | @include invalid; |