_card.scss 3.39 KB
Newer Older
1
2
3
4
5
6
7
// @file
// Styles for Cards.

$card-accent-border-color: gesso-color(ui, generic, accent) !default;
$card-link-color: gesso-color(text, on-light) !default;
$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
$card-meta-color: gesso-color(ui, generic, text-dark) !default;
8
$card-padding: rem(gesso-spacing(sm)) !default;
9
10

.card {
11
  @include uw-flex-grid(card);
wodby's avatar
wodby committed
12
  //background:$test-color-1;
13
14
  width: 100%;

15
16
17
  .views-row &{
    height:100%;
  }
18
19
20
21
  .uw-label{
    display:block;
    margin-top:1rem;
  }
22
23
24
25

  &__catalog-tags {
    padding-bottom: rem(gesso-spacing(sm));
  }
26
}
wodby's avatar
wodby committed
27

28
29
// if card--show-hover class is present then show "
.card--show-hover{
30
  border-bottom: 3px solid $card-accent-border-color;
31
  box-shadow: gesso-box-shadow(1);
32
33
34
35
36
37
  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
  &:hover,
  &:focus-within {
    box-shadow: gesso-box-shadow(3);
  }
}
38
.card__featured-image{
39
  background-position:center center;
40
41
42
43
44
45
  background-repeat:no-repeat;
  background-size: cover;
  height:45rem;
  min-height: 44rem;

}
wodby's avatar
wodby committed
46
// top
47
.card__header{
48
  @include uw-no-breakout();
wodby's avatar
wodby committed
49
  color: $card-meta-color;
wodby's avatar
wodby committed
50
  margin-bottom: rem(gesso-spacing(sm));
51
52
  width: 100%;

53
}
54
55
.card__date {
  font-size: rem(gesso-font-size(0));
wodby's avatar
wodby committed
56
  margin-bottom: rem(gesso-spacing(sm));
57
}
wodby's avatar
wodby committed
58
59
60
.card__title {
  margin:rem(gesso-spacing(xs)) 0;
  padding:0;
61
  width: 100%;
62
  a {
wodby's avatar
wodby committed
63
    @include link-reverse(
wodby's avatar
wodby committed
64
65
        $card-link-color,
        $card-link-color-hover
66
67
68
    );
  }
}
wodby's avatar
wodby committed
69
.card__author{
70
  @include uw-no-breakout();
wodby's avatar
wodby committed
71
72
  font-family: gesso-font-family(systemmedium);
  font-size: gesso-font-size(-1);
73
  a {
wodby's avatar
wodby committed
74
    @include link(
wodby's avatar
wodby committed
75
76
        $card-link-color,
        $card-link-color-hover
77
78
79
    );
  }
}
wodby's avatar
wodby committed
80
// body
81
.card__body {
82
  @include uw-flex-grid();
wodby's avatar
wodby committed
83
  //background:$test-color-10;
84
  gap:inherit;
85
  padding: $card-padding;
86
  width: 100%;
87
88
89
90
91
  p:last-child {
    margin-bottom: 0;
  }
}
.card__content {
wodby's avatar
wodby committed
92
  //background:$test-color-9;
93
  margin-bottom: rem(gesso-spacing(md));
94
  width: 100%;
95
96
}
.card__media {
wodby's avatar
wodby committed
97
  //background:$test-color-4;
98
  margin-bottom: rem(gesso-spacing(md));
99
  order:-1;
100
  width: 100%;
101
  a {
102

103
    display:inline-block;
104
105
    height: 100%;
    width: 100%;
106
    &:hover,
107
108
109
110
111
112
113
    &:focus{
      img{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        transition:filter gesso-duration(shortest) gesso-easing(ease-in);
      }
    }
114
115
  }
  img {
116
117
118
    //-webkit-filter: grayscale(0);
    //filter: grayscale(0);
    //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
119
    width: 100%;
120
    &:hover{
121
122
123
      //-webkit-filter: grayscale(100%);
      //filter: grayscale(100%);
      //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
124
    }
125
126
  }
}
127
128
129
130
131
132

.card__position {
  color: $uw-black;
  font-size: 1.26562rem;
}

wodby's avatar
wodby committed
133
// footer
134
.card__footer {
135
  @include uw-no-breakout();
136
  margin-top: auto;
137
138
  padding: rem(gesso-spacing(md));
  width: 100%;
139

140
141
142
143
144
145
146
  > div {
    margin-bottom: rem(gesso-spacing(sm));
    &:last-child {
      margin-bottom: 0;
    }
  }
}
147
.card__tags{
148
  width: 100%;
149

150
}
151
152
153
.card__readmore {
  text-align: right;
}
154
.card__social{
155
156
  max-width:20rem;
  width: 100%;
157
158
}

wodby's avatar
wodby committed
159
160


161
162
163
164
165
166
.card--feature {
  .card__body {
    padding-top: $card-padding;
  }

  .card__media {
wodby's avatar
wodby committed
167

168
169
170
171
172
173
174
    margin-bottom: 0;
  }

  @include breakpoint(gesso-breakpoint(md)) {
    flex-direction: row;

    .card__title {
175

176
177
178
179
180
181
182
183
184
185
186
187
    }

    .card__body {
      max-width: 600px;
      padding: $card-padding 2vw 0;
    }

    .card__media {
      order: initial;
    }
  }
}