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

   1 /**
   2  * Tabs.
   3  */
   4 .is-collapse-enabled .tabs,
   5 .is-horizontal .tabs {
   6   position: relative;
   7 }
   8 .is-collapse-enabled .tabs:before,
   9 .is-horizontal .tabs:before {
  10   content: '';
  11   display: block;
  12   background-color: #a6a6a6;
  13   height: 1px;
  14   position: absolute;
  15   bottom: 0;
  16   left: 0;
  17   z-index: 10;
  18   right: 0;
  19 }
  20
  21 /* Span the full width of the viewport */
  22 .content-header .is-horizontal .tabs:before,
  23 .content-header .is-collapse-enabled .tabs:before {
  24   left: -2.5em;
  25   right: -2.5em;
  26 }
  27
  28 /**
  29  * Tab
  30  *
  31  * 1. Required by some elements such as <button>
  32  * 2. Fixed height needed to ensure alignment with absolutely-positioned
  33  *    active tab.
  34  */
  35 .tabs__tab {
  36   position: relative;
  37   display: block;
  38   overflow: hidden;
  39   box-sizing: border-box;
  40   margin: -1px 0 0;
  41   padding: 9px 2em 7px 1em; /* LTR */
  42   width: 100%;  /* 1 */
  43   border: 1px solid #bfbfbf;
  44   background-color: rgba(242, 242, 240, 0.7);
  45   color: #0074bd;
  46   text-overflow: ellipsis;
  47   white-space: nowrap;
  48 }
  49 [dir="rtl"] .tabs__tab {
  50   padding-left: 2em;
  51   padding-right: 1em;
  52 }
  53 .tabs__tab:hover,
  54 .tabs__tab:focus {
  55   color: #008ee6;
  56   background-color: #fafaf7;
  57 }
  58 li.tabs__tab {
  59   display: block;
  60   padding: 0;
  61 }
  62 /* This is required to win over specificity of [dir="rtl"] .tabs__tab */
  63 [dir="rtl"] li.tabs__tab {
  64   padding-left: 0;
  65   padding-right: 0;
  66 }
  67 li.tabs__tab a {
  68   padding: 9px 2em 7px 1em; /* LTR */
  69 }
  70 [dir="rtl"] li.tabs__tab a {
  71   padding-left: 2em;
  72   padding-right: 1em;
  73 }
  74 .tabs a:hover,
  75 .tabs a:focus {
  76   text-decoration: none;
  77 }
  78
  79 /* Primary tabs */
  80 .tabs.primary {
  81   clear: both;
  82   margin: 16px 0 0;
  83   margin: 1rem 0 0;
  84 }
  85 .tabs.primary .tabs__tab.is-active {
  86   z-index: 15;
  87   border-color: #a6a6a6;
  88   border-radius: 4px 0 0 0; /* LTR */
  89   background-color: #fff;
  90   color: #004f80;
  91 }
  92 [dir="rtl"] .tabs.primary .tabs__tab.is-active {
  93   border-top-left-radius: 0;
  94   border-top-right-radius: 4px;
  95 }
  96 .tabs.primary a {
  97   background: none;
  98 }
  99 .tabs.primary a:focus {
 100   color: #008ee6;
 101   background-color: #fafaf7;
 102   text-decoration: underline;
 103 }
 104 .tabs.primary .is-active a:focus {
 105   background: none;
 106   text-decoration: underline;
 107 }
 108
 109 /* Only add the arrow if there's space */
 110 @media screen and (min-width: 18.75em) { /* 300px */
 111   .tabs.primary a {
 112     background: url(../../../../misc/icons/0074bd/chevron-right.svg) 99% center no-repeat;
 113   }
 114   [dir="rtl"] .tabs.primary a {
 115     background: url(../../../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
 116   }
 117   .tabs.primary .tabs__tab.is-active a {
 118     background-image: none;
 119   }
 120 }
 121 .tabs__trigger {
 122   display: none;
 123 }
 124
 125 /* JS dependent styling */
 126 .is-collapse-enabled .tabs__trigger {
 127   box-sizing: content-box;
 128   display: block;
 129   position: absolute;
 130   z-index: 10;
 131   right: 0; /* LTR */
 132   top: 2px;
 133   left: auto; /* LTR */
 134   width: 25%;
 135   padding-right: 4px;
 136   padding-left: 4px;
 137   border-left: 0; /* LTR */
 138   border-radius: 0 4px 0 0; /* LTR */
 139   font-family: Arial, sans-serif;
 140   font-size: 1.25em;
 141   letter-spacing: 0.1em;
 142   text-align: center;
 143   outline: 0;
 144 }
 145 [dir="rtl"] .is-collapse-enabled .tabs__trigger {
 146   border-right: 0;
 147   border-left: 1px solid #bfbfbf;
 148   border-radius: 4px 0 0 0;
 149   right: auto;
 150   left: 0;
 151 }
 152 .is-collapse-enabled .tabs {
 153   padding-top: 38px;
 154   max-height: 0;
 155 }
 156 .tabs.is-open {
 157   max-height: 999em;
 158   padding-bottom: 16px;
 159   padding-bottom: 1rem;
 160 }
 161 .is-collapse-enabled .tabs__tab.is-active {
 162   position: absolute;
 163   top: 2px;
 164   left: 0; /* LTR */
 165   width: 75%;
 166   border-bottom: 0;
 167 }
 168 [dir="rtl"] .is-collapse-enabled .tabs__tab.is-active {
 169   left: auto;
 170   right: 0;
 171 }
 172 .is-collapse-enabled .tabs.primary a.is-active:before {
 173   content: none;
 174 }
 175 .is-open .tabs__tab.is-active {
 176   border-color: #a6a6a6;
 177   background-color: #fff;
 178   color: #004f80;
 179   border-bottom: 1px solid #a6a6a6;
 180 }
 181
 182 /* Styles for the horizontal state always take priority */
 183 .is-horizontal .tabs {
 184   max-height: none !important;
 185   padding-top: 0 !important;
 186   overflow: visible;
 187 }
 188 .is-horizontal .tabs__tab {
 189   float: left; /* LTR */
 190   height: auto;
 191   width: auto;
 192   margin: 0 0 -1px;
 193   text-align: center;
 194   border-bottom-color: #a6a6a6;
 195 }
 196 [dir="rtl"] .is-horizontal .tabs__tab {
 197   float: right;
 198   /* This is required to win over specificity of [dir="rtl"] .tabs > li */
 199   margin-left: 0;
 200 }
 201 .is-horizontal .tabs__tab + .tabs__tab {
 202   margin-left: -1px; /* LTR */
 203 }
 204 [dir="rtl"] .is-horizontal .tabs__tab + .tabs__tab {
 205   margin-left: 0;
 206   margin-right: -1px;
 207 }
 208 .is-horizontal .tabs.primary .tabs__tab:first-child {
 209   border-radius: 4px 0 0 0; /* LTR */
 210 }
 211 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
 212   border-radius: 0 4px 0 0;
 213 }
 214 .is-horizontal .tabs.primary .tabs__tab:last-child {
 215   border-radius: 0 4px 0 0; /* LTR */
 216 }
 217 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
 218   border-radius: 4px 0 0 0;
 219 }
 220
 221 /* Override the states above */
 222 .is-horizontal .tabs__tab.is-active,
 223 .is-horizontal .tabs.primary .tabs__tab.is-active,
 224 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.is-active {
 225   border-radius: 4px 4px 0 0;
 226   position: relative;
 227   width: auto;
 228   top: 0;
 229   border-bottom: 0;
 230   margin: 0 -4px;
 231 }
 232 .is-horizontal .tabs.primary a {
 233   background-image: none;
 234   padding: 7px 2em 7px 2em;
 235 }
 236 .is-horizontal .tabs__trigger {
 237   display: none;
 238 }
 239
 240 /* Secondary tabs */
 241 .tabs.secondary {
 242   display: block;
 243   margin-top: 16px;
 244   margin-top: 1rem;
 245 }
 246 .tabs.secondary .tabs__tab {
 247   display: block;
 248   padding: 5px 15px 5px 16px; /* LTR */
 249   margin-left: -1px; /* LTR */
 250   color: #0074bd;
 251   -webkit-transition: border-color 0.2s, background-color 0.2s;
 252   transition: border-color 0.2s, background-color 0.2s;
 253 }
 254 [dir="rtl"] .tabs.secondary .tabs__tab {
 255   padding-left: 15px;
 256   padding-right: 16px;
 257   margin-left: 0;
 258   margin-right: -1px;
 259 }
 260 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab */
 261 [dir="rtl"] .views-displays .tabs.secondary li,
 262 [dir="rtl"] .views-displays .tabs.secondary li.is-active {
 263   padding-left: 0;
 264   padding-right: 0;
 265 }
 266 .tabs.secondary .tabs__tab + .tabs__tab {
 267   border-top: 1px solid #d9d8d4;
 268 }
 269 .tabs.secondary .tabs__tab.is-active {
 270   color: #004f80;
 271   border-left: 2px solid #004f80; /* LTR */
 272   padding-left: 15px; /* LTR */
 273 }
 274 [dir="rtl"] .tabs.secondary .tabs__tab.is-active {
 275   border-left: 1px solid #bfbfbf;
 276   border-right: 2px solid #004f80;
 277   padding-right: 15px;
 278 }
 279 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab.is-active */
 280 [dir="rtl"] .views-displays .tabs.secondary li.is-active {
 281   border: 0 none;
 282   padding-right: 0;
 283 }
 284 .tabs.secondary .tabs__tab:hover,
 285 .tabs.secondary .tabs__tab:focus {
 286   color: #008ee6;
 287   border-left: 2px solid #008ee6; /* LTR */
 288   padding-left: 15px; /* LTR */
 289 }
 290 [dir="rtl"] .tabs.secondary .tabs__tab:hover,
 291 [dir="rtl"] .tabs.secondary .tabs__tab:focus {
 292   border-left: 1px solid #bfbfbf;
 293   border-right: 2px solid #008ee6;
 294   padding-right: 15px;
 295 }
 296 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab:hover */
 297 [dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
 298   border: 0 none;
 299   padding-right: 0;
 300 }
 301 .tabs.secondary a {
 302   background-color: transparent;
 303   padding: 7px 13px 5px;
 304   text-decoration: none;
 305 }
 306 /* This is required to win over specificity of [dir="rtl"] li.tabs__tab a */
 307 [dir="rtl"] .tabs.secondary a {
 308   padding-left: 13px;
 309   padding-right: 13px;
 310 }
 311 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary a */
 312 [dir="rtl"] .views-displays .tabs.secondary a {
 313   padding-left: 7px;
 314   padding-right: 7px;
 315 }
 316 .tabs.secondary .is-active a {
 317   color: #004f80;
 318 }
 319 .tabs.secondary a:focus {
 320   text-decoration: underline;
 321 }
 322
 323 /* Styles for the horizontal state */
 324 .is-horizontal .tabs.secondary .tabs__tab {
 325   background: none;
 326   float: left; /* LTR */
 327   position: relative;
 328   top: 0;
 329   z-index: 15;
 330   margin-left: 1em;
 331   margin-right: 1em;
 332   border-bottom: 2px solid transparent;
 333   border-left: 1px solid transparent; /* LTR */
 334   border-right-color: transparent; /* LTR */
 335   border-top: 0;
 336   padding: 0;
 337 }
 338 /**
 339  * 1. This is required to win over specificity of
 340  *      [dir="rtl"] .tabs.secondary .tabs__tab:hover,
 341  *      [dir="rtl"] .tabs.secondary .tabs__tab:focus
 342  */
 343 [dir="rtl"] .is-horizontal .tabs.secondary .tabs__tab {
 344   float: right;
 345   border-right: 1px solid transparent;
 346   border-left-color: transparent;
 347   padding-right: 0; /* 1 */
 348 }
 349 .is-horizontal .tabs.secondary .tabs__tab.is-active {
 350   border-bottom-color: #004f80;
 351 }
 352 .is-horizontal .tabs.secondary .tabs__tab:hover,
 353 .is-horizontal .tabs.secondary .tabs__tab:focus {
 354   border-bottom-color: #008ee6;
 355 }