Skip to content

E
edx-platform
Commit c68ad097 by Andy Armstrong Committed by GitHub
Options

Merge pull request #16002 from edx/andya/studio-sass-linting 

Fix validation issues with Studio Sass files
parents 673c60d4 8fb993dc
Showing with 976 additions and 690 deletions
cms/static/sass/_base.scss
...@@ -27,22 +27,26 @@ html { ...@@ -27,22 +27,26 @@ html {
body { body {
@extend %t-copy-base; @extend %t-copy-base;
min-width: $fg-min-width; min-width: $fg-min-width;
background: $uxpl-grayscale-x-back; background: $uxpl-grayscale-x-back;
color: $gray-d3; color: $gray-d3;
} }
body, input, button { body,
input,
button {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
// removing the outline on any element that we make programmatically focusable // removing the outline on any element that we make programmatically focusable
[tabindex="-1"] { [tabindex="-1"] {
outline: none; outline: none;
} }
a { a {
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
text-decoration: none; text-decoration: none;
color: $uxpl-blue-base; color: $uxpl-blue-base;
...@@ -67,6 +71,7 @@ h1 { ...@@ -67,6 +71,7 @@ h1 {
.wrapper { .wrapper {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
} }
...@@ -75,12 +80,15 @@ h1 { ...@@ -75,12 +80,15 @@ h1 {
.page-header { .page-header {
@extend %t-title3; @extend %t-title3;
@extend %t-strong; @extend %t-strong;
display: block; display: block;
color: $gray-d3; color: $gray-d3;
.navigation, .subtitle { .navigation,
.subtitle {
@extend %t-title7; @extend %t-title7;
@extend %t-regular; @extend %t-regular;
position: relative; position: relative;
top: ($baseline/4); top: ($baseline/4);
display: block; display: block;
...@@ -118,7 +126,6 @@ h1 { ...@@ -118,7 +126,6 @@ h1 {
// +Typography - Primary Content // +Typography - Primary Content
// ==================== // ====================
.content-primary { .content-primary {
.section-header { .section-header {
color: $gray-d3; color: $gray-d3;
...@@ -155,7 +162,6 @@ h1 { ...@@ -155,7 +162,6 @@ h1 {
// +Typography - Secondary Content // +Typography - Secondary Content
// ==================== // ====================
.content-secondary { .content-secondary {
.section-header { .section-header {
color: $gray-d3; color: $gray-d3;
...@@ -183,34 +189,44 @@ h1 { ...@@ -183,34 +189,44 @@ h1 {
// +Typography - Loose Headings (BT: needs to be removed once html is clean) // +Typography - Loose Headings (BT: needs to be removed once html is clean)
// ==================== // ====================
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 { .title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
@extend %t-strong; @extend %t-strong;
} }
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
} }
.title-2 { .title-2 {
@extend %t-title4; @extend %t-title4;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
.title-3 { .title-3 {
@extend %t-title5; @extend %t-title5;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.title-4 { .title-4 {
@extend %t-title7; @extend %t-title7;
@extend %t-regular; @extend %t-regular;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
.title-5 { .title-5 {
@extend %t-title7; @extend %t-title7;
@extend %t-regular; @extend %t-regular;
color: $gray-l1; color: $gray-l1;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
...@@ -218,11 +234,15 @@ h1 { ...@@ -218,11 +234,15 @@ h1 {
.title-6 { .title-6 {
@extend %t-title7; @extend %t-title7;
@extend %t-regular; @extend %t-regular;
color: $gray-l2; color: $gray-l2;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
p, ul, ol, dl { p,
ul,
ol,
dl {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
&:last-child { &:last-child {
...@@ -230,12 +250,6 @@ p, ul, ol, dl { ...@@ -230,12 +250,6 @@ p, ul, ol, dl {
} }
} }
// +Layout - Basic
// ====================
.wrapper-view {
}
// +Layout - Basic Page Header // +Layout - Basic Page Header
// ==================== // ====================
.wrapper-mast { .wrapper-mast {
...@@ -245,6 +259,7 @@ p, ul, ol, dl { ...@@ -245,6 +259,7 @@ p, ul, ol, dl {
.mast, .metadata { .mast, .metadata {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
...@@ -269,19 +284,22 @@ p, ul, ol, dl { ...@@ -269,19 +284,22 @@ p, ul, ol, dl {
.page-header { .page-header {
@include float(left); @include float(left);
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
width: flex-grid(6,12);
width: flex-grid(6, 12);
} }
.nav-actions { .nav-actions {
@include float(left); @include float(left);
@include text-align(right); @include text-align(right);
position: relative; position: relative;
bottom: -($baseline*0.75); bottom: -($baseline*0.75);
width: flex-grid(6,12); width: flex-grid(6, 12);
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@include margin-right($baseline/2); @include margin-right($baseline/2);
&:last-child { &:last-child {
...@@ -298,7 +316,6 @@ p, ul, ol, dl { ...@@ -298,7 +316,6 @@ p, ul, ol, dl {
// layout with actions // layout with actions
&.has-subtitle { &.has-subtitle {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
...@@ -306,29 +323,30 @@ p, ul, ol, dl { ...@@ -306,29 +323,30 @@ p, ul, ol, dl {
// layout with navigation // layout with navigation
&.has-navigation { &.has-navigation {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
.navigation-link { .navigation-link {
@extend %cont-truncated; @extend %cont-truncated;
display: inline-block; display: inline-block;
vertical-align: bottom; // correct for extra padding in FF vertical-align: bottom; // correct for extra padding in FF
max-width: 250px; max-width: 250px;
&.navigation-current { &.navigation-current {
@extend %ui-disabled; @extend %ui-disabled;
color: $gray; color: $gray;
max-width: 250px; max-width: 250px;
&:before { &::before {
color: $gray; color: $gray;
} }
} }
} }
.navigation-link:before { .navigation-link::before {
content: " / "; content: " / ";
margin: ($baseline/4); margin: ($baseline/4);
color: $gray; color: $gray;
...@@ -338,7 +356,7 @@ p, ul, ol, dl { ...@@ -338,7 +356,7 @@ p, ul, ol, dl {
} }
} }
.navigation .navigation-link:first-child:before { .navigation .navigation-link:first-child::before {
content: ""; content: "";
margin: 0; margin: 0;
} }
...@@ -347,17 +365,18 @@ p, ul, ol, dl { ...@@ -347,17 +365,18 @@ p, ul, ol, dl {
// CASE: wizard-based mast // CASE: wizard-based mast
.mast-wizard { .mast-wizard {
.page-header-sub { .page-header-sub {
@extend %t-title4; @extend %t-title4;
color: $gray; color: $gray;
font-weight: 300; font-weight: 300;
} }
.page-header-super { .page-header-super {
@extend %t-title4; @extend %t-title4;
float: left; float: left;
width: flex-grid(12,12); width: flex-grid(12, 12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
padding-top: ($baseline/2); padding-top: ($baseline/2);
...@@ -381,7 +400,9 @@ p, ul, ol, dl { ...@@ -381,7 +400,9 @@ p, ul, ol, dl {
.content { .content {
@include clearfix(); @include clearfix();
@extend %t-copy-base; @extend %t-copy-base;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -396,6 +417,7 @@ p, ul, ol, dl { ...@@ -396,6 +417,7 @@ p, ul, ol, dl {
.title-sub { .title-sub {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-l2; color: $gray-l2;
...@@ -403,6 +425,7 @@ p, ul, ol, dl { ...@@ -403,6 +425,7 @@ p, ul, ol, dl {
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: 600; font-weight: 600;
...@@ -418,18 +441,19 @@ p, ul, ol, dl { ...@@ -418,18 +441,19 @@ p, ul, ol, dl {
// +Layout - Primary Content // +Layout - Primary Content
// ==================== // ====================
.content-primary { .content-primary {
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
} }
.title-2 { .title-2 {
@extend %t-title4; @extend %t-title4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
.title-3 { .title-3 {
@extend %t-title6; @extend %t-title6;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
...@@ -444,8 +468,10 @@ p, ul, ol, dl { ...@@ -444,8 +468,10 @@ p, ul, ol, dl {
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include text-align(right); @include text-align(right);
@include float(right); @include float(right);
width: flex-grid(7, 12); width: flex-grid(7, 12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
color: $gray-d1; color: $gray-d1;
...@@ -456,7 +482,6 @@ p, ul, ol, dl { ...@@ -456,7 +482,6 @@ p, ul, ol, dl {
// +Layout - Supplemental Content // +Layout - Supplemental Content
// ==================== // ====================
.content-supplementary { .content-supplementary {
> section { > section {
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -471,6 +496,7 @@ p, ul, ol, dl { ...@@ -471,6 +496,7 @@ p, ul, ol, dl {
.inner-wrapper { .inner-wrapper {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
...@@ -482,12 +508,15 @@ p, ul, ol, dl { ...@@ -482,12 +508,15 @@ p, ul, ol, dl {
.main-column { .main-column {
clear: both; clear: both;
@include float(left); @include float(left);
width: 70%; width: 70%;
} }
.sidebar { .sidebar {
@include float(right); @include float(right);
width: 28%; width: 28%;
} }
...@@ -505,7 +534,9 @@ p, ul, ol, dl { ...@@ -505,7 +534,9 @@ p, ul, ol, dl {
.new-subsection-item, .new-subsection-item,
.new-policy-item { .new-policy-item {
@include grey-button(); @include grey-button();
@extend %t-action5; @extend %t-action5;
margin: ($baseline/2); margin: ($baseline/2);
padding: 3px ($baseline/2) 4px ($baseline/2); padding: 3px ($baseline/2) 4px ($baseline/2);
...@@ -520,6 +551,7 @@ p, ul, ol, dl { ...@@ -520,6 +551,7 @@ p, ul, ol, dl {
.item-actions { .item-actions {
position: absolute; position: absolute;
top: 5px; top: 5px;
@include right(5px); @include right(5px);
.edit-button, .edit-button,
...@@ -538,25 +570,27 @@ hr.divide { ...@@ -538,25 +570,27 @@ hr.divide {
} }
.item-details { .item-details {
float: left; float: left;
padding: ($baseline/2) 0; padding: ($baseline/2) 0;
} }
.details { .details {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: none;
margin-bottom: ($baseline*1.5); display: none;
margin-bottom: ($baseline*1.5);
} }
.window { .window {
.window-contents { .window-contents {
padding: 20px; padding: 20px;
} }
.header { .header {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
@extend %t-title7; @extend %t-title7;
padding: 6px 14px; padding: 6px 14px;
border-bottom: 1px solid $mediumGrey; border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
...@@ -568,6 +602,7 @@ hr.divide { ...@@ -568,6 +602,7 @@ hr.divide {
label { label {
display: block; display: block;
margin-bottom: 6px; margin-bottom: 6px;
@extend %t-strong; @extend %t-strong;
&.inline-label { &.inline-label {
...@@ -577,6 +612,7 @@ hr.divide { ...@@ -577,6 +612,7 @@ hr.divide {
.description { .description {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@extend %t-regular; @extend %t-regular;
display: block; display: block;
font-style: italic; font-style: italic;
color: #999; color: #999;
...@@ -617,9 +653,10 @@ hr.divider { ...@@ -617,9 +653,10 @@ hr.divider {
.nav-skip, .nav-skip,
.transcript-skip { .transcript-skip {
@extend %t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 0px; left: 0;
top: -($baseline*30); top: -($baseline*30);
overflow: hidden; overflow: hidden;
background: $white; background: $white;
...@@ -640,6 +677,7 @@ hr.divider { ...@@ -640,6 +677,7 @@ hr.divider {
.content-modal { .content-modal {
@include border-bottom-radius(2px); @include border-bottom-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
position: relative; position: relative;
display: none; display: none;
width: 700px; width: 700px;
...@@ -652,6 +690,7 @@ hr.divider { ...@@ -652,6 +690,7 @@ hr.divider {
.action-modal-close { .action-modal-close {
@include transition(top $tmg-f3 ease-in-out 0s); @include transition(top $tmg-f3 ease-in-out 0s);
@include border-bottom-radius(3px); @include border-bottom-radius(3px);
position: absolute; position: absolute;
top: -3px; top: -3px;
right: $baseline; right: $baseline;
...@@ -665,6 +704,7 @@ hr.divider { ...@@ -665,6 +704,7 @@ hr.divider {
.icon { .icon {
@extend %t-action1; @extend %t-action1;
color: $white; color: $white;
} }
...@@ -677,6 +717,7 @@ hr.divider { ...@@ -677,6 +717,7 @@ hr.divider {
img { img {
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
padding: ($baseline/10); padding: ($baseline/10);
...@@ -686,12 +727,14 @@ hr.divider { ...@@ -686,12 +727,14 @@ hr.divider {
.title { .title {
@extend %t-title5; @extend %t-title5;
@extend %t-strong; @extend %t-strong;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
color: $gray-d3; color: $gray-d3;
} }
.description { .description {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin-top: ($baseline/2); margin-top: ($baseline/2);
color: $gray-l1; color: $gray-l1;
} }
......
cms/static/sass/_build-v1.scss
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
@import 'views/outline'; @import 'views/outline';
@import 'views/settings'; @import 'views/settings';
@import 'views/static-pages'; @import 'views/static-pages';
@import 'views/unit';
@import 'views/container'; @import 'views/container';
@import 'views/users'; @import 'views/users';
@import 'views/textbooks'; @import 'views/textbooks';
...@@ -80,7 +79,6 @@ ...@@ -80,7 +79,6 @@
@import 'xmodule/descriptors/css/module-styles.scss'; @import 'xmodule/descriptors/css/module-styles.scss';
@import 'xmodule/headings'; @import 'xmodule/headings';
@import 'elements/xmodules'; // styling for Studio-specific contexts @import 'elements/xmodules'; // styling for Studio-specific contexts
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
@import 'shame'; // used for any bad-form/orphaned scss @import 'shame'; // used for any bad-form/orphaned scss
...@@ -90,6 +88,5 @@ ...@@ -90,6 +88,5 @@
// CAPA Problem Feedback // CAPA Problem Feedback
@import 'edx-pattern-library-shims/buttons'; @import 'edx-pattern-library-shims/buttons';
@import 'edx-pattern-library-shims/base/variables'; @import 'edx-pattern-library-shims/base/variables';
cms/static/sass/_reset.scss
...@@ -8,68 +8,150 @@ ...@@ -8,68 +8,150 @@
// better text rendering/kerning through SVG // better text rendering/kerning through SVG
* { * {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
html, body, div, span, applet, object, iframe, html,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, body,
a, abbr, acronym, address, big, cite, code, div,
del, dfn, em, img, ins, kbd, q, s, samp, span,
small, strike, strong, sub, sup, tt, var, applet,
b, u, i, center, object,
dl, dt, dd, ol, ul, li, iframe,
fieldset, form, label, legend, h1,
table, caption, tbody, tfoot, thead, tr, th, td, h2,
article, aside, canvas, details, figcaption, figure, h3,
footer, header, menu, nav, section, summary, h4,
time, mark, audio, video { h5,
margin: 0; h6,
padding: 0; p,
border: 0; blockquote,
outline: 0; pre,
font-size: 100%; a,
font: inherit; abbr,
vertical-align: baseline; acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
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,
footer,
header,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} }
html,body { html,
body {
height: 100%; height: 100%;
} }
article, aside, details, figcaption, figure, article,
footer, header, menu, nav, section { aside,
display: block; details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ul {
list-style: none; ol,
ul {
list-style: none;
} }
blockquote, q {
quotes: none; blockquote,
q {
quotes: none;
} }
blockquote:before, blockquote:after,
q:before, q:after { blockquote::before,
content: ''; blockquote::after,
content: none; q::before,
q::after {
content: '';
content: none;
} }
ins { ins {
text-decoration: none; text-decoration: none;
} }
del { del {
text-decoration: line-through; text-decoration: line-through;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
abbr[title] { abbr[title] {
border-bottom: none; border-bottom: none;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
cms/static/sass/_shame.scss
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
// elements - authorship controls // elements - authorship controls
.wrapper-authorshiprights { .wrapper-authorshiprights {
.ui-toggle-control { .ui-toggle-control {
// needed to override general a element transition properties - need to fix. // needed to override general a element transition properties - need to fix.
transition-duration: $tmg-f2; transition-duration: $tmg-f2;
...@@ -26,7 +25,8 @@ ...@@ -26,7 +25,8 @@
// ==================== // ====================
// overriding outline styling for general drag and drop cases // overriding outline styling for general drag and drop cases
.outline-section, .outline-subsection { .outline-section,
.outline-subsection {
// STATE: is dragging // STATE: is dragging
&.is-dragging { &.is-dragging {
...@@ -51,8 +51,7 @@ body b { ...@@ -51,8 +51,7 @@ body b {
// needed display property reinforcement since manual CSS abstraction happened // needed display property reinforcement since manual CSS abstraction happened
#page-prompt { #page-prompt {
.wrapper-prompt::before {
.wrapper-prompt:before {
display: inline-block; display: inline-block;
} }
} }
...@@ -94,8 +93,8 @@ body b { ...@@ -94,8 +93,8 @@ body b {
} }
// hides latex compiler button if settings mode is-active // hides latex compiler button if settings mode is-active
div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
display: none; display: none;
} }
// ==================== // ====================
...@@ -109,7 +108,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ ...@@ -109,7 +108,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
// JQuery UI tabs font-weight override // JQuery UI tabs font-weight override
.ui-tabs-nav { .ui-tabs-nav {
.ui-state-default { .ui-state-default {
font-weight: normal; font-weight: normal;
} }
......
cms/static/sass/assets/_anims.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
// fade in keyframes // fade in keyframes
@include keyframes(fadeIn) { @include keyframes(fadeIn) {
0% { 0% {
opacity: 0.0; opacity: 0;
} }
50% { 50% {
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
100% { 100% {
opacity: 1.0; opacity: 1;
} }
} }
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
// fade out keyframes // fade out keyframes
@include keyframes(fadeOut) { @include keyframes(fadeOut) {
0% { 0% {
opacity: 1.0; opacity: 1;
} }
50% { 50% {
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
} }
100% { 100% {
opacity: 0.0; opacity: 0;
} }
} }
...@@ -188,12 +188,14 @@ ...@@ -188,12 +188,14 @@
// bounce in keyframes // bounce in keyframes
@include keyframes(bounceIn) { @include keyframes(bounceIn) {
0% { 0% {
opacity: 0.0; opacity: 0;
@include transform(scale(0.3)); @include transform(scale(0.3));
} }
50% { 50% {
opacity: 1.0; opacity: 1;
@include transform(scale(1.05)); @include transform(scale(1.05));
} }
...@@ -216,12 +218,14 @@ ...@@ -216,12 +218,14 @@
} }
50% { 50% {
opacity: 1.0; opacity: 1;
@include transform(scale(1.05)); @include transform(scale(1.05));
} }
100% { 100% {
opacity: 0.0; opacity: 0;
@include transform(scale(0.3)); @include transform(scale(0.3));
} }
} }
...@@ -235,12 +239,13 @@ ...@@ -235,12 +239,13 @@
// ==================== // ====================
// flash keyframes // flash keyframes
@include keyframes(flash) { @include keyframes(flash) {
0%, 100% { 0%,
opacity: 1.0; 100% {
opacity: 1;
} }
50% { 50% {
opacity: 0.0; opacity: 0;
} }
} }
...@@ -253,13 +258,16 @@ ...@@ -253,13 +258,16 @@
// ==================== // ====================
// flash double keyframes // flash double keyframes
@include keyframes(flashDouble) { @include keyframes(flashDouble) {
0%, 50%, 100% { 0%,
opacity: 1.0; 50%,
100% {
opacity: 1;
} }
25%, 75% { 25%,
opacity: 0.0; 75% {
} opacity: 0;
}
} }
// flash double animation // flash double animation
...@@ -272,15 +280,15 @@ ...@@ -272,15 +280,15 @@
// pulse keyframes // pulse keyframes
@include keyframes(pulse) { @include keyframes(pulse) {
0% { 0% {
opacity: 0.0; opacity: 0;
} }
50% { 50% {
opacity: 1.0; opacity: 1;
} }
100% { 100% {
opacity: 0.0; opacity: 0;
} }
} }
...@@ -294,7 +302,7 @@ ...@@ -294,7 +302,7 @@
// was dropped keyframes // was dropped keyframes
@include keyframes(was-dropped) { @include keyframes(was-dropped) {
0% { 0% {
opacity: 1.0; opacity: 1;
} }
50% { 50% {
...@@ -302,7 +310,7 @@ ...@@ -302,7 +310,7 @@
} }
100% { 100% {
opacity: 1.0; opacity: 1;
} }
} }
......
cms/static/sass/assets/_fonts.scss
// studio - assets - fonts // studio - assets - fonts
// ==================== // ====================
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: src:
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'), url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype'); url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
} }
cms/static/sass/assets/_graphics.scss
...@@ -2,46 +2,46 @@ ...@@ -2,46 +2,46 @@
// ==================== // ====================
.drag-handle { .drag-handle {
display: inline-block; display: inline-block;
float: right; float: right;
width: 7px; width: 7px;
height: 22px; height: 22px;
margin-left: ($baseline/2); margin-left: ($baseline/2);
background: url('#{$static-path}/images/drag-handles.png') no-repeat; background: url('#{$static-path}/images/drag-handles.png') no-repeat;
cursor: move; cursor: move;
} }
.large-advanced-icon { .large-advanced-icon {
display: inline-block; display: inline-block;
width: ($baseline*3); width: ($baseline*3);
height: ($baseline*3); height: ($baseline*3);
background: url('#{$static-path}/images/large-advanced-icon.png') center no-repeat; background: url('#{$static-path}/images/large-advanced-icon.png') center no-repeat;
} }
.large-discussion-icon { .large-discussion-icon {
display: inline-block; display: inline-block;
width: ($baseline*3); width: ($baseline*3);
height: ($baseline*3); height: ($baseline*3);
background: url('#{$static-path}/images/large-discussion-icon.png') center no-repeat; background: url('#{$static-path}/images/large-discussion-icon.png') center no-repeat;
} }
.large-html-icon { .large-html-icon {
display: inline-block; display: inline-block;
width: ($baseline*3); width: ($baseline*3);
height: ($baseline*3); height: ($baseline*3);
background: url('#{$static-path}/images/large-html-icon.png') center no-repeat; background: url('#{$static-path}/images/large-html-icon.png') center no-repeat;
} }
.large-problem-icon { .large-problem-icon {
display: inline-block; display: inline-block;
width: ($baseline*3); width: ($baseline*3);
height: ($baseline*3); height: ($baseline*3);
background: url('#{$static-path}/images/large-problem-icon.png') center no-repeat; background: url('#{$static-path}/images/large-problem-icon.png') center no-repeat;
} }
.large-video-icon { .large-video-icon {
display: inline-block; display: inline-block;
width: ($baseline*3); width: ($baseline*3);
height: ($baseline*3); height: ($baseline*3);
background: url('#{$static-path}/images/large-video-icon.png') center no-repeat; background: url('#{$static-path}/images/large-video-icon.png') center no-repeat;
} }
cms/static/sass/bootstrap/_components.scss
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
// Sock // Sock
.wrapper-sock { .wrapper-sock {
@include clearfix(); @include clearfix();
position: relative; position: relative;
margin: ($baseline*2) 0 0 0; margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-500; border-top: 1px solid $gray-500;
...@@ -60,6 +61,7 @@ ...@@ -60,6 +61,7 @@
// sock - actions // sock - actions
.list-cta { .list-cta {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
top: -($baseline*0.75); top: -($baseline*0.75);
width: 100%; width: 100%;
...@@ -70,6 +72,7 @@ ...@@ -70,6 +72,7 @@
.cta-show-sock { .cta-show-sock {
@extend %ui-btn-pill; @extend %ui-btn-pill;
@extend %t-action4; @extend %t-action4;
background: theme-color("light"); background: theme-color("light");
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: theme-color("dark"); color: theme-color("dark");
...@@ -88,7 +91,9 @@ ...@@ -88,7 +91,9 @@
// sock - additional help // sock - additional help
.sock { .sock {
@include clearfix(); @include clearfix();
@extend %t-copy-sub2; @extend %t-copy-sub2;
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
...@@ -97,11 +102,9 @@ ...@@ -97,11 +102,9 @@
// support body // support body
header { header {
.title { .title {
@extend %t-title4; @extend %t-title4;
} }
} }
.list-actions { .list-actions {
...@@ -109,15 +112,18 @@ ...@@ -109,15 +112,18 @@
} }
// shared elements // shared elements
.support, .feedback { .support,
.feedback {
.title { .title {
@extend %t-title6; @extend %t-title6;
color: $white; color: $white;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.copy { .copy {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -135,17 +141,15 @@ ...@@ -135,17 +141,15 @@
.action { .action {
@extend %t-action4; @extend %t-action4;
display: block; display: block;
.icon { .icon {
@extend %t-icon4; @extend %t-icon4;
vertical-align: middle; vertical-align: middle;
margin-right: $baseline/4; margin-right: $baseline/4;
} }
&:hover, &:active {
}
} }
.tip { .tip {
...@@ -162,22 +166,22 @@ ...@@ -162,22 +166,22 @@
// studio support content // studio support content
.support { .support {
width: flex-grid(8,12); width: flex-grid(8, 12);
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
.action-item { .action-item {
width: flexgrid(4,8); width: flexgrid(4, 8);
} }
} }
// studio feedback content // studio feedback content
.feedback { .feedback {
width: flex-grid(4,12); width: flex-grid(4, 12);
float: left; float: left;
.action-item { .action-item {
width: flexgrid(4,4); width: flexgrid(4, 4);
} }
} }
} }
......
cms/static/sass/bootstrap/_footer.scss
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
footer.primary { footer.primary {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include clearfix(); @include clearfix();
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
...@@ -59,10 +61,12 @@ ...@@ -59,10 +61,12 @@
.footer-content-secondary { .footer-content-secondary {
@include clearfix(); @include clearfix();
margin-top: $baseline; margin-top: $baseline;
} }
.footer-about-copyright, .footer-about-openedx { .footer-about-copyright,
.footer-about-openedx {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
......
cms/static/sass/bootstrap/_header.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
.wrapper-header { .wrapper-header {
@extend %ui-depth3; @extend %ui-depth3;
position: relative; position: relative;
width: 100%; width: 100%;
box-shadow: 0 1px 2px 0 $shadow-l1; box-shadow: 0 1px 2px 0 $shadow-l1;
...@@ -20,6 +21,7 @@ ...@@ -20,6 +21,7 @@
header.primary { header.primary {
@include clearfix(); @include clearfix();
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
...@@ -28,22 +30,27 @@ ...@@ -28,22 +30,27 @@
// ==================== // ====================
// basic layout // basic layout
.wrapper-l, .wrapper-r { .wrapper-l,
.wrapper-r {
background: $white; background: $white;
} }
.wrapper-l { .wrapper-l {
float: left; float: left;
width: flex-grid(7,12); width: flex-grid(7, 12);
} }
.wrapper-r { .wrapper-r {
float: right; float: right;
width: flex-grid(4,12); width: flex-grid(4, 12);
text-align: right; text-align: right;
} }
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding,
.info-course,
.nav-course,
.nav-account,
.nav-pitch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-bottom: 0; margin-bottom: 0;
...@@ -66,10 +73,10 @@ ...@@ -66,10 +73,10 @@
// basic layout - nav items // basic layout - nav items
nav { nav {
> ol > .nav-item { > ol > .nav-item {
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -89,7 +96,6 @@ ...@@ -89,7 +96,6 @@
// basic layout - dropdowns // basic layout - dropdowns
.nav-dd { .nav-dd {
.title { .title {
padding: $baseline/2 $baseline/2; padding: $baseline/2 $baseline/2;
font-size: $font-size-lg; font-size: $font-size-lg;
...@@ -99,14 +105,12 @@ ...@@ -99,14 +105,12 @@
} }
&:hover { &:hover {
.fa-caret-down { .fa-caret-down {
opacity: 1.0; opacity: 1;
} }
} }
.nav-sub .nav-item { .nav-sub .nav-item {
.icon { .icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -140,7 +144,8 @@ ...@@ -140,7 +144,8 @@
border-right: 1px solid $gray-300; border-right: 1px solid $gray-300;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org,
.course-number {
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: 12px; line-height: 12px;
display: inline-block; display: inline-block;
...@@ -149,7 +154,7 @@ ...@@ -149,7 +154,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 1.0; opacity: 1;
color: theme-color("primary"); color: theme-color("primary");
} }
...@@ -160,6 +165,7 @@ ...@@ -160,6 +165,7 @@
.course-title { .course-title {
@extend %t-action2; @extend %t-action2;
@extend %t-strong; @extend %t-strong;
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -197,14 +203,12 @@ ...@@ -197,14 +203,12 @@
} }
.nav-account-help { .nav-account-help {
.wrapper-nav-sub { .wrapper-nav-sub {
width: ($baseline*10); width: ($baseline*10);
} }
} }
.nav-account-user { .nav-account-user {
.title { .title {
max-width: ($baseline*6.5); max-width: ($baseline*6.5);
...@@ -220,6 +224,7 @@ ...@@ -220,6 +224,7 @@
.settings-language-form { .settings-language-form {
margin-top: 4px; margin-top: 4px;
.language-selector { .language-selector {
width: 130px; width: 130px;
} }
...@@ -243,13 +248,12 @@ ...@@ -243,13 +248,12 @@
// CASE: user signed in // CASE: user signed in
.is-signedin { .is-signedin {
.wrapper-l { .wrapper-l {
width: flex-grid(8,12); width: flex-grid(8, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(4,12); width: flex-grid(4, 12);
} }
.branding { .branding {
...@@ -265,15 +269,13 @@ ...@@ -265,15 +269,13 @@
// CASE: in course { // CASE: in course {
.is-signedin.course { .is-signedin.course {
.wrapper-header { .wrapper-header {
.wrapper-l { .wrapper-l {
width: flex-grid(9,12); width: flex-grid(9, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(3,12); width: flex-grid(3, 12);
} }
.branding { .branding {
...@@ -296,15 +298,13 @@ ...@@ -296,15 +298,13 @@
// CASE: user not signed in // CASE: user not signed in
.not-signedin, .not-signedin,
.view-util { .view-util {
.wrapper-header { .wrapper-header {
.wrapper-l { .wrapper-l {
width: flex-grid(2,12); width: flex-grid(2, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(10,12); width: flex-grid(10, 12);
} }
.branding { .branding {
...@@ -337,10 +337,9 @@ ...@@ -337,10 +337,9 @@
// dropdown // dropdown
.nav-dd { .nav-dd {
.title { .title {
.label,
.label, .fa-caret-down { .fa-caret-down {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
...@@ -353,7 +352,6 @@ ...@@ -353,7 +352,6 @@
// dropped down state // dropped down state
&.is-selected { &.is-selected {
.ui-toggle-dd { .ui-toggle-dd {
transform: rotate(-180deg); transform: rotate(-180deg);
transform-origin: 50% 50%; transform-origin: 50% 50%;
...@@ -364,10 +362,6 @@ ...@@ -364,10 +362,6 @@
.nav-item { .nav-item {
position: relative; position: relative;
&:hover {
}
&.nav-course-settings { &.nav-course-settings {
.wrapper-nav-sub { .wrapper-nav-sub {
width: ($baseline*9); width: ($baseline*9);
...@@ -378,7 +372,7 @@ ...@@ -378,7 +372,7 @@
.wrapper-nav-sub { .wrapper-nav-sub {
position: absolute; position: absolute;
top: ($baseline*2.5); top: ($baseline*2.5);
opacity: 0.0; opacity: 0;
pointer-events: none; pointer-events: none;
width: ($baseline*8); width: ($baseline*8);
overflow: hidden; overflow: hidden;
...@@ -387,7 +381,7 @@ ...@@ -387,7 +381,7 @@
// dropped down state // dropped down state
&.is-shown { &.is-shown {
opacity: 1.0; opacity: 1;
pointer-events: auto; pointer-events: auto;
overflow: visible; overflow: visible;
height: auto; height: auto;
...@@ -403,7 +397,8 @@ ...@@ -403,7 +397,8 @@
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
background: $white; background: $white;
&:after, &:before { &::after,
&::before {
bottom: 100%; bottom: 100%;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
...@@ -414,13 +409,13 @@ ...@@ -414,13 +409,13 @@
} }
// ui triangle/nub // ui triangle/nub
&:after { &::after {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white; border-bottom-color: $white;
border-width: 10px; border-width: 10px;
} }
&:before { &::before {
border-color: rgba(178, 178, 178, 0); border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-500; border-bottom-color: $gray-500;
border-width: 11px; border-width: 11px;
...@@ -429,6 +424,7 @@ ...@@ -429,6 +424,7 @@
.nav-item { .nav-item {
@extend %t-action3; @extend %t-action3;
@extend %t-regular; @extend %t-regular;
display: block; display: block;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-300; border-bottom: 1px solid $gray-300;
...@@ -450,7 +446,8 @@ ...@@ -450,7 +446,8 @@
font-size: $font-size-lg; font-size: $font-size-lg;
font-weight: 600; font-weight: 600;
&:hover, &:active { &:hover,
&:active {
color: theme-color("primary"); color: theme-color("primary");
} }
} }
...@@ -459,7 +456,6 @@ ...@@ -459,7 +456,6 @@
// CASE: left-hand side arrow/dd // CASE: left-hand side arrow/dd
&.ui-left { &.ui-left {
.wrapper-nav-sub { .wrapper-nav-sub {
left: 0; left: 0;
} }
...@@ -468,12 +464,12 @@ ...@@ -468,12 +464,12 @@
text-align: left; text-align: left;
// ui triangle/nub // ui triangle/nub
&:after { &::after {
left: $baseline; left: $baseline;
margin-left: -10px; margin-left: -10px;
} }
&:before { &::before {
left: $baseline; left: $baseline;
margin-left: -11px; margin-left: -11px;
} }
...@@ -482,7 +478,6 @@ ...@@ -482,7 +478,6 @@
// CASE: right-hand side arrow/dd // CASE: right-hand side arrow/dd
&.ui-right { &.ui-right {
> ol { > ol {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -495,12 +490,12 @@ ...@@ -495,12 +490,12 @@
.nav-sub { .nav-sub {
// ui triangle/nub // ui triangle/nub
&:after { &::after {
right: $baseline; right: $baseline;
margin-right: -10px; margin-right: -10px;
} }
&:before { &::before {
right: $baseline; right: $baseline;
margin-right: -11px; margin-right: -11px;
} }
......
cms/static/sass/bootstrap/_layouts.scss
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
padding-bottom: 0; padding-bottom: 0;
.nav-item { .nav-item {
&.active, &:hover{ &.active,
&:hover {
.nav-link { .nav-link {
border-bottom-color: theme-color("primary"); border-bottom-color: theme-color("primary");
color: theme-color("primary"); color: theme-color("primary");
...@@ -57,14 +58,6 @@ ...@@ -57,14 +58,6 @@
// studio - elements - layouts // 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 // layout - basic page header
.wrapper-mast { .wrapper-mast {
margin: ($baseline*1.5) 0 0 0; margin: ($baseline*1.5) 0 0 0;
...@@ -74,6 +67,7 @@ ...@@ -74,6 +67,7 @@
.mast, .mast,
.metadata { .metadata {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -102,7 +96,7 @@ ...@@ -102,7 +96,7 @@
.page-header { .page-header {
float: left; float: left;
width: flex-grid(6,12); width: flex-grid(6, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
} }
...@@ -110,7 +104,7 @@ ...@@ -110,7 +104,7 @@
position: relative; position: relative;
bottom: -($baseline*0.75); bottom: -($baseline*0.75);
float: right; float: right;
width: flex-grid(6,12); width: flex-grid(6, 12);
text-align: right; text-align: right;
.nav-item { .nav-item {
...@@ -150,7 +144,6 @@ ...@@ -150,7 +144,6 @@
// layout with actions // layout with actions
&.has-subtitle { &.has-subtitle {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
...@@ -158,13 +151,13 @@ ...@@ -158,13 +151,13 @@
// layout with breadcrumb navigation // layout with breadcrumb navigation
&.has-navigation { &.has-navigation {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
.navigation-item { .navigation-item {
@extend %cont-truncated; @extend %cont-truncated;
display: inline-block; display: inline-block;
vertical-align: bottom; // correct for extra padding in FF vertical-align: bottom; // correct for extra padding in FF
max-width: 250px; max-width: 250px;
...@@ -172,10 +165,11 @@ ...@@ -172,10 +165,11 @@
&.navigation-current { &.navigation-current {
@extend %ui-disabled; @extend %ui-disabled;
color: color("gray"); color: color("gray");
max-width: 250px; max-width: 250px;
&:before { &::before {
color: color("gray"); color: color("gray");
} }
} }
...@@ -185,7 +179,7 @@ ...@@ -185,7 +179,7 @@
color: theme-color("primary"); color: theme-color("primary");
} }
.navigation-item:before { .navigation-item::before {
content: " / "; content: " / ";
margin: ($baseline/4); margin: ($baseline/4);
color: color("gray"); color: color("gray");
...@@ -195,7 +189,7 @@ ...@@ -195,7 +189,7 @@
} }
} }
.navigation .navigation-item:first-child:before { .navigation .navigation-item:first-child::before {
content: ""; content: "";
margin: 0; margin: 0;
} }
...@@ -204,28 +198,24 @@ ...@@ -204,28 +198,24 @@
// CASE: wizard-based mast // CASE: wizard-based mast
.mast-wizard { .mast-wizard {
.page-header-sub { .page-header-sub {
@extend %t-title4; @extend %t-title4;
color: color("gray"); color: color("gray");
font-weight: 300; font-weight: 300;
} }
.page-header-super { .page-header-super {
@extend %t-title4; @extend %t-title4;
float: left; float: left;
width: flex-grid(12,12); width: flex-grid(12, 12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
padding-top: ($baseline/2); padding-top: ($baseline/2);
font-weight: 600; font-weight: 600;
} }
} }
// page metadata/action bar
.metadata {
}
} }
// layout - basic page content // layout - basic page content
...@@ -258,6 +248,7 @@ ...@@ -258,6 +248,7 @@
.title-sub { .title-sub {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-500; color: $gray-500;
...@@ -266,6 +257,7 @@ ...@@ -266,6 +257,7 @@
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
@extend %t-strong; @extend %t-strong;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: theme-color("primary"); color: theme-color("primary");
...@@ -286,11 +278,13 @@ ...@@ -286,11 +278,13 @@
.title-2 { .title-2 {
@extend %t-title4; @extend %t-title4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
.title-3 { .title-3 {
@extend %t-title6; @extend %t-title6;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
...@@ -305,6 +299,7 @@ ...@@ -305,6 +299,7 @@
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(7, 12); width: flex-grid(7, 12);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
...@@ -316,7 +311,6 @@ ...@@ -316,7 +311,6 @@
// layout - supplemental content // layout - supplemental content
.content-supplementary { .content-supplementary {
> section { > section {
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -332,6 +326,7 @@ ...@@ -332,6 +326,7 @@
.inner-wrapper { .inner-wrapper {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
......
cms/static/sass/bootstrap/_mixins.scss
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
// +Font Sizing - Mixin // +Font Sizing - Mixin
// ==================== // ====================
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16) {
font-size: $sizeValue + px; font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem; font-size: ($sizeValue/10) + rem;
} }
// +Line Height - Mixin // +Line Height - Mixin
// ==================== // ====================
@mixin line-height($fontSize: auto){ @mixin line-height($fontSize: auto) {
line-height: ($fontSize*1.48) + px; line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem; line-height: (($fontSize/10)*1.48) + rem;
} }
...@@ -65,11 +65,13 @@ ...@@ -65,11 +65,13 @@
:-moz-placeholder { :-moz-placeholder {
color: $color; color: $color;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: $color; color: $color;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: $color; color: $color;
} }
} }
...@@ -118,6 +120,7 @@ ...@@ -118,6 +120,7 @@
// used for page/view-level wrappers (for centering/grids) // used for page/view-level wrappers (for centering/grids)
%ui-wrapper { %ui-wrapper {
@include clearfix(); @include clearfix();
width: 100%; width: 100%;
} }
...@@ -135,7 +138,6 @@ ...@@ -135,7 +138,6 @@
// ==================== // ====================
// extends - UI - utility - first child clearing // extends - UI - utility - first child clearing
%wipe-first-child { %wipe-first-child {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
border-top: none; border-top: none;
...@@ -145,7 +147,6 @@ ...@@ -145,7 +147,6 @@
// extends - UI - utility - last child clearing // extends - UI - utility - last child clearing
%wipe-last-child { %wipe-last-child {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
border-bottom: none; border-bottom: none;
...@@ -180,18 +181,18 @@ ...@@ -180,18 +181,18 @@
// +Content - Screenreader Text - Extend // +Content - Screenreader Text - Extend
// ==================== // ====================
%cont-text-sr { %cont-text-sr {
// clip has been deprecated but is still supported // clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px); clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
position: absolute; position: absolute;
margin: -1px; margin: -1px;
height: 1px; height: 1px;
width: 1px; width: 1px;
border: 0; border: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
// ensure there are spaces in sr text // ensure there are spaces in sr text
word-wrap: normal; word-wrap: normal;
} }
// +Content - Text Wrap - Extend // +Content - Text Wrap - Extend
......
cms/static/sass/bootstrap/_navigation.scss
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only { &.nav-item-open-collapsed,
&.nav-item-open-collapsed-only {
display: initial; display: initial;
margin: $baseline/4 $baseline/2; margin: $baseline/4 $baseline/2;
...@@ -63,13 +64,14 @@ ...@@ -63,13 +64,14 @@
} }
} }
} }
&.nav-item-hidden-collapsed { &.nav-item-hidden-collapsed {
display: none; display: none;
} }
} }
} }
.btn-shopping-cart{ .btn-shopping-cart {
padding-top: 0.7rem; // $btn-padding-y-lg once themed padding-top: 0.7rem; // $btn-padding-y-lg once themed
} }
......
cms/static/sass/bootstrap/_variables.scss
...@@ -39,14 +39,14 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default; ...@@ -39,14 +39,14 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
$white-opacity-70: rgba(255, 255, 255, 0.7) !default; $white-opacity-70: rgba(255, 255, 255, 0.7) !default;
$white-opacity-80: rgba(255, 255, 255, 0.8) !default; $white-opacity-80: rgba(255, 255, 255, 0.8) !default;
$black: rgb(0,0,0) !default; $black: rgb(0, 0, 0) !default;
$black-t0: rgba($black, 0.125) !default; $black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default; $black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default; $black-t2: rgba($black, 0.5) !default;
$black-t3: rgba($black, 0.75) !default; $black-t3: rgba($black, 0.75) !default;
$light-grey-transparent: rgba(200,200,200, 0) !default; $light-grey-transparent: rgba(200, 200, 200, 0) !default;
$light-grey-solid: rgba(200,200,200, 1) !default; $light-grey-solid: rgba(200, 200, 200, 1) !default;
$header-bg: $white !default; $header-bg: $white !default;
$footer-bg: $white !default; $footer-bg: $white !default;
...@@ -66,6 +66,6 @@ $font-bold: 700 !default; ...@@ -66,6 +66,6 @@ $font-bold: 700 !default;
$studio-dark-icon-color: $white !default; $studio-dark-icon-color: $white !default;
$studio-dark-icon-background-color: palette(grayscale, black) !default; $studio-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103) !default; $site-status-color: rgb(182, 37, 103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default; $shadow-l1: rgba(0, 0, 0, 0.1) !default;
cms/static/sass/contexts/_ie.scss
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
// CASE: IE9 doesn't support css animations and negative positioning // CASE: IE9 doesn't support css animations and negative positioning
.wrapper-notification { .wrapper-notification {
&.is-shown { &.is-shown {
bottom: 0; bottom: 0;
} }
......
cms/static/sass/elements-v2/_controls.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
%ui-btn-dd { %ui-btn-dd {
@extend %ui-btn; @extend %ui-btn;
@extend %ui-btn-pill; @extend %ui-btn-pill;
padding:($baseline/4) ($baseline/2); padding:($baseline/4) ($baseline/2);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
&:hover, &:active { &:hover, &:active {
@extend %ui-fake-link; @extend %ui-fake-link;
border-color: $gray-l3; border-color: $gray-l3;
} }
...@@ -24,6 +26,7 @@ ...@@ -24,6 +26,7 @@
// ==================== // ====================
%ui-btn-dd-nav-primary { %ui-btn-dd-nav-primary {
@extend %ui-btn-dd; @extend %ui-btn-dd;
background: $white; background: $white;
border-color: $white; border-color: $white;
color: $gray-d1; color: $gray-d1;
......
cms/static/sass/elements-v2/_header.scss
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
@include clearfix(); @include clearfix();
@include grid-container(); @include grid-container();
@include float(none); @include float(none);
box-sizing: border-box; box-sizing: border-box;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
...@@ -68,11 +69,14 @@ ...@@ -68,11 +69,14 @@
.title{ .title{
@extend %ui-btn-dd-nav-primary; @extend %ui-btn-dd-nav-primary;
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
line-height: 16px; line-height: 16px;
margin-top: 6px; margin-top: 6px;
font-size: font-size(base); font-size: font-size(base);
font-weight: font-weight(semi-bold); font-weight: font-weight(semi-bold);
.nav-sub .nav-item { .nav-sub .nav-item {
.icon { .icon {
display: inline-block; display: inline-block;
...@@ -121,14 +125,12 @@ ...@@ -121,14 +125,12 @@
} }
.nav-account-help { .nav-account-help {
.wrapper-nav-sub { .wrapper-nav-sub {
width: ($baseline*10); width: ($baseline*10);
} }
} }
.nav-account-user { .nav-account-user {
.title { .title {
max-width: ($baseline*6.5); max-width: ($baseline*6.5);
display: inline-block; display: inline-block;
...@@ -141,6 +143,7 @@ ...@@ -141,6 +143,7 @@
.settings-language-form { .settings-language-form {
margin-top: 4px; margin-top: 4px;
.language-selector { .language-selector {
width: 130px; width: 130px;
} }
...@@ -151,13 +154,12 @@ ...@@ -151,13 +154,12 @@
// CASE: user signed in // CASE: user signed in
.is-signedin { .is-signedin {
.wrapper-l { .wrapper-l {
width: flex-grid(8,12); width: flex-grid(8, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(4,12); width: flex-grid(4, 12);
} }
.branding { .branding {
......
cms/static/sass/elements-v2/_navigation.scss
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
.nav-skip, .nav-skip,
.transcript-skip { .transcript-skip {
@include left(0); @include left(0);
font-size: font-size(small); font-size: font-size(small);
display: inline-block; display: inline-block;
position: absolute; position: absolute;
......
cms/static/sass/elements-v2/_sock.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
.wrapper-sock { .wrapper-sock {
@include clearfix(); @include clearfix();
position: relative; position: relative;
margin: ($baseline*2) 0 0 0; margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
...@@ -10,6 +11,7 @@ ...@@ -10,6 +11,7 @@
.wrapper-inner { .wrapper-inner {
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%); @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
display: none; display: none;
width: 100% !important; width: 100% !important;
border-bottom: 1px solid $white; border-bottom: 1px solid $white;
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
// sock - actions // sock - actions
.list-cta { .list-cta {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
top: -($baseline*0.75); top: -($baseline*0.75);
width: 100%; width: 100%;
...@@ -27,6 +30,7 @@ ...@@ -27,6 +30,7 @@
.cta-show-sock { .cta-show-sock {
@extend %ui-btn-pill; @extend %ui-btn-pill;
background: $uxpl-grayscale-x-back; background: $uxpl-grayscale-x-back;
font-size: font-size(x-small); font-size: font-size(x-small);
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
...@@ -47,6 +51,7 @@ ...@@ -47,6 +51,7 @@
.sock { .sock {
@include clearfix(); @include clearfix();
@include span(12); @include span(12);
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
margin: 0 auto; margin: 0 auto;
...@@ -73,6 +78,7 @@ ...@@ -73,6 +78,7 @@
.action-item { .action-item {
@include float(left); @include float(left);
@include margin-right($baseline/2); @include margin-right($baseline/2);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
&:last-child { &:last-child {
...@@ -84,6 +90,7 @@ ...@@ -84,6 +90,7 @@
.icon { .icon {
vertical-align: middle; vertical-align: middle;
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
} }
...@@ -104,10 +111,11 @@ ...@@ -104,10 +111,11 @@
.support { .support {
@include float(left); @include float(left);
@include span(8); @include span(8);
margin-right: flex-gutter(); margin-right: flex-gutter();
.action-item { .action-item {
width: flexgrid(4,8); width: flexgrid(4, 8);
} }
} }
...@@ -115,8 +123,9 @@ ...@@ -115,8 +123,9 @@
.feedback { .feedback {
@include float(left); @include float(left);
@include span(4); @include span(4);
.action-item { .action-item {
width: flexgrid(4,4); width: flexgrid(4, 4);
} }
} }
} }
......
cms/static/sass/elements-v2/_tooltip.scss
.tooltip { .tooltip {
@include transition(opacity $tmg-f3 ease-out 0s); @include transition(opacity $tmg-f3 ease-out 0s);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -12,7 +13,7 @@ ...@@ -12,7 +13,7 @@
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
&:after { &::after {
font-size: font-size(x-large); font-size: font-size(x-large);
content: '▾'; content: '▾';
display: block; display: block;
......
cms/static/sass/elements/_codemirror-overrides.scss
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
*/ */
.CodeMirror { .CodeMirror {
.CodeMirror-linenumber.CodeMirror-gutter-elt {
.CodeMirror-linenumber.CodeMirror-gutter-elt { color: $gray-d3 !important;
color: $gray-d3 !important; }
}
} }
cms/static/sass/elements/_creative-commons.scss
...@@ -2,25 +2,26 @@ ...@@ -2,25 +2,26 @@
font-family: 'CreativeCommons'; font-family: 'CreativeCommons';
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot'); src: url('#{$static-path}/fonts/CreativeCommons/cc.eot');
src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'), src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'), url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'), url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg'); url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
[class^="icon-cc"]:before, [class*=" icon-cc"]:before { [class^="icon-cc"]::before,
[class*=" icon-cc"]::before {
font-family: "CreativeCommons"; font-family: "CreativeCommons";
} }
.icon-cc:before { content: '\e800'; } /* '' */ .icon-cc::before { content: '\e800'; } /* '' */
.icon-cc-by:before { content: '\e801'; } /* '' */ .icon-cc-by::before { content: '\e801'; } /* '' */
.icon-cc-nc:before { content: '\e802'; } /* '' */ .icon-cc-nc::before { content: '\e802'; } /* '' */
.icon-cc-nc-eu:before { content: '\e803'; } /* '' */ .icon-cc-nc-eu::before { content: '\e803'; } /* '' */
.icon-cc-nc-jp:before { content: '\e804'; } /* '' */ .icon-cc-nc-jp::before { content: '\e804'; } /* '' */
.icon-cc-sa:before { content: '\e805'; } /* '' */ .icon-cc-sa::before { content: '\e805'; } /* '' */
.icon-cc-nd:before { content: '\e806'; } /* '' */ .icon-cc-nd::before { content: '\e806'; } /* '' */
.icon-cc-pd:before { content: '\e807'; } /* '' */ .icon-cc-pd::before { content: '\e807'; } /* '' */
.icon-cc-zero:before { content: '\e808'; } /* '' */ .icon-cc-zero::before { content: '\e808'; } /* '' */
.icon-cc-share:before { content: '\e809'; } /* '' */ .icon-cc-share::before { content: '\e809'; } /* '' */
.icon-cc-remix:before { content: '\e80a'; } /* '' */ .icon-cc-remix::before { content: '\e80a'; } /* '' */
cms/static/sass/elements/_footer.scss
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
footer.primary { footer.primary {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include clearfix(); @include clearfix();
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -22,6 +24,7 @@ ...@@ -22,6 +24,7 @@
.colophon { .colophon {
width: flex-grid(4, 12); width: flex-grid(4, 12);
@include float(left); @include float(left);
@include margin-right(flex-gutter(2)); @include margin-right(flex-gutter(2));
} }
...@@ -29,18 +32,21 @@ ...@@ -29,18 +32,21 @@
a { a {
color: $uxpl-blue-base; color: $uxpl-blue-base;
&:hover, &:active { &:hover,
&:active {
color: $uxpl-blue-hover-active; color: $uxpl-blue-hover-active;
} }
} }
.nav-peripheral { .nav-peripheral {
width: flex-grid(6, 12); width: flex-grid(6, 12);
@include float(right); @include float(right);
@include text-align(right); @include text-align(right);
.nav-item { .nav-item {
display: inline-block; display: inline-block;
@include margin-right($baseline/4); @include margin-right($baseline/4);
&:last-child { &:last-child {
...@@ -54,9 +60,12 @@ ...@@ -54,9 +60,12 @@
.icon { .icon {
@include transition(top $tmg-f2 ease-in-out $tmg-f2); @include transition(top $tmg-f2 ease-in-out $tmg-f2);
@extend %t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
} }
...@@ -65,10 +74,12 @@ ...@@ -65,10 +74,12 @@
.footer-content-secondary { .footer-content-secondary {
@include clearfix(); @include clearfix();
margin-top: $baseline; margin-top: $baseline;
} }
.footer-about-copyright, .footer-about-openedx { .footer-about-copyright,
.footer-about-openedx {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
...@@ -76,6 +87,7 @@ ...@@ -76,6 +87,7 @@
// platform trademarks // platform trademarks
.footer-about-copyright { .footer-about-copyright {
width: flex-grid(4, 12); width: flex-grid(4, 12);
@include float(left); @include float(left);
@include margin-right(flex-gutter(2)); @include margin-right(flex-gutter(2));
} }
......
cms/static/sass/elements/_forms.scss
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
// -------------------- // --------------------
// UI: checkbox/radio inputs // UI: checkbox/radio inputs
%input-tickable { %input-tickable {
~ label { ~ label {
color: $color-copy-base; color: $color-copy-base;
} }
...@@ -25,6 +24,7 @@ ...@@ -25,6 +24,7 @@
// STATE: checked/selected // STATE: checked/selected
&:checked ~ label { &:checked ~ label {
@extend %t-strong; @extend %t-strong;
color: $ui-action-primary-color-focus; color: $ui-action-primary-color-focus;
} }
} }
...@@ -35,8 +35,10 @@ input[type="password"], ...@@ -35,8 +35,10 @@ input[type="password"],
textarea.text { textarea.text {
@include box-sizing(border-box); @include box-sizing(border-box);
@include linear-gradient($gray-l5, $white); @include linear-gradient($gray-l5, $white);
@extend %t-copy-sub2; @extend %t-copy-sub2;
@extend %t-demi-strong; @extend %t-demi-strong;
padding: 6px 8px 8px; padding: 6px 8px 8px;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
border-radius: 2px; border-radius: 2px;
...@@ -49,11 +51,12 @@ textarea.text { ...@@ -49,11 +51,12 @@ textarea.text {
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
&:-moz-placeholder, &:-moz-placeholder,
&:-ms-input-placeholder { &:-ms-input-placeholder {
color: $gray-l2; color: $gray-l2;
} }
&:focus { &:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%)); @include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0; outline: 0;
} }
} }
...@@ -61,12 +64,13 @@ textarea.text { ...@@ -61,12 +64,13 @@ textarea.text {
// +Fields - Not Editable // +Fields - Not Editable
// ==================== // ====================
.field.is-not-editable { .field.is-not-editable {
& label.is-focused { & label.is-focused {
color: $gray-d2; color: $gray-d2;
} }
label, input, textarea { label,
input,
textarea {
pointer-events: none; pointer-events: none;
} }
} }
...@@ -74,8 +78,8 @@ textarea.text { ...@@ -74,8 +78,8 @@ textarea.text {
// +Fields - With Error // +Fields - With Error
// ==================== // ====================
.field.error { .field.error {
input,
input, textarea { textarea {
border-color: $red; border-color: $red;
} }
} }
...@@ -86,13 +90,15 @@ form { ...@@ -86,13 +90,15 @@ form {
// CASE: cosmetic checkbox input // CASE: cosmetic checkbox input
.checkbox-cosmetic { .checkbox-cosmetic {
.input-checkbox-checked,
.input-checkbox-checked, .input-checkbox-unchecked, .label { .input-checkbox-unchecked,
.label {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.input-checkbox-checked, .input-checkbox-unchecked { .input-checkbox-checked,
.input-checkbox-unchecked {
width: ($baseline*0.75); width: ($baseline*0.75);
} }
...@@ -110,7 +116,6 @@ form { ...@@ -110,7 +116,6 @@ form {
// CASE: checked // CASE: checked
&:checked { &:checked {
~ label .input-checkbox-checked { ~ label .input-checkbox-checked {
display: inline-block; display: inline-block;
} }
...@@ -119,7 +124,6 @@ form { ...@@ -119,7 +124,6 @@ form {
display: none; display: none;
} }
} }
} }
} }
...@@ -141,35 +145,11 @@ form { ...@@ -141,35 +145,11 @@ form {
.note { .note {
@include box-sizing(border-box); @include box-sizing(border-box);
.title {
}
.copy {
}
// note with actions // note with actions
&.has-actions { &.has-actions {
@include clearfix(); @include clearfix();
.title {
}
.copy {
}
.list-actions {
}
} }
} }
.note-promotion {
}
} }
// +Form - Create New // +Form - Create New
...@@ -182,6 +162,7 @@ form { ...@@ -182,6 +162,7 @@ form {
.title { .title {
@extend %t-title4; @extend %t-title4;
@extend %t-strong; @extend %t-strong;
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5); padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
} }
...@@ -201,24 +182,27 @@ form { ...@@ -201,24 +182,27 @@ form {
} }
&.required { &.required {
label { label {
@extend %t-strong; @extend %t-strong;
} }
label:after { label::after {
margin-left: ($baseline/4); margin-left: ($baseline/4);
content: "*"; content: "*";
} }
} }
label, input, textarea { label,
input,
textarea {
display: block; display: block;
} }
label { label {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f3 ease-in-out 0s); @include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
&.is-focused { &.is-focused {
...@@ -227,9 +211,12 @@ form { ...@@ -227,9 +211,12 @@ form {
} }
input, textarea { input,
textarea {
@extend %t-copy-base; @extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -242,12 +229,7 @@ form { ...@@ -242,12 +229,7 @@ form {
width: 25%; width: 25%;
} }
/*@include placeholder {
color: $gray-l3;
}*/
&:focus { &:focus {
+ .tip { + .tip {
color: $gray-d1; color: $gray-d1;
} }
...@@ -271,6 +253,7 @@ form { ...@@ -271,6 +253,7 @@ form {
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include transition(color 0.15s ease-in-out); @include transition(color 0.15s ease-in-out);
...@@ -295,11 +278,11 @@ form { ...@@ -295,11 +278,11 @@ form {
} }
.is-showing { .is-showing {
@extend %anim-fadeIn; @extend %anim-fadeIn;
} }
.is-hiding { .is-hiding {
@extend %anim-fadeOut; @extend %anim-fadeOut;
} }
.tip-error { .tip-error {
...@@ -314,8 +297,9 @@ form { ...@@ -314,8 +297,9 @@ form {
} }
.field-inline { .field-inline {
input,
input, textarea, select { textarea,
select {
width: 62%; width: 62%;
display: inline-block; display: inline-block;
} }
...@@ -326,16 +310,11 @@ form { ...@@ -326,16 +310,11 @@ form {
width: 35%; width: 35%;
margin-top: 0; margin-top: 0;
} }
&.error {
.tip-error {
}
}
} }
.field-group { .field-group {
@include clearfix(); @include clearfix();
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
.field { .field {
...@@ -356,7 +335,8 @@ form { ...@@ -356,7 +335,8 @@ form {
margin-right: 0; margin-right: 0;
} }
input, textarea { input,
textarea {
width: 100%; width: 100%;
} }
} }
...@@ -372,7 +352,9 @@ form { ...@@ -372,7 +352,9 @@ form {
.action { .action {
@include transition(all $tmg-f2 linear 0s); @include transition(all $tmg-f2 linear 0s);
@extend %t-strong; @extend %t-strong;
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
text-transform: uppercase; text-transform: uppercase;
...@@ -380,11 +362,13 @@ form { ...@@ -380,11 +362,13 @@ form {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend %t-action2; @extend %t-action2;
} }
.action-secondary { .action-secondary {
@include grey-button; @include grey-button;
@extend %t-action2; @extend %t-action2;
} }
} }
...@@ -395,7 +379,6 @@ form { ...@@ -395,7 +379,6 @@ form {
// form - inline xblock name edit on unit, container, outline // form - inline xblock name edit on unit, container, outline
// TODO: abstract this out into a Sass placeholder // TODO: abstract this out into a Sass placeholder
.incontext-editor.is-editable { .incontext-editor.is-editable {
.access-editor-action-wrapper { .access-editor-action-wrapper {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -405,17 +388,21 @@ form { ...@@ -405,17 +388,21 @@ form {
vertical-align: baseline; vertical-align: baseline;
} }
} }
.incontext-editor-value, .incontext-editor-value,
.incontext-editor-action-wrapper { .incontext-editor-action-wrapper {
@extend %cont-truncated; @extend %cont-truncated;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
max-width: 80%; max-width: 80%;
} }
.incontext-editor-open-action, .access-button { .incontext-editor-open-action,
.access-button {
@extend %ui-btn-non-blue; @extend %ui-btn-non-blue;
@extend %t-copy-base; @extend %t-copy-base;
padding-top: ($baseline/10); padding-top: ($baseline/10);
.icon.icon { .icon.icon {
...@@ -428,7 +415,6 @@ form { ...@@ -428,7 +415,6 @@ form {
} }
&.is-editing { &.is-editing {
.incontext-editor-value, .incontext-editor-value,
.incontext-editor-action-wrapper { .incontext-editor-action-wrapper {
display: none; display: none;
...@@ -444,7 +430,7 @@ form { ...@@ -444,7 +430,7 @@ form {
// ==================== // ====================
.wrapper-create-element { .wrapper-create-element {
height: auto; height: auto;
opacity: 1.0; opacity: 1;
pointer-events: auto; pointer-events: auto;
overflow: hidden; overflow: hidden;
display: none; display: none;
...@@ -462,7 +448,9 @@ form { ...@@ -462,7 +448,9 @@ form {
// ==================== // ====================
input.search { input.search {
padding: 6px 15px 8px 30px; padding: 6px 15px 8px 30px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 20px; border-radius: 20px;
background: url('#{$static-path}/images/search-icon.png') no-repeat 8px 7px #edf1f5; background: url('#{$static-path}/images/search-icon.png') no-repeat 8px 7px #edf1f5;
...@@ -471,7 +459,7 @@ input.search { ...@@ -471,7 +459,7 @@ input.search {
outline: 0; outline: 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #979faf; color: #979faf;
} }
} }
...@@ -488,6 +476,7 @@ code { ...@@ -488,6 +476,7 @@ code {
.CodeMirror { .CodeMirror {
@extend %t-copy-sub1; @extend %t-copy-sub1;
background: $white; background: $white;
font-family: $f-monospace; font-family: $f-monospace;
} }
...@@ -496,10 +485,14 @@ code { ...@@ -496,10 +485,14 @@ code {
width: 100%; width: 100%;
min-height: 80px; min-height: 80px;
padding: 10px; padding: 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
background-color: #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
font-family: Monaco, monospace; font-family: Monaco, monospace;
} }
cms/static/sass/elements/_header.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
.wrapper-header { .wrapper-header {
@extend %ui-depth3; @extend %ui-depth3;
position: relative; position: relative;
width: 100%; width: 100%;
box-shadow: 0 1px 2px 0 $shadow-l1; box-shadow: 0 1px 2px 0 $shadow-l1;
...@@ -13,6 +14,7 @@ ...@@ -13,6 +14,7 @@
header.primary { header.primary {
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix(); @include clearfix();
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -22,23 +24,32 @@ ...@@ -22,23 +24,32 @@
// ==================== // ====================
// basic layout // basic layout
.wrapper-l, .wrapper-r { .wrapper-l,
.wrapper-r {
background: $white; background: $white;
} }
.wrapper-l { .wrapper-l {
@include float(left); @include float(left);
width: flex-grid(7,12);
width: flex-grid(7, 12);
} }
.wrapper-r { .wrapper-r {
@include float(right); @include float(right);
width: flex-grid(4,12);
width: flex-grid(4, 12);
@include text-align(right); @include text-align(right);
} }
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding,
.info-course,
.nav-course,
.nav-account,
.nav-pitch {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
...@@ -60,10 +71,10 @@ ...@@ -60,10 +71,10 @@
// basic layout - nav items // basic layout - nav items
nav { nav {
> ol > .nav-item { > ol > .nav-item {
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -83,33 +94,23 @@ ...@@ -83,33 +94,23 @@
// basic layout - dropdowns // basic layout - dropdowns
.nav-dd { .nav-dd {
.title { .title {
@extend %t-action2; @extend %t-action2;
@extend %ui-btn-dd-nav-primary; @extend %ui-btn-dd-nav-primary;
@include transition(all $tmg-f2 ease-in-out 0s);
.label, .fa-caret-down { @include transition(all $tmg-f2 ease-in-out 0s);
}
.label {
}
.fa-caret-down { .fa-caret-down {
opacity: 0.25; opacity: 0.25;
} }
&:hover { &:hover {
.fa-caret-down { .fa-caret-down {
opacity: 1.0; opacity: 1;
} }
} }
.nav-sub .nav-item { .nav-sub .nav-item {
.icon { .icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -141,17 +142,20 @@ ...@@ -141,17 +142,20 @@
.info-course { .info-course {
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
@include border-right(1px solid $gray-l4); @include border-right(1px solid $gray-l4);
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org,
.course-number {
@extend %t-action4; @extend %t-action4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
max-width: 45%; max-width: 45%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 1.0; opacity: 1;
color: $gray-d3; color: $gray-d3;
} }
...@@ -162,6 +166,7 @@ ...@@ -162,6 +166,7 @@
.course-title { .course-title {
@extend %t-action2; @extend %t-action2;
@extend %t-strong; @extend %t-strong;
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -172,6 +177,7 @@ ...@@ -172,6 +177,7 @@
// entire link // entire link
.course-link { .course-link {
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
display: block; display: block;
color: $gray-d3; color: $gray-d3;
...@@ -200,14 +206,12 @@ ...@@ -200,14 +206,12 @@
} }
.nav-account-help { .nav-account-help {
.wrapper-nav-sub { .wrapper-nav-sub {
width: ($baseline*10); width: ($baseline*10);
} }
} }
.nav-account-user { .nav-account-user {
.title { .title {
max-width: ($baseline*6.5); max-width: ($baseline*6.5);
...@@ -223,6 +227,7 @@ ...@@ -223,6 +227,7 @@
.settings-language-form { .settings-language-form {
margin-top: 4px; margin-top: 4px;
.language-selector { .language-selector {
width: 130px; width: 130px;
} }
...@@ -246,13 +251,12 @@ ...@@ -246,13 +251,12 @@
// CASE: user signed in // CASE: user signed in
.is-signedin { .is-signedin {
.wrapper-l { .wrapper-l {
width: flex-grid(8,12); width: flex-grid(8, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(4,12); width: flex-grid(4, 12);
} }
.branding { .branding {
...@@ -268,15 +272,13 @@ ...@@ -268,15 +272,13 @@
// CASE: in course { // CASE: in course {
.is-signedin.course { .is-signedin.course {
.wrapper-header { .wrapper-header {
.wrapper-l { .wrapper-l {
width: flex-grid(9,12); width: flex-grid(9, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(3,12); width: flex-grid(3, 12);
} }
.branding { .branding {
...@@ -299,15 +301,13 @@ ...@@ -299,15 +301,13 @@
// CASE: user not signed in // CASE: user not signed in
.not-signedin, .not-signedin,
.view-util { .view-util {
.wrapper-header { .wrapper-header {
.wrapper-l { .wrapper-l {
width: flex-grid(2,12); width: flex-grid(2, 12);
} }
.wrapper-r { .wrapper-r {
width: flex-grid(10,12); width: flex-grid(10, 12);
} }
.branding { .branding {
...@@ -327,16 +327,20 @@ ...@@ -327,16 +327,20 @@
.action-signup { .action-signup {
@include blue-button(); @include blue-button();
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
} }
.action-signin { .action-signin {
@include white-button(); @include white-button();
@extend %t-action3; @extend %t-action3;
@extend %t-strong; @extend %t-strong;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -350,55 +354,39 @@ ...@@ -350,55 +354,39 @@
.nav-item.is-current, .nav-item.is-current,
body.howitworks .nav-not-signedin-hiw, body.howitworks .nav-not-signedin-hiw,
// dashboard
body.dashboard .nav-account-dashboard, body.dashboard .nav-account-dashboard,
// course content
body.course.view-outline .nav-course-courseware .title, body.course.view-outline .nav-course-courseware .title,
body.course.view-updates .nav-course-courseware .title, body.course.view-updates .nav-course-courseware .title,
body.course.view-static-pages .nav-course-courseware .title, body.course.view-static-pages .nav-course-courseware .title,
body.course.view-uploads .nav-course-courseware .title, body.course.view-uploads .nav-course-courseware .title,
body.course.view-textbooks .nav-course-courseware .title, body.course.view-textbooks .nav-course-courseware .title,
body.course.view-video-uploads .nav-course-courseware .title, body.course.view-video-uploads .nav-course-courseware .title,
body.course.view-outline .nav-course-courseware-outline, body.course.view-outline .nav-course-courseware-outline,
body.course.view-updates .nav-course-courseware-updates, body.course.view-updates .nav-course-courseware-updates,
body.course.view-static-pages .nav-course-courseware-pages, body.course.view-static-pages .nav-course-courseware-pages,
body.course.view-uploads .nav-course-courseware-uploads, body.course.view-uploads .nav-course-courseware-uploads,
body.course.view-textbooks .nav-course-courseware-textbooks, body.course.view-textbooks .nav-course-courseware-textbooks,
body.course.view-video-uploads .nav-course-courseware-videos, body.course.view-video-uploads .nav-course-courseware-videos,
// course settings
body.course.schedule .nav-course-settings .title, body.course.schedule .nav-course-settings .title,
body.course.grading .nav-course-settings .title, body.course.grading .nav-course-settings .title,
body.course.view-team .nav-course-settings .title, body.course.view-team .nav-course-settings .title,
body.course.view-group-configurations .nav-course-settings .title, body.course.view-group-configurations .nav-course-settings .title,
body.course.advanced .nav-course-settings .title, body.course.advanced .nav-course-settings .title,
body.course.view-certificates .nav-course-settings .title, body.course.view-certificates .nav-course-settings .title,
body.course.schedule .nav-course-settings-schedule, body.course.schedule .nav-course-settings-schedule,
body.course.grading .nav-course-settings-grading, body.course.grading .nav-course-settings-grading,
body.course.view-team .nav-course-settings-team, body.course.view-team .nav-course-settings-team,
body.course.view-group-configurations .nav-course-settings-group-configurations, body.course.view-group-configurations .nav-course-settings-group-configurations,
body.course.advanced .nav-course-settings-advanced, body.course.advanced .nav-course-settings-advanced,
body.course.view-certificates .nav-course-settings-certificates, body.course.view-certificates .nav-course-settings-certificates,
// course tools
body.course.view-import .nav-course-tools .title, body.course.view-import .nav-course-tools .title,
body.course.view-export .nav-course-tools .title, body.course.view-export .nav-course-tools .title,
body.course.view-export-git .nav-course-tools .title, body.course.view-export-git .nav-course-tools .title,
body.course.view-import .nav-course-tools-import, body.course.view-import .nav-course-tools-import,
body.course.view-export .nav-course-tools-export, body.course.view-export .nav-course-tools-export,
body.course.view-export-git .nav-course-tools-export-git, body.course.view-export-git .nav-course-tools-export-git,
// content library settings
body.course.view-team .nav-library-settings .title, body.course.view-team .nav-library-settings .title,
body.course.view-team .nav-library-settings-team {
body.course.view-team .nav-library-settings-team,
{
color: $uxpl-blue-base; color: $uxpl-blue-base;
a { a {
......
cms/static/sass/elements/_icons.scss
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
.icon-inline { .icon-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
...@@ -14,13 +15,16 @@ ...@@ -14,13 +15,16 @@
.wrapper-ui-badge { .wrapper-ui-badge {
position: absolute; position: absolute;
top: -1px; top: -1px;
@include left($baseline*1.5); @include left($baseline*1.5);
width: 100%; width: 100%;
} }
%ui-badge { %ui-badge {
@extend %t-title9; @extend %t-title9;
@extend %t-strong; @extend %t-strong;
position: relative; position: relative;
border-bottom-right-radius: ($baseline/10); border-bottom-right-radius: ($baseline/10);
border-bottom-left-radius: ($baseline/10); border-bottom-left-radius: ($baseline/10);
...@@ -34,10 +38,12 @@ ...@@ -34,10 +38,12 @@
// OPTION: add this class for a visual hanging display // OPTION: add this class for a visual hanging display
&.is-hanging { &.is-hanging {
@include box-sizing(border-box); @include box-sizing(border-box);
@extend %ui-depth2; @extend %ui-depth2;
top: -($baseline/4); top: -($baseline/4);
&:after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: -($baseline/4); right: -($baseline/4);
......
cms/static/sass/elements/_layout.scss
// studio - elements - layouts // 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 // layout - basic page header
...@@ -18,6 +12,7 @@ ...@@ -18,6 +12,7 @@
.mast, .mast,
.metadata { .metadata {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
...@@ -41,20 +36,26 @@ ...@@ -41,20 +36,26 @@
.page-header { .page-header {
@include float(left); @include float(left);
width: flex-grid(6,12);
width: flex-grid(6, 12);
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
} }
.nav-actions { .nav-actions {
position: relative; position: relative;
bottom: -($baseline*0.75); bottom: -($baseline*0.75);
@include float(right); @include float(right);
width: flex-grid(6,12);
width: flex-grid(6, 12);
@include text-align(right); @include text-align(right);
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@include margin-right(($baseline/2)); @include margin-right(($baseline/2));
&:last-child { &:last-child {
...@@ -89,7 +90,6 @@ ...@@ -89,7 +90,6 @@
// layout with actions // layout with actions
&.has-subtitle { &.has-subtitle {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
...@@ -97,13 +97,13 @@ ...@@ -97,13 +97,13 @@
// layout with breadcrumb navigation // layout with breadcrumb navigation
&.has-navigation { &.has-navigation {
.nav-actions { .nav-actions {
bottom: -($baseline*1.5); bottom: -($baseline*1.5);
} }
.navigation-item { .navigation-item {
@extend %cont-truncated; @extend %cont-truncated;
display: inline-block; display: inline-block;
vertical-align: bottom; // correct for extra padding in FF vertical-align: bottom; // correct for extra padding in FF
max-width: 250px; max-width: 250px;
...@@ -111,10 +111,11 @@ ...@@ -111,10 +111,11 @@
&.navigation-current { &.navigation-current {
@extend %ui-disabled; @extend %ui-disabled;
color: $gray; color: $gray;
max-width: 250px; max-width: 250px;
&:before { &::before {
color: $gray; color: $gray;
} }
} }
...@@ -124,7 +125,7 @@ ...@@ -124,7 +125,7 @@
color: $blue; color: $blue;
} }
.navigation-item:before { .navigation-item::before {
content: " / "; content: " / ";
margin: ($baseline/4); margin: ($baseline/4);
color: $gray; color: $gray;
...@@ -134,7 +135,7 @@ ...@@ -134,7 +135,7 @@
} }
} }
.navigation .navigation-item:first-child:before { .navigation .navigation-item:first-child::before {
content: ""; content: "";
margin: 0; margin: 0;
} }
...@@ -143,28 +144,24 @@ ...@@ -143,28 +144,24 @@
// CASE: wizard-based mast // CASE: wizard-based mast
.mast-wizard { .mast-wizard {
.page-header-sub { .page-header-sub {
@extend %t-title4; @extend %t-title4;
color: $gray; color: $gray;
font-weight: 300; font-weight: 300;
} }
.page-header-super { .page-header-super {
@extend %t-title4; @extend %t-title4;
float: left; float: left;
width: flex-grid(12,12); width: flex-grid(12, 12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
padding-top: ($baseline/2); padding-top: ($baseline/2);
font-weight: 600; font-weight: 600;
} }
} }
// page metadata/action bar
.metadata {
}
} }
// layout - basic page content // layout - basic page content
...@@ -176,7 +173,9 @@ ...@@ -176,7 +173,9 @@
.content { .content {
@include clearfix(); @include clearfix();
@extend %t-copy-base; @extend %t-copy-base;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -191,6 +190,7 @@ ...@@ -191,6 +190,7 @@
.title-sub { .title-sub {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-l2; color: $gray-l2;
...@@ -199,6 +199,7 @@ ...@@ -199,6 +199,7 @@
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
@extend %t-strong; @extend %t-strong;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $gray-d3; color: $gray-d3;
...@@ -216,7 +217,8 @@ ...@@ -216,7 +217,8 @@
.content-primary { .content-primary {
@include float(left); @include float(left);
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
width: flex-grid(9,12);
width: flex-grid(9, 12);
box-shadow: none; box-shadow: none;
border: 0; border: 0;
background-color: $white; background-color: $white;
...@@ -224,25 +226,27 @@ ...@@ -224,25 +226,27 @@
.content-supplementary { .content-supplementary {
@include float(left); @include float(left);
width: flex-grid(3,12);
width: flex-grid(3, 12);
} }
} }
// layout - primary content // layout - primary content
.content-primary { .content-primary {
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
} }
.title-2 { .title-2 {
@extend %t-title4; @extend %t-title4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
.title-3 { .title-3 {
@extend %t-title6; @extend %t-title6;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
...@@ -257,6 +261,7 @@ ...@@ -257,6 +261,7 @@
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(7, 12); width: flex-grid(7, 12);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
...@@ -268,7 +273,6 @@ ...@@ -268,7 +273,6 @@
// layout - supplemental content // layout - supplemental content
.content-supplementary { .content-supplementary {
> section { > section {
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -284,6 +288,7 @@ ...@@ -284,6 +288,7 @@
.inner-wrapper { .inner-wrapper {
@include clearfix(); @include clearfix();
position: relative; position: relative;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
......
cms/static/sass/elements/_modal.scss
...@@ -2,71 +2,79 @@ ...@@ -2,71 +2,79 @@
// ==================== // ====================
.modal-cover { .modal-cover {
@extend %ui-depth3; @extend %ui-depth3;
display: none;
position: fixed; display: none;
top: 0; position: fixed;
left: 0; top: 0;
width: 100%; left: 0;
height: 100%; width: 100%;
background: rgba(0, 0, 0, 0.8); height: 100%;
background: rgba(0, 0, 0, 0.8);
} }
.modal { .modal {
@extend %ui-depth4; @extend %ui-depth4;
display: none;
position: fixed; display: none;
top: 60px; position: fixed;
left: 50%; top: 60px;
width: 930px; left: 50%;
height: 540px; width: 930px;
margin-left: -465px; height: 540px;
background: $white; margin-left: -465px;
background: $white;
.modal-body {
height: 400px; .modal-body {
padding: 40px; height: 400px;
overflow-y: scroll; padding: 40px;
} overflow-y: scroll;
}
.modal-actions {
height: 60px; .modal-actions {
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); height: 60px;
background-color: #d1dae3;
} @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
h2 { background-color: #d1dae3;
@extend %t-title5; }
@extend %t-light;
margin: 0 ($baseline/2) ($baseline*1.5); h2 {
color: #646464; @extend %t-title5;
letter-spacing: 1px; @extend %t-light;
text-transform: uppercase;
} margin: 0 ($baseline/2) ($baseline*1.5);
color: #646464;
p { letter-spacing: 1px;
margin: $baseline; text-transform: uppercase;
} }
.revert-button { p {
@include blue-button; margin: $baseline;
margin: 13px 6px 0 13px; }
}
.revert-button {
.close-button { @include blue-button;
@include white-button;
margin-top: 13px; margin: 13px 6px 0 13px;
} }
.close-button {
@include white-button;
margin-top: 13px;
}
} }
// lean modal alternative // lean modal alternative
#lean_overlay { #lean_overlay {
@extend %ui-depth4; @extend %ui-depth4;
position: fixed;
top: 0px; position: fixed;
left: 0px; top: 0;
display: none; left: 0;
height: 100%; display: none;
width: 100%; height: 100%;
background: $black; width: 100%;
background: $black;
} }
cms/static/sass/elements/_navigation.scss
...@@ -3,17 +3,10 @@ ...@@ -3,17 +3,10 @@
// common // common
nav { nav {
ol,
ol, ul { ul {
@extend %cont-no-list; @extend %cont-no-list;
} }
.nav-item {
a {
}
}
} }
// ==================== // ====================
...@@ -26,9 +19,10 @@ nav { ...@@ -26,9 +19,10 @@ nav {
.nav-skip, .nav-skip,
.transcript-skip { .transcript-skip {
@include font-size(13); @include font-size(13);
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 0px; left: 0;
top: -($baseline*30); top: -($baseline*30);
overflow: hidden; overflow: hidden;
background: $white; background: $white;
...@@ -49,16 +43,16 @@ nav { ...@@ -49,16 +43,16 @@ nav {
// dropdown // dropdown
.nav-dd { .nav-dd {
.title { .title {
.label,
.label, .fa-caret-down { .fa-caret-down {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.ui-toggle-dd { .ui-toggle-dd {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
margin: 0; margin: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -66,7 +60,6 @@ nav { ...@@ -66,7 +60,6 @@ nav {
// dropped down state // dropped down state
&.is-selected { &.is-selected {
.ui-toggle-dd { .ui-toggle-dd {
@include transform(rotate(-180deg)); @include transform(rotate(-180deg));
@include transform-origin(50% 50%); @include transform-origin(50% 50%);
...@@ -77,10 +70,6 @@ nav { ...@@ -77,10 +70,6 @@ nav {
.nav-item { .nav-item {
position: relative; position: relative;
&:hover {
}
&.nav-course-settings { &.nav-course-settings {
.wrapper-nav-sub { .wrapper-nav-sub {
width: ($baseline*9); width: ($baseline*9);
...@@ -90,9 +79,10 @@ nav { ...@@ -90,9 +79,10 @@ nav {
.wrapper-nav-sub { .wrapper-nav-sub {
@include transition(opacity $tmg-f2 ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
position: absolute; position: absolute;
top: ($baseline*2.5); top: ($baseline*2.5);
opacity: 0.0; opacity: 0;
pointer-events: none; pointer-events: none;
width: ($baseline*8); width: ($baseline*8);
overflow: hidden; overflow: hidden;
...@@ -101,7 +91,7 @@ nav { ...@@ -101,7 +91,7 @@ nav {
// dropped down state // dropped down state
&.is-shown { &.is-shown {
opacity: 1.0; opacity: 1;
pointer-events: auto; pointer-events: auto;
overflow: visible; overflow: visible;
height: auto; height: auto;
...@@ -110,7 +100,9 @@ nav { ...@@ -110,7 +100,9 @@ nav {
.nav-sub { .nav-sub {
border-radius: 2px; border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -118,7 +110,8 @@ nav { ...@@ -118,7 +110,8 @@ nav {
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
background: $white; background: $white;
&:after, &:before { &::after,
&::before {
bottom: 100%; bottom: 100%;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
...@@ -129,13 +122,13 @@ nav { ...@@ -129,13 +122,13 @@ nav {
} }
// ui triangle/nub // ui triangle/nub
&:after { &::after {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white; border-bottom-color: $white;
border-width: 10px; border-width: 10px;
} }
&:before { &::before {
border-color: rgba(178, 178, 178, 0); border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-l3; border-bottom-color: $gray-l3;
border-width: 11px; border-width: 11px;
...@@ -144,6 +137,7 @@ nav { ...@@ -144,6 +137,7 @@ nav {
.nav-item { .nav-item {
@extend %t-action3; @extend %t-action3;
@extend %t-regular; @extend %t-regular;
display: block; display: block;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-l5; border-bottom: 1px solid $gray-l5;
...@@ -158,7 +152,8 @@ nav { ...@@ -158,7 +152,8 @@ nav {
a { a {
display: block; display: block;
&:hover, &:active { &:hover,
&:active {
color: $uxpl-blue-base; color: $uxpl-blue-base;
} }
} }
...@@ -167,7 +162,6 @@ nav { ...@@ -167,7 +162,6 @@ nav {
// CASE: left-hand side arrow/dd // CASE: left-hand side arrow/dd
&.ui-left { &.ui-left {
.wrapper-nav-sub { .wrapper-nav-sub {
left: 0; left: 0;
} }
...@@ -176,12 +170,12 @@ nav { ...@@ -176,12 +170,12 @@ nav {
@include text-align(left); @include text-align(left);
// ui triangle/nub // ui triangle/nub
&:after { &::after {
left: $baseline; left: $baseline;
margin-left: -10px; margin-left: -10px;
} }
&:before { &::before {
left: $baseline; left: $baseline;
margin-left: -11px; margin-left: -11px;
} }
...@@ -190,7 +184,6 @@ nav { ...@@ -190,7 +184,6 @@ nav {
// CASE: right-hand side arrow/dd // CASE: right-hand side arrow/dd
&.ui-right { &.ui-right {
.wrapper-nav-sub { .wrapper-nav-sub {
@include left(none); @include left(none);
@include right(0); @include right(0);
...@@ -199,13 +192,15 @@ nav { ...@@ -199,13 +192,15 @@ nav {
.nav-sub { .nav-sub {
// ui triangle/nub // ui triangle/nub
&:after { &::after {
@include right($baseline); @include right($baseline);
margin-right: -10px; margin-right: -10px;
} }
&:before { &::before {
@include right($baseline); @include right($baseline);
margin-right: -11px; margin-right: -11px;
} }
} }
......
cms/static/sass/elements/_pagination.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
%pagination { %pagination {
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
width: flex-grid(3, 12); width: flex-grid(3, 12);
...@@ -24,6 +25,7 @@ ...@@ -24,6 +25,7 @@
.nav-link { .nav-link {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
display: block; display: block;
border: 0; border: 0;
padding: ($baseline/4) ($baseline*0.75); padding: ($baseline/4) ($baseline*0.75);
...@@ -65,6 +67,7 @@ ...@@ -65,6 +67,7 @@
.total-pages { .total-pages {
@extend %t-copy-base; @extend %t-copy-base;
@extend %t-strong; @extend %t-strong;
width: ($baseline*2.5); width: ($baseline*2.5);
margin: 0 ($baseline*0.75); margin: 0 ($baseline*0.75);
padding: ($baseline/4); padding: ($baseline/4);
...@@ -74,19 +77,23 @@ ...@@ -74,19 +77,23 @@
.current-page { .current-page {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
@include left(-($baseline/4)); @include left(-($baseline/4));
} }
.page-divider { .page-divider {
@extend %t-title4; @extend %t-title4;
@extend %t-regular; @extend %t-regular;
vertical-align: middle; vertical-align: middle;
color: $gray; color: $gray;
} }
.pagination-form { .pagination-form {
@extend %ui-depth2; @extend %ui-depth2;
position: relative; position: relative;
.page-number-label, .page-number-label,
...@@ -96,6 +103,7 @@ ...@@ -96,6 +103,7 @@
.page-number-input { .page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: 1px dotted $gray-l2; border-bottom: 1px dotted $gray-l2;
border-radius: 0; border-radius: 0;
...@@ -110,7 +118,8 @@ ...@@ -110,7 +118,8 @@
&:focus { &:focus {
// borrowing the base input focus styles to match overall app // borrowing the base input focus styles to match overall app
@include linear-gradient($paleYellow, tint($paleYellow, 90%)); @include linear-gradient($paleYellow, tint($paleYellow, 90%));
opacity: 1.0;
opacity: 1;
box-shadow: 0 0 3px $shadow-d1 inset; box-shadow: 0 0 3px $shadow-d1 inset;
background-color: $white; background-color: $white;
border: 1px solid transparent; border: 1px solid transparent;
......
cms/static/sass/elements/_sock.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
.wrapper-sock { .wrapper-sock {
@include clearfix(); @include clearfix();
position: relative; position: relative;
margin: ($baseline*2) 0 0 0; margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
...@@ -10,7 +11,9 @@ ...@@ -10,7 +11,9 @@
.wrapper-inner { .wrapper-inner {
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%); @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
@extend %ui-depth0; @extend %ui-depth0;
display: none; display: none;
width: 100% !important; width: 100% !important;
border-bottom: 1px solid $white; border-bottom: 1px solid $white;
...@@ -20,6 +23,7 @@ ...@@ -20,6 +23,7 @@
// sock - actions // sock - actions
.list-cta { .list-cta {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
top: -($baseline*0.75); top: -($baseline*0.75);
width: 100%; width: 100%;
...@@ -29,12 +33,14 @@ ...@@ -29,12 +33,14 @@
.cta-show-sock { .cta-show-sock {
@extend %ui-btn-pill; @extend %ui-btn-pill;
@extend %t-action4; @extend %t-action4;
background: $gray-l5; background: $gray-l5;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: $gray-d2; color: $gray-d2;
.icon { .icon {
@extend %t-icon6; @extend %t-icon6;
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
...@@ -48,7 +54,9 @@ ...@@ -48,7 +54,9 @@
// sock - additional help // sock - additional help
.sock { .sock {
@include clearfix(); @include clearfix();
@extend %t-copy-sub2; @extend %t-copy-sub2;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -58,25 +66,26 @@ ...@@ -58,25 +66,26 @@
// support body // support body
header { header {
.title { .title {
@extend %t-title4; @extend %t-title4;
} }
} }
// shared elements // shared elements
.support, .feedback { .support,
.feedback {
@include box-sizing(border-box); @include box-sizing(border-box);
.title { .title {
@extend %t-title6; @extend %t-title6;
color: $white; color: $white;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.copy { .copy {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -86,6 +95,7 @@ ...@@ -86,6 +95,7 @@
.action-item { .action-item {
@include float(left); @include float(left);
@include margin-right($baseline/2); @include margin-right($baseline/2);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
&:last-child { &:last-child {
...@@ -94,16 +104,15 @@ ...@@ -94,16 +104,15 @@
.action { .action {
@extend %t-action4; @extend %t-action4;
display: block; display: block;
.icon { .icon {
@extend %t-icon4; @extend %t-icon4;
vertical-align: middle;
@include margin-right($baseline/4);
}
&:hover, &:active { vertical-align: middle;
@include margin-right($baseline/4);
} }
} }
...@@ -121,22 +130,22 @@ ...@@ -121,22 +130,22 @@
// studio support content // studio support content
.support { .support {
width: flex-grid(8,12); width: flex-grid(8, 12);
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
.action-item { .action-item {
width: flexgrid(4,8); width: flexgrid(4, 8);
} }
} }
// studio feedback content // studio feedback content
.feedback { .feedback {
width: flex-grid(4,12); width: flex-grid(4, 12);
float: left; float: left;
.action-item { .action-item {
width: flexgrid(4,4); width: flexgrid(4, 4);
} }
} }
} }
......
cms/static/sass/elements/_system-help.scss
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
// view introductions - common greeting/starting points for the UI // view introductions - common greeting/starting points for the UI
.content .introduction { .content .introduction {
@include box-sizing(border-box); @include box-sizing(border-box);
margin-bottom: $baseline; margin-bottom: $baseline;
.title { .title {
...@@ -25,19 +26,25 @@ ...@@ -25,19 +26,25 @@
.copy { .copy {
@include float(left); @include float(left);
width: flex-grid(8,12);
width: flex-grid(8, 12);
@include margin-right(flex-gutter()); @include margin-right(flex-gutter());
} }
.nav-introduction-supplementary { .nav-introduction-supplementary {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include float(right); @include float(right);
width: flex-grid(4,12);
width: flex-grid(4, 12);
display: block; display: block;
@include text-align(right); @include text-align(right);
.icon { .icon {
@extend %t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
...@@ -49,6 +56,7 @@ ...@@ -49,6 +56,7 @@
// notices - in-context: to be used as notices to users within the context of a form/action // notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext { .notice-incontext {
@extend %ui-well; @extend %ui-well;
border-radius: ($baseline/10); border-radius: ($baseline/10);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
...@@ -57,12 +65,15 @@ ...@@ -57,12 +65,15 @@
.title { .title {
@extend %t-title6; @extend %t-title6;
@extend %t-strong; @extend %t-strong;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.copy { .copy {
@extend %t-copy-sub1; @extend %t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75; opacity: 0.75;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -76,7 +87,6 @@ ...@@ -76,7 +87,6 @@
} }
&.has-status { &.has-status {
.status-indicator { .status-indicator {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -84,20 +94,15 @@ ...@@ -84,20 +94,15 @@
display: block; display: block;
width: 100%; width: 100%;
height: ($baseline/4); height: ($baseline/4);
opacity: 0.40; opacity: 0.4;
} }
} }
// CASE: notice has actions { // CASE: notice has actions {
&.has-actions { &.has-actions {
.list-actions { .list-actions {
margin-top: ($baseline*0.75); margin-top: ($baseline*0.75);
.action-item {
}
.action-primary { .action-primary {
@extend %btn-primary-blue; @extend %btn-primary-blue;
@extend %t-action3; @extend %t-action3;
...@@ -107,7 +112,6 @@ ...@@ -107,7 +112,6 @@
// list of notices all in one // list of notices all in one
&.list-notices { &.list-notices {
.notice-item { .notice-item {
margin-bottom: $baseline; margin-bottom: $baseline;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
...@@ -152,13 +156,7 @@ ...@@ -152,13 +156,7 @@
} }
&.has-actions { &.has-actions {
.list-actions { .list-actions {
.action-item {
}
.action-primary { .action-primary {
@extend %btn-primary-blue; @extend %btn-primary-blue;
@extend %t-action3; @extend %t-action3;
...@@ -180,13 +178,7 @@ ...@@ -180,13 +178,7 @@
} }
&.has-actions { &.has-actions {
.list-actions { .list-actions {
.action-item {
}
.action-primary { .action-primary {
@extend %btn-primary-green; @extend %btn-primary-green;
@extend %t-action3; @extend %t-action3;
...@@ -217,6 +209,7 @@ ...@@ -217,6 +209,7 @@
// informational bits (rename once UI pattern is further defined) // informational bits (rename once UI pattern is further defined)
.bit { .bit {
@extend %t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0; padding: 0 0 $baseline 0;
...@@ -228,14 +221,17 @@ ...@@ -228,14 +221,17 @@
padding-bottom: 0; padding-bottom: 0;
} }
h3, .title { h3,
.title {
@extend %t-title7; @extend %t-title7;
@extend %t-strong; @extend %t-strong;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: $gray-d2; color: $gray-d2;
} }
p, .copy { p,
.copy {
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
&:last-child { &:last-child {
...@@ -246,6 +242,7 @@ ...@@ -246,6 +242,7 @@
// learn more (aka external help button) // learn more (aka external help button)
.external-help-button { .external-help-button {
display: inline-block; display: inline-block;
@extend %ui-btn-flat-outline; @extend %ui-btn-flat-outline;
@extend %sizing; @extend %sizing;
} }
...@@ -256,6 +253,7 @@ ...@@ -256,6 +253,7 @@
.action-item { .action-item {
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4; border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4); padding-bottom: ($baseline/4);
...@@ -268,6 +266,7 @@ ...@@ -268,6 +266,7 @@
.item-detail { .item-detail {
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4; border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4); padding-bottom: ($baseline/4);
...@@ -275,11 +274,13 @@ ...@@ -275,11 +274,13 @@
} }
// navigation // navigation
.nav-related, .nav-page { .nav-related,
.nav-page {
@extend %cont-no-list; @extend %cont-no-list;
.nav-item { .nav-item {
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l5; border-bottom: 1px dotted $gray-l5;
padding-bottom: ($baseline/4); padding-bottom: ($baseline/4);
......
cms/static/sass/elements/_tooltip.scss
.tooltip { .tooltip {
@include transition(opacity $tmg-f3 ease-out 0s); @include transition(opacity $tmg-f3 ease-out 0s);
@include font-size(12); @include font-size(12);
@extend %t-regular; @extend %t-regular;
@extend %ui-depth5; @extend %ui-depth5;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -12,10 +14,11 @@ ...@@ -12,10 +14,11 @@
line-height: 26px; line-height: 26px;
color: $white; color: $white;
pointer-events: none; pointer-events: none;
opacity: 0.0; opacity: 0;
&:after { &::after {
@include font-size(20); @include font-size(20);
content: '▾'; content: '▾';
display: block; display: block;
position: absolute; position: absolute;
...@@ -24,4 +27,4 @@ ...@@ -24,4 +27,4 @@
margin-left: -7px; margin-left: -7px;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
} }
\ No newline at end of file
cms/static/sass/elements/_typography.scss
...@@ -5,22 +5,27 @@ ...@@ -5,22 +5,27 @@
// weights // weights
%t-ultrastrong { %t-ultrastrong {
font-weight: 700; font-weight: 700;
} }
%t-strong { %t-strong {
font-weight: 600; font-weight: 600;
} }
%t-demi-strong { %t-demi-strong {
font-weight: 500; font-weight: 500;
} }
%t-regular { %t-regular {
font-weight: 400; font-weight: 400;
} }
%t-light { %t-light {
font-weight: 300; font-weight: 300;
} }
%t-ultralight { %t-ultralight {
font-weight: 200; font-weight: 200;
} }
// headings/titles // headings/titles
...@@ -30,12 +35,14 @@ ...@@ -30,12 +35,14 @@
%t-title1 { %t-title1 {
@extend %t-title; @extend %t-title;
@include font-size(60); @include font-size(60);
@include line-height(60); @include line-height(60);
} }
%t-title2 { %t-title2 {
@extend %t-title; @extend %t-title;
@include font-size(48); @include font-size(48);
@include line-height(48); @include line-height(48);
} }
...@@ -47,36 +54,42 @@ ...@@ -47,36 +54,42 @@
%t-title4 { %t-title4 {
@extend %t-title; @extend %t-title;
@include font-size(24); @include font-size(24);
@include line-height(24); @include line-height(24);
} }
%t-title5 { %t-title5 {
@extend %t-title; @extend %t-title;
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
%t-title6 { %t-title6 {
@extend %t-title; @extend %t-title;
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
%t-title7 { %t-title7 {
@extend %t-title; @extend %t-title;
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
%t-title8 { %t-title8 {
@extend %t-title; @extend %t-title;
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
%t-title9 { %t-title9 {
@extend %t-title; @extend %t-title;
@include font-size(11); @include font-size(11);
@include line-height(11); @include line-height(11);
} }
...@@ -90,30 +103,35 @@ ...@@ -90,30 +103,35 @@
%t-copy-base { %t-copy-base {
@extend %t-copy; @extend %t-copy;
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
%t-copy-lead1 { %t-copy-lead1 {
@extend %t-copy; @extend %t-copy;
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
%t-copy-lead2 { %t-copy-lead2 {
@extend %t-copy; @extend %t-copy;
@include font-size(24); @include font-size(24);
@include line-height(24); @include line-height(24);
} }
%t-copy-sub1 { %t-copy-sub1 {
@extend %t-copy; @extend %t-copy;
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
%t-copy-sub2 { %t-copy-sub2 {
@extend %t-copy; @extend %t-copy;
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
......
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