diff options
| author | Volpeon <git@volpeon.ink> | 2023-12-18 14:21:48 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2023-12-18 14:21:48 +0100 |
| commit | 9cf32988c5a69a5c6380c2c83f7fd6aa7cb2a2f9 (patch) | |
| tree | a851152264a3f5a9425b0a80e596468257610edd /src | |
| parent | Fix (diff) | |
| download | iro-design-9cf32988c5a69a5c6380c2c83f7fd6aa7cb2a2f9.tar.gz iro-design-9cf32988c5a69a5c6380c2c83f7fd6aa7cb2a2f9.tar.bz2 iro-design-9cf32988c5a69a5c6380c2c83f7fd6aa7cb2a2f9.zip | |
Better heading mixin
Diffstat (limited to 'src')
| -rw-r--r-- | src/_mixins.scss | 2 | ||||
| -rw-r--r-- | src/objects/_heading.scss | 18 | ||||
| -rw-r--r-- | src/scopes/_headings.scss | 18 |
3 files changed, 19 insertions, 19 deletions
diff --git a/src/_mixins.scss b/src/_mixins.scss index 506b8ee..b1dda37 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss | |||
| @@ -12,7 +12,7 @@ | |||
| 12 | 12 | ||
| 13 | @mixin heading-strong($size) { | 13 | @mixin heading-strong($size) { |
| 14 | color: fn.foreign-color(--heading, --strong); | 14 | color: fn.foreign-color(--heading, --strong); |
| 15 | font-size: $size; | 15 | font-size: fn.global-dim(join(--heading, $size)); |
| 16 | } | 16 | } |
| 17 | 17 | ||
| 18 | @mixin heading-medium($size) { | 18 | @mixin heading-medium($size) { |
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index e02e0a1..6f5e5b0 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -42,42 +42,42 @@ | |||
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | @include iro.bem-modifier('xxl') { | 44 | @include iro.bem-modifier('xxl') { |
| 45 | @include mx.heading-strong(fn.global-dim(--heading --lg)); | 45 | @include mx.heading-strong(--lg); |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | @include iro.bem-modifier('xl') { | 48 | @include iro.bem-modifier('xl') { |
| 49 | @include mx.heading-medium(fn.global-dim(--heading --md)); | 49 | @include mx.heading-medium(--md); |
| 50 | } | 50 | } |
| 51 | 51 | ||
| 52 | @include iro.bem-modifier('lg', 'md', 'sm', 'xs') { | 52 | @include iro.bem-modifier('lg', 'md', 'sm', 'xs') { |
| 53 | @include mx.heading-faint(fn.global-dim(--heading --sm)); | 53 | @include mx.heading-faint(--sm); |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | @include iro.bem-modifier('display') { | 56 | @include iro.bem-modifier('display') { |
| 57 | @include mx.set-font(--headline); | 57 | @include mx.set-font(--headline); |
| 58 | 58 | ||
| 59 | @include iro.bem-modifier('xxl') { | 59 | @include iro.bem-modifier('xxl') { |
| 60 | @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); | 60 | @include mx.heading-strong(--display --xxl); |
| 61 | } | 61 | } |
| 62 | 62 | ||
| 63 | @include iro.bem-modifier('xl') { | 63 | @include iro.bem-modifier('xl') { |
| 64 | @include mx.heading-strong(fn.global-dim(--heading --display --xl)); | 64 | @include mx.heading-strong(--display --xl); |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | @include iro.bem-modifier('lg') { | 67 | @include iro.bem-modifier('lg') { |
| 68 | @include mx.heading-strong(fn.global-dim(--heading --display --lg)); | 68 | @include mx.heading-strong(--display --lg); |
| 69 | } | 69 | } |
| 70 | 70 | ||
| 71 | @include iro.bem-modifier('md') { | 71 | @include iro.bem-modifier('md') { |
| 72 | @include mx.heading-strong(fn.global-dim(--heading --display --md)); | 72 | @include mx.heading-strong(--display --md); |
| 73 | } | 73 | } |
| 74 | 74 | ||
| 75 | @include iro.bem-modifier('sm') { | 75 | @include iro.bem-modifier('sm') { |
| 76 | @include mx.heading-medium(fn.global-dim(--heading --display --sm)); | 76 | @include mx.heading-medium(--display --sm); |
| 77 | } | 77 | } |
| 78 | 78 | ||
| 79 | @include iro.bem-modifier('xs') { | 79 | @include iro.bem-modifier('xs') { |
| 80 | @include mx.heading-faint(fn.global-dim(--heading --display --xs)); | 80 | @include mx.heading-faint(--display --xs); |
| 81 | } | 81 | } |
| 82 | } | 82 | } |
| 83 | } | 83 | } |
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index a8edb39..c241557 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -20,18 +20,18 @@ | |||
| 20 | 20 | ||
| 21 | 21 | ||
| 22 | h1 { | 22 | h1 { |
| 23 | @include mx.heading-strong(fn.global-dim(--heading --lg)); | 23 | @include mx.heading-strong(--lg); |
| 24 | } | 24 | } |
| 25 | 25 | ||
| 26 | h2 { | 26 | h2 { |
| 27 | @include mx.heading-medium(fn.global-dim(--heading --md)); | 27 | @include mx.heading-medium(--md); |
| 28 | } | 28 | } |
| 29 | 29 | ||
| 30 | h3, | 30 | h3, |
| 31 | h4, | 31 | h4, |
| 32 | h5, | 32 | h5, |
| 33 | h6 { | 33 | h6 { |
| 34 | @include mx.heading-faint(fn.global-dim(--heading --sm)); | 34 | @include mx.heading-faint(--sm); |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | @include iro.bem-elem('highlight') { | 37 | @include iro.bem-elem('highlight') { |
| @@ -55,27 +55,27 @@ | |||
| 55 | } | 55 | } |
| 56 | 56 | ||
| 57 | h1 { | 57 | h1 { |
| 58 | @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); | 58 | @include mx.heading-strong(--display --xxl); |
| 59 | } | 59 | } |
| 60 | 60 | ||
| 61 | h2 { | 61 | h2 { |
| 62 | @include mx.heading-strong(fn.global-dim(--heading --display --xl)); | 62 | @include mx.heading-strong(--display --xl); |
| 63 | } | 63 | } |
| 64 | 64 | ||
| 65 | h3 { | 65 | h3 { |
| 66 | @include mx.heading-strong(fn.global-dim(--heading --display --lg)); | 66 | @include mx.heading-strong(--display --lg); |
| 67 | } | 67 | } |
| 68 | 68 | ||
| 69 | h4 { | 69 | h4 { |
| 70 | @include mx.heading-strong(fn.global-dim(--heading --display --md)); | 70 | @include mx.heading-strong(--display --md); |
| 71 | } | 71 | } |
| 72 | 72 | ||
| 73 | h5 { | 73 | h5 { |
| 74 | @include mx.heading-medium(fn.global-dim(--heading --display --sm)); | 74 | @include mx.heading-medium(--display --sm); |
| 75 | } | 75 | } |
| 76 | 76 | ||
| 77 | h6 { | 77 | h6 { |
| 78 | @include mx.heading-faint(fn.global-dim(--heading --display --xs)); | 78 | @include mx.heading-faint(--display --xs); |
| 79 | } | 79 | } |
| 80 | } | 80 | } |
| 81 | } | 81 | } |
