Merge pull request #34579 from dimagi/jls/b5-web-apps-turn-on-scss

[B5] web apps: switch over from LESS to SCSS
dimagi · May 10, 2024 · 315eb63 · 315eb63
2 parents 7332561 + ca49ada
commit 315eb63
Show file tree

Hide file tree

Showing 38 changed files with 252 additions and 73 deletions.
diff --git a/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/formplayer_home.html
@@ -40,14 +40,14 @@
           rel="stylesheet"
           media="all"
           href="{% static 'cloudcare/scss/font-formplayer.scss' %}" />
-    <link type="text/less"
+    <link type="text/scss"
           rel="stylesheet"
           media="all"
-          href="{% static 'cloudcare/less/formplayer-common.less' %}"/>
-    <link type="text/less"
+          href="{% static 'cloudcare/scss/formplayer-common.scss' %}"/>
+    <link type="text/scss"
           rel="stylesheet"
           media="all"
-          href="{% static 'cloudcare/less/formplayer-webapp.less' %}"/>
+          href="{% static 'cloudcare/scss/formplayer-webapp.scss' %}"/>
   {% endcompress %}
 {% endblock %}
 

diff --git a/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app.html b/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app.html
@@ -4,10 +4,10 @@
 
 {% block css %}
   {% compress css %}
-    <link type="text/less"
+    <link type="text/scss"
           rel="stylesheet"
           media="all"
-          href="{% static 'preview_app/less/preview_app.less' %}"/>
+          href="{% static 'preview_app/scss/preview_app.scss' %}"/>
       <link type="text/css"
             rel="stylesheet"
             media="all"

diff --git a/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html b/corehq/apps/cloudcare/templates/cloudcare/bootstrap5/preview_app_base.html
@@ -18,10 +18,10 @@
           rel="stylesheet"
           media="all"
           href="{% static 'cloudcare/scss/font-formplayer.scss' %}" />
-    <link type="text/less"
+    <link type="text/scss"
           rel="stylesheet"
           media="all"
-          href="{% static 'cloudcare/less/formplayer-common.less' %}"/>
+          href="{% static 'cloudcare/scss/formplayer-common.scss' %}"/>
   {% endcompress %}
 
   {% if request.use_daterangepicker %}

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common-main.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common-main.scss
@@ -1,5 +1,5 @@
-@import '../../hqwebapp/less/_hq/includes/variables.less';
-@import '../../hqwebapp/less/_hq/includes/mixins.less';
+@import "../../hqwebapp/scss/commcarehq/variables";
+@import "../../hqwebapp/scss/commcarehq/mixins";
 
 /**
 These are the styles shared across both PREVIEW and the FULL PAGE WEB APP

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss
@@ -1,4 +1,7 @@
-@b3-import-variables: '../../../../../../../../node_modules/bootstrap/less/variables';
-@b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';
+@import "functions";
+@import "../../hqwebapp/scss/commcarehq/variables";
+@import "variables";
+@import "../../hqwebapp/scss/commcarehq/variables_bootstrap3";
+@import "mixins";   // media-breakpoint-up and media-breakpoint-down
 
 @import "formplayer-common-main";
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/appicon.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/appicon.scss
@@ -68,7 +68,7 @@ $appicon-icon-height-xs: $appicon-height-xs - 30px;
   margin-bottom: 15px;
 
   border-radius: 5px;
-  .transition(background 1s);
+  transition: background 1s;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.45);
 
   .appicon-title {
@@ -95,7 +95,7 @@ $appicon-icon-height-xs: $appicon-height-xs - 30px;
     box-sizing: border-box;
     top: 0;
     left: 50%;
-    .transition(color 1s);
+    transition: color 1s;
   }
 
   &:hover {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/formnav.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/formnav.scss
@@ -36,7 +36,7 @@
   color: $cc-brand-mid;
 
   border-radius: 0;
-  .transition(background 1s);
+  transition: background 1s;
 
   &:hover {
     background-color: darken($cc-bg, 5);

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss
@@ -3,7 +3,7 @@
     border: none;
     text-align: left;
     vertical-align: middle;
-    .transition(background 1s);
+    transition: background 1s;
   }
   .module-column-name {
     position: relative;
@@ -62,7 +62,7 @@ button.clickable-icon {
 
 .module-audio-control, .module-delete-control {
   text-align: center;
-  .transition(background 1s);
+  transition: background 1s;
   position: absolute;
   top: 50%;
 
@@ -213,7 +213,7 @@ button.clickable-icon {
 .module-case-detail-tabs .nav-tabs li a {
   text-transform: uppercase;
   font-weight: bold;
-  .transition(1s all);
+  transition: 1s all;
   &:hover {
     background-color: $cc-brand-hi;
     border-top-color: transparent;
@@ -224,7 +224,7 @@ button.clickable-icon {
 
 .module-case-detail-continue {
   width: 100%;
-  .transition(.5s all);
+  transition: .5s all;
 }
 
 .module-case-detail-btn {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss
@@ -1,5 +1,5 @@
-@import '../../hqwebapp/less/_hq/includes/variables.less';
-@import '../../hqwebapp/less/_hq/includes/mixins.less';
+@import "../../hqwebapp/scss/commcarehq/variables";
+@import "../../hqwebapp/scss/commcarehq/mixins";
 
 /**
 These are all the styles relevant to the full-screen version of formplayer which
@@ -10,6 +10,8 @@ If you want to make changes relevant for BOTH app preview and the main
 formplayer, please make changes to the cloudcare styles.
 **/
 
+$breadcrumb-height-cloudcare: 46px;
+
 @import "formplayer-webapp/content";
 @import "formplayer-webapp/navbar";
 @import "formplayer-webapp/breadcrumbs";

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp.scss
@@ -1,4 +1,7 @@
-@b3-import-variables: '../../../../../../../../node_modules/bootstrap/less/variables';
-@b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';
+@import "functions";
+@import "../../hqwebapp/scss/commcarehq/variables";
+@import "variables";
+@import "../../hqwebapp/scss/commcarehq/variables_bootstrap3";
+@import "mixins";   // media-breakpoint-up and media-breakpoint-down
 
 @import "formplayer-webapp-main";
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
@@ -33,7 +33,7 @@ $group-indent: 15px;
     .submit .btn {
       font-size: 20px;
       padding: 13px 24px;
-      .transition(all .5s);
+      transition: all .5s;
     }
   }
 
@@ -102,13 +102,13 @@ $group-indent: 15px;
   .stripe-repeats {
     > .row, .panel-body > .children > .row {
       &:nth-of-type(odd) {
-        background-color: $table-bg-accent;
+        background-color: $table-accent-bg;
       }
       &:nth-of-type(even) {
         background-color: white;
       }
       &:hover {
-        background-color: $table-bg-hover;
+        background-color: $table-hover-bg;
       }
     }
   }
@@ -156,7 +156,7 @@ $group-indent: 15px;
   }
 
   .form-group.required {
-    .transition(all .5s);
+    transition: all .5s;
     margin-bottom: 0;
     label:before {
       display: none;
@@ -179,7 +179,7 @@ $group-indent: 15px;
   .form-group-required-label {
     display: block;
     opacity: 0;
-    .transition(all .5s);
+    transition: all .5s;
   }
 
   .form-group-required-label.on {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/formnav.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/formnav.scss
@@ -17,7 +17,7 @@
   float: right;
   font-size: 1.9rem;
 
-  .transition(all 1s);
+  transition: all 1s;
 
   border-radius: 0;
 }
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss
@@ -5,7 +5,7 @@ $cloudcare-nav-height: 30px;
   border: none;
   background-color: $cc-brand-low;
   min-height: $cloudcare-nav-height;
-  .transition(1s all);
+  transition: 1s all;
   z-index: $zindex-navbar-cloudcare;
 }
 

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app-main.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app-main.scss
@@ -1,6 +1,3 @@
-@import '../../hqwebapp/less/_hq/includes/variables.less';
-@import '../../hqwebapp/less/_hq/includes/mixins.less';
-
 /* this is included in cloudcare/preview_app.html */
 
 @import "../../cloudcare/scss/formplayer-common/mixins";

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app.scss
@@ -1,4 +1,3 @@
-@b3-import-variables: '../../../../../../../../node_modules/bootstrap/less/variables';
-@b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';
+@import "../../hqwebapp/scss/commcarehq/variables";
 
 @import "preview_app-main";
diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/appicon.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/appicon.scss
@@ -6,7 +6,7 @@ $appicon-icon-height-preview: $appicon-height-preview - 40px;
   margin-bottom: 10px;
 
   .appicon-title {
-    .transition(height $transition-speed);
+    transition: height $transition-speed;
     height: 30px;
     bottom: 7px;
     h3 {

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/form.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/form.scss
@@ -62,7 +62,7 @@
   .btn {
     width: 100%;
     font-size: 16px;
-    .transition(all .5s);
+    transition: all .5s;
   }
 }
 
@@ -83,7 +83,7 @@
 }
 
 .form-group.required {
-  .transition(all .5s);
+  transition: all .5s;
   margin-bottom: 0;
   label:before {
     display: none;
@@ -102,7 +102,7 @@
 
 .form-group-required-label {
   opacity: 0;
-  .transition(all .5s);
+  transition: all .5s;
 }
 
 .form-group-required-label.on {

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/formnav.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/formnav.scss
@@ -4,7 +4,7 @@
   text-transform: uppercase;
   padding: 8px 10px;
   border: none;
-  .transition(all $transition-speed);
+  transition: all $transition-speed;
 
   border-radius: 0;
 }

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/navigation.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/navigation.scss
@@ -22,7 +22,7 @@ $preview-navbar-height: 40px;
     color: white;
     line-height: $preview-navbar-height;
     padding-right: 19px;
-    .transition(background $transition-speed);
+    transition: background $transition-speed;
 
     &:link, &:focus, &:visited, &:hover {
       color: white;

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/formplayer_home.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/formplayer_home.html.diff.txt
@@ -19,7 +19,7 @@
          <li><a href="#" id="commcare-menu-toggle">{% trans 'Show Full Menu' %}</a></li>
        </ul>
      </div>
-@@ -34,13 +34,12 @@
+@@ -34,25 +34,24 @@
    {% compress css %}
      <link rel="stylesheet" href="{% static 'nprogress/nprogress.css' %}">
      <link rel="stylesheet" href="{% static 'At.js/dist/css/jquery.atwho.min.css' %}">
@@ -31,11 +31,19 @@
            rel="stylesheet"
            media="all"
 -          href="{% static 'cloudcare/less/font-formplayer.less' %}" />
+-    <link type="text/less"
 +          href="{% static 'cloudcare/scss/font-formplayer.scss' %}" />
-     <link type="text/less"
++    <link type="text/scss"
+           rel="stylesheet"
+           media="all"
+-          href="{% static 'cloudcare/less/formplayer-common.less' %}"/>
+-    <link type="text/less"
++          href="{% static 'cloudcare/scss/formplayer-common.scss' %}"/>
++    <link type="text/scss"
            rel="stylesheet"
            media="all"
-@@ -52,7 +51,7 @@
+-          href="{% static 'cloudcare/less/formplayer-webapp.less' %}"/>
++          href="{% static 'cloudcare/scss/formplayer-webapp.scss' %}"/>
    {% endcompress %}
  {% endblock %}
 

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/preview_app.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/preview_app.html.diff.txt
@@ -1,11 +1,22 @@
 --- 
 +++ 
-@@ -1,4 +1,4 @@
+@@ -1,13 +1,13 @@
 -{% extends "cloudcare/bootstrap3/preview_app_base.html" %}
 +{% extends "cloudcare/bootstrap5/preview_app_base.html" %}
  {% load hq_shared_tags %}
  {% load compress %}
 
+ {% block css %}
+   {% compress css %}
+-    <link type="text/less"
++    <link type="text/scss"
+           rel="stylesheet"
+           media="all"
+-          href="{% static 'preview_app/less/preview_app.less' %}"/>
++          href="{% static 'preview_app/scss/preview_app.scss' %}"/>
+       <link type="text/css"
+             rel="stylesheet"
+             media="all"
 @@ -52,7 +52,7 @@
      {% registerurl 'gaen_otp_view' request.domain %}
    {% endif %}

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/preview_app_base.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/cloudcare/preview_app_base.html.diff.txt
@@ -9,7 +9,7 @@
 
  <!DOCTYPE html>
  <html lang="{{ LANGUAGE_CODE }}">
-@@ -12,12 +12,12 @@
+@@ -12,16 +12,16 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="HandheldFriendly" content="True">
 
@@ -21,10 +21,16 @@
            rel="stylesheet"
            media="all"
 -          href="{% static 'cloudcare/less/font-formplayer.less' %}" />
+-    <link type="text/less"
 +          href="{% static 'cloudcare/scss/font-formplayer.scss' %}" />
-     <link type="text/less"
++    <link type="text/scss"
            rel="stylesheet"
            media="all"
+-          href="{% static 'cloudcare/less/formplayer-common.less' %}"/>
++          href="{% static 'cloudcare/scss/formplayer-common.scss' %}"/>
+   {% endcompress %}
+
+   {% if request.use_daterangepicker %}
 @@ -61,8 +61,8 @@
  <body>
  {% block body %}{% endblock %}

diff --git a/...bootstrap5_diffs/stylesheets/formplayer-common-main.formplayer-common-main.style.diff.txt b/...bootstrap5_diffs/stylesheets/formplayer-common-main.formplayer-common-main.style.diff.txt
@@ -0,0 +1,10 @@
+--- 
++++ 
+@@ -1,5 +1,5 @@
+-@import '../../hqwebapp/less/_hq/includes/variables.less';
+-@import '../../hqwebapp/less/_hq/includes/mixins.less';
++@import "../../hqwebapp/scss/commcarehq/variables";
++@import "../../hqwebapp/scss/commcarehq/mixins";
+
+ /**
+ These are the styles shared across both PREVIEW and the FULL PAGE WEB APP
diff --git a/...ests/data/bootstrap5_diffs/stylesheets/formplayer-common.formplayer-common.style.diff.txt b/...ests/data/bootstrap5_diffs/stylesheets/formplayer-common.formplayer-common.style.diff.txt
@@ -0,0 +1,12 @@
+--- 
++++ 
+@@ -1,4 +1,7 @@
+-@b3-import-variables: '../../../../../../../../node_modules/bootstrap/less/variables';
+-@b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';
++@import "functions";
++@import "../../hqwebapp/scss/commcarehq/variables";
++@import "variables";
++@import "../../hqwebapp/scss/commcarehq/variables_bootstrap3";
++@import "mixins";   // media-breakpoint-up and media-breakpoint-down
+
+ @import "formplayer-common-main";