78ef8db40a
AC-727 began changing colors in course content, files and uploads, and when creating a course finished fixing contrast issues on files and uploads page fixed advanced settings and issue with hovering in files and uploads fixed color issues in studio home page and when hovering fixed contrast in updates, pages, textbooks, and group configurations fixed issues when configuring a section of a course in course outline fixed hovering colors to make contrast more visible fixed colors on the green button AC-727
781 lines
16 KiB
SCSS
781 lines
16 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: $white;
|
|
color: $uxpl-blue-base;
|
|
}
|
|
&.active {
|
|
border-bottom: 4px solid $uxpl-blue-base;
|
|
color: $uxpl-blue-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
letter-spacing: 0.1;
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.modal-section-content {
|
|
|
|
.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-s2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 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;
|
|
|
|
&:hover {
|
|
}
|
|
|
|
&.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 {
|
|
margin-bottom: $baseline;
|
|
|
|
.tip {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
// UI: staff lock section
|
|
.edit-staff-lock, .edit-settings-timed-examination {
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|