diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_blockquotes.scss (renamed from src/scopes/_blockquote.scss) | 2 | ||||
-rw-r--r-- | src/scopes/_headings.scss | 75 | ||||
-rw-r--r-- | src/scopes/_invisible-links.scss | 15 |
3 files changed, 91 insertions, 1 deletions
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquotes.scss index e997b9b..8f25df9 100644 --- a/src/scopes/_blockquote.scss +++ b/src/scopes/_blockquotes.scss | |||
@@ -1,7 +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 | 3 | ||
4 | @include iro.props-namespace('blockquote') { | 4 | @include iro.props-namespace('blockquotes') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: fn.global-dim(--size --250), | 7 | --pad-x: fn.global-dim(--size --250), |
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss new file mode 100644 index 0000000..b1ef537 --- /dev/null +++ b/src/scopes/_headings.scss | |||
@@ -0,0 +1,75 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | @use '../mixins' as mx; | ||
4 | |||
5 | @include iro.props-namespace('headings') { | ||
6 | @include iro.bem-scope(iro.props-namespace()) { | ||
7 | h1, | ||
8 | h2, | ||
9 | h3, | ||
10 | h4, | ||
11 | h5, | ||
12 | h6 { | ||
13 | @include mx.set-font(--headline); | ||
14 | |||
15 | display: block; | ||
16 | letter-spacing: normal; | ||
17 | text-transform: none; | ||
18 | } | ||
19 | |||
20 | |||
21 | h1 { | ||
22 | color: fn.foreign-color(--heading, --strong); | ||
23 | font-size: fn.global-dim(--font-size --1000); | ||
24 | } | ||
25 | |||
26 | h2 { | ||
27 | color: fn.foreign-color(--heading, --strong); | ||
28 | font-size: fn.global-dim(--font-size --700); | ||
29 | } | ||
30 | |||
31 | h3 { | ||
32 | color: fn.foreign-color(--heading, --strong); | ||
33 | font-size: fn.global-dim(--font-size --400); | ||
34 | } | ||
35 | |||
36 | h4 { | ||
37 | color: fn.foreign-color(--heading, --strong); | ||
38 | font-size: fn.global-dim(--font-size --200); | ||
39 | } | ||
40 | |||
41 | h5 { | ||
42 | @include mx.set-font(--standard, ( | ||
43 | --line-height: null, | ||
44 | --size: fn.global-dim(--font-size --100), | ||
45 | --weight: bold, | ||
46 | --transform: uppercase, | ||
47 | --spacing: 1px | ||
48 | )); | ||
49 | |||
50 | color: fn.foreign-color(--heading, --strong); | ||
51 | } | ||
52 | |||
53 | h6 { | ||
54 | @include mx.set-font(--standard, ( | ||
55 | --line-height: null, | ||
56 | --size: fn.global-dim(--font-size --50), | ||
57 | --weight: 500, | ||
58 | --transform: uppercase, | ||
59 | --spacing: 1px | ||
60 | )); | ||
61 | |||
62 | color: fn.foreign-color(--heading, --light); | ||
63 | } | ||
64 | |||
65 | @include iro.bem-elem('primary') { | ||
66 | background-image: linear-gradient( | ||
67 | to top, | ||
68 | transparent .15em, | ||
69 | fn.foreign-color(--heading, --bg) .15em, | ||
70 | fn.foreign-color(--heading, --bg) .6em, | ||
71 | transparent .6em | ||
72 | ); | ||
73 | } | ||
74 | } | ||
75 | } | ||
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss new file mode 100644 index 0000000..71dd9da --- /dev/null +++ b/src/scopes/_invisible-links.scss | |||
@@ -0,0 +1,15 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.props-namespace('invisible-links') { | ||
4 | @include iro.bem-scope(iro.props-namespace()) { | ||
5 | :link, | ||
6 | :visited { | ||
7 | color: currentColor; | ||
8 | text-decoration: none; | ||
9 | |||
10 | &:hover { | ||
11 | text-decoration: underline; | ||
12 | } | ||
13 | } | ||
14 | } | ||
15 | } | ||