CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

Merge pull request #2838 from crazyserver/MOBILE-3320

Browse Source 
MOBILE-3320 style: Reduce usage of scss variables
This commit is contained in:
Dani Palou 2021-06-17 13:23:52 +02:00 committed by GitHub
commit 3f4ce34168
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 301 additions and 641 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addons/qtype/ddimageortext/component/ddimageortext.scss
View File

@ -3,7 +3,7 @@
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle. // Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
:host { :host {
--ddimageortext-border-drop: var(--gray-darker); --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 { .addon-qtype-ddimageortext-container {
@ -49,8 +49,8 @@ core-format-text ::ng-deep {
@for $i from 0 to length($core-dd-question-colors) { @for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} { .group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1); background: var(--core-dd-question-color-#{$i + 1});
color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); color: var(--core-dd-question-color-#{$i + 1}-contrast);
} }
} }

4
src/addons/qtype/ddwtos/component/ddwtos.scss
View File

@ -80,8 +80,8 @@ core-format-text ::ng-deep, .drags ::ng-deep {
@for $i from 0 to length($core-dd-question-colors) { @for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} { .group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1); background: var(--core-dd-question-color-#{$i + 1});
color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); color: var(--core-dd-question-color-#{$i + 1}-contrast);
} }
} }

2
src/core/components/tabs/tabs.scss
View File

@ -3,7 +3,7 @@
:host { :host {
--tabs-background: var(--core-tabs-background); --tabs-background: var(--core-tabs-background);
--tabs-color: var(--core-tab-color); --tabs-color: var(--core-tab-color);
--height: #{$core-tabs-height}; --height: var(--core-tabs-height);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
src/core/components/timer/timer.scss
View File

@ -1,4 +1,6 @@
$core-timer-warn-color: #cb3d4d !default; @import "~theme/globals";
$core-timer-warn-color: $red !default;
$core-timer-iterations: 15 !default; $core-timer-iterations: 15 !default;
:host { :host {

2
src/core/features/course/components/format/format.scss
View File

@ -17,7 +17,7 @@
.core-course-thumb { .core-course-thumb {
display: none; display: none;
height: #{$core-courseimage-on-course-height}; height: var(--core-courseimage-on-course-height);
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;

2
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -14,7 +14,7 @@
@for $i from 0 to length($core-course-image-background) { @for $i from 0 to length($core-course-image-background) {
ion-icon[course-color="#{$i}"] { ion-icon[course-color="#{$i}"] {
color: nth($core-course-image-background, $i + 1); color: var(--core-course-color-#{$i});
} }
} }

2
src/core/features/courses/components/course-progress/course-progress.scss
View File

@ -13,7 +13,7 @@
@for $i from 0 to length($core-course-image-background) { @for $i from 0 to length($core-course-image-background) {
&[course-color="#{$i}"] .core-course-thumb { &[course-color="#{$i}"] .core-course-thumb {
background: nth($core-course-image-background, $i + 1); background: var(--core-course-color-#{$i});
} }
} }

8
src/core/features/mainmenu/pages/home/home.scss
View File

@ -1,12 +1,8 @@
@import "~theme/globals"; @import "~theme/globals";
@if ($core-dashboard-logo) { @if ($core-dashboard-logo) {
.in-toolbar.md h1 .core-header-logo { .in-toolbar h1 .core-header-logo {
max-height: $toolbar-md-height - 24; max-height: calc(var(--core-header-toolbar-height) - 24px);
}
.in-toolbar.ios h1 .core-header-logo {
max-height: $toolbar-ios-height - 24;
} }
.in-toolbar h1 core-format-text { .in-toolbar h1 core-format-text {

2
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -1,7 +1,7 @@
@import "~theme/globals"; @import "~theme/globals";
:host{ :host{
--menutabbar-size: #{$bottom-tabs-size}; --menutabbar-size: var(--bottom-tabs-size);
ion-tab-bar { ion-tab-bar {
height: var(--menutabbar-size); height: var(--menutabbar-size);

60
src/theme/components/format-text.scss
View File

@ -3,15 +3,14 @@
@import "~theme/globals"; @import "~theme/globals";
core-format-text { core-format-text {
--core-format-text-background: var(--background, #{$ion-item-background}); --core-format-text-background: var(--background, var(--ion-item-background));
--core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($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-viewer-icon-background: rgba(255, 255, 255, .5);
--core-format-text-loader-shine: 251,251,251; --core-format-text-loader-shine: 251,251,251;
} }
body.dark core-format-text { body.dark core-format-text {
--core-format-text-background: var(--background, #{$ion-item-background-dark}); --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-dark-rgb});
--core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
--core-format-text-viewer-icon-background: rgba(0, 0, 0, .5); --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
--core-format-text-loader-shine: 90,90,90; --core-format-text-loader-shine: 90,90,90;
} }
@ -367,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
input[type=checkbox] { input[type=checkbox] {
position: relative; position: relative;
--color: var(--brand-contrast-color); --color: var(--brand-color-contrast);
--color-checked: var(--color); --color-checked: var(--color);
width: var(--size); width: var(--size);
@ -519,7 +518,7 @@ core-rich-text-editor .core-rte-editor {
// Headings for larger alerts // Headings for larger alerts
.alert-heading { .alert-heading {
// Specified to prevent conflicts of changing $headings-color // Specified to prevent conflicts of changing headings-color
color: inherit; color: inherit;
} }
@ -528,20 +527,20 @@ core-rich-text-editor .core-rte-editor {
font-weight: 400; font-weight: 400;
} }
@each $color-name, $value in $colors { @each $color-name, $base in $colors {
$base: map-get($value, base);
.alert-#{$color-name} { .alert-#{$color-name} {
color: $base; --color-base: var(--ion-color-#{$color-name});
border-color: $base; color: var(--color-base);
background-color: mix($base, white, 20%); border-color: var(--color-base);
background-color: var(--ion-color-#{$color-name}-tint);
.alert-link { .alert-link {
color: darken($base, 10%); color: var(--ion-color-#{$color-name}-shade);
} }
} }
.alert-#{$color-name} p { .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; } .align-text-top { vertical-align: text-top !important; }
// utilities/_border.scss // utilities/_border.scss
.border { border: 1px solid $gray-dark !important; } .border { border: 1px solid var(--gray-dark) !important; }
.border-top { border-top: 1px solid $gray-dark !important; } .border-top { border-top: 1px solid var(--gray-dark) !important; }
.border-right { border-right: 1px solid $gray-dark !important; } .border-right { border-right: 1px solid var(--gray-dark) !important; }
.border-bottom { border-bottom: 1px solid $gray-dark !important; } .border-bottom { border-bottom: 1px solid var(--gray-dark) !important; }
.border-left { border-left: 1px solid $gray-dark !important; } .border-left { border-left: 1px solid var(--gray-dark) !important; }
.border-0 { border: 0 !important; } .border-0 { border: 0 !important; }
.border-top-0 { border-top: 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-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
@each $color-name, $value in $colors { @each $color-name, $base in $colors {
$base: map-get($value, base);
.border-#{$color-name} { .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; } .font-italic { font-style: italic !important; }
.text-white { color: var(--white) !important; } .text-white { color: var(--white) !important; }
@each $color-name, $value in $colors { @each $color-name, $base in $colors {
$base: map-get($value, base);
$contrast: map-get($value, contrast);
.text-#{$color-name} { .text-#{$color-name} {
color: $base; color: var(--ion-color-#{$color-name});
} }
} }
.text-body { color: var(--ion-text-color) !important; } .text-body { color: var(--ion-text-color) !important; }
.text-muted { color: var(--subdued-text-color) !important; } .text-muted { color: var(--subdued-text-color) !important; }
.text-black-50 { color: rgba($black, .5) !important; } .text-black-50 { color: rgba(0, 0, 0, .5) !important; }
.text-white-50 { color: rgba($white, .5) !important; } .text-white-50 { color: rgba(255, 255, 255, .5) !important; }
.text-decoration-none { text-decoration: none !important; } .text-decoration-none { text-decoration: none !important; }
.text-break { .text-break {
word-break: break-word !important; // Deprecated, but avoids issues with flex containers 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); background-color: var(--ion-color-danger);
} }
@each $color-name, $value in $colors { @each $color-name, $base in $colors {
$base: map-get($value, base);
$contrast: map-get($value, contrast);
.label-#{$color-name} { .label-#{$color-name} {
color: $contrast; color: var(--ion-color-#{$color-name}-contrast);
background-color: $base; background-color: var(--ion-color-#{$color-name});
} }
} }
} }

55
src/theme/globals.mixins.ionic.scss
View File

@ -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. // Mixes a color with black to create its shade.
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-shade($color) { @function get-color-shade($color) {
@ -99,15 +71,14 @@
// colors map // colors map
@mixin generate-color($color-name, $colors) { @mixin generate-color($color-name, $colors) {
$value: map-get($colors, $color-name); $base: map-get($colors, $color-name);
$base: map-get($value, base); $contrast: get_contrast_color($base);
$contrast: map-get($value, contrast); $shade: get-color-shade($base);
$shade: map-get($value, shade); $tint: get-color-tint($base);
$tint: map-get($value, tint);
--ion-color-#{$color-name}: #{$base}; --ion-color-#{$color-name}: var(--#{$color-name}, #{$base});
--ion-color-#{$color-name}-base: #{$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}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast}; --ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($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}-tint: #{$tint};
.ion-color-#{$color-name} { .ion-color-#{$color-name} {
--ion-color: #{$base}; --ion-color: var(--ion-color-#{$color-name});
--ion-color-base: #{$base}; --ion-color-base: var(--ion-color-#{$color-name}-base);
--ion-color-rgb: #{color-to-rgb-list($base)}; --ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
--ion-color-contrast: #{$contrast}; --ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
--ion-color-contrast-rgb: #{color-to-rgb-list($contrast)}; --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: #{$shade}; --ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: #{$tint}; --ion-color-tint: var(--ion-color-#{$color-name}-tint);
} }
} }

378
src/theme/globals.variables.scss
View File

@ -4,98 +4,49 @@
* Place here all global variables. * 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. $black: #282828 !default; // Headings, standard text.
$gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background. $gray-darker: #686566 !default;
$gray-dark: #9e9e9e !default; // Borders (never text). $gray-dark: #9e9e9e !default;
$gray: #dddddd !default; $gray: #dddddd !default;
$gray-light: #e9e9e9 !default; // Background. $gray-light: #e9e9e9 !default; // Background.
$gray-lighter: #f5f5f5 !default; $gray-lighter: #f5f5f5 !default;
$white: $shade-0 !default; // Background, reversed text. $white: #ffffff !default; // Background, reversed text.
$blue: #0064d2 !default; // Link, background. $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-light: mix($blue, white, 20%) !default; // Background.
$blue-dark: darken($blue, 10%) !default; $blue-dark: darken($blue, 10%) !default;
$turquoise-light: mix($turquoise, white, 20%) !default; // Background. $green: #5e8100 !default; // Accent.
$turquoise-dark: darken($turquoise, 10%) !default;
$green-light: mix($green, white, 20%) !default; $green-light: mix($green, white, 20%) !default;
$green-dark: darken($green, 10%) !default; $green-dark: darken($green, 10%) !default;
$red: #cb3d4d !default;
$red-light: mix($red, white, 20%) !default; $red-light: mix($red, white, 20%) !default;
$red-dark: darken($red, 10%) !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-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default; $yellow-dark: mix($yellow, black, 40%) !default;
$brand-color: $orange !default; $brand-color: #f98012 !default;
$text-color: $black !default; $text-color: $black !default;
$text-color-rgb: color-to-rgb-list($text-color) !default;
$text-color-dark: $white !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: $gray-light !default;
$background-color-dark: $shade-90 !default; $background-color-rgb: color-to-rgb-list($background-color) !default;
$subdued-text-color: #595959 !default; $background-color-dark: mix(#ffffff, #000000, 90%) !default; // #1a1a1a
$subdued-text-color-dark: #b4b4b4 !default; $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
$ion-item-background: $white !default; $ion-item-background: $white !default;
$ion-item-background-dark: $shade-80 !default; $ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default;
$ion-item-divider-background: $gray-lighter !default; $ion-item-background-dark: mix(#ffffff, #000000, 80%) !default; // #333333
$ion-item-divider-color: $text-color !default; $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !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;
$primary: $brand-color !default; $primary: $brand-color !default;
$secondary: $blue !default; $secondary: $blue !default;
$tertiary: $turquoise !default;
$danger: $red !default; $danger: $red !default;
$warning: $yellow !default; $warning: $yellow !default;
$success: $green !default; $success: $green !default;
@ -105,71 +56,19 @@ $medium: $gray-light !default;
$dark: $black !default; $dark: $black !default;
$colors: ( $colors: (
primary: ( primary: $primary,
base: $primary, secondary: $secondary,
contrast: get_contrast_color($primary), success: $success,
shade: get-color-shade($primary), warning: $warning,
tint: get-color-tint($primary) danger: $danger,
), info: $info,
secondary: ( light: $light,
base: $secondary, medium: $medium,
contrast: get_contrast_color($secondary), dark: $dark
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; ) !default;
$primary-dark: $brand-color !default; $primary-dark: $brand-color !default;
$secondary-dark: mix($blue, white, 40%) !default; $secondary-dark: mix($blue, white, 40%) !default;
$tertiary-dark: mix($turquoise, white, 40%) !default;
$danger-dark: mix($red, white, 40%) !default; $danger-dark: mix($red, white, 40%) !default;
$warning-dark: mix($yellow, white, 40%) !default; $warning-dark: mix($yellow, white, 40%) !default;
$success-dark: mix($green, white, 40%) !default; $success-dark: mix($green, white, 40%) !default;
@ -178,75 +77,19 @@ $light-dark: $dark !default;
$medium-dark: $gray-light !default; $medium-dark: $gray-light !default;
$dark-dark: $light !default; $dark-dark: $light !default;
// Just swipe light and dark.
$colors-dark: ( $colors-dark: (
primary: ( primary: $primary-dark,
base: $primary-dark, secondary: $secondary-dark,
contrast: get_contrast_color($primary-dark), success: $success-dark,
shade: get-color-shade($primary-dark), warning: $warning-dark,
tint: get-color-tint($primary-dark) danger: $danger-dark,
), info: $info-dark,
secondary: ( light: $light-dark,
base: $secondary-dark, medium: $medium-dark,
contrast: get_contrast_color($secondary-dark), dark: $dark-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; ) !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 * Layout Breakpoints
* *
* https://ionicframework.com/docs/layout/grid#default-breakpoints * https://ionicframework.com/docs/layout/grid#default-breakpoints
@ -263,114 +106,10 @@ $screen-breakpoints: (
xl: 1200px xl: 1200px
) !default; ) !default;
$breakpoint-tablet: map-get($screen-breakpoints, tablet), !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;
/*
* 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-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-fixed-url: false !default;
$core-dashboard-logo: false !default; $core-dashboard-logo: false !default;
$core-always-show-main-menu: 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-show-courseimage-on-course: false !default;
$core-hide-progress-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-hide-progress-on-section-selector: false !default;
$core-course-hide-thumb-on-cards: false !default; $core-course-hide-thumb-on-cards: false !default;
$core-course-thumb-on-cards-background: null !default; $core-course-thumb-on-cards-background: null !default;
$core-course-hide-progress-on-cards: false !default; $core-course-hide-progress-on-cards: false !default;
$addon-calendar-event-category-color: $purple !default; // Configuration options for login page.
$addon-calendar-event-course-color: $red !default; $core-login-button-outline: false !default;
$addon-calendar-event-group-color: $yellow !default; $core-login-button-outline-dark: $core-login-button-outline !default;
$addon-calendar-event-user-color: $blue !default; $core-login-loading-color: false !default;
$addon-calendar-event-site-color: $green !default; $core-login-loading-color-dark: $text-color-dark !default;
$addon-calendar-today-border-color: $primary !default; $core-login-hide-forgot-password: false !default;
$addon-calendar-today-color: $white !default; $core-login-hide-need-help: false !default;
$addon-calendar-border-color: $gray !default;
$addon-messages-message-bg: $white !default; // Configuration options for more page.
$addon-messages-message-activated-bg: $gray-light !default; $core-more-hide-siteinfo: false !default;
$addon-messages-message-note-text: $gray-dark !default; $core-more-hide-sitename: false !default;
$addon-messages-message-note-font-size: 75% !default; $core-more-hide-siteurl: false !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;

49
src/theme/theme.base.scss
View File

@ -143,7 +143,7 @@ ion-app.ios ion-header h2 {
text-align: center; text-align: center;
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: #{$toolbar-ios-height}; line-height: var(--core-header-toolbar-height);
box-sizing: border-box; box-sizing: border-box;
pointer-events: none; pointer-events: none;
} }
@ -192,22 +192,15 @@ ion-button.ion-text-wrap {
} }
@each $color-name, $value in $colors { @each $color-name, $value in $colors {
$value: map-get($colors, $color-name);
$base: map-get($value, base);
.text-#{$color-name}, .text-#{$color-name},
p.text-#{$color-name} { p.text-#{$color-name} {
color: $base; color: var(--ion-color-#{$color-name});
} }
} }
// Ionic toolbar on header. // Ionic toolbar on header.
ion-app.md ion-toolbar { ion-toolbar {
--min-height: #{$toolbar-md-height}; --min-height: var(--core-header-toolbar-height);
}
ion-app.ios ion-toolbar {
--min-height: #{$toolbar-ios-height};
} }
ion-header ion-toolbar { ion-header ion-toolbar {
@ -280,7 +273,7 @@ button,
// Clear buttons will be black. // Clear buttons will be black.
ion-button.button-clear { ion-button.button-clear {
--ion-color-primary: var(--brand-contrast-color); --ion-color-primary: var(--brand-color-contrast);
} }
[role="button"], [role="button"],
@ -364,7 +357,7 @@ ion-alert .alert-message {
} }
ion-alert .alert-wrapper button.alert-button { ion-alert .alert-wrapper button.alert-button {
color: var(--brand-contrast-color); color: var(--brand-color-contrast);
} }
// Ionic list. // Ionic list.
@ -455,17 +448,13 @@ ion-toolbar {
} }
// Card styles // Card styles
@each $color-name, $value in $colors { @each $color-name, $base 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);
// Message cards. // Message cards.
ion-card.core-#{$color-name}-card { 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) { ion-item::part(native) {
--inner-border-width: 0; --inner-border-width: 0;
@ -474,22 +463,24 @@ ion-toolbar {
white-space: normal !important; white-space: normal !important;
} }
ion-icon { ion-icon {
color: $base; color: var(--color-base);
} }
} }
.item.core-#{$color-name}-item { .item.core-#{$color-name}-item {
--color-base: var(--ion-color-#{$color-name});
--inner-border-width: 0 0 3px 0; --inner-border-width: 0 0 3px 0;
--border-width: 0; --border-width: 0;
border-bottom: 3px solid $base !important; border-bottom: 3px solid var(--color-base) !important;
ion-icon { ion-icon {
color: $base; color: var(--color-base);
} }
} }
ion-icon.ion-color-#{$color-name} { ion-icon.ion-color-#{$color-name} {
color: $base; --ion-color-base: var(--ion-color-#{$color-name});
--ion-color-base: #{$base}; color: var(--ion-color-base);
} }
} }
@ -592,7 +583,7 @@ ion-toolbar h1 .core-bar-button-image img {
// Radio. // Radio.
ion-radio, ion-radio,
input[type=radio] { input[type=radio] {
--color: var(--brand-contrast-color); --color: var(--brand-color-contrast);
--color-checked: var(--color); --color-checked: var(--color);
--border-radius: 50%; --border-radius: 50%;
--border-width: 2px; --border-width: 2px;
@ -646,8 +637,8 @@ input[type=radio] {
ion-checkbox, ion-checkbox,
input[type=checkbox] { input[type=checkbox] {
--border-radius: 2px; --border-radius: 2px;
--border-color-checked: var(--brand-contrast-color); --border-color-checked: var(--brand-color-contrast);
--background-checked: var(--brand-contrast-color); --background-checked: var(--brand-color-contrast);
--checkmark-color: var(--contrast-background); --checkmark-color: var(--contrast-background);
--border-width: 2px; --border-width: 2px;
--outer-border-width: 2px; --outer-border-width: 2px;

93
src/theme/theme.dark.scss
View File

@ -6,14 +6,8 @@
*/ */
:root body.dark { :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. // Enlighten the ionic shades.
--ion-color-step-0: #000000;
--ion-color-step-50: #1e1e1e; --ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a; --ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636; --ion-color-step-150: #363636;
@ -33,12 +27,18 @@
--ion-color-step-850: #dbdbdb; --ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7; --ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3; --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}; --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}; --secondary: #{$secondary-dark};
--tertiary: #{$tertiary-dark};
--success: #{$success-dark}; --success: #{$success-dark};
--danger: #{$danger-dark}; --danger: #{$danger-dark};
--warning: #{$warning-dark}; --warning: #{$warning-dark};
@ -51,25 +51,19 @@
@include generate-color($color-name, $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-color: var(--text-color);
--ion-card-background: #{$ion-item-background-dark}; --ion-card-background: var(--ion-item-background);
--contrast-background: black; --contrast-background: black;
--ion-placeholder-color: #{$ion-placeholder-color-dark};
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-alternative: var(--black); --background-alternative: var(--black);
} }
--core-bottom-tabs-background: #{$bottom-tabs-background-dark}; --core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
--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};
ion-action-sheet { ion-action-sheet {
.action-sheet-cancel { .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-background: var(--black);
--core-header-toolbar-border-color: #{$toolbar-border-color-dark}; --core-header-toolbar-color: var(--white);
--core-header-toolbar-color: #{$toolbar-color-dark};
--core-tabs-background: #{$core-tabs-background-dark}; --core-tabs-background: var(--ion-color-step-200);
--core-tab-background: #{$core-tab-background-dark}; --core-tab-border-color: var(--gray-light);
--core-tab-color: #{$core-tab-color-dark}; --core-tab-color-active: var(--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-progressbar-color: #{$core-progressbar-color-dark}; --core-progressbar-text-color: var(--gray-lighter);
--core-progressbar-text-color: #{$core-progressbar-text-color-dark};
--ion-item-background: #{$ion-item-background-dark}; --ion-item-background: #{$ion-item-background-dark};
--ion-item-detail-icon-color: var(--white); --ion-item-detail-icon-color: var(--white);
--item-divider-background: #{$ion-item-divider-background-dark}; --item-divider-background: var(--ion-color-step-200);
--item-divider-color: #{$ion-item-divider-color-dark}; --spacer-background: var(--ion-color-step-1000);
--spacer-background: #{$core-spacer-background-dark};
--core-combobox-background: #{$core-combobox-background-dark}; --core-combobox-color: var(--white);
--core-combobox-color: #{$core-combobox-color-dark};
--selected-item-color: #{$core-selected-item-color-dark}; --core-login-background: var(--black);
--core-login-text-color: var(--white);
--core-login-background: #{$core-login-background-dark}; --core-login-input-background: var(--core-login-background);
--core-login-text-color: #{$core-login-text-color-dark}; --core-login-input-color: var(--core-login-text-color);
--core-login-input-background: #{$core-login-input-background-dark};
--core-login-input-color: #{$core-login-input-color-dark};
--core-question-correct-color: var(--green-light); --core-question-correct-color: var(--green-light);
--core-question-correct-color-bg: var(--green-dark); --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-selected-shadow: 2px 2px 4px var(--gray-light);
--core-dd-question-border: 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-background: var(--black);
--core-send-message-input-color: #{$core-send-message-input-color-dark}; --core-send-message-input-color: var(--white);
--addon-messages-message-bg: #{$addon-messages-message-bg-dark}; --addon-messages-message-bg: var(--ion-color-step-200);
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; --addon-messages-message-activated-bg: var(--ion-color-step-300);
--addon-messages-message-note-text: #{$addon-messages-message-note-text-dark}; --addon-messages-message-note-text: var(--subdued-text-color);
--addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg-dark}; --addon-messages-message-mine-bg: var(--ion-color-step-350);
--addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg-dark}; --addon-messages-message-mine-activated-bg: var(--ion-color-step-450);
--addon-messages-discussion-badge: #{$addon-messages-discussion-badge-dark}; --addon-messages-discussion-badge: var(--primary);
--addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text-dark}; --addon-messages-discussion-badge-text: var(--dark);
--addon-forum-border-color: #{$addon-forum-border-color-dark}; --addon-forum-border-color: var(--gray-dark);
--addon-forum-highlight-color: #{$addon-forum-highlight-color-dark}; --addon-forum-highlight-color: var(--gray-darker);
} }

187
src/theme/theme.light.scss
View File

@ -9,21 +9,17 @@
// Color palette // Color palette
--black: #{$black}; // Headings, standard text. --black: #{$black}; // Headings, standard text.
--gray-darker: #{$gray-darker}; --gray-darker: #{$gray-darker}; // Text (emphasis-detail), placeholder, background.
--gray-dark: #{$gray-dark}; --gray-dark: #{$gray-dark}; // Borders (never text).
--gray: #{$gray}; --gray: #{$gray};
--gray-light: #{$gray-light}; --gray-light: #{$gray-light}; // Background.
--gray-lighter: #{$gray-lighter}; --gray-lighter: #{$gray-lighter};
--white: #{$white}; --white: #{$white}; // Background, reversed text.
--blue: #{$blue}; --blue: #{$blue};
--blue-light: #{$blue-light}; --blue-light: #{$blue-light};
--blue-dark: #{$blue-dark}; --blue-dark: #{$blue-dark};
--turquoise: #{$turquoise};
--turquoise-light: #{$turquoise-light};
--turquoise-dark: #{$turquoise-dark};
--green: #{$green}; --green: #{$green};
--green-light: #{$green-light}; --green-light: #{$green-light};
--green-dark: #{$green-dark}; --green-dark: #{$green-dark};
@ -32,23 +28,24 @@
--red-light: #{$red-light}; --red-light: #{$red-light};
--red-dark: #{$red-dark}; --red-dark: #{$red-dark};
--orange: #{$orange};
--orange-light: #{$orange-light};
--yellow: #{$yellow}; --yellow: #{$yellow};
--yellow-light: #{$yellow-light}; --yellow-light: #{$yellow-light};
--yellow-dark: #{$yellow-dark}; --yellow-dark: #{$yellow-dark};
--purple: #{$purple};
--turquoise: #007982; // Accent.
--purple: #8e24aa;
--text-color: #{$text-color};
--background-color: #{$background-color};
--brand-color: #{$brand-color}; --brand-color: #{$brand-color};
--brand-contrast-color: #{$brand-contrast-color}; --brand-color-contrast: var(--text-color);
--core-online-color: #{$core-online-color}; --core-online-color: #5cb85c;
// Named Color Variables // Named Color Variables
--primary: #{$primary}; --primary: var(--brand-color);
--secondary: #{$secondary}; --secondary: #{$secondary};
--tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--danger: #{$danger}; --danger: #{$danger};
--warning: #{$warning}; --warning: #{$warning};
@ -68,31 +65,32 @@
--module-icon-size: 24px; --module-icon-size: 24px;
--ion-background-color: #{$background-color}; --ion-background-color: var(--background-color);
--ion-background-color-rgb: #{color-to-rgb-list($background-color)}; --ion-background-color-rgb: #{$background-color-rgb};
--contrast-background: white; --contrast-background: white;
--ion-text-color: #{$text-color}; --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{color-to-rgb-list($text-color)}; --ion-text-color-rgb: #{$text-color-rgb};
--subdued-text-color: #{$subdued-text-color}; --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}; --text-hightlight-background-color: #{$core-text-hightlight-background-color};
--ion-placeholder-color: #{$ion-placeholder-color}; --ion-placeholder-color: var(--subdued-text-color);
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-alternative: var(--gray-lighter); --background-alternative: var(--gray-lighter);
} }
--core-bottom-tabs-background: #{$bottom-tabs-background}; --core-bottom-tabs-background: var(--black);
--core-bottom-tabs-color: #{$bottom-tabs-color}; --core-bottom-tabs-color: var(--gray-lighter);
--core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected}; --core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color}; --core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color}; --core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
--bottom-tabs-size: 56px;
ion-tab-bar.mainmenu-tabs { ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background); --background: var(--core-bottom-tabs-background);
--color: var(--core-bottom-tabs-color); --color: var(--core-bottom-tabs-color);
@ -103,16 +101,21 @@
} }
} }
--core-link-color: #{$link-color}; --core-link-color: var(--blue);
a { a {
color: var(--core-link-color); color: var(--core-link-color);
} }
--core-header-toolbar-button-image-size: #{$toolbar-button-image-size}; --core-header-toolbar-button-image-size: 44px;
--core-header-toolbar-background: #{$toolbar-background}; --core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: #{$toolbar-border-width}; --core-header-toolbar-border-width: 3px;
--core-header-toolbar-border-color: #{$toolbar-border-color}; --core-header-toolbar-border-color: var(--brand-color);
--core-header-toolbar-color: #{$toolbar-color}; --core-header-toolbar-color: var(--black);
--core-header-toolbar-height: 56px;
html.ios {
--core-header-toolbar-height: 54px;
}
ion-header ion-toolbar { ion-header ion-toolbar {
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
--background: var(--core-header-toolbar-background); --background: var(--core-header-toolbar-background);
@ -160,14 +163,14 @@
} }
} }
--core-tabs-background: #{$core-tabs-background}; --core-tabs-background: var(--white);
--core-tab-background: #{$core-tab-background}; --core-tab-background: var(--core-tabs-background);
--core-tab-color: #{$core-tab-color}; --core-tab-color: var(--subdued-text-color);
--core-tab-border-color: #{$core-tab-border-color}; --core-tab-border-color: var(--gray);
--core-tab-color-active: #{$core-tab-color-active}; --core-tab-color-active: var(--dark);
--core-tab-border-color-active: #{$core-tab-border-color-active}; --core-tab-border-color-active: var(--brand-color);
--core-tab-font-weight-active: #{$core-tab-font-weight-active}; --core-tab-font-weight-active: normal;
--core-tabs-height: 56px;
core-tabs, core-tabs-outlet { core-tabs, core-tabs-outlet {
ion-slide { ion-slide {
--background: var(--core-tab-background); --background: var(--core-tab-background);
@ -184,10 +187,10 @@
--color: var(--ion-color-primary); --color: var(--ion-color-primary);
} }
--core-progressbar-height: #{$core-progressbar-height}; --core-progressbar-height: 8px;
--core-progressbar-color: #{$core-progressbar-color}; --core-progressbar-color: var(--brand-color);
--core-progressbar-text-color: #{$core-progressbar-text-color}; --core-progressbar-text-color: var(--gray-darker);
--core-progressbar-background: #{$core-progressbar-background}; --core-progressbar-background: var(--gray-lighter);
core-progress-bar { core-progress-bar {
--height: var(--core-progressbar-height); --height: var(--core-progressbar-height);
--color: var(--core-progressbar-color); --color: var(--core-progressbar-color);
@ -195,9 +198,11 @@
--background: var(--core-progressbar-background); --background: var(--core-progressbar-background);
} }
--core-side-blocks-max-width: 30%;
--core-side-blocks-min-width: 280px;
core-block-course-blocks { core-block-course-blocks {
--side-blocks-max-width: #{$core-side-blocks-max-width}; --side-blocks-max-width: var(--core-side-blocks-max-width);
--side-blocks-min-width: #{$core-side-blocks-min-width}; --side-blocks-min-width: var(--core-side-blocks-min-width);
} }
--ion-item-background: #{$ion-item-background}; --ion-item-background: #{$ion-item-background};
@ -211,8 +216,8 @@
} }
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px); --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
--item-divider-background: #{$ion-item-divider-background}; --item-divider-background: var(--gray-lighter);
--item-divider-color: #{$ion-item-divider-color}; --item-divider-color: var(--text-color);
ion-item-divider, ion-item.divider { ion-item-divider, ion-item.divider {
--background: var(--item-divider-background); --background: var(--item-divider-background);
--color: var(--item-divider-color); --color: var(--item-divider-color);
@ -220,7 +225,7 @@
min-height: var(--min-height); min-height: var(--min-height);
} }
--spacer-background: #{$core-spacer-background}; --spacer-background: var(--item-divider-background);
core-spacer { core-spacer {
--item-divider-background: var(--spacer-background); --item-divider-background: var(--spacer-background);
} }
@ -230,49 +235,50 @@
} }
--core-combobox-background: var(--ion-item-background); --core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color}; --core-combobox-color: var(--black);
--core-combobox-background: #{$core-combobox-background}; --core-combobox-border-color: var(--primary);
--core-combobox-border-color: #{$core-combobox-border-color}; --core-combobox-border-width: 3px;
--core-combobox-border-width: #{$core-combobox-border-width};
--selected-item-color: #{$core-selected-item-color}; --selected-item-color: var(--primary);
--selected-item-border-width: #{$core-selected-item-border-width}; --selected-item-border-width: 5px;
--core-login-background: #{$core-login-background}; --core-login-background: var(--white);
--core-login-text-color: #{$core-login-text-color}; --core-login-text-color: var(--black);
--core-login-input-background: #{$core-login-input-background}; --core-login-input-background: var(--white);
--core-login-input-color: #{$core-login-input-color}; --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-large-avatar-size: 90px;
--core-avatar-size: #{$core-avatar-size}; --core-avatar-size: 44px;
--core-send-message-input-background: #{$core-send-message-input-background}; --core-send-message-input-background: var(--gray-light);
--core-send-message-input-color: #{$core-send-message-input-color}; --core-send-message-input-color: var(--black);
--addon-calendar-event-category-color: #{$addon-calendar-event-category-color}; --core-courseimage-on-course-height: 150px;
--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};
--addon-messages-message-bg: #{$addon-messages-message-bg}; --addon-calendar-event-category-color: var(--purple);
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg}; --addon-calendar-event-course-color: var(--red);
--addon-messages-message-note-text: #{$addon-messages-message-note-text}; --addon-calendar-event-group-color: var(--yellow);
--addon-messages-message-note-font-size: #{$addon-messages-message-note-font-size}; --addon-calendar-event-user-color: var(--blue);
--addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg}; --addon-calendar-event-site-color: var(--green);
--addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg}; --addon-calendar-today-border-color: var(--primary);
--addon-messages-avatar-size: #{$addon-messages-avatar-size}; --addon-calendar-today-color: var(--white);
--addon-messages-discussion-badge: #{$addon-messages-discussion-badge}; --addon-calendar-border-color: var(--gray);
--addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text};
--addon-forum-avatar-size: #{$addon-forum-avatar-size}; --addon-messages-message-bg: var(--white);
--addon-forum-border-color: #{$addon-forum-border-color}; --addon-messages-message-activated-bg: var(--gray-light);
--addon-forum-highlight-color: #{$addon-forum-highlight-color}; --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; --drop-shadow: 0, 0, 0, 0.18;
@ -300,11 +306,12 @@
--core-dd-question-radius: 10px; --core-dd-question-radius: 10px;
--core-dd-question-border: var(--gray-darker); --core-dd-question-border: var(--gray-darker);
@if ($core-more-icon-color) { @for $i from 0 to length($core-course-image-background) {
--core-more-icon: #{$core-more-icon-color}; --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
} }
@if ($core-more-item-border) { @for $i from 0 to length($core-dd-question-colors) {
--core-more-item-border: #{$core-more-item-border}; --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))};
} }
} }