255 lines
8.5 KiB
SCSS
255 lines
8.5 KiB
SCSS
// Ionic Variables and Theming. For more info, please see:
|
|
// http://ionicframework.com/docs/theming/
|
|
|
|
// Font path is used to include ionicons,
|
|
// roboto, and noto sans fonts
|
|
$font-path: "../assets/fonts";
|
|
|
|
// The app direction is used to include
|
|
// rtl styles in your app. For more info, please see:
|
|
// http://ionicframework.com/docs/theming/rtl-support/
|
|
$app-direction: ltr;
|
|
|
|
|
|
@import "ionic.globals";
|
|
|
|
// Color palette
|
|
$black: #3a3a3a; // Headings, standard text.
|
|
$gray-darker: #626262; // Text (emphasis-detail), placeholder, background.
|
|
$gray-dark: #9e9e9e; // Borders (never text).
|
|
$gray: #dddddd;
|
|
$gray-light: #eeeeee; // Background.
|
|
$gray-lighter: #f5f5f5;
|
|
$white: #ffffff; // Background, reversed text.
|
|
|
|
$blue: #0064d2; // Link, background.
|
|
$turquoise: #007982; // Accent.
|
|
$green: #5e8100; // Accent.
|
|
$red: #cb3d4d;
|
|
$orange: #f98012; // Accent (never text).
|
|
$yellow: #fbad1a; // Accent (never text).
|
|
$core-color: $orange;
|
|
|
|
// Branded apps customization
|
|
// --------------------------------------------------
|
|
@import "bmma";
|
|
|
|
|
|
$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-light: mix($green, white, 20%) !default;
|
|
$green-dark: darken($green, 10%) !default;
|
|
|
|
$red-light: mix($red, white, 20%) !default;
|
|
$red-dark: darken($red, 10%) !default;
|
|
|
|
$orange-light: lighten($orange, 10%) !default;
|
|
|
|
$yellow-light: mix($yellow, white, 20%) !default;
|
|
$yellow-dark: mix($yellow, black, 40%) !default;
|
|
|
|
$core-color-light: lighten($core-color, 10%) !default;
|
|
$core-color-dark: darken($core-color, 10%) !default;
|
|
|
|
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
|
|
|
|
// Shared Variables
|
|
// --------------------------------------------------
|
|
// To customize the look and feel of this app, you can override
|
|
// the Sass variables found in Ionic's source scss files.
|
|
// To view all the possible Ionic variables, see:
|
|
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
|
|
|
|
$toolbar-background: $core-color !default;
|
|
$content-padding: 10px;
|
|
|
|
// Named Color Variables
|
|
// --------------------------------------------------
|
|
// Named colors makes it easy to reuse colors on various components.
|
|
// It's highly recommended to change the default colors
|
|
// to match your app's branding. Ionic uses a Sass map of
|
|
// colors so you can add, rename and remove colors as needed.
|
|
// The "primary" color is the only required color in the map.
|
|
|
|
$colors: (
|
|
primary: $core-color,
|
|
secondary: $turquoise,
|
|
danger: $red,
|
|
light: $gray-lighter,
|
|
gray: $gray-dark,
|
|
dark: $black,
|
|
warning: $yellow,
|
|
success: $green,
|
|
info: $blue
|
|
);
|
|
|
|
$text-color: $black !default;
|
|
$link-color: $blue !default;
|
|
$background-color: $gray-light !default;
|
|
$subdued-text-color: $gray-darker !default;
|
|
|
|
$core-warning-color: colors($colors, warning) !default; // yellow.
|
|
$core-success-color: colors($colors, success) !default; // green.
|
|
$core-info-color: colors($colors, info) !default; // / blue.
|
|
$core-error-color: colors($colors, alert) !default; // Red.
|
|
|
|
$list-background-color: $white !default;
|
|
|
|
$tabs-background: $gray-darker !default;
|
|
$tabs-border-color: #b2b2b2 !default;
|
|
$tabs-tab-color-active: $core-color !default;
|
|
$tabs-tab-color-inactive: $white !default;
|
|
|
|
$text-input-highlight-color-valid: $green !default;
|
|
$text-input-highlight-color-invalid: $red !default;
|
|
|
|
$button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) ;
|
|
|
|
$refresher-icon-color: $core-color !default;
|
|
|
|
|
|
// Moodle Mobile variables
|
|
// --------------------------------------------------
|
|
|
|
// Init screen.
|
|
$core-color-init-screen: #ff5c00 !default;
|
|
$core-color-init-screen-alt: #ff7600 !default;
|
|
$core-init-screen-spinner-color: $white !default;
|
|
$core-init-screen-logo-width: 60% !default;
|
|
$core-init-screen-logo-max-width: 300px !default;
|
|
|
|
$core-fixed-url: false !default;
|
|
|
|
$core-loading-spinner-color: $core-color !default;
|
|
$core-spinner-color: $core-color !default;
|
|
$core-button-outline-background-color: $white !default;
|
|
|
|
// Login.
|
|
$core-login-page-background-color: radial-gradient(white, $gray-light) !default;
|
|
$core-login-box-background-color: $white !default;
|
|
$core-login-box-background-border: $gray !default;
|
|
$core-login-box-text-color: $text-color !default;
|
|
$core-login-button-outline: false !default;
|
|
$core-login-loading-color: false !default;
|
|
|
|
// App iOS Variables
|
|
// --------------------------------------------------
|
|
// iOS only Sass variables can go here
|
|
|
|
$text-input-ios-show-focus-highlight: false;
|
|
$core-text-input-ios-show-highlight: false;
|
|
$item-ios-avatar-size: 54px;
|
|
$loading-ios-spinner-color: $core-loading-spinner-color;
|
|
$spinner-ios-ios-color: $core-spinner-color;
|
|
$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
|
|
$button-ios-outline-background-color: $core-button-outline-background-color;
|
|
$toolbar-ios-height: 44px + 15;
|
|
$checkbox-ios-icon-border-radius: 0px !default;
|
|
|
|
// App Material Design Variables
|
|
// --------------------------------------------------
|
|
// Material Design only Sass variables can go here
|
|
|
|
$text-input-md-show-focus-highlight: false;
|
|
$core-text-input-md-show-highlight: true;
|
|
$item-md-detail-push-show: true;
|
|
$item-md-avatar-size: 54px;
|
|
$loading-md-spinner-color: $core-loading-spinner-color;
|
|
$spinner-md-crescent-color: $core-spinner-color;
|
|
$tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
|
|
$button-md-outline-background-color: $core-button-outline-background-color;
|
|
|
|
|
|
// App Windows Variables
|
|
// --------------------------------------------------
|
|
// Windows only Sass variables can go here
|
|
|
|
$text-input-wp-show-focus-highlight: true;
|
|
$item-wp-detail-push-show: true;
|
|
$item-wp-avatar-size: 54px;
|
|
$loading-wp-spinner-color: $core-loading-spinner-color;
|
|
$spinner-wp-circles-color: $core-spinner-color;
|
|
$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
|
|
$button-wp-outline-background-color: $core-button-outline-background-color;
|
|
|
|
|
|
// App Theme
|
|
// --------------------------------------------------
|
|
// Ionic apps can have different themes applied, which can
|
|
// then be future customized. This import comes last
|
|
// so that the above variables are used and Ionic's
|
|
// default are overridden.
|
|
|
|
@import "ionic.theme.default";
|
|
|
|
|
|
// Ionicons
|
|
// --------------------------------------------------
|
|
// The premium icon font for Ionic. For more info, please see:
|
|
// http://ionicframework.com/docs/ionicons/
|
|
|
|
@import "ionic.ionicons";
|
|
|
|
|
|
// Fonts
|
|
// --------------------------------------------------
|
|
|
|
@import "roboto";
|
|
@import "noto-sans";
|
|
|
|
// Moodle Mobile variables
|
|
// --------------------------------------------------
|
|
|
|
// Small avatar ideal for icons.
|
|
$item-media-width: 32px !default;
|
|
$item-media-height: 32px !default;
|
|
|
|
$core-top-tabs-background: $white !default;
|
|
$core-top-tabs-color: $gray-dark !default;
|
|
$core-top-tabs-border: $gray !default;
|
|
$core-top-tabs-color-active: $core-color !default;
|
|
|
|
$core-splitview-selected: $core-color-light !default;
|
|
$core-progressbar-color: $core-color-light !default;
|
|
|
|
$core-user-profile-communication-icons-color: $core-color !default;
|
|
|
|
$core-rte-min-height: 80px;
|
|
|
|
$core-toolbar-button-image-width: 32px;
|
|
|
|
// Timer variables.
|
|
$core-timer-warn-color: $red !default;
|
|
$core-timer-iterations: 15 !default;
|
|
|
|
// Question variables.
|
|
$core-question-correct-color: $green-dark !default;
|
|
$core-question-correct-color-bg: $green-light !default;
|
|
$core-question-incorrect-color: $red !default;
|
|
$core-question-incorrect-color-bg: $red-light !default;
|
|
$core-question-feedback-color: $yellow-dark !default;
|
|
$core-question-feedback-color-bg: $yellow-light !default;
|
|
$core-question-warning-color: $red !default;
|
|
|
|
$core-question-state-correct-color: $green-light !default;
|
|
$core-question-state-partial-color: $yellow-light !default;
|
|
$core-question-state-incorrect-color: $red-light !default;
|
|
|
|
// Mixins
|
|
// -------------------------
|
|
@mixin core-transition($where: all, $time: 500ms) {
|
|
-webkit-transition: $where $time ease-in-out;
|
|
-moz-transition: $where $time ease-in-out;
|
|
-ms-transition: $where $time ease-in-out;
|
|
-o-transition: $where $time ease-in-out;
|
|
transition: $where $time ease-in-out;
|
|
}
|
|
|
|
// Font Awesome
|
|
$fa-font-path: $font-path;
|
|
@import "font-awesome";
|