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,
  24 .toolbar .toolbar-item:focus {
  25   text-decoration: underline;
  26 }
  27
  28 /**
  29  * Toolbar bar.
  30  */
  31 .toolbar .toolbar-bar {
  32   background-color: #0f0f0f;
  33   box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  34   color: #dddddd;
  35 }
  36 [dir="rtl"] .toolbar .toolbar-bar {
  37   box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
  38 }
  39 .toolbar .toolbar-bar .toolbar-item {
  40   color: #ffffff;
  41 }
  42 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
  43   font-weight: bold;
  44 }
  45 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
  46 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
  47   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
  48   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
  49 }
  50 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
  51   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  52   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  53 }
  54
  55 /**
  56  * Toolbar tray.
  57  */
  58 .toolbar .toolbar-tray {
  59   background-color: #ffffff;
  60 }
  61 .toolbar-horizontal .toolbar-tray > .toolbar-lining {
  62   padding-right: 5em; /* LTR */
  63 }
  64 [dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
  65   padding-right: 0;
  66   padding-left: 5em;
  67 }
  68 .toolbar .toolbar-tray-vertical {
  69   background-color: #f5f5f5;
  70   border-right: 1px solid #aaaaaa; /* LTR */
  71   box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
  72 }
  73 [dir="rtl"] .toolbar .toolbar-tray-vertical {
  74   border-left: 1px solid #aaaaaa;
  75   border-right: 0 none;
  76   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
  77 }
  78 .toolbar-horizontal .toolbar-tray {
  79   border-bottom: 1px solid #aaaaaa;
  80   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  81 }
  82 [dir="rtl"] .toolbar-horizontal .toolbar-tray {
  83   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
  84 }
  85 .toolbar .toolbar-tray-horizontal .toolbar-tray {
  86   background-color: #f5f5f5;
  87 }
  88 .toolbar-tray a {
  89   color: #565656;
  90   cursor: pointer;
  91   padding: 1em 1.3333em;
  92   text-decoration: none;
  93 }
  94 .toolbar-tray a:hover,
  95 .toolbar-tray a:active,
  96 .toolbar-tray a:focus,
  97 .toolbar-tray a.is-active {
  98   color: #000;
  99   text-decoration: underline;
 100 }
 101 .toolbar .toolbar-menu {
 102   background-color: #ffffff;
 103 }
 104 .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
 105   border-left: 1px solid #dddddd; /* LTR */
 106 }
 107 [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
 108   border-left: 0 none;
 109   border-right: 1px solid #dddddd;
 110 }
 111 .toolbar-horizontal .toolbar-tray .menu-item:last-child {
 112   border-right: 1px solid #dddddd; /* LTR */
 113 }
 114 [dir="rtl"] .toolbar-horizontal .toolbar-tray .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-horizontal .toolbar-tray .toolbar-toggle-orientation {
 153   border-left: 1px solid #c9c9c9; /* LTR */
 154 }
 155 [dir="rtl"] .toolbar-horizontal .toolbar-tray .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 }