roblib_2023/css/sass/components/_tabs.scss

/**
 * @file
 * Visual styles for tabs.
 */

div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir='rtl'] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  padding: 0.2em 1em;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
}
.tabs a.is-active {
  background-color: #fff;
  color: $red;
}
.tabs.primary > li > a.is-active {
  color: $red;
}
.tabs a:focus,
.tabs a:hover {
  background-color: #fff;
}
//lp search tabs
.searchtabs__container {
  margin-top: $global-margin;
  @include flex-grid-row();
  //@include callout;
}
.searchtabs {
  width: 100%;
  @include callout;
  background: #757575;
  border: 0px;
  ul {
    border: 0px;
  }
  .tabs-title > a {
    border-radius: $global-radius $global-radius 0 0;
    color: $white;
    font-weight: 600;
    font-size: rem-calc(18);
    font-family: $roboto-condensed;
    margin-right: 2px;
    padding: 0px;
    padding: 0.8rem 1rem;
    @include breakpoint(medium) {
      padding: 0.8rem 1.5rem;
    }
    &:hover {
      color: $primary-color;
    }
  }
  .tabs-title > a:focus,
  .tabs-title > a[aria-selected='true'] {
    color: $primary-color;
    outline: none;
  }
  .tabs-content {
    padding: $global-padding;
    border-radius: 0 $global-radius $global-radius $global-radius;
  }
}

.form-submit {
}
.searchtabs {
  p {
    margin: 0;
  }
  form > div {
    @extend .input-group;
  }
  input[type='submit'] {
    @extend .input-group-button;
    @include button();
    @include button-style(
      //$background,
      $success-color,
      //$background-hover,
      auto,
      //$color
      auto
    );
    border-radius: 0 $global-radius $global-radius 0;

    margin-bottom: 0;
  }
  input[type='text'] {
    @extend .input-group-field;
    //@include button();
    border-radius: $global-radius 0 0 $global-radius;
    background: #fff;
  }
  .tabs-panel {
    @include padding(1, 0, 0, 0);
  }
  .tabs {
    background: #757575;
  }
}
.searchtabs .tabs-title > a:focus,
.searchtabs .tabs-title > a[aria-selected='true'] {
  color: #8c2004;
  background: #fff;
  outline: none;
}