Skip to content

E
edx-platform
Commit c0fec1b2 by Brian Talbot
Options

Merge pull request #1006 from edx/talbs/lms-sassplaceholders 

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