Mercurial > nebulaweb3

comparison default/assets/scss/components/_cards.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Card
5 *********************************
6 *********************************/
7 .card {
8 &[class*='bg']:not([class*='card-inverse']) {
9 .card-header {
10 background: inherit;
11 }
12 }
13 }
14
15 @each $col, $val in $colors {
16 .card-#{$col} {
17 background: #{$val};
18 }
19 }
20
21 .card-title {
22 margin-top: 0;
23 }
24
25 .card-header {
26 .list-icon {
27 position: absolute;
28 right: rem(10);
29 top: rem(10);
30 width: rem(50);
31 height: rem(50);
32 text-align: center;
33 line-height: rem(50);
34 border-radius: 100%;
35 transition: transform $transition-duration $transition-function;
36 }
37 }
38
39 .card-action {
40 border-top: $card-border-width solid $card-border-color;
41 padding: $card-spacer-x;
42 }
43
44 .card-link {
45 .text-inverse &:hover,
46 &:hover {
47 text-decoration: none;
48 }
49 & + .card-link { margin-left: 1em }
50 }
51
52 .card-expandable {
53 .card-body, .card-action {
54 display: none;
55 }
56
57 &.card-expanded .card-body,
58 &.card-expanded .card-action {
59 display: block;
60 }
61
62 &.card-expanded .list-icon {
63 transform: rotate(180deg);
64 }
65
66 .card-header {
67 cursor: pointer;
68 }
69 }
70
71 .card-outline {
72 @each $col, $val in $theme-colors {
73 &-#{$col} {
74 border-color: #{$val};
75 .card-footer,
76 .card-header {
77 background: #{$val};
78 }
79 }
80 }
81 @each $col, $val in $colors {
82 &-#{$col} {
83 border-color: #{$val};
84 .card-footer,
85 .card-header {
86 background: #{$val};
87 }
88 }
89 }
90 }
91
92 [class*='card-outline'] {
93 .card-block {
94 background: #fff;
95 border-bottom-left-radius: $card-border-radius;
96 border-bottom-right-radius: $card-border-radius;
97 }
98 .card-footer,
99 .card-header {
100 color: #fff;
101 h1, h2, h3, h4, h5, h6 {
102 color: inherit;
103 }
104 }
105 }
106
107 .card-body {
108 z-index: 1;
109 }
110
111 .blog-post-new {
112 .card-header {
113 position: relative;
114 z-index: 1;
115 &::before {
116 content: "";
117 @include position(absolute, null 0 0);
118 height: em(100);
119 transform: skewY(-4deg) translateY(70%);
120 background: #fff;
121 z-index: 0;
122 }
123
124 .user-image {
125 position: absolute;
126 right: em(40);
127 bottom: em(-5);
128 }
129
130 .badge {
131 position: absolute;
132 padding: em(8) em(16);
133 top: em(20);
134 left: em(20);
135 &::before {
136 content: "";
137 position: absolute;
138 right: em(-14);
139 top: 0;
140 border-style: solid;
141 border-width: 0px 0 15.5px 14px;
142 border-color: transparent transparent transparent #e6614f;
143 }
144 &::after {
145 content: "";
146 position: absolute;
147 right: em(-14);
148 bottom: 0;
149 border-style: solid;
150 border-width: 15.5px 0 0 14px;
151 border-color: transparent transparent transparent #e6614f;
152 }
153 }
154 }
155
156 .card-body {
157 padding-left: em(30);
158 padding-right: em(30);
159 p {
160 font-size: em(13);
161 line-height: em(25);
162 }
163 }
164
165 .card-action {
166 a {
167 font-weight: 400;
168 font-size: em(13);
169 i { font-size: em(16); }
170 }
171 }
172
173 body.rtl & {
174 .card-header .user-image {
175 right: auto;
176 left: em(40);
177 }
178 }
179 }
180
181 .listing-card {
182 background: #fff;
183 border-radius: 3px;
184 overflow: hidden;
185 margin-bottom: $grid-gutter-width;
186 width: 100%;
187
188 header, .card-info, footer {
189 padding-left: 15px;
190 padding-right: 15px;
191 }
192
193 h4 {
194 font-size: em(24,15);
195 }
196
197 figure {
198 position: relative;
199 a:not(.add-to-favourites) {
200 display: block;
201 }
202 img {
203 width: 100%;
204 height: auto;
205 }
206 }
207
208 .add-to-favourites {
209 position: absolute;
210 top: 15px;
211 right: 15px;
212 padding: 10px;
213 border-radius: 3px;
214 background: #000;
215 opacity: .6;
216 color: #fff;
217 line-height: 1;
218
219 &:hover {
220 opacity: .8;
221 }
222
223 i {
224 font-size: em(16,15);
225 line-height: 1;
226 }
227 }
228
229 .card-info {
230 font-family: $headings-font-family;
231 font-size: em(14,15);
232 color: #bbb;
233 font-weight: 500;
234 margin-top: em(25);
235 letter-spacing: -1px;
236
237 strong {
238 color: #666;
239 }
240 }
241
242 svg {
243 width: 36px;
244 height: 36px;
245 vertical-align: middle;
246 position: relative;
247 top: -2px;
248 }
249
250 .card-info-baths svg {
251 top: -6px;
252 }
253
254 .card-info path,
255 .card-info line,
256 .card-info g {
257 stroke: #bbb;
258 }
259
260 header {
261 color: #666;
262 margin-top: rem(30);
263 }
264
265 footer {
266 padding-top: 15px;
267 padding-bottom: 20px;
268 border-top: 1px solid $theme-border-color;
269 }
270
271 footer .float-left {
272 font-family: $headings-font-family;
273 font-size: em(13,15);
274 font-weight: 600;
275 padding-top: 5px;
276
277 i {
278 position: relative;
279 top: 2px;
280 margin-right: 5px;
281 }
282 }
283
284 .btn {
285 text-transform: uppercase;
286 font-weight: 700;
287 letter-spacing: 0px;
288 font-size: em(11,15);
289 }
290 }