Merge pull request #990 from edx/talbs/verification-sassplaceholders
Verification: Switch class-based Sass @extend rules to use Sass placeholder syntax
This commit is contained in:
Brian Talbot
@@ -223,7 +223,7 @@ mark {
|
||||
}
|
||||
|
||||
.sr {
|
||||
@extend .text-sr;
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.help-tab {
|
||||
|
||||
@@ -55,26 +55,26 @@
|
||||
// ====================
|
||||
|
||||
// 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 -hidden elems - screenreaders
|
||||
.text-sr {
|
||||
%text-sr {
|
||||
border: 0;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
height: 1px;
|
||||
@@ -86,7 +86,7 @@
|
||||
}
|
||||
|
||||
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
.ui-no-list {
|
||||
%ui-no-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -99,14 +99,14 @@
|
||||
}
|
||||
|
||||
// extends - text - image-replacement hidden text
|
||||
.text-hide {
|
||||
%text-hide {
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// extends - text - wrapping
|
||||
.text-wrap {
|
||||
%text-wrap {
|
||||
text-wrap: wrap;
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
// extends - text - text overflow by ellipsis
|
||||
.text-truncated {
|
||||
%text-truncated {
|
||||
@include box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// lms - elements - controls
|
||||
// ====================
|
||||
|
||||
.btn {
|
||||
%btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
|
||||
display: inline-block;
|
||||
@@ -18,23 +18,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pill {
|
||||
%btn-pill {
|
||||
border-radius: $baseline/5;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
%btn-rounded {
|
||||
border-radius: ($baseline/2);
|
||||
}
|
||||
|
||||
.btn-edged {
|
||||
%btn-edged {
|
||||
border-radius: ($baseline/10);
|
||||
}
|
||||
|
||||
// primary button
|
||||
.btn-primary {
|
||||
@extend .t-weight3;
|
||||
@extend .btn;
|
||||
@extend .btn-edged;
|
||||
%btn-primary {
|
||||
@extend %t-weight3;
|
||||
@extend %btn;
|
||||
@extend %btn-edged;
|
||||
border: none;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
text-align: center;
|
||||
@@ -57,8 +57,8 @@
|
||||
}
|
||||
|
||||
// blue primary gray
|
||||
.btn-primary-gray {
|
||||
@extend .btn-primary;
|
||||
%btn-primary-gray {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-gray-d2;
|
||||
background: $m-gray;
|
||||
color: $white;
|
||||
@@ -85,8 +85,8 @@
|
||||
}
|
||||
|
||||
// blue primary button
|
||||
.btn-primary-blue {
|
||||
@extend .btn-primary;
|
||||
%btn-primary-blue {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-blue-d4;
|
||||
background: $m-blue-d3;
|
||||
color: $white;
|
||||
@@ -113,8 +113,8 @@
|
||||
}
|
||||
|
||||
// pink primary button
|
||||
.btn-primary-pink {
|
||||
@extend .btn-primary;
|
||||
%btn-primary-pink {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-pink-d2;
|
||||
background: $m-pink;
|
||||
color: $white;
|
||||
@@ -141,8 +141,8 @@
|
||||
}
|
||||
|
||||
// green primary button
|
||||
.btn-primary-green {
|
||||
@extend .btn-primary;
|
||||
%btn-primary-green {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-green-d2;
|
||||
background: $m-green-d1;
|
||||
color: $white;
|
||||
@@ -169,7 +169,7 @@
|
||||
}
|
||||
|
||||
// disabled primary button - used for more manual approaches
|
||||
.btn-primary-disabled {
|
||||
%btn-primary-disabled {
|
||||
background: $m-gray-l2;
|
||||
color: $white-t3;
|
||||
pointer-events: none;
|
||||
@@ -189,19 +189,19 @@
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
@extend .t-action1;
|
||||
@extend .t-weight3;
|
||||
@extend %t-action1;
|
||||
@extend %t-weight3;
|
||||
display: block;
|
||||
padding:($baseline*0.75) ($baseline*1.5);
|
||||
}
|
||||
|
||||
.btn-avg {
|
||||
@extend .t-action2;
|
||||
@extend .t-weight3;
|
||||
@extend %t-action2;
|
||||
@extend %t-weight3;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
|
||||
@@ -211,7 +211,7 @@
|
||||
}
|
||||
|
||||
.btn-pink {
|
||||
@extend .btn-primary-pink;
|
||||
@extend %btn-primary-pink;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
|
||||
|
||||
@@ -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,72 +125,72 @@
|
||||
// ====================
|
||||
|
||||
// code
|
||||
.t-code {
|
||||
%t-code {
|
||||
font-family: $f-monospace;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// icons
|
||||
.t-icon1 {
|
||||
%t-icon1 {
|
||||
@include font-size(48);
|
||||
}
|
||||
|
||||
.t-icon2 {
|
||||
%t-icon2 {
|
||||
@include font-size(36);
|
||||
}
|
||||
|
||||
.t-icon3 {
|
||||
%t-icon3 {
|
||||
@include font-size(24);
|
||||
}
|
||||
|
||||
.t-icon4 {
|
||||
%t-icon4 {
|
||||
@include font-size(18);
|
||||
}
|
||||
|
||||
.t-icon5 {
|
||||
%t-icon5 {
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
.t-icon6 {
|
||||
%t-icon6 {
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.t-icon7 {
|
||||
%t-icon7 {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.t-icon8 {
|
||||
%t-icon8 {
|
||||
@include font-size(11);
|
||||
}
|
||||
|
||||
.t-icon9 {
|
||||
%t-icon9 {
|
||||
@include font-size(10);
|
||||
}
|
||||
|
||||
.t-icon-solo {
|
||||
%t-icon-solo {
|
||||
@include line-height(0);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography weights
|
||||
.t-weight1 {
|
||||
%t-weight1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.t-weight2 {
|
||||
%t-weight2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.t-weight3 {
|
||||
%t-weight3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.t-weight4 {
|
||||
%t-weight4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.t-weight5 {
|
||||
%t-weight5 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -274,7 +274,7 @@
|
||||
|
||||
// UI: course list
|
||||
.listing-courses {
|
||||
@extend .ui-no-list;
|
||||
@extend %ui-no-list;
|
||||
|
||||
.course-item {
|
||||
margin-bottom: ($baseline*2.5);
|
||||
@@ -294,7 +294,7 @@
|
||||
@include box-sizing(box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include clearfix();
|
||||
@extend .ui-depth2;
|
||||
@extend %ui-depth2;
|
||||
position: relative;
|
||||
|
||||
.cover {
|
||||
@@ -418,7 +418,7 @@
|
||||
|
||||
// STATE: course mode - verified
|
||||
&.verified {
|
||||
@extend .ui-depth2;
|
||||
@extend %ui-depth2;
|
||||
margin-top: ($baseline*2.5);
|
||||
border-top: 1px solid $verified-color-lvl3;
|
||||
padding-top: ($baseline*1.25);
|
||||
@@ -438,11 +438,11 @@
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@extend .text-sr;
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
@extend .ui-depth3;
|
||||
@extend %ui-depth3;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
@@ -450,8 +450,8 @@
|
||||
}
|
||||
|
||||
.sts-enrollment-value {
|
||||
@extend .ui-depth1;
|
||||
@extend .copy-badge;
|
||||
@extend %ui-depth1;
|
||||
@extend %copy-badge;
|
||||
border-radius: 0;
|
||||
padding: ($baseline/4) ($baseline/2) ($baseline/4) $baseline;
|
||||
color: $white;
|
||||
|
||||
@@ -3,76 +3,76 @@
|
||||
|
||||
// MISC: extends - type
|
||||
// application: canned headings
|
||||
.hd-lv1 {
|
||||
@extend .t-title1;
|
||||
@extend .t-weight1;
|
||||
%hd-lv1 {
|
||||
@extend %t-title1;
|
||||
@extend %t-weight1;
|
||||
color: $m-gray-d4;
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
}
|
||||
|
||||
.hd-lv2 {
|
||||
@extend .t-title4;
|
||||
@extend .t-weight1;
|
||||
%hd-lv2 {
|
||||
@extend %t-title4;
|
||||
@extend %t-weight1;
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
border-bottom: 1px solid $m-gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv3 {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight4;
|
||||
%hd-lv3 {
|
||||
@extend %t-title6;
|
||||
@extend %t-weight4;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv4 {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight2;
|
||||
%hd-lv4 {
|
||||
@extend %t-title6;
|
||||
@extend %t-weight2;
|
||||
margin: 0 0 $baseline 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv5 {
|
||||
@extend .t-title7;
|
||||
@extend .t-weight4;
|
||||
%hd-lv5 {
|
||||
@extend %t-title7;
|
||||
@extend %t-weight4;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
// application: canned copy
|
||||
.copy-base {
|
||||
@extend .t-copy-base;
|
||||
%copy-base {
|
||||
@extend %t-copy-base;
|
||||
color: $m-gray-d2;
|
||||
}
|
||||
|
||||
.copy-lead1 {
|
||||
@extend .t-copy-lead2;
|
||||
%copy-lead1 {
|
||||
@extend %t-copy-lead2;
|
||||
color: $m-gray;
|
||||
}
|
||||
|
||||
.copy-detail {
|
||||
@extend .t-copy-sub1;
|
||||
@extend .t-weight3;
|
||||
%copy-detail {
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-weight3;
|
||||
color: $m-gray-d1;
|
||||
}
|
||||
|
||||
.copy-metadata {
|
||||
@extend .t-copy-sub2;
|
||||
%copy-metadata {
|
||||
@extend %t-copy-sub2;
|
||||
color: $m-gray-d1;
|
||||
|
||||
|
||||
.copy-metadata-value {
|
||||
@extend .t-weight2;
|
||||
%copy-metadata-value {
|
||||
@extend %t-weight2;
|
||||
}
|
||||
|
||||
.copy-metadata-value {
|
||||
@extend .t-weight4;
|
||||
%copy-metadata-value {
|
||||
@extend %t-weight4;
|
||||
}
|
||||
}
|
||||
|
||||
// application: canned links
|
||||
.copy-link {
|
||||
%copy-link {
|
||||
border-bottom: 1px dotted transparent;
|
||||
|
||||
&:hover, &:active {
|
||||
@@ -80,9 +80,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.copy-badge {
|
||||
@extend .t-title8;
|
||||
@extend .t-weight5;
|
||||
%copy-badge {
|
||||
@extend %t-title8;
|
||||
@extend %t-weight5;
|
||||
border-radius: ($baseline/5);
|
||||
padding: ($baseline/2) $baseline;
|
||||
text-transform: uppercase;
|
||||
@@ -90,14 +90,14 @@
|
||||
|
||||
// ====================
|
||||
|
||||
.btn-verify-primary {
|
||||
@extend .btn-primary-green;
|
||||
%btn-verify-primary {
|
||||
@extend %btn-primary-green;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// MISC: extends - UI - window
|
||||
.ui-window {
|
||||
%ui-window {
|
||||
@include clearfix();
|
||||
border-radius: ($baseline/10);
|
||||
box-shadow: 0 1px 2px 1px $shadow-l1;
|
||||
@@ -109,7 +109,7 @@
|
||||
// ====================
|
||||
|
||||
// MISC: extends - UI - well
|
||||
.ui-well {
|
||||
%ui-well {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
}
|
||||
@@ -130,10 +130,6 @@
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.expandable-area {
|
||||
// @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
|
||||
}
|
||||
|
||||
// STATE: active
|
||||
&.is-ready {
|
||||
|
||||
@@ -142,22 +138,13 @@
|
||||
}
|
||||
|
||||
.title-expand {
|
||||
@extend .ui-fake-link;
|
||||
@extend %ui-fake-link;
|
||||
color: $m-blue-d2;
|
||||
|
||||
&:hover {
|
||||
color: $m-blue;
|
||||
}
|
||||
}
|
||||
|
||||
/* using jquery
|
||||
.expandable-area {
|
||||
visibility: none;
|
||||
height: 0;
|
||||
opacity: 0.0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
// STATE: expanded
|
||||
@@ -167,14 +154,6 @@
|
||||
@include transform(rotate(0));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
/*
|
||||
.expandable-area {
|
||||
visibility: visible;
|
||||
height: ($baseline*16);
|
||||
opacity: 1.0;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,7 +172,7 @@
|
||||
|
||||
// reset: typography - heading
|
||||
h1, h2, h3, h4, h5 ,h6 {
|
||||
@extend .t-title;
|
||||
@extend %t-title;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
@@ -230,7 +209,7 @@
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
font-family: $sans-serif;
|
||||
font-style: normal;
|
||||
color: $m-gray-d4;
|
||||
@@ -239,7 +218,7 @@
|
||||
// HACK: nasty override due to our bad input/button styling
|
||||
button, input[type="submit"], input[type="button"], button[type="submit"] {
|
||||
@include font-size(16);
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
letter-spacing: 0;
|
||||
@@ -255,7 +234,7 @@
|
||||
|
||||
// reset: lists
|
||||
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info {
|
||||
@extend .ui-no-list;
|
||||
@extend %ui-no-list;
|
||||
}
|
||||
|
||||
// ====================
|
||||
@@ -275,24 +254,24 @@
|
||||
|
||||
// elements: common copy
|
||||
.title {
|
||||
@extend .t-title5;
|
||||
@extend .t-weight1;
|
||||
@extend %t-title5;
|
||||
@extend %t-weight1;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-weight1;
|
||||
@extend %t-weight1;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// elements - controls
|
||||
.action-primary {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-confirm {
|
||||
@extend .btn-verify-primary;
|
||||
@extend %btn-verify-primary;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -306,7 +285,7 @@
|
||||
.wrapper-report {
|
||||
|
||||
.report {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
width: flex-grid(12,12);
|
||||
border-color: $m-gray-t3;
|
||||
border-collapse:collapse;
|
||||
@@ -316,14 +295,14 @@
|
||||
}
|
||||
|
||||
td {
|
||||
@extend .t-weight3;
|
||||
@extend %t-weight3;
|
||||
vertical-align: middle;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
color: $m-gray-d3;
|
||||
}
|
||||
|
||||
th {
|
||||
@extend .t-weight2;
|
||||
@extend %t-weight2;
|
||||
padding: ($baseline/2) $baseline;
|
||||
}
|
||||
|
||||
@@ -334,8 +313,8 @@
|
||||
}
|
||||
|
||||
th[scope="col"] {
|
||||
@extend .t-title7;
|
||||
@extend .t-weight2;
|
||||
@extend %t-title7;
|
||||
@extend %t-weight2;
|
||||
vertical-align: middle;
|
||||
color: $m-gray-l1;
|
||||
background: $m-gray-l4;
|
||||
@@ -365,12 +344,12 @@
|
||||
.help-item {
|
||||
|
||||
.title {
|
||||
@extend .hd-lv4;
|
||||
@extend %hd-lv4;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-detail;
|
||||
@extend %copy-detail;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -393,18 +372,18 @@
|
||||
width: flex-grid(11,12);
|
||||
|
||||
.title {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title6;
|
||||
@extend %t-weight4;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-sub1;
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
width: flex-grid(1,12);
|
||||
@extend .t-icon2;
|
||||
@extend %t-icon2;
|
||||
text-align: center;
|
||||
color: $m-blue;
|
||||
}
|
||||
@@ -479,7 +458,7 @@
|
||||
text-align: right;
|
||||
|
||||
.sts-track-value {
|
||||
@extend .copy-badge;
|
||||
@extend %copy-badge;
|
||||
color: $white;
|
||||
background: $verified-color-lvl3;
|
||||
|
||||
@@ -492,7 +471,7 @@
|
||||
}
|
||||
|
||||
.sts-label {
|
||||
@extend .t-title7;
|
||||
@extend %t-title7;
|
||||
display: block;
|
||||
margin-bottom: ($baseline/2);
|
||||
border-bottom: ($baseline/10) solid $m-gray-l4;
|
||||
@@ -501,14 +480,14 @@
|
||||
}
|
||||
|
||||
.sts-course {
|
||||
@extend .t-title;
|
||||
@extend %t-title;
|
||||
width: flex-grid(9,12);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.sts-course-org, .sts-course-number {
|
||||
@extend .t-title5;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title5;
|
||||
@extend %t-weight4;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -519,7 +498,7 @@
|
||||
.sts-course-name {
|
||||
@include font-size(28);
|
||||
@include line-height(28);
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -535,7 +514,7 @@
|
||||
|
||||
.progress-sts {
|
||||
@include size(($baseline/4));
|
||||
@extend .ui-depth1;
|
||||
@extend %ui-depth1;
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 7%;
|
||||
@@ -566,7 +545,7 @@
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
@extend .ui-depth2;
|
||||
@extend %ui-depth2;
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
height: ($baseline*6);
|
||||
@@ -585,8 +564,8 @@
|
||||
background: $white;
|
||||
|
||||
.step-number {
|
||||
@extend .t-title7;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title7;
|
||||
@extend %t-weight4;
|
||||
@include line-height(0);
|
||||
margin: 16px auto 0 auto;
|
||||
color: $m-gray-l1;
|
||||
@@ -594,8 +573,8 @@
|
||||
}
|
||||
|
||||
.step-name {
|
||||
@extend .t-title7;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title7;
|
||||
@extend %t-weight4;
|
||||
color: $m-gray-l1;
|
||||
}
|
||||
|
||||
@@ -660,12 +639,12 @@
|
||||
width: flex-grid(12,12);
|
||||
|
||||
> .title {
|
||||
@extend .hd-lv2;
|
||||
@extend %hd-lv2;
|
||||
color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
@extend .t-copy-lead1;
|
||||
@extend %t-copy-lead1;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
@@ -688,11 +667,11 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend .hd-lv3;
|
||||
@extend %hd-lv3;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-detail;
|
||||
@extend %copy-detail;
|
||||
}
|
||||
|
||||
// help - general list
|
||||
@@ -721,7 +700,7 @@
|
||||
}
|
||||
|
||||
.task {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin-right: flex-gutter();
|
||||
@@ -739,11 +718,11 @@
|
||||
position: absolute;
|
||||
|
||||
.action {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
|
||||
*[class^="icon-"] {
|
||||
@extend .t-icon4;
|
||||
@extend %t-icon4;
|
||||
padding: ($baseline*.25) ($baseline*.5);
|
||||
display: block;
|
||||
}
|
||||
@@ -763,7 +742,7 @@
|
||||
&.approved {
|
||||
|
||||
.action {
|
||||
@extend .btn-verify-primary;
|
||||
@extend %btn-verify-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -804,7 +783,7 @@
|
||||
text-align: right;
|
||||
|
||||
.action-retakephotos a {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
@include font-size(14);
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
@@ -841,14 +820,14 @@
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend .hd-lv3;
|
||||
@extend %hd-lv3;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-base;
|
||||
@extend %copy-base;
|
||||
|
||||
strong {
|
||||
@extend .t-weight5;
|
||||
@extend %t-weight5;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
}
|
||||
@@ -872,7 +851,7 @@
|
||||
}
|
||||
|
||||
.placeholder-photo {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
|
||||
img {
|
||||
@@ -887,11 +866,11 @@
|
||||
margin-left: $baseline;
|
||||
|
||||
.title {
|
||||
@extend .hd-lv5;
|
||||
@extend %hd-lv5;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-detail;
|
||||
@extend %copy-detail;
|
||||
}
|
||||
|
||||
// help - general list
|
||||
@@ -932,7 +911,7 @@
|
||||
text-align: right;
|
||||
|
||||
.action-editname a {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
@include font-size(14);
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
@@ -971,7 +950,7 @@
|
||||
}
|
||||
|
||||
.contribution-option-other1 label, .contribution-option-other2 label {
|
||||
@extend .text-sr;
|
||||
@extend %text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1027,8 +1006,8 @@
|
||||
border-top: ($baseline/5) solid $m-gray-l4;
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-lead1;
|
||||
@extend .t-weight4;
|
||||
@extend %t-copy-lead1;
|
||||
@extend %t-weight4;
|
||||
position: absolute;
|
||||
top: -($baseline*1.25);
|
||||
left: 45%;
|
||||
@@ -1044,7 +1023,7 @@
|
||||
|
||||
// UI: nav - wizard
|
||||
.nav-wizard {
|
||||
@extend .ui-well;
|
||||
@extend %ui-well;
|
||||
@include clearfix;
|
||||
width: flex-grid(12,12);
|
||||
border-radius: ($baseline/10);
|
||||
@@ -1055,7 +1034,7 @@
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
@extend .t-copy-sub1;
|
||||
@extend %t-copy-sub1;
|
||||
float: left;
|
||||
width: flex-grid(6,12);
|
||||
margin: ($baseline*0.75) flex-gutter() 0 0;
|
||||
@@ -1076,7 +1055,7 @@
|
||||
background: $m-gray-l4;
|
||||
|
||||
.action-primary {
|
||||
@extend .btn-primary-disabled;
|
||||
@extend %btn-primary-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1112,7 +1091,7 @@
|
||||
}
|
||||
|
||||
.label-value {
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
}
|
||||
|
||||
.denomination-name {
|
||||
@@ -1134,7 +1113,7 @@
|
||||
.list-faq {
|
||||
|
||||
.faq-question {
|
||||
@extend .hd-lv3;
|
||||
@extend %hd-lv3;
|
||||
border-bottom: 1px solid $m-gray-l4;
|
||||
padding-bottom: ($baseline/4);
|
||||
}
|
||||
@@ -1155,12 +1134,12 @@
|
||||
width: flex-grid(12,12);
|
||||
|
||||
> .title {
|
||||
@extend .hd-lv2;
|
||||
@extend %hd-lv2;
|
||||
color: $m-blue-d1;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
@extend .t-copy-lead1;
|
||||
@extend %t-copy-lead1;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
@@ -1197,7 +1176,7 @@
|
||||
&.step-select-track {
|
||||
|
||||
.sts-track {
|
||||
@extend .text-sr;
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.form-register-choose {
|
||||
@@ -1241,17 +1220,17 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend .t-title5;
|
||||
@extend .t-weight5;
|
||||
@extend %t-title5;
|
||||
@extend %t-weight5;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .t-copy-base;
|
||||
@extend %t-copy-base;
|
||||
}
|
||||
|
||||
.action-select input {
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
}
|
||||
}
|
||||
@@ -1268,7 +1247,7 @@
|
||||
}
|
||||
|
||||
.action-select input {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1298,7 +1277,7 @@
|
||||
}
|
||||
|
||||
.action-intro {
|
||||
@extend .copy-detail;
|
||||
@extend %copy-detail;
|
||||
width: flex-grid(3,8);
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1308,7 +1287,7 @@
|
||||
}
|
||||
|
||||
.action-select input {
|
||||
@extend .btn-verify-primary;
|
||||
@extend %btn-verify-primary;
|
||||
}
|
||||
|
||||
.action-intro {
|
||||
@@ -1317,7 +1296,7 @@
|
||||
|
||||
// extra register options/info
|
||||
.title-expand {
|
||||
@extend .t-copy-sub1;
|
||||
@extend %t-copy-sub1;
|
||||
font-weight: 500 !important;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@@ -1332,14 +1311,14 @@
|
||||
width: flex-grid(4,12);
|
||||
|
||||
.title {
|
||||
@extend .hd-lv4;
|
||||
@extend .t-weight4;
|
||||
@extend %hd-lv4;
|
||||
@extend %t-weight4;
|
||||
margin-top: $baseline;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-detail;
|
||||
@extend %copy-detail;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1353,8 +1332,8 @@
|
||||
margin: $baseline 0;
|
||||
|
||||
.label {
|
||||
@extend .hd-lv4;
|
||||
@extend .t-weight4;
|
||||
@extend %hd-lv4;
|
||||
@extend %t-weight4;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -1397,7 +1376,7 @@
|
||||
}
|
||||
|
||||
.contribution-option-other1 label, .contribution-option-other2 label {
|
||||
@extend .text-sr;
|
||||
@extend %text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1434,7 +1413,7 @@
|
||||
width: flex-grid(12,12);
|
||||
|
||||
.req {
|
||||
@extend .ui-window;
|
||||
@extend %ui-window;
|
||||
width: flex-grid(4,12);
|
||||
min-height: ($baseline*15);
|
||||
float: left;
|
||||
@@ -1447,8 +1426,8 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend .t-title5;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title5;
|
||||
@extend %t-weight4;
|
||||
padding: $baseline;
|
||||
border-bottom: 1px solid $verified-color-lvl4;
|
||||
background: $verified-color-lvl5;
|
||||
@@ -1464,7 +1443,7 @@
|
||||
border-radius: ($baseline*10);
|
||||
|
||||
*[class^="icon"] {
|
||||
@extend .t-icon1;
|
||||
@extend %t-icon1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -1473,12 +1452,12 @@
|
||||
}
|
||||
|
||||
.icon-under {
|
||||
@extend .ui-depth1;
|
||||
@extend %ui-depth1;
|
||||
}
|
||||
|
||||
.icon-over {
|
||||
@extend .ui-depth2;
|
||||
@extend .t-icon5;
|
||||
@extend %ui-depth2;
|
||||
@extend %t-icon5;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 34px;
|
||||
@@ -1496,13 +1475,13 @@
|
||||
}
|
||||
|
||||
.copy-super {
|
||||
@extend .t-copy-base;
|
||||
@extend %t-copy-base;
|
||||
margin-bottom: ($baseline/2);
|
||||
color: $verified-color-lvl1;
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend .t-copy-sub2;
|
||||
@extend %t-copy-sub2;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -1517,8 +1496,8 @@
|
||||
border-color: $m-pink-l3;
|
||||
|
||||
.title {
|
||||
@extend .t-title5;
|
||||
@extend .t-weight4;
|
||||
@extend %t-title5;
|
||||
@extend %t-weight4;
|
||||
border-bottom-color: $m-pink-l3;
|
||||
background: tint($m-pink, 95%);
|
||||
color: $m-pink;
|
||||
@@ -1529,12 +1508,12 @@
|
||||
}
|
||||
|
||||
.copy-super {
|
||||
@extend .t-copy-lead1;
|
||||
@extend %t-copy-lead1;
|
||||
color: $m-pink;
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend .t-copy-base;
|
||||
@extend %t-copy-base;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1684,7 +1663,7 @@
|
||||
.step-match {
|
||||
|
||||
label {
|
||||
@extend .t-copy-sub1;
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1784,12 +1763,12 @@
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend .hd-lv3;
|
||||
@extend %hd-lv3;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-base;
|
||||
@extend %copy-base;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
@@ -1801,7 +1780,7 @@
|
||||
.options {
|
||||
|
||||
.action-course {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
@include font-size(14);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
@@ -1810,7 +1789,7 @@
|
||||
.course-actions {
|
||||
|
||||
.action-dashboard {
|
||||
@extend .btn-primary-blue;
|
||||
@extend %btn-primary-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1839,7 +1818,7 @@
|
||||
.register.is-verified {
|
||||
|
||||
.nav-wizard .price-value {
|
||||
@extend .t-weight4;
|
||||
@extend %t-weight4;
|
||||
@include font-size(16);
|
||||
margin-top: 18px;
|
||||
color: $m-blue-d1;
|
||||
|
||||
Reference in New Issue
Block a user