diff options
Diffstat (limited to 'src/layouts/_container.scss')
-rw-r--r-- | src/layouts/_container.scss | 37 |
1 files changed, 19 insertions, 18 deletions
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 | } |