From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src/layouts/_button-group.scss | 16 ------- src/layouts/_card-list.scss | 96 ------------------------------------------ src/layouts/_container.scss | 45 -------------------- src/layouts/_flex.scss | 27 ------------ src/layouts/_form.scss | 62 --------------------------- src/layouts/_media.scss | 47 --------------------- src/layouts/_overflow.scss | 9 ---- 7 files changed, 302 deletions(-) delete mode 100644 src/layouts/_button-group.scss delete mode 100644 src/layouts/_card-list.scss delete mode 100644 src/layouts/_container.scss delete mode 100644 src/layouts/_flex.scss delete mode 100644 src/layouts/_form.scss delete mode 100644 src/layouts/_media.scss delete mode 100644 src/layouts/_overflow.scss (limited to 'src/layouts') diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss deleted file mode 100644 index a70d27a..0000000 --- a/src/layouts/_button-group.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('button-group') { - @include iro.props-store(( - --dims: ( - --spacing: fn.global-dim(--size --150), - ), - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - gap: fn.dim(--spacing); - flex-wrap: wrap; - } -} diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss deleted file mode 100644 index 65b6a66..0000000 --- a/src/layouts/_card-list.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; -@use 'include-media/dist/include-media' as media; - -@include iro.props-namespace('card-list') { - @include iro.props-store(( - --dims: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - - --grid: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --col-width: fn.global-dim(--size --3200), - ), - --masonry: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --col-width: fn.global-dim(--size --3200), - ), - --masonry-h: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --row-height: fn.global-dim(--size --3200), - ) - ), - --colors: ( - --border: fn.global-color(--border), - ), - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - flex-direction: column; - gap: fn.dim(--row-gap) fn.dim(--col-gap); - - @include iro.bem-modifier('grid') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); - gap: fn.dim(--grid --col-gap); - - @include iro.bem-modifier('quiet') { - row-gap: fn.dim(--grid --row-gap); - } - } - - @include iro.bem-modifier('masonry') { - display: block; - columns: auto fn.dim(--masonry --col-width); - column-gap: fn.dim(--masonry --col-gap); - - @include iro.bem-elem('card') { - margin-block-end: fn.dim(--masonry --col-gap); - break-inside: avoid; - } - - @include iro.bem-modifier('quiet') { - @include iro.bem-elem('card') { - margin-block-end: fn.dim(--masonry --row-gap); - } - } - } - - @include iro.bem-modifier('masonry-h') { - flex-flow: row wrap; - gap: fn.dim(--masonry-h --col-gap); - - &::after { - content: ''; - display: block; - flex: 1 0 auto; - inline-size: fn.dim(--masonry-h --row-height); - block-size: 0; - } - - @include iro.bem-elem('card') { - flex: 1 0 auto; - max-inline-size: 100%; - } - - @include iro.bem-elem('card-image') { - block-size: fn.dim(--masonry-h --row-height); - } - - @include iro.bem-modifier('quiet') { - row-gap: fn.dim(--masonry-h --row-gap); - } - } - - @include iro.bem-modifier('aspect-5\\/4') { - @include iro.bem-elem('card-image') { - aspect-ratio: 5 / 4; - } - } - } -} diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss deleted file mode 100644 index d13c4f3..0000000 --- a/src/layouts/_container.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('container') { - @include iro.props-store(( - --dims: ( - --narrow-125: iro.fn-px-to-rem(720px), - --narrow: iro.fn-px-to-rem(610px), - --narrow-75: iro.fn-px-to-rem(500px), - --pad-i: fn.global-dim(--size --400), - --pad-b: fn.global-dim(--size --800), - ) - )); - - @include iro.props-store(( - --dims: ( - --pad-i: fn.global-dim(--size --200), - --pad-b: fn.global-dim(--size --600), - ) - ), 'sm'); - - @include iro.props-store(( - --dims: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --450), - ) - ), 'xs'); - - @include iro.bem-layout(iro.props-namespace()) { - @each $size in 'narrow-125' 'narrow' 'narrow-75' { - @include iro.bem-modifier($size) { - max-inline-size: fn.dim(--#{$size}); - margin-inline: auto; - } - } - - @include iro.bem-modifier('pad-i') { - padding-inline: fn.dim(--pad-i); - } - - @include iro.bem-modifier('pad-b') { - padding-block: fn.dim(--pad-b); - } - } -} diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss deleted file mode 100644 index d3f4f9c..0000000 --- a/src/layouts/_flex.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'iro-sass/src/index' as iro; - -@include iro.props-namespace('flex') { - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - - @include iro.bem-modifier('align-stretch') { - align-items: stretch; - } - - @include iro.bem-modifier('align-center') { - align-items: center; - } - - @include iro.bem-modifier('align-start') { - align-items: flex-start; - } - - @include iro.bem-modifier('align-end') { - align-items: flex-end; - } - - @include iro.bem-modifier('column') { - flex-direction: column; - } - } -} diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss deleted file mode 100644 index f6b60ea..0000000 --- a/src/layouts/_form.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -// @use '../objects/field-label'; - -@include iro.props-namespace('form') { - @include iro.props-store(( - --dims: ( - --item-spacing-b: fn.global-dim(--size --325), - --label-spacing-i: fn.global-dim(--size --325), - --hint-font-size: fn.global-dim(--font-size --75), - ), - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - flex-direction: column; - gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i); - - @include iro.bem-elem('item') { - display: block; - } - - @include iro.bem-elem('item-content') { - @include iro.bem-modifier('align-start') { - align-self: start; - } - } - - @include iro.bem-modifier('row') { - flex-direction: row; - align-items: flex-end; - } - - @include iro.bem-modifier('labels-start', 'labels-end') { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto; - align-items: baseline; - - @include iro.bem-elem('item') { - display: contents; - } - - @include iro.bem-elem('item-label') { - grid-column: 1; - padding-inline-end: 0; - } - - @include iro.bem-elem('item-content') { - grid-column: 2; - margin-block-start: 0; - } - } - - @include iro.bem-modifier('labels-end') { - @include iro.bem-elem('item-label') { - text-align: end; - } - } - } -} diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss deleted file mode 100644 index c42aa3e..0000000 --- a/src/layouts/_media.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -$sizes: 'gapless' 'sm' 'lg' 'xl' !default; - -@include iro.props-namespace('media') { - @include iro.props-store(( - --dims: ( - --gap: fn.global-dim(--size --150), - - --gapless: 0, - --sm: fn.global-dim(--size --100), - --lg: fn.global-dim(--size --300), - --xl: fn.global-dim(--size --450), - ) - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - align-items: center; - gap: fn.dim(--gap); - line-height: 1.4; - - @each $size in $sizes { - @include iro.bem-modifier($size) { - gap: fn.dim(--#{$size}); - } - } - - @include iro.bem-modifier('wrap') { - flex-wrap: wrap; - } - - @include iro.bem-elem('block') { - flex: 0 0 auto; - - @include iro.bem-modifier('shrink', 'main') { - flex-shrink: 1; - min-inline-size: 0; - } - - @include iro.bem-modifier('main') { - inline-size: 100%; - } - } - } -} diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss deleted file mode 100644 index 8643bbf..0000000 --- a/src/layouts/_overflow.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('overflow') { - @include iro.bem-layout(iro.props-namespace()) { - overflow: auto; - scrollbar-color: fn.global-color(--text-disabled) transparent; - } -} -- cgit v1.2.3-70-g09d2