Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Adds fallback values to the xmodule xblocks global css variables #36183

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+351 −352
Open

chore: Adds fallback values to the xmodule xblocks global css variables #36183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
686184b
chore: Adds fallback values to the xmodule xblocks global css variables
farhan Jan 28, 2025
84dbe96
chore: Adds color codes as fallbacks
farhan Jan 28, 2025
566a5c0
chore: Adds constant fallbacks to some css variables
farhan Jan 28, 2025
9d12d66
chore: Adds fallback values of more colors
farhan Jan 28, 2025
ae72d4c
fix: fix the icons paths in the compiled css of ProblemBlockDisplay.css
farhan Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion common/static/sass/_builtin-block-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
--shadow-l1: $shadow-l1;
--sidebar-color: $sidebar-color;
--small-font-size: $small-font-size;
--static-path: $static-path;
--submitted: $submitted;
--success: $success;
--tmg-f2: $tmg-f2;
Expand Down
22 changes: 11 additions & 11 deletions xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section {
position: relative;
padding: 0.5em 1em;
border: 1px solid var(--gray-l3);
border: 1px solid var(--gray-l3, #c8c8c8);
border-radius: 0.5em;
margin-bottom: 0.5em;
}
Expand All @@ -29,7 +29,7 @@
}

.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body {
border-top: 1px solid var(--gray-l3);
border-top: 1px solid var(--gray-l3, #c8c8c8);
margin-top: 0.5em;
padding-top: 0.5em;
}
Expand Down Expand Up @@ -151,20 +151,20 @@
border: 1px solid #333;
border-radius: 1em;
background-color: rgba(0, 0, 0, 0.85);
color: var(--white);
color: var(--white, #fff);
-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));
padding: calc((var(--baseline, 20px) / 4)) calc((var(--baseline, 20px) / 2));
border: none;
}

.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title {
padding: calc((var(--baseline) / 4)) 0;
padding: calc((var(--baseline, 20px) / 4)) 0;
border-bottom: 2px solid #333;
font-weight: bold;
}
Expand All @@ -176,15 +176,15 @@

.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover {
color: inherit;
border: 1px solid var(--gray-l3);
border: 1px solid var(--gray-l3, #c8c8c8);
}

.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));
padding: 0 calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 2));
background-color: transparent;
border-color: transparent;
}
Expand All @@ -199,12 +199,12 @@
}

.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content {
padding: 0 calc((var(--baseline) / 2));
padding: 0 calc((var(--baseline, 20px) / 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;
margin: 0 0 calc((var(--baseline, 20px) / 2)) 0;
max-height: 225px;
overflow: auto;
line-height: normal;
Expand All @@ -213,7 +213,7 @@
.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;
padding: calc((var(--baseline, 20px) / 4)) 0;
margin: 0;
text-align: center;
}
Expand All @@ -226,7 +226,7 @@
left: 50%;
height: 0;
width: 0;
margin-left: calc(-1 * (var(--baseline) / 4));
margin-left: calc(-1 * (var(--baseline, 20px) / 4));
border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, 0.85);
}
40 changes: 20 additions & 20 deletions xmodule/static/css-builtin-blocks/HtmlBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
.xmodule_display.xmodule_CourseInfoBlock h1,
.xmodule_display.xmodule_HtmlBlock h1,
.xmodule_display.xmodule_StaticTabBlock h1 {
color: var(--body-color);
color: var(--body-color, #313131);
font: normal 2em/1.4em var(--font-family-sans-serif);
letter-spacing: 1px;
margin: 0 0 1.416em;
Expand All @@ -24,7 +24,7 @@
color: #646464;
font: normal 1.2em/1.2em var(--font-family-sans-serif);
letter-spacing: 1px;
margin-bottom: calc((var(--baseline) * 0.75));
margin-bottom: calc((var(--baseline, 20px) * 0.75));
-webkit-font-smoothing: antialiased;
}

Expand All @@ -44,7 +44,7 @@
.xmodule_display.xmodule_StaticTabBlock h4,
.xmodule_display.xmodule_StaticTabBlock h5,
.xmodule_display.xmodule_StaticTabBlock h6 {
margin: 0 0 calc((var(--baseline) / 2));
margin: 0 0 calc((var(--baseline, 20px) / 2));
font-weight: 600;
}

Expand Down Expand Up @@ -83,7 +83,7 @@
margin-bottom: 1.416em;
font-size: 1em;
line-height: 1.6em !important;
color: var(--body-color);
color: var(--body-color, #313131);
}

.xmodule_display.xmodule_AboutBlock em,
Expand Down Expand Up @@ -142,14 +142,14 @@
.xmodule_display.xmodule_StaticTabBlock p+p,
.xmodule_display.xmodule_StaticTabBlock ul+p,
.xmodule_display.xmodule_StaticTabBlock ol+p {
margin-top: var(--baseline);
margin-top: var(--baseline, 20px);
}

.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));
margin: 1em calc((var(--baseline, 20px) * 2));
}

.xmodule_display.xmodule_AboutBlock ol,
Expand All @@ -162,7 +162,7 @@
.xmodule_display.xmodule_StaticTabBlock ul {
padding: 0 0 0 1em;
margin: 1em 0;
color: var(--body-color);
color: var(--body-color, #313131);
}

.xmodule_display.xmodule_AboutBlock ol li,
Expand Down Expand Up @@ -210,7 +210,7 @@
.xmodule_display.xmodule_StaticTabBlock a:hover,
.xmodule_display.xmodule_StaticTabBlock a:active,
.xmodule_display.xmodule_StaticTabBlock a:focus {
color: var(--blue);
color: var(--blue, #0075b4);
}

.xmodule_display.xmodule_AboutBlock img,
Expand All @@ -226,7 +226,7 @@
.xmodule_display.xmodule_HtmlBlock pre,
.xmodule_display.xmodule_StaticTabBlock pre {
margin: 1em 0;
color: var(--body-color);
color: var(--body-color, #313131);
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
Expand All @@ -237,7 +237,7 @@
.xmodule_display.xmodule_CourseInfoBlock code,
.xmodule_display.xmodule_HtmlBlock code,
.xmodule_display.xmodule_StaticTabBlock code {
color: var(--body-color);
color: var(--body-color, #313131);
font-family: monospace, serif;
background: none;
padding: 0;
Expand All @@ -248,7 +248,7 @@
.xmodule_display.xmodule_HtmlBlock table,
.xmodule_display.xmodule_StaticTabBlock table {
width: 100%;
margin: var(--baseline) 0;
margin: var(--baseline, 20px) 0;
border-collapse: collapse;
font-size: 16px;
}
Expand All @@ -261,9 +261,9 @@
.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);
margin: var(--baseline, 20px) 0;
padding: calc((var(--baseline, 20px) / 2));
border: 1px solid var(--gray-l3, #c8c8c8);
font-size: 14px;
}

Expand Down Expand Up @@ -314,12 +314,12 @@
.xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon {
position: absolute;
display: block;
padding: calc((var(--baseline) / 4)) 7px;
padding: calc((var(--baseline, 20px) / 4)) 7px;
border-radius: 5px;
opacity: 0.9;
background: var(--white);
color: var(--black);
border: 2px solid var(--black);
background: var(--white, #fff);
color: var(--black, #000);
border: 2px solid var(--black, #000);
}

.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon .label,
Expand Down Expand Up @@ -446,14 +446,14 @@
.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));
margin-right: calc((var(--baseline, 20px) / 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));
margin-left: calc((var(--baseline, 20px) / 4));
}

.xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
Expand Down
16 changes: 8 additions & 8 deletions xmodule/static/css-builtin-blocks/HtmlBlockEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
background-image: linear-gradient(to bottom, #d4dee8, #c9d5e2);
position: relative;
padding: calc(var(--baseline) / 4);
padding: calc(var(--baseline, 20px) / 4);
border-bottom-color: #a5aaaf;
}

Expand All @@ -99,7 +99,7 @@
.xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button {
display: inline-block;
float: left;
padding: 3px calc(var(--baseline) / 2) 5px;
padding: 3px calc(var(--baseline, 20px) / 2) 5px;
margin-left: 7px;
border: 0;
border-radius: 2px;
Expand Down Expand Up @@ -140,7 +140,7 @@
.xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li,
.xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li {
float: left;
margin-right: calc(var(--baseline) / 4);
margin-right: calc(var(--baseline, 20px) / 4);
}

.xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li:last-child,
Expand All @@ -159,9 +159,9 @@
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: var(--transparent, transparent);
background-image: -webkit-linear-gradient(top, var(--transparent, transparent) 87%, rgba(0, 0, 0, 0.06));
background-image: linear-gradient(to bottom, var(--transparent, transparent) 87%, rgba(0, 0, 0, 0.06));
background-color: #e5ecf3;
font-size: 13px;
color: #3c3c3c;
Expand All @@ -172,8 +172,8 @@
.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);
background: var(--white, #fff);
border-bottom-color: var(--white, #fff);
}

.xmodule_edit.xmodule_AboutBlock .html-editor:after,
Expand Down
10 changes: 5 additions & 5 deletions xmodule/static/css-builtin-blocks/LTIBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

.xmodule_display.xmodule_LTIBlock div.problem-progress {
display: inline-block;
padding-left: calc((var(--baseline) / 4));
padding-left: calc((var(--baseline, 20px) / 4));
color: #666;
font-weight: 100;
font-size: 1em;
Expand All @@ -19,8 +19,8 @@

.xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link {
font-size: 14px;
background-color: var(--sidebar-color);
padding: var(--baseline);
background-color: var(--sidebar-color, #f6f6f6);
padding: var(--baseline, 20px);
}

.xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link .lti-link {
Expand Down Expand Up @@ -51,6 +51,6 @@
}

.xmodule_display.xmodule_LTIBlock div.lti div.problem-feedback {
margin-top: calc((var(--baseline) / 4));
margin-bottom: calc((var(--baseline) / 4));
margin-top: calc((var(--baseline, 20px) / 4));
margin-bottom: calc((var(--baseline, 20px) / 4));
}
16 changes: 8 additions & 8 deletions xmodule/static/css-builtin-blocks/PollBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@

.xmodule_display.xmodule_PollBlock div.poll_question h3 {
margin-top: 0;
margin-bottom: calc((var(--baseline) * 0.75));
margin-bottom: calc((var(--baseline, 20px) * 0.75));
color: #fe57a1;
font-size: 1.9em;
}

.xmodule_display.xmodule_PollBlock div.poll_question h3.problem-header div.staff {
margin-top: calc((var(--baseline) * 1.5));
margin-top: calc((var(--baseline, 20px) * 1.5));
font-size: 80%;
}

Expand All @@ -43,7 +43,7 @@
}

.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer {
margin-bottom: var(--baseline);
margin-bottom: var(--baseline, 20px);
}

.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.short {
Expand Down Expand Up @@ -105,7 +105,7 @@
font-weight: bold;
letter-spacing: normal;
line-height: 25.59375px;
margin-bottom: calc((var(--baseline) * 0.75));
margin-bottom: calc((var(--baseline, 20px) * 0.75));
margin: 0;
padding: 0px;
text-align: center;
Expand Down Expand Up @@ -141,9 +141,9 @@
width: 80%;
text-align: left;
min-height: 30px;
margin-left: var(--baseline);
margin-left: var(--baseline, 20px);
height: auto;
margin-bottom: var(--baseline);
margin-bottom: var(--baseline, 20px);
}

.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text.short {
Expand All @@ -152,7 +152,7 @@

.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats {
min-height: 40px;
margin-top: var(--baseline);
margin-top: var(--baseline, 20px);
clear: both;
}

Expand All @@ -170,7 +170,7 @@
border: 1px solid black;
display: inline;
float: left;
margin-right: calc((var(--baseline) / 2));
margin-right: calc((var(--baseline, 20px) / 2));
}

.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar.short {
Expand Down
Loading
Loading