Error in the selector of the tabs.

Topic: Error in the selector of the tabs.

Raúl Carlos Rodrigo Sierra Hernández pro asked 7 years ago

Hello. Apparently the selector of _tabs.sass contains an error in its selector, affecting all children of lists. Assign a margin to the first element of all the li that exists within the tab. Modify the following code:

.classic-tabs {
  white-space: nowrap;
  overflow-x: auto;
  border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
  @media (min-width: 62rem) {
    overflow-x: hidden;
  }
  li {
    @media (min-width: 62em) {
      flex: inherit;
    }
    a {
      display: block;
      padding: $classic-tabs-padding-y $classic-tabs-padding-x;
      font-size: $classic-tabs-font-size;
      text-transform: uppercase;
      color: $classic-tabs-color;
      text-align: center;
      border-radius: 0;
      &.active {
        border-bottom: $classic-tabs-li-a-active-border-bottom;
        color: $white;
      }
    }
    @media (min-width: 62em) {
      &:first-child {
        margin-left: $classic-tabs-margin-left;
      }
    }
  }

For this:

.classic-tabs {
  white-space: nowrap;
  overflow-x: auto;
  border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
  @media (min-width: 62rem) {
    overflow-x: hidden;
  }
  & > li {
    @media (min-width: 62em) {
      flex: inherit;
    }
    a {
      display: block;
      padding: $classic-tabs-padding-y $classic-tabs-padding-x;
      font-size: $classic-tabs-font-size;
      text-transform: uppercase;
      color: $classic-tabs-color;
      text-align: center;
      border-radius: 0;
      &.active {
        border-bottom: $classic-tabs-li-a-active-border-bottom;
        color: $white;
      }
    }
    @media (min-width: 62em) {
      &:first-child {
        margin-left: $classic-tabs-margin-left;
      }
    }
  }

Regards!

Add comment

Marta Szymanska answered 7 years ago