| OLD | NEW |
| (Empty) | |
| 1 /** |
| 2 * Copyright 2017 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 .mdc-layout-grid { |
| 17 display: flex; |
| 18 flex-flow: row wrap; |
| 19 align-items: stretch; |
| 20 margin: 0 auto; |
| 21 box-sizing: border-box; |
| 22 padding: 8px; |
| 23 padding: calc(var(--mdc-layout-grid-margin, 16px) - var(--mdc-layout-grid-gutt
er, 16px) / 2); } |
| 24 @supports (display: grid) { |
| 25 .mdc-layout-grid { |
| 26 display: grid; |
| 27 grid-gap: 16px; |
| 28 grid-gap: var(--mdc-layout-grid-gutter, 16px); |
| 29 padding: 16px; |
| 30 padding: var(--mdc-layout-grid-margin, 16px); } |
| 31 @media (min-width: 840px) { |
| 32 .mdc-layout-grid { |
| 33 grid-template-columns: repeat(12, minmax(0, 1fr)); } } |
| 34 @media (min-width: 480px) and (max-width: 839px) { |
| 35 .mdc-layout-grid { |
| 36 grid-template-columns: repeat(8, minmax(0, 1fr)); } } |
| 37 @media (max-width: 479px) { |
| 38 .mdc-layout-grid { |
| 39 grid-template-columns: repeat(4, minmax(0, 1fr)); } } } |
| 40 |
| 41 .mdc-layout-grid__cell { |
| 42 margin: 8px; |
| 43 margin: calc(var(--mdc-layout-grid-gutter, 16px) / 2); |
| 44 box-sizing: border-box; } |
| 45 @supports (display: grid) { |
| 46 .mdc-layout-grid__cell { |
| 47 margin: 0; } } |
| 48 @media (min-width: 840px) { |
| 49 .mdc-layout-grid__cell { |
| 50 width: calc(33.33333% - 16px); |
| 51 width: calc(33.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| 52 @supports (display: grid) { |
| 53 .mdc-layout-grid__cell { |
| 54 width: auto; |
| 55 grid-column-end: span 4; } } } |
| 56 @media (min-width: 480px) and (max-width: 839px) { |
| 57 .mdc-layout-grid__cell { |
| 58 width: calc(50% - 16px); |
| 59 width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| 60 @supports (display: grid) { |
| 61 .mdc-layout-grid__cell { |
| 62 width: auto; |
| 63 grid-column-end: span 4; } } } |
| 64 @media (max-width: 479px) { |
| 65 .mdc-layout-grid__cell { |
| 66 width: calc(100% - 16px); |
| 67 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 68 @supports (display: grid) { |
| 69 .mdc-layout-grid__cell { |
| 70 width: auto; |
| 71 grid-column-end: span 4; } } } |
| 72 @media (min-width: 840px) { |
| 73 .mdc-layout-grid__cell--span-1, |
| 74 .mdc-layout-grid__cell--span-1-desktop.mdc-layout-grid__cell--span-1-desktop
{ |
| 75 width: calc(8.33333% - 16px); |
| 76 width: calc(8.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| 77 @supports (display: grid) { |
| 78 .mdc-layout-grid__cell--span-1, |
| 79 .mdc-layout-grid__cell--span-1-desktop.mdc-layout-grid__cell--span-1-des
ktop { |
| 80 width: auto; |
| 81 grid-column-end: span 1; } } |
| 82 .mdc-layout-grid__cell--span-2, |
| 83 .mdc-layout-grid__cell--span-2-desktop.mdc-layout-grid__cell--span-2-desktop
{ |
| 84 width: calc(16.66667% - 16px); |
| 85 width: calc(16.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| 86 @supports (display: grid) { |
| 87 .mdc-layout-grid__cell--span-2, |
| 88 .mdc-layout-grid__cell--span-2-desktop.mdc-layout-grid__cell--span-2-des
ktop { |
| 89 width: auto; |
| 90 grid-column-end: span 2; } } |
| 91 .mdc-layout-grid__cell--span-3, |
| 92 .mdc-layout-grid__cell--span-3-desktop.mdc-layout-grid__cell--span-3-desktop
{ |
| 93 width: calc(25% - 16px); |
| 94 width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| 95 @supports (display: grid) { |
| 96 .mdc-layout-grid__cell--span-3, |
| 97 .mdc-layout-grid__cell--span-3-desktop.mdc-layout-grid__cell--span-3-des
ktop { |
| 98 width: auto; |
| 99 grid-column-end: span 3; } } |
| 100 .mdc-layout-grid__cell--span-4, |
| 101 .mdc-layout-grid__cell--span-4-desktop.mdc-layout-grid__cell--span-4-desktop
{ |
| 102 width: calc(33.33333% - 16px); |
| 103 width: calc(33.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| 104 @supports (display: grid) { |
| 105 .mdc-layout-grid__cell--span-4, |
| 106 .mdc-layout-grid__cell--span-4-desktop.mdc-layout-grid__cell--span-4-des
ktop { |
| 107 width: auto; |
| 108 grid-column-end: span 4; } } |
| 109 .mdc-layout-grid__cell--span-5, |
| 110 .mdc-layout-grid__cell--span-5-desktop.mdc-layout-grid__cell--span-5-desktop
{ |
| 111 width: calc(41.66667% - 16px); |
| 112 width: calc(41.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| 113 @supports (display: grid) { |
| 114 .mdc-layout-grid__cell--span-5, |
| 115 .mdc-layout-grid__cell--span-5-desktop.mdc-layout-grid__cell--span-5-des
ktop { |
| 116 width: auto; |
| 117 grid-column-end: span 5; } } |
| 118 .mdc-layout-grid__cell--span-6, |
| 119 .mdc-layout-grid__cell--span-6-desktop.mdc-layout-grid__cell--span-6-desktop
{ |
| 120 width: calc(50% - 16px); |
| 121 width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| 122 @supports (display: grid) { |
| 123 .mdc-layout-grid__cell--span-6, |
| 124 .mdc-layout-grid__cell--span-6-desktop.mdc-layout-grid__cell--span-6-des
ktop { |
| 125 width: auto; |
| 126 grid-column-end: span 6; } } |
| 127 .mdc-layout-grid__cell--span-7, |
| 128 .mdc-layout-grid__cell--span-7-desktop.mdc-layout-grid__cell--span-7-desktop
{ |
| 129 width: calc(58.33333% - 16px); |
| 130 width: calc(58.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| 131 @supports (display: grid) { |
| 132 .mdc-layout-grid__cell--span-7, |
| 133 .mdc-layout-grid__cell--span-7-desktop.mdc-layout-grid__cell--span-7-des
ktop { |
| 134 width: auto; |
| 135 grid-column-end: span 7; } } |
| 136 .mdc-layout-grid__cell--span-8, |
| 137 .mdc-layout-grid__cell--span-8-desktop.mdc-layout-grid__cell--span-8-desktop
{ |
| 138 width: calc(66.66667% - 16px); |
| 139 width: calc(66.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| 140 @supports (display: grid) { |
| 141 .mdc-layout-grid__cell--span-8, |
| 142 .mdc-layout-grid__cell--span-8-desktop.mdc-layout-grid__cell--span-8-des
ktop { |
| 143 width: auto; |
| 144 grid-column-end: span 8; } } |
| 145 .mdc-layout-grid__cell--span-9, |
| 146 .mdc-layout-grid__cell--span-9-desktop.mdc-layout-grid__cell--span-9-desktop
{ |
| 147 width: calc(75% - 16px); |
| 148 width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| 149 @supports (display: grid) { |
| 150 .mdc-layout-grid__cell--span-9, |
| 151 .mdc-layout-grid__cell--span-9-desktop.mdc-layout-grid__cell--span-9-des
ktop { |
| 152 width: auto; |
| 153 grid-column-end: span 9; } } |
| 154 .mdc-layout-grid__cell--span-10, |
| 155 .mdc-layout-grid__cell--span-10-desktop.mdc-layout-grid__cell--span-10-deskt
op { |
| 156 width: calc(83.33333% - 16px); |
| 157 width: calc(83.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| 158 @supports (display: grid) { |
| 159 .mdc-layout-grid__cell--span-10, |
| 160 .mdc-layout-grid__cell--span-10-desktop.mdc-layout-grid__cell--span-10-d
esktop { |
| 161 width: auto; |
| 162 grid-column-end: span 10; } } |
| 163 .mdc-layout-grid__cell--span-11, |
| 164 .mdc-layout-grid__cell--span-11-desktop.mdc-layout-grid__cell--span-11-deskt
op { |
| 165 width: calc(91.66667% - 16px); |
| 166 width: calc(91.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| 167 @supports (display: grid) { |
| 168 .mdc-layout-grid__cell--span-11, |
| 169 .mdc-layout-grid__cell--span-11-desktop.mdc-layout-grid__cell--span-11-d
esktop { |
| 170 width: auto; |
| 171 grid-column-end: span 11; } } |
| 172 .mdc-layout-grid__cell--span-12, |
| 173 .mdc-layout-grid__cell--span-12-desktop.mdc-layout-grid__cell--span-12-deskt
op { |
| 174 width: calc(100% - 16px); |
| 175 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 176 @supports (display: grid) { |
| 177 .mdc-layout-grid__cell--span-12, |
| 178 .mdc-layout-grid__cell--span-12-desktop.mdc-layout-grid__cell--span-12-d
esktop { |
| 179 width: auto; |
| 180 grid-column-end: span 12; } } } |
| 181 @media (min-width: 480px) and (max-width: 839px) { |
| 182 .mdc-layout-grid__cell--span-1, |
| 183 .mdc-layout-grid__cell--span-1-tablet.mdc-layout-grid__cell--span-1-tablet { |
| 184 width: calc(12.5% - 16px); |
| 185 width: calc(12.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| 186 @supports (display: grid) { |
| 187 .mdc-layout-grid__cell--span-1, |
| 188 .mdc-layout-grid__cell--span-1-tablet.mdc-layout-grid__cell--span-1-tabl
et { |
| 189 width: auto; |
| 190 grid-column-end: span 1; } } |
| 191 .mdc-layout-grid__cell--span-2, |
| 192 .mdc-layout-grid__cell--span-2-tablet.mdc-layout-grid__cell--span-2-tablet { |
| 193 width: calc(25% - 16px); |
| 194 width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| 195 @supports (display: grid) { |
| 196 .mdc-layout-grid__cell--span-2, |
| 197 .mdc-layout-grid__cell--span-2-tablet.mdc-layout-grid__cell--span-2-tabl
et { |
| 198 width: auto; |
| 199 grid-column-end: span 2; } } |
| 200 .mdc-layout-grid__cell--span-3, |
| 201 .mdc-layout-grid__cell--span-3-tablet.mdc-layout-grid__cell--span-3-tablet { |
| 202 width: calc(37.5% - 16px); |
| 203 width: calc(37.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| 204 @supports (display: grid) { |
| 205 .mdc-layout-grid__cell--span-3, |
| 206 .mdc-layout-grid__cell--span-3-tablet.mdc-layout-grid__cell--span-3-tabl
et { |
| 207 width: auto; |
| 208 grid-column-end: span 3; } } |
| 209 .mdc-layout-grid__cell--span-4, |
| 210 .mdc-layout-grid__cell--span-4-tablet.mdc-layout-grid__cell--span-4-tablet { |
| 211 width: calc(50% - 16px); |
| 212 width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| 213 @supports (display: grid) { |
| 214 .mdc-layout-grid__cell--span-4, |
| 215 .mdc-layout-grid__cell--span-4-tablet.mdc-layout-grid__cell--span-4-tabl
et { |
| 216 width: auto; |
| 217 grid-column-end: span 4; } } |
| 218 .mdc-layout-grid__cell--span-5, |
| 219 .mdc-layout-grid__cell--span-5-tablet.mdc-layout-grid__cell--span-5-tablet { |
| 220 width: calc(62.5% - 16px); |
| 221 width: calc(62.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| 222 @supports (display: grid) { |
| 223 .mdc-layout-grid__cell--span-5, |
| 224 .mdc-layout-grid__cell--span-5-tablet.mdc-layout-grid__cell--span-5-tabl
et { |
| 225 width: auto; |
| 226 grid-column-end: span 5; } } |
| 227 .mdc-layout-grid__cell--span-6, |
| 228 .mdc-layout-grid__cell--span-6-tablet.mdc-layout-grid__cell--span-6-tablet { |
| 229 width: calc(75% - 16px); |
| 230 width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| 231 @supports (display: grid) { |
| 232 .mdc-layout-grid__cell--span-6, |
| 233 .mdc-layout-grid__cell--span-6-tablet.mdc-layout-grid__cell--span-6-tabl
et { |
| 234 width: auto; |
| 235 grid-column-end: span 6; } } |
| 236 .mdc-layout-grid__cell--span-7, |
| 237 .mdc-layout-grid__cell--span-7-tablet.mdc-layout-grid__cell--span-7-tablet { |
| 238 width: calc(87.5% - 16px); |
| 239 width: calc(87.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| 240 @supports (display: grid) { |
| 241 .mdc-layout-grid__cell--span-7, |
| 242 .mdc-layout-grid__cell--span-7-tablet.mdc-layout-grid__cell--span-7-tabl
et { |
| 243 width: auto; |
| 244 grid-column-end: span 7; } } |
| 245 .mdc-layout-grid__cell--span-8, |
| 246 .mdc-layout-grid__cell--span-8-tablet.mdc-layout-grid__cell--span-8-tablet { |
| 247 width: calc(100% - 16px); |
| 248 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 249 @supports (display: grid) { |
| 250 .mdc-layout-grid__cell--span-8, |
| 251 .mdc-layout-grid__cell--span-8-tablet.mdc-layout-grid__cell--span-8-tabl
et { |
| 252 width: auto; |
| 253 grid-column-end: span 8; } } |
| 254 .mdc-layout-grid__cell--span-9, |
| 255 .mdc-layout-grid__cell--span-9-tablet.mdc-layout-grid__cell--span-9-tablet { |
| 256 width: calc(100% - 16px); |
| 257 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 258 @supports (display: grid) { |
| 259 .mdc-layout-grid__cell--span-9, |
| 260 .mdc-layout-grid__cell--span-9-tablet.mdc-layout-grid__cell--span-9-tabl
et { |
| 261 width: auto; |
| 262 grid-column-end: span 8; } } |
| 263 .mdc-layout-grid__cell--span-10, |
| 264 .mdc-layout-grid__cell--span-10-tablet.mdc-layout-grid__cell--span-10-tablet
{ |
| 265 width: calc(100% - 16px); |
| 266 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 267 @supports (display: grid) { |
| 268 .mdc-layout-grid__cell--span-10, |
| 269 .mdc-layout-grid__cell--span-10-tablet.mdc-layout-grid__cell--span-10-ta
blet { |
| 270 width: auto; |
| 271 grid-column-end: span 8; } } |
| 272 .mdc-layout-grid__cell--span-11, |
| 273 .mdc-layout-grid__cell--span-11-tablet.mdc-layout-grid__cell--span-11-tablet
{ |
| 274 width: calc(100% - 16px); |
| 275 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 276 @supports (display: grid) { |
| 277 .mdc-layout-grid__cell--span-11, |
| 278 .mdc-layout-grid__cell--span-11-tablet.mdc-layout-grid__cell--span-11-ta
blet { |
| 279 width: auto; |
| 280 grid-column-end: span 8; } } |
| 281 .mdc-layout-grid__cell--span-12, |
| 282 .mdc-layout-grid__cell--span-12-tablet.mdc-layout-grid__cell--span-12-tablet
{ |
| 283 width: calc(100% - 16px); |
| 284 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 285 @supports (display: grid) { |
| 286 .mdc-layout-grid__cell--span-12, |
| 287 .mdc-layout-grid__cell--span-12-tablet.mdc-layout-grid__cell--span-12-ta
blet { |
| 288 width: auto; |
| 289 grid-column-end: span 8; } } } |
| 290 @media (max-width: 479px) { |
| 291 .mdc-layout-grid__cell--span-1, |
| 292 .mdc-layout-grid__cell--span-1-phone.mdc-layout-grid__cell--span-1-phone { |
| 293 width: calc(25% - 16px); |
| 294 width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| 295 @supports (display: grid) { |
| 296 .mdc-layout-grid__cell--span-1, |
| 297 .mdc-layout-grid__cell--span-1-phone.mdc-layout-grid__cell--span-1-phone
{ |
| 298 width: auto; |
| 299 grid-column-end: span 1; } } |
| 300 .mdc-layout-grid__cell--span-2, |
| 301 .mdc-layout-grid__cell--span-2-phone.mdc-layout-grid__cell--span-2-phone { |
| 302 width: calc(50% - 16px); |
| 303 width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| 304 @supports (display: grid) { |
| 305 .mdc-layout-grid__cell--span-2, |
| 306 .mdc-layout-grid__cell--span-2-phone.mdc-layout-grid__cell--span-2-phone
{ |
| 307 width: auto; |
| 308 grid-column-end: span 2; } } |
| 309 .mdc-layout-grid__cell--span-3, |
| 310 .mdc-layout-grid__cell--span-3-phone.mdc-layout-grid__cell--span-3-phone { |
| 311 width: calc(75% - 16px); |
| 312 width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| 313 @supports (display: grid) { |
| 314 .mdc-layout-grid__cell--span-3, |
| 315 .mdc-layout-grid__cell--span-3-phone.mdc-layout-grid__cell--span-3-phone
{ |
| 316 width: auto; |
| 317 grid-column-end: span 3; } } |
| 318 .mdc-layout-grid__cell--span-4, |
| 319 .mdc-layout-grid__cell--span-4-phone.mdc-layout-grid__cell--span-4-phone { |
| 320 width: calc(100% - 16px); |
| 321 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 322 @supports (display: grid) { |
| 323 .mdc-layout-grid__cell--span-4, |
| 324 .mdc-layout-grid__cell--span-4-phone.mdc-layout-grid__cell--span-4-phone
{ |
| 325 width: auto; |
| 326 grid-column-end: span 4; } } |
| 327 .mdc-layout-grid__cell--span-5, |
| 328 .mdc-layout-grid__cell--span-5-phone.mdc-layout-grid__cell--span-5-phone { |
| 329 width: calc(100% - 16px); |
| 330 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 331 @supports (display: grid) { |
| 332 .mdc-layout-grid__cell--span-5, |
| 333 .mdc-layout-grid__cell--span-5-phone.mdc-layout-grid__cell--span-5-phone
{ |
| 334 width: auto; |
| 335 grid-column-end: span 4; } } |
| 336 .mdc-layout-grid__cell--span-6, |
| 337 .mdc-layout-grid__cell--span-6-phone.mdc-layout-grid__cell--span-6-phone { |
| 338 width: calc(100% - 16px); |
| 339 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 340 @supports (display: grid) { |
| 341 .mdc-layout-grid__cell--span-6, |
| 342 .mdc-layout-grid__cell--span-6-phone.mdc-layout-grid__cell--span-6-phone
{ |
| 343 width: auto; |
| 344 grid-column-end: span 4; } } |
| 345 .mdc-layout-grid__cell--span-7, |
| 346 .mdc-layout-grid__cell--span-7-phone.mdc-layout-grid__cell--span-7-phone { |
| 347 width: calc(100% - 16px); |
| 348 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 349 @supports (display: grid) { |
| 350 .mdc-layout-grid__cell--span-7, |
| 351 .mdc-layout-grid__cell--span-7-phone.mdc-layout-grid__cell--span-7-phone
{ |
| 352 width: auto; |
| 353 grid-column-end: span 4; } } |
| 354 .mdc-layout-grid__cell--span-8, |
| 355 .mdc-layout-grid__cell--span-8-phone.mdc-layout-grid__cell--span-8-phone { |
| 356 width: calc(100% - 16px); |
| 357 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 358 @supports (display: grid) { |
| 359 .mdc-layout-grid__cell--span-8, |
| 360 .mdc-layout-grid__cell--span-8-phone.mdc-layout-grid__cell--span-8-phone
{ |
| 361 width: auto; |
| 362 grid-column-end: span 4; } } |
| 363 .mdc-layout-grid__cell--span-9, |
| 364 .mdc-layout-grid__cell--span-9-phone.mdc-layout-grid__cell--span-9-phone { |
| 365 width: calc(100% - 16px); |
| 366 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 367 @supports (display: grid) { |
| 368 .mdc-layout-grid__cell--span-9, |
| 369 .mdc-layout-grid__cell--span-9-phone.mdc-layout-grid__cell--span-9-phone
{ |
| 370 width: auto; |
| 371 grid-column-end: span 4; } } |
| 372 .mdc-layout-grid__cell--span-10, |
| 373 .mdc-layout-grid__cell--span-10-phone.mdc-layout-grid__cell--span-10-phone { |
| 374 width: calc(100% - 16px); |
| 375 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 376 @supports (display: grid) { |
| 377 .mdc-layout-grid__cell--span-10, |
| 378 .mdc-layout-grid__cell--span-10-phone.mdc-layout-grid__cell--span-10-pho
ne { |
| 379 width: auto; |
| 380 grid-column-end: span 4; } } |
| 381 .mdc-layout-grid__cell--span-11, |
| 382 .mdc-layout-grid__cell--span-11-phone.mdc-layout-grid__cell--span-11-phone { |
| 383 width: calc(100% - 16px); |
| 384 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 385 @supports (display: grid) { |
| 386 .mdc-layout-grid__cell--span-11, |
| 387 .mdc-layout-grid__cell--span-11-phone.mdc-layout-grid__cell--span-11-pho
ne { |
| 388 width: auto; |
| 389 grid-column-end: span 4; } } |
| 390 .mdc-layout-grid__cell--span-12, |
| 391 .mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-phone { |
| 392 width: calc(100% - 16px); |
| 393 width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| 394 @supports (display: grid) { |
| 395 .mdc-layout-grid__cell--span-12, |
| 396 .mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-pho
ne { |
| 397 width: auto; |
| 398 grid-column-end: span 4; } } } |
| 399 .mdc-layout-grid__cell--order-1 { |
| 400 order: 1; } |
| 401 .mdc-layout-grid__cell--order-2 { |
| 402 order: 2; } |
| 403 .mdc-layout-grid__cell--order-3 { |
| 404 order: 3; } |
| 405 .mdc-layout-grid__cell--order-4 { |
| 406 order: 4; } |
| 407 .mdc-layout-grid__cell--order-5 { |
| 408 order: 5; } |
| 409 .mdc-layout-grid__cell--order-6 { |
| 410 order: 6; } |
| 411 .mdc-layout-grid__cell--order-7 { |
| 412 order: 7; } |
| 413 .mdc-layout-grid__cell--order-8 { |
| 414 order: 8; } |
| 415 .mdc-layout-grid__cell--order-9 { |
| 416 order: 9; } |
| 417 .mdc-layout-grid__cell--order-10 { |
| 418 order: 10; } |
| 419 .mdc-layout-grid__cell--order-11 { |
| 420 order: 11; } |
| 421 .mdc-layout-grid__cell--order-12 { |
| 422 order: 12; } |
| 423 .mdc-layout-grid__cell--align-top { |
| 424 align-self: flex-start; } |
| 425 @supports (display: grid) { |
| 426 .mdc-layout-grid__cell--align-top { |
| 427 align-self: start; } } |
| 428 .mdc-layout-grid__cell--align-middle { |
| 429 align-self: center; } |
| 430 .mdc-layout-grid__cell--align-bottom { |
| 431 align-self: flex-end; } |
| 432 @supports (display: grid) { |
| 433 .mdc-layout-grid__cell--align-bottom { |
| 434 align-self: end; } } |
| OLD | NEW |