mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-23 23:48:07 +00:00
Separate more animations, removed unused less
This commit is contained in:
Vladimir Volek
parent
39de4ad932
commit
0aa4bfd26a
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled, { css, keyframes } from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import Paragraph from 'components/Paragraph';
|
||||
import { DASH, GREEN_COLOR } from 'config/animations';
|
||||
@ -38,10 +38,7 @@ const CircleWrapper = styled.circle`
|
||||
const Loader = ({
|
||||
className, text, size = 100,
|
||||
}) => (
|
||||
<Wrapper
|
||||
className={className}
|
||||
size={size}
|
||||
>
|
||||
<Wrapper className={className} size={size}>
|
||||
<Paragraph>{text}</Paragraph>
|
||||
<SvgWrapper viewBox="25 25 50 50">
|
||||
<CircleWrapper
|
||||
|
||||
@ -2,13 +2,21 @@ import { keyframes } from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
|
||||
export const ROTATE_180_UP = keyframes`
|
||||
from { transform: rotate(0deg) }
|
||||
to { transform: rotate(180deg) }
|
||||
from {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
to {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
`;
|
||||
|
||||
export const ROTATE_180_DOWN = keyframes`
|
||||
from { transform: rotate(180deg) }
|
||||
to { transform: rotate(0deg) }
|
||||
from {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
`;
|
||||
|
||||
export const DASH = keyframes`
|
||||
@ -39,4 +47,13 @@ export const GREEN_COLOR = keyframes`
|
||||
80%, 90% {
|
||||
stroke: ${colors.GREEN_TERTIARY};
|
||||
}
|
||||
`;
|
||||
|
||||
export const PULSATE = keyframes`
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
`;
|
||||
@ -5,6 +5,7 @@ import styled, { keyframes } from 'styled-components';
|
||||
import TrezorConnect from 'trezor-connect';
|
||||
import P from 'components/Paragraph';
|
||||
import Button from 'components/Button';
|
||||
import { PULSATE } from 'config/animations';
|
||||
import colors from 'config/colors';
|
||||
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
||||
|
||||
@ -65,20 +66,10 @@ class ConnectDevice extends Component<Props> {
|
||||
padding: 36px 0;
|
||||
`;
|
||||
|
||||
const animationPulsate = keyframes`
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
`;
|
||||
|
||||
const ConnectTrezorWrapper = styled.div`
|
||||
position: relative;
|
||||
top: 1px;
|
||||
animation: ${animationPulsate} 1.3s ease-out infinite;
|
||||
|
||||
animation: ${PULSATE} 1.3s ease-out infinite;
|
||||
color: ${colors.GREEN_PRIMARY};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-weight: ${FONT_WEIGHT.BASE};
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
@import './receive.less';
|
||||
@import './summary.less';
|
||||
|
||||
@import './landingPage.less';
|
||||
@import './notification.less';
|
||||
|
||||
@import './inputs.less';
|
||||
|
||||
@ -1,306 +0,0 @@
|
||||
.app {
|
||||
|
||||
&.landing {
|
||||
//min-height: 100vh;
|
||||
// overflow: hidden;
|
||||
background: @color_landing;
|
||||
|
||||
.notification {
|
||||
min-width: 100%;
|
||||
padding: 24px 0px;
|
||||
.notification-body {
|
||||
max-width: 1170px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 32px 0px 64px;
|
||||
position: relative;
|
||||
}
|
||||
h2:before {
|
||||
top: -7px;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding-top: 65px;
|
||||
margin-top: 0px;
|
||||
background: @color_landing;
|
||||
}
|
||||
|
||||
footer {
|
||||
border: 0px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1170px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.browser-not-supported {
|
||||
main {
|
||||
padding-top: 0px;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
p {
|
||||
padding: 24px 0px;
|
||||
color: @color_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
&:before {
|
||||
content: '';
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.chrome {
|
||||
&:before {
|
||||
background-image: url('../images/browser-chrome.png');
|
||||
}
|
||||
}
|
||||
&.firefox {
|
||||
&:before {
|
||||
background-image: url('../images/browser-firefox.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.install-bridge {
|
||||
|
||||
main {
|
||||
padding-top: 0px;
|
||||
justify-content: center;
|
||||
max-width: 500px;
|
||||
|
||||
p {
|
||||
color: @color_text_secondary;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
flex: 1;
|
||||
height: 34px;
|
||||
margin-right: 4px;
|
||||
|
||||
.Select-control {
|
||||
height: 34px;
|
||||
border: 1px solid @color_divider;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
background: @color_white;
|
||||
}
|
||||
|
||||
.Select-option {
|
||||
.hover();
|
||||
&.is-focused {
|
||||
background: @color_gray_light;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: @color_divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim {
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
span {
|
||||
color: @color_green_primary;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid @color_green_primary;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 24px 0px;
|
||||
|
||||
.button {
|
||||
padding: 0px 24px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: left;
|
||||
&:before {
|
||||
.icomoon-download;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.installers {
|
||||
width: 120px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.connect-device {
|
||||
|
||||
main {
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 36px 0px;
|
||||
margin: 0 auto;
|
||||
// width: 420px;
|
||||
|
||||
p {
|
||||
// flex: 1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// a {
|
||||
// color: @color_green_primary;
|
||||
// text-decoration: underline;
|
||||
// font-weight: 500;
|
||||
// .hover();
|
||||
// &:hover {
|
||||
// text-decoration: none;
|
||||
// color: @color_green_secondary;
|
||||
// }
|
||||
// }
|
||||
.webusb-and,
|
||||
.trezor-webusb-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.webusb {
|
||||
width: 400px;
|
||||
.webusb-and,
|
||||
.trezor-webusb-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: @color_text_secondary;
|
||||
line-height: 1.8;
|
||||
|
||||
&.connect {
|
||||
color: @color_green_primary;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
animation: pulsate 1.3s ease-out infinite;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 143px);
|
||||
min-height: 500px;
|
||||
flex: 1;
|
||||
background-image: url('../images/case.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0px;
|
||||
background-size: contain;
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0px auto;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.connect-usb-pin,
|
||||
.connect-usb-cable {
|
||||
animation: connect 1.3s ease-out infinite;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.landing {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: @color_landing;
|
||||
|
||||
.loader-circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes connect {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-4px)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user