From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/scopes/_tables.scss | 104 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 src/scopes/_tables.scss (limited to 'src/scopes/_tables.scss') diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss new file mode 100644 index 0000000..f722864 --- /dev/null +++ b/src/scopes/_tables.scss @@ -0,0 +1,104 @@ +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; + +@forward 'lists.vars'; +@use 'lists.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('tables') { + table { + margin-block-start: fn.dim(--margin-bs); + border-spacing: 0; + border-collapse: separate; + } + + th { + @include mx.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --50), + --weight: bold, + --transform: uppercase, + --spacing: .5px + )); + + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + color: fn.color(--heading); + text-align: start; + } + + td { + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + border-color: fn.color(--border); + border-style: solid; + border-width: 0; + border-block-start-width: fn.dim(--border); + } + + tr { + &:last-child { + td { + border-block-end-width: fn.dim(--border); + } + } + } + + @include iro.bem-modifier('flush') { + th, + td { + &:first-child { + padding-inline-start: 0; + } + + &:last-child { + padding-inline-end: 0; + } + } + } + + @include iro.bem-modifier('box') { + td { + background-color: fn.color(--box --bg); + + &:first-child { + border-inline-start-width: fn.dim(--border); + } + + &:last-child { + border-inline-end-width: fn.dim(--border); + } + } + + tr { + &:first-child { + td { + &:first-child { + border-start-start-radius: fn.dim(--rounding); + } + + &:last-child { + border-start-end-radius: fn.dim(--rounding); + } + } + } + + &:last-child { + td { + &:first-child { + border-end-start-radius: fn.dim(--rounding); + } + + &:last-child { + border-end-end-radius: fn.dim(--rounding); + } + } + } + } + } + } +} -- cgit v1.3.1