summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
commitdd1ade8acc17d74a45240d255cb862009129b0ec (patch)
tree47fdc87cdcda8e8597c9d192d07ca5a97d375072 /src/objects
parentAdd static themes to action button (diff)
downloadiro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-menu.scss111
-rw-r--r--src/objects/_avatar.scss150
-rw-r--r--src/objects/_status-indicator.scss39
3 files changed, 300 insertions, 0 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
new file mode 100644
index 0000000..2a74834
--- /dev/null
+++ b/src/objects/_action-menu.scss
@@ -0,0 +1,111 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: 0,
8 --pad-b: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 --item: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 ),
16 ),
17 --colors: (
18 --bg: fn.global-color(--bg-l2),
19 --text: fn.global-color(--text),
20 --shadow: 0 .2em .5em rgba(#000, .1),
21 --border: fn.global-color(--border),
22 --separator: fn.global-color(--border),
23 --icon: fn.global-color(--text-mute),
24 --item: (
25 --hover: (
26 --bg: fn.global-color(--border-mute),
27 --label: fn.global-color(--heading),
28 ),
29 --disabled: (
30 --label: fn.global-color(--text-disabled),
31 ),
32 --key-focus: (
33 --border: fn.global-color(--focus --border),
34 --outline: fn.global-color(--focus --outline),
35 ),
36 ),
37 ),
38 ));
39
40 @include iro.bem-object(iro.props-namespace()) {
41 position: absolute;
42 z-index: 10000;
43 inset-block-start: 0;
44 inset-inline-start: 0;
45 padding-block: fn.dim(--pad-b);
46 padding-inline: fn.dim(--pad-i);
47 transform: translate(var(--x), var(--y));
48 border: fn.dim(--border) solid fn.color(--border);
49 border-radius: fn.dim(--rounding);
50 background-clip: padding-box;
51 background-color: fn.color(--bg);
52 box-shadow: fn.color(--shadow);
53 color: fn.color(--text);
54
55 @include iro.bem-modifier('up-left') {
56 transform: translate(var(--x), calc(var(--y) - 100%));
57 }
58
59 @include iro.bem-modifier('up-right') {
60 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
61 }
62
63 @include iro.bem-modifier('down-right') {
64 transform: translate(calc(var(--x) - 100%), var(--y));
65 }
66
67 @include iro.bem-elem('item') {
68 display: block;
69 box-sizing: border-box;
70 inline-size: 100%;
71 padding-block: calc(fn.dim(--item --pad-b) - 2px);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px);
73 border: 2px solid transparent;
74 color: fn.color(--item --disabled --label);
75
76 &:link,
77 &:visited,
78 &:enabled {
79 color: currentColor;
80
81 &:hover,
82 &:active,
83 &:focus-visible {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:focus-visible {
89 border-color: fn.color(--item --key-focus --border);
90 }
91 }
92 }
93
94 @include iro.bem-elem('separator') {
95 block-size: 1px;
96 margin-block: fn.dim(--separator);
97 background-color: fn.color(--separator);
98 }
99
100 @include iro.bem-elem('slot') {
101 padding-block: fn.dim(--item --pad-b);
102 padding-inline: fn.dim(--item --pad-i);
103 }
104
105 @include iro.bem-elem('icon-slot') {
106 display: flex;
107 justify-content: center;
108 inline-size: fn.foreign-dim(--icon, --size);
109 }
110 }
111}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
new file mode 100644
index 0000000..e6fa74e
--- /dev/null
+++ b/src/objects/_avatar.scss
@@ -0,0 +1,150 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
6
7@mixin status($size: ()) {
8 @include iro.bem-elem('status') {
9 width: fn.dim(list.join($size, --indicator-size));
10 height: fn.dim(list.join($size, --indicator-size));
11
12 @include iro.bem-next-elem('content') {
13 mask-image: radial-gradient(
14 circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
15 calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
16 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
17 transparent 95%,
18 #fff
19 );
20 }
21 }
22}
23
24@include iro.props-namespace('avatar') {
25 @include iro.props-store((
26 --dims: (
27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150),
30
31 --xxxl: (
32 --size: fn.global-dim(--size --1600),
33 --font-size: fn.global-dim(--font-size --800),
34 --indicator-size: fn.global-dim(--size --400),
35 ),
36 --xxl: (
37 --size: fn.global-dim(--size --1200),
38 --font-size: fn.global-dim(--font-size --600),
39 --indicator-size: fn.global-dim(--size --300),
40 ),
41 --xl: (
42 --size: fn.global-dim(--size --800),
43 --font-size: fn.global-dim(--font-size --300),
44 --indicator-size: fn.global-dim(--size --225),
45 ),
46 --lg: (
47 --size: fn.global-dim(--size --650),
48 --font-size: fn.global-dim(--font-size --200),
49 --indicator-size: fn.global-dim(--size --175),
50 ),
51 --sm: (
52 --size: fn.global-dim(--size --375),
53 --font-size: fn.global-dim(--font-size --75),
54 --indicator-size: fn.global-dim(--size --125),
55 ),
56 --xs: (
57 --size: fn.global-dim(--size --250),
58 --font-size: fn.global-dim(--font-size --50),
59 --indicator-size: fn.global-dim(--size --100),
60 ),
61 --indicator-spacing: fn.global-dim(--size --40),
62 --rounding: 25%,
63
64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border),
66 --border-offset: fn.global-dim(--key-focus --border-offset),
67 --outline: fn.global-dim(--key-focus --outline),
68 ),
69 ),
70 --colors: (
71 --h: 354,
72 --s: 44%,
73 --l: 45%,
74
75 --key-focus: (
76 --border: fn.global-color(--focus --border),
77 --outline: fn.global-color(--focus --outline),
78 ),
79 ),
80 ));
81
82 @include iro.bem-object(iro.props-namespace()) {
83 display: inline-block;
84 position: relative;
85 border: fn.dim(--key-focus --border) solid transparent;
86 border-radius: fn.dim(--rounding);
87 font-size: fn.dim(--font-size);
88 font-style: normal;
89 vertical-align: .05em;
90
91 @include iro.bem-elem('status') {
92 position: absolute;
93 inset-inline-end: 0;
94 inset-block-end: 0;
95 }
96
97 @include status;
98
99 @include iro.bem-elem('content') {
100 display: block;
101 inline-size: fn.dim(--size);
102 block-size: fn.dim(--size);
103 border-radius: fn.dim(--rounding);
104 line-height: fn.dim(--size);
105 text-align: center;
106 object-fit: cover;
107 object-position: center center;
108 }
109
110 @include iro.bem-modifier('circle') {
111 border-radius: 100%;
112
113 @include iro.bem-elem('content') {
114 border-radius: 100%;
115 }
116 }
117
118 @include iro.bem-modifier('placeholder') {
119 @include iro.bem-elem('content') {
120 background-color: hsl(0, 0%, fn.color(--l));
121 }
122 }
123
124 @include iro.bem-modifier('colored') {
125 @include iro.bem-elem('content') {
126 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
127 color: #fff;
128 }
129 }
130
131 @each $size in $sizes {
132 @include iro.bem-modifier($size) {
133 font-size: fn.dim(--#{$size} --font-size);
134
135 @include status(--#{$size});
136
137 @include iro.bem-elem('content') {
138 inline-size: fn.dim(--#{$size} --size);
139 block-size: fn.dim(--#{$size} --size);
140 line-height: fn.dim(--#{$size} --size);
141 }
142 }
143 }
144
145 &:focus-visible {
146 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
147 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
148 }
149 }
150}
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
new file mode 100644
index 0000000..4c5305e
--- /dev/null
+++ b/src/objects/_status-indicator.scss
@@ -0,0 +1,39 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
6@include iro.props-namespace('status-indicator') {
7 @include iro.props-store((
8 --dims: (
9 --size: fn.global-dim(--size --125),
10 ),
11 --colors: (
12 --default: fn.global-color(--border-strong),
13 --primary: fn.global-color(--text),
14 ),
15 ));
16
17 @each $theme in $themes {
18 @include iro.props-store((
19 --colors: (
20 --#{$theme}: fn.global-color(--#{$theme}-static --800),
21 ),
22 ));
23 }
24
25 @include iro.bem-object(iro.props-namespace()) {
26 display: inline-block;
27 width: fn.dim(--size);
28 height: fn.dim(--size);
29 border-radius: 10em;
30 background-color: fn.color(--default);
31 vertical-align: middle;
32
33 @each $theme in $themes {
34 @include iro.bem-is($theme) {
35 background-color: fn.color(--#{$theme});
36 }
37 }
38 }
39}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 09:59:53 +0000