622d56026c
feat: reimagine certificate display settings The course settings `certificate_available_date` (CAD) and `certificates_display_behavior` (CDB) were previously acting indedependantly of one another. They now work in tandem. This change: - limits CDB to a dropdown - removes "early_with_info" and adds "end_with_date" - only takes CAD into account if "end_with_date" is selected - Moves CDB to the main course schedule settings page - updates CourseOverview model and CourseDetails objects to validate these fields and choose sane defaults if they aren't expected values This work was previously done in bd9e7dd (complete with bugs), so this version is toggleable via the ENABLE_V2_CERT_DISPLAY_SETTINGS setting
1281 lines
26 KiB
SCSS
1281 lines
26 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 {
|
|
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);
|
|
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
width: 100%;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.collapsible {
|
|
.collapsible-trigger{
|
|
color: theme-color("primary");
|
|
&:hover{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.collapsible-content{
|
|
font-size: 12px;
|
|
padding-top: ($baseline/2);
|
|
.collapsible-description-heading {
|
|
font-weight: bold;
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
&.collapsed{
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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: "*";
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
label,
|
|
input,
|
|
textarea {
|
|
display: inline-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: theme-color("primary");
|
|
}
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
@extend %t-copy-base;
|
|
|
|
@include placeholder($gray-l4);
|
|
@include size(100%, 100%);
|
|
|
|
padding: ($baseline/2);
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
.datepicker-icon {
|
|
display: inline;
|
|
margin-left: -($baseline * 1.5);
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
|
|
margin: 0 0 ($baseline/2) 0;
|
|
}
|
|
|
|
// enumerated/grouped lists
|
|
&.enum {
|
|
.field-group {
|
|
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;
|
|
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: theme-color("primary");
|
|
|
|
&: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(4, 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,
|
|
#field-course-about-sidebar-html {
|
|
#course-overview,
|
|
#course-about-sidebar-html {
|
|
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 {
|
|
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 {
|
|
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, 0.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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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: 0.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
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: $body-color;
|
|
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: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|