summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
committerVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
commit511a47c8964c43927563ee88b62b3f215bf9b7d1 (patch)
tree108bbc0139ede490a2038a2f6c96467f62666346 /src/layouts
parentImproved bubble (diff)
downloadiro-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.scss65
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}