Index: client/view/resources/view.css |
=================================================================== |
--- client/view/resources/view.css (revision 4144) |
+++ client/view/resources/view.css (working copy) |
@@ -1,174 +0,0 @@ |
-/* 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; |
-} |