summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/_base.scss2
-rw-r--r--src/_config.scss8
-rw-r--r--src/_declare-vars.scss18
-rw-r--r--src/_layouts.scss1
-rw-r--r--src/_mixins.scss3
-rw-r--r--src/_utils.scss4
-rw-r--r--src/layouts/_card-list.scss78
-rw-r--r--src/objects/_action-button.scss4
-rw-r--r--src/objects/_avatar.scss33
-rw-r--r--src/objects/_badge.scss36
-rw-r--r--src/objects/_card.scss72
-rw-r--r--src/objects/_divider.scss1
-rw-r--r--src/objects/_popover.scss9
-rwxr-xr-xstatic/0000 Cover@0.5x.webpbin0 -> 497976 bytes
-rwxr-xr-xstatic/01 Design Cody.pngbin0 -> 194313 bytes
-rw-r--r--tpl/objects/button.pug2
-rw-r--r--tpl/objects/card.pug11
-rw-r--r--tpl/views/card.pug45
-rw-r--r--tpl/views/icon-nav.pug2
-rw-r--r--tpl/views/message-group.pug4
-rw-r--r--tpl/views/message.pug6
-rw-r--r--tpl/views/text-field.pug2
23 files changed, 289 insertions, 54 deletions
diff --git a/package.json b/package.json
index 9855892..81ec80a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/_base.scss b/src/_base.scss
index 4932235..aecf6af 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -67,12 +67,10 @@ p {
67} 67}
68 68
69strong { 69strong {
70 color: fn.color(--heading);
71 font-weight: bold; 70 font-weight: bold;
72} 71}
73 72
74small { 73small {
75 color: fn.color(--text-mute);
76 font-size: fn.dim(--font-size --75); 74 font-size: fn.dim(--font-size --75);
77} 75}
78 76
diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..ffba8c9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -156,6 +156,10 @@ $theme-light: (
156 --bg-l1: --base --100, 156 --bg-l1: --base --100,
157 --bg-base: --base --200, 157 --bg-base: --base --200,
158 )), 158 )),
159
160 --constants: (
161 --shadow: rgba(#000, 0.15),
162 ),
159) !default; 163) !default;
160 164
161$theme-dark: ( 165$theme-dark: (
@@ -212,6 +216,10 @@ $theme-dark: (
212 --bg-l1: --base --75, 216 --bg-l1: --base --75,
213 --bg-l2: --base --100, 217 --bg-l2: --base --100,
214 )), 218 )),
219
220 --constants: (
221 --shadow: rgba(#000, 0.5),
222 ),
215) !default; 223) !default;
216 224
217$themes: ( 225$themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 23ee4d4..797001c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,12 @@
101 --thin: 1px, 101 --thin: 1px,
102 ), 102 ),
103 103
104 --shadow: (
105 --x: 0,
106 --y: 1px,
107 --blur: 4px,
108 ),
109
104 --rounding: 4px, 110 --rounding: 4px,
105 111
106 --key-focus: ( 112 --key-focus: (
@@ -110,7 +116,7 @@
110 ), 116 ),
111 117
112 --paragraph: ( 118 --paragraph: (
113 --margin-bs: fn.dim(--size --300, null), 119 --margin-bs: fn.dim(--size --200, null),
114 ), 120 ),
115 121
116 --heading: ( 122 --heading: (
@@ -230,6 +236,14 @@
230 ), $tree); 236 ), $tree);
231 } 237 }
232 238
239 @each $color, $value in map.get($theme, --constants) {
240 @include iro.props-store((
241 --colors: (
242 $color: $value,
243 ),
244 ), $tree);
245 }
246
233 @each $color, $ref in map.get($theme, --semantic) { 247 @each $color, $ref in map.get($theme, --semantic) {
234 $res: (); 248 $res: ();
235 249
@@ -246,7 +260,7 @@
246 $color: $res, 260 $color: $res,
247 ), 261 ),
248 ), $tree); 262 ), $tree);
249 } 263 }
250} 264}
251 265
252@each $theme-name, $theme in config.$themes { 266@each $theme-name, $theme in config.$themes {
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 26cfe3f..779fd64 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,4 +4,5 @@
4@use 'layouts/form'; 4@use 'layouts/form';
5@use 'layouts/flex'; 5@use 'layouts/flex';
6@use 'layouts/overflow'; 6@use 'layouts/overflow';
7@use 'layouts/card-list';
7@use 'layouts/message-group'; 8@use 'layouts/message-group';
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 29d792b..dca6831 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -20,8 +20,7 @@
20 @include set-font(--standard, ( 20 @include set-font(--standard, (
21 --line-height: null, 21 --line-height: null,
22 --size: fn.global-dim(list.join(--heading, $size)), 22 --size: fn.global-dim(list.join(--heading, $size)),
23 --weight: bold, 23 --weight: bold
24 --spacing: 1px
25 )); 24 ));
26 25
27 color: fn.global-color(--heading); 26 color: fn.global-color(--heading);
diff --git a/src/_utils.scss b/src/_utils.scss
index a99d7ec..06afa62 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -119,6 +119,10 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default;
119 color: fn.color(--text-mute); 119 color: fn.color(--text-mute);
120} 120}
121 121
122@include iro.bem-utility('c-mute-more') {
123 color: fn.color(--text-mute-more);
124}
125
122@include iro.bem-utility('mt-neutralize') { 126@include iro.bem-utility('mt-neutralize') {
123 &::before { 127 &::before {
124 content: ''; 128 content: '';
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
new file mode 100644
index 0000000..c27b297
--- /dev/null
+++ b/src/layouts/_card-list.scss
@@ -0,0 +1,78 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('card-list') {
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10
11 --grid: (
12 --row-gap: fn.global-dim(--size --800),
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31
32 @include iro.bem-layout(iro.props-namespace()) {
33 display: flex;
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36
37 @include iro.bem-modifier('grid') {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap);
41 }
42
43 @include iro.bem-modifier('masonry') {
44 display: block;
45 columns: auto fn.dim(--masonry --col-width);
46 column-gap: fn.dim(--masonry --col-gap);
47
48 @include iro.bem-elem('card') {
49 margin-bottom: fn.dim(--masonry --row-gap);
50 }
51 }
52
53 @include iro.bem-modifier('masonry-h') {
54 flex-flow: row wrap;
55 gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap);
56
57 @include iro.bem-elem('card') {
58 flex: 1 0 auto;
59 max-width: 100%;
60 }
61
62 @include iro.bem-elem('card-content') {
63 height: fn.dim(--masonry-h --row-height);
64 }
65
66 @include iro.bem-elem('dummy') {
67 flex: 1 0 auto;
68 width: fn.dim(--masonry-h --row-height);
69 }
70 }
71
72 @include iro.bem-modifier('aspect-5\\/4') {
73 @include iro.bem-elem('card') {
74 aspect-ratio: 5 / 4;
75 }
76 }
77 }
78}
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7a7ff46..7fe9d44 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default;
11 color: fn.color(list.join($theme, --disabled --label)); 11 color: fn.color(list.join($theme, --disabled --label));
12 12
13 &::after { 13 &::after {
14 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); 14 outline-color: fn.color(list.join($theme, --key-focus --border));
15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); 15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
16 } 16 }
17 17
18 &:link, 18 &:link,
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e6fa74e..5a34d19 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
24@include iro.props-namespace('avatar') { 24@include iro.props-namespace('avatar') {
25 @include iro.props-store(( 25 @include iro.props-store((
26 --dims: ( 26 --dims: (
27 --size: fn.global-dim(--size --500), 27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100), 28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150), 29 --indicator-size: fn.global-dim(--size --150),
30 --indicator-spacing: fn.global-dim(--size --40),
31 --rounding: 25%,
30 32
31 --xxxl: ( 33 --xxxl: (
32 --size: fn.global-dim(--size --1600), 34 --size: fn.global-dim(--size --1600),
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
58 --font-size: fn.global-dim(--font-size --50), 60 --font-size: fn.global-dim(--font-size --50),
59 --indicator-size: fn.global-dim(--size --100), 61 --indicator-size: fn.global-dim(--size --100),
60 ), 62 ),
61 --indicator-spacing: fn.global-dim(--size --40),
62 --rounding: 25%,
63 63
64 --key-focus: ( 64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border), 65 --border: fn.global-dim(--key-focus --border),
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
82 @include iro.bem-object(iro.props-namespace()) { 82 @include iro.bem-object(iro.props-namespace()) {
83 display: inline-block; 83 display: inline-block;
84 position: relative; 84 position: relative;
85 border: fn.dim(--key-focus --border) solid transparent;
86 border-radius: fn.dim(--rounding); 85 border-radius: fn.dim(--rounding);
87 font-size: fn.dim(--font-size); 86 font-size: fn.dim(--font-size);
88 font-style: normal; 87 font-style: normal;
89 vertical-align: .05em; 88 vertical-align: .05em;
90 89
90 &::after {
91 content: '';
92 display: none;
93 position: absolute;
94 z-index: 1;
95 inset: calc(-1 * fn.dim(--key-focus --border-offset));
96 border: fn.dim(--key-focus --border-offset) solid transparent;
97 border-radius: fn.dim(--rounding);
98 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
99 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
100 pointer-events: none;
101 }
102
91 @include iro.bem-elem('status') { 103 @include iro.bem-elem('status') {
92 position: absolute; 104 position: absolute;
93 inset-inline-end: 0; 105 inset-inline-end: 0;
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
110 @include iro.bem-modifier('circle') { 122 @include iro.bem-modifier('circle') {
111 border-radius: 100%; 123 border-radius: 100%;
112 124
125 &::after {
126 border-radius: 100%;
127 }
128
113 @include iro.bem-elem('content') { 129 @include iro.bem-elem('content') {
114 border-radius: 100%; 130 border-radius: 100%;
115 } 131 }
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
143 } 159 }
144 160
145 &:focus-visible { 161 &:focus-visible {
146 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 162 &::after {
147 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 163 display: block;
164 }
148 } 165 }
149 } 166 }
150} 167}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index cc7e500..06261b8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default;
45 } 45 }
46 46
47 @if string.slice($theme, 1, 7) == 'static-' { 47 @if string.slice($theme, 1, 7) == 'static-' {
48 &:link, 48 &::after {
49 &:visited, 49 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
50 &:enabled { 50 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
51 &:focus-visible {
52 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
54 }
55 } 51 }
56 } 52 }
57} 53}
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default;
190 186
191 @include iro.bem-object(iro.props-namespace()) { 187 @include iro.bem-object(iro.props-namespace()) {
192 display: inline-block; 188 display: inline-block;
193 margin: calc(-1 * fn.dim(--key-focus --border)); 189 position: relative;
194 padding-block: fn.dim(--pad-b); 190 padding-block: fn.dim(--pad-b);
195 padding-inline: fn.dim(--pad-i); 191 padding-inline: fn.dim(--pad-i);
196 border: fn.dim(--key-focus --border) solid transparent; 192 border-radius: fn.dim(--rounding);
197 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
198 background-color: fn.color(--bg); 193 background-color: fn.color(--bg);
199 background-clip: padding-box; 194 background-clip: padding-box;
200 color: fn.color(--label); 195 color: fn.color(--label);
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default;
203 text-align: center; 198 text-align: center;
204 text-decoration: none; 199 text-decoration: none;
205 200
201 &::after {
202 content: '';
203 display: none;
204 position: absolute;
205 z-index: 1;
206 inset: calc(-1 * fn.dim(--key-focus --border-offset));
207 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
208 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
209 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
210 pointer-events: none;
211 }
212
206 &:link, 213 &:link,
207 &:visited, 214 &:visited,
208 &:enabled { 215 &:enabled {
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default;
244 &:visited, 251 &:visited,
245 &:enabled { 252 &:enabled {
246 &:focus-visible { 253 &:focus-visible {
247 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 254 &::after {
248 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 255 display: block;
256 }
249 } 257 }
250 } 258 }
251 259
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default;
258 @include iro.bem-modifier('pill') { 266 @include iro.bem-modifier('pill') {
259 padding-inline: fn.dim(--pad-i-pill); 267 padding-inline: fn.dim(--pad-i-pill);
260 border-radius: 10em; 268 border-radius: 10em;
269
270 &::after {
271 border-radius: 10em;
272 }
261 } 273 }
262 274
263 @each $size in sm lg xl { 275 @each $size in sm lg xl {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5783ac1..9f84d7a 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,18 +18,26 @@
18 ), 18 ),
19 ), 19 ),
20 --colors: ( 20 --colors: (
21 --bg: fn.global-color(--bg-l2), 21 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute), 22 --image-bg: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute), 23 --border: fn.global-color(--border-mute),
24 --divider: fn.global-color(--border-mute),
24 25
25 --hover: ( 26 --hover: (
26 --border: fn.global-color(--border), 27 --border: fn.global-color(--border),
27 ), 28 ),
29
28 --key-focus: ( 30 --key-focus: (
29 --label: fn.global-color(--focus --text), 31 --label: fn.global-color(--focus --text),
30 --border: fn.global-color(--focus --border), 32 --border: fn.global-color(--focus --border),
31 --outline: fn.global-color(--focus --outline), 33 --outline: fn.global-color(--focus --outline),
32 ), 34 ),
35
36 --quiet: (
37 --hover: (
38 --border: fn.global-color(--text-disabled),
39 ),
40 ),
33 ), 41 ),
34 )); 42 ));
35 43
@@ -59,8 +67,20 @@
59 } 67 }
60 68
61 @include iro.bem-elem('image') { 69 @include iro.bem-elem('image') {
62 position: relative; 70 position: relative;
63 width: 100%; 71 width: 100%;
72 overflow: hidden;
73 background-color: fn.color(--image-bg);
74
75 &:first-child {
76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
77 border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border));
78 }
79
80 &:last-child {
81 border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
82 border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border));
83 }
64 84
65 @include iro.bem-next-elem('avatar') { 85 @include iro.bem-next-elem('avatar') {
66 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 86 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
@@ -102,5 +122,47 @@
102 background-color: fn.color(--divider); 122 background-color: fn.color(--divider);
103 } 123 }
104 } 124 }
125
126 @include iro.bem-modifier('quiet') {
127 position: relative;
128 border: 0;
129 background-color: transparent;
130
131 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
132 &:hover,
133 &:active {
134 @include iro.bem-elem('image') {
135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
136 outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
137 }
138 }
139
140 &:focus-visible {
141 outline: none;
142 box-shadow: none;
143
144 @include iro.bem-elem('image') {
145 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
146 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
147 }
148 }
149 }
150
151 @include iro.bem-elem('image') {
152 margin: calc(-1 * fn.dim(--key-focus --border));
153 border: fn.dim(--key-focus --border) solid transparent;
154 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
155 background-clip: padding-box;
156 }
157
158 @include iro.bem-elem('body') {
159 padding: 0;
160 padding-block-start: fn.dim(--spacing);
161 }
162
163 @include iro.bem-elem('footer') {
164 padding-inline: 0;
165 }
166 }
105 } 167 }
106} 168}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 84ddf12..d1e2897 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default;
75 75
76 @include iro.bem-object(iro.props-namespace()) { 76 @include iro.bem-object(iro.props-namespace()) {
77 display: flex; 77 display: flex;
78 flex: 0 0 auto;
78 flex-direction: row; 79 flex-direction: row;
79 align-items: center; 80 align-items: center;
80 block-size: 1em; 81 block-size: 1em;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 9d4b1c7..5ad58ec 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -14,7 +14,12 @@
14 --colors: ( 14 --colors: (
15 --bg: fn.global-color(--bg-l2), 15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--border), 16 --border: fn.global-color(--border),
17 --shadow: 0 .2em .5em rgba(#000, .1), 17 --filter: drop-shadow(
18 fn.global-dim(--shadow --x)
19 fn.global-dim(--shadow --y)
20 fn.global-dim(--shadow --blur)
21 fn.global-color(--shadow)
22 ),
18 ), 23 ),
19 )); 24 ));
20 25
@@ -29,7 +34,7 @@
29 border: fn.dim(--border) solid fn.color(--border); 34 border: fn.dim(--border) solid fn.color(--border);
30 border-radius: fn.dim(--rounding); 35 border-radius: fn.dim(--rounding);
31 background-color: fn.color(--bg); 36 background-color: fn.color(--bg);
32 box-shadow: fn.color(--shadow); 37 filter: fn.color(--filter);
33 38
34 @include iro.bem-modifier('up-left') { 39 @include iro.bem-modifier('up-left') {
35 transform: translate(var(--x), calc(var(--y) - 100%)); 40 transform: translate(var(--x), calc(var(--y) - 100%));
diff --git a/static/0000 Cover@0.5x.webp b/static/0000 Cover@0.5x.webp
new file mode 100755
index 0000000..2ad8155
--- /dev/null
+++ b/static/0000 Cover@0.5x.webp
Binary files differ
diff --git a/static/01 Design Cody.png b/static/01 Design Cody.png
new file mode 100755
index 0000000..d734a41
--- /dev/null
+++ b/static/01 Design Cody.png
Binary files differ
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index b5fb8da..1fa3347 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -5,7 +5,7 @@ mixin a-button
5 'o-button--block': attributes.block, 5 'o-button--block': attributes.block,
6 'o-button--primary': attributes.primary, 6 'o-button--primary': attributes.primary,
7 'o-button--outline': attributes.outline, 7 'o-button--outline': attributes.outline,
8 'o-button--round': !!attributes.icon 8 'o-button--round': !!attributes.icon && !block
9 } 9 }
10 if (attributes.variant) { 10 if (attributes.variant) {
11 classes['o-button--' + attributes.variant] = true 11 classes['o-button--' + attributes.variant] = true
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d61393d..d7595d1 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,7 +1,12 @@
1mixin card 1mixin card
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-card': true, 4 'o-card': true,
5 'o-card--quiet': !!attributes.quiet,
6 }
7
8 if (attributes.class) {
9 classes[attributes.class] = true;
5 } 10 }
6 11
7 if attributes.href 12 if attributes.href
@@ -13,10 +18,10 @@ mixin card
13 18
14mixin card-image 19mixin card-image
15 .o-card__image 20 .o-card__image
16 img.o-card__image-img(src=attributes.src) 21 img.o-card__image-img(src=attributes.src style=attributes.style)
17 22
18mixin card-body 23mixin card-body
19 .o-card__body 24 .o-card__body(style=attributes.style)
20 block 25 block
21 26
22mixin card-title 27mixin card-title
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 6858867..e466cdc 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,23 +1,54 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')
3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' }) 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
4 +card(href='#') 4 +card(href='#')
5 +card-image(src='Drawing_Half.png') 5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
6 +card-avatar(src='avatar.png') 6 +card-avatar(src='avatar.png')
7 +card-body 7 +card-body
8 +card-title= 'XS Heading' 8 +card-title= 'XS Heading'
9 +card-content= loremIpsum 9 +card-content
10 p= loremIpsum
11 p= loremIpsum
10 +card-footer 12 +card-footer
11 = 'Footer' 13 = 'Footer'
12 14
13 +card(href='#') 15 +card
14 +card-body 16 +card-body
15 .l-media 17 .l-media
16 +avatar(class='l-media__block' src='avatar.png') 18 +avatar(class='l-media__block' src='avatar.png')
17 .l-media__block.l-media__block--main 19 .l-media__block.l-media__block--main
18 strong.u-d-block= 'Volpeon' 20 strong.u-d-block= 'Volpeon'
19 small.u-d-block= '@volpeon@is-a.wyvern.rip' 21 small.u-d-block= '@volpeon@is-a.wyvern.rip'
20 +card-content= loremIpsum 22 +card-content
21 +card-image(src='Drawing_Half.png') 23 p= loremIpsum
24 p= loremIpsum
25 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
22 +card-body 26 +card-body
23 = 'Footer' 27 .l-media
28 .l-media__block
29 +badge('positive')(quiet=true icon='repeat' href='#')
30 +icon('repeat')
31 strong.u-mis-50= '12'
32 .l-media__block
33 +badge('warning')(quiet=true icon='star' href='#')
34 +icon('star')
35 strong.u-mis-50= '34'
36 .l-media__block.u-mis-auto
37 +a-button(primary=true)= 'Reply'
38
39 +card(quiet=true href='#')
40 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
41 +card-body
42 +card-title= 'XS Heading'
43 +card-content
44 p= loremIpsum
45 p= loremIpsum
46
47 +divider('faint')
48
49 .l-card-list.l-card-list--masonry
50 each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
51 +card(href='#' class='l-card-list__card')
52 +card-image(src=img)
53 +card-body
54 +card-title= 'XS Heading'
diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug
index e71229d..8ba9880 100644
--- a/tpl/views/icon-nav.pug
+++ b/tpl/views/icon-nav.pug
@@ -5,7 +5,7 @@ mixin view-icon-nav
5 +icon-nav-item('hash') 5 +icon-nav-item('hash')
6 +icon-nav-item('bookmark')(selected=true) 6 +icon-nav-item('bookmark')(selected=true)
7 +icon-nav-item('tags') 7 +icon-nav-item('tags')
8 +icon-nav-item('cog')(class='u-ml-auto') 8 +icon-nav-item('cog')(class='u-mis-auto')
9 +icon-nav-item('logout') 9 +icon-nav-item('logout')
10 10
11 .c-box 11 .c-box
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index dc744d9..48cb008 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -71,10 +71,10 @@ mixin view-message-group
71 .l-media 71 .l-media
72 .l-media__block.l-media__block--main 72 .l-media__block.l-media__block--main
73 strong= 'Volpeon' 73 strong= 'Volpeon'
74 small.u-ml-100= '@volpeon@mk.vulpes.one' 74 small.u-mis-100= '@volpeon@mk.vulpes.one'
75 small.l-media__block 75 small.l-media__block
76 = '5 minutes ago' 76 = '5 minutes ago'
77 +icon('lock')(class='u-ml-100') 77 +icon('lock')(class='u-mis-100')
78 +slot('body')= 'Full width bubble messages test' 78 +slot('body')= 'Full width bubble messages test'
79 +message()(theme='t-up' group=true) 79 +message()(theme='t-up' group=true)
80 +slot('body')= loremIpsum 80 +slot('body')= loremIpsum
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index 9130537..dc8b289 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -5,7 +5,7 @@ mixin view-message
5 +slot('body')= loremIpsum 5 +slot('body')= loremIpsum
6 +slot('time') 6 +slot('time')
7 = '12:34' 7 = '12:34'
8 +icon('lock')(class='u-ml-100') 8 +icon('lock')(class='u-mis-100')
9 9
10 .c-box 10 .c-box
11 +message('Volpeon')(compact=true highlight=true theme='t-up') 11 +message('Volpeon')(compact=true highlight=true theme='t-up')
@@ -21,10 +21,10 @@ mixin view-message
21 .l-media 21 .l-media
22 .l-media__block.l-media__block--main 22 .l-media__block.l-media__block--main
23 strong= 'Volpeon' 23 strong= 'Volpeon'
24 small.u-ml-100= '@volpeon@mk.vulpes.one' 24 small.u-mis-100= '@volpeon@mk.vulpes.one'
25 small.l-media__block 25 small.l-media__block
26 = '5 minutes ago' 26 = '5 minutes ago'
27 +icon('lock')(class='u-ml-100') 27 +icon('lock')(class='u-mis-100')
28 +slot('body') 28 +slot('body')
29 = loremIpsum 29 = loremIpsum
30 = loremIpsum 30 = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 9a60741..165e2ce 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -17,7 +17,7 @@ mixin view-text-field
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-media__block')= 'Volpeon' 19 +action-button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-ml-50') 20 +divider('vertical')(class='u-mis-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-media__block') 22 +action-button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-media__block') 23 +action-button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 20:06:15 +0000