53cf5638b6
Initial changes to gate section based on completion percentage code refactoring and added evaluation of completion milestone Fixed broken unit tests and added new tests Fixed broken tests and quality violations Fixed Pep8 violation Fixed eslint quality violations Test changes as suggested by reviewer changes after feedbacy from reviewer Update the docstring with suggested changes excluding chapter from the blocks Disallow empty values for min score and min completion Changes afte feedback from UX/Accessibility removed blank line
908 lines
17 KiB
SCSS
908 lines
17 KiB
SCSS
// studio - elements - modal-window
|
|
// ========================
|
|
|
|
@import 'edx-pattern-library-shims/base/variables';
|
|
|
|
// start with the view/body
|
|
[class*="view-"] {
|
|
|
|
// basic modal content
|
|
// ------------------------
|
|
.modal-window {
|
|
@extend %ui-depth3;
|
|
|
|
@include box-sizing(border-box);
|
|
|
|
position: absolute;
|
|
width: 50%;
|
|
box-shadow: 0 0 7px $shadow-d1;
|
|
border-radius: ($baseline/5);
|
|
background-color: $gray-l4;
|
|
padding: 7px;
|
|
|
|
@include text-align(left);
|
|
@include direction();
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
background-color: $white;
|
|
padding: 5%;
|
|
}
|
|
|
|
.title {
|
|
@extend %t-title5;
|
|
@extend %t-demi-strong;
|
|
|
|
margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
|
|
color: $black;
|
|
}
|
|
|
|
.message {
|
|
@extend %t-copy-sub1;
|
|
|
|
margin: 0 0 $baseline 0;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
.message-status {
|
|
padding: 0;
|
|
|
|
&.error {
|
|
border: 0;
|
|
background-color: $white;
|
|
color: $red;
|
|
}
|
|
|
|
&.success {
|
|
border: 0;
|
|
background-color: $white;
|
|
color: $green-d1;
|
|
}
|
|
}
|
|
|
|
// UI: summary messages
|
|
.summary-message {
|
|
margin-bottom: $baseline;
|
|
padding: ($baseline*0.75);
|
|
background: $gray-d3;
|
|
|
|
.icon,
|
|
.copy {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.icon {
|
|
@extend %t-icon4;
|
|
|
|
@include margin-right($baseline/2);
|
|
|
|
color: $white;
|
|
}
|
|
|
|
.copy {
|
|
@extend %t-copy-sub1;
|
|
|
|
max-width: 85%;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// CASE: Warning summary message
|
|
.summary-message-warning {
|
|
border-top: ($baseline/5) solid $color-warning;
|
|
|
|
.icon {
|
|
color: $color-warning;
|
|
}
|
|
}
|
|
|
|
// visual dividers
|
|
.divider-visual {
|
|
margin: ($baseline*0.75) 0;
|
|
border: ($baseline/20) solid $gray-l4;
|
|
}
|
|
|
|
// sections within a modal
|
|
.modal-section {
|
|
margin-bottom: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-tabs-header {
|
|
margin-bottom: $baseline;
|
|
border-bottom: 1px solid $gray-l3;
|
|
|
|
li.settings-tab-buttons {
|
|
display: inline-block;
|
|
margin-right: $baseline;
|
|
|
|
.settings-tab-button {
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
|
|
background-image: none;
|
|
background-color: $white;
|
|
color: $gray-d1;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
border: 0;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
background-color: theme-color("inverse");
|
|
color: theme-color("primary");
|
|
}
|
|
|
|
&.active {
|
|
border-bottom: 4px solid theme-color("primary");
|
|
color: theme-color("primary");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-section-title {
|
|
@extend %t-title6;
|
|
|
|
margin: 0 0 ($baseline/2) 0;
|
|
border-bottom: ($baseline/10) solid $gray-l4;
|
|
padding-bottom: ($baseline/4);
|
|
color: $gray-d2;
|
|
}
|
|
|
|
.modal-subsection-title {
|
|
@extend %t-title8;
|
|
@extend %t-strong;
|
|
|
|
margin-bottom: ($baseline/4);
|
|
text-transform: uppercase;
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.modal-section-content {
|
|
.user-partition-group-checkboxes {
|
|
min-height: 95px;
|
|
}
|
|
|
|
.list-fields,
|
|
.list-actions {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.list-actions {
|
|
@extend %actions-list;
|
|
|
|
margin-left: ($baseline/4);
|
|
|
|
.action-button {
|
|
@extend %t-icon4;
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: need to sync up (alongside general editing mode) with xblocks.scss UI
|
|
.modal-chin,
|
|
.xblock-actions,
|
|
.modal-actions {
|
|
padding: ($baseline*0.75) 2% ($baseline/2) 2%;
|
|
|
|
.action-item {
|
|
@extend %t-action3;
|
|
|
|
display: inline-block;
|
|
margin-right: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button();
|
|
|
|
@extend %t-action3;
|
|
|
|
border-color: $blue-d1;
|
|
color: $white;
|
|
}
|
|
|
|
a {
|
|
color: $blue-d2;
|
|
|
|
&:hover {
|
|
color: $blue-d4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// small modals - quick editors and dialogs
|
|
// ------------------------
|
|
.modal-sm {
|
|
width: 30%;
|
|
min-width: ($baseline*15);
|
|
|
|
.modal-content {
|
|
padding: 5% 4%;
|
|
}
|
|
}
|
|
|
|
// medium modals - forms and interactives
|
|
// ------------------------
|
|
.modal-med {
|
|
width: 40%;
|
|
min-width: ($baseline*18);
|
|
|
|
.modal-content {
|
|
padding: 4%;
|
|
}
|
|
}
|
|
|
|
// large modals - component editors and interactives
|
|
// ------------------------
|
|
.modal-lg {
|
|
width: 70%;
|
|
min-width: ($baseline*27.5);
|
|
height: auto;
|
|
|
|
.modal-content {
|
|
padding: $baseline;
|
|
}
|
|
|
|
&.modal-editor {
|
|
.modal-header {
|
|
margin: ($baseline/4) ($baseline/2);
|
|
|
|
.title {
|
|
width: 47%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.editor-modes {
|
|
width: 48%;
|
|
display: inline-block;
|
|
|
|
@include text-align(right);
|
|
|
|
.action-item {
|
|
display: inline-block;
|
|
margin-left: ($baseline/2);
|
|
|
|
.editor-button,
|
|
.settings-button {
|
|
@extend %btn-secondary-gray;
|
|
@extend %t-copy-sub1;
|
|
|
|
border: 0;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
text-transform: uppercase;
|
|
|
|
&.is-set {
|
|
background-color: $gray-d1;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
height: 435px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// specific modal overrides
|
|
// ------------------------
|
|
|
|
// Move XBlock Modal
|
|
.move-modal {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
|
|
@include transform(translate(-50%,-50%));
|
|
}
|
|
|
|
.move-xblock-modal {
|
|
.modal-content {
|
|
padding: ($baseline/2) ($baseline/2) ($baseline*1.25) ($baseline/2);
|
|
}
|
|
|
|
.ui-loading {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.modal-actions .action-move.is-disabled {
|
|
border: 1px solid $gray-l1 !important;
|
|
background: $gray-l1 !important;
|
|
}
|
|
}
|
|
|
|
// upload modal
|
|
.assetupload-modal {
|
|
.status-upload {
|
|
margin-top: $baseline;
|
|
}
|
|
}
|
|
|
|
|
|
// component editor
|
|
.modal-window {
|
|
.CodeMirror {
|
|
height: 365px;
|
|
}
|
|
|
|
.CodeMirror-advanced {
|
|
height: 435px;
|
|
}
|
|
|
|
.wrapper-comp-settings {
|
|
.list-input {
|
|
&.settings-list {
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// xblock custom actions
|
|
.modal-window .editor-with-buttons {
|
|
margin-bottom: ($baseline*3);
|
|
|
|
// temporary fix until xblock structure is set
|
|
&.wrapper-comp-settings .list-input.settings-list {
|
|
height: 375px;
|
|
}
|
|
|
|
// TODO: need to sync up (alongside general editing mode) with xblocks.scss UI
|
|
.xblock-actions {
|
|
background-color: $gray-l4;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// MODAL TYPE: component - video modal (includes special overrides for xblock-related editing view)
|
|
.modal-lg.modal-type-video {
|
|
.modal-content {
|
|
box-shadow: none;
|
|
height: auto;
|
|
overflow-y: hidden;
|
|
|
|
// modal within a modal
|
|
.wrapper-modal-window-assetupload {
|
|
.modal-window {
|
|
top: 10% !important;
|
|
left: 10% !important;
|
|
}
|
|
|
|
.modal-header {
|
|
margin: ($baseline/2) 2%;
|
|
|
|
.title {
|
|
width: auto;
|
|
margin: 0 0 ($baseline/4) 0;
|
|
}
|
|
|
|
.editor-modes {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
padding: 2%;
|
|
|
|
.message {
|
|
margin: 0 ($baseline/4) ($baseline/4) ($baseline/4);
|
|
}
|
|
|
|
input[type="file"] {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.modal-actions {
|
|
padding: ($baseline/2) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xmodule_edit.xmodule_VideoDescriptor .editor-with-tabs {
|
|
.edit-header {
|
|
border: 0;
|
|
background-color: $gray-l4;
|
|
padding: ($baseline/2);
|
|
|
|
.component-name {
|
|
@extend %t-title5;
|
|
@extend %t-strong;
|
|
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 48%;
|
|
margin-left: ($baseline/2);
|
|
color: $black;
|
|
|
|
em {
|
|
color: inherit;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.editor-tabs {
|
|
display: inline-block;
|
|
width: 48%;
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
padding: 0;
|
|
text-align: right;
|
|
|
|
.inner_tab_wrap {
|
|
padding: 0;
|
|
|
|
a.tab {
|
|
@extend %btn-secondary-gray;
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
|
|
background-image: none;
|
|
box-shadow: none;
|
|
border: 0;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
text-transform: uppercase;
|
|
|
|
&.current {
|
|
background-color: $gray-d1;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-wrapper {
|
|
height: ($baseline*24);
|
|
overflow-y: scroll;
|
|
border: 1px solid $gray-l2;
|
|
|
|
.component-tab {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-window-overlay {
|
|
@extend %ui-depth3;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $black;
|
|
opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
}
|
|
|
|
// MODAL TYPE: component - visibility modal
|
|
.xblock-visibility_view {
|
|
|
|
// We don't wish the dialog to resize for the common case of 2 groups.
|
|
min-height: 190px;
|
|
|
|
.visibility-header {
|
|
padding-bottom: $baseline;
|
|
margin-bottom: 0;
|
|
color: $gray-d3;
|
|
}
|
|
|
|
.current-visibility-title {
|
|
font-weight: font-weight(semi-bold);
|
|
|
|
.icon {
|
|
@include margin-right($baseline/8);
|
|
}
|
|
}
|
|
|
|
.group-select-title {
|
|
font-weight: font-weight(semi-bold);
|
|
font-size: inherit;
|
|
}
|
|
|
|
.partition-visibility {
|
|
padding-top: $baseline;
|
|
}
|
|
|
|
// UI: form fields
|
|
.partition-group-control {
|
|
padding-top: ($baseline/2);
|
|
|
|
.field {
|
|
margin-top: ($baseline/4);
|
|
|
|
label {
|
|
@include margin-left($baseline/4);
|
|
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// CASE: content or enrollment group has been removed
|
|
.partition-group-visibility.was-removed {
|
|
.input-checkbox:checked ~ label {
|
|
color: $error-color;
|
|
}
|
|
|
|
.note {
|
|
@extend %t-copy-sub2;
|
|
@extend %t-regular;
|
|
|
|
display: block;
|
|
color: $error-color;
|
|
}
|
|
}
|
|
|
|
// CASE: no groups configured for visibility
|
|
.is-not-configured {
|
|
@extend %no-content;
|
|
|
|
padding: ($baseline);
|
|
|
|
@include text-align(left); // reset for %no-content's default styling
|
|
|
|
.title {
|
|
@extend %t-title6;
|
|
|
|
font-weight: 600; // needed for poorly scoped .title rule in modals
|
|
margin: 0 0 ($baseline/2) 0; // needed for poorly scoped .title rule in modals
|
|
}
|
|
|
|
.copy {
|
|
@extend %t-copy-sub1;
|
|
|
|
p {
|
|
@extend %wipe-last-child;
|
|
|
|
margin-bottom: $baseline;
|
|
}
|
|
}
|
|
|
|
&.has-actions {
|
|
.actions {
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
.action {
|
|
@include margin-left(0); // reset for %no-content's default styling
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MODAL TYPE: outline - edit item settings
|
|
.wrapper-modal-window-bulkpublish-section,
|
|
.wrapper-modal-window-bulkpublish-subsection,
|
|
.wrapper-modal-window-bulkpublish-unit,
|
|
.course-outline-modal {
|
|
.no-descriptive-text {
|
|
display: block;
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
.list-fields {
|
|
.field-message {
|
|
@extend %t-copy-sub1;
|
|
|
|
color: $gray-d1;
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
label {
|
|
@extend %t-title6;
|
|
|
|
font-weight: font-weight(semi-bold);
|
|
}
|
|
|
|
.field {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
@include margin-right($baseline/2);
|
|
|
|
margin-bottom: ($baseline/4);
|
|
|
|
label {
|
|
@include font-size(16);
|
|
|
|
font-weight: font-weight(semi-bold);
|
|
|
|
@include transition(color $tmg-f3 ease-in-out 0s);
|
|
|
|
margin-bottom: ($baseline/4);
|
|
|
|
&.is-focused {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
|
|
input,
|
|
textarea {
|
|
@extend %t-copy-base;
|
|
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: ($baseline/2);
|
|
|
|
// CASE: long length
|
|
&.long {
|
|
width: 100%;
|
|
}
|
|
|
|
// CASE: short length
|
|
&.short {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
// CASE: specific release + due times/dates
|
|
.start-date,
|
|
.start-time,
|
|
.due-date,
|
|
.due-time {
|
|
width: ($baseline*7);
|
|
}
|
|
|
|
input.percentage {
|
|
display: inline-block;
|
|
width: ($baseline*3);
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub1;
|
|
|
|
@include transition(color, 0.15s, ease-in-out);
|
|
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.tip-warning {
|
|
color: $gray-d2;
|
|
}
|
|
}
|
|
|
|
// CASE: type-based input
|
|
.field-text {
|
|
|
|
// TODO: refactor the _forms.scss partial to allow for this area to inherit from it
|
|
label,
|
|
input,
|
|
textarea {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// CASE: select input
|
|
.field-select {
|
|
.label,
|
|
.input {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.label {
|
|
@include margin-right($baseline/2);
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
}
|
|
|
|
// CASE: checkbox input
|
|
.field-checkbox {
|
|
.label,
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// UI: grading section
|
|
.edit-settings-grading {
|
|
.grading-type {
|
|
margin-bottom: $baseline;
|
|
}
|
|
}
|
|
|
|
.edit-staff-lock,
|
|
.edit-content-visibility,
|
|
.edit-unit-access {
|
|
margin-bottom: $baseline;
|
|
|
|
.tip {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
// UI: staff lock section
|
|
.edit-staff-lock,
|
|
.edit-settings-timed-examination,
|
|
.edit-unit-access {
|
|
.checkbox-cosmetic .input-checkbox {
|
|
@extend %cont-text-sr;
|
|
|
|
// CASE: unchecked
|
|
~ .tip-warning {
|
|
display: block;
|
|
}
|
|
|
|
// CASE: checked
|
|
&:checked {
|
|
~ .tip-warning {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// needed to override poorly scoped margin-bottom on any label element in a view (from _forms.scss)
|
|
.checkbox-cosmetic .label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.note {
|
|
@extend %t-copy-sub2;
|
|
@extend %t-regular;
|
|
|
|
margin: 14px 0 0 21px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// UI: timed and proctored exam section
|
|
.edit-settings-timed-examination {
|
|
margin-bottom: $baseline;
|
|
|
|
.checkbox-cosmetic .input-checkbox {
|
|
@extend %cont-text-sr;
|
|
|
|
// CASE: unchecked
|
|
~ .tip-warning {
|
|
display: block;
|
|
}
|
|
|
|
// CASE: checked
|
|
&:checked {
|
|
~ .tip-warning {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// needed to override poorly scoped margin-bottom on any label element in a view (from _forms.scss)
|
|
.checkbox-cosmetic .label {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// UI: Access settings section
|
|
.edit-settings-access {
|
|
.gating-prereq {
|
|
margin-bottom: 10px;
|
|
.list-fields .field {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-unit-access,
|
|
.edit-staff-lock {
|
|
.modal-section-content {
|
|
@include font-size(16);
|
|
|
|
.group-select-title {
|
|
font-weight: font-weight(semi-bold);
|
|
font-size: inherit;
|
|
margin-bottom: ($baseline/4);
|
|
|
|
.user-partition-select {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.partition-group-directions {
|
|
padding-top: ($baseline/2);
|
|
}
|
|
|
|
.label {
|
|
&.deleted {
|
|
color: $red;
|
|
}
|
|
|
|
font-size: inherit;
|
|
margin-left: ($baseline/4);
|
|
}
|
|
|
|
.deleted-group-message {
|
|
display: block;
|
|
color: $red;
|
|
|
|
@include font-size(14);
|
|
}
|
|
|
|
.field {
|
|
margin-top: ($baseline/4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-unit-access,
|
|
.edit-staff-lock {
|
|
.modal-section-content {
|
|
@include font-size(16);
|
|
|
|
.group-select-title {
|
|
font-weight: font-weight(semi-bold);
|
|
font-size: inherit;
|
|
margin-bottom: ($baseline/4);
|
|
|
|
.user-partition-select {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.partition-group-directions {
|
|
padding-top: ($baseline/2);
|
|
}
|
|
|
|
.label {
|
|
&.deleted {
|
|
color: $red;
|
|
}
|
|
|
|
font-size: inherit;
|
|
|
|
@include margin-left($baseline/4);
|
|
}
|
|
|
|
.deleted-group-message {
|
|
display: block;
|
|
color: $red;
|
|
|
|
@include font-size(14);
|
|
}
|
|
|
|
.field {
|
|
margin-top: ($baseline/4);
|
|
}
|
|
}
|
|
}
|
|
}
|