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 644 additions and 339 deletions
cms/static/sass/_base.scss
......@@ -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 {
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 @@
// ====================
// 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
}
}
}
......
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/style-app-extend1.scss
......@@ -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';
......
cms/static/sass/style-app.scss
......@@ -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';
......
cms/static/sass/views/_assets.scss
......@@ -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;
}
}
// 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;
}
&.action-lock label {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
&.action-lock {
position: relative;
}
&:hover {
background-color: $blue;
}
}
&.action-lock label {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
&.action-lock .lock-checkbox {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
opacity: 0;
}
&:hover {
&.action-lock .lock-checkbox:hover ~ .action-button {
background-color: $blue;
color: $gray-l6;
}
}
&.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;
}
&.action-lock .lock-checkbox ~ .action-button {
.icon-lock {
display: none;
}
.icon-unlock-alt {
display: inline-block;
.icon-unlock-alt {
display: inline-block;
}
}
}
&.action-lock .lock-checkbox:checked ~ .action-button {
background-color: $gray;
color: $white;
&.action-lock .lock-checkbox:checked ~ .action-button {
background-color: $gray;
color: $white;
.icon-lock {
display: inline-block;
}
.icon-lock {
display: inline-block;
}
.icon-unlock-alt {
display: none;
.icon-unlock-alt {
display: none;
}
}
}
}
.show-xml {
......
cms/static/sass/views/_outline.scss
......@@ -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;
......
cms/static/sass/views/_updates.scss
......@@ -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;
......
cms/templates/js/add-xblock-component-button.underscore
<% 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>
......
common/static/sass/_mixins.scss
......@@ -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;
......
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