diff options
author | Volpeon <git@volpeon.ink> | 2022-03-26 14:40:11 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-03-26 14:40:11 +0100 |
commit | e4255279ff72e5438d297888d808851cdf2178ed (patch) | |
tree | 52fbae2c67f65376eae97025b433038d9f4a0e35 /src/objects/_rule.scss | |
parent | Split demo in :target views (diff) | |
download | iro-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.scss | 131 |
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 | } | ||