tabs.pcss.css

Same filename and directory in other branches
  1. 10 core/themes/olivero/css/components/tabs.pcss.css
  2. 10 core/themes/claro/css/components/tabs.pcss.css
  3. 11.x core/themes/olivero/css/components/tabs.pcss.css
  4. 11.x core/themes/claro/css/components/tabs.pcss.css
  5. 9 core/themes/olivero/css/components/tabs.pcss.css
  6. 9 core/themes/claro/css/components/tabs.pcss.css
/**
 * Tabs.
 */

@import "../base/variables.pcss.css";

:root {
  /**
  * Tabs.
  */
  --tabs-border-radius-size: var(--base-border-radius);
  --tabs--hover-height: 3px;
  --tabs--focus-height: 3px;
  --tabs--active-height: 3px;
  --tabs-link-height: 3rem; /* 48px */
  --tabs-secondary-link-height: 2.5rem; /* 40px */
  --tabs-base-border: 1px solid var(--color-lightgray);
  --tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);
  --tabs--hover-bg-color: #e6ecf8;
}

.tabs-wrapper > nav {
  width: 100%;
}
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 var(--space-l) 0;
  border: var(--tabs-base-border);
  border-radius: var(--tabs-border-radius-size);
  box-shadow: var(--tabs-base-shadow);
}
[dir="rtl"] .tabs {
  margin: 0 0 var(--space-l) 0;
}

.tabs__tab {
  position: relative;
  border-bottom: var(--tabs-base-border);
  background-color: var(--color-whitesmoke-light);
  font-size: var(--font-size-s);
  font-weight: bold;
}
.tabs__tab:last-child {
  border-bottom: 0;
}
.tabs__tab.is-active {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-white);
  box-shadow: var(--tabs-base-shadow);
}

.tabs__link {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-grow: 1;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--tabs-link-height);
  padding: var(--space-s) var(--space-l);
  text-decoration: none;
  color: var(--color-davysgrey);
  line-height: 1.2rem;
}
.tabs__link:focus {
  min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);
  margin: -1px;
  padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */
  text-decoration: none;
  color: var(--color-davysgrey);
  border: var(--tabs--focus-height) solid var(--color-focus);
  border-radius: var(--tabs-border-radius-size);
  outline: none;
  box-shadow: none;
}
[dir="rtl"] .tabs__link:focus {
  padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);
  padding-left: var(--space-l);
}
.tabs__link:hover {
  text-decoration: none;
  color: var(--color-text);
}
.tabs__link.is-active {
  z-index: 1;
  flex-grow: 1;
  color: var(--color-absolutezero);
}
.tabs__link.is-active:focus {
  margin: -1px 0;
  padding-right: var(--space-l);
  padding-left: var(--space-l);
  border-left: none; /* LTR */
  border-radius: 0;
}
.tabs__link:not(.is-active):focus {
  z-index: 3;
}
[dir="rtl"] .tabs__link.is-active:focus {
  border-right: none;
  border-left: var(--tabs--focus-height) solid var(--color-focus);
}
.tabs__link.is-active:hover {
  color: var(--color-text);
}
/* Active and hover indicator. */
.tabs__tab::before,
.tabs__link::before {
  position: absolute;
  display: block;
  content: "";
}
.tabs__tab.is-active::before {
  z-index: 2;
  top: -1px;
  left: -1px; /* LTR */
  width: var(--tabs--active-height);
  height: calc(100% + 2px);
  border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */
  border-top-left-radius: var(--tabs-border-radius-size); /* LTR */
}
[dir="rtl"] .tabs__tab.is-active::before {
  right: -1px;
  left: auto;
  border-right: var(--tabs--focus-height) solid var(--color-absolutezero);
  border-left: none;
  border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);
}
.tabs.is-open .tabs__tab.is-active::before {
  border-bottom-left-radius: 0; /* LTR */
}
[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {
  border-bottom-right-radius: var(--tabs-border-radius-size);
}
.tabs__tab.is-active:focus::before {
  top: calc(var(--tabs--focus-height) * -1);
  height: calc(var(--tabs-link-height) + 2px);
}

.tabs__tab:not(.is-active) {
  display: none;
}
.tabs--secondary .tabs__tab:not(.is-active) {
  display: block;
}
.tabs.is-open > .tabs__tab {
  display: flex;
}

.tabs__trigger {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tabs-link-height);
  padding-right: 1px;
  text-align: center;
  border-left: var(--tabs-trigger-border); /* LTR */
}
[dir="rtl"] .tabs__trigger {
  border-right: var(--tabs-trigger-border);
  border-left: none;
}
.tabs__trigger:focus {
  padding-right: 0;
  border: var(--tabs--focus-height) solid var(--color-focus);
  border-radius: var(--tabs-border-radius-size);
  box-shadow: none;
}

@media screen and (min-width: 48em) {
  .tabs-wrapper {
    display: flex;
  }
  .is-horizontal .tabs {
    flex-direction: row;
    width: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .is-horizontal .tabs--secondary {
    overflow: hidden;
    margin: calc(calc(var(--tabs--focus-height) + 3px) * -1) calc(calc(var(--tabs--focus-height) + 3px) * -1) 0;
    padding: calc(var(--tabs--focus-height) + 3px) calc(var(--tabs--focus-height) + 3px) 0;
    border-radius: 0;
  }

  .is-horizontal .tabs--secondary .tabs__tab {
    font-size: var(--font-size-s);
  }

  .is-horizontal .tabs--secondary .tabs__link {
    min-height: var(--tabs-secondary-link-height);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }

  .is-horizontal .tabs--secondary .tabs__link:focus {
    min-height: var(--tabs-secondary-link-height);
  }

  .is-horizontal .tabs--secondary::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    content: "";
    border-bottom: 1px solid var(--color-lightgray);
  }

  .is-horizontal .tabs__tab {
    border-top: none;
    border-bottom: none;
    background: none;
    font-size: var(--font-size-base);
  }
  .is-horizontal .tabs__tab.is-active {
    order: 0;
    background: none;
    box-shadow: none;
  }
  .is-horizontal .tabs__tab.is-active::before {
    content: none;
  }
  .is-horizontal .tabs__tab .tabs__link.is-active::before {
    border-radius: 0;
  }
  .is-horizontal .tabs__trigger {
    display: none;
  }
  .is-horizontal .tabs__tab {
    display: block;
  }

  .is-horizontal .tabs__link {
    padding-right: 2rem;
    padding-left: 2rem;
    border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
  }

  .is-horizontal .tabs__link:focus {
    min-height: var(--tabs-link-height);
    margin: 0;
    padding-right: 2rem;
    padding-left: 2rem;
    color: var(--color-text);
    border: none;
    border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
    outline: 2px dotted transparent;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
  }
  [dir="rtl"] .is-horizontal .tabs__link:focus {
    border: none;
  }
  .is-horizontal .tabs--primary .tabs__link:focus {
    box-shadow: 0 0 0 2px var(--color-whitesmoke), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
  }

  .is-horizontal .tabs__link:hover {
    color: var(--color-absolutezero-hover);
    background: var(--tabs--hover-bg-color);
  }

  .is-horizontal .tabs__link.is-active::before {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--tabs--active-height);
    border-right: none;
    border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);
    border-left: none;
  }
}

File

View on git.drupalcode.org

core/themes/claro/css/components/tabs.pcss.css

View source 
  1. /**

  2.  * Tabs.

  3.  */

  4. 

  5. @import "../base/variables.pcss.css";

  6. 

  7. :root {

  8.   /**

  9.   * Tabs.

  10.   */

  11.   --tabs-border-radius-size: var(--base-border-radius);

  12.   --tabs--hover-height: 3px;

  13.   --tabs--focus-height: 3px;

  14.   --tabs--active-height: 3px;

  15.   --tabs-link-height: 3rem; /* 48px */

  16.   --tabs-secondary-link-height: 2.5rem; /* 40px */

  17.   --tabs-base-border: 1px solid var(--color-lightgray);

  18.   --tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  19.   --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);

  20.   --tabs--hover-bg-color: #e6ecf8;

  21. }

  22. 

  23. .tabs-wrapper > nav {

  24.   width: 100%;

  25. }

  26. .tabs {

  27.   display: flex;

  28.   flex-direction: column;

  29.   width: 100%;

  30.   margin: 0 0 var(--space-l) 0;

  31.   border: var(--tabs-base-border);

  32.   border-radius: var(--tabs-border-radius-size);

  33.   box-shadow: var(--tabs-base-shadow);

  34. }

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

  36.   margin: 0 0 var(--space-l) 0;

  37. }

  38. 

  39. .tabs__tab {

  40.   position: relative;

  41.   border-bottom: var(--tabs-base-border);

  42.   background-color: var(--color-whitesmoke-light);

  43.   font-size: var(--font-size-s);

  44.   font-weight: bold;

  45. }

  46. .tabs__tab:last-child {

  47.   border-bottom: 0;

  48. }

  49. .tabs__tab.is-active {

  50.   display: flex;

  51.   justify-content: space-between;

  52.   background-color: var(--color-white);

  53.   box-shadow: var(--tabs-base-shadow);

  54. }

  55. 

  56. .tabs__link {

  57.   position: relative;

  58.   display: flex;

  59.   overflow: hidden;

  60.   flex-grow: 1;

  61.   align-items: center;

  62.   box-sizing: border-box;

  63.   min-height: var(--tabs-link-height);

  64.   padding: var(--space-s) var(--space-l);

  65.   text-decoration: none;

  66.   color: var(--color-davysgrey);

  67.   line-height: 1.2rem;

  68. }

  69. .tabs__link:focus {

  70.   min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);

  71.   margin: -1px;

  72.   padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */

  73.   text-decoration: none;

  74.   color: var(--color-davysgrey);

  75.   border: var(--tabs--focus-height) solid var(--color-focus);

  76.   border-radius: var(--tabs-border-radius-size);

  77.   outline: none;

  78.   box-shadow: none;

  79. }

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

  81.   padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);

  82.   padding-left: var(--space-l);

  83. }

  84. .tabs__link:hover {

  85.   text-decoration: none;

  86.   color: var(--color-text);

  87. }

  88. .tabs__link.is-active {

  89.   z-index: 1;

  90.   flex-grow: 1;

  91.   color: var(--color-absolutezero);

  92. }

  93. .tabs__link.is-active:focus {

  94.   margin: -1px 0;

  95.   padding-right: var(--space-l);

  96.   padding-left: var(--space-l);

  97.   border-left: none; /* LTR */

  98.   border-radius: 0;

  99. }

  100. .tabs__link:not(.is-active):focus {

  101.   z-index: 3;

  102. }

  103. [dir="rtl"] .tabs__link.is-active:focus {

  104.   border-right: none;

  105.   border-left: var(--tabs--focus-height) solid var(--color-focus);

  106. }

  107. .tabs__link.is-active:hover {

  108.   color: var(--color-text);

  109. }

  110. /* Active and hover indicator. */

  111. .tabs__tab::before,

  112. .tabs__link::before {

  113.   position: absolute;

  114.   display: block;

  115.   content: "";

  116. }

  117. .tabs__tab.is-active::before {

  118.   z-index: 2;

  119.   top: -1px;

  120.   left: -1px; /* LTR */

  121.   width: var(--tabs--active-height);

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

  123.   border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */

  124.   border-top-left-radius: var(--tabs-border-radius-size); /* LTR */

  125. }

  126. [dir="rtl"] .tabs__tab.is-active::before {

  127.   right: -1px;

  128.   left: auto;

  129.   border-right: var(--tabs--focus-height) solid var(--color-absolutezero);

  130.   border-left: none;

  131.   border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);

  132. }

  133. .tabs.is-open .tabs__tab.is-active::before {

  134.   border-bottom-left-radius: 0; /* LTR */

  135. }

  136. [dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {

  137.   border-bottom-right-radius: var(--tabs-border-radius-size);

  138. }

  139. .tabs__tab.is-active:focus::before {

  140.   top: calc(var(--tabs--focus-height) * -1);

  141.   height: calc(var(--tabs-link-height) + 2px);

  142. }

  143. 

  144. .tabs__tab:not(.is-active) {

  145.   display: none;

  146. }

  147. .tabs--secondary .tabs__tab:not(.is-active) {

  148.   display: block;

  149. }

  150. .tabs.is-open > .tabs__tab {

  151.   display: flex;

  152. }

  153. 

  154. .tabs__trigger {

  155.   display: flex;

  156.   flex-shrink: 0;

  157.   align-items: center;

  158.   justify-content: center;

  159.   width: var(--tabs-link-height);

  160.   padding-right: 1px;

  161.   text-align: center;

  162.   border-left: var(--tabs-trigger-border); /* LTR */

  163. }

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

  165.   border-right: var(--tabs-trigger-border);

  166.   border-left: none;

  167. }

  168. .tabs__trigger:focus {

  169.   padding-right: 0;

  170.   border: var(--tabs--focus-height) solid var(--color-focus);

  171.   border-radius: var(--tabs-border-radius-size);

  172.   box-shadow: none;

  173. }

  174. 

  175. @media screen and (min-width: 48em) {

  176.   .tabs-wrapper {

  177.     display: flex;

  178.   }

  179.   .is-horizontal .tabs {

  180.     flex-direction: row;

  181.     width: auto;

  182.     margin: 0;

  183.     border: 0;

  184.     box-shadow: none;

  185.   }

  186. 

  187.   .is-horizontal .tabs--secondary {

  188.     overflow: hidden;

  189.     margin: calc(calc(var(--tabs--focus-height) + 3px) * -1) calc(calc(var(--tabs--focus-height) + 3px) * -1) 0;

  190.     padding: calc(var(--tabs--focus-height) + 3px) calc(var(--tabs--focus-height) + 3px) 0;

  191.     border-radius: 0;

  192.   }

  193. 

  194.   .is-horizontal .tabs--secondary .tabs__tab {

  195.     font-size: var(--font-size-s);

  196.   }

  197. 

  198.   .is-horizontal .tabs--secondary .tabs__link {

  199.     min-height: var(--tabs-secondary-link-height);

  200.     padding-top: var(--space-xs);

  201.     padding-bottom: var(--space-xs);

  202.   }

  203. 

  204.   .is-horizontal .tabs--secondary .tabs__link:focus {

  205.     min-height: var(--tabs-secondary-link-height);

  206.   }

  207. 

  208.   .is-horizontal .tabs--secondary::after {

  209.     position: absolute;

  210.     bottom: 0;

  211.     left: 0;

  212.     display: block;

  213.     width: 100%;

  214.     content: "";

  215.     border-bottom: 1px solid var(--color-lightgray);

  216.   }

  217. 

  218.   .is-horizontal .tabs__tab {

  219.     border-top: none;

  220.     border-bottom: none;

  221.     background: none;

  222.     font-size: var(--font-size-base);

  223.   }

  224.   .is-horizontal .tabs__tab.is-active {

  225.     order: 0;

  226.     background: none;

  227.     box-shadow: none;

  228.   }

  229.   .is-horizontal .tabs__tab.is-active::before {

  230.     content: none;

  231.   }

  232.   .is-horizontal .tabs__tab .tabs__link.is-active::before {

  233.     border-radius: 0;

  234.   }

  235.   .is-horizontal .tabs__trigger {

  236.     display: none;

  237.   }

  238.   .is-horizontal .tabs__tab {

  239.     display: block;

  240.   }

  241. 

  242.   .is-horizontal .tabs__link {

  243.     padding-right: 2rem;

  244.     padding-left: 2rem;

  245.     border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;

  246.   }

  247. 

  248.   .is-horizontal .tabs__link:focus {

  249.     min-height: var(--tabs-link-height);

  250.     margin: 0;

  251.     padding-right: 2rem;

  252.     padding-left: 2rem;

  253.     color: var(--color-text);

  254.     border: none;

  255.     border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;

  256.     outline: 2px dotted transparent;

  257.     box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  258.   }

  259.   [dir="rtl"] .is-horizontal .tabs__link:focus {

  260.     border: none;

  261.   }

  262.   .is-horizontal .tabs--primary .tabs__link:focus {

  263.     box-shadow: 0 0 0 2px var(--color-whitesmoke), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  264.   }

  265. 

  266.   .is-horizontal .tabs__link:hover {

  267.     color: var(--color-absolutezero-hover);

  268.     background: var(--tabs--hover-bg-color);

  269.   }

  270. 

  271.   .is-horizontal .tabs__link.is-active::before {

  272.     top: auto;

  273.     right: 0;

  274.     bottom: 0;

  275.     left: 0;

  276.     width: 100%;

  277.     height: var(--tabs--active-height);

  278.     border-right: none;

  279.     border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);

  280.     border-left: none;

  281.   }

  282. }

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