Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edx.org: abstracting new edx.org button extends and colors with other themes in mind

Browse Source
This commit is contained in:
Brian Talbot
2013-07-24 14:56:27 -04:00
parent 049794463a
commit d61e4e50ec
5 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
lms/static/sass/_shame.scss
View File

@@ -35,7 +35,7 @@
}
// primary button
.m-btn-primary {
.m-btn-base {
@extend .m-btn;
@extend .m-btn-edged;
border: none;
@@ -46,67 +46,67 @@
letter-spacing: 0;
&.disabled, &[disabled], &.is-disabled {
background: $m-gray-d3;
background: $action-primary-disabled-bg;
&:hover {
background: $m-gray-d3 !important; // needed for IE currently
background: $action-primary-disabled-bg !important; // needed for IE currently
}
}
}
// blue primary button
.m-btn-primary-blue {
@extend .m-btn-primary;
box-shadow: 0 2px 1px 0 $m-blue-d4;
background: $m-blue-d3;
color: $white;
// primary button
.m-btn-primary {
@extend .m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg;
color: $action-primary-fg;
&:hover, &:active {
background: $m-blue-d1;
background: $action-primary-focused-bg;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-blue-d2;
background: $m-blue;
color: $m-blue-d2;
box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow;
background: $action-primary-active-bg;
color: $action-primary-active-fg;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-blue-d3;
color: $m-blue-d3;
box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow;
color: $action-primary-active-focused-fg;
}
}
&.disabled, &[disabled] {
box-shadow: none;
background: $m-gray-d3; // needed for IE currently
background: $action-primary-disabled-bg; // needed for IE currently
}
}
// pink primary button
.m-btn-primary-pink {
@extend .m-btn-primary;
box-shadow: 0 2px 1px 0 $m-pink-d2;
background: $m-pink;
color: $white;
// secondary button
.m-btn-secondary {
@extend .m-btn-base;
box-shadow: 0 2px 1px 0 $action-secondary-shadow;
background: $action-secondary-bg;
color: $action-secondary-fg;
&:hover, &:active {
background: $m-pink-l3;
background: $action-secondary-focused-bg;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-pink-d1;
background: $m-pink-l2;
color: $m-pink-d1;
box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow;
background: $action-secondary-active-bg;
color: $action-secondary-active-fg;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-pink-d2;
color: $m-pink-d3;
box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow;
color: $action-secondary-active-focused-fg;
}
}
&.disabled, &[disabled] {
box-shadow: none;
background: $m-gray-d3; // needed for IE currently
background: $action-secondary-disabled-bg; // needed for IE currently
}
}
@@ -154,20 +154,20 @@
// register or access courseware
&.action-register, &.access-courseware {
@extend .m-btn-primary-blue;
@extend .m-btn-primary;
display: block;
}
// already registered but course not started or registration is closed
&.is-registered, &.registration-closed {
@extend .m-btn-primary-pink;
@extend .m-btn-secondary;
pointer-events: none !important;
display: block;
}
// coming soon
&.coming-soon {
@extend .m-btn-primary-pink;
@extend .m-btn-secondary;
pointer-events: none !important;
outline: none;
display: block;

48
lms/static/sass/base/_variables.scss
View File

@@ -69,7 +69,6 @@ $m-pink-d3: #771C44;
$m-base-font-size: em(15);
$base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
@@ -88,10 +87,57 @@ $courseware-footer-border: none;
$courseware-footer-shadow: none;
$courseware-footer-margin: 0px;
// actions
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent;
$button-bg-hover-color: #fff;
// actions - primary
$action-primary-bg: $m-blue-d3;
$action-primary-fg: $white;
$action-primary-shadow: $m-blue-d4;
// focused - hover/active pseudo states
$action-primary-focused-bg: $m-blue-d1;
$action-primary-focused-fg: $white;
// current or active navigation item
$action-primary-active-bg: $m-blue;
$action-primary-active-fg: $m-blue-d3;
$action-primary-active-shadow: $m-blue-d2;
$action-primary-active-focused-fg: $m-blue-d4;
$action-primary-active-focused-shadow: $m-blue-d3;
// disabled
$action-primary-disabled-bg: $m-gray-d3;
$action-prmary-disabled-fg: $white;
// actions - secondary
$action-secondary-bg: $m-pink;
$action-secondary-fg: $white;
$action-secondary-shadow: $m-pink-d2;
// focused - hover/active pseudo states
$action-secondary-focused-bg: $m-pink-l3;
$action-secondary-focused-fg: $white;
// current or active navigation item
$action-secondary-active-bg: $m-pink-l2;
$action-secondary-active-fg: $m-pink-d1;
$action-secondary-active-shadow: $m-pink-d1;
$action-secondary-active-focused-fg: $m-pink-d3;
$action-secondary-active-focused-shadow: $m-pink-d2;
// disabled
$action-secondary-disabled-bg: $m-gray-d3;
$action-secondary-disabled-fg: $white;
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));

2
lms/static/sass/multicourse/_account.scss
View File

@@ -390,7 +390,7 @@
@include clearfix();
button[type="submit"] {
@extend .m-btn-primary-blue;
@extend .m-btn-primary;
&:disabled, &.is-disabled {
opacity: 0.3;

2
lms/static/sass/shared/_header.scss
View File

@@ -279,7 +279,7 @@ header.global {
display: inline-block;
.cta {
@extend .m-btn-primary-blue;
@extend .m-btn-primary;
}
}

3
lms/templates/mktg_iframe.html
View File

File diff suppressed because one or more lines are too long