www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/css/toolbar/toolbar.menu.css

   1 /**
   2  * @file toolbar.menu.css
   3  */
   4 .toolbar .toolbar-menu,
   5 [dir="rtl"] .toolbar .toolbar-menu {
   6   list-style: none;
   7   margin: 0;
   8   padding: 0;
   9 }
  10 .toolbar .toolbar-box {
  11   display: block;
  12   line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
  13   position: relative;
  14   width: auto;
  15 }
  16
  17 /**
  18  * Hidden vertical toolbar sub-menus by default.
  19  */
  20 .toolbar .toolbar-tray-vertical .toolbar-menu ul {
  21   display: none;
  22 }
  23
  24 /**
  25  * Hidden horizontal toolbar handle icon.
  26  */
  27 .toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle {
  28   display: none;
  29 }
  30 /**
  31  * Hidden toolbar sub-menus by default.
  32  */
  33 .toolbar-tray-open .toolbar-menu .menu-item--expanded ul {
  34   display: none;
  35 }
  36 .toolbar .toolbar-tray-vertical li.open > ul {
  37   display: block; /* Show the sub-menus */
  38 }
  39 .toolbar .toolbar-tray-vertical .toolbar-handle + a {
  40   margin-right: 3em; /* LTR */
  41 }
  42 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a {
  43   margin-left: 3em;
  44   margin-right: 0;
  45 }
  46 .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
  47 .toolbar .toolbar-tray a.is-active {
  48   color: #000;
  49   font-weight: bold;
  50 }
  51
  52 /* ----- Toolbar menu tray for viewports less than 320px ------ */
  53 @media screen and (max-width: 319px) {
  54   .toolbar .toolbar-tray-vertical.is-active {
  55     width: 100%;
  56   }
  57 }
  58
  59 /**
  60  * Items.
  61  */
  62 .toolbar .level-2 > ul {
  63   background-color: #fafafa;
  64   border-bottom-color: #ccc;
  65   border-top-color: #e5e5e5;
  66 }
  67 .toolbar .level-3 > ul {
  68   background-color: #f5f5f5;
  69   border-bottom-color: #c5c5c5;
  70   border-top-color: #ddd;
  71 }
  72 .toolbar .level-4 > ul {
  73   background-color: #eee;
  74   border-bottom-color: #bbb;
  75   border-top-color: #d5d5d5;
  76 }
  77 .toolbar .level-5 > ul {
  78   background-color: #e5e5e5;
  79   border-bottom-color: #b5b5b5;
  80   border-top-color: #ccc;
  81 }
  82 .toolbar .level-6 > ul {
  83   background-color: #eee;
  84   border-bottom-color: #aaa;
  85   border-top-color: #c5c5c5;
  86 }
  87 .toolbar .level-7 > ul {
  88   background-color: #fafafa;
  89   border-bottom-color: #b5b5b5;
  90   border-top-color: #ccc;
  91 }
  92 .toolbar .level-8 > ul {
  93   background-color: #ddd;
  94   border-bottom-color: #ccc;
  95   border-top-color: #ddd;
  96 }
  97
  98 /**
  99  * Handle.
 100  */
 101 .toolbar .toolbar-handle:hover {
 102   cursor: pointer;
 103 }
 104 .toolbar .toolbar-icon.toolbar-handle {
 105   bottom: 0;
 106   display: block;
 107   height: 100%;
 108   padding: 0;
 109   position: absolute;
 110   right: 0; /* LTR */
 111   top: 0;
 112   z-index: 1;
 113 }
 114 [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
 115   left: 0;
 116   padding: 0;
 117   right: auto;
 118 }