From 01985e0c3291b7167a09083989af0d22927d4e0a Mon Sep 17 00:00:00 2001
From: "M. Tayyab Tahir Qureshi" <109274085+ttqureshi@users.noreply.github.com>
Date: Tue, 5 Nov 2024 17:27:12 +0500
Subject: [PATCH] feat! Dropping Sass support from builtin Sequence block
 (#35770)

feat!: Dropping Sass support from builtin sequence block

Co-authored by @ttqureshi
---
 xmodule/assets/SequenceBlockDisplay.scss      |   3 -
 xmodule/assets/sequence/_display.scss         | 340 ----------------
 xmodule/seq_block.py                          |   6 +-
 .../SequenceBlockDisplay.css                  | 364 ++++++++++++++++++
 4 files changed, 367 insertions(+), 346 deletions(-)
 delete mode 100644 xmodule/assets/SequenceBlockDisplay.scss
 delete mode 100644 xmodule/assets/sequence/_display.scss
 create mode 100644 xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css

diff --git a/xmodule/assets/SequenceBlockDisplay.scss b/xmodule/assets/SequenceBlockDisplay.scss
deleted file mode 100644
index 0c5aa3c82c49..000000000000
--- a/xmodule/assets/SequenceBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_SequenceBlock {
-  @import "sequence/display.scss";
-}
diff --git a/xmodule/assets/sequence/_display.scss b/xmodule/assets/sequence/_display.scss
deleted file mode 100644
index 3ddda8b37d09..000000000000
--- a/xmodule/assets/sequence/_display.scss
+++ /dev/null
@@ -1,340 +0,0 @@
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'lms/theme/variables-v1';
-
-$seq-nav-border-color: $border-color !default;
-$seq-nav-hover-color: rgb(245, 245, 245) !default;
-$seq-nav-link-color: $link-color !default;
-$seq-nav-icon-color: rgb(10, 10, 10) !default;
-$seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
-$seq-nav-tooltip-color: rgb(51, 51, 51) !default;
-$seq-nav-height: 50px;
-
-// repeated extends - needed since LMS styling was referenced
-.block-link {
-  @include border-left(1px solid $seq-nav-border-color);
-
-  display: block;
-
-  &:hover,
-  &:focus {
-    background: none;
-  }
-}
-
-.topbar {
-  @include clearfix();
-
-  border-bottom: 1px solid $seq-nav-border-color;
-
-  @media print {
-    display: none;
-  }
-
-  a {
-    &.block-link {
-      @include border-left(1px solid $seq-nav-border-color);
-
-      display: block;
-
-      &:hover,
-      &:focus {
-        background: none;
-      }
-    }
-  }
-}
-
-%ui-clear-button {
-  background-color: transparent;
-  background-image: none;
-  background-position: center 14px;
-  background-repeat: no-repeat;
-  border: none;
-  border-radius: 0;
-  background-clip: border-box;
-  box-shadow: none;
-  box-sizing: content-box;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-
-// ====================
-
-.sequence-nav {
-  @extend .topbar;
-
-  margin: 0 auto $baseline;
-  position: relative;
-  border-bottom: none;
-  z-index: 0;
-  height: $seq-nav-height;
-  display: flex;
-  justify-content: center;
-
-  @media print {
-    display: none;
-  }
-
-  .sequence-list-wrapper {
-    @extend %ui-depth2;
-
-    position: relative;
-    height: 100%;
-    flex-grow: 1;
-
-    @include media-breakpoint-down(xs) {
-      white-space: nowrap;
-      overflow-x: scroll;
-    }
-  }
-
-  ol {
-    display: flex;
-
-    li {
-      box-sizing: border-box;
-      min-width: 40px;
-      flex-grow: 1;
-      border-color: $seq-nav-border-color;
-      border-width: 1px;
-      border-top-style: solid;
-
-      &:not(:last-child) {
-        @include border-right-style(solid);
-      }
-
-      button {
-        @extend %ui-fake-link;
-        @extend %ui-clear-button;
-
-        width: 100%;
-        height: ($seq-nav-height - 1);
-        position: relative;
-        margin: 0;
-        padding: 0;
-        display: block;
-        text-align: center;
-        border-color: $seq-nav-border-color;
-        border-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        overflow: visible; // for tooltip - IE11 uses 'hidden' by default if width/height is specified
-
-        .icon {
-          display: inline-block;
-          line-height: 100%; // This matches the height of the <a> its within (the parent) to get vertical centering.
-          font-size: 110%;
-          color: $seq-nav-icon-color-muted;
-        }
-
-        .fa-bookmark {
-          color: $seq-nav-link-color;
-        }
-
-        //video
-        &.seq_video {
-          .icon::before {
-            content: "\f008"; // .fa-film
-          }
-        }
-
-        //other
-        &.seq_other {
-          .icon::before {
-            content: "\f02d"; // .fa-book
-          }
-        }
-
-        //vertical
-        &.seq_vertical {
-          .icon::before {
-            content: "\f00b";  // .fa-tasks
-          }
-        }
-
-        //problems
-        &.seq_problem {
-          .icon::before {
-            content: "\f044";  // .fa-pencil-square-o
-          }
-        }
-
-        .sequence-tooltip {
-          @include text-align(left);
-
-          @extend %ui-depth2;
-
-          margin-top: 12px;
-          background: $seq-nav-tooltip-color;
-          color: $white;
-          font-family: $font-family-sans-serif;
-          line-height: lh();
-          right: 0;  // Should not be RTLed, tooltips do not move in RTL
-          padding: 6px;
-          position: absolute;
-          top: 48px;
-          text-shadow: 0 -1px 0 $black;
-          white-space: pre;
-          pointer-events: none;
-
-          &:empty {
-            background: none;
-
-            &::after {
-              display: none;
-            }
-          }
-
-          &::after {
-            @include transform(rotate(45deg));
-            @include right(18px);
-
-            background: $seq-nav-tooltip-color;
-            content: " ";
-            display: block;
-            height: 10px;
-            right: 18px;  // Not RTLed, positions tooltips relative to seq nav item
-            position: absolute;
-            top: -5px;
-            width: 10px;
-          }
-        }
-      }
-    }
-  }
-
-  body.touch-based-device & ol li button:hover p {
-    display: none;
-  }
-}
-
-.sequence-nav-button {
-  @extend %ui-depth3;
-
-  display: block;
-  top: 0;
-  min-width: 40px;
-  max-width: 40px;
-  height: 100%;
-  text-shadow: none; // overrides default button text-shadow
-  background: none;  // overrides default button gradient
-  background-color: theme-color("inverse");
-  border-color: $seq-nav-border-color;
-  box-shadow: none;
-  font-size: inherit;
-  font-weight: normal;
-  padding: 0;
-  white-space: nowrap;
-  overflow-x: hidden;
-
-  @include media-breakpoint-up(md) {
-    min-width: 120px;
-    max-width: 200px;
-    text-overflow: ellipsis;
-
-    span:not(:last-child) {
-      @include padding-right($baseline / 2);
-    }
-  }
-
-  .sequence-nav-button-label {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: inline;
-    }
-  }
-
-  &.button-previous {
-    order: -999;
-
-    @include media-breakpoint-up(md) {
-      @include left(0);
-      @include border-top-left-radius(3px);
-      @include border-top-right-radius(0);
-      @include border-bottom-right-radius(0);
-      @include border-bottom-left-radius(3px);
-    }
-  }
-
-  &.button-next {
-    order: 999;
-
-    @include media-breakpoint-up(md) {
-      @include right(0);
-      @include border-top-left-radius(0);
-      @include border-top-right-radius(3px);
-      @include border-bottom-right-radius(3px);
-      @include border-bottom-left-radius(0);
-    }
-  }
-
-  &.disabled {
-    cursor: normal;
-  }
-}
-
-.seq_contents {
-  display: none;
-}
-
-.sequence-bottom {
-  position: relative;
-  height: 45px;
-  margin: lh(2) auto;
-  display: flex;
-  justify-content: center;
-
-  .sequence-nav-button {
-    position: relative;
-    min-width: 120px;
-    max-width: 200px;
-    text-overflow: ellipsis;
-
-    &:last-of-type {
-      @include border-left(none);
-    }
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-#seq_content {
-  &:focus,
-  &:active {
-    outline: none;
-  }
-}
-
-// hover and active states
-.sequence-nav-button,
-.sequence-nav button {
-  &.focused,
-  &:hover,
-  &:active,
-  &.active {
-    padding-top: 2px;
-    background-color: theme-color("primary");
-
-    .icon {
-      color: theme-color("inverse");
-    }
-
-    @include media-breakpoint-up(sm) {
-      border-bottom: 3px solid $seq-nav-link-color;
-      background-color: theme-color("inverse");
-
-      .icon {
-        color: $seq-nav-icon-color;
-      }
-    }
-  }
-}
diff --git a/xmodule/seq_block.py b/xmodule/seq_block.py
index 6d1a8c59adeb..1b94f47d898c 100644
--- a/xmodule/seq_block.py
+++ b/xmodule/seq_block.py
@@ -23,7 +23,7 @@
 from xblock.fields import Boolean, Integer, List, Scope, String
 
 from edx_toggles.toggles import WaffleFlag, SettingDictToggle
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     shim_xmodule_js,
@@ -459,7 +459,7 @@ def student_view(self, context):
                 banner_text, special_html = special_html_view
                 if special_html and not masquerading_as_specific_student:
                     fragment = Fragment(special_html)
-                    add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss')
+                    add_css_to_fragment(fragment, 'SequenceBlockDisplay.css')
                     add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay')
                     shim_xmodule_js(fragment, 'Sequence')
                     return fragment
@@ -601,7 +601,7 @@ def _student_or_public_view(self, context, prereq_met, prereq_meta_info, banner_
         self._capture_full_seq_item_metrics(children)
         self._capture_current_unit_metrics(children)
 
-        add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'SequenceBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay')
         shim_xmodule_js(fragment, 'Sequence')
         return fragment
diff --git a/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css b/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css
new file mode 100644
index 000000000000..1a40ca9f7c54
--- /dev/null
+++ b/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css
@@ -0,0 +1,364 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+
+.xmodule_display.xmodule_SequenceBlock {
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+}
+
+.xmodule_display.xmodule_SequenceBlock .block-link {
+    border-left: 1px solid var(--border-color);
+    display: block;
+}
+
+.xmodule_display.xmodule_SequenceBlock .block-link:hover,
+.xmodule_display.xmodule_SequenceBlock .block-link:focus {
+    background: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .topbar,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.xmodule_display.xmodule_SequenceBlock .topbar:after,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+@media print {
+
+    .xmodule_display.xmodule_SequenceBlock .topbar,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+        display: none;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .topbar a.block-link,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link {
+    border-left: 1px solid var(--border-color);
+    display: block;
+}
+
+.xmodule_display.xmodule_SequenceBlock .topbar a.block-link:hover,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:hover,
+.xmodule_display.xmodule_SequenceBlock .topbar a.block-link:focus,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:focus {
+    background: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
+    background-color: transparent;
+    background-image: none;
+    background-position: center 14px;
+    background-repeat: no-repeat;
+    border: none;
+    border-radius: 0;
+    background-clip: border-box;
+    box-shadow: none;
+    box-sizing: content-box;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav {
+    margin: 0 auto var(--baseline);
+    position: relative;
+    border-bottom: none;
+    z-index: 0;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+@media print {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+        display: none;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper {
+    position: relative;
+    height: 100%;
+    flex-grow: 1;
+}
+
+@media (max-width: 575.98px) {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper {
+        white-space: nowrap;
+        overflow-x: scroll;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol {
+    display: flex;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li {
+    box-sizing: border-box;
+    min-width: 40px;
+    flex-grow: 1;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-top-style: solid;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li:not(:last-child) {
+    border-right-style: solid;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
+    width: 100%;
+    height: 49px;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    display: block;
+    text-align: center;
+    border-color: var(--border-color);
+    border-width: 1px;
+    border-bottom-style: solid;
+    box-sizing: border-box;
+    overflow: visible;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon {
+    display: inline-block;
+    line-height: 100%;
+    font-size: 110%;
+    color: #5a5a5a;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .fa-bookmark {
+    color: var(--link-color);
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_video .icon::before {
+    content: "\f008";
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_other .icon::before {
+    content: "\f02d";
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_vertical .icon::before {
+    content: "\f00b";
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_problem .icon::before {
+    content: "\f044";
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip {
+    text-align: left;
+    margin-top: 12px;
+    background: #333333;
+    color: var(--white);
+    font-family: var(--font-family-sans-serif);
+    line-height: lh();
+    right: 0;
+    padding: 6px;
+    position: absolute;
+    top: 48px;
+    text-shadow: 0 -1px 0 var(--black);
+    white-space: pre;
+    pointer-events: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty {
+    background: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty::after {
+    display: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip::after {
+    transform: rotate(45deg);
+    right: 18px;
+    background: #333333;
+    content: " ";
+    display: block;
+    height: 10px;
+    right: 18px;
+    position: absolute;
+    top: -5px;
+    width: 10px;
+}
+
+body.touch-based-device .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button:hover p {
+    display: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
+    display: block;
+    top: 0;
+    min-width: 40px;
+    max-width: 40px;
+    height: 100%;
+    text-shadow: none;
+    background: none;
+    background-color: #fff;
+    border-color: var(--border-color);
+    box-shadow: none;
+    font-size: inherit;
+    font-weight: normal;
+    padding: 0;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
+        min-width: 120px;
+        max-width: 200px;
+        text-overflow: ellipsis;
+    }
+
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button span:not(:last-child) {
+        padding-right: calc((var(--baseline) / 2));
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label {
+        display: inline;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous {
+    order: -999;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous {
+        left: 0;
+        -webkit-border-top-left-radius: 3px;
+        -moz-border-topleft-radius: 3px;
+        border-top-left-radius: 3px;
+        -webkit-border-top-right-radius: 0;
+        -moz-border-topright-radius: 0;
+        border-top-right-radius: 0;
+        -webkit-border-bottom-right-radius: 0;
+        -moz-border-bottomright-radius: 0;
+        border-bottom-right-radius: 0;
+        -webkit-border-bottom-left-radius: 3px;
+        -moz-border-bottomleft-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next {
+    order: 999;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next {
+        right: 0;
+        -webkit-border-top-left-radius: 0;
+        -moz-border-topleft-radius: 0;
+        border-top-left-radius: 0;
+        -webkit-border-top-right-radius: 3px;
+        -moz-border-topright-radius: 3px;
+        border-top-right-radius: 3px;
+        -webkit-border-bottom-right-radius: 3px;
+        -moz-border-bottomright-radius: 3px;
+        border-bottom-right-radius: 3px;
+        -webkit-border-bottom-left-radius: 0;
+        -moz-border-bottomleft-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.disabled {
+    cursor: normal;
+}
+
+.xmodule_display.xmodule_SequenceBlock .seq_contents {
+    display: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-bottom {
+    position: relative;
+    height: 45px;
+    margin: lh(2) auto;
+    display: flex;
+    justify-content: center;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button {
+    position: relative;
+    min-width: 120px;
+    max-width: 200px;
+    text-overflow: ellipsis;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button:last-of-type {
+    border-left: none;
+}
+
+@media print {
+    .xmodule_display.xmodule_SequenceBlock .sequence-bottom {
+        display: none;
+    }
+}
+
+.xmodule_display.xmodule_SequenceBlock #seq_content:focus,
+.xmodule_display.xmodule_SequenceBlock #seq_content:active {
+    outline: none;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button:active,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
+    padding-top: 2px;
+    background-color: #0075b4;
+}
+
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon,
+.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon {
+    color: #fff;
+}
+
+@media (min-width: 576px) {
+
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
+        border-bottom: 3px solid var(--link-color);
+        background-color: #fff;
+    }
+
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon {
+        color: #0a0a0a;
+    }
+}