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
1209 lines
25 KiB
SCSS
1209 lines
25 KiB
SCSS
// studio - views - course settings
|
|
// ====================
|
|
// Table of Contents
|
|
// * +Settings - Base / All
|
|
// * +Settings - Licenses
|
|
|
|
// +Settings - Base / All
|
|
// ====================
|
|
.view-settings {
|
|
@include text-align(left);
|
|
@include direction();
|
|
|
|
.content-primary, .content-supplementary {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
.content-primary {
|
|
@extend %ui-window;
|
|
@extend .ui-col-wide;
|
|
padding: $baseline ($baseline*1.5);
|
|
}
|
|
|
|
// messages - should be synced up with global messages in the future
|
|
.message {
|
|
@extend %t-copy-sub1;
|
|
display: block;
|
|
}
|
|
|
|
.message-status {
|
|
@include border-top-radius(2px);
|
|
@include box-sizing(border-box);
|
|
@extend %t-strong;
|
|
display: none;
|
|
border-bottom: 2px solid $yellow;
|
|
margin: 0 0 $baseline 0;
|
|
padding: ($baseline/2) $baseline;
|
|
background: $paleYellow;
|
|
|
|
.text {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.error {
|
|
border-color: shade($red, 50%);
|
|
background: tint($red, 20%);
|
|
color: $white;
|
|
}
|
|
|
|
&.confirm {
|
|
border-color: shade($green, 50%);
|
|
background: tint($green, 20%);
|
|
color: $white;
|
|
}
|
|
|
|
&.is-shown {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// notices - used currently for edx mktg
|
|
.notice-workflow {
|
|
margin-top: ($baseline);
|
|
}
|
|
|
|
// specific fields - settings details
|
|
.settings-details {
|
|
|
|
// course details that should appear more like content than elements to change
|
|
.is-not-editable {
|
|
|
|
label {
|
|
|
|
}
|
|
|
|
input, textarea {
|
|
@extend %t-copy-lead1;
|
|
@extend %t-strong;
|
|
box-shadow: none;
|
|
border: none;
|
|
background: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// in form - elements
|
|
.group-settings {
|
|
margin: 0 0 ($baseline*2) 0;
|
|
|
|
header {
|
|
@include clearfix();
|
|
|
|
.title-2 {
|
|
width: flex-grid(4, 9);
|
|
margin: 0;
|
|
@include margin-right(flex-gutter());
|
|
@include float(left);
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
width: flex-grid(5, 9);
|
|
@include float(right);
|
|
margin-top: ($baseline/2);
|
|
@include text-align(right);
|
|
color: $gray-d1;
|
|
}
|
|
}
|
|
|
|
// basic layout/elements
|
|
.title-2 {
|
|
|
|
}
|
|
|
|
.title-3 {
|
|
|
|
}
|
|
|
|
// in form -UI hints/tips/messages
|
|
.header-help {
|
|
margin: 0 0 $baseline 0;
|
|
}
|
|
|
|
.instructions {
|
|
@extend %t-copy-sub1;
|
|
margin: 0 0 $baseline 0;
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
@include transition(color $tmg-f2 ease-in-out 0s);
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
color: $gray-d1;
|
|
}
|
|
|
|
.tip-inline {
|
|
display: inline;
|
|
@include margin-left($baseline/4);
|
|
}
|
|
|
|
.message-error {
|
|
@extend %t-copy-sub1;
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
margin-bottom: ($baseline/2);
|
|
color: $red;
|
|
}
|
|
|
|
// buttons
|
|
.remove-item {
|
|
@include white-button;
|
|
@extend %t-action3;
|
|
@extend %t-strong;
|
|
}
|
|
|
|
.new-button {
|
|
@extend %t-action3;
|
|
}
|
|
|
|
// form basics
|
|
.list-input {
|
|
@extend %cont-no-list;
|
|
|
|
.show-data{
|
|
.heading{
|
|
border: 1px solid #E0E0E0;
|
|
padding: 5px 15px;
|
|
margin-top: 5px;
|
|
}
|
|
.div-grade-requirements{
|
|
border: 1px solid #E0E0E0;
|
|
border-top: none;
|
|
padding: 10px 15px;
|
|
label{font-weight: 600;}
|
|
input#entrance-exam-minimum-score-pct{
|
|
height: 40px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#heading-entrance-exam{
|
|
font-weight: 600;
|
|
}
|
|
|
|
label[for="entrance-exam-enabled"] {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.field {
|
|
margin: 0 0 ($baseline*2) 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.required {
|
|
|
|
label {
|
|
@extend %t-strong;
|
|
}
|
|
|
|
label:after {
|
|
margin-left: ($baseline/4);
|
|
content: "*";
|
|
}
|
|
}
|
|
|
|
label, input, textarea {
|
|
display: block;
|
|
}
|
|
|
|
label {
|
|
@include transition(color $tmg-f2 ease-in-out 0s);
|
|
@extend %t-copy-sub1;
|
|
@extend %t-strong;
|
|
margin: 0 0 ($baseline/4) 0;
|
|
|
|
&.is-focused {
|
|
color: $uxpl-blue-base;
|
|
}
|
|
}
|
|
|
|
input, textarea {
|
|
@extend %t-copy-base;
|
|
@include placeholder($gray-l4);
|
|
@include size(100%,100%);
|
|
padding: ($baseline/2);
|
|
|
|
&.long {
|
|
}
|
|
|
|
&.short {
|
|
}
|
|
|
|
&.error {
|
|
border-color: $red;
|
|
}
|
|
|
|
&:focus {
|
|
|
|
+ .tip {
|
|
color: $gray-d1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-minimum-grade {
|
|
@include float(left);
|
|
@include size(92%,100%);
|
|
}
|
|
|
|
.minimum-grade-percentage-sign {
|
|
@include line-height(30);
|
|
padding-left: ($baseline/4);;
|
|
}
|
|
|
|
textarea.long {
|
|
height: ($baseline*5);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display: inline-block;
|
|
margin-right: ($baseline/4);
|
|
width: auto;
|
|
height: auto;
|
|
|
|
& + label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
margin: 0 0 ($baseline/2) 0;
|
|
}
|
|
|
|
// enumerated/grouped lists
|
|
&.enum {
|
|
|
|
.field-group {
|
|
@include box-sizing(border-box);
|
|
border-radius: 3px;
|
|
background: $gray-l5;
|
|
padding: $baseline;
|
|
|
|
&:last-child {
|
|
padding-bottom: $baseline;
|
|
}
|
|
|
|
.actions {
|
|
@include clearfix();
|
|
margin-top: ($baseline/2);
|
|
border-top: 1px solid $gray-l4;
|
|
padding-top: ($baseline/2);
|
|
|
|
.remove-item {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// existing inputs
|
|
.input-existing {
|
|
margin: 0 0 $baseline 0;
|
|
|
|
.actions {
|
|
margin: ($baseline/4) 0 0 0;
|
|
}
|
|
}
|
|
|
|
// specific fields - basic
|
|
&.basic {
|
|
|
|
.list-input {
|
|
@include clearfix();
|
|
padding: 0 ($baseline/2);
|
|
|
|
.field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.is-not-editable {
|
|
|
|
input, textarea {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
#field-course-organization {
|
|
float: left;
|
|
width: flex-grid(2, 9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
#field-course-number {
|
|
float: left;
|
|
width: flex-grid(2, 9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
#field-course-name {
|
|
float: left;
|
|
width: flex-grid(5, 9);
|
|
}
|
|
|
|
// Credit eligibility requirements
|
|
#credit-minimum-passing-grade {
|
|
float: left;
|
|
width: flex-grid(3, 9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
#credit-proctoring-requirements {
|
|
float: left;
|
|
width: flex-grid(3, 9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
#credit-reverification-requirements {
|
|
float: left;
|
|
width: flex-grid(3, 9);
|
|
}
|
|
|
|
// course link note
|
|
.note-promotion-courseURL {
|
|
box-shadow: 0 2px 1px $shadow-l1;
|
|
border-radius: ($baseline/5);
|
|
margin-top: ($baseline*1.5);
|
|
border: 1px solid $gray-l2;
|
|
padding: ($baseline/2) 0 0 0;
|
|
|
|
.title {
|
|
@extend %t-copy-sub1;
|
|
margin: 0 0 ($baseline/10) 0;
|
|
padding: 0 ($baseline/2);
|
|
|
|
.tip {
|
|
display: inline;
|
|
margin-left: ($baseline/4);
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
|
|
|
|
.link-courseURL {
|
|
@extend %t-copy-lead1;
|
|
@include box-sizing(border-box);
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: $uxpl-blue-base;
|
|
|
|
&:hover {
|
|
color: $uxpl-blue-hover-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-actions {
|
|
box-shadow: inset 0 1px 1px $shadow-l1;
|
|
border-top: 1px solid $gray-l2;
|
|
padding: ($baseline/2);
|
|
background: $gray-l5;
|
|
|
|
.action-primary {
|
|
@extend %btn-primary-blue;
|
|
@extend %t-action3;
|
|
@extend %t-strong;
|
|
|
|
.icon {
|
|
@extend %t-icon5;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific fields - schedule
|
|
&.schedule {
|
|
|
|
.list-input {
|
|
margin-bottom: ($baseline*1.5);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
border-bottom: 1px solid $gray-l5;
|
|
padding-bottom: ($baseline/2);
|
|
|
|
&:last-child {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.is-not-editable {
|
|
|
|
input, textarea {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
@include float(left);
|
|
width: flex-grid(3, 9);
|
|
margin-bottom: ($baseline/4);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.field.time {
|
|
position: relative;
|
|
|
|
.tip {
|
|
position: absolute;
|
|
top: 0;
|
|
@include right(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific fields - overview
|
|
#field-course-overview {
|
|
|
|
#course-overview {
|
|
height: ($baseline*20);
|
|
}
|
|
|
|
//adds back in CodeMirror border removed due to Unit page styling of component editors
|
|
.CodeMirror {
|
|
border: 1px solid $gray-l2;
|
|
}
|
|
}
|
|
|
|
// specific fields - video
|
|
#field-course-introduction-video {
|
|
|
|
.input-existing {
|
|
@include box-sizing(border-box);
|
|
border-radius: 3px;
|
|
background: $gray-l5;
|
|
padding: ($baseline/2);
|
|
|
|
.actions {
|
|
@include clearfix();
|
|
margin-top: ($baseline/2);
|
|
border-top: 1px solid $gray-l4;
|
|
padding-top: ($baseline/2);
|
|
|
|
.remove-item {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
margin-top: ($baseline/2);
|
|
border-top: 1px solid $gray-l5;
|
|
padding-top: ($baseline/2);
|
|
}
|
|
}
|
|
|
|
// specific fields - course image
|
|
#field-course-image, #field-banner-image, #field-video-thumbnail-image {
|
|
|
|
.current-course-image {
|
|
margin-bottom: ($baseline/2);
|
|
padding: ($baseline/2) $baseline;
|
|
background: $gray-l6;
|
|
text-align: center;
|
|
|
|
.wrapper-course-image {
|
|
display: block;
|
|
width: 375px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
border: 1px solid $gray-l4;
|
|
box-shadow: 0 1px 1px $shadow-l1;
|
|
padding: ($baseline/2);
|
|
background: $white;
|
|
}
|
|
|
|
.course-image {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.msg {
|
|
@extend %t-copy-sub2;
|
|
display: block;
|
|
margin-top: ($baseline/2);
|
|
color: $gray-d3;
|
|
}
|
|
}
|
|
|
|
.wrapper-input {
|
|
@include clearfix();
|
|
width: flex-grid(9,9);
|
|
|
|
.input {
|
|
float: left;
|
|
width: flex-grid(6,9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.action-upload-image {
|
|
@extend %ui-btn-flat-outline;
|
|
@include float(right);
|
|
width: flex-grid(2,9);
|
|
margin-top: ($baseline/4);
|
|
padding: ($baseline/2) $baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific fields - requirements
|
|
&.requirements {
|
|
|
|
#field-course-effort {
|
|
width: flex-grid(3, 9);
|
|
}
|
|
}
|
|
|
|
// specific fields - grading range (artifact styling)
|
|
&.grade-range {
|
|
margin-bottom: ($baseline*3);
|
|
|
|
.grade-controls {
|
|
@include clearfix();
|
|
width: flex-grid(9,9);
|
|
}
|
|
|
|
.new-grade-button {
|
|
@include box-sizing(border-box);
|
|
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
|
width: flex-grid(1,9);
|
|
height: ($baseline*2);
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-right: flex-gutter();
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
border: 1px solid $darkGrey;
|
|
background-color: #d1dae3;
|
|
color: #6d788b;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -6px;
|
|
margin-top: -6px;
|
|
}
|
|
}
|
|
|
|
.grade-slider {
|
|
@include box-sizing(border-box);
|
|
width: flex-grid(8,9);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
.grade-bar {
|
|
position: relative;
|
|
width: 100%;
|
|
height: ($baseline*2.5);
|
|
background: $lightGrey;
|
|
|
|
.increments {
|
|
position: relative;
|
|
|
|
li {
|
|
@include font-size(9);
|
|
position: absolute;
|
|
top: 52px;
|
|
width: 30px;
|
|
margin-left: -15px;
|
|
text-align: center;
|
|
|
|
&.increment-0 {
|
|
left: 0;
|
|
}
|
|
|
|
&.increment-10 {
|
|
left: 10%;
|
|
}
|
|
|
|
&.increment-20 {
|
|
left: 20%;
|
|
}
|
|
|
|
&.increment-30 {
|
|
left: 30%;
|
|
}
|
|
|
|
&.increment-40 {
|
|
left: 40%;
|
|
}
|
|
|
|
&.increment-50 {
|
|
left: 50%;
|
|
}
|
|
|
|
&.increment-60 {
|
|
left: 60%;
|
|
}
|
|
|
|
&.increment-70 {
|
|
left: 70%;
|
|
}
|
|
|
|
&.increment-80 {
|
|
left: 80%;
|
|
}
|
|
|
|
&.increment-90 {
|
|
left: 90%;
|
|
}
|
|
|
|
&.increment-100 {
|
|
left: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grade-specific-bar {
|
|
height: 50px !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.grades {
|
|
position: relative;
|
|
|
|
li {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 50px;
|
|
text-align: right;
|
|
border-radius: 2px;
|
|
|
|
&:hover,
|
|
&.is-dragging {
|
|
.remove-button {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.is-dragging {
|
|
|
|
}
|
|
|
|
.remove-button {
|
|
@extend %t-action5;
|
|
display: none;
|
|
position: absolute;
|
|
top: -17px;
|
|
right: 1px;
|
|
height: 17px;
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
background: #4fe696;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
background: #ffdf7e;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
background: #ffb657;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
background: #ef54a1;
|
|
}
|
|
|
|
&:nth-child(5),
|
|
&.bar-fail {
|
|
background: #fb336c;
|
|
}
|
|
|
|
.letter-grade {
|
|
@extend %t-copy-base;
|
|
@extend %t-strong;
|
|
display: block;
|
|
margin: 5px 15px 0 0;
|
|
}
|
|
|
|
.range {
|
|
@include font-size(10);
|
|
display: block;
|
|
margin-right: ($baseline*0.75);
|
|
line-height: 12px;
|
|
}
|
|
|
|
.drag-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1px;
|
|
height: 50px;
|
|
width: 2px;
|
|
background-color: $white;
|
|
box-shadow: -1px 0 3px rgba(0,0,0,0.1);
|
|
|
|
cursor: ew-resize;
|
|
@include transition(none);
|
|
|
|
&:hover {
|
|
width: 6px;
|
|
right: -2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific fields - grading rules
|
|
&.grade-rules {
|
|
|
|
#field-course-grading-graceperiod {
|
|
width: flex-grid(3, 9);
|
|
}
|
|
|
|
#field-course-minimum_grade_credit {
|
|
width: flex-grid(4, 9);
|
|
}
|
|
|
|
}
|
|
|
|
&.assignment-types {
|
|
|
|
.list-input {
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
width: flex-grid(9, 9);
|
|
margin-bottom: ($baseline*1.5);
|
|
border-bottom: 1px solid $gray-l5;
|
|
padding-bottom: ($baseline*1.5);
|
|
|
|
&:last-child {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.field {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: flex-grid(3, 6);
|
|
margin-bottom: ($baseline/2);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
#field-course-grading-assignment-shortname,
|
|
#field-course-grading-assignment-totalassignments,
|
|
#field-course-grading-assignment-gradeweight,
|
|
#field-course-grading-assignment-droppable {
|
|
width: flex-grid(2, 6);
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
float: left;
|
|
width: flex-grid(9, 9);
|
|
|
|
.new-button {
|
|
@extend %btn-primary-green;
|
|
}
|
|
|
|
.delete-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.course-learning-info {
|
|
.list-input {
|
|
margin-bottom: $baseline;
|
|
.course-settings-learning-fields {
|
|
.field {
|
|
.input-learning-info {
|
|
width: flex-grid(10, 12);
|
|
display: inline-block;
|
|
}
|
|
.delete-button {
|
|
padding-bottom: 3px;
|
|
line-height: 3.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
width: flex-grid(9, 9);
|
|
|
|
.new-button {
|
|
@extend %btn-primary-green;
|
|
}
|
|
|
|
.delete-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.instructor-types {
|
|
.list-input {
|
|
.course-instructor-details-fields {
|
|
.field {
|
|
width: flex-grid(2, 6);
|
|
&.field-course-instructor-bio {
|
|
width: flex-grid(6, 6);
|
|
}
|
|
&.current-instructor-image {
|
|
width: flex-grid(6, 6);
|
|
text-align: left;
|
|
padding: 0;
|
|
.wrapper-instructor-image {
|
|
margin: 15px auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
width: flex-grid(9, 9);
|
|
margin-bottom: ($baseline*1.5);
|
|
border-bottom: 1px solid $gray-l5;
|
|
padding-bottom: ($baseline*1.5);
|
|
|
|
&:last-child {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.field {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: flex-grid(3, 6);
|
|
margin-bottom: ($baseline/2);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
// specific fields - course image
|
|
.field-course-instructor-image {
|
|
margin-bottom: ($baseline/2);
|
|
padding: ($baseline/2) $baseline;
|
|
background: $gray-l5;
|
|
text-align: left;
|
|
|
|
.wrapper-instructor-image {
|
|
display: block;
|
|
width: 375px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
border: 1px solid $gray-l4;
|
|
box-shadow: 0 1px 1px $shadow-l1;
|
|
padding: ($baseline/2);
|
|
background: $white;
|
|
}
|
|
|
|
.instructor-image {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.msg {
|
|
@extend %t-copy-sub2;
|
|
display: block;
|
|
margin-top: ($baseline/2);
|
|
color: $gray-l5;
|
|
}
|
|
}
|
|
|
|
.wrapper-input {
|
|
@include clearfix();
|
|
width: flex-grid(9,9);
|
|
|
|
.input {
|
|
float: left;
|
|
width: flex-grid(6,9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.action-upload-instructor-image {
|
|
@extend %ui-btn-flat-outline;
|
|
float: right;
|
|
width: flex-grid(2,9);
|
|
margin-top: ($baseline/4);
|
|
padding: ($baseline/2) $baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.actions {
|
|
width: flex-grid(9, 9);
|
|
|
|
.new-button {
|
|
@extend %btn-primary-green;
|
|
}
|
|
|
|
.delete-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific fields - advanced settings
|
|
&.advanced-policies {
|
|
|
|
.wrapper-options {
|
|
margin: (-$baseline/2) 0 ($baseline/2) 0;
|
|
text-align: right;
|
|
|
|
.wrapper-deprecated-setting {
|
|
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
|
opacity: .5;
|
|
position: relative;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
background-color: $gray-l5;
|
|
color: $gray-d2;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.is-set {
|
|
opacity: 1;
|
|
background-color: $pink-l5;
|
|
color: $pink;
|
|
}
|
|
}
|
|
|
|
.deprecated-settings-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
margin-bottom: ($baseline*1.5);
|
|
|
|
&:last-child {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.course-advanced-policy-list-item {
|
|
@include clearfix();
|
|
position: relative;
|
|
|
|
.title {
|
|
@extend %t-strong;
|
|
margin-top: ($baseline/2);
|
|
}
|
|
|
|
.field {
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
|
|
.tip {
|
|
color: $gray-d1;
|
|
}
|
|
|
|
input.error {
|
|
|
|
& + .tip {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.key, .value {
|
|
float: left;
|
|
margin: 0 0 ($baseline/2) 0;
|
|
}
|
|
|
|
.key {
|
|
width: flex-grid(3, 9);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.value {
|
|
width: flex-grid(6, 9);
|
|
}
|
|
|
|
.actions {
|
|
float: left;
|
|
width: flex-grid(9, 9);
|
|
|
|
.delete-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.is-deprecated {
|
|
background-color: $pink-l5;
|
|
|
|
.status {
|
|
color: $pink;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-error {
|
|
position: absolute;
|
|
bottom: ($baseline*0.75);
|
|
}
|
|
|
|
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
|
|
.CodeMirror {
|
|
@extend %t-copy-base;
|
|
@include box-sizing(border-box);
|
|
box-shadow: 0 1px 2px $shadow-l1 inset;
|
|
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
|
|
padding: 5px 8px;
|
|
border: 1px solid $mediumGrey;
|
|
border-radius: 2px;
|
|
background-color: $lightGrey;
|
|
font-family: $f-monospace;
|
|
color: $baseFontColor;
|
|
outline: 0;
|
|
height: auto;
|
|
min-height: ($baseline*2.25);
|
|
|
|
&.CodeMirror-focused {
|
|
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
|
|
outline: 0;
|
|
}
|
|
|
|
.CodeMirror-sizer {
|
|
top: 4px; /* Vertical alignment for monospace font */
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
@include margin-left(-30px);
|
|
@include margin-right(0);
|
|
|
|
@include padding-left(30px);
|
|
@include padding-right(0);
|
|
}
|
|
|
|
.CodeMirror-vscrollbar {
|
|
@include left(0);
|
|
@include right(auto);
|
|
}
|
|
|
|
// editor color changes just for JSON
|
|
.CodeMirror-lines {
|
|
|
|
.cm-string {
|
|
color: #cb9c40;
|
|
}
|
|
|
|
pre {
|
|
line-height: 2.0rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-supplementary {
|
|
@extend .ui-col-narrow;
|
|
}
|
|
|
|
.wrapper-modal-window {
|
|
|
|
.validation-error-modal-content {
|
|
|
|
.error-header {
|
|
p {
|
|
strong {
|
|
color: $error-red;
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.error-list {
|
|
.error-item {
|
|
.error-item-title {
|
|
color: $error-red;
|
|
}
|
|
|
|
.error-item-message {
|
|
width:100%;
|
|
border: none;
|
|
resize: none;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// UI: course pacing options
|
|
.group-settings.pacing {
|
|
.list-input {
|
|
margin-top: $baseline/2;
|
|
background-color: $gray-l6;
|
|
border-radius: 3px;
|
|
padding: ($baseline/2);
|
|
}
|
|
|
|
.field {
|
|
@include margin(0, 0, $baseline, 0);
|
|
|
|
.field-radio {
|
|
display: inline-block;
|
|
@include margin-right($baseline/4);
|
|
width: auto;
|
|
height: auto;
|
|
|
|
& + .course-pace-label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|