summaryrefslogtreecommitdiffstats
path: root/src/objects
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/objects
parentImproved bubble (diff)
downloadiro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.gz
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.bz2
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.zip
Update
Diffstat (limited to 'src/objects')
-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
10 files changed, 91 insertions, 138 deletions
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 14:59:43 +0000