fe847720ea
Detailed commit messages: deleted old tinymce new tinymce js changes to support new tinymce scss changes for alignments Include all the controls on the toolbar that we previously had. Changes to support Bulk e-mail usage. adding new studio skin for TinyMCE4 Get handling of static image links working again. Delete old Studio skin. Version 1.3 of CodeMirror plugin. Modify paths for location of CodeMirror files. Fire events when CodeMirror Editor is open and closed. Needed to switch static links back and forth. Remove CodeMirror tabbed editor. fixed tinymce visual editor css Change how we detect that an image has been inserted. made the codemirror look more studio-like reordered the tinymce buttons Update unit tests. Update acceptance test for image plugin. Make sure to strip out temporary caret. It can get left behind in style blocks. Test for style block being maintained. Allow TinyMCE to create p's, else formatting doesn't work. Add tests for toolbar buttons and converting links. Add test for code format toolbar button. Remove unnecessary code. Remove unused testing templates and unused tabs. Update tinymce paths. Fire an event with the link plugin closes so we can rewrite links. pep8 Updates from code review. Change the name of the button to "Edit HTML". Changed menu name for consistency, but we don't show it. Changed name of "code" toolbar button to "Code block". Switch from tabbed Visual/HTML Editor for HTML modules to showing the code editor as a plugin within TinyMCE (triggered from toolbar). STUD-1422 Fire events before and after the image dialog is shown. We use this to rewrite links. Change the event handling for image plugin. Fixes FireFox bug, and allows us to correct the image path when we show the plugin (as opposed ot only correcting path when we close the plugin). Code review feedback. Fire events before and after the link dialog is shown. This allows us to convert the static links. Remove unnecessary helper method. keeping the component editor inside the component window Use compressed CodeMirror file. replaced code icon in TinyMCE editor; simplified UI on TMCE toolbar Change code editor icon to say HTML. Move code style block button. Update tests for minor UI changes. Code editor button no longer shows an icon, and code style toolbar button location has moved. Fix typos.
1398 lines
28 KiB
SCSS
1398 lines
28 KiB
SCSS
// studio - views - unit
|
|
// ====================
|
|
|
|
body.course.unit,.view-unit {
|
|
|
|
.main-wrapper {
|
|
margin-top: ($baseline*2);
|
|
}
|
|
|
|
//Problem Selector tab menu requirements
|
|
.js .tabs .tab {
|
|
display: none;
|
|
}
|
|
//end problem selector reqs
|
|
|
|
.main-column {
|
|
clear: both;
|
|
float: left;
|
|
width: 70%;
|
|
}
|
|
|
|
.unit-body.published {
|
|
.components > li {
|
|
border: none;
|
|
|
|
.rendered-component {
|
|
padding: 0 $baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.unit-body {
|
|
|
|
.unit-name-input {
|
|
padding: $baseline 2*$baseline;
|
|
|
|
label {
|
|
display: block;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.breadcrumbs {
|
|
border-radius: 3px 3px 0 0;
|
|
border-bottom: 1px solid #cbd1db;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
|
|
background-color: #edf1f5;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
|
|
@include clearfix;
|
|
|
|
li {
|
|
float: left;
|
|
}
|
|
|
|
a,
|
|
.current-page {
|
|
display: block;
|
|
padding: 15px 35px 15px 30px;
|
|
font-size: 14px;
|
|
background: url(../img/breadcrumb-arrow.png) no-repeat right center;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 30px 40px 30px 0;
|
|
color: #646464;
|
|
font-size: 19px;
|
|
font-weight: 300;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
// ====================
|
|
|
|
// Component List Meta
|
|
.components {
|
|
|
|
> li {
|
|
position: relative;
|
|
z-index: 10;
|
|
margin: $baseline 2*$baseline;
|
|
|
|
.title {
|
|
margin: 0 0 15px 0;
|
|
color: $mediumGrey;
|
|
|
|
.value {
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// New Components
|
|
&.new-component-item {
|
|
margin: $baseline 0px;
|
|
border-top: 1px solid $mediumGrey;
|
|
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
|
|
background-color: $lightGrey;
|
|
margin-bottom: 0px;
|
|
padding-bottom: $baseline;
|
|
|
|
.new-component-button {
|
|
display: block;
|
|
padding: $baseline;
|
|
text-align: center;
|
|
color: #edf1f5;
|
|
}
|
|
|
|
h5 {
|
|
margin: $baseline 0px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.rendered-component {
|
|
display: none;
|
|
background: #fff;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.new-component-type {
|
|
|
|
a,
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
|
|
a {
|
|
border: 1px solid $mediumGrey;
|
|
width: 100px;
|
|
height: 100px;
|
|
color: #fff;
|
|
margin-right: 15px;
|
|
margin-bottom: $baseline;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
|
|
|
|
.name {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: $baseline/2;
|
|
@include box-sizing(border-box);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-component-templates {
|
|
display: none;
|
|
margin: $baseline 2*$baseline;
|
|
border-radius: 3px;
|
|
border: 1px solid $mediumGrey;
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
|
|
@include clearfix;
|
|
|
|
.cancel-button {
|
|
margin: $baseline 0px $baseline/2 $baseline/2;
|
|
@include white-button;
|
|
}
|
|
|
|
.problem-type-tabs {
|
|
display: none;
|
|
}
|
|
|
|
// specific menu types
|
|
&.new-component-problem {
|
|
padding-bottom: $baseline/2;
|
|
|
|
[class^="icon-"], .editor-indicator {
|
|
display: inline-block;
|
|
}
|
|
|
|
.problem-type-tabs {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-component-type,
|
|
.new-component-template {
|
|
@include clearfix;
|
|
|
|
a {
|
|
position: relative;
|
|
border: 1px solid $darkGreen;
|
|
background: tint($green,20%);
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: $brightGreen;
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-type-tabs {
|
|
list-style-type: none;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
background-color: $lightBluishGrey;
|
|
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: $baseline;
|
|
}
|
|
|
|
li {
|
|
float:left;
|
|
display:inline-block;
|
|
text-align:center;
|
|
width: auto;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
background-color: tint($lightBluishGrey, 10%);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
|
|
opacity: 0.8;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
background-color: tint($lightBluishGrey, 20%);
|
|
}
|
|
|
|
&.ui-state-active {
|
|
border: 0px;
|
|
@include active;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: 15px 25px;
|
|
font-size: 15px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
color: #3c3c3c;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
.new-component-template {
|
|
|
|
a {
|
|
@include transition(none);
|
|
background: #fff;
|
|
border: 0px;
|
|
color: #3c3c3c;
|
|
|
|
&:hover {
|
|
@include transition(background-color $tmg-f2 linear 0s);
|
|
background: tint($green,30%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
li {
|
|
border:none;
|
|
border-bottom: 1px dashed $lightGrey;
|
|
color: #fff;
|
|
}
|
|
|
|
li:first-child {
|
|
a {
|
|
border-top: 0px;
|
|
}
|
|
}
|
|
|
|
li:nth-child(2) {
|
|
a {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@include clearfix();
|
|
display: block;
|
|
padding: 7px $baseline;
|
|
border-bottom: none;
|
|
font-weight: 500;
|
|
|
|
.name {
|
|
float: left;
|
|
|
|
[class^="icon-"] {
|
|
@include transition(opacity $tmg-f2 linear 0s);
|
|
display: inline-block;
|
|
top: 1px;
|
|
margin-right: 5px;
|
|
opacity: 0.5;
|
|
width: 17;
|
|
height: 21px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.editor-indicator {
|
|
@include transition(opacity $tmg-f2 linear 0s);
|
|
float: right;
|
|
position: relative;
|
|
top: 3px;
|
|
font-size: 12px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
[class^="icon-"], .editor-indicator {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
|
|
[class^="icon-"] {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.editor-indicator {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific editor types
|
|
.empty {
|
|
|
|
a {
|
|
line-height: 1.4;
|
|
font-weight: 400;
|
|
background: #fff;
|
|
color: #3c3c3c;
|
|
|
|
|
|
&:hover {
|
|
background: tint($green,30%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-component {
|
|
text-align: center;
|
|
|
|
h5 {
|
|
color: $darkGreen;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.wrapper-alert-error {
|
|
margin-top: ($baseline*1.25);
|
|
box-shadow: none;
|
|
border-top: 5px solid $red-l1;
|
|
|
|
.copy,
|
|
.title {
|
|
color: $white;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// Component Drag and Drop, Non-Edit Module Rendering, Styling
|
|
.component {
|
|
border: 1px solid $lightBluishGrey2;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
@include transition(none);
|
|
|
|
&:hover {
|
|
border-color: #6696d7;
|
|
|
|
.drag-handle {
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
}
|
|
}
|
|
|
|
&.editing {
|
|
border: 1px solid $lightBluishGrey2;
|
|
z-index: auto;
|
|
|
|
.drag-handle,
|
|
.component-actions {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.component-placeholder {
|
|
border-color: #6696d7;
|
|
}
|
|
|
|
.drag-handle {
|
|
position: absolute;
|
|
display: block;
|
|
top: -1px;
|
|
right: -16px;
|
|
z-index: 10;
|
|
width: 15px;
|
|
height: 100%;
|
|
border-radius: 0 3px 3px 0;
|
|
border: 1px solid $lightBluishGrey2;
|
|
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
|
|
cursor: move;
|
|
@include transition(none);
|
|
}
|
|
}
|
|
|
|
// Special xBlock and xModule styling
|
|
.xblock-type-container {
|
|
|
|
.xblock-header-elementlevel {
|
|
line-height: $baseline*2;
|
|
min-height: $baseline*2;
|
|
}
|
|
|
|
.xblock-render-elementlevel {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.xblock-student_view {
|
|
padding: 2*$baseline $baseline $baseline;
|
|
overflow-x: auto;
|
|
|
|
h1 {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// UI: DnD - specific elems/cases - unit
|
|
.courseware-unit {
|
|
|
|
// STATE: was dropped
|
|
&.was-dropped {
|
|
|
|
> .section-item {
|
|
background-color: $ui-update-color !important; // nasty, but needed for specificity
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// Component Editing
|
|
.wrapper-component-editor {
|
|
z-index: 9999;
|
|
position: relative;
|
|
background: $white;
|
|
}
|
|
|
|
.component-editor {
|
|
@include edit-box;
|
|
box-shadow: none;
|
|
display: none;
|
|
padding: 0;
|
|
border-radius: 2px 2px 0 0;
|
|
|
|
h3 {
|
|
margin-bottom: $baseline/2;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Module Actions, also used for Pages
|
|
.module-actions {
|
|
box-shadow: inset 0 1px 2px $shadow;
|
|
border-top: 1px solid $gray-l1;
|
|
padding: ($baseline*0.75) $baseline;
|
|
background: $gray-l6;
|
|
|
|
.action {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: ($baseline/4);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button;
|
|
@extend %t-action2;
|
|
@include transition(all .15s);
|
|
display: inline-block;
|
|
padding: ($baseline/5) $baseline;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.action-secondary {
|
|
@include grey-button;
|
|
@extend %t-action2;
|
|
@include transition(all .15s);
|
|
display: inline-block;
|
|
padding: ($baseline/5) $baseline;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
|
|
.component-edit-header {
|
|
@include box-sizing(border-box);
|
|
padding: 18px 0 18px $baseline;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: $blue;
|
|
border-bottom: 1px solid $blue-d2;
|
|
color: $white;
|
|
|
|
//Component Name
|
|
.component-name {
|
|
@extend %t-copy-sub1;
|
|
width: 50%;
|
|
color: $white;
|
|
font-weight: 600;
|
|
|
|
em {
|
|
display: inline-block;
|
|
margin-right: ($baseline/4);
|
|
font-weight: 400;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
//Nav-Edit Modes
|
|
.nav-edit-modes {
|
|
list-style: none;
|
|
right: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
padding: 12px ($baseline*0.75);
|
|
|
|
.mode {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
|
|
&.inactive-mode{
|
|
display: none;
|
|
}
|
|
|
|
&.active-mode a {
|
|
|
|
@include blue-button;
|
|
|
|
&.is-set {
|
|
@include linear-gradient($blue, $blue);
|
|
color: $blue-d1;
|
|
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
|
background-color: $blue-d4;
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 1px 2px 1px $shadow;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Editor Wrapper
|
|
.wrapper-comp-editor {
|
|
display: block;
|
|
|
|
// Because the editor may be a CodeMirror editor (which must be visible at the time it is created
|
|
// in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active".
|
|
&.is-inactive {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Settings Wrapper
|
|
.wrapper-comp-settings {
|
|
display: none;
|
|
|
|
&.is-active {
|
|
display: block;
|
|
}
|
|
|
|
//settings-list
|
|
.list-input.settings-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
overflow: auto;
|
|
max-height: 400px;
|
|
|
|
//chrome scrollbar visibility correction
|
|
&::-webkit-scrollbar {
|
|
-webkit-appearance: none;
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 8px;
|
|
border: 2px solid $gray-l2;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
//component-setting-entry
|
|
.field.comp-setting-entry {
|
|
background-color: $white;
|
|
padding: $baseline;
|
|
border-bottom: 1px solid $gray-l2;
|
|
opacity: 0.7;
|
|
|
|
&:last-child {
|
|
//margin-bottom: 0;
|
|
}
|
|
|
|
//no required component settings currently
|
|
&.required {
|
|
label {
|
|
//font-weight: 600;
|
|
}
|
|
label:after {
|
|
//margin-left: ($baseline/4);
|
|
//content: "*";
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
&.is-set {
|
|
opacity: 1.0;
|
|
background-color: $white;
|
|
|
|
.setting-input {
|
|
color: $blue-l1;
|
|
}
|
|
}
|
|
|
|
.wrapper-comp-setting {
|
|
min-width: 300px;
|
|
top: 0;
|
|
vertical-align: top;
|
|
margin-bottom:5px;
|
|
position: relative;
|
|
}
|
|
|
|
.setting-label {
|
|
@extend %t-copy-sub1;
|
|
@include transition(color $tmg-f2 ease-in-out 0s);
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
position: relative;
|
|
left: 0;
|
|
width: 25%;
|
|
min-width: 100px;
|
|
margin-right: ($baseline/2);
|
|
font-weight: 600;
|
|
|
|
&.is-focused {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
input, select, input[type="number"] {
|
|
@include placeholder($gray-l4);
|
|
@include font-size(16);
|
|
@include size(100%,100%);
|
|
padding: ($baseline/2);
|
|
min-width: 100px;
|
|
width: 45%;
|
|
|
|
//&.long {
|
|
//
|
|
//}
|
|
|
|
//&.short {
|
|
//}
|
|
|
|
//&.error {
|
|
// border-color: $red;
|
|
//}
|
|
|
|
//&:focus {
|
|
// + .tip {
|
|
// color: $gray;
|
|
// }
|
|
border-radius: 3px;
|
|
border: 1px solid $gray-l2;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//Allows users to copy full value of disabled inputs.
|
|
input.is-disabled{
|
|
text-overflow: clip;
|
|
opacity: .5;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 42%;
|
|
box-shadow: 0 1px 2px $shadow-l1 inset;
|
|
//For webkit browsers which render number fields differently, make input wider.
|
|
-moz-column-width: {
|
|
width: 32%;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #FFFCF1;
|
|
}
|
|
}
|
|
|
|
select {
|
|
//box-shadow: 0 1px 2px $shadow-l1 inset;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 1px $shadow;
|
|
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
|
background-color: $yellow;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $yellow;
|
|
}
|
|
}
|
|
|
|
.action.setting-clear {
|
|
@include font-size(11);
|
|
color: $gray;
|
|
width: 25px;
|
|
height: 25px;
|
|
vertical-align: middle;
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
margin: 0 $baseline/2;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
border: 1px solid $gray-l1;
|
|
background-color: $gray-l4;
|
|
|
|
&:hover {
|
|
box-shadow: 0 1px 1px $shadow;
|
|
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
|
background-color: $blue-s3;
|
|
border: 1px solid $blue-s3;
|
|
color: $white;
|
|
}
|
|
|
|
&.inactive {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.setting-help {
|
|
@include font-size(12);
|
|
display: inline-block;
|
|
font-color: $gray-l6;
|
|
min-width: ($baseline*10);
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
|
|
// TYPE: enumerated lists of metadata sets
|
|
.metadata-list-enum {
|
|
|
|
* {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
// label
|
|
.setting-label {
|
|
vertical-align: top;
|
|
margin-top: ($baseline/2);
|
|
}
|
|
|
|
// inputs and labels
|
|
.wrapper-list-settings {
|
|
@include size(45%,100%);
|
|
display: inline-block;
|
|
min-width: ($baseline*5);
|
|
|
|
// enumerated fields
|
|
.list-settings {
|
|
margin: 0;
|
|
|
|
.list-settings-item {
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
// inputs
|
|
.input {
|
|
width: 80%;
|
|
margin-right: ($baseline/2);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.setting-clear {
|
|
vertical-align: top;
|
|
margin-top: ($baseline/4);
|
|
}
|
|
|
|
.create-setting {
|
|
@extend %ui-btn-flat-outline;
|
|
@extend %t-action3;
|
|
display: block;
|
|
width: 100%;
|
|
padding: ($baseline/2);
|
|
font-weight: 600;
|
|
|
|
*[class^="icon-"] {
|
|
margin-right: ($baseline/4);
|
|
}
|
|
}
|
|
|
|
.remove-setting {
|
|
@include transition(color 0.25s ease-in-out);
|
|
@include font-size(20);
|
|
display: inline-block;
|
|
background: transparent;
|
|
color: $blue-l3;
|
|
|
|
&:hover {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
// TYPE: Dict
|
|
.metadata-dict {
|
|
* {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
// label
|
|
.setting-label {
|
|
vertical-align: top;
|
|
margin-top: ($baseline*.75);
|
|
}
|
|
|
|
// inputs and labels
|
|
.wrapper-dict-settings {
|
|
width: 55%;
|
|
display: inline-block;
|
|
min-width: 240px;
|
|
|
|
// enumerated fields
|
|
.list-settings {
|
|
margin: ($baseline/2) 0 0;
|
|
|
|
.list-settings-item {
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
// inputs
|
|
.input {
|
|
width: 43%;
|
|
margin-right: ($baseline/4);
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
|
|
&.input-value {
|
|
margin-right: ($baseline/2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.setting-clear {
|
|
vertical-align: top;
|
|
margin: ($baseline*.75) 0 0 0;
|
|
}
|
|
|
|
.create-setting {
|
|
@extend %ui-btn-flat-outline;
|
|
@extend %t-action3;
|
|
display: block;
|
|
width: 88%;
|
|
padding: ($baseline/2);
|
|
font-weight: 600;
|
|
|
|
*[class^="icon-"] {
|
|
margin-right: ($baseline/4);
|
|
}
|
|
}
|
|
|
|
.remove-setting {
|
|
@include transition(color 0.25s ease-in-out);
|
|
@include font-size(20);
|
|
display: inline-block;
|
|
background: transparent;
|
|
color: $blue-l3;
|
|
|
|
&:hover {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// ====================
|
|
|
|
// Editing Units from Courseware
|
|
//uses similar styling as static-pages.scss
|
|
body.unit {
|
|
|
|
.component {
|
|
|
|
|
|
.wrapper-component-action-header {
|
|
@include box-sizing(border-box);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: $baseline/4 $baseline/2;
|
|
width: 100%;
|
|
border-bottom: 1px solid $gray-l4;
|
|
background-color: $gray-l6;
|
|
}
|
|
|
|
.component-header {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
padding: $baseline/2 0px 0px $baseline/4;
|
|
max-width: 60%;
|
|
color: $gray-l1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.component-actions {
|
|
display: inline-block;
|
|
float: right;
|
|
max-width: 40%;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
&.editing {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// Component Header Actions
|
|
// uses similar styling as assets.scss, static-pages.scss
|
|
|
|
body.unit {
|
|
|
|
.component-actions {
|
|
|
|
.action-item {
|
|
display: inline-block;
|
|
margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
|
|
|
|
.action-button {
|
|
display: block;
|
|
padding: 0 $baseline/2;
|
|
width: auto;
|
|
height: ($baseline*1.5);
|
|
border-radius: 3px;
|
|
color: $gray-l1;
|
|
|
|
&:hover {
|
|
background-color: $blue;
|
|
color: $gray-l6;
|
|
}
|
|
|
|
.action-button-text {
|
|
padding-left: 1px;
|
|
vertical-align: bottom;
|
|
text-transform: uppercase;
|
|
line-height: 17px;
|
|
}
|
|
|
|
&.delete-button:hover {
|
|
background-color: $gray-l1;
|
|
}
|
|
}
|
|
|
|
[class^="icon-"] {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// Unit Page Sidebar
|
|
|
|
.sidebar {
|
|
|
|
label {
|
|
@extend %t-title8;
|
|
}
|
|
}
|
|
|
|
.unit-settings {
|
|
|
|
.window-contents {
|
|
padding: $baseline/2 $baseline;
|
|
}
|
|
|
|
.unit-actions {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.published-alert {
|
|
display: none;
|
|
padding: $baseline/2;
|
|
border: 1px solid #edbd3c;
|
|
border-radius: 3px;
|
|
background: #fbf6e1;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
|
|
div {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
input[type="radio"] {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.status {
|
|
@extend %t-copy-sub2;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.preview-button, .view-button {
|
|
@include white-button;
|
|
margin-bottom: $baseline/2;
|
|
}
|
|
|
|
.publish-button {
|
|
@include orange-button;
|
|
}
|
|
|
|
.delete-button {
|
|
@include blue-button;
|
|
}
|
|
|
|
.delete-draft {
|
|
display: inline-block;
|
|
}
|
|
|
|
.delete-button,
|
|
.preview-button,
|
|
.publish-button,
|
|
.view-button {
|
|
font-size: 11px;
|
|
margin-top: $baseline/2;
|
|
padding: 6px 15px 8px;
|
|
}
|
|
}
|
|
|
|
.unit-history {
|
|
&.collapsed {
|
|
h4 {
|
|
border-bottom: none;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.window-contents {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
border: 1px solid #ced2db;
|
|
|
|
li {
|
|
display: block;
|
|
padding: 6px 8px 8px $baseline/2;
|
|
background: #edf1f5;
|
|
font-size: 12px;
|
|
|
|
&:hover {
|
|
background: #fffcf1;
|
|
|
|
.item-actions {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.checked {
|
|
background: #d1dae3;
|
|
}
|
|
|
|
.item-actions {
|
|
display: none;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.unit-location {
|
|
|
|
// unit id
|
|
.wrapper-unit-id {
|
|
|
|
.unit-id {
|
|
|
|
.label {
|
|
@extend %t-title7;
|
|
margin-bottom: ($baseline/4);
|
|
color: $gray-d1;
|
|
}
|
|
|
|
.value {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.url {
|
|
box-shadow: none;
|
|
width: 100%;
|
|
margin-bottom: $baseline/2;
|
|
}
|
|
|
|
.draft-tag,
|
|
.hidden-tag,
|
|
.private-tag,
|
|
.has-new-draft-tag {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.unit-tree-location {
|
|
|
|
.section-name {
|
|
@extend %t-title8;
|
|
}
|
|
|
|
|
|
.subsection,
|
|
.courseware-unit {
|
|
margin: ($baseline/4) 0 0 ($baseline);
|
|
}
|
|
|
|
.courseware-unit .section-item {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.section-item {
|
|
@include transition(background $tmg-avg ease-in-out 0);
|
|
@include box-sizing(border-box);
|
|
@extend %t-copy-sub2;
|
|
display: inline-block;
|
|
width: 100%;
|
|
background: $gray-l5;
|
|
padding: 6px 8px 8px 16px;
|
|
vertical-align: top;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: $gray;
|
|
|
|
&:hover {
|
|
background: $blue-l5;
|
|
color: $blue;
|
|
}
|
|
|
|
&.editing {
|
|
background-color: $orange-l3;
|
|
}
|
|
|
|
.public-item {
|
|
color: $black;
|
|
}
|
|
|
|
.private-item {
|
|
color: $gray-l1;
|
|
}
|
|
|
|
.draft-item {
|
|
color: $yellow-d1;
|
|
}
|
|
|
|
.public-item:hover,
|
|
.private-item:hover,
|
|
.draft-item:hover {
|
|
color: $blue;
|
|
}
|
|
|
|
.draft-item:after,
|
|
.public-item:after,
|
|
.private-item:after {
|
|
@include font-size(9);
|
|
margin-left: 3px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.draft-item:after {
|
|
content: "- draft";
|
|
}
|
|
|
|
.private-item:after {
|
|
content: "- private";
|
|
}
|
|
}
|
|
|
|
.new-unit-item {
|
|
@extend %ui-btn-flat-outline;
|
|
@extend %t-action4;
|
|
width: 90%;
|
|
margin: 0 0 ($baseline/2) ($baseline/4);
|
|
border: 1px solid transparent;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
font-weight: normal;
|
|
color: $gray-l2;
|
|
text-align: left;
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-state-draft {
|
|
.visibility,
|
|
|
|
.edit-draft-message,
|
|
.view-button {
|
|
display: none;
|
|
}
|
|
|
|
.published-alert {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.edit-state-public {
|
|
.delete-draft,
|
|
.wrapper-component-action-header,
|
|
.new-component-item,
|
|
.editing-draft-alert,
|
|
.publish-draft-message,
|
|
.preview-button {
|
|
display: none;
|
|
}
|
|
|
|
.published-alert {
|
|
display: block;
|
|
}
|
|
|
|
.drag-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.edit-state-private {
|
|
.delete-draft,
|
|
.publish-draft,
|
|
.editing-draft-alert,
|
|
.create-draft,
|
|
.view-button {
|
|
display: none;
|
|
}
|
|
}
|
|
// ====================
|
|
|
|
// Latex Compiler
|
|
.launch-latex-compiler {
|
|
background-color: $white;
|
|
padding: $baseline/2 0 $baseline/2 $baseline;
|
|
border-bottom: 1px solid $gray-l2;
|
|
opacity: 0.8;
|
|
|
|
|
|
&:hover {
|
|
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
|
opacity: 1.0s;
|
|
}
|
|
}
|
|
|
|
// hides latex compiler button if settings mode is-active
|
|
div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
|
|
display: none;
|
|
}
|
|
|
|
// ====================
|
|
|
|
// xblock - unit page container
|
|
|
|
body.unit .xblock-type-container {
|
|
@extend %wrap-xblock;
|
|
margin: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
border-color: $blue;
|
|
|
|
.container-drag {
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
}
|
|
}
|
|
|
|
.xblock-header {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
border-radius: ($baseline/5);
|
|
|
|
.xblock-details {
|
|
font-size: .9em;
|
|
}
|
|
}
|
|
|
|
// UI: container xblock drag handle
|
|
|
|
// TODO: abstract out drag handles into generic control used on unit, container, outline pages.
|
|
.container-drag {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0px;
|
|
right: -16px;
|
|
z-index: 10;
|
|
width: 16px;
|
|
height: 50px;
|
|
border-radius: 0 3px 3px 0;
|
|
border: 1px solid $lightBluishGrey2;
|
|
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
|
|
cursor: move;
|
|
@include transition(none);
|
|
}
|
|
|
|
.xblock-render {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// UI: special case discussion, HTML xmodule styling
|
|
|
|
body.unit .component {
|
|
.xmodule_DiscussionModule, .xmodule_HtmlModule, .xblock {
|
|
margin-top: ($baseline*1.5);
|
|
}
|
|
}
|
|
|
|
body.unit .component.editing {
|
|
.xmodule_DiscussionModule, .xmodule_HtmlModule, .xblock {
|
|
margin-top: 0;
|
|
}
|
|
}
|