160 lines
3.2 KiB
SCSS
160 lines
3.2 KiB
SCSS
// ------------------------------
|
|
// LMS Problem Feedback Revamp styling
|
|
// Mirror styles from the Pattern Library
|
|
|
|
@import 'lms/theme/variables';
|
|
|
|
|
|
// ----------------------------
|
|
// #GLOBALS
|
|
// ----------------------------
|
|
%btn-shims {
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-style: $btn-border-style;
|
|
border-radius: $btn-border-radius;
|
|
border-width: $btn-border-size;
|
|
box-shadow: none;
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
text-shadow: none;
|
|
text-transform: capitalize;
|
|
|
|
// Display: block, one button per line, full width
|
|
&.block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
// STATE: is disabled
|
|
&:disabled,
|
|
&.is-disabled {
|
|
@extend %state-disabled;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
|
|
&:only-child,
|
|
.sr-only + & {
|
|
@include margin-right(0);
|
|
}
|
|
}
|
|
|
|
&.btn-small {
|
|
@extend %btn-small;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// #DEFAULT
|
|
// ----------------------------
|
|
.btn-default {
|
|
@extend %btn-shims;
|
|
|
|
border-color: $btn-default-border-color;
|
|
background: $btn-default-background;
|
|
color: $btn-default-color;
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus,
|
|
&.is-focused {
|
|
border-color: $btn-default-focus-border-color;
|
|
background-color: $btn-default-background;
|
|
color: $btn-default-focus-color;
|
|
}
|
|
|
|
// STATE: is pressed or active
|
|
&:active,
|
|
&.is-pressed,
|
|
&.is-active {
|
|
border-color: $btn-default-active-border-color;
|
|
color: $btn-default-active-color;
|
|
}
|
|
|
|
// STATE: is disabled
|
|
&:disabled,
|
|
&.is-disabled {
|
|
border-color: $btn-disabled-border-color;
|
|
color: $btn-disabled-color;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// #PRIMARY
|
|
// ----------------------------
|
|
.btn-primary {
|
|
@extend %btn-shims;
|
|
|
|
border-color: $btn-brand-border-color;
|
|
background: $btn-brand-background;
|
|
color: $btn-brand-color;
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus,
|
|
&.is-focused {
|
|
border-color: $btn-brand-focus-border-color;
|
|
background-color: $btn-brand-focus-background;
|
|
color: $btn-brand-focus-color;
|
|
}
|
|
|
|
// STATE: is pressed or active
|
|
&:active,
|
|
&.is-pressed,
|
|
&.is-active {
|
|
border-color: $btn-brand-active-border-color;
|
|
background: $btn-brand-active-background;
|
|
}
|
|
|
|
// STATE: is disabled
|
|
&:disabled,
|
|
&.is-disabled {
|
|
border-color: $btn-disabled-border-color;
|
|
background: $btn-brand-disabled-background;
|
|
color: $btn-brand-disabled-color;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// #UPGRADE
|
|
// ----------------------------
|
|
.btn-upgrade {
|
|
@extend %btn-shims;
|
|
|
|
border-color: $btn-upgrade-border-color;
|
|
background: $btn-upgrade-background;
|
|
color: $btn-upgrade-color;
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus,
|
|
&.is-focused {
|
|
border-color: $btn-upgrade-focus-border-color;
|
|
background-color: $btn-upgrade-focus-background;
|
|
color: $btn-upgrade-focus-color;
|
|
}
|
|
|
|
// STATE: is disabled
|
|
&:disabled,
|
|
&.is-disabled {
|
|
border-color: $btn-disabled-border-color;
|
|
background: $btn-brand-disabled-background;
|
|
color: $btn-upgrade-color;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// #BRAND
|
|
// ----------------------------
|
|
.btn-brand {
|
|
@extend .btn-primary;
|
|
}
|