MOBILE-2449 styles: Adapt styles to make BMMA life easier

src/addon/mod/data/components/index/addon-mod-data-index.html

@@ -84,11 +84,6 @@
     </ion-grid>
 
     <core-empty-box *ngIf="isEmpty && !search.searching" icon="archive" [message]="'addon.mod_data.norecords' | translate">
-        <div padding-top *ngIf="canAdd">
-            <button block (click)="gotoAddEntries($event)">
-                {{ 'addon.mod_data.addentries' | translate }}
-            </button>
-        </div>
     </core-empty-box>
 
     <core-empty-box *ngIf="isEmpty && search.searching" icon="archive" [message]="'addon.mod_data.nomatch' | translate">

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

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

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

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

src/core/login/pages/credentials/credentials.scss

@@ -1,7 +1,6 @@
 page-core-login-credentials {
-    .content {
+    .scroll-content {
-        background: -webkit-radial-gradient(white, $gray-light);
+        background: $core-login-page-background-color;
-        background: radial-gradient(white, $gray-light);
     }
 
     img {
@@ -16,14 +15,31 @@ page-core-login-credentials {
     .box {
         padding: 16px;
         margin: 8px;
-        background: $white;
+        background: $core-login-box-background-color;
-        border: 1px solid $gray;
+        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;
     }

src/core/login/pages/reconnect/reconnect.scss

@@ -1,7 +1,6 @@
 page-core-login-reconnect {
-    .content {
+    .scroll-content {
-        background: -webkit-radial-gradient(white, $gray-light);
+        background: $core-login-page-background-color;
-        background: radial-gradient(white, $gray-light);
     }
 
     img {
@@ -16,14 +15,31 @@ page-core-login-reconnect {
     .box {
         padding: 16px;
         margin: 8px;
-        background: $white;
+        background: $core-login-box-background-color;
-        border: 1px solid $gray;
+        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);

src/core/login/pages/site/site.scss

@@ -1,7 +1,6 @@
 page-core-login-site {
-    .content {
+    .scroll-content {
-        background: -webkit-radial-gradient(white, $gray-light);
+        background: $core-login-page-background-color;
-        background: radial-gradient(white, $gray-light);
     }
 
     img.login-logo {
@@ -12,10 +11,28 @@ page-core-login-site {
     .box {
         padding: 16px;
         margin: 8px;
-        background: $white;
+        background: $core-login-box-background-color;
-        border: 1px solid $gray;
+        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;
     }

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;
+        }
+    }
+}
+
+
+

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-light:    lighten($core-color, 10%);
-$core-color-dark:     darken($core-color, 10%);
 
-$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7;
+// 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
 // --------------------------------------------------
@@ -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;
+$text-color:                 $black !default;
-$link-color:                 $blue;
+$link-color:                 $blue !default;
-$background-color:           $gray-light;
+$background-color:           $gray-light !default;
-$subdued-text-color:         $gray-darker;
+$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-active:      $core-color !default;
-$tabs-tab-color-inactive:    $white;
+$tabs-tab-color-inactive:    $white !default;
 
-$text-input-highlight-color-valid: $green;
+$text-input-highlight-color-valid: $green !default;
-$text-input-highlight-color-invalid: $red;
+$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:          #ff5c00 !default;
-$core-color-init-screen-alt:      #ff7600;
+$core-color-init-screen-alt:      #ff7600 !default;
-$core-init-screen-spinner-color:  $white;
+$core-init-screen-spinner-color:  $white !default;
-$core-init-screen-logo-width:     60%;
+$core-init-screen-logo-width:     60% !default;
-$core-init-screen-logo-max-width: 300px;
+$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
+// Login.
-// --------------------------------------------------
+$core-login-page-background-color: radial-gradient(white, $gray-light) !default;
-@import "bmma";
+$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;
+$loading-ios-spinner-color: $core-loading-spinner-color;
-$spinner-ios-ios-color: $core-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;
+$loading-md-spinner-color: $core-loading-spinner-color;
-$spinner-md-crescent-color: $core-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;
+$loading-wp-spinner-color: $core-loading-spinner-color;
-$spinner-wp-circles-color: $core-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-background: $white !default;
-$core-top-tabs-color: $gray-dark;
+$core-top-tabs-color: $gray-dark !default;
-$core-top-tabs-border: $gray;
+$core-top-tabs-border: $gray !default;
-$core-top-tabs-color-active: $core-color;
+$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;