diff --git a/src/addon/mod/data/components/index/addon-mod-data-index.html b/src/addon/mod/data/components/index/addon-mod-data-index.html index 8e52ff474..6ab11ee16 100644 --- a/src/addon/mod/data/components/index/addon-mod-data-index.html +++ b/src/addon/mod/data/components/index/addon-mod-data-index.html @@ -84,11 +84,6 @@ - - - {{ 'addon.mod_data.addentries' | translate }} - - diff --git a/src/addon/mod/forum/components/index/index.scss b/src/addon/mod/forum/components/index/index.scss index 62b648d10..98ef4fffa 100644 --- a/src/addon/mod/forum/components/index/index.scss +++ b/src/addon/mod/forum/components/index/index.scss @@ -1,5 +1,5 @@ addon-mod-forum-index { .addon-forum-discussion-selected { - border-top: 5px solid $core-color-light; + border-top: 5px solid $core-splitview-selected; } } diff --git a/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss b/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss index 5f78efab7..62f7e0c44 100644 --- a/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss +++ b/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss @@ -1,15 +1,17 @@ addon-mod-wiki-subwiki-picker { + $core-subwiki-selected: $core-color !default; + .item-divider, .item-divider .label { font-weight: bold; } .item.addon-mod_wiki-subwiki-selected { background-color: $gray-light; - color: $core-color; + color: $core-subwiki-selected; .icon { - color: $core-color; + color: $core-subwiki-selected; font-size: 24px; } } diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss index 318a230bf..64c6ecbdf 100644 --- a/src/components/progress-bar/progress-bar.scss +++ b/src/components/progress-bar/progress-bar.scss @@ -34,7 +34,7 @@ core-progress-bar { .progress-bar-fallback span, &[value]::-webkit-progress-value { - background-color: $core-color-light; + background-color: $core-progressbar-color; border-radius: 2px; } diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss index ef7534bcb..daf657e36 100644 --- a/src/components/split-view/split-view.scss +++ b/src/components/split-view/split-view.scss @@ -24,7 +24,7 @@ core-split-view { .split-pane-side .core-split-item-selected { background-color: $gray-lighter; - border-left: 5px solid $core-color-light; + border-left: 5px solid $core-splitview-selected; &.item-md { padding-left: $item-md-padding-start - 5px; } diff --git a/src/core/login/pages/credentials/credentials.scss b/src/core/login/pages/credentials/credentials.scss index 030525baf..5fc7b895e 100644 --- a/src/core/login/pages/credentials/credentials.scss +++ b/src/core/login/pages/credentials/credentials.scss @@ -1,7 +1,6 @@ page-core-login-credentials { - .content { - background: -webkit-radial-gradient(white, $gray-light); - background: radial-gradient(white, $gray-light); + .scroll-content { + background: $core-login-page-background-color; } img { @@ -16,14 +15,31 @@ page-core-login-credentials { .box { padding: 16px; margin: 8px; - background: $white; - border: 1px solid $gray; + background: $core-login-box-background-color; + border: 1px solid $core-login-box-background-border; + color: $core-login-box-text-color; } .core-sitename, .core-siteurl { @if $core-fixed-url { display: none; } } + @if $core-login-button-outline { + .button-md.button-default-md { + @extend .button-md-light; + } + } + + @if $core-login-loading-color { + .core-loading-container { + color: $core-login-loading-color; + + .spinner circle, .spinner line { + stroke: $core-login-loading-color; + } + } + } + .item-input { margin-bottom: 20px; } diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss index 5a76d5217..74bfb90b8 100644 --- a/src/core/login/pages/reconnect/reconnect.scss +++ b/src/core/login/pages/reconnect/reconnect.scss @@ -1,7 +1,6 @@ page-core-login-reconnect { - .content { - background: -webkit-radial-gradient(white, $gray-light); - background: radial-gradient(white, $gray-light); + .scroll-content { + background: $core-login-page-background-color; } img { @@ -16,14 +15,31 @@ page-core-login-reconnect { .box { padding: 16px; margin: 8px; - background: $white; - border: 1px solid $gray; + background: $core-login-box-background-color; + border: 1px solid $core-login-box-background-border; + color: $core-login-box-text-color; } .core-sitename, .core-siteurl { @if $core-fixed-url { display: none; } } + @if $core-login-button-outline { + .button-md.button-default-md { + @extend .button-md-light; + } + } + + @if $core-login-loading-color { + .core-loading-container { + color: $core-login-loading-color; + + .spinner circle, .spinner line { + stroke: $core-login-loading-color; + } + } + } + .list .core-username { &.item-md { @include padding-horizontal($item-md-padding-left, $content-padding); diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss index c6f367d47..cb2d3c686 100644 --- a/src/core/login/pages/site/site.scss +++ b/src/core/login/pages/site/site.scss @@ -1,7 +1,6 @@ page-core-login-site { - .content { - background: -webkit-radial-gradient(white, $gray-light); - background: radial-gradient(white, $gray-light); + .scroll-content { + background: $core-login-page-background-color; } img.login-logo { @@ -12,11 +11,29 @@ page-core-login-site { .box { padding: 16px; margin: 8px; - background: $white; - border: 1px solid $gray; + background: $core-login-box-background-color; + border: 1px solid $core-login-box-background-border; + color: $core-login-box-text-color; } + @if $core-login-button-outline { + .button-md.button-default-md { + @extend .button-md-light; + } + } + + @if $core-login-loading-color { + .core-loading-container { + color: $core-login-loading-color; + + .spinner circle, .spinner line { + stroke: $core-login-loading-color; + } + } + } + + .item-input:last-child { margin-bottom: 20px; } -} +} \ No newline at end of file diff --git a/src/core/mainmenu/pages/more/more.scss b/src/core/mainmenu/pages/more/more.scss index ac9a4b40b..8d19b0b4d 100644 --- a/src/core/mainmenu/pages/more/more.scss +++ b/src/core/mainmenu/pages/more/more.scss @@ -1,3 +1,64 @@ page-core-mainmenu-more { + $core-more-icon: $gray-darker !default; + $core-more-background-ios: $list-ios-background-color !default; + $core-more-background-md: $list-md-background-color !default; + $core-more-background-wp: $item-wp-body-background-color !default; + $core-more-divider-ios: $item-ios-divider-background !default; + $core-more-divider-md: $item-md-divider-background !default; + $core-more-divider-wp: $item-wp-divider-background !default; + $core-more-border-ios: $list-ios-border-color !default; + $core-more-border-md: $list-md-border-color !default; + $core-more-border-wp: $list-wp-border-color !default; + $core-more-color-ios: $list-ios-text-color!default; + $core-more-color-md: $list-md-text-color !default; + $core-more-color-wp: $item-wp-body-text-color !default; + .item-block { + &.item-ios, &.item-ios p { + background-color: $core-more-background-ios; + color: $core-more-color-ios; + + .item-inner { + border-bottom: $hairlines-width solid $core-more-border-ios; + } + } + &.item-md, &.item-md p { + background-color: $core-more-background-md; + color: $core-more-color-md; + + .item-inner { + border-bottom: 1px solid $core-more-border-md; + } + } + &.item-wp, &.item-wp p { + background-color: $core-more-background-wp; + color: $core-more-color-wp; + + .item-inner { + border-bottom: 1px solid $core-more-border-wp; + } + } + } + + ion-icon { + color: $core-more-icon; + } + + .item-divider { + &.item-ios { + background-color: $core-more-divider-ios; + } + + &.item-md { + background-color: $core-more-divider-md; + border-bottom: $core-more-border-md; + } + + &.item-wp { + background-color: $core-more-divider-wp; + } + } } + + + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 32c26f543..055b0ba16 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -23,33 +23,39 @@ $gray-lighter: #f5f5f5; $white: #ffffff; // Background, reversed text. $blue: #0064d2; // Link, background. -$blue-light: mix($blue, white, 20%); // Background. -$blue-dark: darken($blue, 10%); - $turquoise: #007982; // Accent. -$turquoise-light: mix($turquoise, white, 20%); // Background. -$turquoise-dark: darken($turquoise, 10%); - $green: #5e8100; // Accent. -$green-light: mix($green, white, 20%); -$green-dark: darken($green, 10%); - $red: #cb3d4d; -$red-light: mix($red, white, 20%); -$red-dark: darken($red, 10%); - $orange: #f98012; // Accent (never text). -$orange-light: lighten($orange, 10%); - $yellow: #fbad1a; // Accent (never text). -$yellow-light: mix($yellow, white, 20%); -$yellow-dark: mix($yellow, black, 40%); +$core-color: $orange; -$core-color: $orange; -$core-color-light: lighten($core-color, 10%); -$core-color-dark: darken($core-color, 10%); +// Branded apps customization +// -------------------------------------------------- +@import "bmma"; -$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7; + +$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 // -------------------------------------------------- @@ -58,11 +64,9 @@ $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #098 // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/theming/overriding-ionic-variables/ -$toolbar-background: $core-color; +$toolbar-background: $core-color !default; $content-padding: 10px; - - // Named Color Variables // -------------------------------------------------- // Named colors makes it easy to reuse colors on various components. @@ -83,52 +87,54 @@ $colors: ( info: $blue ); -$text-color: $black; -$link-color: $blue; -$background-color: $gray-light; -$subdued-text-color: $gray-darker; +$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; +$list-background-color: $white !default; -$tabs-background: $gray-darker; +$tabs-background: $gray-darker !default; $tabs-border-color: #b2b2b2 !default; -$tabs-tab-color-active: $core-color; -$tabs-tab-color-inactive: $white; +$tabs-tab-color-active: $core-color !default; +$tabs-tab-color-inactive: $white !default; -$text-input-highlight-color-valid: $green; -$text-input-highlight-color-invalid: $red; +$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; +$refresher-icon-color: $core-color !default; // Moodle Mobile variables // -------------------------------------------------- -// Variables copied from Ionic 1. -$item-icon-accessory-color: #ccc !default; -$item-icon-accessory-font-size: 16px !default; - // Init screen. -$core-color-init-screen: #ff5c00; -$core-color-init-screen-alt: #ff7600; -$core-init-screen-spinner-color: $white; -$core-init-screen-logo-width: 60%; -$core-init-screen-logo-max-width: 300px; +$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; +$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; -// Branded apps customization -// -------------------------------------------------- -@import "bmma"; - +// 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 // -------------------------------------------------- @@ -137,10 +143,10 @@ $core-fixed-url: false; $text-input-ios-show-focus-highlight: false; $core-text-input-ios-show-highlight: false; $item-ios-avatar-size: 54px; -$loading-ios-spinner-color: $core-color; -$spinner-ios-ios-color: $core-color; +$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: $white; +$button-ios-outline-background-color: $core-button-outline-background-color; $toolbar-ios-height: 44px + 15; // App Material Design Variables @@ -151,10 +157,10 @@ $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-color; -$spinner-md-crescent-color: $core-color; +$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: $white; +$button-md-outline-background-color: $core-button-outline-background-color; // App Windows Variables @@ -164,10 +170,10 @@ $button-md-outline-background-color: $white; $text-input-wp-show-focus-highlight: true; $item-wp-detail-push-show: true; $item-wp-avatar-size: 54px; -$loading-wp-spinner-color: $core-color; -$spinner-wp-circles-color: $core-color; +$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: $white; +$button-wp-outline-background-color: $core-button-outline-background-color; // App Theme @@ -201,12 +207,15 @@ $button-wp-outline-background-color: $white; $item-media-width: 32px !default; $item-media-height: 32px !default; -$core-top-tabs-background: $white; -$core-top-tabs-color: $gray-dark; -$core-top-tabs-border: $gray; -$core-top-tabs-color-active: $core-color; +$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-user-profile-communication-icons-color: $core-color; +$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;