Separate more animations, removed unused less

pull/8/head
Vladimir Volek 6 years ago
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…
Cancel
Save