diff options
-rw-r--r-- | src/_utils.scss | 9 | ||||
-rw-r--r-- | src/_vars.scss | 26 | ||||
-rw-r--r-- | src/layouts/_card.scss | 8 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 8 | ||||
-rw-r--r-- | src/objects/_backdrop.scss | 4 | ||||
-rw-r--r-- | src/objects/_menu.scss | 6 | ||||
-rw-r--r-- | tpl/index.pug | 2 | ||||
-rw-r--r-- | 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 @@ | |||
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)) |