Vmeda.Online/src/theme/globals.variables.scss

/*
 * App Global variables SCSS
 * ----------------------------------------------------------------------------
 * Place here all global variables.
 */

/*
 * App colors
 */
$shade-0: #ffffff !default;
$shade-100: #000000 !default;
$shade-5: mix($shade-100, $shade-0, 5%) !default;   // #f2f2f2
$shade-10: mix($shade-100, $shade-0, 10%) !default; // #e6e6e6
$shade-15: mix($shade-100, $shade-0, 15%) !default; // #d9d9d9
$shade-20: mix($shade-100, $shade-0, 20%) !default; // #cccccc
$shade-25: mix($shade-100, $shade-0, 25%) !default; // #bfbfbf
$shade-30: mix($shade-100, $shade-0, 30%) !default; // #b3b3b3
$shade-35: mix($shade-100, $shade-0, 35%) !default; // #a6a6a6
$shade-40: mix($shade-100, $shade-0, 40%) !default; // #999999
$shade-45: mix($shade-100, $shade-0, 45%) !default; // #8c8c8c
$shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080
$shade-55: mix($shade-100, $shade-0, 55%) !default; // #737373
$shade-60: mix($shade-100, $shade-0, 60%) !default; // #666666
$shade-65: mix($shade-100, $shade-0, 65%) !default; // #595959
$shade-70: mix($shade-100, $shade-0, 70%) !default; // #4d4d4d
$shade-75: mix($shade-100, $shade-0, 75%) !default; // #404040
$shade-80: mix($shade-100, $shade-0, 80%) !default; // #333333
$shade-85: mix($shade-100, $shade-0, 85%) !default; // #262626
$shade-90: mix($shade-100, $shade-0, 90%) !default; // #1a1a1a
$shade-95: mix($shade-100, $shade-0, 95%) !default; // #0d0d0d

$black:           #282828 !default; // Headings, standard text.
$gray-darker:     #686566 !default; // Text (emphasis-detail), placeholder, background.
$gray-dark:       #9e9e9e !default; // Borders (never text).
$gray:            #dddddd !default;
$gray-light:      #e9e9e9 !default; // Background.
$gray-lighter:    #f5f5f5 !default;
$white:           $shade-0 !default; // Background, reversed text.


$blue:            #0064d2 !default; // Link, background.
$turquoise:       #007982 !default; // Accent.
$green:           #5e8100 !default; // Accent.
$red:             #cb3d4d !default;
$orange:          #f98012 !default; // Accent (never text).
$yellow:          #fbad1a !default; // Accent (never text).
$purple:          #8e24aa !default; // Accent (never text).

$blue-light:      mix($blue, white, 40%) !default; // Background.
$blue-dark:       darken($blue, 10%) !default;

$turquoise-light: mix($turquoise, white, 40%) !default; // Background.
$turquoise-dark:  darken($turquoise, 10%) !default;

$green-light:     mix($green, white, 40%) !default;
$green-dark:      darken($green, 10%) !default;

$red-light:       mix($red, white, 40%) !default;
$red-dark:        darken($red, 10%) !default;

$orange-light:    lighten($orange, 10%) !default;

$yellow-light:    mix($yellow, white, 40%) !default;
$yellow-dark:     mix($yellow, black, 40%) !default;

$brand-color:          $orange !default;

$text-color:               $black !default;
$text-color-dark:          $white !default;

$brand-contrast-color: $text-color !default; // Used in radio and other controls where brand color needs contrast.
$brand-contrast-color-dark: $text-color-dark !default; // Used in radio and other controls where brand color needs contrast

$link-color:               $blue !default;
$link-color-dark:          $blue-light !default;
$background-color:         $gray-light !default;
$background-color-dark:    $shade-90 !default;
$subdued-text-color:       $gray-darker !default;
$subdued-text-color-dark:  $gray-lighter !default;

$ion-item-background:      $white !default;
$ion-item-background-dark: $shade-80 !default;
$ion-item-divider-background: $gray-lighter !default;
$ion-item-divider-color: $text-color !default;
$core-spacer-background: $ion-item-divider-background !default;
$ion-item-divider-background-dark: $shade-75 !default;
$ion-item-divider-color-dark: $text-color-dark !default;
$core-spacer-background-dark: $shade-100 !default;

$core-online-color: #5cb85c !default;

$primary:    $brand-color !default;
$secondary:  $blue !default;
$tertiary:   $turquoise !default;
$danger:     $red !default;
$warning:    $yellow !default;
$success:    $green !default;
$info:       $blue !default;
$light:      $gray-lighter !default;
$medium:     $gray-light !default;
$dark:       $black !default;

$colors:  (
    primary: (
        base:             $primary,
        contrast:         get_contrast_color($primary),
        shade:            get-color-shade($primary),
        tint:             get-color-tint($primary)
    ),
    secondary: (
        base:             $secondary,
        contrast:         get_contrast_color($secondary),
        shade:            get-color-shade($secondary),
        tint:             get-color-tint($secondary)
    ),
    tertiary: (
        base:             $tertiary,
        contrast:         get_contrast_color($tertiary),
        shade:            get-color-shade($tertiary),
        tint:             get-color-tint($tertiary)
    ),
    success: (
        base:             $success,
        contrast:         get_contrast_color($success),
        shade:            get-color-shade($success),
        tint:             get-color-tint($success)
    ),
    warning: (
        base:             $warning,
        contrast:         get_contrast_color($warning),
        shade:            get-color-shade($warning),
        tint:             get-color-tint($warning)
    ),
    danger: (
        base:             $danger,
        contrast:         get_contrast_color($danger),
        shade:            get-color-shade($danger),
        tint:             get-color-tint($danger)
    ),
    info: (
        base:             $info,
        contrast:         get_contrast_color($info),
        shade:            get-color-shade($info),
        tint:             get-color-tint($info)
    ),
    light: (
        base:             $light,
        contrast:         get_contrast_color($light),
        shade:            get-color-shade($light),
        tint:             get-color-tint($light)
    ),
    medium: (
        base:             $medium,
        contrast:         get_contrast_color($medium),
        shade:            get-color-shade($medium),
        tint:             get-color-tint($medium)
    ),
    dark: (
        base:             $dark,
        contrast:         get_contrast_color($dark),
        shade:            get-color-shade($dark),
        tint:             get-color-tint($dark)
    )
) !default;

$primary-dark:    $brand-color !default;
$secondary-dark:  $blue-light !default;
$tertiary-dark:   $turquoise-light !default;
$danger-dark:     $red-light !default;
$warning-dark:    $yellow-light !default;
$success-dark:    $green-light !default;
$info-dark:       $blue-light !default;
$light-dark:      $dark !default;
$medium-dark:     $gray-light !default;
$dark-dark:       $light !default;

// Just swipe light and dark.
$colors-dark:  (
    primary: (
        base:             $primary-dark,
        contrast:         get_contrast_color($primary-dark),
        shade:            get-color-shade($primary-dark),
        tint:             get-color-tint($primary-dark)
    ),
    secondary: (
        base:             $secondary-dark,
        contrast:         get_contrast_color($secondary-dark),
        shade:            get-color-shade($secondary-dark),
        tint:             get-color-tint($secondary-dark)
    ),
    tertiary: (
        base:             $tertiary-dark,
        contrast:         get_contrast_color($tertiary-dark),
        shade:            get-color-shade($tertiary-dark),
        tint:             get-color-tint($tertiary-dark)
    ),
    success: (
        base:             $success-dark,
        contrast:         get_contrast_color($success-dark),
        shade:            get-color-shade($success-dark),
        tint:             get-color-tint($success-dark)
    ),
    warning: (
        base:             $warning-dark,
        contrast:         get_contrast_color($warning-dark),
        shade:            get-color-shade($warning-dark),
        tint:             get-color-tint($warning-dark)
    ),
    danger: (
        base:             $danger-dark,
        contrast:         get_contrast_color($danger-dark),
        shade:            get-color-shade($danger-dark),
        tint:             get-color-tint($danger-dark)
    ),
    info: (
        base:             $info-dark,
        contrast:         get_contrast_color($info-dark),
        shade:            get-color-shade($info-dark),
        tint:             get-color-tint($info-dark)
    ),
    light: (
        base:             $light-dark,
        contrast:         get_contrast_color($light-dark),
        shade:            get-color-shade($light-dark),
        tint:             get-color-tint($light-dark)
    ),
    medium: (
        base:             $medium-dark,
        contrast:         get_contrast_color($medium-dark),
        shade:            get-color-shade($medium-dark),
        tint:             get-color-tint($medium-dark)
    ),
    dark: (
        base:             $dark-dark,
        contrast:         get_contrast_color($dark-dark),
        shade:            get-color-shade($dark-dark),
        tint:             get-color-tint($dark-dark)
    )
) !default;

$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;

$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;

/*
 * Layout Breakpoints
 *
 * https://ionicframework.com/docs/layout/grid#default-breakpoints
 */

// The minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries
$screen-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  tablet: 992px,
  xl: 1200px
) !default;

$breakpoint-tablet: map-get($screen-breakpoints, tablet), !default;

/*
 * Z-indexes.
 *
 * https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.globals.scss
 */

$z-index-overlay: 1001;
$z-index-overlay-wrapper: 10;

// Top header bar.
$toolbar-background: $white !default;
$toolbar-background-dark: $black !default;
$toolbar-border-color: $brand-color !default;
$toolbar-border-color-dark: $toolbar-border-color !default;
$toolbar-color: get_contrast_color($toolbar-background) !default;
$toolbar-color-dark: get_contrast_color($toolbar-background-dark) !default;
$toolbar-border-width: 3px !default;
$toolbar-button-image-size: 44px !default;
$toolbar-md-height: 56px !default;
$toolbar-ios-height: 54px !default;

// Bottom tab bar.
$bottom-tabs-background: $black !default;
$bottom-tabs-background-dark: $black !default;
$bottom-tabs-color: $gray-lighter !default;
$bottom-tabs-color-dark: $gray-lighter !default;
$bottom-tabs-color-selected: $primary !default;
$bottom-tabs-color-selected-dark: $primary !default;
$bottom-tabs-badge-color: $primary !default;
$bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default;
$bottom-tabs-badge-color-dark: $primary !default;
$bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default;
$bottom-tabs-size: 56px !default;

$core-text-hightlight-background-color: lighten($blue, 40%) !default;

$core-tabs-background: $white !default;
$core-tab-background: $core-tabs-background !default;
$core-tab-color: $gray-dark !default;
$core-tab-color-active: $dark !default;
$core-tab-font-weight-active: normal !default;
$core-tab-border-color: $gray !default;
$core-tab-border-color-active: $primary !default;
$core-tabs-height: 56px !default;

$core-tabs-background-dark: $shade-75 !default;
$core-tab-background-dark: $core-tabs-background-dark !default;
$core-tab-color-dark: $white !default;
$core-tab-color-active-dark: $dark-dark !default;
$core-tab-border-color-dark: $gray-light !default;
$core-tab-border-color-active-dark: $core-tab-border-color-active !default;

$core-progressbar-color: $primary !default;
$core-progressbar-color-dark: $primary !default;
$core-progressbar-text-color: $gray-darker !default;
$core-progressbar-text-color-dark: $gray-lighter !default;
$core-progressbar-background: $gray-lighter !default;
$core-progressbar-height: 8px !default;

$core-side-blocks-max-width: 30% !default;
$core-side-blocks-min-width: 280px !default;

$core-combobox-color: $black !default;
$core-combobox-color-dark: $white !default;
$core-combobox-border-color: $primary !default;
$core-combobox-border-color-dark: $primary-dark !default;
$core-combobox-border-width: 3px !default;


$core-selected-item-color: $primary !default;
$core-selected-item-color-dark: $primary-dark !default;
$core-selected-item-border-width: 5px !default;

$core-login-background: $white !default;
$core-login-background-dark: $black !default;
$core-login-text-color: $black !default;
$core-login-text-color-dark: $white !default;
$core-login-input-background: $white !default;
$core-login-input-background-dark: $core-login-background-dark !default;
$core-login-input-color: $black !default;
$core-login-input-color-dark: $core-login-text-color-dark !default;

$core-login-button-outline: false !default;
$core-login-button-outline-dark: $core-login-button-outline !default;
$core-login-loading-color: false !default;
$core-login-loading-color-dark: $text-color-dark !default;
$core-login-hide-forgot-password: false !default;
$core-login-hide-need-help: false !default;

$core-star-color: $brand-color !default;

$core-large-avatar-size:  90px !default;
$core-avatar-size:  44px !default;

$core-send-message-input-background: $gray !default;
$core-send-message-input-color: $black !default;

$addon-calendar-event-category-color: $purple !default;
$addon-calendar-event-course-color: $red !default;
$addon-calendar-event-group-color: $yellow !default;
$addon-calendar-event-user-color: $blue !default;
$addon-calendar-event-site-color: $green !default;
$addon-calendar-today-border-color: $primary !default;
$addon-calendar-today-color: $white !default;
$addon-calendar-border-color: $gray !default;

$addon-messages-message-bg: $white !default;
$addon-messages-message-activated-bg: $gray-light !default;
$addon-messages-message-note-text: $gray-dark !default;
$addon-messages-message-note-font-size: 75% !default;
$addon-messages-message-mine-bg: $gray-light !default;
$addon-messages-message-mine-activated-bg: $gray !default;
$addon-messages-avatar-size: 30px !default;
$addon-messages-discussion-badge: $primary !default;
$addon-messages-discussion-badge-text: $white !default;

$addon-messages-message-bg-dark:  $shade-75 !default;

$addon-messages-message-activated-bg-dark: $shade-65 !default;
$addon-messages-message-note-text-dark: $gray-light !default;
$addon-messages-message-mine-bg-dark: $shade-60 !default;
$addon-messages-message-mine-activated-bg-dark: $shade-50 !default;
$addon-messages-discussion-badge-dark: $primary-dark !default;
$addon-messages-discussion-badge-text-dark: $black !default;

$addon-forum-avatar-size: 44px !default;
$addon-forum-border-color: $gray !default;
$addon-forum-highlight-color: $gray-lighter !default;

$addon-forum-border-color-dark: $gray-dark !default;
$addon-forum-highlight-color-dark: $gray-darker !default;

$core-more-icon-color: null !default;
$core-more-item-border: null !default;
$core-fixed-url: false !default;
$core-dashboard-logo: false !default;
$core-always-show-main-menu: false !default;