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