From f7fbbe455a8b0ad13426993728d97cbdf343473c Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 12 Feb 2022 13:02:20 +0100
Subject: Update
---
src/_utils.scss | 9 ++++++++-
src/_vars.scss | 26 +++++++++++++++-----------
src/layouts/_card.scss | 8 ++++----
src/objects/_action-menu.scss | 8 ++++----
src/objects/_backdrop.scss | 4 ++--
src/objects/_menu.scss | 6 +++---
tpl/index.pug | 2 +-
tpl/objects/text-field.pug | 3 ++-
8 files changed, 39 insertions(+), 27 deletions(-)
diff --git a/src/_utils.scss b/src/_utils.scss
index f663733..7ae2d6e 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
@use 'iro-sass/src/index' as iro;
+@use 'functions' as fn;
@include iro.bem-utility('db') {
display: block;
@@ -21,6 +22,12 @@
position: relative;
}
-@include iro.bem-utility('mt-0') {
+@include iro.bem-utility('mt0') {
margin-top: 0;
}
+
+@each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') {
+ @include iro.bem-utility('p-#{$size}') {
+ padding: fn.global-dim(--spacing --#{$size});
+ }
+}
diff --git a/src/_vars.scss b/src/_vars.scss
index 6d273f4..71f0b1f 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -22,19 +22,23 @@ media.$unit-intervals: (
@include iro.props-store((
--dims: (
--spacing: (
- --base: iro.fn-px-to-rem(26px),
+ --base: iro.fn-px-to-rem(24px),
--factors: (
- --xs: .25,
- --sm: .5,
- --md: 1,
- --lg: 1.5,
- --xl: 2,
+ --xxs: .125,
+ --xs: .25,
+ --sm: .5,
+ --md: 1,
+ --lg: 1.5,
+ --xl: 2,
+ --xxl: 2.5,
),
- --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
- --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
- --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
- --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
- --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
+ --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
+ --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
+ --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
+ --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
+ --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
+ --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
+ --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
),
--font: (
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 19e097c..2ed121f 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -5,11 +5,11 @@
@include iro.props-namespace('card') {
@include iro.props-store((
--dims: (
- --pad-x: iro.fn-px-to-rem(10px),
- --pad-y: iro.fn-px-to-rem(7px),
+ --pad-x: fn.global-dim(--spacing --sm),
+ --pad-y: fn.global-dim(--spacing --xs),
--lg: (
- --pad-x: iro.fn-px-to-rem(14px),
- --pad-y: iro.fn-px-to-rem(11px),
+ --pad-x: fn.global-dim(--spacing --md),
+ --pad-y: fn.global-dim(--spacing --sm),
)
)
), 'dims');
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 59e0287..e69b381 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -5,13 +5,13 @@
@include iro.props-store((
--dims: (
--pad-x: 0,
- --pad-y: iro.fn-px-to-rem(5px),
- --separator: iro.fn-px-to-rem(5px),
+ --pad-y: fn.global-dim(--spacing --xs),
+ --separator: fn.global-dim(--spacing --xs),
--rounding: 3px,
--border: 1px,
--item: (
- --pad-x: iro.fn-px-to-rem(12px),
- --pad-y: iro.fn-px-to-rem(7px),
+ --pad-x: fn.global-dim(--spacing --sm),
+ --pad-y: fn.global-dim(--spacing --xs),
),
),
), 'dims');
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index d5ce028..34ce46a 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -5,8 +5,8 @@
@include iro.props-store((
--dims: (
--z-index: 10000,
- --pad-x: iro.fn-px-to-rem(14px),
- --pad-y: iro.fn-px-to-rem(60px),
+ --pad-x: fn.global-dim(--spacing --sm),
+ --pad-y: fn.global-dim(--spacing --sm),
),
), 'dims');
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4707209..40c97e0 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -4,10 +4,10 @@
@include iro.props-namespace('menu') {
@include iro.props-store((
--dims: (
- --separator: iro.fn-px-to-rem(10px),
+ --separator: fn.global-dim(--spacing --xs),
--item: (
- --pad-x: iro.fn-px-to-rem(10px),
- --pad-y: iro.fn-px-to-rem(5px),
+ --pad-x: fn.global-dim(--spacing --sm),
+ --pad-y: fn.global-dim(--spacing --xs),
),
),
), 'dims');
diff --git a/tpl/index.pug b/tpl/index.pug
index 365ca52..4e56564 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -528,7 +528,7 @@ html
+box
+backdrop
+dialog('Lorem ipsum')
- p.u-mt-0= loremIpsum
+ p.u-mt0= loremIpsum
p= loremIpsum
p= loremIpsum
p= loremIpsum
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 24f8e21..d33d3b2 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -16,7 +16,8 @@ mixin text-field
'is-disabled': attributes.disabled,
'l-card': !!block,
'l-card--flush': !!block,
- 'l-card--gapless': !!block
+ 'l-card--gapless': !!block,
+ 'u-p-xs': !!block
}
div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
--
cgit v1.2.3-70-g09d2