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 93 additions and 93 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;
......
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