861 lines
18 KiB
SCSS
861 lines
18 KiB
SCSS
@import 'cms/theme/variables-v1';
|
|
@import 'elements/course-unit-mfe-iframe';
|
|
|
|
html {
|
|
body {
|
|
min-width: 800px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
[class*="view-"] .wrapper {
|
|
.inner-wrapper {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.wrapper-xblock {
|
|
background-color: $transparent;
|
|
border-radius: 6px;
|
|
border: none;
|
|
|
|
&:hover {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.xblock-header-primary {
|
|
padding: ($baseline * 1.2) ($baseline * 1.2) ($baseline / 1.67);
|
|
border-bottom: none;
|
|
|
|
.header-details .xblock-display-name {
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
font-weight: 700;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
.xblock-header-secondary {
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
.actions-list .action-item .action-button {
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.level-page .xblock-message {
|
|
padding: ($baseline * .75) ($baseline * 1.2);
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
&.information {
|
|
color: $text-color;
|
|
background-color: $xblock-message-info-bg;
|
|
border-color: $xblock-message-info-border-color;
|
|
}
|
|
|
|
&.validation.has-warnings {
|
|
color: $black;
|
|
background-color: $xblock-message-warning-bg;
|
|
border-color: $xblock-message-warning-border-color;
|
|
border-top-width: 1px;
|
|
|
|
.icon {
|
|
color: $xblock-message-warning-border-color;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.xblock-author_view-library_content > .wrapper-xblock-message .xblock-message {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
border-radius: 4px;
|
|
padding: ($baseline * 1.2);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
|
|
margin-bottom: ($baseline * 1.4);
|
|
}
|
|
|
|
&.level-element {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
|
|
margin: 0 0 ($baseline * 1.4) 0;
|
|
}
|
|
|
|
&.level-element .xblock-header-primary {
|
|
background-color: $white;
|
|
}
|
|
|
|
&.level-element .xblock-render {
|
|
background: $white;
|
|
margin: 0;
|
|
padding: $baseline;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.wrapper-xblock .header-actions .actions-list {
|
|
.action-actions-menu:last-of-type .nav-sub {
|
|
right: 120px;
|
|
}
|
|
|
|
.action-item .action-button {
|
|
@extend %button-styles;
|
|
|
|
color: $primary;
|
|
|
|
.fa-ellipsis-v {
|
|
font-size: $base-font-size;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
color: $white;
|
|
border-color: $transparent;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px $transparent;
|
|
background-color: $transparent;
|
|
box-shadow: inset 0 0 0 2px $primary;
|
|
color: $primary;
|
|
border-color: $transparent;
|
|
}
|
|
|
|
&.manage-tags-button {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xblock-header-primary .header-actions .nav-dd .nav-sub {
|
|
border: 1px solid rgba(0, 0, 0, .15);
|
|
border-radius: 6px;
|
|
padding: ($baseline / 2) 0;
|
|
min-width: 288px;
|
|
right: 90px;
|
|
|
|
.nav-item {
|
|
border-bottom: none;
|
|
color: $dark;
|
|
font-size: $base-font-size;
|
|
|
|
a {
|
|
padding: ($baseline / 2) ($baseline / 1.25);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #f2f0ef;
|
|
color: $dark;
|
|
}
|
|
|
|
a:hover {
|
|
color: $dark;
|
|
}
|
|
|
|
a:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $primary;
|
|
|
|
a {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-xblock-modal select {
|
|
background-color: $white;
|
|
width: 100%;
|
|
}
|
|
|
|
&.wrapper-modal-window .modal-window .modal-actions a {
|
|
color: $text-color;
|
|
background-color: $transparent;
|
|
border-color: $transparent;
|
|
box-shadow: none;
|
|
font-weight: 500;
|
|
border: 1px solid $transparent;
|
|
padding: ($baseline / 2) ($baseline / 1.25);
|
|
font-size: $base-font-size;
|
|
line-height: 20px;
|
|
border-radius: $btn-border-radius;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background-image: none;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background-color: $light-background-color;
|
|
border-color: $transparent;
|
|
color: $text-color;
|
|
}
|
|
|
|
&:focus {
|
|
background: $transparent;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.modal-window.modal-editor, &.xblock-iframe-content {
|
|
background-color: $white;
|
|
border-radius: 6px;
|
|
|
|
a {
|
|
color: #00688d;
|
|
}
|
|
|
|
select {
|
|
&:focus {
|
|
background-color: $white;
|
|
color: $text-color;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
input:not([type="radio"], [type="checkbox"], [type="submit"]) {
|
|
@extend %input-styles;
|
|
|
|
line-height: 20px;
|
|
height: 44px;
|
|
|
|
&:hover {
|
|
border: solid 1px #002121;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-color;
|
|
background-color: $white;
|
|
border-color: $primary;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
#student_training_settings_editor .openassessment_training_example .openassessment_training_example_body
|
|
.openassessment_training_example_essay_wrapper textarea {
|
|
@extend %input-styles;
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
textarea {
|
|
@extend %input-styles;
|
|
|
|
box-shadow: none;
|
|
|
|
&#poll-question-editor,
|
|
&#poll-feedback-editor {
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
color: $text-color;
|
|
background-color: $white;
|
|
border-color: $primary;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: solid 1px #002121;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-color;
|
|
background-color: $white;
|
|
border-color: $primary;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
.tip.setting-help {
|
|
color: $border-color;
|
|
font-size: 14px;
|
|
line-height: $base-font-size;
|
|
}
|
|
|
|
label,
|
|
.label.setting-label {
|
|
font-size: $base-font-size;
|
|
line-height: 28px;
|
|
color: $text-color;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.title.modal-window-title {
|
|
color: $black;
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.xblock-actions {
|
|
background-color: $white;
|
|
|
|
.action-button {
|
|
background-color: $transparent;
|
|
border: 1px solid $transparent;
|
|
padding: ($baseline / 2.22) ($baseline / 1.25);
|
|
border-radius: $input-border-radius;
|
|
font-weight: 400;
|
|
color: #00688d;
|
|
font-size: $base-font-size;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.openassessment_save_button,
|
|
.save-button,
|
|
.action-save,
|
|
.continue-button {
|
|
color: $white;
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
box-shadow: none;
|
|
font-weight: 500;
|
|
border: 1px solid $transparent;
|
|
padding: ($baseline / 2) ($baseline / 1.25);
|
|
font-size: $base-font-size;
|
|
line-height: 20px;
|
|
border-radius: $btn-border-radius;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background-image: none;
|
|
height: auto;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background: darken($primary, 5%);
|
|
border-color: $transparent;
|
|
color: $white;
|
|
}
|
|
|
|
&:focus {
|
|
background: $primary;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.openassessment_cancel_button,
|
|
.action-cancel,
|
|
.cancel-button {
|
|
color: $text-color;
|
|
background-color: $transparent;
|
|
border-color: $transparent;
|
|
box-shadow: none;
|
|
font-weight: 500;
|
|
border: 1px solid $transparent;
|
|
padding: ($baseline / 2) ($baseline / 1.25);
|
|
font-size: $base-font-size;
|
|
line-height: 20px;
|
|
border-radius: $btn-border-radius;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background-image: none;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background-color: $light-background-color;
|
|
border-color: $transparent;
|
|
color: $text-color;
|
|
}
|
|
|
|
&:focus {
|
|
background: $transparent;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-lg.modal-window.confirm.openassessment_modal_window {
|
|
height: 635px;
|
|
}
|
|
|
|
// Additions for the xblock editor on the Library Authoring
|
|
&.xblock-iframe-content {
|
|
height: 100%;
|
|
|
|
// Reset the max-height to allow the settings list to grow
|
|
.wrapper-comp-settings .list-input.settings-list {
|
|
max-height: unset;
|
|
}
|
|
|
|
// For Google Docs and Google Calendar xblock editor
|
|
.google-edit-wrapper .xblock-inputs {
|
|
position: unset;
|
|
overflow-y: unset;
|
|
}
|
|
|
|
.xblock-actions {
|
|
padding: ($baseline*0.75) 2% ($baseline/2) 2%;
|
|
position: sticky;
|
|
bottom: 0;
|
|
|
|
.action-item {
|
|
@extend %t-action3;
|
|
|
|
display: inline-block;
|
|
margin-right: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xblock-v1-studio_view {
|
|
height: 100%;
|
|
|
|
.editor-with-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
|
|
.list-input {
|
|
height: 90vh;
|
|
}
|
|
}
|
|
|
|
&.xmodule_DoneXBlock {
|
|
margin-top: 60px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.xblock-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.studio-xblock-wrapper::marker {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
.view-container .content-primary {
|
|
background-color: $transparent;
|
|
width: 100%;
|
|
}
|
|
|
|
.wrapper-content.wrapper {
|
|
padding: $baseline / 4;
|
|
background-color: #f8f7f6;
|
|
}
|
|
|
|
.btn-default.action-edit.title-edit-button {
|
|
@extend %button-styles;
|
|
|
|
position: relative;
|
|
top: -7px;
|
|
|
|
.fa-pencil {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
@extend %icon-position;
|
|
|
|
content: '';
|
|
position: absolute;
|
|
background-color: $black;
|
|
mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
border-color: $transparent;
|
|
|
|
&::before {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px $transparent;
|
|
background-color: $transparent;
|
|
box-shadow: inset 0 0 0 2px $primary;
|
|
border-color: $transparent;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
border-color: $transparent;
|
|
|
|
&::before {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.library-sync-button {
|
|
.action-button-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.action-edit {
|
|
.action-button-text {
|
|
display: none;
|
|
}
|
|
|
|
.edit-button.action-button {
|
|
@extend %button-styles;
|
|
|
|
position: relative;
|
|
|
|
.fa-pencil {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
@extend %icon-position;
|
|
|
|
content: '';
|
|
position: absolute;
|
|
background-color: $black;
|
|
mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
border-color: $transparent;
|
|
|
|
&::before {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px $transparent;
|
|
background-color: $transparent;
|
|
box-shadow: inset 0 0 0 2px $primary;
|
|
border-color: $transparent;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
border-color: $transparent;
|
|
|
|
&::before {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-dd.ui-right .nav-sub {
|
|
&::before,
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
body [class*="view-"] .openassessment_editor_buttons.xblock-actions {
|
|
padding: 15px 2% 3px 2%;
|
|
}
|
|
|
|
[class*="view-"] {
|
|
.modal-lg {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.modal-lg.modal-editor .modal-header .editor-modes .action-item {
|
|
.editor-button,
|
|
.settings-button {
|
|
@extend %light-button;
|
|
}
|
|
}
|
|
|
|
.wrapper.wrapper-modal-window .modal-window .modal-actions .action-primary {
|
|
@extend %primary-button;
|
|
}
|
|
|
|
#openassessment-editor {
|
|
#oa_basic_settings_editor #openassessment_title_editor_wrapper input, input[type=number] {
|
|
width: 48%;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*="view-"] div.wrapper-comp-settings {
|
|
.list-input.settings-list {
|
|
input:not([type="file"]):not([type="number"]),
|
|
select {
|
|
width: 48%;
|
|
}
|
|
|
|
.metadata-list-enum .create-setting {
|
|
@extend %modal-actions-button;
|
|
|
|
background-color: $primary;
|
|
color: $white;
|
|
border: 1px solid $primary;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: darken($primary, 5%);
|
|
border-color: #2d494e;
|
|
}
|
|
|
|
&:focus {
|
|
background: $primary;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-input.settings-list {
|
|
.field.comp-setting-entry.is-set .setting-input {
|
|
color: $text-color;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid $border-color;
|
|
border-radius: $input-border-radius;
|
|
color: $text-color;
|
|
height: 44px;
|
|
|
|
&:focus {
|
|
background-color: $white;
|
|
color: $text-color;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
.setting-label {
|
|
font-size: $base-font-size;
|
|
line-height: 28px;
|
|
color: $text-color;
|
|
font-weight: 400;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 45%;
|
|
}
|
|
|
|
.action.setting-clear {
|
|
@extend %button-styles;
|
|
|
|
background-color: $transparent;
|
|
color: $primary;
|
|
border: none;
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
color: $white;
|
|
border: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px $transparent;
|
|
background-color: $transparent;
|
|
box-shadow: inset 0 0 0 2px $primary;
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-input.settings-list .metadata-list-enum .remove-setting .fa-times-circle {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
select {
|
|
border: 1px solid $border-color;
|
|
border-radius: $input-border-radius;
|
|
color: $text-color;
|
|
height: 44px;
|
|
padding: ($baseline / 2) ($baseline / 1.25);
|
|
|
|
&:focus {
|
|
background-color: $white;
|
|
color: $text-color;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px $primary;
|
|
}
|
|
}
|
|
|
|
.xblock {
|
|
.xblock--drag-and-drop--editor .tab {
|
|
background-color: $white;
|
|
display: inline-block;
|
|
}
|
|
|
|
#openassessment-editor #oa_rubric_editor_wrapper {
|
|
.openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings label input,
|
|
.openassessment_criterion_option .openassessment_criterion_option_name_wrapper label,
|
|
.openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper label,
|
|
.openassessment_criterion .openassessment_criterion_feedback_wrapper label,
|
|
#openassessment_rubric_feedback_wrapper label,
|
|
.openassessment_criterion_option .openassessment_criterion_option_point_wrapper label,
|
|
.openassessment_criterion_option .openassessment_criterion_option_name_wrapper label input,
|
|
.openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt,
|
|
#openassessment_rubric_feedback_wrapper textarea,
|
|
.openassessment_criterion_option
|
|
.openassessment_criterion_option_explanation_wrapper label textarea,
|
|
input[type=number] {
|
|
font-size: $base-font-size;
|
|
background-color: $white;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
#openassessment-editor {
|
|
#openassessment_editor_header .editor_tabs .oa_editor_tab {
|
|
@extend %light-button;
|
|
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#openassessment_editor_header,
|
|
.openassessment_tab_instructions {
|
|
background-color: $white;
|
|
}
|
|
|
|
#oa_schedule_editor_wrapper #dates_config_new_badge {
|
|
background-color: $primary;
|
|
}
|
|
|
|
.openassessment_description {
|
|
font-size: 14px;
|
|
line-height: $base-font-size;
|
|
}
|
|
|
|
#oa_rubric_editor_wrapper .openassessment_criterion
|
|
.openassessment_criterion_basic_editor .comp-setting-entry
|
|
.wrapper-comp-settings label {
|
|
font-size: $base-font-size;
|
|
line-height: 28px;
|
|
color: $text-color;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#oa_rubric_editor_wrapper .openassessment_criterion_option
|
|
.openassessment_criterion_option_point_wrapper label input {
|
|
min-width: 70px;
|
|
font-size: 18px;
|
|
height: 44px;
|
|
}
|
|
|
|
.openassessment_assessment_module_settings_editor:hover {
|
|
border-color: $primary;
|
|
|
|
.drag-handle {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
.setting-help,
|
|
.ti.wrapper-comp-settings .list-input.settings-list .setting-help {
|
|
color: $border-color;
|
|
font-size: 14px;
|
|
line-height: $base-font-size;
|
|
}
|
|
}
|
|
|
|
.xblock--drag-and-drop--editor .btn,
|
|
#openassessment-editor .openassessment_container_add_button,
|
|
#openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_add_option,
|
|
#student_training_settings_editor .openassessment_add_training_example {
|
|
@extend %primary-button;
|
|
}
|
|
}
|
|
|
|
.xblock-header:not(.xblock-header-library_content, .xblock-header-split_test) .xblock-header-primary {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 83px;
|
|
left: 25px;
|
|
width: 95%;
|
|
height: 1px;
|
|
background-color: #eae6e5;
|
|
}
|
|
}
|
|
|
|
.ui-loading {
|
|
background-color: #f8f7f6;
|
|
box-shadow: none;
|
|
|
|
.spin,
|
|
.copy {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.wrapper-xblock .xblock-header-primary .header-actions .wrapper-nav-sub {
|
|
z-index: $zindex-dropdown;
|
|
}
|
|
|
|
.xblock-studio_view-drag-and-drop-v2 .xblock--drag-and-drop--editor {
|
|
.zone-align-select,
|
|
.item-styles-form input,
|
|
.drag-builder textarea,
|
|
.target-image-form textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.target-image-form input[type="text"] {
|
|
width: 100%;
|
|
|
|
&.background-url {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&.autozone-layout {
|
|
&.autozone-layout-cols,
|
|
&.autozone-layout-rows {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
&.autozone-size {
|
|
&.autozone-size-width,
|
|
&.autozone-size-height {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feedback-tab input:not([type=checkbox]),
|
|
.xblock--drag-and-drop--editor .feedback-tab select {
|
|
width: 100%;
|
|
}
|
|
}
|