formstone/demo/css/src/includes/demo-tabs.less

Library of modular front end components.

/**
 * @theme
 * @name Demo
 * @component Tabs
 */

.fs-tabs {

  @fs-light-white:        #fff;
  @fs-light-black:        #141A1E;

  @fs-light-primary_50:     #ECEFF1;
  @fs-light-primary_100:    #CFD8DC;
  @fs-light-primary_200:    #B0BEC5;
  @fs-light-primary_300:    #90A4AE;
  @fs-light-primary_400:    #78909C;
  @fs-light-primary_500:    #607D8B;
  @fs-light-primary_600:    #546E7A;
  @fs-light-primary_700:    #455A64;
  @fs-light-primary_800:    #37474F;
  @fs-light-primary_900:    #263238;

  // Local

  @theme_name: fs-demo;

  //Config

  @fs-tabs-tab-background-color:        @fs-light-primary_200;
  @fs-tabs-tab-border-color:          @fs-light-primary_600;
  @fs-tabs-tab-border-radius:          2px;
  @fs-tabs-tab-font-size:            14px;
  @fs-tabs-tab-text-color:          @fs-light-primary_900;
  @fs-tabs-tab-margin:            0 5px 0 0;
  @fs-tabs-tab-padding:            10px 20px;

  // Hover
  @fs-tabs-tab-hover-background-color:    @fs-light-primary_100;

  // Active
  @fs-tabs-tab-active-background-color:    @fs-light-white;
  @fs-tabs-tab-active-text-color:        @fs-light-primary_900;

  // Mobile

  @fs-tabs-tab-mobile-border-radius:      2px;
  @fs-tabs-tab-mobile-margin:          10px 0;

  @fs-tabs-tab-mobile-active-border-radius:  2px 2px 0 0;
  @fs-tabs-tab-mobile-active-margin:      10px 0 0;

  @fs-tabs-content-mobile-border-radius:    0 0 2px 2px;

  // Tab

  .@{theme_name}&-tab&-enabled,
  .@{theme_name}&-tab_mobile {
    background: @fs-tabs-tab-background-color;
    border: 1px solid @fs-tabs-tab-border-color;
    border-radius: @fs-tabs-tab-border-radius;
    color: @fs-tabs-tab-text-color;
    display: block;
    float: left;
    font-size: @fs-tabs-tab-font-size;
    margin: @fs-tabs-tab-margin;
    padding: @fs-tabs-tab-padding;
    text-transform: uppercase;
    text-decoration: none;

    .no-touchevents &:hover {
      background: @fs-tabs-tab-hover-background-color;
    }
  }

  .@{theme_name}&-tab&-active,
  .@{theme_name}&-tab_mobile&-active {

    &,
    .no-touchevents &:hover {
      background: @fs-tabs-tab-active-background-color;
      color: @fs-tabs-tab-active-text-color;
    }
  }

  // Content

  .@{theme_name}&-content&-enabled {

  }

  .@{theme_name}&-content&-active {

  }

  // Mobile

  .@{theme_name}&-tab&-mobile {
    display: none;
  }

  .@{theme_name}&-tab&-tab_mobile {
    width: 100%;

    border-radius: @fs-tabs-tab-mobile-border-radius;
    display: none;
    float: none;
    margin: @fs-tabs-tab-mobile-margin;
  }

  .@{theme_name}&-tab_mobile&-mobile {
    display: block;
  }

  .@{theme_name}&-tab_mobile&-active {
    border-radius: @fs-tabs-tab-mobile-active-border-radius;
    margin: @fs-tabs-tab-mobile-active-margin;
  }

  .@{theme_name}&-content&-mobile {
    border-radius: @fs-tabs-content-mobile-border-radius;
  }
}