www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/css/toolbar.theme.css

   1 /**
   2  * @file toolbar.theme.css
   3  */
   4 .toolbar {
   5   font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
   6   /* Set base font size to 13px based on root ems. */
   7   font-size: 0.8125rem;
   8   -moz-tap-highlight-color: rgba(0,0,0,0);
   9   -o-tap-highlight-color: rgba(0,0,0,0);
  10   -webkit-tap-highlight-color: rgba(0,0,0,0);
  11   tap-highlight-color: rgba(0,0,0,0);
  12   -moz-touch-callout: none;
  13   -o-touch-callout: none;
  14   -webkit-touch-callout: none;
  15   touch-callout: none;
  16 }
  17 .toolbar .toolbar-item {
  18   cursor: pointer;
  19   padding: 1em 1.3333em;
  20   line-height: 1em;
  21   text-decoration: none;
  22 }
  23 .toolbar .toolbar-item:hover, .toolbar .toolbar-item:focus {
  24   text-decoration: underline;
  25 }
  26
  27 /**
  28  * Toolbar bar.
  29  */
  30 .toolbar .toolbar-bar {
  31   background-color: #0f0f0f;
  32   box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  33   color: #dddddd;
  34 }
  35 [dir="rtl"] .toolbar .toolbar-bar {
  36   box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
  37 }
  38 .toolbar .toolbar-bar .toolbar-item {
  39   color: #ffffff;
  40 }
  41 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
  42   font-weight: bold;
  43 }
  44 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
  45 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
  46   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
  47   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
  48 }
  49 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
  50   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  51   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  52 }
  53
  54 /**
  55  * Toolbar tray.
  56  */
  57 .toolbar .toolbar-tray {
  58   background-color: #ffffff;
  59 }
  60 .toolbar .toolbar-tray-horizontal > .toolbar-lining {
  61   padding-right: 5em; /* LTR */
  62 }
  63 [dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
  64   padding-right: 0;
  65   padding-left: 5em;
  66 }
  67 .toolbar .toolbar-tray-vertical {
  68   background-color: #f5f5f5;
  69   border-right: 1px solid #aaaaaa; /* LTR */
  70   box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
  71 }
  72 [dir="rtl"] .toolbar .toolbar-tray-vertical {
  73   border-left: 1px solid #aaaaaa;
  74   border-right: 0 none;
  75   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
  76 }
  77 .toolbar .toolbar-tray-horizontal {
  78   border-bottom: 1px solid #aaaaaa;
  79   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  80 }
  81 [dir="rtl"] .toolbar .toolbar-tray-horizontal {
  82   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
  83 }
  84 .toolbar .toolbar-tray-horizontal .toolbar-tray {
  85   background-color: #f5f5f5;
  86 }
  87 .toolbar-tray a {
  88   color: #565656;
  89   cursor: pointer;
  90   padding: 1em 1.3333em;
  91   text-decoration: none;
  92 }
  93 .toolbar-tray a:hover,
  94 .toolbar-tray a:active,
  95 .toolbar-tray a:focus,
  96 .toolbar-tray a.is-active
  97  {
  98   color: #000;
  99   text-decoration: underline;
 100 }
 101 .toolbar .toolbar-menu {
 102   background-color: #ffffff;
 103 }
 104 .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
 105   border-left: 1px solid #dddddd; /* LTR */
 106 }
 107 [dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
 108   border-left: 0 none ;
 109   border-right: 1px solid #dddddd;
 110 }
 111 .toolbar .toolbar-tray-horizontal .menu-item:last-child {
 112   border-right: 1px solid #dddddd; /* LTR */
 113 }
 114 [dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {
 115   border-left: 1px solid #dddddd;
 116 }
 117 .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
 118   border-top: 1px solid #dddddd;
 119 }
 120 .toolbar .toolbar-tray-vertical .menu-item:last-child {
 121   border-bottom: 1px solid #dddddd;
 122 }
 123 .toolbar .toolbar-tray-vertical .menu-item .menu-item {
 124   border: 0 none;
 125 }
 126 .toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
 127   border-bottom: 1px solid #dddddd;
 128   border-top: 1px solid #dddddd;
 129 }
 130 .toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
 131   border-bottom: 0;
 132 }
 133 .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
 134   margin-left: 0.25em; /* LTR */
 135 }
 136 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
 137   margin-left: 0;
 138   margin-right: 0.25em;
 139 }
 140 .toolbar .toolbar-menu .toolbar-menu a {
 141   color: #434343;
 142 }
 143
 144 /**
 145  * Orientation toggle.
 146  */
 147 .toolbar .toolbar-toggle-orientation {
 148   background-color: #f5f5f5;
 149   padding: 0;
 150   height: 100%;
 151 }
 152 .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
 153   border-left: 1px solid #c9c9c9; /* LTR */
 154 }
 155 [dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
 156   border-left: 0 none;
 157   border-right: 1px solid #c9c9c9;
 158 }
 159 .toolbar .toolbar-toggle-orientation > .toolbar-lining {
 160   float: right; /* LTR */
 161 }
 162 [dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
 163   float: left;
 164 }
 165 .toolbar .toolbar-toggle-orientation button {
 166   cursor: pointer;
 167   display: inline-block;
 168 }