Skip to content

Commit

Permalink
feat!: Dropping Sass support from builtin video block, replacing with…
Browse files Browse the repository at this point in the history 
… vanilla CSS
  • Loading branch information
@farhan
farhan committed Sep 20, 2024
1 parent ad23992 commit 9e119c4
Show file tree
Hide file tree
Showing 9 changed files with 1,275 additions and 95 deletions.
10 changes: 9 additions & 1 deletion common/static/sass/_builtin-block-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
962 changes: 962 additions & 0 deletions xmodule/assets/VideoBlockDisplay.css
View file

Large diffs are not rendered by default.

139 changes: 139 additions & 0 deletions xmodule/assets/VideoBlockEditor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */
.xmodule_edit.xmodule_VideoBlock { }
/* line 123, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-col-wide {
width: 74.46809%;
margin-right: 2.12766%;
float: left; }
/* line 130, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-col-narrow {
width: 23.40426%;
float: left; }
/* line 342, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-loading {
box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
padding: 15px 20px; }
/* line 368, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-loading {
animation: fadeIn 0.25s linear 1;
opacity: 0.6;
background-color: #fff;
padding: 30px 20px;
text-align: center; }
/* line 379, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-loading .spin {
display: inline-block; }
/* line 385, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .ui-loading .copy {
padding-left: 5px; }
/* line 390, common/static/sass/_mixins.scss */
.xmodule_edit.xmodule_VideoBlock .is-hidden {
display: none; }
/* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .tabs-wrapper {
padding-top: 0;
position: relative; }
/* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings {
display: block; }
/* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-single-tab-name {
display: none; }
/* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs {
position: relative; }
/* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after {
content: "";
display: table;
clear: both; }
/* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header {
box-sizing: border-box;
padding: 18px var(--baseline);
top: 0 !important;
right: 0;
background-color: var(--blue);
border-bottom: 1px solid var(--blue-d2);
color: var(--white); }
/* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name {
position: relative;
top: 0;
left: 0;
width: 50%;
color: var(--white);
font-weight: 600; }
/* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em {
display: inline-block;
margin-right: calc((var(--baseline)/4));
font-weight: 400;
color: var(--white); }
/* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs {
list-style: none;
right: 0;
top: calc((var(--baseline)/4));
position: absolute;
padding: 12px calc((var(--baseline)*0.75)); }
/* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap {
display: inline-block;
margin-left: 8px; }
/* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab {
font-size: 14px;
font-size: 1.4rem;
background-color: rgba(255, 255, 255, 0.3);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border: 1px solid var(--blue-d1);
border-radius: 3px;
padding: calc((var(--baseline)/4)) var(--baseline);
background-color: var(--blue);
font-weight: bold;
color: var(--white); }
/* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current {
background-color: var(--blue);
background-image: -webkit-linear-gradient(var(--blue), var(--blue));
background-image: linear-gradient(to ,var(--blue));
color: var(--blue-d1);
box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
background-color: var(--blue-d4);
cursor: default; }
/* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus {
box-shadow: inset 0 1px 2px 1px var(--shadow);
background-image: linear-gradient(#009fe6, #009fe6) !important; }
/* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive {
display: none; }
/* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry {
text-align: center; }
/* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload {
display: none; }
/* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li {
display: block;
margin: calc(var(--baseline)/2) 0; }
/* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button {
font-size: 1em;
display: block;
width: 70%;
margin: 0 auto;
text-align: center; }
/* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .component-tab {
background: var(--white);
position: relative;
border-top: 1px solid #8891a1; }
/* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
.xmodule_edit.xmodule_VideoBlock .component-tab#advanced {
padding: 0;
border: none; }
40 changes: 20 additions & 20 deletions xmodule/assets/tabs/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
Expand All @@ -113,7 +113,7 @@
.comp-subtitles-import-list {
> li {
display: block;
margin: $baseline/2 0;
margin: calc(var(--baseline)/2) 0;
}

.blue-button {
Expand All @@ -128,7 +128,7 @@
}

.component-tab {
background: $white;
background: var(--white);
position: relative;
border-top: 1px solid #8891a1;

Expand Down
Loading

0 comments on commit 9e119c4

Please sign in to comment.