diff options
Diffstat (limited to 'src/scopes/_headings.scss')
-rw-r--r-- | src/scopes/_headings.scss | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index c241557..c5033e8 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | @use '../mixins' as mx; | 3 | @use '../mixins' as mx; |
4 | @use 'include-media/dist/include-media' as media; | ||
4 | 5 | ||
5 | @include iro.props-namespace('headings') { | 6 | @include iro.props-namespace('headings') { |
6 | @include iro.bem-scope(iro.props-namespace()) { | 7 | @include iro.bem-scope(iro.props-namespace()) { |
@@ -56,26 +57,50 @@ | |||
56 | 57 | ||
57 | h1 { | 58 | h1 { |
58 | @include mx.heading-strong(--display --xxl); | 59 | @include mx.heading-strong(--display --xxl); |
60 | |||
61 | @include media.media('<=md') { | ||
62 | @include mx.heading-strong(--display-sm --xxl); | ||
63 | } | ||
59 | } | 64 | } |
60 | 65 | ||
61 | h2 { | 66 | h2 { |
62 | @include mx.heading-strong(--display --xl); | 67 | @include mx.heading-strong(--display --xl); |
68 | |||
69 | @include media.media('<=md') { | ||
70 | @include mx.heading-strong(--display-sm --xl); | ||
71 | } | ||
63 | } | 72 | } |
64 | 73 | ||
65 | h3 { | 74 | h3 { |
66 | @include mx.heading-strong(--display --lg); | 75 | @include mx.heading-strong(--display --lg); |
76 | |||
77 | @include media.media('<=md') { | ||
78 | @include mx.heading-strong(--display-sm --lg); | ||
79 | } | ||
67 | } | 80 | } |
68 | 81 | ||
69 | h4 { | 82 | h4 { |
70 | @include mx.heading-strong(--display --md); | 83 | @include mx.heading-strong(--display --md); |
84 | |||
85 | @include media.media('<=md') { | ||
86 | @include mx.heading-strong(--display-sm --md); | ||
87 | } | ||
71 | } | 88 | } |
72 | 89 | ||
73 | h5 { | 90 | h5 { |
74 | @include mx.heading-medium(--display --sm); | 91 | @include mx.heading-medium(--display --sm); |
92 | |||
93 | @include media.media('<=md') { | ||
94 | @include mx.heading-medium(--display-sm --sm); | ||
95 | } | ||
75 | } | 96 | } |
76 | 97 | ||
77 | h6 { | 98 | h6 { |
78 | @include mx.heading-faint(--display --xs); | 99 | @include mx.heading-faint(--display --xs); |
100 | |||
101 | @include media.media('<=md') { | ||
102 | @include mx.heading-faint(--display-sm --xs); | ||
103 | } | ||
79 | } | 104 | } |
80 | } | 105 | } |
81 | } | 106 | } |