You are here

Home » API reference » Drupal 9

tabs.css in Drupal 9

Same filename in this branch
  1. 9 core/themes/starterkit_theme/css/components/tabs.css
  2. 9 core/themes/classy/css/components/tabs.css
  3. 9 core/themes/claro/css/components/tabs.css
  4. 9 core/themes/seven/css/components/tabs.css
  5. 9 core/themes/olivero/css/components/tabs.css
  6. 9 core/themes/bartik/css/components/tabs.css
  7. 9 core/themes/seven/css/classy/components/tabs.css
  8. 9 core/themes/bartik/css/classy/components/tabs.css
  9. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  10. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  11. 9 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
Same filename and directory in other branches
  1. 10 core/themes/olivero/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: 6px solid #2494db
}
[dir="rtl"] .tabs__link.is-active:after {
    border-right: 6px 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: 6px 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 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. @media (min-width: 43.75rem) {

  42. .tabs {

  43.     flex-direction: row;

  44.     flex-wrap: wrap

  45. }

  46.   }

  47. .tabs__tab {

  48.   display: none;

  49.   margin: 0;

  50.   margin-bottom: -1px

  51. }

  52. .tabs__tab.is-active {

  53.     display: flex;

  54.   }

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

  56. .tabs__tab {

  57.     display: flex;

  58.     margin: 0;

  59.     margin-bottom: -1px

  60. }

  61.   }

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

  63. .tabs.is-expanded .tabs__tab {

  64.   display: flex;

  65. }

  66. .tabs--secondary .tabs__tab {

  67.   display: block

  68. }

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

  70. .tabs--secondary .tabs__tab {

  71.     display: flex

  72. }

  73.   }

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

  75.   padding-left: 1.6875rem

  76. }

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

  78.   padding-right: 1.6875rem

  79. }

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

  81.   padding-right: 1.6875rem

  82. }

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

  84.   padding-left: 1.6875rem

  85. }

  86. .tabs__link {

  87.   display: flex;

  88.   flex-grow: 1;

  89.   align-items: center;

  90.   height: 3.375rem;

  91.   padding-top: 0;

  92.   padding-bottom: 0;

  93.   transition: background-color 0.2s;

  94.   text-decoration: none;

  95.   letter-spacing: 1px;

  96.   color: #6e7172;

  97.   border: 1px solid #e7edf1;

  98.   background-color: #f7f9fa;

  99.   font-size: 0.875rem;

  100. }

  101. .tabs--secondary .tabs__link {

  102.   text-transform: none

  103. }

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

  105. .tabs--secondary .tabs__link {

  106.     border-top-color: transparent;

  107.     border-right-color: transparent;

  108.     border-left-color: transparent;

  109.     background-color: transparent

  110. }

  111.   }

  112. .tabs__link:focus {

  113.   position: relative;

  114.   outline: solid 3px #2494db;

  115.   outline-offset: -3px;

  116. }

  117. .tabs__link:hover {

  118.   background-color: #e7edf1;

  119. }

  120. .tabs__link.is-active {

  121.   position: relative;

  122.   color: #0d1214;

  123.   font-weight: 600

  124. }

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

  126.     left: -1px

  127. }

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

  129.     right: -1px

  130. }

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

  132.     border-left: 6px solid #2494db

  133. }

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

  135.     border-right: 6px solid #2494db

  136. }

  137. .tabs__link.is-active:after {

  138.     position: absolute;

  139.     bottom: -1px;

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

  141.     content: "";

  142.   }

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

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

  145.       left: 0

  146.   }

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

  148.       right: 0

  149.   }

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

  151.       border-left: 0

  152.   }

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

  154.       border-right: 0

  155.   }

  156.     .tabs__link.is-active:after {

  157.       width: 100%;

  158.       height: auto;

  159.       border-top: 6px solid #2494db;

  160.     }

  161.   }

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

  163.   margin-left: -1px

  164. }

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

  166.   margin-right: -1px

  167. }

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

  169.   margin-right: 0

  170. }

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

  172.   margin-left: 0

  173. }

  174. .tabs__trigger {

  175.   display: flex;

  176.   align-items: center;

  177.   justify-content: center;

  178.   width: 3.375rem;

  179.   margin-top: 0;

  180.   margin-bottom: 0;

  181.   cursor: pointer;

  182.   border: solid 1px #e7edf1;

  183.   background-color: #f7f9fa

  184. }

  185. .tabs__trigger:hover {

  186.     background-color: #e7edf1;

  187.   }

  188. .tabs__trigger:focus {

  189.     position: relative;

  190.     border-color: #2494db;

  191.     outline: none;

  192.   }

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

  194. .tabs__trigger {

  195.     display: none

  196. }

  197.   }

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

  199.   display: none;

  200. }

  201. .tabs__trigger-icon {

  202.   position: relative;

  203.   display: block;

  204.   width: 1.125rem;

  205.   height: 0.625rem;

  206.   margin-top: -2px

  207. }

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

  209.     left: 0

  210. }

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

  212.     right: 0

  213. }

  214. .tabs__trigger-icon > span {

  215.     position: absolute;

  216.     display: block;

  217.     width: 100%;

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

  219.     border-top: solid 2px #2494db

  220.   }

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

  222.       top: 0;

  223.     }

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

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

  226.     }

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

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

  229.     }

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

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

  232.       transform: rotate(45deg);

  233.     }

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

  235.       opacity: 0;

  236.     }

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

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

  239.       transform: rotate(-45deg);

  240.     }