@adobe/coral-spectrum/coral-component-tablist/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-Tabs {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;

  margin: 0;
  padding: 0 8px;
  vertical-align: top;
}
._coral-Tabs-item {
  position: relative;

  box-sizing: border-box;

  height: 46px;
  line-height: 46px;
  z-index: 1;

  text-decoration: none;
  white-space: nowrap;

  transition: color 130ms ease-out;
  cursor: pointer;
  outline: none;
}
._coral-Tabs-item.is-disabled,._coral-Tabs-item.is-disabled ._coral-Tabs-itemLabel {
      cursor: default;
    }
._coral-Tabs-item ._coral-Icon {
    height: 46px;
  }
._coral-Tabs-item ._coral-Icon + ._coral-Tabs-itemLabel {
      margin-left: 5px;
    }
._coral-Tabs-item::before {
    content: '';
    position: absolute;
    top: 50%;

    box-sizing: border-box;

    height: 32px;
    margin-top: -15px;
    left: -8px;
    right: -8px;
    border: 2px solid transparent;
    border-radius: 5px;

    pointer-events: none;
  }
._coral-Tabs-itemLabel {
  cursor: pointer;
  vertical-align: top;
  display: inline-block;

  font-size: 14px;
  font-weight: 400;
}
._coral-Tabs-itemLabel:empty {
    display: none;
  }
._coral-Tabs-selectionIndicator {
  position: absolute;
  left: 0;
  z-index: 0;

  transition: transform 130ms ease-in-out;
  transform-origin: top left;

  border-radius: 1px;
}
._coral-Tabs--compact ._coral-Tabs-item {
    height: 30px;
    line-height: 30px;
  }
._coral-Tabs--compact ._coral-Tabs-item ._coral-Icon {
      height: 30px;
    }
._coral-Tabs--horizontal {
  -ms-flex-align: center;
      align-items: center;

  border-bottom: 2px solid;
}
._coral-Tabs--horizontal ._coral-Tabs-item {
    vertical-align: top;
  }
._coral-Tabs--horizontal ._coral-Tabs-item + *:not(._coral-Tabs-selectionIndicator) {
      margin-left: 24px;
    }
._coral-Tabs--horizontal ._coral-Tabs-selectionIndicator {
    position: absolute;
    bottom: 0;
    height: 2px;

    bottom: -2px;
  }
._coral-Tabs--horizontal._coral-Tabs--compact {
    box-sizing: content-box;
    height: 30px;
    -ms-flex-align: end;
        align-items: end;
  }
._coral-Tabs--quiet,._coral-Tabs--vertical {
  display: -ms-inline-flexbox;
  display: inline-flex;
}
._coral-Tabs--vertical {
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 0;
  border-left: 2px solid;
}
._coral-Tabs--vertical ._coral-Tabs-item {
    height: 44px;
    padding: 0 8px;
    margin-left: 4px;
    margin-bottom: 4px;
  }
._coral-Tabs--vertical ._coral-Tabs-item::before {
      left: -2px;
      right: -2px;
      margin-top: -16px;
    }
._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 4px;
    }
._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-item ._coral-Icon {
        height: 32px;
      }
._coral-Tabs--vertical ._coral-Tabs-selectionIndicator {
    position: absolute;
    left: 0px;
    width: 2px;

    left: -2px;
  }

.coral--large ._coral-Tabs {
  padding: 0 10px;
}
.coral--large ._coral-Tabs-item {

  height: 58px;
  line-height: 58px;

  transition: color 130ms ease-out;
}
.coral--large ._coral-Tabs-item ._coral-Icon {
    height: 58px;
  }
.coral--large ._coral-Tabs-item ._coral-Icon + ._coral-Tabs-itemLabel {
      margin-left: 6px;
    }
.coral--large ._coral-Tabs-item::before {

    height: 40px;
    margin-top: -19px;
    left: -10px;
    right: -10px;
    border: 2px solid transparent;
    border-radius: 6px;
  }
.coral--large ._coral-Tabs-itemLabel {

  font-size: 17px;
  font-weight: 400;
}
.coral--large ._coral-Tabs-selectionIndicator {

  transition: transform 130ms ease-in-out;

  border-radius: 1px;
}
.coral--large ._coral-Tabs--compact ._coral-Tabs-item {
    height: 38px;
    line-height: 38px;
  }
.coral--large ._coral-Tabs--compact ._coral-Tabs-item ._coral-Icon {
      height: 38px;
    }
.coral--large ._coral-Tabs--horizontal {

  border-bottom: 2px solid;
}
.coral--large ._coral-Tabs--horizontal ._coral-Tabs-item + *:not(._coral-Tabs-selectionIndicator) {
      margin-left: 30px;
    }
.coral--large ._coral-Tabs--horizontal ._coral-Tabs-selectionIndicator {
    height: 2px;

    bottom: -2px;
  }
.coral--large ._coral-Tabs--horizontal._coral-Tabs--compact {
    height: 38px;
  }
.coral--large ._coral-Tabs--vertical {
  border-left: 2px solid;
}
.coral--large ._coral-Tabs--vertical ._coral-Tabs-item {
    height: 56px;
    padding: 0 10px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
.coral--large ._coral-Tabs--vertical ._coral-Tabs-item::before {
      left: -2px;
      right: -2px;
      margin-top: -20px;
    }
.coral--large ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-item {
      height: 40px;
      line-height: 40px;
      margin-bottom: 5px;
    }
.coral--large ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-item ._coral-Icon {
        height: 40px;
      }
.coral--large ._coral-Tabs--vertical ._coral-Tabs-selectionIndicator {
    width: 2px;

    left: -2px;
  }

.coral--light ._coral-Tabs {
  border-bottom-color: rgb(234, 234, 234);
}
.coral--light ._coral-Tabs--vertical {
  border-left-color: rgb(234, 234, 234);
}
.coral--light ._coral-Tabs-selectionIndicator {
  background-color: rgb(44, 44, 44);
}
.coral--light ._coral-Tabs-item,.coral--light ._coral-Tabs-item ._coral-Icon {
    color: rgb(110, 110, 110)
  }
.coral--light ._coral-Tabs-item:hover {
    color: rgb(44, 44, 44);
  }
.coral--light ._coral-Tabs-item:hover ._coral-Icon {
      color: rgb(44, 44, 44)
    }
.coral--light ._coral-Tabs-item.is-selected,.coral--light ._coral-Tabs-item.is-selected ._coral-Icon,.coral--light ._coral-Tabs-item.focus-ring {
    color: rgb(44, 44, 44);
  }
.coral--light ._coral-Tabs-item.focus-ring::before {
      border-color: rgb(38, 128, 235);
    }
.coral--light ._coral-Tabs-item.focus-ring ._coral-Icon {
      color: rgb(44, 44, 44)
    }
.coral--light ._coral-Tabs-item.is-disabled {
    color: rgb(179, 179, 179);
  }
.coral--light ._coral-Tabs-item.is-disabled ._coral-Icon {
      color: rgb(202, 202, 202)
    }
.coral--light ._coral-Tabs--quiet {
  border-bottom-color: transparent;
}
.coral--light ._coral-Tabs--quiet ._coral-Tabs-selectionIndicator {
    background-color: rgb(44, 44, 44);
  }
.coral--light ._coral-Tabs--vertical._coral-Tabs--quiet,
.coral--light ._coral-Tabs--vertical._coral-Tabs--compact {
    border-left-color: transparent;
  }
.coral--light ._coral-Tabs--vertical._coral-Tabs--quiet ._coral-Tabs-selectionIndicator,
.coral--light ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-selectionIndicator {
      background-color: rgb(44, 44, 44);
    }

.coral--lightest ._coral-Tabs {
  border-bottom-color: rgb(244, 244, 244);
}
.coral--lightest ._coral-Tabs--vertical {
  border-left-color: rgb(244, 244, 244);
}
.coral--lightest ._coral-Tabs-selectionIndicator {
  background-color: rgb(50, 50, 50);
}
.coral--lightest ._coral-Tabs-item,.coral--lightest ._coral-Tabs-item ._coral-Icon {
    color: rgb(116, 116, 116)
  }
.coral--lightest ._coral-Tabs-item:hover {
    color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Tabs-item:hover ._coral-Icon {
      color: rgb(50, 50, 50)
    }
.coral--lightest ._coral-Tabs-item.is-selected,.coral--lightest ._coral-Tabs-item.is-selected ._coral-Icon,.coral--lightest ._coral-Tabs-item.focus-ring {
    color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Tabs-item.focus-ring::before {
      border-color: rgb(55, 142, 240);
    }
.coral--lightest ._coral-Tabs-item.focus-ring ._coral-Icon {
      color: rgb(50, 50, 50)
    }
.coral--lightest ._coral-Tabs-item.is-disabled {
    color: rgb(188, 188, 188);
  }
.coral--lightest ._coral-Tabs-item.is-disabled ._coral-Icon {
      color: rgb(211, 211, 211)
    }
.coral--lightest ._coral-Tabs--quiet {
  border-bottom-color: transparent;
}
.coral--lightest ._coral-Tabs--quiet ._coral-Tabs-selectionIndicator {
    background-color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Tabs--vertical._coral-Tabs--quiet,
.coral--lightest ._coral-Tabs--vertical._coral-Tabs--compact {
    border-left-color: transparent;
  }
.coral--lightest ._coral-Tabs--vertical._coral-Tabs--quiet ._coral-Tabs-selectionIndicator,
.coral--lightest ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-selectionIndicator {
      background-color: rgb(50, 50, 50);
    }

.coral--dark ._coral-Tabs {
  border-bottom-color: rgb(62, 62, 62);
}
.coral--dark ._coral-Tabs--vertical {
  border-left-color: rgb(62, 62, 62);
}
.coral--dark ._coral-Tabs-selectionIndicator {
  background-color: rgb(255, 255, 255);
}
.coral--dark ._coral-Tabs-item,.coral--dark ._coral-Tabs-item ._coral-Icon {
    color: rgb(185, 185, 185)
  }
.coral--dark ._coral-Tabs-item:hover {
    color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Tabs-item:hover ._coral-Icon {
      color: rgb(255, 255, 255)
    }
.coral--dark ._coral-Tabs-item.is-selected,.coral--dark ._coral-Tabs-item.is-selected ._coral-Icon,.coral--dark ._coral-Tabs-item.focus-ring {
    color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Tabs-item.focus-ring::before {
      border-color: rgb(38, 128, 235);
    }
.coral--dark ._coral-Tabs-item.focus-ring ._coral-Icon {
      color: rgb(255, 255, 255)
    }
.coral--dark ._coral-Tabs-item.is-disabled {
    color: rgb(110, 110, 110);
  }
.coral--dark ._coral-Tabs-item.is-disabled ._coral-Icon {
      color: rgb(90, 90, 90)
    }
.coral--dark ._coral-Tabs--quiet {
  border-bottom-color: transparent;
}
.coral--dark ._coral-Tabs--quiet ._coral-Tabs-selectionIndicator {
    background-color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Tabs--vertical._coral-Tabs--quiet,
.coral--dark ._coral-Tabs--vertical._coral-Tabs--compact {
    border-left-color: transparent;
  }
.coral--dark ._coral-Tabs--vertical._coral-Tabs--quiet ._coral-Tabs-selectionIndicator,
.coral--dark ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-selectionIndicator {
      background-color: rgb(255, 255, 255);
    }

.coral--darkest ._coral-Tabs {
  border-bottom-color: rgb(44, 44, 44);
}
.coral--darkest ._coral-Tabs--vertical {
  border-left-color: rgb(44, 44, 44);
}
.coral--darkest ._coral-Tabs-selectionIndicator {
  background-color: rgb(239, 239, 239);
}
.coral--darkest ._coral-Tabs-item,.coral--darkest ._coral-Tabs-item ._coral-Icon {
    color: rgb(162, 162, 162)
  }
.coral--darkest ._coral-Tabs-item:hover {
    color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Tabs-item:hover ._coral-Icon {
      color: rgb(239, 239, 239)
    }
.coral--darkest ._coral-Tabs-item.is-selected,.coral--darkest ._coral-Tabs-item.is-selected ._coral-Icon,.coral--darkest ._coral-Tabs-item.focus-ring {
    color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Tabs-item.focus-ring::before {
      border-color: rgb(20, 115, 230);
    }
.coral--darkest ._coral-Tabs-item.focus-ring ._coral-Icon {
      color: rgb(239, 239, 239)
    }
.coral--darkest ._coral-Tabs-item.is-disabled {
    color: rgb(92, 92, 92);
  }
.coral--darkest ._coral-Tabs-item.is-disabled ._coral-Icon {
      color: rgb(73, 73, 73)
    }
.coral--darkest ._coral-Tabs--quiet {
  border-bottom-color: transparent;
}
.coral--darkest ._coral-Tabs--quiet ._coral-Tabs-selectionIndicator {
    background-color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Tabs--vertical._coral-Tabs--quiet,
.coral--darkest ._coral-Tabs--vertical._coral-Tabs--compact {
    border-left-color: transparent;
  }
.coral--darkest ._coral-Tabs--vertical._coral-Tabs--quiet ._coral-Tabs-selectionIndicator,
.coral--darkest ._coral-Tabs--vertical._coral-Tabs--compact ._coral-Tabs-selectionIndicator {
      background-color: rgb(239, 239, 239);
    }

._coral-Tabs-item.is-overflowing {
  overflow: hidden;
  text-overflow: ellipsis;
}
._coral-Tabs-item.is-overflowing ._coral-Tabs-itemLabel:not(:empty) {
  display: inline;
}
._coral-Tabs ._coral-Tabs-itemInvalidIcon {
  display: inline;
  margin-right: 0;
  margin-left: 5px;
  float: right;
}
._coral-Tabs--horizontal ._coral-Tabs-selectionIndicator {
  transition: transform 130ms cubic-bezier(.45, 0, .40, 1), width 130ms cubic-bezier(.45, 0, .40, 1);
}
.coral--light ._coral-Tabs-item:not(.is-disabled).is-invalid {
  color: rgb(201, 37, 45);
}
.coral--light ._coral-Tabs-item:not(.is-disabled).is-invalid ._coral-Tabs-itemInvalidIcon ._coral-Icon {
  color: rgb(201, 37, 45);
}
@media (forced-colors: active) {
  .coral--light ._coral-Tabs-item.is-selected {
    border: 1px solid;
  }
}
.coral--lightest ._coral-Tabs-item:not(.is-disabled).is-invalid {
  color: rgb(215, 55, 63);
}
.coral--lightest ._coral-Tabs-item:not(.is-disabled).is-invalid ._coral-Tabs-itemInvalidIcon ._coral-Icon {
  color: rgb(215, 55, 63);
}
@media (forced-colors: active) {
  .coral--lightest ._coral-Tabs-item.is-selected {
    border: 1px solid;
  }
}
.coral--dark ._coral-Tabs-item:not(.is-disabled).is-invalid {
  color: rgb(247, 109, 116);
}
.coral--dark ._coral-Tabs-item:not(.is-disabled).is-invalid ._coral-Tabs-itemInvalidIcon ._coral-Icon {
  color: rgb(247, 109, 116);
}
@media (forced-colors: active) {
  .coral--dark ._coral-Tabs-item.is-selected {
    border: 1px solid;
  }
}
.coral--darkest ._coral-Tabs-item:not(.is-disabled).is-invalid {
  color: rgb(236, 91, 98);
}
.coral--darkest ._coral-Tabs-item:not(.is-disabled).is-invalid ._coral-Tabs-itemInvalidIcon ._coral-Icon {
  color: rgb(236, 91, 98);
}
@media (forced-colors: active) {
  .coral--darkest ._coral-Tabs-item.is-selected {
    border: 1px solid;
  }
}