From 1f7708164ce01b511bc4dd7f1c09b1c190964867 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 13 Jun 2022 17:12:06 +0200 Subject: Fix named viewports --- src/_config.scss | 5 ++- src/_declare-vars.scss | 89 ++++++++++++++++++++++----------------------- src/_utils.scss | 4 ++ src/layouts/_container.scss | 4 +- 4 files changed, 54 insertions(+), 48 deletions(-) (limited to 'src') diff --git a/src/_config.scss b/src/_config.scss index 26a1ad4..efb5746 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -1,4 +1,5 @@ @use 'iro-sass/src/index' as iro; +@use 'iro-sass/src/responsive' as res; @use 'include-media/dist/include-media' as media; iro.$vars-root-size: 16px; @@ -6,7 +7,7 @@ iro.$vars-root-size: 16px; media.$breakpoints: ( lg: 1340px, md: 900px, - sm: 600px, + sm: 620px, xs: 400px, ); @@ -17,6 +18,8 @@ media.$unit-intervals: ( '': 0 ); +res.$named-viewports: media.$breakpoints; + $wanted-grays: ( --1: -1.2, --2: -1.1, diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index ae423c1..6f52186 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -6,51 +6,50 @@ @include iro.props-store(( --dims: ( --size: ( - --0: 0, - --10: iro.fn-px-to-rem(1px), - --25: iro.fn-px-to-rem(2px), - --40: iro.fn-px-to-rem(3px), - --50: iro.fn-px-to-rem(4px), - --65: iro.fn-px-to-rem(5px), - --75: iro.fn-px-to-rem(6px), - --85: iro.fn-px-to-rem(7px), - --100: iro.fn-px-to-rem(8px), - --115: iro.fn-px-to-rem(9px), - --125: iro.fn-px-to-rem(10px), - --130: iro.fn-px-to-rem(11px), - --150: iro.fn-px-to-rem(12px), - --160: iro.fn-px-to-rem(13px), - --175: iro.fn-px-to-rem(14px), - --200: iro.fn-px-to-rem(16px), - --225: iro.fn-px-to-rem(18px), - --250: iro.fn-px-to-rem(20px), - --275: iro.fn-px-to-rem(22px), - --300: iro.fn-px-to-rem(24px), - --325: iro.fn-px-to-rem(26px), - --400: iro.fn-px-to-rem(32px), - --450: iro.fn-px-to-rem(36px), - --500: iro.fn-px-to-rem(40px), - --550: iro.fn-px-to-rem(44px), - --600: iro.fn-px-to-rem(48px), - --700: iro.fn-px-to-rem(56px), - --800: iro.fn-px-to-rem(64px), - --900: iro.fn-px-to-rem(72px), - --1000: iro.fn-px-to-rem(80px), - --1200: iro.fn-px-to-rem(96px), - --1700: iro.fn-px-to-rem(136px), - --2400: iro.fn-px-to-rem(192px), - --2500: iro.fn-px-to-rem(200px), - --2600: iro.fn-px-to-rem(208px), - --2800: iro.fn-px-to-rem(224px), - --3200: iro.fn-px-to-rem(256px), - --3400: iro.fn-px-to-rem(272px), - --3500: iro.fn-px-to-rem(280px), - --3600: iro.fn-px-to-rem(288px), - --3800: iro.fn-px-to-rem(304px), - --4600: iro.fn-px-to-rem(368px), - --5000: iro.fn-px-to-rem(400px), - --6000: iro.fn-px-to-rem(480px), - --16000: iro.fn-px-to-rem(1280px), + --0: 0, + --10: iro.fn-px-to-rem(1px), + --25: iro.fn-px-to-rem(2px), + --40: iro.fn-px-to-rem(3px), + --50: iro.fn-px-to-rem(4px), + --65: iro.fn-px-to-rem(5px), + --75: iro.fn-px-to-rem(6px), + --85: iro.fn-px-to-rem(7px), + --100: iro.fn-px-to-rem(8px), + --115: iro.fn-px-to-rem(9px), + --125: iro.fn-px-to-rem(10px), + --130: iro.fn-px-to-rem(11px), + --150: iro.fn-px-to-rem(12px), + --160: iro.fn-px-to-rem(13px), + --175: iro.fn-px-to-rem(14px), + --200: iro.fn-px-to-rem(16px), + --225: iro.fn-px-to-rem(18px), + --250: iro.fn-px-to-rem(20px), + --275: iro.fn-px-to-rem(22px), + --300: iro.fn-px-to-rem(24px), + --325: iro.fn-px-to-rem(26px), + --400: iro.fn-px-to-rem(32px), + --450: iro.fn-px-to-rem(36px), + --500: iro.fn-px-to-rem(40px), + --550: iro.fn-px-to-rem(44px), + --600: iro.fn-px-to-rem(48px), + --700: iro.fn-px-to-rem(56px), + --800: iro.fn-px-to-rem(64px), + --900: iro.fn-px-to-rem(72px), + --1000: iro.fn-px-to-rem(80px), + --1200: iro.fn-px-to-rem(96px), + --1700: iro.fn-px-to-rem(136px), + --2400: iro.fn-px-to-rem(192px), + --2500: iro.fn-px-to-rem(200px), + --2600: iro.fn-px-to-rem(208px), + --2800: iro.fn-px-to-rem(224px), + --3200: iro.fn-px-to-rem(256px), + --3400: iro.fn-px-to-rem(272px), + --3500: iro.fn-px-to-rem(280px), + --3600: iro.fn-px-to-rem(288px), + --3800: iro.fn-px-to-rem(304px), + --4600: iro.fn-px-to-rem(368px), + --5000: iro.fn-px-to-rem(400px), + --6000: iro.fn-px-to-rem(480px), ), --font: ( diff --git a/src/_utils.scss b/src/_utils.scss index a20bde3..50c67e1 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -14,6 +14,10 @@ $dirs: ( display: block; } +@include iro.bem-utility('d-inline-block') { + display: inline-block; +} + @include iro.bem-utility('d-contents') { display: contents; } diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 42d1281..52acfb8 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -4,8 +4,8 @@ @include iro.props-namespace('container') { @include iro.props-store(( --dims: ( - --width: iro.fn-px-to-rem(700px), - --width-50: iro.fn-px-to-rem(360px), + --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), ) -- cgit v1.2.3-54-g00ecf