Refactor. Update Gruntfile to use Sass instead of Compass and enhance…

… SCSS files with improved media query formatting and new utility mixins
Bahmni · Dec 22, 2024 · df3d864 · df3d864
1 parent 2b0bc53
commit df3d864
Show file tree

Hide file tree

Showing 20 changed files with 260 additions and 97 deletions.
diff --git a/ui/Gruntfile.js b/ui/Gruntfile.js
@@ -80,9 +80,9 @@ module.exports = function (grunt) {
     grunt.initConfig({
         yeoman: yeomanConfig,
         watch: {
-            compass: {
+            sass: {
                 files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'],
-                tasks: ['compass:debug']
+                tasks: ['sass:debug']
             }
         },
         clean: {
@@ -162,21 +162,38 @@ module.exports = function (grunt) {
                 root: '.'
             }
         },
-        compass: {
+        sass: {
             options: {
-                sassDir: '<%= yeoman.app %>/styles',
-                cssDir: '<%= yeoman.app %>/styles/',
-                imagesDir: '<%= yeoman.app %>/images',
-                javascriptsDir: '<%= yeoman.app %>/scripts',
-                fontsDir: '<%= yeoman.app %>/styles/fonts',
-                importPath: '<%= yeoman.app %>/components',
-                relativeAssets: true
+                implementation: require('sass'),
+                sourceMap: true,
+                includePaths: [
+                    '<%= yeoman.app %>/components',
+                    '<%= yeoman.app %>/styles'
+                ]
+            },
+            dist: {
+                options: {
+                    outputStyle: 'compressed'
+                },
+                files: [{
+                    expand: true,
+                    cwd: '<%= yeoman.app %>/styles',
+                    src: ['**/*.{scss,sass}'],
+                    dest: '<%= yeoman.app %>/styles/',
+                    ext: '.css'
+                }]
             },
-            dist: {},
             debug: {
                 options: {
-                    debugInfo: true
-                }
+                    outputStyle: 'expanded'
+                },
+                files: [{
+                    expand: true,
+                    cwd: '<%= yeoman.app %>/styles',
+                    src: ['**/*.{scss,sass}'],
+                    dest: '<%= yeoman.app %>/styles/',
+                    ext: '.css'
+                }]
             }
         },
         // Renames files for browser caching purposes
@@ -534,7 +551,7 @@ module.exports = function (grunt) {
         'eslint',
         'copy:nodeModules',
         'clean:dist',
-        'compass:dist',
+        'sass:dist',
         'useminPrepare',
         'ngAnnotate',
         'concat',

diff --git a/ui/app/styles/appointmentScheduling.css.map b/ui/app/styles/appointmentScheduling.css.map
diff --git a/ui/app/styles/appointments/components.css.map b/ui/app/styles/appointments/components.css.map
diff --git a/ui/app/styles/bahmni-components/_buttons.scss b/ui/app/styles/bahmni-components/_buttons.scss
@@ -377,7 +377,7 @@ ul li a.back-btn, ul li a.back-btn:hover, button.back-btn, a.back-btn {
       line-height: 1;
       margin: 0;
       padding: 0;
-      @media screen and(max-width:470px){
+      @media screen and (max-width: 470px) {
         font-size: 22px;
       }
     }
@@ -399,7 +399,7 @@ ul li a.back-btn, ul li a.back-btn:hover, button.back-btn, a.back-btn {
           }
       }
     }
-  @media screen and(max-width:470px){
+  @media screen and (max-width: 470px) {
     padding: 4px 5px 5px;
   }
 }

diff --git a/ui/app/styles/bahmni-helper/_variables.scss b/ui/app/styles/bahmni-helper/_variables.scss
@@ -1,4 +1,3 @@
-
 /*doc
 ---
 title: Colors
@@ -332,3 +331,31 @@ $primaryItalicFont: "OpenSansItalic";
     color: $text;
   }
 }
+
+// Grid system mixins
+@mixin column($x, $columns: 12) {
+  display: inline;
+  float: left;
+  width: $total-width * ((($gutter-width + $column-width) * $x - $gutter-width) / ($gutter-width + $column-width * $columns));
+  margin: 0 $total-width * ($gutter-width * 0.5) / ($gutter-width + $column-width * $columns);
+}
+
+// Additional utility mixins
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
diff --git a/ui/app/styles/bahmni-layout/_layout.scss b/ui/app/styles/bahmni-layout/_layout.scss
@@ -151,7 +151,7 @@
                 margin-right: 10px;
             }
 
-            @media screen and(max-width:470px) {
+            @media screen and (max-width: 470px) {
                 margin: 0;
             }
         }

diff --git a/ui/app/styles/clinical.css.map b/ui/app/styles/clinical.css.map
diff --git a/ui/app/styles/clinical/_consultation.scss b/ui/app/styles/clinical/_consultation.scss
@@ -38,7 +38,7 @@
 
         .dosage-days,
         .drug-name {
-            @media screen and(max-width: 1024px) {
+            @media screen and (max-width: 1024px) {
                 max-width: 45%;
                 width: auto;
             }

diff --git a/ui/app/styles/clinical/_diagnosis.scss b/ui/app/styles/clinical/_diagnosis.scss
@@ -69,7 +69,7 @@
         box-sizing: border-box;
         border-bottom: none;
 
-        @media screen and(min-width: 992px) {
+        @media screen and (min-width: 992px) {
             border-bottom: 1px solid $lightGray;
         }
     }
@@ -442,7 +442,7 @@
             right: 20px;
             bottom: 20px;
 
-            @media screen and(min-width: 992px) {
+            @media screen and (min-width: 992px) {
                 top: 20px;
                 bottom: auto;
                 right: 215px;
@@ -747,7 +747,7 @@
         .col2.notes-subscriber {
             display: none;
 
-            @media screen and(min-width: 768px) {
+            @media screen and (min-width: 768px) {
                 display: block;
             }
         }

diff --git a/ui/app/styles/clinical/_patientDashboard.scss b/ui/app/styles/clinical/_patientDashboard.scss
@@ -1507,7 +1507,7 @@ table.treatments-details-table {
     width: 50%;
     float: left;
 
-    @media screen and(max-width:540px) {
+    @media screen and (max-width:540px) {
         width: 100%;
     }
 }
@@ -1523,7 +1523,7 @@ table.treatments-details-table {
             width: 50%;
         }
 
-        @media screen and(max-width:540px) {
+        @media screen and (max-width:540px) {
             width: 100%;
         }
     }

diff --git a/ui/app/styles/clinical/_visit.scss b/ui/app/styles/clinical/_visit.scss
@@ -43,7 +43,7 @@
             width: 50%;
         }
 
-        @media screen and(max-width:540px) {
+        @media screen and (max-width: 540px) {
             width: 100%;
         }
     }

diff --git a/ui/app/styles/clinicalPrint.css.map b/ui/app/styles/clinicalPrint.css.map
diff --git a/ui/app/styles/common/_bahmniGlobal.scss b/ui/app/styles/common/_bahmniGlobal.scss
@@ -370,7 +370,7 @@ u,
 }
 
 .print {
-  @media screen and(max-width: 700px) {
+  @media screen and (max-width: 700px) {
     display: none;
   }
 }

diff --git a/ui/app/styles/home.css.map b/ui/app/styles/home.css.map
diff --git a/ui/app/styles/home/_home.scss b/ui/app/styles/home/_home.scss
@@ -21,7 +21,7 @@ $gutter-width: 0;
 $columns: 12;
 $total-width: 100%;
 
-@import "compass";
+@import "bahmni-helper/variables";
 
 /*** grid form elements css start ***/
 .form-field-inline {

diff --git a/ui/app/styles/print.css.map b/ui/app/styles/print.css.map
diff --git a/ui/app/styles/registration.css.map b/ui/app/styles/registration.css.map
diff --git a/ui/app/styles/registrationPrint.css.map b/ui/app/styles/registrationPrint.css.map
diff --git a/ui/package.json b/ui/package.json
@@ -71,7 +71,6 @@
     "grunt": "^1.0.3",
     "grunt-comment-toggler": "^0.2.2",
     "grunt-contrib-clean": "2.0.0",
-    "grunt-contrib-compass": "1.1.1",
     "grunt-contrib-concat": "1.0.1",
     "grunt-contrib-copy": "1.0.0",
     "grunt-contrib-cssmin": "~1.0.0",
@@ -87,6 +86,7 @@
     "grunt-ng-annotate": "^3.0.0",
     "grunt-preprocess": "^5.0.1",
     "grunt-rename": "~0.1.3",
+    "grunt-sass": "^3.1.0",
     "grunt-usemin": "~3.1.1",
     "karma": "^4.0.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -97,7 +97,8 @@
     "karma-ng-html2js-preprocessor": "^1.0.0",
     "matchdep": "^2.0.0",
     "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react-dom": "16.14.0",
+    "sass": "^1.32.8"
   },
   "resolutions": {
     "**/**/xmlhttprequest-ssl": "^1.6.1",