-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid.sss
executable file
·134 lines (131 loc) · 4.45 KB
/
grid.sss
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
@define-extend clearfix
clear: both
content: ""
display: block
body
/*background-image: url('../../../img/templateazul.jpg')*/
/*background-image: url('https://www.transparenttextures.com/patterns/cubes.png')*/
background-color: color($primaryColor lightness(95%))
container
box-sizing: border-box
display: block
padding-left: calc($spacing * 2.5)
padding-right: calc($spacing * 2.5)
&[p-0]
padding-left: 0
padding-right: 0
&[p-16]
padding-left: $spacing
padding-right: $spacing
&[content]
background-color: white
border-radius: 4px
box-shadow: 0 0 0 1px $primaryShadow
margin-top: calc($min_height_nav + $spacing)
@media (min-height: $window_height_small_nav)
margin-top: calc($height_nav + $spacing)
@media (min-height: $window_height_large_nav)
margin-top: calc($max_height_nav + $spacing)
@media (max-width: 1024px)
margin: $spacing
width: auto
@media (max-width: 800px)
margin: 2vw
+ container[content] //todo melhorar
margin-top: $spacing
&::after
@extend clearfix
@media (min-width: 1024px)
margin: 0 auto
width: 1024px
row, [row]
display: block
margin-left: calc($spacing * -1.25)
margin-right: calc($spacing * -1.25)
&::after
@extend clearfix
> column, > [column]
box-sizing: border-box
display: block
float: left
min-height: 1px
padding-left: calc($spacing * 1.25)
padding-right: calc($spacing * 1.25)
width: 100%
[label]
margin-bottom: calc($spacing - 4px)
margin-top: calc($spacing + 4px)
span
background-color: $alternativeColor
display: block
height: 1px
position: relative
> h4
background-color: white
color: $alternativeColor
font-size: 14px
left: 16px
margin: 0
padding: 0 3px
position: absolute
top: -8px
@for $i from 1 to 12
$with: calc($(i)/12*100)%
> column[xs-$i], > [column][xs-$i]
width: $with
@media(min-width: 768px)
> column[md-$i], > [column][md-$i]
width: $with
> column[md-$i][fix-border], > [column][md-$i][fix-border]
width: calc($with + 1px)
> column[off-md-$i], > [column][off-md-$i]
margin-left: $with
@media(min-width: 425px)
> column[sm-$i], > [column][sm-$i]
width: $with
> column[sm-$i][fix-border], > [column][sm-$i][fix-border]
width: calc($with + 1px)
@media(min-width: 1024px)
> column[lg-$i], > [column][lg-$i]
width: $with
> column[lg-$i][fix-border], > [column][lg-$i][fix-border]
width: calc($with + 1px)
@media(min-width: 1440px)
> column[xl-$i], > [column][xl-$i]
width: $with
> column[xl-$i][fix-border], > [column][xl-$i][fix-border]
width: calc($with + 1px)
@for $i from 1 to 10
$with: calc($(i)/10*100)%
> column[xs-10-$i], > [column][xs-10-$i]
width: $with
@media(min-width: 768px)
> column[md-10-$i], > [column][md-10-$i]
width: $with
@media(min-width: 425px)
> column[sm-10-$i], > [column][sm-10-$i]
width: $with
@media(min-width: 1024px)
> column[lg-10-$i], > [column][lg-10-$i]
width: $with
@media(min-width: 1440px)
> column[xl-10-$i], > [column][xl-10-$i]
width: $with
&[sm]
margin-left: calc($spacing * -1 / 4)
margin-right: calc($spacing * -1 / 4)
> column
padding-left: calc($spacing / 4)
padding-right: calc($spacing / 4)
&[md]
margin-left: calc($spacing * -1 / 2)
margin-right: calc($spacing * -1 / 2)
> column
padding-left: calc($spacing / 2)
padding-right: calc($spacing / 2)
&[gallery] > column > img
border-radius: 3px
box-shadow: inset 0 0 0 1px color(black lightness(90%))
box-sizing: inherit
padding: 6px
width: 100%