| /* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ |
| /* for details. All rights reserved. Use of this source code is governed by a */ |
| /* BSD-style license that can be found in the LICENSE file. */ |
| |
| /* CSS styes needed by reusable views */ |
| |
| /* TODO(mattsh), need to figure out what we're doing here. |
| In particular: |
| 1. How to allow apps to include this CSS without messing their own styles |
| (possibly we should use a 'appstack framework' prefix or something to |
| keep from polluting the CSS namespace). |
| 2. Need to figure out how to make the appstack widgets and views themeable, so |
| possibly this file needs to be generated by a theme builder designer tool. |
| */ |
| |
| .hbox, |
| .vbox { |
| display: -moz-box; |
| display: -webkit-box; |
| -moz-box-align: stretch; |
| -webkit-box-align: stretch; |
| overflow: hidden; |
| } |
| |
| .vbox { |
| -moz-box-orient: vertical; |
| -webkit-box-orient: vertical; |
| } |
| |
| .hbox { |
| -moz-box-orient: horizontal; |
| -webkit-box-orient: horizontal; |
| } |
| |
| .center { |
| -moz-box-pack: center; |
| -webkit-box-pack: center; |
| } |
| |
| .paged-content, |
| .fullpage { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| overflow: hidden; |
| } |
| |
| .flex-item { |
| -webkit-box-flex: 1; |
| -moz-box-flex: 1; |
| box-flex: 1; |
| } |
| |
| .flex { |
| -moz-box-flex: 1; |
| -webkit-box-flex: 1; |
| } |
| |
| .conveyor-view, |
| .conveyor-item { |
| overflow: hidden; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| } |
| |
| /* |
| TODO(jacobr): can we get translate3d working in paged-column and |
| conveyor-view without setting "overflow: visible"? |
| */ |
| .conveyor-view-container { |
| overflow: visible; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .paged-column-container { |
| overflow: visible; |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| } |
| |
| .paged-column { |
| overflow: hidden; |
| } |
| |
| .page-number-left, |
| .page-number-label, |
| .page-number-right { |
| display: inline-block; |
| } |
| .page-number-left, .page-number-right { |
| cursor: pointer; |
| } |
| |
| /* Slider menu (a menu bar with a sliding triangle underneath it) */ |
| |
| /* one menu item text */ |
| .sm-item { |
| font-size: 16px; |
| text-transform: uppercase; |
| text-align: center; |
| color: #c8c8c8; |
| padding-left: 20px; |
| padding-right: 20px; |
| } |
| |
| /* box around all the menu items */ |
| .sm-item-box { |
| display: -moz-box; |
| display: -webkit-box; |
| padding-top: 5px; |
| -moz-box-orient: horizontal; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: center; |
| } |
| |
| /* menu root element */ |
| .sm-root { |
| background-color: #191919; |
| position: relative; |
| z-index: 1; |
| height: 32px; |
| border-bottom: 3px solid #73c6f5; |
| /* TODO(jacobr): we should really have a two toned border: |
| border-bottom: 1px solid #71b0d3; */ |
| |
| -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, .6); |
| -webkit-transition-property: -webkit-transform; |
| -webkit-transition-duration: 0.4s; |
| } |
| |
| .sm-root.hidden { |
| -webkit-transform: translate3d(0px, -46px, 0px); |
| } |
| |
| /* selected menu item text */ |
| .sm-item.sel { |
| color: #74c6f5; |
| } |
| |
| /* box around the sliding triangle */ |
| .sm-slider-box { |
| padding-bottom: 0; |
| display: -moz-box; |
| display: -webkit-box; |
| -moz-box-orient: horizontal; |
| -webkit-box-orient: horizontal; |
| } |
| |
| /* draw a upward pointing triangle by making all borders except |
| the bottom border transparent */ |
| .sm-triangle { |
| border-color: transparent transparent #73c6f5 transparent; |
| border-style: solid; |
| border-width: 9px; |
| margin-top: -9px; |
| position: relative; |
| /** TODO(jacobr): ugly hack to work around rounding error when nesting CSS |
| 3d transitions */ |
| top: 1px; |
| } |
| |
| .invisible { |
| opacity: 0; |
| visibility: hidden; |
| } |