tabs.css

Same filename in this branch
  1. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  2. 9 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  3. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  4. 9 core/themes/seven/css/components/tabs.css
  5. 9 core/themes/seven/css/classy/components/tabs.css
  6. 9 core/themes/claro/css/components/tabs.css
  7. 9 core/themes/bartik/css/components/tabs.css
  8. 9 core/themes/bartik/css/classy/components/tabs.css
  9. 9 core/themes/starterkit_theme/css/components/tabs.css
  10. 9 core/themes/classy/css/components/tabs.css
Same filename and directory in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  2. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  3. 8.9.x core/themes/seven/css/components/tabs.css
  4. 8.9.x core/themes/seven/css/classy/components/tabs.css
  5. 8.9.x core/themes/claro/css/components/tabs.css
  6. 8.9.x core/themes/bartik/css/components/tabs.css
  7. 8.9.x core/themes/bartik/css/classy/components/tabs.css
  8. 8.9.x core/themes/classy/css/components/tabs.css
  9. 8.9.x core/assets/vendor/jquery.ui/themes/base/tabs.css
  10. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  11. 10 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  12. 10 core/themes/olivero/css/components/tabs.css
  13. 10 core/themes/claro/css/components/tabs.css
  14. 10 core/themes/starterkit_theme/css/components/tabs.css
  15. 11.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  16. 11.x core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  17. 11.x core/themes/olivero/css/components/tabs.css
  18. 11.x core/themes/claro/css/components/tabs.css
  19. 11.x core/themes/starterkit_theme/css/components/tabs.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
[dir="ltr"] .tabs {
  margin-left: 0;
}
[dir="rtl"] .tabs {
  margin-right: 0;
}
[dir="ltr"] .tabs {
  margin-right: 0;
}
[dir="rtl"] .tabs {
  margin-left: 0;
}
[dir="ltr"] .tabs {
  padding-left: 0;
}
[dir="rtl"] .tabs {
  padding-right: 0;
}
[dir="ltr"] .tabs {
  padding-right: 0;
}
[dir="rtl"] .tabs {
  padding-left: 0;
}
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}

@media (min-width: 43.75rem) {
  .tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.tabs__tab {
  display: none;
  margin: 0;
  margin-bottom: -1px;
}
.tabs__tab.is-active {
  display: flex;
}

@media (min-width: 43.75rem) {
  .tabs__tab {
    display: flex;
    margin: 0;
    margin-bottom: -1px;
  }
}
html:not(.js) .tabs__tab,
.tabs.is-expanded .tabs__tab {
  display: flex;
}
.tabs--secondary .tabs__tab {
  display: block;
}

@media (min-width: 43.75rem) {
  .tabs--secondary .tabs__tab {
    display: flex;
  }
}
[dir="ltr"] .tabs__link {
  padding-left: 1.6875rem;
}
[dir="rtl"] .tabs__link {
  padding-right: 1.6875rem;
}
[dir="ltr"] .tabs__link {
  padding-right: 1.6875rem;
}
[dir="rtl"] .tabs__link {
  padding-left: 1.6875rem;
}
.tabs__link {
  display: flex;
  flex-grow: 1;
  align-items: center;
  height: 3.375rem;
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color 0.2s;
  text-decoration: none;
  letter-spacing: 1px;
  color: #6e7172;
  border: 1px solid #e7edf1;
  background-color: #f7f9fa;
  font-size: 0.875rem;
}
.tabs--secondary .tabs__link {
  text-transform: none;
}

@media (min-width: 43.75rem) {
  .tabs--secondary .tabs__link {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    background-color: transparent;
  }
}
.tabs__link:focus {
  position: relative;
  outline: solid 3px #2494db;
  outline-offset: -3px;
}
.tabs__link:hover {
  background-color: #e7edf1;
}
.tabs__link.is-active {
  position: relative;
  color: #0d1214;
  font-weight: 600;
}
[dir="ltr"] .tabs__link.is-active:after {
  left: -1px;
}
[dir="rtl"] .tabs__link.is-active:after {
  right: -1px;
}
[dir="ltr"] .tabs__link.is-active:after {
  border-left: 0.375rem solid #2494db;
}
[dir="rtl"] .tabs__link.is-active:after {
  border-right: 0.375rem solid #2494db;
}
.tabs__link.is-active:after {
  position: absolute;
  bottom: -1px;
  height: calc(100% + 2px);
  content: "";
}

@media (min-width: 43.75rem) {
  [dir="ltr"] .tabs__link.is-active:after {
    left: 0;
  }
  [dir="rtl"] .tabs__link.is-active:after {
    right: 0;
  }
  [dir="ltr"] .tabs__link.is-active:after {
    border-left: 0;
  }
  [dir="rtl"] .tabs__link.is-active:after {
    border-right: 0;
  }
  .tabs__link.is-active:after {
    width: 100%;
    height: auto;
    border-top: 0.375rem solid #2494db;
  }
}
[dir="ltr"] .tabs__trigger {
  margin-left: -1px;
}
[dir="rtl"] .tabs__trigger {
  margin-right: -1px;
}
[dir="ltr"] .tabs__trigger {
  margin-right: 0;
}
[dir="rtl"] .tabs__trigger {
  margin-left: 0;
}
.tabs__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
  border: solid 1px #e7edf1;
  background-color: #f7f9fa;
}
.tabs__trigger:hover {
  background-color: #e7edf1;
}
.tabs__trigger:focus {
  position: relative;
  border-color: #2494db;
  outline: none;
}

@media (min-width: 43.75rem) {
  .tabs__trigger {
    display: none;
  }
}
html:not(.js) .tabs__trigger {
  display: none;
}
.tabs__trigger-icon {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.625rem;
  margin-top: -2px;
}
[dir="ltr"] .tabs__trigger-icon > span {
  left: 0;
}
[dir="rtl"] .tabs__trigger-icon > span {
  right: 0;
}
.tabs__trigger-icon > span {
  position: absolute;
  display: block;
  width: 100%;
  transition: transform 0.2s, opacity 0.2s, top 0.2s;
  border-top: solid 2px #2494db;
}
.tabs__trigger-icon > span:nth-child(1) {
  top: 0;
}
.tabs__trigger-icon > span:nth-child(2) {
  top: calc(50% + 1px);
}
.tabs__trigger-icon > span:nth-child(3) {
  top: calc(100% + 2px);
}
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {
  top: calc(50% + 1px);
  transform: rotate(45deg);
}
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {
  opacity: 0;
}
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {
  top: calc(50% + 1px);
  transform: rotate(-45deg);
}

File

core/themes/olivero/css/components/tabs.css

View on git.drupalcode.org
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. [dir="ltr"] .tabs {

  8.   margin-left: 0;

  9. }

  10. [dir="rtl"] .tabs {

  11.   margin-right: 0;

  12. }

  13. [dir="ltr"] .tabs {

  14.   margin-right: 0;

  15. }

  16. [dir="rtl"] .tabs {

  17.   margin-left: 0;

  18. }

  19. [dir="ltr"] .tabs {

  20.   padding-left: 0;

  21. }

  22. [dir="rtl"] .tabs {

  23.   padding-right: 0;

  24. }

  25. [dir="ltr"] .tabs {

  26.   padding-right: 0;

  27. }

  28. [dir="rtl"] .tabs {

  29.   padding-left: 0;

  30. }

  31. .tabs {

  32.   display: flex;

  33.   flex-direction: column;

  34.   width: 100%;

  35.   margin-top: 0;

  36.   margin-bottom: 0;

  37.   padding-top: 0;

  38.   padding-bottom: 0;

  39.   list-style: none;

  40. }

  41. 

  42. @media (min-width: 43.75rem) {

  43.   .tabs {

  44.     flex-direction: row;

  45.     flex-wrap: wrap;

  46.   }

  47. }

  48. .tabs__tab {

  49.   display: none;

  50.   margin: 0;

  51.   margin-bottom: -1px;

  52. }

  53. .tabs__tab.is-active {

  54.   display: flex;

  55. }

  56. 

  57. @media (min-width: 43.75rem) {

  58.   .tabs__tab {

  59.     display: flex;

  60.     margin: 0;

  61.     margin-bottom: -1px;

  62.   }

  63. }

  64. html:not(.js) .tabs__tab,

  65. .tabs.is-expanded .tabs__tab {

  66.   display: flex;

  67. }

  68. .tabs--secondary .tabs__tab {

  69.   display: block;

  70. }

  71. 

  72. @media (min-width: 43.75rem) {

  73.   .tabs--secondary .tabs__tab {

  74.     display: flex;

  75.   }

  76. }

  77. [dir="ltr"] .tabs__link {

  78.   padding-left: 1.6875rem;

  79. }

  80. [dir="rtl"] .tabs__link {

  81.   padding-right: 1.6875rem;

  82. }

  83. [dir="ltr"] .tabs__link {

  84.   padding-right: 1.6875rem;

  85. }

  86. [dir="rtl"] .tabs__link {

  87.   padding-left: 1.6875rem;

  88. }

  89. .tabs__link {

  90.   display: flex;

  91.   flex-grow: 1;

  92.   align-items: center;

  93.   height: 3.375rem;

  94.   padding-top: 0;

  95.   padding-bottom: 0;

  96.   transition: background-color 0.2s;

  97.   text-decoration: none;

  98.   letter-spacing: 1px;

  99.   color: #6e7172;

  100.   border: 1px solid #e7edf1;

  101.   background-color: #f7f9fa;

  102.   font-size: 0.875rem;

  103. }

  104. .tabs--secondary .tabs__link {

  105.   text-transform: none;

  106. }

  107. 

  108. @media (min-width: 43.75rem) {

  109.   .tabs--secondary .tabs__link {

  110.     border-top-color: transparent;

  111.     border-right-color: transparent;

  112.     border-left-color: transparent;

  113.     background-color: transparent;

  114.   }

  115. }

  116. .tabs__link:focus {

  117.   position: relative;

  118.   outline: solid 3px #2494db;

  119.   outline-offset: -3px;

  120. }

  121. .tabs__link:hover {

  122.   background-color: #e7edf1;

  123. }

  124. .tabs__link.is-active {

  125.   position: relative;

  126.   color: #0d1214;

  127.   font-weight: 600;

  128. }

  129. [dir="ltr"] .tabs__link.is-active:after {

  130.   left: -1px;

  131. }

  132. [dir="rtl"] .tabs__link.is-active:after {

  133.   right: -1px;

  134. }

  135. [dir="ltr"] .tabs__link.is-active:after {

  136.   border-left: 0.375rem solid #2494db;

  137. }

  138. [dir="rtl"] .tabs__link.is-active:after {

  139.   border-right: 0.375rem solid #2494db;

  140. }

  141. .tabs__link.is-active:after {

  142.   position: absolute;

  143.   bottom: -1px;

  144.   height: calc(100% + 2px);

  145.   content: "";

  146. }

  147. 

  148. @media (min-width: 43.75rem) {

  149.   [dir="ltr"] .tabs__link.is-active:after {

  150.     left: 0;

  151.   }

  152.   [dir="rtl"] .tabs__link.is-active:after {

  153.     right: 0;

  154.   }

  155.   [dir="ltr"] .tabs__link.is-active:after {

  156.     border-left: 0;

  157.   }

  158.   [dir="rtl"] .tabs__link.is-active:after {

  159.     border-right: 0;

  160.   }

  161.   .tabs__link.is-active:after {

  162.     width: 100%;

  163.     height: auto;

  164.     border-top: 0.375rem solid #2494db;

  165.   }

  166. }

  167. [dir="ltr"] .tabs__trigger {

  168.   margin-left: -1px;

  169. }

  170. [dir="rtl"] .tabs__trigger {

  171.   margin-right: -1px;

  172. }

  173. [dir="ltr"] .tabs__trigger {

  174.   margin-right: 0;

  175. }

  176. [dir="rtl"] .tabs__trigger {

  177.   margin-left: 0;

  178. }

  179. .tabs__trigger {

  180.   display: flex;

  181.   align-items: center;

  182.   justify-content: center;

  183.   width: 3.375rem;

  184.   margin-top: 0;

  185.   margin-bottom: 0;

  186.   cursor: pointer;

  187.   border: solid 1px #e7edf1;

  188.   background-color: #f7f9fa;

  189. }

  190. .tabs__trigger:hover {

  191.   background-color: #e7edf1;

  192. }

  193. .tabs__trigger:focus {

  194.   position: relative;

  195.   border-color: #2494db;

  196.   outline: none;

  197. }

  198. 

  199. @media (min-width: 43.75rem) {

  200.   .tabs__trigger {

  201.     display: none;

  202.   }

  203. }

  204. html:not(.js) .tabs__trigger {

  205.   display: none;

  206. }

  207. .tabs__trigger-icon {

  208.   position: relative;

  209.   display: block;

  210.   width: 1.125rem;

  211.   height: 0.625rem;

  212.   margin-top: -2px;

  213. }

  214. [dir="ltr"] .tabs__trigger-icon > span {

  215.   left: 0;

  216. }

  217. [dir="rtl"] .tabs__trigger-icon > span {

  218.   right: 0;

  219. }

  220. .tabs__trigger-icon > span {

  221.   position: absolute;

  222.   display: block;

  223.   width: 100%;

  224.   transition: transform 0.2s, opacity 0.2s, top 0.2s;

  225.   border-top: solid 2px #2494db;

  226. }

  227. .tabs__trigger-icon > span:nth-child(1) {

  228.   top: 0;

  229. }

  230. .tabs__trigger-icon > span:nth-child(2) {

  231.   top: calc(50% + 1px);

  232. }

  233. .tabs__trigger-icon > span:nth-child(3) {

  234.   top: calc(100% + 2px);

  235. }

  236. .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {

  237.   top: calc(50% + 1px);

  238.   transform: rotate(45deg);

  239. }

  240. .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {

  241.   opacity: 0;

  242. }

  243. .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {

  244.   top: calc(50% + 1px);

  245.   transform: rotate(-45deg);

  246. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.