You are here

Home » API reference » AT Tools 8.3

tabs.css in AT Tools 8.3

Same filename and directory in other branches
  1. 8 at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
/**
 * Tabs (local tasks).
 * Tab styles leverage AT's responsive lists JS feature. This sets a class if
 * the list is too wide for it's container. This allows us to dynamically change
 * the design of the tabs menu if they are too wide. We use media queries as a
 * no-js fallback.
 ============================================================================ */
.tabs {
  padding: 0;
  margin: 1rem 0;
}

.tabs ul {
  margin-bottom: 1rem;
  padding: 0;
}

.tabs ul:before, .tabs ul:after {
  content: " ";
  display: table;
}

.tabs ul:after {
  clear: both;
}

.tabs ul.tabs--primary {
  margin-bottom: 0;
}

.tabs .is-vertical ul.tabs--primary {
  border-bottom: 0;
}

.tabs .is-vertical ul.tabs--primary li {
  list-style: none;
}

.tabs .is-vertical ul.tabs--primary li:first-child a {
  border-radius: 2px 2px 0 0;
}

.tabs .is-vertical ul.tabs--primary li:last-child a {
  border-radius: 0 0 2px 2px;
}

.tabs .is-vertical ul.tabs--primary li a {
  color: #fcfcfc;
  background-color: #828282;
  border: 1px #828282 solid;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
          box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  text-align: left;
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  width: auto;
  display: block;
  position: relative;
  -webkit-transition: all, 225ms, ease-in-out;
  -o-transition: all, 225ms, ease-in-out;
  transition: all, 225ms, ease-in-out;
}

.tabs .is-vertical ul.tabs--primary li a:link, .tabs .is-vertical ul.tabs--primary li a:visited {
  color: #fcfcfc;
  background-color: #828282;
  border-color: #828282;
}

.tabs .is-vertical ul.tabs--primary li a:hover, .tabs .is-vertical ul.tabs--primary li a:focus, .tabs .is-vertical ul.tabs--primary li a:active, .tabs .is-vertical ul.tabs--primary li a.active {
  color: #fcfcfc;
  background-color: #828282;
  border-color: #828282;
}

.tabs .is-vertical ul.tabs--secondary {
  text-align: left;
}

.tabs .is-vertical ul.tabs--secondary:before, .tabs .is-vertical ul.tabs--secondary:after {
  content: " ";
  display: table;
}

.tabs .is-vertical ul.tabs--secondary:after {
  clear: both;
}

.tabs .is-vertical ul.tabs--secondary li {
  list-style: none;
}

.tabs .is-vertical ul.tabs--secondary a {
  display: inline-block;
  line-height: 1;
  color: #363636;
  border-bottom: 1px solid transparent;
  border-left: 3px solid;
  -webkit-transition: all, 225ms, ease-in-out;
  -o-transition: all, 225ms, ease-in-out;
  transition: all, 225ms, ease-in-out;
  padding: 0.75rem 1rem 0.5rem 0.875rem;
}

.tabs .is-vertical ul.tabs--secondary a:hover, .tabs .is-vertical ul.tabs--secondary a:focus {
  text-decoration: none;
  color: #363636;
  border-bottom: 1px solid #cccccc;
}

.tabs .is-vertical ul.tabs--secondary a.active, .tabs .is-vertical ul.tabs--secondary a.is-active {
  border-bottom: 1px solid #cccccc;
}

.tabs .is-vertical ul.tabs--secondary a.active:hover, .tabs .is-vertical ul.tabs--secondary a.active:focus, .tabs .is-vertical ul.tabs--secondary a.is-active:hover, .tabs .is-vertical ul.tabs--secondary a.is-active:focus {
  color: #363636;
}

.tabs .is-horizontal ul.tabs--primary {
  border-bottom: 1px solid #cccccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  white-space: nowrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.tabs .is-horizontal ul.tabs--primary li {
  margin: 0 0 0 0;
  list-style: none;
}

[dir="rtl"] .tabs .is-horizontal ul.tabs--primary li {
  margin-right: 0;
  margin-left: 0;
}

.tabs .is-horizontal ul.tabs--primary li {
  margin-bottom: -1px;
}

.tabs .is-horizontal ul.tabs--primary li:first-child a {
  border-radius: 2px 0 0 0;
}

.tabs .is-horizontal ul.tabs--primary li:last-child a {
  border-radius: 0 2px 0 0;
}

.tabs .is-horizontal ul.tabs--primary a {
  display: block;
  line-height: 1;
  color: #363636;
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
  padding: 0.5rem 1rem;
  -webkit-transition: background-color, .15s, ease-in-out;
  -o-transition: background-color, .15s, ease-in-out;
  transition: background-color, .15s, ease-in-out;
  margin-right: -1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
          box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
}

.tabs .is-horizontal ul.tabs--primary a:hover, .tabs .is-horizontal ul.tabs--primary a:focus {
  color: #363636;
  background-color: #ededed;
  text-decoration: none;
}

.tabs .is-horizontal ul.tabs--primary a.active, .tabs .is-horizontal ul.tabs--primary a.is-active {
  color: #363636;
  background: none;
  border-bottom-color: #f7f7f7;
}

.tabs .is-horizontal ul.tabs--primary a.active:hover, .tabs .is-horizontal ul.tabs--primary a.active:focus, .tabs .is-horizontal ul.tabs--primary a.is-active:hover, .tabs .is-horizontal ul.tabs--primary a.is-active:focus {
  color: #363636;
  background: none;
}

.tabs .is-horizontal ul.tabs--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0;
}

.tabs .is-horizontal ul.tabs--secondary li {
  margin: 0 0 0 0;
  list-style: none;
}

[dir="rtl"] .tabs .is-horizontal ul.tabs--secondary li {
  margin-right: 0;
  margin-left: 0;
}

.tabs .is-horizontal ul.tabs--secondary a {
  display: block;
  line-height: 1;
  color: #363636;
  border-bottom: 1px solid #d9d9d9;
  -webkit-transition: all, 225ms, ease-in-out;
  -o-transition: all, 225ms, ease-in-out;
  transition: all, 225ms, ease-in-out;
  padding: 1rem 0.5rem 0.625rem;
  margin-right: 1rem;
}

.tabs .is-horizontal ul.tabs--secondary a:hover, .tabs .is-horizontal ul.tabs--secondary a:focus {
  text-decoration: none;
  color: #363636;
  border-bottom: 1px solid #cccccc;
}

.tabs .is-horizontal ul.tabs--secondary a.active, .tabs .is-horizontal ul.tabs--secondary a.is-active {
  border-bottom: 1px solid #cccccc;
}

.tabs .is-horizontal ul.tabs--secondary a.active:hover, .tabs .is-horizontal ul.tabs--secondary a.active:focus, .tabs .is-horizontal ul.tabs--secondary a.is-active:hover, .tabs .is-horizontal ul.tabs--secondary a.is-active:focus {
  color: #363636;
}

@media screen and (max-width: 60em) {
  .no-js .tabs ul.tabs--primary {
    border-bottom: 0;
  }
  .no-js .tabs ul.tabs--primary li {
    list-style: none;
  }
  .no-js .tabs ul.tabs--primary li:first-child a {
    border-radius: 2px 2px 0 0;
  }
  .no-js .tabs ul.tabs--primary li:last-child a {
    border-radius: 0 0 2px 2px;
  }
  .no-js .tabs ul.tabs--primary li a {
    color: #fcfcfc;
    background-color: #828282;
    border: 1px #828282 solid;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
            box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
    margin-bottom: -1px;
    padding: 0.5rem 1rem;
    text-align: left;
    text-decoration: none;
    font-weight: 400;
    line-height: 1;
    width: auto;
    display: block;
    position: relative;
    -webkit-transition: all, 225ms, ease-in-out;
    -o-transition: all, 225ms, ease-in-out;
    transition: all, 225ms, ease-in-out;
  }
  .no-js .tabs ul.tabs--primary li a:link, .no-js .tabs ul.tabs--primary li a:visited {
    color: #fcfcfc;
    background-color: #828282;
    border-color: #828282;
  }
  .no-js .tabs ul.tabs--primary li a:hover, .no-js .tabs ul.tabs--primary li a:focus, .no-js .tabs ul.tabs--primary li a:active, .no-js .tabs ul.tabs--primary li a.active {
    color: #fcfcfc;
    background-color: #828282;
    border-color: #828282;
  }
  .no-js .tabs ul.tabs--secondary {
    text-align: left;
  }
  .no-js .tabs ul.tabs--secondary:before, .no-js .tabs ul.tabs--secondary:after {
    content: " ";
    display: table;
  }
  .no-js .tabs ul.tabs--secondary:after {
    clear: both;
  }
  .no-js .tabs ul.tabs--secondary li {
    list-style: none;
  }
  .no-js .tabs ul.tabs--secondary a {
    display: inline-block;
    line-height: 1;
    color: #363636;
    border-bottom: 1px solid transparent;
    border-left: 3px solid;
    -webkit-transition: all, 225ms, ease-in-out;
    -o-transition: all, 225ms, ease-in-out;
    transition: all, 225ms, ease-in-out;
    padding: 0.75rem 1rem 0.5rem 0.875rem;
  }
  .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
    text-decoration: none;
    color: #363636;
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {
    color: #363636;
  }
}

@media screen and (min-width: 60.0625em) {
  .no-js .tabs ul.tabs--primary {
    border-bottom: 1px solid #cccccc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    white-space: nowrap;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .no-js .tabs ul.tabs--primary li {
    margin: 0 0 0 0;
    list-style: none;
  }
  [dir="rtl"] .no-js .tabs ul.tabs--primary li {
    margin-right: 0;
    margin-left: 0;
  }
  .no-js .tabs ul.tabs--primary li {
    margin-bottom: -1px;
  }
  .no-js .tabs ul.tabs--primary li:first-child a {
    border-radius: 2px 0 0 0;
  }
  .no-js .tabs ul.tabs--primary li:last-child a {
    border-radius: 0 2px 0 0;
  }
  .no-js .tabs ul.tabs--primary a {
    display: block;
    line-height: 1;
    color: #363636;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    padding: 0.5rem 1rem;
    -webkit-transition: background-color, .15s, ease-in-out;
    -o-transition: background-color, .15s, ease-in-out;
    transition: background-color, .15s, ease-in-out;
    margin-right: -1px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
            box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  }
  .no-js .tabs ul.tabs--primary a:hover, .no-js .tabs ul.tabs--primary a:focus {
    color: #363636;
    background-color: #ededed;
    text-decoration: none;
  }
  .no-js .tabs ul.tabs--primary a.active, .no-js .tabs ul.tabs--primary a.is-active {
    color: #363636;
    background: none;
    border-bottom-color: #f7f7f7;
  }
  .no-js .tabs ul.tabs--primary a.active:hover, .no-js .tabs ul.tabs--primary a.active:focus, .no-js .tabs ul.tabs--primary a.is-active:hover, .no-js .tabs ul.tabs--primary a.is-active:focus {
    color: #363636;
    background: none;
  }
  .no-js .tabs ul.tabs--secondary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 0;
  }
  .no-js .tabs ul.tabs--secondary li {
    margin: 0 0 0 0;
    list-style: none;
  }
  [dir="rtl"] .no-js .tabs ul.tabs--secondary li {
    margin-right: 0;
    margin-left: 0;
  }
  .no-js .tabs ul.tabs--secondary a {
    display: block;
    line-height: 1;
    color: #363636;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transition: all, 225ms, ease-in-out;
    -o-transition: all, 225ms, ease-in-out;
    transition: all, 225ms, ease-in-out;
    padding: 1rem 0.5rem 0.625rem;
    margin-right: 1rem;
  }
  .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
    text-decoration: none;
    color: #363636;
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {
    color: #363636;
  }
}
/*# sourceMappingURL=tabs.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
View source 
  1. /**

  2.  * Tabs (local tasks).

  3.  * Tab styles leverage AT's responsive lists JS feature. This sets a class if

  4.  * the list is too wide for it's container. This allows us to dynamically change

  5.  * the design of the tabs menu if they are too wide. We use media queries as a

  6.  * no-js fallback.

  7.  ============================================================================ */

  8. .tabs {

  9.   padding: 0;

  10.   margin: 1rem 0;

  11. }

  12. 

  13. .tabs ul {

  14.   margin-bottom: 1rem;

  15.   padding: 0;

  16. }

  17. 

  18. .tabs ul:before, .tabs ul:after {

  19.   content: " ";

  20.   display: table;

  21. }

  22. 

  23. .tabs ul:after {

  24.   clear: both;

  25. }

  26. 

  27. .tabs ul.tabs--primary {

  28.   margin-bottom: 0;

  29. }

  30. 

  31. .tabs .is-vertical ul.tabs--primary {

  32.   border-bottom: 0;

  33. }

  34. 

  35. .tabs .is-vertical ul.tabs--primary li {

  36.   list-style: none;

  37. }

  38. 

  39. .tabs .is-vertical ul.tabs--primary li:first-child a {

  40.   border-radius: 2px 2px 0 0;

  41. }

  42. 

  43. .tabs .is-vertical ul.tabs--primary li:last-child a {

  44.   border-radius: 0 0 2px 2px;

  45. }

  46. 

  47. .tabs .is-vertical ul.tabs--primary li a {

  48.   color: #fcfcfc;

  49.   background-color: #828282;

  50.   border: 1px #828282 solid;

  51.   -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  52.           box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  53.   margin-bottom: -1px;

  54.   padding: 0.5rem 1rem;

  55.   text-align: left;

  56.   text-decoration: none;

  57.   font-weight: 400;

  58.   line-height: 1;

  59.   width: auto;

  60.   display: block;

  61.   position: relative;

  62.   -webkit-transition: all, 225ms, ease-in-out;

  63.   -o-transition: all, 225ms, ease-in-out;

  64.   transition: all, 225ms, ease-in-out;

  65. }

  66. 

  67. .tabs .is-vertical ul.tabs--primary li a:link, .tabs .is-vertical ul.tabs--primary li a:visited {

  68.   color: #fcfcfc;

  69.   background-color: #828282;

  70.   border-color: #828282;

  71. }

  72. 

  73. .tabs .is-vertical ul.tabs--primary li a:hover, .tabs .is-vertical ul.tabs--primary li a:focus, .tabs .is-vertical ul.tabs--primary li a:active, .tabs .is-vertical ul.tabs--primary li a.active {

  74.   color: #fcfcfc;

  75.   background-color: #828282;

  76.   border-color: #828282;

  77. }

  78. 

  79. .tabs .is-vertical ul.tabs--secondary {

  80.   text-align: left;

  81. }

  82. 

  83. .tabs .is-vertical ul.tabs--secondary:before, .tabs .is-vertical ul.tabs--secondary:after {

  84.   content: " ";

  85.   display: table;

  86. }

  87. 

  88. .tabs .is-vertical ul.tabs--secondary:after {

  89.   clear: both;

  90. }

  91. 

  92. .tabs .is-vertical ul.tabs--secondary li {

  93.   list-style: none;

  94. }

  95. 

  96. .tabs .is-vertical ul.tabs--secondary a {

  97.   display: inline-block;

  98.   line-height: 1;

  99.   color: #363636;

  100.   border-bottom: 1px solid transparent;

  101.   border-left: 3px solid;

  102.   -webkit-transition: all, 225ms, ease-in-out;

  103.   -o-transition: all, 225ms, ease-in-out;

  104.   transition: all, 225ms, ease-in-out;

  105.   padding: 0.75rem 1rem 0.5rem 0.875rem;

  106. }

  107. 

  108. .tabs .is-vertical ul.tabs--secondary a:hover, .tabs .is-vertical ul.tabs--secondary a:focus {

  109.   text-decoration: none;

  110.   color: #363636;

  111.   border-bottom: 1px solid #cccccc;

  112. }

  113. 

  114. .tabs .is-vertical ul.tabs--secondary a.active, .tabs .is-vertical ul.tabs--secondary a.is-active {

  115.   border-bottom: 1px solid #cccccc;

  116. }

  117. 

  118. .tabs .is-vertical ul.tabs--secondary a.active:hover, .tabs .is-vertical ul.tabs--secondary a.active:focus, .tabs .is-vertical ul.tabs--secondary a.is-active:hover, .tabs .is-vertical ul.tabs--secondary a.is-active:focus {

  119.   color: #363636;

  120. }

  121. 

  122. .tabs .is-horizontal ul.tabs--primary {

  123.   border-bottom: 1px solid #cccccc;

  124.   display: -webkit-box;

  125.   display: -ms-flexbox;

  126.   display: flex;

  127.   -webkit-box-orient: horizontal;

  128.   -webkit-box-direction: normal;

  129.       -ms-flex-direction: row;

  130.           flex-direction: row;

  131.   white-space: nowrap;

  132.   -webkit-box-align: end;

  133.       -ms-flex-align: end;

  134.           align-items: flex-end;

  135. }

  136. 

  137. .tabs .is-horizontal ul.tabs--primary li {

  138.   margin: 0 0 0 0;

  139.   list-style: none;

  140. }

  141. 

  142. [dir="rtl"] .tabs .is-horizontal ul.tabs--primary li {

  143.   margin-right: 0;

  144.   margin-left: 0;

  145. }

  146. 

  147. .tabs .is-horizontal ul.tabs--primary li {

  148.   margin-bottom: -1px;

  149. }

  150. 

  151. .tabs .is-horizontal ul.tabs--primary li:first-child a {

  152.   border-radius: 2px 0 0 0;

  153. }

  154. 

  155. .tabs .is-horizontal ul.tabs--primary li:last-child a {

  156.   border-radius: 0 2px 0 0;

  157. }

  158. 

  159. .tabs .is-horizontal ul.tabs--primary a {

  160.   display: block;

  161.   line-height: 1;

  162.   color: #363636;

  163.   background-color: #f7f7f7;

  164.   border: 1px solid #cccccc;

  165.   padding: 0.5rem 1rem;

  166.   -webkit-transition: background-color, .15s, ease-in-out;

  167.   -o-transition: background-color, .15s, ease-in-out;

  168.   transition: background-color, .15s, ease-in-out;

  169.   margin-right: -1px;

  170.   -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  171.           box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  172. }

  173. 

  174. .tabs .is-horizontal ul.tabs--primary a:hover, .tabs .is-horizontal ul.tabs--primary a:focus {

  175.   color: #363636;

  176.   background-color: #ededed;

  177.   text-decoration: none;

  178. }

  179. 

  180. .tabs .is-horizontal ul.tabs--primary a.active, .tabs .is-horizontal ul.tabs--primary a.is-active {

  181.   color: #363636;

  182.   background: none;

  183.   border-bottom-color: #f7f7f7;

  184. }

  185. 

  186. .tabs .is-horizontal ul.tabs--primary a.active:hover, .tabs .is-horizontal ul.tabs--primary a.active:focus, .tabs .is-horizontal ul.tabs--primary a.is-active:hover, .tabs .is-horizontal ul.tabs--primary a.is-active:focus {

  187.   color: #363636;

  188.   background: none;

  189. }

  190. 

  191. .tabs .is-horizontal ul.tabs--secondary {

  192.   display: -webkit-box;

  193.   display: -ms-flexbox;

  194.   display: flex;

  195.   -webkit-box-orient: horizontal;

  196.   -webkit-box-direction: normal;

  197.       -ms-flex-direction: row;

  198.           flex-direction: row;

  199.   padding: 0;

  200. }

  201. 

  202. .tabs .is-horizontal ul.tabs--secondary li {

  203.   margin: 0 0 0 0;

  204.   list-style: none;

  205. }

  206. 

  207. [dir="rtl"] .tabs .is-horizontal ul.tabs--secondary li {

  208.   margin-right: 0;

  209.   margin-left: 0;

  210. }

  211. 

  212. .tabs .is-horizontal ul.tabs--secondary a {

  213.   display: block;

  214.   line-height: 1;

  215.   color: #363636;

  216.   border-bottom: 1px solid #d9d9d9;

  217.   -webkit-transition: all, 225ms, ease-in-out;

  218.   -o-transition: all, 225ms, ease-in-out;

  219.   transition: all, 225ms, ease-in-out;

  220.   padding: 1rem 0.5rem 0.625rem;

  221.   margin-right: 1rem;

  222. }

  223. 

  224. .tabs .is-horizontal ul.tabs--secondary a:hover, .tabs .is-horizontal ul.tabs--secondary a:focus {

  225.   text-decoration: none;

  226.   color: #363636;

  227.   border-bottom: 1px solid #cccccc;

  228. }

  229. 

  230. .tabs .is-horizontal ul.tabs--secondary a.active, .tabs .is-horizontal ul.tabs--secondary a.is-active {

  231.   border-bottom: 1px solid #cccccc;

  232. }

  233. 

  234. .tabs .is-horizontal ul.tabs--secondary a.active:hover, .tabs .is-horizontal ul.tabs--secondary a.active:focus, .tabs .is-horizontal ul.tabs--secondary a.is-active:hover, .tabs .is-horizontal ul.tabs--secondary a.is-active:focus {

  235.   color: #363636;

  236. }

  237. 

  238. @media screen and (max-width: 60em) {

  239.   .no-js .tabs ul.tabs--primary {

  240.     border-bottom: 0;

  241.   }

  242.   .no-js .tabs ul.tabs--primary li {

  243.     list-style: none;

  244.   }

  245.   .no-js .tabs ul.tabs--primary li:first-child a {

  246.     border-radius: 2px 2px 0 0;

  247.   }

  248.   .no-js .tabs ul.tabs--primary li:last-child a {

  249.     border-radius: 0 0 2px 2px;

  250.   }

  251.   .no-js .tabs ul.tabs--primary li a {

  252.     color: #fcfcfc;

  253.     background-color: #828282;

  254.     border: 1px #828282 solid;

  255.     -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  256.             box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  257.     margin-bottom: -1px;

  258.     padding: 0.5rem 1rem;

  259.     text-align: left;

  260.     text-decoration: none;

  261.     font-weight: 400;

  262.     line-height: 1;

  263.     width: auto;

  264.     display: block;

  265.     position: relative;

  266.     -webkit-transition: all, 225ms, ease-in-out;

  267.     -o-transition: all, 225ms, ease-in-out;

  268.     transition: all, 225ms, ease-in-out;

  269.   }

  270.   .no-js .tabs ul.tabs--primary li a:link, .no-js .tabs ul.tabs--primary li a:visited {

  271.     color: #fcfcfc;

  272.     background-color: #828282;

  273.     border-color: #828282;

  274.   }

  275.   .no-js .tabs ul.tabs--primary li a:hover, .no-js .tabs ul.tabs--primary li a:focus, .no-js .tabs ul.tabs--primary li a:active, .no-js .tabs ul.tabs--primary li a.active {

  276.     color: #fcfcfc;

  277.     background-color: #828282;

  278.     border-color: #828282;

  279.   }

  280.   .no-js .tabs ul.tabs--secondary {

  281.     text-align: left;

  282.   }

  283.   .no-js .tabs ul.tabs--secondary:before, .no-js .tabs ul.tabs--secondary:after {

  284.     content: " ";

  285.     display: table;

  286.   }

  287.   .no-js .tabs ul.tabs--secondary:after {

  288.     clear: both;

  289.   }

  290.   .no-js .tabs ul.tabs--secondary li {

  291.     list-style: none;

  292.   }

  293.   .no-js .tabs ul.tabs--secondary a {

  294.     display: inline-block;

  295.     line-height: 1;

  296.     color: #363636;

  297.     border-bottom: 1px solid transparent;

  298.     border-left: 3px solid;

  299.     -webkit-transition: all, 225ms, ease-in-out;

  300.     -o-transition: all, 225ms, ease-in-out;

  301.     transition: all, 225ms, ease-in-out;

  302.     padding: 0.75rem 1rem 0.5rem 0.875rem;

  303.   }

  304.   .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {

  305.     text-decoration: none;

  306.     color: #363636;

  307.     border-bottom: 1px solid #cccccc;

  308.   }

  309.   .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {

  310.     border-bottom: 1px solid #cccccc;

  311.   }

  312.   .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {

  313.     color: #363636;

  314.   }

  315. }

  316. 

  317. @media screen and (min-width: 60.0625em) {

  318.   .no-js .tabs ul.tabs--primary {

  319.     border-bottom: 1px solid #cccccc;

  320.     display: -webkit-box;

  321.     display: -ms-flexbox;

  322.     display: flex;

  323.     -webkit-box-orient: horizontal;

  324.     -webkit-box-direction: normal;

  325.         -ms-flex-direction: row;

  326.             flex-direction: row;

  327.     white-space: nowrap;

  328.     -webkit-box-align: end;

  329.         -ms-flex-align: end;

  330.             align-items: flex-end;

  331.   }

  332.   .no-js .tabs ul.tabs--primary li {

  333.     margin: 0 0 0 0;

  334.     list-style: none;

  335.   }

  336.   [dir="rtl"] .no-js .tabs ul.tabs--primary li {

  337.     margin-right: 0;

  338.     margin-left: 0;

  339.   }

  340.   .no-js .tabs ul.tabs--primary li {

  341.     margin-bottom: -1px;

  342.   }

  343.   .no-js .tabs ul.tabs--primary li:first-child a {

  344.     border-radius: 2px 0 0 0;

  345.   }

  346.   .no-js .tabs ul.tabs--primary li:last-child a {

  347.     border-radius: 0 2px 0 0;

  348.   }

  349.   .no-js .tabs ul.tabs--primary a {

  350.     display: block;

  351.     line-height: 1;

  352.     color: #363636;

  353.     background-color: #f7f7f7;

  354.     border: 1px solid #cccccc;

  355.     padding: 0.5rem 1rem;

  356.     -webkit-transition: background-color, .15s, ease-in-out;

  357.     -o-transition: background-color, .15s, ease-in-out;

  358.     transition: background-color, .15s, ease-in-out;

  359.     margin-right: -1px;

  360.     -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  361.             box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  362.   }

  363.   .no-js .tabs ul.tabs--primary a:hover, .no-js .tabs ul.tabs--primary a:focus {

  364.     color: #363636;

  365.     background-color: #ededed;

  366.     text-decoration: none;

  367.   }

  368.   .no-js .tabs ul.tabs--primary a.active, .no-js .tabs ul.tabs--primary a.is-active {

  369.     color: #363636;

  370.     background: none;

  371.     border-bottom-color: #f7f7f7;

  372.   }

  373.   .no-js .tabs ul.tabs--primary a.active:hover, .no-js .tabs ul.tabs--primary a.active:focus, .no-js .tabs ul.tabs--primary a.is-active:hover, .no-js .tabs ul.tabs--primary a.is-active:focus {

  374.     color: #363636;

  375.     background: none;

  376.   }

  377.   .no-js .tabs ul.tabs--secondary {

  378.     display: -webkit-box;

  379.     display: -ms-flexbox;

  380.     display: flex;

  381.     -webkit-box-orient: horizontal;

  382.     -webkit-box-direction: normal;

  383.         -ms-flex-direction: row;

  384.             flex-direction: row;

  385.     padding: 0;

  386.   }

  387.   .no-js .tabs ul.tabs--secondary li {

  388.     margin: 0 0 0 0;

  389.     list-style: none;

  390.   }

  391.   [dir="rtl"] .no-js .tabs ul.tabs--secondary li {

  392.     margin-right: 0;

  393.     margin-left: 0;

  394.   }

  395.   .no-js .tabs ul.tabs--secondary a {

  396.     display: block;

  397.     line-height: 1;

  398.     color: #363636;

  399.     border-bottom: 1px solid #d9d9d9;

  400.     -webkit-transition: all, 225ms, ease-in-out;

  401.     -o-transition: all, 225ms, ease-in-out;

  402.     transition: all, 225ms, ease-in-out;

  403.     padding: 1rem 0.5rem 0.625rem;

  404.     margin-right: 1rem;

  405.   }

  406.   .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {

  407.     text-decoration: none;

  408.     color: #363636;

  409.     border-bottom: 1px solid #cccccc;

  410.   }

  411.   .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {

  412.     border-bottom: 1px solid #cccccc;

  413.   }

  414.   .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {

  415.     color: #363636;

  416.   }

  417. }

  418. /*# sourceMappingURL=tabs.css.map */