| /* |
| * Copyright (c) 2012 The Chromium OS Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| /** |
| * Utility css to make box layout easier to specify. |
| * |
| * Treats <x-hbox>...</x-hbox> and <x-vbox>...</x-vbox> as horizontal and |
| * vertical boxes. Also allows <sometag x-vbox> attributes, for times when |
| * some specific tag behavior is important. |
| */ |
| |
| *[x-box] { |
| display: flex; |
| flex: 0 0 auto; |
| } |
| |
| x-vbox, *[x-vbox] { |
| display: flex; |
| flex-direction: column; |
| flex: 0 0 auto; |
| } |
| |
| x-hbox, *[x-hbox] { |
| display: flex; |
| flex-direction: row; |
| flex: 0 0 auto; |
| } |
| |
| *[x-flex="1"] { flex: 1 0% } |
| *[x-flex="2"] { flex: 2 0% } |
| *[x-flex="3"] { flex: 3 0% } |
| *[x-flex="4"] { flex: 4 0% } |
| |
| *[x-pack="center"] { justify-content: center } |
| *[x-pack="start"] { justify-content: flex-start } |
| *[x-pack="end"] { justify-content: flex-end } |
| |
| *[x-align="center"] { align-items: center } |
| *[x-align="baseline"] { align-items: baseline } |
