diff options
author | Volpeon <git@volpeon.ink> | 2022-03-28 20:25:21 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-03-28 20:25:21 +0200 |
commit | 511a47c8964c43927563ee88b62b3f215bf9b7d1 (patch) | |
tree | 108bbc0139ede490a2038a2f6c96467f62666346 /src/layouts | |
parent | Improved bubble (diff) | |
download | iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.gz iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.bz2 iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.zip |
Update
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/_container.scss | 65 |
1 files changed, 5 insertions, 60 deletions
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 | } |