Populates selectors that target all buttons. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [buttons('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${buttons('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
+Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [textInputs('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${textInputs('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ ''input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
CSS to contain a float (credit to CSSMojo).
-CSS to represent truncated text with an ellipsis.
-CSS to hide text to show a background image in a SEO-Friendly.
+Generates a media query to target HiDPI devices.
-([number]
+ = 1.3)
+
+ // Styles as object usage
-const styles = {
- 'background-image': 'url(logo.png)',
- ...hideText(),
+const styles = {
+ [hiDPI(1.5)]: {
+ width: 200px;
+ }
}
// styled-components usage
-const div = styled.div`
- background-image: url(logo.png);
- ${hideText()};
+const div = styled.div`
+ ${hiDPI(1.5)} {
+ width: 200px;
+ }
`
// CSS as JS Output
-'div': {
- 'background-image': 'url(logo.png)',
- 'text-indent': '101%',
- 'overflow': 'hidden',
- 'white-space': 'nowrap',
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+ 'width': '200px',
}
@@ -525,39 +513,30 @@ Generates a media query to target HiDPI devices.
+CSS to hide text to show a background image in a SEO-Friendly.
-(number?
- = 1.3)
-
- // Styles as object usage
-const styles = {
- [hiDPI(1.5)]: {
- width: 200px;
- }
+const styles = {
+ 'background-image': 'url(logo.png)',
+ ...hideText(),
}
// styled-components usage
-const div = styled.div`
- ${hiDPI(1.5)} {
- width: 200px;
- }
+const div = styled.div`
+ background-image: url(logo.png);
+ ${hideText()};
`
// CSS as JS Output
-'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (-o-min-device-pixel-ratio: 1.5/1),
- only screen and (min-resolution: 144dpi),
- only screen and (min-resolution: 1.5dppx)': {
- 'width': '200px',
+'div': {
+ 'background-image': 'url(logo.png)',
+ 'text-indent': '101%',
+ 'overflow': 'hidden',
+ 'white-space': 'nowrap',
}
@@ -626,10 +588,10 @@ CSS to style the selection psuedo-element.
- + @@ -682,7 +635,7 @@CSS to style the selection psuedo-element.
- + @@ -928,7 +863,7 @@Mixin to set the height and width properties in a single statement.
- + @@ -1036,7 +962,7 @@// Styles as object usage
const styles = {
...size('300px', '250px')
}
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
-<<<<<<< HEAD
-
-
-
-=======
// styled-components usage
const div = styled.div`
${size('300px', '250px')}
@@ -1092,10 +1008,10 @@ polished
-
-
-
+
+
+
@@ -1105,17 +1021,8 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
-
-=======
-
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
- src/helpers/stripUnit.js
-=======
-
+
src/mixins/timingFunctions.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
@@ -1184,10 +1091,10 @@
-
-
-
+
+
+
@@ -1197,17 +1104,8 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
-
-=======
-
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
- src/helpers/em.js
-=======
-
+
src/mixins/wordWrap.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
@@ -1216,11 +1114,7 @@
Provides an easy way to change the word-wrap property
-<<<<<<< HEAD
-
-=======
- wordWrap(wrap: string?)
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
+ wordWrap(wrap: [string])
@@ -1236,25 +1130,9 @@
-
-
-
@@ -1265,16 +1143,6 @@
-<<<<<<< HEAD
-
-<<<<<<< HEAD
- Returns
- String:
- The converted value
-=======
-
- src/helpers/rem.js
-=======
@@ -1309,25 +1177,25 @@
-
-
-
+
+
+
Shorthands
- Shorthands for generating multiple lines of css quickly.
+ Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation.
-
-
-
+
+
+
@@ -1337,9 +1205,8 @@
-
+
src/shorthands/animation.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
@@ -1349,7 +1216,7 @@
or a single animation spread over the arguments.
-
+
@@ -1358,19 +1225,14 @@
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-<<<<<<< HEAD
-
-
-=======
Parameters
- args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
+ args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
@@ -1381,7 +1243,6 @@
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
@@ -1391,16 +1252,6 @@
// Styles as object usage
-<<<<<<< HEAD
-const styles = {
- 'height': em('16px')
-}
-
-// styled-components usage
-const div = styled.div`
- height: ${em('16px')}
-`
-=======
const styles = {
...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
}
@@ -1409,17 +1260,9 @@
const div = styled.div`
${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
`
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
// CSS as JS Output
-<<<<<<< HEAD
-element {
-<<<<<<< HEAD
- 'height': '1em'
-=======
- 'height': '1rem'
-=======
div {
'animation': 'rotate 1s ease-in-out, colorchange 2s'
}
@@ -1439,7 +1282,6 @@
div {
'animation': 'rotate 1s ease-in-out'
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
}
@@ -1451,10 +1293,10 @@
-
-
-
+
+
+
@@ -1464,7 +1306,7 @@
-
+
src/shorthands/buttons.js
@@ -1474,7 +1316,7 @@
Populates selectors that target all buttons. You can pass optional states to append to the selectors.
- buttons(states: ...Array<State>)
+ buttons(states: ...Array<State>)
@@ -1490,7 +1332,7 @@
@@ -1541,10 +1383,10 @@
-
-
-
+
+
+
@@ -1554,7 +1396,7 @@
-
+
src/shorthands/textInputs.js
@@ -1564,7 +1406,7 @@
Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
- textInputs(states: ...Array<State>)
+ textInputs(states: ...Array<State>)
@@ -1580,7 +1422,7 @@
@@ -1615,7 +1457,7 @@
// CSS in JS Output
- 'input[type="color"]:active,
+ ''input[type="color"]:active,
'input[type="date"]:active,
'input[type="datetime"]:active,
'input[type="datetime-local"]:active,
@@ -1643,10 +1485,10 @@
-
-
-
+
+
+
Helpers
@@ -1658,10 +1500,10 @@
-
-
-
+
+
+
@@ -1671,7 +1513,7 @@
-
+
src/helpers/em.js
@@ -1682,7 +1524,7 @@
second argument to the function.
-
+
@@ -1706,7 +1548,7 @@
@@ -1751,10 +1593,10 @@
-
-
-
+
+
+
@@ -1764,7 +1606,7 @@
-
+
src/helpers/modularScale.js
@@ -1774,7 +1616,7 @@
Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
-
+
@@ -1798,7 +1640,7 @@
@@ -1807,7 +1649,7 @@
- ratio (Ratio?
+ ratio ([Ratio]
= 'perfectFourth')
@@ -1854,10 +1696,10 @@
-
-
-
+
+
+
@@ -1867,7 +1709,7 @@
-
+
src/helpers/rem.js
@@ -1878,7 +1720,7 @@
second argument to the function.
-
+
@@ -1902,7 +1744,7 @@
@@ -1947,10 +1789,10 @@
-
-
-
+
+
+
@@ -1960,7 +1802,7 @@
-
+
src/helpers/stripUnit.js
@@ -2022,29 +1864,8 @@
// CSS in JS Output
-<<<<<<< HEAD
- 'input[type="color"]:active,
- 'input[type="date"]:active,
- 'input[type="datetime"]:active,
- 'input[type="datetime-local"]:active,
- 'input[type="email"]:active,
- 'input[type="month"]:active,
- 'input[type="number"]:active,
- 'input[type="password"]:active,
- 'input[type="search"]:active,
- 'input[type="tel"]:active,
- 'input[type="text"]:active,
- 'input[type="time"]:active,
- 'input[type="url"]:active,
- 'input[type="week"]:active,
- input:not([type]):active,
- textarea:active': {
- 'border': 'none'
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-=======
element {
'--dimension': 100
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
}
@@ -2056,13 +1877,14 @@
-
-
+
-
-
->>>>>>> 3111967... chore(textInput): textInput shorthand
+
+
+
+
+