forked from CIT/Vmeda.Online
Merge pull request #2838 from crazyserver/MOBILE-3320
MOBILE-3320 style: Reduce usage of scss variables
This commit is contained in:
Dani Palou
GitHub
commit
3f4ce34168
@ -3,7 +3,7 @@
|
||||
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
|
||||
:host {
|
||||
--ddimageortext-border-drop: var(--gray-darker);
|
||||
--ddimageortext-draghome-background: nth($core-dd-question-colors, 2);
|
||||
--ddimageortext-draghome-background: var(--core-dd-question-color-2);
|
||||
}
|
||||
|
||||
.addon-qtype-ddimageortext-container {
|
||||
@ -49,8 +49,8 @@ core-format-text ::ng-deep {
|
||||
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
|
||||
background: var(--core-dd-question-color-#{$i + 1});
|
||||
color: var(--core-dd-question-color-#{$i + 1}-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,8 +80,8 @@ core-format-text ::ng-deep, .drags ::ng-deep {
|
||||
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
|
||||
background: var(--core-dd-question-color-#{$i + 1});
|
||||
color: var(--core-dd-question-color-#{$i + 1}-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
:host {
|
||||
--tabs-background: var(--core-tabs-background);
|
||||
--tabs-color: var(--core-tab-color);
|
||||
--height: #{$core-tabs-height};
|
||||
--height: var(--core-tabs-height);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
$core-timer-warn-color: #cb3d4d !default;
|
||||
@import "~theme/globals";
|
||||
|
||||
$core-timer-warn-color: $red !default;
|
||||
$core-timer-iterations: 15 !default;
|
||||
|
||||
:host {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
.core-course-thumb {
|
||||
display: none;
|
||||
height: #{$core-courseimage-on-course-height};
|
||||
height: var(--core-courseimage-on-course-height);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
@for $i from 0 to length($core-course-image-background) {
|
||||
ion-icon[course-color="#{$i}"] {
|
||||
color: nth($core-course-image-background, $i + 1);
|
||||
color: var(--core-course-color-#{$i});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
@for $i from 0 to length($core-course-image-background) {
|
||||
&[course-color="#{$i}"] .core-course-thumb {
|
||||
background: nth($core-course-image-background, $i + 1);
|
||||
background: var(--core-course-color-#{$i});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
@import "~theme/globals";
|
||||
|
||||
@if ($core-dashboard-logo) {
|
||||
.in-toolbar.md h1 .core-header-logo {
|
||||
max-height: $toolbar-md-height - 24;
|
||||
}
|
||||
|
||||
.in-toolbar.ios h1 .core-header-logo {
|
||||
max-height: $toolbar-ios-height - 24;
|
||||
.in-toolbar h1 .core-header-logo {
|
||||
max-height: calc(var(--core-header-toolbar-height) - 24px);
|
||||
}
|
||||
|
||||
.in-toolbar h1 core-format-text {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "~theme/globals";
|
||||
|
||||
:host{
|
||||
--menutabbar-size: #{$bottom-tabs-size};
|
||||
--menutabbar-size: var(--bottom-tabs-size);
|
||||
|
||||
ion-tab-bar {
|
||||
height: var(--menutabbar-size);
|
||||
|
||||
@ -3,15 +3,14 @@
|
||||
@import "~theme/globals";
|
||||
|
||||
core-format-text {
|
||||
--core-format-text-background: var(--background, #{$ion-item-background});
|
||||
--core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
|
||||
--core-format-text-background: var(--background, var(--ion-item-background));
|
||||
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
|
||||
--core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
|
||||
--core-format-text-loader-shine: 251,251,251;
|
||||
}
|
||||
|
||||
body.dark core-format-text {
|
||||
--core-format-text-background: var(--background, #{$ion-item-background-dark});
|
||||
--core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
|
||||
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-dark-rgb});
|
||||
--core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
|
||||
--core-format-text-loader-shine: 90,90,90;
|
||||
}
|
||||
@ -367,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
|
||||
--color: var(--brand-contrast-color);
|
||||
--color: var(--brand-color-contrast);
|
||||
--color-checked: var(--color);
|
||||
|
||||
width: var(--size);
|
||||
@ -519,7 +518,7 @@ core-rich-text-editor .core-rte-editor {
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
// Specified to prevent conflicts of changing headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -528,20 +527,20 @@ core-rich-text-editor .core-rte-editor {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
$base: map-get($value, base);
|
||||
@each $color-name, $base in $colors {
|
||||
|
||||
.alert-#{$color-name} {
|
||||
color: $base;
|
||||
border-color: $base;
|
||||
background-color: mix($base, white, 20%);
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
color: var(--color-base);
|
||||
border-color: var(--color-base);
|
||||
background-color: var(--ion-color-#{$color-name}-tint);
|
||||
|
||||
.alert-link {
|
||||
color: darken($base, 10%);
|
||||
color: var(--ion-color-#{$color-name}-shade);
|
||||
}
|
||||
}
|
||||
.alert-#{$color-name} p {
|
||||
color: $base;
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
|
||||
@ -554,11 +553,11 @@ core-rich-text-editor .core-rte-editor {
|
||||
.align-text-top { vertical-align: text-top !important; }
|
||||
|
||||
// utilities/_border.scss
|
||||
.border { border: 1px solid $gray-dark !important; }
|
||||
.border-top { border-top: 1px solid $gray-dark !important; }
|
||||
.border-right { border-right: 1px solid $gray-dark !important; }
|
||||
.border-bottom { border-bottom: 1px solid $gray-dark !important; }
|
||||
.border-left { border-left: 1px solid $gray-dark !important; }
|
||||
.border { border: 1px solid var(--gray-dark) !important; }
|
||||
.border-top { border-top: 1px solid var(--gray-dark) !important; }
|
||||
.border-right { border-right: 1px solid var(--gray-dark) !important; }
|
||||
.border-bottom { border-bottom: 1px solid var(--gray-dark) !important; }
|
||||
.border-left { border-left: 1px solid var(--gray-dark) !important; }
|
||||
|
||||
.border-0 { border: 0 !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
@ -566,11 +565,9 @@ core-rich-text-editor .core-rte-editor {
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
$base: map-get($value, base);
|
||||
|
||||
@each $color-name, $base in $colors {
|
||||
.border-#{$color-name} {
|
||||
border-color: $base !important;
|
||||
border-color: var(--ion-color-#{$color-name}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -652,18 +649,16 @@ core-rich-text-editor .core-rte-editor {
|
||||
.font-italic { font-style: italic !important; }
|
||||
.text-white { color: var(--white) !important; }
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
$base: map-get($value, base);
|
||||
$contrast: map-get($value, contrast);
|
||||
@each $color-name, $base in $colors {
|
||||
.text-#{$color-name} {
|
||||
color: $base;
|
||||
color: var(--ion-color-#{$color-name});
|
||||
}
|
||||
}
|
||||
|
||||
.text-body { color: var(--ion-text-color) !important; }
|
||||
.text-muted { color: var(--subdued-text-color) !important; }
|
||||
.text-black-50 { color: rgba($black, .5) !important; }
|
||||
.text-white-50 { color: rgba($white, .5) !important; }
|
||||
.text-black-50 { color: rgba(0, 0, 0, .5) !important; }
|
||||
.text-white-50 { color: rgba(255, 255, 255, .5) !important; }
|
||||
.text-decoration-none { text-decoration: none !important; }
|
||||
.text-break {
|
||||
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
|
||||
@ -690,13 +685,10 @@ core-rich-text-editor .core-rte-editor {
|
||||
background-color: var(--ion-color-danger);
|
||||
}
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
$base: map-get($value, base);
|
||||
$contrast: map-get($value, contrast);
|
||||
|
||||
@each $color-name, $base in $colors {
|
||||
.label-#{$color-name} {
|
||||
color: $contrast;
|
||||
background-color: $base;
|
||||
color: var(--ion-color-#{$color-name}-contrast);
|
||||
background-color: var(--ion-color-#{$color-name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,34 +46,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
|
||||
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
|
||||
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
|
||||
$values: map-get($colors, $name);
|
||||
$value: map-get($values, $variation);
|
||||
$variable: --ion-color-#{$name}-#{$variation};
|
||||
|
||||
@if ($variation == base) {
|
||||
$variable: --ion-color-#{$name};
|
||||
}
|
||||
|
||||
@if ($alpha) {
|
||||
$value: color-to-rgb-list($value);
|
||||
@return rgba(var(#{$variable}-rgb, $value), $alpha);
|
||||
}
|
||||
@if ($rgb) {
|
||||
$value: color-to-rgb-list($value);
|
||||
$variable: #{$variable}-rgb;
|
||||
}
|
||||
|
||||
@return var(#{$variable}, $value);
|
||||
}
|
||||
|
||||
// Mixes a color with black to create its shade.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade($color) {
|
||||
@ -99,15 +71,14 @@
|
||||
// colors map
|
||||
|
||||
@mixin generate-color($color-name, $colors) {
|
||||
$value: map-get($colors, $color-name);
|
||||
$base: map-get($colors, $color-name);
|
||||
|
||||
$base: map-get($value, base);
|
||||
$contrast: map-get($value, contrast);
|
||||
$shade: map-get($value, shade);
|
||||
$tint: map-get($value, tint);
|
||||
$contrast: get_contrast_color($base);
|
||||
$shade: get-color-shade($base);
|
||||
$tint: get-color-tint($base);
|
||||
|
||||
--ion-color-#{$color-name}: #{$base};
|
||||
--ion-color-#{$color-name}-base: #{$base};
|
||||
--ion-color-#{$color-name}: var(--#{$color-name}, #{$base});
|
||||
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
|
||||
--ion-color-#{$color-name}-contrast: #{$contrast};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
|
||||
@ -115,13 +86,13 @@
|
||||
--ion-color-#{$color-name}-tint: #{$tint};
|
||||
|
||||
.ion-color-#{$color-name} {
|
||||
--ion-color: #{$base};
|
||||
--ion-color-base: #{$base};
|
||||
--ion-color-rgb: #{color-to-rgb-list($base)};
|
||||
--ion-color-contrast: #{$contrast};
|
||||
--ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};
|
||||
--ion-color-shade: #{$shade};
|
||||
--ion-color-tint: #{$tint};
|
||||
--ion-color: var(--ion-color-#{$color-name});
|
||||
--ion-color-base: var(--ion-color-#{$color-name}-base);
|
||||
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
|
||||
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
|
||||
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
|
||||
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,98 +4,49 @@
|
||||
* 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-darker: #686566 !default;
|
||||
$gray-dark: #9e9e9e !default;
|
||||
$gray: #dddddd !default;
|
||||
$gray-light: #e9e9e9 !default; // Background.
|
||||
$gray-lighter: #f5f5f5 !default;
|
||||
$white: $shade-0 !default; // Background, reversed text.
|
||||
|
||||
$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: #5e8100 !default; // Accent.
|
||||
$green-light: mix($green, white, 20%) !default;
|
||||
$green-dark: darken($green, 10%) !default;
|
||||
|
||||
$red: #cb3d4d !default;
|
||||
$red-light: mix($red, white, 20%) !default;
|
||||
$red-dark: darken($red, 10%) !default;
|
||||
|
||||
$orange-light: lighten($orange, 10%) !default;
|
||||
|
||||
$yellow: #fbad1a !default; // Accent (never text).
|
||||
$yellow-light: mix($yellow, white, 20%) !default;
|
||||
$yellow-dark: mix($yellow, black, 40%) !default;
|
||||
|
||||
$brand-color: $orange !default;
|
||||
$brand-color: #f98012 !default;
|
||||
|
||||
$text-color: $black !default;
|
||||
$text-color-rgb: color-to-rgb-list($text-color) !default;
|
||||
$text-color-dark: $white !default;
|
||||
$text-color-dark-rgb: color-to-rgb-list($text-color-dark) !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: #595959 !default;
|
||||
$subdued-text-color-dark: #b4b4b4 !default;
|
||||
$background-color: $gray-light !default;
|
||||
$background-color-rgb: color-to-rgb-list($background-color) !default;
|
||||
$background-color-dark: mix(#ffffff, #000000, 90%) !default; // #1a1a1a
|
||||
$background-color-dark-rgb: color-to-rgb-list($background-color-dark) !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;
|
||||
|
||||
$ion-placeholder-color: $subdued-text-color;
|
||||
$ion-placeholder-color-dark: $subdued-text-color-dark;
|
||||
$color: #d0c9b9;
|
||||
$color: #fcf5e3;
|
||||
$core-online-color: #5cb85c !default;
|
||||
$ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default;
|
||||
$ion-item-background-dark: mix(#ffffff, #000000, 80%) !default; // #333333
|
||||
$ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
|
||||
|
||||
$primary: $brand-color !default;
|
||||
$secondary: $blue !default;
|
||||
$tertiary: $turquoise !default;
|
||||
$danger: $red !default;
|
||||
$warning: $yellow !default;
|
||||
$success: $green !default;
|
||||
@ -105,71 +56,19 @@ $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)
|
||||
)
|
||||
primary: $primary,
|
||||
secondary: $secondary,
|
||||
success: $success,
|
||||
warning: $warning,
|
||||
danger: $danger,
|
||||
info: $info,
|
||||
light: $light,
|
||||
medium: $medium,
|
||||
dark: $dark
|
||||
) !default;
|
||||
|
||||
$primary-dark: $brand-color !default;
|
||||
$secondary-dark: mix($blue, white, 40%) !default;
|
||||
$tertiary-dark: mix($turquoise, white, 40%) !default;
|
||||
$danger-dark: mix($red, white, 40%) !default;
|
||||
$warning-dark: mix($yellow, white, 40%) !default;
|
||||
$success-dark: mix($green, white, 40%) !default;
|
||||
@ -178,75 +77,19 @@ $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)
|
||||
)
|
||||
primary: $primary-dark,
|
||||
secondary: $secondary-dark,
|
||||
success: $success-dark,
|
||||
warning: $warning-dark,
|
||||
danger: $danger-dark,
|
||||
info: $info-dark,
|
||||
light: $light-dark,
|
||||
medium: $medium-dark,
|
||||
dark: $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
|
||||
@ -255,122 +98,18 @@ $core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520,
|
||||
// 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
|
||||
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-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;
|
||||
$core-text-hightlight-background-color: lighten($blue, 40%) !default;
|
||||
|
||||
$core-tabs-background: $white !default;
|
||||
$core-tab-background: $core-tabs-background !default;
|
||||
$core-tab-color: $subdued-text-color !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: $subdued-text-color-dark !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-background: $ion-item-background !default;
|
||||
$core-combobox-color-dark: $white !default;
|
||||
$core-combobox-background-dark: $ion-item-background-dark !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-light !default;
|
||||
$core-send-message-input-color: $black !default;
|
||||
$core-send-message-input-background-dark: $black !default;
|
||||
$core-send-message-input-color-dark: $white !default;
|
||||
|
||||
$core-more-icon-color: null !default;
|
||||
$core-more-item-border: null !default;
|
||||
$core-more-hide-siteinfo: false !default;
|
||||
$core-more-hide-sitename: false !default;
|
||||
$core-more-hide-siteurl: false !default;
|
||||
|
||||
$core-fixed-url: false !default;
|
||||
$core-dashboard-logo: false !default;
|
||||
$core-always-show-main-menu: false !default;
|
||||
@ -378,44 +117,21 @@ $core-format-text-never-shorten: false !default;
|
||||
|
||||
$core-show-courseimage-on-course: false !default;
|
||||
$core-hide-progress-on-course: false !default;
|
||||
$core-courseimage-on-course-height: 150px !default;
|
||||
$core-hide-progress-on-section-selector: false !default;
|
||||
|
||||
$core-course-hide-thumb-on-cards: false !default;
|
||||
$core-course-thumb-on-cards-background: null !default;
|
||||
$core-course-hide-progress-on-cards: false !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;
|
||||
// Configuration options for login page.
|
||||
$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;
|
||||
|
||||
$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;
|
||||
// Configuration options for more page.
|
||||
$core-more-hide-siteinfo: false !default;
|
||||
$core-more-hide-sitename: false !default;
|
||||
$core-more-hide-siteurl: false !default;
|
||||
|
||||
@ -143,7 +143,7 @@ ion-app.ios ion-header h2 {
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: #{$toolbar-ios-height};
|
||||
line-height: var(--core-header-toolbar-height);
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -192,22 +192,15 @@ ion-button.ion-text-wrap {
|
||||
}
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
$value: map-get($colors, $color-name);
|
||||
$base: map-get($value, base);
|
||||
|
||||
.text-#{$color-name},
|
||||
p.text-#{$color-name} {
|
||||
color: $base;
|
||||
color: var(--ion-color-#{$color-name});
|
||||
}
|
||||
}
|
||||
|
||||
// Ionic toolbar on header.
|
||||
ion-app.md ion-toolbar {
|
||||
--min-height: #{$toolbar-md-height};
|
||||
}
|
||||
|
||||
ion-app.ios ion-toolbar {
|
||||
--min-height: #{$toolbar-ios-height};
|
||||
ion-toolbar {
|
||||
--min-height: var(--core-header-toolbar-height);
|
||||
}
|
||||
|
||||
ion-header ion-toolbar {
|
||||
@ -280,7 +273,7 @@ button,
|
||||
|
||||
// Clear buttons will be black.
|
||||
ion-button.button-clear {
|
||||
--ion-color-primary: var(--brand-contrast-color);
|
||||
--ion-color-primary: var(--brand-color-contrast);
|
||||
}
|
||||
|
||||
[role="button"],
|
||||
@ -364,7 +357,7 @@ ion-alert .alert-message {
|
||||
}
|
||||
|
||||
ion-alert .alert-wrapper button.alert-button {
|
||||
color: var(--brand-contrast-color);
|
||||
color: var(--brand-color-contrast);
|
||||
}
|
||||
|
||||
// Ionic list.
|
||||
@ -455,17 +448,13 @@ ion-toolbar {
|
||||
}
|
||||
|
||||
// Card styles
|
||||
@each $color-name, $value in $colors {
|
||||
$value: map-get($colors, $color-name);
|
||||
|
||||
$base: map-get($value, base);
|
||||
$contrast: map-get($value, contrast);
|
||||
$shade: map-get($value, shade);
|
||||
$tint: map-get($value, tint);
|
||||
@each $color-name, $base in $colors {
|
||||
|
||||
// Message cards.
|
||||
ion-card.core-#{$color-name}-card {
|
||||
border-bottom: 3px solid $base;
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
|
||||
border-bottom: 3px solid var(--color-base);
|
||||
|
||||
ion-item::part(native) {
|
||||
--inner-border-width: 0;
|
||||
@ -474,22 +463,24 @@ ion-toolbar {
|
||||
white-space: normal !important;
|
||||
}
|
||||
ion-icon {
|
||||
color: $base;
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.item.core-#{$color-name}-item {
|
||||
--color-base: var(--ion-color-#{$color-name});
|
||||
|
||||
--inner-border-width: 0 0 3px 0;
|
||||
--border-width: 0;
|
||||
border-bottom: 3px solid $base !important;
|
||||
border-bottom: 3px solid var(--color-base) !important;
|
||||
ion-icon {
|
||||
color: $base;
|
||||
color: var(--color-base);
|
||||
}
|
||||
}
|
||||
|
||||
ion-icon.ion-color-#{$color-name} {
|
||||
color: $base;
|
||||
--ion-color-base: #{$base};
|
||||
--ion-color-base: var(--ion-color-#{$color-name});
|
||||
color: var(--ion-color-base);
|
||||
}
|
||||
}
|
||||
|
||||
@ -592,7 +583,7 @@ ion-toolbar h1 .core-bar-button-image img {
|
||||
// Radio.
|
||||
ion-radio,
|
||||
input[type=radio] {
|
||||
--color: var(--brand-contrast-color);
|
||||
--color: var(--brand-color-contrast);
|
||||
--color-checked: var(--color);
|
||||
--border-radius: 50%;
|
||||
--border-width: 2px;
|
||||
@ -646,8 +637,8 @@ input[type=radio] {
|
||||
ion-checkbox,
|
||||
input[type=checkbox] {
|
||||
--border-radius: 2px;
|
||||
--border-color-checked: var(--brand-contrast-color);
|
||||
--background-checked: var(--brand-contrast-color);
|
||||
--border-color-checked: var(--brand-color-contrast);
|
||||
--background-checked: var(--brand-color-contrast);
|
||||
--checkmark-color: var(--contrast-background);
|
||||
--border-width: 2px;
|
||||
--outer-border-width: 2px;
|
||||
|
||||
@ -6,70 +6,64 @@
|
||||
*/
|
||||
|
||||
:root body.dark {
|
||||
--ion-background-color: #{$background-color-dark};
|
||||
--ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)};
|
||||
|
||||
--ion-text-color: #{$text-color-dark};
|
||||
--ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
|
||||
--subdued-text-color: #{$subdued-text-color-dark};
|
||||
|
||||
// Enlighten the ionic shades.
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
--ion-color-step-0: #000000;
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
--ion-color-step-1000: #ffffff;
|
||||
|
||||
--brand-contrast-color: #{$brand-contrast-color-dark};
|
||||
--ion-background-color: #{$background-color-dark};
|
||||
--ion-background-color-rgb: #{$background-color-dark-rgb};
|
||||
|
||||
--primary: #{$primary-dark};
|
||||
--secondary: #{$secondary-dark};
|
||||
--tertiary: #{$tertiary-dark};
|
||||
--success: #{$success-dark};
|
||||
--danger: #{$danger-dark};
|
||||
--warning: #{$warning-dark};
|
||||
--info: #{$info-dark};
|
||||
--light: #{$light-dark};
|
||||
--dark: #{$dark-dark};
|
||||
--medium: #{$medium-dark};
|
||||
--text-color: #{$text-color-dark};
|
||||
--ion-text-color: var(--text-color);
|
||||
--ion-text-color-rgb: #{$text-color-dark-rgb};
|
||||
--subdued-text-color: #b4b4b4;
|
||||
|
||||
--primary: var(--brand-color);
|
||||
--secondary: #{$secondary-dark};
|
||||
--success: #{$success-dark};
|
||||
--danger: #{$danger-dark};
|
||||
--warning: #{$warning-dark};
|
||||
--info: #{$info-dark};
|
||||
--light: #{$light-dark};
|
||||
--dark: #{$dark-dark};
|
||||
--medium: #{$medium-dark};
|
||||
|
||||
@each $color-name, $value in $colors-dark {
|
||||
@include generate-color($color-name, $colors-dark);
|
||||
}
|
||||
|
||||
--ion-border-color: #{$shade-85};
|
||||
--ion-border-color: var(--ion-color-step-100);
|
||||
|
||||
--ion-card-color: #{$text-color-dark};
|
||||
--ion-card-background: #{$ion-item-background-dark};
|
||||
--ion-card-color: var(--text-color);
|
||||
--ion-card-background: var(--ion-item-background);
|
||||
|
||||
--contrast-background: black;
|
||||
|
||||
--ion-placeholder-color: #{$ion-placeholder-color-dark};
|
||||
|
||||
ion-content {
|
||||
--background: var(--ion-background-color);
|
||||
--background-alternative: var(--black);
|
||||
}
|
||||
|
||||
--core-bottom-tabs-background: #{$bottom-tabs-background-dark};
|
||||
--core-bottom-tabs-color: #{$bottom-tabs-color-dark};
|
||||
--core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected-dark};
|
||||
--core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color-dark};
|
||||
--core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color-dark};
|
||||
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
|
||||
|
||||
ion-action-sheet {
|
||||
.action-sheet-cancel {
|
||||
@ -77,37 +71,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
--core-link-color: #{$link-color-dark};
|
||||
--core-link-color: var(--blue-light);
|
||||
|
||||
--core-header-toolbar-background: #{$toolbar-background-dark};
|
||||
--core-header-toolbar-border-color: #{$toolbar-border-color-dark};
|
||||
--core-header-toolbar-color: #{$toolbar-color-dark};
|
||||
--core-header-toolbar-background: var(--black);
|
||||
--core-header-toolbar-color: var(--white);
|
||||
|
||||
--core-tabs-background: #{$core-tabs-background-dark};
|
||||
--core-tab-background: #{$core-tab-background-dark};
|
||||
--core-tab-color: #{$core-tab-color-dark};
|
||||
--core-tab-border-color: #{$core-tab-border-color-dark};
|
||||
--core-tab-color-active: #{$core-tab-color-active-dark};
|
||||
--core-tab-border-color-active: #{$core-tab-border-color-active-dark};
|
||||
--core-tabs-background: var(--ion-color-step-200);
|
||||
--core-tab-border-color: var(--gray-light);
|
||||
--core-tab-color-active: var(--dark);
|
||||
|
||||
--core-progressbar-color: #{$core-progressbar-color-dark};
|
||||
--core-progressbar-text-color: #{$core-progressbar-text-color-dark};
|
||||
--core-progressbar-text-color: var(--gray-lighter);
|
||||
|
||||
--ion-item-background: #{$ion-item-background-dark};
|
||||
--ion-item-detail-icon-color: var(--white);
|
||||
--item-divider-background: #{$ion-item-divider-background-dark};
|
||||
--item-divider-color: #{$ion-item-divider-color-dark};
|
||||
--spacer-background: #{$core-spacer-background-dark};
|
||||
--item-divider-background: var(--ion-color-step-200);
|
||||
--spacer-background: var(--ion-color-step-1000);
|
||||
|
||||
--core-combobox-background: #{$core-combobox-background-dark};
|
||||
--core-combobox-color: #{$core-combobox-color-dark};
|
||||
--core-combobox-color: var(--white);
|
||||
|
||||
--selected-item-color: #{$core-selected-item-color-dark};
|
||||
|
||||
--core-login-background: #{$core-login-background-dark};
|
||||
--core-login-text-color: #{$core-login-text-color-dark};
|
||||
--core-login-input-background: #{$core-login-input-background-dark};
|
||||
--core-login-input-color: #{$core-login-input-color-dark};
|
||||
--core-login-background: var(--black);
|
||||
--core-login-text-color: var(--white);
|
||||
--core-login-input-background: var(--core-login-background);
|
||||
--core-login-input-color: var(--core-login-text-color);
|
||||
|
||||
--core-question-correct-color: var(--green-light);
|
||||
--core-question-correct-color-bg: var(--green-dark);
|
||||
@ -129,17 +114,17 @@
|
||||
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
|
||||
--core-dd-question-border: var(--gray-light);
|
||||
|
||||
--core-send-message-input-background: #{$core-send-message-input-background-dark};
|
||||
--core-send-message-input-color: #{$core-send-message-input-color-dark};
|
||||
--core-send-message-input-background: var(--black);
|
||||
--core-send-message-input-color: var(--white);
|
||||
|
||||
--addon-messages-message-bg: #{$addon-messages-message-bg-dark};
|
||||
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};
|
||||
--addon-messages-message-note-text: #{$addon-messages-message-note-text-dark};
|
||||
--addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg-dark};
|
||||
--addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg-dark};
|
||||
--addon-messages-discussion-badge: #{$addon-messages-discussion-badge-dark};
|
||||
--addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text-dark};
|
||||
--addon-messages-message-bg: var(--ion-color-step-200);
|
||||
--addon-messages-message-activated-bg: var(--ion-color-step-300);
|
||||
--addon-messages-message-note-text: var(--subdued-text-color);
|
||||
--addon-messages-message-mine-bg: var(--ion-color-step-350);
|
||||
--addon-messages-message-mine-activated-bg: var(--ion-color-step-450);
|
||||
--addon-messages-discussion-badge: var(--primary);
|
||||
--addon-messages-discussion-badge-text: var(--dark);
|
||||
|
||||
--addon-forum-border-color: #{$addon-forum-border-color-dark};
|
||||
--addon-forum-highlight-color: #{$addon-forum-highlight-color-dark};
|
||||
--addon-forum-border-color: var(--gray-dark);
|
||||
--addon-forum-highlight-color: var(--gray-darker);
|
||||
}
|
||||
|
||||
@ -9,21 +9,17 @@
|
||||
|
||||
// Color palette
|
||||
--black: #{$black}; // Headings, standard text.
|
||||
--gray-darker: #{$gray-darker};
|
||||
--gray-dark: #{$gray-dark};
|
||||
--gray-darker: #{$gray-darker}; // Text (emphasis-detail), placeholder, background.
|
||||
--gray-dark: #{$gray-dark}; // Borders (never text).
|
||||
--gray: #{$gray};
|
||||
--gray-light: #{$gray-light};
|
||||
--gray-light: #{$gray-light}; // Background.
|
||||
--gray-lighter: #{$gray-lighter};
|
||||
--white: #{$white};
|
||||
--white: #{$white}; // Background, reversed text.
|
||||
|
||||
--blue: #{$blue};
|
||||
--blue-light: #{$blue-light};
|
||||
--blue-dark: #{$blue-dark};
|
||||
|
||||
--turquoise: #{$turquoise};
|
||||
--turquoise-light: #{$turquoise-light};
|
||||
--turquoise-dark: #{$turquoise-dark};
|
||||
|
||||
--green: #{$green};
|
||||
--green-light: #{$green-light};
|
||||
--green-dark: #{$green-dark};
|
||||
@ -32,30 +28,31 @@
|
||||
--red-light: #{$red-light};
|
||||
--red-dark: #{$red-dark};
|
||||
|
||||
--orange: #{$orange};
|
||||
--orange-light: #{$orange-light};
|
||||
|
||||
--yellow: #{$yellow};
|
||||
--yellow-light: #{$yellow-light};
|
||||
--yellow-dark: #{$yellow-dark};
|
||||
--purple: #{$purple};
|
||||
|
||||
--brand-color: #{$brand-color};
|
||||
--brand-contrast-color: #{$brand-contrast-color};
|
||||
--turquoise: #007982; // Accent.
|
||||
--purple: #8e24aa;
|
||||
|
||||
--core-online-color: #{$core-online-color};
|
||||
--text-color: #{$text-color};
|
||||
--background-color: #{$background-color};
|
||||
|
||||
--brand-color: #{$brand-color};
|
||||
--brand-color-contrast: var(--text-color);
|
||||
|
||||
--core-online-color: #5cb85c;
|
||||
|
||||
// Named Color Variables
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
--tertiary: #{$tertiary};
|
||||
--success: #{$success};
|
||||
--danger: #{$danger};
|
||||
--warning: #{$warning};
|
||||
--info: #{$info};
|
||||
--light: #{$light};
|
||||
--dark: #{$dark};
|
||||
--medium: #{$medium};
|
||||
--primary: var(--brand-color);
|
||||
--secondary: #{$secondary};
|
||||
--success: #{$success};
|
||||
--danger: #{$danger};
|
||||
--warning: #{$warning};
|
||||
--info: #{$info};
|
||||
--light: #{$light};
|
||||
--dark: #{$dark};
|
||||
--medium: #{$medium};
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
@include generate-color($color-name, $colors);
|
||||
@ -68,31 +65,32 @@
|
||||
|
||||
--module-icon-size: 24px;
|
||||
|
||||
--ion-background-color: #{$background-color};
|
||||
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
|
||||
--ion-background-color: var(--background-color);
|
||||
--ion-background-color-rgb: #{$background-color-rgb};
|
||||
|
||||
--contrast-background: white;
|
||||
|
||||
--ion-text-color: #{$text-color};
|
||||
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
|
||||
--subdued-text-color: #{$subdued-text-color};
|
||||
--ion-text-color: var(--text-color);
|
||||
--ion-text-color-rgb: #{$text-color-rgb};
|
||||
--subdued-text-color: #595959;
|
||||
|
||||
--ion-card-color: var(--ion-text-color);
|
||||
--ion-card-color: var(--text-color);
|
||||
|
||||
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
|
||||
|
||||
--ion-placeholder-color: #{$ion-placeholder-color};
|
||||
--ion-placeholder-color: var(--subdued-text-color);
|
||||
|
||||
ion-content {
|
||||
--background: var(--ion-background-color);
|
||||
--background-alternative: var(--gray-lighter);
|
||||
}
|
||||
|
||||
--core-bottom-tabs-background: #{$bottom-tabs-background};
|
||||
--core-bottom-tabs-color: #{$bottom-tabs-color};
|
||||
--core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
|
||||
--core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color};
|
||||
--core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color};
|
||||
--core-bottom-tabs-background: var(--black);
|
||||
--core-bottom-tabs-color: var(--gray-lighter);
|
||||
--core-bottom-tabs-color-selected: var(--brand-color);
|
||||
--core-bottom-tabs-badge-color: var(--brand-color);
|
||||
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
|
||||
--bottom-tabs-size: 56px;
|
||||
ion-tab-bar.mainmenu-tabs {
|
||||
--background: var(--core-bottom-tabs-background);
|
||||
--color: var(--core-bottom-tabs-color);
|
||||
@ -103,16 +101,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
--core-link-color: #{$link-color};
|
||||
--core-link-color: var(--blue);
|
||||
a {
|
||||
color: var(--core-link-color);
|
||||
}
|
||||
|
||||
--core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
|
||||
--core-header-toolbar-background: #{$toolbar-background};
|
||||
--core-header-toolbar-border-width: #{$toolbar-border-width};
|
||||
--core-header-toolbar-border-color: #{$toolbar-border-color};
|
||||
--core-header-toolbar-color: #{$toolbar-color};
|
||||
--core-header-toolbar-button-image-size: 44px;
|
||||
--core-header-toolbar-background: var(--white);
|
||||
--core-header-toolbar-border-width: 3px;
|
||||
--core-header-toolbar-border-color: var(--brand-color);
|
||||
--core-header-toolbar-color: var(--black);
|
||||
--core-header-toolbar-height: 56px;
|
||||
html.ios {
|
||||
--core-header-toolbar-height: 54px;
|
||||
}
|
||||
|
||||
ion-header ion-toolbar {
|
||||
--color: var(--core-header-toolbar-color);
|
||||
--background: var(--core-header-toolbar-background);
|
||||
@ -160,14 +163,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
--core-tabs-background: #{$core-tabs-background};
|
||||
--core-tab-background: #{$core-tab-background};
|
||||
--core-tab-color: #{$core-tab-color};
|
||||
--core-tab-border-color: #{$core-tab-border-color};
|
||||
--core-tab-color-active: #{$core-tab-color-active};
|
||||
--core-tab-border-color-active: #{$core-tab-border-color-active};
|
||||
--core-tab-font-weight-active: #{$core-tab-font-weight-active};
|
||||
|
||||
--core-tabs-background: var(--white);
|
||||
--core-tab-background: var(--core-tabs-background);
|
||||
--core-tab-color: var(--subdued-text-color);
|
||||
--core-tab-border-color: var(--gray);
|
||||
--core-tab-color-active: var(--dark);
|
||||
--core-tab-border-color-active: var(--brand-color);
|
||||
--core-tab-font-weight-active: normal;
|
||||
--core-tabs-height: 56px;
|
||||
core-tabs, core-tabs-outlet {
|
||||
ion-slide {
|
||||
--background: var(--core-tab-background);
|
||||
@ -184,10 +187,10 @@
|
||||
--color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
--core-progressbar-height: #{$core-progressbar-height};
|
||||
--core-progressbar-color: #{$core-progressbar-color};
|
||||
--core-progressbar-text-color: #{$core-progressbar-text-color};
|
||||
--core-progressbar-background: #{$core-progressbar-background};
|
||||
--core-progressbar-height: 8px;
|
||||
--core-progressbar-color: var(--brand-color);
|
||||
--core-progressbar-text-color: var(--gray-darker);
|
||||
--core-progressbar-background: var(--gray-lighter);
|
||||
core-progress-bar {
|
||||
--height: var(--core-progressbar-height);
|
||||
--color: var(--core-progressbar-color);
|
||||
@ -195,12 +198,14 @@
|
||||
--background: var(--core-progressbar-background);
|
||||
}
|
||||
|
||||
--core-side-blocks-max-width: 30%;
|
||||
--core-side-blocks-min-width: 280px;
|
||||
core-block-course-blocks {
|
||||
--side-blocks-max-width: #{$core-side-blocks-max-width};
|
||||
--side-blocks-min-width: #{$core-side-blocks-min-width};
|
||||
--side-blocks-max-width: var(--core-side-blocks-max-width);
|
||||
--side-blocks-min-width: var(--core-side-blocks-min-width);
|
||||
}
|
||||
|
||||
--ion-item-background: #{$ion-item-background};
|
||||
--ion-item-background: #{$ion-item-background};
|
||||
--ion-item-detail-icon-color: var(--gray-darker);
|
||||
--ion-item-detail-icon-font-size: 20px;
|
||||
--ion-item-detail-icon-opacity: 1;
|
||||
@ -211,8 +216,8 @@
|
||||
}
|
||||
|
||||
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
|
||||
--item-divider-background: #{$ion-item-divider-background};
|
||||
--item-divider-color: #{$ion-item-divider-color};
|
||||
--item-divider-background: var(--gray-lighter);
|
||||
--item-divider-color: var(--text-color);
|
||||
ion-item-divider, ion-item.divider {
|
||||
--background: var(--item-divider-background);
|
||||
--color: var(--item-divider-color);
|
||||
@ -220,7 +225,7 @@
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
--spacer-background: #{$core-spacer-background};
|
||||
--spacer-background: var(--item-divider-background);
|
||||
core-spacer {
|
||||
--item-divider-background: var(--spacer-background);
|
||||
}
|
||||
@ -230,49 +235,50 @@
|
||||
}
|
||||
|
||||
--core-combobox-background: var(--ion-item-background);
|
||||
--core-combobox-color: #{$core-combobox-color};
|
||||
--core-combobox-background: #{$core-combobox-background};
|
||||
--core-combobox-border-color: #{$core-combobox-border-color};
|
||||
--core-combobox-border-width: #{$core-combobox-border-width};
|
||||
--core-combobox-color: var(--black);
|
||||
--core-combobox-border-color: var(--primary);
|
||||
--core-combobox-border-width: 3px;
|
||||
|
||||
--selected-item-color: #{$core-selected-item-color};
|
||||
--selected-item-border-width: #{$core-selected-item-border-width};
|
||||
--selected-item-color: var(--primary);
|
||||
--selected-item-border-width: 5px;
|
||||
|
||||
--core-login-background: #{$core-login-background};
|
||||
--core-login-text-color: #{$core-login-text-color};
|
||||
--core-login-input-background: #{$core-login-input-background};
|
||||
--core-login-input-color: #{$core-login-input-color};
|
||||
--core-login-background: var(--white);
|
||||
--core-login-text-color: var(--black);
|
||||
--core-login-input-background: var(--white);
|
||||
--core-login-input-color: var(--black);
|
||||
|
||||
--core-star-color: #{$core-star-color};
|
||||
--core-star-color: var(--brand-color);
|
||||
|
||||
--core-large-avatar-size: #{$core-large-avatar-size};
|
||||
--core-avatar-size: #{$core-avatar-size};
|
||||
--core-large-avatar-size: 90px;
|
||||
--core-avatar-size: 44px;
|
||||
|
||||
--core-send-message-input-background: #{$core-send-message-input-background};
|
||||
--core-send-message-input-color: #{$core-send-message-input-color};
|
||||
--core-send-message-input-background: var(--gray-light);
|
||||
--core-send-message-input-color: var(--black);
|
||||
|
||||
--addon-calendar-event-category-color: #{$addon-calendar-event-category-color};
|
||||
--addon-calendar-event-course-color: #{$addon-calendar-event-course-color};
|
||||
--addon-calendar-event-group-color: #{$addon-calendar-event-group-color};
|
||||
--addon-calendar-event-user-color: #{$addon-calendar-event-user-color};
|
||||
--addon-calendar-event-site-color: #{$addon-calendar-event-site-color};
|
||||
--addon-calendar-today-border-color: #{$addon-calendar-today-border-color};
|
||||
--addon-calendar-today-color: #{$addon-calendar-today-color};
|
||||
--addon-calendar-border-color: #{$addon-calendar-border-color};
|
||||
--core-courseimage-on-course-height: 150px;
|
||||
|
||||
--addon-messages-message-bg: #{$addon-messages-message-bg};
|
||||
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg};
|
||||
--addon-messages-message-note-text: #{$addon-messages-message-note-text};
|
||||
--addon-messages-message-note-font-size: #{$addon-messages-message-note-font-size};
|
||||
--addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg};
|
||||
--addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg};
|
||||
--addon-messages-avatar-size: #{$addon-messages-avatar-size};
|
||||
--addon-messages-discussion-badge: #{$addon-messages-discussion-badge};
|
||||
--addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text};
|
||||
--addon-calendar-event-category-color: var(--purple);
|
||||
--addon-calendar-event-course-color: var(--red);
|
||||
--addon-calendar-event-group-color: var(--yellow);
|
||||
--addon-calendar-event-user-color: var(--blue);
|
||||
--addon-calendar-event-site-color: var(--green);
|
||||
--addon-calendar-today-border-color: var(--primary);
|
||||
--addon-calendar-today-color: var(--white);
|
||||
--addon-calendar-border-color: var(--gray);
|
||||
|
||||
--addon-forum-avatar-size: #{$addon-forum-avatar-size};
|
||||
--addon-forum-border-color: #{$addon-forum-border-color};
|
||||
--addon-forum-highlight-color: #{$addon-forum-highlight-color};
|
||||
--addon-messages-message-bg: var(--white);
|
||||
--addon-messages-message-activated-bg: var(--gray-light);
|
||||
--addon-messages-message-note-text: var(--gray-dark);
|
||||
--addon-messages-message-note-font-size: 75%;
|
||||
--addon-messages-message-mine-bg: var(--gray-light);
|
||||
--addon-messages-message-mine-activated-bg: var(--gray);
|
||||
--addon-messages-avatar-size: 30px;
|
||||
--addon-messages-discussion-badge: var(--primary);
|
||||
--addon-messages-discussion-badge-text: var(--white);
|
||||
|
||||
--addon-forum-avatar-size: var(--core-avatar-size);
|
||||
--addon-forum-border-color: var(--gray);
|
||||
--addon-forum-highlight-color: var(--gray-lighter);
|
||||
|
||||
--drop-shadow: 0, 0, 0, 0.18;
|
||||
|
||||
@ -300,11 +306,12 @@
|
||||
--core-dd-question-radius: 10px;
|
||||
--core-dd-question-border: var(--gray-darker);
|
||||
|
||||
@if ($core-more-icon-color) {
|
||||
--core-more-icon: #{$core-more-icon-color};
|
||||
@for $i from 0 to length($core-course-image-background) {
|
||||
--core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
|
||||
}
|
||||
|
||||
@if ($core-more-item-border) {
|
||||
--core-more-item-border: #{$core-more-item-border};
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
--core-dd-question-color-#{$i + 1}: #{nth($core-dd-question-colors, $i + 1)};
|
||||
--core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user