📦 EqualifyEverything / equalify

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@use "../global-styles/variables.module.scss";
@use "../global-styles/fonts.scss";

.card {
  border-radius: variables.$spacing;
  padding: calc(variables.$spacing * 3) calc(variables.$spacing * 2);
  h1,h2,h3 {
    margin:0;
    @include fonts.font-size-normal;
    display: flex;
    svg {
      margin-right: variables.$spacing;
    }
  } 
  .text-small {
    @include fonts.font-size-small;
  }
  &.dark {
    background: variables.$black;
    color: variables.$paper;
  }
  &.light {
    background: variables.$white;
    border: 1px solid variables.$gray;
  }
  &.inset-light {
    margin-top:variables.$spacing;
    background: variables.$paper;
    border: 1px solid variables.$gray;
    padding: calc(variables.$spacing * 2) calc(variables.$spacing * 2);
  
    h3{
      border-bottom: 2px solid variables.$black;
    }
    select {
      background-color: variables.$white;
    }
  }
  &.red {
    background: variables.$red;
  }
  &.green {
    background: variables.$green;
    color: variables.$paper;
  }
}