formstone/src/less/tabs.less

Library of modular front end components.

/**
 * @component
 * @name Tabs
 */

@import "imports/utils.less";

/**
 * @class
 * @name .fs-tabs-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-tabs
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-tabs.fs-tabs-enabled
 * @type modifier
 * @description Indicates enabled state
 */

.fs-tabs {

  &&-enabled {
    .fs_clearfix();
  }

  /**
   * @class
   * @name .fs-tabs-tab
   * @type element
   * @description Tab handle element
   */

  /**
   * @class
   * @name .fs-tabs-tab.fs-tabs-enabled
   * @type modifier
   * @description Indicates enabled state
   */

  /**
   * @class
   * @name .fs-tabs-tab.fs-tabs-active
   * @type modifier
   * @description Indicates active state
   */

  /**
   * @class
   * @name .fs-tabs-tab.fs-tabs-mobile
   * @type modifier
   * @description Indicates mobile interface
   */

  &-tab&-enabled {
    box-sizing: border-box;
    border: none;
    cursor: pointer;
  }

  /**
   * @class
   * @name .fs-tabs-content
   * @type element
   * @description Tab content element
   */

  /**
   * @class
   * @name .fs-tabs-content.fs-tabs-enabled
   * @type modifier
   * @description Indicates enabled state
   */

  /**
   * @class
   * @name .fs-tabs-content.fs-tabs-active
   * @type modifier
   * @description Indicates active state
   */

  &-content&-enabled {
    .fs_clearfix();

    box-sizing: border-box;
    display: none;
  }

  &-content&-active {
    display: block;
  }

  /**
   * @class
   * @name .fs-tabs-tab_mobile
   * @type element
   * @description Mobile tab handle element
   */

  /**
   * @class
   * @name .fs-tabs-tab_mobile.fs-tabs-active
   * @type modifier
   * @description Indicates active state
   */

  &-tab&-mobile,
  &-tab_mobile,
  &-tab_mobile&-active {
    display: none;
  }

  &-tab_mobile&-mobile,
  &-tab_mobile&-mobile&-active {
    display: block;
  }
}