summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
committerVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
commit511a47c8964c43927563ee88b62b3f215bf9b7d1 (patch)
tree108bbc0139ede490a2038a2f6c96467f62666346 /src
parentImproved bubble (diff)
downloadiro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.gz
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.bz2
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_declare-vars.scss4
-rw-r--r--src/_objects.scss2
-rw-r--r--src/_utils.scss16
-rw-r--r--src/layouts/_container.scss65
-rw-r--r--src/objects/_alert.scss4
-rw-r--r--src/objects/_checkbox.scss32
-rw-r--r--src/objects/_dialog.scss66
-rw-r--r--src/objects/_divider.scss12
-rw-r--r--src/objects/_header.scss31
-rw-r--r--src/objects/_lightbox.scss2
-rw-r--r--src/objects/_radio.scss18
-rw-r--r--src/objects/_sidebar.scss36
-rw-r--r--src/objects/_switch.scss18
-rw-r--r--src/objects/_text-field.scss10
14 files changed, 107 insertions, 209 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index c28cbb2..89d10fe 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -79,7 +79,7 @@
79 --400: iro.fn-px-to-rem(28px), 79 --400: iro.fn-px-to-rem(28px),
80 ), 80 ),
81 81
82 --border-width: ( 82 --border: (
83 --thick: 4px, 83 --thick: 4px,
84 --medium: 2px, 84 --medium: 2px,
85 --thin: 1px, 85 --thin: 1px,
@@ -160,7 +160,7 @@
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(92%),
164 ), 164 ),
165), 'palette-light-lo'); 165), 'palette-light-lo');
166 166
diff --git a/src/_objects.scss b/src/_objects.scss
index 9a516ee..e2551ad 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -12,8 +12,6 @@
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/bubble';
15@use 'objects/header';
16@use 'objects/sidebar';
17@use 'objects/action-menu'; 15@use 'objects/action-menu';
18@use 'objects/menu'; 16@use 'objects/menu';
19@use 'objects/backdrop'; 17@use 'objects/backdrop';
diff --git a/src/_utils.scss b/src/_utils.scss
index c0bc087..4aea27c 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -103,18 +103,16 @@ $dirs: (
103 @include iro.bem-utility('m#{$dir}-auto') { 103 @include iro.bem-utility('m#{$dir}-auto') {
104 margin#{$suffix}: auto; 104 margin#{$suffix}: auto;
105 } 105 }
106
107 @each $size in (0 10 50 100 200 400) {
108 @include iro.bem-utility('m#{$dir}-#{$size}') {
109 margin#{$suffix}: fn.global-dim(--size --#{$size});
110 }
111 }
112 106
113 @include iro.bem-utility('p#{$dir}-auto') { 107 @include iro.bem-utility('p#{$dir}-auto') {
114 padding#{$suffix}: auto; 108 padding#{$suffix}: auto;
115 } 109 }
116 110
117 @each $size in (0 10 50 100 200 400) { 111 @each $size in (0 10 50 75 100 125 200 400 700) {
112 @include iro.bem-utility('m#{$dir}-#{$size}') {
113 margin#{$suffix}: fn.global-dim(--size --#{$size});
114 }
115
118 @include iro.bem-utility('p#{$dir}-#{$size}') { 116 @include iro.bem-utility('p#{$dir}-#{$size}') {
119 padding#{$suffix}: fn.global-dim(--size --#{$size}); 117 padding#{$suffix}: fn.global-dim(--size --#{$size});
120 } 118 }
@@ -123,4 +121,8 @@ $dirs: (
123 @include iro.bem-utility('b#{$dir}-0') { 121 @include iro.bem-utility('b#{$dir}-0') {
124 border#{$suffix}: 0; 122 border#{$suffix}: 0;
125 } 123 }
124
125 @include iro.bem-utility('b#{$dir}-1') {
126 border#{$suffix}: 1px solid fn.global-color(--obj);
127 }
126} 128}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 3f81758..521262d 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -5,77 +5,22 @@
5@include iro.props-namespace('container') { 5@include iro.props-namespace('container') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: ( 7 --dims: (
8 --content-width: iro.fn-px-to-rem(700px), 8 --width: iro.fn-px-to-rem(700px),
9 --sm-content-width: iro.fn-px-to-rem(360px), 9 --width-50: iro.fn-px-to-rem(360px),
10 --pad-x: fn.global-dim(--size --700),
11 --pad-y: fn.global-dim(--size --700),
12 ) 10 )
13 ), 'dims'); 11 ), 'dims');
14 12
15 @include iro.bem-layout(iro.props-namespace()) { 13 @include iro.bem-layout(iro.props-namespace()) {
16 overflow: hidden;
17
18 @include iro.bem-elem('inner') {
19 margin-top: calc(-1 * fn.global-dim(--size --700));
20 margin-bottom: calc(-1 * fn.global-dim(--size --700));
21
22 &::before,
23 &::after {
24 content: '';
25 display: block;
26 width: 0;
27 height: 0;
28 }
29
30 &::before {
31 margin-bottom: fn.global-dim(--size --700);
32 }
33
34 &::after {
35 margin-top: fn.global-dim(--size --700);
36 }
37 }
38
39 @include iro.bem-modifier('pad-x') {
40 padding-right: fn.dim(--pad-x);
41 padding-left: fn.dim(--pad-x);
42 }
43
44 @include iro.bem-modifier('pad-y') {
45 padding-top: fn.dim(--pad-y);
46 padding-bottom: fn.dim(--pad-y);
47 }
48
49 @include iro.bem-modifier('narrow') { 14 @include iro.bem-modifier('narrow') {
50 max-width: fn.dim(--content-width); 15 max-width: fn.dim(--width);
51 margin-right: auto; 16 margin-right: auto;
52 margin-left: auto; 17 margin-left: auto;
53
54 @each $breakpoint in map-keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-down') {
57 max-width: fn.dim(--content-width);
58 margin-right: auto;
59 margin-left: auto;
60 }
61 }
62 }
63 } 18 }
64 19
65 @include iro.bem-modifier('sm-narrow') { 20 @include iro.bem-modifier('narrow-50') {
66 max-width: fn.dim(--sm-content-width); 21 max-width: fn.dim(--width-50);
67 margin-right: auto; 22 margin-right: auto;
68 margin-left: auto; 23 margin-left: auto;
69
70 @each $breakpoint in map-keys(media.$breakpoints) {
71 @include media.media('<=#{$breakpoint}') {
72 @include iro.bem-suffix('#{$breakpoint}-down') {
73 max-width: fn.dim(--sm-content-width);
74 margin-right: auto;
75 margin-left: auto;
76 }
77 }
78 }
79 } 24 }
80 } 25 }
81} 26}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 0bb8485..3b4656e 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('alert') { 4@include iro.props-namespace('alert') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --border-width: 2px, 7 --border: 2px,
8 --pad-x: fn.global-dim(--size --250), 8 --pad-x: fn.global-dim(--size --250),
9 --pad-y: fn.global-dim(--size --250), 9 --pad-y: fn.global-dim(--size --250),
10 --rounding: 4px, 10 --rounding: 4px,
@@ -24,7 +24,7 @@
24 24
25 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
26 padding: fn.dim(--pad-y) fn.dim(--pad-x); 26 padding: fn.dim(--pad-y) fn.dim(--pad-x);
27 border: fn.dim(--border-width) solid fn.color(--border); 27 border: fn.dim(--border) solid fn.color(--border);
28 border-radius: fn.dim(--rounding); 28 border-radius: fn.dim(--rounding);
29 background-color: fn.color(--bg); 29 background-color: fn.color(--bg);
30 color: fn.global-color(--fg); 30 color: fn.global-color(--fg);
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 412efda..5443354 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: fn.global-dim(--size --175), 7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65), 11 --pad-y: fn.global-dim(--size --65),
12 ), 12 ),
13 ), 'dims'); 13 ), 'dims');
14 14
@@ -56,7 +56,7 @@
56 width: fn.dim(--size); 56 width: fn.dim(--size);
57 height: fn.dim(--size); 57 height: fn.dim(--size);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); 58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
59 border-radius: fn.dim(--border-width); 59 border-radius: fn.dim(--border);
60 background-color: fn.color(--box-border); 60 background-color: fn.color(--box-border);
61 61
62 &::before, 62 &::before,
@@ -68,10 +68,10 @@
68 68
69 &::before { 69 &::before {
70 z-index: 2; 70 z-index: 2;
71 top: fn.dim(--border-width); 71 top: fn.dim(--border);
72 left: fn.dim(--border-width); 72 left: fn.dim(--border);
73 width: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); 73 width: calc(fn.dim(--size) - 2 * fn.dim(--border));
74 height: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); 74 height: calc(fn.dim(--size) - 2 * fn.dim(--border));
75 transition: transform .2s ease; 75 transition: transform .2s ease;
76 background-color: fn.color(--box-bg); 76 background-color: fn.color(--box-bg);
77 } 77 }
@@ -79,9 +79,9 @@
79 &::after { 79 &::after {
80 z-index: 3; 80 z-index: 3;
81 top: calc(.5 * fn.dim(--size) - 1px); 81 top: calc(.5 * fn.dim(--size) - 1px);
82 left: calc(1.5 * fn.dim(--border-width)); 82 left: calc(1.5 * fn.dim(--border));
83 box-sizing: border-box; 83 box-sizing: border-box;
84 width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); 84 width: calc(fn.dim(--size) - 3 * fn.dim(--border));
85 height: 0; 85 height: 0;
86 transform: scale(0); 86 transform: scale(0);
87 transition: transform .2s ease; 87 transition: transform .2s ease;
@@ -96,10 +96,10 @@
96 display: block; 96 display: block;
97 position: absolute; 97 position: absolute;
98 z-index: 2; 98 z-index: 2;
99 top: calc(1 * fn.dim(--border-width)); 99 top: calc(1 * fn.dim(--border));
100 left: calc(1 * fn.dim(--border-width)); 100 left: calc(1 * fn.dim(--border));
101 width: calc(100% - 2 * fn.dim(--border-width)); 101 width: calc(100% - 2 * fn.dim(--border));
102 height: calc(100% - 2 * fn.dim(--border-width)); 102 height: calc(100% - 2 * fn.dim(--border));
103 transform: scale(0); 103 transform: scale(0);
104 transform-origin: 40% 90%; 104 transform-origin: 40% 90%;
105 transition: transform .2s ease; 105 transition: transform .2s ease;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 094e09b..ac77a66 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,8 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@use 'header';
5
6@include iro.props-namespace('dialog') { 4@include iro.props-namespace('dialog') {
7 @include iro.props-store(( 5 @include iro.props-store((
8 --dims: ( 6 --dims: (
@@ -12,6 +10,16 @@
12 --rounding: 8px, 10 --rounding: 8px,
13 --border: 1px, 11 --border: 1px,
14 12
13 --header: (
14 --pad-x: fn.global-dim(--size --75),
15 --pad-y: fn.global-dim(--size --75),
16 ),
17
18 --sidebar: (
19 --pad-x: fn.global-dim(--size --75),
20 --pad-y: fn.global-dim(--size --75),
21 ),
22
15 --body: ( 23 --body: (
16 --pad-x: fn.global-dim(--size --200), 24 --pad-x: fn.global-dim(--size --200),
17 --pad-y: fn.global-dim(--size --200), 25 --pad-y: fn.global-dim(--size --200),
@@ -28,18 +36,15 @@
28 36
29 @include iro.props-store(( 37 @include iro.props-store((
30 --colors: ( 38 --colors: (
31 --border: rgba(#000, .2), 39 --outer-border: rgba(#000, .2),
32 --shadow: 0 .2em .5em rgba(#000, .2), 40 --inner-border: fn.global-color(--obj),
33 41 --shadow: 0 .2em .5em rgba(#000, .2),
34 --sidebar: (
35 --border: fn.global-color(--obj),
36 ),
37 ), 42 ),
38 ), 'colors'); 43 ), 'colors');
39 44
40 @include iro.props-store(( 45 @include iro.props-store((
41 --colors: ( 46 --colors: (
42 --border: rgba(#fff, .2), 47 --outer-border: rgba(#fff, .2),
43 ), 48 ),
44 ), 'colors-dark'); 49 ), 'colors-dark');
45 50
@@ -57,7 +62,7 @@
57 max-width: fn.dim(--width-md); 62 max-width: fn.dim(--width-md);
58 margin: 0 auto; 63 margin: 0 auto;
59 overflow: hidden; 64 overflow: hidden;
60 border: fn.dim(--border) solid fn.color(--border); 65 border: fn.dim(--border) solid fn.color(--outer-border);
61 border-radius: fn.dim(--rounding); 66 border-radius: fn.dim(--rounding);
62 background-clip: padding-box; 67 background-clip: padding-box;
63 background-color: fn.global-color(--bg); 68 background-color: fn.global-color(--bg);
@@ -72,29 +77,34 @@
72 max-width: fn.dim(--width-lg); 77 max-width: fn.dim(--width-lg);
73 } 78 }
74 79
75 @include iro.bem-elem('sidebar-header') { 80 @include iro.bem-elem('header') {
76 grid-area: sidebar-header; 81 grid-area: sidebar-header / sidebar-header / header / header;
77 border-right: 1px solid fn.color(--sidebar --border); 82 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x);
78 83 border-bottom: 1px solid fn.color(--inner-border);
79 @include iro.bem-sibling-elem('header') { 84
80 grid-area: header; 85 @include iro.bem-modifier('sidebar') {
86 grid-area: sidebar-header;
87 border-right: 1px solid fn.color(--inner-border);
88
89 @include iro.bem-sibling-elem('header') {
90 grid-area: header;
91 }
81 } 92 }
82 } 93 }
83 94
84 @include iro.bem-elem('header') { 95 @include iro.bem-elem('title') {
85 grid-area: sidebar-header / sidebar-header / header / header; 96 padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
97 padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
86 } 98 }
87 99
88 @include iro.bem-elem('close-btn') { 100 @include iro.bem-elem('close-btn') {
89 margin-left: auto; 101 margin-left: auto;
90 } 102 }
91 103
92 @include iro.bem-elem('label') {
93 padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
94 }
95
96 @include iro.bem-elem('sidebar') { 104 @include iro.bem-elem('sidebar') {
97 grid-area: sidebar; 105 grid-area: sidebar;
106 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
107 border-right: 1px solid fn.color(--inner-border);
98 } 108 }
99 109
100 @include iro.bem-elem('body') { 110 @include iro.bem-elem('body') {
@@ -108,5 +118,15 @@
108 justify-content: flex-end; 118 justify-content: flex-end;
109 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); 119 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
110 } 120 }
121
122 @include iro.bem-modifier('flat') {
123 @include iro.bem-elem('header') {
124 border-bottom: 0;
125 }
126
127 @include iro.bem-elem('body') {
128 padding-top: 0;
129 }
130 }
111 } 131 }
112} 132}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index cef598f..9764ddb 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -7,15 +7,15 @@
7 --margin-y: fn.global-dim(--size --85), 7 --margin-y: fn.global-dim(--size --85),
8 8
9 --strong: ( 9 --strong: (
10 --border-width: fn.global-dim(--border-width --thick), 10 --border: fn.global-dim(--border --thick),
11 --label-font-size: fn.global-dim(--font-size --100), 11 --label-font-size: fn.global-dim(--font-size --100),
12 ), 12 ),
13 --medium: ( 13 --medium: (
14 --border-width: fn.global-dim(--border-width --medium), 14 --border: fn.global-dim(--border --medium),
15 --label-font-size: fn.global-dim(--font-size --75), 15 --label-font-size: fn.global-dim(--font-size --75),
16 ), 16 ),
17 --faint: ( 17 --faint: (
18 --border-width: fn.global-dim(--border-width --thin), 18 --border: fn.global-dim(--border --thin),
19 --label-font-size: fn.global-dim(--font-size --50), 19 --label-font-size: fn.global-dim(--font-size --50),
20 ), 20 ),
21 ), 21 ),
@@ -40,7 +40,7 @@
40 40
41 @include iro.bem-object(iro.props-namespace()) { 41 @include iro.bem-object(iro.props-namespace()) {
42 display: block; 42 display: block;
43 height: fn.dim(--strong --border-width); 43 height: fn.dim(--strong --border);
44 margin-top: fn.dim(--margin-y); 44 margin-top: fn.dim(--margin-y);
45 margin-bottom: fn.dim(--margin-y); 45 margin-bottom: fn.dim(--margin-y);
46 background-color: fn.color(--strong --bg); 46 background-color: fn.color(--strong --bg);
@@ -55,12 +55,12 @@
55 } 55 }
56 56
57 @include iro.bem-modifier('medium') { 57 @include iro.bem-modifier('medium') {
58 height: fn.dim(--medium --border-width); 58 height: fn.dim(--medium --border);
59 background-color: fn.color(--medium --bg); 59 background-color: fn.color(--medium --bg);
60 } 60 }
61 61
62 @include iro.bem-modifier('faint') { 62 @include iro.bem-modifier('faint') {
63 height: fn.dim(--faint --border-width); 63 height: fn.dim(--faint --border);
64 background-color: fn.color(--faint --bg); 64 background-color: fn.color(--faint --bg);
65 } 65 }
66 66
diff --git a/src/objects/_header.scss b/src/objects/_header.scss
deleted file mode 100644
index 773d584..0000000
--- a/src/objects/_header.scss
+++ /dev/null
@@ -1,31 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('header') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --75),
8 --pad-y: fn.global-dim(--size --75)
9 ),
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --border: fn.global-color(--obj),
15 ),
16 ), 'colors');
17
18 @include iro.bem-object(iro.props-namespace()) {
19 border-bottom: 1px solid fn.color(--border);
20
21 @include iro.bem-elem('content') {
22 display: flex;
23 box-sizing: border-box;
24 align-items: center;
25 height: 100%;
26 padding: fn.dim(--pad-y) fn.dim(--pad-x);
27 background-color: fn.global-color(--bg);
28 color: fn.global-color(--fg);
29 }
30 }
31}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 435ff88..131db29 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,7 +12,7 @@
12 --thumbnail: ( 12 --thumbnail: (
13 --size: fn.global-dim(--size --800), 13 --size: fn.global-dim(--size --800),
14 --spacing: fn.global-dim(--size --100), 14 --spacing: fn.global-dim(--size --100),
15 --selected: 2px, //fn.global-dim(--border-width --medium), 15 --selected: 2px, //fn.global-dim(--border --medium),
16 ), 16 ),
17 --button: ( 17 --button: (
18 --font-size: fn.global-dim(--font-size --200), 18 --font-size: fn.global-dim(--font-size --200),
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c740833..65dfa66 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('radio') { 4@include iro.props-namespace('radio') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --diameter: calc(fn.global-dim(--size --175) + 1px), 7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: fn.global-dim(--size --125), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65), 11 --pad-y: fn.global-dim(--size --65),
12 ), 12 ),
13 ), 'dims'); 13 ), 'dims');
14 14
@@ -63,10 +63,10 @@
63 content: ''; 63 content: '';
64 display: block; 64 display: block;
65 position: relative; 65 position: relative;
66 top: fn.dim(--border-width); 66 top: fn.dim(--border);
67 left: fn.dim(--border-width); 67 left: fn.dim(--border);
68 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); 68 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
69 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); 69 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
70 transition: transform .2s ease; 70 transition: transform .2s ease;
71 border-radius: fn.dim(--diameter); 71 border-radius: fn.dim(--diameter);
72 background-color: fn.color(--circle-bg); 72 background-color: fn.color(--circle-bg);
diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss
deleted file mode 100644
index bf8dd59..0000000
--- a/src/objects/_sidebar.scss
+++ /dev/null
@@ -1,36 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('sidebar') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --75),
8 --pad-y: fn.global-dim(--size --75)
9 ),
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --border: fn.global-color(--obj),
15 ),
16 ), 'colors');
17
18 @include iro.bem-object(iro.props-namespace()) {
19 border-width: 0 1px 0 0;
20 border-style: solid;
21 border-color: fn.color(--border);
22
23 @include iro.bem-elem('content') {
24 box-sizing: border-box;
25 height: 100%;
26 padding: fn.dim(--pad-y) fn.dim(--pad-x);
27 background-color: fn.global-color(--bg);
28 color: fn.global-color(--fg);
29 }
30
31 @include iro.bem-modifier('right') {
32 border-right-width: 0;
33 border-left-width: 1px;
34 }
35 }
36}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index a818bde..ad39115 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
4@include iro.props-namespace('switch') { 4@include iro.props-namespace('switch') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --width: fn.global-dim(--size --325), 7 --width: fn.global-dim(--size --325),
8 --height: calc(fn.global-dim(--size --175) + 1px), 8 --height: calc(fn.global-dim(--size --175) + 1px),
9 --label-gap: fn.global-dim(--size --125), 9 --label-gap: fn.global-dim(--size --125),
10 --border-width: fn.global-dim(--border-width --medium), 10 --border: fn.global-dim(--border --medium),
11 --pad-x: fn.global-dim(--size --65), 11 --pad-x: fn.global-dim(--size --65),
12 --pad-y: fn.global-dim(--size --65), 12 --pad-y: fn.global-dim(--size --65),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
15 15
@@ -67,10 +67,10 @@
67 &::after { 67 &::after {
68 content: ''; 68 content: '';
69 display: block; 69 display: block;
70 width: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); 70 width: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 height: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); 71 height: calc(fn.dim(--height) - 2 * fn.dim(--border));
72 transition: transform .2s ease; 72 transition: transform .2s ease;
73 border: fn.dim(--border-width) solid fn.color(--handle-border); 73 border: fn.dim(--border) solid fn.color(--handle-border);
74 border-radius: fn.dim(--width); 74 border-radius: fn.dim(--width);
75 background-color: fn.color(--handle-bg); 75 background-color: fn.color(--handle-bg);
76 } 76 }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 1e18f0a..643e8d9 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -34,7 +34,7 @@
34 --dims: ( 34 --dims: (
35 --pad-x: fn.global-dim(--size --125), 35 --pad-x: fn.global-dim(--size --125),
36 --pad-y: fn.global-dim(--size --125), 36 --pad-y: fn.global-dim(--size --125),
37 --border-width: fn.global-dim(--border-width --thin), 37 --border: fn.global-dim(--border --thin),
38 --border-radius: 2px, 38 --border-radius: 2px,
39 39
40 --extended: ( 40 --extended: (
@@ -43,7 +43,7 @@
43 ), 43 ),
44 44
45 --focus: ( 45 --focus: (
46 --border-width: fn.global-dim(--border-width --medium), 46 --border: fn.global-dim(--border --medium),
47 ) 47 )
48 ), 48 ),
49 ), 'dims'); 49 ), 'dims');
@@ -93,7 +93,7 @@
93 93
94 @include iro.bem-object(iro.props-namespace()) { 94 @include iro.bem-object(iro.props-namespace()) {
95 $line-height: 1.4; 95 $line-height: 1.4;
96 $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); 96 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
97 97
98 position: relative; 98 position: relative;
99 min-width: 0; 99 min-width: 0;
@@ -107,7 +107,7 @@
107 right: 0; 107 right: 0;
108 bottom: 0; 108 bottom: 0;
109 left: 0; 109 left: 0;
110 border: fn.dim(--border-width) solid fn.color(--border); 110 border: fn.dim(--border) solid fn.color(--border);
111 border-radius: fn.dim(--border-radius); 111 border-radius: fn.dim(--border-radius);
112 box-shadow: fn.color(--shadow); 112 box-shadow: fn.color(--shadow);
113 pointer-events: none; 113 pointer-events: none;
@@ -143,7 +143,7 @@
143 right: $focus-border-offset; 143 right: $focus-border-offset;
144 bottom: $focus-border-offset; 144 bottom: $focus-border-offset;
145 left: $focus-border-offset; 145 left: $focus-border-offset;
146 border: fn.dim(--focus --border-width) solid fn.color(--focus --border); 146 border: fn.dim(--focus --border) solid fn.color(--focus --border);
147 border-radius: calc(fn.dim(--border-radius) - $focus-border-offset); 147 border-radius: calc(fn.dim(--border-radius) - $focus-border-offset);
148 box-shadow: fn.color(--focus --shadow); 148 box-shadow: fn.color(--focus --shadow);
149 } 149 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:54:51 +0000