-
Notifications
You must be signed in to change notification settings - Fork 1
/
spacing.less
89 lines (87 loc) · 1.57 KB
/
spacing.less
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
@import "mixins/for";
@dimensions: top, right, bottom, left;
@interval: 5;
@columns: 12;
@unit: px !important;
.padding(@size, @counter) when (@counter > 0) {
.padding( @size, ( @counter - 1 ) );
.p@{size}-@{counter} {
padding: @interval * @counter @unit;
}
}
.margin(@size, @counter) when (@counter > 0) {
.margin( @size, ( @counter - 1 ) );
.m@{size}-@{counter} {
margin: @interval * @counter @unit;
}
}
.border(@size){
.for(@dimensions);
.-each(@name) {
.no-border@{size}-@{name} {
border-@{name}: none;
}
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.padding(-sm, @columns);
.margin(-sm, @columns);
.no-p-sm{
padding: 0px;
}
.no-m-sm{
margin: 0px;
}
.no-p-lg{
padding: 0 @unit;
}
.no-m-lg{
margin: 0 @unit;
}
.border(-sm);
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 769px) and (max-width : 992px) {
.padding(-md, @columns);
.margin(-md, @columns);
.no-p-md{
padding: 0 @unit;
}
.no-m-md{
margin: 0 @unit;
}
.border(-md);
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 993px) and (min-width : 1200px) {
.padding(-lg, @columns);
.margin(-lg, @columns);
.no-p-lg{
padding: 0 @unit;
}
.no-m-lg{
margin: 0 @unit;
}
.border(-lg);
}
.padding(~'', @columns);
.margin(~'', @columns);
.no-p{
padding: 0 @unit;
}
.no-m{
margin: 0 @unit;
}
.no-border-top {
border-top: none;
}
.no-border-right {
border-right: none;
}
.no-border-bottom {
border-bottom: none;
}
.no-border-left {
border-left: none;
}