diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-menu.scss | 111 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 150 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 39 |
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 | } | ||