diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index c4e96616a8..953b2d15e5 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -97,7 +97,7 @@
color: $blue;
&:hover, &:active {
- background: $blue-l3;
+ background: $blue-l4;
color: $blue-s2;
}
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 384ffc0509..1faf4a883e 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -8,11 +8,11 @@ input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
- border: 1px solid $mediumGrey;
+ border: 1px solid $gray-l2;
border-radius: 2px;
- @include linear-gradient($lightGrey, tint($lightGrey, 90%));
- background-color: $lightGrey;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+ @include linear-gradient($gray-l5, $white);
+ background-color: $gray-l5;
+ @include box-shadow(inset 0 1px 2px $shadow-l1);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
@@ -21,7 +21,7 @@ textarea.text {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
- color: #979faf;
+ color: $gray-l2;
}
&:focus {
@@ -30,7 +30,72 @@ textarea.text {
}
}
-// forms - specific
+// ====================
+
+// forms - fields - not editable
+.field.is-not-editable {
+
+ & label.is-focused {
+ color: $gray-d2;
+ }
+
+ label, input, textarea {
+ pointer-events: none;
+ }
+}
+
+// ====================
+
+// field with error
+.field.error {
+
+ input, textarea {
+ border-color: $red;
+ }
+}
+
+// ====================
+
+// forms - additional UI
+form {
+
+ .note {
+ @include box-sizing(border-box);
+
+ .title {
+
+ }
+
+ .copy {
+
+ }
+
+ // note with actions
+ &.has-actions {
+ @include clearfix();
+
+ .title {
+
+ }
+
+ .copy {
+
+ }
+
+ .list-actions {
+
+ }
+ }
+ }
+
+ .note-promotion {
+
+ }
+}
+
+// ====================
+
+// forms - grandfathered
input.search {
padding: 6px 15px 8px 30px;
@include box-sizing(border-box);
@@ -73,4 +138,4 @@ code {
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 307ebad0a8..d1ba706d56 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -147,7 +147,7 @@ body.course.settings {
}
label {
- @include font-size(14);
+ @extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
font-weight: 400;
@@ -161,7 +161,7 @@ body.course.settings {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
- padding: ($baseline/2);
+ padding: ($baseline/2);
&.long {
}
@@ -212,7 +212,7 @@ body.course.settings {
padding: $baseline;
&:last-child {
- padding-bottom: $baseline;
+ padding-bottom: $baseline;
}
.actions {
@@ -238,33 +238,36 @@ body.course.settings {
}
}
- // not editable fields
- .field.is-not-editable {
-
- & label.is-focused {
- color: $gray-d2;
- }
- }
-
- // field with error
- .field.error {
-
- input, textarea {
- border-color: $red;
- }
- }
-
// specific fields - basic
&.basic {
.list-input {
@include clearfix();
+ padding: 0 ($baseline/2);
.field {
margin-bottom: 0;
}
}
+ // course details that should appear more like content than elements to change
+ .field.is-not-editable {
+
+ label {
+
+ }
+
+ input, textarea {
+ @extend .t-copy-lead1;
+ @include box-shadow(none);
+ border: none;
+ background: none;
+ padding: 0;
+ margin: 0;
+ font-weight: 600;
+ }
+ }
+
#field-course-organization {
float: left;
width: flex-grid(2, 9);
@@ -281,6 +284,58 @@ body.course.settings {
float: left;
width: flex-grid(5, 9);
}
+
+ // course link note
+ .note-promotion-courseURL {
+ @include box-shadow(0 2px 1px $shadow-l1);
+ @include 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;
+
+ &:hover {
+
+ }
+ }
+ }
+
+ .list-actions {
+ @include box-shadow(inset 0 1px 1px $shadow-l1);
+ border-top: 1px solid $gray-l2;
+ padding: ($baseline/2);
+ background: $gray-l5;
+
+ .action-primary {
+ @include blue-button();
+ @include font-size(13);
+ font-weight: 600;
+
+ .icon {
+ @extend .t-icon;
+ @include font-size(16);
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+ }
+ }
}
// specific fields - schedule
@@ -322,7 +377,7 @@ body.course.settings {
}
}
}
-
+
// specific fields - overview
#field-course-overview {
@@ -468,7 +523,7 @@ body.course.settings {
}
}
}
-
+
.grade-specific-bar {
height: 50px !important;
}
@@ -479,7 +534,7 @@ body.course.settings {
li {
position: absolute;
top: 0;
- height: 50px;
+ height: 50px;
text-align: right;
@include border-radius(2px);
@@ -600,8 +655,8 @@ body.course.settings {
}
#field-course-grading-assignment-shortname,
- #field-course-grading-assignment-totalassignments,
- #field-course-grading-assignment-gradeweight,
+ #field-course-grading-assignment-totalassignments,
+ #field-course-grading-assignment-gradeweight,
#field-course-grading-assignment-droppable {
width: flex-grid(2, 6);
}
@@ -734,4 +789,4 @@ body.course.settings {
.content-supplementary {
width: flex-grid(3, 12);
}
-}
\ No newline at end of file
+}
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index e4cb4b3743..cc5dafc57b 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -4,7 +4,7 @@
<%namespace name='static' file='static_content.html'/>
<%!
-from contentstore import utils
+from contentstore import utils
%>
@@ -13,17 +13,17 @@ from contentstore import utils
-
+
-
+
%block>
@@ -62,10 +62,10 @@ from contentstore import utils
Your course's schedule settings determine when students can enroll in and begin a course as well as when the course.
Additionally, details provided on this page are also used in edX's catalog of courses, which new and returning students use to choose new courses to study.
- +