JimmyMow
6 years ago
committed by
GitHub
GitHub
110 changed files with 1029 additions and 1071 deletions
@ -1,5 +1,2 @@ |
|||||
# Style reset |
|
||||
app/styles/reset.scss |
|
||||
|
|
||||
# Storybook |
# Storybook |
||||
storybook-static |
storybook-static |
||||
|
|||||
@ -1,9 +1,10 @@ |
|||||
{ |
{ |
||||
"icon": true, |
"icon": true, |
||||
"replaceAttrValues": { |
"replaceAttrValues": { |
||||
"#FD9800": "currentColor", |
|
||||
"#FFF": "currentColor", |
"#FFF": "currentColor", |
||||
"#F5A623": "currentColor", |
"#F5A623": "currentColor", |
||||
"#010002": "currentColor" |
"#010002": "currentColor", |
||||
|
"#E63939": "currentColor", |
||||
|
"#39E673": "currentColor" |
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,16 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgBigArrowLeft = props => ( |
||||
|
<svg viewBox="0 0 16 12" width="1em" height="1em" {...props}> |
||||
|
<path |
||||
|
d="M1 6h14m-8.474 5L1 6l5.526-5" |
||||
|
fill="none" |
||||
|
fillRule="evenodd" |
||||
|
stroke="currentColor" |
||||
|
strokeLinecap="round" |
||||
|
strokeLinejoin="round" |
||||
|
/> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgBigArrowLeft |
||||
@ -0,0 +1,12 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgClose = props => ( |
||||
|
<svg viewBox="0 0 10 10" width="1em" height="1em" {...props}> |
||||
|
<g fill="currentColor" fillRule="evenodd"> |
||||
|
<path d="M7.744 1.077a.833.833 0 1 1 1.179 1.179L2.256 8.923a.833.833 0 1 1-1.179-1.179l6.667-6.667z" /> |
||||
|
<path d="M1.077 2.256a.833.833 0 1 1 1.179-1.179l6.667 6.667a.833.833 0 1 1-1.179 1.179L1.077 2.256z" /> |
||||
|
</g> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgClose |
||||
@ -0,0 +1,13 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgError = props => ( |
||||
|
<svg viewBox="0 0 17 17" width="1em" height="1em" {...props}> |
||||
|
<path |
||||
|
fill="currentColor" |
||||
|
fillRule="evenodd" |
||||
|
d="M9.512 8.333l1.91-1.91a.833.833 0 0 0-1.178-1.179l-1.91 1.91-1.911-1.91a.833.833 0 1 0-1.179 1.179l1.91 1.91-1.91 1.911a.833.833 0 1 0 1.179 1.179l1.91-1.911 1.911 1.91a.833.833 0 0 0 1.179-1.178l-1.911-1.91zm-1.179 8.334A8.333 8.333 0 1 1 8.333 0a8.333 8.333 0 0 1 0 16.667z" |
||||
|
/> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgError |
||||
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgLightning = props => ( |
||||
|
<svg viewBox="0 0 50 50" width="1em" height="1em" {...props}> |
||||
|
<defs> |
||||
|
<linearGradient id="b" x1="0%" y1="0%" y2="100%"> |
||||
|
<stop offset="0%" stopColor="#FFBD59" /> |
||||
|
<stop offset="100%" stopColor="#FD9800" /> |
||||
|
</linearGradient> |
||||
|
</defs> |
||||
|
<g fill="none" fillRule="evenodd"> |
||||
|
<circle cx={25} cy={25} r={25} fill="url(#b)" /> |
||||
|
<path |
||||
|
fill="currentColor" |
||||
|
fillRule="nonzero" |
||||
|
d="M22.999 39.764l.708-3.28 1.26-5.827.53-2.454c.044-.207-.094-.415-.316-.415h-7.85l.283.493 1.218-1.865 2.875-4.4 3.358-5.139 2.669-4.085.852-1.305-.599-.253-.709 3.28-1.259 5.824-.53 2.453c-.045.207.094.415.316.415h7.865l-.284-.493-1.22 1.866-2.878 4.4-3.362 5.141-2.673 4.086-.854 1.306c-.232.355.336.683.567.33l1.22-1.865 2.878-4.4 3.362-5.141 2.672-4.087.854-1.305c.138-.212-.044-.493-.283-.493h-7.864l.316.414.71-3.28 1.258-5.824.53-2.453c.08-.365-.393-.567-.599-.252l-1.218 1.865-2.875 4.4-3.357 5.139-2.67 4.085-.852 1.305c-.138.212.044.493.283.493h7.849l-.317-.414-.709 3.28-1.259 5.827-.53 2.454c-.089.412.543.587.633.174z" |
||||
|
/> |
||||
|
</g> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgLightning |
||||
@ -0,0 +1,29 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgOnchain = props => ( |
||||
|
<svg viewBox="0 0 50 50" width="1em" height="1em" {...props}> |
||||
|
<defs> |
||||
|
<linearGradient id="c" x1="0%" y1="0%" y2="100%"> |
||||
|
<stop offset="0%" stopColor="#FFBD59" /> |
||||
|
<stop offset="100%" stopColor="#FD9800" /> |
||||
|
</linearGradient> |
||||
|
</defs> |
||||
|
<g fill="none" fillRule="evenodd"> |
||||
|
<circle cx={25} cy={25} r={25} fill="url(#c)" /> |
||||
|
<path |
||||
|
stroke="currentColor" |
||||
|
strokeLinecap="round" |
||||
|
strokeLinejoin="round" |
||||
|
d="M23 26.675c.946 1.347 2.394 2.19 3.97 2.31 1.574.12 3.12-.494 4.237-1.684l3.265-3.477c2.063-2.275 2.033-5.89-.066-8.126-2.1-2.236-5.494-2.268-7.63-.07l-1.871 1.982" |
||||
|
/> |
||||
|
<path |
||||
|
stroke="currentColor" |
||||
|
strokeLinecap="round" |
||||
|
strokeLinejoin="round" |
||||
|
d="M27 24.325c-.946-1.347-2.394-2.19-3.97-2.31-1.574-.12-3.12.494-4.237 1.684l-3.265 3.477c-2.063 2.275-2.033 5.89.066 8.126 2.1 2.236 5.494 2.268 7.63.07l1.86-1.982" |
||||
|
/> |
||||
|
</g> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgOnchain |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgSpinner = props => ( |
||||
|
<svg |
||||
|
xmlnsXlink="http://www.w3.org/1999/xlink" |
||||
|
viewBox="0 0 14 14" |
||||
|
width="1em" |
||||
|
height="1em" |
||||
|
{...props} |
||||
|
> |
||||
|
<defs> |
||||
|
<path |
||||
|
id="d" |
||||
|
d="M0 7a.778.778 0 1 1 1.556 0c0 1.464.58 2.835 1.594 3.85a5.444 5.444 0 1 0 1.766-8.881A.778.778 0 1 1 4.32.53 7 7 0 1 1 0 7z" |
||||
|
/> |
||||
|
</defs> |
||||
|
<use fill="currentColor" xlinkHref="#d" /> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgSpinner |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const SvgSuccess = props => ( |
||||
|
<svg |
||||
|
xmlnsXlink="http://www.w3.org/1999/xlink" |
||||
|
viewBox="0 0 17 17" |
||||
|
width="1em" |
||||
|
height="1em" |
||||
|
{...props} |
||||
|
> |
||||
|
<defs> |
||||
|
<path |
||||
|
id="a" |
||||
|
d="M8.333 16.667A8.333 8.333 0 1 1 8.333 0a8.333 8.333 0 0 1 0 16.667zM11.095 5.66l-4.41 4.41-1.513-1.51a.833.833 0 1 0-1.179 1.178l2.101 2.101a.833.833 0 0 0 1.179 0l5-5a.833.833 0 0 0-1.179-1.178z" |
||||
|
/> |
||||
|
</defs> |
||||
|
<use fill="currentColor" fillRule="evenodd" xlinkHref="#a" /> |
||||
|
</svg> |
||||
|
) |
||||
|
|
||||
|
export default SvgSuccess |
||||
@ -1,6 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import FaTimesCircle from 'react-icons/lib/fa/times-circle' |
|
||||
|
|
||||
const SystemIcon = props => <FaTimesCircle {...props} /> |
|
||||
|
|
||||
export default SystemIcon |
|
||||
@ -1,6 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import FaCheckCircle from 'react-icons/lib/fa/check-circle' |
|
||||
|
|
||||
const SystemIcon = props => <FaCheckCircle {...props} /> |
|
||||
|
|
||||
export default SystemIcon |
|
||||
@ -1,20 +1,271 @@ |
|||||
import { createGlobalStyle } from 'styled-components' |
import { createGlobalStyle } from 'styled-components' |
||||
|
import reset from 'styled-reset' |
||||
|
|
||||
|
/* eslint-disable max-len */ |
||||
const GlobalStyle = createGlobalStyle` |
const GlobalStyle = createGlobalStyle` |
||||
|
/* stylelint-disable font-family-no-missing-generic-family-keyword */ |
||||
|
${reset} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 300; |
||||
|
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
|
||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
||||
|
} |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
|
||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
||||
|
} |
||||
|
|
||||
html { |
html { |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
} |
} |
||||
|
|
||||
*, *:before, *:after { |
*, *:before, *:after { |
||||
box-sizing: inherit; |
box-sizing: inherit; |
||||
} |
} |
||||
|
|
||||
body { |
body { |
||||
position: relative; |
position: relative; |
||||
overflow-y: hidden; |
overflow-y: hidden; |
||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
||||
font-family: 'Roboto', Arial, Helvetica, sans-serif; |
font-family: 'Roboto', Arial, Helvetica, sans-serif; |
||||
|
font-weight: 300; |
||||
font-size: 13px; |
font-size: 13px; |
||||
} |
} |
||||
|
|
||||
|
.element-show { |
||||
|
display: inherit; |
||||
|
} |
||||
|
|
||||
|
.element-hide { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
*Tooltips |
||||
|
*/ |
||||
|
[data-hint] { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
[data-hint]::before, |
||||
|
[data-hint]::after { |
||||
|
position: absolute; |
||||
|
will-change: transform; |
||||
|
visibility: hidden; |
||||
|
opacity: 0; |
||||
|
z-index: 999; |
||||
|
pointer-events: none; |
||||
|
transition: 0.2s ease; |
||||
|
transition-delay: 0ms; |
||||
|
} |
||||
|
|
||||
|
[data-hint]::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
background: transparent; |
||||
|
border: 6px solid transparent; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
[data-hint]::after { |
||||
|
content: attr(data-hint); |
||||
|
background: ${props => props.theme.colors.lightestBackground}; |
||||
|
color: ${props => props.theme.colors.primaryText}; |
||||
|
border: 1px solid ${props => props.theme.colors.gray}; |
||||
|
border-radius: 3px; |
||||
|
max-width: 260px; |
||||
|
line-height: 1.4; |
||||
|
padding: 6px 10px; |
||||
|
word-wrap: break-word; |
||||
|
box-shadow: 0 3px 4px 0 rgba(30, 30, 30, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
[data-hint]:hover::before, |
||||
|
[data-hint]:hover::after { |
||||
|
visibility: visible; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom::before, |
||||
|
.hint--bottom-left::before { |
||||
|
border-bottom-color: #404040; |
||||
|
} |
||||
|
|
||||
|
.hint--top::before, |
||||
|
.hint--top-left::before { |
||||
|
border-top-color: #404040; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom::before { |
||||
|
margin-top: -12px; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom::after { |
||||
|
margin-left: -18px; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom::before, |
||||
|
.hint--bottom::after { |
||||
|
top: 100%; |
||||
|
left: 50%; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom:hover::after, |
||||
|
.hint--bottom:hover::before { |
||||
|
transform: translateY(8px); |
||||
|
} |
||||
|
|
||||
|
.hint--top::before { |
||||
|
margin-bottom: -12px; |
||||
|
} |
||||
|
|
||||
|
.hint--top::after { |
||||
|
margin-left: -18px; |
||||
|
} |
||||
|
|
||||
|
.hint--top::before, |
||||
|
.hint--top::after { |
||||
|
bottom: 100%; |
||||
|
left: 50%; |
||||
|
} |
||||
|
|
||||
|
.hint--top:hover::after, |
||||
|
.hint--top:hover::before { |
||||
|
transform: translateY(-8px); |
||||
|
} |
||||
|
|
||||
|
.hint--top-left::before { |
||||
|
margin-bottom: -12px; |
||||
|
} |
||||
|
|
||||
|
.hint--top-left::after { |
||||
|
margin-right: -6px; |
||||
|
} |
||||
|
|
||||
|
.hint--top-left::before, |
||||
|
.hint--top-left::after { |
||||
|
bottom: 100%; |
||||
|
right: 12px; |
||||
|
} |
||||
|
|
||||
|
.hint--top-left:hover::after, |
||||
|
.hint--top-left:hover::before { |
||||
|
transform: translateY(-8px); |
||||
|
} |
||||
|
|
||||
|
.hint--bottom-left::before { |
||||
|
margin-top: -12px; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom-left::after { |
||||
|
margin-right: -6px; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom-left::before, |
||||
|
.hint--bottom-left::after { |
||||
|
top: 100%; |
||||
|
right: 12px; |
||||
|
} |
||||
|
|
||||
|
.hint--bottom-left:hover::after, |
||||
|
.hint--bottom-left:hover::before { |
||||
|
transform: translateY(8px); |
||||
|
} |
||||
|
|
||||
|
.hint--left::before { |
||||
|
margin-right: -12px; |
||||
|
margin-top: -6px; |
||||
|
} |
||||
|
|
||||
|
.hint--left::after { |
||||
|
margin-right: -14px; |
||||
|
} |
||||
|
|
||||
|
.hint--left::before, |
||||
|
.hint--left::after { |
||||
|
right: 100%; |
||||
|
bottom: 50%; |
||||
|
} |
||||
|
|
||||
|
.hint--left:hover::after, |
||||
|
.hint--left:hover::before { |
||||
|
transform: translateX(-8px); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
*Animated Checkmark |
||||
|
*/ |
||||
|
|
||||
|
.checkmark__circle { |
||||
|
stroke-dasharray: 166; |
||||
|
stroke-dashoffset: 166; |
||||
|
stroke-width: 2; |
||||
|
stroke-miterlimit: 10; |
||||
|
stroke: ${props => props.theme.colors.superGreen}; |
||||
|
fill: none; |
||||
|
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; |
||||
|
} |
||||
|
|
||||
|
.checkmark { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
border-radius: 50%; |
||||
|
stroke-width: 2; |
||||
|
stroke: #fff; |
||||
|
stroke-miterlimit: 10; |
||||
|
box-shadow: inset 0 0 0 ${props => props.theme.colors.superGreen}; |
||||
|
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; |
||||
|
} |
||||
|
|
||||
|
.checkmark__check { |
||||
|
transform-origin: 50% 50%; |
||||
|
stroke-dasharray: 48; |
||||
|
stroke-dashoffset: 48; |
||||
|
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; |
||||
|
} |
||||
|
|
||||
|
@keyframes stroke { |
||||
|
100% { |
||||
|
stroke-dashoffset: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes scale { |
||||
|
0%, |
||||
|
100% { |
||||
|
transform: none; |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
transform: scale3d(1.1, 1.1, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fill { |
||||
|
100% { |
||||
|
box-shadow: inset 0 0 0 30px ${props => props.theme.colors.superGreen}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
*Generic spin animation. |
||||
|
*/ |
||||
|
|
||||
|
@keyframes spin { |
||||
|
100% { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
` |
` |
||||
|
|
||||
export default GlobalStyle |
export default GlobalStyle |
||||
|
|||||
@ -1,20 +1,23 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import PropTypes from 'prop-types' |
import PropTypes from 'prop-types' |
||||
import { btc } from 'lib/utils' |
import { convert } from 'lib/utils/btc' |
||||
|
|
||||
const Value = ({ value, currency, currentTicker, fiatTicker }) => { |
const Value = ({ value, currency, currentTicker, fiatTicker }) => { |
||||
if (currency === 'sats') { |
if (currency === 'sats') { |
||||
return <i>{value > 0 ? value : value * -1}</i> |
return <i>{value > 0 ? value : value * -1}</i> |
||||
} |
} |
||||
|
let price |
||||
return <i>{btc.convert('sats', currency, value, currentTicker[fiatTicker].last)}</i> |
if (currency === 'fiat') { |
||||
|
price = currentTicker[fiatTicker].last |
||||
|
} |
||||
|
return <i>{convert('sats', currency, value, price)}</i> |
||||
} |
} |
||||
|
|
||||
Value.propTypes = { |
Value.propTypes = { |
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
||||
currency: PropTypes.string.isRequired, |
currency: PropTypes.string.isRequired, |
||||
currentTicker: PropTypes.object.isRequired, |
currentTicker: PropTypes.object, |
||||
fiatTicker: PropTypes.string.isRequired |
fiatTicker: PropTypes.string |
||||
} |
} |
||||
|
|
||||
export default Value |
export default Value |
||||
|
|||||
|
After Width: | Height: | Size: 258 B |
|
Before Width: | Height: | Size: 238 B After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 900 B |
|
After Width: | Height: | Size: 375 B |
|
After Width: | Height: | Size: 442 B |
|
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 406 B |
@ -1,52 +0,0 @@ |
|||||
$curve: cubic-bezier(0.65, 0, 0.45, 1); |
|
||||
|
|
||||
.checkmark__circle { |
|
||||
stroke-dasharray: 166; |
|
||||
stroke-dashoffset: 166; |
|
||||
stroke-width: 2; |
|
||||
stroke-miterlimit: 10; |
|
||||
stroke: $green; |
|
||||
fill: none; |
|
||||
animation: stroke 0.6s $curve forwards; |
|
||||
} |
|
||||
|
|
||||
.checkmark { |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
border-radius: 50%; |
|
||||
stroke-width: 2; |
|
||||
stroke: #fff; |
|
||||
stroke-miterlimit: 10; |
|
||||
box-shadow: inset 0 0 0 $green; |
|
||||
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; |
|
||||
} |
|
||||
|
|
||||
.checkmark__check { |
|
||||
transform-origin: 50% 50%; |
|
||||
stroke-dasharray: 48; |
|
||||
stroke-dashoffset: 48; |
|
||||
animation: stroke 0.3s $curve 0.8s forwards; |
|
||||
} |
|
||||
|
|
||||
@keyframes stroke { |
|
||||
100% { |
|
||||
stroke-dashoffset: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes scale { |
|
||||
0%, |
|
||||
100% { |
|
||||
transform: none; |
|
||||
} |
|
||||
|
|
||||
50% { |
|
||||
transform: scale3d(1.1, 1.1, 1); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes fill { |
|
||||
100% { |
|
||||
box-shadow: inset 0 0 0 30px $green; |
|
||||
} |
|
||||
} |
|
||||
@ -1,47 +0,0 @@ |
|||||
@import 'variables'; |
|
||||
|
|
||||
@keyframes fadeinOutD6 { |
|
||||
0% { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
|
|
||||
50% { |
|
||||
transform: rotate(6deg); |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes fadeinOutD13 { |
|
||||
0% { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
|
|
||||
50% { |
|
||||
transform: rotate(13deg); |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes colorchange { |
|
||||
0% { color: $white; } |
|
||||
25% { color: $gold; } |
|
||||
50% { color: $white; } |
|
||||
75% { color: $gold; } |
|
||||
100% { color: $white; } |
|
||||
} |
|
||||
|
|
||||
@keyframes spin { |
|
||||
from { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
transform: rotate(360deg); |
|
||||
} |
|
||||
} |
|
||||
@ -1,48 +0,0 @@ |
|||||
/* http://meyerweb.com/eric/tools/css/reset/ |
|
||||
v2.0 | 20110126 |
|
||||
License: none (public domain) |
|
||||
*/ |
|
||||
|
|
||||
html, body, div, span, applet, object, iframe, |
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
||||
a, abbr, acronym, address, big, cite, code, |
|
||||
del, dfn, em, img, ins, kbd, q, s, samp, |
|
||||
small, strike, strong, sub, sup, tt, var, |
|
||||
b, u, i, center, |
|
||||
dl, dt, dd, ol, ul, li, |
|
||||
fieldset, form, label, legend, |
|
||||
table, caption, tbody, tfoot, thead, tr, th, td, |
|
||||
article, aside, canvas, details, embed, |
|
||||
figure, figcaption, footer, header, hgroup, |
|
||||
menu, nav, output, ruby, section, summary, |
|
||||
time, mark, audio, video { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
border: 0; |
|
||||
font-size: 100%; |
|
||||
font: inherit; |
|
||||
vertical-align: baseline; |
|
||||
} |
|
||||
/* HTML5 display-role reset for older browsers */ |
|
||||
article, aside, details, figcaption, figure, |
|
||||
footer, header, hgroup, menu, nav, section { |
|
||||
display: block; |
|
||||
} |
|
||||
body { |
|
||||
line-height: 1; |
|
||||
} |
|
||||
ol, ul { |
|
||||
list-style: none; |
|
||||
} |
|
||||
blockquote, q { |
|
||||
quotes: none; |
|
||||
} |
|
||||
blockquote:before, blockquote:after, |
|
||||
q:before, q:after { |
|
||||
content: ''; |
|
||||
content: none; |
|
||||
} |
|
||||
table { |
|
||||
border-collapse: collapse; |
|
||||
border-spacing: 0; |
|
||||
} |
|
||||
@ -1,162 +0,0 @@ |
|||||
@import 'styles/variables.scss'; |
|
||||
|
|
||||
/* Tooltips */ |
|
||||
[data-hint] { |
|
||||
position: relative; |
|
||||
|
|
||||
// display: inline-block; |
|
||||
} |
|
||||
|
|
||||
[data-hint]::before, |
|
||||
[data-hint]::after { |
|
||||
position: absolute; |
|
||||
will-change: transform; |
|
||||
visibility: hidden; |
|
||||
opacity: 0; |
|
||||
z-index: z('tooltip', 'after'); |
|
||||
pointer-events: none; |
|
||||
transition: 0.2s ease; |
|
||||
transition-delay: 0ms; |
|
||||
} |
|
||||
|
|
||||
[data-hint]::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
background: transparent; |
|
||||
border: 6px solid transparent; |
|
||||
z-index: z('tooltip', 'before'); |
|
||||
} |
|
||||
|
|
||||
[data-hint]::after { |
|
||||
content: attr(data-hint); |
|
||||
background: #404040; |
|
||||
color: #e0e0e0; |
|
||||
text-shadow: 0 -1px 0 black; |
|
||||
padding: 8px 10px; |
|
||||
line-height: 12px; |
|
||||
white-space: nowrap; |
|
||||
border-radius: 2px; |
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); |
|
||||
letter-spacing: normal; |
|
||||
font-size: 12px; |
|
||||
font-weight: normal; |
|
||||
font-style: inherit; |
|
||||
font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif; |
|
||||
} |
|
||||
|
|
||||
[data-hint]:hover::before, |
|
||||
[data-hint]:hover::after { |
|
||||
visibility: visible; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom::before, |
|
||||
.hint--bottom-left::before { |
|
||||
border-bottom-color: #404040; |
|
||||
} |
|
||||
|
|
||||
.hint--top::before, |
|
||||
.hint--top-left::before { |
|
||||
border-top-color: #404040; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom::before { |
|
||||
margin-top: -12px; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom::after { |
|
||||
margin-left: -18px; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom::before, |
|
||||
.hint--bottom::after { |
|
||||
top: 100%; |
|
||||
left: 50%; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom:hover::after, |
|
||||
.hint--bottom:hover::before { |
|
||||
-webkit-transform: translateY(8px); |
|
||||
transform: translateY(8px); |
|
||||
} |
|
||||
|
|
||||
.hint--top::before { |
|
||||
margin-bottom: -12px; |
|
||||
} |
|
||||
|
|
||||
.hint--top::after { |
|
||||
margin-left: -18px; |
|
||||
} |
|
||||
|
|
||||
.hint--top::before, |
|
||||
.hint--top::after { |
|
||||
bottom: 100%; |
|
||||
left: 50%; |
|
||||
} |
|
||||
|
|
||||
.hint--top:hover::after, |
|
||||
.hint--top:hover::before { |
|
||||
-webkit-transform: translateY(-8px); |
|
||||
transform: translateY(-8px); |
|
||||
} |
|
||||
|
|
||||
.hint--top-left::before { |
|
||||
margin-bottom: -12px; |
|
||||
} |
|
||||
|
|
||||
.hint--top-left::after { |
|
||||
margin-right: -6px; |
|
||||
} |
|
||||
|
|
||||
.hint--top-left::before, |
|
||||
.hint--top-left::after { |
|
||||
bottom: 100%; |
|
||||
right: 30%; |
|
||||
} |
|
||||
|
|
||||
.hint--top-left:hover::after, |
|
||||
.hint--top-left:hover::before { |
|
||||
-webkit-transform: translateY(-8px); |
|
||||
transform: translateY(-8px); |
|
||||
} |
|
||||
|
|
||||
.hint--bottom-left::before { |
|
||||
margin-top: -12px; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom-left::after { |
|
||||
margin-right: -6px; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom-left::before, |
|
||||
.hint--bottom-left::after { |
|
||||
top: 100%; |
|
||||
right: 30%; |
|
||||
} |
|
||||
|
|
||||
.hint--bottom-left:hover::after, |
|
||||
.hint--bottom-left:hover::before { |
|
||||
-webkit-transform: translateY(8px); |
|
||||
transform: translateY(8px); |
|
||||
} |
|
||||
|
|
||||
.hint--left::before { |
|
||||
margin-right: -12px; |
|
||||
margin-top: -6px; |
|
||||
} |
|
||||
|
|
||||
.hint--left::after { |
|
||||
margin-right: -14px; |
|
||||
} |
|
||||
|
|
||||
.hint--left::before, |
|
||||
.hint--left::after { |
|
||||
right: 100%; |
|
||||
bottom: 50%; |
|
||||
} |
|
||||
|
|
||||
.hint--left:hover::after, |
|
||||
.hint--left:hover::before { |
|
||||
-webkit-transform: translateX(-8px); |
|
||||
transform: translateX(-8px); |
|
||||
} |
|
||||
@ -1,13 +1,18 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import { storiesOf } from '@storybook/react' |
import { storiesOf } from '@storybook/react' |
||||
import { Modal } from 'components/UI' |
import { action } from '@storybook/addon-actions' |
||||
|
import { Modal, Page, Text } from 'components/UI' |
||||
|
|
||||
storiesOf('Components.Modal', module).add('Modal', () => ( |
storiesOf('Components.Modal', module).add('Modal', () => ( |
||||
<Modal> |
<Page> |
||||
|
<Modal onClose={action('clicked')}> |
||||
|
<Text> |
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut |
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco |
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco |
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in |
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in |
||||
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat |
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat |
||||
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||||
|
</Text> |
||||
</Modal> |
</Modal> |
||||
|
</Page> |
||||
)) |
)) |
||||
|
|||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue