summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
commit69d753931c098bc18cd23e96af18f736a772f416 (patch)
treea40beef43a215fd76972e41085d3af1b123fed32
parentUpdate (diff)
downloadiro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.gz
iro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.bz2
iro-design-69d753931c098bc18cd23e96af18f736a772f416.zip
Update
Diffstat
-rw-r--r--src/_objects.scss4
-rw-r--r--src/objects/_badge.scss8
-rw-r--r--src/objects/_button.scss30
-rw-r--r--src/objects/_field-label.scss (renamed from src/.old/objects/_field-label.scss)57
-rw-r--r--src/objects/_text-field.scss (renamed from src/.old/objects/_text-field.scss)129
-rw-r--r--tpl/objects/button.pug5
-rw-r--r--tpl/objects/field-label.pug13
-rw-r--r--tpl/objects/text-field.pug6
-rw-r--r--tpl/views/badge.pug48
-rw-r--r--tpl/views/button.pug33
-rw-r--r--tpl/views/field-label.pug24
11 files changed, 195 insertions, 162 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index 68bf3a7..3dd5176 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -4,8 +4,8 @@
4@use 'objects/divider'; 4@use 'objects/divider';
5@use 'objects/badge'; 5@use 'objects/badge';
6@use 'objects/button'; 6@use 'objects/button';
7// @use 'objects/text-field'; 7@use 'objects/text-field';
8// @use 'objects/field-label'; 8@use 'objects/field-label';
9// @use 'objects/radio'; 9// @use 'objects/radio';
10// @use 'objects/checkbox'; 10// @use 'objects/checkbox';
11// @use 'objects/switch'; 11// @use 'objects/switch';
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 0d95751..23ae305 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -12,19 +12,19 @@ $themes: accent positive negative warning;
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100), 13 --font-size: fn.global-dim(--font-size --100),
14 14
15 --50: ( 15 --sm: (
16 --pad-b: fn.global-dim(--size --50), 16 --pad-b: fn.global-dim(--size --50),
17 --pad-i: fn.global-dim(--size --115), 17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150), 18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75), 19 --font-size: fn.global-dim(--font-size --75),
20 ), 20 ),
21 --200: ( 21 --lg: (
22 --pad-b: fn.global-dim(--size --125), 22 --pad-b: fn.global-dim(--size --125),
23 --pad-i: fn.global-dim(--size --175), 23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225), 24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150), 25 --font-size: fn.global-dim(--font-size --150),
26 ), 26 ),
27 --300: ( 27 --xl: (
28 --pad-b: fn.global-dim(--size --160), 28 --pad-b: fn.global-dim(--size --160),
29 --pad-i: fn.global-dim(--size --225), 29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300), 30 --pad-i-pill: fn.global-dim(--size --300),
@@ -179,7 +179,7 @@ $themes: accent positive negative warning;
179 border-radius: 10em; 179 border-radius: 10em;
180 } 180 }
181 181
182 @each $size in '50' '200' '300' { 182 @each $size in sm lg xl {
183 @include iro.bem-modifier($size) { 183 @include iro.bem-modifier($size) {
184 padding-block: fn.dim(--#{$size} --pad-b); 184 padding-block: fn.dim(--#{$size} --pad-b);
185 padding-inline: fn.dim(--#{$size} --pad-i); 185 padding-inline: fn.dim(--#{$size} --pad-i);
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index d3588f6..a823f17 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -47,11 +47,24 @@ $themes: primary accent positive negative warning;
47 --line-height: 1.4, 47 --line-height: 1.4,
48 --pad-i: fn.global-dim(--size --225), 48 --pad-i: fn.global-dim(--size --225),
49 --pad-b: fn.global-dim(--size --65), 49 --pad-b: fn.global-dim(--size --65),
50 --border: fn.global-dim(--border --medium),
50 --rounding: 10em, 51 --rounding: 10em,
52 --font-size: fn.global-dim(--font-size --100),
51 53
54 --sm: (
55 --pad-i: fn.global-dim(--size --150),
56 --pad-b: fn.global-dim(--size --25),
57 --font-size: fn.global-dim(--font-size --75),
58 ),
52 --lg: ( 59 --lg: (
53 --pad-i: fn.global-dim(--size --300), 60 --pad-i: fn.global-dim(--size --300),
54 --pad-b: fn.global-dim(--size --100), 61 --pad-b: fn.global-dim(--size --100),
62 --font-size: fn.global-dim(--font-size --150),
63 ),
64 --xl: (
65 --pad-i: fn.global-dim(--size --400),
66 --pad-b: fn.global-dim(--size --150),
67 --font-size: fn.global-dim(--font-size --200),
55 ), 68 ),
56 ), 69 ),
57 --colors: ( 70 --colors: (
@@ -121,11 +134,12 @@ $themes: primary accent positive negative warning;
121 display: inline-block; 134 display: inline-block;
122 padding-block: fn.dim(--pad-b); 135 padding-block: fn.dim(--pad-b);
123 padding-inline: fn.dim(--pad-i); 136 padding-inline: fn.dim(--pad-i);
124 border: 2px solid transparent; 137 border: fn.dim(--border) solid transparent;
125 border-radius: fn.dim(--rounding); 138 border-radius: fn.dim(--rounding);
126 border-color: fn.color(--disabled --bg); 139 border-color: fn.color(--disabled --bg);
127 background-color: fn.color(--disabled --bg); 140 background-color: fn.color(--disabled --bg);
128 color: fn.color(--disabled --label); 141 color: fn.color(--disabled --label);
142 font-size: fn.dim(--font-size);
129 font-weight: 500; 143 font-weight: 500;
130 line-height: fn.dim(--line-height); 144 line-height: fn.dim(--line-height);
131 text-align: center; 145 text-align: center;
@@ -141,9 +155,12 @@ $themes: primary accent positive negative warning;
141 box-shadow: none; 155 box-shadow: none;
142 } 156 }
143 157
144 @include iro.bem-modifier('lg') { 158 @each $size in sm lg xl {
145 padding-block: fn.dim(--lg --pad-b); 159 @include iro.bem-modifier($size) {
146 padding-inline: fn.dim(--lg --pad-i); 160 padding-block: fn.dim(--#{$size} --pad-b);
161 padding-inline: fn.dim(--#{$size} --pad-i);
162 font-size: fn.dim(--#{$size} --font-size);
163 }
147 } 164 }
148 165
149 @include button-variant(); 166 @include button-variant();
@@ -160,6 +177,7 @@ $themes: primary accent positive negative warning;
160 &:focus-visible { 177 &:focus-visible {
161 border-color: fn.color(--key-focus --border); 178 border-color: fn.color(--key-focus --border);
162 background-color: fn.color(--key-focus --bg); 179 background-color: fn.color(--key-focus --bg);
180 box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border);
163 color: fn.color(--key-focus --label); 181 color: fn.color(--key-focus --label);
164 } 182 }
165 } 183 }
diff --git a/src/.old/objects/_field-label.scss b/src/objects/_field-label.scss
index 2127a09..9f267cb 100644
--- a/src/.old/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -4,49 +4,46 @@
4@include iro.props-namespace('field-label') { 4@include iro.props-namespace('field-label') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --spacing-x: fn.global-dim(--size --150), 7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-y: fn.global-dim(--size --85), 8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75), 9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75), 10 --hint-font-size: fn.global-dim(--font-size --75),
11 ), 11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: ( 12 --colors: (
16 --label: fn.global-color(--fg-hi), 13 --label: fn.global-color(--text-mute),
17 --hint: fn.global-color(--fg-hi), 14 --hint: fn.global-color(--text-mute),
18 --error-hint: fn.global-color(--accent --error --quiet --fg), 15 --error-hint: fn.global-color(--negative --900),
19 --disabled: fn.global-color(--fg-hi3), 16 --disabled: fn.global-color(--text-disabled),
20 ), 17 ),
21 ), 'colors'); 18 ));
22 19
23 @include iro.bem-object(iro.props-namespace()) { 20 @include iro.bem-object(iro.props-namespace()) {
24 display: block; 21 display: block;
25 22
26 @include iro.bem-elem('label') { 23 @include iro.bem-elem('label') {
27 display: block; 24 display: block;
28 flex: 0 0 auto; 25 flex: 0 0 auto;
29 padding-right: fn.dim(--spacing-x); 26 padding-inline-end: fn.dim(--spacing-i);
30 color: fn.color(--label); 27 color: fn.color(--label);
31 font-size: fn.dim(--label-font-size); 28 font-size: fn.dim(--label-font-size);
32 font-weight: 400; 29 font-weight: 400;
33 line-height: 1.3; 30 line-height: 1.3;
34 31
35 @include iro.bem-next-elem('content') { 32 @include iro.bem-next-elem('content') {
36 margin-top: fn.dim(--spacing-y); 33 margin-block-start: fn.dim(--spacing-b);
37 } 34 }
38 } 35 }
39 36
40 @include iro.bem-elem('content') { 37 @include iro.bem-elem('content') {
41 display: block; 38 display: block;
42 width: 100%; 39 inline-size: 100%;
43 } 40 }
44 41
45 @include iro.bem-elem('hint') { 42 @include iro.bem-elem('hint') {
46 display: block; 43 display: block;
47 margin-top: fn.dim(--spacing-y); 44 margin-block-start: fn.dim(--spacing-b);
48 color: fn.color(--hint); 45 color: fn.color(--hint);
49 font-size: fn.dim(--hint-font-size); 46 font-size: fn.dim(--hint-font-size);
50 } 47 }
51 48
52 @include iro.bem-is('invalid') { 49 @include iro.bem-is('invalid') {
@@ -61,7 +58,7 @@
61 } 58 }
62 } 59 }
63 60
64 @include iro.bem-modifier('left', 'right') { 61 @include iro.bem-modifier('align-start', 'align-end') {
65 display: flex; 62 display: flex;
66 align-items: baseline; 63 align-items: baseline;
67 64
@@ -69,20 +66,20 @@
69 display: inline-block; 66 display: inline-block;
70 67
71 @include iro.bem-next-elem('content') { 68 @include iro.bem-next-elem('content') {
72 margin-top: 0; 69 margin-block-start: 0;
73 } 70 }
74 } 71 }
75 } 72 }
76 73
77 @include iro.bem-modifier('left') { 74 @include iro.bem-modifier('align-start') {
78 @include iro.bem-elem('label') { 75 @include iro.bem-elem('label') {
79 text-align: left; 76 text-align: start;
80 } 77 }
81 } 78 }
82 79
83 @include iro.bem-modifier('right') { 80 @include iro.bem-modifier('align-end') {
84 @include iro.bem-elem('label') { 81 @include iro.bem-elem('label') {
85 text-align: right; 82 text-align: end;
86 } 83 }
87 } 84 }
88 } 85 }
diff --git a/src/.old/objects/_text-field.scss b/src/objects/_text-field.scss
index 88c4535..de5bcd1 100644
--- a/src/.old/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -2,126 +2,116 @@
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@mixin invalid { 4@mixin invalid {
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
6
5 @include iro.bem-sibling-elem('bg') { 7 @include iro.bem-sibling-elem('bg') {
6 border-color: fn.color(--error --border); 8 inset-block: $focus-border-offset;
7 box-shadow: fn.color(--error --shadow); 9 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
8 } 12 }
9 13
10 &:hover { 14 &:hover {
11 @include iro.bem-sibling-elem('bg') { 15 @include iro.bem-sibling-elem('bg') {
12 border-color: fn.color(--error --hover --border); 16 border-color: fn.color(--error --hover --border);
13 box-shadow: fn.color(--error --hover --shadow);
14 } 17 }
15 } 18 }
16 19
17 &:focus { 20 &:focus {
18 @include iro.bem-sibling-elem('bg') { 21 @include iro.bem-sibling-elem('bg') {
19 border-color: fn.color(--error --focus --border); 22 border-color: fn.color(--error --focus --border);
20 box-shadow: fn.color(--error --focus --shadow);
21 } 23 }
22 } 24 }
23} 25}
24 26
25@mixin keyboard-focus { 27@mixin keyboard-focus {
26 @include iro.bem-sibling-elem('bg') { 28 @include iro.bem-sibling-elem('bg') {
27 border-color: fn.color(--key-focus --border); 29 border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border);
28 box-shadow: fn.color(--key-focus --shadow);
29 } 30 }
30} 31}
31 32
32@include iro.props-namespace('text-field') { 33@include iro.props-namespace('text-field') {
33 @include iro.props-store(( 34 @include iro.props-store((
34 --dims: ( 35 --dims: (
35 --pad-x: fn.global-dim(--size --125), 36 --line-height: 1.4,
36 --pad-y: fn.global-dim(--size --125), 37 --pad-i: fn.global-dim(--size --125),
37 --border: fn.global-dim(--border --thin), 38 --pad-b: fn.global-dim(--size --125),
38 --rounding: 2px, 39 --border: fn.global-dim(--border --thin),
40 --rounding: fn.global-dim(--rounding),
39 41
40 --extended: ( 42 --extended: (
41 --pad: fn.global-dim(--size --50), 43 --pad: fn.global-dim(--size --50),
42 --rounding: 6px,
43 ), 44 ),
44 45
45 --focus: ( 46 --focus: (
46 --border: fn.global-dim(--border --medium), 47 --border: fn.global-dim(--border --medium),
48 ),
49 --key-focus: (
50 --border: fn.global-dim(--border --thick),
47 ) 51 )
48 ), 52 ),
49 ), 'dims');
50
51 @include iro.props-store((
52 --colors: ( 53 --colors: (
53 --bg: fn.global-color(--bg-hi2), 54 --bg: fn.global-color(--base --50),
54 --placeholder: fn.global-color(--fg-hi2), 55 --placeholder: fn.global-color(--text-mute-more),
55 --text: fn.global-color(--fg), 56 --text: fn.global-color(--text),
56 --border: fn.global-color(--obj-lo), 57 --border: fn.global-color(--border-strong),
57 --shadow: 0 0 0 0 transparent,
58 58
59 --hover: ( 59 --hover: (
60 --border: fn.global-color(--fg-hi2), 60 --border: fn.global-color(--text-mute-more),
61 --shadow: 0 0 0 0 transparent,
62 ), 61 ),
63 --focus: ( 62 --focus: (
64 --border: fn.global-color(--accent --primary --solid --bg), 63 --border: fn.global-color(--accent --900),
65 --shadow: 0 0 0 0 transparent,
66 ), 64 ),
67 --key-focus: ( 65 --key-focus: (
68 --border: fn.global-color(--focus --fill), 66 --border: fn.global-color(--yellow-static --400),
69 --shadow: fn.global-color(--focus --shadow),
70 ), 67 ),
71 --error: ( 68 --error: (
72 --border: fn.global-color(--accent --error --solid --bg-hi), 69 --border: fn.global-color(--negative --900),
73 --shadow: 0 0 0 0 transparent,
74 70
75 --hover: ( 71 --hover: (
76 --border: fn.global-color(--accent --error --solid --bg), 72 --border: fn.global-color(--negative --800),
77 --shadow: 0 0 0 0 transparent,
78 ), 73 ),
79 --focus: ( 74 --focus: (
80 --border: fn.global-color(--accent --error --solid --bg), 75 --border: fn.global-color(--negative --800),
81 --shadow: 0 0 0 0 transparent,
82 ), 76 ),
83 ), 77 ),
84 --disabled: ( 78 --disabled: (
85 --bg: fn.global-color(--obj-hi), 79 --bg: fn.global-color(--border-mute),
86 --placeholder: fn.global-color(--fg-hi3), 80 --placeholder: fn.global-color(--text-disabled),
87 --text: fn.global-color(--fg-hi3), 81 --text: fn.global-color(--text-disabled),
88 --border: fn.global-color(--obj-hi), 82 --border: fn.global-color(--border-mute),
89 --shadow: 0 0 0 0 transparent,
90 ), 83 ),
91 ), 84 ),
92 ), 'colors'); 85 ));
93 86
94 @include iro.bem-object(iro.props-namespace()) { 87 @include iro.bem-object(iro.props-namespace()) {
95 $line-height: 1.4;
96 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); 88 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
97 89
98 position: relative; 90 position: relative;
99 min-width: 0; 91 min-inline-size: 0;
100 border-radius: fn.dim(--rounding); 92 border-radius: fn.dim(--rounding);
101 background-color: fn.color(--bg); 93 background-color: fn.color(--bg);
102 94
103 @include iro.bem-elem('bg') { 95 @include iro.bem-elem('bg') {
104 display: block; 96 display: block;
105 position: absolute; 97 position: absolute;
106 top: 0; 98 inset-block: 0;
107 right: 0; 99 inset-inline: 0;
108 bottom: 0; 100 border: fn.dim(--border) solid fn.color(--border);
109 left: 0; 101 border-radius: fn.dim(--rounding);
110 border: fn.dim(--border) solid fn.color(--border); 102 pointer-events: none;
111 border-radius: fn.dim(--rounding);
112 box-shadow: fn.color(--shadow);
113 pointer-events: none;
114 } 103 }
115 104
116 @include iro.bem-elem('native') { 105 @include iro.bem-elem('native') {
117 box-sizing: border-box; 106 box-sizing: border-box;
118 width: 100%; 107 inline-size: 100%;
119 padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x); 108 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
109 padding-inline: fn.dim(--pad-i);
120 border: 1px solid transparent; 110 border: 1px solid transparent;
121 background-color: transparent; 111 background-color: transparent;
122 color: fn.color(--text); 112 color: fn.color(--text);
123 font: inherit; 113 font: inherit;
124 line-height: $line-height; 114 line-height: fn.dim(--line-height);
125 resize: none; 115 resize: none;
126 appearance: none; 116 appearance: none;
127 117
@@ -134,7 +124,6 @@
134 &:hover { 124 &:hover {
135 @include iro.bem-sibling-elem('bg') { 125 @include iro.bem-sibling-elem('bg') {
136 border-color: fn.color(--hover --border); 126 border-color: fn.color(--hover --border);
137 box-shadow: fn.color(--hover --shadow);
138 } 127 }
139 } 128 }
140 129
@@ -142,19 +131,21 @@
142 outline: 0; 131 outline: 0;
143 132
144 @include iro.bem-sibling-elem('bg') { 133 @include iro.bem-sibling-elem('bg') {
145 top: $focus-border-offset; 134 inset-block: $focus-border-offset;
146 right: $focus-border-offset; 135 inset-inline: $focus-border-offset;
147 bottom: $focus-border-offset;
148 left: $focus-border-offset;
149 border: fn.dim(--focus --border) solid fn.color(--focus --border); 136 border: fn.dim(--focus --border) solid fn.color(--focus --border);
150 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 137 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
151 box-shadow: fn.color(--focus --shadow);
152 } 138 }
153 } 139 }
154 140
155 &:invalid { 141 &:invalid {
156 @include invalid; 142 @include invalid;
157 } 143 }
144
145 &:focus-visible,
146 &:invalid:focus-visible {
147 @include keyboard-focus;
148 }
158 } 149 }
159 150
160 @include iro.bem-modifier('extended') { 151 @include iro.bem-modifier('extended') {
@@ -167,7 +158,7 @@
167 @include iro.bem-elem('native') { 158 @include iro.bem-elem('native') {
168 &:focus { 159 &:focus {
169 @include iro.bem-sibling-elem('bg') { 160 @include iro.bem-sibling-elem('bg') {
170 border-radius: calc(fn.dim(--extended --rounding) - $focus-border-offset); 161 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
171 } 162 }
172 } 163 }
173 } 164 }
@@ -176,29 +167,15 @@
176 @include iro.bem-is('invalid') { 167 @include iro.bem-is('invalid') {
177 @include iro.bem-elem('native') { 168 @include iro.bem-elem('native') {
178 @include invalid; 169 @include invalid;
179 }
180 }
181 170
182 @include iro.bem-at-theme('keyboard') { 171 &:focus-visible {
183 @include iro.bem-elem('native') {
184 &:focus,
185 &:invalid:focus {
186 @include keyboard-focus; 172 @include keyboard-focus;
187 } 173 }
188 } 174 }
189
190 @include iro.bem-is('invalid') {
191 @include iro.bem-elem('native') {
192 &:focus {
193 @include keyboard-focus;
194 }
195 }
196 }
197 } 175 }
198 176
199 @include iro.bem-is('disabled') { 177 @include iro.bem-is('disabled') {
200 background-color: fn.color(--disabled --bg); 178 background-color: fn.color(--disabled --bg);
201 box-shadow: fn.color(--disabled --shadow);
202 179
203 @include iro.bem-elem('native') { 180 @include iro.bem-elem('native') {
204 color: fn.color(--disabled --text); 181 color: fn.color(--disabled --text);
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index e99e5ab..61ba0b6 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -9,11 +9,14 @@ mixin a-button
9 if (attributes.variant) { 9 if (attributes.variant) {
10 classes['o-button--' + attributes.variant] = true 10 classes['o-button--' + attributes.variant] = true
11 } 11 }
12 if (attributes.size) {
13 classes['o-button--' + attributes.size] = true
14 }
12 15
13 let href = attributes.disabled ? null : '#'; 16 let href = attributes.disabled ? null : '#';
14 17
15 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 18 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
16 if attributes.icon 19 if attributes.icon
17 +icon(attributes.icon)(block=!block) 20 +icon(attributes.icon)
18 = ' ' 21 = ' '
19 block 22 block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index 151e084..fb96443 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -1,17 +1,18 @@
1mixin field-label(label, hint=null) 1mixin field-label(label, hint=null)
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-field-label': true, 4 'o-field-label': true,
5 'o-field-label--left': attributes.align === 'left', 5 'is-invalid': attributes.invalid,
6 'o-field-label--right': attributes.align === 'right', 6 'is-disabled': attributes.disabled,
7 'is-invalid': attributes.invalid, 7 }
8 'is-disabled': attributes.disabled, 8 if (attributes.align) {
9 classes['o-field-label--align-' + attributes.align] = true;
9 } 10 }
10 if (attributes.class) { 11 if (attributes.class) {
11 classes[attributes.class] = true; 12 classes[attributes.class] = true;
12 } 13 }
13 14
14 let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right'; 15 let needsLabelWidth = !!attributes.align;
15 16
16 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : ''; 17 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
17 18
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 895770d..f8e5263 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -24,7 +24,11 @@ mixin text-field
24 24
25 const attr = { 25 const attr = {
26 placeholder: attributes.placeholder, 26 placeholder: attributes.placeholder,
27 disabled: attributes.disabled 27 disabled: attributes.disabled,
28 readonly: attributes.readonly,
29 pattern: attributes.pattern,
30 required: attributes.required,
31 value: attributes.value,
28 } 32 }
29 33
30 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 34 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 1e1b88f..a55baca 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -1,75 +1,75 @@
1mixin view-badge 1mixin view-badge
2 +view('badge', 'Badge') 2 +view('badge', 'Badge')
3 .c-box 3 .c-box
4 +badge(size=50 href='#')= '50' 4 +badge(size='sm' href='#')= '50'
5 = ' ' 5 = ' '
6 +badge= '100' 6 +badge= '100'
7 = ' ' 7 = ' '
8 +badge(size=200 href='#')= '200' 8 +badge(size='lg' href='#')= '200'
9 = ' ' 9 = ' '
10 +badge(size=300 href='#')= '300' 10 +badge(size='xl' href='#')= '300'
11 11
12 .c-box 12 .c-box
13 +badge(size=50 href='#' quiet=true)= '50' 13 +badge(size='sm' href='#' quiet=true)= '50'
14 = ' ' 14 = ' '
15 +badge(quiet=true)= '100' 15 +badge(quiet=true)= '100'
16 = ' ' 16 = ' '
17 +badge(size=200 href='#' quiet=true)= '200' 17 +badge(size='lg' href='#' quiet=true)= '200'
18 = ' ' 18 = ' '
19 +badge(size=300 href='#' quiet=true)= '300' 19 +badge(size='xl' href='#' quiet=true)= '300'
20 20
21 each theme in ['accent', 'positive', 'negative', 'warning'] 21 each theme in ['accent', 'positive', 'negative', 'warning']
22 .c-box 22 .c-box
23 +badge(theme)(size=50 href='#')= 'new' 23 +badge(theme)(size='sm' href='#')= 'new'
24 = ' ' 24 = ' '
25 +badge(theme)= 'new' 25 +badge(theme)= 'new'
26 = ' ' 26 = ' '
27 +badge(theme)(size=200 href='#')= 'new' 27 +badge(theme)(size='lg' href='#')= 'new'
28 = ' ' 28 = ' '
29 +badge(theme)(size=300 href='#')= 'new' 29 +badge(theme)(size='xl' href='#')= 'new'
30 30
31 .c-box 31 .c-box
32 +badge(theme)(size=50 href='#' quiet=true)= 'new' 32 +badge(theme)(size='sm' href='#' quiet=true)= 'new'
33 = ' ' 33 = ' '
34 +badge(theme)(quiet=true)= 'new' 34 +badge(theme)(quiet=true)= 'new'
35 = ' ' 35 = ' '
36 +badge(theme)(size=200 href='#' quiet=true)= 'new' 36 +badge(theme)(size='lg' href='#' quiet=true)= 'new'
37 = ' ' 37 = ' '
38 +badge(theme)(size=300 href='#' quiet=true)= 'new' 38 +badge(theme)(size='xl' href='#' quiet=true)= 'new'
39 39
40 .c-box 40 .c-box
41 +badge(size=50, pill=true)= '50' 41 +badge(size='sm', pill=true)= '50'
42 = ' ' 42 = ' '
43 +badge(pill=true)= '100' 43 +badge(pill=true)= '100'
44 = ' ' 44 = ' '
45 +badge(size=200 pill=true)= '200' 45 +badge(size='lg' pill=true)= '200'
46 = ' ' 46 = ' '
47 +badge(size=300 pill=true)= '300' 47 +badge(size='xl' pill=true)= '300'
48 48
49 .c-box 49 .c-box
50 +badge(size=50 pill=true quiet=true)= 'new' 50 +badge(size='sm' pill=true quiet=true)= 'new'
51 = ' ' 51 = ' '
52 +badge(pill=true quiet=true)= 'new' 52 +badge(pill=true quiet=true)= 'new'
53 = ' ' 53 = ' '
54 +badge(size=200 pill=true quiet=true)= 'new' 54 +badge(size='lg' pill=true quiet=true)= 'new'
55 = ' ' 55 = ' '
56 +badge(size=300 pill=true quiet=true)= 'new' 56 +badge(size='xl' pill=true quiet=true)= 'new'
57 57
58 each theme in ['accent', 'positive', 'negative', 'warning'] 58 each theme in ['accent', 'positive', 'negative', 'warning']
59 .c-box 59 .c-box
60 +badge(theme)(size=50 pill=true href='#')= 'new' 60 +badge(theme)(size='sm' pill=true href='#')= 'new'
61 = ' ' 61 = ' '
62 +badge(theme)(pill=true)= 'new' 62 +badge(theme)(pill=true)= 'new'
63 = ' ' 63 = ' '
64 +badge(theme)(size=200 pill=true href='#')= 'new' 64 +badge(theme)(size='lg' pill=true href='#')= 'new'
65 = ' ' 65 = ' '
66 +badge(theme)(size=300 pill=true href='#')= 'new' 66 +badge(theme)(size='xl' pill=true href='#')= 'new'
67 67
68 .c-box 68 .c-box
69 +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new' 69 +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
70 = ' ' 70 = ' '
71 +badge(theme)(pill=true quiet=true)= 'new' 71 +badge(theme)(pill=true quiet=true)= 'new'
72 = ' ' 72 = ' '
73 +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new' 73 +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new'
74 = ' ' 74 = ' '
75 +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new' 75 +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 7c96419..4b2281e 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,6 +1,39 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button'
5 = ' '
6 +a-button= 'Button'
7 = ' '
8 +a-button(size='lg')= 'Button'
9 = ' '
10 +a-button(size='xl')= 'Button'
11 br
12 +a-button(size='sm' disabled=true)= 'Button'
13 = ' '
14 +a-button(disabled=true)= 'Button'
15 = ' '
16 +a-button(size='lg' disabled=true)= 'Button'
17 = ' '
18 +a-button(size='xl' disabled=true)= 'Button'
19 br
20 +a-button(size='sm' outline=true)= 'Button'
21 = ' '
22 +a-button(outline=true)= 'Button'
23 = ' '
24 +a-button(size='lg' outline=true)= 'Button'
25 = ' '
26 +a-button(size='xl' outline=true)= 'Button'
27 br
28 +a-button(size='sm' outline=true disabled=true)= 'Button'
29 = ' '
30 +a-button(outline=true disabled=true)= 'Button'
31 = ' '
32 +a-button(size='lg' outline=true disabled=true)= 'Button'
33 = ' '
34 +a-button(size='xl' outline=true disabled=true)= 'Button'
35
36 .c-box
4 .l-button-group 37 .l-button-group
5 +a-button= 'Button' 38 +a-button= 'Button'
6 +a-button(disabled=true)= 'Button' 39 +a-button(disabled=true)= 'Button'
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug
index 37ffb1a..448370a 100644
--- a/tpl/views/field-label.pug
+++ b/tpl/views/field-label.pug
@@ -20,39 +20,39 @@ mixin view-field-label
20 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 20 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
21 21
22 .c-box 22 .c-box
23 +field-label('First name')(align='left' labelWidth='100px') 23 +field-label('First name')(align='start' labelWidth='100px')
24 +text-field(placeholder='Placeholder') 24 +text-field(placeholder='Placeholder')
25 br 25 br
26 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') 26 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px')
27 +text-field(placeholder='Placeholder' type='password') 27 +text-field(placeholder='Placeholder' type='password')
28 br 28 br
29 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) 29 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true)
30 +text-field(placeholder='Placeholder' type='password' invalid=true) 30 +text-field(placeholder='Placeholder' type='password' invalid=true)
31 br 31 br
32 +field-label('First name')(align='left' labelWidth='100px' disabled=true) 32 +field-label('First name')(align='start' labelWidth='100px' disabled=true)
33 +text-field(placeholder='Placeholder' disabled=true) 33 +text-field(placeholder='Placeholder' disabled=true)
34 br 34 br
35 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) 35 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' disabled=true)
36 +text-field(placeholder='Placeholder' type='password' disabled=true) 36 +text-field(placeholder='Placeholder' type='password' disabled=true)
37 br 37 br
38 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) 38 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true disabled=true)
39 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 39 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
40 40
41 .c-box 41 .c-box
42 +field-label('First name')(align='right' labelWidth='100px') 42 +field-label('First name')(align='end' labelWidth='100px')
43 +text-field(placeholder='Placeholder') 43 +text-field(placeholder='Placeholder')
44 br 44 br
45 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') 45 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px')
46 +text-field(placeholder='Placeholder' type='password') 46 +text-field(placeholder='Placeholder' type='password')
47 br 47 br
48 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) 48 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true)
49 +text-field(placeholder='Placeholder' type='password' invalid=true) 49 +text-field(placeholder='Placeholder' type='password' invalid=true)
50 br 50 br
51 +field-label('First name')(align='right' labelWidth='100px' disabled=true) 51 +field-label('First name')(align='end' labelWidth='100px' disabled=true)
52 +text-field(placeholder='Placeholder' disabled=true) 52 +text-field(placeholder='Placeholder' disabled=true)
53 br 53 br
54 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) 54 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' disabled=true)
55 +text-field(placeholder='Placeholder' type='password' disabled=true) 55 +text-field(placeholder='Placeholder' type='password' disabled=true)
56 br 56 br
57 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) 57 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true disabled=true)
58 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 58 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 19:15:15 +0000