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