vaadin-framework/WebContent/VAADIN/themes/valo/components/_label.scss

/**
 * The font weight for headers.
 * 
 * @group label
 */
$v-font-weight--header: $v-font-weight - 100 !default;

/**
 * The line height for headers.
 * 
 * @group label
 */
$v-line-height--header: 1.1 !default;

/**
 * The font family for headers.
 * 
 * @group label
 */
$v-font-family--header: null !default;

/**
 * The font color for colored style labels.
 * 
 * @group label
 */
$v-font-color--colored: $v-selection-color !default;

/**
 * The font size for 1st level headers.
 * 
 * @group label
 */
$v-font-size--h1: 2.4em !default;

/**
 * The font size for 2nd level headers.
 * 
 * @group label
 */
$v-font-size--h2: 1.6em !default;

/**
 * The font size for 3rd level headers.
 * 
 * @group label
 */
$v-font-size--h3: 1.2em !default;

/**
 * The font family for 1st level headers.
 * 
 * @group label
 */
$v-font-family--h1: $v-font-family--header !default;

/**
 * The font family for 2nd level headers.
 * 
 * @group label
 */
$v-font-family--h2: $v-font-family--header !default;

/**
 * The font family for 3rd level headers.
 * 
 * @group label
 */
$v-font-family--h3: $v-font-family--header !default;

/**
 * The letter spacing for 1st level headers.
 * 
 * @group label
 */
$v-letter-spacing--h1: -0.03em !default;

/**
 * The letter spacing for 2nd level headers.
 * 
 * @group label
 */
$v-letter-spacing--h2: -0.02em !default;

/**
 * The letter spacing for 3rd level headers.
 * 
 * @group label
 */
$v-letter-spacing--h3: 0 !default;

/**
 * The letter spacing for 4th level headers.
 * 
 * @group label
 */
$v-letter-spacing--h4: 0 !default;


/**
 * Outputs the selectors and styles for the Label component.
 * 
 * @param {string} $primary-stylename (v-label) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group label
 */
@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {

  .#{$primary-stylename} {
    @include user-select(text);
  }

  .#{$primary-stylename}-undef-w {
    white-space: nowrap;
  }

  h1, .#{$primary-stylename}-h1,
  h2, .#{$primary-stylename}-h2,
  h3, .#{$primary-stylename}-h3 {
    line-height: $v-line-height--header;
    font-weight: $v-font-weight--header;
    color: valo-font-color($v-app-background-color, 0.92);
  }

  h1, .#{$primary-stylename}-h1 {
    font-size: $v-font-size--h1;
    margin-top: 1.4em;
    margin-bottom: 1em;
    font-family: $v-font-family--h1;
    letter-spacing: $v-letter-spacing--h1;
  }

  h2, .#{$primary-stylename}-h2 {
    font-size: $v-font-size--h2;
    font-family: $v-font-family--h2;
    margin-top: 1.6em;
    margin-bottom: 0.77em;
    letter-spacing: $v-letter-spacing--h2;
  }

  h3, .#{$primary-stylename}-h3 {
    font-size: $v-font-size--h3;
    font-family: $v-font-family--h3;
    margin-top: 1.8em;
    margin-bottom: 0.77em;
    letter-spacing: $v-letter-spacing--h3;
  }

  h4, .#{$primary-stylename}-h4 {
    line-height: $v-line-height--header;
    font-weight: $v-font-weight + 200;
    font-size: $v-font-size--small;
    color: valo-font-color($v-app-background-color, 0.74);
    text-transform: uppercase;
    letter-spacing: $v-letter-spacing--h4;
    margin-top: 2.4em;
    margin-bottom: 0.8em;
  }

  .v-csslayout {
   > h1,
   > h2,
   > h3,
   > h4
   > .#{$primary-stylename}-h1,
   > .#{$primary-stylename}-h2,
   > .#{$primary-stylename}-h3,
   > .#{$primary-stylename}-h4 {
      &:first-child {
        margin-top: $v-font-size;
      }
    }
  }

  .v-verticallayout > .v-slot:first-child,
  .v-verticallayout > div > .v-slot:first-child {
    h1, .#{$primary-stylename}-h1,
    h2, .#{$primary-stylename}-h2,
    h3, .#{$primary-stylename}-h3,
    h4, .#{$primary-stylename}-h4 {
      margin-top: $v-font-size;
    }
  }

  .v-verticallayout > .v-slot:first-child .v-formlayout-contentcell,
  .v-verticallayout > div > .v-slot:first-child .v-formlayout-contentcell {
    h1, .#{$primary-stylename}-h1,
    h2, .#{$primary-stylename}-h2,
    h3, .#{$primary-stylename}-h3,
    h4, .#{$primary-stylename}-h4 {
      margin-top: -0.5em;
    }
  }

  h1, .#{$primary-stylename}-h1,
  h2, .#{$primary-stylename}-h2,
  h3, .#{$primary-stylename}-h3,
  h4, .#{$primary-stylename}-h4 {
    &.no-margin {
      margin: 0 !important;
    }
  }


  @if $include-additional-styles {

    .#{$primary-stylename}-colored {
      color: $v-font-color--colored;
    }

    .#{$primary-stylename}-large {
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-tiny {
      font-size: $v-font-size--tiny;
    }

    .#{$primary-stylename}-huge {
      font-size: $v-font-size--huge;
    }

    .#{$primary-stylename}-bold {
      font-weight: $v-font-weight + 200;
    }

    .#{$primary-stylename}-light {
      font-weight: $v-font-weight - 100;
      @if $v-font-weight < 400 {
        color: valo-font-color($v-app-background-color, .5);
      }
    }

    .#{$primary-stylename}-align-right {
      text-align: right;
    }

    .#{$primary-stylename}-align-center {
      text-align: center;
    }

    .#{$primary-stylename}-spinner {
      @include valo-spinner;
    }

    .#{$primary-stylename}-success,
    .#{$primary-stylename}-failure {
      background: $v-textfield-background-color;
      color: valo-font-color($v-textfield-background-color);
      border: 2px solid $v-friendly-color;
      border-radius: $v-border-radius;
      padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
      font-weight: $v-font-weight + 100;
      font-size: round($v-font-size * 0.95);

      &:before {
        font-family: ThemeIcons;
        content: "\f00c";
        margin-right: .5em;
        margin-left: round($v-unit-size/-2);
        color: $v-friendly-color;
      }
    }

    .#{$primary-stylename}-failure {
      border-color: $v-error-indicator-color;

      &:before {
        content: "\f05e";
        color: $v-error-indicator-color;
      }
    }
  }

}