liquid_feedback_frontend

annotate style/mdl/grid/_grid.scss @ 1500:71f54c43d7cb

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

Impressum / About Us