Files
edx-platform/lms/static/sass/_shame.scss

191 lines
4.1 KiB
SCSS

// edX LMS - shame
// shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ====================
// edx.org marketing site - 7/2013 visual button revamp
// extends 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;
cursor: pointer;
text-decoration: none;
&:hover, &:active {
}
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
}
}
.m-btn-pill {
border-radius: ($baseline/5);
}
.m-btn-rounded {
border-radius: ($baseline/2);
}
.m-btn-edged {
border-radius: ($baseline/10);
}
// primary button
.m-btn-base {
@extend .m-btn;
@extend .m-btn-edged;
border: none;
padding:($baseline/2) ($baseline);
text-align: center;
text-shadow: none;
font-weight: 500;
letter-spacing: 0;
&.disabled, &[disabled], &.is-disabled {
background: $action-primary-disabled-bg;
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
}
}
}
// 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: $action-primary-focused-bg;
}
&.current, &.active {
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 $action-primary-active-focused-shadow;
color: $action-primary-active-focused-fg;
}
}
&.disabled, &[disabled] {
box-shadow: none;
background: $action-primary-disabled-bg; // needed for IE currently
}
}
// 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: $action-secondary-focused-bg;
}
&.current, &.active {
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 $action-secondary-active-focused-shadow;
color: $action-secondary-active-focused-fg;
}
}
&.disabled, &[disabled] {
box-shadow: none;
background: $action-secondary-disabled-bg; // needed for IE currently
}
}
// ====================
// edx.org marketing site - needed, but bad overrides with importants
.view-register, .view-login, .view-passwordreset {
.form-actions button[type="submit"] {
text-transform: none;
vertical-align: middle;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
}
// ====================
// edx.org marketing site - registration iframe band-aid (poor form enough to isolate out)
.view-partial-mktgregister {
// dimensions needed for course about page on marketing site
.wrapper-view {
overflow: hidden;
}
// nav list
.list-actions {
list-style: none;
margin: 0;
padding: 0;
.item {
margin: 0;
}
}
.action {
font-size: 16px;
font-weight: 500;
// register or access courseware
&.action-register, &.access-courseware {
@extend .m-btn-primary;
display: block;
}
// already registered but course not started or registration is closed
&.is-registered, &.registration-closed {
@extend .m-btn-secondary;
pointer-events: none !important;
display: block;
}
// coming soon
&.coming-soon {
@extend .m-btn-secondary;
pointer-events: none !important;
outline: none;
display: block;
}
}
}
// ====================
// The Following is to enable themes to display H1s on login and register pages
.view-login .introduction header h1,
.view-register .introduction header h1 {
@include login_register_h1_style;
}
footer .references {
@include footer_references_style;
}