Skip to content

E
edx-platform
Commit da7127e7 by Brian Talbot
Options

LMS/Accounts: Converts many class-based Sass archetype-focused @extends to use… 

LMS/Accounts: Converts many class-based Sass archetype-focused @extends to use Sass placeholder syntax
parent 042aaf94
Showing with 71 additions and 72 deletions
lms/static/sass/_shame.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
// edx.org marketing site - 7/2013 visual button revamp // edx.org marketing site - 7/2013 visual button revamp
// extends btn // extends btn
.m-btn { %m-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;
...@@ -22,22 +22,22 @@ ...@@ -22,22 +22,22 @@
} }
} }
.m-btn-pill { %m-btn-pill {
border-radius: ($baseline/5); border-radius: ($baseline/5);
} }
.m-btn-rounded { %m-btn-rounded {
border-radius: ($baseline/2); border-radius: ($baseline/2);
} }
.m-btn-edged { %m-btn-edged {
border-radius: ($baseline/10); border-radius: ($baseline/10);
} }
// primary button // primary button
.m-btn-base { %m-btn-base {
@extend .m-btn; @extend %m-btn;
@extend .m-btn-edged; @extend %m-btn-edged;
border: none; border: none;
padding:($baseline/2) ($baseline); padding:($baseline/2) ($baseline);
text-align: center; text-align: center;
...@@ -55,8 +55,8 @@ ...@@ -55,8 +55,8 @@
} }
// primary button // primary button
.m-btn-primary { %m-btn-primary {
@extend .m-btn-base; @extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow; box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg; background: $action-primary-bg;
color: $action-primary-fg; color: $action-primary-fg;
...@@ -83,8 +83,8 @@ ...@@ -83,8 +83,8 @@
} }
// secondary button // secondary button
.m-btn-secondary { %m-btn-secondary {
@extend .m-btn-base; @extend %m-btn-base;
box-shadow: 0 2px 1px 0 $action-secondary-shadow; box-shadow: 0 2px 1px 0 $action-secondary-shadow;
background: $action-secondary-bg; background: $action-secondary-bg;
color: $action-secondary-fg; color: $action-secondary-fg;
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
// register or access courseware // register or access courseware
&.action-register, &.access-courseware { &.action-register, &.access-courseware {
@extend .m-btn-primary; @extend %m-btn-primary;
display: block; display: block;
.track { .track {
...@@ -183,14 +183,14 @@ ...@@ -183,14 +183,14 @@
// already registered but course not started or registration is closed // already registered but course not started or registration is closed
&.is-registered, &.registration-closed { &.is-registered, &.registration-closed {
@extend .m-btn-secondary; @extend %m-btn-secondary;
pointer-events: none !important; pointer-events: none !important;
display: block; display: block;
} }
// coming soon // coming soon
&.coming-soon { &.coming-soon {
@extend .m-btn-secondary; @extend %m-btn-secondary;
pointer-events: none !important; pointer-events: none !important;
outline: none; outline: none;
display: block; display: block;
......
lms/static/sass/base/_extends.scss
.faded-hr-divider { %faded-hr-divider {
@include background-image($faded-hr-image-1); @include background-image($faded-hr-image-1);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-hr-divider-medium { %faded-hr-divider-medium {
@include background-image($faded-hr-image-4); @include background-image($faded-hr-image-4);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-hr-divider-light { %faded-hr-divider-light {
@include background-image($faded-hr-image-5); @include background-image($faded-hr-image-5);
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-vertical-divider { %faded-vertical-divider {
@include background-image($faded-hr-image-1); @include background-image($faded-hr-image-1);
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.faded-vertical-divider-light { %faded-vertical-divider-light {
@include background-image($faded-hr-image-6); @include background-image($faded-hr-image-6);
background: transparent; background: transparent;
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.vertical-divider { %vertical-divider {
@extend .faded-vertical-divider; @extend %faded-vertical-divider;
position: relative; position: relative;
&::after { &::after {
@extend .faded-vertical-divider-light; @extend %faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -42,13 +42,13 @@ ...@@ -42,13 +42,13 @@
} }
} }
.horizontal-divider { %horizontal-divider {
border: none; border: none;
@extend .faded-hr-divider; @extend %faded-hr-divider;
position: relative; position: relative;
&::after { &::after {
@extend .faded-hr-divider-light; @extend %faded-hr-divider-light;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -56,24 +56,24 @@ ...@@ -56,24 +56,24 @@
} }
} }
.fade-right-hr-divider { %fade-right-hr-divider {
@include background-image($faded-hr-image-2); @include background-image($faded-hr-image-2);
border: none; border: none;
} }
.fade-left-hr-divider { %fade-left-hr-divider {
@include background-image($faded-hr-image-3); @include background-image($faded-hr-image-3);
border: none; border: none;
} }
//Styles for Error messages //Styles for Error messages
.error-message-colors { %error-message-colors {
background: $error-red; background: $error-red;
border: 1px solid rgb(202, 17, 17); border: 1px solid rgb(202, 17, 17);
color: rgb(143, 14, 14); color: rgb(143, 14, 14);
} }
.success-message-colors { %success-message-colors {
background: rgb(19, 159, 58); background: rgb(19, 159, 58);
border: 1px solid rgb(6, 65, 18); border: 1px solid rgb(6, 65, 18);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
...@@ -83,4 +83,4 @@ ...@@ -83,4 +83,4 @@
h2 { h2 {
display: none; display: none;
} }
} }
\ No newline at end of file
lms/static/sass/course/layout/_courseware_header.scss
...@@ -112,7 +112,7 @@ header.global.slim { ...@@ -112,7 +112,7 @@ header.global.slim {
padding-right: 20px; padding-right: 20px;
&:before { &:before {
@extend .faded-vertical-divider; @extend %faded-vertical-divider;
content: ""; content: "";
display: block; display: block;
height: 35px; height: 35px;
...@@ -123,7 +123,7 @@ header.global.slim { ...@@ -123,7 +123,7 @@ header.global.slim {
} }
&:after { &:after {
@extend .faded-vertical-divider-light; @extend %faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
height: 35px; height: 35px;
......
lms/static/sass/multicourse/_about_pages.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
width: flex-grid(12); width: flex-grid(12);
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
content: ""; content: "";
display: block; display: block;
} }
......
lms/static/sass/multicourse/_account.scss
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
// edx.org - marketing typography // edx.org - marketing typography
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .body-text-emphasized, .body-text, .button-primary, .button-secondary { %heading-1, %heading-2, %heading-3, %heading-4, %heading-5, %body-text-emphasized, %body-text, %button-primary, %button-secondary {
display: block; display: block;
font-family: $sans-serif; font-family: $sans-serif;
line-height: lh(1); line-height: lh(1);
} }
.heading-2 { %heading-2 {
font-size: 25px; font-size: 25px;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
font-weight: 300; font-weight: 300;
...@@ -25,14 +25,14 @@ ...@@ -25,14 +25,14 @@
color: $link-color-d1; color: $link-color-d1;
} }
.heading-3 { %heading-3 {
font-size: 21px; font-size: 21px;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
font-weight: 300; font-weight: 300;
color: $base-font-color; color: $base-font-color;
} }
.heading-4 { %heading-4 {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
...@@ -40,11 +40,11 @@ ...@@ -40,11 +40,11 @@
color: $m-gray-d2; color: $m-gray-d2;
} }
.heading-5 { %heading-5 {
} }
// specific examples - body // specific examples - body
.body-text-emphasized { %body-text-emphasized {
font-size: 18px; font-size: 18px;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
font-weight: 300; font-weight: 300;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
line-height: lh(1.1); line-height: lh(1.1);
} }
.body-text { %body-text {
font-size: 15px; font-size: 15px;
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
color: $base-font-color; color: $base-font-color;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
} }
// specific examples - buttons // specific examples - buttons
.button-primary { %button-primary {
border-radius: 0; border-radius: 0;
@include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%); @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
display: inline-block; display: inline-block;
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
box-shadow: none !important; box-shadow: none !important;
} }
.button-secondary { %button-secondary {
@include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%); @include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%);
display: inline-block; display: inline-block;
padding: $baseline/2 $baseline*2.5; padding: $baseline/2 $baseline*2.5;
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
} }
// layout // layout
.content-wrapper { %content-wrapper {
background: $account-content-wrapper-bg; background: $account-content-wrapper-bg;
padding-bottom: 0; padding-bottom: 0;
} }
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
padding: ($baseline*2) $baseline 0 $baseline; padding: ($baseline*2) $baseline 0 $baseline;
header h1 { header h1 {
@extend .heading-2; @extend %heading-2;
margin-bottom: $baseline; margin-bottom: $baseline;
padding-bottom: $baseline; padding-bottom: $baseline;
text-align: left; text-align: left;
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
// reset - horrible, but necessary // reset - horrible, but necessary
p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea { p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea {
@extend .body-text; @extend %body-text;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
} }
h3 { h3 {
@extend .heading-4; @extend %heading-4;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
} }
} }
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
form { form {
.instructions { .instructions {
@extend .body-text-emphasized; @extend %body-text-emphasized;
margin-bottom: $baseline; margin-bottom: $baseline;
} }
...@@ -390,7 +390,7 @@ ...@@ -390,7 +390,7 @@
@include clearfix(); @include clearfix();
button[type="submit"] { button[type="submit"] {
@extend .m-btn-primary; @extend %m-btn-primary;
&:disabled, &.is-disabled { &:disabled, &.is-disabled {
opacity: 0.3; opacity: 0.3;
...@@ -427,14 +427,14 @@ ...@@ -427,14 +427,14 @@
background: tint($yellow,20%); background: tint($yellow,20%);
.message-title { .message-title {
@extend .heading-4; @extend %heading-4;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-size: em(14); font-size: em(14);
font-weight: 600; font-weight: 600;
} }
.message-copy { .message-copy {
@extend .body-text; @extend %body-text;
margin: 0 !important; margin: 0 !important;
padding: 0; padding: 0;
list-style: none; list-style: none;
...@@ -559,7 +559,7 @@ ...@@ -559,7 +559,7 @@
} }
h2 { h2 {
@extend .heading-2; @extend %heading-2;
text-align: left; text-align: left;
} }
} }
...@@ -608,7 +608,7 @@ ...@@ -608,7 +608,7 @@
} }
.modal-form-error { .modal-form-error {
@extend .body-text; @extend %body-text;
box-shadow: inset 0 -1px 2px 0 tint($red, 85%); box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
@include box-sizing(border-box); @include box-sizing(border-box);
margin: $baseline 0 ($baseline/2) 0 !important; margin: $baseline 0 ($baseline/2) 0 !important;
......
lms/static/sass/multicourse/_course_about.scss
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
width: flex-grid(12); width: flex-grid(12);
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
content: ""; content: "";
display: none; display: none;
} }
...@@ -390,7 +390,7 @@ ...@@ -390,7 +390,7 @@
text-align: center; text-align: center;
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
content: ""; content: "";
display: block; display: block;
height: 1px; height: 1px;
......
lms/static/sass/multicourse/_courses.scss
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
vertical-align: middle; vertical-align: middle;
&::after { &::after {
@extend .faded-vertical-divider; @extend %faded-vertical-divider;
content: ""; content: "";
display: block; display: block;
height: 80px; height: 80px;
......
lms/static/sass/multicourse/_home.scss
...@@ -187,27 +187,27 @@ ...@@ -187,27 +187,27 @@
width: flex-grid(12); width: flex-grid(12);
&::before { &::before {
@extend .faded-hr-divider-medium; @extend %faded-hr-divider-medium;
content: ""; content: "";
display: block; display: block;
} }
&::after { &::after {
@extend .faded-hr-divider-medium; @extend %faded-hr-divider-medium;
content: ""; content: "";
display: block; display: block;
} }
hr { hr {
@extend .faded-hr-divider-light; @extend %faded-hr-divider-light;
border: none; border: none;
margin: 0px; margin: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
overflow: hidden; overflow: hidden;
&::before { &::before {
@extend .faded-vertical-divider; @extend %faded-vertical-divider;
content: ""; content: "";
display: block; display: block;
height: 80px; height: 80px;
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
} }
&::after { &::after {
@extend .faded-vertical-divider-light; @extend %faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
height: 80px; height: 80px;
......
lms/static/sass/multicourse/_media-kit.scss
...@@ -36,14 +36,14 @@ $white: rgb(255,255,255); ...@@ -36,14 +36,14 @@ $white: rgb(255,255,255);
} }
hr { hr {
@extend .faded-hr-divider-light; @extend %faded-hr-divider-light;
border: none; border: none;
margin: 0px; margin: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
......
lms/static/sass/multicourse/_password_reset.scss
...@@ -29,14 +29,14 @@ ...@@ -29,14 +29,14 @@
} }
hr { hr {
@extend .faded-hr-divider-light; @extend %faded-hr-divider-light;
border: none; border: none;
margin: 0px; margin: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
......
lms/static/sass/shared/_activation_messages.scss
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
padding: 10px; padding: 10px;
&.invalid { &.invalid {
@extend .error-message-colors; @extend %error-message-colors;
} }
&.valid { &.valid {
@extend .success-message-colors; @extend %success-message-colors;
} }
} }
......
lms/static/sass/shared/_header.scss
...@@ -279,7 +279,7 @@ header.global { ...@@ -279,7 +279,7 @@ header.global {
display: inline-block; display: inline-block;
.cta { .cta {
@extend .m-btn-primary; @extend %m-btn-primary;
} }
} }
......
lms/static/sass/shared/_modal.scss
...@@ -84,14 +84,14 @@ ...@@ -84,14 +84,14 @@
} }
hr { hr {
@extend .faded-hr-divider-light; @extend %faded-hr-divider-light;
border: none; border: none;
margin: 0px; margin: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
&::after { &::after {
@extend .faded-hr-divider; @extend %faded-hr-divider;
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
......
lms/static/sass/shared/_unsubscribe.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
h1 { h1 {
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
@extend .success-message-colors; @extend %success-message-colors;
} }
h1 + hr { h1 + hr {
......
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