www.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: #fff;
  25   border: 1px solid #bbb;
  26 }
  27
  28 @media screen and (max-width: 37.5em) { /* 600px */
  29   .tabs ul.primary {
  30     border-bottom: 1px solid #bbb;
  31   }
  32   .tabs ul.primary li {
  33     display: block;
  34     margin: 0;
  35   }
  36   .tabs ul.primary li a {
  37     padding: 5px 10px;
  38   }
  39   .tabs ul.primary li.is-active a {
  40     border-bottom: none;
  41   }
  42 }
  43
  44 @media screen and (min-width: 37.5em) { /* 600px */
  45   .tabs ul.primary {
  46     border-collapse: collapse;
  47     height: auto;
  48     line-height: normal;
  49     padding: 0 3px;
  50     margin: 0;
  51     overflow: hidden;
  52     border: none;
  53     background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
  54     white-space: nowrap;
  55   }
  56   .tabs ul.primary li {
  57     display: block;
  58     float: left; /* LTR */
  59     vertical-align: bottom;
  60     margin: 0 5px 0 0; /* LTR */
  61   }
  62   [dir="rtl"] .tabs ul.primary li {
  63     margin: 0 0 0 5px;
  64     float: right;
  65   }
  66   .tabs ul.primary li a {
  67     float: left; /* not LTR */
  68     border-top-left-radius: 6px;
  69     border-top-right-radius: 6px;
  70   }
  71   .tabs ul.primary li.is-active a {
  72     border-bottom: 1px solid #fff;
  73   }
  74 }
  75 .tabs ul.secondary {
  76   border-bottom: none;
  77   margin: 5px;
  78   padding: 0.5em 0;
  79   overflow: hidden;
  80 }
  81 .tabs ul.secondary li {
  82   border-right: 1px solid #ccc; /* LTR */
  83   display: block;
  84   float: left; /* LTR */
  85   margin: 0;
  86   padding: 0 1em;
  87 }
  88 [dir="rtl"] .tabs ul.secondary li {
  89   border-left: 1px solid #ccc;
  90   border-right: none;
  91   float: right;
  92 }
  93 .tabs ul.secondary li:last-child {
  94   border-right: none; /* LTR */
  95 }
  96 [dir="rtl"] .tabs ul.secondary li:last-child {
  97   border-left: none;
  98 }
  99 .tabs ul.secondary li:first-child {
 100   padding-left: 0; /* LTR */
 101 }
 102 [dir="rtl"] .tabs ul.secondary li:first-child {
 103   padding-right: 0;
 104 }
 105 .tabs ul.secondary li a {
 106   display: inline;
 107   padding: 0.25em 0.5em;
 108   text-decoration: none;
 109 }
 110 .tabs ul.secondary li a.is-active {
 111   background: #f2f2f2;
 112   border-bottom: none;
 113   border-radius: 5px;
 114 }