You are here

tabs.css in AT Tools 8.2

/**
 * 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. .tabs ul {
  13. margin-bottom: 1rem;
  14. padding: 0;
  15. }
  16. .tabs ul:before, .tabs ul:after {
  17. content: " ";
  18. display: table;
  19. }
  20. .tabs ul:after {
  21. clear: both;
  22. }
  23. .tabs ul.tabs--primary {
  24. margin-bottom: 0;
  25. }
  26. .tabs .is-vertical ul.tabs--primary {
  27. border-bottom: 0;
  28. }
  29. .tabs .is-vertical ul.tabs--primary li {
  30. list-style: none;
  31. }
  32. .tabs .is-vertical ul.tabs--primary li:first-child a {
  33. border-radius: 2px 2px 0 0;
  34. }
  35. .tabs .is-vertical ul.tabs--primary li:last-child a {
  36. border-radius: 0 0 2px 2px;
  37. }
  38. .tabs .is-vertical ul.tabs--primary li a {
  39. color: #fcfcfc;
  40. background-color: #828282;
  41. border: 1px #828282 solid;
  42. box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  43. margin-bottom: -1px;
  44. padding: 0.5rem 1rem;
  45. text-align: left;
  46. text-decoration: none;
  47. font-weight: 400;
  48. line-height: 1;
  49. width: auto;
  50. display: block;
  51. position: relative;
  52. transition: all, 225ms, ease-in-out;
  53. }
  54. .tabs .is-vertical ul.tabs--primary li a:link, .tabs .is-vertical ul.tabs--primary li a:visited {
  55. color: #fcfcfc;
  56. background-color: #828282;
  57. border-color: #828282;
  58. }
  59. .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 {
  60. color: #fcfcfc;
  61. background-color: #828282;
  62. border-color: #828282;
  63. }
  64. .tabs .is-vertical ul.tabs--secondary {
  65. text-align: left;
  66. }
  67. .tabs .is-vertical ul.tabs--secondary:before, .tabs .is-vertical ul.tabs--secondary:after {
  68. content: " ";
  69. display: table;
  70. }
  71. .tabs .is-vertical ul.tabs--secondary:after {
  72. clear: both;
  73. }
  74. .tabs .is-vertical ul.tabs--secondary li {
  75. list-style: none;
  76. }
  77. .tabs .is-vertical ul.tabs--secondary a {
  78. display: inline-block;
  79. line-height: 1;
  80. color: #363636;
  81. border-bottom: 1px solid transparent;
  82. border-left: 3px solid;
  83. transition: all, 225ms, ease-in-out;
  84. padding: 0.75rem 1rem 0.5rem 0.875rem;
  85. }
  86. .tabs .is-vertical ul.tabs--secondary a:hover, .tabs .is-vertical ul.tabs--secondary a:focus {
  87. text-decoration: none;
  88. color: #363636;
  89. border-bottom: 1px solid #cccccc;
  90. }
  91. .tabs .is-vertical ul.tabs--secondary a.active, .tabs .is-vertical ul.tabs--secondary a.is-active {
  92. border-bottom: 1px solid #cccccc;
  93. }
  94. .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 {
  95. color: #363636;
  96. }
  97. .tabs .is-horizontal ul.tabs--primary {
  98. border-bottom: 1px solid #cccccc;
  99. display: -webkit-flex;
  100. display: -ms-flexbox;
  101. display: flex;
  102. -webkit-flex-direction: row;
  103. -ms-flex-direction: row;
  104. flex-direction: row;
  105. white-space: nowrap;
  106. -webkit-align-items: flex-end;
  107. -ms-flex-align: end;
  108. align-items: flex-end;
  109. }
  110. .tabs .is-horizontal ul.tabs--primary li {
  111. margin: 0 0 0 0;
  112. list-style: none;
  113. }
  114. [dir="rtl"] .tabs .is-horizontal ul.tabs--primary li {
  115. margin-right: 0;
  116. margin-left: 0;
  117. }
  118. .tabs .is-horizontal ul.tabs--primary li {
  119. margin-bottom: -1px;
  120. }
  121. .tabs .is-horizontal ul.tabs--primary li:first-child a {
  122. border-radius: 2px 0 0 0;
  123. }
  124. .tabs .is-horizontal ul.tabs--primary li:last-child a {
  125. border-radius: 0 2px 0 0;
  126. }
  127. .tabs .is-horizontal ul.tabs--primary a {
  128. display: block;
  129. line-height: 1;
  130. color: #363636;
  131. background-color: #f7f7f7;
  132. border: 1px solid #cccccc;
  133. padding: 0.5rem 1rem;
  134. transition: background-color, .15s, ease-in-out;
  135. margin-right: -1px;
  136. box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  137. }
  138. .tabs .is-horizontal ul.tabs--primary a:hover, .tabs .is-horizontal ul.tabs--primary a:focus {
  139. color: #363636;
  140. background-color: #ededed;
  141. text-decoration: none;
  142. }
  143. .tabs .is-horizontal ul.tabs--primary a.active, .tabs .is-horizontal ul.tabs--primary a.is-active {
  144. color: #363636;
  145. background: none;
  146. border-bottom-color: #f7f7f7;
  147. }
  148. .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 {
  149. color: #363636;
  150. background: none;
  151. }
  152. .tabs .is-horizontal ul.tabs--secondary {
  153. display: -webkit-flex;
  154. display: -ms-flexbox;
  155. display: flex;
  156. -webkit-flex-direction: row;
  157. -ms-flex-direction: row;
  158. flex-direction: row;
  159. padding: 0;
  160. }
  161. .tabs .is-horizontal ul.tabs--secondary li {
  162. margin: 0 0 0 0;
  163. list-style: none;
  164. }
  165. [dir="rtl"] .tabs .is-horizontal ul.tabs--secondary li {
  166. margin-right: 0;
  167. margin-left: 0;
  168. }
  169. .tabs .is-horizontal ul.tabs--secondary a {
  170. display: block;
  171. line-height: 1;
  172. color: #363636;
  173. border-bottom: 1px solid #d9d9d9;
  174. transition: all, 225ms, ease-in-out;
  175. padding: 1rem 0.5rem 0.625rem;
  176. margin-right: 1rem;
  177. }
  178. .tabs .is-horizontal ul.tabs--secondary a:hover, .tabs .is-horizontal ul.tabs--secondary a:focus {
  179. text-decoration: none;
  180. color: #363636;
  181. border-bottom: 1px solid #cccccc;
  182. }
  183. .tabs .is-horizontal ul.tabs--secondary a.active, .tabs .is-horizontal ul.tabs--secondary a.is-active {
  184. border-bottom: 1px solid #cccccc;
  185. }
  186. .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 {
  187. color: #363636;
  188. }
  189. @media screen and (max-width: 60em) {
  190. .no-js .tabs ul.tabs--primary {
  191. border-bottom: 0;
  192. }
  193. .no-js .tabs ul.tabs--primary li {
  194. list-style: none;
  195. }
  196. .no-js .tabs ul.tabs--primary li:first-child a {
  197. border-radius: 2px 2px 0 0;
  198. }
  199. .no-js .tabs ul.tabs--primary li:last-child a {
  200. border-radius: 0 0 2px 2px;
  201. }
  202. .no-js .tabs ul.tabs--primary li a {
  203. color: #fcfcfc;
  204. background-color: #828282;
  205. border: 1px #828282 solid;
  206. box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  207. margin-bottom: -1px;
  208. padding: 0.5rem 1rem;
  209. text-align: left;
  210. text-decoration: none;
  211. font-weight: 400;
  212. line-height: 1;
  213. width: auto;
  214. display: block;
  215. position: relative;
  216. transition: all, 225ms, ease-in-out;
  217. }
  218. .no-js .tabs ul.tabs--primary li a:link, .no-js .tabs ul.tabs--primary li a:visited {
  219. color: #fcfcfc;
  220. background-color: #828282;
  221. border-color: #828282;
  222. }
  223. .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 {
  224. color: #fcfcfc;
  225. background-color: #828282;
  226. border-color: #828282;
  227. }
  228. .no-js .tabs ul.tabs--secondary {
  229. text-align: left;
  230. }
  231. .no-js .tabs ul.tabs--secondary:before, .no-js .tabs ul.tabs--secondary:after {
  232. content: " ";
  233. display: table;
  234. }
  235. .no-js .tabs ul.tabs--secondary:after {
  236. clear: both;
  237. }
  238. .no-js .tabs ul.tabs--secondary li {
  239. list-style: none;
  240. }
  241. .no-js .tabs ul.tabs--secondary a {
  242. display: inline-block;
  243. line-height: 1;
  244. color: #363636;
  245. border-bottom: 1px solid transparent;
  246. border-left: 3px solid;
  247. transition: all, 225ms, ease-in-out;
  248. padding: 0.75rem 1rem 0.5rem 0.875rem;
  249. }
  250. .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
  251. text-decoration: none;
  252. color: #363636;
  253. border-bottom: 1px solid #cccccc;
  254. }
  255. .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
  256. border-bottom: 1px solid #cccccc;
  257. }
  258. .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 {
  259. color: #363636;
  260. }
  261. }
  262. @media screen and (min-width: 60.0625em) {
  263. .no-js .tabs ul.tabs--primary {
  264. border-bottom: 1px solid #cccccc;
  265. display: -webkit-flex;
  266. display: -ms-flexbox;
  267. display: flex;
  268. -webkit-flex-direction: row;
  269. -ms-flex-direction: row;
  270. flex-direction: row;
  271. white-space: nowrap;
  272. -webkit-align-items: flex-end;
  273. -ms-flex-align: end;
  274. align-items: flex-end;
  275. }
  276. .no-js .tabs ul.tabs--primary li {
  277. margin: 0 0 0 0;
  278. list-style: none;
  279. }
  280. [dir="rtl"] .no-js .tabs ul.tabs--primary li {
  281. margin-right: 0;
  282. margin-left: 0;
  283. }
  284. .no-js .tabs ul.tabs--primary li {
  285. margin-bottom: -1px;
  286. }
  287. .no-js .tabs ul.tabs--primary li:first-child a {
  288. border-radius: 2px 0 0 0;
  289. }
  290. .no-js .tabs ul.tabs--primary li:last-child a {
  291. border-radius: 0 2px 0 0;
  292. }
  293. .no-js .tabs ul.tabs--primary a {
  294. display: block;
  295. line-height: 1;
  296. color: #363636;
  297. background-color: #f7f7f7;
  298. border: 1px solid #cccccc;
  299. padding: 0.5rem 1rem;
  300. transition: background-color, .15s, ease-in-out;
  301. margin-right: -1px;
  302. box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  303. }
  304. .no-js .tabs ul.tabs--primary a:hover, .no-js .tabs ul.tabs--primary a:focus {
  305. color: #363636;
  306. background-color: #ededed;
  307. text-decoration: none;
  308. }
  309. .no-js .tabs ul.tabs--primary a.active, .no-js .tabs ul.tabs--primary a.is-active {
  310. color: #363636;
  311. background: none;
  312. border-bottom-color: #f7f7f7;
  313. }
  314. .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 {
  315. color: #363636;
  316. background: none;
  317. }
  318. .no-js .tabs ul.tabs--secondary {
  319. display: -webkit-flex;
  320. display: -ms-flexbox;
  321. display: flex;
  322. -webkit-flex-direction: row;
  323. -ms-flex-direction: row;
  324. flex-direction: row;
  325. padding: 0;
  326. }
  327. .no-js .tabs ul.tabs--secondary li {
  328. margin: 0 0 0 0;
  329. list-style: none;
  330. }
  331. [dir="rtl"] .no-js .tabs ul.tabs--secondary li {
  332. margin-right: 0;
  333. margin-left: 0;
  334. }
  335. .no-js .tabs ul.tabs--secondary a {
  336. display: block;
  337. line-height: 1;
  338. color: #363636;
  339. border-bottom: 1px solid #d9d9d9;
  340. transition: all, 225ms, ease-in-out;
  341. padding: 1rem 0.5rem 0.625rem;
  342. margin-right: 1rem;
  343. }
  344. .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
  345. text-decoration: none;
  346. color: #363636;
  347. border-bottom: 1px solid #cccccc;
  348. }
  349. .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
  350. border-bottom: 1px solid #cccccc;
  351. }
  352. .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 {
  353. color: #363636;
  354. }
  355. }
  356. /*# sourceMappingURL=tabs.css.map */