EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2838 from crazyserver/MOBILE-3320 

MOBILE-3320 style: Reduce usage of scss variables
main
Dani Palou 2021-06-17 13:23:52 +02:00 committed by GitHub
parent f218dadce4 03eaed38ab
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.
: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);
}
}

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) {
.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);
}
}

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

@ -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;

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;
:host {

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

@ -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;

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) {
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) {
&[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";
@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 {

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

@ -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);

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

@ -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});
}
}
}

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.
// --------------------------------------------------------------------------------------------
@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);
}
}

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

@ -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;

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

@ -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;

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

@ -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);
}

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

@ -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))};
}
}