third_party/ot-br-posix/repo/third_party/mdl/repo/src/grid/_grid.scss

   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  */
  16
  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 */
  22
  23 @import "../variables";
  24
  25 .mdl-grid {
  26   display: flex;
  27   flex-flow: row wrap;
  28   margin: 0 auto 0 auto;
  29   align-items: stretch;
  30
  31   &.mdl-grid--no-spacing {
  32     padding: 0;
  33   }
  34 }
  35
  36 .mdl-cell {
  37   box-sizing: border-box;
  38 }
  39
  40
  41 .mdl-cell--top {
  42   align-self: flex-start;
  43 }
  44
  45 .mdl-cell--middle {
  46   align-self: center;
  47 }
  48
  49 .mdl-cell--bottom {
  50   align-self: flex-end;
  51 }
  52
  53 .mdl-cell--stretch {
  54   align-self: stretch;
  55 }
  56
  57 .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
  58   margin: 0;
  59 }
  60
  61 // Define order override classes.
  62 @for $i from 1 through $grid-max-columns {
  63   .mdl-cell--order-#{$i} {
  64     order: $i;
  65   }
  66 }
  67
  68
  69 // Mixins for width calculation.
  70 @mixin partial-size($size, $columns, $gutter) {
  71   width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
  72
  73   .mdl-grid--no-spacing > & {
  74     width: #{(($size / $columns) * 100)+"%"};
  75   }
  76 }
  77
  78 @mixin full-size($gutter) {
  79   @include partial-size(1, 1, $gutter);
  80 }
  81
  82 @mixin offset-size($size, $columns, $gutter) {
  83   margin-left: calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
  84
  85   .mdl-grid.mdl-grid--no-spacing > & {
  86     margin-left: #{(($size / $columns) * 100)+"%"};
  87   }
  88 }
  89
  90
  91
  92 ////////// Phone //////////
  93
  94 @media (max-width: $grid-tablet-breakpoint - 1) {
  95   .mdl-grid {
  96     padding: $grid-phone-margin - ($grid-phone-gutter / 2);
  97   }
  98
  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   }
 104
 105   .mdl-cell--hide-phone {
 106     display: none !important;
 107   }
 108
 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   }
 115
 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   }
 123
 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   }
 131
 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 }
 140
 141
 142 ////////// Tablet //////////
 143
 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   }
 148
 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   }
 154
 155   .mdl-cell--hide-tablet {
 156     display: none !important;
 157   }
 158
 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   }
 165
 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   }
 173
 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   }
 181
 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 }
 190
 191
 192 ////////// Desktop //////////
 193
 194 @media (min-width: $grid-desktop-breakpoint) {
 195   .mdl-grid {
 196     padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
 197   }
 198
 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   }
 204
 205   .mdl-cell--hide-desktop {
 206     display: none !important;
 207   }
 208
 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   }
 215
 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   }
 223
 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 }