/* * App LIGHT theme CSS * ---------------------------------------------------------------------------- * Ionic Variables and Theming. For more info, please see: * http://ionicframework.com/docs/theming/ */ :root { // Color palette --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}; --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}; --red: #{$red}; --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}; --core-online-color: #{$core-online-color}; // Named Color Variables --primary: #{$primary}; --secondary: #{$secondary}; --tertiary: #{$tertiary}; --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); } // Accessibility vars. --a11y-min-target-size: 44px; --a11y-focus-color: var(--primary); --a11y-focus-width: 2px; --module-icon-size: 24px; --ion-background-color: #{$background-color}; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; --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-card-color: var(--ion-text-color); --text-hightlight-background-color: #{$core-text-hightlight-background-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}; ion-tab-bar.mainmenu-tabs { --background: var(--core-bottom-tabs-background); --color: var(--core-bottom-tabs-color); --color-selected: var(--core-bottom-tabs-color-selected); ion-badge { --background: var(--core-bottom-tabs-badge-color); --color: var(--core-bottom-tabs-badge-text-color); } } --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-border-width: #{$toolbar-border-width}; --core-header-toolbar-border-color: #{$toolbar-border-color}; --core-header-toolbar-color: #{$toolbar-color}; ion-header ion-toolbar { --color: var(--core-header-toolbar-color); --background: var(--core-header-toolbar-background); --border-width: 0 0 var(--core-header-toolbar-border-width) 0; --border-color: var(--core-header-toolbar-border-color); ion-button { --ion-toolbar-color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color); } ion-spinner { --ion-color-base: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color); } } ion-header.header-ios ion-toolbar:last-of-type { --border-width: 0 0 var(--core-header-toolbar-border-width) 0; } ion-searchbar { --background: var(--ion-item-background); .searchbar-input { height: var(--a11y-min-target-size); } } ion-action-sheet { --button-color: var(--ion-text-color); --button-color-selected: var(--ion-text-color); --title-border-color: var(--gray); .action-sheet-title { --color: var(--ion-text-color); } @media (min-height: 500px) { --max-height: 50%; --height: 100%; } .action-sheet-cancel { --button-color: var(--ion-color-danger); } } --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, core-tabs-outlet { ion-slide { --background: var(--core-tab-background); --color: var(--core-tab-color); --border-color: var(--core-tab-border-color); --color-active: var(--core-tab-color-active); --border-color-active: var(--core-tab-border-color-active); --font-weight-active: var(--core-tab-font-weight-active); } } ion-spinner { --ion-color-base: var(--ion-color-primary); --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-progress-bar { --height: var(--core-progressbar-height); --color: var(--core-progressbar-color); --text-color: var(--core-progressbar-text-color); --background: var(--core-progressbar-background); } core-block-course-blocks { --side-blocks-max-width: #{$core-side-blocks-max-width}; --side-blocks-min-width: #{$core-side-blocks-min-width}; } --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; 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); } --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}; ion-item-divider, ion-item.divider { --background: var(--item-divider-background); --color: var(--item-divider-color); --min-height: var(--item-divider-min-height); min-height: var(--min-height); } --spacer-background: #{$core-spacer-background}; core-spacer { --item-divider-background: var(--spacer-background); } --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}; --selected-item-color: #{$core-selected-item-color}; --selected-item-border-width: #{$core-selected-item-border-width}; --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-star-color: #{$core-star-color}; --core-large-avatar-size: #{$core-large-avatar-size}; --core-avatar-size: #{$core-avatar-size}; --core-send-message-input-background: #{$core-send-message-input-background}; --core-send-message-input-color: #{$core-send-message-input-color}; --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}; --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-forum-avatar-size: #{$addon-forum-avatar-size}; --addon-forum-border-color: #{$addon-forum-border-color}; --addon-forum-highlight-color: #{$addon-forum-highlight-color}; --drop-shadow: 0, 0, 0, 0.18; --core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow)); --core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow)); --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); --core-dd-question-radius: 10px; --core-dd-question-border: var(--gray-darker); @if ($core-more-icon-color) { --core-more-icon: #{$core-more-icon-color}; } @if ($core-more-item-border) { --core-more-item-border: #{$core-more-item-border}; } }