summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
committerVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
commite4255279ff72e5438d297888d808851cdf2178ed (patch)
tree52fbae2c67f65376eae97025b433038d9f4a0e35 /src
parentSplit demo in :target views (diff)
downloadiro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.gz
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.bz2
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.zip
Lots of updates, especially dialog
Diffstat (limited to 'src')
-rw-r--r--src/_apply-vars.scss16
-rw-r--r--src/_config.scss2
-rw-r--r--src/_declare-vars.scss20
-rw-r--r--src/_objects.scss4
-rw-r--r--src/layouts/_button-group.scss2
-rw-r--r--src/objects/_action-button.scss69
-rw-r--r--src/objects/_action-menu.scss3
-rw-r--r--src/objects/_dialog.scss83
-rw-r--r--src/objects/_divider.scss (renamed from src/objects/_rule.scss)2
-rw-r--r--src/objects/_header.scss31
-rw-r--r--src/objects/_heading.scss17
-rw-r--r--src/objects/_lightbox.scss2
-rw-r--r--src/objects/_list-group.scss2
-rw-r--r--src/objects/_sidebar.scss36
-rw-r--r--src/objects/_table.scss2
-rw-r--r--src/objects/_text-field.scss36
16 files changed, 191 insertions, 136 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 66ad9b7..9639a97 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -19,6 +19,12 @@
19 } 19 }
20} 20}
21 21
22@include iro.bem-theme('dark') {
23 @include iro.props-assign('colors');
24 @include iro.props-assign('colors-dark');
25 @include iro.props-assign('palette-dark');
26}
27
22@include iro.bem-theme('raised') { 28@include iro.bem-theme('raised') {
23 @include iro.props-assign('colors'); 29 @include iro.props-assign('colors');
24 @include iro.props-assign('palette-light-raised'); 30 @include iro.props-assign('palette-light-raised');
@@ -29,8 +35,12 @@
29 } 35 }
30} 36}
31 37
32@include iro.bem-theme('dark') { 38@include iro.bem-theme('lowered') {
33 @include iro.props-assign('colors'); 39 @include iro.props-assign('colors');
34 @include iro.props-assign('colors-dark'); 40 @include iro.props-assign('palette-light-lowered');
35 @include iro.props-assign('palette-dark'); 41
42 @media (prefers-color-scheme: dark) {
43 @include iro.props-assign('colors-dark');
44 @include iro.props-assign('palette-dark-lowered');
45 }
36} 46}
diff --git a/src/_config.scss b/src/_config.scss
index cdbd02c..68df69f 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -21,7 +21,7 @@ $wanted-grays: (
21 --3: 1, 21 --3: 1,
22 22
23 --4: 1.15, 23 --4: 1.15,
24 --5: 1.3, 24 --5: 1.35,
25 --6: 1.7, 25 --6: 1.7,
26 26
27 --7: 2.4, 27 --7: 2.4,
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 998608a..0bcf101 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -115,7 +115,7 @@
115 --fg: fn.color(--gray --10, null), // Text 115 --fg: fn.color(--gray --10, null), // Text
116 --fg-lo: fn.color(--gray --11, null), // Strong text 116 --fg-lo: fn.color(--gray --11, null), // Strong text
117 117
118 --gray: ( --h: 220, --s: 5% ), 118 --gray: ( --h: 220, --s: 0% ),
119 --blue: fn.color-palette(blend.lch(48% 50 279)), 119 --blue: fn.color-palette(blend.lch(48% 50 279)),
120 --purple: fn.color-palette(blend.lch(48% 50 308)), 120 --purple: fn.color-palette(blend.lch(48% 50 308)),
121 --red: fn.color-palette(blend.lch(48% 50 23)), 121 --red: fn.color-palette(blend.lch(48% 50 23)),
@@ -140,7 +140,7 @@
140 --focus: ( 140 --focus: (
141 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), 141 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
142 --fill: fn.color(--accent --primary --bg, null), 142 --fill: fn.color(--accent --primary --bg, null),
143 --text: fn.color(--accent --primary --lo, null), 143 --text: fn.color(--accent --primary --obj, null),
144 --fill-text: fn.color(--accent --primary --fg, null), 144 --fill-text: fn.color(--accent --primary --fg, null),
145 ), 145 ),
146 ), 146 ),
@@ -148,7 +148,7 @@
148 148
149@include iro.props-store(( 149@include iro.props-store((
150 --colors: ( 150 --colors: (
151 --gray: fn.gray-palette(94%), 151 --gray: fn.gray-palette(96%),
152 ), 152 ),
153), 'palette-light'); 153), 'palette-light');
154 154
@@ -158,6 +158,12 @@
158 ), 158 ),
159), 'palette-light-raised'); 159), 'palette-light-raised');
160 160
161@include iro.props-store((
162 --colors: (
163 --gray: fn.gray-palette(91%),
164 ),
165), 'palette-light-lowered');
166
161// 167//
162 168
163@include iro.props-store(( 169@include iro.props-store((
@@ -187,10 +193,16 @@
187 193
188@include iro.props-store(( 194@include iro.props-store((
189 --colors: ( 195 --colors: (
190 --gray: fn.gray-palette(16%), 196 --gray: fn.gray-palette(13%),
191 ), 197 ),
192), 'palette-dark-raised'); 198), 'palette-dark-raised');
193 199
200@include iro.props-store((
201 --colors: (
202 --gray: fn.gray-palette(5%),
203 ),
204), 'palette-dark-lowered');
205
194// 206//
195 207
196@each $breakpoint in map-keys(media.$breakpoints) { 208@each $breakpoint in map-keys(media.$breakpoints) {
diff --git a/src/_objects.scss b/src/_objects.scss
index 070e281..d01ed54 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,6 +1,6 @@
1@use 'objects/icon'; 1@use 'objects/icon';
2@use 'objects/heading'; 2@use 'objects/heading';
3@use 'objects/rule'; 3@use 'objects/divider';
4@use 'objects/badge'; 4@use 'objects/badge';
5@use 'objects/button'; 5@use 'objects/button';
6@use 'objects/text-field'; 6@use 'objects/text-field';
@@ -11,6 +11,8 @@
11@use 'objects/action-button'; 11@use 'objects/action-button';
12@use 'objects/status-indicator'; 12@use 'objects/status-indicator';
13@use 'objects/avatar'; 13@use 'objects/avatar';
14@use 'objects/header';
15@use 'objects/sidebar';
14@use 'objects/action-menu'; 16@use 'objects/action-menu';
15@use 'objects/menu'; 17@use 'objects/menu';
16@use 'objects/backdrop'; 18@use 'objects/backdrop';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 17de1e1..2917776 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('button-group') { 4@include iro.props-namespace('button-group') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --spacing: iro.fn-px-to-rem(16px), 7 --spacing: fn.global-dim(--size --150),
8 ), 8 ),
9 ), 'dims'); 9 ), 'dims');
10 10
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;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:54:51 +0000