From 2ae5e896edb93d4420153c8e30f4413222e5df54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Tue, 17 Aug 2021 13:00:03 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9=20=D0=B8?= =?UTF-8?q?=D0=B7=20=D0=BE=D0=B1=D1=89=D0=B5=D0=B3=D0=BE=20=D1=84=D0=B0?= =?UTF-8?q?=D0=B9=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Display.jsx | 1 + src/components/WellTreeSelector.jsx | 1 + src/styles/App.less | 71 ++--------------------------- src/styles/display.css | 46 +++++++++++++++++++ src/styles/grid.css | 9 ++++ src/styles/wellTreeSelect.css | 19 ++++++++ 6 files changed, 81 insertions(+), 66 deletions(-) create mode 100644 src/styles/display.css create mode 100644 src/styles/grid.css create mode 100644 src/styles/wellTreeSelect.css diff --git a/src/components/Display.jsx b/src/components/Display.jsx index d892a04..065ccf2 100644 --- a/src/components/Display.jsx +++ b/src/components/Display.jsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react'; import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons' import moment from 'moment'; +import '../styles/display.css' export const formatNumber = (value, format) => Number.isInteger(format) && Number.isFinite(value) diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx index 26ade5c..1bea54d 100644 --- a/src/components/WellTreeSelector.jsx +++ b/src/components/WellTreeSelector.jsx @@ -5,6 +5,7 @@ import LoaderPortal from './LoaderPortal' import { TreeSelect } from 'antd' import { useHistory } from 'react-router-dom' import notify from './notify' +import '../styles/wellTreeSelect.css' export default function WellTreeSelector() { const [wellsTree, setWellsTree] = useState([]) diff --git a/src/styles/App.less b/src/styles/App.less index 198f2b1..a69b734 100644 --- a/src/styles/App.less +++ b/src/styles/App.less @@ -1,5 +1,10 @@ @import '~antd/dist/antd.less'; @import './loader.css'; +/* +* ЭТО ФАЙЛ НАСТРОЙКИ ТЕМЫ И КОМПОНЕНТОВ ТЕМЫ. +* НЕ ПИШИТЕ ТУТ СТИЛИ ДЛЯ КАСТОМНЫХ КОМПОНЕНТОВ. +*/ + // Переменные для темы тут: // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less @@ -108,52 +113,6 @@ html { border: 1px solid rgba(0, 0, 0, 0.05); } -.display_flex_container{ - display: flex; - flex-wrap: wrap; - flex: auto; -} -.display_header { - font-size: 16px; - flex-grow: 1; - display: flex; -} - -.display_label{ - font-size: 16px; - color: rgb(70, 70, 70); - text-align: left; - justify-content: center; - margin: 1px 1rem 1px 1rem; - flex: auto; - align-items: baseline; - text-overflow: ellipsis; - overflow-x: hidden; - overflow-y: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - height: 30px; -} - -.display_value{ - font-size: 18px; - font-weight: bold; - color: rgb(50, 50, 50); - text-align: right; - justify-content: flex-end; - align-items:baseline; - margin: 1px 1rem; - flex: auto; -} - -.display_small_value{ - color: rgb(50, 50, 50); - text-align: right; - justify-content: center; - margin: 1px 1rem 1px 1rem; - flex: auto; -} - .menu-title, .chart-footer { display: flex; @@ -182,23 +141,3 @@ tr.table_row_size { margin-right: 5px; margin-left: 5px; } - -.header-tree-select { - width: 300px -} - -.header-tree-select *{ - color: #fff; - font-size: 1rem; -} - -.header-tree-select{ - width: 300px; - border: 1px solid rgba(255, 255, 255, 0.2); - background-color: rgba(0, 0, 0, 0.3); -} - -.header-tree-select:hover{ - border: 1px solid rgba(255, 255, 255, 0.8); - background-color: rgba(0, 0, 0, 0.5); -} \ No newline at end of file diff --git a/src/styles/display.css b/src/styles/display.css new file mode 100644 index 0000000..066507b --- /dev/null +++ b/src/styles/display.css @@ -0,0 +1,46 @@ + +.display_flex_container{ + display: flex; + flex-wrap: wrap; + flex: auto; +} +.display_header { + font-size: 16px; + flex-grow: 1; + display: flex; +} + +.display_label{ + font-size: 16px; + color: rgb(70, 70, 70); + text-align: left; + justify-content: center; + margin: 1px 1rem 1px 1rem; + flex: auto; + align-items: baseline; + text-overflow: ellipsis; + overflow-x: hidden; + overflow-y: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + height: 30px; +} + +.display_value{ + font-size: 18px; + font-weight: bold; + color: rgb(50, 50, 50); + text-align: right; + justify-content: flex-end; + align-items:baseline; + margin: 1px 1rem; + flex: auto; +} + +.display_small_value{ + color: rgb(50, 50, 50); + text-align: right; + justify-content: center; + margin: 1px 1rem 1px 1rem; + flex: auto; +} diff --git a/src/styles/grid.css b/src/styles/grid.css new file mode 100644 index 0000000..9e095f8 --- /dev/null +++ b/src/styles/grid.css @@ -0,0 +1,9 @@ +.grid_container{ + display: grid; + column-gap: 4px; + row-gap: 4px; + /* grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(9, 1fr); */ + justify-items: stretch; + align-items: stretch; +} \ No newline at end of file diff --git a/src/styles/wellTreeSelect.css b/src/styles/wellTreeSelect.css new file mode 100644 index 0000000..c889fd8 --- /dev/null +++ b/src/styles/wellTreeSelect.css @@ -0,0 +1,19 @@ +.header-tree-select { + width: 300px +} + +.header-tree-select *{ + color: #fff; + font-size: 1rem; +} + +.header-tree-select{ + width: 300px; + border: 1px solid rgba(255, 255, 255, 0.2); + background-color: rgba(0, 0, 0, 0.3); +} + +.header-tree-select:hover{ + border: 1px solid rgba(255, 255, 255, 0.8); + background-color: rgba(0, 0, 0, 0.5); +} \ No newline at end of file