diff options
Diffstat (limited to 'assets/css/components/_card.scss')
-rw-r--r-- | assets/css/components/_card.scss | 135 |
1 files changed, 58 insertions, 77 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 20614e7..f8f106d 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -1,41 +1,46 @@ | |||
1 | @include namespace('card') { | 1 | @use 'iro-sass/src/index' as iro; |
2 | @include store(( | 2 | @use 'iro-design/src/functions' as fn; |
3 | --colors: ( | 3 | @use '../functions' as fn2; |
4 | --bg: prop(--colors --bg-lo, $global: true), | 4 | |
5 | --fg: prop(--colors --fg, $global: true), | 5 | @include iro.props-namespace('card') { |
6 | --unread: prop(--colors --bg, $global: true), | 6 | @include iro.props-store(( |
7 | --border: prop(--colors --obj-hi, $global: true), | ||
8 | --hover: ( | ||
9 | --bg: prop(--colors --fg-lo, $global: true), | ||
10 | --fg: prop(--colors --bg-hi, $global: true), | ||
11 | ), | ||
12 | ), | ||
13 | --dims: ( | 7 | --dims: ( |
14 | --pad-x: 1em, | 8 | --hover-offset: fn2.px-to-em(-5px), |
15 | --pad-y: px-to-em(12px), | ||
16 | --hover-offset: px-to-em(-5px), | ||
17 | --indicator: ( | 9 | --indicator: ( |
18 | --width: 1em, | 10 | --width: 1em, |
19 | --height: 4px, | 11 | --height: 4px, |
20 | ), | 12 | ), |
21 | ) | 13 | ) |
22 | )); | 14 | ), 'dims'); |
15 | |||
16 | @include iro.props-store(( | ||
17 | --colors: ( | ||
18 | --bg: fn.global-color(--bg-hi2), | ||
19 | --fg: fn.global-color(--fg), | ||
20 | --unread: fn.global-color(--obj-hi), | ||
21 | --border: fn.global-color(--obj-hi), | ||
22 | --hover: ( | ||
23 | --bg: fn.global-color(--fg-lo), | ||
24 | --fg: fn.global-color(--bg-hi2), | ||
25 | ), | ||
26 | ) | ||
27 | ), 'colors'); | ||
23 | 28 | ||
24 | @include store(( | 29 | @include iro.props-store(( |
25 | --colors: ( | 30 | --colors: ( |
26 | --bg: prop(--colors --bg-hi, $global: true), | 31 | --bg: fn.global-color(--obj-hi), |
27 | --unread: prop(--colors --bg-lo, $global: true), | 32 | --unread: fn.global-color(--bg), |
28 | --border: prop(--colors --bg-lo, $global: true), | 33 | --border: fn.global-color(--obj-hi), |
29 | ) | 34 | ) |
30 | ), 'light'); | 35 | ), 'colors-dark'); |
31 | 36 | ||
32 | @include component(namespace()) { | 37 | @include iro.bem-component(iro.props-namespace()) { |
33 | display: block; | 38 | display: block; |
34 | position: relative; | 39 | position: relative; |
35 | transform: translateY(0); | 40 | transform: translateY(0); |
36 | transition: transform .2s, background-color .2s, color .2s, border-color .2s; | 41 | transition: transform .2s, background-color .2s, color .2s, border-color .2s; |
37 | background-color: prop(--colors --bg); | 42 | background-color: fn.color(--bg); |
38 | color: prop(--colors --fg); | 43 | color: fn.color(--fg); |
39 | line-height: 1.4; | 44 | line-height: 1.4; |
40 | 45 | ||
41 | &::after { | 46 | &::after { |
@@ -45,7 +50,7 @@ | |||
45 | top: 100%; | 50 | top: 100%; |
46 | left: 0; | 51 | left: 0; |
47 | width: 100%; | 52 | width: 100%; |
48 | height: calc(-1 * #{prop(--dims --hover-offset)}); | 53 | height: calc(-1 * fn.dim(--hover-offset)); |
49 | } | 54 | } |
50 | 55 | ||
51 | small, | 56 | small, |
@@ -59,9 +64,9 @@ | |||
59 | 64 | ||
60 | &:hover, | 65 | &:hover, |
61 | &:focus { | 66 | &:focus { |
62 | transform: translateY(#{prop(--dims --hover-offset)}); | 67 | transform: translateY(fn.dim(--hover-offset)); |
63 | background-color: prop(--colors --hover --bg); | 68 | background-color: fn.color(--hover --bg); |
64 | color: prop(--colors --hover --fg); | 69 | color: fn.color(--hover --fg); |
65 | 70 | ||
66 | &::after { | 71 | &::after { |
67 | display: block; | 72 | display: block; |
@@ -69,35 +74,31 @@ | |||
69 | 74 | ||
70 | small, | 75 | small, |
71 | strong { | 76 | strong { |
72 | color: prop(--colors --hover --fg); | 77 | color: fn.color(--hover --fg); |
73 | } | 78 | } |
74 | 79 | ||
75 | @include element('row') { | 80 | @include iro.bem-elem('row') { |
76 | @include modifier('hidden') { | 81 | @include iro.bem-modifier('hidden') { |
77 | visibility: visible; | 82 | visibility: visible; |
78 | transition: opacity .2s; | 83 | transition: opacity .2s; |
79 | opacity: 1; | 84 | opacity: 1; |
80 | } | 85 | } |
81 | } | 86 | } |
82 | 87 | ||
83 | @include element('block') { | 88 | @include iro.bem-elem('indicator') { |
84 | @include modifier('indicator') { | 89 | color: fn.color(--hover --fg); |
85 | color: prop(--colors --hover --fg); | ||
86 | } | ||
87 | } | 90 | } |
88 | } | 91 | } |
89 | } | 92 | } |
90 | 93 | ||
91 | &:visited { | 94 | &:visited { |
92 | @include element('block') { | 95 | @include iro.bem-elem('indicator') { |
93 | @include modifier('indicator') { | 96 | color: fn.color(--bg); |
94 | color: prop(--colors --bg); | ||
95 | } | ||
96 | } | 97 | } |
97 | } | 98 | } |
98 | 99 | ||
99 | @include modifier('outline') { | 100 | @include iro.bem-modifier('outline') { |
100 | border: 1px solid prop(--colors --border); | 101 | border: 1px solid fn.color(--border); |
101 | background-color: transparent; | 102 | background-color: transparent; |
102 | 103 | ||
103 | &:link, | 104 | &:link, |
@@ -109,17 +110,8 @@ | |||
109 | } | 110 | } |
110 | } | 111 | } |
111 | 112 | ||
112 | @include element('row') { | 113 | @include iro.bem-elem('row') { |
113 | display: flex; | 114 | @include iro.bem-modifier('hidden') { |
114 | align-items: center; | ||
115 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
116 | gap: prop(--dims --pad-x); | ||
117 | |||
118 | @include modifier('flush') { | ||
119 | padding: 0; | ||
120 | } | ||
121 | |||
122 | @include modifier('hidden') { | ||
123 | visibility: hidden; | 115 | visibility: hidden; |
124 | position: absolute; | 116 | position: absolute; |
125 | z-index: 10; | 117 | z-index: 10; |
@@ -128,7 +120,7 @@ | |||
128 | left: 0; | 120 | left: 0; |
129 | transition: opacity .2s, visibility 0s .2s; | 121 | transition: opacity .2s, visibility 0s .2s; |
130 | opacity: 0; | 122 | opacity: 0; |
131 | background-color: prop(--colors --hover --bg); | 123 | background-color: fn.color(--hover --bg); |
132 | 124 | ||
133 | @media (hover: none) { | 125 | @media (hover: none) { |
134 | visibility: visible; | 126 | visibility: visible; |
@@ -139,14 +131,14 @@ | |||
139 | } | 131 | } |
140 | } | 132 | } |
141 | 133 | ||
142 | @include element('thumbnail') { | 134 | @include iro.bem-elem('thumbnail') { |
143 | position: relative; | 135 | position: relative; |
144 | width: 100%; | 136 | width: 100%; |
145 | height: 2em; | 137 | height: 2em; |
146 | padding-top: 46%; | 138 | padding-top: 46%; |
147 | } | 139 | } |
148 | 140 | ||
149 | @include element('thumbnail-img') { | 141 | @include iro.bem-elem('thumbnail-img') { |
150 | display: block; | 142 | display: block; |
151 | position: absolute; | 143 | position: absolute; |
152 | top: 0; | 144 | top: 0; |
@@ -156,28 +148,17 @@ | |||
156 | object-fit: cover; | 148 | object-fit: cover; |
157 | } | 149 | } |
158 | 150 | ||
159 | @include element('block') { | 151 | @include iro.bem-elem('indicator') { |
160 | flex: 0 0 auto; | 152 | transition: color .2s; |
161 | overflow: hidden; | 153 | color: fn.color(--unread); |
162 | text-overflow: ellipsis; | 154 | |
163 | 155 | &::before { | |
164 | @include modifier('main') { | 156 | content: ''; |
165 | flex-shrink: 1; | 157 | display: block; |
166 | width: 100%; | 158 | width: fn.dim(--indicator --width); |
167 | } | 159 | height: fn.dim(--indicator --height); |
168 | 160 | border-radius: fn.dim(--indicator --height); | |
169 | @include modifier('indicator') { | 161 | background-color: currentColor; |
170 | transition: color .2s; | ||
171 | color: prop(--colors --unread); | ||
172 | |||
173 | &::before { | ||
174 | content: ''; | ||
175 | display: block; | ||
176 | width: prop(--dims --indicator --width); | ||
177 | height: prop(--dims --indicator --height); | ||
178 | border-radius: prop(--dims --indicator --height); | ||
179 | background-color: currentColor; | ||
180 | } | ||
181 | } | 162 | } |
182 | } | 163 | } |
183 | 164 | ||