summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json4
-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
-rw-r--r--src_demo/components/_content.scss1
-rw-r--r--src_demo/components/_sidebar.scss25
-rw-r--r--tpl/index.pug16
-rw-r--r--tpl/objects/action-button.pug2
-rw-r--r--tpl/objects/dialog.pug29
-rw-r--r--tpl/objects/divider.pug12
-rw-r--r--tpl/objects/header.pug12
-rw-r--r--tpl/objects/list-group.pug4
-rw-r--r--tpl/objects/rule.pug12
-rw-r--r--tpl/objects/sidebar.pug12
-rw-r--r--tpl/objects/text-field.pug32
-rw-r--r--tpl/views/dialog.pug34
-rw-r--r--tpl/views/divider.pug (renamed from tpl/views/rule.pug)16
-rw-r--r--tpl/views/list-group.pug8
-rw-r--r--tpl/views/text-field.pug5
-rw-r--r--yarn.lock46
33 files changed, 361 insertions, 236 deletions
diff --git a/package.json b/package.json
index 6047b47..122839c 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
27 "postcss-scss": "^4.0.3", 27 "postcss-scss": "^4.0.3",
28 "pug": "^3.0.0", 28 "pug": "^3.0.0",
29 "pug-cli": "^1.0.0-alpha6", 29 "pug-cli": "^1.0.0-alpha6",
30 "sass": "^1.49.8", 30 "sass": "^1.49.9",
31 "stylelint": "^14.5.1", 31 "stylelint": "^14.6.1",
32 "stylelint-config-sass-guidelines": "^9.0.1", 32 "stylelint-config-sass-guidelines": "^9.0.1",
33 "svg-sprite": "^1.5.4" 33 "svg-sprite": "^1.5.4"
34 } 34 }
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;
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index 6045e4b..2f9a2d0 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -3,5 +3,6 @@
3@include iro.props-namespace('content') { 3@include iro.props-namespace('content') {
4 @include iro.bem-component(iro.props-namespace()) { 4 @include iro.bem-component(iro.props-namespace()) {
5 grid-area: content; 5 grid-area: content;
6 overflow: auto;
6 } 7 }
7} 8}
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 9cff3c8..6b7eaf0 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -2,28 +2,9 @@
2@use '../../src/functions' as fn; 2@use '../../src/functions' as fn;
3 3
4@include iro.props-namespace('sidebar') { 4@include iro.props-namespace('sidebar') {
5 @include iro.props-store((
6 --colors: (
7 --bg: fn.global-color(--bg),
8 --border: fn.global-color(--obj),
9 --icon: fn.global-color(--fg-hi),
10 --group-header-fg: fn.global-color(--fg-hi),
11 ),
12 ), 'colors');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi),
17 --border: fn.global-color(--bg-hi),
18 ),
19 ), 'colors-dark');
20
21 @include iro.bem-component(iro.props-namespace()) { 5 @include iro.bem-component(iro.props-namespace()) {
22 grid-area: sidebar; 6 grid-area: sidebar;
23 min-width: 10em; 7 min-width: 15em;
24 padding: .6em; 8 min-height: 0;
25 overflow: auto;
26 border-right: 1px solid fn.color(--border);
27 background-color: fn.color(--bg);
28 } 9 }
29} 10}
diff --git a/tpl/index.pug b/tpl/index.pug
index 400ec64..14bfa10 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,7 +7,7 @@
7include layouts/container.pug 7include layouts/container.pug
8 8
9include objects/heading.pug 9include objects/heading.pug
10include objects/rule.pug 10include objects/divider.pug
11include objects/badge.pug 11include objects/badge.pug
12include objects/button.pug 12include objects/button.pug
13include objects/text-field.pug 13include objects/text-field.pug
@@ -27,14 +27,16 @@ include objects/lightbox.pug
27include objects/list-group.pug 27include objects/list-group.pug
28include objects/table.pug 28include objects/table.pug
29include objects/alert.pug 29include objects/alert.pug
30include objects/header.pug
31include objects/sidebar.pug
30 32
31mixin view(id, title) 33mixin view(id, title)
32 - 34 -
33 views.push({ id, title }); 35 views.push({ id, title });
34 36
35 +container(padX=true padY=true narrow=true)(class='c-view' id=id) 37 +container(padX=true padY=true narrow=true class='c-view' id=id)
36 +h1-heading('xl')= title 38 +h1-heading('xl')= title
37 +rule('medium') 39 +divider('medium')
38 block 40 block
39 41
40mixin user-card(name, hue) 42mixin user-card(name, hue)
@@ -47,7 +49,7 @@ mixin user-card(name, hue)
47 = name 49 = name
48 50
49include views/heading.pug 51include views/heading.pug
50include views/rule.pug 52include views/divider.pug
51include views/colored-links.pug 53include views/colored-links.pug
52include views/badge.pug 54include views/badge.pug
53include views/button.pug 55include views/button.pug
@@ -80,9 +82,9 @@ html
80 script(src="script.js") 82 script(src="script.js")
81 83
82 body 84 body
83 .c-content 85 .c-content.l-overflow
84 +view-heading 86 +view-heading
85 +view-rule 87 +view-divider
86 +view-colored-links 88 +view-colored-links
87 +view-badge 89 +view-badge
88 +view-button 90 +view-button
@@ -104,7 +106,7 @@ html
104 +view-table 106 +view-table
105 +view-alert 107 +view-alert
106 108
107 .c-sidebar 109 +sidebar(class='c-sidebar')
108 +menu 110 +menu
109 each view in views 111 each view in views
110 +menu-item(tag='a' href='#' + view.id)= view.title 112 +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0467bd7..f99d789 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -4,7 +4,7 @@ mixin action-button
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-action-button': true, 6 'o-action-button': true,
7 'o-action-button--block': attributes.block, 7 'u-d-block': attributes.block,
8 'o-action-button--quiet': attributes.quiet, 8 'o-action-button--quiet': attributes.quiet,
9 'o-action-button--round': attributes.round, 9 'o-action-button--round': attributes.round,
10 'is-selected': attributes.selected 10 'is-selected': attributes.selected
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2823e41..2474cc3 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,7 +1,6 @@
1include rule.pug
2include button.pug
3include heading.pug 1include heading.pug
4include action-button.pug 2include header.pug
3include sidebar.pug
5 4
6mixin dialog(title) 5mixin dialog(title)
7 - const slots = {} 6 - const slots = {}
@@ -13,9 +12,7 @@ mixin dialog(title)
13 block ? block() : undefined 12 block ? block() : undefined
14 13
15 let classes = { 14 let classes = {
16 'o-dialog': true, 15 'o-dialog': true,
17 't-raised': true,
18 'o-dialog--split': !!slots.sidebar,
19 } 16 }
20 17
21 let bodyClass = { 18 let bodyClass = {
@@ -26,16 +23,26 @@ mixin dialog(title)
26 } 23 }
27 24
28 div(class=classes) 25 div(class=classes)
26 if slots['sidebar-header']
27 +header(class='o-dialog__sidebar-header')
28 - slots['sidebar-header']()
29
29 if slots.sidebar 30 if slots.sidebar
30 .o-dialog__sidebar 31 +sidebar(class='o-dialog__sidebar')
31 - slots.sidebar() 32 - slots.sidebar()
32 header.o-dialog__header 33
33 +div-heading('md')(class='o-dialog__title') 34 +header(class='o-dialog__header')
34 = title 35 if slots.header
35 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 36 - slots.header()
37 else
38 if title
39 +div-heading('sm')(class='o-dialog__label')= title
40 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
41
36 section(class=bodyClass) 42 section(class=bodyClass)
37 if slots.body 43 if slots.body
38 - slots.body() 44 - slots.body()
45
39 footer.o-dialog__footer.l-button-group 46 footer.o-dialog__footer.l-button-group
40 +a-button(outline=true)= 'Cancel' 47 +a-button(outline=true)= 'Cancel'
41 = ' ' 48 = ' '
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
new file mode 100644
index 0000000..094df07
--- /dev/null
+++ b/tpl/objects/divider.pug
@@ -0,0 +1,12 @@
1mixin divider(level)
2 -
3 let classes = {
4 'o-divider': true,
5 'o-divider--labelled': !!block,
6 ['o-divider--' + level]: true
7 }
8
9 div(class=classes)&attributes(attributes)
10 if block
11 .o-divider__label
12 block
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
new file mode 100644
index 0000000..4518afc
--- /dev/null
+++ b/tpl/objects/header.pug
@@ -0,0 +1,12 @@
1mixin header
2 -
3 let classes = {
4 'o-header': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 header(class=classes)
11 .o-header__content.t-lowered
12 block
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index 36be264..ad3c212 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -5,8 +5,8 @@ mixin list-group
5mixin list-group-item 5mixin list-group-item
6 - 6 -
7 let classes = { 7 let classes = {
8 'o-list-group__item': true, 8 'o-list-group__item': true,
9 'o-list-group__item--action': attributes.action, 9 'o-list-group__item--interactive': attributes.interactive,
10 } 10 }
11 11
12 div(class=classes) 12 div(class=classes)
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
deleted file mode 100644
index b2f3a38..0000000
--- a/tpl/objects/rule.pug
+++ /dev/null
@@ -1,12 +0,0 @@
1mixin rule(level)
2 -
3 let classes = {
4 'o-rule': true,
5 'o-rule--labelled': !!block,
6 ['o-rule--' + level]: true
7 }
8
9 div(class=classes)&attributes(attributes)
10 if block
11 .o-rule__label
12 block
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
new file mode 100644
index 0000000..caa0f1f
--- /dev/null
+++ b/tpl/objects/sidebar.pug
@@ -0,0 +1,12 @@
1mixin sidebar
2 -
3 let classes = {
4 'o-sidebar': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 aside(class=classes)
11 .o-sidebar__content.l-overflow
12 block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index cbdb8c4..673aa27 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -10,23 +10,33 @@ mixin text-field
10 block ? block() : undefined 10 block ? block() : undefined
11 11
12 let classes = { 12 let classes = {
13 'o-text-field': true, 13 'o-text-field': true,
14 'o-text-field--ext': attributes.ext, 14 'o-text-field--extended': !!block,
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-card': !!block,
18 'l-card--flush': !!block, 18 'l-card--flush': !!block,
19 'l-card--gapless': !!block 19 'l-card--gapless': !!block
20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
24
25 const attr = {
26 placeholder: attributes.placeholder,
27 disabled: attributes.disabled
20 } 28 }
21 29
22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 30 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
23 if !!block 31 if !!block
24 if slots.pre 32 if slots.pre
25 - slots.pre() 33 .u-d-contents.t-raised
26 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) 34 - slots.pre()
35 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
27 if slots.post 36 if slots.post
28 - slots.post() 37 .u-d-contents.t-raised
38 - slots.post()
29 .o-text-field__bg 39 .o-text-field__bg
30 else 40 else
31 input.o-text-field__native&attributes(attributes) 41 input.o-text-field__native&attributes(attr)
32 .o-text-field__bg 42 .o-text-field__bg
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 6aaead5..0b6f8e7 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -18,10 +18,40 @@ mixin view-dialog
18 18
19 .c-box 19 .c-box
20 +backdrop 20 +backdrop
21 +dialog('Lorem ipsum')(noRule=true) 21 +dialog('Tags')
22 +slot('sidebar-header')
23 +div-heading('sm')(class='o-dialog__label')= '#channel'
24 +slot('sidebar')
25 +menu(style={ 'min-width': '10em' })
26 +menu-item(icon='bookmark')= 'Bookmark'
27 +menu-item(icon='tags', selected=true)= 'Tags'
28 +menu-item(icon='hash')= 'achannel'
29 +slot('body')
30 p.u-mt-0= loremIpsum
31
32 .c-box
33 +backdrop
34 +dialog('#channel')
35 +slot('sidebar')
36 +menu(style={ 'min-width': '10em' })
37 +menu-item(icon='bookmark')= 'Bookmark'
38 +menu-item(icon='tags', selected=true)= 'Tags'
39 +menu-item(icon='hash')= 'achannel'
40 +slot('body')
41 p.u-mt-0= loremIpsum
42
43 .c-box
44 +backdrop
45 +dialog
46 +slot('header')
47 .l-card.l-card--flush
48 .l-card__block.l-flex
49 +action-button(quiet=true icon='chevron-left')
50 +action-button(quiet=true icon='chevron-right')
51 .l-card__block.l-card__block--main
52 +div-heading('sm')= 'Tags'
22 +slot('sidebar') 53 +slot('sidebar')
23 +menu(style={ 'min-width': '10em' }) 54 +menu(style={ 'min-width': '10em' })
24 +menu-header= '#channel'
25 +menu-item(icon='bookmark')= 'Bookmark' 55 +menu-item(icon='bookmark')= 'Bookmark'
26 +menu-item(icon='tags', selected=true)= 'Tags' 56 +menu-item(icon='tags', selected=true)= 'Tags'
27 +menu-item(icon='hash')= 'achannel' 57 +menu-item(icon='hash')= 'achannel'
diff --git a/tpl/views/rule.pug b/tpl/views/divider.pug
index 495c804..8c3ec0c 100644
--- a/tpl/views/rule.pug
+++ b/tpl/views/divider.pug
@@ -1,21 +1,21 @@
1mixin view-rule 1mixin view-divider
2 +view('rule', 'Rule') 2 +view('divider', 'Divider')
3 .c-box 3 .c-box
4 +div-heading('lg')= 'Heading' 4 +div-heading('lg')= 'Heading'
5 +rule('strong') 5 +divider('strong')
6 p= loremIpsum 6 p= loremIpsum
7 7
8 .c-box 8 .c-box
9 +div-heading('sm')= 'Heading' 9 +div-heading('sm')= 'Heading'
10 +rule('medium') 10 +divider('medium')
11 p= loremIpsum 11 p= loremIpsum
12 12
13 .c-box 13 .c-box
14 +div-heading('xs')= 'Heading' 14 +div-heading('xs')= 'Heading'
15 +rule('faint') 15 +divider('faint')
16 p= loremIpsum 16 p= loremIpsum
17 17
18 .c-box 18 .c-box
19 +rule('strong')= 'Strong' 19 +divider('strong')= 'Strong'
20 +rule('medium')= 'Medium' 20 +divider('medium')= 'Medium'
21 +rule('faint')= 'Faint' 21 +divider('faint')= 'Faint'
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 970f0fb..9acef31 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -9,7 +9,7 @@ mixin view-list-group
9 9
10 .c-box 10 .c-box
11 +list-group 11 +list-group
12 +list-group-item(action=true)= 'First item' 12 +list-group-item(interactive=true)= 'First item'
13 +list-group-item(action=true)= 'Second item' 13 +list-group-item(interactive=true)= 'Second item'
14 +list-group-item(action=true)= 'Third item' 14 +list-group-item(interactive=true)= 'Third item'
15 +list-group-item(action=true)= 'Fourth item' 15 +list-group-item(interactive=true)= 'Fourth item'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 0ba84be..262195d 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -14,9 +14,10 @@ mixin view-text-field
14 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 14 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
15 br 15 br
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.') 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' 19 +action-button(quiet=true class='l-card__block')= 'Volpeon'
20 +divider('vertical')(class='u-ml-50')
20 +slot('post') 21 +slot('post')
21 +action-button(quiet=true icon='smile' class='l-card__block') 22 +action-button(quiet=true icon='smile' class='l-card__block')
22 +action-button(quiet=true icon='send' class='l-card__block') 23 +action-button(quiet=true icon='send' class='l-card__block')
diff --git a/yarn.lock b/yarn.lock
index 3745f64..6962c41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -705,10 +705,10 @@ debug@^2.6.9:
705 dependencies: 705 dependencies:
706 ms "2.0.0" 706 ms "2.0.0"
707 707
708debug@^4.3.3: 708debug@^4.3.4:
709 version "4.3.3" 709 version "4.3.4"
710 resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" 710 resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
711 integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== 711 integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
712 dependencies: 712 dependencies:
713 ms "2.1.2" 713 ms "2.1.2"
714 714
@@ -1266,7 +1266,7 @@ internal-slot@^1.0.3:
1266 1266
1267"iro-icons@git+https://git.vulpes.one/git/iro-icons.git": 1267"iro-icons@git+https://git.vulpes.one/git/iro-icons.git":
1268 version "1.0.0" 1268 version "1.0.0"
1269 resolved "git+https://git.vulpes.one/git/iro-icons.git#b871fcd977047a20812ebac8d82f7a1d695eee2b" 1269 resolved "git+https://git.vulpes.one/git/iro-icons.git#b07eab73627edc89c31da7f207348bb86c71adb4"
1270 1270
1271"iro-sass@git+https://git.vulpes.one/git/iro-sass.git": 1271"iro-sass@git+https://git.vulpes.one/git/iro-sass.git":
1272 version "1.0.2" 1272 version "1.0.2"
@@ -1745,6 +1745,11 @@ nanoid@^3.2.0:
1745 resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" 1745 resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
1746 integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== 1746 integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
1747 1747
1748nanoid@^3.3.1:
1749 version "3.3.1"
1750 resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
1751 integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
1752
1748normalize-package-data@^2.5.0: 1753normalize-package-data@^2.5.0:
1749 version "2.5.0" 1754 version "2.5.0"
1750 resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" 1755 resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -1985,7 +1990,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
1985 resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" 1990 resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
1986 integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== 1991 integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
1987 1992
1988postcss@^8.3.11, postcss@^8.4.6: 1993postcss@^8.3.11:
1989 version "8.4.6" 1994 version "8.4.6"
1990 resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" 1995 resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
1991 integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA== 1996 integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -1994,6 +1999,15 @@ postcss@^8.3.11, postcss@^8.4.6:
1994 picocolors "^1.0.0" 1999 picocolors "^1.0.0"
1995 source-map-js "^1.0.2" 2000 source-map-js "^1.0.2"
1996 2001
2002postcss@^8.4.12:
2003 version "8.4.12"
2004 resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
2005 integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
2006 dependencies:
2007 nanoid "^3.3.1"
2008 picocolors "^1.0.0"
2009 source-map-js "^1.0.2"
2010
1997prettysize@^2.0.0: 2011prettysize@^2.0.0:
1998 version "2.0.0" 2012 version "2.0.0"
1999 resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-2.0.0.tgz#902c02480d865d9cc0813011c9feb4fa02ce6996" 2013 resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-2.0.0.tgz#902c02480d865d9cc0813011c9feb4fa02ce6996"
@@ -2458,10 +2472,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
2458 resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" 2472 resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
2459 integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== 2473 integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
2460 2474
2461sass@^1.49.8: 2475sass@^1.49.9:
2462 version "1.49.8" 2476 version "1.49.9"
2463 resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828" 2477 resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
2464 integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw== 2478 integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
2465 dependencies: 2479 dependencies:
2466 chokidar ">=3.0.0 <4.0.0" 2480 chokidar ">=3.0.0 <4.0.0"
2467 immutable "^4.0.0" 2481 immutable "^4.0.0"
@@ -2693,16 +2707,16 @@ stylelint-scss@^4.0.0:
2693 postcss-selector-parser "^6.0.6" 2707 postcss-selector-parser "^6.0.6"
2694 postcss-value-parser "^4.1.0" 2708 postcss-value-parser "^4.1.0"
2695 2709
2696stylelint@^14.5.1: 2710stylelint@^14.6.1:
2697 version "14.5.1" 2711 version "14.6.1"
2698 resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.1.tgz#2b2575ccaf14bb057209d48fc87c17d5b684f8db" 2712 resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.6.1.tgz#aff137b0254515fc36b91921d88a3eb2edc194bf"
2699 integrity sha512-8Hf4HtnhxlWlf7iXF9zFfhSc3X0teRnVzl6PqPs2JEFx+dy/mhMhghZfiTDW4QG0ihDw9+WP7GZw5Nzx7cQF5A== 2713 integrity sha512-FfNdvZUZdzh9KDQxDnO7Opp+prKh8OQVuSW8S13cBtxrooCbm6J6royhUeb++53WPMt04VB+ZbOz/QmzAijs6Q==
2700 dependencies: 2714 dependencies:
2701 balanced-match "^2.0.0" 2715 balanced-match "^2.0.0"
2702 colord "^2.9.2" 2716 colord "^2.9.2"
2703 cosmiconfig "^7.0.1" 2717 cosmiconfig "^7.0.1"
2704 css-functions-list "^3.0.1" 2718 css-functions-list "^3.0.1"
2705 debug "^4.3.3" 2719 debug "^4.3.4"
2706 execall "^2.0.0" 2720 execall "^2.0.0"
2707 fast-glob "^3.2.11" 2721 fast-glob "^3.2.11"
2708 fastest-levenshtein "^1.0.12" 2722 fastest-levenshtein "^1.0.12"
@@ -2723,7 +2737,7 @@ stylelint@^14.5.1:
2723 normalize-path "^3.0.0" 2737 normalize-path "^3.0.0"
2724 normalize-selector "^0.2.0" 2738 normalize-selector "^0.2.0"
2725 picocolors "^1.0.0" 2739 picocolors "^1.0.0"
2726 postcss "^8.4.6" 2740 postcss "^8.4.12"
2727 postcss-media-query-parser "^0.2.3" 2741 postcss-media-query-parser "^0.2.3"
2728 postcss-resolve-nested-selector "^0.1.1" 2742 postcss-resolve-nested-selector "^0.1.1"
2729 postcss-safe-parser "^6.0.0" 2743 postcss-safe-parser "^6.0.0"
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:48:23 +0000