src/css/imports/_border-widths.css


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

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: var(--spacing-extra-small); }
.bw3 { border-width: var(--spacing-small); }
.bw4 { border-width: var(--spacing-medium); }
.bw5 { border-width: 2rem; }

/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }

@media (--breakpoint-not-small) {
  .bw0-ns { border-width: 0; }
  .bw1-ns { border-width: .125rem; }
  .bw2-ns { border-width: var(--spacing-extra-small); }
  .bw3-ns { border-width: var(--spacing-small); }
  .bw4-ns { border-width: var(--spacing-medium); }
  .bw5-ns { border-width: 2rem; }
  .bt-0-ns { border-top-width: 0; }
  .br-0-ns { border-right-width: 0; }
  .bb-0-ns { border-bottom-width: 0; }
  .bl-0-ns { border-left-width: 0; }
}

@media (--breakpoint-medium) {
  .bw0-m { border-width: 0; }
  .bw1-m { border-width: .125rem; }
  .bw2-m { border-width: var(--spacing-extra-small); }
  .bw3-m { border-width: var(--spacing-small); }
  .bw4-m { border-width: var(--spacing-medium); }
  .bw5-m { border-width: 2rem; }
  .bt-0-m { border-top-width: 0; }
  .br-0-m { border-right-width: 0; }
  .bb-0-m { border-bottom-width: 0; }
  .bl-0-m { border-left-width: 0; }
}

@media (--breakpoint-large) {
  .bw0-l { border-width: 0; }
  .bw1-l { border-width: .125rem; }
  .bw2-l { border-width: var(--spacing-extra-small); }
  .bw3-l { border-width: var(--spacing-small); }
  .bw4-l { border-width: var(--spacing-medium); }
  .bw5-l { border-width: 2rem; }
  .bt-0-l { border-top-width: 0; }
  .br-0-l { border-right-width: 0; }
  .bb-0-l { border-bottom-width: 0; }
  .bl-0-l { border-left-width: 0; }
}