hover.md

_hover.scss

File includes mixins which helps with styling elements with actions (hover, focus, active).

List of content:

• Mixin hover (bootstrap 4.0.0)
• Mixin hover-focus (bootstrap 4.0.0)
• Mixin plain-hover-focus (bootstrap 4.0.0)
• Mixin hover-focus-active (bootstrap 4.0.0)

Mixin hover

Description

Mixin for styling element when it's hovered

Usage:

Assigned different color for hovered element

.exampleHoveredClass {
    color: $color-blue;
    @include hover() {
        color: $color-blue-dark;
    }
}

Mixin hover-focus

Description

Mixin for styling element when it's hovered and focused

Usage:

Assigned different color of element when it's hovered and focused

.exampleHoveredFocusClass {
    color: $color-blue;
    @include hover-focus {
        color: $color-blue-dark;
    }
}

Mixin plain-hover-focus

Description

Mixin for styling element when it's hovered, focused and doesn't have set any action

Usage:

Set color of element when it's plain, hovered and focused

.examplePlainHoveredFocusClass {
    @include plain-hover-focus {
        color: $color-blue-light;
    }
}

Mixin hover-focus-active

Description

Mixin for styling element when it's hovered, focused and active

Usage:

Assigned different color of element when it's hovered, focused and active

.exampleHoveredFocusActiveClass {
    color: $color-blue;
    @include hover-focus-active {
        color: $color-blue-dark;
    }
}