From 71b1911de7401cffa9c0155192a5bd85f8b2f526 Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 11 Apr 2018 18:36:19 +0200 Subject: [PATCH] refactor: minor fixes --- CHANGELOG.md | 8 +- package.json | 7 +- src/containers/Full/Full.js | 14 +- src/containers/Full/FullFooter.js | 3 +- src/containers/Full/FullHeader.js | 3 +- src/scss/style.css | 1525 +++++++++++++++++-------- src/scss/vendors/chart.js/chart.css | 4 +- src/views/Base/Dropdowns/Dropdowns.js | 18 +- src/views/Widgets/Widget03.js | 4 +- 9 files changed, 1069 insertions(+), 517 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 344e6bf..987c50e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,10 @@ -## [react](./REACT.md) version `changelog` +## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog + +##### `v2.0.0-alpha.3` +- refactor: Colors +- refactor: FullAside - ListGroup (deprecate callout) +- refactor: Full* containers minor fixes +- refactor: Dropdowns minor fixes ##### `v2.0.0-alpha.2` - refactor: FullHeader `` (required prop `direction`) diff --git a/package.json b/package.json index 0e9d21a..350ac4b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "CoreUI-React", - "version": "2.0.0-alpha.2", + "version": "2.0.0-alpha.3", "description": "CoreUI React Open Source Bootstrap 4 Admin Template", "author": "Łukasz Holeczek", "homepage": "http://coreui.io", @@ -12,8 +12,9 @@ "url": "git@github.com:mrholek/CoreUI-React.git" }, "dependencies": { - "@coreui/styles": "next", - "@coreui/react": "next", + "@coreui/coreui": "^2.0.0-beta.5", + "@coreui/react": "^2.0.0-alpha.5", + "babel-jest": "^22.4.3", "bootstrap": "4.0.0", "chart.js": "^2.7.2", "classnames": "^2.2.3", diff --git a/src/containers/Full/Full.js b/src/containers/Full/Full.js index ccac0b0..6f7e49b 100644 --- a/src/containers/Full/Full.js +++ b/src/containers/Full/Full.js @@ -38,15 +38,7 @@ class Full extends Component {
- -
  • -
    - -  Dashboard -  Settings -
    -
    • -     + {routes.map((route, idx) => { @@ -60,11 +52,11 @@ class Full extends Component {
    -     - + {/**/} ); } diff --git a/src/scss/style.css b/src/scss/style.css index 7e831af..28c624f 100644 --- a/src/scss/style.css +++ b/src/scss/style.css @@ -1,3 +1,11 @@ +@charset "UTF-8"; +/*! + * CoreUI - Open Source Dashboard UI Kit + * @version v2.0.0-beta.5 + * @link https://coreui.io + * Copyright (c) 2018 creativeLabs Łukasz Holeczek + * Licensed under MIT (https://coreui.io/license) + */ /*! * Bootstrap v4.0.0 (https://getbootstrap.com) * Copyright 2011-2018 The Bootstrap Authors @@ -16,17 +24,26 @@ --teal: #20c997; --cyan: #17a2b8; --white: #fff; - --gray: #536c79; - --gray-dark: #29363d; + --gray: #73818f; + --gray-dark: #2f353a; --light-blue: #63c2de; + --gray-100: #f0f3f5; + --gray-200: #e4e7ea; + --gray-300: #c8ced3; + --gray-400: #acb4bc; + --gray-500: #8f9ba6; + --gray-600: #73818f; + --gray-700: #5c6873; + --gray-800: #2f353a; + --gray-900: #23282c; --primary: #20a8d8; - --secondary: #a4b7c1; + --secondary: #c8ced3; --success: #4dbd74; --info: #63c2de; --warning: #ffc107; --danger: #f86c6b; --light: #f0f3f5; - --dark: #29363d; + --dark: #2f353a; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; @@ -60,7 +77,7 @@ body { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #151b1e; + color: #23282c; text-align: left; background-color: #e4e5e6; } @@ -184,7 +201,7 @@ table { caption { padding-top: 0.75rem; padding-bottom: 0.75rem; - color: #536c79; + color: #73818f; text-align: left; caption-side: bottom; } @@ -387,7 +404,7 @@ mark, .blockquote-footer { display: block; font-size: 80%; - color: #536c79; } + color: #73818f; } .blockquote-footer::before { content: "\2014 \00A0"; } @@ -398,7 +415,8 @@ mark, .img-thumbnail { padding: 0.25rem; background-color: #e4e5e6; - border: 1px solid #a4b7c1; + border: 1px solid #c8ced3; + border-radius: 0.25rem; max-width: 100%; height: auto; } @@ -411,7 +429,7 @@ mark, .figure-caption { font-size: 90%; - color: #536c79; } + color: #73818f; } code, kbd, @@ -430,7 +448,8 @@ kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: #fff; - background-color: #151b1e; } + background-color: #23282c; + border-radius: 0.2rem; } kbd kbd { padding: 0; font-size: 100%; @@ -439,7 +458,7 @@ kbd { pre { display: block; font-size: 87.5%; - color: #151b1e; } + color: #23282c; } pre code { font-size: inherit; color: inherit; @@ -1046,12 +1065,12 @@ pre { .table td { padding: 0.75rem; vertical-align: top; - border-top: 1px solid #a4b7c1; } + border-top: 1px solid #c8ced3; } .table thead th { vertical-align: bottom; - border-bottom: 2px solid #a4b7c1; } + border-bottom: 2px solid #c8ced3; } .table tbody + tbody { - border-top: 2px solid #a4b7c1; } + border-top: 2px solid #c8ced3; } .table .table { background-color: #e4e5e6; } @@ -1060,10 +1079,10 @@ pre { padding: 0.3rem; } .table-bordered { - border: 1px solid #a4b7c1; } + border: 1px solid #c8ced3; } .table-bordered th, .table-bordered td { - border: 1px solid #a4b7c1; } + border: 1px solid #c8ced3; } .table-bordered thead th, .table-bordered thead td { border-bottom-width: 2px; } @@ -1088,13 +1107,13 @@ pre { .table-secondary, .table-secondary > th, .table-secondary > td { - background-color: #e6ebee; } + background-color: #f0f1f3; } .table-hover .table-secondary:hover { - background-color: #d7dfe4; } + background-color: #e2e4e8; } .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { - background-color: #d7dfe4; } + background-color: #e2e4e8; } .table-success, .table-success > th, @@ -1154,13 +1173,13 @@ pre { .table-dark, .table-dark > th, .table-dark > td { - background-color: #c3c7c9; } + background-color: #c5c6c8; } .table-hover .table-dark:hover { - background-color: #b6babd; } + background-color: #b8b9bc; } .table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { - background-color: #b6babd; } + background-color: #b8b9bc; } .table-active, .table-active > th, @@ -1175,21 +1194,21 @@ pre { .table .thead-dark th { color: #e4e5e6; - background-color: #151b1e; - border-color: #252f35; } + background-color: #23282c; + border-color: #343b41; } .table .thead-light th { - color: #3e515b; - background-color: #c2cfd6; - border-color: #a4b7c1; } + color: #5c6873; + background-color: #e4e7ea; + border-color: #c8ced3; } .table-dark { color: #e4e5e6; - background-color: #151b1e; } + background-color: #23282c; } .table-dark th, .table-dark td, .table-dark thead th { - border-color: #252f35; } + border-color: #343b41; } .table-dark.table-bordered { border: 0; } .table-dark.table-striped tbody tr:nth-of-type(odd) { @@ -1252,33 +1271,33 @@ pre { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; - color: #3e515b; + color: #5c6873; background-color: #fff; background-clip: padding-box; - border: 1px solid #c2cfd6; - border-radius: 0; + border: 1px solid #e4e7ea; + border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control::-ms-expand { background-color: transparent; border: 0; } .form-control:focus { - color: #3e515b; + color: #5c6873; background-color: #fff; border-color: #8ad4ee; outline: 0; box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); } .form-control::placeholder { - color: #536c79; + color: #73818f; opacity: 1; } .form-control:disabled, .form-control[readonly] { - background-color: #c2cfd6; + background-color: #e4e7ea; opacity: 1; } select.form-control:not([size]):not([multiple]) { height: calc(2.0625rem + 2px); } select.form-control:focus::-ms-value { - color: #3e515b; + color: #5c6873; background-color: #fff; } .form-control-file, @@ -1334,7 +1353,8 @@ select.form-control:focus::-ms-value { .input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.76563rem; - line-height: 1.5; } + line-height: 1.5; + border-radius: 0.2rem; } select.form-control-sm:not([size]):not([multiple]), .input-group-sm > select.form-control:not([size]):not([multiple]), .input-group-sm > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), @@ -1350,7 +1370,8 @@ select.form-control-sm:not([size]):not([multiple]), .input-group-sm > select.for .input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.09375rem; - line-height: 1.5; } + line-height: 1.5; + border-radius: 0.3rem; } select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), .input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), @@ -1386,7 +1407,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for margin-top: 0.3rem; margin-left: -1.25rem; } .form-check-input:disabled ~ .form-check-label { - color: #536c79; } + color: #73818f; } .form-check-label { margin-bottom: 0; } @@ -1610,7 +1631,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; - border-radius: 0; + border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn:hover, .btn:focus { text-decoration: none; } @@ -1652,27 +1673,27 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); } .btn-secondary { - color: #151b1e; - background-color: #a4b7c1; - border-color: #a4b7c1; } + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } .btn-secondary:hover { - color: #151b1e; - background-color: #8da5b2; - border-color: #869fac; } + color: #23282c; + background-color: #b3bbc2; + border-color: #acb5bc; } .btn-secondary:focus, .btn-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(164, 183, 193, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { - color: #151b1e; - background-color: #a4b7c1; - border-color: #a4b7c1; } + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { - color: #151b1e; - background-color: #869fac; - border-color: #7e99a7; } + color: #23282c; + background-color: #acb5bc; + border-color: #a5aeb7; } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(164, 183, 193, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } .btn-success { color: #fff; @@ -1698,17 +1719,17 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); } .btn-info { - color: #151b1e; + color: #23282c; background-color: #63c2de; border-color: #63c2de; } .btn-info:hover { - color: #151b1e; + color: #23282c; background-color: #43b6d7; border-color: #39b2d5; } .btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); } .btn-info.disabled, .btn-info:disabled { - color: #151b1e; + color: #23282c; background-color: #63c2de; border-color: #63c2de; } .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, @@ -1721,22 +1742,22 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); } .btn-warning { - color: #151b1e; + color: #23282c; background-color: #ffc107; border-color: #ffc107; } .btn-warning:hover { - color: #151b1e; + color: #23282c; background-color: #e0a800; border-color: #d39e00; } .btn-warning:focus, .btn-warning.focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-warning.disabled, .btn-warning:disabled { - color: #151b1e; + color: #23282c; background-color: #ffc107; border-color: #ffc107; } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #d39e00; border-color: #c69500; } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, @@ -1767,22 +1788,22 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); } .btn-light { - color: #151b1e; + color: #23282c; background-color: #f0f3f5; border-color: #f0f3f5; } .btn-light:hover { - color: #151b1e; + color: #23282c; background-color: #d9e1e6; border-color: #d1dbe1; } .btn-light:focus, .btn-light.focus { box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); } .btn-light.disabled, .btn-light:disabled { - color: #151b1e; + color: #23282c; background-color: #f0f3f5; border-color: #f0f3f5; } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #d1dbe1; border-color: #cad4dc; } .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, @@ -1791,26 +1812,26 @@ fieldset:disabled a.btn { .btn-dark { color: #fff; - background-color: #29363d; - border-color: #29363d; } + background-color: #2f353a; + border-color: #2f353a; } .btn-dark:hover { color: #fff; - background-color: #1a2226; - border-color: #151b1f; } + background-color: #1e2225; + border-color: #181b1e; } .btn-dark:focus, .btn-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(41, 54, 61, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; - background-color: #29363d; - border-color: #29363d; } + background-color: #2f353a; + border-color: #2f353a; } .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #fff; - background-color: #151b1f; - border-color: #0f1417; } + background-color: #181b1e; + border-color: #121517; } .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(41, 54, 61, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } .btn-outline-primary { color: #20a8d8; @@ -1836,27 +1857,27 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); } .btn-outline-secondary { - color: #a4b7c1; + color: #c8ced3; background-color: transparent; background-image: none; - border-color: #a4b7c1; } + border-color: #c8ced3; } .btn-outline-secondary:hover { - color: #151b1e; - background-color: #a4b7c1; - border-color: #a4b7c1; } + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(164, 183, 193, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #a4b7c1; + color: #c8ced3; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { - color: #151b1e; - background-color: #a4b7c1; - border-color: #a4b7c1; } + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(164, 183, 193, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } .btn-outline-success { color: #4dbd74; @@ -1887,7 +1908,7 @@ fieldset:disabled a.btn { background-image: none; border-color: #63c2de; } .btn-outline-info:hover { - color: #151b1e; + color: #23282c; background-color: #63c2de; border-color: #63c2de; } .btn-outline-info:focus, .btn-outline-info.focus { @@ -1897,7 +1918,7 @@ fieldset:disabled a.btn { background-color: transparent; } .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #63c2de; border-color: #63c2de; } .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, @@ -1910,7 +1931,7 @@ fieldset:disabled a.btn { background-image: none; border-color: #ffc107; } .btn-outline-warning:hover { - color: #151b1e; + color: #23282c; background-color: #ffc107; border-color: #ffc107; } .btn-outline-warning:focus, .btn-outline-warning.focus { @@ -1920,7 +1941,7 @@ fieldset:disabled a.btn { background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #ffc107; border-color: #ffc107; } .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, @@ -1956,7 +1977,7 @@ fieldset:disabled a.btn { background-image: none; border-color: #f0f3f5; } .btn-outline-light:hover { - color: #151b1e; + color: #23282c; background-color: #f0f3f5; border-color: #f0f3f5; } .btn-outline-light:focus, .btn-outline-light.focus { @@ -1966,7 +1987,7 @@ fieldset:disabled a.btn { background-color: transparent; } .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #f0f3f5; border-color: #f0f3f5; } .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, @@ -1974,27 +1995,27 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); } .btn-outline-dark { - color: #29363d; + color: #2f353a; background-color: transparent; background-image: none; - border-color: #29363d; } + border-color: #2f353a; } .btn-outline-dark:hover { color: #fff; - background-color: #29363d; - border-color: #29363d; } + background-color: #2f353a; + border-color: #2f353a; } .btn-outline-dark:focus, .btn-outline-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(41, 54, 61, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } .btn-outline-dark.disabled, .btn-outline-dark:disabled { - color: #29363d; + color: #2f353a; background-color: transparent; } .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #fff; - background-color: #29363d; - border-color: #29363d; } + background-color: #2f353a; + border-color: #2f353a; } .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(41, 54, 61, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } .btn-link { font-weight: 400; @@ -2010,19 +2031,19 @@ fieldset:disabled a.btn { border-color: transparent; box-shadow: none; } .btn-link:disabled, .btn-link.disabled { - color: #536c79; } + color: #73818f; } .btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.09375rem; line-height: 1.5; - border-radius: 0; } + border-radius: 0.3rem; } .btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.76563rem; line-height: 1.5; - border-radius: 0; } + border-radius: 0.2rem; } .btn-block { display: block; @@ -2088,12 +2109,13 @@ tbody.collapse.show { padding: 0 0; margin: 0.125rem 0 0; font-size: 0.875rem; - color: #151b1e; + color: #23282c; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; - border: 1px solid #c2cfd6; } + border: 1px solid #c8ced3; + border-radius: 0.25rem; } .dropup .dropdown-menu { margin-top: 0; @@ -2171,7 +2193,7 @@ tbody.collapse.show { height: 0; margin: 0.5rem 0; overflow: hidden; - border-top: 1px solid #f0f3f5; } + border-top: 1px solid #e4e7ea; } .dropdown-item { display: block; @@ -2179,13 +2201,13 @@ tbody.collapse.show { padding: 0.25rem 1.5rem; clear: both; font-weight: 400; - color: #151b1e; + color: #23282c; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item:hover, .dropdown-item:focus { - color: #0b0e0f; + color: #181b1e; text-decoration: none; background-color: #f0f3f5; } .dropdown-item.active, .dropdown-item:active { @@ -2193,7 +2215,7 @@ tbody.collapse.show { text-decoration: none; background-color: #20a8d8; } .dropdown-item.disabled, .dropdown-item:disabled { - color: #536c79; + color: #73818f; background-color: transparent; } .dropdown-menu.show { @@ -2204,7 +2226,7 @@ tbody.collapse.show { padding: 0 1.5rem; margin-bottom: 0; font-size: 0.76563rem; - color: #536c79; + color: #73818f; white-space: nowrap; } .btn-group, @@ -2244,6 +2266,16 @@ tbody.collapse.show { .btn-group > .btn:first-child { margin-left: 0; } +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } @@ -2271,6 +2303,14 @@ tbody.collapse.show { .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } + .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), + .btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } + .btn-group-vertical > .btn:not(:first-child), + .btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; } .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { @@ -2310,9 +2350,25 @@ tbody.collapse.show { .input-group > .custom-file + .custom-select, .input-group > .custom-file + .custom-file { margin-left: -1px; } + .input-group > .form-control:not(:last-child), + .input-group > .custom-select:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .input-group > .form-control:not(:first-child), + .input-group > .custom-select:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .input-group > .custom-file { display: flex; align-items: center; } + .input-group > .custom-file:not(:last-child) .custom-file-label, + .input-group > .custom-file:not(:last-child) .custom-file-label::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .input-group > .custom-file:not(:first-child) .custom-file-label, + .input-group > .custom-file:not(:first-child) .custom-file-label::before { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .input-group-prepend, .input-group-append { @@ -2345,15 +2401,34 @@ tbody.collapse.show { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #3e515b; + color: #5c6873; text-align: center; white-space: nowrap; background-color: #f0f3f5; - border: 1px solid #c2cfd6; } + border: 1px solid #e4e7ea; + border-radius: 0.25rem; } .input-group-text input[type="radio"], .input-group-text input[type="checkbox"] { margin-top: 0; } +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group > .input-group-append:not(:last-child) > .btn, +.input-group > .input-group-append:not(:last-child) > .input-group-text, +.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.input-group > .input-group-append > .btn, +.input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .custom-control { position: relative; display: block; @@ -2377,9 +2452,9 @@ tbody.collapse.show { color: #fff; background-color: #b6e4f4; } .custom-control-input:disabled ~ .custom-control-label { - color: #536c79; } + color: #73818f; } .custom-control-input:disabled ~ .custom-control-label::before { - background-color: #c2cfd6; } + background-color: #e4e7ea; } .custom-control-label { margin-bottom: 0; } @@ -2393,7 +2468,7 @@ tbody.collapse.show { pointer-events: none; content: ""; user-select: none; - background-color: #a4b7c1; } + background-color: #c8ced3; } .custom-control-label::after { position: absolute; top: 0.25rem; @@ -2406,6 +2481,9 @@ tbody.collapse.show { background-position: center center; background-size: 50% 50%; } +.custom-checkbox .custom-control-label::before { + border-radius: 0.25rem; } + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #20a8d8; } @@ -2442,27 +2520,27 @@ tbody.collapse.show { height: calc(2.0625rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; - color: #3e515b; + color: #5c6873; vertical-align: middle; - background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%2329363d' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center; + background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center; background-size: 8px 10px; - border: 1px solid #c2cfd6; - border-radius: 0; + border: 1px solid #e4e7ea; + border-radius: 0.25rem; appearance: none; } .custom-select:focus { border-color: #8ad4ee; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(138, 212, 238, 0.5); } .custom-select:focus::-ms-value { - color: #3e515b; + color: #5c6873; background-color: #fff; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; padding-right: 0.75rem; background-image: none; } .custom-select:disabled { - color: #536c79; - background-color: #c2cfd6; } + color: #73818f; + background-color: #e4e7ea; } .custom-select::-ms-expand { opacity: 0; } @@ -2509,9 +2587,10 @@ tbody.collapse.show { height: calc(2.0625rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; - color: #3e515b; + color: #5c6873; background-color: #fff; - border: 1px solid #c2cfd6; } + border: 1px solid #e4e7ea; + border-radius: 0.25rem; } .custom-file-label::after { position: absolute; top: 0; @@ -2522,10 +2601,11 @@ tbody.collapse.show { height: calc(calc(2.0625rem + 2px) - 1px * 2); padding: 0.375rem 0.75rem; line-height: 1.5; - color: #3e515b; + color: #5c6873; content: "Browse"; background-color: #f0f3f5; - border-left: 1px solid #c2cfd6; } + border-left: 1px solid #e4e7ea; + border-radius: 0 0.25rem 0.25rem 0; } .nav { display: flex; @@ -2540,27 +2620,34 @@ tbody.collapse.show { .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { - color: #536c79; } + color: #73818f; } .nav-tabs { - border-bottom: 1px solid #a4b7c1; } + border-bottom: 1px solid #c8ced3; } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { - border: 1px solid transparent; } + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { - border-color: #c2cfd6 #c2cfd6 #a4b7c1; } + border-color: #e4e7ea #e4e7ea #c8ced3; } .nav-tabs .nav-link.disabled { - color: #536c79; + color: #73818f; background-color: transparent; border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { - color: #3e515b; + color: #5c6873; background-color: #e4e5e6; - border-color: #a4b7c1 #a4b7c1 #e4e5e6; } + border-color: #c8ced3 #c8ced3 #e4e5e6; } .nav-tabs .dropdown-menu { - margin-top: -1px; } + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; } + +.nav-pills .nav-link { + border-radius: 0.25rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { @@ -2635,7 +2722,8 @@ tbody.collapse.show { font-size: 1.09375rem; line-height: 1; background-color: transparent; - border: 1px solid transparent; } + border: 1px solid transparent; + border-radius: 0.25rem; } .navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; } .navbar-toggler:not(:disabled):not(.disabled) { @@ -2879,10 +2967,17 @@ tbody.collapse.show { word-wrap: break-word; background-color: #fff; background-clip: border-box; - border: 1px solid #c2cfd6; } + border: 1px solid #c8ced3; + border-radius: 0.25rem; } .card > hr { margin-right: 0; margin-left: 0; } + .card > .list-group:first-child .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } + .card > .list-group:last-child .list-group-item:last-child { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .card-body { flex: 1 1 auto; @@ -2908,14 +3003,18 @@ tbody.collapse.show { padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: #f0f3f5; - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #c8ced3; } + .card-header:first-child { + border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } .card-header + .list-group .list-group-item:first-child { border-top: 0; } .card-footer { padding: 0.75rem 1.25rem; background-color: #f0f3f5; - border-top: 1px solid #c2cfd6; } + border-top: 1px solid #c8ced3; } + .card-footer:last-child { + border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } .card-header-tabs { margin-right: -0.625rem; @@ -2936,13 +3035,18 @@ tbody.collapse.show { padding: 1.25rem; } .card-img { - width: 100%; } + width: 100%; + border-radius: calc(0.25rem - 1px); } .card-img-top { - width: 100%; } + width: 100%; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } .card-img-bottom { - width: 100%; } + width: 100%; + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); } .card-deck { display: flex; @@ -2975,7 +3079,42 @@ tbody.collapse.show { margin-bottom: 0; } .card-group > .card + .card { margin-left: 0; - border-left: 0; } } + border-left: 0; } + .card-group > .card:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .card-group > .card:first-child .card-img-top, + .card-group > .card:first-child .card-header { + border-top-right-radius: 0; } + .card-group > .card:first-child .card-img-bottom, + .card-group > .card:first-child .card-footer { + border-bottom-right-radius: 0; } + .card-group > .card:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .card-group > .card:last-child .card-img-top, + .card-group > .card:last-child .card-header { + border-top-left-radius: 0; } + .card-group > .card:last-child .card-img-bottom, + .card-group > .card:last-child .card-footer { + border-bottom-left-radius: 0; } + .card-group > .card:only-child { + border-radius: 0.25rem; } + .card-group > .card:only-child .card-img-top, + .card-group > .card:only-child .card-header { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } + .card-group > .card:only-child .card-img-bottom, + .card-group > .card:only-child .card-footer { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } + .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: 0.75rem; } @@ -2994,13 +3133,14 @@ tbody.collapse.show { padding: 0.75rem 1rem; margin-bottom: 1.5rem; list-style: none; - background-color: #fff; } + background-color: #fff; + border-radius: 0.25rem; } .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; padding-left: 0.5rem; - color: #536c79; + color: #73818f; content: "/"; } .breadcrumb-item + .breadcrumb-item:hover::before { @@ -3010,14 +3150,15 @@ tbody.collapse.show { text-decoration: none; } .breadcrumb-item.active { - color: #536c79; } + color: #73818f; } .pagination { display: flex; padding-left: 0; - list-style: none; } + list-style: none; + border-radius: 0.25rem; } -.page-link, .pagination-datatables li a, .pagination li a { +.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; @@ -3025,45 +3166,67 @@ tbody.collapse.show { line-height: 1.25; color: #20a8d8; background-color: #fff; - border: 1px solid #a4b7c1; } - .page-link:hover, .pagination-datatables li a:hover, .pagination li a:hover { + border: 1px solid #c8ced3; } + .page-link:hover { color: #167495; text-decoration: none; - background-color: #c2cfd6; - border-color: #a4b7c1; } - .page-link:focus, .pagination-datatables li a:focus, .pagination li a:focus { + background-color: #e4e7ea; + border-color: #c8ced3; } + .page-link:focus { z-index: 2; outline: 0; box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); } - .page-link:not(:disabled):not(.disabled), .pagination-datatables li a:not(:disabled):not(.disabled), .pagination li a:not(:disabled):not(.disabled) { + .page-link:not(:disabled):not(.disabled) { cursor: pointer; } -.page-item:first-child .page-link, .pagination-datatables li:first-child .page-link, .pagination li:first-child .page-link, .page-item:first-child .pagination-datatables li a, .pagination-datatables li .page-item:first-child a, .pagination-datatables li:first-child a, .page-item:first-child .pagination li a, .pagination li .page-item:first-child a, .pagination li:first-child a { - margin-left: 0; } +.page-item:first-child .page-link { + margin-left: 0; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } -.page-item.active .page-link, .pagination-datatables li.active .page-link, .pagination li.active .page-link, .page-item.active .pagination-datatables li a, .pagination-datatables li .page-item.active a, .pagination-datatables li.active a, .page-item.active .pagination li a, .pagination li .page-item.active a, .pagination li.active a { +.page-item:last-child .page-link { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; } + +.page-item.active .page-link { z-index: 1; color: #fff; background-color: #20a8d8; border-color: #20a8d8; } -.page-item.disabled .page-link, .pagination-datatables li.disabled .page-link, .pagination li.disabled .page-link, .page-item.disabled .pagination-datatables li a, .pagination-datatables li .page-item.disabled a, .pagination-datatables li.disabled a, .page-item.disabled .pagination li a, .pagination li .page-item.disabled a, .pagination li.disabled a { - color: #536c79; +.page-item.disabled .page-link { + color: #73818f; pointer-events: none; cursor: auto; background-color: #fff; - border-color: #a4b7c1; } + border-color: #c8ced3; } -.pagination-lg .page-link, .pagination-lg .pagination-datatables li a, .pagination-datatables li .pagination-lg a, .pagination-lg .pagination li a, .pagination li .pagination-lg a { +.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.09375rem; line-height: 1.5; } -.pagination-sm .page-link, .pagination-sm .pagination-datatables li a, .pagination-datatables li .pagination-sm a, .pagination-sm .pagination li a, .pagination li .pagination-sm a { +.pagination-lg .page-item:first-child .page-link { + border-top-left-radius: 0.3rem; + border-bottom-left-radius: 0.3rem; } + +.pagination-lg .page-item:last-child .page-link { + border-top-right-radius: 0.3rem; + border-bottom-right-radius: 0.3rem; } + +.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.76563rem; line-height: 1.5; } +.pagination-sm .page-item:first-child .page-link { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; } + +.pagination-sm .page-item:last-child .page-link { + border-top-right-radius: 0.2rem; + border-bottom-right-radius: 0.2rem; } + .badge { display: inline-block; padding: 0.25em 0.4em; @@ -3072,7 +3235,8 @@ tbody.collapse.show { line-height: 1; text-align: center; white-space: nowrap; - vertical-align: baseline; } + vertical-align: baseline; + border-radius: 0.25rem; } .badge:empty { display: none; } @@ -3082,7 +3246,8 @@ tbody.collapse.show { .badge-pill { padding-right: 0.6em; - padding-left: 0.6em; } + padding-left: 0.6em; + border-radius: 10rem; } .badge-primary { color: #fff; @@ -3093,12 +3258,12 @@ tbody.collapse.show { background-color: #1985ac; } .badge-secondary { - color: #151b1e; - background-color: #a4b7c1; } + color: #23282c; + background-color: #c8ced3; } .badge-secondary[href]:hover, .badge-secondary[href]:focus { - color: #151b1e; + color: #23282c; text-decoration: none; - background-color: #869fac; } + background-color: #acb5bc; } .badge-success { color: #fff; @@ -3109,18 +3274,18 @@ tbody.collapse.show { background-color: #3a9d5d; } .badge-info { - color: #151b1e; + color: #23282c; background-color: #63c2de; } .badge-info[href]:hover, .badge-info[href]:focus { - color: #151b1e; + color: #23282c; text-decoration: none; background-color: #39b2d5; } .badge-warning { - color: #151b1e; + color: #23282c; background-color: #ffc107; } .badge-warning[href]:hover, .badge-warning[href]:focus { - color: #151b1e; + color: #23282c; text-decoration: none; background-color: #d39e00; } @@ -3133,38 +3298,41 @@ tbody.collapse.show { background-color: #f63c3a; } .badge-light { - color: #151b1e; + color: #23282c; background-color: #f0f3f5; } .badge-light[href]:hover, .badge-light[href]:focus { - color: #151b1e; + color: #23282c; text-decoration: none; background-color: #d1dbe1; } .badge-dark { color: #fff; - background-color: #29363d; } + background-color: #2f353a; } .badge-dark[href]:hover, .badge-dark[href]:focus { color: #fff; text-decoration: none; - background-color: #151b1f; } + background-color: #181b1e; } .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; - background-color: #c2cfd6; } + background-color: #e4e7ea; + border-radius: 0.3rem; } @media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; } } .jumbotron-fluid { padding-right: 0; - padding-left: 0; } + padding-left: 0; + border-radius: 0; } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; - border: 1px solid transparent; } + border: 1px solid transparent; + border-radius: 0.25rem; } .alert-heading { color: inherit; } @@ -3191,13 +3359,13 @@ tbody.collapse.show { color: #0a3544; } .alert-secondary { - color: #555f64; - background-color: #edf1f3; - border-color: #e6ebee; } + color: #686b6e; + background-color: #f4f5f6; + border-color: #f0f1f3; } .alert-secondary hr { - border-top-color: #d7dfe4; } + border-top-color: #e2e4e8; } .alert-secondary .alert-link { - color: #3e4548; } + color: #4f5254; } .alert-success { color: #28623c; @@ -3245,13 +3413,13 @@ tbody.collapse.show { color: #646565; } .alert-dark { - color: #151c20; - background-color: #d4d7d8; - border-color: #c3c7c9; } + color: #181c1e; + background-color: #d5d7d8; + border-color: #c5c6c8; } .alert-dark hr { - border-top-color: #b6babd; } + border-top-color: #b8b9bc; } .alert-dark .alert-link { - color: #010101; } + color: #010202; } @keyframes progress-bar-stripes { from { @@ -3264,7 +3432,8 @@ tbody.collapse.show { height: 1rem; overflow: hidden; font-size: 0.65625rem; - background-color: #f0f3f5; } + background-color: #f0f3f5; + border-radius: 0.25rem; } .progress-bar { display: flex; @@ -3297,15 +3466,15 @@ tbody.collapse.show { .list-group-item-action { width: 100%; - color: #3e515b; + color: #5c6873; text-align: inherit; } .list-group-item-action:hover, .list-group-item-action:focus { - color: #3e515b; + color: #5c6873; text-decoration: none; background-color: #f0f3f5; } .list-group-item-action:active { - color: #151b1e; - background-color: #c2cfd6; } + color: #23282c; + background-color: #e4e7ea; } .list-group-item { position: relative; @@ -3314,13 +3483,18 @@ tbody.collapse.show { margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); } + .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } .list-group-item:last-child { - margin-bottom: 0; } + margin-bottom: 0; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .list-group-item:hover, .list-group-item:focus { z-index: 1; text-decoration: none; } .list-group-item.disabled, .list-group-item:disabled { - color: #536c79; + color: #73818f; background-color: #fff; } .list-group-item.active { z-index: 2; @@ -3330,7 +3504,8 @@ tbody.collapse.show { .list-group-flush .list-group-item { border-right: 0; - border-left: 0; } + border-left: 0; + border-radius: 0; } .list-group-flush:first-child .list-group-item:first-child { border-top: 0; } @@ -3350,15 +3525,15 @@ tbody.collapse.show { border-color: #115770; } .list-group-item-secondary { - color: #555f64; - background-color: #e6ebee; } + color: #686b6e; + background-color: #f0f1f3; } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #555f64; - background-color: #d7dfe4; } + color: #686b6e; + background-color: #e2e4e8; } .list-group-item-secondary.list-group-item-action.active { color: #fff; - background-color: #555f64; - border-color: #555f64; } + background-color: #686b6e; + border-color: #686b6e; } .list-group-item-success { color: #28623c; @@ -3416,15 +3591,15 @@ tbody.collapse.show { border-color: #7d7e7f; } .list-group-item-dark { - color: #151c20; - background-color: #c3c7c9; } + color: #181c1e; + background-color: #c5c6c8; } .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: #151c20; - background-color: #b6babd; } + color: #181c1e; + background-color: #b8b9bc; } .list-group-item-dark.list-group-item-action.active { color: #fff; - background-color: #151c20; - border-color: #151c20; } + background-color: #181c1e; + border-color: #181c1e; } .close { float: right; @@ -3489,6 +3664,7 @@ button.close { background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; outline: 0; } .modal-backdrop { @@ -3509,7 +3685,9 @@ button.close { align-items: flex-start; justify-content: space-between; padding: 1rem; - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #e4e7ea; + border-top-left-radius: 0.3rem; + border-top-right-radius: 0.3rem; } .modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; } @@ -3528,7 +3706,7 @@ button.close { align-items: center; justify-content: flex-end; padding: 1rem; - border-top: 1px solid #c2cfd6; } + border-top: 1px solid #e4e7ea; } .modal-footer > :not(:first-child) { margin-left: .25rem; } .modal-footer > :not(:last-child) { @@ -3634,7 +3812,8 @@ button.close { padding: 0.25rem 0.5rem; color: #fff; text-align: center; - background-color: #000; } + background-color: #000; + border-radius: 0.25rem; } .popover { position: absolute; @@ -3661,7 +3840,8 @@ button.close { word-wrap: break-word; background-color: #fff; background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.2); } + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; } .popover .arrow { position: absolute; display: block; @@ -3764,13 +3944,15 @@ button.close { font-size: 0.875rem; color: inherit; background-color: #f7f7f7; - border-bottom: 1px solid #ebebeb; } + border-bottom: 1px solid #ebebeb; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); } .popover-header:empty { display: none; } .popover-body { padding: 0.5rem 0.75rem; - color: #151b1e; } + color: #23282c; } .carousel { position: relative; } @@ -3941,12 +4123,12 @@ button.bg-primary:focus { background-color: #1985ac !important; } .bg-secondary { - background-color: #a4b7c1 !important; } + background-color: #c8ced3 !important; } a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { - background-color: #869fac !important; } + background-color: #acb5bc !important; } .bg-success { background-color: #4dbd74 !important; } @@ -3989,12 +4171,12 @@ button.bg-light:focus { background-color: #d1dbe1 !important; } .bg-dark { - background-color: #29363d !important; } + background-color: #2f353a !important; } a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus { - background-color: #151b1f !important; } + background-color: #181b1e !important; } .bg-white { background-color: #fff !important; } @@ -4003,19 +4185,19 @@ button.bg-dark:focus { background-color: transparent !important; } .border { - border: 1px solid #c2cfd6 !important; } + border: 1px solid #c8ced3 !important; } .border-top { - border-top: 1px solid #c2cfd6 !important; } + border-top: 1px solid #c8ced3 !important; } .border-right { - border-right: 1px solid #c2cfd6 !important; } + border-right: 1px solid #c8ced3 !important; } .border-bottom { - border-bottom: 1px solid #c2cfd6 !important; } + border-bottom: 1px solid #c8ced3 !important; } .border-left { - border-left: 1px solid #c2cfd6 !important; } + border-left: 1px solid #c8ced3 !important; } .border-0 { border: 0 !important; } @@ -4036,7 +4218,7 @@ button.bg-dark:focus { border-color: #20a8d8 !important; } .border-secondary { - border-color: #a4b7c1 !important; } + border-color: #c8ced3 !important; } .border-success { border-color: #4dbd74 !important; } @@ -4054,7 +4236,7 @@ button.bg-dark:focus { border-color: #f0f3f5 !important; } .border-dark { - border-color: #29363d !important; } + border-color: #2f353a !important; } .border-white { border-color: #fff !important; } @@ -5769,10 +5951,10 @@ a.text-primary:hover, a.text-primary:focus { color: #1985ac !important; } .text-secondary { - color: #a4b7c1 !important; } + color: #c8ced3 !important; } a.text-secondary:hover, a.text-secondary:focus { - color: #869fac !important; } + color: #acb5bc !important; } .text-success { color: #4dbd74 !important; } @@ -5805,13 +5987,13 @@ a.text-light:hover, a.text-light:focus { color: #d1dbe1 !important; } .text-dark { - color: #29363d !important; } + color: #2f353a !important; } a.text-dark:hover, a.text-dark:focus { - color: #151b1f !important; } + color: #181b1e !important; } .text-muted { - color: #536c79 !important; } + color: #73818f !important; } .text-hide { font: 0/0 a; @@ -5975,19 +6157,20 @@ a.text-dark:hover, a.text-dark:focus { .aside-menu { z-index: 1019; width: 250px; - color: #29363d; + color: #2f353a; background: #fff; - border-left: 1px solid #c2cfd6; } + border-left: 1px solid #c8ced3; } .aside-menu .nav-tabs { - border-color: #c2cfd6; } + border-color: #c8ced3; } .aside-menu .nav-tabs .nav-link { padding: 0.75rem 1rem; - color: #151b1e; - border-top: 0; } + color: #23282c; + border-top: 0; + border-radius: 0; } .aside-menu .nav-tabs .nav-link.active { color: #20a8d8; - border-right-color: #c2cfd6; - border-left-color: #c2cfd6; } + border-right-color: #c8ced3; + border-left-color: #c8ced3; } .aside-menu .nav-tabs .nav-item:first-child .nav-link { border-left: 0; } .aside-menu .tab-content { @@ -5995,7 +6178,7 @@ a.text-dark:hover, a.text-dark:focus { overflow-x: hidden; overflow-y: auto; border: 0; - border-top: 1px solid #c2cfd6; + border-top: 1px solid #c8ced3; -ms-overflow-style: -ms-autohiding-scrollbar; } .aside-menu .tab-content::-webkit-scrollbar { width: 10px; @@ -6106,14 +6289,14 @@ a.text-dark:hover, a.text-dark:focus { vertical-align: top; } .breadcrumb-menu .btn { padding: 0 0.75rem; - color: #536c79; + color: #73818f; vertical-align: top; border: 0; } .breadcrumb-menu .btn:hover, .breadcrumb-menu .btn.active { - color: #151b1e; + color: #23282c; background: transparent; } .breadcrumb-menu .open .btn { - color: #151b1e; + color: #23282c; background: transparent; } .breadcrumb-menu .dropdown-menu { min-width: 180px; @@ -6125,7 +6308,8 @@ a.text-dark:hover, a.text-dark:focus { .breadcrumb { position: relative; - border-bottom: 1px solid #c2cfd6; } + border-radius: 0; + border-bottom: 1px solid #c8ced3; } .brand-card { position: relative; @@ -6136,14 +6320,16 @@ a.text-dark:hover, a.text-dark:focus { word-wrap: break-word; background-color: #fff; background-clip: border-box; - border: 1px solid #c2cfd6; } + border: 1px solid #c8ced3; + border-radius: 0.25rem; } .brand-card-header { position: relative; display: flex; align-items: center; justify-content: center; - height: 6rem; } + height: 6rem; + border-radius: 0.25rem 0.25rem 0 0; } .brand-card-header i { font-size: 2rem; color: #fff; } @@ -6162,11 +6348,11 @@ a.text-dark:hover, a.text-dark:focus { flex: 1; padding: 0.1875rem 0; } .brand-card-body > *:not(:last-child) { - border-right: 1px solid #c2cfd6; } + border-right: 1px solid #c8ced3; } *[dir="rtl"] .brand-card-body > *:not(:last-child) { border-right: 0; - border-left: 1px solid #c2cfd6; } + border-left: 1px solid #c8ced3; } .btn-brand { border: 0; } @@ -6400,7 +6586,7 @@ a.text-dark:hover, a.text-dark:focus { box-shadow: 0 0 0 0.2rem rgba(227, 79, 38, 0.5); } .btn-openid { - color: #151b1e; + color: #23282c; background-color: #f78c40; border-color: #f78c40; } .btn-openid:hover { @@ -6410,7 +6596,7 @@ a.text-dark:hover, a.text-dark:focus { .btn-openid:focus, .btn-openid.focus { box-shadow: 0 0 0 0.2rem rgba(247, 140, 64, 0.5); } .btn-openid.disabled, .btn-openid:disabled { - color: #151b1e; + color: #23282c; background-color: #f78c40; border-color: #f78c40; } .btn-openid:not(:disabled):not(.disabled):active, .btn-openid:not(:disabled):not(.disabled).active, @@ -6745,22 +6931,22 @@ a.text-dark:hover, a.text-dark:focus { box-shadow: 0 0 0 0.2rem rgba(16, 115, 175, 0.5); } .btn-vimeo { - color: #151b1e; + color: #23282c; background-color: #aad450; border-color: #aad450; } .btn-vimeo:hover { - color: #151b1e; + color: #23282c; background-color: #9bcc32; border-color: #93c130; } .btn-vimeo:focus, .btn-vimeo.focus { box-shadow: 0 0 0 0.2rem rgba(170, 212, 80, 0.5); } .btn-vimeo.disabled, .btn-vimeo:disabled { - color: #151b1e; + color: #23282c; background-color: #aad450; border-color: #aad450; } .btn-vimeo:not(:disabled):not(.disabled):active, .btn-vimeo:not(:disabled):not(.disabled).active, .show > .btn-vimeo.dropdown-toggle { - color: #151b1e; + color: #23282c; background-color: #93c130; border-color: #8bb72d; } .btn-vimeo:not(:disabled):not(.disabled):active:focus, .btn-vimeo:not(:disabled):not(.disabled).active:focus, @@ -6781,11 +6967,210 @@ button { margin-top: -2px; vertical-align: middle; } +.btn-pill { + border-radius: 50em; } + +.btn-square { + border-radius: 0; } + +.btn-ghost-primary { + color: #20a8d8; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-primary:hover { + color: #fff; + background-color: #20a8d8; + border-color: #20a8d8; } + .btn-ghost-primary:focus, .btn-ghost-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); } + .btn-ghost-primary.disabled, .btn-ghost-primary:disabled { + color: #20a8d8; + background-color: transparent; + border-color: transparent; } + .btn-ghost-primary:not(:disabled):not(.disabled):active, .btn-ghost-primary:not(:disabled):not(.disabled).active, + .show > .btn-ghost-primary.dropdown-toggle { + color: #fff; + background-color: #20a8d8; + border-color: #20a8d8; } + .btn-ghost-primary:not(:disabled):not(.disabled):active:focus, .btn-ghost-primary:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); } + +.btn-ghost-secondary { + color: #c8ced3; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-secondary:hover { + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } + .btn-ghost-secondary:focus, .btn-ghost-secondary.focus { + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } + .btn-ghost-secondary.disabled, .btn-ghost-secondary:disabled { + color: #c8ced3; + background-color: transparent; + border-color: transparent; } + .btn-ghost-secondary:not(:disabled):not(.disabled):active, .btn-ghost-secondary:not(:disabled):not(.disabled).active, + .show > .btn-ghost-secondary.dropdown-toggle { + color: #23282c; + background-color: #c8ced3; + border-color: #c8ced3; } + .btn-ghost-secondary:not(:disabled):not(.disabled):active:focus, .btn-ghost-secondary:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); } + +.btn-ghost-success { + color: #4dbd74; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-success:hover { + color: #fff; + background-color: #4dbd74; + border-color: #4dbd74; } + .btn-ghost-success:focus, .btn-ghost-success.focus { + box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); } + .btn-ghost-success.disabled, .btn-ghost-success:disabled { + color: #4dbd74; + background-color: transparent; + border-color: transparent; } + .btn-ghost-success:not(:disabled):not(.disabled):active, .btn-ghost-success:not(:disabled):not(.disabled).active, + .show > .btn-ghost-success.dropdown-toggle { + color: #fff; + background-color: #4dbd74; + border-color: #4dbd74; } + .btn-ghost-success:not(:disabled):not(.disabled):active:focus, .btn-ghost-success:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); } + +.btn-ghost-info { + color: #63c2de; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-info:hover { + color: #23282c; + background-color: #63c2de; + border-color: #63c2de; } + .btn-ghost-info:focus, .btn-ghost-info.focus { + box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); } + .btn-ghost-info.disabled, .btn-ghost-info:disabled { + color: #63c2de; + background-color: transparent; + border-color: transparent; } + .btn-ghost-info:not(:disabled):not(.disabled):active, .btn-ghost-info:not(:disabled):not(.disabled).active, + .show > .btn-ghost-info.dropdown-toggle { + color: #23282c; + background-color: #63c2de; + border-color: #63c2de; } + .btn-ghost-info:not(:disabled):not(.disabled):active:focus, .btn-ghost-info:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); } + +.btn-ghost-warning { + color: #ffc107; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-warning:hover { + color: #23282c; + background-color: #ffc107; + border-color: #ffc107; } + .btn-ghost-warning:focus, .btn-ghost-warning.focus { + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + .btn-ghost-warning.disabled, .btn-ghost-warning:disabled { + color: #ffc107; + background-color: transparent; + border-color: transparent; } + .btn-ghost-warning:not(:disabled):not(.disabled):active, .btn-ghost-warning:not(:disabled):not(.disabled).active, + .show > .btn-ghost-warning.dropdown-toggle { + color: #23282c; + background-color: #ffc107; + border-color: #ffc107; } + .btn-ghost-warning:not(:disabled):not(.disabled):active:focus, .btn-ghost-warning:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + +.btn-ghost-danger { + color: #f86c6b; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-danger:hover { + color: #fff; + background-color: #f86c6b; + border-color: #f86c6b; } + .btn-ghost-danger:focus, .btn-ghost-danger.focus { + box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); } + .btn-ghost-danger.disabled, .btn-ghost-danger:disabled { + color: #f86c6b; + background-color: transparent; + border-color: transparent; } + .btn-ghost-danger:not(:disabled):not(.disabled):active, .btn-ghost-danger:not(:disabled):not(.disabled).active, + .show > .btn-ghost-danger.dropdown-toggle { + color: #fff; + background-color: #f86c6b; + border-color: #f86c6b; } + .btn-ghost-danger:not(:disabled):not(.disabled):active:focus, .btn-ghost-danger:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); } + +.btn-ghost-light { + color: #f0f3f5; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-light:hover { + color: #23282c; + background-color: #f0f3f5; + border-color: #f0f3f5; } + .btn-ghost-light:focus, .btn-ghost-light.focus { + box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); } + .btn-ghost-light.disabled, .btn-ghost-light:disabled { + color: #f0f3f5; + background-color: transparent; + border-color: transparent; } + .btn-ghost-light:not(:disabled):not(.disabled):active, .btn-ghost-light:not(:disabled):not(.disabled).active, + .show > .btn-ghost-light.dropdown-toggle { + color: #23282c; + background-color: #f0f3f5; + border-color: #f0f3f5; } + .btn-ghost-light:not(:disabled):not(.disabled):active:focus, .btn-ghost-light:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); } + +.btn-ghost-dark { + color: #2f353a; + background-color: transparent; + background-image: none; + border-color: transparent; } + .btn-ghost-dark:hover { + color: #fff; + background-color: #2f353a; + border-color: #2f353a; } + .btn-ghost-dark:focus, .btn-ghost-dark.focus { + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } + .btn-ghost-dark.disabled, .btn-ghost-dark:disabled { + color: #2f353a; + background-color: transparent; + border-color: transparent; } + .btn-ghost-dark:not(:disabled):not(.disabled):active, .btn-ghost-dark:not(:disabled):not(.disabled).active, + .show > .btn-ghost-dark.dropdown-toggle { + color: #fff; + background-color: #2f353a; + border-color: #2f353a; } + .btn-ghost-dark:not(:disabled):not(.disabled):active:focus, .btn-ghost-dark:not(:disabled):not(.disabled).active:focus, + .show > .btn-ghost-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); } + .callout { position: relative; padding: 0 1rem; margin: 1rem 0; - border-left: 4px solid #c2cfd6; } + border-left: 4px solid #c8ced3; + border-radius: 0.25rem; } .callout .chart-wrapper { position: absolute; top: 10px; @@ -6794,7 +7179,7 @@ button { width: 50%; } .callout-bordered { - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-left-width: 4px; } .callout code { @@ -6816,9 +7201,9 @@ button { color: #20a8d8; } .callout-secondary { - border-left-color: #a4b7c1; } + border-left-color: #c8ced3; } .callout-secondary h4 { - color: #a4b7c1; } + color: #c8ced3; } .callout-success { border-left-color: #4dbd74; } @@ -6846,17 +7231,17 @@ button { color: #f0f3f5; } .callout-dark { - border-left-color: #29363d; } + border-left-color: #2f353a; } .callout-dark h4 { - color: #29363d; } + color: #2f353a; } *[dir="rtl"] .callout { - border-right: 4px solid #c2cfd6; + border-right: 4px solid #c8ced3; border-left: 0; } *[dir="rtl"] .callout.callout-primary { border-right-color: #20a8d8; } *[dir="rtl"] .callout.callout-secondary { - border-right-color: #a4b7c1; } + border-right-color: #c8ced3; } *[dir="rtl"] .callout.callout-success { border-right-color: #4dbd74; } *[dir="rtl"] .callout.callout-info { @@ -6868,7 +7253,7 @@ button { *[dir="rtl"] .callout.callout-light { border-right-color: #f0f3f5; } *[dir="rtl"] .callout.callout-dark { - border-right-color: #29363d; } + border-right-color: #2f353a; } *[dir="rtl"] .callout .chart-wrapper { left: 0; float: left; } @@ -6881,10 +7266,10 @@ button { background-color: #1e9ecb; border-color: #187da0; } .card.bg-secondary { - border-color: #7e99a7; } + border-color: #a5aeb7; } .card.bg-secondary .card-header { - background-color: #9bb0bb; - border-color: #7e99a7; } + background-color: #c0c6cc; + border-color: #a5aeb7; } .card.bg-success { border-color: #379457; } .card.bg-success .card-header { @@ -6911,17 +7296,17 @@ button { background-color: #e7ecef; border-color: #cad4dc; } .card.bg-dark { - border-color: #0f1417; } + border-color: #121517; } .card.bg-dark .card-header { - background-color: #232e34; - border-color: #0f1417; } + background-color: #282d32; + border-color: #121517; } .card.drag, .card .drag { cursor: move; } .card-placeholder { background: rgba(0, 0, 0, 0.025); - border: 1px dashed #a4b7c1; } + border: 1px dashed #c8ced3; } .card-header > i { margin-right: 0.5rem; } @@ -6934,10 +7319,10 @@ button { border-top: 0; } .card-header .nav-tabs .nav-link { padding: 0.75rem 0.625rem; - color: #536c79; + color: #73818f; border-top: 0; } .card-header .nav-tabs .nav-link.active { - color: #151b1e; + color: #23282c; background: #fff; } .card-header-icon-bg { @@ -6946,24 +7331,21 @@ button { padding: 0.75rem 0; margin: -0.75rem 1.25rem -0.75rem -1.25rem; line-height: inherit; - color: #151b1e; + color: #23282c; text-align: center; background: transparent; - border-right: 1px solid #c2cfd6; } + border-right: 1px solid #c8ced3; } .card-header-actions { - position: absolute; - top: 0; - right: 0; - display: inline-flex; } + display: inline-block; + float: right; + margin-right: -0.25rem; } .card-header-action { - width: 2.8125rem; - padding: 0.75rem 0; - color: #151b1e; - text-align: center; - border-left: 1px solid #c2cfd6; } + padding: 0 0.25rem; + color: #73818f; } .card-header-action:hover { + color: #23282c; text-decoration: none; } .card-accent-primary { @@ -6971,7 +7353,7 @@ button { border-top-width: 2px; } .card-accent-secondary { - border-top-color: #a4b7c1; + border-top-color: #c8ced3; border-top-width: 2px; } .card-accent-success { @@ -6995,7 +7377,7 @@ button { border-top-width: 2px; } .card-accent-dark { - border-top-color: #29363d; + border-top-color: #2f353a; border-top-width: 2px; } .card-full { @@ -7003,7 +7385,7 @@ button { margin-right: -15px; margin-left: -15px; border: 0; - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #c8ced3; } @media (min-width: 576px) { .card-columns.cols-2 { @@ -7015,10 +7397,47 @@ button { base-chart.chart { display: block; } +canvas { + user-select: none; } + +.chartjs-tooltip { + position: absolute; + z-index: 1021; + display: flex; + flex-direction: column; + padding: 0.25rem 0.5rem; + color: #fff; + pointer-events: none; + background: rgba(0, 0, 0, 0.7); + opacity: 0; + transition: all 0.25s ease; + transform: translate(-50%, 0); + border-radius: 0.25rem; } + .chartjs-tooltip .tooltip-header { + margin-bottom: 0.5rem; } + .chartjs-tooltip .tooltip-header-item { + font-size: 0.76563rem; + font-weight: 700; } + .chartjs-tooltip .tooltip-body-item { + display: flex; + align-items: center; + font-size: 0.76563rem; + white-space: nowrap; } + .chartjs-tooltip .tooltip-body-item-value { + padding-left: 1rem; + margin-left: auto; + font-weight: 700; } + +.chartjs-tooltip-key { + display: inline-block; + width: 0.875rem; + height: 0.875rem; + margin-right: 0.875rem; } + .dropdown-item { position: relative; padding: 10px 20px; - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #c8ced3; } .dropdown-item:last-child { border-bottom: 0; } .dropdown-item i { @@ -7026,7 +7445,7 @@ base-chart.chart { width: 20px; margin-right: 10px; margin-left: -10px; - color: #c2cfd6; + color: #c8ced3; text-align: center; } .dropdown-item .badge { position: absolute; @@ -7035,13 +7454,13 @@ base-chart.chart { .dropdown-header { padding: 8px 20px; - background: #f0f3f5; - border-bottom: 1px solid #c2cfd6; } + background: #e4e7ea; + border-bottom: 1px solid #c8ced3; } .dropdown-header .btn { margin-top: -7px; - color: #536c79; } + color: #73818f; } .dropdown-header .btn:hover { - color: #151b1e; } + color: #23282c; } .dropdown-header .btn.pull-right { margin-right: -20px; } @@ -7064,9 +7483,9 @@ base-chart.chart { flex-wrap: wrap; align-items: center; padding: 0 1rem; - color: #151b1e; + color: #23282c; background: #f0f3f5; - border-top: 1px solid #c2cfd6; } + border-top: 1px solid #c8ced3; } .row.row-equal { padding-right: 7.5px; @@ -7215,6 +7634,47 @@ base-chart.chart { height: 2px; background: #20a8d8; } +.list-group-accent .list-group-item { + margin-bottom: 1px; + border-top: 0; + border-right: 0; + border-bottom: 0; + border-radius: 0; } + .list-group-accent .list-group-item.list-group-item-divider { + position: relative; } + .list-group-accent .list-group-item.list-group-item-divider::before { + position: absolute; + bottom: -1px; + left: 5%; + width: 90%; + height: 1px; + content: ""; + background-color: #e4e7ea; } + +.list-group-item-accent-primary { + border-left: 4px solid #20a8d8; } + +.list-group-item-accent-secondary { + border-left: 4px solid #c8ced3; } + +.list-group-item-accent-success { + border-left: 4px solid #4dbd74; } + +.list-group-item-accent-info { + border-left: 4px solid #63c2de; } + +.list-group-item-accent-warning { + border-left: 4px solid #ffc107; } + +.list-group-item-accent-danger { + border-left: 4px solid #f86c6b; } + +.list-group-item-accent-light { + border-left: 4px solid #f0f3f5; } + +.list-group-item-accent-dark { + border-left: 4px solid #2f353a; } + .modal-primary .modal-content { border-color: #20a8d8; } @@ -7223,11 +7683,11 @@ base-chart.chart { background-color: #20a8d8; } .modal-secondary .modal-content { - border-color: #a4b7c1; } + border-color: #c8ced3; } .modal-secondary .modal-header { color: #fff; - background-color: #a4b7c1; } + background-color: #c8ced3; } .modal-success .modal-content { border-color: #4dbd74; } @@ -7265,30 +7725,30 @@ base-chart.chart { background-color: #f0f3f5; } .modal-dark .modal-content { - border-color: #29363d; } + border-color: #2f353a; } .modal-dark .modal-header { color: #fff; - background-color: #29363d; } + background-color: #2f353a; } .nav-tabs .nav-link { - color: #536c79; } + color: #73818f; } .nav-tabs .nav-link:hover { cursor: pointer; } .nav-tabs .nav-link.active { - color: #29363d; + color: #2f353a; background: #fff; - border-color: #c2cfd6; + border-color: #c8ced3; border-bottom-color: #fff; } .nav-tabs .nav-link.active:focus { background: #fff; - border-color: #c2cfd6; + border-color: #c8ced3; border-bottom-color: #fff; } .tab-content { margin-top: -1px; background: #fff; - border: 1px solid #c2cfd6; } + border: 1px solid #c8ced3; } .tab-content .tab-pane { padding: 1rem; } @@ -7298,7 +7758,7 @@ base-chart.chart { .nav-fill .nav-link { background-color: #fff; - border-color: #c2cfd6; } + border-color: #c8ced3; } .nav-fill .nav-link + .nav-link { margin-left: -1px; } @@ -7317,7 +7777,7 @@ base-chart.chart { padding: 0; margin: 0; background-color: #fff; - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #c8ced3; } .app-header .navbar-brand { display: inline-flex; align-items: center; @@ -7326,18 +7786,17 @@ base-chart.chart { height: 55px; padding: 0; margin-right: 0; - background-color: #fff; - border-bottom: 1px solid #c2cfd6; } + background-color: transparent; } .app-header .navbar-brand .navbar-brand-minimized { display: none; } .app-header .navbar-toggler { min-width: 50px; padding: 0.25rem 0; } .app-header .navbar-toggler:hover .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2329363d' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .app-header .navbar-toggler-icon { height: 23px; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23536c79' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .app-header .navbar-nav { flex-direction: row; align-items: center; } @@ -7369,9 +7828,9 @@ base-chart.chart { min-width: 180px; } .navbar-nav .nav-link { - color: #536c79; } + color: #73818f; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { - color: #29363d; } + color: #2f353a; } .navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus, .navbar-nav .active > .nav-link, @@ -7383,7 +7842,7 @@ base-chart.chart { .navbar-nav .nav-link.active, .navbar-nav .nav-link.active:hover, .navbar-nav .nav-link.active:focus { - color: #29363d; } + color: #2f353a; } .navbar-divider { background-color: rgba(0, 0, 0, 0.075); } @@ -7391,8 +7850,7 @@ base-chart.chart { @media (min-width: 992px) { .brand-minimized .app-header .navbar-brand { width: 50px; - background-color: #fff; - border-bottom: 1px solid #c2cfd6; } + background-color: transparent; } .brand-minimized .app-header .navbar-brand .navbar-brand-full { display: none; } .brand-minimized .app-header .navbar-brand .navbar-brand-minimized { @@ -7424,7 +7882,7 @@ base-chart.chart { .progress-group-text { font-size: 0.76563rem; - color: #536c79; } + color: #73818f; } .progress-group-header { display: flex; @@ -7446,7 +7904,7 @@ base-chart.chart { flex-direction: column; padding: 0; color: #fff; - background: #29363d; } + background: #2f353a; } .sidebar .sidebar-close { position: absolute; right: 0; @@ -7468,7 +7926,7 @@ base-chart.chart { background: rgba(0, 0, 0, 0.2); } .sidebar .sidebar-form .form-control { color: #fff; - background: #151b1f; + background: #181b1e; border: 0; } .sidebar .sidebar-form .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } @@ -7487,7 +7945,7 @@ base-chart.chart { padding: 0.75rem 1rem; font-size: 80%; font-weight: 700; - color: #c2cfd6; + color: #e4e7ea; text-transform: uppercase; } .sidebar .nav-divider { height: 10px; } @@ -7515,14 +7973,14 @@ base-chart.chart { width: 1.09375rem; margin: 0 0.5rem 0 0; font-size: 0.875rem; - color: #536c79; + color: #73818f; text-align: center; } .sidebar .nav-link .badge { float: right; margin-top: 2px; } .sidebar .nav-link.active { color: #fff; - background: #33444c; } + background: #3a4248; } .sidebar .nav-link.active .nav-icon { color: #20a8d8; } .sidebar .nav-link:hover { @@ -7541,11 +7999,11 @@ base-chart.chart { .sidebar .nav-link.nav-link-primary:hover i { color: #fff; } .sidebar .nav-link.nav-link-secondary { - background: #a4b7c1; } + background: #c8ced3; } .sidebar .nav-link.nav-link-secondary .nav-icon { color: rgba(255, 255, 255, 0.7); } .sidebar .nav-link.nav-link-secondary:hover { - background: #95abb7; } + background: #bac1c8; } .sidebar .nav-link.nav-link-secondary:hover i { color: #fff; } .sidebar .nav-link.nav-link-success { @@ -7589,11 +8047,11 @@ base-chart.chart { .sidebar .nav-link.nav-link-light:hover i { color: #fff; } .sidebar .nav-link.nav-link-dark { - background: #29363d; } + background: #2f353a; } .sidebar .nav-link.nav-link-dark .nav-icon { color: rgba(255, 255, 255, 0.7); } .sidebar .nav-link.nav-link-dark:hover { - background: #1f292e; } + background: #24282c; } .sidebar .nav-link.nav-link-dark:hover i { color: #fff; } .sidebar .nav-dropdown-toggle { @@ -7608,7 +8066,7 @@ base-chart.chart { padding: 0; margin-top: -4px; content: ""; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23536c79' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform .3s; } @@ -7626,7 +8084,7 @@ base-chart.chart { .sidebar .nav-label { display: block; padding: 0.09375rem 1rem; - color: #c2cfd6; } + color: #e4e7ea; } .sidebar .nav-label:hover { color: #fff; text-decoration: none; } @@ -7634,11 +8092,11 @@ base-chart.chart { width: 20px; margin: -3px 0.5rem 0 0; font-size: 10px; - color: #536c79; + color: #73818f; text-align: center; vertical-align: middle; } .sidebar .progress { - background-color: #485f6b !important; } + background-color: #515c64 !important; } .sidebar .sidebar-footer { flex: 0 0 auto; padding: 0.75rem 1rem; @@ -7655,7 +8113,7 @@ base-chart.chart { width: 50px; height: 50px; content: ""; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23536c79' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12.5px; @@ -7745,7 +8203,7 @@ base-chart.chart { .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items { display: none; max-height: 1000px; - background: #29363d; } + background: #2f353a; } .sidebar-minimized .sidebar .nav > .nav-dropdown:hover { background: #20a8d8; } .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items { @@ -7783,7 +8241,7 @@ base-chart.chart { right: 50px; left: 0; } -.switch.switch-default { +.switch-default { position: relative; display: inline-block; width: 40px; @@ -7791,12 +8249,12 @@ base-chart.chart { vertical-align: top; cursor: pointer; background-color: transparent; } - .switch.switch-default .switch-input { + .switch-default .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } - .switch.switch-default .switch-label { + .switch-default .switch-label { position: relative; display: block; height: inherit; @@ -7804,57 +8262,57 @@ base-chart.chart { font-weight: 600; text-transform: uppercase; background-color: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 2px; transition: opacity background .15s ease-out; } - .switch.switch-default .switch-input:checked ~ .switch-label::before { + .switch-default .switch-input:checked ~ .switch-label::before { opacity: 0; } - .switch.switch-default .switch-input:checked ~ .switch-label::after { + .switch-default .switch-input:checked ~ .switch-label::after { opacity: 1; } - .switch.switch-default .switch-handle { + .switch-default .switch-handle { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 1px; transition: left .15s ease-out; } - .switch.switch-default .switch-input:checked ~ .switch-handle { + .switch-default .switch-input:checked ~ .switch-handle { left: 18px; } - .switch.switch-default.switch-lg { + .switch-default.switch-lg { width: 48px; height: 28px; } - .switch.switch-default.switch-lg .switch-label { + .switch-default.switch-lg .switch-label { font-size: 12px; } - .switch.switch-default.switch-lg .switch-handle { + .switch-default.switch-lg .switch-handle { width: 24px; height: 24px; } - .switch.switch-default.switch-lg .switch-input:checked ~ .switch-handle { + .switch-default.switch-lg .switch-input:checked ~ .switch-handle { left: 22px; } - .switch.switch-default.switch-sm { + .switch-default.switch-sm { width: 32px; height: 20px; } - .switch.switch-default.switch-sm .switch-label { + .switch-default.switch-sm .switch-label { font-size: 8px; } - .switch.switch-default.switch-sm .switch-handle { + .switch-default.switch-sm .switch-handle { width: 16px; height: 16px; } - .switch.switch-default.switch-sm .switch-input:checked ~ .switch-handle { + .switch-default.switch-sm .switch-input:checked ~ .switch-handle { left: 14px; } - .switch.switch-default.switch-xs { + .switch-default.switch-xs { width: 24px; height: 16px; } - .switch.switch-default.switch-xs .switch-label { + .switch-default.switch-xs .switch-label { font-size: 7px; } - .switch.switch-default.switch-xs .switch-handle { + .switch-default.switch-xs .switch-handle { width: 12px; height: 12px; } - .switch.switch-default.switch-xs .switch-input:checked ~ .switch-handle { + .switch-default.switch-xs .switch-input:checked ~ .switch-handle { left: 10px; } -.switch.switch-text { +.switch-text { position: relative; display: inline-block; width: 48px; @@ -7862,12 +8320,12 @@ base-chart.chart { vertical-align: top; cursor: pointer; background-color: transparent; } - .switch.switch-text .switch-input { + .switch-text .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } - .switch.switch-text .switch-label { + .switch-text .switch-label { position: relative; display: block; height: inherit; @@ -7875,11 +8333,11 @@ base-chart.chart { font-weight: 600; text-transform: uppercase; background-color: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 2px; transition: opacity background .15s ease-out; } - .switch.switch-text .switch-label::before, - .switch.switch-text .switch-label::after { + .switch-text .switch-label::before, + .switch-text .switch-label::after { position: absolute; top: 50%; width: 50%; @@ -7887,63 +8345,63 @@ base-chart.chart { line-height: 1; text-align: center; transition: inherit; } - .switch.switch-text .switch-label::before { + .switch-text .switch-label::before { right: 1px; - color: #c2cfd6; + color: #e4e7ea; content: attr(data-off); } - .switch.switch-text .switch-label::after { + .switch-text .switch-label::after { left: 1px; color: #fff; content: attr(data-on); opacity: 0; } - .switch.switch-text .switch-input:checked ~ .switch-label::before { + .switch-text .switch-input:checked ~ .switch-label::before { opacity: 0; } - .switch.switch-text .switch-input:checked ~ .switch-label::after { + .switch-text .switch-input:checked ~ .switch-label::after { opacity: 1; } - .switch.switch-text .switch-handle { + .switch-text .switch-handle { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 1px; transition: left .15s ease-out; } - .switch.switch-text .switch-input:checked ~ .switch-handle { + .switch-text .switch-input:checked ~ .switch-handle { left: 26px; } - .switch.switch-text.switch-lg { + .switch-text.switch-lg { width: 56px; height: 28px; } - .switch.switch-text.switch-lg .switch-label { + .switch-text.switch-lg .switch-label { font-size: 12px; } - .switch.switch-text.switch-lg .switch-handle { + .switch-text.switch-lg .switch-handle { width: 24px; height: 24px; } - .switch.switch-text.switch-lg .switch-input:checked ~ .switch-handle { + .switch-text.switch-lg .switch-input:checked ~ .switch-handle { left: 30px; } - .switch.switch-text.switch-sm { + .switch-text.switch-sm { width: 40px; height: 20px; } - .switch.switch-text.switch-sm .switch-label { + .switch-text.switch-sm .switch-label { font-size: 8px; } - .switch.switch-text.switch-sm .switch-handle { + .switch-text.switch-sm .switch-handle { width: 16px; height: 16px; } - .switch.switch-text.switch-sm .switch-input:checked ~ .switch-handle { + .switch-text.switch-sm .switch-input:checked ~ .switch-handle { left: 22px; } - .switch.switch-text.switch-xs { + .switch-text.switch-xs { width: 32px; height: 16px; } - .switch.switch-text.switch-xs .switch-label { + .switch-text.switch-xs .switch-label { font-size: 7px; } - .switch.switch-text.switch-xs .switch-handle { + .switch-text.switch-xs .switch-handle { width: 12px; height: 12px; } - .switch.switch-text.switch-xs .switch-input:checked ~ .switch-handle { + .switch-text.switch-xs .switch-input:checked ~ .switch-handle { left: 18px; } -.switch.switch-icon { +.switch-icon { position: relative; display: inline-block; width: 48px; @@ -7951,12 +8409,12 @@ base-chart.chart { vertical-align: top; cursor: pointer; background-color: transparent; } - .switch.switch-icon .switch-input { + .switch-icon .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } - .switch.switch-icon .switch-label { + .switch-icon .switch-label { position: relative; display: block; height: inherit; @@ -7965,11 +8423,11 @@ base-chart.chart { font-weight: 600; text-transform: uppercase; background-color: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 2px; transition: opacity background .15s ease-out; } - .switch.switch-icon .switch-label::before, - .switch.switch-icon .switch-label::after { + .switch-icon .switch-label::before, + .switch-icon .switch-label::after { position: absolute; top: 50%; width: 50%; @@ -7977,63 +8435,63 @@ base-chart.chart { line-height: 1; text-align: center; transition: inherit; } - .switch.switch-icon .switch-label::before { + .switch-icon .switch-label::before { right: 1px; - color: #c2cfd6; + color: #e4e7ea; content: attr(data-off); } - .switch.switch-icon .switch-label::after { + .switch-icon .switch-label::after { left: 1px; color: #fff; content: attr(data-on); opacity: 0; } - .switch.switch-icon .switch-input:checked ~ .switch-label::before { + .switch-icon .switch-input:checked ~ .switch-label::before { opacity: 0; } - .switch.switch-icon .switch-input:checked ~ .switch-label::after { + .switch-icon .switch-input:checked ~ .switch-label::after { opacity: 1; } - .switch.switch-icon .switch-handle { + .switch-icon .switch-handle { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 1px; transition: left .15s ease-out; } - .switch.switch-icon .switch-input:checked ~ .switch-handle { + .switch-icon .switch-input:checked ~ .switch-handle { left: 26px; } - .switch.switch-icon.switch-lg { + .switch-icon.switch-lg { width: 56px; height: 28px; } - .switch.switch-icon.switch-lg .switch-label { + .switch-icon.switch-lg .switch-label { font-size: 12px; } - .switch.switch-icon.switch-lg .switch-handle { + .switch-icon.switch-lg .switch-handle { width: 24px; height: 24px; } - .switch.switch-icon.switch-lg .switch-input:checked ~ .switch-handle { + .switch-icon.switch-lg .switch-input:checked ~ .switch-handle { left: 30px; } - .switch.switch-icon.switch-sm { + .switch-icon.switch-sm { width: 40px; height: 20px; } - .switch.switch-icon.switch-sm .switch-label { + .switch-icon.switch-sm .switch-label { font-size: 8px; } - .switch.switch-icon.switch-sm .switch-handle { + .switch-icon.switch-sm .switch-handle { width: 16px; height: 16px; } - .switch.switch-icon.switch-sm .switch-input:checked ~ .switch-handle { + .switch-icon.switch-sm .switch-input:checked ~ .switch-handle { left: 22px; } - .switch.switch-icon.switch-xs { + .switch-icon.switch-xs { width: 32px; height: 16px; } - .switch.switch-icon.switch-xs .switch-label { + .switch-icon.switch-xs .switch-label { font-size: 7px; } - .switch.switch-icon.switch-xs .switch-handle { + .switch-icon.switch-xs .switch-handle { width: 12px; height: 12px; } - .switch.switch-icon.switch-xs .switch-input:checked ~ .switch-handle { + .switch-icon.switch-xs .switch-input:checked ~ .switch-handle { left: 18px; } -.switch.switch-3d { +.switch-3d { position: relative; display: inline-block; width: 40px; @@ -8041,12 +8499,12 @@ base-chart.chart { vertical-align: top; cursor: pointer; background-color: transparent; } - .switch.switch-3d .switch-input { + .switch-3d .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } - .switch.switch-3d .switch-label { + .switch-3d .switch-label { position: relative; display: block; height: inherit; @@ -8054,69 +8512,58 @@ base-chart.chart { font-weight: 600; text-transform: uppercase; background-color: #f0f3f5; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 2px; transition: opacity background .15s ease-out; } - .switch.switch-3d .switch-input:checked ~ .switch-label::before { + .switch-3d .switch-input:checked ~ .switch-label::before { opacity: 0; } - .switch.switch-3d .switch-input:checked ~ .switch-label::after { + .switch-3d .switch-input:checked ~ .switch-label::after { opacity: 1; } - .switch.switch-3d .switch-handle { + .switch-3d .switch-handle { position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: #fff; - border: 1px solid #c2cfd6; + border: 1px solid #c8ced3; border-radius: 1px; transition: left .15s ease-out; border: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } - .switch.switch-3d .switch-input:checked ~ .switch-handle { + .switch-3d .switch-input:checked ~ .switch-handle { left: 16px; } - .switch.switch-3d.switch-lg { + .switch-3d.switch-lg { width: 48px; height: 28px; } - .switch.switch-3d.switch-lg .switch-label { + .switch-3d.switch-lg .switch-label { font-size: 12px; } - .switch.switch-3d.switch-lg .switch-handle { + .switch-3d.switch-lg .switch-handle { width: 28px; height: 28px; } - .switch.switch-3d.switch-lg .switch-input:checked ~ .switch-handle { + .switch-3d.switch-lg .switch-input:checked ~ .switch-handle { left: 20px; } - .switch.switch-3d.switch-sm { + .switch-3d.switch-sm { width: 32px; height: 20px; } - .switch.switch-3d.switch-sm .switch-label { + .switch-3d.switch-sm .switch-label { font-size: 8px; } - .switch.switch-3d.switch-sm .switch-handle { + .switch-3d.switch-sm .switch-handle { width: 20px; height: 20px; } - .switch.switch-3d.switch-sm .switch-input:checked ~ .switch-handle { + .switch-3d.switch-sm .switch-input:checked ~ .switch-handle { left: 12px; } - .switch.switch-3d.switch-xs { + .switch-3d.switch-xs { width: 24px; height: 16px; } - .switch.switch-3d.switch-xs .switch-label { + .switch-3d.switch-xs .switch-label { font-size: 7px; } - .switch.switch-3d.switch-xs .switch-handle { + .switch-3d.switch-xs .switch-handle { width: 16px; height: 16px; } - .switch.switch-3d.switch-xs .switch-input:checked ~ .switch-handle { + .switch-3d.switch-xs .switch-input:checked ~ .switch-handle { left: 8px; } -.switch-pill .switch-label, .switch.switch-3d .switch-label, -.switch-pill .switch-handle, -.switch.switch-3d .switch-handle { - border-radius: 50em; } - -.switch-pill .switch-label::before, .switch.switch-3d .switch-label::before { - right: 2px; } - -.switch-pill .switch-label::after, .switch.switch-3d .switch-label::after { - left: 2px; } - .switch-primary > .switch-input:checked ~ .switch-label { background: #20a8d8; border-color: #1985ac; } @@ -8144,30 +8591,30 @@ base-chart.chart { border-color: #20a8d8; } .switch-secondary > .switch-input:checked ~ .switch-label { - background: #a4b7c1; - border-color: #869fac; } + background: #c8ced3; + border-color: #acb5bc; } .switch-secondary > .switch-input:checked ~ .switch-handle { - border-color: #869fac; } + border-color: #acb5bc; } .switch-secondary-outline > .switch-input:checked ~ .switch-label { background: #fff; - border-color: #a4b7c1; } + border-color: #c8ced3; } .switch-secondary-outline > .switch-input:checked ~ .switch-label::after { - color: #a4b7c1; } + color: #c8ced3; } .switch-secondary-outline > .switch-input:checked ~ .switch-handle { - border-color: #a4b7c1; } + border-color: #c8ced3; } .switch-secondary-outline-alt > .switch-input:checked ~ .switch-label { background: #fff; - border-color: #a4b7c1; } + border-color: #c8ced3; } .switch-secondary-outline-alt > .switch-input:checked ~ .switch-label::after { - color: #a4b7c1; } + color: #c8ced3; } .switch-secondary-outline-alt > .switch-input:checked ~ .switch-handle { - background: #a4b7c1; - border-color: #a4b7c1; } + background: #c8ced3; + border-color: #c8ced3; } .switch-success > .switch-input:checked ~ .switch-label { background: #4dbd74; @@ -8300,33 +8747,44 @@ base-chart.chart { border-color: #f0f3f5; } .switch-dark > .switch-input:checked ~ .switch-label { - background: #29363d; - border-color: #151b1f; } + background: #2f353a; + border-color: #181b1e; } .switch-dark > .switch-input:checked ~ .switch-handle { - border-color: #151b1f; } + border-color: #181b1e; } .switch-dark-outline > .switch-input:checked ~ .switch-label { background: #fff; - border-color: #29363d; } + border-color: #2f353a; } .switch-dark-outline > .switch-input:checked ~ .switch-label::after { - color: #29363d; } + color: #2f353a; } .switch-dark-outline > .switch-input:checked ~ .switch-handle { - border-color: #29363d; } + border-color: #2f353a; } .switch-dark-outline-alt > .switch-input:checked ~ .switch-label { background: #fff; - border-color: #29363d; } + border-color: #2f353a; } .switch-dark-outline-alt > .switch-input:checked ~ .switch-label::after { - color: #29363d; } + color: #2f353a; } .switch-dark-outline-alt > .switch-input:checked ~ .switch-handle { - background: #29363d; - border-color: #29363d; } + background: #2f353a; + border-color: #2f353a; } + +.switch-pill .switch-label, .switch-3d .switch-label, +.switch-pill .switch-handle, +.switch-3d .switch-handle { + border-radius: 50em; } + +.switch-pill .switch-label::before, .switch-3d .switch-label::before { + right: 2px; } + +.switch-pill .switch-label::after, .switch-3d .switch-label::after { + left: 2px; } .table-outline { - border: 1px solid #a4b7c1; } + border: 1px solid #c8ced3; } .table-outline td { vertical-align: middle; } @@ -8391,6 +8849,8 @@ html[dir="rtl"] .aside-menu { position: fixed; z-index: 1019; width: 200px; + height: 100vh; } + .sidebar-fixed .app-header + .app-body .sidebar { height: calc(100vh - 55px); } .sidebar-compact .sidebar { flex: 0 0 150px; } @@ -8405,6 +8865,8 @@ html[dir="rtl"] .aside-menu { .sidebar-off-canvas .sidebar { position: fixed; z-index: 1019; + height: 100%; } + .sidebar-off-canvas .app-header + .app-body .sidebar { height: calc(100vh - 55px); } html:not([dir="rtl"]) .sidebar-compact .sidebar { margin-left: -150px; } @@ -8419,9 +8881,13 @@ html[dir="rtl"] .aside-menu { height: 100%; } .aside-menu-fixed .aside-menu .tab-content { height: calc(100vh - 2.375rem - 55px); } + .aside-menu-fixed .app-header + .app-body .aside-menu { + height: calc(100vh - 55px); } .aside-menu-off-canvas .aside-menu { position: fixed; z-index: 1019; + height: 100%; } + .aside-menu-off-canvas .app-header + .app-body .aside-menu { height: calc(100vh - 55px); } html:not([dir="rtl"]) .aside-menu-fixed .aside-menu, html:not([dir="rtl"]) .aside-menu-off-canvas .aside-menu { @@ -8900,10 +9366,9 @@ html[dir="rtl"] .aside-menu-show .aside-menu { z-index: 1020; width: 100%; text-align: center; - background-color: #fff; - border-bottom: 1px solid #c2cfd6; } + background-color: #fff; } .app-header .navbar-toggler { - color: #536c79; } + color: #fff; } .app-header .navbar-brand { position: absolute; left: 50%; @@ -8915,6 +9380,8 @@ html[dir="rtl"] .aside-menu-show .aside-menu { z-index: 1019; width: 200px; height: calc(100vh - 55px); } + .sidebar-minimizer { + display: none; } .aside-menu { position: fixed; right: 0; @@ -9220,20 +9687,20 @@ button.bg-white:focus { background-color: #e6e6e6 !important; } .bg-gray { - background-color: #536c79 !important; } + background-color: #73818f !important; } a.bg-gray:hover, a.bg-gray:focus, button.bg-gray:hover, button.bg-gray:focus { - background-color: #3e515b !important; } + background-color: #5c6873 !important; } .bg-gray-dark { - background-color: #29363d !important; } + background-color: #2f353a !important; } a.bg-gray-dark:hover, a.bg-gray-dark:focus, button.bg-gray-dark:hover, button.bg-gray-dark:focus { - background-color: #151b1f !important; } + background-color: #181b1e !important; } .bg-light-blue { background-color: #63c2de !important; } @@ -9252,68 +9719,140 @@ button.bg-gray-100:focus { background-color: #d1dbe1 !important; } .bg-gray-200 { - background-color: #c2cfd6 !important; } + background-color: #e4e7ea !important; } a.bg-gray-200:hover, a.bg-gray-200:focus, button.bg-gray-200:hover, button.bg-gray-200:focus { - background-color: #a4b7c2 !important; } + background-color: #c7ced4 !important; } .bg-gray-300 { - background-color: #a4b7c1 !important; } + background-color: #c8ced3 !important; } a.bg-gray-300:hover, a.bg-gray-300:focus, button.bg-gray-300:hover, button.bg-gray-300:focus { - background-color: #869fac !important; } + background-color: #acb5bc !important; } .bg-gray-400 { - background-color: #869fac !important; } + background-color: #acb4bc !important; } a.bg-gray-400:hover, a.bg-gray-400:focus, button.bg-gray-400:hover, button.bg-gray-400:focus { - background-color: #688797 !important; } + background-color: #909ba5 !important; } .bg-gray-500 { - background-color: #678898 !important; } + background-color: #8f9ba6 !important; } a.bg-gray-500:hover, a.bg-gray-500:focus, button.bg-gray-500:hover, button.bg-gray-500:focus { - background-color: #526d7a !important; } + background-color: #73828f !important; } .bg-gray-600 { - background-color: #536c79 !important; } + background-color: #73818f !important; } a.bg-gray-600:hover, a.bg-gray-600:focus, button.bg-gray-600:hover, button.bg-gray-600:focus { - background-color: #3e515b !important; } + background-color: #5c6873 !important; } .bg-gray-700 { - background-color: #3e515b !important; } + background-color: #5c6873 !important; } a.bg-gray-700:hover, a.bg-gray-700:focus, button.bg-gray-700:hover, button.bg-gray-700:focus { - background-color: #29363d !important; } + background-color: #454e57 !important; } .bg-gray-800 { - background-color: #29363d !important; } + background-color: #2f353a !important; } a.bg-gray-800:hover, a.bg-gray-800:focus, button.bg-gray-800:hover, button.bg-gray-800:focus { - background-color: #151b1f !important; } + background-color: #181b1e !important; } .bg-gray-900 { - background-color: #151b1e !important; } + background-color: #23282c !important; } a.bg-gray-900:hover, a.bg-gray-900:focus, button.bg-gray-900:hover, button.bg-gray-900:focus { - background-color: black !important; } + background-color: #0c0e10 !important; } + +.bg-gray-100 { + background-color: #f0f3f5 !important; } + +a.bg-gray-100:hover, a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: #d1dbe1 !important; } + +.bg-gray-200 { + background-color: #e4e7ea !important; } + +a.bg-gray-200:hover, a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: #c7ced4 !important; } + +.bg-gray-300 { + background-color: #c8ced3 !important; } + +a.bg-gray-300:hover, a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: #acb5bc !important; } + +.bg-gray-400 { + background-color: #acb4bc !important; } + +a.bg-gray-400:hover, a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: #909ba5 !important; } + +.bg-gray-500 { + background-color: #8f9ba6 !important; } + +a.bg-gray-500:hover, a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: #73828f !important; } + +.bg-gray-600 { + background-color: #73818f !important; } + +a.bg-gray-600:hover, a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: #5c6873 !important; } + +.bg-gray-700 { + background-color: #5c6873 !important; } + +a.bg-gray-700:hover, a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: #454e57 !important; } + +.bg-gray-800 { + background-color: #2f353a !important; } + +a.bg-gray-800:hover, a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: #181b1e !important; } + +.bg-gray-900 { + background-color: #23282c !important; } + +a.bg-gray-900:hover, a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: #0c0e10 !important; } .bg-box { display: flex; @@ -9338,34 +9877,34 @@ button.bg-gray-900:focus { border-left: 0 !important; } .b-a-1 { - border: 1px solid #c2cfd6; } + border: 1px solid #c8ced3; } .b-t-1 { - border-top: 1px solid #c2cfd6; } + border-top: 1px solid #c8ced3; } .b-r-1 { - border-right: 1px solid #c2cfd6; } + border-right: 1px solid #c8ced3; } .b-b-1 { - border-bottom: 1px solid #c2cfd6; } + border-bottom: 1px solid #c8ced3; } .b-l-1 { - border-left: 1px solid #c2cfd6; } + border-left: 1px solid #c8ced3; } .b-a-2 { - border: 2px solid #c2cfd6; } + border: 2px solid #c8ced3; } .b-t-2 { - border-top: 2px solid #c2cfd6; } + border-top: 2px solid #c8ced3; } .b-r-2 { - border-right: 2px solid #c2cfd6; } + border-right: 2px solid #c8ced3; } .b-b-2 { - border-bottom: 2px solid #c2cfd6; } + border-bottom: 2px solid #c8ced3; } .b-l-2 { - border-left: 2px solid #c2cfd6; } + border-left: 2px solid #c8ced3; } @media (max-width: 575.98px) { .d-down-none { @@ -9416,7 +9955,15 @@ body { .text-value { font-size: 1.3125rem; - font-weight: 700; } + font-weight: 600; } + +.text-value-sm { + font-size: 1.09375rem; + font-weight: 600; } + +.text-value-lg { + font-size: 1.53125rem; + font-weight: 600; } .text-white .text-muted { color: rgba(255, 255, 255, 0.6) !important; } diff --git a/src/scss/vendors/chart.js/chart.css b/src/scss/vendors/chart.js/chart.css index a9c2343..b18e2a1 100644 --- a/src/scss/vendors/chart.js/chart.css +++ b/src/scss/vendors/chart.js/chart.css @@ -23,6 +23,7 @@ white-space: nowrap; position: relative; margin-bottom: 4px; + border-radius: 0.25rem; padding: 2px 8px 2px 28px; font-size: smaller; cursor: default; } @@ -39,4 +40,5 @@ left: 0; top: 0; width: 20px; - height: 20px; } + height: 20px; + border-radius: 0.25rem; } diff --git a/src/views/Base/Dropdowns/Dropdowns.js b/src/views/Base/Dropdowns/Dropdowns.js index aa0c19c..8294015 100644 --- a/src/views/Base/Dropdowns/Dropdowns.js +++ b/src/views/Base/Dropdowns/Dropdowns.js @@ -61,7 +61,7 @@ class Dropdowns extends Component { This dropdown's menu is right-aligned - + Header Action Another Action @@ -81,7 +81,7 @@ class Dropdowns extends Component { Large Dropdown - + Header Action Another Action @@ -93,7 +93,7 @@ class Dropdowns extends Component { Normal Dropdown - + Header Action Another Action @@ -129,11 +129,11 @@ class Dropdowns extends Component { > Custom Dropdown Content * - -
    {this.toggle(5);}}>Custom dropdown item 1
    -
    {this.toggle(5);}}>Custom dropdown item 2
    -
    {this.toggle(5);}}>Custom dropdown item 3
    -
    + +
    {this.toggle(5);}}>Custom dropdown item 1
    +
    {this.toggle(5);}}>Custom dropdown item 2
    +
    {this.toggle(5);}}>Custom dropdown text 3
    +
    {this.toggle(5);}}>Custom dropdown item 4
     @@ -165,4 +165,4 @@ class Dropdowns extends Component { } } -export default Dropdowns; \ No newline at end of file +export default Dropdowns; diff --git a/src/views/Widgets/Widget03.js b/src/views/Widgets/Widget03.js index 1158076..37a82e4 100644 --- a/src/views/Widgets/Widget03.js +++ b/src/views/Widgets/Widget03.js @@ -16,6 +16,8 @@ const defaultProps = { class Widget03 extends Component { render() { + + // eslint-disable-next-line const { children, className, cssModule, dataBox, ...attributes } = this.props; // demo purposes only @@ -60,4 +62,4 @@ class Widget03 extends Component { Widget03.propTypes = propTypes; Widget03.defaultProps = defaultProps; -export default Widget03; \ No newline at end of file +export default Widget03;