This commit is contained in:
1
node_modules/what-input/src/images/select-arrow.svg
generated
vendored
Normal file
1
node_modules/what-input/src/images/select-arrow.svg
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.941" height="24" viewBox="0 0 40.941 24"><defs><path id="a" d="M0 0h40.94v24H0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path fill="#555" clip-path="url(#b)" d="M1.116 6.93C2.556 8.404 17.69 22.82 17.69 22.82c.768.785 1.773 1.18 2.78 1.18 1.008 0 2.014-.395 2.78-1.18 0 0 15.136-14.416 16.574-15.89 1.44-1.476 1.536-4.13 0-5.703-1.535-1.573-3.678-1.7-5.56 0L20.47 14.453 6.678 1.23C4.794-.47 2.65-.346 1.116 1.227c-1.537 1.574-1.44 4.227 0 5.702"/></svg>
|
||||
|
After Width: | Height: | Size: 586 B |
141
node_modules/what-input/src/markup/index.html
generated
vendored
Normal file
141
node_modules/what-input/src/markup/index.html
generated
vendored
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>What Input?</title>
|
||||
|
||||
<link rel="stylesheet" href="styles/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>What Input?</h1>
|
||||
|
||||
<p class="lede">
|
||||
A global utility for tracking the current input method (<span class="input-indicator -mouse">mouse</span>, <span class="input-indicator -keyboard">keyboard</span>, or <span class="input-indicator -touch">touch</span>), as well as the current <em>intent</em> (<span class="input-intent -mouse">mouse</span>, <span class="input-intent -keyboard">keyboard</span>, or <span class="input-intent -touch">touch</span>).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tab, click or tap the links and form controls to see how <strong>What Input</strong> allows them to be styled differently.
|
||||
</p>
|
||||
|
||||
<div class="well">
|
||||
<div class="well-row">
|
||||
<div class="well-column">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"><a href="#">Cras justo odio</a></li>
|
||||
<li class="list-group-item">
|
||||
<a href="#">Dapibus ac facilisis in</a>
|
||||
</li>
|
||||
<li class="list-group-item"><a href="#">Morbi leo risus</a></li>
|
||||
<li class="list-group-item">
|
||||
<a href="#">Porta ac consectetur ac</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="#">Vestibulum at eros</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<button data-module="alert" data-message="This button is not inside a form.">Do Something</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="well-column">
|
||||
<p>
|
||||
<label for="exampleInput">Example Text Input</label>
|
||||
<input type="email" id="exampleInput" name="exampleInput">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="exampleSelect">Selection</label>
|
||||
<select id="exampleSelect" name="exampleSelect">
|
||||
<option value="" disabled selected>Select an Option</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="exampleTextarea">Example Textarea</label>
|
||||
<textarea id="exampleTextarea" name="exampleTextarea"></textarea>
|
||||
</p>
|
||||
|
||||
<p class="checkbox">
|
||||
<label><input type="checkbox"> Check me out</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="submit" data-module="alert" data-message="This button is inside a form.">Form Submit</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="pull-left">
|
||||
Made with <span class="text-love">♥</span> at
|
||||
<a href="http://viget.com/">Viget</a>.
|
||||
</p>
|
||||
|
||||
<p class="pull-right">
|
||||
Check out the project
|
||||
<a href="https://github.com/ten1seven/what-input">on GitHub</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="scripts/what-input.js"></script>
|
||||
<script>
|
||||
// use `whatInput.ask()`
|
||||
var links = document.querySelectorAll('.well a, .well button')
|
||||
for (var i = 0, len = links.length; i < len; i++) {
|
||||
links[i].addEventListener('click', function(event) {
|
||||
console.log(
|
||||
'[script test] ' + whatInput.ask() + ' ' + whatInput.element()
|
||||
)
|
||||
|
||||
event.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
var formControls = document.querySelectorAll('input, textarea, select')
|
||||
for (var i = 0, len = formControls.length; i < len; i++) {
|
||||
formControls[i].addEventListener('click', function(event) {
|
||||
console.log(
|
||||
'[script test] ' + whatInput.ask() + ' ' + whatInput.element()
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// use `whatInput.registerOnChange()`
|
||||
var myInputFunction = function(type) {
|
||||
console.log('input: ' + type)
|
||||
}
|
||||
|
||||
var myIntentFunction = function(type) {
|
||||
console.log('intent: ' + type)
|
||||
}
|
||||
|
||||
whatInput.registerOnChange(myInputFunction)
|
||||
whatInput.registerOnChange(myIntentFunction, 'intent')
|
||||
|
||||
// don't let the form submit because it's not real
|
||||
var form = document.querySelector('form')
|
||||
form.addEventListener('submit', function(event) {
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
// alert functionality
|
||||
var alerts = document.querySelectorAll('[data-module="alert"]')
|
||||
for (var i = 0, len = alerts.length; i < len; i++) {
|
||||
alerts[i].addEventListener('click', function(event) {
|
||||
alert(this.dataset.message)
|
||||
event.preventDefault()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
15
node_modules/what-input/src/scripts/what-input.d.ts
generated
vendored
Normal file
15
node_modules/what-input/src/scripts/what-input.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
declare const whatInput: {
|
||||
ask: (strategy?: Strategy) => InputMethod;
|
||||
element: () => string | null;
|
||||
ignoreKeys: (keyCodes: number[]) => void;
|
||||
specificKeys: (keyCodes: number[]) => void;
|
||||
registerOnChange: (callback: (type: InputMethod) => void, strategy?: Strategy) => void;
|
||||
unRegisterOnChange: (callback: (type: InputMethod) => void) => void;
|
||||
clearStorage: () => void;
|
||||
};
|
||||
|
||||
export type InputMethod = "initial" | "pointer" | "keyboard" | "mouse" | "touch";
|
||||
|
||||
export type Strategy = "input" | "intent";
|
||||
|
||||
export default whatInput;
|
||||
482
node_modules/what-input/src/scripts/what-input.js
generated
vendored
Normal file
482
node_modules/what-input/src/scripts/what-input.js
generated
vendored
Normal file
@@ -0,0 +1,482 @@
|
||||
module.exports = (() => {
|
||||
/*
|
||||
* bail out if there is no document or window
|
||||
* (i.e. in a node/non-DOM environment)
|
||||
*
|
||||
* Return a stubbed API instead
|
||||
*/
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return {
|
||||
// always return "initial" because no interaction will ever be detected
|
||||
ask: () => 'initial',
|
||||
|
||||
// always return null
|
||||
element: () => null,
|
||||
|
||||
// no-op
|
||||
ignoreKeys: () => {},
|
||||
|
||||
// no-op
|
||||
specificKeys: () => {},
|
||||
|
||||
// no-op
|
||||
registerOnChange: () => {},
|
||||
|
||||
// no-op
|
||||
unRegisterOnChange: () => {}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* variables
|
||||
*/
|
||||
|
||||
// cache document.documentElement
|
||||
const docElem = document.documentElement
|
||||
|
||||
// currently focused dom element
|
||||
let currentElement = null
|
||||
|
||||
// last used input type
|
||||
let currentInput = 'initial'
|
||||
|
||||
// last used input intent
|
||||
let currentIntent = currentInput
|
||||
|
||||
// UNIX timestamp of current event
|
||||
let currentTimestamp = Date.now()
|
||||
|
||||
// check for a `data-whatpersist` attribute on either the `html` or `body` elements, defaults to `true`
|
||||
let shouldPersist = false
|
||||
|
||||
// form input types
|
||||
const formInputs = ['button', 'input', 'select', 'textarea']
|
||||
|
||||
// empty array for holding callback functions
|
||||
const functionList = []
|
||||
|
||||
// list of modifier keys commonly used with the mouse and
|
||||
// can be safely ignored to prevent false keyboard detection
|
||||
let ignoreMap = [
|
||||
16, // shift
|
||||
17, // control
|
||||
18, // alt
|
||||
91, // Windows key / left Apple cmd
|
||||
93 // Windows menu / right Apple cmd
|
||||
]
|
||||
|
||||
let specificMap = []
|
||||
|
||||
// mapping of events to input types
|
||||
const inputMap = {
|
||||
keydown: 'keyboard',
|
||||
keyup: 'keyboard',
|
||||
mousedown: 'mouse',
|
||||
mousemove: 'mouse',
|
||||
MSPointerDown: 'pointer',
|
||||
MSPointerMove: 'pointer',
|
||||
pointerdown: 'pointer',
|
||||
pointermove: 'pointer',
|
||||
touchstart: 'touch',
|
||||
touchend: 'touch'
|
||||
}
|
||||
|
||||
// boolean: true if the page is being scrolled
|
||||
let isScrolling = false
|
||||
|
||||
// store current mouse position
|
||||
const mousePos = {
|
||||
x: null,
|
||||
y: null
|
||||
}
|
||||
|
||||
// map of IE 10 pointer events
|
||||
const pointerMap = {
|
||||
2: 'touch',
|
||||
3: 'touch', // treat pen like touch
|
||||
4: 'mouse'
|
||||
}
|
||||
|
||||
// check support for passive event listeners
|
||||
let supportsPassive = false
|
||||
|
||||
try {
|
||||
const opts = Object.defineProperty({}, 'passive', {
|
||||
get: () => {
|
||||
supportsPassive = true
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('test', null, opts)
|
||||
} catch (e) {
|
||||
// fail silently
|
||||
}
|
||||
|
||||
/*
|
||||
* set up
|
||||
*/
|
||||
|
||||
const setUp = () => {
|
||||
// add correct mouse wheel event mapping to `inputMap`
|
||||
inputMap[detectWheel()] = 'mouse'
|
||||
|
||||
addListeners()
|
||||
}
|
||||
|
||||
/*
|
||||
* events
|
||||
*/
|
||||
|
||||
const addListeners = () => {
|
||||
// `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
|
||||
// can only demonstrate potential, but not actual, interaction
|
||||
// and are treated separately
|
||||
const options = supportsPassive ? { passive: true, capture: true } : true
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setPersist, true)
|
||||
|
||||
// pointer events (mouse, pen, touch)
|
||||
if (window.PointerEvent) {
|
||||
window.addEventListener('pointerdown', setInput, true)
|
||||
window.addEventListener('pointermove', setIntent, true)
|
||||
} else if (window.MSPointerEvent) {
|
||||
window.addEventListener('MSPointerDown', setInput, true)
|
||||
window.addEventListener('MSPointerMove', setIntent, true)
|
||||
} else {
|
||||
// mouse events
|
||||
window.addEventListener('mousedown', setInput, true)
|
||||
window.addEventListener('mousemove', setIntent, true)
|
||||
|
||||
// touch events
|
||||
if ('ontouchstart' in window) {
|
||||
window.addEventListener('touchstart', setInput, options)
|
||||
window.addEventListener('touchend', setInput, true)
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel
|
||||
window.addEventListener(detectWheel(), setIntent, options)
|
||||
|
||||
// keyboard events
|
||||
window.addEventListener('keydown', setInput, true)
|
||||
window.addEventListener('keyup', setInput, true)
|
||||
|
||||
// focus events
|
||||
window.addEventListener('focusin', setElement, true)
|
||||
window.addEventListener('focusout', clearElement, true)
|
||||
}
|
||||
|
||||
// checks if input persistence should happen and
|
||||
// get saved state from session storage if true (defaults to `false`)
|
||||
const setPersist = () => {
|
||||
shouldPersist = !(
|
||||
docElem.getAttribute('data-whatpersist') === 'false' ||
|
||||
document.body.getAttribute('data-whatpersist') === 'false'
|
||||
)
|
||||
|
||||
if (shouldPersist) {
|
||||
// check for session variables and use if available
|
||||
try {
|
||||
if (window.sessionStorage.getItem('what-input')) {
|
||||
currentInput = window.sessionStorage.getItem('what-input')
|
||||
}
|
||||
|
||||
if (window.sessionStorage.getItem('what-intent')) {
|
||||
currentIntent = window.sessionStorage.getItem('what-intent')
|
||||
}
|
||||
} catch (e) {
|
||||
// fail silently
|
||||
}
|
||||
}
|
||||
|
||||
// always run these so at least `initial` state is set
|
||||
doUpdate('input')
|
||||
doUpdate('intent')
|
||||
}
|
||||
|
||||
// checks conditions before updating new input
|
||||
const setInput = (event) => {
|
||||
const eventKey = event.which
|
||||
let value = inputMap[event.type]
|
||||
|
||||
if (value === 'pointer') {
|
||||
value = pointerType(event)
|
||||
}
|
||||
|
||||
const ignoreMatch =
|
||||
!specificMap.length && ignoreMap.indexOf(eventKey) === -1
|
||||
|
||||
const specificMatch =
|
||||
specificMap.length && specificMap.indexOf(eventKey) !== -1
|
||||
|
||||
let shouldUpdate =
|
||||
(value === 'keyboard' && eventKey && (ignoreMatch || specificMatch)) ||
|
||||
value === 'mouse' ||
|
||||
value === 'touch'
|
||||
|
||||
// prevent touch detection from being overridden by event execution order
|
||||
if (validateTouch(value)) {
|
||||
shouldUpdate = false
|
||||
}
|
||||
|
||||
if (shouldUpdate && currentInput !== value) {
|
||||
currentInput = value
|
||||
|
||||
persistInput('input', currentInput)
|
||||
doUpdate('input')
|
||||
}
|
||||
|
||||
if (shouldUpdate && currentIntent !== value) {
|
||||
// preserve intent for keyboard interaction with form fields
|
||||
const activeElem = document.activeElement
|
||||
const notFormInput =
|
||||
activeElem &&
|
||||
activeElem.nodeName &&
|
||||
(formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1 ||
|
||||
(activeElem.nodeName.toLowerCase() === 'button' &&
|
||||
!checkClosest(activeElem, 'form')))
|
||||
|
||||
if (notFormInput) {
|
||||
currentIntent = value
|
||||
|
||||
persistInput('intent', currentIntent)
|
||||
doUpdate('intent')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// updates the doc and `inputTypes` array with new input
|
||||
const doUpdate = (which) => {
|
||||
docElem.setAttribute(
|
||||
'data-what' + which,
|
||||
which === 'input' ? currentInput : currentIntent
|
||||
)
|
||||
|
||||
fireFunctions(which)
|
||||
}
|
||||
|
||||
// updates input intent for `mousemove` and `pointermove`
|
||||
const setIntent = (event) => {
|
||||
let value = inputMap[event.type]
|
||||
|
||||
if (value === 'pointer') {
|
||||
value = pointerType(event)
|
||||
}
|
||||
|
||||
// test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
|
||||
detectScrolling(event)
|
||||
|
||||
// only execute if scrolling isn't happening
|
||||
if (
|
||||
((!isScrolling && !validateTouch(value)) ||
|
||||
(isScrolling && event.type === 'wheel') ||
|
||||
event.type === 'mousewheel' ||
|
||||
event.type === 'DOMMouseScroll') &&
|
||||
currentIntent !== value
|
||||
) {
|
||||
currentIntent = value
|
||||
|
||||
persistInput('intent', currentIntent)
|
||||
doUpdate('intent')
|
||||
}
|
||||
}
|
||||
|
||||
const setElement = (event) => {
|
||||
if (!event.target.nodeName) {
|
||||
// If nodeName is undefined, clear the element
|
||||
// This can happen if click inside an <svg> element.
|
||||
clearElement()
|
||||
return
|
||||
}
|
||||
|
||||
currentElement = event.target.nodeName.toLowerCase()
|
||||
docElem.setAttribute('data-whatelement', currentElement)
|
||||
|
||||
if (event.target.classList && event.target.classList.length) {
|
||||
docElem.setAttribute(
|
||||
'data-whatclasses',
|
||||
event.target.classList.toString().replace(' ', ',')
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const clearElement = () => {
|
||||
currentElement = null
|
||||
|
||||
docElem.removeAttribute('data-whatelement')
|
||||
docElem.removeAttribute('data-whatclasses')
|
||||
}
|
||||
|
||||
const persistInput = (which, value) => {
|
||||
if (shouldPersist) {
|
||||
try {
|
||||
window.sessionStorage.setItem('what-' + which, value)
|
||||
} catch (e) {
|
||||
// fail silently
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* utilities
|
||||
*/
|
||||
|
||||
const pointerType = (event) => {
|
||||
if (typeof event.pointerType === 'number') {
|
||||
return pointerMap[event.pointerType]
|
||||
} else {
|
||||
// treat pen like touch
|
||||
return event.pointerType === 'pen' ? 'touch' : event.pointerType
|
||||
}
|
||||
}
|
||||
|
||||
// prevent touch detection from being overridden by event execution order
|
||||
const validateTouch = (value) => {
|
||||
const timestamp = Date.now()
|
||||
|
||||
const touchIsValid =
|
||||
value === 'mouse' &&
|
||||
currentInput === 'touch' &&
|
||||
timestamp - currentTimestamp < 200
|
||||
|
||||
currentTimestamp = timestamp
|
||||
|
||||
return touchIsValid
|
||||
}
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
|
||||
const detectWheel = () => {
|
||||
let wheelType = null
|
||||
|
||||
// Modern browsers support "wheel"
|
||||
if ('onwheel' in document.createElement('div')) {
|
||||
wheelType = 'wheel'
|
||||
} else {
|
||||
// Webkit and IE support at least "mousewheel"
|
||||
// or assume that remaining browsers are older Firefox
|
||||
wheelType =
|
||||
document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll'
|
||||
}
|
||||
|
||||
return wheelType
|
||||
}
|
||||
|
||||
// runs callback functions
|
||||
const fireFunctions = (type) => {
|
||||
for (let i = 0, len = functionList.length; i < len; i++) {
|
||||
if (functionList[i].type === type) {
|
||||
functionList[i].fn.call(
|
||||
this,
|
||||
type === 'input' ? currentInput : currentIntent
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// finds matching element in an object
|
||||
const objPos = (match) => {
|
||||
for (let i = 0, len = functionList.length; i < len; i++) {
|
||||
if (functionList[i].fn === match) {
|
||||
return i
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const detectScrolling = (event) => {
|
||||
if (mousePos.x !== event.screenX || mousePos.y !== event.screenY) {
|
||||
isScrolling = false
|
||||
|
||||
mousePos.x = event.screenX
|
||||
mousePos.y = event.screenY
|
||||
} else {
|
||||
isScrolling = true
|
||||
}
|
||||
}
|
||||
|
||||
// manual version of `closest()`
|
||||
const checkClosest = (elem, tag) => {
|
||||
const ElementPrototype = window.Element.prototype
|
||||
|
||||
if (!ElementPrototype.matches) {
|
||||
ElementPrototype.matches =
|
||||
ElementPrototype.msMatchesSelector ||
|
||||
ElementPrototype.webkitMatchesSelector
|
||||
}
|
||||
|
||||
if (!ElementPrototype.closest) {
|
||||
do {
|
||||
if (elem.matches(tag)) {
|
||||
return elem
|
||||
}
|
||||
|
||||
elem = elem.parentElement || elem.parentNode
|
||||
} while (elem !== null && elem.nodeType === 1)
|
||||
|
||||
return null
|
||||
} else {
|
||||
return elem.closest(tag)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* init
|
||||
*/
|
||||
|
||||
// don't start script unless browser cuts the mustard
|
||||
// (also passes if polyfills are used)
|
||||
if ('addEventListener' in window && Array.prototype.indexOf) {
|
||||
setUp()
|
||||
}
|
||||
|
||||
/*
|
||||
* api
|
||||
*/
|
||||
|
||||
return {
|
||||
// returns string: the current input type
|
||||
// opt: 'intent'|'input'
|
||||
// 'input' (default): returns the same value as the `data-whatinput` attribute
|
||||
// 'intent': includes `data-whatintent` value if it's different than `data-whatinput`
|
||||
ask: (opt) => {
|
||||
return opt === 'intent' ? currentIntent : currentInput
|
||||
},
|
||||
|
||||
// returns string: the currently focused element or null
|
||||
element: () => {
|
||||
return currentElement
|
||||
},
|
||||
|
||||
// overwrites ignored keys with provided array
|
||||
ignoreKeys: (arr) => {
|
||||
ignoreMap = arr
|
||||
},
|
||||
|
||||
// overwrites specific char keys to update on
|
||||
specificKeys: (arr) => {
|
||||
specificMap = arr
|
||||
},
|
||||
|
||||
// attach functions to input and intent "events"
|
||||
// funct: function to fire on change
|
||||
// eventType: 'input'|'intent'
|
||||
registerOnChange: (fn, eventType) => {
|
||||
functionList.push({
|
||||
fn: fn,
|
||||
type: eventType || 'input'
|
||||
})
|
||||
},
|
||||
|
||||
unRegisterOnChange: (fn) => {
|
||||
const position = objPos(fn)
|
||||
|
||||
if (position || position === 0) {
|
||||
functionList.splice(position, 1)
|
||||
}
|
||||
},
|
||||
|
||||
clearStorage: () => {
|
||||
window.sessionStorage.clear()
|
||||
}
|
||||
}
|
||||
})()
|
||||
49
node_modules/what-input/src/styles/_html.scss
generated
vendored
Normal file
49
node_modules/what-input/src/styles/_html.scss
generated
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
color: #555;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@include a11y-focus;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
|
||||
@include hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
margin: 20px 0 10px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: ($unit * 2) 0;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
margin: ($unit * 3) 0;
|
||||
}
|
||||
}
|
||||
229
node_modules/what-input/src/styles/_layout.scss
generated
vendored
Normal file
229
node_modules/what-input/src/styles/_layout.scss
generated
vendored
Normal file
@@ -0,0 +1,229 @@
|
||||
.container {
|
||||
box-sizing: content-box;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0 auto;
|
||||
max-width: $container-width;
|
||||
padding: 0 ($unit * 2);
|
||||
|
||||
@media (min-width: 800px) {
|
||||
padding: 0 ($unit * 3);
|
||||
}
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
line-height: ($unit * 4);
|
||||
|
||||
@media (min-width: 800px) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.well {
|
||||
@include clearfix;
|
||||
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 4px;
|
||||
margin: ($unit * 3) 0;
|
||||
padding: ($unit * 3);
|
||||
}
|
||||
|
||||
.well-row {
|
||||
@media (min-width: 800px) {
|
||||
display: flex;
|
||||
margin-left: ($unit * -3);
|
||||
}
|
||||
}
|
||||
|
||||
.well-column {
|
||||
@include null-margins;
|
||||
|
||||
@media (max-width: 799px) {
|
||||
+ .well-column {
|
||||
border-top: 1px solid #ccc;
|
||||
margin-top: ($unit * 4);
|
||||
padding-top: ($unit * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
padding-left: ($unit * 3);
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: #337ab7;
|
||||
border: 1px solid #2e6da4;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: $unit ($unit * 2);
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include hover {
|
||||
background-color: #286090;
|
||||
border-color: #204d74;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: ($unit * 3);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: ($unit * 2) 0;
|
||||
|
||||
&.checkbox label {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([type='submit']):not([type='checkbox']):not([type='radio']) {
|
||||
@include input-style-base;
|
||||
|
||||
box-shadow: inset 0 1px 1px rgba(#000, 0.075);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
[data-whatintent='mouse'] &:focus {
|
||||
border-color: #31708f;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(49, 112, 143, 0.6);
|
||||
}
|
||||
|
||||
[data-whatinput='touch'] &:focus {
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@include input-style-base;
|
||||
|
||||
background-image: url(../images/select-arrow.svg);
|
||||
background-position: calc(100% - 10px) 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 6px;
|
||||
padding-right: 30px;
|
||||
|
||||
[data-whatintent='mouse'] &:focus {
|
||||
border-color: #31708f;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(49, 112, 143, 0.6);
|
||||
}
|
||||
|
||||
[data-whatinput='touch'] &:focus {
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
min-width: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// hide arrow in IE
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@include input-style-base;
|
||||
|
||||
box-shadow: inset 0 1px 1px rgba(#000, 0.075);
|
||||
height: 5em;
|
||||
padding-bottom: $unit;
|
||||
padding-top: $unit;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
[data-whatinput='touch'] &:focus {
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
|
||||
[data-whatintent='mouse'] &:focus {
|
||||
border-color: #31708f;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(49, 112, 143, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&:first-child a {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include a11y-focus;
|
||||
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
color: #555;
|
||||
display: block;
|
||||
padding: ($unit * 2) ($unit * 2);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@include clearfix;
|
||||
|
||||
font-size: 14px;
|
||||
margin: ($unit * 4) 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text-love {
|
||||
color: #a94442;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
70
node_modules/what-input/src/styles/_mixins.scss
generated
vendored
Normal file
70
node_modules/what-input/src/styles/_mixins.scss
generated
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin null-margins {
|
||||
> :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin a11y-focus {
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px orange !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
[data-whatintent='mouse'] &:active,
|
||||
[data-whatintent='mouse'] &:focus,
|
||||
[data-whatintent='touch'] &:active,
|
||||
[data-whatintent='touch'] &:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-style-base {
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
color: #555;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
height: ($unit * 4);
|
||||
margin: 0;
|
||||
padding: 0 $unit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
// Chrome/Opera/Safari
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
// Firefox 19+
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
// IE 10+
|
||||
@content;
|
||||
}
|
||||
}
|
||||
2
node_modules/what-input/src/styles/_variables.scss
generated
vendored
Normal file
2
node_modules/what-input/src/styles/_variables.scss
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
$unit: 8px;
|
||||
$container-width: 1100px;
|
||||
51
node_modules/what-input/src/styles/index.scss
generated
vendored
Normal file
51
node_modules/what-input/src/styles/index.scss
generated
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'html';
|
||||
@import 'layout';
|
||||
|
||||
/*
|
||||
* what-input styles
|
||||
*/
|
||||
|
||||
// indicator
|
||||
.input-indicator,
|
||||
.input-intent {
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-whatinput='mouse'] .input-indicator.-mouse,
|
||||
[data-whatintent='mouse'] .input-intent.-mouse {
|
||||
background-color: rgba(#337ab7, 0.2);
|
||||
box-shadow: 0 0 0 1px rgba(#337ab7, 0.3);
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
[data-whatinput='keyboard'] .input-indicator.-keyboard,
|
||||
[data-whatintent='keyboard'] .input-intent.-keyboard {
|
||||
background-color: rgba(orange, 0.1);
|
||||
box-shadow: 0 0 0 1px rgba(orange, 0.3);
|
||||
color: orange;
|
||||
}
|
||||
|
||||
[data-whatinput='touch'] .input-indicator.-touch,
|
||||
[data-whatintent='touch'] .input-intent.-touch {
|
||||
background-color: rgba(#8a6d3b, 0.1);
|
||||
box-shadow: 0 0 0 1px rgba(#8a6d3b, 0.3);
|
||||
color: #8a6d3b;
|
||||
}
|
||||
|
||||
// suppress focus outline for mouse and touch
|
||||
[data-whatintent='mouse'],
|
||||
[data-whatintent='touch'] {
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// divs or sections with `tabindex`
|
||||
html:not([data-whatinput='keyboard']) div:focus {
|
||||
outline: none;
|
||||
}
|
||||
Reference in New Issue
Block a user