src/third_party/polymer/components/core-layout/core-layout.css

   1 /*
   2 Copyright 2013 The Polymer Authors. All rights reserved.
   3 Use of this source code is governed by a BSD-style
   4 license that can be found in the LICENSE file.
   5 */
   6
   7 .core-h, .core-v {
   8   display: -webkit-box !important;
   9   display: -ms-flexbox !important;
  10   display: -moz-flex !important;
  11   display: -webkit-flex !important;
  12   display: flex !important;
  13 }
  14
  15 .core-h {
  16   -webkit-box-orient: horizontal;
  17   -ms-flex-direction: row;
  18   -moz-flex-direction: row;
  19   -webkit-flex-direction: row;
  20   flex-direction: row;
  21 }
  22
  23 .core-h.core-reverse {
  24   -webkit-box-direction: reverse;
  25   -ms-flex-direction: row-reverse;
  26   -moz-flex-direction: row-reverse;
  27   -webkit-flex-direction: row-reverse;
  28   flex-direction: row-reverse;
  29 }
  30
  31 .core-v {
  32   -webkit-box-orient: vertical;
  33   -ms-flex-direction: column;
  34   -moz-flex-direction: column;
  35   -webkit-flex-direction: column;
  36   flex-direction: column;
  37 }
  38
  39 .core-v.core-reverse {
  40   -webkit-box-direction: reverse;
  41   -ms-flex-direction: column-reverse;
  42   -moz-flex-direction: column-reverse;
  43   -webkit-flex-direction: column-reverse;
  44   flex-direction: column-reverse;
  45 }
  46
  47 .core-relative {
  48   position: relative;
  49 }
  50
  51 .core-fit {
  52   position: absolute;
  53   top: 0;
  54   left: 0;
  55   height: 100%;
  56   width: 100%;
  57 }
  58
  59 body.core-fit {
  60   margin: 0;
  61 }
  62
  63 .core-flex, [core-flex] {
  64   -webkit-box-flex: 1;
  65   -ms-flex: 1;
  66   -moz-flex: 1;
  67   -webkit-flex: 1;
  68   flex: 1;
  69 }
  70
  71 .core-flex-auto, [core-flex-auto] {
  72   -webkit-box-flex: 1;
  73   -ms-flex: 1 1 auto;
  74   -moz-flex: 1 1 auto;
  75   -webkit-flex: 1 1 auto;
  76   flex: 1 1 auto;
  77 }
  78
  79 .core-flex-none, [core-flex-none] {
  80   -webkit-box-flex: none;
  81   -ms-flex: none;
  82   -moz-flex: none;
  83   -webkit-flex: none;
  84   flex: none;
  85 }
  86
  87 .core-flex1, [core-flex=1] {
  88   -webkit-box-flex: 1;
  89   -ms-flex: 1;
  90   -moz-flex: 1;
  91   -webkit-flex: 1;
  92   flex: 1;
  93 }
  94
  95 .core-flex2, [core-flex=2] {
  96   -webkit-box-flex: 2;
  97   -ms-flex: 2;
  98   -moz-flex: 2;
  99   -webkit-flex: 2;
 100   flex: 2;
 101 }
 102
 103 .core-flex3, [core-flex=3] {
 104   -webkit-box-flex: 3;
 105   -ms-flex: 3;
 106   -moz-flex: 3;
 107   -webkit-flex: 3;
 108   flex: 3;
 109 }
 110
 111 /* distributed elements */
 112 ::content > .core-flex, ::content > [core-flex] {
 113   -webkit-box-flex: 1;
 114   -ms-flex: 1;
 115   -moz-flex: 1;
 116   -webkit-flex: 1;
 117   flex: 1;
 118 }
 119
 120 ::content > .core-flex-auto, ::content > [core-flex-auto] {
 121   -webkit-box-flex: 1;
 122   -ms-flex: 1 1 auto;
 123   -moz-flex: 1 1 auto;
 124   -webkit-flex: 1 1 auto;
 125   flex: 1 1 auto;
 126 }
 127
 128 ::content > .core-flex-none, ::content > [core-flex-none] {
 129   -webkit-box-flex: none;
 130   -ms-flex: none;
 131   -moz-flex: none;
 132   -webkit-flex: none;
 133   flex: none;
 134 }
 135
 136 ::content > .core-flex1, ::content > [core-flex=1] {
 137   -webkit-box-flex: 1;
 138   -ms-flex: 1;
 139   -moz-flex: 1;
 140   -webkit-flex: 1;
 141   flex: 1;
 142 }
 143
 144 ::content > .core-flex2, ::content > [core-flex=2] {
 145   -webkit-box-flex: 2;
 146   -ms-flex: 2;
 147   -moz-flex: 2;
 148   -webkit-flex: 2;
 149   flex: 2;
 150 }
 151
 152 ::content > .core-flex3, ::content > [core-flex=3] {
 153   -webkit-box-flex: 3;
 154   -ms-flex: 3;
 155   -moz-flex: 3;
 156   -webkit-flex: 3;
 157   flex: 3;
 158 }
 159
 160 /* alignment in main axis */
 161 .core-justify-start {
 162   -webkit-box-pack: start;
 163   -ms-flex-pack: start;
 164   -moz-justify-content: flex-start;
 165   -webkit-justify-content: flex-start;
 166   justify-content: flex-start;
 167 }
 168
 169 .core-justify-center {
 170   -webkit-box-pack: center;
 171   -ms-flex-pack: center;
 172   -moz-justify-content: center;
 173   -webkit-justify-content: center;
 174   justify-content: center;
 175 }
 176
 177 .core-justify-end {
 178   -webkit-box-pack: end;
 179   -ms-flex-pack: end;
 180   -moz-justify-content: flex-end;
 181   -webkit-justify-content: flex-end;
 182   justify-content: flex-end;
 183 }
 184
 185 .core-justify-between {
 186   -webkit-box-pack: justify;
 187   -ms-flex-pack: justify;
 188   -moz-justify-content: space-between;
 189   -webkit-justify-content: space-between;
 190   justify-content: space-between;
 191 }
 192
 193 /* alignment in cross axis */
 194 .core-align-start {
 195   -webkit-box-align: start;
 196   -ms-flex-align: start;
 197   -moz-align-items: flex-start;
 198   -webkit-align-items: flex-start;
 199   align-items: flex-start;
 200 }
 201
 202 .core-align-center {
 203   -webkit-box-align: center;
 204   -ms-flex-align: center;
 205   -moz-align-items: center;
 206   -webkit-align-items: center;
 207   align-items: center;
 208 }
 209
 210 .core-align-end {
 211   -webkit-box-align: end;
 212   -ms-flex-align: end;
 213   -moz-align-items: flex-end;
 214   -webkit-align-items: flex-end;
 215   align-items: flex-end;
 216 }