Sha256: 1e74a47d51ed49d502c31a723b826115809f23ebbb81af44d2c20f73df8063b0
Contents?: true
Size: 698 Bytes
Versions: 124
Compression:
Stored size: 698 Bytes
Contents
/*------------------------------------*\
#FOCUS-RING
\*------------------------------------*/
/// Provides a border and box-shadow for a focusable element. Useful when
/// creating custom, non-standard form control UIs.
///
/// @param {Color} $color [$focus-ring-color] - the color of the applied border
///
/// @example scss - Focus Ring mixin
/// $block-focus-border-color: $blue;
///
/// .block {
/// &:focus {
/// @include focus-ring($block-focus-border-color);
/// }
/// }
@mixin focus-ring($color: $focus-ring-color) {
border-color: $color;
box-shadow: 0 0 0 2px $color;
outline: none;
transition: border 0.1s, box-shadow 0.1s;
}
Version data entries
124 entries across 124 versions & 2 rubygems