bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/settings/styles.scss

@import "../../stylesheets/variables/_all";

.tabs {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  @include mq($small-only) {
    width: 100%;
    flex-flow: column;
  }
}

.tabList {
  display: flex;
  flex-flow: column;
  border: none;
  padding: 0;
  margin: 0;
  width: calc(100% / 3);

  @include mq($small-only) {
    width: 100%;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.icon {
  margin-right: .5rem;
  font-size: var(--font-size-large);
}

.tabSelector {
  font-size: 0.9rem;
  display: flex;
  flex-flow: row;
  flex: 0 0 auto;
  justify-content: flex-start;
  border: none !important;
  padding: var(--md-padding-y) var(--md-padding-x);
  color: var(--color-gray-dark);
  border-radius: .2rem;
  cursor: pointer;
  margin-bottom: var(--sm-padding-y);
  align-items: center;
  flex-grow: 0;
  min-width: 0;
  & > span {
    @extend %text-elipsis;
  }

  @include mq($small-only) {
    max-width: 100%;
    margin-right: var(--sm-padding-x);
    & > .icon {
      display: none;
    }
  }
}

.selected {
  color: var(--color-white);
  background-color: var(--color-primary);
  font-weight: bold;

  & > .icon {
    color: var(--color-white);
  }
}

.tabPanel {
  display: none;
  margin-left: 1rem;
  width: calc(100% / 3 * 2);

  @include mq($small-only) {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }
}

.selectedTab {
  display: block;
}