From 76631e147712e5c83aa4fdf18a4aba9fbfe21909 Mon Sep 17 00:00:00 2001 From: jianmingtu Date: Wed, 14 Apr 2021 16:06:06 -0700 Subject: [PATCH] #11 problem of delivering the dashboard --- client/package-lock.json | 61 +- client/src/App.js | 2 +- client/src/components/posts/Post.js | 165 -- client/src/components/posts/Posts.css | 2595 +++++++++++++++++++++++-- client/src/components/posts/Posts.js | 41 + client/src/layouts/PostsPage/index.js | 44 + 6 files changed, 2540 insertions(+), 368 deletions(-) delete mode 100644 client/src/components/posts/Post.js create mode 100644 client/src/components/posts/Posts.js create mode 100644 client/src/layouts/PostsPage/index.js diff --git a/client/package-lock.json b/client/package-lock.json index 8ad603e..288de52 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2085,9 +2085,9 @@ "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==" }, "@types/eslint": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz", - "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==", + "version": "7.2.10", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz", + "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==", "requires": { "@types/estree": "*", "@types/json-schema": "*" @@ -2171,9 +2171,9 @@ "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==" }, "@types/node": { - "version": "14.14.37", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz", - "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==" + "version": "14.14.38", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.38.tgz", + "integrity": "sha512-cTiIM5yNu+CxZO+QzKZ8W+FeiDbgIWKhU3HniQjyzb0R7SvmyEMFYtEu8l9A3wU7emobj6mxZV/4dmkY6jsftw==" }, "@types/normalize-package-data": { "version": "2.4.0", @@ -5336,9 +5336,9 @@ "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==" }, "electron-to-chromium": { - "version": "1.3.714", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.714.tgz", - "integrity": "sha512-/xC2dSRZTzpPuKF/v+YZSYSkS0ZzktGrqou/ldu3MovPdEuLBzU/QUfEAc1as/M/KMbM5HZFQDs7/edNmSOpNA==" + "version": "1.3.717", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz", + "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==" }, "elliptic": { "version": "6.5.4", @@ -10057,6 +10057,12 @@ "which": "^2.0.2" }, "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "optional": true + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -12748,11 +12754,6 @@ "psl": "^1.1.28", "punycode": "^2.1.1" } - }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -13554,13 +13555,6 @@ "requires": { "any-base": "^1.1.0", "uuid": "^3.3.2" - }, - "dependencies": { - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" - } } }, "side-channel": { @@ -13748,13 +13742,6 @@ "faye-websocket": "^0.11.3", "uuid": "^3.4.0", "websocket-driver": "^0.7.4" - }, - "dependencies": { - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" - } } }, "sockjs-client": { @@ -14331,9 +14318,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "table": { - "version": "6.0.9", - "resolved": "https://registry.npmjs.org/table/-/table-6.0.9.tgz", - "integrity": "sha512-F3cLs9a3hL1Z7N4+EkSscsel3z55XT950AvB05bwayrNg5T1/gykXtigioTAjbltvbMSJvvhFCbnf6mX+ntnJQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/table/-/table-6.1.0.tgz", + "integrity": "sha512-T4G5KMmqIk6X87gLKWyU5exPpTjLjY5KyrFWaIjv3SvgaIUGXV7UEzGEnZJdTA38/yUS6f9PlKezQ0bYXG3iIQ==", "requires": { "ajv": "^8.0.1", "is-boolean-object": "^1.1.0", @@ -15065,10 +15052,9 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "optional": true + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" }, "v8-compile-cache": { "version": "2.3.0", @@ -16209,11 +16195,6 @@ "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==" - }, - "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, diff --git a/client/src/App.js b/client/src/App.js index 3a16196..836e1c3 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -5,11 +5,11 @@ import Main from "./components/main/Main"; import Navbar from "./components/navbar/Navbar"; import Sidebar from "./components/sidebar/Sidebar"; -import Posts from "./components/posts/Post" import LoginPage from "./layouts/LoginPage"; import SignOutPage from "./layouts/SignOutPage" import NewPostPage from "./layouts/NewPostPage" +import Posts from "./layouts/PostsPage" import * as token from './token' diff --git a/client/src/components/posts/Post.js b/client/src/components/posts/Post.js deleted file mode 100644 index 9dac906..0000000 --- a/client/src/components/posts/Post.js +++ /dev/null @@ -1,165 +0,0 @@ -import "./Posts.css"; -import hello from "../../assets/hello.svg"; -import Chart from "../charts/Chart"; - -const Posts = () => { - return ( -
-
- {/* */} - -
- hello -
-

Hello Codersbite

-

Welcome to your admin dashboard

-
-
- - {/* */} - - {/* */} -
-
- -
-

Number of Subscribers

- 578 -
-
- -
- -
-

Times of Watching

- 2467 -
-
- -
- -
-

Number of Videos

- 340 -
-
- -
- -
-

Number of Likes

- 645 -
-
-
- {/* */} - - {/* */} -
-
-
-
-

Daily Reports

-

Cupertino, California, USA

-
- -
- -
- -
-
-
-

Stats Reports

-

Cupertino, California, USA

-
- -
- -
-
-

Income

-

$75,300

-
- -
-

Sales

-

$124,200

-
- -
-

Users

-

3900

-
- -
-

Orders

-

1881

-
-
-
-
- {/* */} - - {/* */} -
-
-
-
-

Daily Reports

-

Cupertino, California, USA

-
- -
- -
- -
-
-
-

Stats Reports

-

Cupertino, California, USA

-
- -
- -
-
-

Income

-

$75,300

-
- -
-

Sales

-

$124,200

-
- -
-

Users

-

3900

- -
- -
-

Orders

-

1881

-
-
-
-
- {/* */} -
-
- ); -}; - -export default Posts; diff --git a/client/src/components/posts/Posts.css b/client/src/components/posts/Posts.css index 67652e9..9b7daf7 100644 --- a/client/src/components/posts/Posts.css +++ b/client/src/components/posts/Posts.css @@ -1,195 +1,2466 @@ main { - background: #f3f4f6; grid-area: main; overflow-y: auto; + background-color: red; } -.main__container { - padding: 20px 35px; -} -.main__title { - display: flex; - align-items: center; -} +.card { + margin-top: 1rem; + border: none; + height: 100%; + border-radius: 0.625rem; + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + .card > .list-group:first-child .list-group-item:first-child { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; } + .card > .list-group:last-child .list-group-item:last-child { + border-bottom-right-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; } + .card .list-group-item { + padding: 0.8125rem 1.875rem; } + .card .card-text { + margin-bottom: 1.5625rem; } + .card a:hover { + text-decoration: none; } + .card-small { + box-shadow: 0 2px 0 rgba(90, 97, 105, 0.11), 0 4px 8px rgba(90, 97, 105, 0.12), 0 10px 10px rgba(90, 97, 105, 0.06), 0 7px 70px rgba(90, 97, 105, 0.1); } + .card-small .card-header, + .card-small .card-body, + .card-small .card-footer { + padding: 1rem 1rem; } -.main__title > img { - max-height: 100px; - object-fit: contain; - margin-right: 20px; -} +.card-body { + padding: 1.875rem; } + .card-body > p:last-child { + margin-bottom: 0; } -.main__greeting > h1 { - font-size: 24px; - color: #2e4a66; - margin-bottom: 5px; -} +.card-title { + font-weight: 500; + margin-bottom: 0.75rem; } -.main__greeting > p { - font-size: 14px; - font-weight: 700; - color: #a5aaad; -} +.card-subtitle { + margin-top: -1.09375rem; } -.main__cards { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 30px; - margin: 20px 0; -} +.card-link { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } + .card-link + .card-link { + margin-left: 1.875rem; } -.card { - display: flex; - flex-direction: column; - justify-content: space-around; - height: 70px; - padding: 25px; - border-radius: 5px; - background: #ffffff; - box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff; -} +.card-header { + padding: 1.09375rem 1.875rem; + background-color: #fff; + border-bottom: none; } + .card-header:first-child { + border-radius: 0.625rem 0.625rem 0 0; } -.card_inner { - display: flex; - align-items: center; - justify-content: space-between; -} +.card-footer { + padding: 1.09375rem 1.875rem; + background-color: #fff; + border-top: none; } + .card-footer:last-child { + border-radius: 0 0 0.625rem 0.625rem; } -.card_inner > span { - font-size: 25px; -} +.card-header-tabs { + margin-bottom: -1rem; + border-bottom: 0; } + .card-header-tabs .nav-link, + .card-header-tabs .nav-link:hover { + border-bottom: transparent; } -.charts { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 30px; - margin-top: 50px; -} +.card-header-pills { + margin-right: -0.9375rem; + margin-left: -0.9375rem; } + .card-header-pills:hover { + background: transparent; } + +.card-img-overlay { + padding: 1.875rem 2.1875rem; + background: rgba(90, 97, 105, 0.5); + border-radius: 0.625rem; } + .card-img-overlay .card-title { + color: #fff; } + +.card-img { + border-radius: 0.625rem; } + +.card-img-top { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; } + +.card-img-bottom { + border-bottom-right-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; } + +.card-deck .card { + margin-bottom: 0.9375rem; } + +@media (min-width: 576px) { + .card-deck { + margin-right: -0.9375rem; + margin-left: -0.9375rem; } + .card-deck .card { + margin-right: 0.9375rem; + margin-left: 0.9375rem; } } + +.card-group > .card { + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + .card-group > .card:last-child .card-body, + .card-group > .card:last-child .card-footer { + border-right: none; } + +.card-group .card-body, +.card-group .card-footer { + border-right: 1px solid #e7e9ea; } + +@media (min-width: 576px) { + .card-group { + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); + border-radius: 0.625rem; } + .card-group > .card { + box-shadow: none; } + .card-group > .card:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .card-group > .card:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .card-group > .card:only-child { + border-radius: 0.625rem; } + .card-group > .card:only-child .card-img-top, + .card-group > .card:only-child .card-header { + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; } + .card-group > .card:only-child .card-img-bottom, + .card-group > .card:only-child .card-footer { + border-bottom-right-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; } + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { + border-radius: 0; } + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer { + border-radius: 0; } } + +.card-columns .card { + margin-bottom: 2.1875rem; } + +@media (min-width: 576px) { + .card-columns { + column-count: 3; + column-gap: 1.25rem; } } + +.pagination { + padding-left: 0; + list-style: none; + border-radius: 0.375rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.875rem; } + +.page-link { + padding: 0.5rem 0.75rem; + line-height: 1.25; + color: #007bff; + background-color: #fff; + border: none; + margin: 0; + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + .page-link:hover, .page-link:focus { + color: #0056b3; + background-color: #f5f5f6; + border-color: #dfe1e3; } + +.page-item { + box-shadow: 0 0.125rem 0.9375rem rgba(90, 97, 105, 0.1), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.15); } + .page-item:first-child { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; + overflow: hidden; } + .page-item:last-child { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; + overflow: hidden; } + .page-item:last-child .page-link { + border-right: none; } + .page-item.active .page-link { + color: #fff; + background-color: #007bff; + border-color: #007bff; } + .page-item.disabled .page-link { + color: #a8aeb4; + background-color: #fff; + border-color: #dfe1e3; } + +.pagination-lg .page-link { + padding: 0.9375rem 1.5625rem; + font-size: 0.875rem; + line-height: 1.5; } + +.pagination-lg .page-item:first-child .page-link { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; } + +.pagination-lg .page-item:last-child .page-link { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; } + +.pagination-sm .page-link { + padding: 0.25rem 0.6875rem; + font-size: 0.6875rem; + line-height: 1.5; } + +.pagination-sm .page-item:first-child .page-link { + border-top-left-radius: 0.35rem; + border-bottom-left-radius: 0.35rem; } + +.pagination-sm .page-item:last-child .page-link { + border-top-right-radius: 0.35rem; + border-bottom-right-radius: 0.35rem; } + +.badge { + padding: 0.375rem 0.5rem; + font-size: 75%; + font-weight: 500; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + color: #fff; + border-radius: 0.375rem; } + +a.badge { + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + +.badge-pill { + padding-right: 0.5rem; + padding-left: 0.5rem; + border-radius: 10rem; } + +.badge-squared { + border-radius: 0; } + +.badge-primary { + color: #fff; + background-color: #007bff; } + .badge-primary[href]:hover, .badge-primary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #0062cc; } + +.badge-outline-primary { + background: none; + border: 1px solid #007bff; + color: #007bff; } + +.badge-secondary { + color: #fff; + background-color: #5A6169; } + .badge-secondary[href]:hover, .badge-secondary[href]:focus { + color: #fff; + text-decoration: none; + background-color: #42484e; } + +.badge-outline-secondary { + background: none; + border: 1px solid #5A6169; + color: #5A6169; } + +.badge-success { + color: #fff; + background-color: #17c671; } + .badge-success[href]:hover, .badge-success[href]:focus { + color: #fff; + text-decoration: none; + background-color: #129857; } + +.badge-outline-success { + background: none; + border: 1px solid #17c671; + color: #17c671; } + +.badge-info { + color: #fff; + background-color: #00b8d8; } + .badge-info[href]:hover, .badge-info[href]:focus { + color: #fff; + text-decoration: none; + background-color: #008da5; } + +.badge-outline-info { + background: none; + border: 1px solid #00b8d8; + color: #00b8d8; } + +.badge-warning { + color: #212529; + background-color: #ffb400; } + .badge-warning[href]:hover, .badge-warning[href]:focus { + color: #212529; + text-decoration: none; + background-color: #cc9000; } + +.badge-outline-warning { + background: none; + border: 1px solid #ffb400; + color: #ffb400; } + +.badge-danger { + color: #fff; + background-color: #c4183c; } + .badge-danger[href]:hover, .badge-danger[href]:focus { + color: #fff; + text-decoration: none; + background-color: #97122e; } + +.badge-outline-danger { + background: none; + border: 1px solid #c4183c; + color: #c4183c; } + +.badge-light { + color: #212529; + background-color: #FBFBFB; } + .badge-light[href]:hover, .badge-light[href]:focus { + color: #212529; + text-decoration: none; + background-color: #e2e2e2; } + +.badge-outline-light { + background: none; + border: 1px solid #FBFBFB; + color: #FBFBFB; + color: #212529; } + +.badge-dark { + color: #fff; + background-color: #212529; } + .badge-dark[href]:hover, .badge-dark[href]:focus { + color: #fff; + text-decoration: none; + background-color: #0a0c0d; } + +.badge-outline-dark { + background: none; + border: 1px solid #212529; + color: #212529; } + +.jumbotron { + padding: 38px 42px; + margin-bottom: 2rem; + background-color: #eceeef; + border-radius: 0.5rem; } + @media (min-width: 576px) { + .jumbotron { + padding: 4rem 2rem; } } + +.alert { + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: none; + border-radius: 0; } + +.alert-link { + font-weight: 500; } + +.alert-dismissible .close { + top: 0; + right: 0; + padding: 0.75rem 1.25rem; + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + .alert-dismissible .close:hover { + cursor: pointer; } + +.alert-primary { + color: #f5faff; + background-color: #007bff; } + .alert-primary .alert-link { + color: #f5faff; } + +.alert-secondary { + color: #d9dcdf; + background-color: #5A6169; } + .alert-secondary .alert-link { + color: #d9dcdf; } + +.alert-success { + color: #d7fae9; + background-color: #17c671; } + .alert-success .alert-link { + color: #d7fae9; } + +.alert-info { + color: #cef8ff; + background-color: #00b8d8; } + .alert-info .alert-link { + color: #cef8ff; } + +.alert-warning { + color: #fffcf5; + background-color: #ffb400; } + .alert-warning .alert-link { + color: #fffcf5; } + +.alert-danger { + color: #fad7de; + background-color: #c4183c; } + .alert-danger .alert-link { + color: #fad7de; } + +.alert-light { + color: white; + background-color: #FBFBFB; + color: #212529; } + .alert-light .alert-link { + color: white; } + .alert-light .alert-link { + color: #212529; } + +.alert-dark { + color: #959faa; + background-color: #212529; } + .alert-dark .alert-link { + color: #959faa; } + +.progress-wrapper { + position: relative; + color: #5A6169; } + .progress-wrapper .progress-label { + font-size: 0.8125rem; } + .progress-wrapper .progress-value { + position: absolute; + top: 6px; + right: 0; + color: #5A6169; } + +.progress { + height: 0.625rem; + font-size: 0.625rem; + line-height: 0.625rem; + background-color: #f5f5f6; + margin-top: 6px; + border-radius: 1.25rem; + box-shadow: inset 0 0.1rem 0.1rem rgba(90, 97, 105, 0.15); } + +.progress-sm { + height: 0.3125rem; } + +.progress-lg { + height: 0.9375rem; } + .progress-lg .progress-bar { + height: 0.9375rem; } + +.progress-bar { + height: 0.625rem; + line-height: 0.625rem; + color: #fff; + background-color: #007bff; + transition: width 0.6s ease; } + +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 0.625rem 0.625rem; } + +.progress-bar-animated { + animation: progress-bar-stripes 1s linear infinite; } + +.list-group-small .list-group-item { + padding: 0.625rem 1rem; + font-size: 0.8125rem; } + +.list-group-item-action { + color: #5A6169; + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + .list-group-item-action:hover, .list-group-item-action:focus { + color: #5A6169; + background-color: #f7f8f8; } + .list-group-item-action:active { + color: #5A6169; + background-color: #eceeef; } + +.list-group-item { + padding: 0.75rem 1.25rem; + margin-bottom: -1px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); + font-weight: 300; } + .list-group-item:first-child { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; } + .list-group-item:last-child { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; } + .list-group-item.disabled, .list-group-item:disabled { + color: #868e96; + background-color: #fff; } + .list-group-item.active { + color: #fff; + background-color: #007bff; + border-color: #007bff; } + +.list-group-item-primary { + color: #004085; + background-color: #b8daff; } + +a.list-group-item-primary, +button.list-group-item-primary { + color: #004085; } + a.list-group-item-primary:hover, a.list-group-item-primary:focus, + button.list-group-item-primary:hover, + button.list-group-item-primary:focus { + color: #004085; + background-color: #9fcdff; } + a.list-group-item-primary.active, + button.list-group-item-primary.active { + background-color: #004085; + border-color: #004085; } + +.list-group-item-secondary { + color: #2f3237; + background-color: #d1d3d5; } + +a.list-group-item-secondary, +button.list-group-item-secondary { + color: #2f3237; } + a.list-group-item-secondary:hover, a.list-group-item-secondary:focus, + button.list-group-item-secondary:hover, + button.list-group-item-secondary:focus { + color: #2f3237; + background-color: #c4c6c9; } + a.list-group-item-secondary.active, + button.list-group-item-secondary.active { + background-color: #2f3237; + border-color: #2f3237; } + +.list-group-item-success { + color: #0c673b; + background-color: #beefd7; } + +a.list-group-item-success, +button.list-group-item-success { + color: #0c673b; } + a.list-group-item-success:hover, a.list-group-item-success:focus, + button.list-group-item-success:hover, + button.list-group-item-success:focus { + color: #0c673b; + background-color: #aaeaca; } + a.list-group-item-success.active, + button.list-group-item-success.active { + background-color: #0c673b; + border-color: #0c673b; } + +.list-group-item-info { + color: #006070; + background-color: #b8ebf4; } + +a.list-group-item-info, +button.list-group-item-info { + color: #006070; } + a.list-group-item-info:hover, a.list-group-item-info:focus, + button.list-group-item-info:hover, + button.list-group-item-info:focus { + color: #006070; + background-color: #a2e5f1; } + a.list-group-item-info.active, + button.list-group-item-info.active { + background-color: #006070; + border-color: #006070; } + +.list-group-item-warning { + color: #855e00; + background-color: #ffeab8; } + +a.list-group-item-warning, +button.list-group-item-warning { + color: #855e00; } + a.list-group-item-warning:hover, a.list-group-item-warning:focus, + button.list-group-item-warning:hover, + button.list-group-item-warning:focus { + color: #855e00; + background-color: #ffe29f; } + a.list-group-item-warning.active, + button.list-group-item-warning.active { + background-color: #855e00; + border-color: #855e00; } -.charts__left { - padding: 25px; +.list-group-item-danger { + color: #660c1f; + background-color: #eebec8; } + +a.list-group-item-danger, +button.list-group-item-danger { + color: #660c1f; } + a.list-group-item-danger:hover, a.list-group-item-danger:focus, + button.list-group-item-danger:hover, + button.list-group-item-danger:focus { + color: #660c1f; + background-color: #e9aab7; } + a.list-group-item-danger.active, + button.list-group-item-danger.active { + background-color: #660c1f; + border-color: #660c1f; } + +.list-group-item-light { + color: #838383; + background-color: #fefefe; } + +a.list-group-item-light, +button.list-group-item-light { + color: #838383; } + a.list-group-item-light:hover, a.list-group-item-light:focus, + button.list-group-item-light:hover, + button.list-group-item-light:focus { + color: #838383; + background-color: #f1f1f1; } + a.list-group-item-light.active, + button.list-group-item-light.active { + background-color: #838383; + border-color: #838383; } + +.list-group-item-dark { + color: #111315; + background-color: #c1c2c3; } + +a.list-group-item-dark, +button.list-group-item-dark { + color: #111315; } + a.list-group-item-dark:hover, a.list-group-item-dark:focus, + button.list-group-item-dark:hover, + button.list-group-item-dark:focus { + color: #111315; + background-color: #b4b5b6; } + a.list-group-item-dark.active, + button.list-group-item-dark.active { + background-color: #111315; + border-color: #111315; } + +.close { + font-size: 1.5rem; + font-weight: 500; + color: #8c949d; + text-shadow: none; + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + .close:hover, .close:focus { + color: #8c949d; } + +.modal { + z-index: 1050; } + +.modal-dialog { + margin: 0.625rem; } + .modal.fade .modal-dialog { + transition: transform 0.3s ease-out; } + +.modal-dialog-centered { + min-height: calc(100% - (0.625rem * 2)); } + +.modal-content { + background-color: #fff; + border: none; + border-radius: 0.5rem; + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + +.modal-backdrop { + z-index: 1040; + background-color: #5A6169; } + .modal-backdrop.show { + opacity: 0.12; } + +.modal-header { + padding: 0.9375rem 2.1875rem; + border-bottom: 1px solid #dfe1e3; } + +.modal-title { + line-height: 1.5; } + +.modal-body { + padding: 1.875rem 2.1875rem; } + +.modal-footer { + padding: 0.9375rem 2.1875rem; + border-top: 1px solid #dfe1e3; } + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.875rem auto; } + .modal-dialog-centered { + min-height: calc(100% - (1.875rem * 2)); } + .modal-content { + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + .modal-sm { + max-width: 300px; } } + +@media (min-width: 992px) { + .modal-lg { + max-width: 800px; } } + +.tooltip { + z-index: 1070; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-style: normal; + font-weight: 300; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.6875rem; } + .tooltip.show { + opacity: 1; } + .tooltip .arrow { + width: 5px; + height: 5px; } + +.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { + padding: 5px 0; } + .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { + border-width: 5px 2.5px 0; + border-top-color: #fff; } + +.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { + padding: 0 5px; } + .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { + width: 5px; + height: 5px; } + .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { + border-width: 2.5px 5px 2.5px 0; + border-right-color: #fff; } + +.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { + padding: 5px 0; } + .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { + border-width: 0 2.5px 5px; + border-bottom-color: #fff; } + +.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { + padding: 0 5px; } + .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { + width: 5px; + height: 5px; } + .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { + border-width: 2.5px 0 2.5px 5px; + border-left-color: #fff; } + +.tooltip-inner { + max-width: 200px; + padding: 7px 13px; + color: #5A6169; + background-color: #fff; + box-shadow: 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); + border-radius: 0.375rem; } + +.popover { + z-index: 1060; + max-width: 276px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-style: normal; + font-weight: 300; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.6875rem; + background-color: #fff; + border: none; + padding: 0; + border-radius: 0.5rem; + box-shadow: 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); } + .popover .arrow { + width: 10px; + height: 5px; + margin: 0 0.5rem; } + .popover .arrow::before { + border-width: 11px; } + .popover .arrow::after { + border-width: 11px; } + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 5px; } + .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { + bottom: calc((5px + 1px) * -1); } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + border-width: 5px 5px 0; } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { + border-top-color: rgba(0, 0, 0, 0.05); } + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + bottom: 1px; + border-top-color: #fff; } + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 5px; } + .bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow { + left: calc((5px + 1px) * -1); + width: 5px; + height: 10px; + margin: 0.5rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + border-width: 5px 5px 5px 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { + border-right-color: rgba(0, 0, 0, 0.05); } + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + left: 1px; + border-right-color: #fff; } + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 5px; } + .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { + top: calc((5px + 1px) * -1); } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + border-width: 0 5px 5px 5px; } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { + border-bottom-color: rgba(0, 0, 0, 0.05); } + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + top: 1px; + border-bottom-color: #fff; } + .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + width: 10px; + margin-left: -5px; + border-bottom: 1px solid #f5f5f6; } + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 5px; } + .bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow { + right: calc((5px + 1px) * -1); + width: 5px; + height: 10px; + margin: 0.5rem 0; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + border-width: 5px 0 5px 5px; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { + border-left-color: rgba(0, 0, 0, 0.05); } + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + right: 1px; + border-left-color: #fff; } + +.popover-header { + padding: 14px 20px; + font-size: 1rem; + color: #3D5170; + line-height: 14px; + background-color: #f5f5f6; + border-bottom: 1px solid #e7e9ea; + border-top-left-radius: calc(0.5rem - 1px); + border-top-right-radius: calc(0.5rem - 1px); } + +.popover-body { + padding: 15px 20px; + color: #5A6169; } + +.carousel { + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + +.carousel-item { + transition: transform 0.6s ease; } + +.carousel-control-prev, +.carousel-control-next { + width: 15%; + color: #fff; + opacity: 0.5; } + .carousel-control-prev:hover, .carousel-control-prev:focus, + .carousel-control-next:hover, + .carousel-control-next:focus { + color: #fff; } + +.carousel-control-prev-icon, +.carousel-control-next-icon { + width: 20px; + height: 20px; } + +.carousel-control-prev-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); } + +.carousel-control-next-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); } + +.carousel-indicators { + margin-right: 15%; + margin-left: 15%; } + .carousel-indicators li { + width: 30px; + height: 3px; + margin-right: 3px; + margin-left: 3px; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 3px; } + .carousel-indicators .active { + background-color: #fff; } + +.carousel-caption { + right: 15%; + left: 15%; + color: #fff; } + +.noUi-target, +.noUi-target * { + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -ms-touch-action: none; + touch-action: none; + -ms-user-select: none; + -moz-user-select: none; + user-select: none; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.noUi-target { + position: relative; + direction: ltr; + background: #eceeef; border-radius: 5px; - background: #ffffff; - box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff; -} + box-shadow: inset 0 1px 2px rgba(90, 97, 105, 0.1); + margin: 35px 0; } + .noUi-target:focus { + outline: 0; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.65), 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); } + +.noUi-base, +.noUi-connects { + width: 100%; + height: 100%; + position: relative; + z-index: 1; } + +.noUi-connects { + overflow: hidden; + z-index: 0; } + +.noUi-connect, +.noUi-origin { + position: absolute; + will-change: transform; + z-index: 1; + top: 0; + left: 0; + height: 100%; + width: 100%; + -ms-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; } + .noUi-connect:focus, + .noUi-origin:focus { + outline: 0; } + +.noUi-connect { + background: #007bff; + border-radius: 5px; } + +html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { + left: auto; + right: 0; } + +html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { + right: -17px; + left: auto; } + +.noUi-rtl .noUi-value-horizontal { + -webkit-transform: translate(50%, 50%); + transform: translate(50%, 50%); } + +.noUi-rtl .noUi-value-vertical { + -webkit-transform: translate(0, 50%); + transform: translate(0, 50%); } + +.noUi-vertical { + width: 5px; } + .noUi-vertical .noUi-origin { + width: 0; } + .noUi-vertical .noUi-handle { + left: -10px; + top: -11.5px; } + .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { + width: 14px; + height: 1px; + left: 6px; + top: 14px; } + .noUi-vertical .noUi-handle:after { + top: 17px; } + .noUi-vertical .noUi-tooltip { + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + top: 50%; + right: 30px; } + .noUi-vertical .noUi-draggable { + cursor: ns-resize; } + +.noUi-horizontal { + height: 5px; } + .noUi-horizontal .noUi-origin { + height: 0; } + .noUi-horizontal .noUi-handle { + left: -11.5px; + top: -10px; } + .noUi-horizontal .noUi-tooltip { + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + left: 50%; + bottom: 30px; } + +.noUi-handle { + position: absolute; + border: 1px solid #e7e9ea; + border-radius: 50%; + width: 23px; + height: 23px; + box-shadow: 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); + background: #fff; + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); } + .noUi-handle:hover { + cursor: grab; + cursor: -webkit-grab; + cursor: -moz-grab; } + .noUi-handle:active { + cursor: grabbing; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; } + .noUi-handle:focus { + outline: 0; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.65), 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); } + .noUi-handle:after { + left: 17px; } + +.noUi-state-tap .noUi-connect, +.noUi-state-tap .noUi-origin { + -webkit-transition: transform 0.3s; + transition: transform 0.3s; } + +.noUi-state-drag * { + cursor: inherit !important; } + +.noUi-connects { + border-radius: 5px; } + +.noUi-draggable { + cursor: ew-resize; } + +.noUi-active { + transform: scale(1.1); } + +[disabled] .noUi-connect { + background: #B8B8B8; } + +[disabled].noUi-target, [disabled].noUi-handle, +[disabled] .noUi-handle { + cursor: not-allowed; } + +[disabled] .noUi-handle { + background: #f2f3f4; } + [disabled] .noUi-handle:focus { + box-shadow: 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); } + +.noUi-pips, +.noUi-pips * { + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.noUi-pips { + position: absolute; + color: #a8aeb4; + font-size: 12px; } + +.noUi-value { + position: absolute; + white-space: nowrap; + text-align: center; } + +.noUi-value-sub { + color: #a8aeb4; + font-size: 10px; } + +.noUi-marker { + position: absolute; + background: #a8aeb4; } + +.noUi-marker-sub { + background: #a8aeb4; } + +.noUi-marker-large { + background: #a8aeb4; } + +.noUi-pips-horizontal { + padding: 10px 0; + height: auto; + top: 100%; + left: 0; + width: 100%; } + +.noUi-value-horizontal { + transform: translate3d(-50%, 50%, 0); } + +.noUi-marker-horizontal.noUi-marker { + margin-left: -1px; + width: 1px; + height: 4px; } + +.noUi-marker-horizontal.noUi-marker-sub { + height: 5px; } + +.noUi-marker-horizontal.noUi-marker-large { + height: 7px; } + +.noUi-pips-vertical { + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; } + +.noUi-value-vertical { + transform: translate3d(0, -50%, 0); + padding-left: 15px; } + +.noUi-marker-vertical.noUi-marker { + width: 4px; + height: 1px; + margin-top: -1px; } + +.noUi-marker-vertical.noUi-marker-sub { + width: 10px; } + +.noUi-marker-vertical.noUi-marker-large { + width: 7px; } + +.noUi-tooltip { + display: block; + position: absolute; + text-align: center; + white-space: nowrap; + border-radius: 0.375rem; + border-radius: 0.375rem; + background: #fff; + color: #5A6169; + box-shadow: 0 3px 15px rgba(90, 97, 105, 0.1), 0 2px 3px rgba(90, 97, 105, 0.2); + font-size: 0.75rem; + padding: 5px 10px; } + +.slider-primary .noUi-connect { + background: #007bff; } + +.slider-secondary .noUi-connect { + background: #5A6169; } + +.slider-success .noUi-connect { + background: #17c671; } + +.slider-info .noUi-connect { + background: #00b8d8; } + +.slider-warning .noUi-connect { + background: #ffb400; } + +.slider-danger .noUi-connect { + background: #c4183c; } + +.slider-light .noUi-connect { + background: #FBFBFB; } + +.slider-dark .noUi-connect { + background: #212529; } -.charts__left__title { +.datepicker { + border-radius: 0.625rem; + direction: ltr; } + .datepicker-inline { + width: 220px; } + .datepicker-rtl { + direction: rtl; } + .datepicker-rtl.dropdown-menu { + left: auto; } + .datepicker-rtl table tr td span { + float: right; } + .datepicker-dropdown { + top: 0; + left: 0; + padding: 20px 22px; } + .datepicker-dropdown:before, .datepicker-dropdown:after { + content: ''; + display: inline-block; + border-top: 0; + position: absolute; } + .datepicker-dropdown:before { + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #c3c7cc; + border-bottom-color: rgba(0, 0, 0, 0.2); } + .datepicker-dropdown:after { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; } + .datepicker-dropdown.datepicker-orient-left:before { + left: 6px; } + .datepicker-dropdown.datepicker-orient-left:after { + left: 7px; } + .datepicker-dropdown.datepicker-orient-right:before { + right: 6px; } + .datepicker-dropdown.datepicker-orient-right:after { + right: 7px; } + .datepicker-dropdown.datepicker-orient-bottom:before { + top: -7px; } + .datepicker-dropdown.datepicker-orient-bottom:after { + top: -6px; } + .datepicker-dropdown.datepicker-orient-top:before { + bottom: -7px; + border-bottom: 0; + border-top: 7px solid #c3c7cc; } + .datepicker-dropdown.datepicker-orient-top:after { + bottom: -6px; + border-bottom: 0; + border-top: 6px solid #fff; } + .datepicker table { + margin: 0; + -webkit-touch-callout: none; + user-select: none; } + .datepicker table tr td { + border-radius: 50%; } + .datepicker table tr th { + border-radius: 0.375rem; + font-weight: 500; } + .datepicker table tr td, .datepicker table tr th { + transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); + width: 36px; + height: 36px; + border: none; + text-align: center; } + .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { + background-color: transparent; } + .datepicker table tr td.old, .datepicker table tr td.new { + color: #c3c7cc; } + .datepicker table tr td.day:hover, .datepicker table tr td.focused { + background: #eceeef; + cursor: pointer; } + .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { + background: none; + color: #e7e9ea; + cursor: default; } + .datepicker table tr td.highlighted { + border-radius: 0; } + .datepicker table tr td.highlighted.focused { + background: #007bff; } + .datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted.disabled:active { + background: #007bff; + color: #5A6169; } + .datepicker table tr td.today { + background: #e6f2ff; } + .datepicker table tr td.today.focused { + background: #f5f5f6; } + .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active { + background: #f5f5f6; + color: #868e96; } + .datepicker table tr td.range { + background: #007bff; + color: #fff; + border-radius: 0; } + .datepicker table tr td.range.focused { + background: #0067d6; } + .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:active, .datepicker table tr td.range.day.disabled:hover { + background: #0062cc; + color: #3395ff; } + .datepicker table tr td.range.highlighted.focused { + background: #cbd3da; } + .datepicker table tr td.range.highlighted.disabled, .datepicker table tr td.range.highlighted.disabled:active { + background: #e9ecef; + color: #e7e9ea; } + .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:active { + background: #007bff; + color: #fff; } + .datepicker table tr td.day.range-start { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .datepicker table tr td.day.range-end { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .datepicker table tr td.day.range-start.range-end { + border-radius: 50%; } + .datepicker table tr td.selected, .datepicker table tr td.selected.highlighted, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.highlighted:hover, .datepicker table tr td.day.range:hover { + background: #007bff; + color: #fff; } + .datepicker table tr td.active, .datepicker table tr td.active.highlighted, .datepicker table tr td.active:hover, .datepicker table tr td.active.highlighted:hover { + background: #007bff; + color: #fff; } + .datepicker table tr td span { + display: block; + width: 23%; + height: 54px; + line-height: 54px; + float: left; + margin: 1%; + cursor: pointer; + border-radius: 4px; } + .datepicker table tr td span:hover, .datepicker table tr td span.focused { + background: #e9ecef; } + .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { + background: none; + color: #e7e9ea; + cursor: default; } + .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } + .datepicker table tr td span.old, .datepicker table tr td span.new { + color: #868e96; } + .datepicker .datepicker-switch { + width: 145px; } + .datepicker .datepicker-switch, + .datepicker .prev, + .datepicker .next, + .datepicker tfoot tr th { + cursor: pointer; } + .datepicker .datepicker-switch:hover, + .datepicker .prev:hover, + .datepicker .next:hover, + .datepicker tfoot tr th:hover { + background: #e9ecef; } + .datepicker .prev.disabled, .datepicker .next.disabled { + visibility: hidden; } + .datepicker .cw { + font-size: 10px; + width: 12px; + padding: 0 2px 0 5px; + vertical-align: middle; } + +.input-daterange input { + text-align: center; } + +.bg-primary { + background-color: #007bff !important; } + .bg-primary.card .card-title, + .bg-primary.card .card-body, + .bg-primary.card .card-header, + .bg-primary.card .card-footer { + background-color: #0062cc !important; } + .bg-primary.card .card-header, + .bg-primary.card .card-footer { + background: #0074f0; } + +a.bg-primary:hover, a.bg-primary:focus { + background-color: #0062cc !important; } + +.bg-secondary { + background-color: #5A6169 !important; } + .bg-secondary.card .card-title, + .bg-secondary.card .card-body, + .bg-secondary.card .card-header, + .bg-secondary.card .card-footer { + background-color: #42484e !important; } + .bg-secondary.card .card-header, + .bg-secondary.card .card-footer { + background: #535961; } + +a.bg-secondary:hover, a.bg-secondary:focus { + background-color: #42484e !important; } + +.bg-success { + background-color: #17c671 !important; } + .bg-success.card .card-title, + .bg-success.card .card-body, + .bg-success.card .card-header, + .bg-success.card .card-footer { + background-color: #129857 !important; } + .bg-success.card .card-header, + .bg-success.card .card-footer { + background: #15b869; } + +a.bg-success:hover, a.bg-success:focus { + background-color: #129857 !important; } + +.bg-info { + background-color: #00b8d8 !important; } + .bg-info.card .card-title, + .bg-info.card .card-body, + .bg-info.card .card-header, + .bg-info.card .card-footer { + background-color: #008da5 !important; } + .bg-info.card .card-header, + .bg-info.card .card-footer { + background: #00abc9; } + +a.bg-info:hover, a.bg-info:focus { + background-color: #008da5 !important; } + +.bg-warning { + background-color: #ffb400 !important; } + .bg-warning.card .card-title, + .bg-warning.card .card-body, + .bg-warning.card .card-header, + .bg-warning.card .card-footer { + background-color: #cc9000 !important; } + .bg-warning.card .card-header, + .bg-warning.card .card-footer { + background: #f0a900; } + +a.bg-warning:hover, a.bg-warning:focus { + background-color: #cc9000 !important; } + +.bg-danger { + background-color: #c4183c !important; } + .bg-danger.card .card-title, + .bg-danger.card .card-body, + .bg-danger.card .card-header, + .bg-danger.card .card-footer { + background-color: #97122e !important; } + .bg-danger.card .card-header, + .bg-danger.card .card-footer { + background: #b61638; } + +a.bg-danger:hover, a.bg-danger:focus { + background-color: #97122e !important; } + +.bg-light { + background-color: #FBFBFB !important; } + .bg-light.card .card-title, + .bg-light.card .card-body, + .bg-light.card .card-header, + .bg-light.card .card-footer { + background-color: #e2e2e2 !important; } + .bg-light.card .card-header, + .bg-light.card .card-footer { + background: #f3f3f3; } + +a.bg-light:hover, a.bg-light:focus { + background-color: #e2e2e2 !important; } + +.bg-dark { + background-color: #212529 !important; } + .bg-dark.card .card-title, + .bg-dark.card .card-body, + .bg-dark.card .card-header, + .bg-dark.card .card-footer { + background-color: #0a0c0d !important; } + .bg-dark.card .card-header, + .bg-dark.card .card-footer { + background: #1a1d21; } + +a.bg-dark:hover, a.bg-dark:focus { + background-color: #0a0c0d !important; } + +.border { + border: 1px solid #e1e5eb !important; } + +.border-top { + border-top: 1px solid #e1e5eb !important; } + +.border-right { + border-right: 1px solid #e1e5eb !important; } + +.border-bottom { + border-bottom: 1px solid #e1e5eb !important; } + +.border-left { + border-left: 1px solid #e1e5eb !important; } + +.border-primary { + border-color: #007bff !important; } + +.border-secondary { + border-color: #5A6169 !important; } + +.border-success { + border-color: #17c671 !important; } + +.border-info { + border-color: #00b8d8 !important; } + +.border-warning { + border-color: #ffb400 !important; } + +.border-danger { + border-color: #c4183c !important; } + +.border-light { + border-color: #FBFBFB !important; } + +.border-dark { + border-color: #212529 !important; } + +.rounded { + border-radius: 0.375rem !important; } + +.rounded-top { + border-top-left-radius: 0.375rem !important; + border-top-right-radius: 0.375rem !important; } + +.rounded-right { + border-top-right-radius: 0.375rem !important; + border-bottom-right-radius: 0.375rem !important; } + +.rounded-bottom { + border-bottom-right-radius: 0.375rem !important; + border-bottom-left-radius: 0.375rem !important; } + +.rounded-left { + border-top-left-radius: 0.375rem !important; + border-bottom-left-radius: 0.375rem !important; } + +.text-monospace { + font-family: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + +.font-weight-normal { + font-weight: 300; } + +.font-weight-bold { + font-weight: 500; } + +.text-primary { + color: #007bff !important; } + +a.text-primary:hover, a.text-primary:focus { + color: #0062cc !important; } + +.text-secondary { + color: #5A6169 !important; } + +a.text-secondary:hover, a.text-secondary:focus { + color: #42484e !important; } + +.text-success { + color: #17c671 !important; } + +a.text-success:hover, a.text-success:focus { + color: #129857 !important; } + +.text-info { + color: #00b8d8 !important; } + +a.text-info:hover, a.text-info:focus { + color: #008da5 !important; } + +.text-warning { + color: #ffb400 !important; } + +a.text-warning:hover, a.text-warning:focus { + color: #cc9000 !important; } + +.text-danger { + color: #c4183c !important; } + +a.text-danger:hover, a.text-danger:focus { + color: #97122e !important; } + +.text-light { + color: #FBFBFB !important; } + +a.text-light:hover, a.text-light:focus { + color: #e2e2e2 !important; } + +.text-dark { + color: #212529 !important; } + +a.text-dark:hover, a.text-dark:focus { + color: #0a0c0d !important; } + +.text-body { + color: #5A6169 !important; } + +a.text-white:hover, a.text-white:focus { + color: #e6e6e6 !important; } + +.text-black { + color: #000; } + +a.text-black:hover, a.text-black:focus { + color: black !important; } + +.text-muted { + color: #868e96 !important; } + +.with-shadows { + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); } + +/* Shards Dashboards Lite Styles */ +html { + font-size: 16px; + font-weight: 500; } + @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { + html { + font-size: 16px; + font-weight: 400; } } + +body { + background: #F5F6F8; + font-size: 15px; + font-weight: 500; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body { + font-size: 13px; + font-weight: 400; } } + +a { + color: #007bff; } + a:hover { + color: #0056b3; } + +label { + font-weight: 400; } + +.datepicker { + font-size: .75rem; + padding: 0.625rem; } + .datepicker table tr td, + .datepicker table tr th { + width: 1.875rem; + height: 1.875rem; } + +.btn-white:not([disabled]):not(.disabled):active, .btn-white:not([disabled]):not(.disabled).active, +.btn-black:not([disabled]):not(.disabled):active, +.btn-black:not([disabled]):not(.disabled).active { + box-shadow: none !important; + background-color: #007bff; + border-color: #007bff; + color: #fff; } + .btn-white:not([disabled]):not(.disabled):active + .btn, .btn-white:not([disabled]):not(.disabled).active + .btn, + .btn-black:not([disabled]):not(.disabled):active + .btn, + .btn-black:not([disabled]):not(.disabled).active + .btn { + border-left: 1px solid #007bff; } + +.btn-white:hover, +.btn-black:hover { + background: #fff; + border-color: #fff; + box-shadow: 0px 0.125rem 0.625rem rgba(129, 142, 163, 0.2), 0 0.0625rem 0.125rem rgba(129, 142, 163, 0.3); } + +.btn.btn-white { + border: 1px solid #e1e5eb; + color: #3D5170; } + .btn.btn-white:not([disabled]):not(.disabled).active-primary.active, .btn.btn-white:not([disabled]):not(.disabled).active-primary:active { + background-color: #007bff; + border-color: #007bff; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-primary.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-primary:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-secondary.active, .btn.btn-white:not([disabled]):not(.disabled).active-secondary:active { + background-color: #5A6169; + border-color: #5A6169; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-secondary.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-secondary:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-success.active, .btn.btn-white:not([disabled]):not(.disabled).active-success:active { + background-color: #17c671; + border-color: #17c671; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-success.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-success:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-info.active, .btn.btn-white:not([disabled]):not(.disabled).active-info:active { + background-color: #00b8d8; + border-color: #00b8d8; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-info.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-info:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-warning.active, .btn.btn-white:not([disabled]):not(.disabled).active-warning:active { + background-color: #ffb400; + border-color: #ffb400; + color: #212529; } + .btn.btn-white:not([disabled]):not(.disabled).active-warning.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-warning:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-danger.active, .btn.btn-white:not([disabled]):not(.disabled).active-danger:active { + background-color: #c4183c; + border-color: #c4183c; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-danger.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-danger:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-light.active, .btn.btn-white:not([disabled]):not(.disabled).active-light:active { + background-color: #FBFBFB; + border-color: #FBFBFB; + color: #212529; } + .btn.btn-white:not([disabled]):not(.disabled).active-light.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-light:active + .btn { + border-left: 1px solid red; } + .btn.btn-white:not([disabled]):not(.disabled).active-dark.active, .btn.btn-white:not([disabled]):not(.disabled).active-dark:active { + background-color: #212529; + border-color: #212529; + color: #fff; } + .btn.btn-white:not([disabled]):not(.disabled).active-dark.active + .btn, .btn.btn-white:not([disabled]):not(.disabled).active-dark:active + .btn { + border-left: 1px solid red; } + +.btn-accent { + color: #fff; + border-color: #007bff; + background-color: #007bff; + box-shadow: none; } + .btn-accent:hover { + color: #fff; + background-color: #006fe6; + border-color: #006fe6; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 123, 255, 0.25); } + .btn-accent:focus, .btn-accent.focus { + box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15), 0 3px 15px rgba(0, 123, 255, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1); } + .btn-accent.disabled, .btn-accent:disabled { + background-color: #007bff; + border-color: #007bff; + box-shadow: none; + cursor: not-allowed; } + .btn-accent:not(:disabled):not(.disabled):active, .btn-accent:not(:disabled):not(.disabled).active, + .show > .btn-accent.dropdown-toggle { + color: #fff; + background-color: #006fe6; + border-color: #0062cc; + background-image: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; } + +.btn-outline-accent { + background-color: transparent; + background-image: none; + border-color: #007bff; + color: #007bff; } + .btn-outline-accent:hover { + color: #fff; + background-color: #007bff; + border-color: #007bff; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 123, 255, 0.25); } + .btn-outline-accent:focus, .btn-outline-accent.focus { + box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15), 0 3px 15px rgba(0, 123, 255, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1) !important; } + .btn-outline-accent.disabled, .btn-outline-accent:disabled { + color: #007bff; + background-color: transparent; + box-shadow: none; } + .btn-outline-accent:not(:disabled):not(.disabled):active, .btn-outline-accent:not(:disabled):not(.disabled).active, + .show > .btn-outline-accent.dropdown-toggle { + color: #fff; + background-color: #007bff; + border-color: #007bff; } + .btn-outline-accent:not(:disabled):not(.disabled):active:focus, .btn-outline-accent:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-accent.dropdown-toggle:focus { + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; } + +.btn-group-sm i { + transform: scale(1.3); } + +.navbar-light .navbar-brand { + font-weight: 500; + color: #3D5170; } + +.nav-link { + font-size: 0.8125rem; + font-weight: 400; } + .nav-link-icon { + color: #818EA3; } + .nav-link-icon:hover, .nav-link-icon:focus { + color: #66748b; } + .nav-link-icon__wrapper { + position: relative; } + .nav-link-icon i { + font-size: 1.25rem; } + .nav-link-icon i.material-icons { + font-size: 1.5625rem; } + +.badge-accent { + color: #fff; + background-color: #007bff; } + .badge-accent[href]:hover, .badge-accent[href]:focus { + color: #fff; + text-decoration: none; + background-color: #0062cc; } + +.badge-outline-accent { + background: none; + border: 1px solid #007bff; + color: #007bff; } + +.alert-accent { + color: #f5faff; + background-color: #007bff; } + .alert-accent .alert-link { + color: #f5faff; } + +.alert-dismissible .close { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } + +.input-group { + min-width: 7.5rem; } + +.input-group-text { + font-size: 0.8125rem; } + +.input-group.input-group-seamless > .form-control:not(:first-child), +.input-group.input-group-seamless > .custom-select:not(:first-child) { + padding-left: 1.875rem; } + +.input-group-text i { + transform: scale(1.1); } + .input-group-text i.fa { + font-size: 0.75rem; } + .input-group-text i.material-icons { + top: 0; + font-size: 0.8125rem; } + +.custom-select-sm { + font-size: 0.6875rem; + border-radius: 0.25rem; } + +.custom-select-lg { + border-radius: 0.25rem; } + +.custom-control { + line-height: 1.5rem; } + +.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::after { + border-color: #becad6; } + +.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::after { + background: #becad6; } + +.custom-toggle .custom-control-input:checked:disabled ~ .custom-control-label::after { + background: #becad6; } + +.slider-accent .noUi-connect { + background: #007bff; } + +.noUi-pips { + font-size: 0.625rem; } + +.noUi-tooltip { + font-size: 0.75rem; + padding: 5px 10px; } + +.noUi-horizontal .noUi-tooltip { + bottom: 1.625rem; } + +.noUi-horizontal .noUi-handle { + left: -0.625rem; + top: -0.5rem; } + +.noUi-handle { + width: 23px; + height: 23px; } + +.thumbnail { + border: 1px solid #D4D4D4; } + +i.material-icons { + top: 2px; } + +.dropdown .fa, +.dropdown .material-icons { + color: #c3c7cc; + margin-right: 0.25rem; } + +.dropdown .dropdown-item:hover { + background-color: #fafafb; } + +.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { + font-weight: 500; } + +.card .view-report { + margin-top: auto; + margin-bottom: auto; + font-size: 0.75rem; } + .card .view-report a { + color: #3D5170; } + .card .view-report a:hover { + color: #007bff; } + +.overflow-hidden { + overflow: hidden; } + +.overflow-visible { + overflow: visible; } + +.overflow-scroll { + overflow: scroll; } + +.overflow-auto { + overflow: auto; } + +.no-shadow { + box-shadow: none !important; } + +.text-fiord-blue { + color: #3D5170 !important; } + +a.text-fiord-blue:hover, a.text-fiord-blue:focus { + color: #2b394f !important; } + +.text-shuttle-gray { + color: #5A6169 !important; } + +a.text-shuttle-gray:hover, a.text-shuttle-gray:focus { + color: #42484e !important; } + +.text-reagent-gray { + color: #818EA3 !important; } + +a.text-reagent-gray:hover, a.text-reagent-gray:focus { + color: #66748b !important; } + +.text-mischka { + color: #CACEDB !important; } + +a.text-mischka:hover, a.text-mischka:focus { + color: #acb2c6 !important; } + +.text-athens-gray { + color: #E9ECEF !important; } + +a.text-athens-gray:hover, a.text-athens-gray:focus { + color: #cbd3da !important; } + +.text-accent { + color: #007bff !important; } + +a.text-accent:hover, a.text-accent:focus { + color: #0062cc !important; } + +.text-light { + color: #818EA3 !important; } + +.text-semibold { + font-weight: 400; } + +.border { + border: 1px solid #e1e5eb !important; } + +.border-top { + border-top: 1px solid #e1e5eb !important; } + +.border-right { + border-right: 1px solid #e1e5eb !important; } + +.border-bottom { + border-bottom: 1px solid #e1e5eb !important; } + +.border-left { + border-left: 1px solid #e1e5eb !important; } + +.rounded { + border-radius: 5px !important; } + +.rounded-top { + border-top-left-radius: 5px !important; + border-top-right-radius: 5px !important; } + +.rounded-right { + border-top-right-radius: 5px !important; + border-bottom-right-radius: 5px !important; } + +.rounded-bottom { + border-bottom-right-radius: 5px !important; + border-bottom-left-radius: 5px !important; } + +.rounded-left { + border-top-left-radius: 5px !important; + border-bottom-left-radius: 5px !important; } + +.border-accent { + border-color: #007bff !important; } + +.main-navbar .navbar { + height: 3.75rem; } + .main-navbar .navbar > * { + display: flex; } + .main-navbar .navbar .nav-link { + min-width: 3.75rem; } + .main-navbar .navbar .notifications { + position: relative; } + @media (max-width: 767.98px) { + .main-navbar .navbar .notifications { + position: static; } + .main-navbar .navbar .notifications .dropdown-menu { + min-width: 100% !important; + border-left: none; } } + .main-navbar .navbar .notifications .badge { + position: absolute; + padding: 0.25rem 0.375rem; + font-size: 0.5rem; + left: 50%; + top: 50%; } + .main-navbar .navbar .notifications .dropdown-menu { + padding: 0; + min-width: 25rem; + border-right: 0; + left: auto; } + @media (max-width: 767.98px) { + .main-navbar .navbar .notifications .dropdown-menu { + left: 0; + right: 0; } } + .main-navbar .navbar .notifications .dropdown-menu .dropdown-item { + white-space: normal; + display: flex; + flex-flow: row; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + border-bottom: 1px solid #e1e5eb; } + .main-navbar .navbar .notifications .dropdown-menu .dropdown-item:last-child { + border-bottom: 0; } + .main-navbar .navbar .notifications .dropdown-menu .notification__icon-wrapper { + display: flex; + padding: 0 5px; } + .main-navbar .navbar .notifications .dropdown-menu .notification__icon { + background-color: #F5F6F8; + box-shadow: 0 0 0 1px white, inset 0 0 3px rgba(0, 0, 0, 0.2); + width: 2.1875rem; + height: 2.1875rem; + line-height: 0; + display: block; + text-align: center; + margin: auto; + border-radius: 50%; } + .main-navbar .navbar .notifications .dropdown-menu .notification__icon i { + color: #818EA3; + line-height: 2.0625rem; + font-size: 1.0625rem; + margin: 0; } + .main-navbar .navbar .notifications .dropdown-menu .notification__content { + padding: 0 0.625rem; } + .main-navbar .navbar .notifications .dropdown-menu .notification__content p { + margin: 0; + line-height: 1.5; + font-size: 0.75rem; } + .main-navbar .navbar .notifications .dropdown-menu .notification__category { + font-size: 0.5625rem; + color: #818EA3; + letter-spacing: 0.0938rem; + display: inline-block; + text-transform: uppercase; + margin-bottom: 5px; + font-weight: 500; } + .main-navbar .navbar .notifications .dropdown-menu .notification__all { + display: block; + font-weight: 500; + font-size: 11px; + border-bottom-left-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; } + .main-navbar .navbar .user-avatar { + max-width: 2.5rem; } + .main-navbar .navbar .navbar-nav .dropdown-menu { + position: absolute; + right: 0; + width: 100%; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; } + .main-navbar .navbar .nav-link-icon i { + line-height: 2.5rem; } + +.main-content > .main-navbar, +.main-content .header-navbar { + box-shadow: 0 0.125rem 0.625rem rgba(90, 97, 105, 0.12); } + +.main-sidebar { + top: 0; + position: fixed; + height: calc(100vh); + background: #fff; + z-index: 1070; + will-change: transform; + transition: transform 200ms ease-in-out; + box-shadow: 0 0.125rem 9.375rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.5rem rgba(90, 97, 105, 0.12), 0 0.9375rem 1.375rem rgba(90, 97, 105, 0.1), 0 0.4375rem 2.1875rem rgba(165, 182, 201, 0.1); } + @media (max-width: 767.98px) { + .main-sidebar { + transform: translateX(-100%); + box-shadow: none; } } + .main-sidebar.open { + transform: translateX(0); + box-shadow: 0 0.125rem 9.375rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.5rem rgba(90, 97, 105, 0.12), 0 0.9375rem 1.375rem rgba(90, 97, 105, 0.1), 0 0.4375rem 2.1875rem rgba(165, 182, 201, 0.1); } + .main-sidebar .toggle-sidebar { + position: absolute; + right: 0; + height: 100%; + padding: 1.25rem; + font-size: 1.25rem; + border-left: 1px solid #e1e5eb; } + .main-sidebar .toggle-sidebar:hover { + cursor: pointer; } + .main-sidebar .navbar-brand { + overflow: hidden; + height: 3.75rem; + font-size: 1rem; } + @media (max-width: 991.98px) { + .main-sidebar .navbar-brand { + font-size: 90%; } } + .main-sidebar .nav-wrapper { + overflow-y: auto; + overflow-x: hidden; + height: calc(100vh - 3.75rem - 1px); } + .main-sidebar .nav .nav-item, + .main-sidebar .nav .nav-link { + white-space: nowrap; + min-width: 100%; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + will-change: background-color, box-shadow, color; + transition: box-shadow 200ms ease, color 200ms ease, background-color 200ms ease; + font-size: 0.85rem; } + .main-sidebar .nav .nav-item .nav-link { + border-bottom: 1px solid #e1e5eb; + font-weight: 400; + color: #3D5170; + padding: 0.9375rem 1.5625rem; } + .main-sidebar .nav .nav-item .nav-link i { + min-width: 1.25rem; + font-size: 90%; + text-align: center; + vertical-align: middle; + will-change: color; + color: #CACEDB; + transition: color 200ms ease; + margin-right: 0.375rem; } + .main-sidebar .nav .nav-item .nav-link i.material-icons { + font-size: 1.125rem; + top: -1px; } + .main-sidebar .nav .nav-item.active, .main-sidebar .nav .nav-item .nav-link.active, .main-sidebar .nav .nav-item:hover, .main-sidebar .nav .nav-item .nav-link:hover { + box-shadow: inset 0.1875rem 0 0 #007bff; + background-color: #FBFBFB; + color: #007bff; } + .main-sidebar .nav .nav-item.active i, .main-sidebar .nav .nav-item .nav-link.active i, .main-sidebar .nav .nav-item:hover i, .main-sidebar .nav .nav-item .nav-link:hover i { + color: #007bff; } + .main-sidebar .nav--no-borders .nav-item .nav-link { + border-bottom: 0; } + .main-sidebar .nav--no-borders .dropdown-menu { + box-shadow: inset 0 0 0.4375rem rgba(61, 81, 112, 0.2); } + .main-sidebar .nav--no-borders .dropdown-menu .dropdown-item:first-child { + border-top: 1px solid #e1e5eb; } + .main-sidebar .dropdown-menu { + position: static !important; + transform: translate(0) !important; + box-shadow: none; + border-radius: 0; + width: 100%; + border: none; + padding: 0; + box-shadow: inset 0 -0.1875rem 0.1875rem rgba(61, 81, 112, 0.08); } + .main-sidebar .dropdown-menu .dropdown-item { + padding: 0.75rem 1.75rem; + border-bottom: 1px solid #f0f2f5; + color: #3D5170; + font-size: 0.8125rem; + font-weight: 400; } + @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { + .main-sidebar .dropdown-menu .dropdown-item { + font-weight: 300; } } + .main-sidebar .dropdown-menu .dropdown-item:hover, .main-sidebar .dropdown-menu .dropdown-item.active { + color: #007bff; } + .main-sidebar .dropdown-menu .dropdown-item:hover { + background: none; } + .main-sidebar .dropdown-menu .dropdown-item.active { + background-color: #FBFBFB; } + .main-sidebar .dropdown-menu .dropdown-item:last-of-type { + border-bottom: 1px solid #e1e5eb; } + .main-sidebar .dropdown-menu .dropdown-divider { + margin: 0; } + .main-sidebar .dropdown-toggle { + position: relative; } + .main-sidebar .dropdown-toggle::after { + background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcuNDEgNy44NEwxMiAxMi40Mmw0LjU5LTQuNThMMTggOS4yNWwtNiA2LTYtNnoiLz4gICAgPHBhdGggZD0iTTAtLjc1aDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+); + background-position: center center; + width: 0.875rem; + height: 0.5625rem; + transition: transform 250ms ease-in-out; + border: none; + position: absolute; + top: 50%; + right: 0.625rem; + transform: translateY(-50%); + opacity: .1; + will-change: transform; } + .main-sidebar .dropdown.show .dropdown-toggle::after { + transform: translateY(-50%) rotateZ(180deg); } + @media (max-width: 767.98px) { + .main-sidebar__search { + box-sizing: border-box; + border-right: 0 !important; + padding: 0.625rem 0; + border-bottom: 1px solid #e1e5eb; } + .main-sidebar__search .input-group { + margin: 0 !important; } } + +.main-navbar__search .input-group-prepend .input-group-text, +.main-sidebar__search .input-group-prepend .input-group-text { + font-size: 0.6875rem; + padding: 0.75rem 1.0625rem; } + +.main-navbar__search input.form-control, +.main-sidebar__search input.form-control { + border: none; + font-size: 0.8125rem; + border-radius: 0; } + .main-navbar__search input.form-control:hover, .main-navbar__search input.form-control:focus, + .main-sidebar__search input.form-control:hover, + .main-sidebar__search input.form-control:focus { + box-shadow: none; } + +.main-content > .main-content-container.container-fluid { + min-height: calc(100vh - 7.5rem); } + +.main-footer { + height: 3.75rem; } + .main-footer .copyright { + color: #818EA3; } + @media (max-width: 767.98px) { + .main-footer { + display: block !important; + height: auto; } + .main-footer .nav { + width: 100%; + display: block; + border-bottom: 1px solid #e1e5eb; + padding-bottom: 0.75rem; } + .main-footer .copyright { + display: inline-block; + width: 100%; + padding: 1rem; + text-align: center; } } + +.page-header .page-title { + font-size: 1.625rem; + font-weight: 500; + line-height: 1; + margin: 0; + padding: 0; } + @media (max-width: 767.98px) { + .page-header .page-title { + font-size: 2rem; } } + +.page-header .page-subtitle { + letter-spacing: 0.125rem; + color: #818EA3; + font-size: 0.625rem; } + @media (max-width: 767.98px) { + .page-header .page-subtitle { + font-size: 0.8125rem; + font-weight: 400; } } + +.stats-small { + min-height: 8.7rem; + overflow: hidden !important; } + .stats-small canvas { + position: absolute; + bottom: 0; } + .stats-small__data { + flex: 1; + display: flex; + justify-content: center; + flex-flow: column; + max-width: 50%; + z-index: 1; } + .stats-small__label { + font-size: 0.625rem; + letter-spacing: 0.0625rem; + color: #818EA3; } + .stats-small__value { + font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; + font-size: 1.5rem; + font-weight: 500; } + .stats-small__percentage { + position: relative; + display: table; + margin-left: auto; + padding-left: 0.9375rem; } + .stats-small__percentage--increase, .stats-small__percentage--decrease { + font-size: 0.75rem; } + .stats-small__percentage--increase::before, .stats-small__percentage--decrease::before { + content: ""; + width: 0.75rem; + height: 0.375rem; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + background-position: center center; + background-repeat: no-repeat; } + .stats-small__percentage--increase { + color: #17c671; } + .stats-small__percentage--increase::before { + background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMTdjNjcxIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTcgMTRsNS01IDUgNXoiLz4gPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiA8L3N2Zz4=); } + .stats-small__percentage--decrease { + color: #c4183c; } + .stats-small__percentage--decrease::before { + background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjYzQxODNjIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==); } + .stats-small--1 .stats-small__data { + max-width: 100%; } + .stats-small--1 .stats-small__percentage { + margin: 0 auto; } + .stats-small--1 .stats-small__value { + font-size: 2.0625rem; } + .stats-small--1 .stats-small__label { + font-size: 0.75rem; } + .stats-small--1 .stats-small__percentage { + font-size: 0.75rem; } + .stats-small--1 canvas { + opacity: 0.5; } + +.card-group .stats-small { + position: relative; + overflow: hidden; } + +.quick-post-form { display: flex; - align-items: center; - justify-content: space-between; -} + flex-flow: column; + flex: 1; } + .quick-post-form .form-group:nth-child(2) { + display: flex; + flex: 1; } + .quick-post-form textarea { + resize: none; + min-height: 100px; } -.charts__left__title > div > h1 { - font-size: 24px; - color: #2e4a66; - margin-bottom: 5px; -} +.blog-comments__avatar img { + width: 3.125rem; + height: 3.125rem; + border-radius: 0.25rem; } -.charts__left__title > div > p { - font-size: 14px; - font-weight: 700; - color: #a5aaad; -} +.blog-comments__item { + padding: 0; + border-bottom: 1px solid #e1e5eb; } + .blog-comments__item:last-child { + border: 0; } -.charts__left__title > i { - color: #ffffff; - font-size: 20px; - background: #ffc100; - border-radius: 200px 0px 200px 200px; - -moz-border-radius: 200px 0px 200px 200px; - -webkit-border-radius: 200px 0px 200px 200px; - border: 0px solid #000000; - padding: 15px; -} +.blog-comments__actions { + font-size: 95%; } + .blog-comments__actions .btn-group button { + padding: 0.25rem 0.5625rem; } -.charts__right { - padding: 25px; - border-radius: 5px; - background: #ffffff; - box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff; -} +.add-new-post__editor { + min-height: 400px; } + +html .ql-container.ql-snow, +html .ql-toolbar.ql-snow { + border-color: #e1e5eb; } + +html .ql-container { + border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; } + +html .ql-editor strong, +html .ql-editor b { + font-weight: 600; } + +html .ql-toolbar { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + color: #3D5170 !important; } + html .ql-toolbar .ql-fill, + html .ql-toolbar .ql-stroke.ql-fill { + fill: #818EA3; } + html .ql-toolbar .ql-stroke { + stroke: #818EA3; } + html .ql-toolbar button:hover .ql-fill, + html .ql-toolbar button:hover .ql-stroke.ql-fill, + html .ql-toolbar button:active .ql-fill, + html .ql-toolbar button:active .ql-stroke.ql-fill, + html .ql-toolbar button:focus .ql-fill, + html .ql-toolbar button:focus .ql-stroke.ql-fill { + fill: #007bff !important; } + html .ql-toolbar button:hover .ql-stroke, + html .ql-toolbar button:active .ql-stroke, + html .ql-toolbar button:focus .ql-stroke { + stroke: #007bff !important; } + html .ql-toolbar .ql-picker .ql-picker-item:hover { + color: #007bff !important; } + html .ql-toolbar .ql-picker .ql-picker-options { + padding: 6px 20px; + border: 0 !important; + box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1); + border-radius: 0.375rem; } + +.card-post .card-body { + padding: 1.5625rem 1.5625rem; } + +.card-post .card-footer, +.card-post .card-header { + padding-left: 1.5625rem; + padding-right: 1.5625rem; } -.charts__right__title { +.card-post__image { + position: relative; + min-height: 10.3125rem; + border-top-left-radius: 0.625rem; + border-top-right-radius: 0.625rem; + background-size: cover; + background-position: center; + background-repeat: no-repeat; } + +.card-post__author-avatar { + width: 2.8125rem; + height: 2.8125rem; + box-shadow: 0 0 0 0.125rem #fff, 0 0.1875rem 0.4375rem rgba(90, 97, 105, 0.5); + display: block; + background-position: center; + background-size: cover; + border-radius: 50%; + text-indent: -9999px; } + .card-post__author-avatar--small { + width: 2.1875rem; + height: 2.1875rem; } + +.card-post__author-name { + font-weight: 500; } + +.card-post--aside { display: flex; - align-items: center; - justify-content: space-between; -} + flex-flow: row; } + .card-post--aside .card-post__image { + border-top-right-radius: 0; + border-top-left-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; + min-width: 180px; } -.charts__right__title > div > h1 { - font-size: 24px; - color: #2e4a66; - margin-bottom: 5px; -} +.card-post--1 .card-post__author, +.card-post--1 .card-post__category { + position: absolute; } -.charts__right__title > div > p { - font-size: 14px; - font-weight: 700; - color: #a5aaad; -} +.card-post--1 .card-post__author { + transform: translateY(50%); + margin-left: 1.5625rem; + position: absolute; + bottom: 0; } -.charts__right__title > i { - color: #ffffff; - font-size: 20px; - background: #39447a; - border-radius: 200px 0px 200px 200px; - -moz-border-radius: 200px 0px 200px 200px; - -webkit-border-radius: 200px 0px 200px 200px; - border: 0px solid #000000; - padding: 15px; -} +.card-post--1 .card-post__category { + top: 0.9375rem; + right: 0.9375rem; + position: absolute; + text-transform: uppercase; } -.charts__right__cards { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-top: 30px; -} +.card-post--1 .card-body { + padding-top: 2.1875rem; } -.card1 { - background: #d1ecf1; - color: #35a4ba; - text-align: center; - padding: 25px; - border-radius: 5px; - font-size: 14px; -} +.card-post--1.card-post--aside .card-body { + padding: 1.5625rem 1.5625rem; } -.card2 { - background: #d2f9ee; - color: #38e1b0; - text-align: center; - padding: 25px; - border-radius: 5px; - font-size: 14px; -} +.card-post--1.card-post--aside .card-post__author { + left: 0.9375rem; + bottom: 0.9375rem; + transform: none; + margin: 0; } -.card3 { - background: #d6d8d9; - color: #3a3e41; - text-align: center; - padding: 25px; - border-radius: 5px; - font-size: 14px; -} +.card-post--1.card-post--aside .card-post__category { + right: initial; + top: 0.9375rem; + left: 0.9375rem; } -.card4 { - background: #fddcdf; - color: #f65a6f; - text-align: center; - padding: 25px; - border-radius: 5px; - font-size: 14px; -} +.error { + height: calc(100vh - 3.75rem); + display: flex; } + .error__content { + padding: 0 0.9375rem; + display: flex; + flex-flow: column; + margin: auto; + align-items: center; + text-align: center; } + .error__content h2 { + color: #CACEDB; + font-weight: 700; + font-size: 3.75rem; + margin-bottom: 1.5625rem; } + .error__content h3 { + font-weight: 500; + font-size: 2.1875rem; + margin-bottom: 0.625rem; } + .error__content p { + color: #818EA3; } -@media only screen and (max-width: 855px) { - .main__cards { - grid-template-columns: 1fr; - gap: 10px; - margin-bottom: 0; - } - - .charts { - grid-template-columns: 1fr; - margin-top: 30px; - } -} diff --git a/client/src/components/posts/Posts.js b/client/src/components/posts/Posts.js new file mode 100644 index 0000000..853e5ff --- /dev/null +++ b/client/src/components/posts/Posts.js @@ -0,0 +1,41 @@ +import "./Posts.css"; +import hello from "../../assets/hello.svg"; +import Chart from "../charts/Chart"; + +const Posts = ({posts, cardClicked}) => { + return ( +
+
+
+ { + posts && posts.map( + post => + ( +
+
+ +
+
+ Conduct at an replied removal an amongst +
+

However venture pursuit he am mr cordial. Forming musical am hearing studied be luckily. But in for determine what would see...

+ 28 February 2019 +
+
+
+ ) + ) + } + +
+
+
+ ); +}; + +export default Posts; diff --git a/client/src/layouts/PostsPage/index.js b/client/src/layouts/PostsPage/index.js new file mode 100644 index 0000000..c3f81b4 --- /dev/null +++ b/client/src/layouts/PostsPage/index.js @@ -0,0 +1,44 @@ +import React, {useState, useEffect} from 'react' +import { useHistory } from "react-router-dom" +import Posts from '../../components/posts/Posts' +import {getPosts} from '../../network' + + +export default function PostsPage() { + const [posts, setPosts] = useState([]) + const history = useHistory() + + useEffect(() => { + (async () => { + const result = await getPosts() + console.log(result?.posts) + setPosts(result?.posts) + })() + }, []) + + const likeClicked = async data => { + console.log("like clicked", data) + } + + const cardClicked = async data => { + console.log(data) + history.push(`/posts/${data.postId}`) + } + const commentClicked = async data => { + history.push(`/posts/${data.postId}`) + } + + return ( +
+ { + !posts ? +

Loading ...

+ : + + } +
+ ) +} \ No newline at end of file