From 6c56413ecbb350cfc0ba72a1d9ff9ef2a90717ae Mon Sep 17 00:00:00 2001 From: Maurice Date: Thu, 19 Sep 2019 06:29:09 -0500 Subject: [PATCH] Readme and example site updates --- README.md | 10 ++++------ web/src/assets/scss/base/_typography.scss | 2 +- web/src/components/Examples.js | 20 -------------------- web/src/pages/index.js | 21 ++++++--------------- 4 files changed, 11 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 0792673..9581de3 100644 --- a/README.md +++ b/README.md @@ -32,19 +32,16 @@ The CSS is small enough to copy directly into your project's main stylesheet if ```js import FocusOverlay from 'focusoverlay'; -// Zero config - Scopes to element and uses default settings +// Option 1: Zero config - Scopes to element and uses default settings const fo = new FocusOverlay(); -// Or define an element +// Option 2: Define an element const fo = new FocusOverlay(document.body, options); - -// Or define a CSS selector string -const fo = new FocusOverlay('body#site-container', options); ``` The `element` is what FocusOverlay will be scoped to. It takes either a string CSS selector or an HTML element. If no element is supplied it will scope to the `` element by default. -The `options` is an optional parameter. See [options](#options) for more info. +The `options` is an optional parameter. Takes an object. See [options](#options) for more info. By default Focus Overlay will show and animate when hitting keyboard keys such as the `Tab` key. It's also preconfigured to animate via CSS transitions. @@ -156,3 +153,4 @@ Focus Overlay works on all modern browsers including IE11. - Make zIndex be CSS only - Add refreshPosition method - Add currentTarget var +- Fix iframe focus when alwaysActive is true diff --git a/web/src/assets/scss/base/_typography.scss b/web/src/assets/scss/base/_typography.scss index 93c47bd..3c7942a 100644 --- a/web/src/assets/scss/base/_typography.scss +++ b/web/src/assets/scss/base/_typography.scss @@ -157,7 +157,7 @@ pre { -webkit-overflow-scrolling: touch; font-family: _font(family-fixed); font-size: 0.9em; - margin: 0 0 _size(element-margin) 0; + margin: 0 0 _size(element-margin) 0 !important; code { display: block; diff --git a/web/src/components/Examples.js b/web/src/components/Examples.js index af0e9f7..7e010ec 100644 --- a/web/src/components/Examples.js +++ b/web/src/components/Examples.js @@ -76,26 +76,6 @@ const Examples = props => ( Transitioned link after iframe focus -
- Regular link before iframe -
- -
- -