575 lines
12 KiB
SCSS
575 lines
12 KiB
SCSS
// studio - views - textbooks
|
|
// ====================
|
|
|
|
body.course.textbooks {
|
|
|
|
.content-primary, .content-supplementary {
|
|
@include box-sizing(border-box);
|
|
float: left;
|
|
}
|
|
|
|
.content-primary {
|
|
width: flex-grid(9, 12);
|
|
margin-right: flex-gutter();
|
|
|
|
.no-textbook-content {
|
|
@extend .ui-well;
|
|
padding: ($baseline*2);
|
|
background-color: $gray-l4;
|
|
text-align: center;
|
|
color: $gray;
|
|
|
|
.new-button {
|
|
@include font-size(14);
|
|
margin-left: $baseline;
|
|
|
|
[class^="icon-"] {
|
|
margin-right: ($baseline/2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.textbook {
|
|
@extend .window;
|
|
position: relative;
|
|
|
|
.view-textbook {
|
|
padding: $baseline ($baseline*1.5);
|
|
|
|
header {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.textbook-title {
|
|
@extend .t-title4;
|
|
margin-right: ($baseline*14);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-toggle-expansion {
|
|
@include transition(rotate .15s ease-in-out .25s);
|
|
@include font-size(21);
|
|
display: inline-block;
|
|
width: ($baseline*0.75);
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
&.is-selectable {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $blue;
|
|
|
|
.ui-toggle-expansion {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chapters {
|
|
margin-left: $baseline;
|
|
|
|
.chapter {
|
|
@extend .t-copy-sub2;
|
|
margin-bottom: ($baseline/4);
|
|
border-bottom: 1px solid $gray-l4;
|
|
|
|
.chapter-name {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 45%;
|
|
margin-right: ($baseline/2);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chapter-asset-path {
|
|
display: inline-block;
|
|
width: 50%;
|
|
color: $gray-l1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
@include transition(opacity .15s .25s ease-in-out);
|
|
opacity: 0.0;
|
|
position: absolute;
|
|
top: $baseline;
|
|
right: $baseline;
|
|
|
|
.action {
|
|
display: inline-block;
|
|
margin-right: ($baseline/4);
|
|
|
|
.view {
|
|
@include blue-button;
|
|
@extend .t-action4;
|
|
}
|
|
|
|
.edit {
|
|
@include blue-button;
|
|
@extend .t-action4;
|
|
}
|
|
|
|
.delete {
|
|
@extend .btn-non;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover .actions {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.edit-textbook {
|
|
@include box-sizing(border-box);
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
background: $white;
|
|
|
|
.wrapper-form {
|
|
padding: $baseline ($baseline*1.5);
|
|
}
|
|
|
|
|
|
fieldset {
|
|
margin-bottom: $baseline;
|
|
}
|
|
|
|
.actions {
|
|
box-shadow: inset 0 1px 2px $shadow;
|
|
border-top: 1px solid $gray-l1;
|
|
padding: ($baseline*0.75) $baseline;
|
|
background: $gray-l6;
|
|
|
|
// add a chapter is below with chapters styling
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.copy {
|
|
@extend .t-copy-sub2;
|
|
margin: ($baseline) 0 ($baseline/2) 0;
|
|
color: $gray;
|
|
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.chapters-fields,
|
|
.textbook-fields {
|
|
@extend .no-list;
|
|
|
|
.field {
|
|
margin: 0 0 ($baseline*0.75) 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.required {
|
|
|
|
label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
label:after {
|
|
margin-left: ($baseline/4);
|
|
content: "*";
|
|
}
|
|
}
|
|
|
|
label, input, textarea {
|
|
display: block;
|
|
}
|
|
|
|
label {
|
|
@extend .t-copy-sub1;
|
|
@include transition(color, 0.15s, ease-in-out);
|
|
margin: 0 0 ($baseline/4) 0;
|
|
|
|
&.is-focused {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
|
|
&.add-textbook-name label {
|
|
@extend .t-title5;
|
|
}
|
|
|
|
|
|
//this section is borrowed from _account.scss - we should clean up and unify later
|
|
input, textarea {
|
|
@extend .t-copy-base;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: ($baseline/2);
|
|
|
|
&.long {
|
|
width: 100%;
|
|
}
|
|
|
|
&.short {
|
|
width: 25%;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: $gray-l4;
|
|
}
|
|
|
|
:-moz-placeholder {
|
|
color: $gray-l3;
|
|
}
|
|
|
|
::-moz-placeholder {
|
|
color: $gray-l3;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
color: $gray-l3;
|
|
}
|
|
|
|
&:focus {
|
|
|
|
+ .tip {
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea.long {
|
|
height: ($baseline*5);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display: inline-block;
|
|
margin-right: ($baseline/4);
|
|
width: auto;
|
|
height: auto;
|
|
|
|
& + label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
@extend .t-copy-sub2;
|
|
@include transition(color, 0.15s, ease-in-out);
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
color: $gray-l3;
|
|
}
|
|
|
|
&.error {
|
|
label {
|
|
color: $red;
|
|
}
|
|
|
|
input {
|
|
border-color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
margin: 0 0 ($baseline/2) 0;
|
|
|
|
.field {
|
|
display: block;
|
|
width: 46%;
|
|
border-bottom: none;
|
|
margin: 0 ($baseline*0.75) 0 0;
|
|
padding: ($baseline/4) 0 0 0;
|
|
float: left;
|
|
position: relative;
|
|
|
|
input, textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.action-upload {
|
|
@extend .btn-flat-outline;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.action-close {
|
|
@include transition(color 0.25s ease-in-out);
|
|
@include font-size(22);
|
|
display: inline-block;
|
|
float: right;
|
|
margin-top: ($baseline*2);
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: $blue-l3;
|
|
|
|
&:hover {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.action-add-chapter {
|
|
@extend .btn-flat-outline;
|
|
@include font-size(16);
|
|
display: block;
|
|
width: 100%;
|
|
margin: ($baseline*1.5) 0 0 0;
|
|
padding: ($baseline/2);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-supplementary {
|
|
width: flex-grid(3, 12);
|
|
}
|
|
|
|
// dialog
|
|
.wrapper-dialog {
|
|
@extend .depth5;
|
|
@include transition(all 0.05s ease-in-out);
|
|
position: fixed;
|
|
top: 0;
|
|
background: $black-t2;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
margin-right: -0.25em; /* Adjusts for spacing */
|
|
}
|
|
|
|
.dialog {
|
|
@include box-sizing(border-box);
|
|
box-shadow: 0px 0px 7px $shadow-d1;
|
|
border-radius: ($baseline/5);
|
|
background-color: $gray-l4;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: $baseline*23;
|
|
padding: 7px;
|
|
text-align: left;
|
|
|
|
.title {
|
|
@extend .t-title5;
|
|
margin-bottom: ($baseline/2);
|
|
font-weight: 600;
|
|
color: $black;
|
|
}
|
|
|
|
.message {
|
|
@extend .t-copy-sub2;
|
|
color: $gray;
|
|
}
|
|
|
|
.error {
|
|
color: $white;
|
|
}
|
|
|
|
form {
|
|
padding: 0;
|
|
|
|
.form-content {
|
|
box-shadow: 0 0 3px $shadow-d1;
|
|
padding: ($baseline*1.5);
|
|
background-color: $white;
|
|
}
|
|
|
|
input[type="file"] {
|
|
@extend .t-copy-sub2;
|
|
}
|
|
|
|
.status-upload {
|
|
height: 30px;
|
|
margin-top: $baseline;
|
|
|
|
.wrapper-progress {
|
|
box-shadow: inset 0 0 3px $shadow-d1;
|
|
display: block;
|
|
border-radius: ($baseline*0.75);
|
|
background-color: $gray-l5;
|
|
padding: 1px 8px 2px 8px;
|
|
height: 25px;
|
|
|
|
progress {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: ($baseline*0.75);
|
|
background-color: $gray-l5;
|
|
|
|
&::-webkit-progress-bar {
|
|
background-color: transparent;
|
|
border-radius: ($baseline*0.75);
|
|
}
|
|
|
|
&::-webkit-progress-value {
|
|
background-color: $pink;
|
|
border-radius: ($baseline*0.75);
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
background-color: $pink;
|
|
border-radius: ($baseline*0.75);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.message-status {
|
|
@include border-top-radius(2px);
|
|
@include box-sizing(border-box);
|
|
@include font-size(14);
|
|
display: none;
|
|
border-bottom: 2px solid $yellow;
|
|
margin: 0 0 20px 0;
|
|
padding: 10px 20px;
|
|
font-weight: 500;
|
|
background: $paleYellow;
|
|
|
|
.text {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.error {
|
|
border-color: $red-d2;
|
|
background: $red-l1;
|
|
color: $white;
|
|
}
|
|
|
|
&.confirm {
|
|
border-color: $green-d2;
|
|
background: $green-l1;
|
|
color: $white;
|
|
}
|
|
|
|
&.is-shown {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
|
|
|
|
|
|
|
|
.action-item {
|
|
@extend .t-action4;
|
|
display: inline-block;
|
|
margin-right: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $blue-d1;
|
|
color: $white;
|
|
}
|
|
|
|
a {
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
color: $blue-s2;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ====================
|
|
|
|
// js enabled
|
|
.js {
|
|
|
|
// dialog set-up
|
|
.wrapper-dialog {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
|
|
.dialog {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// dialog showing/hiding
|
|
&.dialog-is-shown {
|
|
|
|
.wrapper-dialog {
|
|
-webkit-filter: blur(2px) grayscale(25%);
|
|
filter: blur(2px) grayscale(25%);
|
|
}
|
|
|
|
.wrapper-dialog.is-shown {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
|
|
.dialog {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|