Skip to content

E
edx-platform
Commit b4cf4f49 by Brian Talbot
Options

Merge pull request #989 from edx/talbs/studio-sassplaceholders 

Studio: Switch class-based Sass @extend rules to use Sass placeholder syntax
parents 35abac47 88159623
Showing with 329 additions and 329 deletions
cms/static/sass/_base.scss
...@@ -8,7 +8,7 @@ html { ...@@ -8,7 +8,7 @@ html {
} }
body { body {
@extend .t-copy-base; @extend %t-copy-base;
min-width: $fg-min-width; min-width: $fg-min-width;
background: $gray-l5; background: $gray-l5;
color: $gray-d2; color: $gray-d2;
...@@ -29,7 +29,7 @@ a { ...@@ -29,7 +29,7 @@ a {
} }
h1 { h1 {
@extend .t-title4; @extend %t-title4;
font-weight: 300; font-weight: 300;
} }
...@@ -51,13 +51,13 @@ h1 { ...@@ -51,13 +51,13 @@ h1 {
// typography - basic // typography - basic
.page-header { .page-header {
@extend .t-title3; @extend %t-title3;
display: block; display: block;
font-weight: 600; font-weight: 600;
color: $gray-d3; color: $gray-d3;
.subtitle { .subtitle {
@extend .t-title7; @extend %t-title7;
position: relative; position: relative;
top: ($baseline/4); top: ($baseline/4);
display: block; display: block;
...@@ -67,29 +67,29 @@ h1 { ...@@ -67,29 +67,29 @@ h1 {
} }
.section-header { .section-header {
@extend .t-title4; @extend %t-title4;
font-weight: 600; font-weight: 600;
.subtitle { .subtitle {
@extend .t-title7; @extend %t-title7;
} }
} }
.area-header { .area-header {
@extend .t-title6; @extend %t-title6;
font-weight: 600; font-weight: 600;
.subtitle { .subtitle {
@extend .t-title8; @extend %t-title8;
} }
} }
.area-subheader { .area-subheader {
@extend .t-title7; @extend %t-title7;
font-weight: 600; font-weight: 600;
.subtitle { .subtitle {
@extend .t-title9; @extend %t-title9;
} }
} }
...@@ -198,35 +198,35 @@ h1 { ...@@ -198,35 +198,35 @@ h1 {
// typography - loose headings (BT: needs to be removed once html is clean) // typography - loose headings (BT: needs to be removed once html is clean)
.title-1 { .title-1 {
@extend .t-title3; @extend %t-title3;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
} }
.title-2 { .title-2 {
@extend .t-title4; @extend %t-title4;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
.title-3 { .title-3 {
@extend .t-title5; @extend %t-title5;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.title-4 { .title-4 {
@extend .t-title7; @extend %t-title7;
margin-bottom: $baseline; margin-bottom: $baseline;
font-weight: 500 font-weight: 500
} }
.title-5 { .title-5 {
@extend .t-title7; @extend %t-title7;
color: $gray-l1; color: $gray-l1;
margin-bottom: $baseline; margin-bottom: $baseline;
font-weight: 500 font-weight: 500
} }
.title-6 { .title-6 {
@extend .t-title7; @extend %t-title7;
color: $gray-l2; color: $gray-l2;
margin-bottom: $baseline; margin-bottom: $baseline;
font-weight: 500 font-weight: 500
...@@ -340,7 +340,7 @@ p, ul, ol, dl { ...@@ -340,7 +340,7 @@ p, ul, ol, dl {
.content { .content {
@include clearfix(); @include clearfix();
@extend .t-copy-base; @extend %t-copy-base;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -354,14 +354,14 @@ p, ul, ol, dl { ...@@ -354,14 +354,14 @@ p, ul, ol, dl {
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
.title-sub { .title-sub {
@extend .t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-l2; color: $gray-l2;
} }
.title-1 { .title-1 {
@extend .t-title3; @extend %t-title3;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: 600; font-weight: 600;
...@@ -378,16 +378,16 @@ p, ul, ol, dl { ...@@ -378,16 +378,16 @@ p, ul, ol, dl {
.content-primary { .content-primary {
.title-1 { .title-1 {
@extend .t-title3; @extend %t-title3;
} }
.title-2 { .title-2 {
@extend .t-title4; @extend %t-title4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
.title-3 { .title-3 {
@extend .t-title6; @extend %t-title6;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
} }
...@@ -401,7 +401,7 @@ p, ul, ol, dl { ...@@ -401,7 +401,7 @@ p, ul, ol, dl {
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(7, 12); width: flex-grid(7, 12);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
...@@ -419,7 +419,7 @@ p, ul, ol, dl { ...@@ -419,7 +419,7 @@ p, ul, ol, dl {
} }
.bit { .bit {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0; padding: 0 0 $baseline 0;
...@@ -432,7 +432,7 @@ p, ul, ol, dl { ...@@ -432,7 +432,7 @@ p, ul, ol, dl {
} }
h3 { h3 {
@extend .t-title7; @extend %t-title7;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: $gray-d2; color: $gray-d2;
font-weight: 600; font-weight: 600;
...@@ -448,7 +448,7 @@ p, ul, ol, dl { ...@@ -448,7 +448,7 @@ p, ul, ol, dl {
// actions // actions
.list-actions { .list-actions {
@extend .cont-no-list; @extend %cont-no-list;
.action-item { .action-item {
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
...@@ -558,7 +558,7 @@ p, ul, ol, dl { ...@@ -558,7 +558,7 @@ p, ul, ol, dl {
// misc // misc
hr.divide { hr.divide {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
.item-details { .item-details {
...@@ -719,7 +719,7 @@ hr.divide { ...@@ -719,7 +719,7 @@ hr.divide {
.new-button { .new-button {
@include green-button; @include green-button;
@extend .t-action4; @extend %t-action4;
padding: 8px 20px 10px; padding: 8px 20px 10px;
text-align: center; text-align: center;
...@@ -735,7 +735,7 @@ hr.divide { ...@@ -735,7 +735,7 @@ hr.divide {
.view-button { .view-button {
@include blue-button; @include blue-button;
@extend .t-copy-base; @extend %t-action4;
text-align: center; text-align: center;
&.big { &.big {
...@@ -754,7 +754,7 @@ hr.divide { ...@@ -754,7 +754,7 @@ hr.divide {
.edit-button.standard, .edit-button.standard,
.delete-button.standard { .delete-button.standard {
@extend .t-action4; @extend %t-action4;
@include white-button; @include white-button;
float: left; float: left;
padding: 3px 10px 4px; padding: 3px 10px 4px;
...@@ -806,7 +806,7 @@ hr.divide { ...@@ -806,7 +806,7 @@ hr.divide {
// basic utility // basic utility
.sr { .sr {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
.fake-link { .fake-link {
...@@ -827,7 +827,7 @@ hr.divide { ...@@ -827,7 +827,7 @@ hr.divide {
} }
hr.divider { hr.divider {
@extend .sr; @extend %cont-text-sr;
} }
// ==================== // ====================
...@@ -859,7 +859,7 @@ body.js { ...@@ -859,7 +859,7 @@ body.js {
text-align: center; text-align: center;
.label { .label {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
[class^="icon-"] { [class^="icon-"] {
...@@ -882,14 +882,14 @@ body.js { ...@@ -882,14 +882,14 @@ body.js {
} }
.title { .title {
@extend .t-title5; @extend %t-title5;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
font-weight: 600; font-weight: 600;
color: $gray-d3; color: $gray-d3;
} }
.description { .description {
@extend .t-copy-sub2; @extend %t-copy-sub2;
margin-top: ($baseline/2); margin-top: ($baseline/2);
color: $gray-l1; color: $gray-l1;
} }
......
cms/static/sass/assets/_anims.scss
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-fadeIn { %anim-fadeIn {
@include animation(fadeIn $tmg-f2 linear 1); @include animation(fadeIn $tmg-f2 linear 1);
} }
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-fadeOut { %anim-fadeOut {
@include animation(fadeOut $tmg-f2 linear 1); @include animation(fadeOut $tmg-f2 linear 1);
} }
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-rotateUp { %anim-rotateUp {
@include animation(rotateUp $tmg-f2 ease-in-out 1); @include animation(rotateUp $tmg-f2 ease-in-out 1);
} }
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-rotateDown { %anim-rotateDown {
@include animation(rotateDown $tmg-f2 ease-in-out 1); @include animation(rotateDown $tmg-f2 ease-in-out 1);
} }
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-rotateCW { %anim-rotateCW {
@include animation(rotateCW $tmg-s1 linear infinite); @include animation(rotateCW $tmg-s1 linear infinite);
} }
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-rotateCCW { %anim-rotateCCW {
@include animation(rotateCCW $tmg-s1 linear infinite); @include animation(rotateCCW $tmg-s1 linear infinite);
} }
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-bounceIn { %anim-bounceIn {
@include animation(bounceIn $tmg-f1 ease-in-out 1); @include animation(bounceIn $tmg-f1 ease-in-out 1);
} }
...@@ -208,6 +208,6 @@ ...@@ -208,6 +208,6 @@
} }
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
.anim-bounceOut { %anim-bounceOut {
@include animation(bounceOut $tmg-f1 ease-in-out 1); @include animation(bounceOut $tmg-f1 ease-in-out 1);
} }
cms/static/sass/assets/_content-types.scss
.content-type { %content-type {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
height: 16px; height: 16px;
...@@ -9,61 +9,61 @@ ...@@ -9,61 +9,61 @@
} }
.videosequence-icon { .videosequence-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/videosequence.png'); background-image: url('../img/content-types/videosequence.png');
} }
.video-icon { .video-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/video.png'); background-image: url('../img/content-types/video.png');
} }
.problemset-icon { .problemset-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/problemset.png'); background-image: url('../img/content-types/problemset.png');
} }
.problem-icon { .problem-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/problem.png'); background-image: url('../img/content-types/problem.png');
} }
.lab-icon { .lab-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/lab.png'); background-image: url('../img/content-types/lab.png');
} }
.tab-icon { .tab-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/lab.png'); background-image: url('../img/content-types/lab.png');
} }
.html-icon { .html-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/html.png'); background-image: url('../img/content-types/html.png');
} }
.vertical-icon { .vertical-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/vertical.png'); background-image: url('../img/content-types/vertical.png');
} }
.sequential-icon { .sequential-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/sequential.png'); background-image: url('../img/content-types/sequential.png');
} }
.chapter-icon { .chapter-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/chapter.png'); background-image: url('../img/content-types/chapter.png');
} }
.module-icon { .module-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/module.png'); background-image: url('../img/content-types/module.png');
} }
.module-icon { .module-icon {
@extend .content-type; @extend %content-type;
background-image: url('../img/content-types/module.png'); background-image: url('../img/content-types/module.png');
} }
cms/static/sass/elements/_controls.scss
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
// ==================== // ====================
// gray primary button // gray primary button
.btn-primary-gray { %btn-primary-gray {
@extend .ui-btn-primary; @extend %ui-btn-primary;
background: $gray-l1; background: $gray-l1;
border-color: $gray-l2; border-color: $gray-l2;
color: $white; color: $white;
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
} }
// blue primary button // blue primary button
.btn-primary-blue { %btn-primary-blue {
@extend .ui-btn-primary; @extend %ui-btn-primary;
background: $blue; background: $blue;
border-color: $blue-s1; border-color: $blue-s1;
color: $white; color: $white;
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
} }
// green primary button // green primary button
.btn-primary-green { %btn-primary-green {
@extend .ui-btn-primary; @extend %ui-btn-primary;
background: $green; background: $green;
border-color: $green; border-color: $green;
color: $white; color: $white;
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
} }
// gray secondary button // gray secondary button
.btn-secondary-gray { %btn-secondary-gray {
@extend .ui-btn-secondary; @extend %ui-btn-secondary;
border-color: $gray-l3; border-color: $gray-l3;
color: $gray-l1; color: $gray-l1;
...@@ -91,8 +91,8 @@ ...@@ -91,8 +91,8 @@
} }
// blue secondary button // blue secondary button
.btn-secondary-blue { %btn-secondary-blue {
@extend .ui-btn-secondary; @extend %ui-btn-secondary;
border-color: $blue-l3; border-color: $blue-l3;
color: $blue; color: $blue;
...@@ -113,8 +113,8 @@ ...@@ -113,8 +113,8 @@
} }
// green secondary button // green secondary button
.btn-secondary-green { %btn-secondary-green {
@extend .ui-btn-secondary; @extend %ui-btn-secondary;
border-color: $green-l4; border-color: $green-l4;
color: $green-l2; color: $green-l2;
...@@ -148,9 +148,9 @@ ...@@ -148,9 +148,9 @@
// ==================== // ====================
// simple dropdown button styling - should we move this elsewhere? // simple dropdown button styling - should we move this elsewhere?
.ui-btn-dd { %ui-btn-dd {
@extend .ui-btn; @extend %ui-btn;
@extend .ui-btn-pill; @extend %ui-btn-pill;
padding:($baseline/4) ($baseline/2); padding:($baseline/4) ($baseline/2);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
text-align: center; text-align: center;
&:hover, &:active { &:hover, &:active {
@extend .ui-fake-link; @extend %ui-fake-link;
border-color: $gray-l3; border-color: $gray-l3;
} }
...@@ -169,8 +169,8 @@ ...@@ -169,8 +169,8 @@
} }
// layout-based buttons - nav dd // layout-based buttons - nav dd
.ui-btn-dd-nav-primary { %ui-btn-dd-nav-primary {
@extend .ui-btn-dd; @extend %ui-btn-dd;
background: $white; background: $white;
border-color: $white; border-color: $white;
color: $gray-d1; color: $gray-d1;
...@@ -197,6 +197,6 @@ ...@@ -197,6 +197,6 @@
// ==================== // ====================
// specific buttons - view live // specific buttons - view live
.view-live-button { %view-live-button {
@extend .t-action4; @extend %t-action4;
} }
cms/static/sass/elements/_footer.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
padding: $baseline; padding: $baseline;
footer.primary { footer.primary {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include clearfix(); @include clearfix();
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
......
cms/static/sass/elements/_forms.scss
...@@ -115,10 +115,10 @@ form { ...@@ -115,10 +115,10 @@ form {
// ELEM: form // ELEM: form
// form styling for creating a new content item (course, user, textbook) // form styling for creating a new content item (course, user, textbook)
form[class^="create-"] { form[class^="create-"] {
@extend .ui-window; @extend %ui-window;
.title { .title {
@extend .t-title4; @extend %t-title4;
font-weight: 600; font-weight: 600;
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5); padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
} }
...@@ -129,7 +129,7 @@ form[class^="create-"] { ...@@ -129,7 +129,7 @@ form[class^="create-"] {
.list-input { .list-input {
@extend .cont-no-list; @extend %cont-no-list;
.field { .field {
margin: 0 0 ($baseline*0.75) 0; margin: 0 0 ($baseline*0.75) 0;
...@@ -155,7 +155,7 @@ form[class^="create-"] { ...@@ -155,7 +155,7 @@ form[class^="create-"] {
} }
label { label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f3 ease-in-out 0s); @include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
...@@ -166,7 +166,7 @@ form[class^="create-"] { ...@@ -166,7 +166,7 @@ form[class^="create-"] {
input, textarea { input, textarea {
@extend .t-copy-base; @extend %t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -208,7 +208,7 @@ form[class^="create-"] { ...@@ -208,7 +208,7 @@ form[class^="create-"] {
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -226,11 +226,11 @@ form[class^="create-"] { ...@@ -226,11 +226,11 @@ form[class^="create-"] {
} }
.is-showing { .is-showing {
@extend .anim-fadeIn; @extend %anim-fadeIn;
} }
.is-hiding { .is-hiding {
@extend .anim-fadeOut; @extend %anim-fadeOut;
} }
.tip-error { .tip-error {
...@@ -311,12 +311,12 @@ form[class^="create-"] { ...@@ -311,12 +311,12 @@ form[class^="create-"] {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend %t-action2;
} }
.action-secondary { .action-secondary {
@include grey-button; @include grey-button;
@extend .t-action2; @extend %t-action2;
} }
} }
} }
......
cms/static/sass/elements/_header.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
.wrapper-header { .wrapper-header {
@extend .ui-depth3; @extend %ui-depth3;
position: relative; position: relative;
width: 100%; width: 100%;
box-shadow: 0 1px 2px 0 $shadow-l1; box-shadow: 0 1px 2px 0 $shadow-l1;
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
nav { nav {
> ol > .nav-item { > ol > .nav-item {
@extend .t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-weight: 600; font-weight: 600;
...@@ -74,8 +74,8 @@ ...@@ -74,8 +74,8 @@
.nav-dd { .nav-dd {
.title { .title {
@extend .t-action2; @extend %t-action2;
@extend .ui-btn-dd-nav-primary; @extend %ui-btn-dd-nav-primary;
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
.label, .icon-caret-down { .label, .icon-caret-down {
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
@extend .t-action4; @extend %t-action4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
max-width: 45%; max-width: 45%;
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
} }
.course-title { .course-title {
@extend .t-action2; @extend %t-action2;
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
......
cms/static/sass/elements/_icons.scss
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
width: 100%; width: 100%;
} }
.ui-badge { %ui-badge {
@extend .t-title9; @extend %t-title9;
position: relative; position: relative;
border-bottom-right-radius: ($baseline/10); border-bottom-right-radius: ($baseline/10);
border-bottom-left-radius: ($baseline/10); border-bottom-left-radius: ($baseline/10);
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
// OPTION: add this class for a visual hanging display // OPTION: add this class for a visual hanging display
&.is-hanging { &.is-hanging {
@include box-sizing(border-box); @include box-sizing(border-box);
@extend .ui-depth2; @extend %ui-depth2;
top: -($baseline/4); top: -($baseline/4);
&:after { &:after {
......
cms/static/sass/elements/_modal.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
.modal-cover { .modal-cover {
@extend .ui-depth3; @extend %ui-depth3;
display: none; display: none;
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
} }
.modal { .modal {
@extend .ui-depth4; @extend %ui-depth4;
display: none; display: none;
position: fixed; position: fixed;
top: 60px; top: 60px;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
// lean modal alternative // lean modal alternative
#lean_overlay { #lean_overlay {
@extend .ui-depth4; @extend %ui-depth4;
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
......
cms/static/sass/elements/_navigation.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
nav { nav {
ol, ul { ol, ul {
@extend .cont-no-list; @extend %cont-no-list;
} }
.nav-item { .nav-item {
...@@ -111,7 +111,7 @@ nav { ...@@ -111,7 +111,7 @@ nav {
} }
.nav-item { .nav-item {
@extend .t-action3; @extend %t-action3;
display: block; display: block;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-l5; border-bottom: 1px solid $gray-l5;
......
cms/static/sass/elements/_sock.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.wrapper-inner { .wrapper-inner {
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%); @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
@extend .ui-depth0; @extend %ui-depth0;
display: none; display: none;
width: 100% !important; width: 100% !important;
border-bottom: 1px solid $white; border-bottom: 1px solid $white;
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
// sock - actions // sock - actions
.list-cta { .list-cta {
@extend .ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
top: -($baseline*0.75); top: -($baseline*0.75);
width: 100%; width: 100%;
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
text-align: center; text-align: center;
.cta-show-sock { .cta-show-sock {
@extend .ui-btn-pill; @extend %ui-btn-pill;
@extend .t-action4; @extend %t-action4;
background: $gray-l5; background: $gray-l5;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: $gray; color: $gray;
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
// sock - additional help // sock - additional help
.sock { .sock {
@include clearfix(); @include clearfix();
@extend .t-copy-sub2; @extend %t-copy-sub2;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
header { header {
.title { .title {
@extend .t-title4; @extend %t-title4;
} }
} }
...@@ -70,13 +70,13 @@ ...@@ -70,13 +70,13 @@
@include box-sizing(border-box); @include box-sizing(border-box);
.title { .title {
@extend .t-title6; @extend %t-title6;
color: $white; color: $white;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.copy { .copy {
@extend .t-copy-sub2; @extend %t-copy-sub2;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
} }
.action { .action {
@extend .t-action4; @extend %t-action4;
display: block; display: block;
[class^="icon-"] { [class^="icon-"] {
...@@ -108,13 +108,13 @@ ...@@ -108,13 +108,13 @@
} }
.tip { .tip {
@extend .sr; @extend %cont-text-sr;
} }
} }
.action-primary { .action-primary {
@extend .btn-primary-blue; @extend %btn-primary-blue;
@extend .t-action3; @extend %t-action3;
} }
} }
} }
......
cms/static/sass/elements/_system-feedback.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// messages // messages
.message { .message {
@extend .t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
.copy { .copy {
@extend .t-copy-sub1; @extend %t-copy-sub1;
} }
} }
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
// prompts // prompts
.wrapper-prompt { .wrapper-prompt {
@extend .ui-depth5; @extend %ui-depth5;
@include transition(all $tmg-f3 ease-in-out 0s); @include transition(all $tmg-f3 ease-in-out 0s);
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -233,12 +233,12 @@ ...@@ -233,12 +233,12 @@
} }
.action-primary { .action-primary {
@extend .t-action4; @extend %t-action4;
font-weight: 600; font-weight: 600;
} }
.action-secondary { .action-secondary {
@extend .t-action4; @extend %t-action4;
} }
} }
} }
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
// notifications // notifications
.wrapper-notification { .wrapper-notification {
@extend .ui-depth5; @extend %ui-depth5;
@include clearfix(); @include clearfix();
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue; box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
position: fixed; position: fixed;
...@@ -417,12 +417,12 @@ ...@@ -417,12 +417,12 @@
} }
.copy { .copy {
@extend .t-copy-sub1; @extend %t-copy-sub1;
width: flex-grid(10, 12); width: flex-grid(10, 12);
color: $gray-l2; color: $gray-l2;
.title { .title {
@extend .t-title7; @extend %t-title7;
margin-bottom: 0; margin-bottom: 0;
color: $white; color: $white;
} }
...@@ -465,7 +465,7 @@ ...@@ -465,7 +465,7 @@
.action-secondary { .action-secondary {
@extend .t-action4; @extend %t-action4;
} }
} }
...@@ -486,7 +486,7 @@ ...@@ -486,7 +486,7 @@
} }
.copy p { .copy p {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
} }
} }
...@@ -495,7 +495,7 @@ ...@@ -495,7 +495,7 @@
// alerts // alerts
.wrapper-alert { .wrapper-alert {
@extend .ui-depth2; @extend %ui-depth2;
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue; box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
position: relative; position: relative;
...@@ -585,7 +585,7 @@ ...@@ -585,7 +585,7 @@
color: $gray-l2; color: $gray-l2;
.title { .title {
@extend .t-title7; @extend %t-title7;
margin-bottom: 0; margin-bottom: 0;
color: $white; color: $white;
} }
...@@ -619,12 +619,12 @@ ...@@ -619,12 +619,12 @@
} }
.action-primary { .action-primary {
@extend .t-action4; @extend %t-action4;
font-weight: 600; font-weight: 600;
} }
.action-secondary { .action-secondary {
@extend .t-action4; @extend %t-action4;
} }
} }
} }
...@@ -641,7 +641,7 @@ ...@@ -641,7 +641,7 @@
text-align: center; text-align: center;
.label { .label {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
[class^="icon"] { [class^="icon"] {
...@@ -738,7 +738,7 @@ body.uxdesign.alerts { ...@@ -738,7 +738,7 @@ body.uxdesign.alerts {
} }
.content-primary { .content-primary {
@extend .ui-window; @extend %ui-window;
width: flex-grid(12, 12); width: flex-grid(12, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
......
cms/static/sass/elements/_system-help.scss
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
margin-bottom: $baseline; margin-bottom: $baseline;
.title { .title {
@extend .t-title4; @extend %t-title4;
font-weight: 600; font-weight: 600;
} }
.copy { .copy {
@extend .t-copy-sub1; @extend %t-copy-sub1;
} }
strong { strong {
...@@ -30,14 +30,14 @@ ...@@ -30,14 +30,14 @@
} }
.nav-introduction-supplementary { .nav-introduction-supplementary {
@extend .t-copy-sub2; @extend %t-copy-sub2;
float: right; float: right;
width: flex-grid(4,12); width: flex-grid(4,12);
display: block; display: block;
text-align: right; text-align: right;
.icon { .icon {
@extend .t-action3; @extend %t-action3;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
...@@ -48,20 +48,20 @@ ...@@ -48,20 +48,20 @@
// notices - in-context: to be used as notices to users within the context of a form/action // notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext { .notice-incontext {
@extend .ui-well; @extend %ui-well;
border-radius: ($baseline/10); border-radius: ($baseline/10);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-bottom: $baseline; margin-bottom: $baseline;
.title { .title {
@extend .t-title6; @extend %t-title6;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
font-weight: 700; font-weight: 700;
} }
.copy { .copy {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75; opacity: 0.75;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -99,8 +99,8 @@ ...@@ -99,8 +99,8 @@
} }
.action-primary { .action-primary {
@extend .btn-primary-blue; @extend %btn-primary-blue;
@extend .t-action3; @extend %t-action3;
} }
} }
} }
...@@ -160,8 +160,8 @@ ...@@ -160,8 +160,8 @@
} }
.action-primary { .action-primary {
@extend .btn-primary-blue; @extend %btn-primary-blue;
@extend .t-action3; @extend %t-action3;
} }
} }
} }
...@@ -188,8 +188,8 @@ ...@@ -188,8 +188,8 @@
} }
.action-primary { .action-primary {
@extend .btn-primary-green; @extend %btn-primary-green;
@extend .t-action3; @extend %t-action3;
} }
} }
} }
......
cms/static/sass/elements/_typography.scss
...@@ -4,59 +4,59 @@ ...@@ -4,59 +4,59 @@
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// headings/titles // headings/titles
.t-title { %t-title {
font-family: $f-sans-serif; font-family: $f-sans-serif;
} }
.t-title1 { %t-title1 {
@extend .t-title; @extend %t-title;
@include font-size(60); @include font-size(60);
@include line-height(60); @include line-height(60);
} }
.t-title2 { %t-title2 {
@extend .t-title; @extend %t-title;
@include font-size(48); @include font-size(48);
@include line-height(48); @include line-height(48);
} }
.t-title3 { %t-title3 {
@include font-size(36); @include font-size(36);
@include line-height(36); @include line-height(36);
} }
.t-title4 { %t-title4 {
@extend .t-title; @extend %t-title;
@include font-size(24); @include font-size(24);
@include line-height(24); @include line-height(24);
} }
.t-title5 { %t-title5 {
@extend .t-title; @extend %t-title;
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
.t-title6 { %t-title6 {
@extend .t-title; @extend %t-title;
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
.t-title7 { %t-title7 {
@extend .t-title; @extend %t-title;
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
.t-title8 { %t-title8 {
@extend .t-title; @extend %t-title;
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
.t-title9 { %t-title9 {
@extend .t-title; @extend %t-title;
@include font-size(11); @include font-size(11);
@include line-height(11); @include line-height(11);
} }
...@@ -64,36 +64,36 @@ ...@@ -64,36 +64,36 @@
// ==================== // ====================
// copy // copy
.t-copy { %t-copy {
font-family: $f-sans-serif; font-family: $f-sans-serif;
} }
.t-copy-base { %t-copy-base {
@extend .t-copy; @extend %t-copy;
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
.t-copy-lead1 { %t-copy-lead1 {
@extend .t-copy; @extend %t-copy;
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
.t-copy-lead2 { %t-copy-lead2 {
@extend .t-copy; @extend %t-copy;
@include font-size(24); @include font-size(24);
@include line-height(24); @include line-height(24);
} }
.t-copy-sub1 { %t-copy-sub1 {
@extend .t-copy; @extend %t-copy;
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
.t-copy-sub2 { %t-copy-sub2 {
@extend .t-copy; @extend %t-copy;
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
...@@ -101,22 +101,22 @@ ...@@ -101,22 +101,22 @@
// ==================== // ====================
// actions/labels // actions/labels
.t-action1 { %t-action1 {
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
.t-action2 { %t-action2 {
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
.t-action3 { %t-action3 {
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
.t-action4 { %t-action4 {
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
...@@ -125,54 +125,54 @@ ...@@ -125,54 +125,54 @@
// ==================== // ====================
// code // code
.t-code { %t-code {
font-family: $f-monospace; font-family: $f-monospace;
} }
// ==================== // ====================
// icons // icons
.t-icon1 { %t-icon1 {
@include font-size(48); @include font-size(48);
@include line-height(48); @include line-height(48);
} }
.t-icon2 { %t-icon2 {
@include font-size(36); @include font-size(36);
@include line-height(36); @include line-height(36);
} }
.t-icon3 { %t-icon3 {
@include font-size(24); @include font-size(24);
@include line-height(24); @include line-height(24);
} }
.t-icon4 { %t-icon4 {
@include font-size(18); @include font-size(18);
@include line-height(18); @include line-height(18);
} }
.t-icon5 { %t-icon5 {
@include font-size(16); @include font-size(16);
@include line-height(16); @include line-height(16);
} }
.t-icon6 { %t-icon6 {
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
} }
.t-icon7 { %t-icon7 {
@include font-size(12); @include font-size(12);
@include line-height(12); @include line-height(12);
} }
.t-icon8 { %t-icon8 {
@include font-size(11); @include font-size(11);
@include line-height(11); @include line-height(11);
} }
.t-icon9 { %t-icon9 {
@include font-size(10); @include font-size(10);
@include line-height(10); @include line-height(10);
} }
cms/static/sass/elements/_uploads.scss
...@@ -5,7 +5,7 @@ body.course.feature-upload { ...@@ -5,7 +5,7 @@ body.course.feature-upload {
// dialog // dialog
.wrapper-dialog { .wrapper-dialog {
@extend .ui-depth5; @extend %ui-depth5;
@include transition(all 0.05s ease-in-out); @include transition(all 0.05s ease-in-out);
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -34,14 +34,14 @@ body.course.feature-upload { ...@@ -34,14 +34,14 @@ body.course.feature-upload {
text-align: left; text-align: left;
.title { .title {
@extend .t-title5; @extend %t-title5;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
font-weight: 600; font-weight: 600;
color: $black; color: $black;
} }
.message { .message {
@extend .t-copy-sub2; @extend %t-copy-sub2;
color: $gray; color: $gray;
} }
...@@ -59,7 +59,7 @@ body.course.feature-upload { ...@@ -59,7 +59,7 @@ body.course.feature-upload {
} }
input[type="file"] { input[type="file"] {
@extend .t-copy-sub2; @extend %t-copy-sub2;
} }
.status-upload { .status-upload {
...@@ -140,7 +140,7 @@ body.course.feature-upload { ...@@ -140,7 +140,7 @@ body.course.feature-upload {
.action-item { .action-item {
@extend .t-action4; @extend %t-action4;
display: inline-block; display: inline-block;
margin-right: ($baseline*0.75); margin-right: ($baseline*0.75);
......
cms/static/sass/views/_account.scss
...@@ -12,7 +12,7 @@ body.signup, body.signin { ...@@ -12,7 +12,7 @@ body.signup, body.signin {
.content { .content {
@include clearfix(); @include clearfix();
@extend .t-copy-base; @extend %t-copy-base;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
...@@ -26,14 +26,14 @@ body.signup, body.signin { ...@@ -26,14 +26,14 @@ body.signup, body.signin {
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
h1 { h1 {
@extend .t-title3; @extend %t-title3;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: 600; font-weight: 600;
} }
.action { .action {
@extend .t-action3; @extend %t-action3;
position: absolute; position: absolute;
right: 0; right: 0;
top: 40%; top: 40%;
...@@ -41,7 +41,7 @@ body.signup, body.signin { ...@@ -41,7 +41,7 @@ body.signup, body.signin {
} }
.introduction { .introduction {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
} }
...@@ -69,7 +69,7 @@ body.signup, body.signin { ...@@ -69,7 +69,7 @@ body.signup, body.signin {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend %t-action2;
@include transition(all $tmg-f3 linear 0s); @include transition(all $tmg-f3 linear 0s);
display: block; display: block;
width: 100%; width: 100%;
...@@ -108,7 +108,7 @@ body.signup, body.signin { ...@@ -108,7 +108,7 @@ body.signup, body.signin {
} }
label { label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f3 ease-in-out 0s); @include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
...@@ -118,7 +118,7 @@ body.signup, body.signin { ...@@ -118,7 +118,7 @@ body.signup, body.signin {
} }
input, textarea { input, textarea {
@extend .t-copy-base; @extend %t-copy-base;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -171,7 +171,7 @@ body.signup, body.signin { ...@@ -171,7 +171,7 @@ body.signup, body.signin {
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include transition(color $tmg-f3 ease-in-out 0s); @include transition(color $tmg-f3 ease-in-out 0s);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -212,7 +212,7 @@ body.signup, body.signin { ...@@ -212,7 +212,7 @@ body.signup, body.signin {
width: flex-grid(4, 12); width: flex-grid(4, 12);
.bit { .bit {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0; padding: 0 0 $baseline 0;
...@@ -225,7 +225,7 @@ body.signup, body.signin { ...@@ -225,7 +225,7 @@ body.signup, body.signin {
} }
h3 { h3 {
@extend .t-title7; @extend %t-title7;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: $gray-d2; color: $gray-d2;
font-weight: 600; font-weight: 600;
...@@ -245,7 +245,7 @@ body.signup, body.signin { ...@@ -245,7 +245,7 @@ body.signup, body.signin {
position: relative; position: relative;
.action-forgotpassword { .action-forgotpassword {
@extend .t-action3; @extend %t-action3;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
......
cms/static/sass/views/_checklists.scss
...@@ -14,7 +14,7 @@ body.course.checklists { ...@@ -14,7 +14,7 @@ body.course.checklists {
// checklists - general // checklists - general
.course-checklist { .course-checklist {
@extend .ui-window; @extend %ui-window;
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
&:last-child { &:last-child {
...@@ -23,7 +23,7 @@ body.course.checklists { ...@@ -23,7 +23,7 @@ body.course.checklists {
// visual status // visual status
.viz-checklist-status { .viz-checklist-status {
@extend .cont-text-hide; @extend %cont-text-hide;
@include size(100%,($baseline/4)); @include size(100%,($baseline/4));
position: relative; position: relative;
display: block; display: block;
...@@ -40,7 +40,7 @@ body.course.checklists { ...@@ -40,7 +40,7 @@ body.course.checklists {
background: $green; background: $green;
.int { .int {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
} }
} }
...@@ -83,7 +83,7 @@ body.course.checklists { ...@@ -83,7 +83,7 @@ body.course.checklists {
} }
.checklist-status { .checklist-status {
@extend .t-copy-sub1; @extend %t-copy-sub1;
width: flex-grid(3, 9); width: flex-grid(3, 9);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
...@@ -99,7 +99,7 @@ body.course.checklists { ...@@ -99,7 +99,7 @@ body.course.checklists {
} }
.status-count { .status-count {
@extend .t-copy-base; @extend %t-copy-base;
margin-left: ($baseline/4); margin-left: ($baseline/4);
margin-right: ($baseline/4); margin-right: ($baseline/4);
color: $gray-d3; color: $gray-d3;
...@@ -107,7 +107,7 @@ body.course.checklists { ...@@ -107,7 +107,7 @@ body.course.checklists {
} }
.status-amount { .status-amount {
@extend .t-copy-base; @extend %t-copy-base;
margin-left: ($baseline/4); margin-left: ($baseline/4);
color: $gray-d3; color: $gray-d3;
font-weight: 600; font-weight: 600;
...@@ -138,7 +138,7 @@ body.course.checklists { ...@@ -138,7 +138,7 @@ body.course.checklists {
.action-secondary { .action-secondary {
@include grey-button(); @include grey-button();
@extend .t-action3; @extend %t-action3;
font-weight: 400; font-weight: 400;
float: right; float: right;
...@@ -245,13 +245,13 @@ body.course.checklists { ...@@ -245,13 +245,13 @@ body.course.checklists {
} }
.task-description { .task-description {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
color: $gray-l2; color: $gray-l2;
} }
.task-support { .task-support {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include transition(opacity $tmg-f2 ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.0; opacity: 0.0;
pointer-events: none; pointer-events: none;
...@@ -272,13 +272,13 @@ body.course.checklists { ...@@ -272,13 +272,13 @@ body.course.checklists {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action4; @extend %t-action4;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
.action-secondary { .action-secondary {
@extend .t-action4; @extend %t-action4;
margin-top: ($baseline/2); margin-top: ($baseline/2);
} }
} }
...@@ -319,7 +319,7 @@ body.course.checklists { ...@@ -319,7 +319,7 @@ body.course.checklists {
.action-primary { .action-primary {
@include grey-button; @include grey-button;
@extend .t-action4; @extend %t-action4;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
......
cms/static/sass/views/_dashboard.scss
...@@ -58,8 +58,8 @@ body.dashboard { ...@@ -58,8 +58,8 @@ body.dashboard {
} }
.action-create-course { .action-create-course {
@extend .btn-primary-green; @extend %btn-primary-green;
@extend .t-action3; @extend %t-action3;
} }
} }
} }
...@@ -72,8 +72,8 @@ body.dashboard { ...@@ -72,8 +72,8 @@ body.dashboard {
overflow: hidden; overflow: hidden;
.ui-toggle-control { .ui-toggle-control {
@extend .ui-depth2; @extend %ui-depth2;
@extend .btn-secondary-gray; @extend %btn-secondary-gray;
@include clearfix(); @include clearfix();
display: block; display: block;
text-align: left; text-align: left;
...@@ -85,14 +85,14 @@ body.dashboard { ...@@ -85,14 +85,14 @@ body.dashboard {
} }
.label { .label {
@extend .t-action3; @extend %t-action3;
float: left; float: left;
width: flex-grid(8, 9); width: flex-grid(8, 9);
margin: 3px flex-gutter() 0 0; margin: 3px flex-gutter() 0 0;
} }
.icon-remove-sign { .icon-remove-sign {
@extend .t-action1; @extend %t-action1;
@include transform(rotate(45deg)); @include transform(rotate(45deg));
@include transform-origin(center center); @include transform-origin(center center);
@include transition(all $tmg-f1 linear 0s); @include transition(all $tmg-f1 linear 0s);
...@@ -102,7 +102,7 @@ body.dashboard { ...@@ -102,7 +102,7 @@ body.dashboard {
} }
.ui-toggle-target { .ui-toggle-target {
@extend .ui-depth1; @extend %ui-depth1;
@include transition(opacity $tmg-f1 ease-in-out 0s); @include transition(opacity $tmg-f1 ease-in-out 0s);
position: relative; position: relative;
top: -2px; top: -2px;
...@@ -136,7 +136,7 @@ body.dashboard { ...@@ -136,7 +136,7 @@ body.dashboard {
margin-top: $baseline; margin-top: $baseline;
.title { .title {
@extend .t-title7; @extend %t-title7;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
font-weight: 700; font-weight: 700;
color: $gray-d1; color: $gray-d1;
...@@ -154,8 +154,8 @@ body.dashboard { ...@@ -154,8 +154,8 @@ body.dashboard {
} }
.action-primary { .action-primary {
@extend .btn-primary-blue; @extend %btn-primary-blue;
@extend .t-action3; @extend %t-action3;
} }
// specific - request button // specific - request button
...@@ -203,7 +203,7 @@ body.dashboard { ...@@ -203,7 +203,7 @@ body.dashboard {
.status-update { .status-update {
.label { .label {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
.value { .value {
...@@ -232,7 +232,7 @@ body.dashboard { ...@@ -232,7 +232,7 @@ body.dashboard {
} }
.value-formal { .value-formal {
@extend .t-title5; @extend %t-title5;
margin: ($baseline/2); margin: ($baseline/2);
font-weight: 700; font-weight: 700;
...@@ -242,7 +242,7 @@ body.dashboard { ...@@ -242,7 +242,7 @@ body.dashboard {
} }
.value-description { .value-description {
@extend .t-copy-sub1; @extend %t-copy-sub1;
position: relative; position: relative;
color: $white; color: $white;
opacity: 0.85; opacity: 0.85;
...@@ -253,7 +253,7 @@ body.dashboard { ...@@ -253,7 +253,7 @@ body.dashboard {
&.is-unrequested { &.is-unrequested {
.title { .title {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
} }
...@@ -336,21 +336,21 @@ body.dashboard { ...@@ -336,21 +336,21 @@ body.dashboard {
// encompassing course link // encompassing course link
.course-link { .course-link {
@extend .ui-depth2; @extend %ui-depth2;
width: flex-grid(7, 9); width: flex-grid(7, 9);
margin-right: flex-gutter(); margin-right: flex-gutter();
} }
// course title // course title
.course-title { .course-title {
@extend .t-title4; @extend %t-title4;
margin: 0 ($baseline*2) ($baseline/4) 0; margin: 0 ($baseline*2) ($baseline/4) 0;
font-weight: 300; font-weight: 300;
} }
// course metadata // course metadata
.course-metadata { .course-metadata {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(opacity $tmg-f1 ease-in-out 0); @include transition(opacity $tmg-f1 ease-in-out 0);
color: $gray; color: $gray;
opacity: 0.75; opacity: 0.75;
...@@ -375,20 +375,20 @@ body.dashboard { ...@@ -375,20 +375,20 @@ body.dashboard {
} }
.label { .label {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
} }
} }
.course-actions { .course-actions {
@extend .ui-depth3; @extend %ui-depth3;
position: static; position: static;
width: flex-grid(2, 9); width: flex-grid(2, 9);
text-align: right; text-align: right;
// view live button // view live button
.view-live-button { .view-live-button {
@extend .ui-depth3; @extend %ui-depth3;
@include transition(opacity $tmg-f2 ease-in-out 0); @include transition(opacity $tmg-f2 ease-in-out 0);
@include box-sizing(border-box); @include box-sizing(border-box);
padding: ($baseline/2); padding: ($baseline/2);
...@@ -447,7 +447,7 @@ body.dashboard { ...@@ -447,7 +447,7 @@ body.dashboard {
} }
label { label {
@extend .t-title7; @extend %t-title7;
display: block; display: block;
font-weight: 700; font-weight: 700;
} }
...@@ -460,7 +460,7 @@ body.dashboard { ...@@ -460,7 +460,7 @@ body.dashboard {
} }
.new-course-name { .new-course-name {
@extend .t-title5; @extend %t-title5;
font-weight: 300; font-weight: 300;
} }
......
cms/static/sass/views/_export.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
body.course.export { body.course.export {
.export-overview { .export-overview {
@extend .ui-window; @extend %ui-window;
@include clearfix; @include clearfix;
padding: 30px 40px; padding: 30px 40px;
} }
......
cms/static/sass/views/_import.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
body.course.import { body.course.import {
.import-overview { .import-overview {
@extend .ui-window; @extend %ui-window;
@include clearfix; @include clearfix;
padding: 30px 40px; padding: 30px 40px;
} }
......
cms/static/sass/views/_index.scss
...@@ -18,7 +18,7 @@ body.index { ...@@ -18,7 +18,7 @@ body.index {
} }
.content { .content {
@extend .t-copy-base; @extend %t-copy-base;
@include clearfix(); @include clearfix();
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
...@@ -62,7 +62,7 @@ body.index { ...@@ -62,7 +62,7 @@ body.index {
color: $white; color: $white;
h1 { h1 {
@extend .t-title2; @extend %t-title2;
float: none; float: none;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
border-bottom: 1px solid $blue-l1; border-bottom: 1px solid $blue-l1;
...@@ -81,7 +81,7 @@ body.index { ...@@ -81,7 +81,7 @@ body.index {
} }
.tagline { .tagline {
@extend .t-title4; @extend %t-title4;
margin: 0; margin: 0;
color: $blue-l3; color: $blue-l3;
} }
...@@ -196,13 +196,13 @@ body.index { ...@@ -196,13 +196,13 @@ body.index {
margin-top: -($baseline/4); margin-top: -($baseline/4);
h3 { h3 {
@extend .t-title4; @extend %t-title4;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
font-weight: 600; font-weight: 600;
} }
> p { > p {
@extend .t-copy-lead1; @extend %t-copy-lead1;
color: $gray-d1; color: $gray-d1;
} }
...@@ -212,7 +212,7 @@ body.index { ...@@ -212,7 +212,7 @@ body.index {
} }
.list-proofpoints { .list-proofpoints {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include clearfix(); @include clearfix();
width: flex-grid(9, 9); width: flex-grid(9, 9);
margin: ($baseline*1.5) 0 0 0; margin: ($baseline*1.5) 0 0 0;
...@@ -231,14 +231,14 @@ body.index { ...@@ -231,14 +231,14 @@ body.index {
color: $gray-l1; color: $gray-l1;
.title { .title {
@extend .t-copy-base; @extend %t-copy-base;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-weight: 500; font-weight: 500;
color: $gray-d3; color: $gray-d3;
} }
&:hover { &:hover {
@extend .fake-link; @extend %ui-fake-link;
box-shadow: 0 1px ($baseline/10) $shadow-l1; box-shadow: 0 1px ($baseline/10) $shadow-l1;
background: $blue-l5; background: $blue-l5;
top: -($baseline/5); top: -($baseline/5);
...@@ -323,7 +323,7 @@ body.index { ...@@ -323,7 +323,7 @@ body.index {
text-align: center; text-align: center;
&.action-primary { &.action-primary {
@extend .t-action1; @extend %t-action1;
@include blue-button; @include blue-button;
padding: ($baseline*0.75) ($baseline/2); padding: ($baseline*0.75) ($baseline/2);
font-weight: 600; font-weight: 600;
...@@ -332,7 +332,7 @@ body.index { ...@@ -332,7 +332,7 @@ body.index {
} }
&.action-secondary { &.action-secondary {
@extend .t-action3; @extend %t-action3;
margin-top: ($baseline/2); margin-top: ($baseline/2);
} }
} }
......
cms/static/sass/views/_outline.scss
...@@ -630,7 +630,7 @@ body.course.outline { ...@@ -630,7 +630,7 @@ body.course.outline {
} }
label { label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
} }
......
cms/static/sass/views/_settings.scss
...@@ -9,7 +9,7 @@ body.course.settings { ...@@ -9,7 +9,7 @@ body.course.settings {
} }
.content-primary { .content-primary {
@extend .ui-window; @extend %ui-window;
width: flex-grid(9, 12); width: flex-grid(9, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
...@@ -72,7 +72,7 @@ body.course.settings { ...@@ -72,7 +72,7 @@ body.course.settings {
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(5, 9); width: flex-grid(5, 9);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
...@@ -92,12 +92,12 @@ body.course.settings { ...@@ -92,12 +92,12 @@ body.course.settings {
// in form -UI hints/tips/messages // in form -UI hints/tips/messages
.instructions { .instructions {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -105,7 +105,7 @@ body.course.settings { ...@@ -105,7 +105,7 @@ body.course.settings {
} }
.message-error { .message-error {
@extend .t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
...@@ -115,12 +115,12 @@ body.course.settings { ...@@ -115,12 +115,12 @@ body.course.settings {
// buttons // buttons
.remove-item { .remove-item {
@include white-button; @include white-button;
@extend .t-action3; @extend %t-action3;
font-weight: 400; font-weight: 400;
} }
.new-button { .new-button {
// @extend .t-action3; - bad buttons won't render this properly // @extend %t-action3; - bad buttons won't render this properly
@include font-size(14); @include font-size(14);
} }
...@@ -154,7 +154,7 @@ body.course.settings { ...@@ -154,7 +154,7 @@ body.course.settings {
} }
label { label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-weight: 400; font-weight: 400;
...@@ -165,7 +165,7 @@ body.course.settings { ...@@ -165,7 +165,7 @@ body.course.settings {
} }
input, textarea { input, textarea {
@extend .t-copy-base; @extend %t-copy-base;
@include placeholder($gray-l4); @include placeholder($gray-l4);
@include size(100%,100%); @include size(100%,100%);
padding: ($baseline/2); padding: ($baseline/2);
...@@ -265,7 +265,7 @@ body.course.settings { ...@@ -265,7 +265,7 @@ body.course.settings {
} }
input, textarea { input, textarea {
@extend .t-copy-lead1; @extend %t-copy-lead1;
box-shadow: none; box-shadow: none;
border: none; border: none;
background: none; background: none;
...@@ -301,7 +301,7 @@ body.course.settings { ...@@ -301,7 +301,7 @@ body.course.settings {
padding: ($baseline/2) 0 0 0; padding: ($baseline/2) 0 0 0;
.title { .title {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 ($baseline/10) 0; margin: 0 0 ($baseline/10) 0;
padding: 0 ($baseline/2); padding: 0 ($baseline/2);
...@@ -315,7 +315,7 @@ body.course.settings { ...@@ -315,7 +315,7 @@ body.course.settings {
padding: 0 ($baseline/2) ($baseline/2) ($baseline/2); padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
.link-courseURL { .link-courseURL {
@extend .t-copy-lead1; @extend %t-copy-lead1;
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
width: 100%; width: 100%;
...@@ -337,11 +337,11 @@ body.course.settings { ...@@ -337,11 +337,11 @@ body.course.settings {
.action-primary { .action-primary {
@include blue-button(); @include blue-button();
@extend .t-action3; @extend %t-action3;
font-weight: 600; font-weight: 600;
[class^="icon-"] { [class^="icon-"] {
@extend .t-icon5; @extend %t-icon5;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-top: -3px; margin-top: -3px;
...@@ -460,7 +460,7 @@ body.course.settings { ...@@ -460,7 +460,7 @@ body.course.settings {
} }
.msg { .msg {
@extend .t-copy-sub2; @extend %t-copy-sub2;
display: block; display: block;
margin-top: ($baseline/2); margin-top: ($baseline/2);
color: $gray-l3; color: $gray-l3;
...@@ -478,7 +478,7 @@ body.course.settings { ...@@ -478,7 +478,7 @@ body.course.settings {
} }
.action-upload-image { .action-upload-image {
@extend .ui-btn-flat-outline; @extend %ui-btn-flat-outline;
float: right; float: right;
width: flex-grid(2,9); width: flex-grid(2,9);
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -820,7 +820,7 @@ body.course.settings { ...@@ -820,7 +820,7 @@ body.course.settings {
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
.CodeMirror { .CodeMirror {
@extend .t-copy-base; @extend %t-copy-base;
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
@include linear-gradient($lightGrey, tint($lightGrey, 90%)); @include linear-gradient($lightGrey, tint($lightGrey, 90%));
......
cms/static/sass/views/_static-pages.scss
...@@ -171,7 +171,7 @@ body.course.static-pages { ...@@ -171,7 +171,7 @@ body.course.static-pages {
} }
.static-page-details { .static-page-details {
@extend .ui-window; @extend %ui-window;
padding: 32px 40px; padding: 32px 40px;
.row { .row {
......
cms/static/sass/views/_textbooks.scss
...@@ -13,7 +13,7 @@ body.course.textbooks { ...@@ -13,7 +13,7 @@ body.course.textbooks {
margin-right: flex-gutter(); margin-right: flex-gutter();
.no-textbook-content { .no-textbook-content {
@extend .ui-well; @extend %ui-well;
padding: ($baseline*2); padding: ($baseline*2);
background-color: $gray-l4; background-color: $gray-l4;
text-align: center; text-align: center;
...@@ -30,7 +30,7 @@ body.course.textbooks { ...@@ -30,7 +30,7 @@ body.course.textbooks {
} }
.textbook { .textbook {
@extend .ui-window; @extend %ui-window;
position: relative; position: relative;
.view-textbook { .view-textbook {
...@@ -42,7 +42,7 @@ body.course.textbooks { ...@@ -42,7 +42,7 @@ body.course.textbooks {
} }
.textbook-title { .textbook-title {
@extend .t-title4; @extend %t-title4;
margin-right: ($baseline*14); margin-right: ($baseline*14);
font-weight: bold; font-weight: bold;
} }
...@@ -71,7 +71,7 @@ body.course.textbooks { ...@@ -71,7 +71,7 @@ body.course.textbooks {
margin-left: $baseline; margin-left: $baseline;
.chapter { .chapter {
@extend .t-copy-sub2; @extend %t-copy-sub2;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
...@@ -106,16 +106,16 @@ body.course.textbooks { ...@@ -106,16 +106,16 @@ body.course.textbooks {
.view { .view {
@include blue-button; @include blue-button;
@extend .t-action4; @extend %t-action4;
} }
.edit { .edit {
@include blue-button; @include blue-button;
@extend .t-action4; @extend %t-action4;
} }
.delete { .delete {
@extend .ui-btn-non; @extend %ui-btn-non;
} }
} }
...@@ -160,7 +160,7 @@ body.course.textbooks { ...@@ -160,7 +160,7 @@ body.course.textbooks {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -170,7 +170,7 @@ body.course.textbooks { ...@@ -170,7 +170,7 @@ body.course.textbooks {
.action-secondary { .action-secondary {
@include grey-button; @include grey-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -182,7 +182,7 @@ body.course.textbooks { ...@@ -182,7 +182,7 @@ body.course.textbooks {
} }
.copy { .copy {
@extend .t-copy-sub2; @extend %t-copy-sub2;
margin: ($baseline) 0 ($baseline/2) 0; margin: ($baseline) 0 ($baseline/2) 0;
color: $gray; color: $gray;
...@@ -196,7 +196,7 @@ body.course.textbooks { ...@@ -196,7 +196,7 @@ body.course.textbooks {
.chapters-fields, .chapters-fields,
.textbook-fields { .textbook-fields {
@extend .cont-no-list; @extend %cont-no-list;
.field { .field {
margin: 0 0 ($baseline*0.75) 0; margin: 0 0 ($baseline*0.75) 0;
...@@ -222,7 +222,7 @@ body.course.textbooks { ...@@ -222,7 +222,7 @@ body.course.textbooks {
} }
label { label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
...@@ -233,13 +233,13 @@ body.course.textbooks { ...@@ -233,13 +233,13 @@ body.course.textbooks {
&.add-textbook-name label { &.add-textbook-name label {
@extend .t-title5; @extend %t-title5;
} }
//this section is borrowed from _account.scss - we should clean up and unify later //this section is borrowed from _account.scss - we should clean up and unify later
input, textarea { input, textarea {
@extend .t-copy-base; @extend %t-copy-base;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -292,7 +292,7 @@ body.course.textbooks { ...@@ -292,7 +292,7 @@ body.course.textbooks {
} }
.tip { .tip {
@extend .t-copy-sub2; @extend %t-copy-sub2;
@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -328,7 +328,7 @@ body.course.textbooks { ...@@ -328,7 +328,7 @@ body.course.textbooks {
} }
.action-upload { .action-upload {
@extend .ui-btn-flat-outline; @extend %ui-btn-flat-outline;
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 0; right: 0;
...@@ -356,7 +356,7 @@ body.course.textbooks { ...@@ -356,7 +356,7 @@ body.course.textbooks {
.action-add-chapter { .action-add-chapter {
@extend .ui-btn-flat-outline; @extend %ui-btn-flat-outline;
@include font-size(16); @include font-size(16);
display: block; display: block;
width: 100%; width: 100%;
......
cms/static/sass/views/_unit.scss
...@@ -466,7 +466,7 @@ body.course.unit { ...@@ -466,7 +466,7 @@ body.course.unit {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -476,7 +476,7 @@ body.course.unit { ...@@ -476,7 +476,7 @@ body.course.unit {
.action-secondary { .action-secondary {
@include grey-button; @include grey-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -500,7 +500,7 @@ body.course.unit { ...@@ -500,7 +500,7 @@ body.course.unit {
//Component Name //Component Name
.component-name { .component-name {
@extend .t-copy-sub1; @extend %t-copy-sub1;
width: 50%; width: 50%;
color: $white; color: $white;
font-weight: 600; font-weight: 600;
...@@ -637,7 +637,7 @@ body.course.unit { ...@@ -637,7 +637,7 @@ body.course.unit {
} }
.setting-label { .setting-label {
@extend .t-copy-sub1; @extend %t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
...@@ -794,8 +794,8 @@ body.course.unit { ...@@ -794,8 +794,8 @@ body.course.unit {
} }
.create-setting { .create-setting {
@extend .ui-btn-flat-outline; @extend %ui-btn-flat-outline;
@extend .t-action3; @extend %t-action3;
display: block; display: block;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -974,7 +974,7 @@ body.unit { ...@@ -974,7 +974,7 @@ body.unit {
.unit-id { .unit-id {
.label { .label {
@extend .t-title7; @extend %t-title7;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
color: $gray-d1; color: $gray-d1;
} }
......
cms/static/sass/views/_users.scss
...@@ -22,7 +22,7 @@ body.course.users { ...@@ -22,7 +22,7 @@ body.course.users {
.content { .content {
.introduction { .introduction {
@extend .t-copy-sub1; @extend %t-copy-sub1;
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
} }
} }
...@@ -56,7 +56,7 @@ body.course.users { ...@@ -56,7 +56,7 @@ body.course.users {
.action-primary { .action-primary {
@include green-button(); // overwriting for the sake of syncing older green button styles for now @include green-button(); // overwriting for the sake of syncing older green button styles for now
@extend .t-action3; @extend %t-action3;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
} }
} }
...@@ -80,7 +80,7 @@ body.course.users { ...@@ -80,7 +80,7 @@ body.course.users {
.user-list { .user-list {
.user-item { .user-item {
@extend .ui-window; @extend %ui-window;
@include clearfix(); @include clearfix();
position: relative; position: relative;
width: flex-grid(9, 9); width: flex-grid(9, 9);
...@@ -98,7 +98,7 @@ body.course.users { ...@@ -98,7 +98,7 @@ body.course.users {
// ELEM: item - flag // ELEM: item - flag
.flag-role { .flag-role {
@extend .ui-badge; @extend %ui-badge;
color: $white; color: $white;
.msg-you { .msg-you {
...@@ -132,7 +132,7 @@ body.course.users { ...@@ -132,7 +132,7 @@ body.course.users {
} }
.user-username { .user-username {
@extend .t-title4; @extend %t-title4;
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
margin: 0 ($baseline/2) ($baseline/10) 0; margin: 0 ($baseline/2) ($baseline/10) 0;
color: $gray-d4; color: $gray-d4;
...@@ -140,7 +140,7 @@ body.course.users { ...@@ -140,7 +140,7 @@ body.course.users {
} }
.user-email { .user-email {
@extend .t-title6; @extend %t-title6;
} }
} }
...@@ -172,7 +172,7 @@ body.course.users { ...@@ -172,7 +172,7 @@ body.course.users {
} }
.delete { .delete {
@extend .ui-btn-non; @extend %ui-btn-non;
} }
// HACK: nasty reset needed due to base.scss // HACK: nasty reset needed due to base.scss
...@@ -187,7 +187,7 @@ body.course.users { ...@@ -187,7 +187,7 @@ body.course.users {
&.add-admin-role { &.add-admin-role {
@include blue-button; @include blue-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -196,7 +196,7 @@ body.course.users { ...@@ -196,7 +196,7 @@ body.course.users {
&.remove-admin-role { &.remove-admin-role {
@include grey-button; @include grey-button;
@extend .t-action2; @extend %t-action2;
@include transition(all .15s); @include transition(all .15s);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline; padding: ($baseline/5) $baseline;
...@@ -205,7 +205,7 @@ body.course.users { ...@@ -205,7 +205,7 @@ body.course.users {
} }
.notoggleforyou { .notoggleforyou {
@extend .t-copy-sub1; @extend %t-copy-sub1;
color: $gray-l2; color: $gray-l2;
} }
} }
......
common/static/sass/_mixins.scss
...@@ -44,14 +44,14 @@ ...@@ -44,14 +44,14 @@
// ==================== // ====================
// extends - UI - used for page/view-level wrappers (for centering/grids) // extends - UI - used for page/view-level wrappers (for centering/grids)
.ui-wrapper { %ui-wrapper {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
} }
// extends - UI - window // extends - UI - window
.ui-window { %ui-window {
@include clearfix(); @include clearfix();
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
...@@ -61,27 +61,27 @@ ...@@ -61,27 +61,27 @@
} }
// extends - UI - visual link // extends - UI - visual link
.ui-fake-link { %ui-fake-link {
cursor: pointer; cursor: pointer;
} }
// extends - UI - functional disable // extends - UI - functional disable
.ui-disabled { %ui-disabled {
pointer-events: none; pointer-events: none;
outline: none; outline: none;
} }
// extends - UI - depth levels // extends - UI - depth levels
.ui-depth0 { z-index: 0; } %ui-depth0 { z-index: 0; }
.ui-depth1 { z-index: 10; } %ui-depth1 { z-index: 10; }
.ui-depth2 { z-index: 100; } %ui-depth2 { z-index: 100; }
.ui-depth3 { z-index: 1000; } %ui-depth3 { z-index: 1000; }
.ui-depth4 { z-index: 10000; } %ui-depth4 { z-index: 10000; }
.ui-depth5 { z-index: 100000; } %ui-depth5 { z-index: 100000; }
// extends - UI - buttons // extends - UI - buttons
.ui-btn { %ui-btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s); @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
display: inline-block; display: inline-block;
...@@ -105,18 +105,18 @@ ...@@ -105,18 +105,18 @@
} }
// pill button // pill button
.ui-btn-pill { %ui-btn-pill {
border-radius: ($baseline/5); border-radius: ($baseline/5);
} }
.ui-btn-rounded { %ui-btn-rounded {
border-radius: ($baseline/2); border-radius: ($baseline/2);
} }
// primary button // primary button
.ui-btn-primary { %ui-btn-primary {
@extend .ui-btn; @extend %ui-btn;
@extend .ui-btn-pill; @extend %ui-btn-pill;
padding:($baseline/2) $baseline; padding:($baseline/2) $baseline;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -137,9 +137,9 @@ ...@@ -137,9 +137,9 @@
} }
// secondary button // secondary button
.ui-btn-secondary { %ui-btn-secondary {
@extend .ui-btn; @extend %ui-btn;
@extend .ui-btn-pill; @extend %ui-btn-pill;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
padding:($baseline/2) $baseline; padding:($baseline/2) $baseline;
...@@ -156,8 +156,8 @@ ...@@ -156,8 +156,8 @@
} }
} }
.ui-btn-flat-outline { %ui-btn-flat-outline {
@extend .t-action4; @extend %t-action4;
@include transition(all .15s); @include transition(all .15s);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
} }
// button with no button shell until hover for understated actions // button with no button shell until hover for understated actions
.ui-btn-non { %ui-btn-non {
@include transition(all .15s); @include transition(all .15s);
border: none; border: none;
border-radius: ($baseline/4); border-radius: ($baseline/4);
...@@ -198,12 +198,12 @@ ...@@ -198,12 +198,12 @@
} }
span { span {
@extend .cont-text-sr; @extend %cont-text-sr;
} }
} }
// extends - UI archetypes - well // extends - UI archetypes - well
.ui-well { %ui-well {
box-shadow: inset 0 1px 2px 1px $shadow; box-shadow: inset 0 1px 2px 1px $shadow;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
} }
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
// ==================== // ====================
// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases // extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.cont-no-list { %cont-no-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -224,14 +224,14 @@ ...@@ -224,14 +224,14 @@
} }
// extends - content - image-replacement hidden text // extends - content - image-replacement hidden text
.cont-text-hide { %cont-text-hide {
text-indent: 100%; text-indent: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
// extends - content - hidden elems - screenreaders // extends - content - hidden elems - screenreaders
.cont-text-sr { %cont-text-sr {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: 1px; height: 1px;
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
} }
// extends - content - wrapping // extends - content - wrapping
.cont-text-wrap { %cont-text-wrap {
text-wrap: wrap; text-wrap: wrap;
white-space: pre-wrap; white-space: pre-wrap;
white-space: -moz-pre-wrap; white-space: -moz-pre-wrap;
...@@ -251,7 +251,7 @@ ...@@ -251,7 +251,7 @@
} }
// extends - content - text overflow by ellipsis // extends - content - text overflow by ellipsis
.cont-truncated { %cont-truncated {
@include box-sizing(border-box); @include box-sizing(border-box);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment