selected

view source

Apply rules to :hover and :focus (and, optionally, :active) states.

use-name
scut-selected
type
mixin only
arguments
  1. $active
    default
    false

    Declare whether or not to target the :active state, in addition to :hover and :focus.

@content

A content block passed to this mixin will apply to the selected states (:hover and :focus — and, optionally, :active).

Make your site more friendly for keyboard navigation, especially, by accounting for the various means of targeting elements.

example

SCSS

.eg-selected-1 {
  @include scut-selected {
    background-color: $eg-light;
  }
}
.eg-selected-2 {
  @include scut-selected(true) {
    background-color: $eg-light;
  }
}

Result