Commit bbcc0030 by Frances Botsford Committed by cahrens

cleanup of unit, container, and xblock sass; added modules and layout sass;…

cleanup of unit, container, and xblock sass; added modules and layout sass; publishing states and actions on new unit
parent d65e887d
...@@ -240,269 +240,6 @@ p, ul, ol, dl { ...@@ -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 { ...@@ -73,3 +73,24 @@ body b {
overflow: visible !important; 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 @@ ...@@ -16,6 +16,14 @@
// ==================== // ====================
// general type and size
%sizing {
@extend %t-action4;
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
}
// ====================
// gray primary button // gray primary button
%btn-primary-gray { %btn-primary-gray {
@extend %ui-btn-primary; @extend %ui-btn-primary;
...@@ -219,15 +227,16 @@ ...@@ -219,15 +227,16 @@
// ==================== // ====================
// UI: element actions list // UI: element actions list
%actions-header {
.actions-list { %actions-list {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
}
.action-item { .action-item {
position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin: ($baseline/10) 0 ($baseline/10) ($baseline/10);
.action-button { .action-button {
@include transition(all $tmg-f3 linear 0s); @include transition(all $tmg-f3 linear 0s);
...@@ -249,6 +258,10 @@ ...@@ -249,6 +258,10 @@
&.delete-button:hover { &.delete-button:hover {
background-color: $gray-l1; background-color: $gray-l1;
} }
[class^="icon-"] {
font-style: normal;
}
} }
.drag-handle { .drag-handle {
...@@ -259,6 +272,10 @@ ...@@ -259,6 +272,10 @@
margin: 0; margin: 0;
background: transparent url("../img/drag-handles.png") no-repeat right center; 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
}
} }
} }
......
// 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;
}
// 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);
}
}
}
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/xblocks'; // studio rendering chrome for xblocks @import 'elements/xblocks'; // studio rendering chrome for xblocks
@import 'elements/modules'; // content module patterns
@import 'elements/layout'; // various standard layouts
// base - specific views // base - specific views
@import 'views/account'; @import 'views/account';
......
...@@ -27,7 +27,9 @@ ...@@ -27,7 +27,9 @@
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/icons'; // references to icons used @import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc. @import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/modules'; // content module patterns
@import 'elements/navigation'; // all archetypes of navigation @import 'elements/navigation'; // all archetypes of navigation
@import 'elements/layout'; // various standard layouts
@import 'elements/forms'; @import 'elements/forms';
@import 'elements/header'; @import 'elements/header';
@import 'elements/footer'; @import 'elements/footer';
......
...@@ -327,32 +327,11 @@ ...@@ -327,32 +327,11 @@
// UI: assets - calls-to-action // UI: assets - calls-to-action
.actions-list { .actions-list {
@extend %actions-header; @extend %actions-list;
.action-item { .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;
}
}
}
// UI: assets - specific action styling
// TODO: this uses similar styling as unit.scss, static-pages.scss
.action-item {
[class^="icon-"] {
display: inline-block;
vertical-align: bottom;
}
// special checkbox styling
&.action-lock { &.action-lock {
position: relative; position: relative;
} }
...@@ -405,7 +384,7 @@ ...@@ -405,7 +384,7 @@
display: none; display: none;
} }
} }
}
} }
.show-xml { .show-xml {
......
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
} }
// UI: element actions list // 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 { .actions-list {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
......
...@@ -300,10 +300,10 @@ body.course.unit, ...@@ -300,10 +300,10 @@ body.course.unit,
} }
} }
} }
}
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
.component-edit-header { // Edit Header (Component Name, Mode-Editor, Mode-Settings)
.component-edit-header {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 18px 0 18px $baseline; padding: 18px 0 18px $baseline;
top: 0; top: 0;
...@@ -361,21 +361,21 @@ body.course.unit, ...@@ -361,21 +361,21 @@ body.course.unit,
} }
} }
} }
} }
// Editor Wrapper // xblock Editor tab wrapper
.wrapper-comp-editor { .wrapper-comp-editor {
display: block; display: block;
// Because the editor may be a CodeMirror editor (which must be visible at the time it is created // 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". // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active"
&.is-inactive { &.is-inactive {
display: none; display: none;
} }
} }
// Settings Wrapper // xblock Settings tab wrapper
.wrapper-comp-settings { .wrapper-comp-settings {
display: none; display: none;
&.is-active { &.is-active {
...@@ -450,16 +450,6 @@ body.course.unit, ...@@ -450,16 +450,6 @@ body.course.unit,
&:first-child { &:first-child {
border-top: 0; border-top: 0;
} }
//no required component settings currently
&.required {
label {
//font-weight: 600;
}
label:after {
//margin-left: ($baseline/4);
//content: "*";
}
} }
&:hover { &:hover {
...@@ -504,32 +494,16 @@ body.course.unit, ...@@ -504,32 +494,16 @@ body.course.unit,
@include placeholder($gray-l4); @include placeholder($gray-l4);
@include font-size(16); @include font-size(16);
@include size(100%,100%); @include size(100%,100%);
padding: ($baseline/2);
min-width: 100px;
width: 45%; width: 45%;
min-width: 100px;
//&.long { padding: ($baseline/2);
//
//}
//&.short {
//}
//&.error {
// border-color: $red;
//}
//&:focus {
// + .tip {
// color: $gray;
// }
border-radius: 3px; border-radius: 3px;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
//Allows users to copy full value of disabled inputs. //Allows users to copy full value of disabled inputs.
input.is-disabled{ input.is-disabled {
text-overflow: clip; text-overflow: clip;
opacity: .5; opacity: .5;
} }
...@@ -548,7 +522,6 @@ body.course.unit, ...@@ -548,7 +522,6 @@ body.course.unit,
} }
select { select {
//box-shadow: 0 1px 2px $shadow-l1 inset;
&:focus { &:focus {
box-shadow: 0 0 1px $shadow; box-shadow: 0 0 1px $shadow;
...@@ -734,6 +707,7 @@ body.course.unit, ...@@ -734,6 +707,7 @@ body.course.unit,
color: $blue; color: $blue;
} }
} }
} }
} }
} }
...@@ -829,20 +803,19 @@ body.unit { ...@@ -829,20 +803,19 @@ body.unit {
} }
} }
} }
}
// ==================== // ====================
// Unit Page Sidebar // Unit Page Sidebar
.sidebar { .sidebar {
label { label {
@extend %t-title8; @extend %t-title8;
} }
} }
.unit-settings { .unit-settings {
.window-contents { .window-contents {
padding: $baseline/2 $baseline; padding: $baseline/2 $baseline;
...@@ -916,9 +889,9 @@ body.unit { ...@@ -916,9 +889,9 @@ body.unit {
margin-top: $baseline/2; margin-top: $baseline/2;
padding: 6px 15px 8px; padding: 6px 15px 8px;
} }
} }
.unit-history { .unit-history {
&.collapsed { &.collapsed {
h4 { h4 {
border-bottom: none; border-bottom: none;
...@@ -960,9 +933,9 @@ body.unit { ...@@ -960,9 +933,9 @@ body.unit {
} }
} }
} }
} }
.unit-location { .unit-location {
// unit id // unit id
.wrapper-unit-id { .wrapper-unit-id {
...@@ -1086,9 +1059,9 @@ body.unit { ...@@ -1086,9 +1059,9 @@ body.unit {
} }
} }
} }
} }
.edit-state-draft { .edit-state-draft {
.visibility, .visibility,
.edit-draft-message, .edit-draft-message,
...@@ -1099,9 +1072,9 @@ body.unit { ...@@ -1099,9 +1072,9 @@ body.unit {
.published-alert { .published-alert {
display: block; display: block;
} }
} }
.edit-state-public { .edit-state-public {
.delete-draft, .delete-draft,
.wrapper-component-action-header, .wrapper-component-action-header,
.new-component-item, .new-component-item,
...@@ -1118,9 +1091,9 @@ body.unit { ...@@ -1118,9 +1091,9 @@ body.unit {
.drag-handle { .drag-handle {
display: none !important; display: none !important;
} }
} }
.edit-state-private { .edit-state-private {
.delete-draft, .delete-draft,
.publish-draft, .publish-draft,
.editing-draft-alert, .editing-draft-alert,
...@@ -1128,7 +1101,9 @@ body.unit { ...@@ -1128,7 +1101,9 @@ body.unit {
.view-button { .view-button {
display: none; display: none;
} }
}
} }
// ==================== // ====================
// Latex Compiler // Latex Compiler
...@@ -1156,7 +1131,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ ...@@ -1156,7 +1131,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
// xblock - unit page container // xblock - unit page container
body.unit .xblock-type-container { body.unit .xblock-type-container {
@extend %wrap-xblock;
margin: 0; margin: 0;
border: none; border: none;
box-shadow: none; box-shadow: none;
...@@ -1259,8 +1233,7 @@ body.unit .component { ...@@ -1259,8 +1233,7 @@ body.unit .component {
body.view-unit .main-column .unit-body, body.view-unit .main-column .unit-body {
body.view-container {
// New Components // New Components
.new-component-item { .new-component-item {
......
...@@ -127,13 +127,6 @@ ...@@ -127,13 +127,6 @@
} }
} }
.new-update-button {
@include blue-button;
display: block;
text-align: center;
padding: 18px 0;
margin-bottom: 28px;
}
.new-update-form { .new-update-form {
@include edit-box; @include edit-box;
......
<% if (type === 'advanced' || templates.length > 1) { %> <% 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 { %> <% } 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="large-template-icon large-<%= type %>-icon"></span>
<span class="name"><%= display_name %></span> <span class="name"><%= display_name %></span>
......
...@@ -266,6 +266,14 @@ ...@@ -266,6 +266,14 @@
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
} }
%no-content {
@extend %ui-well;
padding: $baseline;
background-color: $gray-l4;
text-align: center;
color: $gray;
}
.ui-loading { .ui-loading {
@include animation(fadeIn $tmg-f2 linear 1); @include animation(fadeIn $tmg-f2 linear 1);
@extend %ui-well; @extend %ui-well;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment