MOBILE-3640 styles: CSS Fixes on var names and maps

src/core/components/download-refresh/core-download-refresh.html

@@ -8,7 +8,7 @@
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
         (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
-        attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
+        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fas-redo-alt"></ion-icon>
     </ion-button>
 

src/core/features/grades/pages/course/course.scss

@@ -124,7 +124,7 @@ core-split-view.menu-and-content .core-grades-table .ion-hide-md-down {
     opacity: 0;
 }
 
-@media (min-width: $breakpoint-md) {
+@include media-breakpoint-down(md) {
 
     .core-grades-table td {
         font-size: 0.85em;

src/theme/globals.mixins.ionic.scss

@@ -6,6 +6,31 @@
  * https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
  */
 
+// Responsive Mixins
+// --------------------------------------------------
+// Creates a fixed width for the grid based on the screen size
+// ---------------------------------------------------------------------------------
+@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
+  @each $breakpoint, $width in $widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      width: $width;
+    }
+  }
+
+  max-width: 100%;
+}
+
+// Adds padding to the element based on breakpoints
+// ---------------------------------------------------------------------------------
+@mixin make-breakpoint-padding($paddings) {
+  @each $breakpoint in map-keys($paddings) {
+    @include media-breakpoint-up($breakpoint) {
+      $padding: map-get($paddings, $breakpoint);
+
+      @include padding($padding);
+    }
+  }
+}
 
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------

src/theme/globals.variables.scss

@@ -149,10 +149,15 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
  * https://ionicframework.com/docs/layout/grid#default-breakpoints
  */
 
-$breakpoint-xs: 0px !default;
+// The minimum dimensions at which your layout will change,
-$breakpoint-sm: 576px !default;
+// adapting to different screen sizes, for use in media queries
-$breakpoint-md: 768px !default;
+$screen-breakpoints: (
-$breakpoint-lg: 992px !default;
+  xs: 0,
-$breakpoint-xl: 1200px !default;
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  tablet: 992px,
+  xl: 1200px
+) !default;
 
-$breakpoint-tablet: $breakpoint-lg !default;
+$breakpoint-tablet: map-get($screen-breakpoints, tablet), !default;

src/theme/theme.dark.scss

@@ -34,8 +34,8 @@
     --ion-color-step-900: #e7e7e7;
     --ion-color-step-950: #f3f3f3;
 
-    --light: var(--black);
+    --light: #{$dark};
-    --dark: var(--gray-lighter);
+    --dark: #{$light};
 
     @each $color-name, $value in $colors-dark {
         @include generate-color($color-name);

src/theme/theme.light.scss

@@ -47,16 +47,16 @@
     --core-online-color: #{$core-online-color};
 
     // Named Color Variables
-    --primary: var(--primary);
+    --primary: #{$primary};
-    --secondary: var(--secondary);
+    --secondary: #{$secondary};
-    --tertiary: var(--tertiary);
+    --tertiary: #{$tertiary};
-    --success: var(--success);
+    --success: #{$success};
-    --danger: var(--danger);
+    --danger: #{$danger};
-    --warning: var(--warning);
+    --warning: #{$warning};
-    --info: var(--info);
+    --info: #{$info};
-    --light: var(--gray-lighter);
+    --light: #{$light};
-    --dark: var(--black);
+    --dark: #{$dark};
-    --medium: var(--gray-light);
+    --medium: #{$medium};
 
     @each $color-name, $value in $colors {
         @include generate-color($color-name);
@@ -65,6 +65,7 @@
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
+    --ion-item-background: var(--white);
 
     --text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);