From 5803c13c5918f9cb604262d291d0478511f47547 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 5 Sep 2018 11:52:38 +0200 Subject: [PATCH] Removed less loaders --- package.json | 1 - src/components/Tooltip/index.js | 147 +++++++++++++++++++++++++++++- src/index.js | 1 - src/styles/colors.less | 28 ------ src/styles/index.less | 2 - src/styles/rcTooltip.less | 152 -------------------------------- webpack/dev.babel.js | 17 ---- webpack/local.babel.js | 17 ---- webpack/production.babel.js | 25 ------ yarn.lock | 19 ---- 10 files changed, 145 insertions(+), 264 deletions(-) delete mode 100644 src/styles/colors.less delete mode 100644 src/styles/index.less delete mode 100644 src/styles/rcTooltip.less diff --git a/package.json b/package.json index 54e1cbf1..7091e217 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "ethereumjs-util": "^5.1.4", "hdkey": "^0.8.0", "html-webpack-plugin": "^3.2.0", - "mini-css-extract-plugin": "^0.4.1", "npm-run-all": "^4.1.3", "prop-types": "^15.6.2", "raf": "^3.4.0", diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index e7aaf016..ce734577 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -1,5 +1,6 @@ import React from 'react'; import RcTooltip from 'rc-tooltip'; +import colors from 'config/colors'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import { FONT_SIZE } from 'config/variables'; @@ -9,16 +10,158 @@ const TooltipContent = styled.div` font-size: ${FONT_SIZE.SMALLEST}; `; +const StyledRcTooltip = styled(RcTooltip)` + .rc-tooltip { + position: absolute; + z-index: 1070; + display: block; + visibility: visible; + border: 1px solid ${colors.DIVIDER}; + border-radius: 3px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); + } + + .rc-tooltip-hidden { + display: none; + } + + .rc-tooltip-inner { + padding: 8px 10px; + color: ${colors.TEXT_SECONDARY}; + font-size: 12px; + line-height: 1.5; + text-align: left; + text-decoration: none; + background-color: ${colors.WHITE}; + border-radius: 3px; + min-height: 34px; + border: 1px solid ${colors.WHITE}; + } + .rc-tooltip-arrow, + .rc-tooltip-arrow-inner { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + + .rc-tooltip-placement-top .rc-tooltip-arrow, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow, + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + bottom: -6px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-top .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { + //bottom: 1px; + bottom: 2px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.WHITE}; + } + .rc-tooltip-placement-top .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + left: 15%; + } + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + right: 15%; + } + .rc-tooltip-placement-right .rc-tooltip-arrow, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + left: -5px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-right .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { + left: 1px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.WHITE}; + } + .rc-tooltip-placement-right .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-rightTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + bottom: 15%; + } + .rc-tooltip-placement-left .rc-tooltip-arrow, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + right: -5px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-left .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { + right: 1px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.WHITE}; + } + .rc-tooltip-placement-left .rc-tooltip-arrow { + top: 50%; + } + .rc-tooltip-placement-leftTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + bottom: 15%; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + top: -5px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.DIVIDER}; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { + top: 1px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.WHITE}; + } + .rc-tooltip-placement-bottom .rc-tooltip-arrow { + left: 50%; + } + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { + left: 15%; + } + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + right: 15%; + } +`; + const Tooltip = ({ content, placement = 'bottomRight', children, }) => ( - } placement={placement} overlay={{content}} > {children} - + ); Tooltip.propTypes = { diff --git a/src/index.js b/src/index.js index d8bfec85..c6c4cbd6 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,6 @@ import React from 'react'; import { render } from 'react-dom'; import baseStyles from 'support/BaseStyles'; import { onBeforeUnload } from 'actions/WalletActions'; -import 'styles/index.less'; import App from 'views/index'; import store from 'store'; diff --git a/src/styles/colors.less b/src/styles/colors.less deleted file mode 100644 index ab3a8d50..00000000 --- a/src/styles/colors.less +++ /dev/null @@ -1,28 +0,0 @@ -@color_white: #ffffff; - -@color_header: #212121; -@color_body: #E3E3E3; -@color_main: #FBFBFB; -@color_landing: #F9F9F9; - -@color_text_primary: #494949; -@color_text_secondary: #757575; - -@color_gray_light: #F2F2F2; // hover menu -@color_divider: #E3E3E3; //#EBEBEB; - -@color_green_primary: #01B757; -@color_green_secondary: #00AB51; -@color_green_tertiary: #009546; - -@color_info_primary: #1E7FF0; -@color_info_secondary: #E1EFFF; - -@color_warning_primary: #EB8A00; -@color_warning_secondary: #FFEFD9; - -@color_success_primary: #01B757; -@color_success_secondary: #DFFFEE; - -@color_error_primary: #ED1212; -@color_error_secondary: #FFE9E9; \ No newline at end of file diff --git a/src/styles/index.less b/src/styles/index.less deleted file mode 100644 index e1dab216..00000000 --- a/src/styles/index.less +++ /dev/null @@ -1,2 +0,0 @@ -@import './colors.less'; -@import './rcTooltip.less'; \ No newline at end of file diff --git a/src/styles/rcTooltip.less b/src/styles/rcTooltip.less deleted file mode 100644 index 644287f9..00000000 --- a/src/styles/rcTooltip.less +++ /dev/null @@ -1,152 +0,0 @@ -.tooltip-wrapper { - width: 320px; - font-size: 10px; - span { - color: @color_green_primary; - } -} - -.aside-tooltip-wrapper { - width: 260px; - font-size: 10px; -} - -.rc-tooltip { - position: absolute; - z-index: 1070; - display: block; - visibility: visible; - border: 1px solid @color_divider; - border-radius: 3px; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); -} - -.rc-tooltip-hidden { - display: none; -} - -.rc-tooltip-inner { - padding: 8px 10px; - color: @color_text_secondary; - font-size: 12px; - line-height: 1.5; - text-align: left; - text-decoration: none; - background-color: @color_white; - border-radius: 3px; - min-height: 34px; - border: 1px solid @color_white; -} -.rc-tooltip-arrow, -.rc-tooltip-arrow-inner { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - - -.rc-tooltip-placement-top .rc-tooltip-arrow, -.rc-tooltip-placement-topLeft .rc-tooltip-arrow, -.rc-tooltip-placement-topRight .rc-tooltip-arrow { - bottom: -6px; - margin-left: -6px; - border-width: 6px 6px 0; - border-top-color: @color_divider; -} -.rc-tooltip-placement-top .rc-tooltip-arrow-inner, -.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, -.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { - //bottom: 1px; - bottom: 2px; - margin-left: -6px; - border-width: 6px 6px 0; - border-top-color: @color_white; -} -.rc-tooltip-placement-top .rc-tooltip-arrow { - left: 50%; -} -.rc-tooltip-placement-topLeft .rc-tooltip-arrow { - left: 15%; -} -.rc-tooltip-placement-topRight .rc-tooltip-arrow { - right: 15%; -} -.rc-tooltip-placement-right .rc-tooltip-arrow, -.rc-tooltip-placement-rightTop .rc-tooltip-arrow, -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow { - left: -5px; - margin-top: -6px; - border-width: 6px 6px 6px 0; - border-right-color: @color_divider; -} -.rc-tooltip-placement-right .rc-tooltip-arrow-inner, -.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { - left: 1px; - margin-top: -6px; - border-width: 6px 6px 6px 0; - border-right-color: @color_white; -} -.rc-tooltip-placement-right .rc-tooltip-arrow { - top: 50%; -} -.rc-tooltip-placement-rightTop .rc-tooltip-arrow { - top: 15%; - margin-top: 0; -} -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow { - bottom: 15%; -} -.rc-tooltip-placement-left .rc-tooltip-arrow, -.rc-tooltip-placement-leftTop .rc-tooltip-arrow, -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow { - right: -5px; - margin-top: -6px; - border-width: 6px 0 6px 6px; - border-left-color: @color_divider; -} -.rc-tooltip-placement-left .rc-tooltip-arrow-inner, -.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { - right: 1px; - margin-top: -6px; - border-width: 6px 0 6px 6px; - border-left-color: @color_white; -} -.rc-tooltip-placement-left .rc-tooltip-arrow { - top: 50%; -} -.rc-tooltip-placement-leftTop .rc-tooltip-arrow { - top: 15%; - margin-top: 0; -} -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow { - bottom: 15%; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow, -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow { - top: -5px; - margin-left: -6px; - border-width: 0 6px 6px; - border-bottom-color: @color_divider; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { - top: 1px; - margin-left: -6px; - border-width: 0 6px 6px; - border-bottom-color: @color_white; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow { - left: 50%; -} -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { - left: 15%; -} -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow { - right: 15%; -} diff --git a/webpack/dev.babel.js b/webpack/dev.babel.js index 6a5dc96f..9848ddfe 100644 --- a/webpack/dev.babel.js +++ b/webpack/dev.babel.js @@ -1,6 +1,5 @@ import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import { SRC, BUILD, PORT, PUBLIC, } from './constants'; @@ -34,17 +33,6 @@ module.exports = { exclude: /node_modules/, use: ['babel-loader'], }, - { - test: /\.less$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { publicPath: '../' }, - }, - 'css-loader', - 'less-loader', - ], - }, { test: /\.(png|gif|jpg)$/, loader: 'file-loader?name=./images/[name].[ext]', @@ -83,11 +71,6 @@ module.exports = { hints: false, }, plugins: [ - new MiniCssExtractPlugin({ - filename: '[name].css', - chunkFilename: '[id].css', - }), - new HtmlWebpackPlugin({ chunks: ['index'], template: `${SRC}index.html`, diff --git a/webpack/local.babel.js b/webpack/local.babel.js index 1c110791..142f6558 100644 --- a/webpack/local.babel.js +++ b/webpack/local.babel.js @@ -1,7 +1,6 @@ import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CopyWebpackPlugin from 'copy-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import { TREZOR_CONNECT_ROOT, TREZOR_CONNECT_HTML, @@ -48,17 +47,6 @@ module.exports = { exclude: /node_modules/, use: ['babel-loader'], }, - { - test: /\.less$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { publicPath: '../' }, - }, - 'css-loader', - 'less-loader', - ], - }, { test: /\.(png|gif|jpg)$/, loader: 'file-loader?name=./images/[name].[ext]', @@ -109,11 +97,6 @@ module.exports = { hints: false, }, plugins: [ - new MiniCssExtractPlugin({ - filename: '[name].css', - chunkFilename: '[id].css', - }), - new HtmlWebpackPlugin({ chunks: ['index'], template: `${SRC}index.html`, diff --git a/webpack/production.babel.js b/webpack/production.babel.js index 1876b93e..39342d6b 100644 --- a/webpack/production.babel.js +++ b/webpack/production.babel.js @@ -2,7 +2,6 @@ import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CopyWebpackPlugin from 'copy-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import { SRC, BUILD, PUBLIC } from './constants'; module.exports = { @@ -22,27 +21,6 @@ module.exports = { exclude: /node_modules/, use: ['babel-loader'], }, - { - test: /\.less$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { publicPath: '../' }, - }, - { - loader: 'css-loader', - options: { - minimize: false, - }, - }, - { - loader: 'less-loader', - options: { - minimize: false, - }, - }, - ], - }, { test: /\.(png|gif|jpg)$/, exclude: /(node_modules)/, @@ -82,9 +60,6 @@ module.exports = { hints: false, }, plugins: [ - new MiniCssExtractPlugin({ - filename: 'css/[name].[hash].css', - }), new HtmlWebpackPlugin({ chunks: ['index'], template: `${SRC}index.html`, diff --git a/yarn.lock b/yarn.lock index b76059ec..61c6000a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -391,17 +391,6 @@ "@webassemblyjs/wast-parser" "1.5.13" long "^3.2.0" -"@webpack-contrib/schema-utils@^1.0.0-beta.0": - version "1.0.0-beta.0" - resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65" - dependencies: - ajv "^6.1.0" - ajv-keywords "^3.1.0" - chalk "^2.3.2" - strip-ansi "^4.0.0" - text-table "^0.2.0" - webpack-log "^1.1.2" - abab@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e" @@ -6430,14 +6419,6 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" -mini-css-extract-plugin@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz#d2bcf77bb2596b8e4bd9257e43d3f9164c2e86cb" - dependencies: - "@webpack-contrib/schema-utils" "^1.0.0-beta.0" - loader-utils "^1.1.0" - webpack-sources "^1.1.0" - minimalistic-assert@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"