Skip to content

E
edx-platform
Commit bbcc0030 by Frances Botsford Committed by cahrens
Options

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
Showing with 1337 additions and 707 deletions
cms/static/sass/_base.scss
...@@ -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;
}
// ==================== // ====================
......
cms/static/sass/_shame.scss
...@@ -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;
}
cms/static/sass/elements/_controls.scss
...@@ -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
}
} }
} }
......
cms/static/sass/elements/_layout.scss 0 → 100644
// 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;
}
cms/static/sass/elements/_modules.scss 0 → 100644
// 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);
}
}
}
cms/static/sass/elements/_xblocks.scss
// studio - elements - xblock rendering // studio - elements - xblock rendering
// ========================== // ==========================
// styling for xblocks at various levels of nesting: page level,
// extends - UI archetypes - xblock rendering // extends - UI archetypes - xblock rendering
%wrap-xblock { .wrapper-xblock {
margin: ($baseline/2); margin: ($baseline/2);
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
border-radius: ($baseline/5); border-radius: ($baseline/5);
...@@ -14,7 +16,7 @@ ...@@ -14,7 +16,7 @@
box-shadow: 0 0 1px $shadow; box-shadow: 0 0 1px $shadow;
} }
// UI: xblock header // UI: xblock header primary for main title and xblock actions
.xblock-header-primary { .xblock-header-primary {
@include box-sizing(border-box); @include box-sizing(border-box);
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
...@@ -43,6 +45,7 @@ ...@@ -43,6 +45,7 @@
} }
} }
// secondary header for meta-information and associated actions
.xblock-header-secondary { .xblock-header-secondary {
overflow: hidden; overflow: hidden;
border-top: 1px solid $gray-l3; border-top: 1px solid $gray-l3;
...@@ -99,22 +102,34 @@ ...@@ -99,22 +102,34 @@
} }
} }
} }
}
// ==================== // ====================
// UI: xblocks - calls-to-action //UI: default internal xblock content styles
.wrapper-xblock .header-actions {
@extend %actions-header;
.action-button [class^="icon-"] { // internal headings for problems and video components
font-style: normal; h2 {
@extend %t-title5;
margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
color: $gray;
letter-spacing: 1px;
text-transform: uppercase;
} }
}
// UI: xblock is collapsible
.wrapper-xblock.is-collapsible, // ====================
.wrapper-xblock.xblock-type-container {
// UI: xblocks - calls-to-action
.wrapper-xblock .header-actions {
.actions-list {
@extend %actions-list;
}
}
// UI: xblock is collapsible
.wrapper-xblock.is-collapsible,
.wrapper-xblock.xblock-type-container {
[class^="icon-"] { [class^="icon-"] {
font-style: normal; font-style: normal;
...@@ -142,9 +157,10 @@ ...@@ -142,9 +157,10 @@
padding-left: 0; padding-left: 0;
} }
} }
} }
.wrapper-xblock-message { // xblock message area, for general information as well as validation
.wrapper-xblock-message {
.xblock-message { .xblock-message {
@extend %t-copy-sub1; @extend %t-copy-sub1;
...@@ -195,8 +211,573 @@ ...@@ -195,8 +211,573 @@
} }
.xblock-message-actions { .xblock-message-actions {
@extend %actions-header;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
background-color: $gray-d1; 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;
}
}
}
}
// CASE: edited experiment groups: active and inactive
.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;
}
}
// 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;
}
cms/static/sass/style-app-extend1.scss
...@@ -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';
......
cms/static/sass/style-app.scss
...@@ -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';
......
cms/static/sass/views/_assets.scss
...@@ -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 {
......
cms/static/sass/views/_container.scss
// studio - views - container // 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. // 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,6 +8,9 @@ ...@@ -8,6 +8,9 @@
// UI: container page view // UI: container page view
.view-container { .view-container {
@extend %two-col-1;
.wrapper-mast {
.mast { .mast {
border-bottom: none; border-bottom: none;
...@@ -22,54 +25,41 @@ ...@@ -22,54 +25,41 @@
.page-header-title-edit { .page-header-title-edit {
@extend %t-title4; @extend %t-title4;
background: none repeat scroll 0 0 $white; background: none repeat scroll 0 0 white;
border: 0; border: 0;
box-shadow: 0 0 2px 2px $shadow inset; box-shadow: 0 0 2px 2px $shadow inset;
font-weight: 600; font-weight: 600;
} }
}
.wrapper-mast .mast.has-navigation .nav-actions { &.has-actions {
.nav-item { .nav-actions {
.edit-button { .button {
@include blue-button; @extend %btn-primary-blue;
@extend %t-action4; @extend %t-action3;
padding: ($baseline/4) ($baseline/2); box-shadow: none;
text-align: center; padding: ($baseline/4) ($baseline*.75);
font-weight: 400;
.action-button-text { &.is-disabled {
display: inline-block; // TO-DO: will review styling before merge to master
vertical-align: baseline; // 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 { .content-primary {
margin-right: flex-gutter();
width: flex-grid(9,12);
box-shadow: none;
border: 0;
.no-container-content { .no-container-content {
@extend %ui-well; @extend %no-content;
padding: $baseline;
background-color: $gray-l4;
text-align: center;
color: $gray;
// custom rules to reuse xblock validation styling in ui-well context
.icon-warning-sign { .icon-warning-sign {
display: none; display: none;
} }
...@@ -80,92 +70,116 @@ ...@@ -80,92 +70,116 @@
padding: 8px 20px 10px; padding: 8px 20px 10px;
text-align: center; text-align: center;
margin: ($baseline/2) 0 ($baseline/2) $baseline; margin: ($baseline/2) 0 ($baseline/2) $baseline;
}
}
// dragging bits
.ui-sortable-helper {
[class^="icon-"] { article {
margin-right: ($baseline/2); 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 { .content-supplementary {
width: flex-grid(3,12);
label { label {
@extend %t-title8; @extend %t-title8;
} }
.bit-publishing { .bit-publishing {
margin-bottom: $baseline; @extend %bar-module;
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;
}
&.published { &.published {
border-top: 5px solid $blue; @extend %bar-module-green;
}
.pub-status { &.draft {
background-color: $blue-t0; @extend %bar-module-yellow;
} }
&.staff-only {
@extend %bar-module;
} }
&.draft { .bar-mod-content {
border-top: 5px solid $gray-l1; border: 0;
padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);
.pub-status { .title {
background-color: $gray-l4; @extend %t-title8;
} margin-bottom: ($baseline/10);
text-transform: uppercase;
color: $gray-l3;
} }
.copy { .meta {
@extend %t-copy-sub1; @extend %t-copy-sub2;
padding: ($baseline*.75) ($baseline*.75) ($baseline) ($baseline*.75); color: $gray-l1;
} }
} }
// location widget .wrapper-last-draft {
.unit-location { padding: ($baseline*.75) ($baseline*.75) ($baseline/4) ($baseline*.75);
border-top: 5px solid $gray-l1; }
background-color: $white;
.wrapper-release {
.header { .release-date {
@extend %t-title6;
padding: ($baseline/2) ($baseline*.75);
background-color: $gray-l4;
font-weight: 600; font-weight: 600;
} }
}
.content-bit { .wrapper-visibility {
margin: ($baseline*.75);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
&:last-child { .copy {
border-bottom: 0; font-weight: 600;
}
} }
.title { .wrapper-pub-actions {
@extend %t-title7; padding: ($baseline*.75);
margin-bottom: ($baseline/2);
font-weight: 600; .action-publish {
color: $gray-d1; @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;
}
} }
.tip { .action-discard {
@extend %t-copy-sub2; @extend %t-copy-sub1;
display: inline-block; display: block;
margin: ($baseline/4) 0; margin-top: ($baseline/2);
color: $gray-l2; text-align: right;
&.is-disabled {
pointer-events: none;
color: $gray-l1;
} }
} }
}
}
// location widget
.unit-location {
@extend %bar-module;
.wrapper-unit-id { .wrapper-unit-id {
...@@ -174,6 +188,13 @@ ...@@ -174,6 +188,13 @@
display: inline-block; display: inline-block;
margin: ($baseline/4) 0; margin: ($baseline/4) 0;
} }
.tip {
@extend %t-copy-sub2;
display: inline-block;
margin: ($baseline/4) 0;
color: $gray-l2;
}
} }
.wrapper-unit-tree-location { .wrapper-unit-tree-location {
...@@ -182,14 +203,11 @@ ...@@ -182,14 +203,11 @@
display: none; display: none;
} }
.section-name { // need to explicitly set this since the html sturcture is different than the others
@extend %t-title8; .section-name:hover {
&:hover {
background: $blue-l5; background: $blue-l5;
color: $blue; color: $blue;
} }
}
.subsection, .subsection,
.courseware-unit { .courseware-unit {
...@@ -223,6 +241,7 @@ ...@@ -223,6 +241,7 @@
background-color: $orange-l3; background-color: $orange-l3;
} }
// TODO: update these once we have different pub states
.public-item { .public-item {
color: $black; color: $black;
} }
...@@ -285,252 +304,4 @@ ...@@ -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;
}
}
cms/static/sass/views/_outline.scss
...@@ -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;
......
cms/static/sass/views/_unit.scss
...@@ -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 {
......
cms/static/sass/views/_updates.scss
...@@ -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;
......
cms/templates/js/add-xblock-component-button.underscore
<% 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>
......
common/static/sass/_mixins.scss
...@@ -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