liquid_feedback_frontend
view style/mdl/grid/_grid.scss @ 1789:87878d24d7a8
Removed debug code
| author | bsw |
|---|---|
| date | Wed Oct 20 15:47:25 2021 +0200 (2021-10-20) |
| parents | 32cc544d5a5b |
| children |
line source
1 /**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
17 /*
18 * NOTE: Some rules here are applied using duplicate selectors.
19 * This is on purpose to increase their specificity when applied.
20 * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
21 */
23 @import "../variables";
25 .mdl-grid {
26 display: flex;
27 flex-flow: row wrap;
28 margin: 0 auto 0 auto;
29 align-items: stretch;
31 &.mdl-grid--no-spacing {
32 padding: 0;
33 }
34 }
36 .mdl-cell {
37 box-sizing: border-box;
38 }
41 .mdl-cell--top {
42 align-self: flex-start;
43 }
45 .mdl-cell--middle {
46 align-self: center;
47 }
49 .mdl-cell--bottom {
50 align-self: flex-end;
51 }
53 .mdl-cell--stretch {
54 align-self: stretch;
55 }
57 .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
58 margin: 0;
59 }
61 // Define order override classes.
62 @for $i from 1 through $grid-max-columns {
63 .mdl-cell--order-#{$i} {
64 order: $i;
65 }
66 }
69 // Mixins for width calculation.
70 @mixin partial-size($size, $columns, $gutter) {
71 width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
73 .mdl-grid--no-spacing > & {
74 width: #{(($size / $columns) * 100)+"%"};
75 }
76 }
78 @mixin full-size($gutter) {
79 @include partial-size(1, 1, $gutter);
80 }
82 @mixin offset-size($size, $columns, $gutter) {
83 margin-left: calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
85 .mdl-grid.mdl-grid--no-spacing > & {
86 margin-left: #{(($size / $columns) * 100)+"%"};
87 }
88 }
92 ////////// Phone //////////
94 @media (max-width: $grid-tablet-breakpoint - 1) {
95 .mdl-grid {
96 padding: $grid-phone-margin - ($grid-phone-gutter / 2);
97 }
99 .mdl-cell {
100 margin: $grid-phone-gutter / 2;
101 @include partial-size($grid-cell-default-columns, $grid-phone-columns,
102 $grid-phone-gutter);
103 }
105 .mdl-cell--hide-phone {
106 display: none !important;
107 }
109 // Define order override classes.
110 @for $i from 1 through $grid-max-columns {
111 .mdl-cell--order-#{$i}-phone.mdl-cell--order-#{$i}-phone {
112 order: $i;
113 }
114 }
116 // Define partial sizes for columnNumber < totalColumns.
117 @for $i from 1 through ($grid-phone-columns - 1) {
118 .mdl-cell--#{$i}-col,
119 .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
120 @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
121 }
122 }
124 // Define 100% for everything else.
125 @for $i from $grid-phone-columns through $grid-desktop-columns {
126 .mdl-cell--#{$i}-col,
127 .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
128 @include full-size($grid-phone-gutter);
129 }
130 }
132 // Define valid phone offsets.
133 @for $i from 1 through ($grid-phone-columns - 1) {
134 .mdl-cell--#{$i}-offset,
135 .mdl-cell--#{$i}-offset-phone.mdl-cell--#{$i}-offset-phone {
136 @include offset-size($i, $grid-phone-columns, $grid-phone-gutter);
137 }
138 }
139 }
142 ////////// Tablet //////////
144 @media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
145 .mdl-grid {
146 padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
147 }
149 .mdl-cell {
150 margin: $grid-tablet-gutter / 2;
151 @include partial-size($grid-cell-default-columns, $grid-tablet-columns,
152 $grid-tablet-gutter);
153 }
155 .mdl-cell--hide-tablet {
156 display: none !important;
157 }
159 // Define order override classes.
160 @for $i from 1 through $grid-max-columns {
161 .mdl-cell--order-#{$i}-tablet.mdl-cell--order-#{$i}-tablet {
162 order: $i;
163 }
164 }
166 // Define partial sizes for columnNumber < totalColumns.
167 @for $i from 1 through ($grid-tablet-columns - 1) {
168 .mdl-cell--#{$i}-col,
169 .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
170 @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
171 }
172 }
174 // Define 100% for everything else.
175 @for $i from $grid-tablet-columns through $grid-desktop-columns {
176 .mdl-cell--#{$i}-col,
177 .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
178 @include full-size($grid-tablet-gutter);
179 }
180 }
182 // Define valid tablet offsets.
183 @for $i from 1 through ($grid-tablet-columns - 1) {
184 .mdl-cell--#{$i}-offset,
185 .mdl-cell--#{$i}-offset-tablet.mdl-cell--#{$i}-offset-tablet {
186 @include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);
187 }
188 }
189 }
192 ////////// Desktop //////////
194 @media (min-width: $grid-desktop-breakpoint) {
195 .mdl-grid {
196 padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
197 }
199 .mdl-cell {
200 margin: $grid-desktop-gutter / 2;
201 @include partial-size($grid-cell-default-columns, $grid-desktop-columns,
202 $grid-desktop-gutter);
203 }
205 .mdl-cell--hide-desktop {
206 display: none !important;
207 }
209 // Define order override classes.
210 @for $i from 1 through $grid-max-columns {
211 .mdl-cell--order-#{$i}-desktop.mdl-cell--order-#{$i}-desktop {
212 order: $i;
213 }
214 }
216 // Define partial sizes for all numbers of columns.
217 @for $i from 1 through $grid-desktop-columns {
218 .mdl-cell--#{$i}-col,
219 .mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
220 @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
221 }
222 }
224 // Define valid desktop offsets.
225 @for $i from 1 through ($grid-desktop-columns - 1) {
226 .mdl-cell--#{$i}-offset,
227 .mdl-cell--#{$i}-offset-desktop.mdl-cell--#{$i}-offset-desktop {
228 @include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);
229 }
230 }
231 }