diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_apply-vars.scss | 28 | ||||
-rw-r--r-- | src/_declare-vars.scss | 22 | ||||
-rw-r--r-- | src/_layouts.scss | 1 | ||||
-rw-r--r-- | src/_objects.scss | 1 | ||||
-rw-r--r-- | src/_utils.scss | 8 | ||||
-rw-r--r-- | src/layouts/_bubble-group.scss | 38 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 1 | ||||
-rw-r--r-- | src/objects/_bubble.scss | 48 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 8 |
9 files changed, 134 insertions, 21 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 9639a97..0bdc3a8 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss | |||
@@ -25,22 +25,42 @@ | |||
25 | @include iro.props-assign('palette-dark'); | 25 | @include iro.props-assign('palette-dark'); |
26 | } | 26 | } |
27 | 27 | ||
28 | @include iro.bem-theme('hi') { | ||
29 | @include iro.props-assign('colors'); | ||
30 | @include iro.props-assign('palette-light-hi'); | ||
31 | |||
32 | @media (prefers-color-scheme: dark) { | ||
33 | @include iro.props-assign('colors-dark'); | ||
34 | @include iro.props-assign('palette-dark-hi'); | ||
35 | } | ||
36 | } | ||
37 | |||
38 | @include iro.bem-theme('lo') { | ||
39 | @include iro.props-assign('colors'); | ||
40 | @include iro.props-assign('palette-light-lo'); | ||
41 | |||
42 | @media (prefers-color-scheme: dark) { | ||
43 | @include iro.props-assign('colors-dark'); | ||
44 | @include iro.props-assign('palette-dark-lo'); | ||
45 | } | ||
46 | } | ||
47 | |||
28 | @include iro.bem-theme('raised') { | 48 | @include iro.bem-theme('raised') { |
29 | @include iro.props-assign('colors'); | 49 | @include iro.props-assign('colors'); |
30 | @include iro.props-assign('palette-light-raised'); | 50 | @include iro.props-assign('palette-light-hi'); |
31 | 51 | ||
32 | @media (prefers-color-scheme: dark) { | 52 | @media (prefers-color-scheme: dark) { |
33 | @include iro.props-assign('colors-dark'); | 53 | @include iro.props-assign('colors-dark'); |
34 | @include iro.props-assign('palette-dark-raised'); | 54 | @include iro.props-assign('palette-dark-lo'); |
35 | } | 55 | } |
36 | } | 56 | } |
37 | 57 | ||
38 | @include iro.bem-theme('lowered') { | 58 | @include iro.bem-theme('lowered') { |
39 | @include iro.props-assign('colors'); | 59 | @include iro.props-assign('colors'); |
40 | @include iro.props-assign('palette-light-lowered'); | 60 | @include iro.props-assign('palette-light-lo'); |
41 | 61 | ||
42 | @media (prefers-color-scheme: dark) { | 62 | @media (prefers-color-scheme: dark) { |
43 | @include iro.props-assign('colors-dark'); | 63 | @include iro.props-assign('colors-dark'); |
44 | @include iro.props-assign('palette-dark-lowered'); | 64 | @include iro.props-assign('palette-dark-hi'); |
45 | } | 65 | } |
46 | } | 66 | } |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 0bcf101..883b753 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -148,21 +148,21 @@ | |||
148 | 148 | ||
149 | @include iro.props-store(( | 149 | @include iro.props-store(( |
150 | --colors: ( | 150 | --colors: ( |
151 | --gray: fn.gray-palette(96%), | 151 | --gray: fn.gray-palette(100%), |
152 | ), | 152 | ), |
153 | ), 'palette-light'); | 153 | ), 'palette-light-hi'); |
154 | 154 | ||
155 | @include iro.props-store(( | 155 | @include iro.props-store(( |
156 | --colors: ( | 156 | --colors: ( |
157 | --gray: fn.gray-palette(100%), | 157 | --gray: fn.gray-palette(96%), |
158 | ), | 158 | ), |
159 | ), 'palette-light-raised'); | 159 | ), 'palette-light'); |
160 | 160 | ||
161 | @include iro.props-store(( | 161 | @include iro.props-store(( |
162 | --colors: ( | 162 | --colors: ( |
163 | --gray: fn.gray-palette(91%), | 163 | --gray: fn.gray-palette(91%), |
164 | ), | 164 | ), |
165 | ), 'palette-light-lowered'); | 165 | ), 'palette-light-lo'); |
166 | 166 | ||
167 | // | 167 | // |
168 | 168 | ||
@@ -187,21 +187,21 @@ | |||
187 | 187 | ||
188 | @include iro.props-store(( | 188 | @include iro.props-store(( |
189 | --colors: ( | 189 | --colors: ( |
190 | --gray: fn.gray-palette(9%), | 190 | --gray: fn.gray-palette(6%), |
191 | ), | 191 | ), |
192 | ), 'palette-dark'); | 192 | ), 'palette-dark-hi'); |
193 | 193 | ||
194 | @include iro.props-store(( | 194 | @include iro.props-store(( |
195 | --colors: ( | 195 | --colors: ( |
196 | --gray: fn.gray-palette(13%), | 196 | --gray: fn.gray-palette(9%), |
197 | ), | 197 | ), |
198 | ), 'palette-dark-raised'); | 198 | ), 'palette-dark'); |
199 | 199 | ||
200 | @include iro.props-store(( | 200 | @include iro.props-store(( |
201 | --colors: ( | 201 | --colors: ( |
202 | --gray: fn.gray-palette(5%), | 202 | --gray: fn.gray-palette(13%), |
203 | ), | 203 | ), |
204 | ), 'palette-dark-lowered'); | 204 | ), 'palette-dark-lo'); |
205 | 205 | ||
206 | // | 206 | // |
207 | 207 | ||
diff --git a/src/_layouts.scss b/src/_layouts.scss index 3a4c32b..331eb7e 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss | |||
@@ -4,3 +4,4 @@ | |||
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/bubble-group'; | ||
diff --git a/src/_objects.scss b/src/_objects.scss index d01ed54..9a516ee 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -11,6 +11,7 @@ | |||
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/bubble'; | ||
14 | @use 'objects/header'; | 15 | @use 'objects/header'; |
15 | @use 'objects/sidebar'; | 16 | @use 'objects/sidebar'; |
16 | @use 'objects/action-menu'; | 17 | @use 'objects/action-menu'; |
diff --git a/src/_utils.scss b/src/_utils.scss index aeb0812..860fe3e 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
@@ -104,9 +104,7 @@ $dirs: ( | |||
104 | margin#{$suffix}: fn.global-dim(--size --#{$size}); | 104 | margin#{$suffix}: fn.global-dim(--size --#{$size}); |
105 | } | 105 | } |
106 | } | 106 | } |
107 | } | 107 | |
108 | |||
109 | @each $dir, $suffix in $dirs { | ||
110 | @include iro.bem-utility('p#{$dir}-auto') { | 108 | @include iro.bem-utility('p#{$dir}-auto') { |
111 | padding#{$suffix}: auto; | 109 | padding#{$suffix}: auto; |
112 | } | 110 | } |
@@ -116,4 +114,8 @@ $dirs: ( | |||
116 | padding#{$suffix}: fn.global-dim(--size --#{$size}); | 114 | padding#{$suffix}: fn.global-dim(--size --#{$size}); |
117 | } | 115 | } |
118 | } | 116 | } |
117 | |||
118 | @include iro.bem-utility('b#{$dir}-0') { | ||
119 | border#{$suffix}: 0; | ||
120 | } | ||
119 | } | 121 | } |
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss new file mode 100644 index 0000000..4db70d0 --- /dev/null +++ b/src/layouts/_bubble-group.scss | |||
@@ -0,0 +1,38 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('bubble-group') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --spacing-x: fn.global-dim(--size --225), | ||
8 | --spacing-y: fn.global-dim(--size --50), | ||
9 | ) | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.bem-layout(iro.props-namespace()) { | ||
13 | display: grid; | ||
14 | grid-template-columns: auto 1fr; | ||
15 | grid-auto-rows: auto; | ||
16 | grid-template-areas: 'avatar bubble'; | ||
17 | justify-items: start; | ||
18 | align-items: flex-start; | ||
19 | gap: fn.dim(--spacing-y) fn.dim(--spacing-x); | ||
20 | |||
21 | @include iro.bem-elem('avatar') { | ||
22 | grid-area: avatar; | ||
23 | position: sticky; | ||
24 | top: 0; | ||
25 | justify-self: end; | ||
26 | |||
27 | @include iro.bem-next-elem('bubble') { | ||
28 | &::before { | ||
29 | display: block; | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | |||
34 | @include iro.bem-elem('bubble') { | ||
35 | grid-column: bubble; | ||
36 | } | ||
37 | } | ||
38 | } | ||
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 88e84d6..a3e1ca1 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -56,6 +56,7 @@ | |||
56 | transform: translate(var(--x), var(--y)); | 56 | transform: translate(var(--x), var(--y)); |
57 | border: fn.dim(--border) solid fn.color(--border); | 57 | border: fn.dim(--border) solid fn.color(--border); |
58 | border-radius: fn.dim(--rounding); | 58 | border-radius: fn.dim(--rounding); |
59 | background-clip: padding-box; | ||
59 | background-color: fn.global-color(--bg); | 60 | background-color: fn.global-color(--bg); |
60 | box-shadow: fn.color(--shadow); | 61 | box-shadow: fn.color(--shadow); |
61 | color: fn.global-color(--fg); | 62 | color: fn.global-color(--fg); |
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss new file mode 100644 index 0000000..26746fe --- /dev/null +++ b/src/objects/_bubble.scss | |||
@@ -0,0 +1,48 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('bubble') { | ||
5 | @include iro.props-store(( | ||
6 | --colors: ( | ||
7 | --image-bg: fn.global-color(--obj), | ||
8 | ), | ||
9 | ), 'colors'); | ||
10 | |||
11 | @include iro.props-store(( | ||
12 | --dims: ( | ||
13 | --pad-x: fn.global-dim(--size --150), | ||
14 | --pad-y: fn.global-dim(--size --85), | ||
15 | --rounding: 3px, | ||
16 | --arrow-size: fn.global-dim(--size --100), | ||
17 | ) | ||
18 | ), 'dims'); | ||
19 | |||
20 | @include iro.bem-object(iro.props-namespace()) { | ||
21 | position: relative; | ||
22 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
23 | border-radius: fn.dim(--rounding); | ||
24 | background-color: fn.global-color(--bg); | ||
25 | color: fn.global-color(--fg); | ||
26 | |||
27 | &::before { | ||
28 | content: ''; | ||
29 | display: none; | ||
30 | position: absolute; | ||
31 | top: 0; | ||
32 | left: calc(-1 * fn.dim(--arrow-size)); | ||
33 | border: fn.dim(--arrow-size) solid fn.global-color(--bg); | ||
34 | border-bottom-color: transparent; | ||
35 | border-left-color: transparent; | ||
36 | } | ||
37 | |||
38 | @include iro.bem-elem('user') { | ||
39 | display: block; | ||
40 | } | ||
41 | |||
42 | @include iro.bem-elem('time') { | ||
43 | margin-left: 1em; | ||
44 | float: right; | ||
45 | transform: translate(.2em, .2em); | ||
46 | } | ||
47 | } | ||
48 | } | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index f6e8e63..094e09b 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -9,7 +9,7 @@ | |||
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: 8px, |
13 | --border: 1px, | 13 | --border: 1px, |
14 | 14 | ||
15 | --body: ( | 15 | --body: ( |
@@ -28,7 +28,7 @@ | |||
28 | 28 | ||
29 | @include iro.props-store(( | 29 | @include iro.props-store(( |
30 | --colors: ( | 30 | --colors: ( |
31 | --border: rgba(#000, .05), | 31 | --border: rgba(#000, .2), |
32 | --shadow: 0 .2em .5em rgba(#000, .2), | 32 | --shadow: 0 .2em .5em rgba(#000, .2), |
33 | 33 | ||
34 | --sidebar: ( | 34 | --sidebar: ( |
@@ -57,9 +57,11 @@ | |||
57 | max-width: fn.dim(--width-md); | 57 | max-width: fn.dim(--width-md); |
58 | margin: 0 auto; | 58 | margin: 0 auto; |
59 | overflow: hidden; | 59 | overflow: hidden; |
60 | border: fn.dim(--border) solid fn.color(--border); | ||
60 | border-radius: fn.dim(--rounding); | 61 | border-radius: fn.dim(--rounding); |
62 | background-clip: padding-box; | ||
61 | background-color: fn.global-color(--bg); | 63 | background-color: fn.global-color(--bg); |
62 | box-shadow: 0 0 0 1px fn.color(--border), fn.color(--shadow); | 64 | box-shadow: fn.color(--shadow); |
63 | color: fn.global-color(--fg); | 65 | color: fn.global-color(--fg); |
64 | 66 | ||
65 | @include iro.bem-modifier('sm') { | 67 | @include iro.bem-modifier('sm') { |