@elliemae/ds-basic 2.0.0-alpha.1 → 2.0.0-alpha.13

package/styles/components/packages/ds-tabs/DSTabs.scss

@@ -1,272 +0,0 @@
-// ********************************************
-// container definition
-$tabs-container: #{$prefix}-tabs;
-$tab-bar-container: #{$tabs-container}-tab-bar;
-$panels-container: #{$tabs-container}-panels;
-
-// ********************************************
-// element definition
-$tab-el: #{$tab-bar-container}__tab;
-$tab-list-el: #{$tabs-container}__list;
-$subtab-list-el: #{$tabs-container}__subtabs-list;
-$tab-separator-el: #{$tabs-container}__tab-separator;
-
-.#{$tabs-container} {
-  &__tab-bar-container {
-    display: flex;
-  }
-}
-
-.#{$tab-bar-container} {
-  &__list {
-    position: relative;
-    border-bottom: border-size() solid color(neutral, 400);
-    display: flex;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__list--carousel {
-    max-width: 100%;
-  }
-
-  &__subtabs-list {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex: 1;
-
-    .#{$tab-el} {
-      text-transform: capitalize;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
-    &--carousel {
-      max-width: 100%;
-    }
-
-    &:not(&--carousel) {
-      padding-left: 16px;
-    }
-  }
-
-  &__tab {
-    position: relative;
-    @include button-link();
-    @include transition(duration(fast) easing(out));
-    text-transform: uppercase;
-    white-space: nowrap;
-    padding: 2px 0;
-    margin-right: space(s);
-    letter-spacing: 0px;
-    line-height: 1.3;
-    color: color(neutral, 700);
-
-    @include onlySafariAndFirefox {
-      -webkit-text-stroke: 0.4px transparent;
-    }
-
-    &:not(:first-child) {
-      margin-left: space(s);
-    }
-
-    &--active {
-      &:not(&--disabled) {
-        @include body-text-style("semibold");
-        color: color(neutral, 700);
-        line-height: 1.3;
-
-        @include safariAndFirefoxBold(color(neutral, 700))
-      }
-    }
-
-    &:not(&--disabled) {
-      &:hover,
-      &:focus {
-        outline: none;
-        color: color(brand-primary, 600);
-
-        @include safariAndFirefoxBold(color(brand-primary, 600))
-      }
-    }
-
-    &--disabled {
-      color: color(neutral, 500);
-      cursor: default;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &--separator:not(:last-child):after {
-      content: "";
-      position: absolute;
-      width: border-size(m);
-      right: -18px;
-      top: 1.4px;
-      height: space(xs) * 1.6;
-      background-color: color(neutral, 400);
-    }
-  }
-
-  &__selection-indicator {
-    position: absolute;
-    margin-top: space(xxs);
-    border-bottom: border-size(xl) solid color(brand-primary, 600);
-    pointer-events: none;
-    @include transition(duration(base) easing(in));
-  }
-}
-
-.#{$panels-container} {
-  &__panel {
-    &:focus {
-      outline: none;
-    }
-    padding-top: space(xs);
-  }
-}
-
-// ********************************************
-// Mobile
-@include md {
-  .#{$tab-bar-container} {
-    &__list {
-      background: color(brand-primary, 200);
-      border-bottom: border-size() solid color(brand-primary, 300);
-
-      &--flexible-table-headers {
-        z-index: 0;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-
-      &--left-gradients {
-        &::before {
-          position: fixed;
-          left: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, #ebf6ff 0%, rgba(238, 238, 238, 0) 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-      &--right-gradients {
-        &::after {
-          position: fixed;
-          right: 0px;
-          content: "";
-          height: 38px;
-          width: 24px;
-          background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #ebf6ff 100%);
-          z-index: 100;
-          // allow clicks to pass through
-          pointer-events: none;
-        }
-      }
-
-      &--fixed-table-headers {
-        display: flex;
-        overflow-x: hidden;
-        & .em-ds-tabs-tab-bar__tab {
-          flex: 1;
-          overflow: hidden;
-        }
-      }
-
-      &:not(&--carousel) {
-        padding-left: 14px;
-      }
-    }
-
-    &__tab {
-      height: #{toMobile(space(xl) * 0.83)};
-      color: color(brand-primary, 600);
-      font-weight: font-weight(regular);
-      padding: 0;
-      margin-right: 14px;
-      font-size: 13px;
-      line-height: 1.3;
-
-      @include onlySafariAndFirefox {
-        -webkit-text-stroke: 0.4px transparent;
-      }
-
-      &:not(:first-child) {
-        margin-left: 14px;
-      }
-
-      &:focus,
-      &--active {
-        font-weight: font-weight(regular);
-        font-size: 13px;
-        
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &--active {
-        &:not(&--disabled) {
-          font-size: 13px;
-          color: color(brand-primary, 700);
-          line-height: 1.3;
-          font-weight: font-weight(regular);
-          -webkit-font-smoothing: subpixel-antialiased; 
-          -webkit-text-stroke: 0.4px color(brand-primary, 700);
-          
-        }
-      }
-
-      &:focus:not(&--disabled) {
-        color: color(brand-primary, 700);
-        font-size: 13px;
-
-        @include safariAndFirefoxBold(color(brand-primary, 700))
-      }
-
-      &:not(&--disabled) {
-        &:hover,
-        &:focus {
-          outline: none;
-          color: color(brand-primary, 700);
-          
-          @include safariAndFirefoxBold(color(brand-primary, 700))
-        }
-      }
-
-      &--separator:not(:last-child):after {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    // &__tab-separator {
-    // }
-
-    &__selection-indicator {
-      margin-left: 0rem;
-      margin-top: space(xxs) * 0.5;
-      border-bottom-width: 3px;
-    }
-  }
-
-  .#{$panels-container} {
-    &__panel {
-      padding-top: 0;
-    }
-  }
-}