@inera/ids-design 8.2.0 → 9.0.0

package/components/tabs/tab.css

@@ -1,142 +0,0 @@
-/*******
-* ICONS
-********/
-/*******
-* BUTTONS
-********/
-/*******
-* SCROLLBAR
-********/
-/*******
-* FORM
-********/
-/*******
-* A11Y
-********/
-:host(.ids-tab) {
-  border-radius: var(--IDS-TAB__BORDER-RADIUS);
-}
-
-:host(:not([selected]):focus-visible),
-:host(:focus-visible) {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: 0;
-  z-index: 10;
-}
-
-.ids-tab {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.ids-tab:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-tab {
-  display: flex;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: var(--IDS-TAB__COLOR);
-  overflow: hidden;
-  padding: 0.4375rem 1.4375rem;
-  border-top: var(--IDS-TAB__BORDER);
-  border-left: var(--IDS-TAB__BORDER);
-  border-right: var(--IDS-TAB__BORDER);
-  border-radius: var(--IDS-TAB__BORDER-RADIUS);
-}
-.ids-tab:after {
-  content: "";
-  position: absolute;
-  height: 0.25rem;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--IDS-TABS__BORDER-BOTTOM-COLOR);
-  z-index: 2;
-}
-.ids-tab:focus-visible {
-  z-index: 2;
-}
-.ids-tab .ids-tab__label {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  color: var(--IDS-TAB__COLOR);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.6875rem;
-  text-align: center;
-}
-.ids-tab .ids-tab__label:before {
-  content: "";
-  background-color: transparent;
-  position: absolute;
-  width: 100%;
-  left: 0;
-  right: 0;
-  height: var(--IDS-TAB--SELECTED__TOP-BORDER-HEIGHT);
-  top: 0;
-}
-.ids-tab:hover {
-  padding: 0.4375rem 1.375rem;
-  border-top: var(--IDS-TAB--HOVER-BORDER-TOP);
-  border-left: var(--IDS-TAB--HOVER-BORDER);
-  border-right: var(--IDS-TAB--HOVER-BORDER);
-}
-.ids-tab:hover .ids-tab__label {
-  color: var(--IDS-TAB--HOVER-COLOR);
-}
-.ids-tab:hover .ids-tab__label:before {
-  background-color: var(--IDS-TAB--HOVER-BEFORE-COLOR);
-}
-.ids-tab.ids-tab--selected {
-  padding: 0.4375rem 1.375rem;
-  color: var(--IDS-TAB--SELECTED__COLOR);
-  background-color: var(--IDS-TAB--SELECTED__BACKGROUND-COLOR);
-  border-top: var(--IDS-TAB--SELECTED__BORDER-TOP);
-  border-left: var(--IDS-TAB--SELECTED__BORDER);
-  border-right: var(--IDS-TAB--SELECTED__BORDER);
-}
-.ids-tab.ids-tab--selected .ids-tab__label {
-  color: var(--IDS-TAB--SELECTED__COLOR);
-}
-.ids-tab.ids-tab--selected .ids-tab__label:before {
-  background-color: var(--IDS-TAB--SELECTED__BORDER-COLOR);
-}
-.ids-tab.ids-tab--selected:after {
-  background-color: var(--IDS-TAB--SELECTED__BORDER-BOTTOM-COLOR);
-}
-.ids-tab .ids-tab-icon,
-.ids-tab ::slotted([slot=icon]) {
-  display: flex !important;
-  align-self: center !important;
-  font-size: 1.25rem !important;
-  color: var(--IDS-TAB-ICON__COLOR);
-  margin-right: 0.5rem;
-}
-.ids-tab .ids-tab-extra {
-  margin-left: 0.5rem;
-}