diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_layouts.scss | 2 | ||||
-rw-r--r-- | src/layouts/_card.scss | 9 | ||||
-rw-r--r-- | src/layouts/_flex.scss | 23 | ||||
-rw-r--r-- | src/layouts/_overflow.scss | 9 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 115 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 2 | ||||
-rw-r--r-- | src/objects/_menu.scss | 18 | ||||
-rw-r--r-- | src/objects/_rule.scss | 8 |
8 files changed, 135 insertions, 51 deletions
diff --git a/src/_layouts.scss b/src/_layouts.scss index 99a003e..3a4c32b 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss | |||
@@ -2,3 +2,5 @@ | |||
2 | @use 'layouts/container'; | 2 | @use 'layouts/container'; |
3 | @use 'layouts/button-group'; | 3 | @use 'layouts/button-group'; |
4 | @use 'layouts/form'; | 4 | @use 'layouts/form'; |
5 | @use 'layouts/flex'; | ||
6 | @use 'layouts/overflow'; | ||
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 3022da0..e6c379d 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss | |||
@@ -14,6 +14,10 @@ | |||
14 | --200: ( | 14 | --200: ( |
15 | --pad-x: fn.global-dim(--size --300), | 15 | --pad-x: fn.global-dim(--size --300), |
16 | --pad-y: fn.global-dim(--size --150), | 16 | --pad-y: fn.global-dim(--size --150), |
17 | ), | ||
18 | --300: ( | ||
19 | --pad-x: fn.global-dim(--size --450), | ||
20 | --pad-y: fn.global-dim(--size --225), | ||
17 | ) | 21 | ) |
18 | ) | 22 | ) |
19 | ), 'dims'); | 23 | ), 'dims'); |
@@ -35,6 +39,11 @@ | |||
35 | gap: fn.dim(--200 --pad-x); | 39 | gap: fn.dim(--200 --pad-x); |
36 | } | 40 | } |
37 | 41 | ||
42 | @include iro.bem-modifier('300') { | ||
43 | padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); | ||
44 | gap: fn.dim(--300 --pad-x); | ||
45 | } | ||
46 | |||
38 | @include iro.bem-modifier('flush') { | 47 | @include iro.bem-modifier('flush') { |
39 | padding: 0; | 48 | padding: 0; |
40 | } | 49 | } |
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss new file mode 100644 index 0000000..e8cdbaa --- /dev/null +++ b/src/layouts/_flex.scss | |||
@@ -0,0 +1,23 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.props-namespace('flex') { | ||
4 | @include iro.bem-layout(iro.props-namespace()) { | ||
5 | display: flex; | ||
6 | |||
7 | @include iro.bem-modifier('align-stretch') { | ||
8 | align-items: stretch; | ||
9 | } | ||
10 | |||
11 | @include iro.bem-modifier('align-center') { | ||
12 | align-items: center; | ||
13 | } | ||
14 | |||
15 | @include iro.bem-modifier('align-start') { | ||
16 | align-items: flex-start; | ||
17 | } | ||
18 | |||
19 | @include iro.bem-modifier('align-end') { | ||
20 | align-items: flex-end; | ||
21 | } | ||
22 | } | ||
23 | } | ||
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss new file mode 100644 index 0000000..d3af570 --- /dev/null +++ b/src/layouts/_overflow.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('overflow') { | ||
5 | @include iro.bem-layout(iro.props-namespace()) { | ||
6 | overflow: auto; | ||
7 | scrollbar-color: fn.global-color(--obj-lo) transparent; | ||
8 | } | ||
9 | } | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index d5b6ed9..9c61e93 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -4,13 +4,15 @@ | |||
4 | @include iro.props-namespace('dialog') { | 4 | @include iro.props-namespace('dialog') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: fn.global-dim(--size --300), | 7 | --pad-x: fn.global-dim(--size --300), |
8 | --pad-y: fn.global-dim(--size --300), | 8 | --pad-y: fn.global-dim(--size --300), |
9 | --width-sm: iro.fn-px-to-rem(500px), | 9 | --width-sm: iro.fn-px-to-rem(500px), |
10 | --width-md: iro.fn-px-to-rem(800px), | 10 | --width-md: iro.fn-px-to-rem(800px), |
11 | --width-lg: iro.fn-px-to-rem(1100px), | 11 | --width-lg: iro.fn-px-to-rem(1100px), |
12 | --rounding: 3px, | 12 | --rounding: 3px, |
13 | --title-body-spacing: fn.global-dim(--size --200), | 13 | --sidebar: ( |
14 | --pad-x: fn.global-dim(--size --150), | ||
15 | ) | ||
14 | ), | 16 | ), |
15 | ), 'dims'); | 17 | ), 'dims'); |
16 | 18 | ||
@@ -24,24 +26,40 @@ | |||
24 | @include iro.props-store(( | 26 | @include iro.props-store(( |
25 | --colors: ( | 27 | --colors: ( |
26 | --shadow: 0 .2em .5em rgba(#000, .2), | 28 | --shadow: 0 .2em .5em rgba(#000, .2), |
29 | --sidebar: ( | ||
30 | --bg: fn.global-color(--bg), | ||
31 | --border: fn.global-color(--obj), | ||
32 | ) | ||
27 | ), | 33 | ), |
28 | ), 'colors'); | 34 | ), 'colors'); |
29 | 35 | ||
36 | @include iro.props-store(( | ||
37 | --colors: ( | ||
38 | --sidebar: ( | ||
39 | --bg: fn.global-color(--bg-hi), | ||
40 | --border: fn.global-color(--bg-hi), | ||
41 | ), | ||
42 | ), | ||
43 | ), 'colors-dark'); | ||
44 | |||
30 | @include iro.bem-object(iro.props-namespace()) { | 45 | @include iro.bem-object(iro.props-namespace()) { |
31 | display: grid; | 46 | display: grid; |
32 | grid-template-rows: auto auto 1fr auto; | 47 | grid-template-rows: auto 1fr auto; |
33 | grid-template-areas: 'header' 'rule' 'body' 'footer'; | 48 | grid-template-columns: auto 1fr; |
34 | position: relative; | 49 | grid-template-areas: |
35 | box-sizing: border-box; | 50 | 'sidebar header' |
36 | width: 100%; | 51 | 'sidebar body' |
37 | max-width: fn.dim(--width-md); | 52 | 'sidebar footer'; |
38 | margin: 0 auto; | 53 | position: relative; |
39 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 54 | box-sizing: border-box; |
40 | overflow: hidden; | 55 | width: 100%; |
41 | border-radius: fn.dim(--rounding); | 56 | max-width: fn.dim(--width-md); |
42 | background-color: fn.global-color(--bg); | 57 | margin: 0 auto; |
43 | box-shadow: fn.color(--shadow); | 58 | overflow: hidden; |
44 | color: fn.global-color(--fg); | 59 | border-radius: fn.dim(--rounding); |
60 | background-color: fn.global-color(--bg); | ||
61 | box-shadow: fn.color(--shadow); | ||
62 | color: fn.global-color(--fg); | ||
45 | 63 | ||
46 | @include iro.bem-modifier('sm') { | 64 | @include iro.bem-modifier('sm') { |
47 | max-width: fn.dim(--width-sm); | 65 | max-width: fn.dim(--width-sm); |
@@ -51,39 +69,52 @@ | |||
51 | max-width: fn.dim(--width-lg); | 69 | max-width: fn.dim(--width-lg); |
52 | } | 70 | } |
53 | 71 | ||
54 | @include iro.bem-elem('header') { | 72 | @include iro.bem-elem('sidebar') { |
55 | grid-area: header; | 73 | grid-area: sidebar; |
56 | margin-bottom: fn.dim(--title-body-spacing); | 74 | padding: fn.dim(--pad-y) fn.dim(--sidebar --pad-x); |
75 | border-right: 1px solid fn.color(--sidebar --border); | ||
76 | background-color: fn.color(--sidebar --bg); | ||
57 | } | 77 | } |
58 | 78 | ||
59 | @include iro.bem-elem('close-btn') { | 79 | @include iro.bem-elem('header') { |
60 | position: absolute; | 80 | grid-area: header; |
61 | top: iro.fn-px-to-rem(12px); | 81 | margin: fn.dim(--pad-y) fn.dim(--pad-x) 0; |
62 | right: iro.fn-px-to-rem(12px); | ||
63 | font-size: fn.global-dim(--font-size --150); | ||
64 | } | ||
65 | 82 | ||
66 | @include iro.bem-elem('rule') { | 83 | @include iro.bem-sibling-elem('body') { |
67 | grid-area: rule; | 84 | &::before { |
68 | margin: 0; | 85 | display: none; |
86 | } | ||
87 | } | ||
69 | } | 88 | } |
70 | 89 | ||
71 | @include iro.bem-elem('title') { | 90 | @include iro.bem-elem('body') { |
72 | margin-top: 0; | 91 | grid-area: body; |
92 | min-height: 0; | ||
93 | margin: fn.dim(--pad-y) fn.dim(--pad-x); | ||
94 | |||
95 | &::before { | ||
96 | content: ''; | ||
97 | width: fn.global-dim(--size --500); | ||
98 | height: fn.global-dim(--size --500); | ||
99 | float: right; | ||
100 | } | ||
73 | } | 101 | } |
74 | 102 | ||
75 | @include iro.bem-elem('body') { | 103 | @include iro.bem-elem('close-btn') { |
76 | grid-area: body; | 104 | position: absolute; |
77 | min-height: 0; | 105 | top: fn.global-dim(--size --150); |
78 | margin-top: fn.dim(--title-body-spacing); | 106 | right: fn.global-dim(--size --150); |
79 | overflow: auto; | 107 | font-size: fn.global-dim(--font-size --150); |
80 | scrollbar-color: fn.global-color(--obj-lo) transparent; | ||
81 | } | 108 | } |
82 | 109 | ||
83 | @include iro.bem-elem('footer') { | 110 | @include iro.bem-elem('footer') { |
84 | grid-area: footer; | 111 | grid-area: footer; |
85 | justify-content: flex-end; | 112 | justify-content: flex-end; |
86 | margin-top: fn.dim(--pad-y); | 113 | margin: fn.dim(--pad-y) fn.dim(--pad-x); |
114 | } | ||
115 | |||
116 | @include iro.bem-elem('title') { | ||
117 | margin-top: 0; | ||
87 | } | 118 | } |
88 | } | 119 | } |
89 | } | 120 | } |
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 6d83f01..f3addf7 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -10,7 +10,7 @@ | |||
10 | --thumbnail: ( | 10 | --thumbnail: ( |
11 | --size: fn.global-dim(--size --800), | 11 | --size: fn.global-dim(--size --800), |
12 | --spacing: fn.global-dim(--size --100), | 12 | --spacing: fn.global-dim(--size --100), |
13 | --selected: 3px, //fn.global-dim(--border-width --medium), | 13 | --selected: 2px, //fn.global-dim(--border-width --medium), |
14 | ), | 14 | ), |
15 | --button: ( | 15 | --button: ( |
16 | --font-size: fn.global-dim(--font-size --200), | 16 | --font-size: fn.global-dim(--font-size --200), |
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index f03dbc1..40610e0 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -9,8 +9,9 @@ | |||
9 | ), | 9 | ), |
10 | --separator: fn.global-dim(--size --150), | 10 | --separator: fn.global-dim(--size --150), |
11 | --item: ( | 11 | --item: ( |
12 | --pad-x: fn.global-dim(--size --150), | 12 | --pad-x: fn.global-dim(--size --150), |
13 | --pad-y: fn.global-dim(--size --100), | 13 | --pad-y: fn.global-dim(--size --100), |
14 | --rounding: 3px, | ||
14 | ), | 15 | ), |
15 | ), | 16 | ), |
16 | ), 'dims'); | 17 | ), 'dims'); |
@@ -52,12 +53,13 @@ | |||
52 | } | 53 | } |
53 | 54 | ||
54 | @include iro.bem-elem('item') { | 55 | @include iro.bem-elem('item') { |
55 | display: block; | 56 | display: block; |
56 | box-sizing: border-box; | 57 | box-sizing: border-box; |
57 | width: 100%; | 58 | width: 100%; |
58 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); | 59 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); |
59 | border: 2px solid transparent; | 60 | border: 2px solid transparent; |
60 | color: fn.color(--item --disabled --label); | 61 | border-radius: fn.dim(--item --rounding); |
62 | color: fn.color(--item --disabled --label); | ||
61 | 63 | ||
62 | &:link, | 64 | &:link, |
63 | &:visited, | 65 | &:visited, |
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index 777e864..693729a 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss | |||
@@ -45,6 +45,14 @@ | |||
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); |
47 | 47 | ||
48 | @include iro.bem-modifier('vertical') { | ||
49 | width: 1px; | ||
50 | height: auto; | ||
51 | margin-top: 0; | ||
52 | margin-bottom: 0; | ||
53 | background-color: fn.color(--faint --bg); | ||
54 | } | ||
55 | |||
48 | @include iro.bem-modifier('medium') { | 56 | @include iro.bem-modifier('medium') { |
49 | height: fn.dim(--medium --border-width); | 57 | height: fn.dim(--medium --border-width); |
50 | background-color: fn.color(--medium --bg); | 58 | background-color: fn.color(--medium --bg); |