157 lines
4.9 KiB
SCSS
157 lines
4.9 KiB
SCSS
/*
|
|
* App Global variables SCSS
|
|
* ----------------------------------------------------------------------------
|
|
* Place here all global variables.
|
|
*/
|
|
|
|
/*
|
|
* App colors
|
|
*/
|
|
$black: #3a3a3a !default; // Headings, standard text.
|
|
$gray-darker: #626262 !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: #ffffff !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, 20%) !default; // Background.
|
|
$blue-dark: darken($blue, 10%) !default;
|
|
|
|
$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
|
|
$turquoise-dark: darken($turquoise, 10%) !default;
|
|
|
|
$green-light: mix($green, white, 20%) !default;
|
|
$green-dark: darken($green, 10%) !default;
|
|
|
|
$red-light: mix($red, white, 20%) !default;
|
|
$red-dark: darken($red, 10%) !default;
|
|
|
|
$orange-light: lighten($orange, 10%) !default;
|
|
|
|
$yellow-light: mix($yellow, white, 20%) !default;
|
|
$yellow-dark: mix($yellow, black, 40%) !default;
|
|
|
|
$core-color: $orange !default;
|
|
$core-color-light: lighten($core-color, 10%) !default;
|
|
$core-color-dark: darken($core-color, 10%) !default;
|
|
|
|
$text-color: $black !default;
|
|
$link-color: $blue !default;
|
|
$background-color: $gray-light !default;
|
|
$subdued-text-color: $gray-darker !default;
|
|
|
|
$core-online-color: #5cb85c !default;
|
|
|
|
$primary: $core-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: #fff,
|
|
shade: get-color-shade($primary),
|
|
tint: get-color-tint($primary)
|
|
),
|
|
secondary: (
|
|
base: $secondary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($secondary),
|
|
tint: get-color-tint($secondary)
|
|
),
|
|
tertiary: (
|
|
base: $tertiary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($tertiary),
|
|
tint: get-color-tint($tertiary)
|
|
),
|
|
success: (
|
|
base: $success,
|
|
contrast: #fff,
|
|
shade: get-color-shade($success),
|
|
tint: get-color-tint($success)
|
|
),
|
|
warning: (
|
|
base: $warning,
|
|
contrast: #000,
|
|
shade: get-color-shade($warning),
|
|
tint: get-color-tint($warning)
|
|
),
|
|
danger: (
|
|
base: $danger,
|
|
contrast: #fff,
|
|
shade: get-color-shade($danger),
|
|
tint: get-color-tint($danger)
|
|
),
|
|
info: (
|
|
base: $info,
|
|
contrast: #fff,
|
|
shade: get-color-shade($info),
|
|
tint: get-color-tint($info)
|
|
),
|
|
light: (
|
|
base: $light,
|
|
contrast: #000,
|
|
shade: get-color-shade($light),
|
|
tint: get-color-tint($light)
|
|
),
|
|
medium: (
|
|
base: $medium,
|
|
contrast: #fff,
|
|
shade: get-color-shade($medium),
|
|
tint: get-color-tint($medium)
|
|
),
|
|
dark: (
|
|
base: $dark,
|
|
contrast: #fff,
|
|
shade: get-color-shade($dark),
|
|
tint: get-color-tint($dark)
|
|
)
|
|
) !default;
|
|
|
|
// Just swipe light and dark.
|
|
$colors-dark: (
|
|
primary: map-get($colors, primary),
|
|
secondary: map-get($colors, secondary),
|
|
tertiary: map-get($colors, tertiary),
|
|
success: map-get($colors, success),
|
|
warning: map-get($colors, warning),
|
|
danger: map-get($colors, danger),
|
|
info: map-get($colors, info),
|
|
light: map-get($colors, dark),
|
|
medium: map-get($colors, medium),
|
|
dark: map-get($colors, light),
|
|
) !default;
|
|
|
|
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
|
|
|
|
/*
|
|
* Layout Breakpoints
|
|
*
|
|
* https://ionicframework.com/docs/layout/grid#default-breakpoints
|
|
*/
|
|
|
|
$breakpoint-xs: 0px !default;
|
|
$breakpoint-sm: 576px !default;
|
|
$breakpoint-md: 768px !default;
|
|
$breakpoint-lg: 992px !default;
|
|
$breakpoint-xl: 1200px !default;
|
|
|
|
$breakpoint-tablet: $breakpoint-lg !default;
|