summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-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
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/layouts/container.pug8
-rw-r--r--tpl/objects/bubble.pug8
-rw-r--r--tpl/objects/dialog.pug35
-rw-r--r--tpl/objects/header.pug12
-rw-r--r--tpl/objects/icon.pug4
-rw-r--r--tpl/objects/sidebar.pug12
-rw-r--r--tpl/views/dialog.pug17
22 files changed, 149 insertions, 269 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 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 6ff502c..4ed1ae3 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -27,8 +27,6 @@ include objects/lightbox.pug
27include objects/list-group.pug 27include objects/list-group.pug
28include objects/table.pug 28include objects/table.pug
29include objects/alert.pug 29include objects/alert.pug
30include objects/header.pug
31include objects/sidebar.pug
32include objects/bubble.pug 30include objects/bubble.pug
33include objects/bubble-group.pug 31include objects/bubble-group.pug
34 32
@@ -36,7 +34,7 @@ mixin view(id, title)
36 - 34 -
37 views.push({ id, title }); 35 views.push({ id, title });
38 36
39 +container(padX=true padY=true narrow=true class='c-view' id=id) 37 +container(narrow=true class='u-p-700 c-view' id=id)
40 +h1-heading('xl')= title 38 +h1-heading('xl')= title
41 +divider('medium') 39 +divider('medium')
42 block 40 block
@@ -112,7 +110,7 @@ html
112 +view-bubble 110 +view-bubble
113 +view-bubble-group 111 +view-bubble-group
114 112
115 +sidebar(class='c-sidebar') 113 .c-sidebar.l-overflow.u-themed.t-raised.u-p-75.u-br-1
116 +menu 114 +menu
117 each view in views 115 each view in views
118 +menu-item(tag='a' href='#' + view.id)= view.title 116 +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index c1affc4..0973b74 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -2,11 +2,8 @@ mixin container
2 - 2 -
3 let classes = { 3 let classes = {
4 'l-container': true, 4 'l-container': true,
5 'l-container--pad-x': attributes.padX,
6 'l-container--pad-y': attributes.padY,
7 'l-container--narrow': attributes.narrow, 5 'l-container--narrow': attributes.narrow,
8 'l-container--sm-narrow': attributes.smNarrow, 6 'l-container--narrow-50': attributes.narrow50,
9 'l-container--in-page': attributes.inPage,
10 'u-themed': !!attributes.theme 7 'u-themed': !!attributes.theme
11 } 8 }
12 if (!!attributes.theme) { 9 if (!!attributes.theme) {
@@ -17,5 +14,4 @@ mixin container
17 } 14 }
18 15
19 div(class=classes)&attributes(attributes) 16 div(class=classes)&attributes(attributes)
20 .l-container__inner 17 block
21 block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 1e0df38..fad7242 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -31,11 +31,11 @@ mixin bubble(user)
31 else if user 31 else if user
32 header(class=headerClasses) 32 header(class=headerClasses)
33 strong= user 33 strong= user
34 div.o-bubble__body.s-colored-links 34 span.s-colored-links
35 - slots.body() 35 - slots.body()
36 if slots.time 36 if slots.time
37 small.o-bubble__time 37 small.o-bubble__time
38 - slots.time() 38 - slots.time()
39 if slots.footer 39 if slots.footer
40 footer.o-bubble__footer 40 footer.o-bubble__footer
41 - slots.footer() 41 - slots.footer()
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2474cc3..91b99d9 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,6 +1,4 @@
1include heading.pug 1include heading.pug
2include header.pug
3include sidebar.pug
4 2
5mixin dialog(title) 3mixin dialog(title)
6 - const slots = {} 4 - const slots = {}
@@ -12,9 +10,23 @@ mixin dialog(title)
12 block ? block() : undefined 10 block ? block() : undefined
13 11
14 let classes = { 12 let classes = {
15 'o-dialog': true, 13 'o-dialog': true,
14 'o-dialog--flat': attributes.flat,
16 } 15 }
17 16
17 let headerClass = {
18 'o-dialog__header': true,
19 'u-themed': !attributes.flat,
20 't-lowered': !attributes.flat,
21 'l-card': true,
22 }
23
24 let sidebarHeaderClass = {
25 'o-dialog__header--sidebar': true,
26 }
27
28 Object.assign(sidebarHeaderClass, headerClass);
29
18 let bodyClass = { 30 let bodyClass = {
19 'o-dialog__body': true 31 'o-dialog__body': true
20 } 32 }
@@ -23,21 +35,24 @@ mixin dialog(title)
23 } 35 }
24 36
25 div(class=classes) 37 div(class=classes)
26 if slots['sidebar-header'] 38 if slots['sidebar-header'] || attributes.sidebarTitle
27 +header(class='o-dialog__sidebar-header') 39 div(class=sidebarHeaderClass)
28 - slots['sidebar-header']() 40 if slots['sidebar-header']
41 - slots['sidebar-header']()
42 else
43 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle
29 44
30 if slots.sidebar 45 if slots.sidebar
31 +sidebar(class='o-dialog__sidebar') 46 .o-dialog__sidebar.l-overflow
32 - slots.sidebar() 47 - slots.sidebar()
33 48
34 +header(class='o-dialog__header') 49 div(class=headerClass)
35 if slots.header 50 if slots.header
36 - slots.header() 51 - slots.header()
37 else 52 else
38 if title 53 if title
39 +div-heading('sm')(class='o-dialog__label')= title 54 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title
40 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block')
41 56
42 section(class=bodyClass) 57 section(class=bodyClass)
43 if slots.body 58 if slots.body
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
deleted file mode 100644
index 0d9d7ee..0000000
--- a/tpl/objects/header.pug
+++ /dev/null
@@ -1,12 +0,0 @@
1mixin header
2 -
3 let classes = {
4 'o-header': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 header(class=classes)
11 .o-header__content.t-lo
12 block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 1ed6052..67bcf37 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -2,8 +2,8 @@ mixin icon(id)
2 - 2 -
3 let href = 'icons.svg#' + id 3 let href = 'icons.svg#' + id
4 let classes = { 4 let classes = {
5 'o-icon': true, 5 'o-icon': true,
6 'o-icon--block': attributes.block, 6 'u-d-block': attributes.block,
7 } 7 }
8 if (attributes.class) { 8 if (attributes.class) {
9 classes[attributes.class] = true; 9 classes[attributes.class] = true;
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
deleted file mode 100644
index caa0f1f..0000000
--- a/tpl/objects/sidebar.pug
+++ /dev/null
@@ -1,12 +0,0 @@
1mixin sidebar
2 -
3 let classes = {
4 'o-sidebar': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 aside(class=classes)
11 .o-sidebar__content.l-overflow
12 block
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 0b6f8e7..f90ef21 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -2,7 +2,7 @@ mixin view-dialog
2 +view('dialog', 'Dialog') 2 +view('dialog', 'Dialog')
3 .c-box 3 .c-box
4 +backdrop 4 +backdrop
5 +dialog('Lorem ipsum') 5 +dialog('Lorem ipsum')(flat=true)
6 +slot('body') 6 +slot('body')
7 = loremIpsum 7 = loremIpsum
8 8
@@ -18,9 +18,7 @@ mixin view-dialog
18 18
19 .c-box 19 .c-box
20 +backdrop 20 +backdrop
21 +dialog('Tags') 21 +dialog('Tags')(sidebarTitle='#channel')
22 +slot('sidebar-header')
23 +div-heading('sm')(class='o-dialog__label')= '#channel'
24 +slot('sidebar') 22 +slot('sidebar')
25 +menu(style={ 'min-width': '10em' }) 23 +menu(style={ 'min-width': '10em' })
26 +menu-item(icon='bookmark')= 'Bookmark' 24 +menu-item(icon='bookmark')= 'Bookmark'
@@ -44,12 +42,11 @@ mixin view-dialog
44 +backdrop 42 +backdrop
45 +dialog 43 +dialog
46 +slot('header') 44 +slot('header')
47 .l-card.l-card--flush 45 .l-card__block.l-flex
48 .l-card__block.l-flex 46 +action-button(quiet=true icon='chevron-left')
49 +action-button(quiet=true icon='chevron-left') 47 +action-button(quiet=true icon='chevron-right')
50 +action-button(quiet=true icon='chevron-right') 48 .l-card__block.l-card__block--main
51 .l-card__block.l-card__block--main 49 +div-heading('sm')= 'Tags'
52 +div-heading('sm')= 'Tags'
53 +slot('sidebar') 50 +slot('sidebar')
54 +menu(style={ 'min-width': '10em' }) 51 +menu(style={ 'min-width': '10em' })
55 +menu-item(icon='bookmark')= 'Bookmark' 52 +menu-item(icon='bookmark')= 'Bookmark'
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:35:25 +0000