2021-02-03 09:30:07 +00:00
|
|
|
/*
|
|
|
|
|
* App LIGHT theme CSS
|
|
|
|
|
* ----------------------------------------------------------------------------
|
|
|
|
|
* Ionic Variables and Theming. For more info, please see:
|
|
|
|
|
* http://ionicframework.com/docs/theming/
|
|
|
|
|
*/
|
2020-10-06 10:48:02 +00:00
|
|
|
|
2020-10-05 12:56:27 +00:00
|
|
|
:root {
|
2020-10-22 13:13:12 +00:00
|
|
|
|
|
|
|
|
// Color palette
|
2021-02-03 09:30:07 +00:00
|
|
|
--black: #{$black}; // Headings, standard text.
|
|
|
|
|
--gray-darker: #{$gray-darker};
|
|
|
|
|
--gray-dark: #{$gray-dark};
|
|
|
|
|
--gray: #{$gray};
|
|
|
|
|
--gray-light: #{$gray-light};
|
|
|
|
|
--gray-lighter: #{$gray-lighter};
|
|
|
|
|
--white: #{$white};
|
|
|
|
|
|
|
|
|
|
--blue: #{$blue};
|
2021-02-03 14:59:12 +00:00
|
|
|
--blue-light: #{$blue-light};
|
2021-02-23 07:53:24 +00:00
|
|
|
--blue-dark: #{$blue-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--turquoise: #{$turquoise};
|
2021-02-23 07:53:24 +00:00
|
|
|
--turquoise-light: #{$turquoise-light};
|
|
|
|
|
--turquoise-dark: #{$turquoise-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--green: #{$green};
|
2021-02-23 07:53:24 +00:00
|
|
|
--green-light: #{$green-light};
|
|
|
|
|
--green-dark: #{$green-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--red: #{$red};
|
2021-02-23 07:53:24 +00:00
|
|
|
--red-light: #{$red-light};
|
|
|
|
|
--red-dark: #{$red-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--orange: #{$orange};
|
2021-02-23 07:53:24 +00:00
|
|
|
--orange-light: #{$orange-light};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--yellow: #{$yellow};
|
2021-02-23 07:53:24 +00:00
|
|
|
--yellow-light: #{$yellow-light};
|
|
|
|
|
--yellow-dark: #{$yellow-dark};
|
2021-02-03 09:30:07 +00:00
|
|
|
--purple: #{$purple};
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--brand-color: #{$brand-color};
|
|
|
|
|
--brand-color-light: #{$brand-color-light};
|
|
|
|
|
--brand-color-dark: #{$brand-color-dark};
|
2021-02-23 07:53:24 +00:00
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--core-online-color: #{$core-online-color};
|
|
|
|
|
|
|
|
|
|
// Named Color Variables
|
2021-03-31 07:17:14 +00:00
|
|
|
--primary: #{$primary};
|
|
|
|
|
--secondary: #{$secondary};
|
|
|
|
|
--tertiary: #{$tertiary};
|
|
|
|
|
--success: #{$success};
|
|
|
|
|
--danger: #{$danger};
|
|
|
|
|
--warning: #{$warning};
|
|
|
|
|
--info: #{$info};
|
|
|
|
|
--light: #{$light};
|
|
|
|
|
--dark: #{$dark};
|
|
|
|
|
--medium: #{$medium};
|
2021-02-23 07:53:24 +00:00
|
|
|
|
|
|
|
|
@each $color-name, $value in $colors {
|
|
|
|
|
@include generate-color($color-name);
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-06 09:33:10 +00:00
|
|
|
// Accessibility vars.
|
|
|
|
|
--a11y-min-target-size: 44px;
|
|
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--module-icon-size: 24px;
|
|
|
|
|
|
2021-02-23 07:53:24 +00:00
|
|
|
--ion-text-color: #{$text-color};
|
2020-10-22 13:13:12 +00:00
|
|
|
--ion-text-color-rgb: 58,58,58;
|
2021-01-12 09:38:34 +00:00
|
|
|
--ion-card-color: var(--ion-text-color);
|
2020-10-22 13:13:12 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
|
2021-01-21 14:00:38 +00:00
|
|
|
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-content {
|
2021-02-03 09:30:07 +00:00
|
|
|
--background: #{$background-color};
|
2021-01-22 16:06:30 +00:00
|
|
|
--background-lighter: var(--gray-lighter);
|
2020-12-14 13:50:37 +00:00
|
|
|
--contrast-background: var(--white);
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-bottom-tabs-background: #{$bottom-tabs-background};
|
|
|
|
|
--core-bottom-tabs-color: #{$bottom-tabs-color};
|
|
|
|
|
--core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-tab-bar {
|
2021-05-07 08:31:06 +00:00
|
|
|
--background: var(--core-bottom-tabs-background);
|
|
|
|
|
--color: var(--core-bottom-tabs-color);
|
|
|
|
|
--color-selected: var(--core-bottom-tabs-color-selected);
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-link-color: #{$link-color};
|
|
|
|
|
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-color: #{$toolbar-color};
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-toolbar {
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
|
|
|
|
--background: var(--core-header-toolbar-background);
|
2020-12-04 15:10:10 +00:00
|
|
|
ion-button {
|
|
|
|
|
--ion-toolbar-color: transparent;
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
2020-12-04 15:10:10 +00:00
|
|
|
}
|
2020-11-20 10:59:36 +00:00
|
|
|
|
|
|
|
|
ion-spinner {
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
2020-11-20 10:59:36 +00:00
|
|
|
}
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2020-11-04 16:37:02 +00:00
|
|
|
ion-action-sheet {
|
2021-05-07 08:31:06 +00:00
|
|
|
--button-color-selected: #{$action-sheet-selected};
|
|
|
|
|
--title-border-color: var(--gray);
|
|
|
|
|
|
|
|
|
|
.action-sheet-title {
|
|
|
|
|
--color: #{$action-sheet-title-color};
|
|
|
|
|
}
|
2020-11-04 16:37:02 +00:00
|
|
|
|
|
|
|
|
@media (min-height: 500px) {
|
|
|
|
|
--max-height: 50%;
|
|
|
|
|
--height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-sheet-cancel {
|
|
|
|
|
--button-color: var(--ion-color-danger);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--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};
|
2021-01-26 16:38:23 +00:00
|
|
|
|
2021-02-01 11:32:10 +00:00
|
|
|
core-tabs, core-tabs-outlet {
|
2020-11-03 07:37:59 +00:00
|
|
|
ion-slide {
|
2021-01-26 16:38:23 +00:00
|
|
|
--background: var(--core-tab-background);
|
|
|
|
|
--color: var(--core-tab-color);
|
2021-05-05 15:41:37 +00:00
|
|
|
--border-color: var(--core-tab-border-color);
|
2021-01-26 16:38:23 +00:00
|
|
|
--color-active: var(--core-tab-color-active);
|
|
|
|
|
--border-color-active: var(--core-tab-border-color-active);
|
2020-11-03 07:37:59 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-12 08:44:44 +00:00
|
|
|
ion-spinner {
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--ion-color-primary);
|
2020-11-12 08:44:44 +00:00
|
|
|
}
|
|
|
|
|
|
2020-11-18 10:07:56 +00:00
|
|
|
core-progress-bar {
|
2021-05-07 08:31:06 +00:00
|
|
|
--height: #{$core-progressbar-height};
|
|
|
|
|
--color: #{$core-progressbar-color};
|
|
|
|
|
--text-color: #{$core-progressbar-text-color};
|
|
|
|
|
--background: #{$core-progressbar-background};
|
2020-11-18 10:07:56 +00:00
|
|
|
}
|
|
|
|
|
|
2020-12-07 16:04:31 +00:00
|
|
|
core-block-course-blocks {
|
2021-05-07 08:31:06 +00:00
|
|
|
--side-blocks-max-width: #{$core-side-blocks-max-width};
|
|
|
|
|
--side-blocks-min-width: #{$core-side-blocks-min-width};
|
2020-12-07 16:04:31 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--ion-item-background: #{$ion-item-background};
|
2021-05-03 13:32:10 +00:00
|
|
|
--ion-item-detail-icon-color: var(--gray-darker);
|
|
|
|
|
--ion-item-detail-icon-font-size: 20px;
|
|
|
|
|
--ion-item-detail-icon-opacity: 1;
|
|
|
|
|
ion-item {
|
|
|
|
|
--detail-icon-color: var(--ion-item-detail-icon-color);
|
|
|
|
|
--detail-icon-font-size: var(--ion-item-detail-icon-font-size);
|
|
|
|
|
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-10 10:19:34 +00:00
|
|
|
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
|
2021-05-11 09:52:57 +00:00
|
|
|
ion-item-divider, ion-item.divider {
|
2020-12-14 13:50:37 +00:00
|
|
|
--background: var(--gray-lighter);
|
2021-02-03 09:55:01 +00:00
|
|
|
--color: inherit;
|
2021-05-11 09:52:57 +00:00
|
|
|
--min-height: var(--item-divider-min-height);
|
|
|
|
|
min-height: var(--min-height);
|
2020-12-14 13:50:37 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-combobox-background: var(--ion-item-background);
|
|
|
|
|
--core-combobox-color: #{$core-combobox-color};
|
2021-01-27 16:04:21 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--selected-item-color: #{$core-selected-item-color};
|
|
|
|
|
--selected-item-border-width: #{$core-selected-item-border-width};
|
2020-11-12 08:53:56 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-login-background: #{$core-login-background};
|
|
|
|
|
--core-login-text-color: #{$core-login-text-color};
|
2020-11-20 10:59:36 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-star-color: #{$core-star-color};
|
2020-12-04 14:23:00 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-large-avatar-size: #{$core-large-avatar-size};
|
|
|
|
|
--core-avatar-size: #{$core-avatar-size};
|
2020-12-14 13:50:37 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-send-message-input-background: #{$core-send-message-input-background};
|
|
|
|
|
--core-send-message-input-color: #{$core-send-message-input-color};
|
2021-01-22 16:06:30 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--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-bgcolor: #{$addon-calendar-today-bgcolor};
|
|
|
|
|
--addon-calendar-today-color: #{$addon-calendar-today-color};
|
|
|
|
|
--addon-calendar-border-color: #{$addon-calendar-border-color};
|
2021-01-22 16:06:30 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--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};
|
2021-01-26 11:21:40 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--addon-forum-avatar-size: #{$addon-forum-avatar-size};
|
|
|
|
|
--addon-forum-border-color: #{$addon-forum-border-color};
|
|
|
|
|
--addon-forum-highlight-color: #{$addon-forum-highlight-color};
|
2021-02-16 10:18:12 +00:00
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--drop-shadow: 0, 0, 0, 0.18;
|
2021-01-26 11:21:40 +00:00
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
|
|
|
|
|
--core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
|
2021-02-18 08:19:38 +00:00
|
|
|
|
|
|
|
|
--core-question-correct-color: var(--green-dark);
|
|
|
|
|
--core-question-correct-color-bg: var(--green-light);
|
|
|
|
|
--core-question-incorrect-color: var(--red);
|
|
|
|
|
--core-question-incorrect-color-bg: var(--red-light);
|
|
|
|
|
--core-question-feedback-color: var(--yellow-dark);
|
|
|
|
|
--core-question-feedback-color-bg: var(--yellow-light);
|
|
|
|
|
--core-question-warning-color: var(--red);
|
|
|
|
|
--core-question-saved-color-bg: var(--gray-light);
|
|
|
|
|
|
|
|
|
|
--core-question-state-correct-color: var(--green-light);
|
|
|
|
|
--core-question-state-partial-color: var(--yellow-light);
|
|
|
|
|
--core-question-state-partial-text: var(--yellow);
|
|
|
|
|
--core-question-state-incorrect-color: var(--red-light);
|
|
|
|
|
|
|
|
|
|
--core-question-feedback-color: var(--yellow-dark);
|
|
|
|
|
--core-question-feedback-background-color: var(--yellow-light);
|
|
|
|
|
|
|
|
|
|
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
|
2021-05-06 09:33:10 +00:00
|
|
|
|
2020-10-05 12:56:27 +00:00
|
|
|
}
|
