style-guide/bootstrap-shim.scss at main · FreeUKGen/style-guide · 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
94
95
96
97
98
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.mt-1 { margin-top:0.5em;  }
.mt-2 { margin-top:1em;  }
.mt-3 { margin-top:1.5em;  }
.mt-4 { margin-top:2em;  }

.my-1 { margin-top:0.5em;  margin-bottom:0.5em; }
.my-2 { margin-top:1em;  margin-bottom:1.0em; }
.my-3 { margin-top:1.5em;  margin-bottom:1.5em; }
.my-4 { margin-top:2em;  margin-bottom:2em; }

.mb-1 { margin-bottom:0.5em;  }
.mb-2 { margin-bottom:1em;  }
.mb-3 { margin-bottom:1.5em;  }
.mb-4 { margin-bottom:2em;  }

.ml-1 { margin-left:0.5em;  }
.ml-2 { margin-left:1em;  }
.ml-3 { margin-left:1.5em;  }
.ml-4 { margin-left:2em;  }
.ml-5 { margin-left:2.5em;  }
.ml-6 { margin-left:3em;  }
.ml-8 { margin-left:4em;  }
.ml-10 { margin-left:5em;  }
.ml-12 { margin-left:6em;  }

.mx-1 { margin-left:0.5em; margin-right:0.5em }
.mx-2 { margin-left:1em; margin-right:1em }
.mx-3 { margin-left:1.5em; margin-right:1.5em }
.mx-4 { margin-left:2em; margin-right:2em }

.pt-1 { padding-top:0.5em; }
.pt-2 { padding-top:1m; }
.pt-3 { padding-top:1.5em; }
.pt-4 { padding-top:2em; }
.pt-5 { padding-top:2.5em; }
.pt-6 { padding-top:3em; }

.pb-1 { padding-bottom:0.5em; }
.pb-2 { padding-bottom:1m; }
.pb-3 { padding-bottom:1.5em; }
.pb-4 { padding-bottom:2em; }
.pb-5 { padding-bottom:2.5em; }
.pb-6 { padding-bottom:3em; }

.px-0 { padding-left:0; padding-right:0 }
.px-1 { padding-left:0.5em; padding-right:0.5em }
.px-2 { padding-left:1em; padding-right:1em }
.px-3 { padding-left:1.5em; padding-right:1.5em }
.px-4 { padding-left:2em; padding-right:2em }

.py-1 { padding-top:0.5em; padding-bottom:0.5em }
.py-2 { padding-top:1em; padding-bottom:1em }
.py-3 { padding-top:1.5em; padding-bottom:1.5em }
.py-4 { padding-top:2em; padding-bottom:2em }