diff options
-rw-r--r-- | src/_base.scss | 6 | ||||
-rw-r--r-- | src/_declare-vars.scss | 7 | ||||
-rw-r--r-- | src/_scopes.scss | 4 | ||||
-rw-r--r-- | src/objects/_heading.scss | 21 | ||||
-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 | ||||
-rw-r--r-- | tpl/index.pug | 2 | ||||
-rw-r--r-- | tpl/objects/heading.pug | 6 | ||||
-rw-r--r-- | tpl/views/blockquote.pug | 4 | ||||
-rw-r--r-- | tpl/views/code.pug | 2 | ||||
-rw-r--r-- | tpl/views/heading.pug | 12 |
12 files changed, 126 insertions, 30 deletions
diff --git a/src/_base.scss b/src/_base.scss index 365a46e..8cba1fb 100644 --- a/src/_base.scss +++ b/src/_base.scss | |||
@@ -45,12 +45,16 @@ h3, | |||
45 | h4, | 45 | h4, |
46 | h5, | 46 | h5, |
47 | h6 { | 47 | h6 { |
48 | margin: 0; | 48 | margin: fn.dim(--heading --margin-top) 0 0; |
49 | color: fn.color(--fg-lo); | 49 | color: fn.color(--fg-lo); |
50 | font-size: fn.dim(--font-size --100); | 50 | font-size: fn.dim(--font-size --100); |
51 | font-weight: bold; | 51 | font-weight: bold; |
52 | letter-spacing: 1px; | 52 | letter-spacing: 1px; |
53 | text-transform: uppercase; | 53 | text-transform: uppercase; |
54 | |||
55 | & + & { | ||
56 | margin-top: fn.dim(--heading --margin-top-sibling); | ||
57 | } | ||
54 | } | 58 | } |
55 | 59 | ||
56 | p { | 60 | p { |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index fcd281b..b60374d 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -95,7 +95,12 @@ | |||
95 | --focus-outline-width: 3px, | 95 | --focus-outline-width: 3px, |
96 | 96 | ||
97 | --paragraph: ( | 97 | --paragraph: ( |
98 | --margin-top: fn.dim(--size --150, null), | 98 | --margin-top: fn.dim(--size --300, null), |
99 | ), | ||
100 | |||
101 | --heading: ( | ||
102 | --margin-top: fn.dim(--size --500, null), | ||
103 | --margin-top-sibling: fn.dim(--size --325, null), | ||
99 | ), | 104 | ), |
100 | 105 | ||
101 | --list: ( | 106 | --list: ( |
diff --git a/src/_scopes.scss b/src/_scopes.scss index 92e6d14..28c5399 100644 --- a/src/_scopes.scss +++ b/src/_scopes.scss | |||
@@ -1,3 +1,5 @@ | |||
1 | @use 'scopes/colored-links'; | 1 | @use 'scopes/colored-links'; |
2 | @use 'scopes/invisible-links'; | ||
2 | @use 'scopes/code'; | 3 | @use 'scopes/code'; |
3 | @use 'scopes/blockquote'; | 4 | @use 'scopes/blockquotes'; |
5 | @use 'scopes/headings'; | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 77e24b4..a9e0e71 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -5,15 +5,6 @@ | |||
5 | 5 | ||
6 | @include iro.props-namespace('heading') { | 6 | @include iro.props-namespace('heading') { |
7 | @include iro.props-store(( | 7 | @include iro.props-store(( |
8 | --dims: ( | ||
9 | --spacing: ( | ||
10 | --top: fn.global-dim(--size --500), | ||
11 | --top-sibling: fn.global-dim(--size --325), | ||
12 | ), | ||
13 | ), | ||
14 | ), 'dims'); | ||
15 | |||
16 | @include iro.props-store(( | ||
17 | --colors: ( | 8 | --colors: ( |
18 | --light: fn.global-color(--fg-hi), | 9 | --light: fn.global-color(--fg-hi), |
19 | --strong: fn.global-color(--fg-lo), | 10 | --strong: fn.global-color(--fg-lo), |
@@ -25,16 +16,12 @@ | |||
25 | @include mx.set-font(--headline); | 16 | @include mx.set-font(--headline); |
26 | 17 | ||
27 | display: block; | 18 | display: block; |
19 | margin-top: fn.global-dim(--heading --margin-top); | ||
28 | letter-spacing: normal; | 20 | letter-spacing: normal; |
29 | text-transform: none; | 21 | text-transform: none; |
30 | 22 | ||
31 | @include iro.bem-at-theme('typography') { | 23 | & + & { |
32 | margin-top: fn.dim(--spacing --top); | 24 | margin-top: fn.global-dim(--heading --margin-top-sibling); |
33 | margin-bottom: 0; | ||
34 | |||
35 | & + & { | ||
36 | margin-top: fn.dim(--spacing --top-sibling); | ||
37 | } | ||
38 | } | 25 | } |
39 | 26 | ||
40 | @include iro.bem-modifier('xxl') { | 27 | @include iro.bem-modifier('xxl') { |
@@ -81,7 +68,7 @@ | |||
81 | color: fn.color(--light); | 68 | color: fn.color(--light); |
82 | } | 69 | } |
83 | 70 | ||
84 | @include iro.bem-elem('inner') { | 71 | @include iro.bem-elem('primary') { |
85 | background-image: linear-gradient( | 72 | background-image: linear-gradient( |
86 | to top, | 73 | to top, |
87 | transparent .15em, | 74 | transparent .15em, |
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 | } | ||
diff --git a/tpl/index.pug b/tpl/index.pug index 7c3696e..7bb59a0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -36,7 +36,7 @@ mixin view(id, title) | |||
36 | views.push({ id, title }); | 36 | views.push({ id, title }); |
37 | 37 | ||
38 | +container(narrow=true class='u-p-700 c-view' id=id) | 38 | +container(narrow=true class='u-p-700 c-view' id=id) |
39 | +h1-heading('xl')= title | 39 | +h1-heading('xl')(class='u-mt-0')= title |
40 | +divider('medium') | 40 | +divider('medium') |
41 | block | 41 | block |
42 | 42 | ||
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index aa3fec9..47ffefa 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug | |||
@@ -32,11 +32,11 @@ mixin h6-heading(level) | |||
32 | h6(class=classes)&attributes(attributes) | 32 | h6(class=classes)&attributes(attributes) |
33 | block | 33 | block |
34 | 34 | ||
35 | mixin div-heading(level, inner = false) | 35 | mixin div-heading(level, primary = false) |
36 | - let classes = ['o-heading', 'o-heading--' + level] | 36 | - let classes = ['o-heading', 'o-heading--' + level] |
37 | div(class=classes)&attributes(attributes) | 37 | div(class=classes)&attributes(attributes) |
38 | if inner | 38 | if primary |
39 | span.o-heading__inner | 39 | span.o-heading__primary |
40 | block | 40 | block |
41 | else | 41 | else |
42 | block | 42 | block |
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug index a346292..a5dc95c 100644 --- a/tpl/views/blockquote.pug +++ b/tpl/views/blockquote.pug | |||
@@ -1,6 +1,6 @@ | |||
1 | mixin view-blockquote | 1 | mixin view-blockquote |
2 | +view('blockquote', 'Blockquote') | 2 | +view('blockquote', 'Blockquote') |
3 | .c-box.s-blockquote | 3 | .c-box.s-blockquotes |
4 | p= loremIpsum | 4 | p.u-mt-0= loremIpsum |
5 | blockquote= loremIpsum | 5 | blockquote= loremIpsum |
6 | p= loremIpsum | 6 | p= loremIpsum |
diff --git a/tpl/views/code.pug b/tpl/views/code.pug index 552500d..21e16c8 100644 --- a/tpl/views/code.pug +++ b/tpl/views/code.pug | |||
@@ -1,7 +1,7 @@ | |||
1 | mixin view-code | 1 | mixin view-code |
2 | +view('code', 'Code') | 2 | +view('code', 'Code') |
3 | .c-box.s-body | 3 | .c-box.s-body |
4 | p= loremIpsum | 4 | p.u-mt-0= loremIpsum |
5 | pre | 5 | pre |
6 | code. | 6 | code. |
7 | font-weight: 700; | 7 | font-weight: 700; |
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug index efdfb69..07080d5 100644 --- a/tpl/views/heading.pug +++ b/tpl/views/heading.pug | |||
@@ -1,15 +1,23 @@ | |||
1 | mixin view-heading | 1 | mixin view-heading |
2 | +view('heading', 'Heading') | 2 | +view('heading', 'Heading') |
3 | .c-box | 3 | .c-box |
4 | h1= 'H1 default' | 4 | h1.u-mt-0= 'H1 default' |
5 | h2= 'H2 default' | 5 | h2= 'H2 default' |
6 | h3= 'H3 default' | 6 | h3= 'H3 default' |
7 | h4= 'H4 default' | 7 | h4= 'H4 default' |
8 | h5= 'H5 default' | 8 | h5= 'H5 default' |
9 | h6= 'H6 default' | 9 | h6= 'H6 default' |
10 | 10 | ||
11 | .c-box.s-headings | ||
12 | h1.u-mt-0: span.s-headings__primary= 'H1 styled' | ||
13 | h2= 'H2 styled' | ||
14 | h3= 'H3 styled' | ||
15 | h4= 'H4 styled' | ||
16 | h5= 'H5 styled' | ||
17 | h6= 'H6 styled' | ||
18 | |||
11 | .c-box | 19 | .c-box |
12 | +div-heading('xxl', true)= 'XXL Heading' | 20 | +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading' |
13 | +div-heading('xl')= 'XL Heading' | 21 | +div-heading('xl')= 'XL Heading' |
14 | +div-heading('lg')= 'LG Heading' | 22 | +div-heading('lg')= 'LG Heading' |
15 | +div-heading('md')= 'MD Heading' | 23 | +div-heading('md')= 'MD Heading' |