diff options
| author | Volpeon <git@volpeon.ink> | 2023-01-12 17:46:05 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2023-01-12 17:46:05 +0100 |
| commit | 1a44092232713ef2063815bb03aadbb543e88ff6 (patch) | |
| tree | 1c6fd540a808ed6054579202c8db246b855d6347 /src/objects | |
| parent | Update (diff) | |
| download | iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.gz iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.bz2 iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.zip | |
Improved heading structure
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_heading.scss | 67 |
1 files changed, 22 insertions, 45 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 56d4987..b6ae3a4 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -26,65 +26,42 @@ | |||
| 26 | } | 26 | } |
| 27 | 27 | ||
| 28 | @include iro.bem-modifier('xxl') { | 28 | @include iro.bem-modifier('xxl') { |
| 29 | color: fn.color(--strong); | 29 | @include mx.heading-strong(fn.global-dim(--heading --lg)); |
| 30 | font-size: fn.global-dim(--font-size --400); | ||
| 31 | } | 30 | } |
| 32 | 31 | ||
| 33 | @include iro.bem-modifier('xl') { | 32 | @include iro.bem-modifier('xl') { |
| 34 | color: fn.color(--strong); | 33 | @include mx.heading-medium(fn.global-dim(--heading --md)); |
| 35 | font-size: fn.global-dim(--font-size --300); | ||
| 36 | } | 34 | } |
| 37 | 35 | ||
| 38 | @include iro.bem-modifier('lg') { | 36 | @include iro.bem-modifier('lg', 'md', 'sm', 'xs') { |
| 39 | color: fn.color(--strong); | 37 | @include mx.heading-faint(fn.global-dim(--heading --sm)); |
| 40 | font-size: fn.global-dim(--font-size --200); | ||
| 41 | } | ||
| 42 | |||
| 43 | @include iro.bem-modifier('md') { | ||
| 44 | color: fn.color(--strong); | ||
| 45 | font-size: fn.global-dim(--font-size --150); | ||
| 46 | } | ||
| 47 | |||
| 48 | @include iro.bem-modifier('sm') { | ||
| 49 | @include mx.set-font(--standard, ( | ||
| 50 | --line-height: null, | ||
| 51 | --size: fn.global-dim(--font-size --75), | ||
| 52 | --weight: bold, | ||
| 53 | --transform: uppercase, | ||
| 54 | --spacing: 1px | ||
| 55 | )); | ||
| 56 | |||
| 57 | transform: none; | ||
| 58 | color: fn.color(--strong); | ||
| 59 | } | ||
| 60 | |||
| 61 | @include iro.bem-modifier('xs') { | ||
| 62 | @include mx.set-font(--standard, ( | ||
| 63 | --line-height: null, | ||
| 64 | --size: fn.global-dim(--font-size --50), | ||
| 65 | --weight: 500, | ||
| 66 | --transform: uppercase, | ||
| 67 | --spacing: 1px | ||
| 68 | )); | ||
| 69 | |||
| 70 | transform: none; | ||
| 71 | color: fn.color(--light); | ||
| 72 | } | 38 | } |
| 73 | 39 | ||
| 74 | @include iro.bem-modifier('display') { | 40 | @include iro.bem-modifier('display') { |
| 41 | @include mx.set-font(--headline); | ||
| 42 | |||
| 75 | @include iro.bem-modifier('xxl') { | 43 | @include iro.bem-modifier('xxl') { |
| 76 | color: fn.foreign-color(--heading, --strong); | 44 | @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); |
| 77 | font-size: fn.global-dim(--font-size --900); | ||
| 78 | } | 45 | } |
| 79 | 46 | ||
| 80 | @include iro.bem-modifier('xl') { | 47 | @include iro.bem-modifier('xl') { |
| 81 | color: fn.foreign-color(--heading, --strong); | 48 | @include mx.heading-strong(fn.global-dim(--heading --display --xl)); |
| 82 | font-size: fn.global-dim(--font-size --600); | 49 | } |
| 50 | |||
| 51 | @include iro.bem-modifier('lg') { | ||
| 52 | @include mx.heading-strong(fn.global-dim(--heading --display --lg)); | ||
| 53 | } | ||
| 54 | |||
| 55 | @include iro.bem-modifier('md') { | ||
| 56 | @include mx.heading-strong(fn.global-dim(--heading --display --md)); | ||
| 57 | } | ||
| 58 | |||
| 59 | @include iro.bem-modifier('sm') { | ||
| 60 | @include mx.heading-medium(fn.global-dim(--heading --display --sm)); | ||
| 83 | } | 61 | } |
| 84 | 62 | ||
| 85 | @include iro.bem-modifier('l') { | 63 | @include iro.bem-modifier('xs') { |
| 86 | color: fn.foreign-color(--heading, --strong); | 64 | @include mx.heading-faint(fn.global-dim(--heading --display --xs)); |
| 87 | font-size: fn.global-dim(--font-size --300); | ||
| 88 | } | 65 | } |
| 89 | } | 66 | } |
| 90 | } | 67 | } |