541d20ef83
This commit implements STUD-1490, allowing creation of components on the container page. It also enables the delete and duplicate buttons now that new content can be created that would benefit. Note that it also creates shared functionality for adding components, and refactors the unit page to use it too.
1437 lines
28 KiB
SCSS
1437 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 {
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.file-uploader {
|
|
.upload-setting {
|
|
@extend %ui-btn-flat-outline;
|
|
@extend %t-action3;
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
padding: ($baseline/2);
|
|
font-weight: 600;
|
|
width: 49%;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.download-setting {
|
|
@extend %ui-btn-non;
|
|
@extend %t-action4;
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
padding: ($baseline/2);
|
|
font-weight: 600;
|
|
width: 49%;
|
|
text-align: center;
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
background-color: $blue;
|
|
}
|
|
}
|
|
|
|
.wrapper-uploader-actions {
|
|
width: 45%;
|
|
display: inline-block;
|
|
min-width: ($baseline*5);
|
|
}
|
|
}
|
|
|
|
//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 {
|
|
opacity: 0.7;
|
|
margin: 0 $baseline;
|
|
border-top: 1px solid $gray-l4;
|
|
background-color: $white;
|
|
padding: $baseline ($baseline/2);
|
|
|
|
&:first-child {
|
|
border-top: 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;
|
|
}
|
|
|
|
// actions - publish/edit
|
|
.publish-draft {
|
|
@extend %action;
|
|
}
|
|
|
|
.create-draft {
|
|
@extend %action;
|
|
}
|
|
}
|
|
|
|
|
|
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;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.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
|
|
|
|
.wrapper-comp-editor.latex-problem {
|
|
margin-top: ($baseline*2.5);
|
|
}
|
|
|
|
.launch-latex-compiler {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
background-color: $white;
|
|
padding: $baseline/2 0 $baseline/2 $baseline;
|
|
border-bottom: 1px solid $gray-l2;
|
|
}
|
|
|
|
// 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 {
|
|
border-color: $blue;
|
|
|
|
.container-drag {
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
}
|
|
}
|
|
|
|
.xblock-header {
|
|
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);
|
|
}
|
|
.discussion-preview {
|
|
font-style: italic;
|
|
color: $mediumGrey;
|
|
}
|
|
}
|
|
|
|
body.unit .component.editing {
|
|
.xmodule_DiscussionModule, .xmodule_HtmlModule, .xblock {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
body.view-unit .main-column .unit-body,
|
|
body.view-container {
|
|
|
|
// New Components
|
|
.new-component-item {
|
|
margin: $baseline 0 0 0;
|
|
border-top: 1px solid $gray-l3;
|
|
box-shadow: 0 2px 1px $shadow-l1 inset;
|
|
background-color: $lightGrey;
|
|
padding: $baseline;
|
|
|
|
.new-component {
|
|
text-align: center;
|
|
|
|
h5 {
|
|
color: $darkGreen;
|
|
}
|
|
}
|
|
|
|
.new-component-button {
|
|
display: block;
|
|
padding: $baseline;
|
|
text-align: center;
|
|
color: $green;
|
|
}
|
|
|
|
h5 {
|
|
@extend %t-title5;
|
|
margin: 0 0 $baseline 0;
|
|
color: $white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rendered-component {
|
|
display: none;
|
|
background: $white;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.new-component-type {
|
|
|
|
a,
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
|
|
a {
|
|
@extend %t-action3;
|
|
width: ($baseline*5);
|
|
height: ($baseline*5);
|
|
margin-right: ($baseline*.75);
|
|
margin-bottom: $baseline;
|
|
border: 1px solid $mediumGrey;
|
|
border-radius: ($baseline/4);
|
|
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
|
|
text-align: center;
|
|
color: $white;
|
|
|
|
.name {
|
|
@include box-sizing(border-box);
|
|
display: block;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-component-templates {
|
|
@include clearfix;
|
|
display: none;
|
|
margin: $baseline ($baseline*2);
|
|
border-radius: 3px;
|
|
border: 1px solid $mediumGrey;
|
|
background-color: $white;
|
|
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
|
|
|
|
.cancel-button {
|
|
@include white-button;
|
|
margin: $baseline 0 ($baseline/2) ($baseline/2);
|
|
}
|
|
|
|
.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 $green-d2;
|
|
background-color: $green-l1;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background: $green-s1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-type-tabs {
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
list-style-type: none;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
background-color: $lightBluishGrey;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
|
|
|
|
li:first-child {
|
|
margin-left: $baseline;
|
|
}
|
|
|
|
li {
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
opacity: 0.8;
|
|
float: left;
|
|
display: inline-block;
|
|
width: auto;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
|
|
background-color: tint($lightBluishGrey, 10%);
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
background-color: tint($lightBluishGrey, 20%);
|
|
}
|
|
|
|
&.ui-state-active {
|
|
@include active;
|
|
border: 0px;
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@extend %t-action3;
|
|
display: block;
|
|
padding: ($baseline*.75) ($baseline*1.25);
|
|
text-align: center;
|
|
color: $gray-d3;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
.new-component-template {
|
|
|
|
a {
|
|
@include transition(none);
|
|
border: 0px;
|
|
background: $white;
|
|
color: $gray-d3;
|
|
|
|
&:hover {
|
|
@include transition(background-color $tmg-f2 linear 0s);
|
|
background: tint($green,30%);
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
li {
|
|
border:none;
|
|
border-bottom: 1px dashed $lightGrey;
|
|
color: $white;
|
|
}
|
|
|
|
li:first-child a {
|
|
border-top: 0;
|
|
}
|
|
|
|
li:nth-child(2) a {
|
|
border-radius: 0;
|
|
}
|
|
|
|
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 {
|
|
@extend %t-copy-sub2;
|
|
@include transition(opacity $tmg-f2 linear 0s);
|
|
float: right;
|
|
position: relative;
|
|
top: 3px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
[class^="icon-"], .editor-indicator {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
|
|
[class^="icon-"] {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.editor-indicator {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific editor types
|
|
.empty {
|
|
|
|
a {
|
|
|
|
background: $white;
|
|
line-height: 1.4;
|
|
font-weight: 400;
|
|
color: $gray-d3;
|
|
|
|
|
|
&:hover {
|
|
background: tint($green,30%);
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|