lucuma-css.lucuma-ui-side-tabs.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of lucuma-ui_sjs1_3 Show documentation
lucuma-ui
There is a newer version: 0.123.0
@use 'lucuma-ui-common.scss' as lucumaUICommon;

:root {
  --accent-color: hsla(120, 73.4%, 74.9%, 80%);
  --site-text-color: var(--text-color);
  --under-tab-background-color: var(--color-background-light-10);
  --under-tab-background-focus-color: var(--color-background-light-6);
  --under-tab-border-color: var(--gray-dark-10);
  --under-tab-background-active-color: var(--color-background-light-20);
  --under-tab-background-focus-active-color: var(--color-background-light-15);
}

// ---------
// Side tabs
// ---------
.p-button-group {
  .p-selectbutton.p-button,
  .p-component.p-button {
    &.bottom-tab-selector,
    &.side-button {
      border: 1px solid var(--under-tab-border-color);
      border-radius: 0.4em;
      background-color: var(--under-tab-background-color);
      font-weight: 200;
      font-size: small;
      margin-left: 0.8em;
      padding-left: 0.3em;
      outline: none;
      box-shadow: none;
      color: var(--under-tab-border-color);

      a {
        color: var(--site-text-color);
      }

      &:not(:first-of-type, last-of-type),
      &:not(button, a, .p-disabled):active {
        border-radius: 0.3em;
      }

      &:hover,
      &:focus,
      &:focus-visible,
      &:not(button, a, .p-disabled):active {
        background-color: var(--under-tab-background-active-color);
        border: 1px solid var(--under-tab-border-color);
      }

      &.p-highlight {
        background-color: var(--under-tab-background-active-color);
        font-weight: bold;
        border-color: transparent;

        &:hover,
        &:focus,
        &:focus-visible {
          background-color: var(--under-tab-background-color);
        }
      }

      // This may not work on FF but it is not very critical
      &:has(.side-tabs-group) {
        margin-bottom: 1em;
      }
    }

    &.side-button {
      padding: {
        top: 1em;
        bottom: 1em;
      }

      &.p-highlight,
      &.p-highlight:hover,
      &.p-highlight:focus,
      &.p-highlight:focus-visible,
      &:hover,
      &:focus,
      &:focus-visible {
        border-left: var(--accent-color) solid 3px;
        border: {
          top: 1px solid transparent;
          right: 1px solid transparent;
          bottom: 1px solid transparent;
        }
      }
    }

    &.bottom-tab-selector {
      &.p-highlight,
      &.p-highlight:hover,
      &.p-highlight:focus,
      &.p-highlight:focus-visible,
      &:hover,
      &:focus,
      &:focus-visible {
        border-top: var(--accent-color) solid 3px;
        border: {
          left: 1px solid transparent;
          right: 1px solid transparent;
          bottom: 1px solid transparent;
        }
      }
    }
  }

  .p-component.p-button {
    &.bottom-tab-selector {
      flex-grow: 1;
      flex-shrink: 1;
      font-weight: 100;
      text-align: center;
      font-size: smaller;
      padding-top: 0.4em;
      margin-right: 0.2em;
      margin-left: 0.4em;
      border-radius: 0.2em;
      border: 1px solid var(--under-tab-border-color);
      background-color: var(--under-tab-background-color);
      display: flex;
      align-items: flex-end;
    }
  }
}

.sidetabs {
  grid-area: sidebar;
  background: var(--sidetab-background);
  overflow: hidden;
}

.sidetabs-body-vertical {
  height: 100%;
  display: none;

  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    display: inherit;
  }
}

.sidetabs-divider {
  display: none;

  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    display: block;
  }
}

.sidetabs-body {
  display: flex;

  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    height: 100%;
    display: block;
    overflow: hidden;
  }
}

.sidetabs-body-horizontal-container {
  display: flex;
  overflow-x: auto;
}

.sidetabs-body-horizontal {
  height: 100%;
  display: flex;
  padding-top: 0.2em;
  padding-bottom: 0;
  justify-content: space-between;
  align-items: stretch;
  border-top: 1px solid var(--under-tab-border-color);
}

// Styles to wrap buttons so they are rotated but respect their layout
// See:
// https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly
.vertical-button {
  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    // In an ideal world this would do the trick but chrome doesn't support this
    // writing-mode: vertical-rl;
    margin-top: -50%;
    display: block;
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%) translateY(22%);
  }
}

.rotation-wrapper-outer {
  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    display: table;
  }
}

.rotation-wrapper-inner {
  @media (min-width: lucumaUICommon.$tablet-responsive-cutoff) {
    padding: 52% 0;
    height: 0;
  }
}