Skip to content

E
edx-platform
Commit c101465f by Brian Talbot
Options

Verification: converts all class-based Sass archetype-focused @extends to use… 

Verification: converts all class-based Sass archetype-focused @extends to use Sass placeholder syntax
parent 54f103dd
Showing with 222 additions and 243 deletions
lms/static/sass/base/_base.scss
......@@ -223,7 +223,7 @@ mark {
}
.sr {
@extend .text-sr;
@extend %text-sr;
}
.help-tab {
......
lms/static/sass/base/_mixins.scss
......@@ -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;
......
lms/static/sass/elements/_controls.scss
// 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;
......
lms/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,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;
}
lms/static/sass/multicourse/_dashboard.scss
......@@ -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;
......
lms/static/sass/views/_verification.scss
......@@ -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;
......
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