Skip to content

E
edx-platform
Commit f069c1a1 by Brian Talbot
Options

Studio: style reorg 

typography, SASS import, mixins/extends
parent 60f5314a
Showing with 671 additions and 574 deletions
cms/static/sass/_base.scss
......@@ -8,11 +8,10 @@ html {
}
body {
@include font-size(16);
@extend .t-copy-base;
min-width: $fg-min-width;
background: $gray-l5;
line-height: 1.6;
color: $baseFontColor;
color: $gray-d2;
}
body, input {
......@@ -30,7 +29,7 @@ a {
}
h1 {
@include font-size(28);
@extend .t-title4;
font-weight: 300;
}
......@@ -51,43 +50,152 @@ h1 {
// ====================
// typography - basic
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
.page-header {
@extend .t-title3;
display: block;
font-weight: 600;
color: $gray-d3;
margin: 0;
padding: 0;
.subtitle {
@extend .t-title7;
position: relative;
top: ($baseline/4);
display: block;
color: $gray-l2;
font-weight: 400;
}
}
.section-header {
@extend .t-title4;
font-weight: 600;
.subtitle {
@extend .t-title7;
}
}
.area-header {
@extend .t-title6;
font-weight: 600;
.subtitle {
@extend .t-title8;
}
}
.area-subheader {
@extend .t-title7;
font-weight: 600;
.subtitle {
@extend .t-title9;
}
}
// ====================
// typography - primary content
.content-primary {
.section-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.area-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.area-subheader {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// typography - primary content
.content-secondary {
.section-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// ====================
// typography - loose headings (BT: needs to be removed once html is clean)
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
font-weight: 600;
}
.title-1 {
@include font-size(32);
@extend .t-title3;
margin-bottom: ($baseline*1.5);
}
.title-2 {
@include font-size(24);
@extend .t-title4;
margin-bottom: $baseline;
}
.title-3 {
@include font-size(18);
@extend .t-title5;
margin-bottom: ($baseline/2);
}
.title-4 {
@include font-size(14);
@extend .t-title7;
margin-bottom: $baseline;
font-weight: 500
}
.title-5 {
@include font-size(14);
@extend .t-title7;
color: $gray-l1;
margin-bottom: $baseline;
font-weight: 500
}
.title-6 {
@include font-size(14);
@extend .t-title7;
color: $gray-l2;
margin-bottom: $baseline;
font-weight: 500
......@@ -118,7 +226,6 @@ p, ul, ol, dl {
.mast, .metadata {
@include clearfix();
@include font-size(16);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
......@@ -131,53 +238,8 @@ p, ul, ol, dl {
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
.title-sub {
@include font-size(14);
position: relative;
top: ($baseline/4);
display: block;
margin: 0;
color: $gray-l2;
font-weight: 400;
}
.title, .title-1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
color: $gray-d3;
}
.nav-hierarchy {
@include font-size(14);
display: block;
margin: 0;
color: $gray-l2;
font-weight: 400;
.nav-item {
display: inline;
vertical-align: middle;
margin-right: ($baseline/4);
&:after {
content: ">>";
margin-left: ($baseline/4);
}
&:last-child {
margin-right: 0;
&:after {
content: none;
}
}
}
}
// layout with actions
.title {
.page-header {
width: flex-grid(12);
}
......@@ -185,7 +247,7 @@ p, ul, ol, dl {
&.has-actions {
@include clearfix();
.title {
.page-header {
float: left;
width: flex-grid(6,12);
margin-right: flex-gutter();
......@@ -210,22 +272,20 @@ p, ul, ol, dl {
// buttons
.button {
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important;
font-weight: 400 !important;
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
}
.new-button {
font-weight: 700 !important;
}
.view-button {
font-weight: 700 !important;
}
.upload-button .icon-create {
@include font-size(18);
margin-top: ($baseline/4);
@extend .t-action2;
line-height: 0 !important;
}
}
}
......@@ -254,7 +314,7 @@ p, ul, ol, dl {
.content {
@include clearfix();
@include font-size(16);
@extend .t-copy-base;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -268,14 +328,14 @@ p, ul, ol, dl {
padding-bottom: ($baseline/2);
.title-sub {
@include font-size(14);
@extend .t-copy-sub1;
display: block;
margin: 0;
color: $gray-l2;
}
.title-1 {
@include font-size(32);
@extend .t-title3;
margin: 0;
padding: 0;
font-weight: 600;
......@@ -285,7 +345,7 @@ p, ul, ol, dl {
.introduction {
@include box-sizing(border-box);
@include font-size(14);
@extend .t-copy-sub1;
width: flex-grid(12);
margin: 0 0 $baseline 0;
......@@ -303,14 +363,14 @@ p, ul, ol, dl {
}
.nav-introduction-supplementary {
@include font-size(13);
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@include font-size(14);
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
......@@ -327,21 +387,17 @@ p, ul, ol, dl {
// layout - primary content
.content-primary {
.title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
color: $gray-d3;
}
.title-1 {
@extend .t-title-1;
@extend .t-title3;
}
.title-2 {
@extend .t-title-2;
@extend .t-title4;
margin: 0 0 ($baseline/2) 0;
}
.title-3 {
@extend .t-title-3;
@extend .t-title6;
margin: 0 0 ($baseline/2) 0;
}
......@@ -355,7 +411,7 @@ p, ul, ol, dl {
}
.tip {
@include font-size(13);
@extend .t-copy-sub2;
width: flex-grid(7, 12);
float: right;
margin-top: ($baseline/2);
......@@ -373,7 +429,7 @@ p, ul, ol, dl {
}
.bit {
@include font-size(13);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
......@@ -386,7 +442,7 @@ p, ul, ol, dl {
}
h3 {
@include font-size(14);
@extend .t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
......@@ -655,7 +711,7 @@ hr.divide {
.new-button {
@include green-button;
@include font-size(13);
@extend .t-action4;
padding: 8px 20px 10px;
text-align: center;
......@@ -674,7 +730,7 @@ hr.divide {
.view-button {
@include blue-button;
@include font-size(13);
@extend .t-copy-base;
text-align: center;
&.big {
......@@ -693,7 +749,7 @@ hr.divide {
.edit-button.standard,
.delete-button.standard {
@include font-size(12);
@extend .t-action4;
@include white-button;
float: left;
padding: 3px 10px 4px;
......@@ -714,6 +770,7 @@ hr.divide {
}
.tooltip {
@extend .t-copy-sub2;
position: absolute;
top: 0;
left: 0;
......@@ -721,7 +778,6 @@ hr.divide {
padding: 0 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.85);
font-size: 11px;
font-weight: normal;
line-height: 26px;
color: #fff;
......@@ -821,14 +877,14 @@ body.js {
}
.title {
@include font-size(18);
@extend .t-title5;
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
color: $gray-d3;
}
.description {
@include font-size(13);
@extend .t-copy-sub2;
margin-top: ($baseline/2);
color: $gray-l1;
}
......
cms/static/sass/_reset.scss
......@@ -6,6 +6,11 @@
// @include box-sizing(border-box);
// }
// better text rendering/kerning through SVG
* {
text-rendering: optimizeLegibility;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......@@ -15,7 +20,7 @@ b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
......@@ -31,7 +36,7 @@ html,body {
height: 100%;
}
article, aside, details, figcaption, figure,
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
......@@ -110,7 +115,7 @@ abbr[title] {
border: none;
top: 0;
margin: 0;
float: none;
float: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
......@@ -131,7 +136,7 @@ abbr[title] {
padding: 0;
}
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
.problem-type-tabs {
border:none;
list-style-type: none;
......@@ -139,7 +144,7 @@ abbr[title] {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
//background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
li:first-child {
margin-left: 20px;
}
......@@ -156,4 +161,4 @@ abbr[title] {
border: 0px;
}
}
}
\ No newline at end of file
}
cms/static/sass/_shame.scss 0 → 100644
// studio - shame
// // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ====================
cms/static/sass/_variables.scss
......@@ -12,9 +12,15 @@ $fg-max-columns: 12;
$fg-max-width: 1280px;
$fg-min-width: 900px;
// type
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
// ====================
// fonts
$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-decorative: '';
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ====================
// colors - new for re-org
$black: rgb(0,0,0);
......@@ -152,11 +158,14 @@ $shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
// specific UI
$notification-height: ($baseline*10);
// colors - inherited
// ====================
// inherited
$baseFontColor: $gray-d2;
$offBlack: #3c3c3c;
$green: #108614;
......@@ -173,3 +182,8 @@ $darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
$error-red: rgb(253, 87, 87);
// type
$sans-serif: $f-serif;
$body-line-height: golden-ratio(.875em, 1);
cms/static/sass/assets/_keyframes.scss → cms/static/sass/assets/_anims.scss
......@@ -94,7 +94,7 @@
// notifications slide up then down
@mixin notificationsSlideUpDown {
0%, 100% {
0%, 100% {
@include transform(translateY(0));
}
......@@ -199,4 +199,4 @@
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
\ No newline at end of file
}
cms/static/sass/assets/_fonts.scss
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
// studio - assets - fonts
// ====================
// import from google fonts - Open Sans
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
// import from google fonts - Bree
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
cms/static/sass/base-style.scss
// studio - css architecture
// ====================
// bourbon libs and resets
@import 'bourbon/bourbon';
@import 'bourbon/addons/button';
@import "variables";
// libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon
@import 'bourbon/addons/button'; // lib bourbon - button add-on
// VENDOR + REBASE *referenced/used vendor presentation and reset*
// ====================
@import 'vendor/normalize';
@import 'reset';
// utilities
// BASE *default edX offerings*
// ====================
// base - utilities
@import 'variables';
@import 'mixins';
@import 'cms_mixins';
@import 'mixins-inherited';
// assets
// base - assets
@import 'assets/fonts';
@import 'assets/graphics';
@import 'assets/keyframes';
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
@import 'assets/anims'; // animations
// base
// base - starter
@import 'base';
// elements
// base - elements
@import 'elements/typography';
@import 'elements/icons';
@import 'elements/controls';
@import 'elements/navigation';
@import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/navigation'; // all archetypes of navigation
@import 'elements/forms';
@import 'elements/header';
@import 'elements/footer';
@import 'elements/sock';
@import 'elements/forms';
@import 'elements/modal';
@import 'elements/alerts';
@import 'elements/vendor';
@import 'elements/tender-widget';
@import 'elements/system-feedback'; // alerts, notifications, states
@import 'elements/system-help'; // help UI
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
@import 'elements/vendor'; // overrides to vendor-provided styling
// specific views
// base - specific views
@import 'views/account';
@import 'views/assets';
@import 'views/updates';
......@@ -51,8 +58,12 @@
@import 'views/users';
@import 'views/checklists';
// temp - inherited
@import 'assets/content-types';
// xblock-related
// xmodule
@import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss';
@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
cms/static/sass/elements/_controls.scss
......@@ -141,3 +141,9 @@
// calls-to-action
// ====================
// specific buttons - view live
.view-live-button {
@extend .t-action4;
}
cms/static/sass/elements/_footer.scss
......@@ -8,8 +8,8 @@
padding: $baseline;
footer.primary {
@extend .t-copy-sub2;
@include clearfix();
@include font-size(13);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -72,4 +72,4 @@
}
}
}
}
\ No newline at end of file
}
cms/static/sass/elements/_header.scss
......@@ -2,6 +2,7 @@
// ====================
.wrapper-header {
@extend .depth3;
margin: 0;
padding: $baseline;
border-bottom: 1px solid $gray;
......@@ -10,7 +11,6 @@
height: 76px;
position: relative;
width: 100%;
z-index: 1000;
a {
color: $baseFontColor;
......@@ -146,7 +146,7 @@
.title {
display: block;
padding: 5px;
padding: 0 ($baseline/4);
text-transform: uppercase;
font-weight: 600;
color: $gray-d3;
......@@ -516,21 +516,21 @@ body.signup .nav-not-signedin-signin {
a {
background-color: #d9e3ee;
color: #6d788b;
color: #6d788b;
}
}
body.signin .nav-not-signedin-signup {
a {
background-color: #62aaf5;
color: #fff;
color: #fff;
}
}
// ====================
// STATE: js enabled
// STATE: js enabled
.js {
.nav-dropdown {
......@@ -559,4 +559,4 @@ body.signin .nav-not-signedin-signup {
pointer-events: auto;
}
}
}
\ No newline at end of file
}
cms/static/sass/elements/_navigation.scss
......@@ -2,6 +2,19 @@
// ====================
// common
nav {
ol, ul {
@extend .no-list;
}
.nav-item {
a {
}
}
}
// ====================
......@@ -21,4 +34,4 @@
// ====================
//
\ No newline at end of file
//
cms/static/sass/elements/_sock.scss
......@@ -28,13 +28,13 @@
.cta-show-sock {
@extend .btn-pill;
@extend .t-action3;
@extend .t-action4;
background: $gray-l5;
padding: ($baseline/2) $baseline;
color: $gray;
.icon {
@include font-size(16);
@include font-size(14);
}
&:hover {
......@@ -59,7 +59,7 @@
header {
.title {
@extend .t-title-2;
@extend .t-title4;
}
.ss-icon {
......@@ -73,12 +73,13 @@
@include box-sizing(border-box);
.title {
@extend .t-title-3;
@extend .t-title6;
color: $white;
margin-bottom: ($baseline/2);
}
.copy {
@extend .t-copy-sub2;
margin: 0 0 $baseline 0;
}
......@@ -94,6 +95,7 @@
}
.action {
@extend .t-action4;
display: block;
.icon {
......@@ -149,4 +151,4 @@
color: $white;
}
}
}
\ No newline at end of file
}
cms/static/sass/elements/_alerts.scss → cms/static/sass/elements/_system-feedback.scss
// studio alerts, prompts and notifications
// studio - elements - system feedback
// alerts, notifications, prompts, and status communication
// ====================
// shared
......@@ -6,7 +7,7 @@
@include box-sizing(border-box);
.copy {
@extend .t-copy-sub2;
@extend .t-copy-sub1;
}
}
......@@ -36,6 +37,7 @@
.nav-actions .action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d2;
}
......@@ -53,6 +55,7 @@
.nav-actions .action-primary {
@include orange-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $orange-d2;
color: $gray-d4;
}
......@@ -71,6 +74,7 @@
.nav-actions .action-primary {
@include red-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $red-d2;
}
......@@ -88,6 +92,7 @@
.nav-actions .action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d2;
}
......@@ -105,6 +110,8 @@
.nav-actions .action-primary {
@include green-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $green-d2;
}
......@@ -121,8 +128,9 @@
&.step-required {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $pink-d2;
}
a {
......@@ -137,6 +145,7 @@
// prompts
.wrapper-prompt {
@extend .depth4;
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
......@@ -144,7 +153,6 @@
width: 100%;
height: 100%;
text-align: center;
z-index: 10000;
&:before {
content: '';
......@@ -184,12 +192,12 @@
}
.action-primary {
@extend .t-action3;
@extend .t-action4;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
}
......@@ -235,11 +243,11 @@
// notifications
.wrapper-notification {
@extend .depth3;
@include clearfix();
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
padding: $baseline ($baseline*2);
......@@ -361,18 +369,19 @@
@include font-size(22);
width: flex-grid(1, 12);
height: ($baseline*1.25);
margin-top: ($baseline/4);
margin-right: flex-gutter();
text-align: right;
color: $white;
}
.copy {
@extend .t-copy-sub2;
@extend .t-copy-sub1;
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@extend .t-title-4;
@extend .t-title7;
margin-bottom: 0;
color: $white;
}
......@@ -409,13 +418,12 @@
.action-primary {
@include blue-button();
@extend .t-action3;
border-color: $blue-d2;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
......@@ -443,10 +451,10 @@
// alerts
.wrapper-alert {
@extend .depth2;
@include box-sizing(border-box);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
position: relative;
z-index: 100;
overflow: hidden;
width: 100%;
border-top: 1px solid $black;
......@@ -504,7 +512,6 @@
// adopted alerts
.alert {
@extend .t-copy-sub2;
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
......@@ -530,11 +537,11 @@
}
.copy {
@extend .t-copy-sub2;
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@extend .t-title7;
margin-bottom: 0;
color: $white;
}
......@@ -568,12 +575,12 @@
}
.action-primary {
@extend .t-action3;
@extend .t-action4;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
}
......@@ -730,7 +737,7 @@ body.uxdesign.alerts {
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
@extend .t-copy-sub1;
font-size: 14px;
@include clearfix;
.alert-message {
......
cms/static/sass/elements/_system-help.scss 0 → 100644
// studio - elements - system help
// ====================
cms/static/sass/elements/_typography.scss
// studio - elements - typography
// ====================
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// headings/titles
.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5 {
color: $gray-d3;
.t-title {
font-family: $f-sans-serif;
}
.t-title1 {
@extend .t-title;
@include font-size(60);
@include lh(60);
}
.t-title-1 {
.t-title2 {
@extend .t-title;
@include font-size(48);
@include lh(48);
}
.t-title3 {
@include font-size(36);
@include lh(36);
}
.t-title-2 {
.t-title4 {
@extend .t-title;
@include font-size(24);
font-weight: 600;
@include lh(24);
}
.t-title5 {
@extend .t-title;
@include font-size(18);
@include lh(18);
}
.t-title-3 {
.t-title6 {
@extend .t-title;
@include font-size(16);
font-weight: 600;
@include lh(16);
}
.t-title-4 {
.t-title7 {
@extend .t-title;
@include font-size(14);
@include lh(14);
}
.t-title-5 {
.t-title8 {
@extend .t-title;
@include font-size(12);
@include lh(12);
}
.t-title9 {
@extend .t-title;
@include font-size(11);
@include lh(11);
}
// ====================
// copy
.t-copy {
font-family: $f-sans-serif;
}
.t-copy-base {
@extend .t-copy;
@include font-size(16);
@include lh(16);
}
.t-copy-lead1 {
@extend .t-copy;
@include font-size(18);
@include lh(18);
}
.t-copy-lead2 {
@include font-size(20);
@extend .t-copy;
@include font-size(24);
@include lh(24);
}
.t-copy-sub1 {
@extend .t-copy;
@include font-size(14);
@include lh(14);
}
.t-copy-sub2 {
@include font-size(13);
}
.t-copy-sub3 {
@extend .t-copy;
@include font-size(12);
@include lh(12);
}
// ====================
// actions/labels
.t-action1 {
@include font-size(14);
font-weight: 600;
@include font-size(18);
@include lh(18);
}
.t-action2 {
@include font-size(13);
font-weight: 600;
text-transform: uppercase;
@include font-size(16);
@include lh(16);
}
.t-action3 {
@include font-size(13);
@include font-size(14);
@include lh(14);
}
.t-action4 {
@include font-size(12);
@include lh(12);
}
// ====================
// code
.t-code {
font-family: $f-monospace;
}
// ====================
......
cms/static/sass/elements/_vendor.scss
......@@ -6,7 +6,7 @@
border-color: $darkGrey;
border-radius: 2px;
background: #fff;
font-family: $sans-serif;
font-family: $f-sans-serif;
font-size: 12px;
@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
z-index: 100000 !important;
......@@ -62,4 +62,4 @@
// JQUI timepicker
.ui-timepicker-list {
z-index: 100000 !important;
}
\ No newline at end of file
}
cms/static/sass/views/_account.scss
......@@ -12,7 +12,7 @@ body.signup, body.signin {
.content {
@include clearfix();
@include font-size(16);
@extend .t-copy-base;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -26,14 +26,14 @@ body.signup, body.signin {
padding-bottom: ($baseline/2);
h1 {
@include font-size(32);
@extend .t-title3;
margin: 0;
padding: 0;
font-weight: 600;
}
.action {
@include font-size(13);
@extend .t-action3;
position: absolute;
right: 0;
top: 40%;
......@@ -41,7 +41,7 @@ body.signup, body.signin {
}
.introduction {
@include font-size(14);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
}
}
......@@ -69,8 +69,8 @@ body.signup, body.signin {
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
@include font-size(15);
display: block;
width: 100%;
padding: ($baseline*0.75) ($baseline/2);
......@@ -108,7 +108,7 @@ body.signup, body.signin {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
......@@ -118,7 +118,7 @@ body.signup, body.signin {
}
input, textarea {
@include font-size(16);
@extend .t-copy-base;
height: 100%;
width: 100%;
padding: ($baseline/2);
......@@ -171,8 +171,8 @@ body.signup, body.signin {
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......@@ -212,7 +212,7 @@ body.signup, body.signin {
width: flex-grid(4, 12);
.bit {
@include font-size(13);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
......@@ -225,7 +225,7 @@ body.signup, body.signin {
}
h3 {
@include font-size(14);
@extend .t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
......@@ -245,7 +245,7 @@ body.signup, body.signin {
position: relative;
.action-forgotpassword {
@include font-size(13);
@extend .t-action3;
position: absolute;
top: 0;
right: 0;
......@@ -257,7 +257,7 @@ body.signup, body.signin {
// messages
.message {
@include font-size(14);
@extend .t-copy-sub1;
display: block;
}
......
cms/static/sass/views/_checklists.scss
......@@ -83,13 +83,13 @@ body.course.checklists {
}
.checklist-status {
@include font-size(13);
@extend .t-copy-sub1;
width: flex-grid(3, 9);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
.icon-confirm {
@include font-size(20);
......@@ -100,7 +100,7 @@ body.course.checklists {
}
.status-count {
@include font-size(16);
@extend .t-copy-base;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
color: $gray-d3;
......@@ -108,7 +108,7 @@ body.course.checklists {
}
.status-amount {
@include font-size(16);
@extend .t-copy-base;
margin-left: ($baseline/4);
color: $gray-d3;
font-weight: 600;
......@@ -138,8 +138,8 @@ body.course.checklists {
}
.action-secondary {
@include font-size(14);
@include grey-button();
@extend .t-action3;
font-weight: 400;
float: right;
......@@ -174,7 +174,7 @@ body.course.checklists {
// state - completed
&.is-completed {
.viz-checklist-status {
.viz-checklist-status-value {
......@@ -189,9 +189,9 @@ body.course.checklists {
}
.checklist-status {
.status-count, .status-amount, .icon-confirm {
color: $green;
color: $green;
}
}
}
......@@ -244,17 +244,17 @@ body.course.checklists {
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
}
}
.task-description {
@extend .t-copy-sub1;
@include transition(color .15s .25s ease-in-out);
@include font-size(14);
color: $gray-l2;
}
.task-support {
@extend .t-copy-sub2;
@include transition(opacity .15s .25s ease-in-out);
@include font-size(12);
opacity: 0;
pointer-events: none;
}
......@@ -274,14 +274,14 @@ body.course.checklists {
.action-primary {
@include blue-button;
@extend .t-action4;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
}
.action-secondary {
@include font-size(13);
@extend .t-action4;
margin-top: ($baseline/2);
}
}
......@@ -322,7 +322,7 @@ body.course.checklists {
.action-primary {
@include grey-button;
@include font-size(12);
@extend .t-action4;
font-weight: 600;
text-align: center;
}
......@@ -344,4 +344,4 @@ body.course.checklists {
.content-supplementary {
width: flex-grid(3, 12);
}
}
\ No newline at end of file
}
cms/static/sass/views/_index.scss
......@@ -18,14 +18,14 @@ body.index {
}
.content {
@extend .t-copy-base;
@include clearfix();
@include font-size(16);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-d2;
header {
border: none;
padding-bottom: 0;
......@@ -62,7 +62,7 @@ body.index {
color: $white;
h1 {
@include font-size(52);
@extend .t-title2;
float: none;
margin: 0 0 ($baseline/2) 0;
border-bottom: 1px solid $blue-l1;
......@@ -83,7 +83,7 @@ body.index {
}
.tagline {
@include font-size(24);
@extend .t-title4;
margin: 0;
color: $blue-l3;
}
......@@ -198,13 +198,13 @@ body.index {
margin-top: -($baseline/4);
h3 {
@extend .t-title4;
margin: 0 0 ($baseline/2) 0;
@include font-size(24);
font-weight: 600;
}
> p {
@include font-size(18);
@extend .t-copy-lead1;
color: $gray-d1;
}
......@@ -214,8 +214,8 @@ body.index {
}
.list-proofpoints {
@extend .t-copy-sub1;
@include clearfix();
@include font-size(14);
width: flex-grid(9, 9);
margin: ($baseline*1.5) 0 0 0;
......@@ -233,7 +233,7 @@ body.index {
color: $gray-l1;
.title {
@include font-size(16);
@extend .t-copy-base;
margin: 0 0 ($baseline/4) 0;
font-weight: 500;
color: $gray-d3;
......@@ -314,7 +314,7 @@ body.index {
margin-top: -($baseline*1.5);
li {
width: flex-grid(6, 12);
width: flex-grid(6, 12);
margin: 0 auto;
}
......@@ -322,23 +322,23 @@ body.index {
display: block;
width: 100%;
text-align: center;
}
.action-primary {
@include blue-button;
@include transition(all .15s);
@include font-size(18);
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
&.action-primary {
@extend .t-action1;
@include blue-button;
@include transition(all .15s);
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.action-secondary {
@include font-size(14);
margin-top: ($baseline/2);
&.action-secondary {
@extend .t-action3;
margin-top: ($baseline/2);
}
}
}
}
}
}
\ No newline at end of file
}
cms/static/sass/views/_outline.scss
......@@ -29,6 +29,7 @@ body.course.outline {
width: 100px;
.status-label {
@include font-size(12);
position: absolute;
top: 2px;
right: -5px;
......@@ -38,7 +39,6 @@ body.course.outline {
@include border-radius(3px);
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
......@@ -57,6 +57,10 @@ body.course.outline {
}
.menu {
@include font-size(12);
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -67,10 +71,6 @@ body.course.outline {
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
li {
......@@ -167,7 +167,7 @@ body.course.outline {
text-align: right;
.published-status {
font-size: 12px;
@include font-size(12);
margin-right: 15px;
strong {
......@@ -185,19 +185,19 @@ body.course.outline {
.schedule-button,
.edit-button {
font-size: 11px;
@include font-size(11);
padding: 3px 15px 5px;
}
}
.datepair .date,
.datepair .time {
@include font-size(13);
@include box-shadow(none);
padding-left: 0;
padding-right: 0;
border: none;
background: none;
@include box-shadow(none);
font-size: 13px;
font-weight: bold;
color: $blue;
cursor: pointer;
......@@ -231,10 +231,10 @@ body.course.outline {
@include clearfix();
.section-name {
@include font-size(19);
float: left;
margin-right: 10px;
width: 350px;
font-size: 19px;
font-weight: bold;
color: $blue;
}
......@@ -254,9 +254,9 @@ body.course.outline {
background: $white;
input {
font-size: 16px;
@include font-size(16);
}
.save-button {
@include blue-button;
padding: 7px 20px 7px;
......@@ -275,7 +275,7 @@ body.course.outline {
background: $lightGrey;
.published-status {
font-size: 12px;
@include font-size(12);
margin-right: 15px;
strong {
......@@ -293,9 +293,8 @@ body.course.outline {
.schedule-button,
.edit-button {
font-size: 11px;
padding: 3px 15px 5px;
@include font-size(11);
padding: 0 15px 2px 15px;
}
}
......@@ -306,17 +305,17 @@ body.course.outline {
width: 145px;
.status-label {
@include font-size(12);
@include border-radius(3px);
position: absolute;
top: 0;
right: 2px;
display: none;
width: 100px;
padding: 10px 35px 10px 10px;
@include border-radius(3px);
background: $lightGrey;
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
......@@ -335,6 +334,11 @@ body.course.outline {
}
.menu {
@include font-size(12);
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
@include transition(display .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -345,11 +349,7 @@ body.course.outline {
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
@include transition(display .15s);
li {
......@@ -410,7 +410,7 @@ body.course.outline {
}
}
.item-actions {
.item-actions {
margin-top: 21px;
margin-right: 12px;
......@@ -422,7 +422,7 @@ body.course.outline {
.expand-collapse-icon {
float: left;
margin: 29px 6px 16px 16px;
margin: 25px 6px 16px 16px;
@include transition(none);
&.expand {
......@@ -430,7 +430,7 @@ body.course.outline {
}
&.collapsed {
}
}
......@@ -440,7 +440,7 @@ body.course.outline {
}
h3 {
font-size: 19px;
@include font-size(19);
font-weight: 700;
color: $blue;
}
......@@ -460,9 +460,9 @@ body.course.outline {
.section-name-edit {
input {
font-size: 16px;
@include font-size(16);
}
.save-button {
@include blue-button;
padding: 7px 20px 7px;
......@@ -476,7 +476,7 @@ body.course.outline {
}
h4 {
font-size: 12px;
@include font-size(12);
color: #878e9d;
strong {
......@@ -502,8 +502,8 @@ body.course.outline {
&.new-section {
header {
height: auto;
@include clearfix();
height: auto;
}
.expand-collapse-icon {
......@@ -522,12 +522,11 @@ body.course.outline {
}
.toggle-button-sections {
@include font-size(12);
display: none;
position: relative;
float: right;
margin-top: 10px;
font-size: 13px;
margin-top: ($baseline/4);
color: $darkGrey;
&.is-shown {
......@@ -535,13 +534,13 @@ body.course.outline {
}
.ss-icon {
@include font-size(11);
@include border-radius(20px);
position: relative;
top: -1px;
display: inline-block;
margin-right: 2px;
line-height: 5px;
font-size: 11px;
}
.label {
......@@ -599,7 +598,7 @@ body.course.outline {
}
h3 {
font-size: 34px;
@include font-size(34);
font-weight: 300;
}
......@@ -625,16 +624,16 @@ body.course.outline {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
margin-bottom: ($baseline/4);
}
}
}
.description {
@include font-size(14);
float: left;
margin-top: 30px;
font-size: 14px;
line-height: 20px;
width: 100%;
}
......@@ -645,7 +644,7 @@ body.course.outline {
.start-date,
.start-time {
font-size: 19px;
@include font-size(19);
}
.save-button {
......@@ -659,14 +658,14 @@ body.course.outline {
.save-button,
.cancel-button {
font-size: 16px;
@include font-size(16);
}
}
.collapse-all-button {
@include font-size(13);
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
}
......@@ -686,7 +685,7 @@ body.course.outline {
border: 1px solid $darkGrey;
opacity : 0.2;
&:hover {
opacity : 1.0;
opacity : 1.0;
.section-item {
background: $yellow !important;
}
......@@ -701,4 +700,4 @@ body.course.outline {
ol.ui-droppable .branch:first-child .section-item {
border-top: none;
}
}
\ No newline at end of file
}
cms/static/sass/views/_settings.scss
......@@ -66,7 +66,7 @@ body.course.settings {
}
.tip {
@include font-size(13);
@extend .t-copy-sub2;
width: flex-grid(5, 9);
float: right;
margin-top: ($baseline/2);
......@@ -86,20 +86,20 @@ body.course.settings {
// in form -UI hints/tips/messages
.instructions {
@include font-size(14);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
.message-error {
@include font-size(13);
@extend .t-copy-sub1;
display: block;
margin-top: ($baseline/4);
margin-bottom: ($baseline/2);
......@@ -109,12 +109,13 @@ body.course.settings {
// buttons
.remove-item {
@include white-button;
@include font-size(13);
@extend .t-action-3;
font-weight: 400;
}
.new-button {
@include font-size(13);
// @extend .t-action-3; - bad buttons won't render this properly
@include font-size(14);
}
// form basics
......@@ -158,8 +159,8 @@ body.course.settings {
}
input, textarea {
@extend .t-copy-base;
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
padding: ($baseline/2);
......@@ -324,7 +325,7 @@ body.course.settings {
.action-primary {
@include blue-button();
@include font-size(13);
@extend .t-action-3;
font-weight: 600;
.icon {
......@@ -747,7 +748,7 @@ body.course.settings {
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
.CodeMirror {
@include font-size(16);
@extend .t-copy-base;
@include box-sizing(border-box);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
......
cms/static/sass/views/_static-pages.scss
......@@ -2,7 +2,7 @@
// ====================
body.course.static-pages {
.new-static-page-button {
@include grey-button;
display: block;
......@@ -44,7 +44,7 @@ body.course.static-pages {
label {
display: inline-block;
margin-right: 10px;
margin-right: 10px;
}
}
......@@ -123,7 +123,7 @@ body.course.static-pages {
.component-actions {
position: absolute;
top: 26px;
top: 20px;
right: 44px;
}
}
......@@ -150,12 +150,12 @@ body.course.static-pages {
}
.static-page-item {
position: relative;
position: relative;
margin: 10px 0;
padding: 22px 20px;
border: 1px solid $darkGrey;
border-radius: 3px;
background: #fff;
background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
.page-name {
......@@ -204,4 +204,4 @@ body.course.static-pages {
color: #3c3c3c;
outline: 0;
}
}
\ No newline at end of file
}
cms/templates/asset_index.html
......@@ -10,7 +10,7 @@
</%block>
<%block name="content">
<script type="text/template" id="new-asset-element">
<tr data-id='{{url}}'>
<td class="thumb-col">
......@@ -35,10 +35,10 @@
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Files &amp; Uploads</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Files &amp; Uploads
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......@@ -91,7 +91,7 @@
</tbody>
</table>
<nav class="pagination wip-box">
Page:
Page:
<ol class="pages">
<li>1</li>
<li><a href="#">2</a></li>
......
cms/templates/checklists.html
......@@ -30,10 +30,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Checklists</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Checklists
</h1>
</header>
</div>
......
cms/templates/course_info.html
......@@ -16,7 +16,7 @@
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
<script src="${static.url('js/vendor/date.js')}"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var course_updates = new CMS.Models.CourseUpdateCollection();
......@@ -27,7 +27,7 @@
id: '${handouts_location}'
});
course_handouts.urlbase = '${url_base}';
var editor = new CMS.Views.CourseInfoEdit({
el: $('.main-wrapper'),
model : new CMS.Models.CourseInfo({
......@@ -44,10 +44,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Updates</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Course Updates
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......@@ -80,4 +80,4 @@
</div>
</div>
</div>
</%block>
\ No newline at end of file
</%block>
cms/templates/edit-tabs.html
......@@ -18,10 +18,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Static Pages</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Static Pages
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......@@ -52,17 +52,17 @@
<div class="main-wrapper">
<div class="inner-wrapper">
<article class="unit-body">
<div class="tab-list">
<ol class='components'>
% for id in components:
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
</li>
</ol>
</ol>
</div>
</article>
</div>
......@@ -80,4 +80,4 @@
<span class="label">close modal</span>
</a>
</div>
</%block>
\ No newline at end of file
</%block>
cms/templates/edit_subsection.html
......@@ -85,6 +85,7 @@
</div>
</div>
</div>
</div>
</%block>
<%block name="jsextra">
......
cms/templates/export.html
......@@ -8,10 +8,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Export</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Export
</h1>
</header>
</div>
......@@ -37,9 +37,9 @@
<div class="export-form-wrapper">
<form action="${reverse('generate_export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="export-form">
<h2>Export Course:</h2>
<p class="error-block"></p>
<a href="${reverse('generate_export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" class="button-export">Download Files</a>
</form>
</div>
......@@ -49,11 +49,11 @@
<div class="export-form-wrapper is-downloading">
<form action="${reverse('export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="export-form">
<h2>Export Course:</h2>
<p class="error-block"></p>
<a href="#" class="button-export disabled">Files Downloading</a>
<p class="message-status">Download not start? <a href="#" class="text-export">Try again</a></p>
<p class="message-status">Download not start? <a href="#" class="text-export">Try again</a></p>
</form>
</div>
</%doc>
......
cms/templates/import.html
......@@ -8,10 +8,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Import</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Import
</h1>
</header>
</div>
......@@ -79,4 +79,4 @@ $('form').ajaxForm({
});
})();
</script>
</%block>
\ No newline at end of file
</%block>
cms/templates/index.html
......@@ -37,9 +37,7 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<h1 class="title-1">${_("My Courses")}</h1>
</div>
<h1 class="page-header">${_("My Courses")}</h1>
% if user.is_active:
<nav class="nav-actions">
......
cms/templates/manage_users.html
......@@ -6,10 +6,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Settings</span>
<h1 class="title-1">Course Team</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Settings</small>
<span class="sr">&gt; </span>Course Team
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......@@ -31,7 +31,7 @@
<p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
</div>
<article class="user-overview">
<article class="user-overview">
%if allow_actions:
<form class="new-user-form">
<div id="result"></div>
......@@ -106,7 +106,7 @@
$(document).ready(function() {
$newUserForm = $('.new-user-form');
var $cancelButton = $newUserForm.find('.cancel-button');
var $cancelButton = $newUserForm.find('.cancel-button');
$newUserForm.bind('submit', addUser);
$cancelButton.bind('click', hideNewUserForm);
......@@ -119,7 +119,7 @@
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data:JSON.stringify({ 'email': $(this).data('id')}),
data:JSON.stringify({ 'email': $(this).data('id')}),
}).done(function() {
location.reload();
})
......
cms/templates/overview.html
......@@ -106,10 +106,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Course Outline
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/settings.html
......@@ -50,10 +50,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Schedule &amp; Details</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Schedule &amp; Details
</h1>
</header>
</div>
......
cms/templates/settings_advanced.html
......@@ -44,10 +44,10 @@ editor.render();
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Advanced Settings</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Advanced Settings
</h1>
</header>
</div>
......
cms/templates/settings_graders.html
......@@ -41,10 +41,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Grading</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Grading
</h1>
</header>
</div>
......
cms/templates/ux-alerts.html
......@@ -82,10 +82,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">UX Design</span>
<h1 class="title-1">System Notifications</h1>
</div>
<h1 class="page-header">
<small class="subtitle">UX Design</small>
<span class="sr">&gt; </span>System Notifications
</h1>
</header>
</div>
......@@ -134,10 +134,6 @@
<a href="#notification-changesMade" class="hide-notification">Hide Changes Made (used in Advanced Settings)</a>
</li>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
......@@ -156,10 +152,6 @@
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
<li>
<a href="#notification-threeActions" class="show-notification">Show Notification with three actions</a>
<a href="#notification-threeActions" class="hide-notification">Hide Notification with three actions</a>
</li>
</ul>
</section>
......@@ -403,57 +395,6 @@
<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-change-title" aria-describedby="notification-change-description" id="notification-change">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3" id="notification-change-title">You've Made Some Changes</h2>
<p class="message" id="notification-change-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: three actions example -->
<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-threeActions-title" aria-describedby="notification-threeActions-description" id="notification-threeActions">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3" id="notification-threeActions-title">You've Made Some Changes</h2>
<p class="message" id="notification-threeActions-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Do something else</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description" id="notification-changesMade">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
......
common/static/sass/_mixins.scss
// studio - utilities - mixins and extends
// ====================
// font-sizing
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// mixins - line height
@mixin lh($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
}
// ====================
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
// mixins - sizing
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
width: $width;
}
// mixins - sizing
@mixin square($size: $baseline) {
@include size($size);
}
// ====================
// image-replacement hidden text
// mixins - image-replacement hidden text
@mixin text-hide() {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// hidden elems - screenreaders
// mixins - hidden elems - screenreaders
@mixin text-sr() {
border: 0;
clip: rect(0 0 0 0);
......@@ -41,32 +49,7 @@
// ====================
// vertical and horizontal centering
@mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%;
margin-left: -$width / 2;
//margin-top: -$height / 2;
min-height: $height;
min-width: $width;
position: absolute;
top: 150px;
}
// ====================
// sizing
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
width: $width;
}
@mixin square($size: $baseline) {
@include size($size);
}
// ====================
// placeholder styling
// mixins - placeholder styling
@mixin placeholder($color) {
:-moz-placeholder {
color: $color;
......@@ -74,109 +57,155 @@
::-webkit-input-placeholder {
color: $color;
}
:-ms-input-placeholder {
color: $color;
:-ms-input-placeholder {
color: $color;
}
}
// ====================
// extends - visual
.faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
// extends - layout
// used for page/view-level wrappers (for centering/grids)
.wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
// extends - image-replacement hidden text
.text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
// extends - hidden elems - screenreaders
.text-sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%;
width: 1px;
// extends - wrapping
.text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
// extends - visual link
.fake-link {
cursor: pointer;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
left: 1px;
}
// extends - functional disable
.disabled {
pointer-events: none;
outline: none;
}
.horizontal-divider {
border: none;
@extend .faded-hr-divider;
position: relative;
// extends - depth levels
.depth0 { z-index: 0; }
.depth1 { z-index: 10; }
.depth2 { z-index: 100; }
.depth3 { z-index: 1000; }
.depth4 { z-index: 10000; }
.depth5 { z-index: 100000; }
// ====================
// extends - buttons
.btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
display: inline-block;
cursor: pointer;
&:hover, &:active {
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
top: 1px;
}
}
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
border: none;
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
border: none;
// pill button
.btn-pill {
@include border-radius($baseline/5);
}
// extends - ui
.window {
@include clearfix();
@include border-radius(3px);
@include box-shadow(0 1px 1px $shadow-l1);
margin-bottom: $baseline;
border: 1px solid $gray-l2;
background: $white;
.btn-rounded {
@include border-radius($baseline/2);
}
.elem-d1 {
@include clearfix();
@include box-sizing(border-box);
// primary button
.btn-primary {
@extend .btn;
@extend .btn-pill;
padding:($baseline/2) $baseline;
border-width: 1px;
border-style: solid;
line-height: 1.5em;
text-align: center;
&:hover, &:active {
@include box-shadow(0 2px 1px $shadow-l1);
}
&.current, &.active {
@include box-shadow(inset 1px 1px 2px $shadow-d1);
&:hover, &:active {
@include box-shadow(inset 1px 1px 1px $shadow-d1);
}
}
}
.elem-d2 {
@include clearfix();
@include box-sizing(border-box);
}
\ No newline at end of file
// secondary button
.btn-secondary {
@extend .btn;
@extend .btn-pill;
border-width: 1px;
border-style: solid;
padding:($baseline/2) $baseline;
background: transparent;
line-height: 1.5em;
text-align: center;
&:hover, &:active {
}
&.current, &.active {
}
}
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