Merge branch 'feature/cas/speed-editor' of git@github.com:MITx/mitx.git into feature/cas/speed-editor
This commit is contained in:
Don Mitchell
@@ -4,13 +4,7 @@
|
||||
width: 260px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.upload-button {
|
||||
@include blue-button;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 8px 30px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.asset-library {
|
||||
@include clearfix;
|
||||
|
||||
@@ -104,69 +98,69 @@
|
||||
}
|
||||
|
||||
.upload-modal {
|
||||
display: none;
|
||||
width: 640px !important;
|
||||
margin-left: -320px !important;
|
||||
display: none;
|
||||
width: 640px !important;
|
||||
margin-left: -320px !important;
|
||||
|
||||
.modal-body {
|
||||
height: auto !important;
|
||||
overflow-y: auto !important;
|
||||
text-align: center;
|
||||
}
|
||||
.modal-body {
|
||||
height: auto !important;
|
||||
overflow-y: auto !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choose-file-button {
|
||||
@include blue-button;
|
||||
padding: 10px 82px 12px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.choose-file-button {
|
||||
@include blue-button;
|
||||
padding: 10px 82px 12px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: none;
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
margin: 30px auto 10px;
|
||||
border: 1px solid $blue;
|
||||
.progress-bar {
|
||||
display: none;
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
margin: 30px auto 10px;
|
||||
border: 1px solid $blue;
|
||||
|
||||
&.loaded {
|
||||
border-color: #66b93d;
|
||||
&.loaded {
|
||||
border-color: #66b93d;
|
||||
|
||||
.progress-fill {
|
||||
background: #66b93d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-fill {
|
||||
background: #66b93d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
width: 0%;
|
||||
height: 50px;
|
||||
background: $blue;
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
}
|
||||
.progress-fill {
|
||||
width: 0%;
|
||||
height: 50px;
|
||||
background: $blue;
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
float: none;
|
||||
margin: 40px 0 30px;
|
||||
font-size: 34px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
float: none;
|
||||
margin: 40px 0 30px;
|
||||
font-size: 34px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@include white-button;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
padding: 0 !important;
|
||||
border-radius: 17px !important;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
}
|
||||
.close-button {
|
||||
@include white-button;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
padding: 0 !important;
|
||||
border-radius: 17px !important;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.embeddable {
|
||||
display: none;
|
||||
@@ -184,9 +178,9 @@
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@include white-button;
|
||||
display: none;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.copy-button {
|
||||
@include white-button;
|
||||
display: none;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// -------------------------------------
|
||||
//
|
||||
// Universal
|
||||
// Universal
|
||||
//
|
||||
// -------------------------------------
|
||||
|
||||
@@ -34,30 +34,6 @@ h1 {
|
||||
margin: 24px 6px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p + p,
|
||||
p + ul,
|
||||
p + ol {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0 2px;
|
||||
padding: 0px 5px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #eaeaea;
|
||||
font-family: Monaco, monospace;
|
||||
font-size: 12px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
@@ -56,106 +56,23 @@
|
||||
z-index: 10;
|
||||
margin: 20px 40px;
|
||||
|
||||
border: 1px solid #d1ddec;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
@include transition(none);
|
||||
|
||||
&:hover {
|
||||
border-color: #6696d7;
|
||||
|
||||
.drag-handle,
|
||||
.component-actions a {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
border-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
border-color: #3c3c3c;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
|
||||
position: relative;
|
||||
z-index: 99999;
|
||||
@include transition(all);
|
||||
|
||||
.drag-handle,
|
||||
.component-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.html-preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.component-placeholder {
|
||||
border-color: #6696d7;
|
||||
}
|
||||
|
||||
.xmodule_display {
|
||||
padding: 40px 20px 20px;
|
||||
}
|
||||
|
||||
.component-actions {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
@include transition(opacity .15s);
|
||||
}
|
||||
|
||||
.edit-button,
|
||||
.delete-button {
|
||||
float: left;
|
||||
padding: 3px 10px 4px;
|
||||
margin-left: 3px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
background: #d1ddec;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
@include transition(all .15s);
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.edit-icon,
|
||||
.delete-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -1px;
|
||||
right: -16px;
|
||||
z-index: -1;
|
||||
width: 15px;
|
||||
height: 100%;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border: 1px solid #d1ddec;
|
||||
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
|
||||
cursor: move;
|
||||
@include transition(all .15s);
|
||||
}
|
||||
|
||||
&.new-component-item {
|
||||
padding: 20px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
background: $lightGrey;
|
||||
@include clearfix;
|
||||
|
||||
.new-component-button {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #6d788b;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 22px;
|
||||
color: $blue;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rendered-component {
|
||||
@@ -164,36 +81,22 @@
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.new-component-type, .new-component-template {
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
|
||||
.new-component-type {
|
||||
a,
|
||||
li {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #437fbf;
|
||||
background-color: $blue;
|
||||
font-size: 13px;
|
||||
line-height: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@include box-shadow(0 1px 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .4) inset);
|
||||
@include transition(background-color .15s);
|
||||
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 20px rgba(255, 255, 255, .3) inset);
|
||||
}
|
||||
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
@@ -206,26 +109,64 @@
|
||||
}
|
||||
}
|
||||
|
||||
.new-component-type,
|
||||
.new-component-template {
|
||||
@include clearfix;
|
||||
|
||||
a {
|
||||
height: 60px;
|
||||
position: relative;
|
||||
border: 1px solid $darkGreen;
|
||||
background: $green;
|
||||
color: #fff;
|
||||
@include transition(background-color .15s);
|
||||
|
||||
&:hover {
|
||||
background: $brightGreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-component,
|
||||
.new-component-template {
|
||||
margin-bottom: 20px;
|
||||
|
||||
li:first-child {
|
||||
a {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
a {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 20px;
|
||||
border-bottom: none;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.new-component {
|
||||
text-align: center;
|
||||
|
||||
h5 {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new-component-templates {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
@include clearfix;
|
||||
|
||||
.cancel-button {
|
||||
@include blue-button;
|
||||
border-color: #30649c;
|
||||
@include white-button;
|
||||
}
|
||||
}
|
||||
|
||||
.new-component-templates {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -286,221 +227,11 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
background: $blue;
|
||||
padding: 20px;
|
||||
|
||||
h5 {
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.row {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video-id-field,
|
||||
.transcript-field {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.browse-button {
|
||||
@include blue-button;
|
||||
border-color: #3c3c3c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
@include orange-button;
|
||||
margin: 10px 8px 0 0;
|
||||
border-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@include white-button;
|
||||
border-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.problem-settings-button {
|
||||
@include blue-button;
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
padding: 12px 0 14px;
|
||||
text-align: center;
|
||||
|
||||
&.is-open {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-bar {
|
||||
position: relative;
|
||||
@include linear-gradient(top, #d4dee8, #c9d5e2);
|
||||
padding: 5px;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-bottom-color: #a5aaaf;
|
||||
@include clearfix;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 3px 10px 7px;
|
||||
margin-left: 7px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-tabs {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tab {
|
||||
height: 24px;
|
||||
padding: 7px 20px 3px;
|
||||
border: 1px solid #a5aaaf;
|
||||
border-radius: 3px 3px 0 0;
|
||||
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
|
||||
background-color: #e5ecf3;
|
||||
font-size: 13px;
|
||||
color: #3c3c3c;
|
||||
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
|
||||
|
||||
&.current {
|
||||
background: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.cheatsheet-toggle {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
padding: 0;
|
||||
margin: 3px 5px 0 16px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid #a5aaaf;
|
||||
background: #e5ecf3;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #565d64;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.problem-settings {
|
||||
display: none;
|
||||
padding: 20px 30px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
border: 1px solid #437fbf;
|
||||
border-bottom: none;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
font-size: 13px;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-top: none;
|
||||
background: #fff;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
}
|
||||
|
||||
.html-editor {
|
||||
.row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
width: 100%;
|
||||
height: 378px;
|
||||
background: #fff;
|
||||
color: #3c3c3c;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.editor-tabs {
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
right: 30px;
|
||||
z-index: 99;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
height: 24px;
|
||||
padding: 7px 20px 3px;
|
||||
margin-left: 7px;
|
||||
border: 1px solid #a5aaaf;
|
||||
border-radius: 3px 3px 0 0;
|
||||
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
|
||||
background-color: #e5ecf3;
|
||||
font-size: 13px;
|
||||
color: #3c3c3c;
|
||||
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
|
||||
|
||||
&.current {
|
||||
background: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.html-preview,
|
||||
.discussion-preview {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.discussion-id-field {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
|
||||
.component-editor {
|
||||
@include edit-box;
|
||||
display: none;
|
||||
padding: 20px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
@include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
|
||||
background-color: $blue;
|
||||
color: #fff;
|
||||
@include box-shadow(none);
|
||||
|
||||
.metadata_edit {
|
||||
@@ -517,12 +248,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid #3c3c3c;
|
||||
background: #fff;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
@@ -762,61 +487,3 @@ body.unit {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple-editor-cheatsheet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px);
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
@include transition(width .3s);
|
||||
|
||||
&.shown {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.cheatsheet-wrapper {
|
||||
width: 240px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 7px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include clearfix;
|
||||
padding-bottom: 5px !important;
|
||||
margin-bottom: 10px !important;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
|
||||
&.sample {
|
||||
width: 60px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user