1 | @charset "UTF-8";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin breakpoint($point, $type: "min") {
|
7 | @each $breakpoint in $breakpoints {
|
8 | $name: nth($breakpoint, 1);
|
9 | $minQuery: nth($breakpoint, 2);
|
10 | $maxQuery: nth($breakpoint, 3);
|
11 |
|
12 | @if ($name == $point) {
|
13 | @if ($type == "min") {
|
14 | @media #{$minQuery} { @content; }
|
15 | } @else if ($type == "max") {
|
16 | @media #{$maxQuery} { @content; }
|
17 | } @else if ($type == "min-max") {
|
18 | $query: '';
|
19 | @if ($name == 'xl') {
|
20 | $query: $minQuery;
|
21 | } @else {
|
22 | $query: $minQuery + "and" + $maxQuery;
|
23 | }
|
24 | @media #{$query} { @content; }
|
25 | }
|
26 | }
|
27 | }
|
28 | }
|
29 |
|
30 |
|
31 | @mixin breakpoint-row-width() {
|
32 | @include breakpoint(xxs) { width: $grid-xxs; }
|
33 | @include breakpoint(xs) { width: $grid-xs; }
|
34 | @include breakpoint(s) { width: $grid-s; }
|
35 | @include breakpoint(m) { width: $grid-m; }
|
36 | @include breakpoint(l) { width: $grid-l; }
|
37 | @include breakpoint(xl) { width: $grid-xl; }
|
38 | }
|
39 |
|
40 |
|
41 | @mixin make-columns() {
|
42 | @for $i from 1 through $grid-columns {
|
43 | .#{$css-prefix}col-#{$i} {
|
44 | $width: percentage(divide($i, $grid-columns));
|
45 | flex: 0 0 $width;
|
46 | width: $width;
|
47 | max-width: $width;
|
48 | }
|
49 | }
|
50 |
|
51 | @each $breakpoint in $breakpoints {
|
52 | $name: #{nth($breakpoint, 1)};
|
53 | @include breakpoint($name) {
|
54 | @for $j from 1 through $grid-columns {
|
55 | .#{$css-prefix}col-#{$name}-#{$j} {
|
56 | $width: percentage(divide($j, $grid-columns));
|
57 | flex: 0 0 $width;
|
58 | width: $width;
|
59 | max-width: $width;
|
60 | }
|
61 | }
|
62 | }
|
63 | }
|
64 | }
|
65 |
|
66 |
|
67 | @mixin make-5columns() {
|
68 | @for $i from 1 through $grid-columns-5p {
|
69 | .#{$css-prefix}col-#{$i}p#{$grid-columns-5p} {
|
70 | $width: percentage(divide($i, $grid-columns-5p));
|
71 | flex: 0 0 $width;
|
72 | width: $width;
|
73 | max-width: $width;
|
74 | }
|
75 | }
|
76 | @each $breakpoint in $breakpoints {
|
77 | $name: #{nth($breakpoint, 1)};
|
78 | @include breakpoint($name) {
|
79 | @for $j from 1 through $grid-columns-5p {
|
80 | .#{$css-prefix}col-#{$name}-#{$j}p#{$grid-columns-5p} {
|
81 | $width: percentage(divide($j, $grid-columns-5p));
|
82 | flex: 0 0 $width;
|
83 | width: $width;
|
84 | max-width: $width;
|
85 | }
|
86 | }
|
87 | }
|
88 | }
|
89 | }
|
90 |
|
91 |
|
92 | @mixin make-columns-fixed() {
|
93 | @for $i from 1 through $grid-columns-fixed {
|
94 | .#{$css-prefix}col-fixed-#{$i} {
|
95 | $width: calc(#{$i} * #{$grid-col-fixed-width});
|
96 | flex: 0 0 $width;
|
97 | width: $width;
|
98 | max-width: $width;
|
99 | }
|
100 | }
|
101 | }
|
102 |
|
103 |
|
104 | @mixin make-offset() {
|
105 | @for $i from 1 through $grid-columns {
|
106 | .#{$css-prefix}col-offset-#{$i} {
|
107 | margin-left: percentage(divide($i, $grid-columns));
|
108 | }
|
109 | }
|
110 | @each $breakpoint in $breakpoints {
|
111 | $name: #{nth($breakpoint, 1)};
|
112 | @include breakpoint($name) {
|
113 | @for $j from 1 through $grid-columns {
|
114 | .#{$css-prefix}col-#{$name}-offset-#{$j} {
|
115 | margin-left: percentage(divide($j, $grid-columns));
|
116 | }
|
117 | }
|
118 | }
|
119 | }
|
120 | }
|
121 |
|
122 |
|
123 | @mixin make-offset-fixed() {
|
124 | @for $i from 1 through $grid-columns-fixed {
|
125 | .#{$css-prefix}col-offset-fixed-#{$i} {
|
126 | margin-left: calc(#{$i} * #{$grid-col-fixed-width});
|
127 | }
|
128 | }
|
129 | @each $breakpoint in $breakpoints {
|
130 | $name: #{nth($breakpoint, 1)};
|
131 | @for $j from 1 through $grid-columns-fixed {
|
132 | .#{$css-prefix}col-offset-fixed-#{$name}-#{$j} {
|
133 | margin-left: calc(#{$j} * #{$grid-col-fixed-width});
|
134 | }
|
135 | }
|
136 | }
|
137 | }
|
138 |
|
139 |
|
140 | @mixin visible-hidden-all-points() {
|
141 | .#{$css-prefix}col.#{$css-prefix}col-hidden {
|
142 | display: none;
|
143 | }
|
144 |
|
145 | @each $breakpoint in $breakpoints {
|
146 | $name: #{nth($breakpoint, 1)};
|
147 | @include breakpoint($name, 'min-max') {
|
148 | .#{$css-prefix}col.#{$css-prefix}col-#{$name}-hidden {
|
149 | display: none;
|
150 | }
|
151 | }
|
152 | }
|
153 | }
|
154 |
|
155 | @mixin visible-hidden-all-points-row() {
|
156 | .#{$css-prefix}row.#{$css-prefix}row-hidden {
|
157 | display: none;
|
158 | }
|
159 |
|
160 | @each $breakpoint in $breakpoints {
|
161 | $name: #{nth($breakpoint, 1)};
|
162 | @include breakpoint($name, 'min-max') {
|
163 | .#{$css-prefix}row.#{$css-prefix}row-#{$name}-hidden {
|
164 | display: none;
|
165 | }
|
166 | }
|
167 | }
|
168 | }
|