668 lines
12 KiB
SCSS
668 lines
12 KiB
SCSS
.unit .main-wrapper,
|
|
.subsection .main-wrapper {
|
|
margin: 40px;
|
|
}
|
|
|
|
//Problem selector requirements - TO DO: Marco -determine placement, integration for this
|
|
.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 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.unit-body {
|
|
.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;
|
|
@include 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;
|
|
}
|
|
|
|
.components {
|
|
|
|
> li {
|
|
position: relative;
|
|
z-index: 10;
|
|
margin: 20px 40px;
|
|
|
|
|
|
|
|
.title {
|
|
margin: 0 0 15px 0;
|
|
color: $mediumGrey;
|
|
|
|
.value {
|
|
}
|
|
}
|
|
|
|
&.new-component-item {
|
|
margin: 20px 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: 20px;
|
|
|
|
.new-component-button {
|
|
display: block;
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: #edf1f5;
|
|
}
|
|
|
|
h5 {
|
|
margin: 20px 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: 20px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
@include 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: 10px;
|
|
@include box-sizing(border-box);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-component-templates {
|
|
display: none;
|
|
margin: 20px 40px 20px 40px;
|
|
border-radius: 3px;
|
|
border: 1px solid $mediumGrey;
|
|
background-color: #fff;
|
|
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
|
|
@include clearfix;
|
|
|
|
.cancel-button {
|
|
margin: 20px 0px 10px 10px;
|
|
@include white-button;
|
|
}
|
|
|
|
.problem-type-tabs {
|
|
display: none;
|
|
}
|
|
|
|
// specific menu types
|
|
&.new-component-problem {
|
|
padding-bottom:10px;
|
|
|
|
.ss-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;
|
|
@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;
|
|
}
|
|
|
|
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%);
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
|
|
opacity:.8;
|
|
|
|
&:hover {
|
|
opacity:1;
|
|
background-color: tint($lightBluishGrey, 20%);
|
|
}
|
|
|
|
&.ui-state-active {
|
|
border: 0px;
|
|
@include active;
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
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 {
|
|
background: #fff;
|
|
border: 0px;
|
|
color: #3c3c3c;
|
|
@include transition (none);
|
|
|
|
&:hover {
|
|
background: tint($green,30%);
|
|
color: #fff;
|
|
@include transition(background-color .15s);
|
|
}
|
|
}
|
|
|
|
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 20px;
|
|
border-bottom: none;
|
|
font-weight: 500;
|
|
|
|
.name {
|
|
float: left;
|
|
|
|
.ss-icon {
|
|
@include transition(opacity .15s);
|
|
display: inline-block;
|
|
top: 1px;
|
|
margin-right: 5px;
|
|
opacity: 0.5;
|
|
width: 17;
|
|
height: 21px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.editor-indicator {
|
|
@include transition(opacity .15s);
|
|
float: right;
|
|
position: relative;
|
|
top: 3px;
|
|
font-size: 12px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.ss-icon, .editor-indicator {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
|
|
.ss-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;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.component-actions {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 9px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.xmodule_display {
|
|
padding: 40px 20px 20px;
|
|
overflow-x: auto;
|
|
|
|
h1 {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.wrapper-component-editor {
|
|
z-index: 9999;
|
|
position: relative;
|
|
background: $lightBluishGrey2;
|
|
}
|
|
|
|
.component-editor {
|
|
@include edit-box;
|
|
@include box-shadow(none);
|
|
display: none;
|
|
padding: 20px;
|
|
border-radius: 2px 2px 0 0;
|
|
|
|
.metadata_edit {
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.save-button {
|
|
margin-top: 10px;
|
|
margin: 15px 8px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.unit-settings {
|
|
.window-contents {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.unit-actions {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.published-alert {
|
|
display: none;
|
|
padding: 10px;
|
|
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 {
|
|
font-size: 12px;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.preview-button, .view-button {
|
|
@include white-button;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.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: 10px;
|
|
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 10px;
|
|
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 {
|
|
.url {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
.draft-tag,
|
|
.hidden-tag,
|
|
.private-tag,
|
|
.has-new-draft-tag {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.window-contents > ol {
|
|
@include tree-view;
|
|
|
|
.section-item {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 11px;
|
|
padding: 2px 8px 4px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
ol {
|
|
.section-item {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
ol ol {
|
|
.section-item {
|
|
padding-left: 34px;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin: 0 0 10px 41px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-state-draft {
|
|
.visibility,
|
|
|
|
.edit-draft-message,
|
|
.view-button {
|
|
display: none;
|
|
}
|
|
|
|
.published-alert {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.edit-state-public {
|
|
.delete-draft,
|
|
.component-actions,
|
|
.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;
|
|
}
|
|
}
|
|
|
|
// editing units from courseware
|
|
body.unit {
|
|
|
|
.component {
|
|
padding-top: 30px;
|
|
|
|
.component-actions {
|
|
@include box-sizing(border-box);
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 15px;
|
|
top: 0;
|
|
left: 0;
|
|
border-bottom: 1px solid $lightBluishGrey2;
|
|
background: $lightGrey;
|
|
}
|
|
|
|
&.editing {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|