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

   1 /* --------------- System Tabs  --------------- */
   2
   3 div.tabs {
   4   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   5   margin-bottom: 20px;
   6 }
   7 .tabs ul.primary {
   8   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   9 }
  10 .tabs ul.primary li a {
  11   color: #000;
  12   background-color: #ededed;
  13   border-color: #bbb;
  14   border-style: solid solid none solid;
  15   border-width: 1px;
  16   height: 1.8em;
  17   line-height: 1.9;
  18   display: block;
  19   font-size: 0.929em;
  20   padding: 0 10px 3px;
  21   text-shadow: 0 1px 0 #fff;
  22 }
  23 .tabs ul.primary li.is-active a {
  24   background-color: #ffffff;
  25   border: 1px solid #bbb;
  26 }
  27 @media screen and (max-width: 37.5em) { /* 600px */
  28   .tabs ul.primary {
  29     border-bottom: 1px solid #bbb;
  30   }
  31   .tabs ul.primary li {
  32     display: block;
  33     margin: 0;
  34   }
  35   .tabs ul.primary li a {
  36     padding: 5px 10px;
  37   }
  38   .tabs ul.primary li.is-active a {
  39     border-bottom: none;
  40   }
  41 }
  42 @media screen and (min-width: 37.5em) { /* 600px */
  43   .tabs ul.primary {
  44     border-collapse: collapse;
  45     height: auto;
  46     line-height: normal;
  47     padding: 0 3px;
  48     margin: 0;
  49     overflow: hidden;
  50     border: none;
  51     background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
  52     white-space: nowrap;
  53   }
  54   .tabs ul.primary li {
  55     display: block;
  56     float: left; /* LTR */
  57     vertical-align: bottom;
  58     margin: 0 5px 0 0; /* LTR */
  59   }
  60   [dir="rtl"] .tabs ul.primary li {
  61     margin: 0 0 0 5px;
  62     float: right;
  63   }
  64   .tabs ul.primary li a {
  65     float: left; /* not LTR */
  66     border-top-left-radius: 6px;
  67     border-top-right-radius: 6px;
  68   }
  69   .tabs ul.primary li.is-active a {
  70     border-bottom: 1px solid #fff;
  71   }
  72 }
  73 .tabs ul.secondary {
  74   border-bottom: none;
  75   margin: 5px;
  76   padding: 0.5em 0;
  77   overflow: hidden;
  78 }
  79 .tabs ul.secondary li {
  80   border-right: 1px solid #ccc; /* LTR */
  81   display: block;
  82   float: left; /* LTR */
  83   margin: 0;
  84   padding: 0 1em;
  85 }
  86 [dir="rtl"] .tabs ul.secondary li {
  87   border-left: 1px solid #ccc;
  88   border-right: none;
  89   float: right;
  90 }
  91 .tabs ul.secondary li:last-child {
  92   border-right: none; /* LTR */
  93 }
  94 [dir="rtl"] .tabs ul.secondary li:last-child {
  95   border-left: none;
  96 }
  97 .tabs ul.secondary li:first-child {
  98   padding-left: 0; /* LTR */
  99 }
 100 [dir="rtl"] .tabs ul.secondary li:first-child {
 101   padding-right: 0;
 102 }
 103 .tabs ul.secondary li a {
 104   display: inline;
 105   padding: 0.25em 0.5em;
 106   text-decoration: none;
 107 }
 108 .tabs ul.secondary li a.is-active {
 109   background: #f2f2f2;
 110   border-bottom: none;
 111   border-radius: 5px;
 112 }