`xmodule_assets` generated a series of SCSS "entrypoint"
files, where each entrypoint file imported from the
SCSS "sources" in xmodule/css.
This process was more complicated up until very
recently (see PRs in issue linked below for more
context). Now that the process is simpler, though,
there is no reason to generate the SCSS entrypoints;
we can just commit them to the repository instead!
So, we go from this:
# GENERATED: SCSS entrypoints files for CMS
common/static/xmodule/descriptors:
AboutBlockStudio.scss
AnnotatableBlockStudio.scss
...
# GENERATED: SCSS entrypoints files for LMS
common/static/xmodule/modules:
AboutBlockPreview.scss
AnnotatableBlockPreview.scss
...
# VERSION CONTROLLED: SCSS source files
xmodule/css:
annotatable/...
capa/...
...
to this:
# VERSION CONTROLLED: All XModule SCSS
xmodule/static/sass:
# Source files
include:
annotatable/...
capa/...
...
# CMS entrypoint files
cms:
AboutBlockStudio.scss
AnnotatableBlockStudio.scss
...
# LMS source files
lms:
AboutBlockPreview.scss
AnnotatableBlockPreview.scss
...
Also, we are able to remove all SCSS-related logic from the
`xmodule_assets` script and from the `HTMLSnippet` class.
XModule JS assets still need processing, but we will address
those in a separate series of PRs.
Part of: https://github.com/openedx/edx-platform/issues/32292
84 lines
1.6 KiB
SCSS
84 lines
1.6 KiB
SCSS
@import 'vendor/bi-app/bi-app-ltr';
|
|
@import 'bourbon/bourbon';
|
|
@import 'lms/theme/variables';
|
|
@import 'bootstrap/scss/variables';
|
|
@import 'cms/theme/variables-v1';
|
|
@import 'mixins';
|
|
|
|
// This is shared CSS between the xmodule problem editor and the xmodule HTML editor.
|
|
.editor {
|
|
position: relative;
|
|
|
|
.row {
|
|
position: relative;
|
|
}
|
|
|
|
.editor-bar {
|
|
@include clearfix();
|
|
@include linear-gradient(top, #d4dee8, #c9d5e2);
|
|
|
|
position: relative;
|
|
padding: ($baseline/4);
|
|
border-bottom-color: #a5aaaf;
|
|
|
|
button {
|
|
display: inline-block;
|
|
|
|
@include float(left);
|
|
|
|
padding: 3px ($baseline/2) 5px;
|
|
margin-left: 7px;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
|
|
.icon {
|
|
height: 21px;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: rgba(255, 255, 255, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-tabs {
|
|
position: absolute;
|
|
top: 10px;
|
|
|
|
@include right(10px);
|
|
@include text-align(left);
|
|
@include direction();
|
|
|
|
li {
|
|
@include float(left);
|
|
@include margin-right($baseline/4);
|
|
|
|
&:last-child {
|
|
@include margin-right(0);
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
display: block;
|
|
height: 24px;
|
|
padding: 7px 20px 3px;
|
|
border: 1px solid #a5aaaf;
|
|
border-radius: 3px 3px 0 0;
|
|
|
|
@include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
|
|
|
|
background-color: #e5ecf3;
|
|
font-size: 13px;
|
|
color: #3c3c3c;
|
|
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
|
|
|
|
&.current {
|
|
background: $white;
|
|
border-bottom-color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|