samples-dev/swarm/swarm_ui_lib/view/resources/view.css

/* 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;
}