summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
commit144b7a2ea83507c98544d14ad9435cc5e51ac071 (patch)
tree7b18227482fa9f5d29d358ce1540b7a6d105febd /src/objects
parentInit (diff)
downloadiro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.gz
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.bz2
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_heading.scss68
-rw-r--r--src/objects/_rule.scss120
2 files changed, 188 insertions, 0 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
new file mode 100644
index 0000000..a0ce052
--- /dev/null
+++ b/src/objects/_heading.scss
@@ -0,0 +1,68 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('heading') {
6 @include iro.props-store((
7 --dims: (
8 --in-page-margin: (
9 --top: iro.props-get(--dims --spacing --y --lg, $global: true),
10 --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true),
11 --bottom: iro.props-get(--dims --spacing --y --sm, $global: true),
12 ),
13 ),
14 --colors: (
15 --light: iro.props-get(--colors --fg-hi, $global: true),
16 --strong: iro.props-get(--colors --fg-lo, $global: true),
17 ),
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 @include typography.set-font(vars.$font--headline);
22
23 display: block;
24 margin-top: iro.props-get(--dims --in-page-margin --top);
25 margin-bottom: 0;
26
27 & + & {
28 margin-top: iro.props-get(--dims --in-page-margin --top-sibling);
29 }
30
31 @include iro.bem-modifier('xxl') {
32 color: iro.props-get(--colors --strong);
33 font-size: iro.props-get(--dims --font-size --xxxl, $global: true);
34 }
35
36 @include iro.bem-modifier('xl') {
37 color: iro.props-get(--colors --strong);
38 font-size: iro.props-get(--dims --font-size --xxl, $global: true);
39 }
40
41 @include iro.bem-modifier('lg') {
42 color: iro.props-get(--colors --strong);
43 font-size: iro.props-get(--dims --font-size --xl, $global: true);
44 }
45
46 @include iro.bem-modifier('md') {
47 color: iro.props-get(--colors --strong);
48 font-size: iro.props-get(--dims --font-size --lg, $global: true);
49 }
50
51 @include iro.bem-modifier('sm') {
52 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
53
54 color: iro.props-get(--colors --strong);
55 font-size: iro.props-get(--dims --font-size --md, $global: true);
56 font-weight: 500;
57 }
58
59 @include iro.bem-modifier('xs') {
60 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
61
62 color: iro.props-get(--colors --light);
63 font-size: iro.props-get(--dims --font-size --xs, $global: true);
64 font-weight: 500;
65 text-transform: uppercase;
66 }
67 }
68}
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
new file mode 100644
index 0000000..74987da
--- /dev/null
+++ b/src/objects/_rule.scss
@@ -0,0 +1,120 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('rule') {
6 @include iro.props-store((
7 --dims: (
8 --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true),
9
10 --strong: (
11 --border-width: iro.props-get(--dims --border-width --thick, $global: true),
12 --label-font-size: iro.props-get(--dims --font-size --md, $global: true),
13 ),
14 --medium: (
15 --border-width: iro.props-get(--dims --border-width --medium, $global: true),
16 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true),
17 ),
18 --faint: (
19 --border-width: iro.props-get(--dims --border-width --thin, $global: true),
20 --label-font-size: iro.props-get(--dims --font-size --xs, $global: true),
21 ),
22 ),
23 --colors: (
24 --strong: (
25 --bg: iro.props-get(--colors --fg, $global: true),
26 --label: iro.props-get(--colors --fg, $global: true),
27 ),
28 --medium: (
29 --bg: iro.props-get(--colors --obj, $global: true),
30 --label: iro.props-get(--colors --fg-hi, $global: true),
31 ),
32 --faint: (
33 --bg: iro.props-get(--colors --obj, $global: true),
34 --label: iro.props-get(--colors --fg-hi2, $global: true),
35 ),
36 ),
37 ));
38
39 @include iro.bem-object(iro.props-namespace()) {
40 display: block;
41 height: iro.props-get(--dims --strong --border-width);
42 margin-top: iro.props-get(--dims --margin-y);
43 margin-bottom: iro.props-get(--dims --margin-y);
44 background-color: iro.props-get(--colors --strong --bg);
45
46 @include iro.bem-modifier('medium') {
47 height: iro.props-get(--dims --medium --border-width);
48 background-color: iro.props-get(--colors --medium --bg);
49 }
50
51 @include iro.bem-modifier('faint') {
52 height: iro.props-get(--dims --faint --border-width);
53 background-color: iro.props-get(--colors --faint --bg);
54 }
55
56 @include iro.bem-modifier('labelled') {
57 display: flex;
58 flex-direction: row;
59 align-items: center;
60 height: auto;
61 border-radius: 0;
62 background-color: transparent;
63
64 &::before,
65 &::after {
66 content: '';
67 display: block;
68 flex: 1 1 auto;
69 width: 100%;
70 height: 3px;
71 background-color: iro.props-get(--colors --strong --bg);
72 }
73
74 &::before {
75 margin-right: 1em;
76 }
77
78 &::after {
79 margin-left: 1em;
80 }
81
82 @include iro.bem-elem('label') {
83 flex: 0 0 auto;
84 color: iro.props-get(--colors --strong --label);
85 font-size: iro.props-get(--dims --strong --label-font-size);
86 font-weight: 700;
87 letter-spacing: .5px;
88 text-transform: uppercase;
89 }
90
91 @include iro.bem-modifier('medium') {
92 &::before,
93 &::after {
94 height: 2px;
95 background-color: iro.props-get(--colors --medium --bg);
96 }
97
98 @include iro.bem-elem('label') {
99 color: iro.props-get(--colors --medium --label);
100 font-size: iro.props-get(--dims --medium --label-font-size);
101 font-weight: 500;
102 }
103 }
104
105 @include iro.bem-modifier('faint') {
106 &::before,
107 &::after {
108 height: 1px;
109 background-color: iro.props-get(--colors --faint --bg);
110 }
111
112 @include iro.bem-elem('label') {
113 color: iro.props-get(--colors --faint --label);
114 font-size: iro.props-get(--dims --faint --label-font-size);
115 font-weight: 500;
116 }
117 }
118 }
119 }
120}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 11:58:41 +0000