From 83ae14bbb8dd532f04c4214f762fca57199f4622 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 15 Jun 2022 07:15:57 +0200 Subject: Narrower container --- src/layouts/_container.scss | 25 +++++++++++-------------- src/objects/_button.scss | 2 +- tpl/layouts/container.pug | 2 +- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 52acfb8..d31a631 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -4,10 +4,11 @@ @include iro.props-namespace('container') { @include iro.props-store(( --dims: ( - --width: iro.fn-px-to-rem(620px), - --width-50: iro.fn-px-to-rem(320px), - --pad-x: fn.global-dim(--size --400), - --pad-y: fn.global-dim(--size --800), + --narrow-125: iro.fn-px-to-rem(800px), + --narrow: iro.fn-px-to-rem(600px), + --narrow-75: iro.fn-px-to-rem(400px), + --pad-x: fn.global-dim(--size --400), + --pad-y: fn.global-dim(--size --800), ) ), 'dims'); @@ -19,16 +20,12 @@ ), 'sm'); @include iro.bem-layout(iro.props-namespace()) { - @include iro.bem-modifier('narrow') { - max-width: fn.dim(--width); - margin-right: auto; - margin-left: auto; - } - - @include iro.bem-modifier('narrow-50') { - max-width: fn.dim(--width-50); - margin-right: auto; - margin-left: auto; + @each $size in 'narrow-125' 'narrow' 'narrow-75' { + @include iro.bem-modifier($size) { + max-width: fn.dim(--#{$size}); + margin-right: auto; + margin-left: auto; + } } @include iro.bem-modifier('pad-x') { diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 94711b7..f35bc50 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -143,7 +143,7 @@ @include button-variant('secondary'); - @each $mod in ('accent' 'primary') { + @each $mod in 'accent' 'primary' { @include iro.bem-modifier($mod) { @include button-variant($mod); } diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index 0973b74..56c0b86 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug @@ -3,7 +3,7 @@ mixin container let classes = { 'l-container': true, 'l-container--narrow': attributes.narrow, - 'l-container--narrow-50': attributes.narrow50, + 'l-container--narrow-75': attributes.narrow50, 'u-themed': !!attributes.theme } if (!!attributes.theme) { -- cgit v1.2.3-54-g00ecf