UNPKG

5.21 kBSCSSView Raw
1@import "../core/index-noreset.scss";
2@import "scss/variable";
3@import "scss/normalize";
4@import "scss/mixin";
5@import "rtl.scss";
6
7#{$card-prefix} {
8 @include box-sizing;
9
10 & {
11 min-width: $s-25;
12 border: $card-border-width $card-border-style $card-border-color;
13 border-radius: $card-corner;
14 box-shadow: $card-shadow;
15 background: $card-background;
16 overflow: hidden;
17 }
18
19 &-noborder {
20 border: 0;
21 }
22
23 &-head {
24 background: $card-header-background;
25 padding-left: $card-padding-lr;
26 padding-right: $card-padding-lr;
27 &-show-bullet {
28 #{$card-prefix}-title {
29 padding-left: $card-title-padding-left;
30 }
31
32 #{$card-prefix}-title:before {
33 content: '';
34 display: inline-block;
35 height: $card-title-bullet-height;
36 width: $card-title-bullet-width;
37 background: $card-title-bullet-color;
38 position: absolute;
39 left: 0;
40 top: calc(50% - #{$card-title-bullet-height} / 2);
41 }
42 }
43
44 &-main {
45 position: relative;
46 margin-top: $card-head-main-margin-top;
47 margin-bottom: $card-head-main-margin-bottom;
48 height: $card-head-main-height;
49 line-height: $card-head-main-height;
50 }
51 }
52
53 &-title {
54 display: inline-block;
55 overflow: hidden;
56 text-overflow: ellipsis;
57 white-space: nowrap;
58 max-width: 80%;
59 height: 100%;
60 color: $card-title-color;
61 font-size: $card-title-font-size;
62 font-weight: $card-title-font-weight;
63 }
64
65 &-subtitle {
66 font-size: $card-sub-title-font-size;
67 color: $card-sub-title-color;
68 padding-left: $card-sub-title-padding-left;
69 }
70
71 &-extra {
72 position: absolute;
73 right: 0;
74 top: 0;
75 height: 100%;
76 font-size: $card-title-extra-font-size;
77 color: $card-title-extra-color;
78 }
79
80 &-body {
81 padding-bottom: $card-body-padding-bottom;
82 padding-left: $card-padding-lr;
83 padding-right: $card-padding-lr;
84 }
85
86 &-show-divider {
87 #{$card-prefix}-head-main {
88 border-bottom: $card-head-bottom-border-width $card-border-style $card-head-bottom-border-color;
89 }
90
91 #{$card-prefix}-body {
92 padding-top: $card-body-show-divider-padding-top;
93 }
94 }
95
96 &-hide-divider {
97 #{$card-prefix}-body {
98 padding-top: $card-body-hide-divider-padding-top;
99 }
100 }
101
102 &—free {
103 padding: 0;
104 }
105 &-content {
106 overflow: hidden;
107 transition: all $motion-duration-standard $motion-ease;
108 position: relative;
109 }
110
111 &-footer {
112 .#{$css-prefix}icon {
113 transition: all $motion-duration-immediately $motion-linear;
114
115 &.#{$css-prefix}icon-arrow-down.expand {
116 transform-origin: 50% 47%;
117 transform: rotate(180deg);
118 }
119 }
120 }
121
122 &-header {
123 background: $card-header-background;
124 padding: 0 $card-padding-lr;
125 margin-bottom: $card-body-show-divider-padding-top;
126 margin-top: $card-body-padding-bottom;
127 }
128
129 &-media,
130 &-media > * {
131 display: block;
132 background-size: cover;
133 background-repeat: no-repeat;
134 background-position: center;
135 object-fit: cover;
136 width: 100%;
137 }
138
139 &-header-titles {
140 overflow: hidden;
141 }
142
143 &-header-extra {
144 float: right;
145 text-align: right;
146 & .#{$css-prefix}-btn {
147 margin-left: $s-3;
148 vertical-align: middle;
149 }
150 }
151
152 &-header-title {
153 color: $card-title-color;
154 font-size: $card-title-font-size;
155 font-weight: $card-title-font-weight;
156 line-height: 1.5;
157 }
158
159 &-header-subtitle {
160 font-size: $card-sub-title-font-size;
161 color: $card-sub-title-color;
162 }
163
164 &-actions {
165 display: block;
166 padding-left: $card-padding-lr;
167 padding-right: $card-padding-lr;
168 padding-top: $card-body-show-divider-padding-top;
169 padding-bottom: $card-body-padding-bottom;
170 .#{$css-prefix}btn:not(:last-child) {
171 margin-right: $s-3;
172 vertical-align: middle;
173 }
174 }
175
176 &-divider {
177 border-style: none;
178 width: 100%;
179 margin: 0;
180 position: relative;
181 overflow: visible;
182 &::before {
183 content: '';
184 display: block;
185 border-bottom: $card-head-bottom-border-width $card-border-style $card-head-bottom-border-color;
186 }
187 }
188
189 &-divider--inset {
190 padding: 0 $card-padding-lr;
191 }
192
193 &-content-container {
194 margin-top: $card-body-show-divider-padding-top;
195 padding-bottom: $card-body-padding-bottom;
196 padding-left: $card-padding-lr;
197 padding-right: $card-padding-lr;
198 font-size: $card-content-font-size;
199 line-height: $card-content-line-height;
200 color: $card-content-color;
201 }
202}