aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
blob: e027c2d65d90044718947178b67f038238d8cf3c (plain) (blame)
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* Basscss Responsive Padding */
/* Modified by Fabio Berger to include xs prefix */

@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */

  .sm-p0  { padding:        0 }
  .sm-pt0 { padding-top:    0 }
  .sm-pr0 { padding-right:  0 }
  .sm-pb0 { padding-bottom: 0 }
  .sm-pl0 { padding-left:   0 }
  .sm-px0 { padding-left:   0; padding-right:  0 }
  .sm-py0 { padding-top:    0; padding-bottom: 0 }

  .sm-p1  { padding:        .5rem }
  .sm-pt1 { padding-top:        .5rem }
  .sm-pr1 { padding-right:        .5rem }
  .sm-pb1 { padding-bottom:        .5rem }
  .sm-pl1 { padding-left:        .5rem }
  .sm-px1 { padding-left:        .5rem; padding-right:        .5rem }
  .sm-py1 { padding-top:        .5rem; padding-bottom:        .5rem }

  .sm-p2  { padding:        1rem }
  .sm-pt2 { padding-top:        1rem }
  .sm-pr2 { padding-right:        1rem }
  .sm-pb2 { padding-bottom:        1rem }
  .sm-pl2 { padding-left:        1rem }
  .sm-px2 { padding-left:        1rem; padding-right:        1rem }
  .sm-py2 { padding-top:        1rem; padding-bottom:        1rem }

  .sm-p3  { padding:        2rem }
  .sm-pt3 { padding-top:        2rem }
  .sm-pr3 { padding-right:        2rem }
  .sm-pb3 { padding-bottom:        2rem }
  .sm-pl3 { padding-left:        2rem }
  .sm-px3 { padding-left:        2rem; padding-right:        2rem }
  .sm-py3 { padding-top:        2rem; padding-bottom:        2rem }

  .sm-p4  { padding:        4rem }
  .sm-pt4 { padding-top:        4rem }
  .sm-pr4 { padding-right:        4rem }
  .sm-pb4 { padding-bottom:        4rem }
  .sm-pl4 { padding-left:        4rem }
  .sm-px4 { padding-left:        4rem; padding-right:        4rem }
  .sm-py4 { padding-top:        4rem; padding-bottom:        4rem }

}

@media (min-width: 52em) {

  .md-p0  { padding:        0 }
  .md-pt0 { padding-top:    0 }
  .md-pr0 { padding-right:  0 }
  .md-pb0 { padding-bottom: 0 }
  .md-pl0 { padding-left:   0 }
  .md-px0 { padding-left:   0; padding-right:  0 }
  .md-py0 { padding-top:    0; padding-bottom: 0 }

  .md-p1  { padding:        .5rem }
  .md-pt1 { padding-top:        .5rem }
  .md-pr1 { padding-right:        .5rem }
  .md-pb1 { padding-bottom:        .5rem }
  .md-pl1 { padding-left:        .5rem }
  .md-px1 { padding-left:        .5rem; padding-right:        .5rem }
  .md-py1 { padding-top:        .5rem; padding-bottom:        .5rem }

  .md-p2  { padding:        1rem }
  .md-pt2 { padding-top:        1rem }
  .md-pr2 { padding-right:        1rem }
  .md-pb2 { padding-bottom:        1rem }
  .md-pl2 { padding-left:        1rem }
  .md-px2 { padding-left:        1rem; padding-right:        1rem }
  .md-py2 { padding-top:        1rem; padding-bottom:        1rem }

  .md-p3  { padding:        2rem }
  .md-pt3 { padding-top:        2rem }
  .md-pr3 { padding-right:        2rem }
  .md-pb3 { padding-bottom:        2rem }
  .md-pl3 { padding-left:        2rem }
  .md-px3 { padding-left:        2rem; padding-right:        2rem }
  .md-py3 { padding-top:        2rem; padding-bottom:        2rem }

  .md-p4  { padding:        4rem }
  .md-pt4 { padding-top:        4rem }
  .md-pr4 { padding-right:        4rem }
  .md-pb4 { padding-bottom:        4rem }
  .md-pl4 { padding-left:        4rem }
  .md-px4 { padding-left:        4rem; padding-right:        4rem }
  .md-py4 { padding-top:        4rem; padding-bottom:        4rem }

}

@media (min-width: 64em) {

  .lg-p0  { padding:        0 }
  .lg-pt0 { padding-top:    0 }
  .lg-pr0 { padding-right:  0 }
  .lg-pb0 { padding-bottom: 0 }
  .lg-pl0 { padding-left:   0 }
  .lg-px0 { padding-left:   0; padding-right:  0 }
  .lg-py0 { padding-top:    0; padding-bottom: 0 }

  .lg-p1  { padding:        .5rem }
  .lg-pt1 { padding-top:        .5rem }
  .lg-pr1 { padding-right:        .5rem }
  .lg-pb1 { padding-bottom:        .5rem }
  .lg-pl1 { padding-left:        .5rem }
  .lg-px1 { padding-left:        .5rem; padding-right:        .5rem }
  .lg-py1 { padding-top:        .5rem; padding-bottom:        .5rem }

  .lg-p2  { padding:        1rem }
  .lg-pt2 { padding-top:        1rem }
  .lg-pr2 { padding-right:        1rem }
  .lg-pb2 { padding-bottom:        1rem }
  .lg-pl2 { padding-left:        1rem }
  .lg-px2 { padding-left:        1rem; padding-right:        1rem }
  .lg-py2 { padding-top:        1rem; padding-bottom:        1rem }

  .lg-p3  { padding:        2rem }
  .lg-pt3 { padding-top:        2rem }
  .lg-pr3 { padding-right:        2rem }
  .lg-pb3 { padding-bottom:        2rem }
  .lg-pl3 { padding-left:        2rem }
  .lg-px3 { padding-left:        2rem; padding-right:        2rem }
  .lg-py3 { padding-top:        2rem; padding-bottom:        2rem }

  .lg-p4  { padding:        4rem }
  .lg-pt4 { padding-top:        4rem }
  .lg-pr4 { padding-right:        4rem }
  .lg-pb4 { padding-bottom:        4rem }
  .lg-pl4 { padding-left:        4rem }
  .lg-px4 { padding-left:        4rem; padding-right:        4rem }
  .lg-py4 { padding-top:        4rem; padding-bottom:        4rem }

}