git.roojs.org Git - ratchet/blob - lib/css/bars.css

   1 /* General bar styles
   2 -------------------------------------------------- */
   3
   4 [class*="bar-"] {
   5   position: fixed;
   6   right: 0;
   7   left: 0;
   8   z-index: 10;
   9   height: 44px;
  10   padding: 5px;
  11   box-sizing: border-box;
  12 }
  13
  14 /* Modifier class to dock any bar below .bar-title */
  15 .bar-header-secondary {
  16   top: 45px;
  17 }
  18
  19 /* Modifier class to dock any bar to bottom of viewport */
  20 .bar-footer {
  21   bottom: 0;
  22 }
  23
  24 /* Generic bar for wrapping buttons, segmented controllers, etc. */
  25 .bar-standard {
  26   background-color: #f2f2f2;
  27   background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
  28   background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
  29   border-bottom: 1px solid #aaa;
  30   box-shadow: inset 0 1px 1px -1px #fff;
  31 }
  32
  33 /* Flip border position to top for footer bars */
  34 .bar-footer.bar-standard,
  35 .bar-footer-secondary.bar-standard {
  36   border-top: 1px solid #aaa;
  37   border-bottom-width: 0;
  38 }
  39
  40 /* Title bar
  41 -------------------------------------------------- */
  42
  43 /* Bar docked to top of viewport for showing page title and actions */
  44 .bar-title {
  45   top: 0;
  46   display: -webkit-box;
  47   display: box;
  48   background-color: #1eb0e9;
  49   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
  50   background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
  51   border-bottom: 1px solid #0e5895;
  52   box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
  53   -webkit-box-orient: horizontal;
  54           box-orient: horizontal;
  55 }
  56
  57 /* Centered text in the .bar-title */
  58 .bar-title .title {
  59   position: absolute;
  60   top: 0;
  61   left: 0;
  62   display: block;
  63   width: 100%;
  64   font-size: 20px;
  65   font-weight: bold;
  66   line-height: 44px;
  67   color: #fff;
  68   text-align: center;
  69   text-shadow: 0 -1px rgba(0, 0, 0, .5);
  70   white-space: nowrap;
  71 }
  72
  73 .bar-title > a:not([class*="button"]) {
  74   display: block;
  75   width: 100%;
  76   height: 100%;
  77 }
  78
  79 /* Retain specified title color */
  80 .bar-title .title a {
  81   color: inherit;
  82 }
  83
  84 /* Tab bar
  85 -------------------------------------------------- */
  86
  87 /* Bar docked to bottom used for primary app navigation */
  88 .bar-tab {
  89   bottom: 0;
  90   height: 50px;
  91   padding: 0;
  92   background-color: #393939;
  93   background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
  94   background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
  95   border-top: 1px solid #000;
  96   border-bottom-width: 0;
  97   box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
  98 }
  99
 100 /* Wrapper for individual tab */
 101 .tab-inner {
 102   display: -webkit-box;
 103   display: box;
 104   height: 100%;
 105   list-style: none;
 106   -webkit-box-orient: horizontal;
 107           box-orient: horizontal;
 108 }
 109
 110 /* Navigational tab */
 111 .tab-item {
 112   height: 100%;
 113   padding-top: 9px;
 114   text-align: center;
 115   box-sizing: border-box;
 116   -webkit-box-flex: 1;
 117           box-flex: 1;
 118 }
 119
 120 /* Active state for tab */
 121 .tab-item.active {
 122   box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 123 }
 124
 125 /* Icon for tab  */
 126 .tab-icon {
 127   display: block;
 128   height: 18px;
 129   margin: 0 auto;
 130 }
 131
 132 /* Label for tab */
 133 .tab-label {
 134   margin-top: 1px;
 135   font-size: 10px;
 136   font-weight: bold;
 137   color: #fff;
 138   text-shadow: 0 1px rgba(0, 0, 0, .3);
 139 }
 140
 141 /* Buttons in title bars
 142 -------------------------------------------------- */
 143
 144 /* Generic style for all buttons in .bar-title */
 145 .bar-title [class*="button"] {
 146   position: relative;
 147   z-index: 10; /* Places buttons over full width title */
 148   font-size: 12px;
 149   line-height: 23px;
 150   color: #fff;
 151   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 152   background-color: #1eb0e9;
 153   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
 154   background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
 155   border: 1px solid #0e5895;
 156   box-shadow: 0 1px rgba(255, 255, 255, .25);
 157   -webkit-box-flex: 0;
 158           box-flex: 0;
 159 }
 160
 161
 162 /* Hacky way to right align buttons outside of flex-box system
 163    Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
 164 .bar-title .title + [class*="button"]:last-child,
 165 .bar-title .button + [class*="button"]:last-child,
 166 .bar-title [class*="button"].pull-right {
 167   position: absolute;
 168   top: 5px;
 169   right: 5px;
 170 }
 171
 172 /* Override standard button active states */
 173 .bar-title .button:active {
 174   color: #fff;
 175   background-color: #0876b1;
 176 }
 177
 178 /* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
 179 -------------------------------------------------- */
 180
 181 /* Add relative positioning so :before content is positioned properly */
 182 .bar-title .button-prev,
 183 .bar-title .button-next {
 184   position: relative;
 185 }
 186
 187 /* Prev/next button base styles */
 188 .bar-title .button-prev {
 189   margin-left: 7px; /* Push over to make room for :before content */
 190   border-left: 0;
 191   border-bottom-left-radius: 10px 15px;
 192   border-top-left-radius: 10px 15px;
 193 }
 194 .bar-title .button-next {
 195   margin-right: 7px; /* Push over to make room for :before content */
 196   border-right: 0;
 197   border-top-right-radius: 10px 15px;
 198   border-bottom-right-radius: 10px 15px;
 199 }
 200
 201 /* Pointed part of directional button */
 202 .bar-title .button-prev:before,
 203 .bar-title .button-next:before {
 204   position: absolute;
 205   top: 2px;
 206   width: 27px;
 207   height: 27px;
 208   border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
 209   content: '';
 210   box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
 211   -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
 212                   mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
 213 }
 214 .bar-title .button-prev:before {
 215   left: -5px;
 216   background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
 217   background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
 218   border-left: 1.5px solid rgba(255, 255, 255, .25);
 219   -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
 220           transform: rotate(-45deg) skew(-10deg, -10deg);
 221 }
 222 .bar-title .button-next:before {
 223   right: -5px;
 224   background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
 225   background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
 226   border-top: 1.5px solid rgba(255, 255, 255, .25);
 227   -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
 228           transform: rotate(135deg) skew(-10deg, -10deg);
 229 }
 230
 231 /* Active states for the directional buttons */
 232 .bar-title .button-prev:active,
 233 .bar-title .button-next:active,
 234 .bar-title .button-prev:active:before,
 235 .bar-title .button-next:active:before {
 236   color: #fff;
 237   background-color: #0876b1;
 238   background-image: none;
 239 }
 240 .bar-title .button-prev:active:before,
 241 .bar-title .button-next:active:before {
 242   content: '';
 243 }
 244 .bar-title .button-prev:active:before {
 245   box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
 246 }
 247 .bar-title .button-next:active:before {
 248   box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
 249 }
 250
 251 /* Block buttons in any bar
 252 -------------------------------------------------- */
 253
 254 /* Add proper padding and replace buttons normal dropshadow with a shine from bar */
 255 [class*="bar"] .button-block {
 256   padding: 7px 0;
 257   margin-bottom: 0;
 258   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
 259 }
 260
 261 /* Override standard padding changes for .button-blocks */
 262 [class*="bar"] .button-block:active {
 263   padding: 7px 0;
 264 }
 265
 266 /* Segmented controller in any bar
 267 -------------------------------------------------- */
 268
 269 /* Remove standard segmented bottom margin */
 270 [class*="bar-"] .segmented-controller {
 271   margin-bottom: 0;
 272 }
 273
 274 /* Add margins between segmented controllers and buttons */
 275 [class*="bar-"] .segmented-controller + [class*="button"],
 276 [class*="bar-"] [class*="button"] + .segmented-controller {
 277   margin-left: 5px;
 278 }
 279
 280 /* Segmented controller in a title bar
 281 -------------------------------------------------- */
 282
 283 .bar-title .segmented-controller {
 284   line-height: 18px;
 285   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 286   background-color: #1eb0e9;
 287   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
 288   background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
 289   border: 1px solid #0e5895;
 290   border-radius: 3px;
 291   box-shadow: 0 1px rgba(255, 255, 255, .25);
 292   -webkit-box-flex: 1;
 293           box-flex: 1;
 294 }
 295
 296 /* Set color for tab border and highlight */
 297 .bar-title .segmented-controller li {
 298   border-left: 1px solid #0e5895;
 299   box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
 300 }
 301
 302 /* Remove inset shadow from first tab or one to the right of the active tab  */
 303 .bar-title .segmented-controller .active + li,
 304 .bar-title .segmented-controller li:first-child {
 305   box-shadow: none;
 306 }
 307
 308 /* Remove left-hand border from first tab */
 309 .bar-title .segmented-controller li:first-child {
 310   border-left-width: 0;
 311 }
 312
 313 /* Depressed state (active) */
 314 .bar-title .segmented-controller li.active {
 315   background-color: #0082c4;
 316   box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
 317 }
 318
 319 /* Set color of links to white */
 320 .bar-title .segmented-controller li > a {
 321   color: #fff;
 322 }
 323
 324
 325 /* Search forms in standard bar
 326 -------------------------------------------------- */
 327
 328 /* Position/size search bar within the bar */
 329 .bar-standard input[type=search] {
 330   height: 32px;
 331   margin: 0;
 332 }