@conduction/components/lib/components/tabs/Tabs.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-tabs-tab-background-color: #ffffff;
  --conduction-tabs-tab-color: #4a4a4a;
  /* --conduction-tabs-tab-border-width: 0px; */
  /* --conduction-tabs-tab-border-style: solid; */
  /* --conduction-tabs-tab-border-color: #ffffff; */
  /* --conduction-tabs-tab-border-bottom: 0px; */
  /* --conduction-tabs-tab-border-bottom-width: var(--skeleton-size-3xs); */
  /* --conduction-tabs-tab-border-bottom-style: solid; */
  /* --conduction-tabs-tab-border-bottom-color: #d1d1d1; */
  --conduction-tabs-tab-bottom: -2px;
  --conduction-tabs-tab-padding-block-start: var(--skeleton-size-xs);
  --conduction-tabs-tab-padding-block-end: var(--skeleton-size-xs);
  --conduction-tabs-tab-padding-inline-start: var(--skeleton-size-sm);
  --conduction-tabs-tab-padding-inline-end: var(--skeleton-size-sm);
  /* --conduction-tabs-tab-margin-inline-end: var(--skeleton-size-xs); */
  --conduction-tabs-tab-font-size: var(--skeleton-font-size-sm);
  --conduction-tabs-tab-font-weight: var(--skeleton-font-weight-normal);
  --conduction-tabs-tab-font-family: "Noto Sans", Arial, sans-serif;
  --conduction-tabs-tab-max-width: unset;
  /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
  /* --conduction-tabs-tab-text-transform: uppercase; */

  --conduction-tabs-scroll-button-background-color: #ffffff;
  --conduction-tabs-scroll-button-color: #4a4a4a;
  --conduction-tabs-scroll-button-hover-background-color: #ffffff;
  --conduction-tabs-scroll-button-hover-color: #4376fc;
  /* --conduction-tabs-scroll-button-border-width: 1px; */
  /* --conduction-tabs-scroll-button-border-style: solid; */
  /* --conduction-tabs-scroll-button-border-color: #4376fc; */

  --conduction-tabs-tab-selected-background-color: #ffffff;
  --conduction-tabs-tab-selected-color: #4a4a4a;
  /* --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 1px #ffffff; */
  /* --conduction-tabs-tab-selected-border-width: 0px; */
  /* --conduction-tabs-tab-selected-border-style: solid; */
  /* --conduction-tabs-tab-selected-border-color: #ffffff; */
  /* --conduction-tabs-tab-selected-border-bottom: 0; */
  --conduction-tabs-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
  --conduction-tabs-tab-selected-border-bottom-style: solid;
  --conduction-tabs-tab-selected-border-bottom-color: #4376fc;
  --conduction-tabs-tab-selected-font-weight: var(--skeleton-font-weight-bold);
  --conduction-tabs-tab-selected-font-family: "Noto Sans", Arial, sans-serif;
  /* --conduction-tabs-tab-selected-hover-background-color: #ffffff; */
  /* --conduction-tabs-tab-selected-hover-color: #4a4a4a; */
  /* --conduction-tabs-tab-selected-hover-text-decoration: underline; */

  /* --conduction-tabs-tab-hover-background-color: #ffffff; */
  /* --conduction-tabs-tab-hover-color: #4a4a4a; */
  /* --conduction-tabs-tab-hover-text-decoration: underline; */

  --conduction-tabs-tab-list-padding-inline-start: 0px;
  --conduction-tabs-tab-list-margin-block-end: 16px;
  --conduction-tabs-tab-list-border-bottom-width: var(--skeleton-size-3xs);
  --conduction-tabs-tab-list-border-bottom-style: solid;
  --conduction-tabs-tab-list-border-bottom-color: #d1d1d1;

  /* --conduction-tabs-tab-panel-background-color: #ffffff; */
  --conduction-tabs-tab-panel-padding-block-start: var(--skeleton-size-lg);
  --conduction-tabs-tab-panel-padding-block-end: var(--skeleton-size-lg);
  --conduction-tabs-tab-panel-padding-inline-start: var(--skeleton-size-lg);
  --conduction-tabs-tab-panel-padding-inline-end: var(--skeleton-size-lg);
  /* --conduction-tabs-tab-panel-border-width: 0px; */
  /* --conduction-tabs-tab-panel-border-style: solid; */
  /* --conduction-tabs-tab-panel-border-color: #ffffff; */
  /* --conduction-tabs-tab-panel-border-top: 0; */
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;

  background-color: var(--conduction-tabs-tab-background-color);
  color: var(--conduction-tabs-tab-color);
  border-width: var(--conduction-tabs-tab-border-width);
  border-style: var(--conduction-tabs-tab-border-style);
  border-color: var(--conduction-tabs-tab-border-color);
  border-bottom: var(--conduction-tabs-tab-border-bottom);
  border-bottom-width: var(--conduction-tabs-tab-border-bottom-width);
  border-bottom-style: var(--conduction-tabs-tab-border-bottom-style);
  border-bottom-color: var(--conduction-tabs-tab-border-bottom-color);
  bottom: var(--conduction-tabs-tab-bottom);
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
  font-size: var(--conduction-tabs-tab-font-size);
  font-weight: var(--conduction-tabs-tab-font-weight);
  font-family: var(--conduction-tabs-tab-font-family);
  min-height: var(--conduction-tabs-tab-min-height);
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
  text-transform: var(--conduction-tabs-tab-text-transform);
  flex-shrink: 0;
}

.tabButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;

  border-width: var(--conduction-tabs-scroll-button-border-width, var(--conduction-tabs-tab-border-width));
  border-style: var(--conduction-tabs-scroll-button-border-style, var(--conduction-tabs-tab-border-style));
  border-color: var(--conduction-tabs-scroll-button-border-color, var(--conduction-tabs-tab-border-color));
  background-color: var(--conduction-tabs-scroll-button-background-color);
  color: var(--conduction-tabs-tab-button-color);
  bottom: var(--conduction-tabs-tab-bottom);
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
  font-size: var(--conduction-tabs-tab-font-size);
  font-weight: var(--conduction-tabs-tab-font-weight);
  font-family: var(--conduction-tabs-tab-font-family);
  min-height: var(--conduction-tabs-tab-min-height);
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
  text-transform: var(--conduction-tabs-tab-text-transform);
}

.tabButton:hover {
  background-color: var(--conduction-tabs-scroll-button-hover-background-color);
  color: var(--conduction-tabs-scroll-button-hover-color);
}
.tabButton:hover > * {
  background-color: var(--conduction-tabs-scroll-button-hover-background-color);
  color: var(--conduction-tabs-scroll-button-hover-color);
}

.tabListContainer {
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
}

/* TabSelected */
.tab[aria-selected="true"] {
  background-color: var(--conduction-tabs-tab-selected-background-color);
  color: var(--conduction-tabs-tab-selected-color);
  box-shadow: var(--conduction-tabs-tab-selected-box-shadow);
  border-width: var(--conduction-tabs-tab-selected-border-width);
  border-style: var(--conduction-tabs-tab-selected-border-style);
  border-color: var(--conduction-tabs-tab-selected-border-color);
  border-bottom: var(--conduction-tabs-tab-selected-border-bottom);
  border-bottom-width: var(--conduction-tabs-tab-selected-border-bottom-width);
  border-bottom-style: var(--conduction-tabs-tab-selected-border-bottom-style);
  border-bottom-color: var(--conduction-tabs-tab-selected-border-bottom-color);
  font-weight: var(--conduction-tabs-tab-selected-font-weight);
  font-family: var(--conduction-tabs-tab-selected-font-family);
}

.tab[aria-selected="true"]:hover {
  background-color: var(--conduction-tabs-tab-selected-hover-background-color);
  color: var(--conduction-tabs-tab-selected-hover-color);
  text-decoration: var(--conduction-tabs-tab-selected-hover-text-decoration);
}
.tab:hover {
  background-color: var(--conduction-tabs-tab-hover-background-color);
  color: var(--conduction-tabs-tab-hover-color);
  text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
  font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
}

.tabList {
  display: flex;
  padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
  margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
  width: auto;
}

.tabListOverflow {
  display: flex;
  padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
  margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
  width: max-content;
}

.tabList :not(:last-child) {
  margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
}

/* TabPanel */
.tabs [class*="react-tabs__tab-panel--selected"] {
  background-color: var(--conduction-tabs-tab-panel-background-color);
  padding-block-start: var(--conduction-tabs-tab-panel-padding-block-start);
  padding-block-end: var(--conduction-tabs-tab-panel-padding-block-end);
  padding-inline-start: var(--conduction-tabs-tab-panel-padding-inline-start);
  padding-inline-end: var(--conduction-tabs-tab-panel-padding-inline-end);
  border-width: var(--conduction-tabs-tab-panel-border-width);
  border-style: var(--conduction-tabs-tab-panel-border-style);
  border-color: var(--conduction-tabs-tab-panel-border-color);
  border-top: var(--conduction-tabs-tab-panel-border-top);
}

.scrollButton {
  background-color: var(--conduction-tabs-scroll-button-background-color);
  color: var(--conduction-tabs-scroll-button-color);
}

.container {
  position: relative;
}

.wrapper {
  overflow-x: scroll;
  display: flex;
}
.wrapperTouchscreen {
  overflow-x: scroll;
}

.scrollRightButton,
.scrollLeftButton {
  position: absolute;
}

.scrollRightButton {
  right: 0;
}

.scrollLeftButton {
  left: 0;
  z-index: 1;
}

/* Hide scrollbar */
.wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}