PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_title-bar.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano  >  Quanta CMS  >  engine/modules/contrib/foundation/source/scss/components/_title-bar.scss  >  Download  
File: engine/modules/contrib/foundation/source/scss/components/_title-bar.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 3 years ago
Size: 1,736 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group title-bar
////

/// Background color of a title bar.
/// @type Color
$titlebar-background: $black !default;

/// Color of text inside a title bar.
/// @type Color
$titlebar-color: $white !default;

/// Padding inside a title bar.
/// @type Length
$titlebar-padding: 0.5rem !default;

/// Font weight of text inside a title bar.
/// @type Weight
$titlebar-text-font-weight: bold !default;

/// Color of menu icons inside a title bar.
/// @type Color
$titlebar-icon-color: $white !default;

/// Color of menu icons inside a title bar on hover.
/// @type Color
$titlebar-icon-color-hover: $medium-gray !default;

/// Spacing between the menu icon and text inside a title bar.
/// @type Length
$titlebar-icon-spacing: 0.25rem !default;

@mixin foundation-title-bar {
  .title-bar {
    padding: $titlebar-padding;
    background: $titlebar-background;
    color: $titlebar-color;

    @if $global-flexbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    @else {
      @include clearfix;
    }

    .menu-icon {
      margin-#{$global-left}: $titlebar-icon-spacing;
      margin-#{$global-right}: $titlebar-icon-spacing;
    }
  }

  @if $global-flexbox {
    .title-bar-left,
    .title-bar-right {
      flex: 1 1 0px; // sass-lint:disable-line zero-unit
    }

    .title-bar-right {
      text-align: right;
    }
  }
  @else {
    .title-bar-left {
      float: left;
    }

    .title-bar-right {
      float: right;
      text-align: right;
    }
  }

  .title-bar-title {
    display: inline-block;
    vertical-align: middle;
    font-weight: $titlebar-text-font-weight;
  }
}
For more information send a message to info at phpclasses dot org.