cleanup of unit, container, and xblock sass; added modules and layout sass; publishing states and actions on new unit
This commit is contained in:
Frances Botsford
committed by
cahrens
cahrens
parent
d65e887d1a
commit
bbcc0030ea
@@ -240,269 +240,6 @@ p, ul, ol, dl {
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic
|
||||
.wrapper-view {
|
||||
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic page header
|
||||
.wrapper-mast {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
|
||||
.mast, .metadata {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto $baseline auto;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
.mast {
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
// layout with actions
|
||||
.page-header {
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-actions {
|
||||
@include clearfix();
|
||||
|
||||
.page-header {
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
position: relative;
|
||||
bottom: -($baseline*0.75);
|
||||
float: right;
|
||||
width: flex-grid(6,12);
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
.button {
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
.new-button {
|
||||
|
||||
}
|
||||
|
||||
.view-button {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-subtitle {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// layout with navigation
|
||||
&.has-navigation {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
|
||||
// breadcrumb navigation
|
||||
.navigation-item {
|
||||
@extend %cont-truncated;
|
||||
display: inline-block;
|
||||
vertical-align: bottom; // correct for extra padding in FF
|
||||
max-width: 250px;
|
||||
color: $gray;
|
||||
|
||||
&.navigation-current {
|
||||
@extend %ui-disabled;
|
||||
color: $gray;
|
||||
max-width: 250px;
|
||||
|
||||
&:before {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navigation-link:hover {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.navigation-item:before {
|
||||
content: " / ";
|
||||
margin: ($baseline/4);
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation .navigation-item:first-child:before {
|
||||
content: "";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// page metadata/action bar
|
||||
.metadata {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// layout - basic page content
|
||||
.wrapper-content {
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
@extend %t-copy-base;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-d2;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
.title-sub {
|
||||
@extend %t-copy-sub1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// layout - primary content
|
||||
.content-primary {
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
}
|
||||
|
||||
.title-2 {
|
||||
@extend %t-title4;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
@extend %t-title6;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
header {
|
||||
@include clearfix();
|
||||
|
||||
.title-2 {
|
||||
width: flex-grid(5, 12);
|
||||
margin: 0 flex-gutter() 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
width: flex-grid(7, 12);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout - supplemental content
|
||||
.content-supplementary {
|
||||
|
||||
> section {
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - grandfathered
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
margin: 0 ($baseline*2);
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
|
||||
> article {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.main-column {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: right;
|
||||
width: 28%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
|
||||
@@ -73,3 +73,24 @@ body b {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,14 @@
|
||||
|
||||
// ====================
|
||||
|
||||
// general type and size
|
||||
%sizing {
|
||||
@extend %t-action4;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// gray primary button
|
||||
%btn-primary-gray {
|
||||
@extend %ui-btn-primary;
|
||||
@@ -219,15 +227,16 @@
|
||||
// ====================
|
||||
|
||||
// UI: element actions list
|
||||
%actions-header {
|
||||
.actions-list {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
%actions-list {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
|
||||
.action-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: ($baseline/10) 0 ($baseline/10) ($baseline/10);
|
||||
|
||||
.action-button {
|
||||
@include transition(all $tmg-f3 linear 0s);
|
||||
@@ -249,6 +258,10 @@
|
||||
&.delete-button:hover {
|
||||
background-color: $gray-l1;
|
||||
}
|
||||
|
||||
[class^="icon-"] {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
@@ -259,6 +272,10 @@
|
||||
margin: 0;
|
||||
background: transparent url("../img/drag-handles.png") no-repeat right center;
|
||||
}
|
||||
|
||||
&.toggle-action {
|
||||
// TODO: generalize and move checkbox styling in from static-pages and assets sass
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
303
cms/static/sass/elements/_layout.scss
Normal file
303
cms/static/sass/elements/_layout.scss
Normal file
@@ -0,0 +1,303 @@
|
||||
// studio - elements - layouts
|
||||
// ====================
|
||||
|
||||
// layout - basic
|
||||
// the wrapper around the viewable page area, excluding modal and other extra-view content
|
||||
.wrapper-view {
|
||||
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - basic page header
|
||||
.wrapper-mast {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
|
||||
.mast,
|
||||
.metadata {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto $baseline auto;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
.mast {
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
// layout without actions
|
||||
.page-header {
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-actions {
|
||||
@include clearfix();
|
||||
|
||||
.page-header {
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
position: relative;
|
||||
bottom: -($baseline*0.75);
|
||||
float: right;
|
||||
width: flex-grid(6,12);
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
.action-button {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %sizing;
|
||||
}
|
||||
|
||||
.new-button {
|
||||
@extend %btn-primary-green;
|
||||
@extend %sizing;
|
||||
}
|
||||
|
||||
.view-button {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %sizing;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
@include blue-button;
|
||||
@extend %sizing;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-align: center;
|
||||
|
||||
.action-button-text {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[class^="icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout with actions
|
||||
&.has-subtitle {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// layout with breadcrumb navigation
|
||||
&.has-navigation {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
@extend %cont-truncated;
|
||||
display: inline-block;
|
||||
vertical-align: bottom; // correct for extra padding in FF
|
||||
max-width: 250px;
|
||||
color: $gray;
|
||||
|
||||
&.navigation-current {
|
||||
@extend %ui-disabled;
|
||||
color: $gray;
|
||||
max-width: 250px;
|
||||
|
||||
&:before {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-link:hover {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.navigation-item:before {
|
||||
content: " / ";
|
||||
margin: ($baseline/4);
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation .navigation-item:first-child:before {
|
||||
content: "";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// page metadata/action bar
|
||||
.metadata {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// layout - basic page content
|
||||
.wrapper-content {
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
@extend %t-copy-base;
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-d2;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
.title-sub {
|
||||
@extend %t-copy-sub1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// 3/4 - 1/4 two col layout
|
||||
%two-col-1 {
|
||||
.content-primary {
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
width: flex-grid(9,12);
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
float: left;
|
||||
width: flex-grid(3,12);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// layout - primary content
|
||||
.content-primary {
|
||||
|
||||
.title-1 {
|
||||
@extend %t-title3;
|
||||
}
|
||||
|
||||
.title-2 {
|
||||
@extend %t-title4;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
@extend %t-title6;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
header {
|
||||
@include clearfix();
|
||||
|
||||
.title-2 {
|
||||
width: flex-grid(5, 12);
|
||||
margin: 0 flex-gutter() 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
width: flex-grid(7, 12);
|
||||
float: right;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout - supplemental content
|
||||
.content-supplementary {
|
||||
|
||||
> section {
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// layout - grandfathered
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
margin: 0 ($baseline*2);
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
|
||||
> article {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.main-column {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: right;
|
||||
width: 28%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
243
cms/static/sass/elements/_modules.scss
Normal file
243
cms/static/sass/elements/_modules.scss
Normal file
@@ -0,0 +1,243 @@
|
||||
// studio - elements - content modules
|
||||
// ====================
|
||||
// Patterns for pieces of content - modules - used throughout the app
|
||||
|
||||
// basic gray module with a strong top border and title, with related content box attached
|
||||
%bar-module {
|
||||
margin-bottom: $baseline;
|
||||
border-top: 5px solid $gray-l1;
|
||||
background-color: $white;
|
||||
|
||||
.bar-mod-title {
|
||||
@extend %t-title6;
|
||||
display: block;
|
||||
background-color: $gray-l4;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bar-mod-content {
|
||||
@extend %t-copy-sub1;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: ($baseline*.75) ($baseline*.75) $baseline ($baseline*.75);
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-weight: 600;
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// blue bar and title bg version
|
||||
%bar-module-blue {
|
||||
@extend %bar-module;
|
||||
border-top: 5px solid $blue;
|
||||
|
||||
.bar-mod-title {
|
||||
background-color: $blue-t0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// green bar and title bg version
|
||||
%bar-module-green {
|
||||
@extend %bar-module;
|
||||
border-top: 5px solid $green;
|
||||
|
||||
.bar-mod-title {
|
||||
background-color: $green-l5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// yellow bar and title bg version
|
||||
%bar-module-yellow {
|
||||
@extend %bar-module;
|
||||
border-top: 5px solid $orange-l2;
|
||||
|
||||
.bar-mod-title {
|
||||
background-color: $orange-l5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// red bar and title bg version
|
||||
%bar-module-red {
|
||||
@extend %bar-module;
|
||||
border-top: 5px solid $red-l2;
|
||||
|
||||
.bar-mod-title {
|
||||
background-color: $red-l5;
|
||||
}
|
||||
}
|
||||
|
||||
// Add new component menu with big green buttons
|
||||
// outermost wrapper for add a new component menu
|
||||
.add-xblock-component {
|
||||
margin: $baseline ($baseline/2);
|
||||
border: 1px solid $gray-l3;
|
||||
border-radius: ($baseline/4);
|
||||
box-shadow: 0 1px 3px $shadow inset;
|
||||
background-color: $gray-l5;
|
||||
padding: ($baseline/2);
|
||||
|
||||
// add component menu inner wrapper
|
||||
.new-component {
|
||||
text-align: center;
|
||||
|
||||
h5 {
|
||||
@extend %t-title5;
|
||||
margin-bottom: ($baseline*.75);
|
||||
color: $green-d1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// add component - list of green buttons
|
||||
.new-component-type {
|
||||
@include clearfix;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// green button
|
||||
.add-xblock-component-button {
|
||||
@extend %t-action3;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: ($baseline*5);
|
||||
height: ($baseline*5);
|
||||
margin-right: ($baseline*.75);
|
||||
margin-bottom: ($baseline/2);
|
||||
border: 1px solid $green-d2;
|
||||
border-radius: ($baseline/4);
|
||||
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
|
||||
background-color: $green-l1;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background: $green-s1;
|
||||
}
|
||||
|
||||
.name {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// outer most wrapper div for scroll up component picker menus
|
||||
// swaps in when a green button is clicked
|
||||
.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);
|
||||
|
||||
.problem-type-tabs {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// individual menus
|
||||
.new-component-template {
|
||||
@include clearfix;
|
||||
|
||||
li {
|
||||
border: none;
|
||||
border-bottom: 1px dashed $lightGrey;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include clearfix();
|
||||
@include transition(none);
|
||||
display: block;
|
||||
border: 0px;
|
||||
padding: 7px $baseline;
|
||||
background: $white;
|
||||
color: $gray-d3;
|
||||
font-weight: 500;
|
||||
|
||||
|
||||
&:hover {
|
||||
@include transition(background-color $tmg-f2 linear 0s);
|
||||
background: tint($green,30%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// basic and advanced problem tabs - also handled by jquery-ui tabs
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
// studio - elements - xblock rendering
|
||||
// ==========================
|
||||
|
||||
// styling for xblocks at various levels of nesting: page level,
|
||||
|
||||
// extends - UI archetypes - xblock rendering
|
||||
%wrap-xblock {
|
||||
.wrapper-xblock {
|
||||
margin: ($baseline/2);
|
||||
border: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/5);
|
||||
@@ -14,7 +16,7 @@
|
||||
box-shadow: 0 0 1px $shadow;
|
||||
}
|
||||
|
||||
// UI: xblock header
|
||||
// UI: xblock header primary for main title and xblock actions
|
||||
.xblock-header-primary {
|
||||
@include box-sizing(border-box);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
@@ -43,6 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// secondary header for meta-information and associated actions
|
||||
.xblock-header-secondary {
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $gray-l3;
|
||||
@@ -99,104 +102,682 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// ====================
|
||||
|
||||
// UI: xblocks - calls-to-action
|
||||
.wrapper-xblock .header-actions {
|
||||
@extend %actions-header;
|
||||
//UI: default internal xblock content styles
|
||||
|
||||
.action-button [class^="icon-"] {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: xblock is collapsible
|
||||
.wrapper-xblock.is-collapsible,
|
||||
.wrapper-xblock.xblock-type-container {
|
||||
|
||||
[class^="icon-"] {
|
||||
font-style: normal;
|
||||
// internal headings for problems and video components
|
||||
h2 {
|
||||
@extend %t-title5;
|
||||
margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
|
||||
color: $gray;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.expand-collapse {
|
||||
@extend %expand-collapse;
|
||||
margin: 0 ($baseline/4);
|
||||
height: ($baseline*1.25);
|
||||
width: $baseline;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
// ====================
|
||||
|
||||
// UI: xblocks - calls-to-action
|
||||
.wrapper-xblock .header-actions {
|
||||
|
||||
.actions-list {
|
||||
@extend %actions-list;
|
||||
}
|
||||
}
|
||||
|
||||
.action-view {
|
||||
|
||||
.action-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.action-button-text {
|
||||
padding-right: ($baseline/5);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
@extend %t-copy-sub1;
|
||||
background-color: $gray-d2;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
color: $white;
|
||||
// UI: xblock is collapsible
|
||||
.wrapper-xblock.is-collapsible,
|
||||
.wrapper-xblock.xblock-type-container {
|
||||
|
||||
[class^="icon-"] {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub1;
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d2;
|
||||
.expand-collapse {
|
||||
@extend %expand-collapse;
|
||||
margin: 0 ($baseline/4);
|
||||
height: ($baseline*1.25);
|
||||
width: $baseline;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.validation {
|
||||
.action-view {
|
||||
|
||||
.action-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.action-button-text {
|
||||
padding-right: ($baseline/5);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// xblock message area, for general information as well as validation
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
@extend %t-copy-sub1;
|
||||
background-color: $gray-d2;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
color: $blue-l2;
|
||||
[class^="icon-"] {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&.has-warnings {
|
||||
border-bottom: 3px solid $orange;
|
||||
&.information {
|
||||
@extend %t-copy-sub1;
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
.icon-warning-sign {
|
||||
margin-right: ($baseline/2);
|
||||
color: $orange;
|
||||
&.validation {
|
||||
background-color: $gray-d2;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
color: $blue-l2;
|
||||
}
|
||||
|
||||
&.has-warnings {
|
||||
border-bottom: 3px solid $orange;
|
||||
|
||||
.icon-warning-sign {
|
||||
margin-right: ($baseline/2);
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-errors {
|
||||
border-bottom: 3px solid $red-l2;
|
||||
|
||||
.icon-exclamation-sign {
|
||||
margin-right: ($baseline/2);
|
||||
color: $red-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-errors {
|
||||
border-bottom: 3px solid $red-l2;
|
||||
.xblock-message-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon-exclamation-sign {
|
||||
margin-right: ($baseline/2);
|
||||
color: $red-l2;
|
||||
.xblock-message-actions {
|
||||
padding: ($baseline/2) $baseline;
|
||||
background-color: $gray-d1;
|
||||
|
||||
.actions-list {
|
||||
@extend %actions-list;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: page level - outer most level
|
||||
&.level-page {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
.xblock-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xblock-message {
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
&.validation {
|
||||
padding-top: ($baseline*.75);
|
||||
}
|
||||
|
||||
.xblock-message-list {
|
||||
margin: ($baseline/5) ($baseline*2.5);
|
||||
list-style-type: disc;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
.xblock-message-item {
|
||||
padding-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
&.information {
|
||||
padding: 0 0 ($baseline/2) 0;
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-container-content {
|
||||
|
||||
.xblock-message-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
color: $gray-d2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// CASE: nesting level - element wrapper level
|
||||
&.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
border: 1px solid $gray-l3;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
// min-height to allow drop when empty
|
||||
.reorderable-container {
|
||||
min-height: $baseline;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
@include ui-flexbox();
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
margin: ($baseline/2);
|
||||
}
|
||||
|
||||
// STATE: nesting level xblock is collapsed
|
||||
&.collapsed {
|
||||
padding-bottom: 0;
|
||||
background-color: $gray-l7;
|
||||
box-shadow: 0 0 1px $shadow-d2 inset;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: element/component level
|
||||
&.level-element {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
background-color: $gray-l6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
margin: ($baseline/2);
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
|
||||
// STATE: container/component with children - abbreviated preview
|
||||
&.xblock-type-container {
|
||||
|
||||
.xblock-header-primary {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
border-radius: ($baseline/5);
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
.xblock-message-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub2;
|
||||
padding: 0 0 ($baseline/2) $baseline;
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
&.validation.has-warnings {
|
||||
border: 0;
|
||||
border-top: 3px solid $orange;
|
||||
}
|
||||
|
||||
&.validation.has-errors {
|
||||
border: 0;
|
||||
border-top: 3px solid $red-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xblock-message-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// CASE: edited experiment groups: active and inactive
|
||||
.wrapper-groups {
|
||||
|
||||
.xblock-message-actions {
|
||||
@extend %actions-header;
|
||||
padding: ($baseline/2) $baseline;
|
||||
background-color: $gray-d1;
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
margin-left: ($baseline/2);
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
// don't show delete buttons on active groups
|
||||
.wrapper-xblock.level-nesting > .xblock-header .action-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
border-top: 2px dotted $gray-l2;
|
||||
padding: ($baseline*.75) 0;
|
||||
background-color: $gray-l4;
|
||||
|
||||
.wrapper-xblock.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
opacity: .7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// don't show add new content to inactive groups
|
||||
.new-component-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// XBlock editing
|
||||
|
||||
// xblock Editor tab 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;
|
||||
}
|
||||
}
|
||||
|
||||
// xblock Settings tab 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;
|
||||
}
|
||||
}
|
||||
|
||||
&: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%);
|
||||
width: 45%;
|
||||
min-width: 100px;
|
||||
padding: ($baseline/2);
|
||||
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 {
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: special xblock type overrides
|
||||
|
||||
// Latex Compiler
|
||||
// make room for the launch compiler button
|
||||
.wrapper-comp-editor.latex-problem {
|
||||
margin-top: ($baseline*2.5);
|
||||
}
|
||||
|
||||
// sadly this button is outside the wrapper for the latex-problem so we can't get more specific with the class rule - ugh
|
||||
.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 - double ugh
|
||||
div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,6 +28,8 @@
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/xblocks'; // studio rendering chrome for xblocks
|
||||
@import 'elements/modules'; // content module patterns
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
|
||||
// base - specific views
|
||||
@import 'views/account';
|
||||
|
||||
@@ -27,7 +27,9 @@
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/modules'; // content module patterns
|
||||
@import 'elements/navigation'; // all archetypes of navigation
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
@import 'elements/forms';
|
||||
@import 'elements/header';
|
||||
@import 'elements/footer';
|
||||
|
||||
@@ -327,85 +327,64 @@
|
||||
|
||||
// UI: assets - calls-to-action
|
||||
.actions-list {
|
||||
@extend %actions-header;
|
||||
@extend %actions-list;
|
||||
|
||||
.action-item {
|
||||
display: inline-block;
|
||||
margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
|
||||
|
||||
.action-button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: ($baseline*1.5);
|
||||
height: ($baseline*1.5);
|
||||
color: $gray-l3;
|
||||
// special checkbox styling
|
||||
&.action-lock {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.action-lock label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UI: assets - specific action styling
|
||||
// TODO: this uses similar styling as unit.scss, static-pages.scss
|
||||
.action-item {
|
||||
&.action-lock .lock-checkbox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[class^="icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
&.action-lock {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.action-lock label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
&.action-lock .lock-checkbox:hover ~ .action-button {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.action-lock .lock-checkbox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.action-lock .lock-checkbox:hover ~ .action-button {
|
||||
background-color: $blue;
|
||||
color: $gray-l6;
|
||||
}
|
||||
|
||||
&.action-lock .lock-checkbox ~ .action-button {
|
||||
.icon-lock {
|
||||
display: none;
|
||||
color: $gray-l6;
|
||||
}
|
||||
|
||||
.icon-unlock-alt {
|
||||
display: inline-block;
|
||||
&.action-lock .lock-checkbox ~ .action-button {
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-unlock-alt {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.action-lock .lock-checkbox:checked ~ .action-button {
|
||||
background-color: $gray;
|
||||
color: $white;
|
||||
|
||||
.icon-lock {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-unlock-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.action-lock .lock-checkbox:checked ~ .action-button {
|
||||
background-color: $gray;
|
||||
color: $white;
|
||||
|
||||
.icon-lock {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-unlock-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.show-xml {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// studio - views - container
|
||||
// ==========================
|
||||
// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.
|
||||
// The container view renders xblocks at three levels: Page Level, Nesting Level, and Element Level.
|
||||
|
||||
// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels.
|
||||
|
||||
@@ -8,68 +8,58 @@
|
||||
|
||||
// UI: container page view
|
||||
.view-container {
|
||||
@extend %two-col-1;
|
||||
|
||||
.mast {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
.wrapper-mast {
|
||||
|
||||
.page-header-title {
|
||||
@extend %t-title;
|
||||
@include font-size(28);
|
||||
@include line-height(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
.mast {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
|
||||
.page-header-title-edit {
|
||||
@extend %t-title4;
|
||||
background: none repeat scroll 0 0 $white;
|
||||
border: 0;
|
||||
box-shadow: 0 0 2px 2px $shadow inset;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.page-header-title {
|
||||
@extend %t-title;
|
||||
@include font-size(28);
|
||||
@include line-height(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wrapper-mast .mast.has-navigation .nav-actions {
|
||||
.page-header-title-edit {
|
||||
@extend %t-title4;
|
||||
background: none repeat scroll 0 0 white;
|
||||
border: 0;
|
||||
box-shadow: 0 0 2px 2px $shadow inset;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&.has-actions {
|
||||
|
||||
.edit-button {
|
||||
@include blue-button;
|
||||
@extend %t-action4;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-align: center;
|
||||
.nav-actions {
|
||||
|
||||
.action-button-text {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.button {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action3;
|
||||
box-shadow: none;
|
||||
padding: ($baseline/4) ($baseline*.75);
|
||||
font-weight: 400;
|
||||
|
||||
&.is-disabled {
|
||||
// TO-DO: will review styling before merge to master
|
||||
// background-color: $gray-l2;
|
||||
// border-color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
[class^="icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
margin-right: flex-gutter();
|
||||
width: flex-grid(9,12);
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
.no-container-content {
|
||||
@extend %ui-well;
|
||||
padding: $baseline;
|
||||
background-color: $gray-l4;
|
||||
text-align: center;
|
||||
color: $gray;
|
||||
@extend %no-content;
|
||||
|
||||
// custom rules to reuse xblock validation styling in ui-well context
|
||||
.icon-warning-sign {
|
||||
display: none;
|
||||
}
|
||||
@@ -80,83 +70,123 @@
|
||||
padding: 8px 20px 10px;
|
||||
text-align: center;
|
||||
margin: ($baseline/2) 0 ($baseline/2) $baseline;
|
||||
|
||||
[class^="icon-"] {
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dragging bits
|
||||
.ui-sortable-helper {
|
||||
|
||||
article {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// drop target
|
||||
.component-placeholder {
|
||||
height: ($baseline*2.5);
|
||||
opacity: .5;
|
||||
margin: $baseline;
|
||||
background-color: $gray-l5;
|
||||
border-radius: ($baseline/2);
|
||||
border: 2px dashed $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
width: flex-grid(3,12);
|
||||
|
||||
label {
|
||||
@extend %t-title8;
|
||||
}
|
||||
|
||||
.bit-publishing {
|
||||
margin-bottom: $baseline;
|
||||
border-top: 5px solid $blue;
|
||||
background-color: $white;
|
||||
|
||||
.pub-status {
|
||||
@extend %t-title6;
|
||||
display: block;
|
||||
background-color: $blue-l2;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
font-weight: 600;
|
||||
}
|
||||
@extend %bar-module;
|
||||
|
||||
&.published {
|
||||
border-top: 5px solid $blue;
|
||||
|
||||
.pub-status {
|
||||
background-color: $blue-t0;
|
||||
}
|
||||
|
||||
@extend %bar-module-green;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
border-top: 5px solid $gray-l1;
|
||||
@extend %bar-module-yellow;
|
||||
}
|
||||
|
||||
.pub-status {
|
||||
background-color: $gray-l4;
|
||||
&.staff-only {
|
||||
@extend %bar-module;
|
||||
}
|
||||
|
||||
.bar-mod-content {
|
||||
border: 0;
|
||||
padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);
|
||||
|
||||
.title {
|
||||
@extend %t-title8;
|
||||
margin-bottom: ($baseline/10);
|
||||
text-transform: uppercase;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
.meta {
|
||||
@extend %t-copy-sub2;
|
||||
color: $gray-l1;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub1;
|
||||
padding: ($baseline*.75) ($baseline*.75) ($baseline) ($baseline*.75);
|
||||
.wrapper-last-draft {
|
||||
padding: ($baseline*.75) ($baseline*.75) ($baseline/4) ($baseline*.75);
|
||||
}
|
||||
|
||||
.wrapper-release {
|
||||
|
||||
.release-date {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-visibility {
|
||||
|
||||
.copy {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-pub-actions {
|
||||
padding: ($baseline*.75);
|
||||
|
||||
.action-publish {
|
||||
@extend %btn-primary-blue;
|
||||
display: block;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
|
||||
&.is-disabled {
|
||||
border: 1px solid $gray-l2;
|
||||
background-color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
.action-discard {
|
||||
@extend %t-copy-sub1;
|
||||
display: block;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
color: $gray-l1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// location widget
|
||||
.unit-location {
|
||||
border-top: 5px solid $gray-l1;
|
||||
background-color: $white;
|
||||
@extend %bar-module;
|
||||
|
||||
.header {
|
||||
@extend %t-title6;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
background-color: $gray-l4;
|
||||
font-weight: 600;
|
||||
}
|
||||
.wrapper-unit-id {
|
||||
|
||||
.content-bit {
|
||||
margin: ($baseline*.75);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-weight: 600;
|
||||
color: $gray-d1;
|
||||
.unit-id-value {
|
||||
@extend %t-copy-sub1;
|
||||
display: inline-block;
|
||||
margin: ($baseline/4) 0;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@@ -167,28 +197,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-unit-id {
|
||||
|
||||
.unit-id-value {
|
||||
@extend %t-copy-sub1;
|
||||
display: inline-block;
|
||||
margin: ($baseline/4) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-unit-tree-location {
|
||||
|
||||
.draggable-drop-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-name {
|
||||
@extend %t-title8;
|
||||
|
||||
&:hover {
|
||||
background: $blue-l5;
|
||||
color: $blue;
|
||||
}
|
||||
// need to explicitly set this since the html sturcture is different than the others
|
||||
.section-name:hover {
|
||||
background: $blue-l5;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.subsection,
|
||||
@@ -223,6 +241,7 @@
|
||||
background-color: $orange-l3;
|
||||
}
|
||||
|
||||
// TODO: update these once we have different pub states
|
||||
.public-item {
|
||||
color: $black;
|
||||
}
|
||||
@@ -285,252 +304,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
// UI: xblock rendering
|
||||
body.view-container .content-primary {
|
||||
|
||||
// dragging bits
|
||||
.ui-sortable-helper {
|
||||
|
||||
article {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.component-placeholder {
|
||||
height: ($baseline*2.5);
|
||||
opacity: .5;
|
||||
margin: $baseline;
|
||||
background-color: $gray-l5;
|
||||
border-radius: ($baseline/2);
|
||||
border: 2px dashed $gray-l2;
|
||||
}
|
||||
|
||||
.wrapper-xblock {
|
||||
@extend %wrap-xblock;
|
||||
|
||||
// CASE: page level xblock rendering
|
||||
&.level-page {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
.xblock-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xblock-message {
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
&.validation {
|
||||
padding-top: ($baseline*.75);
|
||||
}
|
||||
|
||||
.xblock-message-list {
|
||||
margin: ($baseline/5) ($baseline*2.5);
|
||||
list-style-type: disc;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
.xblock-message-item {
|
||||
padding-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
&.information {
|
||||
padding: 0 0 ($baseline/2) 0;
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-container-content {
|
||||
|
||||
.xblock-message-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
color: $gray-d2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// CASE: nesting level xblock rendering
|
||||
&.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
border: 1px solid $gray-l3;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
// min-height to allow drop when empty
|
||||
.reorderable-container {
|
||||
min-height: $baseline;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
@include ui-flexbox();
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
margin: ($baseline/2);
|
||||
}
|
||||
|
||||
// STATE: nesting level xblock is collapsed
|
||||
&.collapsed {
|
||||
padding-bottom: 0;
|
||||
background-color: $gray-l7;
|
||||
box-shadow: 0 0 1px $shadow-d2 inset;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: element level xblock rendering
|
||||
&.level-element {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
background-color: $gray-l6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
margin: ($baseline/2);
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
|
||||
// STATE: xBlock containers styled as rows.
|
||||
&.xblock-type-container {
|
||||
|
||||
.xblock-header-primary {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
border-radius: ($baseline/5);
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
.xblock-message-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub2;
|
||||
padding: 0 0 ($baseline/2) $baseline;
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
&.validation.has-warnings {
|
||||
border: 0;
|
||||
border-top: 3px solid $orange;
|
||||
}
|
||||
|
||||
&.validation.has-errors {
|
||||
border: 0;
|
||||
border-top: 3px solid $red-l2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// groups in experiments
|
||||
.wrapper-groups {
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
margin-left: ($baseline/2);
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
// Don't show delete buttons on active groups
|
||||
.wrapper-xblock.level-nesting > .xblock-header .action-delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
border-top: 2px dotted $gray-l2;
|
||||
padding: ($baseline*.75) 0;
|
||||
background-color: $gray-l4;
|
||||
|
||||
.wrapper-xblock.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
opacity: .7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.new-component-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add a new component menu override - most styles currently live in _unit.scss
|
||||
.new-component-item {
|
||||
margin: $baseline ($baseline/2);
|
||||
border: 1px solid $gray-l3;
|
||||
border-radius: ($baseline/4);
|
||||
box-shadow: 0 1px 3px $shadow inset;
|
||||
background-color: $gray-l5;
|
||||
padding: ($baseline/2);
|
||||
|
||||
h5 {
|
||||
margin-bottom: ($baseline*.75);
|
||||
}
|
||||
|
||||
.new-component-type a {
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI: xblocks - internal styling
|
||||
|
||||
// In order to ensure visual consistency across the unit and container pages, certain styles need to be applied to render on the container page until they are also cleaned up and applied differently on the unit page.
|
||||
.wrapper-xblock {
|
||||
|
||||
// UI: xblocks - internal headings for problems and video components
|
||||
h2 {
|
||||
margin: 30px 40px 30px 0;
|
||||
color: #646464;
|
||||
font-size: 19px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
}
|
||||
|
||||
// UI: element actions list
|
||||
// TODO: outline page can be updated to reflect styling from %actions-header extend in _controls.scss
|
||||
// TODO: outline page can be updated to reflect styling from %actions-list in _controls.scss
|
||||
.actions-list {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -92,18 +92,18 @@ body.course.unit,
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-alert-error {
|
||||
margin-top: ($baseline*1.25);
|
||||
box-shadow: none;
|
||||
border-top: 5px solid $red-l1;
|
||||
.wrapper-alert-error {
|
||||
margin-top: ($baseline*1.25);
|
||||
box-shadow: none;
|
||||
border-top: 5px solid $red-l1;
|
||||
|
||||
.copy,
|
||||
.title {
|
||||
color: $white;
|
||||
.copy,
|
||||
.title {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -300,440 +300,414 @@ body.course.unit,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
|
||||
.component-edit-header {
|
||||
@include box-sizing(border-box);
|
||||
padding: 18px 0 18px $baseline;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
padding: 12px ($baseline*0.75);
|
||||
right: 0;
|
||||
background-color: $blue;
|
||||
border-bottom: 1px solid $blue-d2;
|
||||
color: $white;
|
||||
|
||||
.mode {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
//Component Name
|
||||
.component-name {
|
||||
@extend %t-copy-sub1;
|
||||
width: 50%;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
|
||||
&.inactive-mode{
|
||||
display: none;
|
||||
em {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/4);
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.active-mode a {
|
||||
//Nav-Edit Modes
|
||||
.nav-edit-modes {
|
||||
list-style: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
padding: 12px ($baseline*0.75);
|
||||
|
||||
@include blue-button;
|
||||
.mode {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
|
||||
&.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;
|
||||
&.inactive-mode{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow;
|
||||
&.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 {
|
||||
// xblock Editor tab wrapper
|
||||
.wrapper-comp-editor {
|
||||
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);
|
||||
// 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-list
|
||||
.list-input.settings-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
// xblock Settings tab wrapper
|
||||
.wrapper-comp-settings {
|
||||
display: none;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
|
||||
//chrome scrollbar visibility correction
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-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;
|
||||
.file-uploader {
|
||||
.upload-setting {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@include box-sizing(border-box);
|
||||
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;
|
||||
font-weight: 600;
|
||||
width: 49%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
//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;
|
||||
.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 {
|
||||
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;
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-help {
|
||||
@include font-size(12);
|
||||
.wrapper-uploader-actions {
|
||||
width: 45%;
|
||||
display: inline-block;
|
||||
font-color: $gray-l6;
|
||||
min-width: ($baseline*10);
|
||||
vertical-align: top;
|
||||
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);
|
||||
|
||||
// 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;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-clear {
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline/4);
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.create-setting {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
&.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;
|
||||
|
||||
*[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 {
|
||||
&.is-focused {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: Dict
|
||||
.metadata-dict {
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
input, select, input[type="number"] {
|
||||
@include placeholder($gray-l4);
|
||||
@include font-size(16);
|
||||
@include size(100%,100%);
|
||||
width: 45%;
|
||||
min-width: 100px;
|
||||
padding: ($baseline/2);
|
||||
border-radius: 3px;
|
||||
border: 1px solid $gray-l2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// label
|
||||
.setting-label {
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline*.75);
|
||||
//Allows users to copy full value of disabled inputs.
|
||||
input.is-disabled {
|
||||
text-overflow: clip;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// inputs and labels
|
||||
.wrapper-dict-settings {
|
||||
width: 55%;
|
||||
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 {
|
||||
|
||||
&: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;
|
||||
min-width: 240px;
|
||||
font-color: $gray-l6;
|
||||
min-width: ($baseline*10);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// 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;
|
||||
// TYPE: enumerated lists of metadata sets
|
||||
.metadata-list-enum {
|
||||
|
||||
&.input-value {
|
||||
* {
|
||||
@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: ($baseline*.75) 0 0 0;
|
||||
}
|
||||
.setting-clear {
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
|
||||
.create-setting {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
display: block;
|
||||
width: 88%;
|
||||
padding: ($baseline/2);
|
||||
font-weight: 600;
|
||||
.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);
|
||||
*[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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -829,306 +803,307 @@ body.unit {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// ====================
|
||||
|
||||
// Unit Page Sidebar
|
||||
// Unit Page Sidebar
|
||||
|
||||
.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;
|
||||
label {
|
||||
@extend %t-title8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
border: 1px solid #ced2db;
|
||||
.unit-history {
|
||||
&.collapsed {
|
||||
h4 {
|
||||
border-bottom: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 6px 8px 8px $baseline/2;
|
||||
background: #edf1f5;
|
||||
font-size: 12px;
|
||||
.window-contents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fffcf1;
|
||||
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: block;
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: #d1dae3;
|
||||
}
|
||||
.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;
|
||||
|
||||
.item-actions {
|
||||
display: none;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
@@ -1156,7 +1131,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
|
||||
// xblock - unit page container
|
||||
|
||||
body.unit .xblock-type-container {
|
||||
@extend %wrap-xblock;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@@ -1259,8 +1233,7 @@ body.unit .component {
|
||||
|
||||
|
||||
|
||||
body.view-unit .main-column .unit-body,
|
||||
body.view-container {
|
||||
body.view-unit .main-column .unit-body {
|
||||
|
||||
// New Components
|
||||
.new-component-item {
|
||||
|
||||
@@ -127,13 +127,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.new-update-button {
|
||||
@include blue-button;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 18px 0;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.new-update-form {
|
||||
@include edit-box;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<% if (type === 'advanced' || templates.length > 1) { %>
|
||||
<a href="#" class="multiple-templates" data-type="<%= type %>">
|
||||
<a href="#" class="multiple-templates add-xblock-component-button" data-type="<%= type %>">
|
||||
<% } else { %>
|
||||
<a href="#" class="single-template" data-type="<%= type %>" data-category="<%= templates[0].category %>">
|
||||
<a href="#" class="single-template add-xblock-component-button" data-type="<%= type %>" data-category="<%= templates[0].category %>">
|
||||
<% } %>
|
||||
<span class="large-template-icon large-<%= type %>-icon"></span>
|
||||
<span class="name"><%= display_name %></span>
|
||||
|
||||
@@ -266,6 +266,14 @@
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
}
|
||||
|
||||
%no-content {
|
||||
@extend %ui-well;
|
||||
padding: $baseline;
|
||||
background-color: $gray-l4;
|
||||
text-align: center;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.ui-loading {
|
||||
@include animation(fadeIn $tmg-f2 linear 1);
|
||||
@extend %ui-well;
|
||||
|
||||
Reference in New Issue
Block a user