https://github.com/garthdb/postcss-different-focus

A PostCSS plugin to create a syntax for different types of input focus.
https://github.com/garthdb/postcss-different-focus

Last synced: 4 months ago
JSON representation

A PostCSS plugin to create a syntax for different types of input focus.

• Host: GitHub
• URL: https://github.com/garthdb/postcss-different-focus
• Owner: GarthDB
• License: apache-2.0
• Created: 2017-09-28T20:43:10.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-02-29T20:32:06.000Z (over 1 year ago)
• Last Synced: 2025-03-20T09:57:56.294Z (4 months ago)
• Language: JavaScript
• Size: 16.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Different Focus

[![Build Status](https://travis-ci.org/GarthDB/postcss-different-focus.svg?branch=master)](https://travis-ci.org/GarthDB/postcss-different-focus) [![codecov](https://codecov.io/gh/GarthDB/postcss-different-focus/branch/master/graph/badge.svg)](https://codecov.io/gh/GarthDB/postcss-different-focus) [![Dependency Status](https://david-dm.org/GarthDB/postcss-different-focus.svg)](https://david-dm.org/GarthDB/postcss-different-focus) [![Inline docs](http://inch-ci.org/github/GarthDB/postcss-different-focus.svg?branch=master)](http://inch-ci.org/github/GarthDB/postcss-different-focus) [![npm version](https://badge.fury.io/js/postcss-different-focus.svg)](https://badge.fury.io/js/postcss-different-focus)

A PostCSS plugin to create a syntax for different types of input focus.

## Usage

A simple plugin that allows the developer to define keyboard and mouse focii in postcss and it is converted to classes to differentiate in the output.

Example:

```css

.dood:keyboardfocus {

  content: 'nope';

}

.dood:mousefocus {

  content: 'yerp';

}

```

Output:

```css

.dood.is-keyboardfocused, .dood:focus {

  content: 'nope';

}

.dood.is-mousefocused, .dood:focus {

  content: 'yerp';

}

```