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-static |
|||
|
|||
@ -1,9 +1,10 @@ |
|||
{ |
|||
"icon": true, |
|||
"replaceAttrValues": { |
|||
"#FD9800": "currentColor", |
|||
"#FFF": "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 reset from 'styled-reset' |
|||
|
|||
/* eslint-disable max-len */ |
|||
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 { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
*, *:before, *:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
body { |
|||
position: relative; |
|||
overflow-y: hidden; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
font-family: 'Roboto', Arial, Helvetica, sans-serif; |
|||
font-weight: 300; |
|||
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 |
|||
|
|||
@ -1,20 +1,23 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { btc } from 'lib/utils' |
|||
import { convert } from 'lib/utils/btc' |
|||
|
|||
const Value = ({ value, currency, currentTicker, fiatTicker }) => { |
|||
if (currency === 'sats') { |
|||
return <i>{value > 0 ? value : value * -1}</i> |
|||
} |
|||
|
|||
return <i>{btc.convert('sats', currency, value, currentTicker[fiatTicker].last)}</i> |
|||
let price |
|||
if (currency === 'fiat') { |
|||
price = currentTicker[fiatTicker].last |
|||
} |
|||
return <i>{convert('sats', currency, value, price)}</i> |
|||
} |
|||
|
|||
Value.propTypes = { |
|||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|||
currency: PropTypes.string.isRequired, |
|||
currentTicker: PropTypes.object.isRequired, |
|||
fiatTicker: PropTypes.string.isRequired |
|||
currentTicker: PropTypes.object, |
|||
fiatTicker: PropTypes.string |
|||
} |
|||
|
|||
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 { 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', () => ( |
|||
<Modal> |
|||
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 |
|||
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 |
|||
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
</Modal> |
|||
<Page> |
|||
<Modal onClose={action('clicked')}> |
|||
<Text> |
|||
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 |
|||
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 non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
</Text> |
|||
</Modal> |
|||
</Page> |
|||
)) |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue