diff --git a/xmodule/assets/HtmlBlockDisplay.scss b/xmodule/assets/HtmlBlockDisplay.scss
deleted file mode 100644
index 0bc49706cf..0000000000
--- a/xmodule/assets/HtmlBlockDisplay.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.xmodule_display.xmodule_AboutBlock,
-.xmodule_display.xmodule_CourseInfoBlock,
-.xmodule_display.xmodule_HtmlBlock,
-.xmodule_display.xmodule_StaticTabBlock {
- @import "html/display.scss";
-}
diff --git a/xmodule/assets/HtmlBlockEditor.scss b/xmodule/assets/HtmlBlockEditor.scss
deleted file mode 100644
index 15d60863e2..0000000000
--- a/xmodule/assets/HtmlBlockEditor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.xmodule_edit.xmodule_AboutBlock,
-.xmodule_edit.xmodule_CourseInfoBlock,
-.xmodule_edit.xmodule_HtmlBlock,
-.xmodule_edit.xmodule_StaticTabBlock {
- @import "editor/edit.scss";
- @import "html/edit.scss";
-}
diff --git a/xmodule/assets/editor/_edit.scss b/xmodule/assets/editor/_edit.scss
index 7169977652..0af846f8b2 100644
--- a/xmodule/assets/editor/_edit.scss
+++ b/xmodule/assets/editor/_edit.scss
@@ -18,7 +18,7 @@
@include linear-gradient(top, #d4dee8, #c9d5e2);
position: relative;
- padding: ($baseline/4);
+ padding: calc(var(--baseline)/4);
border-bottom-color: #a5aaaf;
button {
@@ -26,7 +26,7 @@
@include float(left);
- padding: 3px ($baseline/2) 5px;
+ padding: 3px calc(var(--baseline)/2) 5px;
margin-left: 7px;
border: 0;
border-radius: 2px;
@@ -53,7 +53,7 @@
li {
@include float(left);
- @include margin-right($baseline/4);
+ @include margin-right(calc(var(--baseline)/4));
&:last-child {
@include margin-right(0);
@@ -67,7 +67,7 @@
border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0;
- @include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
+ @include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3;
font-size: 13px;
@@ -75,8 +75,8 @@
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
&.current {
- background: $white;
- border-bottom-color: $white;
+ background: var(--white);
+ border-bottom-color: var(--white);
}
}
}
diff --git a/xmodule/assets/html/_display.scss b/xmodule/assets/html/_display.scss
deleted file mode 100644
index 25e2ce4fbd..0000000000
--- a/xmodule/assets/html/_display.scss
+++ /dev/null
@@ -1,318 +0,0 @@
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-// HTML component display:
-* {
- line-height: 1.4em;
-}
-
-h1 {
- color: $body-color;
- font: normal 2em/1.4em $font-family-sans-serif;
- letter-spacing: 1px;
-
- @include margin(0, 0, 1.416em, 0);
-}
-
-h2 {
- color: #646464;
- font: normal 1.2em/1.2em $font-family-sans-serif;
- letter-spacing: 1px;
- margin-bottom: ($baseline*0.75);
- -webkit-font-smoothing: antialiased;
-}
-
-h3,
-h4,
-h5,
-h6 {
- @include margin(0, 0, ($baseline/2), 0);
-
- font-weight: 600;
-}
-
-h3 {
- font-size: 1.2em;
-}
-
-h4 {
- font-size: 1em;
-}
-
-h5 {
- font-size: 0.83em;
-}
-
-h6 {
- font-size: 0.75em;
-}
-
-p {
- margin-bottom: 1.416em;
- font-size: 1em;
- line-height: 1.6em !important;
- color: $body-color;
-}
-
-em,
-i {
- font-style: italic;
-
- span {
- font-style: italic;
- }
-}
-
-strong,
-b {
- font-weight: bold;
-
- span {
- font-weight: bold;
- }
-}
-
-p + p,
-ul + p,
-ol + p {
- margin-top: $baseline;
-}
-
-blockquote {
- margin: 1em ($baseline*2);
-}
-
-ol,
-ul {
- // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
- @include bi-app-compact(padding, 0, 0, 0, 1em);
-
- margin: 1em 0;
- color: $body-color;
-
- li {
- margin-bottom: 0.708em;
- }
-}
-
-ol {
- list-style: decimal outside none;
-}
-
-ul {
- list-style: disc outside none;
-}
-
-a {
- &:link,
- &:visited,
- &:hover,
- &:active,
- &:focus {
- color: $blue;
- }
-}
-
-img {
- max-width: 100%;
-}
-
-pre {
- margin: 1em 0;
- color: $body-color;
- font-family: monospace, serif;
- font-size: 1em;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-
-code {
- color: $body-color;
- font-family: monospace, serif;
- background: none;
- padding: 0;
-}
-
-table {
- width: 100%;
- margin: $baseline 0;
- border-collapse: collapse;
- font-size: 16px;
-
- td,
- th {
- margin: $baseline 0;
- padding: ($baseline/2);
- border: 1px solid $gray-l3;
- font-size: 14px;
-
- &.cont-justified-left {
- text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
- }
-
- &.cont-justified-right {
- text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
- }
-
- &.cont-justified-center {
- text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles
- }
- }
-}
-
-th {
- background: #eee;
- font-weight: bold;
-}
-
-
-// image modal
-// --------------------
-
-// modal - image zoom, fill window
-.wrapper-modal-image {
- .modal-ui-icon {
- @extend %ui-fake-link;
-
- position: absolute;
- display: block;
- padding: ($baseline/4) 7px;
- border-radius: 5px;
- opacity: 0.9;
- background: $white;
- color: $black;
- border: 2px solid $black;
-
- .label {
- font-weight: bold;
- }
-
- i {
- font-style: normal;
- }
- }
-
- .image-link {
- @extend %ui-fake-link;
-
- position: relative;
- display: block;
-
- .action-fullscreen {
- display: none;
- top: 10px;
- left: 10px;
- }
-
- &:hover .action-fullscreen {
- display: block;
- }
- }
-
- .image-modal {
- @extend %ui-fake-link;
- @extend %ui-depth5;
-
- position: fixed;
- top: 0;
- left: 0;
- display: none;
- height: 100%;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.7);
-
- .image-content {
- position: relative;
- top: 2.5%;
- display: block;
- height: 95%;
- width: 95%;
- margin: auto;
- overflow: hidden;
-
- .image-wrapper {
- position: relative;
-
- img {
- position: relative;
- display: block;
- max-width: 100%;
- max-height: 100%;
- margin: auto;
- cursor: default;
- }
- }
-
- .action-close {
- top: 10px;
- right: 10px;
- }
-
- .image-controls {
- position: absolute;
- right: 10px;
- bottom: 10px;
- margin: 0;
- padding: 0;
- list-style: none;
-
- .image-control {
- position: relative;
- display: inline-block;
- margin: 0;
- padding: 0;
-
- .modal-ui-icon {
- position: relative;
-
- &.action-zoom-in {
- margin-right: ($baseline/4);
- }
-
- &.action-zoom-out {
- margin-left: ($baseline/4);
- }
-
- &.is-disabled {
- opacity: 0.5;
- cursor: default;
- }
- }
- }
- }
- }
-
- &.image-is-fit-to-screen {
- display: block;
-
- // !important used here to override jQuery.
- .image-content .image-wrapper {
- top: 0 !important;
- left: 0 !important;
- width: 100% !important;
- height: 100% !important;
-
- img {
- top: 0 !important;
- left: 0 !important;
- }
- }
- }
-
- &.image-is-zoomed {
- display: block;
-
- .image-content .image-wrapper {
- img {
- max-width: none;
- max-height: none;
- margin: 0;
- cursor: move;
- }
- }
- }
- }
-}
diff --git a/xmodule/assets/html/_edit.scss b/xmodule/assets/html/_edit.scss
deleted file mode 100644
index bf47a0f5d3..0000000000
--- a/xmodule/assets/html/_edit.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// HTML component editor:
-.html-editor {
- @include clearfix();
-
- .CodeMirror {
- box-sizing: border-box;
-
- height: 435px;
- }
-
- .is-inactive {
- display: none;
- }
-}
diff --git a/xmodule/html_block.py b/xmodule/html_block.py
index 2db1983601..62949647ce 100644
--- a/xmodule/html_block.py
+++ b/xmodule/html_block.py
@@ -23,7 +23,7 @@ from xmodule.edxnotes_utils import edxnotes
from xmodule.html_checker import check_html
from xmodule.stringify import stringify_children
from xmodule.util.misc import escape_html_characters
-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,
@@ -90,7 +90,7 @@ class HtmlBlockMixin( # lint-amnesty, pylint: disable=abstract-method
Return a fragment that contains the html for the student view
"""
fragment = Fragment(self.get_html())
- add_sass_to_fragment(fragment, 'HtmlBlockDisplay.scss')
+ add_css_to_fragment(fragment, 'HtmlBlockDisplay.css')
add_webpack_js_to_fragment(fragment, 'HtmlBlockDisplay')
shim_xmodule_js(fragment, 'HTMLModule')
return fragment
@@ -136,7 +136,7 @@ class HtmlBlockMixin( # lint-amnesty, pylint: disable=abstract-method
fragment = Fragment(
self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
)
- add_sass_to_fragment(fragment, 'HtmlBlockEditor.scss')
+ add_css_to_fragment(fragment, 'HtmlBlockEditor.css')
add_webpack_js_to_fragment(fragment, 'HtmlBlockEditor')
shim_xmodule_js(fragment, 'HTMLEditingDescriptor')
return fragment
diff --git a/xmodule/static/css-builtin-blocks/HtmlBlockDisplay.css b/xmodule/static/css-builtin-blocks/HtmlBlockDisplay.css
new file mode 100644
index 0000000000..b89bb3c8c7
--- /dev/null
+++ b/xmodule/static/css-builtin-blocks/HtmlBlockDisplay.css
@@ -0,0 +1,510 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+
+.xmodule_display.xmodule_AboutBlock,
+.xmodule_display.xmodule_CourseInfoBlock,
+.xmodule_display.xmodule_HtmlBlock,
+.xmodule_display.xmodule_StaticTabBlock {
+ /* stylelint-disable-line */
+ /* stylelint-disable-line */
+}
+
+.xmodule_display.xmodule_AboutBlock *,
+.xmodule_display.xmodule_CourseInfoBlock *,
+.xmodule_display.xmodule_HtmlBlock *,
+.xmodule_display.xmodule_StaticTabBlock * {
+ line-height: 1.4em;
+}
+
+.xmodule_display.xmodule_AboutBlock h1,
+.xmodule_display.xmodule_CourseInfoBlock h1,
+.xmodule_display.xmodule_HtmlBlock h1,
+.xmodule_display.xmodule_StaticTabBlock h1 {
+ color: var(--body-color);
+ font: normal 2em/1.4em var(--font-family-sans-serif);
+ letter-spacing: 1px;
+ margin: 0 0 1.416em;
+}
+
+.xmodule_display.xmodule_AboutBlock h2,
+.xmodule_display.xmodule_CourseInfoBlock h2,
+.xmodule_display.xmodule_HtmlBlock h2,
+.xmodule_display.xmodule_StaticTabBlock h2 {
+ color: #646464;
+ font: normal 1.2em/1.2em var(--font-family-sans-serif);
+ letter-spacing: 1px;
+ margin-bottom: calc((var(--baseline) * 0.75));
+ -webkit-font-smoothing: antialiased;
+}
+
+.xmodule_display.xmodule_AboutBlock h3,
+.xmodule_display.xmodule_AboutBlock h4,
+.xmodule_display.xmodule_AboutBlock h5,
+.xmodule_display.xmodule_AboutBlock h6,
+.xmodule_display.xmodule_CourseInfoBlock h3,
+.xmodule_display.xmodule_CourseInfoBlock h4,
+.xmodule_display.xmodule_CourseInfoBlock h5,
+.xmodule_display.xmodule_CourseInfoBlock h6,
+.xmodule_display.xmodule_HtmlBlock h3,
+.xmodule_display.xmodule_HtmlBlock h4,
+.xmodule_display.xmodule_HtmlBlock h5,
+.xmodule_display.xmodule_HtmlBlock h6,
+.xmodule_display.xmodule_StaticTabBlock h3,
+.xmodule_display.xmodule_StaticTabBlock h4,
+.xmodule_display.xmodule_StaticTabBlock h5,
+.xmodule_display.xmodule_StaticTabBlock h6 {
+ margin: 0 0 calc((var(--baseline) / 2));
+ font-weight: 600;
+}
+
+.xmodule_display.xmodule_AboutBlock h3,
+.xmodule_display.xmodule_CourseInfoBlock h3,
+.xmodule_display.xmodule_HtmlBlock h3,
+.xmodule_display.xmodule_StaticTabBlock h3 {
+ font-size: 1.2em;
+}
+
+.xmodule_display.xmodule_AboutBlock h4,
+.xmodule_display.xmodule_CourseInfoBlock h4,
+.xmodule_display.xmodule_HtmlBlock h4,
+.xmodule_display.xmodule_StaticTabBlock h4 {
+ font-size: 1em;
+}
+
+.xmodule_display.xmodule_AboutBlock h5,
+.xmodule_display.xmodule_CourseInfoBlock h5,
+.xmodule_display.xmodule_HtmlBlock h5,
+.xmodule_display.xmodule_StaticTabBlock h5 {
+ font-size: 0.83em;
+}
+
+.xmodule_display.xmodule_AboutBlock h6,
+.xmodule_display.xmodule_CourseInfoBlock h6,
+.xmodule_display.xmodule_HtmlBlock h6,
+.xmodule_display.xmodule_StaticTabBlock h6 {
+ font-size: 0.75em;
+}
+
+.xmodule_display.xmodule_AboutBlock p,
+.xmodule_display.xmodule_CourseInfoBlock p,
+.xmodule_display.xmodule_HtmlBlock p,
+.xmodule_display.xmodule_StaticTabBlock p {
+ margin-bottom: 1.416em;
+ font-size: 1em;
+ line-height: 1.6em !important;
+ color: var(--body-color);
+}
+
+.xmodule_display.xmodule_AboutBlock em,
+.xmodule_display.xmodule_AboutBlock i,
+.xmodule_display.xmodule_CourseInfoBlock em,
+.xmodule_display.xmodule_CourseInfoBlock i,
+.xmodule_display.xmodule_HtmlBlock em,
+.xmodule_display.xmodule_HtmlBlock i,
+.xmodule_display.xmodule_StaticTabBlock em,
+.xmodule_display.xmodule_StaticTabBlock i {
+ font-style: italic;
+}
+
+.xmodule_display.xmodule_AboutBlock em span,
+.xmodule_display.xmodule_AboutBlock i span,
+.xmodule_display.xmodule_CourseInfoBlock em span,
+.xmodule_display.xmodule_CourseInfoBlock i span,
+.xmodule_display.xmodule_HtmlBlock em span,
+.xmodule_display.xmodule_HtmlBlock i span,
+.xmodule_display.xmodule_StaticTabBlock em span,
+.xmodule_display.xmodule_StaticTabBlock i span {
+ font-style: italic;
+}
+
+.xmodule_display.xmodule_AboutBlock strong,
+.xmodule_display.xmodule_AboutBlock b,
+.xmodule_display.xmodule_CourseInfoBlock strong,
+.xmodule_display.xmodule_CourseInfoBlock b,
+.xmodule_display.xmodule_HtmlBlock strong,
+.xmodule_display.xmodule_HtmlBlock b,
+.xmodule_display.xmodule_StaticTabBlock strong,
+.xmodule_display.xmodule_StaticTabBlock b {
+ font-weight: bold;
+}
+
+.xmodule_display.xmodule_AboutBlock strong span,
+.xmodule_display.xmodule_AboutBlock b span,
+.xmodule_display.xmodule_CourseInfoBlock strong span,
+.xmodule_display.xmodule_CourseInfoBlock b span,
+.xmodule_display.xmodule_HtmlBlock strong span,
+.xmodule_display.xmodule_HtmlBlock b span,
+.xmodule_display.xmodule_StaticTabBlock strong span,
+.xmodule_display.xmodule_StaticTabBlock b span {
+ font-weight: bold;
+}
+
+.xmodule_display.xmodule_AboutBlock p + p,
+.xmodule_display.xmodule_AboutBlock ul + p,
+.xmodule_display.xmodule_AboutBlock ol + p,
+.xmodule_display.xmodule_CourseInfoBlock p + p,
+.xmodule_display.xmodule_CourseInfoBlock ul + p,
+.xmodule_display.xmodule_CourseInfoBlock ol + p,
+.xmodule_display.xmodule_HtmlBlock p + p,
+.xmodule_display.xmodule_HtmlBlock ul + p,
+.xmodule_display.xmodule_HtmlBlock ol + p,
+.xmodule_display.xmodule_StaticTabBlock p + p,
+.xmodule_display.xmodule_StaticTabBlock ul + p,
+.xmodule_display.xmodule_StaticTabBlock ol + p {
+ margin-top: var(--baseline);
+}
+
+.xmodule_display.xmodule_AboutBlock blockquote,
+.xmodule_display.xmodule_CourseInfoBlock blockquote,
+.xmodule_display.xmodule_HtmlBlock blockquote,
+.xmodule_display.xmodule_StaticTabBlock blockquote {
+ margin: 1em calc((var(--baseline) * 2));
+}
+
+.xmodule_display.xmodule_AboutBlock ol,
+.xmodule_display.xmodule_AboutBlock ul,
+.xmodule_display.xmodule_CourseInfoBlock ol,
+.xmodule_display.xmodule_CourseInfoBlock ul,
+.xmodule_display.xmodule_HtmlBlock ol,
+.xmodule_display.xmodule_HtmlBlock ul,
+.xmodule_display.xmodule_StaticTabBlock ol,
+.xmodule_display.xmodule_StaticTabBlock ul {
+ padding: 0 0 0 1em;
+ margin: 1em 0;
+ color: var(--body-color);
+}
+
+.xmodule_display.xmodule_AboutBlock ol li,
+.xmodule_display.xmodule_AboutBlock ul li,
+.xmodule_display.xmodule_CourseInfoBlock ol li,
+.xmodule_display.xmodule_CourseInfoBlock ul li,
+.xmodule_display.xmodule_HtmlBlock ol li,
+.xmodule_display.xmodule_HtmlBlock ul li,
+.xmodule_display.xmodule_StaticTabBlock ol li,
+.xmodule_display.xmodule_StaticTabBlock ul li {
+ margin-bottom: 0.708em;
+}
+
+.xmodule_display.xmodule_AboutBlock ol,
+.xmodule_display.xmodule_CourseInfoBlock ol,
+.xmodule_display.xmodule_HtmlBlock ol,
+.xmodule_display.xmodule_StaticTabBlock ol {
+ list-style: decimal outside none;
+}
+
+.xmodule_display.xmodule_AboutBlock ul,
+.xmodule_display.xmodule_CourseInfoBlock ul,
+.xmodule_display.xmodule_HtmlBlock ul,
+.xmodule_display.xmodule_StaticTabBlock ul {
+ list-style: disc outside none;
+}
+
+.xmodule_display.xmodule_AboutBlock a:link, .xmodule_display.xmodule_AboutBlock a:visited, .xmodule_display.xmodule_AboutBlock a:hover, .xmodule_display.xmodule_AboutBlock a:active, .xmodule_display.xmodule_AboutBlock a:focus,
+.xmodule_display.xmodule_CourseInfoBlock a:link,
+.xmodule_display.xmodule_CourseInfoBlock a:visited,
+.xmodule_display.xmodule_CourseInfoBlock a:hover,
+.xmodule_display.xmodule_CourseInfoBlock a:active,
+.xmodule_display.xmodule_CourseInfoBlock a:focus,
+.xmodule_display.xmodule_HtmlBlock a:link,
+.xmodule_display.xmodule_HtmlBlock a:visited,
+.xmodule_display.xmodule_HtmlBlock a:hover,
+.xmodule_display.xmodule_HtmlBlock a:active,
+.xmodule_display.xmodule_HtmlBlock a:focus,
+.xmodule_display.xmodule_StaticTabBlock a:link,
+.xmodule_display.xmodule_StaticTabBlock a:visited,
+.xmodule_display.xmodule_StaticTabBlock a:hover,
+.xmodule_display.xmodule_StaticTabBlock a:active,
+.xmodule_display.xmodule_StaticTabBlock a:focus {
+ color: var(--blue);
+}
+
+.xmodule_display.xmodule_AboutBlock img,
+.xmodule_display.xmodule_CourseInfoBlock img,
+.xmodule_display.xmodule_HtmlBlock img,
+.xmodule_display.xmodule_StaticTabBlock img {
+ max-width: 100%;
+}
+
+.xmodule_display.xmodule_AboutBlock pre,
+.xmodule_display.xmodule_CourseInfoBlock pre,
+.xmodule_display.xmodule_HtmlBlock pre,
+.xmodule_display.xmodule_StaticTabBlock pre {
+ margin: 1em 0;
+ color: var(--body-color);
+ font-family: monospace, serif;
+ font-size: 1em;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+.xmodule_display.xmodule_AboutBlock code,
+.xmodule_display.xmodule_CourseInfoBlock code,
+.xmodule_display.xmodule_HtmlBlock code,
+.xmodule_display.xmodule_StaticTabBlock code {
+ color: var(--body-color);
+ font-family: monospace, serif;
+ background: none;
+ padding: 0;
+}
+
+.xmodule_display.xmodule_AboutBlock table,
+.xmodule_display.xmodule_CourseInfoBlock table,
+.xmodule_display.xmodule_HtmlBlock table,
+.xmodule_display.xmodule_StaticTabBlock table {
+ width: 100%;
+ margin: var(--baseline) 0;
+ border-collapse: collapse;
+ font-size: 16px;
+}
+
+.xmodule_display.xmodule_AboutBlock table td,
+.xmodule_display.xmodule_AboutBlock table th,
+.xmodule_display.xmodule_CourseInfoBlock table td,
+.xmodule_display.xmodule_CourseInfoBlock table th,
+.xmodule_display.xmodule_HtmlBlock table td,
+.xmodule_display.xmodule_HtmlBlock table th,
+.xmodule_display.xmodule_StaticTabBlock table td,
+.xmodule_display.xmodule_StaticTabBlock table th {
+ margin: var(--baseline) 0;
+ padding: calc((var(--baseline) / 2));
+ border: 1px solid var(--gray-l3);
+ font-size: 14px;
+}
+
+.xmodule_display.xmodule_AboutBlock table td.cont-justified-left,
+.xmodule_display.xmodule_AboutBlock table th.cont-justified-left,
+.xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-left,
+.xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-left,
+.xmodule_display.xmodule_HtmlBlock table td.cont-justified-left,
+.xmodule_display.xmodule_HtmlBlock table th.cont-justified-left,
+.xmodule_display.xmodule_StaticTabBlock table td.cont-justified-left,
+.xmodule_display.xmodule_StaticTabBlock table th.cont-justified-left {
+ text-align: left !important;
+}
+
+.xmodule_display.xmodule_AboutBlock table td.cont-justified-right,
+.xmodule_display.xmodule_AboutBlock table th.cont-justified-right,
+.xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-right,
+.xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-right,
+.xmodule_display.xmodule_HtmlBlock table td.cont-justified-right,
+.xmodule_display.xmodule_HtmlBlock table th.cont-justified-right,
+.xmodule_display.xmodule_StaticTabBlock table td.cont-justified-right,
+.xmodule_display.xmodule_StaticTabBlock table th.cont-justified-right {
+ text-align: right !important;
+}
+
+.xmodule_display.xmodule_AboutBlock table td.cont-justified-center,
+.xmodule_display.xmodule_AboutBlock table th.cont-justified-center,
+.xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-center,
+.xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-center,
+.xmodule_display.xmodule_HtmlBlock table td.cont-justified-center,
+.xmodule_display.xmodule_HtmlBlock table th.cont-justified-center,
+.xmodule_display.xmodule_StaticTabBlock table td.cont-justified-center,
+.xmodule_display.xmodule_StaticTabBlock table th.cont-justified-center {
+ text-align: center !important;
+}
+
+.xmodule_display.xmodule_AboutBlock th,
+.xmodule_display.xmodule_CourseInfoBlock th,
+.xmodule_display.xmodule_HtmlBlock th,
+.xmodule_display.xmodule_StaticTabBlock th {
+ background: #eee;
+ font-weight: bold;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon {
+ position: absolute;
+ display: block;
+ padding: calc((var(--baseline) / 4)) 7px;
+ border-radius: 5px;
+ opacity: 0.9;
+ background: var(--white);
+ color: var(--black);
+ border: 2px solid var(--black);
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon .label,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon .label,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon .label,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon .label {
+ font-weight: bold;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon i,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon i,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon i,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon i {
+ font-style: normal;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link {
+ position: relative;
+ display: block;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link .action-fullscreen,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link .action-fullscreen,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link .action-fullscreen,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link .action-fullscreen {
+ display: none;
+ top: 10px;
+ left: 10px;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link:hover .action-fullscreen {
+ display: block;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: none;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content {
+ position: relative;
+ top: 2.5%;
+ display: block;
+ height: 95%;
+ width: 95%;
+ margin: auto;
+ overflow: hidden;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper {
+ position: relative;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img {
+ position: relative;
+ display: block;
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+ cursor: default;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .action-close,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .action-close,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .action-close,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .action-close {
+ top: 10px;
+ right: 10px;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control {
+ position: relative;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon {
+ position: relative;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in {
+ margin-right: calc((var(--baseline) / 4));
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out {
+ margin-left: calc((var(--baseline) / 4));
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled {
+ opacity: 0.5;
+ cursor: default;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen {
+ display: block;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper {
+ top: 0 !important;
+ left: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img {
+ top: 0 !important;
+ left: 0 !important;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed {
+ display: block;
+}
+
+.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+.xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+.xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img {
+ max-width: none;
+ max-height: none;
+ margin: 0;
+ cursor: move;
+}
diff --git a/xmodule/static/css-builtin-blocks/HtmlBlockEditor.css b/xmodule/static/css-builtin-blocks/HtmlBlockEditor.css
new file mode 100644
index 0000000000..feae8a0034
--- /dev/null
+++ b/xmodule/static/css-builtin-blocks/HtmlBlockEditor.css
@@ -0,0 +1,205 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+
+.xmodule_edit.xmodule_AboutBlock,
+.xmodule_edit.xmodule_CourseInfoBlock,
+.xmodule_edit.xmodule_HtmlBlock,
+.xmodule_edit.xmodule_StaticTabBlock {
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-col-wide,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-col-wide,
+.xmodule_edit.xmodule_HtmlBlock .ui-col-wide,
+.xmodule_edit.xmodule_StaticTabBlock .ui-col-wide {
+ width: 74.46809%;
+ margin-right: 2.12766%;
+ float: left;
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-col-narrow,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-col-narrow,
+.xmodule_edit.xmodule_HtmlBlock .ui-col-narrow,
+.xmodule_edit.xmodule_StaticTabBlock .ui-col-narrow {
+ width: 23.40426%;
+ float: left;
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-loading,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-loading,
+.xmodule_edit.xmodule_HtmlBlock .ui-loading,
+.xmodule_edit.xmodule_StaticTabBlock .ui-loading {
+ box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+ padding: 15px 20px;
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-loading,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-loading,
+.xmodule_edit.xmodule_HtmlBlock .ui-loading,
+.xmodule_edit.xmodule_StaticTabBlock .ui-loading {
+ animation: fadeIn 0.25s linear 1;
+ opacity: 0.6;
+ background-color: #fff;
+ padding: 30px 20px;
+ text-align: center;
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-loading .spin,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-loading .spin,
+.xmodule_edit.xmodule_HtmlBlock .ui-loading .spin,
+.xmodule_edit.xmodule_StaticTabBlock .ui-loading .spin {
+ display: inline-block;
+}
+
+.xmodule_edit.xmodule_AboutBlock .ui-loading .copy,
+.xmodule_edit.xmodule_CourseInfoBlock .ui-loading .copy,
+.xmodule_edit.xmodule_HtmlBlock .ui-loading .copy,
+.xmodule_edit.xmodule_StaticTabBlock .ui-loading .copy {
+ padding-left: 5px;
+}
+
+.xmodule_edit.xmodule_AboutBlock .is-hidden,
+.xmodule_edit.xmodule_CourseInfoBlock .is-hidden,
+.xmodule_edit.xmodule_HtmlBlock .is-hidden,
+.xmodule_edit.xmodule_StaticTabBlock .is-hidden {
+ display: none;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor,
+.xmodule_edit.xmodule_CourseInfoBlock .editor,
+.xmodule_edit.xmodule_HtmlBlock .editor,
+.xmodule_edit.xmodule_StaticTabBlock .editor {
+ position: relative;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .row,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .row,
+.xmodule_edit.xmodule_HtmlBlock .editor .row,
+.xmodule_edit.xmodule_StaticTabBlock .editor .row {
+ position: relative;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-bar,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar {
+ background-color: #d4dee8;
+ background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
+ background-image: linear-gradient(to bottom, #d4dee8, #c9d5e2);
+ position: relative;
+ padding: calc(var(--baseline) / 4);
+ border-bottom-color: #a5aaaf;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-bar:after,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar:after,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar:after,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-bar button,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button {
+ display: inline-block;
+ float: left;
+ padding: 3px calc(var(--baseline) / 2) 5px;
+ margin-left: 7px;
+ border: 0;
+ border-radius: 2px;
+ background: transparent;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-bar button .icon,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button .icon,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button .icon,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button .icon {
+ height: 21px;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:focus,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:hover,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:focus,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:hover,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:focus,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:hover,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:focus {
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ text-align: left;
+ direction: ltr;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li {
+ float: left;
+ margin-right: calc(var(--baseline) / 4);
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li:last-child,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li:last-child,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li:last-child,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li:last-child {
+ margin-right: 0;
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab {
+ display: block;
+ height: 24px;
+ padding: 7px 20px 3px;
+ border: 1px solid #a5aaaf;
+ border-radius: 3px 3px 0 0;
+ background-color: var(--transparent);
+ background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+ background-image: linear-gradient(to bottom, var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+ background-color: #e5ecf3;
+ font-size: 13px;
+ color: #3c3c3c;
+ box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab.current,
+.xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab.current,
+.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab.current,
+.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab.current {
+ background: var(--white);
+ border-bottom-color: var(--white);
+}
+
+.xmodule_edit.xmodule_AboutBlock .html-editor:after,
+.xmodule_edit.xmodule_CourseInfoBlock .html-editor:after,
+.xmodule_edit.xmodule_HtmlBlock .html-editor:after,
+.xmodule_edit.xmodule_StaticTabBlock .html-editor:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+.xmodule_edit.xmodule_AboutBlock .html-editor .CodeMirror,
+.xmodule_edit.xmodule_CourseInfoBlock .html-editor .CodeMirror,
+.xmodule_edit.xmodule_HtmlBlock .html-editor .CodeMirror,
+.xmodule_edit.xmodule_StaticTabBlock .html-editor .CodeMirror {
+ box-sizing: border-box;
+ height: 435px;
+}
+
+.xmodule_edit.xmodule_AboutBlock .html-editor .is-inactive,
+.xmodule_edit.xmodule_CourseInfoBlock .html-editor .is-inactive,
+.xmodule_edit.xmodule_HtmlBlock .html-editor .is-inactive,
+.xmodule_edit.xmodule_StaticTabBlock .html-editor .is-inactive {
+ display: none;
+}