[TASK] Improve SCSS of Form Framework
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _card.scss
1 //
2 // Card
3 // ====
4 // Cards for typo3
5 //
6 //
7 // Normal Usage
8 // ------------
9 //
10 // <div class="card card-size-medium">
11 // ... Content ...
12 // </div>
13 //
14 //
15 // Grid Usage
16 // ----------
17 //
18 // <div class="card-container">
19 //     <div class="card card-size-medium">
20 //     ... Content ...
21 //     </div>
22 //     <div class="card card-size-medium">
23 //     ... Content ...
24 //     </div>
25 //     <div class="card card-size-medium">
26 //     ... Content ...
27 //     </div>
28 //     <div class="card card-size-medium">
29 //     ... Content ...
30 //     </div>
31 // </div>
32 //
33 //
34 // Sizes
35 // -----
36 //
37 // card-size-small => 3 2 1
38 // card-size-medium => 2 2 1
39 // card-size-large => 1 1 1
40 //
41
42 //
43 // Variables
44 //
45 $card-spacing: 10px;
46 $card-base-color: #000;
47 $card-border-color: lighten($card-base-color, 80);
48 $card-border-hover-color: lighten($card-base-color, 70);
49 $card-shadow-color: transparentize($card-base-color, 0.8);
50 $card-shadow-hover-color: transparentize($card-base-color, 0.7);
51
52 //
53 // Component
54 //
55 .card {
56     display: flex;
57     padding: 15px;
58     box-shadow: 0 2px 0 $card-shadow-color;
59     border: 1px solid $card-border-color;
60     margin-bottom: ($card-spacing*2);
61     transition: all 0.2s ease-in-out;
62     transition-property: box-shadow, border, transform;
63
64     &:hover {
65         text-decoration: none;
66         border: 1px solid $card-border-hover-color;
67         transform: translate(0, -1px);
68         box-shadow: 0 3px 0 $card-shadow-hover-color;
69     }
70 }
71
72 .card-container {
73     display: flex;
74     flex-wrap: wrap;
75     margin: $card-spacing #{ - $card-spacing};
76
77     .card {
78         margin-left: $card-spacing;
79         margin-right: $card-spacing;
80     }
81 }
82
83 //
84 // Sizes
85 //
86 .card-size-small,
87 .card-size-medium,
88 .card-size-large {
89     width: calc(100% - #{$card-spacing*2});
90 }
91
92 .card-size-small {
93     @media (min-width: $screen-sm-min) {
94         width: calc(50% - #{$card-spacing*2});
95     }
96
97     @media (min-width: $screen-md-min) {
98         width: calc(25% - #{$card-spacing*2});
99     }
100 }
101
102 .card-size-medium {
103     @media (min-width: $screen-sm-min) {
104         width: calc(50% - #{$card-spacing*2});
105     }
106 }
107
108 .card-size-large {
109     @media (min-width: $screen-sm-min) {
110         width: calc(100% - #{$card-spacing*2});
111     }
112 }