• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1
2.card {
3  max-width: 18rem;
4  border-radius: map-get($base, border-radius);
5  @include box-shadow();
6  @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
7  & > :first-child {
8    border-top-left-radius: map-get($base, border-radius);
9    border-top-right-radius: map-get($base, border-radius);
10  }
11  & > :last-child {
12    border-bottom-right-radius: map-get($base, border-radius);
13    border-bottom-left-radius: map-get($base, border-radius);
14  }
15}
16
17.cell {
18  & > .card {
19    max-width: unset;
20  }
21}
22
23.card__content {
24  padding: map-get($spacers, 2) map-get($spacers, 3);
25}
26
27.card__header, .card__header > a {
28  @include link-colors($text-color-d, $main-color-1);
29}
30
31.card__image {
32  position: relative;
33  width: 100%;
34  & > img {
35    display: block;
36    width: 100%;
37    height: auto;
38    border-radius: inherit;
39  }
40  & > .overlay {
41    position: absolute;
42    width: 100%;
43    max-height: 100%;
44    padding: map-get($spacers, 2);
45    a {
46      text-decoration: none !important;
47    }
48  }
49  & > .overlay, & > .overlay--top {
50    top: 0;
51    bottom: auto;
52    border-top-left-radius: inherit;
53    border-top-right-radius: inherit;
54    border-bottom-right-radius: 0;
55    border-bottom-left-radius: 0;
56  }
57  & > .overlay--bottom {
58    top: auto;
59    bottom: 0;
60    border-top-left-radius: 0;
61    border-top-right-radius: 0;
62    border-bottom-right-radius: inherit;
63    border-bottom-left-radius: inherit;
64  }
65  & > .overlay--full {
66    top: 0;
67    bottom: 0;
68  }
69  & > .overlay, & > .overlay--dark {
70    @extend .text--dark;
71    background-color: rgba(#000, .4);
72  }
73  & > .overlay--light {
74    @extend .text--light;
75    background: rgba(#fff, .4);
76  }
77}
78
79.card--clickable {
80  cursor: pointer;
81  @include hover() {
82    @include box-shadow(2);
83    .card__image {
84      & > img {
85        height: inherit;
86      }
87    }
88  }
89  @include transition(map-get($clickable, transition));
90}
91
92.card--flat {
93  @include box-shadow(0);
94  .card__image {
95    & > img {
96      border-radius: map-get($base, border-radius);
97    }
98  }
99  .card__content {
100    padding-top: 0;
101    padding-left: 0;
102  }
103}
104