feat!: Dropping Sass support from builtin video block, replacing with…

… vanilla CSS
openedx · Oct 1, 2024 · ca7257f · ca7257f
1 parent 888d85c
commit ca7257f
Show file tree

Hide file tree

Showing 11 changed files with 1,434 additions and 1,304 deletions.
diff --git a/cms/envs/common.py b/cms/envs/common.py
@@ -687,6 +687,7 @@
 LMS_ROOT = REPO_ROOT / "lms"
 ENV_ROOT = REPO_ROOT.dirname()  # virtualenv dir /edx-platform is in
 COURSES_ROOT = ENV_ROOT / "data"
+XMODULE_ROOT = REPO_ROOT / "xmodule"
 
 GITHUB_REPO_ROOT = ENV_ROOT / "data"
 
@@ -1292,6 +1293,10 @@
 STATICFILES_DIRS = [
     COMMON_ROOT / "static",
     PROJECT_ROOT / "static",
+    # Temporarily adding the following static path as we are migrating the built-in blocks' Sass to vanilla CSS.
+    # Once all of the built-in blocks are extracted from edx-platform, we can remove this static path.
+    # Relevant ticket: https://github.com/openedx/edx-platform/issues/35300
+    XMODULE_ROOT / "static",
 ]
 
 # Locale/Internationalization

diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
@@ -16,7 +16,6 @@
 
 :root {
     --action-primary-active-bg: $action-primary-active-bg;
-    --all-text-inputs: $all-text-inputs;
     --base-font-size: $base-font-size;
     --base-line-height: $base-line-height;
     --baseline: $baseline;
@@ -26,6 +25,7 @@
     --blue-d1: $blue-d1;
     --blue-d2: $blue-d2;
     --blue-d4: $blue-d4;
+    --blue-s1: $blue-s1;
     --body-color: $body-color;
     --border-color: $border-color;
     --bp-screen-lg: $bp-screen-lg;
@@ -34,6 +34,8 @@
     --danger: $danger;
     --darkGrey: $darkGrey;
     --error-color: $error-color;
+    --error-color-dark: darken($error-color, 11%);
+    --error-color-light: lighten($error-color, 25%);
     --font-bold: $font-bold;
     --font-family-sans-serif: $font-family-sans-serif;
     --general-color-accent: $general-color-accent;
@@ -44,6 +46,12 @@
     --gray-l3: $gray-l3;
     --gray-l4: $gray-l4;
     --gray-l6: $gray-l6;
+    --icon-correct: url($static-path + '/images/correct-icon.png');
+    --icon-incorrect: url($static-path + '/images/incorrect-icon.png');
+    --icon-info: url($static-path + '/images/info-icon.png');
+    --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
+    --icon-spinner: url($static-path + '/images/spinner.gif');
+    --icon-unanswered: url($static-path + '/images/unanswered-icon.png');
     --incorrect: $incorrect;
     --lightGrey: $lightGrey;
     --lighter-base-font-color: $lighter-base-font-color;

diff --git a/lms/envs/common.py b/lms/envs/common.py
@@ -1943,6 +1943,10 @@ def _make_mako_template_dirs(settings):
     COMMON_ROOT / "static",
     PROJECT_ROOT / "static",
     NODE_MODULES_ROOT / "@edx",
+    # Temporarily adding the following static path as we are migrating the built-in blocks' Sass to vanilla CSS.
+    # Once all of the built-in blocks are extracted from edx-platform, we can remove this static path.
+    # Relevant ticket: https://github.com/openedx/edx-platform/issues/35300
+    XMODULE_ROOT / "static",
 ]
 
 FAVICON_PATH = 'images/favicon.ico'

diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss
@@ -31,39 +31,39 @@
   .edit-header {
     box-sizing: border-box;
 
-    padding: 18px $baseline;
+    padding: 18px var(--baseline);
     top: 0 !important; // ugly override for second level tab override
     right: 0;
-    background-color: $blue;
-    border-bottom: 1px solid $blue-d2;
-    color: $white;
+    background-color: var(--blue);
+    border-bottom: 1px solid var(--blue-d2);
+    color: var(--white);
 
     //Component Name
     .component-name {
       position: relative;
       top: 0;
       left: 0;
       width: 50%;
-      color: $white;
+      color: var(--white);
       font-weight: 600;
 
 
 
       em {
         display: inline-block;
-        margin-right: ($baseline/4);
+        margin-right: calc((var(--baseline)/4));
         font-weight: 400;
-        color: $white;
+        color: var(--white);
       }
     }
 
     //Nav-Edit Modes
     .editor-tabs {
       list-style: none;
       right: 0;
-      top: ($baseline/4);
+      top: calc((var(--baseline)/4));
       position: absolute;
-      padding: 12px ($baseline*0.75);
+      padding: 12px calc((var(--baseline)*0.75));
 
       .inner_tab_wrap {
         display: inline-block;
@@ -73,25 +73,25 @@
           @include font-size(14);
           @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
 
-          border: 1px solid $blue-d1;
+          border: 1px solid var(--blue-d1);
           border-radius: 3px;
-          padding: ($baseline/4) ($baseline);
-          background-color: $blue;
+          padding: calc((var(--baseline)/4)) (var(--baseline));
+          background-color: var(--blue);
           font-weight: bold;
-          color: $white;
+          color: var(--white);
 
           &.current {
-            @include linear-gradient($blue, $blue);
+            @include linear-gradient(var(--blue), var(--blue));
 
-            color: $blue-d1;
-            box-shadow: inset 0 1px 2px 1px $shadow-l1;
-            background-color: $blue-d4;
+            color: var(--blue-d1);
+            box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
+            background-color: var(--blue-d4);
             cursor: default;
           }
 
           &:hover,
           &:focus {
-            box-shadow: inset 0 1px 2px 1px  $shadow;
+            box-shadow: inset 0 1px 2px 1px  var(--shadow);
             background-image: linear-gradient(#009fe6, #009fe6) !important;
           }
         }
@@ -113,7 +113,7 @@
     .comp-subtitles-import-list {
       > li {
         display: block;
-        margin: $baseline/2 0;
+        margin: calc(var(--baseline)/2) 0;
       }
 
       .blue-button {
@@ -128,7 +128,7 @@
 }
 
 .component-tab {
-  background: $white;
+  background: var(--white);
   position: relative;
   border-top: 1px solid #8891a1;