900 lines
17 KiB
SCSS
900 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|