Shared-Travel-Map-Front-End/node_modules/ionic-angular/components/tabs/tabs.wp.scss

@import "../../themes/ionic.globals.wp";

// Windows Tabs
// --------------------------------------------------

// deprecated
$tabs-wp-tab-padding:                   null !default;

/// @prop - Padding top on the tab button
$tabs-wp-tab-padding-top:               12px !default;

/// @prop - Padding end on the tab button
$tabs-wp-tab-padding-end:               10px !default;

/// @prop - Padding bottom on the tab button
$tabs-wp-tab-padding-bottom:            5px !default;

/// @prop - Padding start on the tab button
$tabs-wp-tab-padding-start:             10px !default;

/// @prop - Minimum height of the tab button
$tabs-wp-tab-min-height:                4.8rem !default;

/// @prop - Font size of the tab button text
$tabs-wp-tab-font-size:                 1.2rem !default;

/// @prop - Font weight of the tab button text
$tabs-wp-tab-font-weight:               normal !default;

/// @prop - Opacity of the inactive tab button
$tabs-wp-tab-opacity:                   .7 !default;

/// @prop - Text color of the inactive tab button
$tabs-wp-tab-color:                     rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default;

/// @prop - Text color of the active tab button
$tabs-wp-tab-color-active:              $tabs-wp-tab-color-active !default;

/// @prop - Icon color of the inactive tab button
$tabs-wp-tab-icon-color:                rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default;

/// @prop - Icon color of the active tab button
$tabs-wp-tab-icon-color-active:         $tabs-wp-tab-color-active !default;

/// @prop - Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border:                    2px solid $tabs-wp-border-color !default;

/// @prop - Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border-color-active:       $tabs-wp-tab-color-active !default;

/// @prop - Background of the tab button when pressed
$tabs-wp-tab-background-activated:      rgba(0, 0, 0, .1) !default;

/// @prop - Size of the tab button icon
$tabs-wp-tab-icon-size:                 2.4rem !default;


.tabs-wp .tabbar {
  background: $tabs-wp-background;
}

.tabs-wp .tab-button {
  @include border-radius(0);

  min-height: $tabs-wp-tab-min-height;

  border-bottom: $tabs-wp-tab-border;
  font-size: $tabs-wp-tab-font-size;
  font-weight: $tabs-wp-tab-font-weight;
  color: $tabs-wp-tab-color;
  box-shadow: none;

  @include deprecated-variable(padding, $tabs-wp-tab-padding) {
    @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
  }
}

.tabs-wp .tab-button[aria-selected=true] {
  border-bottom-color: $tabs-wp-tab-border-color-active;
  color: $tabs-wp-tab-color-active;
}

.tabs-wp .tab-button.activated {
  background: $tabs-wp-tab-background-activated;
}

.tabs-wp[tabsPlacement=bottom] .tab-button {
  border-top: $tabs-wp-tab-border;
  border-bottom-width: 0;
}

.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] {
  border-top-color: $tabs-wp-tab-border-color-active;
}


// Windows Tab Button Text
// --------------------------------------------------

.tabs-wp .tab-button-text {
  @include margin(5px, null);
}


// Windows Tab Button Icon
// --------------------------------------------------

.tabs-wp .tab-button-icon {
  min-width: $tabs-wp-tab-icon-size;

  font-size: $tabs-wp-tab-icon-size;

  color: $tabs-wp-tab-icon-color;
}

.tabs-wp .tab-button[aria-selected=true] .tab-button-icon {
  color: $tabs-wp-tab-icon-color-active;
}

.tabs-wp[tabsLayout=icon-bottom] .tab-button {
  @include padding(8px, null, 8px, null);
}

.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button,
.tabs-wp[tabsLayout=icon-start] .tab-button {
  @include padding(null, null, 10px, null);
}

.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
  min-width: 24px;
}

.tabs-wp[tabsLayout=icon-hide] .tab-button,
.tabs-wp[tabsLayout=title-hide] .tab-button,
.tabs-wp .tab-button.icon-only,
.tabs-wp .tab-button.has-title-only {
  @include padding(6px, 10px);
}


// Windows Tabbar Color Mixin
// --------------------------------------------------

@mixin tabbar-wp($color-name, $color-base, $color-contrast) {

  .tabs-wp-#{$color-name} .tabbar {
    background-color: $color-base;
  }

  .tabs-wp-#{$color-name} .tab-button,
  .tabs-wp-#{$color-name} .tab-button-icon {
    color: rgba($color-contrast, $tabs-wp-tab-opacity);
  }

  .tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover),
  .tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover) .tab-button-icon,
  .tabs-wp-#{$color-name} .tab-button[aria-selected=true],
  .tabs-wp-#{$color-name} .tab-button[aria-selected=true] .tab-button-icon {
    border-color: $color-contrast;
    color: $color-contrast;
  }

}


// Windows Tabbar Color Generation
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
  @include tabbar-wp($color-name, $color-base, $color-contrast);
}