Merge branch 'master' into feature/christina/metadata-ui
Conflicts: cms/static/sass/views/_static-pages.scss
This commit is contained in:
cahrens
@@ -22,6 +22,7 @@ CMS.Views.Checklists = Backbone.View.extend({
|
||||
}
|
||||
);
|
||||
},
|
||||
reset: true,
|
||||
error: CMS.ServerError
|
||||
}
|
||||
);
|
||||
|
||||
@@ -160,11 +160,17 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
|
||||
var targetModel = this.eventModel(event);
|
||||
this.modelDom(event).remove();
|
||||
var cacheThis = this;
|
||||
targetModel.destroy({success : function (model, response) {
|
||||
cacheThis.collection.fetch({success : function() {cacheThis.render();},
|
||||
error : CMS.ServerError});
|
||||
},
|
||||
error : CMS.ServerError
|
||||
targetModel.destroy({
|
||||
success: function (model, response) {
|
||||
cacheThis.collection.fetch({
|
||||
success: function() {
|
||||
cacheThis.render();
|
||||
},
|
||||
reset: true,
|
||||
error: CMS.ServerError
|
||||
});
|
||||
},
|
||||
error : CMS.ServerError
|
||||
});
|
||||
},
|
||||
|
||||
@@ -238,20 +244,19 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.model.fetch(
|
||||
{
|
||||
complete: function() {
|
||||
window.templateLoader.loadRemoteTemplate("course_info_handouts",
|
||||
"/static/client_templates/course_info_handouts.html",
|
||||
function (raw_template) {
|
||||
self.template = _.template(raw_template);
|
||||
self.render();
|
||||
}
|
||||
);
|
||||
},
|
||||
error : CMS.ServerError
|
||||
}
|
||||
);
|
||||
this.model.fetch({
|
||||
complete: function() {
|
||||
window.templateLoader.loadRemoteTemplate("course_info_handouts",
|
||||
"/static/client_templates/course_info_handouts.html",
|
||||
function (raw_template) {
|
||||
self.template = _.template(raw_template);
|
||||
self.render();
|
||||
}
|
||||
);
|
||||
},
|
||||
reset: true,
|
||||
error: CMS.ServerError
|
||||
});
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
||||
@@ -155,6 +155,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
|
||||
self.model.clear({silent : true});
|
||||
self.model.fetch({
|
||||
success : function() { self.render(); },
|
||||
reset: true,
|
||||
error : CMS.ServerError
|
||||
});
|
||||
},
|
||||
|
||||
@@ -8,11 +8,10 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
min-width: $fg-min-width;
|
||||
background: $gray-l5;
|
||||
line-height: 1.6;
|
||||
color: $baseFontColor;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
body, input {
|
||||
@@ -30,7 +29,7 @@ a {
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(28);
|
||||
@extend .t-title4;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -51,43 +50,183 @@ h1 {
|
||||
// ====================
|
||||
|
||||
// typography - basic
|
||||
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
|
||||
.page-header {
|
||||
@extend .t-title3;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.subtitle {
|
||||
@extend .t-title7;
|
||||
position: relative;
|
||||
top: ($baseline/4);
|
||||
display: block;
|
||||
color: $gray-l2;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@extend .t-title4;
|
||||
font-weight: 600;
|
||||
|
||||
.subtitle {
|
||||
@extend .t-title7;
|
||||
}
|
||||
}
|
||||
|
||||
.area-header {
|
||||
@extend .t-title6;
|
||||
font-weight: 600;
|
||||
|
||||
.subtitle {
|
||||
@extend .t-title8;
|
||||
}
|
||||
}
|
||||
|
||||
.area-subheader {
|
||||
@extend .t-title7;
|
||||
font-weight: 600;
|
||||
|
||||
.subtitle {
|
||||
@extend .t-title9;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - primary content
|
||||
.content-primary {
|
||||
|
||||
.section-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.area-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.area-subheader {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// typography - primary content
|
||||
.content-secondary {
|
||||
|
||||
.section-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - loose headings (BT: needs to be removed once html is clean)
|
||||
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// typography - primary content
|
||||
.content-secondary {
|
||||
|
||||
.section-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography - loose headings (BT: needs to be removed once html is clean)
|
||||
.title-1 {
|
||||
@include font-size(32);
|
||||
@extend .t-title3;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.title-2 {
|
||||
@include font-size(24);
|
||||
@extend .t-title4;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
@include font-size(18);
|
||||
@extend .t-title5;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.title-4 {
|
||||
@include font-size(14);
|
||||
@extend .t-title7;
|
||||
margin-bottom: $baseline;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.title-5 {
|
||||
@include font-size(14);
|
||||
@extend .t-title7;
|
||||
color: $gray-l1;
|
||||
margin-bottom: $baseline;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.title-6 {
|
||||
@include font-size(14);
|
||||
@extend .t-title7;
|
||||
color: $gray-l2;
|
||||
margin-bottom: $baseline;
|
||||
font-weight: 500
|
||||
@@ -118,7 +257,6 @@ p, ul, ol, dl {
|
||||
|
||||
.mast, .metadata {
|
||||
@include clearfix();
|
||||
@include font-size(16);
|
||||
position: relative;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
@@ -131,53 +269,8 @@ p, ul, ol, dl {
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
.title-sub {
|
||||
@include font-size(14);
|
||||
position: relative;
|
||||
top: ($baseline/4);
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-l2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.title, .title-1 {
|
||||
@include font-size(32);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
.nav-hierarchy {
|
||||
@include font-size(14);
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-l2;
|
||||
font-weight: 400;
|
||||
|
||||
.nav-item {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
&:after {
|
||||
content: ">>";
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
.title {
|
||||
.page-header {
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
@@ -185,7 +278,7 @@ p, ul, ol, dl {
|
||||
&.has-actions {
|
||||
@include clearfix();
|
||||
|
||||
.title {
|
||||
.page-header {
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin-right: flex-gutter();
|
||||
@@ -210,22 +303,20 @@ p, ul, ol, dl {
|
||||
|
||||
// buttons
|
||||
.button {
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important;
|
||||
font-weight: 400 !important;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
.new-button {
|
||||
font-weight: 700 !important;
|
||||
|
||||
}
|
||||
|
||||
.view-button {
|
||||
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.upload-button .icon-create {
|
||||
@include font-size(18);
|
||||
margin-top: ($baseline/4);
|
||||
@extend .t-action2;
|
||||
line-height: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -254,7 +345,7 @@ p, ul, ol, dl {
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
@@ -268,14 +359,14 @@ p, ul, ol, dl {
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
.title-sub {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.title-1 {
|
||||
@include font-size(32);
|
||||
@extend .t-title3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
@@ -285,7 +376,7 @@ p, ul, ol, dl {
|
||||
|
||||
.introduction {
|
||||
@include box-sizing(border-box);
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
width: flex-grid(12);
|
||||
margin: 0 0 $baseline 0;
|
||||
|
||||
@@ -303,14 +394,14 @@ p, ul, ol, dl {
|
||||
}
|
||||
|
||||
.nav-introduction-supplementary {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub2;
|
||||
float: right;
|
||||
width: flex-grid(4,12);
|
||||
display: block;
|
||||
text-align: right;
|
||||
|
||||
.icon {
|
||||
@include font-size(14);
|
||||
@extend .t-action3;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
@@ -327,21 +418,17 @@ p, ul, ol, dl {
|
||||
// layout - primary content
|
||||
.content-primary {
|
||||
|
||||
.title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
.title-1 {
|
||||
@extend .t-title-1;
|
||||
@extend .t-title3;
|
||||
}
|
||||
|
||||
.title-2 {
|
||||
@extend .t-title-2;
|
||||
@extend .t-title4;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
@extend .t-title-3;
|
||||
@extend .t-title6;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
@@ -355,7 +442,7 @@ p, ul, ol, dl {
|
||||
}
|
||||
|
||||
.tip {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub2;
|
||||
width: flex-grid(7, 12);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
@@ -373,7 +460,7 @@ p, ul, ol, dl {
|
||||
}
|
||||
|
||||
.bit {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub1;
|
||||
margin: 0 0 $baseline 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: 0 0 $baseline 0;
|
||||
@@ -386,7 +473,7 @@ p, ul, ol, dl {
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(14);
|
||||
@extend .t-title7;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $gray-d2;
|
||||
font-weight: 600;
|
||||
@@ -494,7 +581,7 @@ p, ul, ol, dl {
|
||||
|
||||
// misc
|
||||
hr.divide {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
@@ -655,7 +742,7 @@ hr.divide {
|
||||
|
||||
.new-button {
|
||||
@include green-button;
|
||||
@include font-size(13);
|
||||
@extend .t-action4;
|
||||
padding: 8px 20px 10px;
|
||||
text-align: center;
|
||||
|
||||
@@ -674,7 +761,7 @@ hr.divide {
|
||||
|
||||
.view-button {
|
||||
@include blue-button;
|
||||
@include font-size(13);
|
||||
@extend .t-copy-base;
|
||||
text-align: center;
|
||||
|
||||
&.big {
|
||||
@@ -693,7 +780,7 @@ hr.divide {
|
||||
|
||||
.edit-button.standard,
|
||||
.delete-button.standard {
|
||||
@include font-size(12);
|
||||
@extend .t-action4;
|
||||
@include white-button;
|
||||
float: left;
|
||||
padding: 3px 10px 4px;
|
||||
@@ -714,6 +801,7 @@ hr.divide {
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@extend .t-copy-sub2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -721,7 +809,6 @@ hr.divide {
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
@@ -745,7 +832,7 @@ hr.divide {
|
||||
|
||||
// basic utility
|
||||
.sr {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
|
||||
.fake-link {
|
||||
@@ -798,7 +885,7 @@ body.js {
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
|
||||
.ss-icon {
|
||||
@@ -821,14 +908,14 @@ body.js {
|
||||
}
|
||||
|
||||
.title {
|
||||
@include font-size(18);
|
||||
@extend .t-title5;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub2;
|
||||
margin-top: ($baseline/2);
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
@@ -1,437 +0,0 @@
|
||||
// studio - utilities - mixins and extends
|
||||
// ====================
|
||||
|
||||
// mixins - utility
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// mixins - grandfathered
|
||||
@mixin button {
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
|
||||
@include transition(background-color .15s, box-shadow .15s);
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $gray-l1 !important;
|
||||
border-radius: 3px !important;
|
||||
background: $gray-l1 !important;
|
||||
color: $gray-d1 !important;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin green-button {
|
||||
@include button;
|
||||
border: 1px solid $green-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $green;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $green-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $green-l3 !important;
|
||||
background: $green-l3 !important;
|
||||
color: $white !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blue-button {
|
||||
@include button;
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $blue-s2;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $blue-l3 !important;
|
||||
background: $blue-l3 !important;
|
||||
color: $white !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin red-button {
|
||||
@include button;
|
||||
border: 1px solid $red-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $red-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $red-l3 !important;
|
||||
background: $red-l3 !important;
|
||||
color: $white !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pink-button {
|
||||
@include button;
|
||||
border: 1px solid $pink-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $pink;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $pink-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $pink-l3 !important;
|
||||
background: $pink-l3 !important;
|
||||
color: $white !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin orange-button {
|
||||
@include button;
|
||||
border: 1px solid $orange-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
|
||||
background-color: $orange;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
color: $gray-d2;
|
||||
|
||||
&:hover {
|
||||
background-color: $orange-s2;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $orange-l3 !important;
|
||||
background: $orange-l2 !important;
|
||||
color: $gray-l1 !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin white-button {
|
||||
@include button;
|
||||
border: 1px solid $mediumGrey;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
||||
background-color: #dfe5eb;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
color: rgb(92, 103, 122);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(222, 236, 247);
|
||||
color: rgb(92, 103, 122);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grey-button {
|
||||
@include button;
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: #d1dae3;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
color: #6d788b;
|
||||
|
||||
&:hover {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gray-button {
|
||||
@include button;
|
||||
border: 1px solid $gray-d1;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
|
||||
background-color: $gray-d2;
|
||||
@include box-shadow(0 1px 0 $white-t1 inset);
|
||||
color: $gray-l3;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-d3;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-grey-button {
|
||||
@include button;
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-d4;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin edit-box {
|
||||
padding: 15px 20px;
|
||||
border-radius: 3px;
|
||||
background-color: $lightBluishGrey2;
|
||||
color: #3c3c3c;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
|
||||
|
||||
label {
|
||||
color: $baseFontColor;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid $darkGrey;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
@include blue-button;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@include white-button;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tree-view {
|
||||
border: 1px solid $mediumGrey;
|
||||
background: $lightGrey;
|
||||
|
||||
.branch {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.collapsed {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.branch > .section-item {
|
||||
border-top: 1px solid #c5cad4;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 6px 8px 8px 16px;
|
||||
background: #edf1f5;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background: #fffcf1;
|
||||
|
||||
.item-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background: #fffcf1;
|
||||
}
|
||||
|
||||
.draft-item:after,
|
||||
.public-item:after,
|
||||
.private-item:after {
|
||||
margin-left: 3px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.draft-item:after {
|
||||
content: "- draft";
|
||||
}
|
||||
|
||||
.private-item:after {
|
||||
content: "- private";
|
||||
}
|
||||
|
||||
.private-item {
|
||||
color: #a4aab7;
|
||||
}
|
||||
|
||||
.draft-item {
|
||||
color: #9f7d10;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $baseFontColor;
|
||||
|
||||
&.new-unit-item {
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
.section-item {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol {
|
||||
.section-item {
|
||||
padding-left: 96px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// sunsetted mixins
|
||||
@mixin active {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// extends - buttons
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.icon-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
// pill button
|
||||
.btn-pill {
|
||||
@include border-radius($baseline/5);
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
@include border-radius($baseline/2);
|
||||
}
|
||||
|
||||
// primary button
|
||||
.btn-primary {
|
||||
@extend .btn;
|
||||
@extend .btn-pill;
|
||||
padding:($baseline/2) $baseline;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
@include box-shadow(0 2px 1px $shadow-l1);
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
@include box-shadow(inset 1px 1px 2px $shadow-d1);
|
||||
|
||||
&:hover, &:active {
|
||||
@include box-shadow(inset 1px 1px 1px $shadow-d1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// secondary button
|
||||
.btn-secondary {
|
||||
@extend .btn;
|
||||
@extend .btn-pill;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding:($baseline/2) $baseline;
|
||||
background: transparent;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// extends - depth levels
|
||||
.depth0 { z-index: 0; }
|
||||
.depth1 { z-index: 10; }
|
||||
.depth2 { z-index: 100; }
|
||||
.depth3 { z-index: 1000; }
|
||||
.depth4 { z-index: 10000; }
|
||||
.depth5 { z-index: 100000; }
|
||||
448
cms/static/sass/_mixins-inherited.scss
Normal file
448
cms/static/sass/_mixins-inherited.scss
Normal file
@@ -0,0 +1,448 @@
|
||||
// studio - utilities - INHERITED mixins and extends
|
||||
|
||||
// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
|
||||
// They are still referenced when styliing current interface elements and as such need to be preserved for the time being.
|
||||
// talbs: we need to slowly ween ourselves off of these
|
||||
// ====================
|
||||
|
||||
// inherited - vertical and horizontal centering
|
||||
@mixin vertically-and-horizontally-centered ($height, $width) {
|
||||
left: 50%;
|
||||
margin-left: -$width / 2;
|
||||
min-height: $height;
|
||||
min-width: $width;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// inherited - dividers
|
||||
.faded-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-hr-divider-medium {
|
||||
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
|
||||
rgba(240,240,240, 1) 50%,
|
||||
rgba(240,240,240, 0)));
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-hr-divider-light {
|
||||
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
|
||||
rgba(255,255,255, 0.8) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-vertical-divider {
|
||||
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.faded-vertical-divider-light {
|
||||
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
|
||||
rgba(255,255,255, 0.6) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
@extend .faded-vertical-divider;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-divider {
|
||||
border: none;
|
||||
@extend .faded-hr-divider;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend .faded-hr-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-right-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1)));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fade-left-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
|
||||
rgba(200,200,200, 0)));
|
||||
border: none;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// inherited - ui
|
||||
.window {
|
||||
@include clearfix();
|
||||
@include border-radius(3px);
|
||||
@include box-shadow(0 1px 1px $shadow-l1);
|
||||
margin-bottom: $baseline;
|
||||
border: 1px solid $gray-l2;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// mixins - grandfathered
|
||||
@mixin button {
|
||||
@include font-size(14);
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
|
||||
@include transition(background-color .15s, box-shadow .15s);
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
font-weight: 700;
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $gray-l1 !important;
|
||||
border-radius: 3px !important;
|
||||
background: $gray-l1 !important;
|
||||
color: $gray-d1 !important;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin green-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
border: 1px solid $green-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $green-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $green-l3 !important;
|
||||
background: $green-l3 !important;
|
||||
color: $white !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blue-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $blue-s2;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include box-shadow(none);
|
||||
border: 1px solid $blue-l3 !important;
|
||||
background: $blue-l3 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin red-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $red-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $red-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include box-shadow(none);
|
||||
border: 1px solid $red-l3 !important;
|
||||
background: $red-l3 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pink-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $pink-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $pink;
|
||||
color: $white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $pink-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include box-shadow(none);
|
||||
border: 1px solid $pink-l3 !important;
|
||||
background: $pink-l3 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin orange-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
border: 1px solid $orange-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $orange;
|
||||
color: $gray-d2;
|
||||
|
||||
&:hover {
|
||||
background-color: $orange-s2;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $orange-l3 !important;
|
||||
background: $orange-l2 !important;
|
||||
color: $gray-l1 !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin white-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
border: 1px solid $mediumGrey;
|
||||
border-radius: 3px;
|
||||
background-color: #dfe5eb;
|
||||
color: rgb(92, 103, 122);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(222, 236, 247);
|
||||
color: rgb(92, 103, 122);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grey-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
background-color: #d1dae3;
|
||||
color: #6d788b;
|
||||
|
||||
&:hover {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gray-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
|
||||
@include box-shadow(0 1px 0 $white-t1 inset);
|
||||
border: 1px solid $gray-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $gray-d2;
|
||||
color: $gray-l3;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-d3;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-grey-button {
|
||||
@include button;
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-d4;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin edit-box {
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
|
||||
padding: 15px 20px;
|
||||
border-radius: 3px;
|
||||
background-color: $lightBluishGrey2;
|
||||
color: #3c3c3c;
|
||||
|
||||
label {
|
||||
color: $baseFontColor;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid $darkGrey;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
@include blue-button;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@include white-button;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tree-view {
|
||||
border: 1px solid $mediumGrey;
|
||||
background: $lightGrey;
|
||||
|
||||
.branch {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.collapsed {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.branch > .section-item {
|
||||
border-top: 1px solid #c5cad4;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 6px 8px 8px 16px;
|
||||
background: #edf1f5;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background: #fffcf1;
|
||||
|
||||
.item-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background: #fffcf1;
|
||||
}
|
||||
|
||||
.draft-item:after,
|
||||
.public-item:after,
|
||||
.private-item:after {
|
||||
margin-left: 3px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.draft-item:after {
|
||||
content: "- draft";
|
||||
}
|
||||
|
||||
.private-item:after {
|
||||
content: "- private";
|
||||
}
|
||||
|
||||
.private-item {
|
||||
color: #a4aab7;
|
||||
}
|
||||
|
||||
.draft-item {
|
||||
color: #9f7d10;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $baseFontColor;
|
||||
|
||||
&.new-unit-item {
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
.section-item {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol {
|
||||
.section-item {
|
||||
padding-left: 96px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// sunsetted mixins
|
||||
@mixin active {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@@ -6,6 +6,11 @@
|
||||
// @include box-sizing(border-box);
|
||||
// }
|
||||
|
||||
// better text rendering/kerning through SVG
|
||||
* {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@@ -15,7 +20,7 @@ b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
@@ -31,7 +36,7 @@ html,body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
@@ -110,7 +115,7 @@ abbr[title] {
|
||||
border: none;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
float: none;
|
||||
float: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@@ -131,7 +136,7 @@ abbr[title] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
|
||||
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
|
||||
.problem-type-tabs {
|
||||
border:none;
|
||||
list-style-type: none;
|
||||
@@ -139,7 +144,7 @@ abbr[title] {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
//background-color: $lightBluishGrey;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
|
||||
|
||||
|
||||
li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -156,4 +161,4 @@ abbr[title] {
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
cms/static/sass/_shame.scss
Normal file
3
cms/static/sass/_shame.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
// studio - shame
|
||||
// // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
|
||||
// ====================
|
||||
@@ -12,9 +12,15 @@ $fg-max-columns: 12;
|
||||
$fg-max-width: 1280px;
|
||||
$fg-min-width: 900px;
|
||||
|
||||
// type
|
||||
$sans-serif: 'Open Sans', $verdana;
|
||||
$body-line-height: golden-ratio(.875em, 1);
|
||||
// ====================
|
||||
|
||||
// fonts
|
||||
$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$f-decorative: '';
|
||||
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
|
||||
|
||||
// ====================
|
||||
|
||||
// colors - new for re-org
|
||||
$black: rgb(0,0,0);
|
||||
@@ -152,11 +158,14 @@ $shadow-l1: rgba(0,0,0,0.1);
|
||||
$shadow-l2: rgba(0,0,0,0.05);
|
||||
$shadow-d1: rgba(0,0,0,0.4);
|
||||
|
||||
// ====================
|
||||
|
||||
// specific UI
|
||||
$notification-height: ($baseline*10);
|
||||
|
||||
// colors - inherited
|
||||
// ====================
|
||||
|
||||
// inherited
|
||||
$baseFontColor: $gray-d2;
|
||||
$offBlack: #3c3c3c;
|
||||
$green: #108614;
|
||||
@@ -173,3 +182,8 @@ $darkGreen: rgb(52, 133, 76);
|
||||
$lightBluishGrey: rgb(197, 207, 223);
|
||||
$lightBluishGrey2: rgb(213, 220, 228);
|
||||
$error-red: rgb(253, 87, 87);
|
||||
|
||||
// type
|
||||
$sans-serif: $f-serif;
|
||||
$body-line-height: golden-ratio(.875em, 1);
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
|
||||
// notifications slide up then down
|
||||
@mixin notificationsSlideUpDown {
|
||||
0%, 100% {
|
||||
0%, 100% {
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
|
||||
@@ -199,4 +199,4 @@
|
||||
@include animation-timing-function($timing);
|
||||
@include animation-iteration-count($count);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
|
||||
}
|
||||
// studio - assets - fonts
|
||||
// ====================
|
||||
|
||||
// import from google fonts - Open Sans
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
|
||||
|
||||
// import from google fonts - Bree
|
||||
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
|
||||
|
||||
@@ -1,41 +1,48 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
// bourbon libs and resets
|
||||
@import 'bourbon/bourbon';
|
||||
@import 'bourbon/addons/button';
|
||||
@import "variables";
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'bourbon/addons/button'; // lib bourbon - button add-on
|
||||
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'vendor/normalize';
|
||||
@import 'reset';
|
||||
|
||||
// utilities
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'cms_mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// assets
|
||||
// base - assets
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics';
|
||||
@import 'assets/keyframes';
|
||||
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base
|
||||
// base - starter
|
||||
@import 'base';
|
||||
|
||||
// elements
|
||||
// base - elements
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons';
|
||||
@import 'elements/controls';
|
||||
@import 'elements/navigation';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/navigation'; // all archetypes of navigation
|
||||
@import 'elements/forms';
|
||||
@import 'elements/header';
|
||||
@import 'elements/footer';
|
||||
@import 'elements/sock';
|
||||
@import 'elements/forms';
|
||||
@import 'elements/modal';
|
||||
@import 'elements/alerts';
|
||||
@import 'elements/vendor';
|
||||
@import 'elements/tender-widget';
|
||||
@import 'elements/system-feedback'; // alerts, notifications, states
|
||||
@import 'elements/system-help'; // help UI
|
||||
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
|
||||
@import 'elements/vendor'; // overrides to vendor-provided styling
|
||||
|
||||
// specific views
|
||||
// base - specific views
|
||||
@import 'views/account';
|
||||
@import 'views/assets';
|
||||
@import 'views/updates';
|
||||
@@ -51,8 +58,12 @@
|
||||
@import 'views/users';
|
||||
@import 'views/checklists';
|
||||
|
||||
// temp - inherited
|
||||
@import 'assets/content-types';
|
||||
|
||||
// xblock-related
|
||||
// xmodule
|
||||
@import 'xmodule/modules/css/module-styles.scss';
|
||||
@import 'xmodule/descriptors/css/module-styles.scss';
|
||||
|
||||
|
||||
@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
|
||||
|
||||
@@ -141,3 +141,9 @@
|
||||
|
||||
// calls-to-action
|
||||
|
||||
// ====================
|
||||
|
||||
// specific buttons - view live
|
||||
.view-live-button {
|
||||
@extend .t-action4;
|
||||
}
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
padding: $baseline;
|
||||
|
||||
footer.primary {
|
||||
@extend .t-copy-sub2;
|
||||
@include clearfix();
|
||||
@include font-size(13);
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
@@ -72,4 +72,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// ====================
|
||||
|
||||
.wrapper-header {
|
||||
@extend .depth3;
|
||||
margin: 0;
|
||||
padding: $baseline;
|
||||
border-bottom: 1px solid $gray;
|
||||
@@ -10,7 +11,6 @@
|
||||
height: 76px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
|
||||
a {
|
||||
color: $baseFontColor;
|
||||
@@ -67,7 +67,7 @@
|
||||
padding-right: ($baseline*0.75);
|
||||
|
||||
a {
|
||||
@include text-hide();
|
||||
@extend .text-hide;
|
||||
display: block;
|
||||
width: 164px;
|
||||
height: 32px;
|
||||
@@ -146,7 +146,7 @@
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
padding: 0 ($baseline/4);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
@@ -516,21 +516,21 @@ body.signup .nav-not-signedin-signin {
|
||||
|
||||
a {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
body.signin .nav-not-signedin-signup {
|
||||
|
||||
|
||||
a {
|
||||
background-color: #62aaf5;
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// STATE: js enabled
|
||||
// STATE: js enabled
|
||||
.js {
|
||||
|
||||
.nav-dropdown {
|
||||
@@ -559,4 +559,4 @@ body.signin .nav-not-signedin-signup {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,19 @@
|
||||
// ====================
|
||||
|
||||
// common
|
||||
nav {
|
||||
|
||||
ol, ul {
|
||||
@extend .no-list;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
a {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -21,4 +34,4 @@
|
||||
|
||||
// ====================
|
||||
|
||||
//
|
||||
//
|
||||
|
||||
@@ -28,13 +28,13 @@
|
||||
|
||||
.cta-show-sock {
|
||||
@extend .btn-pill;
|
||||
@extend .t-action3;
|
||||
@extend .t-action4;
|
||||
background: $gray-l5;
|
||||
padding: ($baseline/2) $baseline;
|
||||
color: $gray;
|
||||
|
||||
.icon {
|
||||
@include font-size(16);
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -59,7 +59,7 @@
|
||||
header {
|
||||
|
||||
.title {
|
||||
@extend .t-title-2;
|
||||
@extend .t-title4;
|
||||
}
|
||||
|
||||
.ss-icon {
|
||||
@@ -73,12 +73,13 @@
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.title {
|
||||
@extend .t-title-3;
|
||||
@extend .t-title6;
|
||||
color: $white;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-sub2;
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
|
||||
@@ -94,6 +95,7 @@
|
||||
}
|
||||
|
||||
.action {
|
||||
@extend .t-action4;
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
@@ -149,4 +151,4 @@
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
// studio alerts, prompts and notifications
|
||||
// studio - elements - system feedback
|
||||
// alerts, notifications, prompts, and status communication
|
||||
// ====================
|
||||
|
||||
// shared
|
||||
@@ -6,7 +7,7 @@
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-sub2;
|
||||
@extend .t-copy-sub1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,6 +37,7 @@
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include blue-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $blue-d2;
|
||||
}
|
||||
|
||||
@@ -53,6 +55,7 @@
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include orange-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $orange-d2;
|
||||
color: $gray-d4;
|
||||
}
|
||||
@@ -71,6 +74,7 @@
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include red-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $red-d2;
|
||||
}
|
||||
|
||||
@@ -88,6 +92,7 @@
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include blue-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $blue-d2;
|
||||
}
|
||||
|
||||
@@ -105,6 +110,7 @@
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include green-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $green-d2;
|
||||
}
|
||||
|
||||
@@ -121,8 +127,9 @@
|
||||
&.step-required {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
border-color: $pink-d2;
|
||||
@include pink-button();
|
||||
@include font-size(12); // needed due to bad button mixins for now
|
||||
border-color: $pink-d2;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -137,6 +144,7 @@
|
||||
|
||||
// prompts
|
||||
.wrapper-prompt {
|
||||
@extend .depth4;
|
||||
@include transition(all 0.05s ease-in-out);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -144,7 +152,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 10000;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
@@ -184,12 +191,12 @@
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@extend .t-action3;
|
||||
@extend .t-action4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend .t-action3;
|
||||
@extend .t-action4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -235,11 +242,11 @@
|
||||
|
||||
// notifications
|
||||
.wrapper-notification {
|
||||
@extend .depth3;
|
||||
@include clearfix();
|
||||
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
padding: $baseline ($baseline*2);
|
||||
|
||||
@@ -361,18 +368,19 @@
|
||||
@include font-size(22);
|
||||
width: flex-grid(1, 12);
|
||||
height: ($baseline*1.25);
|
||||
margin-top: ($baseline/4);
|
||||
margin-right: flex-gutter();
|
||||
text-align: right;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-sub2;
|
||||
@extend .t-copy-sub1;
|
||||
width: flex-grid(10, 12);
|
||||
color: $gray-l2;
|
||||
|
||||
.title {
|
||||
@extend .t-title-4;
|
||||
@extend .t-title7;
|
||||
margin-bottom: 0;
|
||||
color: $white;
|
||||
}
|
||||
@@ -409,13 +417,13 @@
|
||||
|
||||
.action-primary {
|
||||
@include blue-button();
|
||||
@extend .t-action3;
|
||||
border-color: $blue-d2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend .t-action3;
|
||||
|
||||
@extend .t-action4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -434,7 +442,7 @@
|
||||
}
|
||||
|
||||
.copy p {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -443,10 +451,10 @@
|
||||
|
||||
// alerts
|
||||
.wrapper-alert {
|
||||
@extend .depth2;
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-top: 1px solid $black;
|
||||
@@ -504,7 +512,6 @@
|
||||
|
||||
// adopted alerts
|
||||
.alert {
|
||||
@extend .t-copy-sub2;
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
margin: 0 auto;
|
||||
@@ -530,11 +537,11 @@
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-sub2;
|
||||
width: flex-grid(10, 12);
|
||||
color: $gray-l2;
|
||||
|
||||
.title {
|
||||
@extend .t-title7;
|
||||
margin-bottom: 0;
|
||||
color: $white;
|
||||
}
|
||||
@@ -568,12 +575,12 @@
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@extend .t-action3;
|
||||
@extend .t-action4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend .t-action3;
|
||||
@extend .t-action4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -590,7 +597,7 @@
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -730,7 +737,7 @@ body.uxdesign.alerts {
|
||||
border-radius: 3px;
|
||||
background: #fbf6e1;
|
||||
// background: #edbd3c;
|
||||
@extend .t-copy-sub1;
|
||||
font-size: 14px;
|
||||
@include clearfix;
|
||||
|
||||
.alert-message {
|
||||
2
cms/static/sass/elements/_system-help.scss
Normal file
2
cms/static/sass/elements/_system-help.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
// studio - elements - system help
|
||||
// ====================
|
||||
@@ -1,80 +1,132 @@
|
||||
// studio - elements - typography
|
||||
// ====================
|
||||
|
||||
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
|
||||
|
||||
// headings/titles
|
||||
.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5 {
|
||||
color: $gray-d3;
|
||||
.t-title {
|
||||
font-family: $f-sans-serif;
|
||||
}
|
||||
|
||||
.t-title-1 {
|
||||
.t-title1 {
|
||||
@extend .t-title;
|
||||
@include font-size(60);
|
||||
@include lh(60);
|
||||
}
|
||||
|
||||
.t-title2 {
|
||||
@extend .t-title;
|
||||
@include font-size(48);
|
||||
@include lh(48);
|
||||
}
|
||||
|
||||
.t-title3 {
|
||||
@include font-size(36);
|
||||
@include lh(36);
|
||||
}
|
||||
|
||||
.t-title-2 {
|
||||
.t-title4 {
|
||||
@extend .t-title;
|
||||
@include font-size(24);
|
||||
font-weight: 600;
|
||||
@include lh(24);
|
||||
}
|
||||
|
||||
.t-title-3 {
|
||||
.t-title5 {
|
||||
@extend .t-title;
|
||||
@include font-size(18);
|
||||
@include lh(18);
|
||||
}
|
||||
|
||||
.t-title6 {
|
||||
@extend .t-title;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
@include lh(16);
|
||||
}
|
||||
|
||||
.t-title-4 {
|
||||
.t-title7 {
|
||||
@extend .t-title;
|
||||
@include font-size(14);
|
||||
@include lh(14);
|
||||
}
|
||||
|
||||
.t-title-5 {
|
||||
.t-title8 {
|
||||
@extend .t-title;
|
||||
@include font-size(12);
|
||||
@include lh(12);
|
||||
}
|
||||
|
||||
.t-title9 {
|
||||
@extend .t-title;
|
||||
@include font-size(11);
|
||||
@include lh(11);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// copy
|
||||
.t-copy {
|
||||
font-family: $f-sans-serif;
|
||||
}
|
||||
|
||||
.t-copy-base {
|
||||
@extend .t-copy;
|
||||
@include font-size(16);
|
||||
@include lh(16);
|
||||
}
|
||||
|
||||
.t-copy-lead1 {
|
||||
@extend .t-copy;
|
||||
@include font-size(18);
|
||||
@include lh(18);
|
||||
}
|
||||
|
||||
.t-copy-lead2 {
|
||||
@include font-size(20);
|
||||
@extend .t-copy;
|
||||
@include font-size(24);
|
||||
@include lh(24);
|
||||
}
|
||||
|
||||
.t-copy-sub1 {
|
||||
@extend .t-copy;
|
||||
@include font-size(14);
|
||||
@include lh(14);
|
||||
}
|
||||
|
||||
.t-copy-sub2 {
|
||||
@include font-size(13);
|
||||
}
|
||||
|
||||
.t-copy-sub3 {
|
||||
@extend .t-copy;
|
||||
@include font-size(12);
|
||||
@include lh(12);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// actions/labels
|
||||
.t-action1 {
|
||||
@include font-size(14);
|
||||
font-weight: 600;
|
||||
@include font-size(18);
|
||||
@include lh(18);
|
||||
}
|
||||
|
||||
.t-action2 {
|
||||
@include font-size(13);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@include font-size(16);
|
||||
@include lh(16);
|
||||
}
|
||||
|
||||
.t-action3 {
|
||||
@include font-size(13);
|
||||
@include font-size(14);
|
||||
@include lh(14);
|
||||
}
|
||||
|
||||
.t-action4 {
|
||||
@include font-size(12);
|
||||
@include lh(12);
|
||||
}
|
||||
|
||||
|
||||
// ====================
|
||||
|
||||
// code
|
||||
.t-code {
|
||||
font-family: $f-monospace;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
border-color: $darkGrey;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
font-family: $sans-serif;
|
||||
font-family: $f-sans-serif;
|
||||
font-size: 12px;
|
||||
@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
|
||||
z-index: 100000 !important;
|
||||
@@ -62,4 +62,4 @@
|
||||
// JQUI timepicker
|
||||
.ui-timepicker-list {
|
||||
z-index: 100000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ body.signup, body.signin {
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
@@ -26,14 +26,14 @@ body.signup, body.signin {
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
h1 {
|
||||
@include font-size(32);
|
||||
@extend .t-title3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action {
|
||||
@include font-size(13);
|
||||
@extend .t-action3;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 40%;
|
||||
@@ -41,7 +41,7 @@ body.signup, body.signin {
|
||||
}
|
||||
|
||||
.introduction {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
}
|
||||
@@ -69,8 +69,8 @@ body.signup, body.signin {
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@extend .t-action2;
|
||||
@include transition(all .15s);
|
||||
@include font-size(15);
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
@@ -108,7 +108,7 @@ body.signup, body.signin {
|
||||
}
|
||||
|
||||
label {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
@@ -118,7 +118,7 @@ body.signup, body.signin {
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -171,8 +171,8 @@ body.signup, body.signin {
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend .t-copy-sub2;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
@include font-size(13);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-l3;
|
||||
@@ -212,7 +212,7 @@ body.signup, body.signin {
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
.bit {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub1;
|
||||
margin: 0 0 $baseline 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: 0 0 $baseline 0;
|
||||
@@ -225,7 +225,7 @@ body.signup, body.signin {
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(14);
|
||||
@extend .t-title7;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $gray-d2;
|
||||
font-weight: 600;
|
||||
@@ -245,7 +245,7 @@ body.signup, body.signin {
|
||||
position: relative;
|
||||
|
||||
.action-forgotpassword {
|
||||
@include font-size(13);
|
||||
@extend .t-action3;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -257,7 +257,7 @@ body.signup, body.signin {
|
||||
|
||||
// messages
|
||||
.message {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ body.course.checklists {
|
||||
|
||||
// visual status
|
||||
.viz-checklist-status {
|
||||
@include text-hide();
|
||||
@extend .text-hide;
|
||||
@include size(100%,($baseline/4));
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -40,7 +40,7 @@ body.course.checklists {
|
||||
background: $green;
|
||||
|
||||
.int {
|
||||
@include text-sr();
|
||||
@extend .text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,13 +83,13 @@ body.course.checklists {
|
||||
}
|
||||
|
||||
.checklist-status {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub1;
|
||||
width: flex-grid(3, 9);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
color: $gray-l2;
|
||||
|
||||
|
||||
|
||||
.icon-confirm {
|
||||
@include font-size(20);
|
||||
@@ -100,7 +100,7 @@ body.course.checklists {
|
||||
}
|
||||
|
||||
.status-count {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
color: $gray-d3;
|
||||
@@ -108,7 +108,7 @@ body.course.checklists {
|
||||
}
|
||||
|
||||
.status-amount {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
margin-left: ($baseline/4);
|
||||
color: $gray-d3;
|
||||
font-weight: 600;
|
||||
@@ -138,8 +138,8 @@ body.course.checklists {
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include font-size(14);
|
||||
@include grey-button();
|
||||
@extend .t-action3;
|
||||
font-weight: 400;
|
||||
float: right;
|
||||
|
||||
@@ -174,7 +174,7 @@ body.course.checklists {
|
||||
|
||||
// state - completed
|
||||
&.is-completed {
|
||||
|
||||
|
||||
.viz-checklist-status {
|
||||
|
||||
.viz-checklist-status-value {
|
||||
@@ -189,9 +189,9 @@ body.course.checklists {
|
||||
}
|
||||
|
||||
.checklist-status {
|
||||
|
||||
|
||||
.status-count, .status-amount, .icon-confirm {
|
||||
color: $green;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -244,17 +244,17 @@ body.course.checklists {
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-description {
|
||||
@extend .t-copy-sub1;
|
||||
@include transition(color .15s .25s ease-in-out);
|
||||
@include font-size(14);
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.task-support {
|
||||
@extend .t-copy-sub2;
|
||||
@include transition(opacity .15s .25s ease-in-out);
|
||||
@include font-size(12);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -274,14 +274,14 @@ body.course.checklists {
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@extend .t-action4;
|
||||
@include transition(all .15s);
|
||||
@include font-size(12);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include font-size(13);
|
||||
@extend .t-action4;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -322,7 +322,7 @@ body.course.checklists {
|
||||
|
||||
.action-primary {
|
||||
@include grey-button;
|
||||
@include font-size(12);
|
||||
@extend .t-action4;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -344,4 +344,4 @@ body.course.checklists {
|
||||
.content-supplementary {
|
||||
width: flex-grid(3, 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,14 +18,14 @@ body.index {
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .t-copy-base;
|
||||
@include clearfix();
|
||||
@include font-size(16);
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-d2;
|
||||
|
||||
|
||||
header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
@@ -62,7 +62,7 @@ body.index {
|
||||
color: $white;
|
||||
|
||||
h1 {
|
||||
@include font-size(52);
|
||||
@extend .t-title2;
|
||||
float: none;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
border-bottom: 1px solid $blue-l1;
|
||||
@@ -72,7 +72,7 @@ body.index {
|
||||
}
|
||||
|
||||
.logo {
|
||||
@include text-hide();
|
||||
@extend .text-hide;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
display: inline-block;
|
||||
@@ -83,7 +83,7 @@ body.index {
|
||||
}
|
||||
|
||||
.tagline {
|
||||
@include font-size(24);
|
||||
@extend .t-title4;
|
||||
margin: 0;
|
||||
color: $blue-l3;
|
||||
}
|
||||
@@ -198,13 +198,13 @@ body.index {
|
||||
margin-top: -($baseline/4);
|
||||
|
||||
h3 {
|
||||
@extend .t-title4;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
@include font-size(24);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> p {
|
||||
@include font-size(18);
|
||||
@extend .t-copy-lead1;
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
@@ -214,8 +214,8 @@ body.index {
|
||||
}
|
||||
|
||||
.list-proofpoints {
|
||||
@extend .t-copy-sub1;
|
||||
@include clearfix();
|
||||
@include font-size(14);
|
||||
width: flex-grid(9, 9);
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
|
||||
@@ -233,7 +233,7 @@ body.index {
|
||||
color: $gray-l1;
|
||||
|
||||
.title {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
font-weight: 500;
|
||||
color: $gray-d3;
|
||||
@@ -314,7 +314,7 @@ body.index {
|
||||
margin-top: -($baseline*1.5);
|
||||
|
||||
li {
|
||||
width: flex-grid(6, 12);
|
||||
width: flex-grid(6, 12);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -322,23 +322,23 @@ body.index {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@include transition(all .15s);
|
||||
@include font-size(18);
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.action-primary {
|
||||
@extend .t-action1;
|
||||
@include blue-button;
|
||||
@include transition(all .15s);
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include font-size(14);
|
||||
margin-top: ($baseline/2);
|
||||
&.action-secondary {
|
||||
@extend .t-action3;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ body.course.outline {
|
||||
width: 100px;
|
||||
|
||||
.status-label {
|
||||
@include font-size(12);
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: -5px;
|
||||
@@ -38,7 +39,6 @@ body.course.outline {
|
||||
@include border-radius(3px);
|
||||
color: $lightGrey;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
}
|
||||
@@ -57,6 +57,10 @@ body.course.outline {
|
||||
}
|
||||
|
||||
.menu {
|
||||
@include font-size(12);
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
opacity: 0.0;
|
||||
@@ -67,10 +71,6 @@ body.course.outline {
|
||||
padding: 8px 12px;
|
||||
background: $white;
|
||||
border: 1px solid $mediumGrey;
|
||||
font-size: 12px;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
|
||||
|
||||
li {
|
||||
@@ -167,7 +167,7 @@ body.course.outline {
|
||||
text-align: right;
|
||||
|
||||
.published-status {
|
||||
font-size: 12px;
|
||||
@include font-size(12);
|
||||
margin-right: 15px;
|
||||
|
||||
strong {
|
||||
@@ -185,19 +185,19 @@ body.course.outline {
|
||||
|
||||
.schedule-button,
|
||||
.edit-button {
|
||||
font-size: 11px;
|
||||
@include font-size(11);
|
||||
padding: 3px 15px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepair .date,
|
||||
.datepair .time {
|
||||
@include font-size(13);
|
||||
@include box-shadow(none);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
@include box-shadow(none);
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
cursor: pointer;
|
||||
@@ -231,10 +231,10 @@ body.course.outline {
|
||||
@include clearfix();
|
||||
|
||||
.section-name {
|
||||
@include font-size(19);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 350px;
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
}
|
||||
@@ -254,9 +254,9 @@ body.course.outline {
|
||||
background: $white;
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
|
||||
.save-button {
|
||||
@include blue-button;
|
||||
padding: 7px 20px 7px;
|
||||
@@ -275,7 +275,7 @@ body.course.outline {
|
||||
background: $lightGrey;
|
||||
|
||||
.published-status {
|
||||
font-size: 12px;
|
||||
@include font-size(12);
|
||||
margin-right: 15px;
|
||||
|
||||
strong {
|
||||
@@ -293,9 +293,8 @@ body.course.outline {
|
||||
|
||||
.schedule-button,
|
||||
.edit-button {
|
||||
font-size: 11px;
|
||||
padding: 3px 15px 5px;
|
||||
|
||||
@include font-size(11);
|
||||
padding: 0 15px 2px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -306,17 +305,17 @@ body.course.outline {
|
||||
width: 145px;
|
||||
|
||||
.status-label {
|
||||
@include font-size(12);
|
||||
@include border-radius(3px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
display: none;
|
||||
width: 100px;
|
||||
padding: 10px 35px 10px 10px;
|
||||
@include border-radius(3px);
|
||||
background: $lightGrey;
|
||||
color: $lightGrey;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
}
|
||||
@@ -335,6 +334,11 @@ body.course.outline {
|
||||
}
|
||||
|
||||
.menu {
|
||||
@include font-size(12);
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
@include transition(display .15s);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
opacity: 0.0;
|
||||
@@ -345,11 +349,7 @@ body.course.outline {
|
||||
padding: 8px 12px;
|
||||
background: $white;
|
||||
border: 1px solid $mediumGrey;
|
||||
font-size: 12px;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
@include transition(display .15s);
|
||||
|
||||
|
||||
|
||||
li {
|
||||
@@ -410,7 +410,7 @@ body.course.outline {
|
||||
}
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
.item-actions {
|
||||
margin-top: 21px;
|
||||
margin-right: 12px;
|
||||
|
||||
@@ -422,7 +422,7 @@ body.course.outline {
|
||||
|
||||
.expand-collapse-icon {
|
||||
float: left;
|
||||
margin: 29px 6px 16px 16px;
|
||||
margin: 25px 6px 16px 16px;
|
||||
@include transition(none);
|
||||
|
||||
&.expand {
|
||||
@@ -430,7 +430,7 @@ body.course.outline {
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -440,7 +440,7 @@ body.course.outline {
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
@include font-size(19);
|
||||
font-weight: 700;
|
||||
color: $blue;
|
||||
}
|
||||
@@ -460,9 +460,9 @@ body.course.outline {
|
||||
|
||||
.section-name-edit {
|
||||
input {
|
||||
font-size: 16px;
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
|
||||
.save-button {
|
||||
@include blue-button;
|
||||
padding: 7px 20px 7px;
|
||||
@@ -476,7 +476,7 @@ body.course.outline {
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
@include font-size(12);
|
||||
color: #878e9d;
|
||||
|
||||
strong {
|
||||
@@ -502,8 +502,8 @@ body.course.outline {
|
||||
&.new-section {
|
||||
|
||||
header {
|
||||
height: auto;
|
||||
@include clearfix();
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.expand-collapse-icon {
|
||||
@@ -522,12 +522,11 @@ body.course.outline {
|
||||
}
|
||||
|
||||
.toggle-button-sections {
|
||||
@include font-size(12);
|
||||
display: none;
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
|
||||
font-size: 13px;
|
||||
margin-top: ($baseline/4);
|
||||
color: $darkGrey;
|
||||
|
||||
&.is-shown {
|
||||
@@ -535,13 +534,13 @@ body.course.outline {
|
||||
}
|
||||
|
||||
.ss-icon {
|
||||
@include font-size(11);
|
||||
@include border-radius(20px);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
line-height: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -599,7 +598,7 @@ body.course.outline {
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
@include font-size(34);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -625,16 +624,16 @@ body.course.outline {
|
||||
}
|
||||
|
||||
label {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(14);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -645,7 +644,7 @@ body.course.outline {
|
||||
|
||||
.start-date,
|
||||
.start-time {
|
||||
font-size: 19px;
|
||||
@include font-size(19);
|
||||
}
|
||||
|
||||
.save-button {
|
||||
@@ -659,14 +658,14 @@ body.course.outline {
|
||||
|
||||
.save-button,
|
||||
.cancel-button {
|
||||
font-size: 16px;
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-all-button {
|
||||
@include font-size(13);
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: $darkGrey;
|
||||
}
|
||||
|
||||
@@ -686,7 +685,7 @@ body.course.outline {
|
||||
border: 1px solid $darkGrey;
|
||||
opacity : 0.2;
|
||||
&:hover {
|
||||
opacity : 1.0;
|
||||
opacity : 1.0;
|
||||
.section-item {
|
||||
background: $yellow !important;
|
||||
}
|
||||
@@ -701,4 +700,4 @@ body.course.outline {
|
||||
ol.ui-droppable .branch:first-child .section-item {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@ body.course.settings {
|
||||
}
|
||||
|
||||
.tip {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub2;
|
||||
width: flex-grid(5, 9);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
@@ -86,20 +86,20 @@ body.course.settings {
|
||||
|
||||
// in form -UI hints/tips/messages
|
||||
.instructions {
|
||||
@include font-size(14);
|
||||
@extend .t-copy-sub1;
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend .t-copy-sub2;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
@include font-size(13);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
.message-error {
|
||||
@include font-size(13);
|
||||
@extend .t-copy-sub1;
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/2);
|
||||
@@ -109,12 +109,13 @@ body.course.settings {
|
||||
// buttons
|
||||
.remove-item {
|
||||
@include white-button;
|
||||
@include font-size(13);
|
||||
@extend .t-action-3;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.new-button {
|
||||
@include font-size(13);
|
||||
// @extend .t-action-3; - bad buttons won't render this properly
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
// form basics
|
||||
@@ -158,8 +159,8 @@ body.course.settings {
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@extend .t-copy-base;
|
||||
@include placeholder($gray-l4);
|
||||
@include font-size(16);
|
||||
@include size(100%,100%);
|
||||
padding: ($baseline/2);
|
||||
|
||||
@@ -324,7 +325,7 @@ body.course.settings {
|
||||
|
||||
.action-primary {
|
||||
@include blue-button();
|
||||
@include font-size(13);
|
||||
@extend .t-action-3;
|
||||
font-weight: 600;
|
||||
|
||||
.icon {
|
||||
@@ -752,7 +753,7 @@ body.course.settings {
|
||||
|
||||
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
|
||||
.CodeMirror {
|
||||
@include font-size(16);
|
||||
@extend .t-copy-base;
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
|
||||
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
|
||||
|
||||
@@ -33,11 +33,11 @@ body.course.static-pages {
|
||||
display: none;
|
||||
padding: 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
|
||||
//Overrides general edit-box mixin
|
||||
.row {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
// This duplicates the styling from Unit page editing
|
||||
.module-actions {
|
||||
@@ -108,7 +108,7 @@ body.course.static-pages {
|
||||
|
||||
.component-actions {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
top: 20px;
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
@@ -135,12 +135,12 @@ body.course.static-pages {
|
||||
}
|
||||
|
||||
.static-page-item {
|
||||
position: relative;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
padding: 22px 20px;
|
||||
border: 1px solid $darkGrey;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
|
||||
|
||||
.page-name {
|
||||
@@ -189,4 +189,4 @@ body.course.static-pages {
|
||||
color: #3c3c3c;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user