summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_apply-vars.scss28
-rw-r--r--src/_declare-vars.scss22
-rw-r--r--src/_layouts.scss1
-rw-r--r--src/_objects.scss1
-rw-r--r--src/_utils.scss8
-rw-r--r--src/layouts/_bubble-group.scss38
-rw-r--r--src/objects/_action-menu.scss1
-rw-r--r--src/objects/_bubble.scss48
-rw-r--r--src/objects/_dialog.scss8
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') {