Skip to content

E
edx-platform
Commit 259d3124 by Brian Talbot
Options

Merge pull request #990 from edx/talbs/verification-sassplaceholders 

Verification: Switch class-based Sass @extend rules to use Sass placeholder syntax
parents 50f190c5 c101465f
Showing with 93 additions and 93 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;
......
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