116 lines
2.2 KiB
SCSS
116 lines
2.2 KiB
SCSS
// ------------------------------
|
|
// Open edX Certificates: Controls
|
|
|
|
// archetype: buttons
|
|
%btn {
|
|
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
&:hover, &:active, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.disabled, &[disabled] {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
%btn-pill {
|
|
@extend %btn;
|
|
border-radius: $baseline-v/5;
|
|
}
|
|
|
|
%btn-rounded {
|
|
@extend %btn;
|
|
border-radius: ($baseline-v/2);
|
|
}
|
|
|
|
%btn-edged {
|
|
@extend %btn;
|
|
border-radius: ($baseline-v/10);
|
|
}
|
|
|
|
// primary button
|
|
%btn-primary {
|
|
@extend %btn-edged;
|
|
@extend %t-weight3;
|
|
padding: ($baseline-v/2) ($baseline-h);
|
|
background: $bg-action-primary;
|
|
border-color: $bordercolor-action-primary;
|
|
color: $color-action-primary;
|
|
|
|
|
|
&:hover, &:active, &:focus {
|
|
background: $bg-action-primary-focus;
|
|
border-color: $bordercolor-action-primary-focus;
|
|
color: $color-action-primary-focus
|
|
}
|
|
|
|
&.current, &.active {
|
|
|
|
&:hover, &:active, &:focus {
|
|
|
|
}
|
|
}
|
|
|
|
&.disabled, &.is-disabled, &[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// primary button
|
|
%btn-secondary {
|
|
@extend %btn-edged;
|
|
@extend %t-weight3;
|
|
padding: ($baseline-v/2) ($baseline-h);
|
|
background: $bg-action-secondary;
|
|
border-color: $bordercolor-action-secondary;
|
|
color: $color-action-secondary;
|
|
|
|
|
|
&:hover, &:active, &:focus {
|
|
background: $bg-action-secondary-focus;
|
|
border-color: $bordercolor-action-secondary-focus;
|
|
color: $color-action-secondary-focus
|
|
}
|
|
|
|
&.current, &.active {
|
|
|
|
&:hover, &:active, &:focus {
|
|
|
|
}
|
|
}
|
|
|
|
&.disabled, &.is-disabled, &[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// links - subtle
|
|
%link-subtle {
|
|
@include transition(color $tmg-f1 ease-in-out);
|
|
color: $color-link;
|
|
text-decoration: none;
|
|
|
|
&:hover, &:focus, &:active {
|
|
color: $color-link-focus;
|
|
}
|
|
}
|
|
|
|
// links - copy
|
|
%link-copy {
|
|
@include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
|
|
border-bottom: 1px solid transparent;
|
|
color: $color-link;
|
|
text-decoration: none;
|
|
|
|
&:hover, &:focus, &:active {
|
|
color: $color-link-focus;
|
|
border-color: $color-link-focus;
|
|
}
|
|
}
|