📦 payloadcms / website

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@use './vars.scss' as *;

////////////////////////////
// MEDIA QUERIES (WIDTH)
/////////////////////////////

@mixin extra-small-break {
  @media (max-width: $breakpoint-xs-width) {
    @content;
  }
}

@mixin small-break {
  @media (max-width: $breakpoint-s-width) {
    @content;
  }
}

@mixin mid-break {
  @media (max-width: $breakpoint-m-width) {
    @content;
  }
}

@mixin mobile-header-break {
  @media (max-width: $breakpoint-mh-width) {
    @content;
  }
}

@mixin mid-plus-break {
  @media (max-width: $breakpoint-mp-width) {
    @content;
  }
}

@mixin large-mid-break {
  @media (max-width: $breakpoint-lm-width) {
    @content;
  }
}

@mixin large-break {
  @media (max-width: $breakpoint-l-width) {
    @content;
  }
}

@mixin extra-large-break {
  @media (max-width: $breakpoint-xl-width) {
    @content;
  }
}

@mixin two-extra-large-break {
  @media (max-width: $breakpoint-2xl-width) {
    @content;
  }
}

////////////////////////////
// MEDIA QUERIES (HEIGHT)
/////////////////////////////

@mixin large-break-ht {
  @media (max-height: $breakpoint-l-height) {
    @content;
  }
}