git.roojs.org Git - ratchet/blob - lib/css/segmented-controllers.css

   1 /* Segmented controllers
   2 -------------------------------------------------- */
   3
   4 .segmented-controller {
   5   display: -webkit-box;
   6   display: box;
   7   margin-bottom: 10px;
   8   overflow: hidden;
   9   font-size: 12px;
  10   font-weight: bold;
  11   text-shadow: 0 1px rgba(255, 255, 255, .5);
  12   list-style: none;
  13   background-color: #f8f8f8;
  14   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
  15   background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
  16   border: 1px solid #aaa;
  17   border-radius: 3px;
  18   box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
  19   -webkit-box-orient: horizontal;
  20           box-orient: horizontal;
  21 }
  22
  23 /* Section within controller */
  24 .segmented-controller li {
  25   overflow: hidden;
  26   text-align: center;
  27   white-space: nowrap;
  28   border-left: 1px solid #aaa;
  29   box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
  30   -webkit-box-flex: 1;
  31           box-flex: 1;
  32 }
  33
  34 /* Link that fills each section */
  35 .segmented-controller li > a {
  36   display: block;
  37   padding: 8px 16px;
  38   overflow: hidden;
  39   line-height: 15px;
  40   color: #333;
  41   text-overflow: ellipsis;
  42 }
  43
  44 /* Remove border-left and shadow from first section */
  45 .segmented-controller li:first-child {
  46   border-left-width: 0;
  47   box-shadow: none;
  48 }
  49
  50 /* Active segment of controller */
  51 .segmented-controller li.active {
  52   background-color: #ccc;
  53   box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
  54 }
  55
  56 .segmented-controller-item {
  57   display: none;
  58 }
  59
  60 .segmented-controller-item.active {
  61   display: block;
  62 }