1125 lines
23 KiB
SCSS
1125 lines
23 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);
|
|
}
|
|
}
|
|
|
|
.xmodule_display {
|
|
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;
|
|
}
|
|
|
|
// Module Actions, also used for Static 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 {
|
|
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
&.is-set {
|
|
opacity: 1.0;
|
|
background-color: $white;
|
|
|
|
.setting-input {
|
|
color: $blue-l1;
|
|
}
|
|
}
|
|
|
|
.wrapper-comp-setting {
|
|
display: inline-block;
|
|
min-width: 300px;
|
|
width: 55%;
|
|
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: 33%;
|
|
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;
|
|
}
|
|
|
|
input[type="number"] {
|
|
|
|
width: 38.5%;
|
|
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);
|
|
width: 35%;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// actions
|
|
.create-action, .remove-action, .setting-clear {
|
|
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
// STATE: disabled
|
|
&.is-disabled {
|
|
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
// STATE: disabled
|
|
&.is-disabled {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// ====================
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
// ====================
|
|
|
|
// Unit Page Sidebar
|
|
.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 {
|
|
font-size: 12px;
|
|
|
|
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;
|
|
}
|
|
|
|
.window-contents > ol {
|
|
@include tree-view;
|
|
|
|
.section-item {
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 11px;
|
|
padding: 2px 8px 4px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ol {
|
|
.section-item {
|
|
padding-left: $baseline;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin-left: $baseline;
|
|
}
|
|
}
|
|
|
|
ol ol {
|
|
.section-item {
|
|
padding-left: 34px;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin: 0 0 $baseline 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;
|
|
}
|
|
}
|
|
// ====================
|
|
|
|
// 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;
|
|
}
|