summaryrefslogtreecommitdiffstats
path: root/src/objects/_rule.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
committerVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
commite4255279ff72e5438d297888d808851cdf2178ed (patch)
tree52fbae2c67f65376eae97025b433038d9f4a0e35 /src/objects/_rule.scss
parentSplit demo in :target views (diff)
downloadiro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.gz
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.bz2
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.zip
Lots of updates, especially dialog
Diffstat (limited to 'src/objects/_rule.scss')
-rw-r--r--src/objects/_rule.scss131
1 files changed, 0 insertions, 131 deletions
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
deleted file mode 100644
index ba09414..0000000
--- a/src/objects/_rule.scss
+++ /dev/null
@@ -1,131 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('rule') {
5 @include iro.props-store((
6 --dims: (
7 --margin-y: fn.global-dim(--size --85),
8
9 --strong: (
10 --border-width: fn.global-dim(--border-width --thick),
11 --label-font-size: fn.global-dim(--font-size --100),
12 ),
13 --medium: (
14 --border-width: fn.global-dim(--border-width --medium),
15 --label-font-size: fn.global-dim(--font-size --75),
16 ),
17 --faint: (
18 --border-width: fn.global-dim(--border-width --thin),
19 --label-font-size: fn.global-dim(--font-size --50),
20 ),
21 ),
22 ), 'dims');
23
24 @include iro.props-store((
25 --colors: (
26 --strong: (
27 --bg: fn.global-color(--fg),
28 --label: fn.global-color(--fg),
29 ),
30 --medium: (
31 --bg: fn.global-color(--obj),
32 --label: fn.global-color(--fg-hi),
33 ),
34 --faint: (
35 --bg: fn.global-color(--obj),
36 --label: fn.global-color(--fg-hi2),
37 ),
38 ),
39 ), 'colors');
40
41 @include iro.bem-object(iro.props-namespace()) {
42 display: block;
43 height: fn.dim(--strong --border-width);
44 margin-top: fn.dim(--margin-y);
45 margin-bottom: fn.dim(--margin-y);
46 background-color: fn.color(--strong --bg);
47
48 @include iro.bem-modifier('vertical') {
49 align-self: stretch;
50 width: 1px;
51 height: auto;
52 margin-top: 0;
53 margin-bottom: 0;
54 background-color: fn.color(--faint --bg);
55 }
56
57 @include iro.bem-modifier('medium') {
58 height: fn.dim(--medium --border-width);
59 background-color: fn.color(--medium --bg);
60 }
61
62 @include iro.bem-modifier('faint') {
63 height: fn.dim(--faint --border-width);
64 background-color: fn.color(--faint --bg);
65 }
66
67 @include iro.bem-modifier('labelled') {
68 display: flex;
69 flex-direction: row;
70 align-items: center;
71 height: auto;
72 border-radius: 0;
73 background-color: transparent;
74
75 &::before,
76 &::after {
77 content: '';
78 display: block;
79 flex: 1 1 auto;
80 width: 100%;
81 height: 3px;
82 background-color: fn.color(--strong --bg);
83 }
84
85 &::before {
86 margin-right: 1em;
87 }
88
89 &::after {
90 margin-left: 1em;
91 }
92
93 @include iro.bem-elem('label') {
94 flex: 0 0 auto;
95 color: fn.color(--strong --label);
96 font-size: fn.dim(--strong --label-font-size);
97 font-weight: 700;
98 letter-spacing: .5px;
99 text-transform: uppercase;
100 }
101
102 @include iro.bem-modifier('medium') {
103 &::before,
104 &::after {
105 height: 2px;
106 background-color: fn.color(--medium --bg);
107 }
108
109 @include iro.bem-elem('label') {
110 color: fn.color(--medium --label);
111 font-size: fn.dim(--medium --label-font-size);
112 font-weight: 500;
113 }
114 }
115
116 @include iro.bem-modifier('faint') {
117 &::before,
118 &::after {
119 height: 1px;
120 background-color: fn.color(--faint --bg);
121 }
122
123 @include iro.bem-elem('label') {
124 color: fn.color(--faint --label);
125 font-size: fn.dim(--faint --label-font-size);
126 font-weight: 500;
127 }
128 }
129 }
130 }
131}