You are here

Home » API reference » AT Tools 8.2

tabs.css in AT Tools 8.2

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
  2. 8 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;
  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;
  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;
  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-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  white-space: nowrap;
  -webkit-align-items: flex-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;
  transition: background-color, .15s, ease-in-out;
  margin-right: -1px;
  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-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -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;
  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;
    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;
    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;
    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-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    white-space: nowrap;
    -webkit-align-items: flex-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;
    transition: background-color, .15s, ease-in-out;
    margin-right: -1px;
    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-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -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;
    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.   box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  52.   margin-bottom: -1px;

  53.   padding: 0.5rem 1rem;

  54.   text-align: left;

  55.   text-decoration: none;

  56.   font-weight: 400;

  57.   line-height: 1;

  58.   width: auto;

  59.   display: block;

  60.   position: relative;

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

  62. }

  63. 

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

  65.   color: #fcfcfc;

  66.   background-color: #828282;

  67.   border-color: #828282;

  68. }

  69. 

  70. .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 {

  71.   color: #fcfcfc;

  72.   background-color: #828282;

  73.   border-color: #828282;

  74. }

  75. 

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

  77.   text-align: left;

  78. }

  79. 

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

  81.   content: " ";

  82.   display: table;

  83. }

  84. 

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

  86.   clear: both;

  87. }

  88. 

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

  90.   list-style: none;

  91. }

  92. 

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

  94.   display: inline-block;

  95.   line-height: 1;

  96.   color: #363636;

  97.   border-bottom: 1px solid transparent;

  98.   border-left: 3px solid;

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

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

  101. }

  102. 

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

  104.   text-decoration: none;

  105.   color: #363636;

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

  107. }

  108. 

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

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

  111. }

  112. 

  113. .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 {

  114.   color: #363636;

  115. }

  116. 

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

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

  119.   display: -webkit-flex;

  120.   display: -ms-flexbox;

  121.   display: flex;

  122.   -webkit-flex-direction: row;

  123.       -ms-flex-direction: row;

  124.           flex-direction: row;

  125.   white-space: nowrap;

  126.   -webkit-align-items: flex-end;

  127.       -ms-flex-align: end;

  128.           align-items: flex-end;

  129. }

  130. 

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

  132.   margin: 0 0 0 0;

  133.   list-style: none;

  134. }

  135. 

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

  137.   margin-right: 0;

  138.   margin-left: 0;

  139. }

  140. 

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

  142.   margin-bottom: -1px;

  143. }

  144. 

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

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

  147. }

  148. 

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

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

  151. }

  152. 

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

  154.   display: block;

  155.   line-height: 1;

  156.   color: #363636;

  157.   background-color: #f7f7f7;

  158.   border: 1px solid #cccccc;

  159.   padding: 0.5rem 1rem;

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

  161.   margin-right: -1px;

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

  163. }

  164. 

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

  166.   color: #363636;

  167.   background-color: #ededed;

  168.   text-decoration: none;

  169. }

  170. 

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

  172.   color: #363636;

  173.   background: none;

  174.   border-bottom-color: #f7f7f7;

  175. }

  176. 

  177. .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 {

  178.   color: #363636;

  179.   background: none;

  180. }

  181. 

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

  183.   display: -webkit-flex;

  184.   display: -ms-flexbox;

  185.   display: flex;

  186.   -webkit-flex-direction: row;

  187.       -ms-flex-direction: row;

  188.           flex-direction: row;

  189.   padding: 0;

  190. }

  191. 

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

  193.   margin: 0 0 0 0;

  194.   list-style: none;

  195. }

  196. 

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

  198.   margin-right: 0;

  199.   margin-left: 0;

  200. }

  201. 

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

  203.   display: block;

  204.   line-height: 1;

  205.   color: #363636;

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

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

  208.   padding: 1rem 0.5rem 0.625rem;

  209.   margin-right: 1rem;

  210. }

  211. 

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

  213.   text-decoration: none;

  214.   color: #363636;

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

  216. }

  217. 

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

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

  220. }

  221. 

  222. .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 {

  223.   color: #363636;

  224. }

  225. 

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

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

  228.     border-bottom: 0;

  229.   }

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

  231.     list-style: none;

  232.   }

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

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

  235.   }

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

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

  238.   }

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

  240.     color: #fcfcfc;

  241.     background-color: #828282;

  242.     border: 1px #828282 solid;

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

  244.     margin-bottom: -1px;

  245.     padding: 0.5rem 1rem;

  246.     text-align: left;

  247.     text-decoration: none;

  248.     font-weight: 400;

  249.     line-height: 1;

  250.     width: auto;

  251.     display: block;

  252.     position: relative;

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

  254.   }

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

  256.     color: #fcfcfc;

  257.     background-color: #828282;

  258.     border-color: #828282;

  259.   }

  260.   .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 {

  261.     color: #fcfcfc;

  262.     background-color: #828282;

  263.     border-color: #828282;

  264.   }

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

  266.     text-align: left;

  267.   }

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

  269.     content: " ";

  270.     display: table;

  271.   }

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

  273.     clear: both;

  274.   }

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

  276.     list-style: none;

  277.   }

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

  279.     display: inline-block;

  280.     line-height: 1;

  281.     color: #363636;

  282.     border-bottom: 1px solid transparent;

  283.     border-left: 3px solid;

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

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

  286.   }

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

  288.     text-decoration: none;

  289.     color: #363636;

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

  291.   }

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

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

  294.   }

  295.   .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 {

  296.     color: #363636;

  297.   }

  298. }

  299. 

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

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

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

  303.     display: -webkit-flex;

  304.     display: -ms-flexbox;

  305.     display: flex;

  306.     -webkit-flex-direction: row;

  307.         -ms-flex-direction: row;

  308.             flex-direction: row;

  309.     white-space: nowrap;

  310.     -webkit-align-items: flex-end;

  311.         -ms-flex-align: end;

  312.             align-items: flex-end;

  313.   }

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

  315.     margin: 0 0 0 0;

  316.     list-style: none;

  317.   }

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

  319.     margin-right: 0;

  320.     margin-left: 0;

  321.   }

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

  323.     margin-bottom: -1px;

  324.   }

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

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

  327.   }

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

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

  330.   }

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

  332.     display: block;

  333.     line-height: 1;

  334.     color: #363636;

  335.     background-color: #f7f7f7;

  336.     border: 1px solid #cccccc;

  337.     padding: 0.5rem 1rem;

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

  339.     margin-right: -1px;

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

  341.   }

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

  343.     color: #363636;

  344.     background-color: #ededed;

  345.     text-decoration: none;

  346.   }

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

  348.     color: #363636;

  349.     background: none;

  350.     border-bottom-color: #f7f7f7;

  351.   }

  352.   .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 {

  353.     color: #363636;

  354.     background: none;

  355.   }

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

  357.     display: -webkit-flex;

  358.     display: -ms-flexbox;

  359.     display: flex;

  360.     -webkit-flex-direction: row;

  361.         -ms-flex-direction: row;

  362.             flex-direction: row;

  363.     padding: 0;

  364.   }

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

  366.     margin: 0 0 0 0;

  367.     list-style: none;

  368.   }

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

  370.     margin-right: 0;

  371.     margin-left: 0;

  372.   }

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

  374.     display: block;

  375.     line-height: 1;

  376.     color: #363636;

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

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

  379.     padding: 1rem 0.5rem 0.625rem;

  380.     margin-right: 1rem;

  381.   }

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

  383.     text-decoration: none;

  384.     color: #363636;

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

  386.   }

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

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

  389.   }

  390.   .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 {

  391.     color: #363636;

  392.   }

  393. }

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