aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/vertical-tabs.css

   1 /**
   2  * @file
   3  * Override of misc/vertical-tabs.css.
   4  */
   5
   6 .vertical-tabs {
   7   position: relative;
   8   overflow: hidden;
   9   margin: 10px 0;
  10   border: 1px solid #bdbdbd;
  11   border-radius: 4px;
  12   background: #e6e5e1;
  13 }
  14 .vertical-tabs__menu {
  15   float: left; /* LTR */
  16   width: 240px;
  17   margin: 0 -100% -1px 0; /* LTR */
  18   padding: 0;
  19   border-bottom: 1px solid #ccc;
  20   line-height: 1;
  21 }
  22 [dir="rtl"] .vertical-tabs__menu {
  23   float: right;
  24   margin: 0 0 -1px -100%;
  25 }
  26 .vertical-tabs__menu-item {
  27   position: relative;
  28 }
  29 .vertical-tabs__menu-item.is-selected {
  30   z-index: 1;
  31   overflow-x: hidden;
  32   width: 100%;
  33   border-right: 1px solid #fcfcfa; /* LTR */
  34   box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
  35   border-bottom: 1px solid #b3b2ad;
  36 }
  37 .vertical-tabs__menu-item.last {
  38   border-bottom: none;
  39 }
  40 [dir="rtl"] .vertical-tabs__menu-item.is-selected {
  41   border-left: 1px solid #fcfcfa;
  42   border-right: none;
  43 }
  44 .vertical-tabs__menu-item:focus,
  45 .vertical-tabs__menu-item:active {
  46   z-index: 2;
  47 }
  48 .vertical-tabs__menu-item a {
  49   display: block;
  50   padding: 10px 15px 15px;
  51   border-bottom: 1px solid #b3b2ad;
  52   background-color: #f2f2f0;
  53   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  54   text-decoration: none;
  55 }
  56 .vertical-tabs__menu-item:last-child a {
  57   border-bottom: 0;
  58 }
  59 .vertical-tabs__menu-item.is-selected a,
  60 .vertical-tabs__menu-item a:hover,
  61 .vertical-tabs__menu-item a:focus {
  62   background: #fcfcfa;
  63   text-shadow: none;
  64 }
  65 .vertical-tabs__menu-item a:focus {
  66   outline: none;
  67 }
  68 .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title {
  69   text-decoration: underline;
  70 }
  71 .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
  72 .vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
  73   text-decoration: none;
  74 }
  75 .vertical-tabs__menu-item.is-selected a {
  76   color: #004f80;
  77   padding-left: 11px; /* LTR */
  78   border-bottom: none;
  79   text-decoration: none;
  80 }
  81 [dir=rtl] .vertical-tabs__menu-item.is-selected a {
  82   padding-left: 15px;
  83   padding-right: 11px;
  84 }
  85 .vertical-tabs__menu-item.is-selected a:hover,
  86 .vertical-tabs__menu-item.is-selected a:focus {
  87   color: #007ecc;
  88 }
  89 [data-vertical-tabs-panes] {
  90   background-color: #fcfcfa;
  91 }
  92 .vertical-tabs__panes {
  93   margin: 0 0 0 240px; /* LTR */
  94   padding: 10px 15px 10px 15px;
  95   border-left: 1px solid #a6a5a1; /* LTR */
  96 }
  97 [dir="rtl"] .vertical-tabs__panes {
  98   margin: 0 240px 0 0;
  99   border-left: none;
 100   border-right: 1px solid #a6a5a1;
 101 }
 102 .vertical-tabs__panes:after {
 103   content: "";
 104   display: table;
 105   clear: both;
 106 }
 107 .vertical-tabs__pane {
 108   margin: 0;
 109   padding: 0;
 110   border: 0;
 111   color: #595959;
 112 }
 113 .vertical-tabs__menu-item-summary {
 114   display: block;
 115   padding-top: 0.4em;
 116   color: #666;
 117 }
 118 .vertical-tabs__pane > summary {
 119   display: none;
 120 }