Merge pull request #16002 from edx/andya/studio-sass-linting
Fix validation issues with Studio Sass files
This commit is contained in:
Andy Armstrong
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,81 +1,81 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
|
||||
// CASE: IE9 doesn't support css animations and negative positioning
|
||||
.wrapper-notification {
|
||||
|
||||
&.is-shown {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
.nav-skip,
|
||||
.transcript-skip {
|
||||
@include left(0);
|
||||
|
||||
font-size: font-size(small);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.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;
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
*/
|
||||
|
||||
.CodeMirror {
|
||||
|
||||
.CodeMirror-linenumber.CodeMirror-gutter-elt {
|
||||
color: $gray-d3 !important;
|
||||
}
|
||||
.CodeMirror-linenumber.CodeMirror-gutter-elt {
|
||||
color: $gray-d3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
|
||||
&.is-disabled {
|
||||
@extend %ui-disabled;
|
||||
|
||||
-webkit-filter: grayscale(65%);
|
||||
opacity: 0.65;
|
||||
}
|
||||
@@ -31,6 +32,7 @@
|
||||
// ====================
|
||||
%sizing {
|
||||
@extend %t-action4;
|
||||
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
@@ -40,20 +42,24 @@
|
||||
// gray primary button
|
||||
%btn-primary-gray {
|
||||
@extend %ui-btn-primary;
|
||||
|
||||
background: $gray-l1;
|
||||
border-color: $gray-l2;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $gray-l1;
|
||||
background: $gray;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $gray-d1;
|
||||
color: $gray-l1;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $gray-d1;
|
||||
}
|
||||
}
|
||||
@@ -62,21 +68,25 @@
|
||||
// blue primary button
|
||||
%btn-primary-blue {
|
||||
@extend %ui-btn-primary;
|
||||
|
||||
background: $uxpl-blue-base;
|
||||
border-color: $uxpl-blue-base;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $uxpl-blue-hover-active;
|
||||
border-color: $uxpl-blue-hover-active;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $uxpl-blue-hover-active;
|
||||
border-color: $uxpl-blue-hover-active;
|
||||
color: $blue-l4;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $uxpl-blue-hover-active;
|
||||
}
|
||||
}
|
||||
@@ -85,21 +95,25 @@
|
||||
// green primary button
|
||||
%btn-primary-green {
|
||||
@extend %ui-btn-primary;
|
||||
|
||||
background: $uxpl-green-base;
|
||||
border-color: $uxpl-green-base;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $uxpl-green-dark-hover-active;
|
||||
border-color: $uxpl-green-dark-hover-active;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $uxpl-green-dark-hover-active;
|
||||
color: $white;
|
||||
border-color: $uxpl-green-dark-hover-active;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $uxpl-green-dark-hover-active;
|
||||
}
|
||||
}
|
||||
@@ -110,19 +124,23 @@
|
||||
// gray secondary button
|
||||
%btn-secondary-gray {
|
||||
@extend %ui-btn-secondary;
|
||||
|
||||
border-color: $gray-l3;
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $gray-l3;
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $gray-d2;
|
||||
color: $gray-l5;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $gray-d2;
|
||||
}
|
||||
}
|
||||
@@ -131,15 +149,18 @@
|
||||
// blue secondary button
|
||||
%btn-secondary-blue {
|
||||
@extend %ui-btn-secondary;
|
||||
|
||||
border-color: $blue-l3;
|
||||
color: $uxpl-blue-base;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $blue-l4;
|
||||
color: $uxpl-blue-hover-active;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
border-color: $blue-l3;
|
||||
background: $blue-l3;
|
||||
color: $uxpl-blue-base;
|
||||
@@ -149,19 +170,23 @@
|
||||
// white secondary button
|
||||
%btn-secondary-white {
|
||||
@extend %ui-btn-secondary;
|
||||
|
||||
border-color: $white-t2;
|
||||
color: $white-t3;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $gray-d2;
|
||||
color: $gray-l5;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $gray-d2;
|
||||
}
|
||||
}
|
||||
@@ -170,19 +195,23 @@
|
||||
// green secondary button
|
||||
%btn-secondary-green {
|
||||
@extend %ui-btn-secondary;
|
||||
|
||||
border-color: $green-l4;
|
||||
color: $green-l2;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $green-l4;
|
||||
color: $green-s1;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $green-s1;
|
||||
color: $green-l4;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $green-s1;
|
||||
}
|
||||
}
|
||||
@@ -190,43 +219,42 @@
|
||||
|
||||
// LMS-style CAPA button for consistency with LMS buttons
|
||||
%btn-lms-style {
|
||||
border: 1px solid $btn-lms-border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $white;
|
||||
color: $gray-d3;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
background-color: $btn-lms-background;
|
||||
background-image: -webkit-linear-gradient($btn-lms-background, $btn-lms-gradient);
|
||||
background-image: linear-gradient($btn-lms-background, $btn-lms-gradient);
|
||||
padding: 7px 18px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $btn-lms-shadow;
|
||||
background-clip: padding-box;
|
||||
font-size: 0.8125em;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
|
||||
cursor: pointer;
|
||||
background-color: $btn-lms-background-hover;
|
||||
background-image: -webkit-linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
|
||||
background-image: linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 1px solid $btn-lms-border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $white;
|
||||
color: $gray-d3;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
background-color: $btn-lms-background;
|
||||
background-image: -webkit-linear-gradient($btn-lms-background,$btn-lms-gradient);
|
||||
background-image: linear-gradient($btn-lms-background,$btn-lms-gradient);
|
||||
padding: 7px 18px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $btn-lms-shadow;
|
||||
background-clip: padding-box;
|
||||
font-size: 0.8125em;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
|
||||
cursor: pointer;
|
||||
background-color: $btn-lms-background-hover;
|
||||
background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
|
||||
background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 1px solid $btn-lms-border;
|
||||
box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
|
||||
}
|
||||
box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active, inset 0 0 8px 4px $btn-lms-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// +Button Element
|
||||
// ====================
|
||||
.button {
|
||||
|
||||
.icon {
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -237,18 +265,23 @@
|
||||
%ui-btn-dd {
|
||||
@extend %ui-btn;
|
||||
@extend %ui-btn-pill;
|
||||
padding:($baseline/4) ($baseline/2);
|
||||
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
|
||||
&.current, &.active, &.is-selected {
|
||||
&.current,
|
||||
&.active,
|
||||
&.is-selected {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
@@ -258,20 +291,24 @@
|
||||
// ====================
|
||||
%ui-btn-dd-nav-primary {
|
||||
@extend %ui-btn-dd;
|
||||
|
||||
background: $white;
|
||||
border-color: $white;
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $white;
|
||||
color: $uxpl-blue-hover-active;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
&.current,
|
||||
&.active {
|
||||
background: $white;
|
||||
color: $gray-d4;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $uxpl-blue-hover-active;
|
||||
}
|
||||
}
|
||||
@@ -291,6 +328,7 @@
|
||||
|
||||
.action-button {
|
||||
@include transition(all $tmg-f3 linear 0s);
|
||||
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
padding: 3px ($baseline/2);
|
||||
@@ -324,7 +362,7 @@
|
||||
|
||||
// CASE: right to left layout
|
||||
@include rtl {
|
||||
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
|
||||
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
|
||||
}
|
||||
|
||||
// CASE: left to right layout
|
||||
@@ -366,6 +404,7 @@
|
||||
// TODO: this should be transitioned away from in favor of %ui-expand-collapse
|
||||
%expand-collapse {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
|
||||
display: inline-block;
|
||||
color: $gray-l2;
|
||||
vertical-align: top;
|
||||
@@ -377,7 +416,9 @@
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
color: $gray-l3;
|
||||
vertical-align: middle;
|
||||
@@ -399,6 +440,7 @@
|
||||
// CASE: default (is expanded)
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -407,17 +449,17 @@
|
||||
}
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: is collapsed
|
||||
&.is-collapsed {
|
||||
|
||||
.ui-toggle-expansion {
|
||||
|
||||
.icon {
|
||||
@include transform(rotate(-90deg));
|
||||
@include transform-origin(50% 50%);
|
||||
@@ -431,8 +473,8 @@
|
||||
|
||||
// UI: drag handle
|
||||
.drag-handle {
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
@@ -440,18 +482,22 @@
|
||||
// UI: is draggable
|
||||
.is-draggable {
|
||||
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
|
||||
|
||||
position: relative;
|
||||
|
||||
.draggable-drop-indicator {
|
||||
@extend %ui-depth3;
|
||||
|
||||
@include transition(opacity $tmg-f2 linear 0s);
|
||||
@include size(100%, auto);
|
||||
|
||||
position: absolute;
|
||||
border-top: 1px solid $blue-l1;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
|
||||
.fa-caret-right {
|
||||
@extend %t-icon5;
|
||||
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -($baseline/4);
|
||||
@@ -471,6 +517,7 @@
|
||||
// UI: is dragging - drag state
|
||||
.is-dragging {
|
||||
@extend %ui-depth4;
|
||||
|
||||
left: -($baseline/4);
|
||||
box-shadow: 0 1px 2px 0 $shadow-d1;
|
||||
cursor: move;
|
||||
@@ -480,7 +527,7 @@
|
||||
// UI: condition - valid drop
|
||||
&.valid-drop {
|
||||
border-color: $ui-action-primary-color-focus;
|
||||
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
|
||||
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -491,12 +538,11 @@
|
||||
|
||||
// UI: drag target
|
||||
.drop-target {
|
||||
|
||||
&.drop-target-before {
|
||||
margin-top: ($baseline*1.5);
|
||||
|
||||
> .draggable-drop-indicator-before {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -504,7 +550,7 @@
|
||||
margin-bottom: ($baseline*1.5);
|
||||
|
||||
> .draggable-drop-indicator-after {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -512,6 +558,7 @@
|
||||
// UI: drop state - was dropped
|
||||
.was-dropped {
|
||||
@include animation(was-dropped $tmg-avg ease-in-out 1);
|
||||
|
||||
border-color: $ui-action-primary-color-focus;
|
||||
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
|
||||
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
|
||||
}
|
||||
|
||||
@@ -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'; } /* '' */
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,12 +1,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
|
||||
@@ -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;
|
||||
|
||||
@@ -8,15 +8,18 @@
|
||||
|
||||
// basic modal content
|
||||
// ------------------------
|
||||
.modal-window {
|
||||
.modal-window {
|
||||
@extend %ui-depth3;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
box-shadow: 0 0 7px $shadow-d1;
|
||||
border-radius: ($baseline/5);
|
||||
background-color: $gray-l4;
|
||||
padding: 7px;
|
||||
|
||||
@include text-align(left);
|
||||
@include direction();
|
||||
|
||||
@@ -29,12 +32,14 @@
|
||||
.title {
|
||||
@extend %t-title5;
|
||||
@extend %t-demi-strong;
|
||||
|
||||
margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
color: $gray;
|
||||
}
|
||||
@@ -61,19 +66,23 @@
|
||||
padding: ($baseline*0.75);
|
||||
background: $gray-d3;
|
||||
|
||||
.icon, .copy {
|
||||
.icon,
|
||||
.copy {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
max-width: 85%;
|
||||
color: $white;
|
||||
}
|
||||
@@ -101,6 +110,7 @@
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-tabs-header {
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
@@ -112,6 +122,7 @@
|
||||
.settings-tab-button {
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-regular;
|
||||
|
||||
background-image: none;
|
||||
background-color: $white;
|
||||
color: $gray-d1;
|
||||
@@ -120,10 +131,12 @@
|
||||
border: 0;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $uxpl-blue-base;
|
||||
color: $uxpl-blue-base;
|
||||
@@ -135,6 +148,7 @@
|
||||
|
||||
.modal-section-title {
|
||||
@extend %t-title6;
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
border-bottom: ($baseline/10) solid $gray-l4;
|
||||
padding-bottom: ($baseline/4);
|
||||
@@ -144,9 +158,9 @@
|
||||
.modal-subsection-title {
|
||||
@extend %t-title8;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
@@ -155,13 +169,15 @@
|
||||
min-height: 95px;
|
||||
}
|
||||
|
||||
.list-fields, .list-actions {
|
||||
.list-fields,
|
||||
.list-actions {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
@extend %actions-list;
|
||||
|
||||
margin-left: ($baseline/4);
|
||||
|
||||
.action-button {
|
||||
@@ -178,6 +194,7 @@
|
||||
|
||||
.action-item {
|
||||
@extend %t-action3;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: ($baseline*0.75);
|
||||
|
||||
@@ -188,7 +205,9 @@
|
||||
|
||||
.action-primary {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-action3;
|
||||
|
||||
border-color: $blue-d1;
|
||||
color: $white;
|
||||
}
|
||||
@@ -238,7 +257,6 @@
|
||||
}
|
||||
|
||||
&.modal-editor {
|
||||
|
||||
.modal-header {
|
||||
margin: ($baseline/4) ($baseline/2);
|
||||
|
||||
@@ -250,6 +268,7 @@
|
||||
.editor-modes {
|
||||
width: 48%;
|
||||
display: inline-block;
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
.action-item {
|
||||
@@ -260,13 +279,11 @@
|
||||
.settings-button {
|
||||
@extend %btn-secondary-gray;
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
border: 0;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
}
|
||||
|
||||
&.is-set {
|
||||
background-color: $gray-d1;
|
||||
color: $white;
|
||||
@@ -295,6 +312,7 @@
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
@include transform(translate(-50%,-50%));
|
||||
}
|
||||
|
||||
@@ -302,6 +320,7 @@
|
||||
.modal-content {
|
||||
padding: ($baseline/2) ($baseline/2) ($baseline*1.25) ($baseline/2);
|
||||
}
|
||||
|
||||
.ui-loading {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -314,7 +333,6 @@
|
||||
|
||||
// upload modal
|
||||
.assetupload-modal {
|
||||
|
||||
.status-upload {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
@@ -323,7 +341,6 @@
|
||||
|
||||
// component editor
|
||||
.modal-window {
|
||||
|
||||
.CodeMirror {
|
||||
height: 365px;
|
||||
}
|
||||
@@ -333,9 +350,7 @@
|
||||
}
|
||||
|
||||
.wrapper-comp-settings {
|
||||
|
||||
.list-input {
|
||||
|
||||
&.settings-list {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
@@ -365,7 +380,6 @@
|
||||
|
||||
// MODAL TYPE: component - video modal (includes special overrides for xblock-related editing view)
|
||||
.modal-lg.modal-type-video {
|
||||
|
||||
.modal-content {
|
||||
box-shadow: none;
|
||||
height: auto;
|
||||
@@ -373,7 +387,6 @@
|
||||
|
||||
// modal within a modal
|
||||
.wrapper-modal-window-assetupload {
|
||||
|
||||
.modal-window {
|
||||
top: 10% !important;
|
||||
left: 10% !important;
|
||||
@@ -411,7 +424,6 @@
|
||||
}
|
||||
|
||||
.xmodule_edit.xmodule_VideoDescriptor .editor-with-tabs {
|
||||
|
||||
.edit-header {
|
||||
border: 0;
|
||||
background-color: $gray-l4;
|
||||
@@ -420,6 +432,7 @@
|
||||
.component-name {
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 48%;
|
||||
@@ -448,6 +461,7 @@
|
||||
@extend %btn-secondary-gray;
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-regular;
|
||||
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
@@ -477,6 +491,7 @@
|
||||
|
||||
.modal-window-overlay {
|
||||
@extend %ui-depth3;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -513,12 +528,11 @@
|
||||
}
|
||||
|
||||
.partition-visibility {
|
||||
padding-top: $baseline;
|
||||
padding-top: $baseline;
|
||||
}
|
||||
|
||||
// UI: form fields
|
||||
.partition-group-control {
|
||||
|
||||
padding-top: ($baseline/2);
|
||||
|
||||
.field {
|
||||
@@ -526,6 +540,7 @@
|
||||
|
||||
label {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
@@ -533,7 +548,6 @@
|
||||
|
||||
// CASE: content or enrollment group has been removed
|
||||
.partition-group-visibility.was-removed {
|
||||
|
||||
.input-checkbox:checked ~ label {
|
||||
color: $error-color;
|
||||
}
|
||||
@@ -541,6 +555,7 @@
|
||||
.note {
|
||||
@extend %t-copy-sub2;
|
||||
@extend %t-regular;
|
||||
|
||||
display: block;
|
||||
color: $error-color;
|
||||
}
|
||||
@@ -549,11 +564,14 @@
|
||||
// CASE: no groups configured for visibility
|
||||
.is-not-configured {
|
||||
@extend %no-content;
|
||||
|
||||
padding: ($baseline);
|
||||
|
||||
@include text-align(left); // reset for %no-content's default styling
|
||||
|
||||
.title {
|
||||
@extend %t-title6;
|
||||
|
||||
font-weight: 600; // needed for poorly scoped .title rule in modals
|
||||
margin: 0 0 ($baseline/2) 0; // needed for poorly scoped .title rule in modals
|
||||
}
|
||||
@@ -561,14 +579,14 @@
|
||||
.copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
p {
|
||||
p {
|
||||
@extend %wipe-last-child;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-actions {
|
||||
|
||||
.actions {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
@@ -593,24 +611,32 @@
|
||||
.list-fields {
|
||||
.field-message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
color: $gray-d1;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
label {
|
||||
@extend %t-title6;
|
||||
|
||||
font-weight: font-weight(semi-bold);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
label {
|
||||
@include font-size(16);
|
||||
|
||||
font-weight: font-weight(semi-bold);
|
||||
|
||||
@include transition(color $tmg-f3 ease-in-out 0s);
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
&.is-focused {
|
||||
@@ -619,9 +645,12 @@
|
||||
}
|
||||
|
||||
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -647,7 +676,9 @@
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-l2;
|
||||
@@ -662,15 +693,17 @@
|
||||
.field-text {
|
||||
|
||||
// TODO: refactor the _forms.scss partial to allow for this area to inherit from it
|
||||
label, input, textarea {
|
||||
label,
|
||||
input,
|
||||
textarea {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: select input
|
||||
.field-select {
|
||||
|
||||
.label, .input {
|
||||
.label,
|
||||
.input {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -685,8 +718,8 @@
|
||||
|
||||
// CASE: checkbox input
|
||||
.field-checkbox {
|
||||
|
||||
.label, label {
|
||||
.label,
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -697,13 +730,14 @@
|
||||
|
||||
// UI: grading section
|
||||
.edit-settings-grading {
|
||||
|
||||
.grading-type {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-staff-lock, .edit-content-visibility, .edit-unit-access {
|
||||
.edit-staff-lock,
|
||||
.edit-content-visibility,
|
||||
.edit-unit-access {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.tip {
|
||||
@@ -713,8 +747,9 @@
|
||||
}
|
||||
|
||||
// UI: staff lock section
|
||||
.edit-staff-lock, .edit-settings-timed-examination, .edit-unit-access {
|
||||
|
||||
.edit-staff-lock,
|
||||
.edit-settings-timed-examination,
|
||||
.edit-unit-access {
|
||||
.checkbox-cosmetic .input-checkbox {
|
||||
@extend %cont-text-sr;
|
||||
|
||||
@@ -725,7 +760,6 @@
|
||||
|
||||
// CASE: checked
|
||||
&:checked {
|
||||
|
||||
~ .tip-warning {
|
||||
display: none;
|
||||
}
|
||||
@@ -740,6 +774,7 @@
|
||||
.note {
|
||||
@extend %t-copy-sub2;
|
||||
@extend %t-regular;
|
||||
|
||||
margin: 14px 0 0 21px;
|
||||
display: block;
|
||||
}
|
||||
@@ -747,7 +782,6 @@
|
||||
|
||||
// UI: timed and proctored exam section
|
||||
.edit-settings-timed-examination {
|
||||
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.checkbox-cosmetic .input-checkbox {
|
||||
@@ -760,7 +794,6 @@
|
||||
|
||||
// CASE: checked
|
||||
&:checked {
|
||||
|
||||
~ .tip-warning {
|
||||
display: none;
|
||||
}
|
||||
@@ -781,47 +814,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.edit-unit-access, .edit-staff-lock {
|
||||
.modal-section-content {
|
||||
@include font-size(16);
|
||||
|
||||
.group-select-title {
|
||||
font-weight: font-weight(semi-bold);
|
||||
font-size: inherit;
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
.user-partition-select {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.partition-group-directions {
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
&.deleted {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
font-size: inherit;
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
|
||||
.deleted-group-message {
|
||||
display: block;
|
||||
color: $red;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-unit-access, .edit-staff-lock {
|
||||
.edit-unit-access,
|
||||
.edit-staff-lock {
|
||||
.modal-section-content {
|
||||
@include font-size(16);
|
||||
|
||||
@@ -840,18 +834,60 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
&.deleted {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
font-size: inherit;
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
|
||||
.deleted-group-message {
|
||||
display: block;
|
||||
color: $red;
|
||||
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-unit-access,
|
||||
.edit-staff-lock {
|
||||
.modal-section-content {
|
||||
@include font-size(16);
|
||||
|
||||
.group-select-title {
|
||||
font-weight: font-weight(semi-bold);
|
||||
font-size: inherit;
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
.user-partition-select {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.partition-group-directions {
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.label {
|
||||
&.deleted {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
font-size: inherit;
|
||||
|
||||
@include margin-left($baseline/4);
|
||||
}
|
||||
|
||||
.deleted-group-message {
|
||||
display: block;
|
||||
color: $red;
|
||||
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
@extend %ui-depth4;
|
||||
|
||||
.modal-body {
|
||||
height: 400px;
|
||||
padding: 40px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
width: 930px;
|
||||
height: 540px;
|
||||
margin-left: -465px;
|
||||
background: $white;
|
||||
|
||||
.modal-actions {
|
||||
height: 60px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
background-color: #d1dae3;
|
||||
}
|
||||
.modal-body {
|
||||
height: 400px;
|
||||
padding: 40px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %t-title5;
|
||||
@extend %t-light;
|
||||
margin: 0 ($baseline/2) ($baseline*1.5);
|
||||
color: #646464;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.modal-actions {
|
||||
height: 60px;
|
||||
|
||||
p {
|
||||
margin: $baseline;
|
||||
}
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
.revert-button {
|
||||
@include blue-button;
|
||||
margin: 13px 6px 0 13px;
|
||||
}
|
||||
background-color: #d1dae3;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@include white-button;
|
||||
margin-top: 13px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
.bar-mod-title {
|
||||
@extend %t-title6;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
background-color: $gray-l4;
|
||||
@@ -19,12 +20,14 @@
|
||||
|
||||
.bar-mod-content {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: ($baseline*0.75) ($baseline*0.75) $baseline ($baseline*0.75);
|
||||
|
||||
.title {
|
||||
@extend %t-title8;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
color: $gray-d2;
|
||||
text-transform: uppercase;
|
||||
@@ -32,6 +35,7 @@
|
||||
|
||||
.meta {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-d2;
|
||||
}
|
||||
}
|
||||
@@ -41,6 +45,7 @@
|
||||
// --------------------
|
||||
%bar-module-blue {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: 5px solid $blue;
|
||||
|
||||
.bar-mod-title {
|
||||
@@ -52,6 +57,7 @@
|
||||
// --------------------
|
||||
%bar-module-green {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: 5px solid $green;
|
||||
|
||||
.bar-mod-title {
|
||||
@@ -63,6 +69,7 @@
|
||||
// --------------------
|
||||
%bar-module-yellow {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: 5px solid $orange-l2;
|
||||
|
||||
.bar-mod-title {
|
||||
@@ -74,6 +81,7 @@
|
||||
// --------------------
|
||||
%bar-module-red {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: 5px solid $red-l2;
|
||||
|
||||
.bar-mod-title {
|
||||
@@ -84,6 +92,7 @@
|
||||
// black bar and title bg version
|
||||
%bar-module-black {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: 5px solid $black;
|
||||
|
||||
.bar-mod-title {
|
||||
@@ -109,6 +118,7 @@
|
||||
h5 {
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline*0.75);
|
||||
color: $uxpl-green-base;
|
||||
}
|
||||
@@ -124,20 +134,24 @@
|
||||
// green button
|
||||
.add-xblock-component-button {
|
||||
@extend %t-action3;
|
||||
|
||||
@include margin-right($baseline*0.75);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: ($baseline*5);
|
||||
height: ($baseline*5);
|
||||
margin-bottom: ($baseline/2);
|
||||
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
|
||||
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
|
||||
border-radius: ($baseline/4);
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
@extend %btn-primary-green;
|
||||
|
||||
.name {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: block;
|
||||
color: $white;
|
||||
}
|
||||
@@ -150,12 +164,13 @@
|
||||
// --------------------
|
||||
.new-component-templates {
|
||||
@include clearfix();
|
||||
|
||||
display: none;
|
||||
margin: $baseline ($baseline*2);
|
||||
border-radius: 3px;
|
||||
border: 1px solid $mediumGrey;
|
||||
background-color: $white;
|
||||
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
|
||||
box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
|
||||
|
||||
.cancel-button {
|
||||
@include white-button;
|
||||
@@ -175,6 +190,7 @@
|
||||
|
||||
.support-documentation {
|
||||
float: right;
|
||||
|
||||
@include margin($baseline, 0, ($baseline/2), ($baseline/2));
|
||||
@include font-size(14);
|
||||
|
||||
@@ -208,6 +224,7 @@
|
||||
// --------------------
|
||||
.new-component-template {
|
||||
@include clearfix();
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
@@ -222,10 +239,12 @@
|
||||
.button-component {
|
||||
@include clearfix();
|
||||
@include transition(none);
|
||||
|
||||
@extend %t-demi-strong;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
padding: 7px $baseline;
|
||||
background: $white;
|
||||
color: $gray-d3;
|
||||
@@ -234,7 +253,8 @@
|
||||
|
||||
&:hover {
|
||||
@include transition(background-color $tmg-f2 linear 0s);
|
||||
background: tint($green,30%);
|
||||
|
||||
background: tint($green, 30%);
|
||||
color: $white;
|
||||
|
||||
.icon {
|
||||
@@ -247,7 +267,8 @@
|
||||
// basic and advanced problem tabs - also handled by jquery-ui tabs
|
||||
// --------------------
|
||||
.problem-type-tabs {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
|
||||
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
@@ -259,9 +280,12 @@
|
||||
}
|
||||
|
||||
li {
|
||||
@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));
|
||||
|
||||
opacity: 0.8;
|
||||
|
||||
@include float(left);
|
||||
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
|
||||
@@ -275,8 +299,9 @@
|
||||
|
||||
&.ui-state-active {
|
||||
@include active;
|
||||
border: 0px;
|
||||
opacity: 1.0;
|
||||
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// reset to remove jquery-ui float
|
||||
@@ -287,6 +312,7 @@
|
||||
|
||||
a {
|
||||
@extend %t-action3;
|
||||
|
||||
display: block;
|
||||
padding: ($baseline*0.75) ($baseline*1.25);
|
||||
text-align: center;
|
||||
@@ -315,12 +341,14 @@ $outline-indent-width: $baseline;
|
||||
|
||||
.button-new {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
padding: ($baseline/2) $baseline;
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -331,10 +359,12 @@ $outline-indent-width: $baseline;
|
||||
%outline-item-status {
|
||||
@extend %t-copy-sub2;
|
||||
@extend %t-strong;
|
||||
|
||||
color: $gray-d1;
|
||||
|
||||
.icon {
|
||||
@extend %t-icon5;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
}
|
||||
@@ -360,7 +390,6 @@ $outline-indent-width: $baseline;
|
||||
> .section-status,
|
||||
> .subsection-status,
|
||||
> .unit-status {
|
||||
|
||||
.status-message .icon {
|
||||
color: $color-staff-only;
|
||||
}
|
||||
@@ -374,7 +403,6 @@ $outline-indent-width: $baseline;
|
||||
> .section-status,
|
||||
> .subsection-status,
|
||||
> .unit-status {
|
||||
|
||||
.status-message .icon {
|
||||
color: $color-gated;
|
||||
}
|
||||
@@ -388,7 +416,6 @@ $outline-indent-width: $baseline;
|
||||
> .section-status .status-message,
|
||||
> .subsection-status .status-message,
|
||||
> .unit-status .status-message {
|
||||
|
||||
.icon {
|
||||
color: $color-warning;
|
||||
}
|
||||
@@ -437,8 +464,10 @@ $outline-indent-width: $baseline;
|
||||
// outline: sections
|
||||
.outline-section {
|
||||
@include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s);
|
||||
|
||||
@extend %ui-window;
|
||||
@extend %outline-complex-item;
|
||||
|
||||
border-left: 1px solid $color-draft;
|
||||
margin-bottom: $baseline;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
|
||||
@@ -483,6 +512,7 @@ $outline-indent-width: $baseline;
|
||||
.section-title {
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
@@ -495,6 +525,7 @@ $outline-indent-width: $baseline;
|
||||
.status-release,
|
||||
.explanatory-message {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@@ -515,12 +546,14 @@ $outline-indent-width: $baseline;
|
||||
}
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
|
||||
// status - release
|
||||
> .section-status .status-release,
|
||||
.section-status .explanatory-message{
|
||||
opacity: 1.0;
|
||||
.section-status,
|
||||
.explanatory-message {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -528,7 +561,9 @@ $outline-indent-width: $baseline;
|
||||
// outline: subsections
|
||||
.outline-subsection {
|
||||
@include transition(border-left-color $tmg-f2 linear 0s);
|
||||
|
||||
@extend %outline-complex-item;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
border: 1px solid $gray-l4;
|
||||
border-left: ($baseline/4) solid $color-draft;
|
||||
@@ -568,18 +603,15 @@ $outline-indent-width: $baseline;
|
||||
}
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: 0 1px 1px $shadow-l2;
|
||||
}
|
||||
|
||||
// STATE: is-collapsed
|
||||
&.is-collapsed {
|
||||
|
||||
}
|
||||
|
||||
// header - title
|
||||
.subsection-title {
|
||||
@extend %t-title6;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
@@ -589,39 +621,45 @@ $outline-indent-width: $baseline;
|
||||
}
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
|
||||
// status - release
|
||||
> .subsection-status .status-release {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// status - grading
|
||||
> .subsection-status .status-grading {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .subsection-status .status-timed-proctored-exam {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .subsection-status .status-hide-after-due {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// status - grading
|
||||
.status-grading, .status-timed-proctored-exam, .status-hide-after-due {
|
||||
.status-grading,
|
||||
.status-timed-proctored-exam,
|
||||
.status-hide-after-due {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.status-grading-value, .status-proctored-exam-value {
|
||||
.status-grading-value,
|
||||
.status-proctored-exam-value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-grading-date, .status-due-date {
|
||||
.status-grading-date,
|
||||
.status-due-date {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: ($baseline/4);
|
||||
@@ -631,6 +669,7 @@ $outline-indent-width: $baseline;
|
||||
// outline: units
|
||||
.outline-unit {
|
||||
@extend %outline-complex-item;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
border: 1px solid $gray-l4;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
@@ -638,6 +677,7 @@ $outline-indent-width: $baseline;
|
||||
// header - title
|
||||
.unit-title {
|
||||
@extend %t-title7;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
@@ -646,12 +686,13 @@ $outline-indent-width: $baseline;
|
||||
}
|
||||
|
||||
// STATE: hover/active
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: 0 1px 1px $shadow-l2;
|
||||
|
||||
// status - release
|
||||
.unit-status .status-release {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -663,6 +704,7 @@ $outline-indent-width: $baseline;
|
||||
// outline: sections
|
||||
.outline-section {
|
||||
@extend %outline-simple-item;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
padding: ($baseline/2);
|
||||
|
||||
@@ -670,6 +712,7 @@ $outline-indent-width: $baseline;
|
||||
.section-title {
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
@@ -681,12 +724,14 @@ $outline-indent-width: $baseline;
|
||||
// status - release
|
||||
.status-release {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
// status - grading
|
||||
.status-grading {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@@ -721,12 +766,14 @@ $outline-indent-width: $baseline;
|
||||
// outline: subsections
|
||||
.outline-subsection {
|
||||
@extend %outline-simple-item;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: ($baseline/2);
|
||||
|
||||
// header - title
|
||||
.subsection-title {
|
||||
@extend %t-title6;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
@@ -739,12 +786,14 @@ $outline-indent-width: $baseline;
|
||||
// outline: units
|
||||
.outline-unit {
|
||||
@extend %outline-simple-item;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
|
||||
// header - title
|
||||
.unit-title {
|
||||
@extend %t-title7;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,17 +104,16 @@
|
||||
|
||||
.action {
|
||||
@extend %t-action4;
|
||||
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,16 @@
|
||||
// messages
|
||||
.message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
@include border-top-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@extend %t-strong;
|
||||
|
||||
display: none;
|
||||
border-bottom: 2px solid $yellow-d2;
|
||||
margin: 0 0 $baseline 0;
|
||||
@@ -20,6 +23,7 @@
|
||||
|
||||
.feedback-symbol {
|
||||
@extend %t-icon5;
|
||||
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
@@ -45,7 +49,9 @@
|
||||
// ====================
|
||||
|
||||
// shared
|
||||
.wrapper-notification, .wrapper-alert, .prompt {
|
||||
.wrapper-notification,
|
||||
.wrapper-alert,
|
||||
.prompt {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.copy {
|
||||
@@ -53,7 +59,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-notification, .wrapper-alert, .prompt {
|
||||
.wrapper-notification,
|
||||
.wrapper-alert,
|
||||
.prompt {
|
||||
background: $gray-d3;
|
||||
|
||||
.copy {
|
||||
@@ -64,7 +72,6 @@
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
|
||||
.action-primary {
|
||||
color: $gray-d4;
|
||||
}
|
||||
@@ -73,72 +80,76 @@
|
||||
}
|
||||
|
||||
.page-banner {
|
||||
max-width: $fg-max-width;
|
||||
margin: 0 auto;
|
||||
max-width: $fg-max-width;
|
||||
margin: 0 auto;
|
||||
|
||||
.user-messages {
|
||||
padding-top: $baseline;
|
||||
.user-messages {
|
||||
padding-top: $baseline;
|
||||
|
||||
// Hack: force override the global important rule
|
||||
// that courseware links don't have an underline.
|
||||
a:hover {
|
||||
color: $link-color;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
// Hack: force override the global important rule
|
||||
// that courseware links don't have an underline.
|
||||
a:hover {
|
||||
color: $link-color;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: $baseline !important;
|
||||
padding: $baseline;
|
||||
border: 1px solid;
|
||||
|
||||
.icon-alert {
|
||||
margin-right: $baseline / 4;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: $baseline !important;
|
||||
padding: $baseline;
|
||||
border: 1px solid;
|
||||
|
||||
.icon-alert {
|
||||
margin-right: $baseline / 4;
|
||||
}
|
||||
|
||||
&.alert-info {
|
||||
color: $state-info-text;
|
||||
background-color: $state-info-bg;
|
||||
border-color: $state-info-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
color: $state-success-text;
|
||||
background-color: $state-success-bg;
|
||||
border-color: $state-success-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
color: $state-warning-text;
|
||||
background-color: $state-warning-bg;
|
||||
border-color: $state-warning-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
color: $state-danger-text;
|
||||
background-color: $state-danger-bg;
|
||||
border-color: $state-danger-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.alert-info {
|
||||
color: $state-info-text;
|
||||
background-color: $state-info-bg;
|
||||
border-color: $state-info-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
color: $state-success-text;
|
||||
background-color: $state-success-bg;
|
||||
border-color: $state-success-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
color: $state-warning-text;
|
||||
background-color: $state-warning-bg;
|
||||
border-color: $state-warning-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
color: $state-danger-text;
|
||||
background-color: $state-danger-bg;
|
||||
border-color: $state-danger-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert, .notification, .prompt {
|
||||
.alert,
|
||||
.notification,
|
||||
.prompt {
|
||||
|
||||
// types - confirm
|
||||
&.confirm {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $blue-d2;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $blue;
|
||||
|
||||
&:hover {
|
||||
@@ -149,16 +160,18 @@
|
||||
|
||||
// types - warning
|
||||
&.warning {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include orange-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $orange-d2;
|
||||
color: $gray-d4;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $orange;
|
||||
|
||||
&:hover {
|
||||
@@ -169,15 +182,17 @@
|
||||
|
||||
// types - error
|
||||
&.error {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include red-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $red-d2;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $red-l1;
|
||||
|
||||
&:hover {
|
||||
@@ -188,15 +203,17 @@
|
||||
|
||||
// types - announcement
|
||||
&.announcement {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $blue-d2;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $blue;
|
||||
|
||||
&:hover {
|
||||
@@ -207,15 +224,17 @@
|
||||
|
||||
// types - confirmation
|
||||
&.confirmation {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include green-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $green-d2;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $green;
|
||||
|
||||
&:hover {
|
||||
@@ -226,15 +245,17 @@
|
||||
|
||||
// types - step required
|
||||
&.step-required {
|
||||
|
||||
.nav-actions .action-primary {
|
||||
@include pink-button();
|
||||
|
||||
@extend %t-action4;
|
||||
|
||||
border-color: $pink-d2;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %btn-no-style;
|
||||
|
||||
color: $pink;
|
||||
|
||||
&:hover {
|
||||
@@ -247,7 +268,9 @@
|
||||
// prompts
|
||||
.wrapper-prompt {
|
||||
@extend %ui-depth5;
|
||||
|
||||
@include transition(all $tmg-f3 ease-in-out 0s);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: $black-t1;
|
||||
@@ -255,7 +278,7 @@
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
@@ -270,6 +293,7 @@
|
||||
vertical-align: middle;
|
||||
width: $baseline*17.5;
|
||||
border: 4px solid $black;
|
||||
|
||||
@include text-align(left);
|
||||
|
||||
.copy {
|
||||
@@ -285,6 +309,7 @@
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
|
||||
@include margin-right($baseline*0.75);
|
||||
|
||||
&:last-child {
|
||||
@@ -305,7 +330,6 @@
|
||||
|
||||
// types of prompts - error
|
||||
.prompt.error {
|
||||
|
||||
.feedback-symbol {
|
||||
color: $red-l1;
|
||||
}
|
||||
@@ -317,7 +341,6 @@
|
||||
|
||||
// types of prompts - confirmation
|
||||
.prompt.confirmation {
|
||||
|
||||
.feedback-symbol {
|
||||
color: $green;
|
||||
}
|
||||
@@ -329,7 +352,6 @@
|
||||
|
||||
// types of prompts - error
|
||||
.prompt.warning {
|
||||
|
||||
.feedback-symbol {
|
||||
color: $orange;
|
||||
}
|
||||
@@ -345,7 +367,9 @@
|
||||
// notifications
|
||||
.wrapper-notification {
|
||||
@extend %ui-depth5;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -383,6 +407,7 @@
|
||||
// shorter/status notifications
|
||||
&.wrapper-notification-status {
|
||||
@include border-top-radius(3px);
|
||||
|
||||
right: ($baseline);
|
||||
width: auto;
|
||||
border: 4px solid $black;
|
||||
@@ -392,11 +417,12 @@
|
||||
.notification {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: none;
|
||||
|
||||
.feedback-symbol, .copy {
|
||||
.feedback-symbol,
|
||||
.copy {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -408,16 +434,13 @@
|
||||
margin-right: ($baseline/4);
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// help notifications
|
||||
&.wrapper-notification-help {
|
||||
@include border-top-radius(3px);
|
||||
|
||||
width: ($baseline*14);
|
||||
right: ($baseline);
|
||||
border: 4px solid $black;
|
||||
@@ -427,6 +450,7 @@
|
||||
.notification {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: none;
|
||||
@@ -450,6 +474,7 @@
|
||||
.notification {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 auto;
|
||||
width: flex-grid(12);
|
||||
max-width: $fg-max-width;
|
||||
@@ -458,7 +483,8 @@
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
.feedback-symbol, .copy {
|
||||
.feedback-symbol,
|
||||
.copy {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -466,7 +492,9 @@
|
||||
|
||||
.feedback-symbol {
|
||||
@include transition (color $tmg-f1 ease-in-out 0s);
|
||||
|
||||
@extend %t-icon3;
|
||||
|
||||
width: flex-grid(1, 12);
|
||||
height: ($baseline*1.25);
|
||||
margin-top: ($baseline/4);
|
||||
@@ -477,11 +505,13 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
width: flex-grid(10, 12);
|
||||
color: $gray-l2;
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
|
||||
margin-bottom: 0;
|
||||
color: $white;
|
||||
}
|
||||
@@ -489,25 +519,28 @@
|
||||
|
||||
// with actions
|
||||
&.has-actions {
|
||||
|
||||
.feedback-symbol {
|
||||
width: flex-grid(1, 12);
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: flex-grid(7, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
@include float(left);
|
||||
|
||||
margin-top: ($baseline/4);
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
@@ -518,18 +551,18 @@
|
||||
|
||||
.action-primary {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-strong;
|
||||
|
||||
border-color: $blue-d2;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
|
||||
@extend %t-action4;
|
||||
}
|
||||
}
|
||||
|
||||
&.confirmation {
|
||||
|
||||
.copy {
|
||||
margin-top: ($baseline/5);
|
||||
}
|
||||
@@ -542,8 +575,10 @@
|
||||
|
||||
.feedback-symbol {
|
||||
@include animation(rotateCW $tmg-s3 linear infinite);
|
||||
|
||||
width: 25px;
|
||||
margin: -4px 10px 0 0;
|
||||
|
||||
@include transform-origin(52% 60%);
|
||||
}
|
||||
|
||||
@@ -566,7 +601,9 @@
|
||||
// alerts
|
||||
.wrapper-alert {
|
||||
@extend %ui-depth2;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -628,6 +665,7 @@
|
||||
.alert {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 auto;
|
||||
width: flex-grid(12);
|
||||
max-width: $fg-max-width;
|
||||
@@ -638,13 +676,16 @@
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
.feedback-symbol, .copy {
|
||||
.feedback-symbol,
|
||||
.copy {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.feedback-symbol {
|
||||
@include transition (color $tmg-f1 ease-in-out 0s);
|
||||
|
||||
@extend %t-icon3;
|
||||
|
||||
width: flex-grid(1, 12);
|
||||
margin: ($baseline/4) flex-gutter() 0 0;
|
||||
text-align: right;
|
||||
@@ -657,6 +698,7 @@
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
|
||||
margin-bottom: 0;
|
||||
color: $white;
|
||||
}
|
||||
@@ -664,46 +706,50 @@
|
||||
|
||||
// with actions
|
||||
&.has-actions {
|
||||
|
||||
.feedback-symbol {
|
||||
width: flex-grid(1, 12);
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: flex-grid(7, 12);
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
.copy {
|
||||
width: flex-grid(7, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
.nav-actions {
|
||||
width: flex-grid(4, 12);
|
||||
@include float(left);
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include margin-right($baseline/2);
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
.action-primary {
|
||||
@extend %t-action4;
|
||||
@extend %t-strong;
|
||||
}
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend %t-action4;
|
||||
.action-primary {
|
||||
@extend %t-action4;
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend %t-action4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// with cancel
|
||||
.action-alert-close {
|
||||
@include border-bottom-radius(($baseline/5));
|
||||
|
||||
position: absolute;
|
||||
top: -($baseline/10);
|
||||
right: $baseline;
|
||||
@@ -717,6 +763,7 @@
|
||||
|
||||
.icon {
|
||||
@extend %t-icon6;
|
||||
|
||||
color: $white;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
@@ -730,19 +777,21 @@
|
||||
|
||||
// with dismiss (to sunset action-alert-clos)
|
||||
.action-dismiss {
|
||||
|
||||
.button {
|
||||
@extend %btn-secondary-white;
|
||||
padding:($baseline/4) ($baseline/2);
|
||||
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
}
|
||||
|
||||
.icon,.button-copy {
|
||||
.icon,
|
||||
.button-copy {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
@@ -761,15 +810,10 @@
|
||||
.wrapper-prompt {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
.prompt {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// prompt showing
|
||||
&.prompt-is-shown {
|
||||
|
||||
.wrapper-prompt.is-shown {
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
@@ -782,18 +826,13 @@
|
||||
|
||||
// prompt hiding
|
||||
&.prompt-is-hiding {
|
||||
|
||||
.wrapper-prompt {
|
||||
|
||||
.prompt {
|
||||
@include animation(bounceOut $tmg-f1 ease-in-out 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// alert showing/hiding done by jQuery
|
||||
.wrapper-alert { }
|
||||
|
||||
// notification showing/hiding
|
||||
.wrapper-notification {
|
||||
bottom: -($ui-notification-height);
|
||||
@@ -815,9 +854,9 @@
|
||||
|
||||
// block-level messages and validation
|
||||
.wrapper-message {
|
||||
|
||||
.message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background-color: $gray-d2;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
color: $white;
|
||||
@@ -828,6 +867,7 @@
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d2;
|
||||
}
|
||||
@@ -879,16 +919,20 @@
|
||||
|
||||
// temporary
|
||||
body.uxdesign.alerts {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
@extend %ui-window;
|
||||
|
||||
width: flex-grid(12, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
padding: $baseline ($baseline*1.5);
|
||||
|
||||
> section {
|
||||
@@ -900,9 +944,9 @@ body.uxdesign.alerts {
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
@include clearfix();
|
||||
|
||||
width: flex-grid(12, 12);
|
||||
margin-bottom: ($baseline/4);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
@@ -916,7 +960,9 @@ body.uxdesign.alerts {
|
||||
|
||||
a {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(5, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
}
|
||||
@@ -928,21 +974,21 @@ body.uxdesign.alerts {
|
||||
|
||||
// artifact styles
|
||||
.main-wrapper {
|
||||
|
||||
.alert {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
padding: 15px 20px;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
border-radius: 3px;
|
||||
border: 1px solid #edbd3c;
|
||||
border-radius: 3px;
|
||||
background: #fbf6e1;
|
||||
// background: #edbd3c;
|
||||
@include clearfix();
|
||||
|
||||
.alert-message {
|
||||
@include float(left);
|
||||
margin: 4px 0 0 0;
|
||||
|
||||
margin: 4px 0 0;
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
@@ -980,6 +1026,7 @@ body.error {
|
||||
h1 {
|
||||
@extend %t-title1;
|
||||
@extend %t-light;
|
||||
|
||||
float: none;
|
||||
margin: 0;
|
||||
color: $gray-d3;
|
||||
@@ -987,12 +1034,15 @@ body.error {
|
||||
|
||||
.description {
|
||||
@extend %t-copy-lead2;
|
||||
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
padding: 14px 40px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.wrapper-assets {
|
||||
|
||||
.assets-library {
|
||||
@include clearfix();
|
||||
|
||||
.assets-title {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-top: ($baseline*2);
|
||||
margin-bottom: ($baseline*2);
|
||||
}
|
||||
@@ -15,6 +15,7 @@
|
||||
|
||||
.meta {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: flex-grid(9, 12);
|
||||
@@ -36,8 +37,10 @@
|
||||
font-size: 80%;
|
||||
word-wrap: break-word;
|
||||
|
||||
th, .video-head-col {
|
||||
th,
|
||||
.video-head-col {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
background-color: $gray-l5;
|
||||
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
|
||||
vertical-align: middle;
|
||||
@@ -51,6 +54,7 @@
|
||||
|
||||
.current-sort {
|
||||
@extend %t-strong;
|
||||
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
}
|
||||
|
||||
@@ -60,19 +64,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
td, .video-col {
|
||||
td,
|
||||
.video-col {
|
||||
padding: ($baseline/2);
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody, .js-table-body {
|
||||
tbody,
|
||||
.js-table-body {
|
||||
box-shadow: 0 2px 2px $shadow-l1;
|
||||
border: 1px solid $gray-l4;
|
||||
background: $white;
|
||||
|
||||
tr, .video-row {
|
||||
tr,
|
||||
.video-row {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
border-top: 1px solid $gray-l4;
|
||||
|
||||
.name-col {
|
||||
@@ -116,12 +124,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-col {
|
||||
padding: ($baseline/2) $baseline;
|
||||
.thumb-col {
|
||||
padding: ($baseline/2) $baseline;
|
||||
|
||||
.thumb {
|
||||
width: 100px;
|
||||
}
|
||||
.thumb {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -129,9 +137,9 @@
|
||||
}
|
||||
|
||||
.name-col {
|
||||
|
||||
.title {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
@@ -140,18 +148,23 @@
|
||||
|
||||
.date-col {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
.embed-col {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
padding-left: ($baseline*0.75);
|
||||
color: $gray-d1;
|
||||
|
||||
.embeddable-xml-input {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
// JQUI calendar
|
||||
.ui-datepicker {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
border-color: $darkGrey;
|
||||
border-radius: 2px;
|
||||
background: $white;
|
||||
@@ -35,6 +36,7 @@
|
||||
.ui-state-default {
|
||||
border-color: $mediumGrey;
|
||||
color: $blue;
|
||||
|
||||
@include transition(none);
|
||||
|
||||
&.ui-state-hover {
|
||||
@@ -79,11 +81,13 @@
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-left,
|
||||
.ui-corner-top,
|
||||
.ui-corner-br,
|
||||
.ui-corner-right {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -91,12 +95,13 @@
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
@extend %t-copy-base;
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border:none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@@ -109,20 +114,20 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
float: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui-tabs-nav {
|
||||
|
||||
li {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %t-regular;
|
||||
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -133,27 +138,24 @@
|
||||
|
||||
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
|
||||
.problem-type-tabs {
|
||||
border:none;
|
||||
border: none;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
@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));
|
||||
//background-color: $lightBluishGrey;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
|
||||
|
||||
li:first-child {
|
||||
margin-left: $baseline;
|
||||
}
|
||||
|
||||
li {
|
||||
opacity: 0.8;
|
||||
|
||||
&:ui-state-active {
|
||||
@extend %t-regular;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
opacity: 1.0;
|
||||
}
|
||||
a:focus {
|
||||
outline: none;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -165,7 +167,9 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
|
||||
@include linear-gradient($gray-l5, $white);
|
||||
|
||||
border-right: 1px solid $gray-l2;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
border-left: 1px solid $gray-l2;
|
||||
@@ -173,7 +177,7 @@
|
||||
box-shadow: inset 0 1px 2px $shadow-l1;
|
||||
color: $color-copy-emphasized;
|
||||
|
||||
li.ui-menu-item{
|
||||
li.ui-menu-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -181,10 +185,9 @@
|
||||
color: $color-copy-emphasized;
|
||||
}
|
||||
|
||||
a.ui-state-focus{
|
||||
a.ui-state-focus {
|
||||
border: none;
|
||||
background-color: $blue;
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,16 +24,18 @@
|
||||
border: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/5);
|
||||
background: $white;
|
||||
box-shadow: 0px 1px 1px $shadow-l1;
|
||||
box-shadow: 0 1px 1px $shadow-l1;
|
||||
|
||||
// STATE: hover/focus
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px $shadow;
|
||||
}
|
||||
|
||||
// UI: xblock header primary for main title and xblock actions
|
||||
.xblock-header-primary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/5) ($baseline/5) 0 0;
|
||||
min-height: ($baseline*2.5);
|
||||
@@ -44,16 +46,19 @@
|
||||
|
||||
.header-details {
|
||||
@extend %cont-truncated;
|
||||
|
||||
width: 50%;
|
||||
vertical-align: middle;
|
||||
|
||||
.xblock-display-name {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
font-weight: font-weight(semi-bold);
|
||||
}
|
||||
|
||||
.xblock-group-visibility-label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
white-space: normal;
|
||||
font-weight: font-weight(semi-bold);
|
||||
color: $gray;
|
||||
@@ -62,6 +67,7 @@
|
||||
|
||||
.header-actions {
|
||||
width: 49%;
|
||||
|
||||
@include text-align(right);
|
||||
}
|
||||
}
|
||||
@@ -92,6 +98,7 @@
|
||||
|
||||
.action-button {
|
||||
@include transition(all $tmg-f3 linear 0s);
|
||||
|
||||
display: block;
|
||||
width: auto;
|
||||
height: ($baseline*1.5);
|
||||
@@ -130,7 +137,9 @@
|
||||
.xmodule_display.xmodule_HtmlModule .xblock-license,
|
||||
.xmodule_VideoModule .xblock-license {
|
||||
@include text-align(right);
|
||||
|
||||
@extend %t-title7;
|
||||
|
||||
display: block;
|
||||
width: auto;
|
||||
border-top: 1px solid $gray-l3;
|
||||
@@ -170,8 +179,10 @@
|
||||
.meta-wrap {
|
||||
margin: $baseline ($baseline/2);
|
||||
}
|
||||
|
||||
.meta {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: flex-grid(9, 12);
|
||||
@@ -201,6 +212,7 @@
|
||||
// internal headings for problems and video components
|
||||
h2 {
|
||||
@extend %t-title5;
|
||||
|
||||
margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
|
||||
color: $gray;
|
||||
letter-spacing: 1px;
|
||||
@@ -220,13 +232,13 @@
|
||||
// CASE: xblock is collapsible
|
||||
&.is-collapsible,
|
||||
&.xblock-type-container {
|
||||
|
||||
.icon {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.expand-collapse {
|
||||
@extend %expand-collapse;
|
||||
|
||||
margin: 0 ($baseline/4);
|
||||
height: ($baseline*1.25);
|
||||
width: $baseline;
|
||||
@@ -237,7 +249,6 @@
|
||||
}
|
||||
|
||||
.action-view {
|
||||
|
||||
.action-button {
|
||||
transition: none;
|
||||
}
|
||||
@@ -254,9 +265,9 @@
|
||||
// ====================
|
||||
// xblock message area, for general information as well as validation
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background-color: $gray-d2;
|
||||
padding: ($baseline*0.75);
|
||||
color: $white;
|
||||
@@ -267,6 +278,7 @@
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background-color: $gray-l5;
|
||||
color: $gray-d2;
|
||||
}
|
||||
@@ -325,7 +337,6 @@
|
||||
}
|
||||
|
||||
.xblock-message {
|
||||
|
||||
&.validation {
|
||||
padding-top: ($baseline*0.75);
|
||||
}
|
||||
@@ -348,14 +359,12 @@
|
||||
}
|
||||
|
||||
.no-container-content {
|
||||
|
||||
.xblock-message-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
color: $gray-d2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// +Case: Nesting Level
|
||||
@@ -363,6 +372,7 @@
|
||||
// element wrapper level
|
||||
&.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
|
||||
border: 1px solid $gray-l3;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
@@ -377,6 +387,7 @@
|
||||
|
||||
.xblock-header-primary {
|
||||
@include ui-flexbox();
|
||||
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
background: none;
|
||||
@@ -398,6 +409,7 @@
|
||||
// ====================
|
||||
&.level-element {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@@ -410,10 +422,12 @@
|
||||
|
||||
.xblock-header-primary {
|
||||
@extend %t-light;
|
||||
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
background-color: $gray-l6;
|
||||
|
||||
&.is-collapsed {
|
||||
border-bottom: 0;
|
||||
border-radius: 3px;
|
||||
@@ -428,7 +442,6 @@
|
||||
|
||||
// STATE: container/component with children - abbreviated preview
|
||||
&.xblock-type-container {
|
||||
|
||||
.xblock-header-primary {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
@@ -441,11 +454,10 @@
|
||||
}
|
||||
|
||||
.wrapper-xblock-message {
|
||||
|
||||
.xblock-message {
|
||||
|
||||
&.information {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
padding: 0 $baseline ($baseline*0.75) $baseline;
|
||||
color: $gray-l1;
|
||||
}
|
||||
@@ -457,9 +469,9 @@
|
||||
// ====================
|
||||
// edited experiment groups: active and inactive
|
||||
.wrapper-groups {
|
||||
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
|
||||
margin-left: ($baseline/2);
|
||||
color: $gray-l1;
|
||||
}
|
||||
@@ -480,7 +492,8 @@
|
||||
|
||||
.wrapper-xblock.level-nesting {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
opacity: .7;
|
||||
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@@ -522,7 +535,9 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/2);
|
||||
width: 49%;
|
||||
@@ -533,7 +548,9 @@
|
||||
@extend %ui-btn-non;
|
||||
@extend %t-action4;
|
||||
@extend %t-strong;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/2);
|
||||
width: 49%;
|
||||
@@ -555,6 +572,7 @@
|
||||
//settings-list
|
||||
.list-input.settings-list {
|
||||
@extend %cont-no-list;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
|
||||
@@ -568,7 +586,7 @@
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
border: 2px solid $gray-l2;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
//component-setting-entry
|
||||
@@ -586,12 +604,13 @@
|
||||
|
||||
|
||||
// STATE: hover & focus
|
||||
&:hover, &:focus {
|
||||
opacity: 1.0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-set {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
background-color: $white;
|
||||
|
||||
.setting-input {
|
||||
@@ -600,18 +619,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-comp-setting, .wrapper-comp-setting-text {
|
||||
.wrapper-comp-setting,
|
||||
.wrapper-comp-setting-text {
|
||||
min-width: 300px;
|
||||
top: 0;
|
||||
vertical-align: top;
|
||||
margin-bottom:5px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-strong;
|
||||
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -625,10 +647,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
input, select, input[type="number"] {
|
||||
input,
|
||||
select,
|
||||
input[type="number"] {
|
||||
@include placeholder($gray-l4);
|
||||
@include size(100%,100%);
|
||||
@include size(100%, 100%);
|
||||
|
||||
@extend %t-copy-base;
|
||||
|
||||
width: 45%;
|
||||
min-width: 100px;
|
||||
padding: ($baseline/2);
|
||||
@@ -640,7 +666,7 @@
|
||||
//Allows users to copy full value of disabled inputs.
|
||||
input.is-disabled {
|
||||
text-overflow: clip;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
@@ -652,15 +678,16 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #FFFCF1;
|
||||
background-color: #fffcf1;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px $shadow;
|
||||
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
@@ -671,6 +698,7 @@
|
||||
|
||||
.action.setting-clear {
|
||||
@extend %t-action4;
|
||||
|
||||
color: $gray;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@@ -685,7 +713,9 @@
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 1px 1px $shadow;
|
||||
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
background-color: $blue-s3;
|
||||
border: 1px solid $blue-s3;
|
||||
color: $white;
|
||||
@@ -698,8 +728,8 @@
|
||||
|
||||
.setting-help {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline-block;
|
||||
font-color: $gray-l6;
|
||||
min-width: ($baseline*10);
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -713,7 +743,6 @@
|
||||
|
||||
// TYPE: enumerated lists of metadata sets
|
||||
.metadata-list-enum {
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
@@ -726,7 +755,8 @@
|
||||
|
||||
// inputs and labels
|
||||
.wrapper-list-settings {
|
||||
@include size(45%,100%);
|
||||
@include size(45%, 100%);
|
||||
|
||||
display: inline-block;
|
||||
min-width: ($baseline*5);
|
||||
|
||||
@@ -756,6 +786,7 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -767,7 +798,9 @@
|
||||
|
||||
.remove-setting {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: $blue-l3;
|
||||
@@ -786,8 +819,8 @@
|
||||
|
||||
// label
|
||||
.setting-label {
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline*0.75);
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline*0.75);
|
||||
}
|
||||
|
||||
// inputs and labels
|
||||
@@ -827,6 +860,7 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
width: 88%;
|
||||
padding: ($baseline/2);
|
||||
@@ -838,7 +872,9 @@
|
||||
|
||||
.remove-setting {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: $blue-l3;
|
||||
@@ -879,16 +915,14 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
|
||||
|
||||
.wrapper-xblock {
|
||||
|
||||
.discussion-preview {
|
||||
color: $gray-l1;
|
||||
font-style: italic;
|
||||
}
|
||||
.discussion-preview {
|
||||
color: $gray-l1;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: xblock license settings
|
||||
.wrapper-license {
|
||||
|
||||
.license-types {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@@ -900,7 +934,9 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
|
||||
.action.license-button {
|
||||
@include grey-button;
|
||||
|
||||
@extend %t-action2;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 220px;
|
||||
@@ -923,6 +959,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
}
|
||||
|
||||
.license-options {
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
@@ -945,19 +982,22 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
min-width: auto;
|
||||
height: auto;
|
||||
border: 0;
|
||||
margin: ($baseline*0.15) 15px 0px;
|
||||
margin: ($baseline*0.15) 15px 0;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
@extend %t-action4;
|
||||
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
vertical-align: top;
|
||||
@@ -966,6 +1006,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-preview a {
|
||||
color: $gray;
|
||||
|
||||
@@ -973,6 +1014,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
|
||||
color: $ui-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.list-input.settings-list ul.license-options li {
|
||||
// to make sure the padding is correctly overridden
|
||||
padding: ($baseline / 2) 0 ($baseline * 0.4);
|
||||
|
||||
@@ -54,6 +54,7 @@
|
||||
.collapse-setting {
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -93,7 +94,7 @@
|
||||
|
||||
&.is-disabled,
|
||||
[disabled="disabled"] {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,6 +143,7 @@
|
||||
|
||||
.transcripts-message-status {
|
||||
@extend %t-strong;
|
||||
|
||||
color: $green;
|
||||
|
||||
&.status-error {
|
||||
@@ -151,12 +153,14 @@
|
||||
.icon,
|
||||
[class*=" fa-"] {
|
||||
@extend %t-icon4;
|
||||
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.transcripts-error-message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background: $red;
|
||||
color: $white;
|
||||
padding: ($baseline/3);
|
||||
@@ -176,6 +180,7 @@
|
||||
.action {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action3;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -193,6 +198,7 @@
|
||||
|
||||
.progress-bar {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
display: block;
|
||||
height: 30px;
|
||||
margin: ($baseline/2) 0;
|
||||
@@ -233,7 +239,7 @@
|
||||
// label
|
||||
.setting-label {
|
||||
vertical-align: top;
|
||||
margin-top: ($baseline*.25);
|
||||
margin-top: ($baseline*0.25);
|
||||
}
|
||||
|
||||
// inputs and labels
|
||||
@@ -256,6 +262,7 @@
|
||||
|
||||
.list-settings-buttons {
|
||||
@extend %cont-truncated;
|
||||
|
||||
padding: ($baseline/2) 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
}
|
||||
@@ -277,13 +284,14 @@
|
||||
|
||||
.setting-clear.action {
|
||||
vertical-align: top;
|
||||
margin: ($baseline*.25) ($baseline*.5) 0;
|
||||
margin: ($baseline*0.25) ($baseline*0.5) 0;
|
||||
}
|
||||
|
||||
.create-setting {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
padding: ($baseline/2);
|
||||
|
||||
@@ -296,6 +304,7 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/2);
|
||||
width: 49%;
|
||||
@@ -306,6 +315,7 @@
|
||||
@extend %ui-btn-non;
|
||||
@extend %t-action4;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/2);
|
||||
width: 49%;
|
||||
@@ -319,7 +329,9 @@
|
||||
|
||||
.remove-setting {
|
||||
@include transition(color .25s ease-in-out);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: $blue-l3;
|
||||
|
||||
@@ -47,7 +47,7 @@ $uxpl-light-blue-base: rgb(242, 248, 251) !default
|
||||
|
||||
$uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant
|
||||
$uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant
|
||||
$uxpl-green-dark-hover-active: rgb(0,88,0) !default;
|
||||
$uxpl-green-dark-hover-active: rgb(0, 88,0) !default;
|
||||
|
||||
$uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant
|
||||
$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant
|
||||
@@ -65,24 +65,24 @@ $black-t2: rgba($black, 0.5) !default;
|
||||
$black-t3: rgba($black, 0.75) !default;
|
||||
$black-t4: rgba($black, 0.85) !default;
|
||||
|
||||
$white: rgb(255,255,255) !default;
|
||||
$white: rgb(255, 255, 255) !default;
|
||||
$white-t0: rgba($white, 0.125) !default;
|
||||
$white-t1: rgba($white, 0.25) !default;
|
||||
$white-t2: rgba($white, 0.5) !default;
|
||||
$white-t3: rgba($white, 0.75) !default;
|
||||
|
||||
$gray: rgb(127,127,127) !default;
|
||||
$gray-l1: tint($gray,20%) !default;
|
||||
$gray-l2: tint($gray,40%) !default;
|
||||
$gray-l3: tint($gray,60%) !default;
|
||||
$gray-l4: tint($gray,80%) !default;
|
||||
$gray-l5: tint($gray,90%) !default;
|
||||
$gray-l6: tint($gray,95%) !default;
|
||||
$gray-l7: tint($gray,99%) !default;
|
||||
$gray-d1: shade($gray,20%) !default;
|
||||
$gray-d2: shade($gray,40%) !default;
|
||||
$gray-d3: shade($gray,60%) !default;
|
||||
$gray-d4: shade($gray,80%) !default;
|
||||
$gray: rgb(127, 127, 127) !default;
|
||||
$gray-l1: tint($gray, 20%) !default;
|
||||
$gray-l2: tint($gray, 40%) !default;
|
||||
$gray-l3: tint($gray, 60%) !default;
|
||||
$gray-l4: tint($gray, 80%) !default;
|
||||
$gray-l5: tint($gray, 90%) !default;
|
||||
$gray-l6: tint($gray, 95%) !default;
|
||||
$gray-l7: tint($gray, 99%) !default;
|
||||
$gray-d1: shade($gray, 20%) !default;
|
||||
$gray-d2: shade($gray, 40%) !default;
|
||||
$gray-d3: shade($gray, 60%) !default;
|
||||
$gray-d4: shade($gray, 80%) !default;
|
||||
|
||||
// These define button styles similar to LMS
|
||||
// The goal here is consistency (until we can overhaul all of this...)
|
||||
@@ -96,110 +96,110 @@ $btn-lms-gradient-hover: #d1c9c9 !default;
|
||||
$btn-lms-shadow-active: #cac2c2 !default;
|
||||
|
||||
$blue: rgb(0, 159, 230) !default;
|
||||
$blue-l1: tint($blue,20%) !default;
|
||||
$blue-l2: tint($blue,40%) !default;
|
||||
$blue-l3: tint($blue,60%) !default;
|
||||
$blue-l4: tint($blue,80%) !default;
|
||||
$blue-l5: tint($blue,90%) !default;
|
||||
$blue-d1: shade($blue,20%) !default;
|
||||
$blue-d2: shade($blue,40%) !default;
|
||||
$blue-d3: shade($blue,60%) !default;
|
||||
$blue-d4: shade($blue,80%) !default;
|
||||
$blue-s1: saturate($blue,15%) !default;
|
||||
$blue-s2: saturate($blue,30%) !default;
|
||||
$blue-s3: saturate($blue,45%) !default;
|
||||
$blue-u1: desaturate($blue,15%) !default;
|
||||
$blue-u2: desaturate($blue,30%) !default;
|
||||
$blue-u3: desaturate($blue,45%) !default;
|
||||
$blue-l1: tint($blue, 20%) !default;
|
||||
$blue-l2: tint($blue, 40%) !default;
|
||||
$blue-l3: tint($blue, 60%) !default;
|
||||
$blue-l4: tint($blue, 80%) !default;
|
||||
$blue-l5: tint($blue, 90%) !default;
|
||||
$blue-d1: shade($blue, 20%) !default;
|
||||
$blue-d2: shade($blue, 40%) !default;
|
||||
$blue-d3: shade($blue, 60%) !default;
|
||||
$blue-d4: shade($blue, 80%) !default;
|
||||
$blue-s1: saturate($blue, 15%) !default;
|
||||
$blue-s2: saturate($blue, 30%) !default;
|
||||
$blue-s3: saturate($blue, 45%) !default;
|
||||
$blue-u1: desaturate($blue, 15%) !default;
|
||||
$blue-u2: desaturate($blue, 30%) !default;
|
||||
$blue-u3: desaturate($blue, 45%) !default;
|
||||
$blue-t0: rgba($blue, 0.125) !default;
|
||||
$blue-t1: rgba($blue, 0.25) !default;
|
||||
$blue-t2: rgba($blue, 0.50) !default;
|
||||
$blue-t2: rgba($blue, 0.5) !default;
|
||||
$blue-t3: rgba($blue, 0.75) !default;
|
||||
|
||||
$pink: rgb(183, 37, 103) !default; // #b72567;
|
||||
$pink-l1: tint($pink,20%) !default;
|
||||
$pink-l2: tint($pink,40%) !default;
|
||||
$pink-l3: tint($pink,60%) !default;
|
||||
$pink-l4: tint($pink,80%) !default;
|
||||
$pink-l5: tint($pink,90%) !default;
|
||||
$pink-d1: shade($pink,20%) !default;
|
||||
$pink-d2: shade($pink,40%) !default;
|
||||
$pink-d3: shade($pink,60%) !default;
|
||||
$pink-d4: shade($pink,80%) !default;
|
||||
$pink-s1: saturate($pink,15%) !default;
|
||||
$pink-s2: saturate($pink,30%) !default;
|
||||
$pink-s3: saturate($pink,45%) !default;
|
||||
$pink-u1: desaturate($pink,15%) !default;
|
||||
$pink-u2: desaturate($pink,30%) !default;
|
||||
$pink-u3: desaturate($pink,45%) !default;
|
||||
$pink-l1: tint($pink, 20%) !default;
|
||||
$pink-l2: tint($pink, 40%) !default;
|
||||
$pink-l3: tint($pink, 60%) !default;
|
||||
$pink-l4: tint($pink, 80%) !default;
|
||||
$pink-l5: tint($pink, 90%) !default;
|
||||
$pink-d1: shade($pink, 20%) !default;
|
||||
$pink-d2: shade($pink, 40%) !default;
|
||||
$pink-d3: shade($pink, 60%) !default;
|
||||
$pink-d4: shade($pink, 80%) !default;
|
||||
$pink-s1: saturate($pink, 15%) !default;
|
||||
$pink-s2: saturate($pink, 30%) !default;
|
||||
$pink-s3: saturate($pink, 45%) !default;
|
||||
$pink-u1: desaturate($pink, 15%) !default;
|
||||
$pink-u2: desaturate($pink, 30%) !default;
|
||||
$pink-u3: desaturate($pink, 45%) !default;
|
||||
|
||||
$red: rgb(178, 6, 16) !default; // #b20610;
|
||||
$red-l1: tint($red,20%) !default;
|
||||
$red-l2: tint($red,40%) !default;
|
||||
$red-l3: tint($red,60%) !default;
|
||||
$red-l4: tint($red,80%) !default;
|
||||
$red-l5: tint($red,90%) !default;
|
||||
$red-d1: shade($red,20%) !default;
|
||||
$red-d2: shade($red,40%) !default;
|
||||
$red-d3: shade($red,60%) !default;
|
||||
$red-d4: shade($red,80%) !default;
|
||||
$red-s1: saturate($red,15%) !default;
|
||||
$red-s2: saturate($red,30%) !default;
|
||||
$red-s3: saturate($red,45%) !default;
|
||||
$red-u1: desaturate($red,15%) !default;
|
||||
$red-u2: desaturate($red,30%) !default;
|
||||
$red-u3: desaturate($red,45%) !default;
|
||||
$red-l1: tint($red, 20%) !default;
|
||||
$red-l2: tint($red, 40%) !default;
|
||||
$red-l3: tint($red, 60%) !default;
|
||||
$red-l4: tint($red, 80%) !default;
|
||||
$red-l5: tint($red, 90%) !default;
|
||||
$red-d1: shade($red, 20%) !default;
|
||||
$red-d2: shade($red, 40%) !default;
|
||||
$red-d3: shade($red, 60%) !default;
|
||||
$red-d4: shade($red, 80%) !default;
|
||||
$red-s1: saturate($red, 15%) !default;
|
||||
$red-s2: saturate($red, 30%) !default;
|
||||
$red-s3: saturate($red, 45%) !default;
|
||||
$red-u1: desaturate($red, 15%) !default;
|
||||
$red-u2: desaturate($red, 30%) !default;
|
||||
$red-u3: desaturate($red, 45%) !default;
|
||||
|
||||
$green: rgb(37, 184, 90) !default; // #25b85a
|
||||
$green-l1: tint($green,20%) !default;
|
||||
$green-l2: tint($green,40%) !default;
|
||||
$green-l3: tint($green,60%) !default;
|
||||
$green-l4: tint($green,80%) !default;
|
||||
$green-l5: tint($green,90%) !default;
|
||||
$green-d1: shade($green,20%) !default;
|
||||
$green-d2: shade($green,40%) !default;
|
||||
$green-d3: shade($green,60%) !default;
|
||||
$green-d4: shade($green,80%) !default;
|
||||
$green-s1: saturate($green,15%) !default;
|
||||
$green-s2: saturate($green,30%) !default;
|
||||
$green-s3: saturate($green,45%) !default;
|
||||
$green-u1: desaturate($green,15%) !default;
|
||||
$green-u2: desaturate($green,30%) !default;
|
||||
$green-u3: desaturate($green,45%) !default;
|
||||
$green-l1: tint($green, 20%) !default;
|
||||
$green-l2: tint($green, 40%) !default;
|
||||
$green-l3: tint($green, 60%) !default;
|
||||
$green-l4: tint($green, 80%) !default;
|
||||
$green-l5: tint($green, 90%) !default;
|
||||
$green-d1: shade($green, 20%) !default;
|
||||
$green-d2: shade($green, 40%) !default;
|
||||
$green-d3: shade($green, 60%) !default;
|
||||
$green-d4: shade($green, 80%) !default;
|
||||
$green-s1: saturate($green, 15%) !default;
|
||||
$green-s2: saturate($green, 30%) !default;
|
||||
$green-s3: saturate($green, 45%) !default;
|
||||
$green-u1: desaturate($green, 15%) !default;
|
||||
$green-u2: desaturate($green, 30%) !default;
|
||||
$green-u3: desaturate($green, 45%) !default;
|
||||
|
||||
$yellow: rgb(237, 189, 60) !default;
|
||||
$yellow-l1: tint($yellow,20%) !default;
|
||||
$yellow-l2: tint($yellow,40%) !default;
|
||||
$yellow-l3: tint($yellow,60%) !default;
|
||||
$yellow-l4: tint($yellow,80%) !default;
|
||||
$yellow-l5: tint($yellow,90%) !default;
|
||||
$yellow-d1: shade($yellow,20%) !default;
|
||||
$yellow-d2: shade($yellow,40%) !default;
|
||||
$yellow-d3: shade($yellow,60%) !default;
|
||||
$yellow-d4: shade($yellow,80%) !default;
|
||||
$yellow-s1: saturate($yellow,15%) !default;
|
||||
$yellow-s2: saturate($yellow,30%) !default;
|
||||
$yellow-s3: saturate($yellow,45%) !default;
|
||||
$yellow-u1: desaturate($yellow,15%) !default;
|
||||
$yellow-u2: desaturate($yellow,30%) !default;
|
||||
$yellow-u3: desaturate($yellow,45%) !default;
|
||||
$yellow-l1: tint($yellow, 20%) !default;
|
||||
$yellow-l2: tint($yellow, 40%) !default;
|
||||
$yellow-l3: tint($yellow, 60%) !default;
|
||||
$yellow-l4: tint($yellow, 80%) !default;
|
||||
$yellow-l5: tint($yellow, 90%) !default;
|
||||
$yellow-d1: shade($yellow, 20%) !default;
|
||||
$yellow-d2: shade($yellow, 40%) !default;
|
||||
$yellow-d3: shade($yellow, 60%) !default;
|
||||
$yellow-d4: shade($yellow, 80%) !default;
|
||||
$yellow-s1: saturate($yellow, 15%) !default;
|
||||
$yellow-s2: saturate($yellow, 30%) !default;
|
||||
$yellow-s3: saturate($yellow, 45%) !default;
|
||||
$yellow-u1: desaturate($yellow, 15%) !default;
|
||||
$yellow-u2: desaturate($yellow, 30%) !default;
|
||||
$yellow-u3: desaturate($yellow, 45%) !default;
|
||||
|
||||
$orange: rgb(237, 189, 60) !default;
|
||||
$orange-l1: tint($orange,20%) !default;
|
||||
$orange-l2: tint($orange,40%) !default;
|
||||
$orange-l3: tint($orange,60%) !default;
|
||||
$orange-l4: tint($orange,80%) !default;
|
||||
$orange-l5: tint($orange,90%) !default;
|
||||
$orange-d1: shade($orange,20%) !default;
|
||||
$orange-d2: shade($orange,40%) !default;
|
||||
$orange-d3: shade($orange,60%) !default;
|
||||
$orange-d4: shade($orange,80%) !default;
|
||||
$orange-s1: saturate($orange,15%) !default;
|
||||
$orange-s2: saturate($orange,30%) !default;
|
||||
$orange-s3: saturate($orange,45%) !default;
|
||||
$orange-u1: desaturate($orange,15%) !default;
|
||||
$orange-u2: desaturate($orange,30%) !default;
|
||||
$orange-u3: desaturate($orange,45%) !default;
|
||||
$orange-l1: tint($orange, 20%) !default;
|
||||
$orange-l2: tint($orange, 40%) !default;
|
||||
$orange-l3: tint($orange, 60%) !default;
|
||||
$orange-l4: tint($orange, 80%) !default;
|
||||
$orange-l5: tint($orange, 90%) !default;
|
||||
$orange-d1: shade($orange, 20%) !default;
|
||||
$orange-d2: shade($orange, 40%) !default;
|
||||
$orange-d3: shade($orange, 60%) !default;
|
||||
$orange-d4: shade($orange, 80%) !default;
|
||||
$orange-s1: saturate($orange, 15%) !default;
|
||||
$orange-s2: saturate($orange, 30%) !default;
|
||||
$orange-s3: saturate($orange, 45%) !default;
|
||||
$orange-u1: desaturate($orange, 15%) !default;
|
||||
$orange-u2: desaturate($orange, 30%) !default;
|
||||
$orange-u3: desaturate($orange, 45%) !default;
|
||||
|
||||
// +Colors - Shadows
|
||||
// ====================
|
||||
@@ -230,7 +230,7 @@ $tmg-s3: 3.0s;
|
||||
$tmg-s2: 2.0s;
|
||||
$tmg-s1: 1.0s;
|
||||
$tmg-avg: 0.75s;
|
||||
$tmg-f1: 0.50s;
|
||||
$tmg-f1: 0.5s;
|
||||
$tmg-f2: 0.25s;
|
||||
$tmg-f3: 0.125s;
|
||||
|
||||
@@ -252,7 +252,7 @@ $ui-update-color: $blue-l4 !default;
|
||||
// ====================
|
||||
// do not use, future clean up will use updated styles
|
||||
$baseFontColor: $gray-d2 !default;
|
||||
$lighter-base-font-color: rgb(100,100,100) !default;
|
||||
$lighter-base-font-color: rgb(100, 100, 100) !default;
|
||||
$offBlack: #3c3c3c !default;
|
||||
$green: #108614 !default;
|
||||
$lightGrey: #edf1f5 !default;
|
||||
|
||||
@@ -16,5 +16,4 @@
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
@import 'build-v1'; // shared app style assets/rendering
|
||||
|
||||
@@ -17,5 +17,4 @@
|
||||
// ====================
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
@import 'build-v1'; // shared app style assets/rendering
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
// Load the RTL version of the edX Pattern Library
|
||||
$pattern-library-path: '../edx-pattern-library' !default;
|
||||
|
||||
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
|
||||
|
||||
// Load the shared build
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
// Load the LTR version of the edX Pattern Library
|
||||
$pattern-library-path: '../edx-pattern-library' !default;
|
||||
|
||||
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
|
||||
|
||||
// Load the shared build
|
||||
|
||||
72
cms/static/sass/vendor/bi-app/_mixins.scss
vendored
72
cms/static/sass/vendor/bi-app/_mixins.scss
vendored
@@ -31,7 +31,9 @@
|
||||
@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
|
||||
@if $bi-app-direction == ltr {
|
||||
#{$property}: $top $right $bottom $left;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
#{$property}: $top $left $bottom $right;
|
||||
}
|
||||
}
|
||||
@@ -77,9 +79,13 @@
|
||||
@mixin float($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-float-left;
|
||||
} @else if $direction == right {
|
||||
}
|
||||
|
||||
@else if $direction == right {
|
||||
@include bi-app-float-right;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
float: $direction;
|
||||
}
|
||||
}
|
||||
@@ -97,9 +103,13 @@
|
||||
@mixin text-align($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-text-align-left;
|
||||
} @else if $direction == right {
|
||||
}
|
||||
|
||||
@else if $direction == right {
|
||||
@include bi-app-text-align-right;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
text-align: $direction;
|
||||
}
|
||||
}
|
||||
@@ -117,9 +127,13 @@
|
||||
@mixin clear($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-clear-left;
|
||||
} @else if $direction == right {
|
||||
}
|
||||
|
||||
@else if $direction == right {
|
||||
@include bi-app-clear-right;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
clear: $direction;
|
||||
}
|
||||
}
|
||||
@@ -129,7 +143,9 @@
|
||||
@mixin left($distance) {
|
||||
@if $bi-app-direction == ltr {
|
||||
left: $distance;
|
||||
} @else if $bi-app-direction == rtl {
|
||||
}
|
||||
|
||||
@else if $bi-app-direction == rtl {
|
||||
right: $distance;
|
||||
}
|
||||
}
|
||||
@@ -137,7 +153,9 @@
|
||||
@mixin right($distance) {
|
||||
@if $bi-app-direction == ltr {
|
||||
right: $distance;
|
||||
} @else if $bi-app-direction == rtl {
|
||||
}
|
||||
|
||||
@else if $bi-app-direction == rtl {
|
||||
left: $distance;
|
||||
}
|
||||
}
|
||||
@@ -196,26 +214,26 @@
|
||||
// radius
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-left}-radius: $radius;
|
||||
border-top-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-left}-radius: $radius;
|
||||
border-top-#{$bi-app-left}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-right}-radius: $radius;
|
||||
border-top-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-right}-radius: $radius;
|
||||
border-top-#{$bi-app-right}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-left}-radius: $radius;
|
||||
border-bottom-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-left}-radius: $radius;
|
||||
border-bottom-#{$bi-app-left}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-right}-radius: $radius;
|
||||
border-bottom-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-right}-radius: $radius;
|
||||
border-bottom-#{$bi-app-right}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@@ -244,12 +262,14 @@
|
||||
@include border-top-right-radius($topRight);
|
||||
@include border-bottom-right-radius($bottomRight);
|
||||
@include border-bottom-left-radius($bottomLeft);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
-webkit-border-radius: $topLeft;
|
||||
-moz-border-radius: $topLeft;
|
||||
-ms-border-radius: $topLeft;
|
||||
-o-border-radius: $topLeft;
|
||||
border-radius: $topLeft;
|
||||
-moz-border-radius: $topLeft;
|
||||
-ms-border-radius: $topLeft;
|
||||
-o-border-radius: $topLeft;
|
||||
border-radius: $topLeft;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -258,7 +278,9 @@
|
||||
@function lang() {
|
||||
@if $bi-app-direction == ltr {
|
||||
@return 'en';
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
@return 'ar';
|
||||
}
|
||||
}
|
||||
@@ -274,7 +296,9 @@
|
||||
@function bi-app-invert-percentage($percentage) {
|
||||
@if $bi-app-direction == rtl {
|
||||
@return 100% - $percentage;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
@return $percentage;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
.view-signup,
|
||||
.view-signin,
|
||||
.view-util {
|
||||
|
||||
.wrapper-content {
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: 0 $baseline;
|
||||
@@ -14,7 +13,9 @@
|
||||
|
||||
.content {
|
||||
@include clearfix();
|
||||
|
||||
@extend %t-copy-base;
|
||||
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
@@ -30,20 +31,25 @@
|
||||
h1 {
|
||||
@extend %t-title3;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.action {
|
||||
@extend %t-action3;
|
||||
|
||||
position: absolute;
|
||||
|
||||
@include right(0);
|
||||
|
||||
top: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.introduction {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
}
|
||||
@@ -57,6 +63,7 @@
|
||||
|
||||
form {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px 2px $shadow-l1;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
@@ -70,8 +77,10 @@
|
||||
.action-primary {
|
||||
@include blue-button();
|
||||
@include transition(all $tmg-f3 linear 0s);
|
||||
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
@@ -90,12 +99,11 @@
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
@@ -107,7 +115,9 @@
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color $tmg-f3 ease-in-out 0s);
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
@@ -117,6 +127,7 @@
|
||||
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -130,23 +141,22 @@
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
+ .tip {
|
||||
color: $gray-d1;
|
||||
}
|
||||
@@ -170,7 +180,9 @@
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color $tmg-f3 ease-in-out 0s);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
@@ -179,6 +191,7 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
|
||||
.field {
|
||||
@@ -211,6 +224,7 @@
|
||||
|
||||
.bit {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: 0 0 $baseline 0;
|
||||
@@ -225,6 +239,7 @@
|
||||
h3 {
|
||||
@extend %t-title7;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $gray-d2;
|
||||
}
|
||||
@@ -237,8 +252,10 @@
|
||||
|
||||
.action-forgotpassword {
|
||||
@extend %t-action3;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
// ====================
|
||||
|
||||
.view-uploads {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
@@ -16,9 +15,9 @@
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
|
||||
.fa-cloud-upload {
|
||||
@extend %t-copy;
|
||||
|
||||
vertical-align: bottom;
|
||||
margin-right: ($baseline/5);
|
||||
}
|
||||
@@ -27,6 +26,7 @@
|
||||
|
||||
.no-asset-content {
|
||||
@extend %ui-well;
|
||||
|
||||
padding: ($baseline*2);
|
||||
background-color: $gray-l4;
|
||||
text-align: center;
|
||||
@@ -35,6 +35,7 @@
|
||||
.new-button {
|
||||
@extend %btn-primary-green;
|
||||
@extend %t-action3;
|
||||
|
||||
@include margin-left($baseline);
|
||||
|
||||
.icon {
|
||||
@@ -49,8 +50,10 @@
|
||||
.meta-wrap {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.meta {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: flex-grid(9, 12);
|
||||
@@ -66,6 +69,7 @@
|
||||
|
||||
.pagination {
|
||||
@include clearfix;
|
||||
|
||||
display: inline-block;
|
||||
width: flex-grid(3, 12);
|
||||
|
||||
@@ -86,6 +90,7 @@
|
||||
|
||||
.nav-link {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: block;
|
||||
padding: ($baseline/4) ($baseline*0.75);
|
||||
|
||||
@@ -126,6 +131,7 @@
|
||||
.total-pages {
|
||||
@extend %t-copy-base;
|
||||
@extend %t-strong;
|
||||
|
||||
width: ($baseline*2.5);
|
||||
margin: 0 ($baseline*0.75);
|
||||
padding: ($baseline/4);
|
||||
@@ -135,13 +141,16 @@
|
||||
|
||||
.current-page {
|
||||
@extend %ui-depth1;
|
||||
|
||||
position: absolute;
|
||||
|
||||
@include left(-($baseline/4));
|
||||
}
|
||||
|
||||
.page-divider {
|
||||
@extend %t-title4;
|
||||
@extend %t-regular;
|
||||
|
||||
vertical-align: middle;
|
||||
color: $gray;
|
||||
}
|
||||
@@ -149,6 +158,7 @@
|
||||
|
||||
.pagination-form {
|
||||
@extend %ui-depth2;
|
||||
|
||||
position: relative;
|
||||
|
||||
.page-number-label,
|
||||
@@ -158,6 +168,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;
|
||||
@@ -172,7 +183,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;
|
||||
@@ -194,6 +206,7 @@
|
||||
|
||||
th {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
background-color: $gray-l5;
|
||||
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
|
||||
vertical-align: middle;
|
||||
@@ -207,6 +220,7 @@
|
||||
|
||||
.current-sort {
|
||||
@extend %t-strong;
|
||||
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
}
|
||||
|
||||
@@ -221,13 +235,16 @@
|
||||
margin: 0 -($baseline/2);
|
||||
color: $blue-d2;
|
||||
cursor: pointer;
|
||||
|
||||
.wrapper-nav-sub {
|
||||
top: 35px;
|
||||
|
||||
@extend %ui-depth2;
|
||||
|
||||
> ol > .nav-item {
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -235,16 +252,17 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
@include text-align(left);
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
&::after {
|
||||
left: $baseline;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
left: $baseline;
|
||||
margin-left: -11px;
|
||||
}
|
||||
@@ -280,6 +298,7 @@
|
||||
|
||||
tr {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
border-top: 1px solid $gray-l4;
|
||||
|
||||
&:first-child {
|
||||
@@ -315,14 +334,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-col {
|
||||
padding: ($baseline/2) $baseline;
|
||||
@extend %t-copy-sub2;
|
||||
color: $gray-l2;
|
||||
.thumb-col {
|
||||
padding: ($baseline/2) $baseline;
|
||||
|
||||
.thumb {
|
||||
width: 100px;
|
||||
}
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-l2;
|
||||
|
||||
.thumb {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -331,9 +352,9 @@
|
||||
|
||||
|
||||
.name-col {
|
||||
|
||||
.title {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
@@ -342,18 +363,23 @@
|
||||
|
||||
.type-col {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
.date-col {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.embed-col {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
padding-left: ($baseline*0.75);
|
||||
color: $gray-l2;
|
||||
|
||||
@@ -364,7 +390,9 @@
|
||||
|
||||
.embeddable-xml-input {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
@@ -445,7 +473,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fa-unlock-alt {
|
||||
.fa-unlock-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -470,6 +498,7 @@
|
||||
.title {
|
||||
@extend %t-title3;
|
||||
@extend %t-light;
|
||||
|
||||
float: none;
|
||||
margin: ($baseline*2) 0 ($baseline*1.5);
|
||||
}
|
||||
@@ -480,7 +509,9 @@
|
||||
|
||||
.choose-file-button {
|
||||
@include blue-button();
|
||||
|
||||
@extend %t-action2;
|
||||
|
||||
padding: 10px 82px 12px;
|
||||
}
|
||||
|
||||
@@ -503,6 +534,7 @@
|
||||
|
||||
.progress-fill {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
width: 0%;
|
||||
height: ($baseline*1.5);
|
||||
border-radius: ($baseline*2);
|
||||
@@ -513,6 +545,7 @@
|
||||
|
||||
.close-button {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: ($baseline*0.75);
|
||||
@@ -537,6 +570,7 @@
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
@@ -549,6 +583,7 @@
|
||||
|
||||
.copy-button {
|
||||
@include white-button;
|
||||
|
||||
display: none;
|
||||
margin-bottom: ($baseline*5);
|
||||
}
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
// * +Layout - Certificates
|
||||
// ====================
|
||||
.view-certificates {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
.notice-moduledisabled {
|
||||
@extend %ui-well;
|
||||
@extend %t-copy-base;
|
||||
|
||||
background-color: $white;
|
||||
padding: ($baseline*1.5) $baseline;
|
||||
text-align: center;
|
||||
@@ -34,7 +35,6 @@
|
||||
}
|
||||
|
||||
.wrapper-certificates {
|
||||
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
@@ -46,6 +46,7 @@
|
||||
|
||||
.instructions {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
@@ -56,6 +57,7 @@
|
||||
|
||||
.actual-course-title {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
@@ -65,10 +67,11 @@
|
||||
}
|
||||
|
||||
.certificate-info-section{
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
|
||||
.course-title-section, .course-number-section{
|
||||
min-width: 47%;
|
||||
|
||||
@include margin-right(2%);
|
||||
}
|
||||
}
|
||||
@@ -77,14 +80,14 @@
|
||||
// * +Main - Collection
|
||||
// ====================
|
||||
.view-certificates {
|
||||
|
||||
.wrapper-collection {
|
||||
@extend %ui-window;
|
||||
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:hover .collection .actions {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collection-details {
|
||||
@@ -111,6 +114,7 @@
|
||||
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: table-cell;
|
||||
margin-right: 1%;
|
||||
padding: ($baseline/4) 0;
|
||||
@@ -124,6 +128,7 @@
|
||||
|
||||
.item {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
padding: ($baseline/7) 0 ($baseline/4);
|
||||
border-top: 1px solid $gray-l4;
|
||||
white-space: nowrap;
|
||||
@@ -144,13 +149,13 @@
|
||||
}
|
||||
|
||||
.collection-details {
|
||||
|
||||
.actions {
|
||||
@include transition(opacity .15s .25s ease-in-out);
|
||||
|
||||
position: absolute;
|
||||
top: $baseline;
|
||||
right: $baseline;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
@@ -179,6 +184,7 @@
|
||||
|
||||
.collection-references {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
box-shadow: 0 2px 2px 0 $shadow inset;
|
||||
padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
|
||||
color: $gray-l1;
|
||||
@@ -208,6 +214,7 @@
|
||||
|
||||
.collection-edit {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
background: $white;
|
||||
@@ -226,6 +233,7 @@
|
||||
|
||||
.action-add-signatory {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: ($baseline*0.75);
|
||||
@@ -234,12 +242,15 @@
|
||||
|
||||
.disableClick {
|
||||
@extend %ui-disabled;
|
||||
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/2);
|
||||
color: $gray-d1;
|
||||
@@ -252,6 +263,7 @@
|
||||
|
||||
.collection-fields {
|
||||
@extend %cont-no-list;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
@@ -263,12 +275,11 @@
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
@@ -284,7 +295,9 @@
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
@@ -295,6 +308,7 @@
|
||||
//this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -308,19 +322,19 @@
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -331,30 +345,31 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.required {
|
||||
@extend %t-strong;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
.field.add-collection-name {
|
||||
|
||||
label {
|
||||
width: 50%;
|
||||
|
||||
@extend %t-title5;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
@@ -368,6 +383,7 @@
|
||||
|
||||
.certificate-value {
|
||||
@extend %t-strong;
|
||||
|
||||
white-space: nowrap;
|
||||
margin-left: ($baseline*0.5);
|
||||
}
|
||||
@@ -390,11 +406,13 @@
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
|
||||
padding: ($baseline/4) $baseline;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend %btn-secondary-gray;
|
||||
|
||||
padding: ($baseline/4) $baseline;
|
||||
}
|
||||
|
||||
@@ -406,16 +424,18 @@
|
||||
color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-signatory-action {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
margin: ($baseline) 0 ($baseline/2) 0;
|
||||
color: $gray;
|
||||
|
||||
@@ -429,6 +449,7 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
@@ -439,6 +460,7 @@
|
||||
// add/new collection
|
||||
.action-add {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: ($baseline*0.75);
|
||||
@@ -451,9 +473,11 @@
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
.action-add-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -467,18 +491,16 @@
|
||||
}
|
||||
|
||||
.view-certificates .certificates {
|
||||
|
||||
.certificate-details, .certificate-edit {
|
||||
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-edit {
|
||||
|
||||
.add-collection-name label {
|
||||
padding-right: 5%;
|
||||
overflow: hidden;
|
||||
@@ -488,6 +510,7 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
padding: ($baseline/4) 0 0 0;
|
||||
|
||||
@@ -518,7 +541,9 @@
|
||||
|
||||
.action-close {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@@ -538,13 +563,14 @@
|
||||
// ====================
|
||||
// TO-DO: refactor to use collection styling where possible.
|
||||
.view-certificates .certificates {
|
||||
|
||||
.signatory-details, .signatory-edit {
|
||||
@extend %ui-window;
|
||||
|
||||
border-color: $gray-l4;
|
||||
|
||||
.signatory-panel-header {
|
||||
@extend %t-strong;
|
||||
|
||||
background-color: $gray-l5;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
@@ -585,7 +611,9 @@
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
@@ -599,12 +627,11 @@
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
@@ -620,7 +647,9 @@
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
@@ -631,6 +660,7 @@
|
||||
//TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -644,19 +674,19 @@
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -667,32 +697,35 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
.message-error{
|
||||
color: $red;
|
||||
}
|
||||
.message-error{
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.signature-upload-wrapper {
|
||||
@include clearfix();
|
||||
width: flex-grid(12,12);
|
||||
|
||||
width: flex-grid(12, 12);
|
||||
|
||||
.signature-upload-input-wrapper {
|
||||
float: left;
|
||||
width: flex-grid(7,12);
|
||||
width: flex-grid(7, 12);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.action-upload-signature {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
float: right;
|
||||
width: flex-grid(4,12);
|
||||
width: flex-grid(4, 12);
|
||||
margin-top: ($baseline/4);
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
|
||||
%status-value-sub1 {
|
||||
@extend %t-title8;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -24,13 +25,11 @@
|
||||
@extend %two-col-1;
|
||||
|
||||
.wrapper-mast {
|
||||
|
||||
.mast {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
|
||||
.page-header {
|
||||
|
||||
.page-header-title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
@@ -41,8 +40,10 @@
|
||||
// TOOD: abstract this out into a Sass placeholder
|
||||
.incontext-editor-input {
|
||||
@include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
|
||||
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
width: 100%;
|
||||
background: none repeat scroll 0 0 $white;
|
||||
border: 0;
|
||||
@@ -50,7 +51,7 @@
|
||||
|
||||
// STATE: focus
|
||||
&:focus {
|
||||
box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset;
|
||||
box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.5) inset;
|
||||
color: $ui-action-primary-color-focus;
|
||||
}
|
||||
}
|
||||
@@ -58,6 +59,7 @@
|
||||
|
||||
.container-access {
|
||||
@include font-size(14);
|
||||
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
color: #707070;
|
||||
@@ -66,12 +68,11 @@
|
||||
}
|
||||
|
||||
&.has-actions {
|
||||
|
||||
.nav-actions {
|
||||
|
||||
.button {
|
||||
@extend %t-action3;
|
||||
@extend %t-regular;
|
||||
|
||||
padding: ($baseline/4) ($baseline*0.75);
|
||||
}
|
||||
}
|
||||
@@ -80,9 +81,9 @@
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
|
||||
.no-container-content {
|
||||
@extend %no-content;
|
||||
|
||||
padding: ($baseline*1.5) ($baseline*2);
|
||||
|
||||
// custom rules to reuse xblock validation styling in ui-well context
|
||||
@@ -92,7 +93,6 @@
|
||||
}
|
||||
|
||||
.container-message {
|
||||
|
||||
.message {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
@@ -100,7 +100,6 @@
|
||||
|
||||
// dragging bits
|
||||
.ui-sortable-helper {
|
||||
|
||||
article {
|
||||
display: none;
|
||||
}
|
||||
@@ -118,7 +117,6 @@
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
|
||||
label {
|
||||
@extend %t-title8;
|
||||
}
|
||||
@@ -172,7 +170,6 @@
|
||||
}
|
||||
|
||||
.wrapper-last-draft {
|
||||
|
||||
.date,
|
||||
.user {
|
||||
@extend %t-strong;
|
||||
@@ -184,7 +181,6 @@
|
||||
}
|
||||
|
||||
.wrapper-release {
|
||||
|
||||
.release-date {
|
||||
@extend %status-value-base;
|
||||
}
|
||||
@@ -195,9 +191,9 @@
|
||||
}
|
||||
|
||||
.wrapper-visibility {
|
||||
|
||||
.copy {
|
||||
@extend %status-value-base;
|
||||
|
||||
margin-bottom: ($baseline/10);
|
||||
}
|
||||
|
||||
@@ -226,12 +222,14 @@
|
||||
|
||||
.action-publish {
|
||||
@extend %btn-primary-blue;
|
||||
|
||||
display: block;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
||||
}
|
||||
|
||||
.action-discard {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/2);
|
||||
text-align: right;
|
||||
@@ -246,7 +244,6 @@
|
||||
|
||||
// versioning widget
|
||||
.unit-publish-history {
|
||||
|
||||
.wrapper-last-publish {
|
||||
margin-bottom: $baseline;
|
||||
padding: ($baseline*0.75);
|
||||
@@ -254,6 +251,7 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
@@ -271,18 +269,20 @@
|
||||
// location widget
|
||||
.unit-location, .library-location {
|
||||
@extend %bar-module;
|
||||
|
||||
border-top: none;
|
||||
|
||||
.wrapper-unit-id, .wrapper-library-id {
|
||||
|
||||
.unit-id-value, .library-id-value {
|
||||
@extend %status-value-base;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline-block;
|
||||
margin: ($baseline/4) 0;
|
||||
color: $gray-d1;
|
||||
@@ -290,7 +290,6 @@
|
||||
}
|
||||
|
||||
.wrapper-unit-tree-location {
|
||||
|
||||
.item-title {
|
||||
@extend %cont-text-wrap;
|
||||
|
||||
@@ -310,6 +309,7 @@
|
||||
.unit-title a {
|
||||
@extend %ui-disabled;
|
||||
@extend %t-strong;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
}
|
||||
@@ -342,7 +342,6 @@
|
||||
|
||||
|
||||
.move-xblock-modal {
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
@@ -357,9 +356,9 @@
|
||||
background: $color-background-alternate;
|
||||
|
||||
.breadcrumbs {
|
||||
|
||||
.bc-container {
|
||||
@include font-size(14);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.breadcrumb-fa-icon {
|
||||
@@ -389,6 +388,7 @@
|
||||
.category-text {
|
||||
@include margin-left($baseline/2);
|
||||
@include font-size(14);
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
@@ -418,6 +418,7 @@
|
||||
|
||||
.button-forward {
|
||||
padding: ($baseline/2);
|
||||
|
||||
.forward-sr-icon {
|
||||
@include float(right);
|
||||
|
||||
@@ -434,6 +435,7 @@
|
||||
|
||||
.xblock-no-child-message {
|
||||
@include text-align(center);
|
||||
|
||||
display: block;
|
||||
padding: ($baseline*2);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,10 @@
|
||||
|
||||
// basic layout
|
||||
// --------------------
|
||||
.content-primary, .content-supplementary {
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -24,8 +26,8 @@
|
||||
// header/masthead
|
||||
// --------------------
|
||||
.mast .page-header-super {
|
||||
|
||||
.course-original-title-id, .course-original-title {
|
||||
.course-original-title-id,
|
||||
.course-original-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -38,9 +40,9 @@
|
||||
// course re-run form
|
||||
// --------------------
|
||||
.rerun-course {
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
|
||||
margin-bottom: ($baseline*0.75);
|
||||
}
|
||||
|
||||
@@ -55,6 +57,7 @@
|
||||
|
||||
label {
|
||||
@extend %t-title7;
|
||||
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -73,6 +76,7 @@
|
||||
|
||||
.rerun-course-name {
|
||||
@extend %t-title5;
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -96,6 +100,7 @@
|
||||
|
||||
.wrap-error {
|
||||
@include transition(opacity $tmg-f2 ease 0s);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -106,20 +111,21 @@
|
||||
.message-status {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
|
||||
padding: ($baseline*0.5) ($baseline*1.5) 8px ($baseline*1.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// NOTE: override for modern button styling until all buttons (in _forms.scss) can be converted
|
||||
.actions {
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
|
||||
@extend %t-action2;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include grey-button;
|
||||
|
||||
@extend %t-action2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
// ====================
|
||||
|
||||
// basic layout
|
||||
.content-primary, .content-supplementary {
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
@@ -34,9 +35,10 @@
|
||||
width: flexgrid(9, 9);
|
||||
|
||||
// CASE: notice has actions {
|
||||
&.has-actions, &.list-notices .notice-item.has-actions {
|
||||
|
||||
.msg, .list-actions {
|
||||
&.has-actions,
|
||||
&.list-notices .notice-item.has-actions {
|
||||
.msg,
|
||||
.list-actions {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -51,11 +53,8 @@
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
|
||||
.action-item {
|
||||
|
||||
}
|
||||
|
||||
.action-create-course, .action-create-library {
|
||||
.action-create-course,
|
||||
.action-create-library {
|
||||
@extend %btn-primary-green;
|
||||
@extend %t-action3;
|
||||
}
|
||||
@@ -72,7 +71,9 @@
|
||||
.ui-toggle-control {
|
||||
@extend %ui-depth2;
|
||||
@extend %btn-secondary-gray;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
display: block;
|
||||
text-align: left;
|
||||
|
||||
@@ -84,6 +85,7 @@
|
||||
|
||||
.label {
|
||||
@extend %t-action3;
|
||||
|
||||
float: left;
|
||||
width: flex-grid(8, 9);
|
||||
margin: 3px flex-gutter() 0 0;
|
||||
@@ -91,9 +93,11 @@
|
||||
|
||||
.fa-times-circle {
|
||||
@extend %t-action1;
|
||||
|
||||
@include transform(rotate(45deg));
|
||||
@include transform-origin(center center);
|
||||
@include transition(all $tmg-f1 linear 0s);
|
||||
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -101,7 +105,9 @@
|
||||
|
||||
.ui-toggle-target {
|
||||
@extend %ui-depth1;
|
||||
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0s);
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
display: none;
|
||||
@@ -110,7 +116,6 @@
|
||||
|
||||
// CASE: when the content area is shown
|
||||
&.is-shown {
|
||||
|
||||
.ui-toggle-control {
|
||||
@include border-bottom-radius(0);
|
||||
|
||||
@@ -122,11 +127,9 @@
|
||||
|
||||
.ui-toggle-target {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// elements - course creation rights controls
|
||||
@@ -136,21 +139,15 @@
|
||||
.title {
|
||||
@extend %t-title7;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
.copy {
|
||||
|
||||
}
|
||||
|
||||
.list-actions, .form-actions {
|
||||
.list-actions,
|
||||
.form-actions {
|
||||
margin-top: ($baseline*0.75);
|
||||
|
||||
.action-item {
|
||||
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action3;
|
||||
@@ -164,12 +161,14 @@
|
||||
|
||||
.fa-cog {
|
||||
@include transition(all $tmg-f1 ease-in-out $tmg-f1);
|
||||
|
||||
@extend %t-icon4;
|
||||
|
||||
position: absolute;
|
||||
top: ($baseline/2);
|
||||
left: -($baseline);
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// state: submitting
|
||||
@@ -179,7 +178,7 @@
|
||||
.fa-cog {
|
||||
left: ($baseline*0.75);
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,14 +191,13 @@
|
||||
.fa-cog {
|
||||
left: ($baseline*0.75);
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-update {
|
||||
|
||||
.label {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
@@ -218,11 +216,12 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: ($baseline/4);
|
||||
opacity: 0.40;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.value-formal, .value-description {
|
||||
.value-formal,
|
||||
.value-description {
|
||||
border-radius: ($baseline/10);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -232,6 +231,7 @@
|
||||
.value-formal {
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: ($baseline/2);
|
||||
|
||||
.icon {
|
||||
@@ -241,6 +241,7 @@
|
||||
|
||||
.value-description {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
position: relative;
|
||||
color: $white;
|
||||
opacity: 0.85;
|
||||
@@ -249,7 +250,6 @@
|
||||
|
||||
// CASE: rights are not requested yet
|
||||
&.is-unrequested {
|
||||
|
||||
.title {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
@@ -257,9 +257,7 @@
|
||||
|
||||
// CASE: status is pending
|
||||
&.is-pending {
|
||||
|
||||
.status-update {
|
||||
|
||||
.value {
|
||||
background: $orange;
|
||||
}
|
||||
@@ -273,9 +271,7 @@
|
||||
|
||||
// CASE: status is denied
|
||||
&.is-denied {
|
||||
|
||||
.status-update {
|
||||
|
||||
.value {
|
||||
background: $red-l1;
|
||||
}
|
||||
@@ -303,7 +299,8 @@
|
||||
border-bottom: 4px solid $uxpl-blue-base;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
&.active,
|
||||
&:hover {
|
||||
a {
|
||||
color: $gray-d2;
|
||||
}
|
||||
@@ -318,7 +315,9 @@
|
||||
}
|
||||
|
||||
// ELEM: course listings
|
||||
.courses-tab, .archived-courses-tab, .libraries-tab {
|
||||
.courses-tab,
|
||||
.archived-courses-tab,
|
||||
.libraries-tab {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
@@ -326,9 +325,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.courses, .libraries, .archived-courses {
|
||||
.courses,
|
||||
.libraries,
|
||||
.archived-courses {
|
||||
.title {
|
||||
@extend %t-title6;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
@@ -337,6 +339,7 @@
|
||||
|
||||
.title {
|
||||
@extend %t-title6;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
@@ -353,7 +356,7 @@
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// UI: course wrappers (needed for status messages)
|
||||
@@ -361,9 +364,9 @@
|
||||
|
||||
// CASE: has status
|
||||
&.has-status {
|
||||
|
||||
.course-status {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: flex-grid(3, 9);
|
||||
@@ -371,14 +374,15 @@
|
||||
text-align: right;
|
||||
|
||||
.value {
|
||||
|
||||
.copy, .icon {
|
||||
.copy,
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
|
||||
@@ -390,13 +394,14 @@
|
||||
|
||||
.status-message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
background-color: $gray-l5;
|
||||
box-shadow: 0 2px 2px 0 $shadow inset;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
|
||||
&.has-actions {
|
||||
|
||||
.copy, .status-actions {
|
||||
.copy,
|
||||
.status-actions {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -412,16 +417,19 @@
|
||||
|
||||
.button {
|
||||
@extend %btn-secondary-white;
|
||||
padding:($baseline/4) ($baseline/2);
|
||||
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
}
|
||||
|
||||
.icon,.button-copy {
|
||||
.icon,
|
||||
.button-copy {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend %t-icon4;
|
||||
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
@@ -437,6 +445,7 @@
|
||||
// UI: individual course listings
|
||||
.course-item {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
position: relative;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
@@ -447,8 +456,10 @@
|
||||
background: $paleYellow;
|
||||
}
|
||||
|
||||
.course-link, .course-actions {
|
||||
.course-link,
|
||||
.course-actions {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -456,27 +467,33 @@
|
||||
// encompassing course link
|
||||
.course-link {
|
||||
@extend %ui-depth2;
|
||||
|
||||
width: flex-grid(6, 9);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
|
||||
// course title
|
||||
.course-title {
|
||||
@extend %t-title4;
|
||||
|
||||
@include margin(0, ($baseline*2), ($baseline/4), 0);
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
// course metadata
|
||||
.course-metadata {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
color: $gray-d2;
|
||||
|
||||
.metadata-item {
|
||||
display: inline-block;
|
||||
|
||||
& + .metadata-item:before {
|
||||
& + .metadata-item::before {
|
||||
content: "/";
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
@@ -495,13 +512,16 @@
|
||||
|
||||
.course-actions {
|
||||
@extend %ui-depth3;
|
||||
|
||||
position: static;
|
||||
width: flex-grid(3, 9);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
@@ -516,6 +536,7 @@
|
||||
// view live button
|
||||
.view-button {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
|
||||
@@ -527,7 +548,6 @@
|
||||
|
||||
// CASE: is processing
|
||||
&.is-processing {
|
||||
|
||||
.course-status .value {
|
||||
color: $gray-l2;
|
||||
}
|
||||
@@ -535,7 +555,6 @@
|
||||
|
||||
// CASE: has an error
|
||||
&.has-error {
|
||||
|
||||
.course-status {
|
||||
color: $red; // TODO: abstract this out to an error-based color variable
|
||||
}
|
||||
@@ -569,6 +588,7 @@
|
||||
|
||||
.wrapper-course {
|
||||
@extend %ui-window;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -583,18 +603,17 @@
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// course details (replacement for course-link when a course cannot be linked)
|
||||
.course-details {
|
||||
@extend %ui-depth2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: flex-grid(6, 9);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.optimization-form {
|
||||
@@ -633,10 +652,11 @@
|
||||
|
||||
// course listings
|
||||
|
||||
.create-course, .create-library {
|
||||
|
||||
.create-course,
|
||||
.create-library {
|
||||
.row {
|
||||
@include clearfix();
|
||||
|
||||
margin-bottom: ($baseline*0.75);
|
||||
}
|
||||
|
||||
@@ -652,6 +672,7 @@
|
||||
label {
|
||||
@extend %t-title7;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -661,14 +682,15 @@
|
||||
.new-course-run {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-run-text-direction {
|
||||
direction: ltr;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.placeholder-text-direction {
|
||||
direction: rtl;
|
||||
}
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.new-course-name {
|
||||
@extend %t-title5;
|
||||
@@ -687,23 +709,25 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wrap-error {
|
||||
@include transition(all $tmg-f2 ease 0s);
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.wrap-error {
|
||||
@include transition(all $tmg-f2 ease 0s);
|
||||
|
||||
.wrap-error.is-shown {
|
||||
height: 65px;
|
||||
opacity: 1;
|
||||
}
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
@extend %t-strong;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
|
||||
}
|
||||
.wrap-error.is-shown {
|
||||
height: 65px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding: ($baseline*0.5) ($baseline*1.5) 8px ($baseline*1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,16 +6,17 @@
|
||||
// UI: basic layout
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
width: flex-grid(9,12);
|
||||
width: flex-grid(9, 12);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
width: flex-grid(3,12);
|
||||
width: flex-grid(3, 12);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@@ -28,38 +29,41 @@
|
||||
}
|
||||
|
||||
.export-git-info-block {
|
||||
|
||||
dt {
|
||||
@extend %t-copy-lead1;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
dd {
|
||||
@extend %t-copy-base;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.course_text {
|
||||
color: $green;
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.giturl_text {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: introduction
|
||||
// UI: introduction
|
||||
.introduction {
|
||||
|
||||
.title {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: export controls
|
||||
// UI: export controls
|
||||
.export-git-controls {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@extend %ui-window;
|
||||
|
||||
padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
|
||||
|
||||
.title {
|
||||
@@ -69,15 +73,16 @@
|
||||
.action-export-git {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action1;
|
||||
|
||||
display: block;
|
||||
margin: $baseline 0;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
.icon {
|
||||
@extend %t-icon2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
|
||||
// UI: introduction
|
||||
.introduction {
|
||||
|
||||
.title {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
@@ -28,7 +27,9 @@
|
||||
// UI: export controls
|
||||
.export-controls {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@extend %ui-window;
|
||||
|
||||
padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
|
||||
|
||||
.title {
|
||||
@@ -38,15 +39,16 @@
|
||||
.action-export {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action1;
|
||||
|
||||
display: block;
|
||||
margin: $baseline 0;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
.icon {
|
||||
@extend %t-icon2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
@@ -63,14 +65,16 @@
|
||||
// UI: export rules
|
||||
.export-contents {
|
||||
@include clearfix();
|
||||
|
||||
margin: ($baseline*2) 0;
|
||||
|
||||
.export-includes, .export-excludes {
|
||||
width: flex-grid(4,9);
|
||||
width: flex-grid(4, 9);
|
||||
|
||||
.item-detail {
|
||||
@extend %t-copy-sub1;
|
||||
@extend %wipe-last-child;
|
||||
|
||||
padding-bottom: ($baseline/4);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
margin-bottom: ($baseline/4);
|
||||
@@ -91,16 +95,18 @@
|
||||
// UI: upload progress
|
||||
.wrapper-status {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0);
|
||||
opacity: 1.0;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
// STATE: hidden
|
||||
&.is-hidden {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend %t-title4;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
@@ -112,11 +118,13 @@
|
||||
.status-visual {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: flex-grid(1,9);
|
||||
width: flex-grid(1, 9);
|
||||
|
||||
.icon {
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
@extend %t-icon4;
|
||||
|
||||
position: absolute;
|
||||
top: ($baseline/2);
|
||||
left: $baseline;
|
||||
@@ -125,7 +133,7 @@
|
||||
|
||||
.status-detail {
|
||||
float: left;
|
||||
width: flex-grid(8,9);
|
||||
width: flex-grid(8, 9);
|
||||
margin-left: ($baseline*3);
|
||||
|
||||
.title {
|
||||
@@ -135,6 +143,7 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-base;
|
||||
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
@@ -142,6 +151,7 @@
|
||||
.item-progresspoint {
|
||||
@include clearfix();
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: $baseline;
|
||||
@@ -154,7 +164,6 @@
|
||||
|
||||
// CASE: has actions
|
||||
&.has-actions {
|
||||
|
||||
.list-actions {
|
||||
display: none;
|
||||
|
||||
@@ -166,14 +175,13 @@
|
||||
|
||||
// TYPE: success
|
||||
&.item-progresspoint-success {
|
||||
|
||||
.item-progresspoint-success-date {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-complete {
|
||||
|
||||
.item-progresspoint-success-date {
|
||||
display: inline;
|
||||
}
|
||||
@@ -187,12 +195,12 @@
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-cog {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa-check {
|
||||
@@ -202,31 +210,29 @@
|
||||
|
||||
// STATE: started
|
||||
&.is-started {
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-cog {
|
||||
@include animation(fa-spin 2s infinite linear);
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: completed
|
||||
&.is-complete {
|
||||
|
||||
.fa-cog {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -244,15 +250,14 @@
|
||||
|
||||
// STATE: error
|
||||
&.has-error {
|
||||
|
||||
.fa-cog {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-warning {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
// studio - views - group-configurations
|
||||
// ====================
|
||||
.view-group-configurations {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
@@ -9,11 +8,13 @@
|
||||
|
||||
.content-primary {
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
width: flex-grid(9, 12);
|
||||
|
||||
.notice-moduledisabled {
|
||||
@extend %ui-well;
|
||||
@extend %t-copy-base;
|
||||
|
||||
background-color: $white;
|
||||
padding: ($baseline*1.5) $baseline;
|
||||
text-align: center;
|
||||
@@ -21,6 +22,7 @@
|
||||
|
||||
.no-content {
|
||||
@extend %no-content;
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
@@ -30,6 +32,7 @@
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
@@ -40,11 +43,12 @@
|
||||
|
||||
.wrapper-collection {
|
||||
@extend %ui-window;
|
||||
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:hover .collection .actions {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collection-details {
|
||||
@@ -60,11 +64,14 @@
|
||||
@extend %cont-truncated;
|
||||
@extend %t-title5;
|
||||
@extend %t-strong;
|
||||
|
||||
@include margin-right($baseline*14);
|
||||
|
||||
color: $black;
|
||||
|
||||
.toggle {
|
||||
@include padding-left($baseline);
|
||||
|
||||
display: inline-block;
|
||||
color: $black;
|
||||
|
||||
@@ -74,13 +81,16 @@
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(rotate .15s ease-in-out .25s);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
@include margin-left(-$baseline);
|
||||
|
||||
display: inline-block;
|
||||
width: ($baseline*0.75);
|
||||
vertical-align: baseline;
|
||||
|
||||
&.fa-caret-right:before {
|
||||
&.fa-caret-right::before {
|
||||
@include rtl {
|
||||
// Flip to fa-caret-left on RTL
|
||||
content: "\f0d9";
|
||||
@@ -105,17 +115,21 @@
|
||||
|
||||
.collection-info {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include margin-left($baseline);
|
||||
|
||||
color: $gray-l1;
|
||||
|
||||
&.group-configuration-info-inline {
|
||||
@include margin($baseline/4, 0, $baseline/2, $baseline);
|
||||
|
||||
display: table;
|
||||
width: 70%;
|
||||
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
@include margin-right(1%);
|
||||
|
||||
display: table-cell;
|
||||
|
||||
&.group-configuration-usage-count {
|
||||
@@ -132,12 +146,14 @@
|
||||
|
||||
&.collection-info-inline {
|
||||
@include margin($baseline/4, 0, $baseline/2, $baseline);
|
||||
|
||||
display: table;
|
||||
width: 70%;
|
||||
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
@include margin-right(1%);
|
||||
|
||||
display: table-cell;
|
||||
padding: ($baseline/4) 0;
|
||||
|
||||
@@ -159,10 +175,12 @@
|
||||
|
||||
.collection-items {
|
||||
@include margin-left($baseline);
|
||||
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
.item {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
padding: ($baseline/7) 0 ($baseline/4);
|
||||
border-top: 1px solid $gray-l4;
|
||||
white-space: nowrap;
|
||||
@@ -173,6 +191,7 @@
|
||||
|
||||
.name {
|
||||
@include margin-right(5%);
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
@@ -183,16 +202,17 @@
|
||||
}
|
||||
|
||||
.collection-details {
|
||||
|
||||
.actions {
|
||||
@include transition(opacity .15s .25s ease-in-out);
|
||||
@include right($baseline);
|
||||
|
||||
position: absolute;
|
||||
top: $baseline;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
|
||||
.action {
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -214,7 +234,9 @@
|
||||
|
||||
.collection-references {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
|
||||
|
||||
box-shadow: 0 2px 2px 0 $shadow inset;
|
||||
color: $gray-l1;
|
||||
|
||||
@@ -230,11 +252,13 @@
|
||||
|
||||
.fa-warning {
|
||||
@include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
|
||||
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.fa-times-circle {
|
||||
@include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
|
||||
|
||||
color: $red-l2;
|
||||
}
|
||||
}
|
||||
@@ -243,13 +267,16 @@
|
||||
|
||||
.usage-validation {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
|
||||
|
||||
background-color: $gray-l6;
|
||||
margin-top: $baseline;
|
||||
|
||||
.fa-warning {
|
||||
@include margin($baseline/2, $baseline, 0, 0);
|
||||
@include float(left);
|
||||
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
@@ -260,6 +287,7 @@
|
||||
|
||||
.collection-edit {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
background: $white;
|
||||
@@ -274,7 +302,9 @@
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
@@ -287,6 +317,7 @@
|
||||
|
||||
.collection-fields {
|
||||
@extend %cont-no-list;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
@@ -298,13 +329,13 @@
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
@@ -319,6 +350,7 @@
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
@include margin(0, 0, $baseline/4, 0);
|
||||
|
||||
@@ -330,6 +362,7 @@
|
||||
//this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -343,19 +376,19 @@
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -366,36 +399,39 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.required {
|
||||
@extend %t-strong;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
.field.add-collection-name {
|
||||
|
||||
label {
|
||||
width: 50%;
|
||||
|
||||
@extend %t-title5;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.group-configuration-id {
|
||||
@include text-align(right);
|
||||
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
vertical-align: top;
|
||||
@@ -403,7 +439,9 @@
|
||||
|
||||
.group-configuration-value {
|
||||
@extend %t-strong;
|
||||
|
||||
@include margin-left($baseline*0.5);
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -427,16 +465,19 @@
|
||||
// add a group is below with groups styling
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
|
||||
padding: ($baseline/4) $baseline;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend %btn-secondary-gray;
|
||||
|
||||
padding: ($baseline/4) $baseline;
|
||||
}
|
||||
|
||||
.wrapper-delete-button {
|
||||
@include float(right);
|
||||
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
|
||||
.is-disabled {
|
||||
@@ -447,7 +488,9 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include margin($baseline, 0, $baseline/2, 0);
|
||||
|
||||
color: $gray;
|
||||
|
||||
strong {
|
||||
@@ -460,7 +503,9 @@
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
@include margin($baseline*1.5, 0, 0, 0);
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -470,6 +515,7 @@
|
||||
// add/new collection
|
||||
.action-add {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: ($baseline*0.75);
|
||||
@@ -481,6 +527,7 @@
|
||||
|
||||
.icon {
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -488,22 +535,20 @@
|
||||
|
||||
// specific group-type styles
|
||||
.content-groups {
|
||||
|
||||
.collection-header{
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-groups {
|
||||
|
||||
.group-configuration-details {
|
||||
|
||||
.group-configuration-info {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include margin-left($baseline);
|
||||
|
||||
color: $gray-l1;
|
||||
|
||||
.group-configuration-label {
|
||||
@@ -518,10 +563,12 @@
|
||||
|
||||
.groups {
|
||||
@include margin-left($baseline);
|
||||
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
.group {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
padding: ($baseline/7) 0 ($baseline/4);
|
||||
border-top: 1px solid $gray-l4;
|
||||
white-space: nowrap;
|
||||
@@ -532,6 +579,7 @@
|
||||
|
||||
.group-name {
|
||||
@include margin-right(5%);
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
@@ -541,6 +589,7 @@
|
||||
|
||||
.group-allocation {
|
||||
@include text-align(right);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20%;
|
||||
@@ -551,9 +600,9 @@
|
||||
}
|
||||
|
||||
.group-configuration-edit {
|
||||
|
||||
.add-collection-name label {
|
||||
@include padding-right(5%);
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
@@ -567,6 +616,7 @@
|
||||
.group-allocation,
|
||||
.field {
|
||||
@include margin(0, 3%, 0, 0);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -591,7 +641,9 @@
|
||||
|
||||
.action-close {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
47
cms/static/sass/views/_import.scss
vendored
47
cms/static/sass/views/_import.scss
vendored
@@ -2,7 +2,6 @@
|
||||
// ====================
|
||||
|
||||
.view-import {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
@@ -18,14 +17,18 @@
|
||||
// UI: export controls
|
||||
.export-controls {
|
||||
@extend %ui-window;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
padding: ($baseline*1.5) ($baseline*2);
|
||||
}
|
||||
|
||||
// UI: import form
|
||||
.import-form {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@extend %ui-window;
|
||||
|
||||
padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
|
||||
|
||||
> .title {
|
||||
@@ -53,12 +56,14 @@
|
||||
.action-choose-file {
|
||||
@extend %btn-primary-green;
|
||||
@extend %t-action1;
|
||||
|
||||
display: block;
|
||||
margin: $baseline 0;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
|
||||
.icon {
|
||||
@extend %t-icon2;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
@@ -75,12 +80,14 @@
|
||||
// UI: elem - file selection
|
||||
.wrapper-file-name {
|
||||
@extend %ui-well;
|
||||
|
||||
margin: $baseline 0;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
background-color: $gray-l4;
|
||||
|
||||
.title {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0;
|
||||
@@ -98,6 +105,7 @@
|
||||
.submit-button {
|
||||
@extend %btn-primary-green;
|
||||
@extend %t-action1;
|
||||
|
||||
display: none;
|
||||
margin-top: ($baseline*0.75);
|
||||
width: 100%;
|
||||
@@ -110,16 +118,18 @@
|
||||
// UI: upload progress
|
||||
.wrapper-status {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0);
|
||||
opacity: 1.0;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
// STATE: hidden
|
||||
&.is-hidden {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend %t-title4;
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
@@ -131,11 +141,13 @@
|
||||
.status-visual {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: flex-grid(1,9);
|
||||
width: flex-grid(1, 9);
|
||||
|
||||
.icon {
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
@extend %t-icon4;
|
||||
|
||||
position: absolute;
|
||||
top: ($baseline/2);
|
||||
left: $baseline;
|
||||
@@ -144,7 +156,7 @@
|
||||
|
||||
.status-detail {
|
||||
float: left;
|
||||
width: flex-grid(8,9);
|
||||
width: flex-grid(8, 9);
|
||||
margin-left: ($baseline*3);
|
||||
|
||||
.title {
|
||||
@@ -154,6 +166,7 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-base;
|
||||
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
@@ -161,6 +174,7 @@
|
||||
.item-progresspoint {
|
||||
@include clearfix();
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding-bottom: $baseline;
|
||||
@@ -173,7 +187,6 @@
|
||||
|
||||
// CASE: has actions
|
||||
&.has-actions {
|
||||
|
||||
.list-actions {
|
||||
display: none;
|
||||
|
||||
@@ -185,14 +198,13 @@
|
||||
|
||||
// TYPE: success
|
||||
&.item-progresspoint-success {
|
||||
|
||||
.item-progresspoint-success-date {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-complete {
|
||||
|
||||
.item-progresspoint-success-date {
|
||||
display: inline;
|
||||
}
|
||||
@@ -206,12 +218,12 @@
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-cog {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa-check {
|
||||
@@ -221,31 +233,29 @@
|
||||
|
||||
// STATE: started
|
||||
&.is-started {
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-cog {
|
||||
@include animation(fa-spin 2s infinite linear);
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: completed
|
||||
&.is-complete {
|
||||
|
||||
.fa-cog {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa-warning {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -263,15 +273,14 @@
|
||||
|
||||
// STATE: error
|
||||
&.has-error {
|
||||
|
||||
.fa-cog {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-warning {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -2,15 +2,14 @@
|
||||
// ====================
|
||||
|
||||
.view-howitworks {
|
||||
|
||||
&.not-signedin {
|
||||
|
||||
.wrapper-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
position: relative;
|
||||
@@ -19,7 +18,9 @@
|
||||
|
||||
.content {
|
||||
@extend %t-copy-base;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
@@ -51,7 +52,8 @@
|
||||
|
||||
// welcome content
|
||||
.wrapper-content-header {
|
||||
@include linear-gradient($blue-l1,$blue,$blue-d1);
|
||||
@include linear-gradient($blue-l1, $blue, $blue-d1);
|
||||
|
||||
padding-bottom: ($baseline*4);
|
||||
padding-top: ($baseline*4);
|
||||
}
|
||||
@@ -64,6 +66,7 @@
|
||||
h1 {
|
||||
@extend %t-title2;
|
||||
@extend %t-strong;
|
||||
|
||||
float: none;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
border-bottom: 1px solid $blue-l1;
|
||||
@@ -77,11 +80,13 @@
|
||||
|
||||
.logo {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-left: ($baseline/2);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
@extend %t-title4;
|
||||
|
||||
margin: 0;
|
||||
color: $blue-l3;
|
||||
}
|
||||
@@ -92,7 +97,8 @@
|
||||
background: $white;
|
||||
border: 4px solid $black;
|
||||
}
|
||||
.arrow_box:after, .arrow_box:before {
|
||||
|
||||
.arrow_box::after, .arrow_box::before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
@@ -102,14 +108,15 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.arrow_box:after {
|
||||
.arrow_box::after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-top-color: $white;
|
||||
border-width: 30px;
|
||||
left: 50%;
|
||||
margin-left: -($baseline*1.5);
|
||||
}
|
||||
.arrow_box:before {
|
||||
|
||||
.arrow_box::before {
|
||||
border-color: $transparent;
|
||||
border-top-color: $black;
|
||||
border-width: 36px;
|
||||
@@ -126,7 +133,6 @@
|
||||
}
|
||||
|
||||
.content-features {
|
||||
|
||||
.list-features {
|
||||
|
||||
}
|
||||
@@ -134,18 +140,21 @@
|
||||
// indiv features
|
||||
.feature {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
padding: 0 0 ($baseline*2) 0;
|
||||
|
||||
.img {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
width: flex-grid(3, 12);
|
||||
margin-right: flex-gutter();
|
||||
|
||||
a {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px ($baseline/10) $shadow-l1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@@ -157,14 +166,17 @@
|
||||
|
||||
.action-zoom {
|
||||
@include transition(bottom $tmg-f2 ease-in-out 0s);
|
||||
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
right: ($baseline/2);
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
|
||||
.icon {
|
||||
@include border-top-radius(3px);
|
||||
|
||||
@extend %t-icon4;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/2);
|
||||
background: $blue;
|
||||
@@ -177,7 +189,7 @@
|
||||
border-color: $blue;
|
||||
|
||||
.action-zoom {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
@@ -198,28 +210,34 @@
|
||||
h3 {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
> p {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
strong {
|
||||
@extend %t-strong;
|
||||
|
||||
color: $gray-d2;
|
||||
}
|
||||
|
||||
.list-proofpoints {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
|
||||
.proofpoint {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
border-radius: ($baseline/4);
|
||||
position: relative;
|
||||
top: 0;
|
||||
@@ -233,12 +251,14 @@
|
||||
.title {
|
||||
@extend %t-copy-base;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
box-shadow: 0 1px ($baseline/10) $shadow-l1;
|
||||
background: $blue-l5;
|
||||
top: -($baseline/5);
|
||||
@@ -263,7 +283,6 @@
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
|
||||
.img {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
@@ -276,7 +295,6 @@
|
||||
}
|
||||
|
||||
.list-proofpoints {
|
||||
|
||||
.proofpoint {
|
||||
float: right;
|
||||
width: flex-grid(3, 9);
|
||||
@@ -324,8 +342,10 @@
|
||||
|
||||
&.action-primary {
|
||||
@include blue-button;
|
||||
|
||||
@extend %t-action1;
|
||||
@extend %t-strong;
|
||||
|
||||
padding: ($baseline*0.75) ($baseline/2);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
@@ -333,6 +353,7 @@
|
||||
|
||||
&.action-secondary {
|
||||
@extend %t-action3;
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,70 +1,85 @@
|
||||
.maintenance-header {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.maintenance-content {
|
||||
padding: 3rem 0;
|
||||
|
||||
.maintenance-list {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
|
||||
.view-list-container {
|
||||
padding: 10px 15px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.view-name {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.view-desc {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
font-size: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.maintenance-form {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
|
||||
.result-list {
|
||||
height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.result{
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 15px;
|
||||
padding: 15px 30px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 13px;
|
||||
line-height: 9px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.field-radio div {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
div.error {
|
||||
color: #F00;
|
||||
color: #f00;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
div.head-output {
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
div.main-output {
|
||||
color: #0A0;
|
||||
color: #0a0;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
// --------------------
|
||||
%outline-item-header {
|
||||
@include clearfix();
|
||||
|
||||
line-height: 0;
|
||||
|
||||
// CASE: is-editable
|
||||
// TODO: abstract out
|
||||
.is-editable {
|
||||
|
||||
.incontext-editor-value, .incontext-editor-action-wrapper {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -21,7 +21,8 @@
|
||||
|
||||
.incontext-editor-open-action {
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
opacity: 0.0;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.incontext-editor-form {
|
||||
@@ -33,6 +34,7 @@
|
||||
// TOOD: abstract this out into a Sass placeholder
|
||||
.incontext-editor-input {
|
||||
@include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
|
||||
|
||||
width: 100%;
|
||||
background: none repeat scroll 0 0 $white;
|
||||
border: 0;
|
||||
@@ -40,16 +42,15 @@
|
||||
|
||||
// STATE: focus
|
||||
&:focus {
|
||||
box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset;
|
||||
box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.5) inset;
|
||||
color: $ui-action-primary-color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: hover/focus
|
||||
&:hover, &:focus {
|
||||
|
||||
.incontext-editor-open-action {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -91,7 +92,6 @@
|
||||
|
||||
// STATE: action will collapse all
|
||||
&.collapse-all {
|
||||
|
||||
.expand-all {
|
||||
display: none;
|
||||
}
|
||||
@@ -103,7 +103,6 @@
|
||||
|
||||
// STATE: action will expand all
|
||||
&.expand-all {
|
||||
|
||||
.collapse-all {
|
||||
display: none;
|
||||
}
|
||||
@@ -121,6 +120,7 @@
|
||||
.new-section-name,
|
||||
.new-subsection-name-input {
|
||||
@extend %t-copy-base;
|
||||
|
||||
display: inline-block;
|
||||
width: 515px;
|
||||
padding: ($baseline/4);
|
||||
@@ -130,9 +130,11 @@
|
||||
.new-subsection-name-input {
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
|
||||
.new-section-name-save,
|
||||
.new-subsection-name-save {
|
||||
@include blue-button();
|
||||
|
||||
margin: 0 5px;
|
||||
padding: 4px 20px 7px;
|
||||
color: $white;
|
||||
@@ -141,6 +143,7 @@
|
||||
.new-section-name-cancel,
|
||||
.new-subsection-name-cancel {
|
||||
@include white-button();
|
||||
|
||||
padding: 4px 20px 7px;
|
||||
color: $gray-l1;
|
||||
}
|
||||
@@ -149,6 +152,7 @@
|
||||
.new-subsection-item,
|
||||
.new-unit-item {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
width: 100%;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
border: 1px solid $gray-l3;
|
||||
@@ -181,13 +185,14 @@
|
||||
.status-release,
|
||||
.status-pacing {
|
||||
@extend %t-copy-base;
|
||||
|
||||
display: inline-block;
|
||||
color: $color-copy-base;
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
.status-actions {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -214,9 +219,11 @@
|
||||
|
||||
.status-actions {
|
||||
@extend %actions-list;
|
||||
|
||||
@include transition(opacity $tmg-f1 ease-in-out 0);
|
||||
|
||||
margin-left: ($baseline/4);
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,7 +237,6 @@
|
||||
|
||||
// UI: complex version of the outline
|
||||
.outline-complex {
|
||||
|
||||
.outline-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -274,7 +280,7 @@
|
||||
|
||||
// STATE: drag and drop
|
||||
.drop-target-prepend .draggable-drop-indicator-initial {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// STATE: was dropped
|
||||
@@ -300,6 +306,7 @@
|
||||
|
||||
.section-header-details {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(6, 9);
|
||||
|
||||
.icon, .wrapper-section-title {
|
||||
@@ -317,10 +324,10 @@
|
||||
}
|
||||
|
||||
.action-edit.action-inline {
|
||||
|
||||
.icon {
|
||||
@include margin-right(0);
|
||||
@include transform(none);
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -328,8 +335,10 @@
|
||||
|
||||
.section-header-actions {
|
||||
@include float(right);
|
||||
|
||||
width: flex-grid(3, 9);
|
||||
margin-top: -($baseline/4);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
.actions-list {
|
||||
@@ -359,13 +368,13 @@
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@extend %t-icon3;
|
||||
|
||||
color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: is-collapsed
|
||||
&.is-collapsed {
|
||||
|
||||
.section-content {
|
||||
@extend %outline-item-content-hidden;
|
||||
}
|
||||
@@ -397,6 +406,7 @@
|
||||
|
||||
.subsection-header-details {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(6, 9);
|
||||
|
||||
.icon, .wrapper-subsection-title {
|
||||
@@ -415,9 +425,9 @@
|
||||
}
|
||||
|
||||
.action-edit.action-inline {
|
||||
|
||||
.icon {
|
||||
@include transform(none);
|
||||
|
||||
margin-right: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -426,13 +436,16 @@
|
||||
|
||||
.subsection-header-actions {
|
||||
@include float(right);
|
||||
|
||||
width: flex-grid(3, 9);
|
||||
margin-top: -($baseline/4);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
.actions-list {
|
||||
@extend %actions-list;
|
||||
@extend %t-action2;
|
||||
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -458,13 +471,13 @@
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@extend %t-icon4;
|
||||
|
||||
color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: is-collapsed
|
||||
&.is-collapsed {
|
||||
|
||||
.subsection-content {
|
||||
@extend %outline-item-content-hidden;
|
||||
}
|
||||
@@ -479,6 +492,7 @@
|
||||
|
||||
.outline-unit {
|
||||
@include transition(margin $tmg-f2 linear 0s); // needed for drag and drop transitions
|
||||
|
||||
margin-left: $outline-indent-width;
|
||||
|
||||
// header
|
||||
@@ -488,14 +502,17 @@
|
||||
|
||||
.unit-header-details {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(6, 9);
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
|
||||
.unit-header-actions {
|
||||
@include float(right);
|
||||
|
||||
width: flex-grid(3, 9);
|
||||
margin-top: -($baseline/10);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
.actions-list {
|
||||
@@ -511,12 +528,14 @@
|
||||
|
||||
.button-new {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
padding: ($baseline/2) $baseline;
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -539,7 +558,6 @@
|
||||
// UI: drag and drop: section
|
||||
// --------------------
|
||||
.outline-section {
|
||||
|
||||
.ui-splint-indicator {
|
||||
height: ($baseline/10);
|
||||
margin-left: ($baseline/4);
|
||||
@@ -558,7 +576,6 @@
|
||||
|
||||
// UI: drag and drop: subsection
|
||||
.outline-subsection {
|
||||
|
||||
.ui-splint-indicator {
|
||||
height: ($baseline/10);
|
||||
margin-left: ($baseline*1.25);
|
||||
@@ -575,7 +592,6 @@
|
||||
|
||||
// // UI: drag and drop: unit
|
||||
.outline-unit {
|
||||
|
||||
.draggable-drop-indicator-before {
|
||||
top: -($baseline*0.75);
|
||||
}
|
||||
@@ -591,14 +607,17 @@
|
||||
|
||||
.draggable-drop-indicator {
|
||||
@extend %ui-depth3;
|
||||
|
||||
@include transition(opacity $tmg-f2 linear 0s);
|
||||
@include size(100%, auto);
|
||||
|
||||
position: absolute;
|
||||
border-top: 1px solid $blue-l1;
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
|
||||
.fa-caret-right {
|
||||
@extend %t-icon5;
|
||||
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -($baseline/4);
|
||||
@@ -620,9 +639,7 @@
|
||||
.wrapper-modal-window-bulkpublish-subsection,
|
||||
.wrapper-modal-window-bulkpublish-unit,
|
||||
.course-outline-modal {
|
||||
|
||||
.list-fields {
|
||||
|
||||
.field {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@@ -637,7 +654,9 @@
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
@include transition(color $tmg-f3 ease-in-out 0s);
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -649,7 +668,9 @@
|
||||
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
@@ -676,7 +697,6 @@
|
||||
|
||||
// CASE: select input
|
||||
.field-select {
|
||||
|
||||
.label, .input {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -693,7 +713,6 @@
|
||||
}
|
||||
|
||||
.edit-settings-grading {
|
||||
|
||||
.grading-type {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
@@ -704,7 +723,6 @@
|
||||
.bulkpublish-section-modal,
|
||||
.bulkpublish-subsection-modal,
|
||||
.bulkpublish-unit-modal {
|
||||
|
||||
.modal-introduction {
|
||||
color: $gray-d2;
|
||||
}
|
||||
@@ -727,6 +745,7 @@
|
||||
|
||||
.outline-subsection .subsection-title {
|
||||
@extend %t-title8;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
font-weight: 600;
|
||||
color: $gray-l2;
|
||||
@@ -740,11 +759,13 @@
|
||||
|
||||
.outline-unit .unit-title {
|
||||
@extend %t-title7;
|
||||
|
||||
color: $color-heading-base;
|
||||
}
|
||||
|
||||
.outline-unit .unit-status {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@@ -17,19 +17,23 @@
|
||||
.content-primary {
|
||||
@extend %ui-window;
|
||||
@extend .ui-col-wide;
|
||||
|
||||
padding: $baseline ($baseline*1.5);
|
||||
}
|
||||
|
||||
// messages - should be synced up with global messages in the future
|
||||
.message {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
@include border-top-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@extend %t-strong;
|
||||
|
||||
display: none;
|
||||
border-bottom: 2px solid $yellow;
|
||||
margin: 0 0 $baseline 0;
|
||||
@@ -67,7 +71,6 @@
|
||||
|
||||
// course details that should appear more like content than elements to change
|
||||
.is-not-editable {
|
||||
|
||||
label {
|
||||
|
||||
}
|
||||
@@ -75,6 +78,7 @@
|
||||
input, textarea {
|
||||
@extend %t-copy-lead1;
|
||||
@extend %t-strong;
|
||||
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: none;
|
||||
@@ -94,16 +98,22 @@
|
||||
.title-2 {
|
||||
width: flex-grid(4, 9);
|
||||
margin: 0;
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
width: flex-grid(5, 9);
|
||||
|
||||
@include float(right);
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
|
||||
@include text-align(right);
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
@@ -124,12 +134,15 @@
|
||||
|
||||
.instructions {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
@@ -137,11 +150,13 @@
|
||||
|
||||
.tip-inline {
|
||||
display: inline;
|
||||
|
||||
@include margin-left($baseline/4);
|
||||
}
|
||||
|
||||
.message-error {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/2);
|
||||
@@ -151,6 +166,7 @@
|
||||
// buttons
|
||||
.remove-item {
|
||||
@include white-button;
|
||||
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
}
|
||||
@@ -165,20 +181,22 @@
|
||||
|
||||
.show-data{
|
||||
.heading{
|
||||
border: 1px solid #E0E0E0;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.div-grade-requirements{
|
||||
border: 1px solid #E0E0E0;
|
||||
border-top: none;
|
||||
padding: 10px 15px;
|
||||
label{font-weight: 600;}
|
||||
input#entrance-exam-minimum-score-pct{
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.div-grade-requirements{
|
||||
border: 1px solid #e0e0e0;
|
||||
border-top: none;
|
||||
padding: 10px 15px;
|
||||
label{font-weight: 600;}
|
||||
|
||||
input#entrance-exam-minimum-score-pct{
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#heading-entrance-exam{
|
||||
@@ -197,12 +215,11 @@
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
@@ -214,8 +231,10 @@
|
||||
|
||||
label {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
@@ -225,8 +244,10 @@
|
||||
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
@include placeholder($gray-l4);
|
||||
@include size(100%,100%);
|
||||
@include size(100%, 100%);
|
||||
|
||||
padding: ($baseline/2);
|
||||
|
||||
&.long {
|
||||
@@ -240,7 +261,6 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
+ .tip {
|
||||
color: $gray-d1;
|
||||
}
|
||||
@@ -249,11 +269,12 @@
|
||||
|
||||
.input-minimum-grade {
|
||||
@include float(left);
|
||||
@include size(92%,100%);
|
||||
@include size(92%, 100%);
|
||||
}
|
||||
|
||||
.minimum-grade-percentage-sign {
|
||||
@include line-height(30);
|
||||
|
||||
padding-left: ($baseline/4);;
|
||||
}
|
||||
|
||||
@@ -275,14 +296,15 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
// enumerated/grouped lists
|
||||
&.enum {
|
||||
|
||||
.field-group {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-radius: 3px;
|
||||
background: $gray-l5;
|
||||
padding: $baseline;
|
||||
@@ -293,6 +315,7 @@
|
||||
|
||||
.actions {
|
||||
@include clearfix();
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
@@ -316,9 +339,9 @@
|
||||
|
||||
// specific fields - basic
|
||||
&.basic {
|
||||
|
||||
.list-input {
|
||||
@include clearfix();
|
||||
|
||||
padding: 0 ($baseline/2);
|
||||
|
||||
.field {
|
||||
@@ -327,7 +350,6 @@
|
||||
}
|
||||
|
||||
.is-not-editable {
|
||||
|
||||
input, textarea {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -378,6 +400,7 @@
|
||||
|
||||
.title {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 ($baseline/10) 0;
|
||||
padding: 0 ($baseline/2);
|
||||
|
||||
@@ -392,7 +415,9 @@
|
||||
|
||||
.link-courseURL {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -401,7 +426,7 @@
|
||||
color: $uxpl-blue-base;
|
||||
|
||||
&:hover {
|
||||
color: $uxpl-blue-hover-active;
|
||||
color: $uxpl-blue-hover-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -419,6 +444,7 @@
|
||||
|
||||
.icon {
|
||||
@extend %t-icon5;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
@@ -430,7 +456,6 @@
|
||||
|
||||
// specific fields - schedule
|
||||
&.schedule {
|
||||
|
||||
.list-input {
|
||||
margin-bottom: ($baseline*1.5);
|
||||
|
||||
@@ -441,6 +466,7 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
padding-bottom: ($baseline/2);
|
||||
|
||||
@@ -450,7 +476,6 @@
|
||||
}
|
||||
|
||||
.is-not-editable {
|
||||
|
||||
input, textarea {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -458,6 +483,7 @@
|
||||
|
||||
.field {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(3, 9);
|
||||
margin-bottom: ($baseline/4);
|
||||
margin-right: flex-gutter();
|
||||
@@ -469,6 +495,7 @@
|
||||
.tip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
}
|
||||
@@ -477,7 +504,6 @@
|
||||
|
||||
// specific fields - overview
|
||||
#field-course-overview {
|
||||
|
||||
#course-overview {
|
||||
height: ($baseline*20);
|
||||
}
|
||||
@@ -490,15 +516,16 @@
|
||||
|
||||
// specific fields - video
|
||||
#field-course-introduction-video {
|
||||
|
||||
.input-existing {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-radius: 3px;
|
||||
background: $gray-l5;
|
||||
padding: ($baseline/2);
|
||||
|
||||
.actions {
|
||||
@include clearfix();
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
@@ -518,7 +545,6 @@
|
||||
|
||||
// specific fields - course image
|
||||
#field-course-image, #field-banner-image, #field-video-thumbnail-image {
|
||||
|
||||
.current-course-image {
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: ($baseline/2) $baseline;
|
||||
@@ -545,6 +571,7 @@
|
||||
|
||||
.msg {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/2);
|
||||
color: $gray-d3;
|
||||
@@ -553,18 +580,21 @@
|
||||
|
||||
.wrapper-input {
|
||||
@include clearfix();
|
||||
width: flex-grid(9,9);
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
|
||||
.input {
|
||||
float: left;
|
||||
width: flex-grid(6,9);
|
||||
width: flex-grid(6, 9);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.action-upload-image {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
@include float(right);
|
||||
width: flex-grid(2,9);
|
||||
|
||||
width: flex-grid(2, 9);
|
||||
margin-top: ($baseline/4);
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
@@ -573,7 +603,6 @@
|
||||
|
||||
// specific fields - requirements
|
||||
&.requirements {
|
||||
|
||||
#field-course-effort {
|
||||
width: flex-grid(3, 9);
|
||||
}
|
||||
@@ -585,14 +614,16 @@
|
||||
|
||||
.grade-controls {
|
||||
@include clearfix();
|
||||
width: flex-grid(9,9);
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
}
|
||||
|
||||
.new-grade-button {
|
||||
@include box-sizing(border-box);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
||||
width: flex-grid(1,9);
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
width: flex-grid(1, 9);
|
||||
height: ($baseline*2);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -615,7 +646,8 @@
|
||||
|
||||
.grade-slider {
|
||||
@include box-sizing(border-box);
|
||||
width: flex-grid(8,9);
|
||||
|
||||
width: flex-grid(8, 9);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -630,6 +662,7 @@
|
||||
|
||||
li {
|
||||
@include font-size(9);
|
||||
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
width: 30px;
|
||||
@@ -710,6 +743,7 @@
|
||||
|
||||
.remove-button {
|
||||
@extend %t-action5;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
@@ -741,12 +775,14 @@
|
||||
.letter-grade {
|
||||
@extend %t-copy-base;
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
margin: 5px 15px 0 0;
|
||||
}
|
||||
|
||||
.range {
|
||||
@include font-size(10);
|
||||
|
||||
display: block;
|
||||
margin-right: ($baseline*0.75);
|
||||
line-height: 12px;
|
||||
@@ -760,8 +796,8 @@
|
||||
width: 2px;
|
||||
background-color: $white;
|
||||
box-shadow: -1px 0 3px rgba(0,0,0,0.1);
|
||||
|
||||
cursor: ew-resize;
|
||||
|
||||
@include transition(none);
|
||||
|
||||
&:hover {
|
||||
@@ -777,7 +813,6 @@
|
||||
|
||||
// specific fields - grading rules
|
||||
&.grade-rules {
|
||||
|
||||
#field-course-grading-graceperiod {
|
||||
width: flex-grid(3, 9);
|
||||
}
|
||||
@@ -789,9 +824,7 @@
|
||||
}
|
||||
|
||||
&.assignment-types {
|
||||
|
||||
.list-input {
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -799,6 +832,7 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
margin-bottom: ($baseline*1.5);
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
@@ -842,12 +876,14 @@
|
||||
&.course-learning-info {
|
||||
.list-input {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.course-settings-learning-fields {
|
||||
.field {
|
||||
.input-learning-info {
|
||||
width: flex-grid(10, 12);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
padding-bottom: 3px;
|
||||
line-height: 3.5rem;
|
||||
@@ -874,19 +910,23 @@
|
||||
.course-instructor-details-fields {
|
||||
.field {
|
||||
width: flex-grid(2, 6);
|
||||
|
||||
&.field-course-instructor-bio {
|
||||
width: flex-grid(6, 6);
|
||||
}
|
||||
|
||||
&.current-instructor-image {
|
||||
width: flex-grid(6, 6);
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
.wrapper-instructor-image {
|
||||
margin: 15px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -894,6 +934,7 @@
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
margin-bottom: ($baseline*1.5);
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
@@ -939,6 +980,7 @@
|
||||
|
||||
.msg {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/2);
|
||||
color: $gray-l5;
|
||||
@@ -947,18 +989,20 @@
|
||||
|
||||
.wrapper-input {
|
||||
@include clearfix();
|
||||
width: flex-grid(9,9);
|
||||
|
||||
width: flex-grid(9, 9);
|
||||
|
||||
.input {
|
||||
float: left;
|
||||
width: flex-grid(6,9);
|
||||
width: flex-grid(6, 9);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.action-upload-instructor-image {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
float: right;
|
||||
width: flex-grid(2,9);
|
||||
width: flex-grid(2, 9);
|
||||
margin-top: ($baseline/4);
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
@@ -981,13 +1025,13 @@
|
||||
|
||||
// specific fields - advanced settings
|
||||
&.advanced-policies {
|
||||
|
||||
.wrapper-options {
|
||||
margin: (-$baseline/2) 0 ($baseline/2) 0;
|
||||
text-align: right;
|
||||
|
||||
.wrapper-deprecated-setting {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: .5;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -1026,15 +1070,16 @@
|
||||
|
||||
.course-advanced-policy-list-item {
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1044,9 +1089,8 @@
|
||||
}
|
||||
|
||||
input.error {
|
||||
|
||||
& + .tip {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1056,9 +1100,9 @@
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: flex-grid(3, 9);
|
||||
margin-right: flex-gutter();
|
||||
.key {
|
||||
width: flex-grid(3, 9);
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.value {
|
||||
@@ -1091,9 +1135,13 @@
|
||||
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
|
||||
.CodeMirror {
|
||||
@extend %t-copy-base;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px 2px $shadow-l1 inset;
|
||||
|
||||
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
|
||||
|
||||
padding: 5px 8px;
|
||||
border: 1px solid $mediumGrey;
|
||||
border-radius: 2px;
|
||||
@@ -1106,6 +1154,7 @@
|
||||
|
||||
&.CodeMirror-focused {
|
||||
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
|
||||
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@@ -1116,7 +1165,6 @@
|
||||
.CodeMirror-scroll {
|
||||
@include margin-left(-30px);
|
||||
@include margin-right(0);
|
||||
|
||||
@include padding-left(30px);
|
||||
@include padding-right(0);
|
||||
}
|
||||
@@ -1128,7 +1176,6 @@
|
||||
|
||||
// editor color changes just for JSON
|
||||
.CodeMirror-lines {
|
||||
|
||||
.cm-string {
|
||||
color: #cb9c40;
|
||||
}
|
||||
@@ -1146,9 +1193,7 @@
|
||||
}
|
||||
|
||||
.wrapper-modal-window {
|
||||
|
||||
.validation-error-modal-content {
|
||||
|
||||
.error-header {
|
||||
p {
|
||||
strong {
|
||||
@@ -1195,7 +1240,9 @@
|
||||
|
||||
.field-radio {
|
||||
display: inline-block;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
.content-primary,
|
||||
.content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -16,6 +17,7 @@
|
||||
|
||||
.add-pages {
|
||||
@extend %no-content;
|
||||
|
||||
margin: ($baseline*1.5) 0;
|
||||
color: $gray-d1;
|
||||
}
|
||||
@@ -26,6 +28,7 @@
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-base;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -39,7 +42,6 @@
|
||||
top: 6px;
|
||||
|
||||
.actions-list {
|
||||
|
||||
.action-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -50,6 +52,7 @@
|
||||
.action-button,
|
||||
.toggle-actions-view {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
background: none;
|
||||
@@ -134,12 +137,14 @@
|
||||
|
||||
.wrapper-component-editor {
|
||||
@extend %ui-depth4;
|
||||
|
||||
position: relative;
|
||||
background: $lightBluishGrey2;
|
||||
}
|
||||
|
||||
.component-editor {
|
||||
@include edit-box;
|
||||
|
||||
box-shadow: none;
|
||||
display: none;
|
||||
padding: 0;
|
||||
@@ -147,17 +152,17 @@
|
||||
|
||||
//Overrides general edit-box mixin
|
||||
.row {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// This duplicates the styling from Unit page editing
|
||||
.module-actions {
|
||||
box-shadow: inset 0 1px 1px $shadow;
|
||||
padding: 0px 0 10px 10px;
|
||||
padding: 0 0 10px 10px;
|
||||
background-color: $gray-l6;
|
||||
|
||||
.save-button {
|
||||
margin: ($baseline/2) 8px 0 0;
|
||||
margin: ($baseline/2) 8px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -204,7 +209,9 @@
|
||||
|
||||
.drag-handle {
|
||||
@extend %ui-depth1;
|
||||
|
||||
@include right(0);
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
@@ -227,6 +234,7 @@
|
||||
// uses similar styling as assets.scss, unit.scss
|
||||
.wrapper-component-action-header {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: $baseline/4 $baseline/2;
|
||||
@@ -241,9 +249,11 @@
|
||||
.component-actions,
|
||||
.course-nav-item-actions {
|
||||
display: inline-block;
|
||||
|
||||
@include float(right);
|
||||
@include margin-right($baseline*2);
|
||||
padding: 8px 0px;
|
||||
|
||||
padding: 8px 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
@@ -253,6 +263,7 @@
|
||||
|
||||
.action-button {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: block;
|
||||
padding: 0 $baseline/2;
|
||||
width: auto;
|
||||
@@ -296,7 +307,9 @@
|
||||
|
||||
&.is-fixed {
|
||||
@extend %ui-disabled;
|
||||
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -310,7 +323,8 @@
|
||||
|
||||
.title-sub {
|
||||
@extend %t-title7;
|
||||
color: $gray-l2;
|
||||
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -335,7 +349,9 @@
|
||||
|
||||
.xblock-student_view {
|
||||
@include transition(background-color $tmg-s3 linear 0s);
|
||||
|
||||
@extend %t-title4;
|
||||
|
||||
padding: 20px 20px 22px;
|
||||
background: $white;
|
||||
}
|
||||
@@ -368,6 +384,7 @@
|
||||
|
||||
.static-page-details {
|
||||
@extend %ui-window;
|
||||
|
||||
padding: 32px 40px;
|
||||
|
||||
.row {
|
||||
@@ -377,13 +394,16 @@
|
||||
|
||||
.page-display-name-input {
|
||||
@extend %t-copy-lead1;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-contents {
|
||||
@include box-sizing(border-box);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
|
||||
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
padding: 15px;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
// ====================
|
||||
|
||||
.view-textbooks {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
@@ -12,11 +11,13 @@
|
||||
|
||||
.no-textbook-content {
|
||||
@extend %no-content;
|
||||
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
.textbook {
|
||||
@extend %ui-window;
|
||||
|
||||
position: relative;
|
||||
|
||||
.view-textbook {
|
||||
@@ -30,12 +31,15 @@
|
||||
.textbook-title {
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
@include margin-right($baseline*14);
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(rotate .15s ease-in-out .25s);
|
||||
|
||||
@extend %t-action1;
|
||||
|
||||
display: inline-block;
|
||||
width: ($baseline*0.75);
|
||||
vertical-align: text-bottom;
|
||||
@@ -58,6 +62,7 @@
|
||||
|
||||
.chapter {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
margin-bottom: ($baseline/4);
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
|
||||
@@ -81,9 +86,11 @@
|
||||
|
||||
.actions {
|
||||
@include transition(opacity .15s .25s ease-in-out);
|
||||
opacity: 0.0;
|
||||
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: $baseline;
|
||||
|
||||
@include right($baseline);
|
||||
|
||||
.action {
|
||||
@@ -92,11 +99,13 @@
|
||||
|
||||
.view {
|
||||
@include blue-button;
|
||||
|
||||
@extend %t-action4;
|
||||
}
|
||||
|
||||
.edit {
|
||||
@include blue-button;
|
||||
|
||||
@extend %t-action4;
|
||||
}
|
||||
|
||||
@@ -110,182 +119,191 @@
|
||||
}
|
||||
|
||||
&:hover .actions {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.edit-textbook {
|
||||
.edit-textbook {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
background: $white;
|
||||
|
||||
.wrapper-form {
|
||||
padding: $baseline ($baseline*1.5);
|
||||
}
|
||||
.wrapper-form {
|
||||
padding: $baseline ($baseline*1.5);
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
fieldset {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
box-shadow: inset 0 1px 2px $shadow;
|
||||
border-top: 1px solid $gray-l1;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
background: $gray-l6;
|
||||
|
||||
.action {
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// add a chapter is below with chapters styling
|
||||
.actions {
|
||||
box-shadow: inset 0 1px 2px $shadow;
|
||||
border-top: 1px solid $gray-l1;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
background: $gray-l6;
|
||||
|
||||
.action {
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// add a chapter is below with chapters styling
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include grey-button;
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@include transition(all .15s);
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include grey-button;
|
||||
@include transition(all .15s);
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
text-transform: uppercase;
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
margin: ($baseline) 0 ($baseline/2) 0;
|
||||
color: $gray;
|
||||
|
||||
|
||||
strong {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chapters-fields,
|
||||
.textbook-fields {
|
||||
@extend %cont-no-list;
|
||||
|
||||
}
|
||||
.field {
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
margin: ($baseline) 0 ($baseline/2) 0;
|
||||
color: $gray;
|
||||
|
||||
|
||||
strong {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chapters-fields,
|
||||
.textbook-fields {
|
||||
@extend %cont-no-list;
|
||||
|
||||
.field {
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
@extend %t-strong;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label:after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
&.required {
|
||||
label {
|
||||
@extend %t-strong;
|
||||
}
|
||||
|
||||
label, input, textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.add-textbook-name label {
|
||||
@extend %t-title5;
|
||||
}
|
||||
|
||||
|
||||
//this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
|
||||
&.long {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.short {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
+ .tip {
|
||||
color: $gray-d1;
|
||||
label::after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.long {
|
||||
height: ($baseline*5);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/4);
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
& + label {
|
||||
display: inline-block;
|
||||
label, input, textarea {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
}
|
||||
label {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
&.error {
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.add-textbook-name label {
|
||||
@extend %t-title5;
|
||||
}
|
||||
|
||||
|
||||
//this section is borrowed from _account.scss - we should clean up and unify later
|
||||
input, textarea {
|
||||
@extend %t-copy-base;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
|
||||
&.long {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.short {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ .tip {
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.long {
|
||||
height: ($baseline*5);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/4);
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
& + label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-d1;
|
||||
}
|
||||
|
||||
&.error {
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
@@ -293,65 +311,76 @@
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
width: 46%;
|
||||
border-bottom: none;
|
||||
@include margin(0, ($baseline*0.75), 0, 0);
|
||||
padding: ($baseline/4) 0 0 0;
|
||||
@include float(left);
|
||||
position: relative;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.action-upload {
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
width: 46%;
|
||||
border-bottom: none;
|
||||
|
||||
@include margin(0, ($baseline*0.75), 0, 0);
|
||||
|
||||
padding: ($baseline/4) 0 0 0;
|
||||
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-upload {
|
||||
@extend %ui-btn-flat-outline;
|
||||
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.action-close {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
|
||||
.action-close {
|
||||
@include transition(color $tmg-f2 ease-in-out);
|
||||
@extend %t-action1;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-top: ($baseline*2);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: $blue-l3;
|
||||
@extend %t-action1;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-top: ($baseline*2);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: $blue-l3;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-add-chapter {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: ($baseline/2);
|
||||
.action-add-chapter {
|
||||
@extend %ui-btn-flat-outline;
|
||||
@extend %t-action1;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: ($baseline*1.5) 0 0 0;
|
||||
padding: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
@extend .ui-col-narrow;
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
// studio - views - unit
|
||||
// ====================
|
||||
// .view-unit styles will go here once we split it from container
|
||||
|
||||
.view-unit {
|
||||
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
// ====================
|
||||
|
||||
.view-updates {
|
||||
|
||||
.course-info-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
@@ -42,6 +41,7 @@
|
||||
|
||||
&.editing {
|
||||
@extend %ui-depth4;
|
||||
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
@@ -56,12 +56,14 @@
|
||||
h1 {
|
||||
@extend %t-title4;
|
||||
@extend %t-light;
|
||||
|
||||
float: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %t-title7;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: 18px;
|
||||
line-height: 30px;
|
||||
color: #646464;
|
||||
@@ -71,30 +73,32 @@
|
||||
h3 {
|
||||
@extend %t-title6;
|
||||
@extend %t-strong;
|
||||
|
||||
margin: 34px 0 11px;
|
||||
}
|
||||
|
||||
.display-date {
|
||||
padding-right: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.message-error {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
|
||||
&:before {
|
||||
content: "\f06a";
|
||||
font-family: FontAwesome;
|
||||
color: #fdbc56;
|
||||
padding: 5px;
|
||||
}
|
||||
&::before {
|
||||
content: "\f06a";
|
||||
font-family: FontAwesome;
|
||||
color: #fdbc56;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.update-contents {
|
||||
p {
|
||||
@extend %t-copy-base;
|
||||
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@@ -128,6 +132,7 @@
|
||||
|
||||
pre {
|
||||
@extend %t-copy-base;
|
||||
|
||||
margin: 1em 0;
|
||||
color: $baseFontColor;
|
||||
font-family: monospace, serif;
|
||||
@@ -151,6 +156,7 @@
|
||||
|
||||
.new-update-form {
|
||||
@include edit-box;
|
||||
|
||||
margin-bottom: 24px;
|
||||
padding: 30px;
|
||||
border: none;
|
||||
@@ -166,8 +172,10 @@
|
||||
.edit-button,
|
||||
.delete-button {
|
||||
@include white-button();
|
||||
|
||||
@extend %t-action4;
|
||||
@extend %t-regular;
|
||||
|
||||
float: left;
|
||||
padding: 3px 10px 4px;
|
||||
margin-left: 7px;
|
||||
@@ -181,25 +189,31 @@
|
||||
}
|
||||
|
||||
.course-handouts {
|
||||
@extend %ui-window;
|
||||
width: 30%;
|
||||
padding: 20px 30px;
|
||||
margin: 0;
|
||||
@include border-radius(0, 3px, 3px, 0);
|
||||
@include border-left(none);
|
||||
background: $uxpl-light-blue-base;
|
||||
@extend %ui-window;
|
||||
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
width: 30%;
|
||||
padding: 20px 30px;
|
||||
margin: 0;
|
||||
|
||||
@include border-radius(0, 3px, 3px, 0);
|
||||
@include border-left(none);
|
||||
|
||||
background: $uxpl-light-blue-base;
|
||||
|
||||
.title {
|
||||
@extend %t-title4;
|
||||
@extend %t-light;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
@include white-button;
|
||||
|
||||
@extend %t-action4;
|
||||
@extend %t-regular;
|
||||
float: right;
|
||||
|
||||
float: right;
|
||||
padding: 3px 10px 4px;
|
||||
margin-left: 7px;
|
||||
|
||||
@@ -220,7 +234,9 @@
|
||||
|
||||
.edit-handouts-form {
|
||||
@extend %ui-depth4;
|
||||
|
||||
@include edit-box;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
|
||||
// ELEM: content
|
||||
.content {
|
||||
|
||||
.introduction {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
}
|
||||
}
|
||||
@@ -32,7 +32,6 @@
|
||||
|
||||
// CASE: notice has actions {
|
||||
&.has-actions {
|
||||
|
||||
.msg, .list-actions {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -54,6 +53,7 @@
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-green;
|
||||
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
}
|
||||
@@ -63,7 +63,6 @@
|
||||
|
||||
// ELEM: new user form
|
||||
.wrapper-create-user {
|
||||
|
||||
&.is-shown {
|
||||
height: ($baseline*15);
|
||||
}
|
||||
@@ -75,10 +74,11 @@
|
||||
}
|
||||
|
||||
.user-list {
|
||||
|
||||
.user-item {
|
||||
@extend %ui-window;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
width: flex-grid(9, 9);
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
@@ -96,16 +96,18 @@
|
||||
// ELEM: item - flag
|
||||
.flag-role {
|
||||
@extend %ui-badge;
|
||||
|
||||
color: $white;
|
||||
|
||||
.msg-you {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-left: ($baseline/5);
|
||||
text-transform: none;
|
||||
color: $pink-l3;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
border-bottom-color: $pink-d4;
|
||||
}
|
||||
|
||||
@@ -128,6 +130,7 @@
|
||||
// ELEM: item - metadata
|
||||
.item-metadata {
|
||||
width: flex-grid(4, 9);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
.user-username, .user-email {
|
||||
@@ -137,9 +140,12 @@
|
||||
|
||||
.user-username {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
|
||||
@extend %t-title4;
|
||||
@extend %t-strong;
|
||||
|
||||
@include margin(0, ($baseline/2), ($baseline/10), 0);
|
||||
|
||||
color: $gray-d4;
|
||||
}
|
||||
|
||||
@@ -166,8 +172,10 @@
|
||||
.add-admin-role {
|
||||
@include blue-button;
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
}
|
||||
@@ -175,13 +183,17 @@
|
||||
.remove-admin-role {
|
||||
@include grey-button;
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline;
|
||||
}
|
||||
|
||||
.notoggleforyou {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
color: $gray-l2;
|
||||
}
|
||||
}
|
||||
@@ -191,7 +203,7 @@
|
||||
|
||||
// STATE: disabled
|
||||
&.is-disabled {
|
||||
opacity: 0.0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -211,7 +223,6 @@
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
|
||||
.user-username {
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
.view-video-uploads {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
|
||||
.fa-cloud-upload {
|
||||
@extend %t-copy;
|
||||
|
||||
vertical-align: bottom;
|
||||
margin-right: ($baseline/5);
|
||||
}
|
||||
@@ -15,6 +14,7 @@
|
||||
|
||||
.file-upload-form {
|
||||
@include clearfix();
|
||||
|
||||
width: 100%;
|
||||
|
||||
.file-drop-area {
|
||||
@@ -22,7 +22,9 @@
|
||||
border-radius: ($baseline/5);
|
||||
padding: ($baseline*1.25);
|
||||
background: $white;
|
||||
|
||||
@include text-align(center);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
@@ -39,11 +41,13 @@
|
||||
.fa-cloud-upload{
|
||||
font-size:7em;
|
||||
vertical-align: top;
|
||||
|
||||
@include margin-right(0.1em);
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: inline-block;
|
||||
|
||||
@include text-align(left);
|
||||
|
||||
.upload-text-link {
|
||||
@@ -82,6 +86,7 @@
|
||||
.video-detail-name {
|
||||
@extend %cont-truncated;
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: ($baseline/2);
|
||||
font-size: 90%;
|
||||
}
|
||||
@@ -120,6 +125,7 @@
|
||||
|
||||
&:hover {
|
||||
@include transition(all $tmg-f3);
|
||||
|
||||
background: $white;
|
||||
}
|
||||
|
||||
@@ -168,7 +174,6 @@
|
||||
}
|
||||
|
||||
.assets-library {
|
||||
|
||||
.js-table-body .video-id-col {
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -176,6 +181,7 @@
|
||||
.assets-title {
|
||||
display: inline-block;
|
||||
width: flex-grid(5, 9);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
|
||||
@@ -217,7 +223,7 @@
|
||||
}
|
||||
|
||||
.video-head-col.thumbnail-col {
|
||||
width: 17% !important;
|
||||
width: 17% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,6 +232,7 @@
|
||||
display: table-row;
|
||||
white-space: nowrap;
|
||||
color: $red;
|
||||
|
||||
.icon {
|
||||
margin: ($baseline*0.75) ($baseline/4) 0 ($baseline/2);
|
||||
}
|
||||
@@ -257,6 +264,7 @@
|
||||
.requirements-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.requirements-instructions {
|
||||
font-size: 15px;
|
||||
font-family: "Open Sans";
|
||||
@@ -264,6 +272,7 @@
|
||||
color: $gray-d2;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.video-duration {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -277,6 +286,7 @@
|
||||
&.focused {
|
||||
img, .video-duration {
|
||||
@include transition(all 0.3s linear);
|
||||
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
@@ -287,6 +297,7 @@
|
||||
|
||||
img {
|
||||
@include transition(all 0.5s linear);
|
||||
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
@@ -296,7 +307,7 @@
|
||||
}
|
||||
|
||||
&.upload .thumbnail-action {
|
||||
color: $blue;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&.progress .thumbnail-action {
|
||||
@@ -335,7 +346,9 @@
|
||||
top: 50%;
|
||||
left: 5px;;
|
||||
right: 5px;
|
||||
|
||||
@include transform(translateY(-50%));
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -354,7 +367,9 @@
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 1px;
|
||||
|
||||
@include right(1px);
|
||||
|
||||
width: auto;
|
||||
min-width: 25%;
|
||||
color: white;
|
||||
@@ -363,11 +378,11 @@
|
||||
}
|
||||
|
||||
&.focused {
|
||||
box-shadow: 0 0 ($baseline/5) 1px $blue;
|
||||
box-shadow: 0 0 ($baseline/5) 1px $blue;
|
||||
}
|
||||
|
||||
&.error {
|
||||
box-shadow: 0 0 ($baseline/5) 1px $red;
|
||||
box-shadow: 0 0 ($baseline/5) 1px $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,104 +17,104 @@ $headings-base-font-family: inherit;
|
||||
$headings-base-color: $gray-d2;
|
||||
|
||||
%reset-headings {
|
||||
margin: 0;
|
||||
font-weight: $headings-font-weight-normal;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: $headings-base-color;
|
||||
margin: 0;
|
||||
font-weight: $headings-font-weight-normal;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: $headings-base-color;
|
||||
}
|
||||
|
||||
%hd-1 {
|
||||
margin-bottom: 1.41575em;
|
||||
font-size: 2em;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 1.41575em;
|
||||
font-size: 2em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
%hd-2 {
|
||||
font-size: 1.1125em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.1125em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
%hd-3 {
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.35em;
|
||||
font-weight: $headings-font-weight-normal;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.35em;
|
||||
font-weight: $headings-font-weight-normal;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
%hd-4 {
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.25em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.25em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
%hd-5 {
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.1em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1.1em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
%hd-6 {
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: ($baseline / 2);
|
||||
font-size: 1em;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
%hd-7 {
|
||||
margin-bottom: ($baseline / 4);
|
||||
font-size: 14px;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.6em;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: ($baseline / 4);
|
||||
font-size: 14px;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.6em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
%hd-8 {
|
||||
margin-bottom: ($baseline / 8);
|
||||
font-size: 12px;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: ($baseline / 8);
|
||||
font-size: 12px;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.wrapper-xblock .xblock-render .xblock .xblock-render .xblock {
|
||||
.hd-1,
|
||||
.hd-2,
|
||||
.hd-3,
|
||||
.hd-4,
|
||||
.hd-5,
|
||||
.hd-6,
|
||||
.hd-7,
|
||||
.hd-8 {
|
||||
@extend %reset-headings;
|
||||
}
|
||||
|
||||
.hd-1,
|
||||
.hd-2,
|
||||
.hd-3,
|
||||
.hd-4,
|
||||
.hd-5,
|
||||
.hd-6,
|
||||
.hd-7,
|
||||
.hd-8 {
|
||||
@extend %reset-headings;
|
||||
|
||||
// ----------------------------
|
||||
// #CANNED
|
||||
// ----------------------------
|
||||
// canned heading classes
|
||||
@for $i from 1 through $headings-count {
|
||||
.hd-#{$i} {
|
||||
@extend %hd-#{$i};
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %hd-2;
|
||||
|
||||
// ----------------------------
|
||||
// #CANNED
|
||||
// ----------------------------
|
||||
// canned heading classes
|
||||
@for $i from 1 through $headings-count {
|
||||
.hd-#{$i} {
|
||||
@extend %hd-#{$i};
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %hd-2;
|
||||
font-weight: $headings-font-weight-normal;
|
||||
// override external modules and xblocks that use inline CSS
|
||||
text-transform: initial;
|
||||
}
|
||||
font-weight: $headings-font-weight-normal;
|
||||
// override external modules and xblocks that use inline CSS
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
@include transition(background-color 0.15s, box-shadow 0.15s);
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
|
||||
@@ -139,14 +139,14 @@
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin green-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $uxpl-green-base;
|
||||
border-radius: 3px;
|
||||
background-color: $uxpl-green-base;
|
||||
@@ -167,7 +167,7 @@
|
||||
|
||||
@mixin blue-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $uxpl-blue-base;
|
||||
border-radius: 3px;
|
||||
background-color: $uxpl-blue-base;
|
||||
@@ -188,7 +188,7 @@
|
||||
|
||||
@mixin red-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $red-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $red;
|
||||
@@ -209,7 +209,7 @@
|
||||
|
||||
@mixin pink-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $pink-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $pink;
|
||||
@@ -231,7 +231,7 @@
|
||||
@mixin orange-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $orange-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $orange;
|
||||
@@ -253,12 +253,12 @@
|
||||
@mixin white-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $mediumGrey;
|
||||
border-radius: 3px;
|
||||
background-color: #dfe5eb;
|
||||
color: rgb(92, 103, 122);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgb(222, 236, 247);
|
||||
@@ -268,8 +268,8 @@
|
||||
|
||||
@mixin grey-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
background-color: #d1dae3;
|
||||
@@ -298,7 +298,7 @@
|
||||
|
||||
// only needed for course updates
|
||||
@mixin edit-box {
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
|
||||
padding: 15px 20px;
|
||||
border-radius: 3px;
|
||||
background-color: $lightBluishGrey2;
|
||||
@@ -344,8 +344,8 @@
|
||||
|
||||
// sunsetted mixins
|
||||
@mixin active {
|
||||
@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));
|
||||
box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@@ -59,11 +59,13 @@
|
||||
:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,18 +115,21 @@
|
||||
%ui-wrapper {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// layout placeholders
|
||||
.ui-col-wide {
|
||||
width: flex-grid(9, 12);
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.ui-col-narrow {
|
||||
width: flex-grid(3, 12);
|
||||
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
@@ -132,6 +137,7 @@
|
||||
// ====================
|
||||
%ui-window {
|
||||
@include clearfix();
|
||||
|
||||
border-radius: ($baseline/10);
|
||||
box-shadow: 0 1px 1px $shadow-l2;
|
||||
margin-bottom: $baseline;
|
||||
@@ -172,7 +178,6 @@
|
||||
// ====================
|
||||
// extends - UI - utility - first child clearing
|
||||
%wipe-first-child {
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
@@ -182,7 +187,6 @@
|
||||
|
||||
// extends - UI - utility - last child clearing
|
||||
%wipe-last-child {
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
@@ -195,6 +199,7 @@
|
||||
%ui-btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color $tmg-f2 ease-in-out 0s, border-color $tmg-f2 ease-in-out 0s, background $tmg-f2 ease-in-out 0s, box-shadow $tmg-f2 ease-in-out 0s);
|
||||
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -231,6 +236,7 @@
|
||||
@extend %ui-btn;
|
||||
@extend %ui-btn-pill;
|
||||
@extend %t-strong;
|
||||
|
||||
padding:($baseline/2) $baseline;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
@@ -255,6 +261,7 @@
|
||||
%ui-btn-secondary {
|
||||
@extend %ui-btn;
|
||||
@extend %ui-btn-pill;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding:($baseline/2) $baseline;
|
||||
@@ -265,8 +272,10 @@
|
||||
|
||||
%ui-btn-flat-outline {
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %t-strong;
|
||||
@extend %t-action4;
|
||||
|
||||
text-align: center;
|
||||
border-radius: ($baseline/4);
|
||||
border: 1px solid $uxpl-blue-base;
|
||||
@@ -282,18 +291,21 @@
|
||||
|
||||
&.is-disabled,
|
||||
&[disabled="disabled"]{
|
||||
border: 1px solid $gray-l2;
|
||||
background-color: $gray-l4;
|
||||
color: $gray-l2;
|
||||
pointer-events: none;
|
||||
border: 1px solid $gray-l2;
|
||||
background-color: $gray-l4;
|
||||
color: $gray-l2;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// button with no button shell until hover for understated actions
|
||||
%ui-btn-non {
|
||||
@include transition(all .15s);
|
||||
|
||||
@extend %ui-btn-pill;
|
||||
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
@@ -326,6 +338,7 @@
|
||||
|
||||
%no-content {
|
||||
@extend %ui-well;
|
||||
|
||||
padding: ($baseline*2);
|
||||
background-color: $gray-l4;
|
||||
text-align: center;
|
||||
@@ -335,6 +348,7 @@
|
||||
.action {
|
||||
@extend %btn-primary-green;
|
||||
@extend %t-action3;
|
||||
|
||||
margin-left: $baseline;
|
||||
|
||||
.icon {
|
||||
@@ -345,8 +359,10 @@
|
||||
|
||||
.ui-loading {
|
||||
@include animation(fadeIn $tmg-f2 linear 1);
|
||||
|
||||
@extend %ui-well;
|
||||
@extend %t-copy-base;
|
||||
|
||||
opacity: .6;
|
||||
background-color: $white;
|
||||
padding: ($baseline*1.5) $baseline;
|
||||
@@ -354,6 +370,7 @@
|
||||
|
||||
.spin {
|
||||
@extend %anim-rotateCW;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -393,18 +410,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
|
||||
@@ -417,6 +434,7 @@
|
||||
// ====================
|
||||
%cont-truncated {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -9,9 +9,11 @@
|
||||
|
||||
.nav-item {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
a, a:visited {
|
||||
a,
|
||||
a:visited {
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
|
||||
@@ -22,6 +24,7 @@
|
||||
|
||||
.fa-angle-right {
|
||||
@include margin-left($baseline/4);
|
||||
|
||||
display: inline-block;
|
||||
color: $base-font-color;
|
||||
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
@include margin-right(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-small {
|
||||
@extend %btn-small;
|
||||
}
|
||||
@@ -53,6 +54,7 @@
|
||||
// ----------------------------
|
||||
.btn-default {
|
||||
@extend %btn-shims;
|
||||
|
||||
border-color: $btn-default-border-color;
|
||||
background: $btn-default-background;
|
||||
color: $btn-default-color;
|
||||
@@ -88,6 +90,7 @@
|
||||
// ----------------------------
|
||||
.btn-brand {
|
||||
@extend %btn-shims;
|
||||
|
||||
border-color: $btn-brand-border-color;
|
||||
background: $btn-brand-background;
|
||||
color: $btn-brand-color;
|
||||
@@ -118,4 +121,3 @@
|
||||
color: $btn-brand-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
|
||||
.post-type-label {
|
||||
@include margin-right($baseline);
|
||||
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
|
||||
.post-options & {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ set -e
|
||||
# Violations thresholds for failing the build
|
||||
export PYLINT_THRESHOLD=3600
|
||||
export ESLINT_THRESHOLD=9134
|
||||
export STYLELINT_THRESHOLD=18416
|
||||
export STYLELINT_THRESHOLD=15579
|
||||
|
||||
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
|
||||
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
|
||||
|
||||
Reference in New Issue
Block a user