_highlighted_facts.scss 8.26 KB
Newer Older
1
2
$highlighted-fact-bg-color: $light-gray;
$highlighted-fact-color: $uw-gray;
3

4
//faculty / uw colors
5
6
7

$faculty-colors: (".uwdefault": $dark-gray, ".ahs": #005963, ".arts": #D93F00, ".engineering": #57058B, ".environment": #607000, ".math": #C60078, ".science": #0033BE);

vramchar's avatar
vramchar committed
8
9
10
11
@function faculty-color($key: $value) {
  @return map-get($faculty-colors, $key);
}

12
13
// $highlighted-fact-color: faculty-color('.math'); // #8e3329

14
//fonts
15
$highlighted-fact-font: $base-font-family;
16
$highlighted-fact-font-big: $condensed-font-family;
17
18
19
$highlighted-fact-font-medium: $highlighted-fact-font;
$highlighted-fact-font-small: $font-1451-medium;
$highlighted-fact-font-caption: $serif-font-family;
20
21
22
23
24

//appearance
$global-radius: 3px;
$global-rounded: 1000px;
$highlighted-fact-radius: $global-radius;
25
$highlighted-fact-round: $global-rounded;
26

27
28
29
30
// $highlighted-fact-color: faculty-color('.math'); // #8e3329
$highlighted-fact-color-tinted: mix(white, $highlighted-fact-color, 10%);
$highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);

31
32
33
34
35
36
37
38
39
40
41
//ul
.highlighted-fact-wrapper {
  width: 100%;
  display: block;
  float: left;
  height: auto;
  margin: 0;
  position: relative;
  list-style-type: none;
  clear: both;

42
43
44
  .uwm-article-body & {
    padding: 0;
  }
45
}
46

47
.data-usecarousel,
48
49
50
.data-numberpercarousel {
  visibility: hidden;
  height: 0;
51
52
}

53
54
55
56
57
58
59
60
/* Override default display: block from owl script.
  Ensures bubbles are the same height .
*/
.ff-with-bubbles .owl-wrapper,
.ff-with-bubbles .owl-item {
  display: flex !important;
}

61
%highlighted-fact {
62
63
  text-align: center;
  font-weight: 300;
64
  border-radius: $highlighted-fact-radius + 10;
65
66
67
  display: flex;
  flex-direction: column;
  justify-content: center;
68
  padding: 1rem;
69
  margin: 0 1rem;
70
  position: relative;
71
  width: 100%;
72
73
74

  img {
    margin: 0 auto;
75
    margin-bottom: 1rem;
76
    display: block;
77
78
79
    height: 6rem;
    width: auto;
  }
80
81
82
83
84
85

  span {
    text-align: center;
    clear: both;
    float: none;
    display: block;
86
87
88
  }
}

89
.highlighted-fact-tall {
90
91
  border-top: 1px solid $medium-gray;
  color: $medium-gray;
92
93
94
  padding-top: 3rem;

  span {}
95
96

  @include media($medium-screen) {
97
98
    padding-left: 1.5rem;
    border-top: 1px solid $white;
99
    border-left: 1px solid $medium-gray;
100
101
102
  }
}

103
.highlighted-fact {
104
  @extend %highlighted-fact;
vramchar's avatar
vramchar committed
105

106
  .ff-with-bubbles & {
107
108
109
    background-color: $highlighted-fact-bg-color;
  }

110
  $highlighted-fact-color: faculty-color(".uwdefault");
111
112
113
114
115
116

  .highlighted-fact-text-small {
    background-color: $uw-gold;
    color: $uw-black;
  }

117
118
119
120
121
122
123
  .highlighted-fact-infographic .graph {
    background-color: $uw-gold;
  }

  .highlighted-fact-text-big,
  .highlighted-fact-text-medium {
    color: $uw-black;
124
125
126
127
  }

  .ahs &,
  &.ahs {
128
129
130
131
132
    $highlighted-fact-color: faculty-color(".ahs");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
133
134
135
    }

    .highlighted-fact-text-small {
136
      background-color: $highlighted-fact-color;
137
138
139
      color: white;
    }

140
141
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
142
143
144
145
146
    }
  }

  .arts &,
  &.arts {
147
148
149
150
151
    $highlighted-fact-color: faculty-color(".arts");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
152
153
154
    }

    .highlighted-fact-text-small {
155
      background-color: $highlighted-fact-color;
156
157
158
      color: white;
    }

159
160
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
161
162
163
164
165
    }
  }

  .engineering &,
  &.engineering {
166
167
168
169
170
    $highlighted-fact-color: faculty-color(".engineering");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
171
172
173
    }

    .highlighted-fact-text-small {
174
      background-color: $highlighted-fact-color;
175
176
177
      color: white;
    }

178
179
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
180
181
182
183
    }
  }
  .environment &,
  &.environment {
184
185
186
187
188
    $highlighted-fact-color: faculty-color(".environment");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
189
190
191
    }

    .highlighted-fact-text-small {
192
      background-color: $highlighted-fact-color;
193
194
195
      color: white;
    }

196
197
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
198
199
200
201
202
    }
  }

  .math &,
  &.math {
203
204
205
206
207
    $highlighted-fact-color: faculty-color(".math");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
208
209
210
    }

    .highlighted-fact-text-small {
211
      background-color: $highlighted-fact-color;
212
213
214
      color: white;
    }

215
216
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
217
    }
218
  }
219
220
221

  .science &,
  &.science {
222
223
224
225
226
    $highlighted-fact-color: faculty-color(".science");

    .highlighted-fact-text-big,
    .highlighted-fact-text-medium {
      color: $highlighted-fact-color;
227
228
229
    }

    .highlighted-fact-text-small {
230
      background-color: $highlighted-fact-color;
231
232
233
      color: white;
    }

234
235
    .highlighted-fact-infographic .graph {
      background-color: $highlighted-fact-color;
236
    }
237
  }
238
239
240
241
242

  img {}

  .highlighted-fact-wrapper & {}

243
  .text-left &,
244
  &.text-left {
245
    text-align: left;
246
247
248
249
250
251
252
253
254
    img {
      float: left;
      clear: both;
    }

    span {
      text-align: left;
      display: block;
      clear: left;
255
256
    }
  }
257

258
  .text-center &,
259
260
261
262
263
264
  &.text-center {
    span {
      text-align: center;
      display: block;
      clear: both;
    }
265
  }
266
267
268

  .text-right &,
  &.text-right {
269
    text-align: right;
270
271
272
273
    img {
      margin: 0;
      float: right;
      clear: both;
274
    }
275
276
277
278
279

    span {
      text-align: right;
      display: block;
      clear: right;
280
    }
281
282
283
    .highlighted-fact-infographic {
      margin-right: 0;
    }
284
  }
285
286
287
288

  &.img-left {
    img {
      float: left;
289
    }
290
291
292
293
294

    span {
      text-align: left;
      display: block;
      clear: none;
295
296
    }
  }
297
298
299
300

  &.img-right {
    img {
      float: right;
301
    }
302
303
304
305
306

    span {
      text-align: right;
      display: block;
      clear: none;
307
308
309
310
    }
  }
}

311
312
.highlighted-fact-text-big {
  font-family: $highlighted-fact-font-big;
313
  font-size: modular-scale(10);
314
315
  font-weight: 600;
  line-height: 1.2;
316
317
  hyphens: none;
}
318
319
320

.highlighted-fact-text-medium {
  font-family: $highlighted-fact-font-medium;
321
  font-size: modular-scale(2);
322
  font-weight: 300;
323
  color: $uw-gray;
324
  line-height: 1.2;
325
326
327
  padding: 0.25rem 0rem;
  hyphens: none;
}
328
329
330

.highlighted-fact-text-small {
  font-family: $highlighted-fact-font-small;
331
  color: $white;
332
  font-size: modular-scale(0);
333
334
335
  line-height: 1.25;
  margin: 1rem auto;
  padding: 0.5rem 1.25rem;
336
  hyphens: none;
337
  display: inline-block !important;
338
}
339
340
341
342
343

.highlighted-fact-caption {
  p {
    font-family: $highlighted-fact-font;
    line-height: 1.2;
344
    float: none;
345
346
    font-size: modular-scale(-1);
  }
347
348
349

  font-family: $highlighted-fact-font;
  line-height: 1.2;
350
  font-size: modular-scale(-1);
351
  font-style: italic;
352
353
  padding: 0.25rem 0rem;
  hyphens: none;
354
355
}

356
357
358
/*
 * Infographics
 */
359

360
361
362
.highlighted-fact-infographic {
  margin: 0 auto;
  max-width: 250px;
363
364
365
366
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
367

368
369
370
  .number,
  .timer {
    font-family: $font-bg-cond-book;
371
    color: #4e4e4e;
372
373
  }
  .timer {
374
    font-size: 2.3em;
375
376
377
378
379
  }
  .graph {
    background: $black;
    display: block;
  }
380

381
382
383
384
385
386
387
388
  &.infographic-number {
    font-size: 3.2rem;
    .timer {
      font-size: 1em;
      margin-right: .5rem;
      display: inline;
    }
  }
389

390
  &.infographic-vertical {
391
392
393
394
395
396
    .graph-wrapper {
      background: $medium-gray;
      height: 200px;
      width: 80px;
      position: relative;
    }
397
398
399
400
401
402
403
404

    .graph {
      width: 80px;
      min-height: 20px;
      position: absolute;
      bottom: 1px;
    }
    .timer {
405
      margin-left: .5em;
406
407
408
409
410
    }
    .timer:after {
      content: '%';
      display: inline-block;
    }
411
412

  }
413
  &.infographic-horizontal {
414
415
416
417
418
419
420
421
422
423
424
    margin: 0;
    max-width: 100%;
    padding: 0 1em;
    .graph-wrapper {
      background: $medium-gray;
      height: 80px;
      width: 100%;
      width: calc(100% - 5em);
      position: relative;
      margin-bottom: 1em;
    }
425
426
427
    .graph {
      height: 80px;
      width: 1px;
428
      margin-right: 1em;
429
430
431
432
433
434
435
436
437
438
439
440
441
    }
    .timer {
      width: 3em;
    }
    .timer:after {
      content: '%';
      display: inline-block;
    }
  }
}

.infographic-half_circle svg {
  margin: calc(-0.14 * 100%) 0 calc(-0.4 * 100%);
442
}