aqwarnings/frontend/_extensions/bcds/bcds-warning-levels.scss at main · bcgov/aqwarnings · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/*-- scss:rules --*/
@import "variables.scss";

$warning-level-yellow: #ffff00;
$warning-level-orange: #ff9500;
$warning-level-red: #d10000;

.Banner-Alert {
  box-shadow: none;
  border-radius: $layout-border-radius-medium;


  &.yellow {
    background-color: $warning-level-yellow;
    .title, .description, .Banner-Alert--icon {
      color: $typography-color-primary;
    }
    color: $typography-color-primary;
  }

  &.orange {
    background-color: $warning-level-orange;
    .title, .description, .Banner-Alert--icon {
      color: $typography-color-primary;
    }
    color: $typography-color-primary;

  }

  &.red {
    background-color: $warning-level-red;
    .title, .description, .Banner-Alert--icon {
      color: $typography-color-primary-invert;
    }
    color: $typography-color-primary-invert;
  }

  display: flex;
  flex-direction: row;
  align-items: flex-start;

  gap: $layout-margin-small;
  padding: $layout-padding-medium $layout-padding-large;
  margin: $layout-margin-medium $layout-margin-none;
}

.Banner-Alert--container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .title {
    font: $typography-bold-body;
  }

  .description {
    font: $typography-regular-body;
  }
}

.Banner-Alert--icon {
  display: inline-flex;
  align-self: flex-start;
  padding-top: $layout-padding-xsmall;

  svg {

    min-width: $icons-size-medium;
    height: $icons-size-medium;

  }
}

/* Accordian warning level styling */

details.bcds-disclosure {
  summary {
    &.yellow {
      background-color: $warning-level-yellow;
      color: $typography-color-primary;
    }

    &.orange {
      background-color: $warning-level-orange;
      color: $typography-color-primary;
    }

    &.red {
      background-color: $warning-level-red;
      color: $typography-color-primary-invert;
    }
  }
}