https://github.com/sparkbox/safe-focus

Safe Focus is a utility file that adds custom outline styles for all selectable components.
https://github.com/sparkbox/safe-focus

Last synced: 2 months ago
JSON representation

Safe Focus is a utility file that adds custom outline styles for all selectable components.

• Host: GitHub
• URL: https://github.com/sparkbox/safe-focus
• Owner: sparkbox
• Created: 2020-02-07T00:25:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:31:27.000Z (about 2 years ago)
• Last Synced: 2024-09-14T22:05:47.555Z (4 months ago)
• Language: JavaScript
• Size: 727 KB
• Stars: 7
• Watchers: 16
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# Safe focus

[![CircleCI](https://circleci.com/gh/sparkbox/safe-focus/tree/master.svg?style=svg)](https://circleci.com/gh/sparkbox/safe-focus/tree/master)

Safe Focus is a utility file to add a custom outline style for all selectable components.

## Installation

Run `npm i @sparkbox/safe-focus -P` in your local project.

## Usage

### JavaScript

Require the package in your project and init the `safeFocusInit` import.

```

import { safeFocusInit } from '@sparkbox/safe-focus';

safeFocusInit();

```

### Sass

To use the `safe-focus` mixin, start by exposing `node_modules` to Sass in `package.json`.

```

"sass": {

    "includePaths": ["./node_modules"]

},

```

Next, import the package into your project's mixin file.

```

@import '~@sparkbox/safe-focus/index';

```

Encapsulate your styles with the `safe-focus` mixin:

```

.my-button {

  outline: 1px solid #00b2e2;

  @include safe-focus() {

    outline: 1px solid #264b59;

  }

}

```

This will result in the following transpiled CSS:

```

.my-button {

  outline: 1px solid #00b2e2;

}

html.safe-focus {

  .my-button {

    outline: 1px solid #264b59;

  }

}

```

Since the `safe-focus` CSS class added to the DOM may change, it is not recommended to directly reference the `safe-focus` CSS class in your project.