Add switch button styling

This commit is contained in:
Jessica Lawshe 2018-08-27 10:12:33 -05:00
parent a87b5a629a
commit ec710d0b1e
3 changed files with 13 additions and 5 deletions

View file

@ -44,16 +44,16 @@
border: solid 1px @gray-lighter;
border-radius: @border-radius-large 0 0 @border-radius-large;
padding: (@line-height-computed / 2);
color: @gray;
color: @btn-switch-color;
&:hover,
&:focus {
color: @gray;
color: @btn-switch-color;
text-decoration: none;
}
&:hover {
color: @gray-dark;
color: @btn-switch-hover-color;
}
& + & {
@ -62,12 +62,12 @@
}
&-selected {
color: @link-color;
color: @link-active-color;
box-shadow: inset 0 -2px 0 0;
&:hover,
&:focus {
color: @link-color;
color: @link-active-color;
}
}
}

View file

@ -13,6 +13,7 @@
//** Global textual link color.
@link-color: @brand-primary;
@link-active-color: @link-color;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
@ -90,6 +91,9 @@
@border-width-base: 3px;
@border-color-base: @gray-lighter;
@btn-switch-color: @gray;
@btn-switch-hover-color: @gray-dark;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).

View file

@ -49,6 +49,7 @@
@text-small-color : @ol-type-color;
@text-color : @ol-type-color;
@link-color : @ol-blue;
@link-active-color : @ol-dark-green;
@link-hover-color : @ol-dark-blue;
// Button colors and sizing
@ -75,6 +76,9 @@
@btn-info-bg : @ol-blue;
@btn-info-border : transparent;
@btn-switch-color : @ol-blue-gray-4;
@btn-switch-hover-color : darken(@ol-blue-gray-4, 8%);
// Padding
@padding-xs-horizontal : 8px;