You are here

Home » API reference » Drupal 10

tabs.pcss.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/claro/css/components/tabs.pcss.css
  2. 10 core/themes/olivero/css/components/tabs.pcss.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/tabs.pcss.css
  2. 9 core/themes/claro/css/components/tabs.pcss.css
/**
 * Tabs.
 */

: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-gray-200);
  --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: var(--color-bgblue-active);
}

.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-gray-025);
  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-gray-800);
  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-gray-800);
  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;
  }

  .tabs-wrapper--secondary {
    position: relative;
  }

  .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-gray-200);
  }

  .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-gray-050), 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

core/themes/claro/css/components/tabs.pcss.css
View source 
  1. /**

  2.  * Tabs.

  3.  */

  4. 

  5. :root {

  6.   /**

  7.   * Tabs.

  8.   */

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

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

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

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

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

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

  15.   --tabs-base-border: 1px solid var(--color-gray-200);

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

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

  18.   --tabs--hover-bg-color: var(--color-bgblue-active);

  19. }

  20. 

  21. .tabs-wrapper > nav {

  22.   width: 100%;

  23. }

  24. .tabs {

  25.   display: flex;

  26.   flex-direction: column;

  27.   width: 100%;

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

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

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

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

  32. }

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

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

  35. }

  36. 

  37. .tabs__tab {

  38.   position: relative;

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

  40.   background-color: var(--color-gray-025);

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

  42.   font-weight: bold;

  43. }

  44. .tabs__tab:last-child {

  45.   border-bottom: 0;

  46. }

  47. .tabs__tab.is-active {

  48.   display: flex;

  49.   justify-content: space-between;

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

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

  52. }

  53. 

  54. .tabs__link {

  55.   position: relative;

  56.   display: flex;

  57.   overflow: hidden;

  58.   flex-grow: 1;

  59.   align-items: center;

  60.   box-sizing: border-box;

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

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

  63.   text-decoration: none;

  64.   color: var(--color-gray-800);

  65.   line-height: 1.2rem;

  66. }

  67. .tabs__link:focus {

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

  69.   margin: -1px;

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

  71.   text-decoration: none;

  72.   color: var(--color-gray-800);

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

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

  75.   outline: none;

  76.   box-shadow: none;

  77. }

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

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

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

  81. }

  82. .tabs__link:hover {

  83.   text-decoration: none;

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

  85. }

  86. .tabs__link.is-active {

  87.   z-index: 1;

  88.   flex-grow: 1;

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

  90. }

  91. .tabs__link.is-active:focus {

  92.   margin: -1px 0;

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

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

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

  96.   border-radius: 0;

  97. }

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

  99.   z-index: 3;

  100. }

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

  102.   border-right: none;

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

  104. }

  105. .tabs__link.is-active:hover {

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

  107. }

  108. /* Active and hover indicator. */

  109. .tabs__tab::before,

  110. .tabs__link::before {

  111.   position: absolute;

  112.   display: block;

  113.   content: "";

  114. }

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

  116.   z-index: 2;

  117.   top: -1px;

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

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

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

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

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

  123. }

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

  125.   right: -1px;

  126.   left: auto;

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

  128.   border-left: none;

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

  130. }

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

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

  133. }

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

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

  136. }

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

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

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

  140. }

  141. 

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

  143.   display: none;

  144. }

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

  146.   display: block;

  147. }

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

  149.   display: flex;

  150. }

  151. 

  152. .tabs__trigger {

  153.   display: flex;

  154.   flex-shrink: 0;

  155.   align-items: center;

  156.   justify-content: center;

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

  158.   padding-right: 1px;

  159.   text-align: center;

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

  161. }

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

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

  164.   border-left: none;

  165. }

  166. .tabs__trigger:focus {

  167.   padding-right: 0;

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

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

  170.   box-shadow: none;

  171. }

  172. 

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

  174.   .tabs-wrapper {

  175.     display: flex;

  176.   }

  177. 

  178.   .tabs-wrapper--secondary {

  179.     position: relative;

  180.   }

  181. 

  182.   .is-horizontal .tabs {

  183.     flex-direction: row;

  184.     width: auto;

  185.     margin: 0;

  186.     border: 0;

  187.     box-shadow: none;

  188.   }

  189. 

  190.   .is-horizontal .tabs--secondary {

  191.     overflow: hidden;

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

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

  194.     border-radius: 0;

  195.   }

  196. 

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

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

  199.   }

  200. 

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

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

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

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

  205.   }

  206. 

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

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

  209.   }

  210. 

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

  212.     position: absolute;

  213.     bottom: 0;

  214.     left: 0;

  215.     display: block;

  216.     width: 100%;

  217.     content: "";

  218.     border-bottom: 1px solid var(--color-gray-200);

  219.   }

  220. 

  221.   .is-horizontal .tabs__tab {

  222.     border-top: none;

  223.     border-bottom: none;

  224.     background: none;

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

  226.   }

  227. 

  228.   .is-horizontal .tabs__tab.is-active {

  229.     order: 0;

  230.     background: none;

  231.     box-shadow: none;

  232.   }

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

  234.     content: none;

  235.   }

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

  237.     border-radius: 0;

  238.   }

  239.   .is-horizontal .tabs__trigger {

  240.     display: none;

  241.   }

  242.   .is-horizontal .tabs__tab {

  243.     display: block;

  244.   }

  245. 

  246.   .is-horizontal .tabs__link {

  247.     padding-right: 2rem;

  248.     padding-left: 2rem;

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

  250.   }

  251. 

  252.   .is-horizontal .tabs__link:focus {

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

  254.     margin: 0;

  255.     padding-right: 2rem;

  256.     padding-left: 2rem;

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

  258.     border: none;

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

  260.     outline: 2px dotted transparent;

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

  262.   }

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

  264.     border: none;

  265.   }

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

  267.     box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  268.   }

  269. 

  270.   .is-horizontal .tabs__link:hover {

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

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

  273.   }

  274. 

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

  276.     top: auto;

  277.     right: 0;

  278.     bottom: 0;

  279.     left: 0;

  280.     width: 100%;

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

  282.     border-right: none;

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

  284.     border-left: none;

  285.   }

  286. }