From 0aa4bfd26a5f601643295061a52e4f892423c3f6 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Sat, 25 Aug 2018 18:56:24 +0200 Subject: [PATCH] Separate more animations, removed unused less --- src/js/components/Loader/index.js | 7 +- src/js/config/animations.js | 25 +- .../Landing/components/ConnectDevice/index.js | 13 +- src/styles/index.less | 1 - src/styles/landingPage.less | 306 ------------------ 5 files changed, 25 insertions(+), 327 deletions(-) delete mode 100644 src/styles/landingPage.less diff --git a/src/js/components/Loader/index.js b/src/js/components/Loader/index.js index 28eadbe5..e977cb59 100644 --- a/src/js/components/Loader/index.js +++ b/src/js/components/Loader/index.js @@ -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, }) => ( - + {text} { 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}; diff --git a/src/styles/index.less b/src/styles/index.less index c19f56bc..e2fc57fb 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -12,7 +12,6 @@ @import './receive.less'; @import './summary.less'; -@import './landingPage.less'; @import './notification.less'; @import './inputs.less'; diff --git a/src/styles/landingPage.less b/src/styles/landingPage.less deleted file mode 100644 index 8223e8ff..00000000 --- a/src/styles/landingPage.less +++ /dev/null @@ -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) - } -} -