Merge pull request #989 from edx/talbs/studio-sassplaceholders
Studio: Switch class-based Sass @extend rules to use Sass placeholder syntax
This commit is contained in:
Brian Talbot
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.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');
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
body.course.export {
|
||||
|
||||
.export-overview {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
@include clearfix;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
2
cms/static/sass/views/_import.scss
vendored
2
cms/static/sass/views/_import.scss
vendored
@@ -4,7 +4,7 @@
|
||||
body.course.import {
|
||||
|
||||
.import-overview {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
@include clearfix;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -630,7 +630,7 @@ body.course.outline {
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .t-copy-sub1;
|
||||
@extend %t-copy-sub1;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%));
|
||||
|
||||
@@ -171,7 +171,7 @@ body.course.static-pages {
|
||||
}
|
||||
|
||||
.static-page-details {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
padding: 32px 40px;
|
||||
|
||||
.row {
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user