feat!: Dropping Sass support from builtin annotatable block, replacin…

…g with vanilla CSS

xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css

@@ -0,0 +1,243 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+
+.xmodule_display.xmodule_AnnotatableBlock {
+    /* TODO: move top-level variables to a common _variables.scss.
+   * NOTE: These variables were only added here because when this was integrated with the CMS,
+   * SASS compilation errors were triggered because the CMS didn't have the same variables defined
+   * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
+   * -Abarrett and Vshnayder
+   */
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper {
+    position: relative;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-header {
+    margin-bottom: 0.5em;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section {
+    position: relative;
+    padding: 0.5em 1em;
+    border: 1px solid var(--gray-l3);
+    border-radius: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded {
+    background-color: #ededed;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title {
+    font-weight: bold;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a {
+    font-weight: normal;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body {
+    border-top: 1px solid var(--gray-l3);
+    margin-top: 0.5em;
+    padding-top: 0.5em;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template {
+    list-style: disc;
+    margin-left: 4em;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b {
+    font-weight: bold;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i {
+    font-style: italic;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code {
+    display: inline;
+    white-space: pre;
+    font-family: Courier New, monospace;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle {
+    position: absolute;
+    right: 0;
+    margin: 2px 1em 2px 0;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after {
+    content: " \2191";
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after {
+    content: " \2193";
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span {
+    display: inline;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight {
+    background-color: rgba(255, 255, 10, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected {
+    background-color: rgba(255, 255, 10, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow {
+    background-color: rgba(255, 255, 10, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected {
+    background-color: rgba(255, 255, 10, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red {
+    background-color: rgba(178, 19, 16, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected {
+    background-color: rgba(178, 19, 16, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange {
+    background-color: rgba(255, 165, 0, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected {
+    background-color: rgba(255, 165, 0, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green {
+    background-color: rgba(25, 255, 132, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected {
+    background-color: rgba(25, 255, 132, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue {
+    background-color: rgba(35, 163, 255, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected {
+    background-color: rgba(35, 163, 255, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple {
+    background-color: rgba(115, 9, 178, 0.3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected {
+    background-color: rgba(115, 9, 178, 0.9);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide {
+    cursor: none;
+    background-color: inherit;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon {
+    display: none;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment {
+    display: none;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip {
+    font-size: 0.875em;
+    border: 1px solid #333;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0.85);
+    color: var(--white);
+    -webkit-font-smoothing: antialiased;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar {
+    font-size: 1em;
+    color: inherit;
+    background-color: transparent;
+    padding: calc((var(--baseline) / 4)) calc((var(--baseline) / 2));
+    border: none;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title {
+    padding: calc((var(--baseline) / 4)) 0;
+    border-bottom: 2px solid #333;
+    font-weight: bold;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon {
+    right: 10px;
+    background: #333;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover {
+    color: inherit;
+    border: 1px solid var(--gray-l3);
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content {
+    color: inherit;
+    font-size: 0.875em;
+    text-align: left;
+    font-weight: 400;
+    padding: 0 calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) / 2));
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p {
+    color: inherit;
+    line-height: normal;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable {
+    max-width: 375px;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content {
+    padding: 0 calc((var(--baseline) / 2));
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment {
+    display: block;
+    margin: 0 0 calc((var(--baseline) / 2)) 0;
+    max-height: 225px;
+    overflow: auto;
+    line-height: normal;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply {
+    display: block;
+    border-top: 2px solid #333;
+    padding: calc((var(--baseline) / 4)) 0;
+    margin: 0;
+    text-align: center;
+}
+
+.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    bottom: -20px;
+    left: 50%;
+    height: 0;
+    width: 0;
+    margin-left: calc(-1 * (var(--baseline) / 4));
+    border: 10px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.85);
+}

xmodule/static/css-builtin-blocks/AnnotatableBlockEditor.css

@@ -0,0 +1,5 @@
+.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror {
+    background: #fff;
+    font-size: 13px;
+    color: #3c3c3c;
+}