www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/css/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 .toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle,
  17 .toolbar .toolbar-tray-horizontal .toolbar-menu ul,
  18 .toolbar .toolbar-tray-vertical .toolbar-menu ul {
  19   display: none;
  20 }
  21 .toolbar .toolbar-tray-vertical li.open > ul {
  22   display: block; /* Show the sub-menus */
  23 }
  24 .toolbar .toolbar-tray-vertical .toolbar-handle + a {
  25   margin-right: 3em; /* LTR */
  26 }
  27 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a {
  28   margin-left: 3em;
  29   margin-right: 0;
  30 }
  31 .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
  32 .toolbar .toolbar-tray a.is-active {
  33   color: #000;
  34   font-weight: bold;
  35 }
  36
  37 /* ----- Toolbar menu tray for viewports less than 320px ------ */
  38 @media screen and (max-width: 319px) {
  39   .toolbar .toolbar-tray-vertical.is-active {
  40     width: 100%;
  41   }
  42 }
  43
  44 /**
  45  * Items.
  46  */
  47 .toolbar .level-2 > ul {
  48   background-color: #fafafa;
  49   border-bottom-color: #cccccc;
  50   border-top-color: #e5e5e5;
  51 }
  52 .toolbar .level-3 > ul {
  53   background-color: #f5f5f5;
  54   border-bottom-color: #c5c5c5;
  55   border-top-color: #dddddd;
  56 }
  57 .toolbar .level-4 > ul {
  58   background-color: #eeeeee;
  59   border-bottom-color: #bbbbbb;
  60   border-top-color: #d5d5d5;
  61 }
  62 .toolbar .level-5 > ul {
  63   background-color: #e5e5e5;
  64   border-bottom-color: #b5b5b5;
  65   border-top-color: #cccccc;
  66 }
  67 .toolbar .level-6 > ul {
  68   background-color: #eeeeee;
  69   border-bottom-color: #aaaaaa;
  70   border-top-color: #c5c5c5;
  71 }
  72 .toolbar .level-7 > ul {
  73   background-color: #fafafa;
  74   border-bottom-color: #b5b5b5;
  75   border-top-color: #cccccc;
  76 }
  77 .toolbar .level-8 > ul {
  78   background-color: #dddddd;
  79   border-bottom-color: #cccccc;
  80   border-top-color: #dddddd;
  81 }
  82
  83 /**
  84  * Handle.
  85  */
  86 .toolbar .toolbar-handle:hover {
  87   cursor: pointer;
  88 }
  89 .toolbar .toolbar-icon.toolbar-handle {
  90   bottom: 0;
  91   display: block;
  92   height: 100%;
  93   padding: 0;
  94   position: absolute;
  95   right: 0; /* LTR */
  96   top: 0;
  97   z-index: 1;
  98 }
  99 [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
 100   left: 0;
 101   padding: 0;
 102   right: auto;
 103 }