Skip to content

E
edx-platform
Commit 8fb993dc by Andy Armstrong
Options

Fix validation issues with Studio Sass files

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