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

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

Hide file tree

Showing 11 changed files with 1,510 additions and 94 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;
 

diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss
@@ -1,11 +1,12 @@
 @import 'base/mixins';
+@import 'lms/theme/variables-v1';
 
 $a11y--gray: rgb(127, 127, 127);
 $a11y--blue: rgb(0, 159, 230);
-$a11y--gray-d1: shade($gray, 20%);
-$a11y--gray-l2: tint($gray, 40%);
-$a11y--gray-l3: tint($gray, 60%);
-$a11y--blue-s1: saturate($blue, 15%);
+$a11y--gray-d1: var(--gray-d1);
+$a11y--gray-l2: var(--gray-l2);
+$a11y--gray-l3: var(--gray-l3);
+$a11y--blue-s1: var(--blue-s1);
 
 %use-font-awesome {
   font-family: FontAwesome;
@@ -32,7 +33,7 @@ $a11y--blue-s1: saturate($blue, 15%);
     display: none;
     position: absolute;
     list-style: none;
-    background-color: $white;
+    background-color: var(--white);
     border: 1px solid #eee;
 
     li {
@@ -41,7 +42,7 @@ $a11y--blue-s1: saturate($blue, 15%);
       margin: 0;
       padding: 0;
       border-bottom: 1px solid #eee;
-      color: $white;
+      color: var(--white);
 
       a {
         display: block;
@@ -84,23 +85,23 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &.open {
       > a {
-        background-color: $action-primary-active-bg;
-        color: $very-light-text;
+        background-color: var(--action-primary-active-bg);
+        color: var(--very-light-text);
 
         &::after {
-          color: $very-light-text;
+          color: var(--very-light-text);
         }
       }
     }
 
     > a {
-      @include transition(all $tmg-f2 ease-in-out 0s);
+      @include transition(all var(--tmg-f2) ease-in-out 0s);
       @include font-size(12);
 
       display: block;
       border-radius: 0 3px 3px 0;
-      background-color: $very-light-text;
-      padding: ($baseline*0.75) ($baseline*1.25) ($baseline*0.75) ($baseline*0.75);
+      background-color: var(--very-light-text);
+      padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
       color: $a11y--gray-l2;
       min-width: 1.5em;
       line-height: 14px;
@@ -113,9 +114,9 @@ $a11y--blue-s1: saturate($blue, 15%);
 
         content: "\f0d7";
         position: absolute;
-        right: ($baseline*0.5);
+        right: calc((var(--baseline)*0.5));
         top: 33%;
-        color: $lighter-base-font-color;
+        color: var(--lighter-base-font-color);
       }
     }
 
@@ -144,7 +145,7 @@ $a11y--blue-s1: saturate($blue, 15%);
   @extend %ui-depth5;
 
   border: 1px solid #333;
-  background: $white;
+  background: var(--white);
   color: #333;
   padding: 0;
   margin: 0;
@@ -162,8 +163,8 @@ $a11y--blue-s1: saturate($blue, 15%);
 
   .menu-item,
   .submenu-item {
-    border-top: 1px solid $gray-l3;
-    padding: ($baseline/4) ($baseline/2);
+    border-top: 1px solid var(--gray-l3);
+    padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
     outline: none;
 
     & > span {
@@ -176,17 +177,17 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &:focus {
       background: #333;
-      color: $white;
+      color: var(--white);
 
       & > span {
-        color: $white;
+        color: var(--white);
       }
     }
   }
 
   .submenu-item {
     position: relative;
-    padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
+    padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2));
 
     &::after {
       content: '\25B6';
@@ -202,10 +203,10 @@ $a11y--blue-s1: saturate($blue, 15%);
 
     &.is-opened {
       background: #333;
-      color: $white;
+      color: var(--white);
 
       & > span {
-        color: $white;
+        color: var(--white);
       }
 
       & > .submenu {
@@ -220,7 +221,7 @@ $a11y--blue-s1: saturate($blue, 15%);
 
   .is-disabled {
     pointer-events: none;
-    color: $gray-l3;
+    color: var(--gray-l3);
   }
 }