summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
commit3524f1bac11c8a9d1640bfeac5ceb063ff96d623 (patch)
tree52907b3161045c2d24bba18442c1ece9c12986a6 /src/layouts
parentUpdated action button (diff)
downloadiro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.gz
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.bz2
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.zip
Improved variable structure
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_card.scss3
-rw-r--r--src/layouts/_container.scss37
-rw-r--r--src/layouts/_form.scss11
3 files changed, 27 insertions, 24 deletions
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 037b29f..5db1a6a 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,5 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn;
3 4
4@include iro.props-namespace('card') { 5@include iro.props-namespace('card') {
5 @include iro.props-store(( 6 @include iro.props-store((
@@ -11,7 +12,7 @@
11 --pad-y: iro.fn-px-to-rem(11px), 12 --pad-y: iro.fn-px-to-rem(11px),
12 ) 13 )
13 ) 14 )
14 )); 15 ), 'dims');
15 16
16 @include iro.bem-layout(iro.props-namespace()) { 17 @include iro.bem-layout(iro.props-namespace()) {
17 display: flex; 18 display: flex;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index efe5203..af5b208 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn;
3 4
4@include iro.props-namespace('container') { 5@include iro.props-namespace('container') {
5 @include iro.props-store(( 6 @include iro.props-store((
@@ -8,16 +9,16 @@
8 --sm-content-width: iro.fn-px-to-rem(360px), 9 --sm-content-width: iro.fn-px-to-rem(360px),
9 --padding-x: 3rem, 10 --padding-x: 3rem,
10 --padding-y: 3rem, 11 --padding-y: 3rem,
11 --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true), 12 --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true),
12 ) 13 )
13 )); 14 ), 'dims');
14 15
15 @include iro.bem-layout(iro.props-namespace()) { 16 @include iro.bem-layout(iro.props-namespace()) {
16 overflow: hidden; 17 overflow: hidden;
17 18
18 @include iro.bem-elem('inner') { 19 @include iro.bem-elem('inner') {
19 margin-top: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); 20 margin-top: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
20 margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); 21 margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
21 22
22 &::before, 23 &::before,
23 &::after { 24 &::after {
@@ -28,33 +29,33 @@
28 } 29 }
29 30
30 &::before { 31 &::before {
31 margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true); 32 margin-bottom: fn.dim(--spacing --y --xl, $global: true);
32 } 33 }
33 34
34 &::after { 35 &::after {
35 margin-top: iro.props-get(--dims --spacing --y --xl, $global: true); 36 margin-top: fn.dim(--spacing --y --xl, $global: true);
36 } 37 }
37 } 38 }
38 39
39 @include iro.bem-modifier('pad-x') { 40 @include iro.bem-modifier('pad-x') {
40 padding-right: iro.props-get(--dims --padding-x); 41 padding-right: fn.dim(--padding-x);
41 padding-left: iro.props-get(--dims --padding-x); 42 padding-left: fn.dim(--padding-x);
42 } 43 }
43 44
44 @include iro.bem-modifier('pad-y') { 45 @include iro.bem-modifier('pad-y') {
45 padding-top: iro.props-get(--dims --padding-y); 46 padding-top: fn.dim(--padding-y);
46 padding-bottom: iro.props-get(--dims --padding-y); 47 padding-bottom: fn.dim(--padding-y);
47 } 48 }
48 49
49 @include iro.bem-modifier('narrow') { 50 @include iro.bem-modifier('narrow') {
50 max-width: iro.props-get(--dims --content-width); 51 max-width: fn.dim(--content-width);
51 margin-right: auto; 52 margin-right: auto;
52 margin-left: auto; 53 margin-left: auto;
53 54
54 @each $breakpoint in map-keys(media.$breakpoints) { 55 @each $breakpoint in map-keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') { 56 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-down') { 57 @include iro.bem-suffix('#{$breakpoint}-down') {
57 max-width: iro.props-get(--dims --content-width); 58 max-width: fn.dim(--content-width);
58 margin-right: auto; 59 margin-right: auto;
59 margin-left: auto; 60 margin-left: auto;
60 } 61 }
@@ -63,14 +64,14 @@
63 } 64 }
64 65
65 @include iro.bem-modifier('sm-narrow') { 66 @include iro.bem-modifier('sm-narrow') {
66 max-width: iro.props-get(--dims --sm-content-width); 67 max-width: fn.dim(--sm-content-width);
67 margin-right: auto; 68 margin-right: auto;
68 margin-left: auto; 69 margin-left: auto;
69 70
70 @each $breakpoint in map-keys(media.$breakpoints) { 71 @each $breakpoint in map-keys(media.$breakpoints) {
71 @include media.media('<=#{$breakpoint}') { 72 @include media.media('<=#{$breakpoint}') {
72 @include iro.bem-suffix('#{$breakpoint}-down') { 73 @include iro.bem-suffix('#{$breakpoint}-down') {
73 max-width: iro.props-get(--dims --sm-content-width); 74 max-width: fn.dim(--sm-content-width);
74 margin-right: auto; 75 margin-right: auto;
75 margin-left: auto; 76 margin-left: auto;
76 } 77 }
@@ -79,13 +80,13 @@
79 } 80 }
80 81
81 @include iro.bem-modifier('themed') { 82 @include iro.bem-modifier('themed') {
82 background-color: iro.props-get(--colors --bg, $global: true); 83 background-color: fn.color(--bg, $global: true);
83 color: iro.props-get(--colors --fg, $global: true); 84 color: fn.color(--fg, $global: true);
84 } 85 }
85 86
86 @include iro.bem-modifier('in-page') { 87 @include iro.bem-modifier('in-page') {
87 margin-top: iro.props-get(--dims --in-page-spacing-y); 88 margin-top: fn.dim(--in-page-spacing-y);
88 margin-bottom: iro.props-get(--dims --in-page-spacing-y); 89 margin-bottom: fn.dim(--in-page-spacing-y);
89 } 90 }
90 } 91 }
91} 92}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 3c7edcb..ac54607 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,19 +1,20 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('form') { 4@include iro.props-namespace('form') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --item-spacing-y: iro.props-get(--dims --spacing --y --md, $global: true), 7 --item-spacing-y: fn.dim(--spacing --y --md, $global: true),
7 --label-spacing-x: iro.props-get(--dims --spacing --x --md, $global: true), 8 --label-spacing-x: fn.dim(--spacing --x --md, $global: true),
8 --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), 9 --hint-font-size: fn.dim(--font-size --sm, $global: true),
9 ), 10 ),
10 )); 11 ), 'dims');
11 12
12 @include iro.bem-layout(iro.props-namespace()) { 13 @include iro.bem-layout(iro.props-namespace()) {
13 display: flex; 14 display: flex;
14 flex-direction: column; 15 flex-direction: column;
15 align-items: baseline; 16 align-items: baseline;
16 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); 17 gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x);
17 18
18 @include iro.bem-modifier('labels-left', 'labels-right') { 19 @include iro.bem-modifier('labels-left', 'labels-right') {
19 display: grid; 20 display: grid;