1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | $responsive-sizes: (
|
7 | large $responsive-large,
|
8 | medium $responsive-medium,
|
9 | small $responsive-small,
|
10 | xsmall $responsive-xsmall,
|
11 | );
|
12 |
|
13 |
|
14 | @mixin row-setup($column-number, $gutter-width) {
|
15 | flex-flow: row wrap;
|
16 |
|
17 | > div,
|
18 | > div.col {
|
19 | flex: 0 0 (100% - ($gutter-width * ($column-number - 1))) / $column-number !important;
|
20 |
|
21 | &:nth-of-type(1n) {
|
22 | margin-right: $gutter-width;
|
23 | }
|
24 |
|
25 | &:nth-of-type(#{$column-number}n) {
|
26 | margin-right: 0;
|
27 | margin-left: 0;
|
28 | }
|
29 |
|
30 | &.span-cols {
|
31 | margin-right: 0;
|
32 | margin-left: 0;
|
33 | flex: 0 0 100%;
|
34 | }
|
35 | }
|
36 | }
|
37 |
|
38 |
|
39 | @mixin unfix() {
|
40 | width: 100%;
|
41 | max-width: none !important;
|
42 | flex: initial;
|
43 | flex-grow: 1;
|
44 | flex-shrink: 0;
|
45 | flex-basis: auto;
|
46 |
|
47 | .btn {
|
48 | margin-right: 0;
|
49 | margin-bottom: $spacing-small;
|
50 | margin-left: 0;
|
51 | }
|
52 | }
|
53 |
|
54 |
|
55 | @mixin margin-tidy() {
|
56 | .col:last-of-type {
|
57 | margin-bottom: 0;
|
58 | }
|
59 | }
|
60 |
|
61 |
|
62 | @mixin center-content() {
|
63 | margin: auto !important;
|
64 | text-align: center;
|
65 | }
|
66 |
|
67 |
|
68 | @mixin spaced() {
|
69 | margin-bottom: $spacing-medium !important;
|
70 | }
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | .grid.rs-xlarge-1col > .row,
|
78 | .row.rs-xlarge-1col {
|
79 | @include row-setup(1, 3%);
|
80 | @include margin-tidy();
|
81 | }
|
82 |
|
83 | .grid.rs-xlarge-2col > .row,
|
84 | .row.rs-xlarge-2col {
|
85 | @include row-setup(2, 3%);
|
86 | }
|
87 |
|
88 | .grid.rs-xlarge-3col > .row,
|
89 | .row.rs-xlarge-3col {
|
90 | @include row-setup(3, 3%);
|
91 | }
|
92 |
|
93 | .grid.rs-xlarge-4col > .row,
|
94 | .row.rs-xlarge-4col {
|
95 | @include row-setup(4, 3%);
|
96 | }
|
97 |
|
98 | .grid.rs-xlarge-5col > .row,
|
99 | .row.rs-xlarge-5col {
|
100 | @include row-setup(5, 3%);
|
101 | }
|
102 |
|
103 | .grid.rs-xlarge-6col > .row,
|
104 | .row.rs-xlarge-6col {
|
105 | @include row-setup(6, 3%);
|
106 | }
|
107 |
|
108 | .col.rs-xlarge-unfix {
|
109 | @include unfix();
|
110 | }
|
111 |
|
112 | .rs-xlarge-full-width {
|
113 | width: 100%;
|
114 | }
|
115 |
|
116 | .rs-xlarge-center-content {
|
117 | @include center-content();
|
118 | }
|
119 |
|
120 | .grid.rs-xlarge-spaced,
|
121 | .row.rs-xlarge-spaced {
|
122 | padding-bottom: 0 !important;
|
123 |
|
124 | & > .row > .col,
|
125 | > .col {
|
126 | @include spaced();
|
127 | }
|
128 | }
|
129 |
|
130 | .rs-xlarge-hide {
|
131 | display: none !important;
|
132 | }
|
133 |
|
134 | .rs-xlarge-show {
|
135 | display: block !important;
|
136 | }
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 | @each $size in $responsive-sizes {
|
144 | @media (max-width: #{nth($size, 2)}) {
|
145 |
|
146 |
|
147 | @for $n from 1 through 6 {
|
148 | .grid.rs-#{nth($size, 1)}-#{$n}col > .row,
|
149 | .row.rs-#{nth($size, 1)}-#{$n}col {
|
150 | @include row-setup($n, 3%);
|
151 |
|
152 | @if $n = 1 {
|
153 |
|
154 | .col:last-of-type {
|
155 | @include margin-tidy;
|
156 | }
|
157 | }
|
158 | }
|
159 |
|
160 | .col.rs-#{nth($size, 1)}-unfix {
|
161 | @include unfix();
|
162 | }
|
163 |
|
164 | .rs-#{nth($size, 1)}-center-content {
|
165 | @include center-content();
|
166 | }
|
167 |
|
168 | .grid.rs-#{nth($size, 1)}-spaced,
|
169 | .row.rs-#{nth($size, 1)}-spaced {
|
170 | padding-bottom: 0 !important;
|
171 |
|
172 | & > .row > .col,
|
173 | > .col {
|
174 | @include spaced();
|
175 | }
|
176 | }
|
177 |
|
178 | .rs-#{nth($size, 1)}-hide {
|
179 | display: none !important;
|
180 | }
|
181 |
|
182 | .rs-#{nth($size, 1)}-show {
|
183 | display: block !important;
|
184 | }
|
185 |
|
186 | .rs-#{nth($size, 1)}-full-width {
|
187 | width: 100%;
|
188 | }
|
189 | }
|
190 | }
|
191 | } |
\ | No newline at end of file |