summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_utils.scss9
-rw-r--r--src/_vars.scss26
-rw-r--r--src/layouts/_card.scss8
-rw-r--r--src/objects/_action-menu.scss8
-rw-r--r--src/objects/_backdrop.scss4
-rw-r--r--src/objects/_menu.scss6
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/objects/text-field.pug3
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn;
2 3
3@include iro.bem-utility('db') { 4@include iro.bem-utility('db') {
4 display: block; 5 display: block;
@@ -21,6 +22,12 @@
21 position: relative; 22 position: relative;
22} 23}
23 24
24@include iro.bem-utility('mt-0') { 25@include iro.bem-utility('mt0') {
25 margin-top: 0; 26 margin-top: 0;
26} 27}
28
29@each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') {
30 @include iro.bem-utility('p-#{$size}') {
31 padding: fn.global-dim(--spacing --#{$size});
32 }
33}
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: (
22@include iro.props-store(( 22@include iro.props-store((
23 --dims: ( 23 --dims: (
24 --spacing: ( 24 --spacing: (
25 --base: iro.fn-px-to-rem(26px), 25 --base: iro.fn-px-to-rem(24px),
26 --factors: ( 26 --factors: (
27 --xs: .25, 27 --xxs: .125,
28 --sm: .5, 28 --xs: .25,
29 --md: 1, 29 --sm: .5,
30 --lg: 1.5, 30 --md: 1,
31 --xl: 2, 31 --lg: 1.5,
32 --xl: 2,
33 --xxl: 2.5,
32 ), 34 ),
33 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), 35 --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
34 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), 36 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
35 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), 37 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
36 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), 38 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
37 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), 39 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
40 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
41 --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
38 ), 42 ),
39 43
40 --font: ( 44 --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 @@
5@include iro.props-namespace('card') { 5@include iro.props-namespace('card') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: ( 7 --dims: (
8 --pad-x: iro.fn-px-to-rem(10px), 8 --pad-x: fn.global-dim(--spacing --sm),
9 --pad-y: iro.fn-px-to-rem(7px), 9 --pad-y: fn.global-dim(--spacing --xs),
10 --lg: ( 10 --lg: (
11 --pad-x: iro.fn-px-to-rem(14px), 11 --pad-x: fn.global-dim(--spacing --md),
12 --pad-y: iro.fn-px-to-rem(11px), 12 --pad-y: fn.global-dim(--spacing --sm),
13 ) 13 )
14 ) 14 )
15 ), 'dims'); 15 ), '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 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: 0, 7 --pad-x: 0,
8 --pad-y: iro.fn-px-to-rem(5px), 8 --pad-y: fn.global-dim(--spacing --xs),
9 --separator: iro.fn-px-to-rem(5px), 9 --separator: fn.global-dim(--spacing --xs),
10 --rounding: 3px, 10 --rounding: 3px,
11 --border: 1px, 11 --border: 1px,
12 --item: ( 12 --item: (
13 --pad-x: iro.fn-px-to-rem(12px), 13 --pad-x: fn.global-dim(--spacing --sm),
14 --pad-y: iro.fn-px-to-rem(7px), 14 --pad-y: fn.global-dim(--spacing --xs),
15 ), 15 ),
16 ), 16 ),
17 ), 'dims'); 17 ), '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 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --z-index: 10000, 7 --z-index: 10000,
8 --pad-x: iro.fn-px-to-rem(14px), 8 --pad-x: fn.global-dim(--spacing --sm),
9 --pad-y: iro.fn-px-to-rem(60px), 9 --pad-y: fn.global-dim(--spacing --sm),
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
12 12
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 @@
4@include iro.props-namespace('menu') { 4@include iro.props-namespace('menu') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --separator: iro.fn-px-to-rem(10px), 7 --separator: fn.global-dim(--spacing --xs),
8 --item: ( 8 --item: (
9 --pad-x: iro.fn-px-to-rem(10px), 9 --pad-x: fn.global-dim(--spacing --sm),
10 --pad-y: iro.fn-px-to-rem(5px), 10 --pad-y: fn.global-dim(--spacing --xs),
11 ), 11 ),
12 ), 12 ),
13 ), 'dims'); 13 ), '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
528 +box 528 +box
529 +backdrop 529 +backdrop
530 +dialog('Lorem ipsum') 530 +dialog('Lorem ipsum')
531 p.u-mt-0= loremIpsum 531 p.u-mt0= loremIpsum
532 p= loremIpsum 532 p= loremIpsum
533 p= loremIpsum 533 p= loremIpsum
534 p= loremIpsum 534 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
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-card': !!block,
18 'l-card--flush': !!block, 18 'l-card--flush': !!block,
19 'l-card--gapless': !!block 19 'l-card--gapless': !!block,
20 'u-p-xs': !!block
20 } 21 }
21 22
22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 23 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))