From 84d33242eab0d874dbc8d97759e90865fac62a62 Mon Sep 17 00:00:00 2001 From: salmento Date: Sun, 23 Jan 2022 12:02:36 +0200 Subject: [PATCH 1/3] color sidebar --- public/index.html | 2 +- src/assets/css/paper-dashboard.css | 185 ++-- src/assets/css/paper-dashboard.min.css | 165 ++-- .../paper-dashboard/_checkboxes-radio.scss | 208 ++--- .../scss/paper-dashboard/_dropdown.scss | 831 +++++++++--------- .../_sidebar-and-main-panel.scss | 1 + .../scss/paper-dashboard/_variables.scss | 588 ++++++------- .../paper-dashboard/mixins/_page-header.scss | 5 +- .../mixins/_vendor-prefixes.scss | 542 +++++++----- src/components/Sidebar/Sidebar.Auth.tsx | 12 +- 10 files changed, 1295 insertions(+), 1244 deletions(-) diff --git a/public/index.html b/public/index.html index 8c36c36..78454bf 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - + diff --git a/src/assets/css/paper-dashboard.css b/src/assets/css/paper-dashboard.css index 3b49a16..7654115 100644 --- a/src/assets/css/paper-dashboard.css +++ b/src/assets/css/paper-dashboard.css @@ -403,7 +403,7 @@ Copyright (c) 2015 Daniel Eden border-radius: 3px; padding: 11px 22px; cursor: pointer; - background-color: #66615b; + background-color: #007f60; color: #ffffff; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; @@ -489,13 +489,13 @@ fieldset[disabled] .navbar .navbar-nav > a.btn:focus, fieldset[disabled] .navbar .navbar-nav > a.btn.focus, fieldset[disabled] .navbar .navbar-nav > a.btn:active, fieldset[disabled] .navbar .navbar-nav > a.btn.active { - background-color: #66615b; - border-color: #66615b; + background-color: #007f60; + border-color: #007f60; } .btn.btn-simple, .navbar .navbar-nav > a.btn.btn-simple { - color: #66615b; - border-color: #66615b; + color: #007f60; + border-color: #007f60; } .btn.btn-simple:hover, .btn.btn-simple:focus, @@ -510,7 +510,7 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active { } .btn.btn-link, .navbar .navbar-nav > a.btn.btn-link { - color: #66615b; + color: #007f60; } .btn.btn-link:hover, .btn.btn-link:focus, @@ -991,8 +991,8 @@ fieldset[disabled] .btn-danger.active { .btn-outline-default { background: transparent; - border: 2px solid #66615b !important; - color: #66615b; + border: 2px solid #007f60 !important; + color: #007f60; opacity: 1; filter: alpha(opacity=100); } @@ -1002,9 +1002,9 @@ fieldset[disabled] .btn-danger.active { .btn-outline-default:focus:active, .btn-outline-default.active, .open > .btn-outline-default.dropdown-toggle { - background-color: #66615b !important; + background-color: #007f60 !important; color: rgba(255, 255, 255, 0.8) !important; - border-color: #66615b !important; + border-color: #007f60 !important; } .btn-outline-default:hover .caret, .btn-outline-default:focus .caret, @@ -1042,7 +1042,7 @@ fieldset[disabled] .btn-outline-default.focus, fieldset[disabled] .btn-outline-default:active, fieldset[disabled] .btn-outline-default.active { background-color: transparent !important; - border-color: #66615b !important; + border-color: #007f60 !important; } .btn-outline-primary { @@ -1389,7 +1389,7 @@ fieldset[disabled] .btn-outline-neutral.active { .btn-neutral { background-color: #ffffff; color: #51cbce; - color: #66615b; + color: #007f60; } .btn-neutral:hover, .btn-neutral:focus, @@ -1473,7 +1473,7 @@ fieldset[disabled] .btn-neutral.active { color: #44c47d !important; } .btn-neutral.btn-default { - color: #66615b !important; + color: #007f60 !important; } .btn-neutral.btn-default:hover, .btn-neutral.btn-default:focus, @@ -1532,13 +1532,13 @@ fieldset[disabled] .btn-neutral.active { } .btn-neutral.btn-border:hover, .btn-neutral.btn-border:focus { - color: #66615b; + color: #007f60; } .btn-neutral.btn-border:active, .btn-neutral.btn-border.active, .open > .btn-neutral.btn-border.dropdown-toggle { background-color: #ffffff; - color: #66615b; + color: #007f60; } .btn-neutral.btn-link:active, .btn-neutral.btn-link.active { @@ -1555,7 +1555,7 @@ fieldset[disabled] .btn-neutral.active { .btn-simple { border: 1px solid; - border-color: #66615b; + border-color: #007f60; padding: 10px 22px; background-color: transparent; } @@ -1692,7 +1692,7 @@ fieldset[disabled] .btn-link.active { background-color: #ffffff; border: 1px solid #dddddd; border-radius: 4px; - color: #66615b; + color: #007f60; line-height: normal; font-size: 14px; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, @@ -1713,7 +1713,7 @@ fieldset[disabled] .btn-link.active { -webkit-box-shadow: none; box-shadow: none; outline: 0 !important; - color: #66615b; + color: #007f60; } .form-control:focus + .input-group-append .input-group-text, .form-control:focus ~ .input-group-append .input-group-text, @@ -1732,7 +1732,7 @@ fieldset[disabled] .btn-link.active { } .has-success .form-control { border: 1px solid #ccc; - color: #66615b; + color: #007f60; } .has-success .form-control.form-control-success { padding-right: 2.5em !important; @@ -1896,7 +1896,7 @@ fieldset[disabled] .btn-link.active { .input-group.has-success .input-group-prepend .input-group-text, .input-group.has-success .input-group-append .input-group-text { border: 1px solid #ccc; - color: #66615b; + color: #007f60; background-color: #ffffff; border-right: none; } @@ -2054,7 +2054,7 @@ fieldset[disabled] .btn-link.active { .input-group-prepend .input-group-text { background-color: transparent; border: 1px solid #e3e3e3; - color: #66615b; + color: #007f60; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, @@ -2166,7 +2166,7 @@ fieldset[disabled] .btn-link.active { .form-control[readonly], fieldset[disabled] .form-control { background-color: #e3e3e3; - color: #66615b; + color: #007f60; cursor: not-allowed; } @@ -2413,13 +2413,13 @@ a.text-gray:hover { .blockquote { border-left: none; - border: 1px solid #66615b; + border: 1px solid #007f60; padding: 20px; font-size: 1.1em; line-height: 1.8; } .blockquote small { - color: #66615b; + color: #007f60; font-size: 0.8571em; text-transform: uppercase; } @@ -2563,7 +2563,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .offline-doc .page-header:after { - background-color: rgba(0, 0, 0, 0.5); + background-color: #007f60; content: ""; display: block; height: 100%; @@ -2579,8 +2579,8 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .badge.badge-default { - border-color: #66615b; - background-color: #66615b; + border-color: #007f60; + background-color: #007f60; } .badge.badge-primary { @@ -2721,7 +2721,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .form-check-label input[type="checkbox"]:checked + .form-check-sign:before { - background-color: #66615b; + background-color: #007f60; } .form-check-radio input[type="radio"] + .form-check-sign:after, @@ -2768,29 +2768,29 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #ffffff; } .navbar a.dropdown-item { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control, .navbar.bg-white .input-group.no-border .form-control { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control::-moz-placeholder, .navbar.bg-white .input-group.no-border .form-control::-moz-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control:-ms-input-placeholder, .navbar.bg-white .input-group.no-border .form-control:-ms-input-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control::-webkit-input-placeholder, .navbar.bg-white .input-group.no-border .form-control::-webkit-input-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group-prepend .input-group-text i, .navbar.bg-white .input-group-append .input-group-text i { - color: #66615b; + color: #007f60; opacity: 0.5; } .navbar .form-group, @@ -2805,7 +2805,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .navbar .input-group .form-group-addon, .navbar .input-group .input-group-prepend .input-group-text, .navbar .input-group .input-group-append .input-group-text { - color: #66615b; + color: #007f60; } .navbar .form-group .form-group-addon i, .navbar .form-group .input-group-prepend .input-group-text i, @@ -2817,19 +2817,19 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .navbar .form-group.no-border .form-control, .navbar .input-group.no-border .form-control { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control::-moz-placeholder, .navbar .input-group.no-border .form-control::-moz-placeholder { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control:-ms-input-placeholder, .navbar .input-group.no-border .form-control:-ms-input-placeholder { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control::-webkit-input-placeholder, .navbar .input-group.no-border .form-control::-webkit-input-placeholder { - color: #66615b; + color: #007f60; } .navbar p { display: inline-block; @@ -2917,7 +2917,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .navbar .navbar-nav .nav-item .nav-link:not(.btn):hover, .navbar .navbar-nav .nav-item .nav-link:not(.btn):active { border-radius: 3px; - color: #66615b; + color: #007f60; } .navbar .logo-container { width: 27px; @@ -2956,17 +2956,17 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, border-bottom: 1px solid #ddd; } .navbar.navbar-transparent a:not(.dropdown-item):not(.btn) { - color: #66615b; + color: #007f60; } .navbar.navbar-transparent a:not(.dropdown-item):not(.btn).disabled { opacity: 0.5; - color: #66615b; + color: #007f60; } .navbar.navbar-transparent .button-bar { - background: #66615b; + background: #007f60; } .navbar.navbar-transparent .nav-item .nav-link:not(.btn) { - color: #66615b; + color: #007f60; } .navbar.navbar-transparent .nav-item.active .nav-link:not(.btn), .navbar.navbar-transparent .nav-item .nav-link:not(.btn):focus, @@ -2976,14 +2976,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #51cbce; } .navbar.bg-white a:not(.dropdown-item):not(.btn) { - color: #66615b; + color: #007f60; } .navbar.bg-white a:not(.dropdown-item):not(.btn).disabled { opacity: 0.5; - color: #66615b; + color: #007f60; } .navbar.bg-white .button-bar { - background: #66615b; + background: #007f60; } .navbar.bg-white .nav-item.active .nav-link:not(.btn), .navbar.bg-white .nav-item .nav-link:not(.btn):focus, @@ -2992,14 +2992,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #51bcda; } .navbar.bg-white .logo-container { - border: 1px solid #66615b; + border: 1px solid #007f60; } .navbar .navbar-collapse .nav-item a { font-size: 14px; } .bg-default { - background-color: #66615b !important; + background-color: #007f60 !important; } .bg-primary { @@ -3094,35 +3094,11 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, content: ""; } .page-header:before { - background-color: rgba(0, 0, 0, 0.3); + background-color: #007f60; } .page-header[filter-color="orange"] { - background: rgba(44, 44, 44, 0.2); - /* For browsers that do not support gradients */ - background: -webkit-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - /* For Firefox 3.6 to 15 */ - background: linear-gradient( - 0deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - /* Standard syntax */ + + background: #007f60; } .dropdown .dropdown-menu, @@ -3257,7 +3233,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, text-align: center; } .dropdown-menu .dropdown-item { - color: #66615b; + color: #007f60; font-size: 14px; padding: 10px 45px 10px 15px; clear: both; @@ -3294,7 +3270,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { - background-color: #66615b; + background-color: #007f60; } .dropdown-menu.dropdown-primary .dropdown-item:hover, .dropdown-menu.dropdown-primary .dropdown-item:focus { @@ -3428,7 +3404,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .dropdown-sharing .dropup-item { - color: #66615b; + color: #007f60; font-size: 14px; } .dropdown-sharing .dropup-item .social-line { @@ -3451,7 +3427,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-sharing .dropup-item:focus .social-line, .dropdown-sharing .dropup-item:focus .action-line { background-color: #ffffff; - color: #66615b; + color: #007f60; opacity: 1; text-decoration: none; } @@ -3486,7 +3462,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-actions li:hover a, .dropdown-actions li:focus a { - color: #66615b; + color: #007f60; opacity: 1; text-decoration: none; } @@ -3529,7 +3505,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-notification .dropdown-notification-list .notification-item { border-bottom: 1px solid #f1eae0; font-size: 16px; - color: #66615b; + color: #007f60; } .dropdown-notification .dropdown-notification-list @@ -3588,7 +3564,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-notification-list .notification-item:hover .notification-text { - color: #66615b; + color: #007f60; background-color: #f0efeb !important; } .dropdown-notification @@ -4469,6 +4445,7 @@ License - nucleoapp.com/license/ left: 0; z-index: 1030; border-right: 1px solid #ddd; + background-color: #007f60 } .sidebar .sidebar-wrapper, .off-canvas-sidebar .sidebar-wrapper { @@ -4478,6 +4455,7 @@ License - nucleoapp.com/license/ width: 260px; z-index: 4; padding-bottom: 100px; + background-color: #007f60 } .sidebar .sidebar-wrapper .dropdown .dropdown-backdrop, .off-canvas-sidebar .sidebar-wrapper .dropdown .dropdown-backdrop { @@ -4595,7 +4573,7 @@ License - nucleoapp.com/license/ height: 100%; content: ""; display: block; - background: #ffffff; + background: #007f60; opacity: 1; } .sidebar .logo, @@ -4632,7 +4610,7 @@ License - nucleoapp.com/license/ right: 15px; height: 1px; width: calc(100% - 30px); - background-color: rgba(255, 255, 255, 0.5); + background-color: #007f60; } .sidebar .logo p, .off-canvas-sidebar .logo p { @@ -4691,11 +4669,11 @@ License - nucleoapp.com/license/ background: -o-linear-gradient(#7ec76f 0%, #44c47d 80%); background: -moz-linear-gradient(#7ec76f 0%, #44c47d 80%); background: linear-gradient(#7ec76f 0%, #44c47d 80%); - z-index: 3; + z-index: 7; } .sidebar[data-color="white"]:after, .off-canvas-sidebar[data-color="white"]:after { - background: #ffffff; + background:#007f60; } .sidebar[data-color="white"] .nav li a, .sidebar[data-color="white"] .nav li a i, @@ -4737,7 +4715,7 @@ License - nucleoapp.com/license/ > ul > li > a { - color: #66615b; + color: #007f60; opacity: 0.7; } .sidebar[data-color="white"] .nav li:hover:not(.active) > a, @@ -4748,11 +4726,11 @@ License - nucleoapp.com/license/ } .sidebar[data-color="white"] .logo .simple-text, .off-canvas-sidebar[data-color="white"] .logo .simple-text { - color: #66615b; + color: #007f60; } .sidebar[data-color="white"] .logo:after, .off-canvas-sidebar[data-color="white"] .logo:after { - background-color: #44c47d;; + background-color: #44c47d; opacity: 0.4; } .sidebar[data-color="white"] .user .info a span, @@ -4761,7 +4739,7 @@ License - nucleoapp.com/license/ .off-canvas-sidebar[data-color="white"] .user .info a span, .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-mini-icon, .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-normal { - color: #66615b !important; + color: #007f60 !important; } .sidebar[data-color="white"] .user:after, .off-canvas-sidebar[data-color="white"] .user:after { @@ -5062,7 +5040,7 @@ License - nucleoapp.com/license/ } .off-canvas-sidebar .nav > li > a:focus { - background: rgba(200, 200, 200, 0.2); + background:#007f60; } .main-panel { @@ -5098,17 +5076,16 @@ License - nucleoapp.com/license/ height: 260px; padding-top: 80px; padding-bottom: 45px; - background: #141e30; + background: #007f60; /* fallback for old browsers */ background: -webkit-gradient( linear, left top, right top, - from(#0c2646), - color-stop(60%, #204065), - to(#2a5788) + from( #007f60), + color-stop(60%, #007f60), + to( #007f60) ); - background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%); position: relative; overflow: hidden; } @@ -5137,7 +5114,7 @@ License - nucleoapp.com/license/ padding: 24px 0; } .footer.footer-default { - background-color: #f2f2f2; + background-color: #007f60; } .footer nav { display: inline-block; @@ -5176,7 +5153,7 @@ License - nucleoapp.com/license/ position: fixed; right: 0; width: 64px; - background: rgba(0, 0, 0, 0.3); + background: #007f60; z-index: 1031; border-radius: 8px 0 0 8px; text-align: center; @@ -5332,7 +5309,7 @@ License - nucleoapp.com/license/ position: relative; left: -10px; font-size: 0.7142em; - color: #66615b; + color: #007f60; } .fixed-plugin .adjustments-line .togglebutton .label-switch.label-right { left: 10px; @@ -5562,7 +5539,7 @@ License - nucleoapp.com/license/ margin-right: 5px; position: relative; top: 0px; - color: #66615b; + color: #007f60; } .card .card-footer .btn { margin: 0; @@ -5785,7 +5762,7 @@ License - nucleoapp.com/license/ } .navbar.bg-white .dropdown-menu .dropdown-item:focus, .navbar.bg-white .dropdown-menu .dropdown-item:hover { - color: #66615b; + color: #007f60; } .navbar .navbar-toggler-bar { display: block; @@ -5793,7 +5770,7 @@ License - nucleoapp.com/license/ width: 22px; height: 1px; border-radius: 1px; - background: #66615b; + background: #007f60; } .navbar .navbar-toggler-bar + .navbar-toggler-bar { margin-top: 7px; @@ -5806,7 +5783,7 @@ License - nucleoapp.com/license/ transition: width 0.2s linear; } .navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar { - background-color: #66615b; + background-color: #007f60; } .navbar .toggled .navbar-toggler-bar { width: 24px; diff --git a/src/assets/css/paper-dashboard.min.css b/src/assets/css/paper-dashboard.min.css index 1032c5f..48eed50 100644 --- a/src/assets/css/paper-dashboard.min.css +++ b/src/assets/css/paper-dashboard.min.css @@ -350,7 +350,7 @@ Copyright (c) 2015 Daniel Eden border-radius: 3px; padding: 11px 22px; cursor: pointer; - background-color: #66615b; + background-color: #007f60; color: #fff; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; @@ -436,13 +436,13 @@ fieldset[disabled] .navbar .navbar-nav > a.btn:focus, fieldset[disabled] .navbar .navbar-nav > a.btn.focus, fieldset[disabled] .navbar .navbar-nav > a.btn:active, fieldset[disabled] .navbar .navbar-nav > a.btn.active { - background-color: #66615b; - border-color: #66615b; + background-color: #007f60; + border-color: #007f60; } .btn.btn-simple, .navbar .navbar-nav > a.btn.btn-simple { - color: #66615b; - border-color: #66615b; + color: #007f60; + border-color: #007f60; } .btn.btn-simple:hover, .btn.btn-simple:focus, @@ -457,7 +457,7 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active { } .btn.btn-link, .navbar .navbar-nav > a.btn.btn-link { - color: #66615b; + color: #007f60; } .btn.btn-link:hover, .btn.btn-link:focus, @@ -932,8 +932,8 @@ fieldset[disabled] .btn-danger.active { } .btn-outline-default { background: rgba(0, 0, 0, 0); - border: 2px solid #66615b !important; - color: #66615b; + border: 2px solid #007f60 !important; + color: #007f60; opacity: 1; filter: alpha(opacity=100); } @@ -943,9 +943,9 @@ fieldset[disabled] .btn-danger.active { .btn-outline-default:focus:active, .btn-outline-default.active, .open > .btn-outline-default.dropdown-toggle { - background-color: #66615b !important; + background-color: #007f60 !important; color: rgba(255, 255, 255, 0.8) !important; - border-color: #66615b !important; + border-color: #007f60 !important; } .btn-outline-default:hover .caret, .btn-outline-default:focus .caret, @@ -983,7 +983,7 @@ fieldset[disabled] .btn-outline-default.focus, fieldset[disabled] .btn-outline-default:active, fieldset[disabled] .btn-outline-default.active { background-color: rgba(0, 0, 0, 0) !important; - border-color: #66615b !important; + border-color: #007f60 !important; } .btn-outline-primary { background: rgba(0, 0, 0, 0); @@ -1323,7 +1323,7 @@ fieldset[disabled] .btn-outline-neutral.active { .btn-neutral { background-color: #fff; color: #51cbce; - color: #66615b; + color: #007f60; } .btn-neutral:hover, .btn-neutral:focus, @@ -1407,7 +1407,7 @@ fieldset[disabled] .btn-neutral.active { color: #44c47d !important; } .btn-neutral.btn-default { - color: #66615b !important; + color: #007f60 !important; } .btn-neutral.btn-default:hover, .btn-neutral.btn-default:focus, @@ -1466,13 +1466,13 @@ fieldset[disabled] .btn-neutral.active { } .btn-neutral.btn-border:hover, .btn-neutral.btn-border:focus { - color: #66615b; + color: #007f60; } .btn-neutral.btn-border:active, .btn-neutral.btn-border.active, .open > .btn-neutral.btn-border.dropdown-toggle { background-color: #fff; - color: #66615b; + color: #007f60; } .btn-neutral.btn-link:active, .btn-neutral.btn-link.active { @@ -1487,7 +1487,7 @@ fieldset[disabled] .btn-neutral.active { } .btn-simple { border: 1px solid; - border-color: #66615b; + border-color: #007f60; padding: 10px 22px; background-color: rgba(0, 0, 0, 0); } @@ -1608,7 +1608,7 @@ fieldset[disabled] .btn-link.active { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; - color: #66615b; + color: #007f60; line-height: normal; font-size: 14px; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, @@ -1629,7 +1629,7 @@ fieldset[disabled] .btn-link.active { -webkit-box-shadow: none; box-shadow: none; outline: 0 !important; - color: #66615b; + color: #007f60; } .form-control:focus + .input-group-append .input-group-text, .form-control:focus ~ .input-group-append .input-group-text, @@ -1648,7 +1648,7 @@ fieldset[disabled] .btn-link.active { } .has-success .form-control { border: 1px solid #ccc; - color: #66615b; + color: #007f60; } .has-success .form-control.form-control-success { padding-right: 2.5em !important; @@ -1803,7 +1803,7 @@ fieldset[disabled] .btn-link.active { .input-group.has-success .input-group-prepend .input-group-text, .input-group.has-success .input-group-append .input-group-text { border: 1px solid #ccc; - color: #66615b; + color: #007f60; background-color: #fff; border-right: none; } @@ -1948,7 +1948,7 @@ fieldset[disabled] .btn-link.active { .input-group-prepend .input-group-text { background-color: transparent; border: 1px solid #e3e3e3; - color: #66615b; + color: #007f60; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, @@ -2051,7 +2051,7 @@ fieldset[disabled] .btn-link.active { .form-control[readonly], fieldset[disabled] .form-control { background-color: #e3e3e3; - color: #66615b; + color: #007f60; cursor: not-allowed; } .input-group-btn .btn { @@ -2263,13 +2263,13 @@ a.text-gray:hover { } .blockquote { border-left: none; - border: 1px solid #66615b; + border: 1px solid #007f60; padding: 20px; font-size: 1.1em; line-height: 1.8; } .blockquote small { - color: #66615b; + color: #007f60; font-size: 0.8571em; text-transform: uppercase; } @@ -2413,8 +2413,8 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, padding: 2px !important; } .badge.badge-default { - border-color: #66615b; - background-color: #66615b; + border-color: #007f60; + background-color: #007f60; } .badge.badge-primary { border-color: #51cbce; @@ -2539,7 +2539,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, top: -5px; } .form-check-label input[type="checkbox"]:checked + .form-check-sign:before { - background-color: #66615b; + background-color: #007f60; } .form-check-radio input[type="radio"] + .form-check-sign:after, .form-check-radio input[type="radio"] { @@ -2581,29 +2581,29 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #fff; } .navbar a.dropdown-item { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control, .navbar.bg-white .input-group.no-border .form-control { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control::-moz-placeholder, .navbar.bg-white .input-group.no-border .form-control::-moz-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control:-ms-input-placeholder, .navbar.bg-white .input-group.no-border .form-control:-ms-input-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group .form-control::-webkit-input-placeholder, .navbar.bg-white .input-group.no-border .form-control::-webkit-input-placeholder { - color: #66615b; + color: #007f60; } .navbar.bg-white .input-group-prepend .input-group-text i, .navbar.bg-white .input-group-append .input-group-text i { - color: #66615b; + color: #007f60; opacity: 0.5; } .navbar .form-group, @@ -2618,7 +2618,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .navbar .input-group .form-group-addon, .navbar .input-group .input-group-prepend .input-group-text, .navbar .input-group .input-group-append .input-group-text { - color: #66615b; + color: #007f60; } .navbar .form-group .form-group-addon i, .navbar .form-group .input-group-prepend .input-group-text i, @@ -2630,19 +2630,19 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .navbar .form-group.no-border .form-control, .navbar .input-group.no-border .form-control { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control::-moz-placeholder, .navbar .input-group.no-border .form-control::-moz-placeholder { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control:-ms-input-placeholder, .navbar .input-group.no-border .form-control:-ms-input-placeholder { - color: #66615b; + color: #007f60; } .navbar .form-group.no-border .form-control::-webkit-input-placeholder, .navbar .input-group.no-border .form-control::-webkit-input-placeholder { - color: #66615b; + color: #007f60; } .navbar p { display: inline-block; @@ -2730,7 +2730,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .navbar .navbar-nav .nav-item .nav-link:not(.btn):hover, .navbar .navbar-nav .nav-item .nav-link:not(.btn):active { border-radius: 3px; - color: #66615b; + color: #007f60; } .navbar .logo-container { width: 27px; @@ -2769,17 +2769,17 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, border-bottom: 1px solid #ddd; } .navbar.navbar-transparent a:not(.dropdown-item):not(.btn) { - color: #66615b; + color: #007f60; } .navbar.navbar-transparent a:not(.dropdown-item):not(.btn).disabled { opacity: 0.5; - color: #66615b; + color: #007f60; } .navbar.navbar-transparent .button-bar { - background: #66615b; + background: #007f60; } .navbar.navbar-transparent .nav-item .nav-link:not(.btn) { - color: #66615b; + color: #007f60; } .navbar.navbar-transparent .nav-item.active .nav-link:not(.btn), .navbar.navbar-transparent .nav-item .nav-link:not(.btn):focus, @@ -2789,14 +2789,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #51cbce; } .navbar.bg-white a:not(.dropdown-item):not(.btn) { - color: #66615b; + color: #007f60; } .navbar.bg-white a:not(.dropdown-item):not(.btn).disabled { opacity: 0.5; - color: #66615b; + color: #007f60; } .navbar.bg-white .button-bar { - background: #66615b; + background: #007f60; } .navbar.bg-white .nav-item.active .nav-link:not(.btn), .navbar.bg-white .nav-item .nav-link:not(.btn):focus, @@ -2805,13 +2805,13 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, color: #51bcda; } .navbar.bg-white .logo-container { - border: 1px solid #66615b; + border: 1px solid #007f60; } .navbar .navbar-collapse .nav-item a { font-size: 14px; } .bg-default { - background-color: #66615b !important; + background-color: #007f60 !important; } .bg-primary { background-color: #51cbce !important; @@ -2899,30 +2899,9 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, content: ""; } .page-header:before { - background-color: rgba(0, 0, 0, 0.3); } .page-header[filter-color="orange"] { - background: rgba(44, 44, 44, 0.2); - background: -webkit-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - background: -o-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - background: -moz-linear-gradient( - 90deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); - background: linear-gradient( - 0deg, - rgba(44, 44, 44, 0.2), - rgba(224, 23, 3, 0.6) - ); + } .dropdown .dropdown-menu, .dropup .dropdown-menu, @@ -3048,7 +3027,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, text-align: center; } .dropdown-menu .dropdown-item { - color: #66615b; + color: #007f60; font-size: 14px; padding: 10px 45px 10px 15px; clear: both; @@ -3085,7 +3064,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { - background-color: #66615b; + background-color: #007f60; } .dropdown-menu.dropdown-primary .dropdown-item:hover, .dropdown-menu.dropdown-primary .dropdown-item:focus { @@ -3210,7 +3189,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } } .dropdown-sharing .dropup-item { - color: #66615b; + color: #007f60; font-size: 14px; } .dropdown-sharing .dropup-item .social-line { @@ -3232,7 +3211,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-sharing .dropup-item:focus .social-line, .dropdown-sharing .dropup-item:focus .action-line { background-color: #fff; - color: #66615b; + color: #007f60; opacity: 1; text-decoration: none; } @@ -3264,7 +3243,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } .dropdown-actions li:hover a, .dropdown-actions li:focus a { - color: #66615b; + color: #007f60; opacity: 1; text-decoration: none; } @@ -3302,7 +3281,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-notification .dropdown-notification-list .notification-item { border-bottom: 1px solid #f1eae0; font-size: 16px; - color: #66615b; + color: #007f60; } .dropdown-notification .dropdown-notification-list @@ -3361,7 +3340,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .dropdown-notification-list .notification-item:hover .notification-text { - color: #66615b; + color: #007f60; background-color: #f0efeb !important; } .dropdown-notification @@ -4062,6 +4041,7 @@ img { left: 0; z-index: 1030; border-right: 1px solid #ddd; + background-color: #007f60 } .sidebar .sidebar-wrapper, .off-canvas-sidebar .sidebar-wrapper { @@ -4071,6 +4051,7 @@ img { width: 260px; z-index: 4; padding-bottom: 100px; + background-color: #007f60 } .sidebar .sidebar-wrapper .dropdown .dropdown-backdrop, .off-canvas-sidebar .sidebar-wrapper .dropdown .dropdown-backdrop { @@ -4330,7 +4311,7 @@ img { > ul > li > a { - color: #66615b; + color: #007f60; opacity: 0.7; } .sidebar[data-color="white"] .nav li:hover:not(.active) > a, @@ -4341,11 +4322,11 @@ img { } .sidebar[data-color="white"] .logo .simple-text, .off-canvas-sidebar[data-color="white"] .logo .simple-text { - color: #66615b; + color: #007f60; } .sidebar[data-color="white"] .logo:after, .off-canvas-sidebar[data-color="white"] .logo:after { - background-color: #66615b; + background-color: #007f60; opacity: 0.4; } .sidebar[data-color="white"] .user .info a span, @@ -4354,11 +4335,11 @@ img { .off-canvas-sidebar[data-color="white"] .user .info a span, .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-mini-icon, .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-normal { - color: #66615b !important; + color: #007f60 !important; } .sidebar[data-color="white"] .user:after, .off-canvas-sidebar[data-color="white"] .user:after { - background-color: #66615b; + background-color: #007f60; opacity: 0.4; } .sidebar[data-color="black"]:after, @@ -4684,16 +4665,6 @@ img { height: 260px; padding-top: 80px; padding-bottom: 45px; - background: #141e30; - background: -webkit-gradient( - linear, - left top, - right top, - from(#0c2646), - color-stop(60%, #204065), - to(#2a5788) - ); - background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%); position: relative; overflow: hidden; } @@ -4913,7 +4884,7 @@ img { position: relative; left: -10px; font-size: 0.7142em; - color: #66615b; + color: #007f60; } .fixed-plugin .adjustments-line .togglebutton .label-switch.label-right { left: 10px; @@ -5138,7 +5109,7 @@ img { margin-right: 5px; position: relative; top: 0px; - color: #66615b; + color: #007f60; } .card .card-footer .btn { margin: 0; @@ -5340,7 +5311,7 @@ img { } .navbar.bg-white .dropdown-menu .dropdown-item:focus, .navbar.bg-white .dropdown-menu .dropdown-item:hover { - color: #66615b; + color: #007f60; } .navbar .navbar-toggler-bar { display: block; @@ -5348,7 +5319,7 @@ img { width: 22px; height: 1px; border-radius: 1px; - background: #66615b; + background: #007f60; } .navbar .navbar-toggler-bar + .navbar-toggler-bar { margin-top: 7px; @@ -5361,7 +5332,7 @@ img { transition: width 0.2s linear; } .navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar { - background-color: #66615b; + background-color: #007f60; } .navbar .toggled .navbar-toggler-bar { width: 24px; diff --git a/src/assets/scss/paper-dashboard/_checkboxes-radio.scss b/src/assets/scss/paper-dashboard/_checkboxes-radio.scss index a731ab0..be461cd 100644 --- a/src/assets/scss/paper-dashboard/_checkboxes-radio.scss +++ b/src/assets/scss/paper-dashboard/_checkboxes-radio.scss @@ -1,142 +1,142 @@ .from-check, .form-check-radio { - margin-bottom: 12px; - position: relative; + margin-bottom: 12px; + position: relative; } .form-check { - padding-left: 0; - margin-bottom: .5rem; - - .form-check-label{ - display: inline-block; - position: relative; - cursor: pointer; - padding-left: 35px; - line-height: 26px; - margin-bottom: 0; - } - - .form-check-sign::before, - .form-check-sign::after { - content: " "; - display: inline-block; - position: absolute; - width: 24px; - height: 24px; - left: 0; - cursor: pointer; - border-radius: 6px; - top: 0; - background-color: #AAA7A4; - -webkit-transition: opacity 0.3s linear; - -moz-transition: opacity 0.3s linear; - -o-transition: opacity 0.3s linear; - -ms-transition: opacity 0.3s linear; - transition: opacity 0.3s linear; - } - .form-check-sign::after { - font-family: 'FontAwesome'; - content: "\f00c"; - top: -1px; - text-align: center; - font-size: 15px; - opacity: 0; - color: #FFF; - border: 0; - background-color: inherit; - } - &.disabled{ - .form-check-label{ - color: $dark-gray; - opacity: .5; - cursor: not-allowed; - } - } - + padding-left: 0; + margin-bottom: 0.5rem; + + .form-check-label { + display: inline-block; + position: relative; + cursor: pointer; + padding-left: 35px; + line-height: 26px; + margin-bottom: 0; + } + + .form-check-sign::before, + .form-check-sign::after { + content: " "; + display: inline-block; + position: absolute; + width: 24px; + height: 24px; + left: 0; + cursor: pointer; + border-radius: 6px; + top: 0; + background-color: #aaa7a4; + -webkit-transition: opacity 0.3s linear; + -moz-transition: opacity 0.3s linear; + -o-transition: opacity 0.3s linear; + -ms-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; + } + .form-check-sign::after { + font-family: "FontAwesome"; + content: "\f00c"; + top: -1px; + text-align: center; + font-size: 15px; + opacity: 0; + color: #fff; + border: 0; + background-color: inherit; + } + &.disabled { + .form-check-label { + color: $dark-gray; + opacity: 0.5; + cursor: not-allowed; + } + } } .form-check.disabled .form-check-label, .form-check.disabled .form-check-label { - } .form-check input[type="checkbox"], -.form-check-radio input[type="radio"]{ - opacity: 0; - position: absolute; - visibility: hidden; +.form-check-radio input[type="radio"] { + opacity: 0; + position: absolute; + visibility: hidden; } -.form-check input[type="checkbox"]:checked + .form-check-sign::after{ - opacity: 1; +.form-check input[type="checkbox"]:checked + .form-check-sign::after { + opacity: 1; } .form-control input[type="checkbox"]:disabled + .form-check-sign::before, -.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ - cursor: not-allowed; +.checkbox input[type="checkbox"]:disabled + .form-check-sign::after { + cursor: not-allowed; } -.form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign, -.form-check-radio input[type="radio"]:disabled + .form-check-sign{ - pointer-events: none !important; +.form-check + .form-check-label + input[type="checkbox"]:disabled + + .form-check-sign, +.form-check-radio input[type="radio"]:disabled + .form-check-sign { + pointer-events: none !important; } -.form-check-radio{ - margin-left: -3px; - - .form-check-label{ - padding-left: 2rem; - } - &.disabled{ - .form-check-label{ - color: $dark-gray; - opacity: .5; - cursor: not-allowed; - } - } +.form-check-radio { + margin-left: -3px; + + .form-check-label { + padding-left: 2rem; + } + &.disabled { + .form-check-label { + color: $dark-gray; + opacity: 0.5; + cursor: not-allowed; + } + } } -.form-check-radio .form-check-sign::before{ - font-family: 'FontAwesome'; - content: "\f10c"; - font-size: 22px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - display: inline-block; - position: absolute; - opacity: .50; - left: 5px; - top: -5px; +.form-check-radio .form-check-sign::before { + font-family: "FontAwesome"; + content: "\f10c"; + font-size: 22px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: inline-block; + position: absolute; + opacity: 0.5; + left: 5px; + top: -5px; } -.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{ - background-color: #66615B; +.form-check-label input[type="checkbox"]:checked + .form-check-sign:before { + background-color: #007f60; } .form-check-radio input[type="radio"] + .form-check-sign:after, .form-check-radio input[type="radio"] { - opacity: 0; - @include transition-opacity(0.3s, linear); - content:" "; - display: block; + opacity: 0; + @include transition-opacity(0.3s, linear); + content: " "; + display: block; } .form-check-radio input[type="radio"]:checked + .form-check-sign::after { - font-family: 'FontAwesome'; - content: "\f192"; - top: -5px; - position: absolute; - left: 5px; - opacity: 1; - font-size: 22px; + font-family: "FontAwesome"; + content: "\f192"; + top: -5px; + position: absolute; + left: 5px; + opacity: 1; + font-size: 22px; } -.form-check-radio input[type="radio"]:checked + .form-check-sign::after{ - opacity: 1; +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + opacity: 1; } - .form-check-radio input[type="radio"]:disabled + .form-check-sign::before, .form-check-radio input[type="radio"]:disabled + .form-check-sign::after { - color: $dark-gray; + color: $dark-gray; } diff --git a/src/assets/scss/paper-dashboard/_dropdown.scss b/src/assets/scss/paper-dashboard/_dropdown.scss index a3edc92..dd61893 100644 --- a/src/assets/scss/paper-dashboard/_dropdown.scss +++ b/src/assets/scss/paper-dashboard/_dropdown.scss @@ -1,195 +1,189 @@ .dropdown, .dropup, -.bootstrap-select{ - .dropdown-menu{ - display: block; - @include opacity(0); - @include box-shadow($dropdown-shadow); - visibility: hidden; - position: absolute; - transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; - - &[x-placement="top-start"]{ - @include transform-translate-y-dropdown(0px); - - } - &[x-placement="bottom-start"]{ - @include transform-translate-y-dropdown(0px); - } - } - - &.show .dropdown-menu{ - @include opacity(1); - visibility: visible; - - &[x-placement="top-start"]{ - @include transform-translate-y-dropdown(-50px); - top: auto !important; - bottom: 0 !important; - - } - &[x-placement="bottom-start"]{ - @include transform-translate-y-dropdown(50px); - bottom: auto !important; - top: 0 !important; - } - } - +.bootstrap-select { + .dropdown-menu { + display: block; + @include opacity(0); + @include box-shadow($dropdown-shadow); + visibility: hidden; + position: absolute; + transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, + opacity 0.3s ease 0s, height 0s linear 0.35s; + + &[x-placement="top-start"] { + @include transform-translate-y-dropdown(0px); + } + &[x-placement="bottom-start"] { + @include transform-translate-y-dropdown(0px); + } + } + + &.show .dropdown-menu { + @include opacity(1); + visibility: visible; + + &[x-placement="top-start"] { + @include transform-translate-y-dropdown(-50px); + top: auto !important; + bottom: 0 !important; + } + &[x-placement="bottom-start"] { + @include transform-translate-y-dropdown(50px); + bottom: auto !important; + top: 0 !important; + } + } } .dropup .dropdown-menu, -.dropdown-btn .dropdown-menu{ - @include transform-translate-y-dropdown(0px); - top: auto !important; - bottom: 0 !important; - +.dropdown-btn .dropdown-menu { + @include transform-translate-y-dropdown(0px); + top: auto !important; + bottom: 0 !important; } .dropup.show .dropdown-menu, -.dropdown-btn.show .dropdown-menu{ - opacity: 1; - visibility: visible; +.dropdown-btn.show .dropdown-menu { + opacity: 1; + visibility: visible; - .dropdown-menu.inner{ - @include transform-translate-y(0px); - } + .dropdown-menu.inner { + @include transform-translate-y(0px); + } } -.bootstrap-select.show{ - .dropdown-menu.show{ - &[x-placement="top-start"]{ - @include transform-translate-y-dropdown(-60px); - top: auto !important; - bottom: 0 !important; - } - - li:last-child { - a:hover{ - border-radius: 0 0 12px 12px; - } - } - } +.bootstrap-select.show { + .dropdown-menu.show { + &[x-placement="top-start"] { + @include transform-translate-y-dropdown(-60px); + top: auto !important; + bottom: 0 !important; + } + + li:last-child { + a:hover { + border-radius: 0 0 12px 12px; + } + } + } } -.bootstrap-select.dropup.show{ - &:before { - top: -1px !important; - } +.bootstrap-select.dropup.show { + &:before { + top: -1px !important; + } - &:after { - top: -2px !important; - } + &:after { + top: -2px !important; + } } -.dropdown-menu{ - background-color: $white-color; - border: 0 none; - border-radius: $border-radius-extreme; - margin-top: 10px; - padding: 0px; - - .divider{ - background-color: $medium-pale-bg; - margin: 0px; - } - - .dropdown-header{ - color: $dark-gray; - font-size: $font-size-small; - padding: $padding-dropdown-vertical $padding-dropdown-horizontal; - } - - .no-notification{ - color: #9A9A9A; - font-size: 1.2em; - padding: 30px 30px; - text-align: center; - } - - .dropdown-item{ - color: $font-color; - font-size: $font-size-base; - padding: 10px 45px 10px 15px; - clear: both; - white-space: nowrap; - width: 100%; - display: block; - - img{ - margin-top: -3px; - } - - } - .dropdown-item:focus{ - outline: 0 !important; - } - - .btn-group.select &{ - min-width: 100%; - } - - .dropdown-item:first-child{ - border-top-left-radius: $border-radius-extreme; - border-top-right-radius: $border-radius-extreme; - } - - .dropdown-item:last-child{ - border-bottom-left-radius: $border-radius-extreme; - border-bottom-right-radius: $border-radius-extreme; - } - - .select & .dropdown-item:first-child{ - border-radius: 0; - border-bottom: 0 none; - } - - .dropdown-item:hover, - .dropdown-item:focus{ - color: $white-color !important; - opacity: 1; - text-decoration: none; - - } - .dropdown-item:hover, - .dropdown-item:focus{ - background-color: $default-color; - } - - &.dropdown-primary .dropdown-item:hover, - &.dropdown-primary .dropdown-item:focus{ - background-color: $bg-primary; - } - &.dropdown-info .dropdown-item:hover, - &.dropdown-info .dropdown-item:focus{ - background-color: $bg-info; - } - &.dropdown-success .dropdown-item:hover, - &.dropdown-success .dropdown-item:focus{ - background-color: $bg-success; - } - &.dropdown-warning .dropdown-item:hover, - &.dropdown-warning .dropdown-item:focus{ - background-color: $bg-warning; - } - &.dropdown-danger .dropdown-item:hover, - &.dropdown-danger .dropdown-item:focus{ - background-color: $bg-danger; - } - +.dropdown-menu { + background-color: $white-color; + border: 0 none; + border-radius: $border-radius-extreme; + margin-top: 10px; + padding: 0px; + + .divider { + background-color: $medium-pale-bg; + margin: 0px; + } + + .dropdown-header { + color: $dark-gray; + font-size: $font-size-small; + padding: $padding-dropdown-vertical $padding-dropdown-horizontal; + } + + .no-notification { + color: #9a9a9a; + font-size: 1.2em; + padding: 30px 30px; + text-align: center; + } + + .dropdown-item { + color: $font-color; + font-size: $font-size-base; + padding: 10px 45px 10px 15px; + clear: both; + white-space: nowrap; + width: 100%; + display: block; + + img { + margin-top: -3px; + } + } + .dropdown-item:focus { + outline: 0 !important; + } + + .btn-group.select & { + min-width: 100%; + } + + .dropdown-item:first-child { + border-top-left-radius: $border-radius-extreme; + border-top-right-radius: $border-radius-extreme; + } + + .dropdown-item:last-child { + border-bottom-left-radius: $border-radius-extreme; + border-bottom-right-radius: $border-radius-extreme; + } + + .select & .dropdown-item:first-child { + border-radius: 0; + border-bottom: 0 none; + } + + .dropdown-item:hover, + .dropdown-item:focus { + color: $white-color !important; + opacity: 1; + text-decoration: none; + } + .dropdown-item:hover, + .dropdown-item:focus { + background-color: $default-color; + } + + &.dropdown-primary .dropdown-item:hover, + &.dropdown-primary .dropdown-item:focus { + background-color: $bg-primary; + } + &.dropdown-info .dropdown-item:hover, + &.dropdown-info .dropdown-item:focus { + background-color: $bg-info; + } + &.dropdown-success .dropdown-item:hover, + &.dropdown-success .dropdown-item:focus { + background-color: $bg-success; + } + &.dropdown-warning .dropdown-item:hover, + &.dropdown-warning .dropdown-item:focus { + background-color: $bg-warning; + } + &.dropdown-danger .dropdown-item:hover, + &.dropdown-danger .dropdown-item:focus { + background-color: $bg-danger; + } } -.dropdown-divider{ - margin: 0 !important; +.dropdown-divider { + margin: 0 !important; } //fix bug for the select items in btn-group -.btn-group.select{ - // overflow: hidden; +.btn-group.select { + // overflow: hidden; } -.btn-group.select.open{ - overflow: visible; +.btn-group.select.open { + overflow: visible; } -.dropdown-menu-right{ - right: -2px; - left: auto; +.dropdown-menu-right { + right: -2px; + left: auto; } .navbar-nav .dropdown-menu:before, @@ -197,15 +191,15 @@ .dropdown .dropdown-menu[x-placement="bottom-end"]:before, .card.card-just-text .dropdown .dropdown-menu:before, .card-just-text .dropdown .dropdown-menu:before, -.dropdown-btn .dropdown-menu:before{ - border-bottom: 11px solid $medium-pale-bg; - border-left: 11px solid rgba(0, 0, 0, 0); - border-right: 11px solid rgba(0, 0, 0, 0); - content: ""; - display: inline-block; - position: absolute; - right: 12px; - top: -12px; +.dropdown-btn .dropdown-menu:before { + border-bottom: 11px solid $medium-pale-bg; + border-left: 11px solid rgba(0, 0, 0, 0); + border-right: 11px solid rgba(0, 0, 0, 0); + content: ""; + display: inline-block; + position: absolute; + right: 12px; + top: -12px; } .navbar-nav .dropdown-menu:after, @@ -213,268 +207,271 @@ .dropdown .dropdown-menu[x-placement="bottom-end"]:after, .card.card-just-text .dropdown .dropdown-menu:after, .card-just-text .dropdown .dropdown-menu:after, -.dropdown-btn .dropdown-menu:after{ - border-bottom: 11px solid $white-color; - border-left: 11px solid rgba(0, 0, 0, 0); - border-right: 11px solid rgba(0, 0, 0, 0); - content: ""; - display: inline-block; - position: absolute; - right: 12px; - top: -11px; +.dropdown-btn .dropdown-menu:after { + border-bottom: 11px solid $white-color; + border-left: 11px solid rgba(0, 0, 0, 0); + border-right: 11px solid rgba(0, 0, 0, 0); + content: ""; + display: inline-block; + position: absolute; + right: 12px; + top: -11px; } .dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:before, -.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before{ - left: 30px !important; - right: auto; +.dropdown + .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before { + left: 30px !important; + right: auto; } .dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:after, -.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after{ - left: 30px !important; - right: auto; +.dropdown + .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after { + left: 30px !important; + right: auto; } // the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file // code from _responsive.scss -@media screen and (min-width: 768px){ - .navbar-form { - margin-top: 21px; - margin-bottom: 21px; - padding-left: 5px; - padding-right: 5px; - } - .navbar-search-form{ - display: none; - } - .navbar-nav .dropdown-item .dropdown-menu, - .dropdown .dropdown-menu, - .dropdown-btn .dropdown-menu{ - transform: translate3d(0px, -40px, 0px); - transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; - } - .navbar-nav .dropdown-item.show .dropdown-menu, - .dropdown.show .dropdown-menu, - .dropdown-btn.show .dropdown-menu{ - transform: translate3d(0px, 0px, 0px); - visibility: visible !important; - } - .bootstrap-select .dropdown-menu{ - -webkit-transition: all 150ms linear; - -moz-transition: all 150ms linear; - -o-transition: all 150ms linear; - -ms-transition: all 150ms linear; - transition: all 150ms linear; - } - .bootstrap-datetimepicker-widget{ - visibility: visible !important; - } - - .bootstrap-select .show .dropdown-menu{ - transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; - transform: translate3d(0px, 0px, 0px); - } - - .navbar-nav.navbar-right li .dropdown-menu:before, - .navbar-nav.navbar-right li .dropdown-menu:after{ - left: auto; - right: 12px; - } - - - .footer:not(.footer-big){ - nav ul{ - li:first-child{ - margin-left: 0; - } - } - } - -// no dragging the others navs in page - body > .navbar-collapse.collapse{ - display: none !important; - } +@media screen and (min-width: 768px) { + .navbar-form { + margin-top: 21px; + margin-bottom: 21px; + padding-left: 5px; + padding-right: 5px; + } + .navbar-search-form { + display: none; + } + .navbar-nav .dropdown-item .dropdown-menu, + .dropdown .dropdown-menu, + .dropdown-btn .dropdown-menu { + transform: translate3d(0px, -40px, 0px); + transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, + opacity 0.3s ease 0s, height 0s linear 0.35s; + } + .navbar-nav .dropdown-item.show .dropdown-menu, + .dropdown.show .dropdown-menu, + .dropdown-btn.show .dropdown-menu { + transform: translate3d(0px, 0px, 0px); + visibility: visible !important; + } + .bootstrap-select .dropdown-menu { + -webkit-transition: all 150ms linear; + -moz-transition: all 150ms linear; + -o-transition: all 150ms linear; + -ms-transition: all 150ms linear; + transition: all 150ms linear; + } + .bootstrap-datetimepicker-widget { + visibility: visible !important; + } + + .bootstrap-select .show .dropdown-menu { + transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, + opacity 0.3s ease 0s, height 0s linear 0.35s; + transform: translate3d(0px, 0px, 0px); + } + + .navbar-nav.navbar-right li .dropdown-menu:before, + .navbar-nav.navbar-right li .dropdown-menu:after { + left: auto; + right: 12px; + } + + .footer:not(.footer-big) { + nav ul { + li:first-child { + margin-left: 0; + } + } + } + + // no dragging the others navs in page + body > .navbar-collapse.collapse { + display: none !important; + } } -.dropdown-sharing{ - .dropup-item{ - color: $font-color; - font-size: $font-size-base; - - .social-line{ - line-height: 28px; - padding: 10px 20px 5px 20px !important; - - [class*="icon-"]{ - font-size: 20px; - } - } - &:last-child{ - margin: 0 13px; - display: block; - } - .btn{ - margin: 10px; - } - } - - .dropup-item:hover, - .dropup-item:focus{ - .social-line, - .action-line{ - background-color: $white-color; - color: $font-color; - opacity: 1; - text-decoration: none; - } - } +.dropdown-sharing { + .dropup-item { + color: $font-color; + font-size: $font-size-base; + + .social-line { + line-height: 28px; + padding: 10px 20px 5px 20px !important; + + [class*="icon-"] { + font-size: 20px; + } + } + &:last-child { + margin: 0 13px; + display: block; + } + .btn { + margin: 10px; + } + } + + .dropup-item:hover, + .dropup-item:focus { + .social-line, + .action-line { + background-color: $white-color; + color: $font-color; + opacity: 1; + text-decoration: none; + } + } } .show .dropdown-sharing, -.show .dropdown-actions{ - margin-bottom: 1px; +.show .dropdown-actions { + margin-bottom: 1px; } -.dropdown-actions{ - .dropdown-item{ - margin: -15px 35px; - .action-line{ - padding: 5px 10px; - line-height: 24px; - font-weight: bold; - [class*="icon-"]{ - font-size: 24px; - } - .col-sm-9{ - line-height: 34px; - } - } - .link-danger{ - color: $danger-color; - &:hover, &:active, &:focus{ - color: $danger-color; - } - } - } - li:hover, - li:focus{ - a{ - color: $font-color; - opacity: 1; - text-decoration: none; - } - } - .action-line{ - .icon-simple{ - margin-left: -15px; - } - } +.dropdown-actions { + .dropdown-item { + margin: -15px 35px; + .action-line { + padding: 5px 10px; + line-height: 24px; + font-weight: bold; + [class*="icon-"] { + font-size: 24px; + } + .col-sm-9 { + line-height: 34px; + } + } + .link-danger { + color: $danger-color; + &:hover, + &:active, + &:focus { + color: $danger-color; + } + } + } + li:hover, + li:focus { + a { + color: $font-color; + opacity: 1; + text-decoration: none; + } + } + .action-line { + .icon-simple { + margin-left: -15px; + } + } } .dropdown .dropdown-menu[x-placement="top-start"]:before, .dropdown .dropdown-menu[x-placement="top-end"]:before, -.dropup .dropdown-menu:before{ - border-top: 11px solid #DCD9D1; - border-left: 11px solid transparent; - border-right: 11px solid transparent; - content: ""; - display: inline-block; - position: absolute; - right: 12px; - bottom: -12px; +.dropup .dropdown-menu:before { + border-top: 11px solid #dcd9d1; + border-left: 11px solid transparent; + border-right: 11px solid transparent; + content: ""; + display: inline-block; + position: absolute; + right: 12px; + bottom: -12px; } .dropdown .dropdown-menu[x-placement="top-start"]:after, .dropdown .dropdown-menu[x-placement="top-end"]:after, -.dropup .dropdown-menu:after{ - border-top: 11px solid #FFF; - border-left: 11px solid transparent; - border-right: 11px solid transparent; - content: ""; - display: inline-block; - position: absolute; - right: 12px; - bottom: -11px; +.dropup .dropdown-menu:after { + border-top: 11px solid #fff; + border-left: 11px solid transparent; + border-right: 11px solid transparent; + content: ""; + display: inline-block; + position: absolute; + right: 12px; + bottom: -11px; } .dropup, -.dropdown{ - .dropdown-toggle:after{ - margin-left: 0; - } +.dropdown { + .dropdown-toggle:after { + margin-left: 0; + } } -.dropdown-notification{ - .dropdown-notification-list{ - .notification-item{ - border-bottom: 1px solid #F1EAE0; - font-size: 16px; - color: #66615b; - - .notification-text{ - padding-left: 40px; - position: relative; - min-width: 330px; - min-height: 70px; - white-space: normal; - - - .label{ - display: block; - position: absolute; - top: 50%; - margin-top: -12px; - left: 7px; - } - .message{ - font-size: 0.9em; - line-height: 0.7; - margin-left: 10px; - } - .time{ - color: #9A9A9A; - font-size: 0.7em; - margin-left: 10px; - } - } - .read-notification{ - font-size: 12px; - opacity: 0; - position: absolute; - right: 5px; - top: 50%; - margin-top: -12px; - } - &:hover{ - text-decoration: none; - - .notification-text{ - color: #66615b; - background-color: #F0EFEB !important; - } - .read-notification{ - opacity: 1 !important; - } - } - } - - } - .dropdown-footer{ - background-color: #E8E7E3; - border-radius: 0 0 8px 8px; - - .dropdown-footer-menu{ - list-style: outside none none; - padding: 0px 5px; - li{ - display: inline-block; - text-align: left; - padding: 0 10px; - - a{ - color: #9C9B99; - font-size: 0.9em; - line-height: 35px; - } - } - } - } +.dropdown-notification { + .dropdown-notification-list { + .notification-item { + border-bottom: 1px solid #f1eae0; + font-size: 16px; + color: #007f60; + + .notification-text { + padding-left: 40px; + position: relative; + min-width: 330px; + min-height: 70px; + white-space: normal; + + .label { + display: block; + position: absolute; + top: 50%; + margin-top: -12px; + left: 7px; + } + .message { + font-size: 0.9em; + line-height: 0.7; + margin-left: 10px; + } + .time { + color: #9a9a9a; + font-size: 0.7em; + margin-left: 10px; + } + } + .read-notification { + font-size: 12px; + opacity: 0; + position: absolute; + right: 5px; + top: 50%; + margin-top: -12px; + } + &:hover { + text-decoration: none; + + .notification-text { + color: #007f60; + background-color: #f0efeb !important; + } + .read-notification { + opacity: 1 !important; + } + } + } + } + .dropdown-footer { + background-color: #e8e7e3; + border-radius: 0 0 8px 8px; + + .dropdown-footer-menu { + list-style: outside none none; + padding: 0px 5px; + li { + display: inline-block; + text-align: left; + padding: 0 10px; + + a { + color: #9c9b99; + font-size: 0.9em; + line-height: 35px; + } + } + } + } } diff --git a/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss b/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss index ccf5bfe..6af1c90 100644 --- a/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss +++ b/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss @@ -19,6 +19,7 @@ left: 0; z-index: 1030; border-right: 1px solid #ddd; + background-color: #007f60; .sidebar-wrapper { position: relative; diff --git a/src/assets/scss/paper-dashboard/_variables.scss b/src/assets/scss/paper-dashboard/_variables.scss index ecd1a51..177a8e1 100644 --- a/src/assets/scss/paper-dashboard/_variables.scss +++ b/src/assets/scss/paper-dashboard/_variables.scss @@ -2,401 +2,393 @@ // //## For each of Bootstrap's buttons, define text, background and border color. -$font-color: #66615b !default; -$fill-font-color: rgba(255, 255, 255, 0.8); -$font-family-sans-serif: 'Montserrat', "Helvetica", Arial, sans-serif; -$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; +$font-color: #007f60 !default; +$fill-font-color: rgba(255, 255, 255, 0.8); +$font-family-sans-serif: "Montserrat", "Helvetica", Arial, sans-serif; +$sans-serif-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; +$none: 0 !default; +$border-thin: 1px !default; +$border-thick: 2px !default; -$none: 0 !default; -$border-thin: 1px !default; -$border-thick: 2px !default; +$white-color: #ffffff !default; +$white-bg: #ffffff !default; +$orange-bg: #e95e38 !default; -$white-color: #FFFFFF !default; -$white-bg: #FFFFFF !default; -$orange-bg: #e95e38 !default; +$smoke-bg: #f5f5f5 !default; +$light-black: #444 !default; -$smoke-bg: #F5F5F5 !default; -$light-black: #444 !default; +$black-bg: rgba(30, 30, 30, 0.97) !default; -$black-bg: rgba(30,30,30,.97) !default; +$black-color: #2c2c2c !default; +$black-hr: #444444 !default; -$black-color: #2c2c2c !default; -$black-hr: #444444 !default; +$hr-line: rgba(0, 0, 0, 0.1) !default; -$hr-line: rgba(0,0,0, .1) !default; +$light-gray: #e3e3e3 !default; +$medium-gray: #dddddd !default; +$dark-gray: #9a9a9a !default; -$light-gray: #E3E3E3 !default; -$medium-gray: #DDDDDD !default; -$dark-gray: #9A9A9A !default; +$table-line-color: #ccc !default; +$muted-color: #a49e93 !default; -$table-line-color: #ccc !default; -$muted-color: #a49e93 !default; +$opacity-gray-3: rgba(222, 222, 222, 0.3) !default; +$opacity-gray-5: rgba(222, 222, 222, 0.5) !default; +$opacity-gray-8: rgba(222, 222, 222, 0.8) !default; -$opacity-gray-3: rgba(222,222,222, .3) !default; -$opacity-gray-5: rgba(222,222,222, .5) !default; -$opacity-gray-8: rgba(222,222,222, .8) !default; +$opacity-5: rgba(255, 255, 255, 0.5) !default; +$opacity-8: rgba(255, 255, 255, 0.8) !default; +$datepicker-color-days: rgba(255, 255, 255, 0.8) !default; +$datepicker-color-old-new-days: rgba(255, 255, 255, 0.4) !default; -$opacity-5: rgba(255,255,255, .5) !default; -$opacity-8: rgba(255,255,255, .8) !default; +$opacity-1: rgba(255, 255, 255, 0.1) !default; +$opacity-2: rgba(255, 255, 255, 0.2) !default; -$datepicker-color-days: rgba(255,255,255, .8) !default; -$datepicker-color-old-new-days: rgba(255,255,255, .4) !default; +$transparent-bg: transparent !default; +$dark-background: #555555 !default; +$gray-input-bg: #fffcf5 !default; +$danger-input-bg: #ffc0a4 !default; +$success-input-bg: #abf3cb !default; +$other-medium-gray: #a49e93 !default; +$transparent-bg: transparent !default; -$opacity-1: rgba(255,255,255, .1) !default; -$opacity-2: rgba(255,255,255, .2) !default; +$placeholder-gray: rgba(210, 210, 210, 1) !default; -$transparent-bg: transparent !default; -$dark-background: #555555 !default; +$default-color: #007f60 !default; +$default-bg: #007f60 !default; +$default-states-color: #403d39 !default; -$gray-input-bg: #fffcf5 !default; -$danger-input-bg: #FFC0A4 !default; -$success-input-bg: #ABF3CB !default; -$other-medium-gray: #A49E93 !default; -$transparent-bg: transparent !default; +$smoke-bg: #f5f5f5 !default; +$pale-bg: #fffcf5 !default; +$medium-pale-bg: #f1eae0 !default; +$default-body-bg: #f4f3ef !default; -$placeholder-gray: rgba(210, 210, 210, 1) !default; +$primary-color: #51cbce !default; +$primary-states-color: darken($primary-color, 10%) !default; -$default-color: #66615B !default; -$default-bg: #66615B !default; -$default-states-color: #403D39 !default; +$success-color: #6bd098 !default; +$success-states-color: darken($success-color, 10%) !default; -$smoke-bg: #F5F5F5 !default; -$pale-bg: #FFFCF5 !default; -$medium-pale-bg: #F1EAE0 !default; -$default-body-bg: #f4f3ef !default; +$info-color: #51bcda !default; +$info-states-color: darken($info-color, 10%) !default; -$primary-color: #51cbce !default; -$primary-states-color: darken($primary-color, 10%) !default; +$warning-color: #fbc658 !default; +$warning-states-color: darken($warning-color, 10%) !default; -$success-color: #6bd098 !default; -$success-states-color: darken($success-color, 10%) !default; +$danger-color: #ef8157 !default; +$danger-states-color: darken($danger-color, 8%) !default; -$info-color: #51bcda !default; -$info-states-color: darken($info-color, 10%) !default; +$link-disabled-color: #666666 !default; -$warning-color: #fbc658 !default; -$warning-states-color: darken($warning-color, 10%) !default; +$purple-color: #c178c1 !default; +$purple-states-color: darken($purple-color, 8%) !default; -$danger-color: #ef8157 !default; -$danger-states-color: darken($danger-color, 8%) !default; +$medium-pale-bg: #f1eae0 !default; -$link-disabled-color: #666666 !default; +$brown-color: #dcb285 !default; +$default-color-opacity: rgba(182, 182, 182, 0.6) !default; +$primary-color-opacity: rgba(249, 99, 50, 0.3) !default; +$success-color-opacity: rgba(24, 206, 15, 0.3) !default; +$info-color-opacity: rgba(44, 168, 255, 0.3) !default; +$warning-color-opacity: rgba(255, 178, 54, 0.3) !default; +$danger-color-opacity: rgba(255, 54, 54, 0.3) !default; -$purple-color: #c178c1 !default; -$purple-states-color: darken($purple-color, 8%) !default; +$new-blue: #1dc7ea; +$new-purple: #9368e9; +$new-red: #fb404b; +$new-green: #87cb16; +$new-orange: #ffa534; +$new-dark-blue: #1f77d0; +$new-black: #5e5e5e; -$medium-pale-bg: #F1EAE0 !default; - -$brown-color: #dcb285 !default; -$default-color-opacity: rgba(182, 182, 182, .6) !default; -$primary-color-opacity: rgba(249, 99, 50, .3) !default; -$success-color-opacity: rgba(24, 206, 15, .3) !default; -$info-color-opacity: rgba(44, 168, 255, .3) !default; -$warning-color-opacity: rgba(255, 178, 54, .3) !default; -$danger-color-opacity: rgba(255, 54, 54, .3) !default; - -$new-blue: #1DC7EA; -$new-purple: #9368E9; -$new-red: #FB404B; -$new-green: #87CB16; -$new-orange: #FFA534; -$new-dark-blue: #1F77D0; -$new-black: #5e5e5e; - -$orange-color: #f96332 !default; +$orange-color: #f96332 !default; $color-red-error: rgb(185, 74, 72) !default; $color-grey-arrow: rgba(204, 204, 204, 0.2) !default; -$bg-nude: #FFFCF5 !default; -$bg-primary: lighten($primary-color, 7%) !default; -$bg-info: lighten($info-color, 7%) !default; -$bg-success: lighten($success-color, 7%) !default; -$bg-warning: lighten($warning-color, 7%) !default; -$bg-danger: lighten($danger-color, 7%) !default; -$bg-brown: lighten($brown-color, 7%) !default; -$bg-purple: lighten($purple-color, 7%) !default; +$bg-nude: #fffcf5 !default; +$bg-primary: lighten($primary-color, 7%) !default; +$bg-info: lighten($info-color, 7%) !default; +$bg-success: lighten($success-color, 7%) !default; +$bg-warning: lighten($warning-color, 7%) !default; +$bg-danger: lighten($danger-color, 7%) !default; +$bg-brown: lighten($brown-color, 7%) !default; +$bg-purple: lighten($purple-color, 7%) !default; // brand Colors -$brand-primary: $primary-color !default; -$brand-info: $info-color !default; -$brand-success: $success-color !default; -$brand-warning: $warning-color !default; -$brand-danger: $danger-color !default; -$brand-inverse: $black-color !default; - -$link-disabled-color: #666666 !default; -$dark-color: #212120 !default; +$brand-primary: $primary-color !default; +$brand-info: $info-color !default; +$brand-success: $success-color !default; +$brand-warning: $warning-color !default; +$brand-danger: $danger-color !default; +$brand-inverse: $black-color !default; + +$link-disabled-color: #666666 !default; +$dark-color: #212120 !default; // light colors -$light-blue: rgba($primary-color, .2); -$light-azure: rgba($info-color, .2); -$light-green: rgba($success-color, .2); -$light-orange: rgba($warning-color, .2); -$light-red: rgba($danger-color, .2); +$light-blue: rgba($primary-color, 0.2); +$light-azure: rgba($info-color, 0.2); +$light-green: rgba($success-color, 0.2); +$light-orange: rgba($warning-color, 0.2); +$light-red: rgba($danger-color, 0.2); // padding for links inside dropdown menu -$padding-dropdown-vertical: 10px !default; -$padding-dropdown-horizontal: 15px !default; +$padding-dropdown-vertical: 10px !default; +$padding-dropdown-horizontal: 15px !default; -$margin-large-vertical: 30px !default; -$margin-base-vertical: 15px !default; +$margin-large-vertical: 30px !default; +$margin-base-vertical: 15px !default; // border radius for buttons -$border-radius-none: 0px !default; -$border-radius-btn-small: 26px !default; -$border-radius-btn-base: 20px !default; -$border-radius-btn-large: 50px !default; - - -$margin-bottom: 0 0 10px 0 !default; -$border-radius-small: 3px !default; -$border-radius-base: 4px !default; -$border-radius-large: 6px !default; -$border-radius-x-large: 8px !default; -$border-radius-extreme: 12px !default; +$border-radius-none: 0px !default; +$border-radius-btn-small: 26px !default; +$border-radius-btn-base: 20px !default; +$border-radius-btn-large: 50px !default; + +$margin-bottom: 0 0 10px 0 !default; +$border-radius-small: 3px !default; +$border-radius-base: 4px !default; +$border-radius-large: 6px !default; +$border-radius-x-large: 8px !default; +$border-radius-extreme: 12px !default; //variables used in cards -$card-black-color: #252422 !default; -$card-muted-color: #ccc5b9 !default; - -$card-background-blue: #b8d8d8 !default; -$card-font-blue: #506568 !default; -$card-subtitle-blue: #7a9e9f !default; - -$card-background-green: #d5e5a3 !default; -$card-font-green: #60773d !default; -$card-subtitle-green: #92ac56 !default; +$card-black-color: #252422 !default; +$card-muted-color: #ccc5b9 !default; -$card-background-yellow: #ffe28c !default; -$card-font-yellow: #b25825 !default; -$card-subtitle-yellow: #d88715 !default; +$card-background-blue: #b8d8d8 !default; +$card-font-blue: #506568 !default; +$card-subtitle-blue: #7a9e9f !default; -$card-background-brown: #d6c1ab !default; -$card-font-brown: #75442e !default; -$card-subtitle-brown: #a47e65 !default; +$card-background-green: #d5e5a3 !default; +$card-font-green: #60773d !default; +$card-subtitle-green: #92ac56 !default; -$card-background-purple: #baa9ba !default; -$card-font-purple: #3a283d !default; -$card-subtitle-purple: #5a283d !default; +$card-background-yellow: #ffe28c !default; +$card-font-yellow: #b25825 !default; +$card-subtitle-yellow: #d88715 !default; -$card-background-orange: #ff8f5e !default; -$card-font-orange: #772510 !default; -$card-subtitle-orange: #e95e37 !default; +$card-background-brown: #d6c1ab !default; +$card-font-brown: #75442e !default; +$card-subtitle-brown: #a47e65 !default; +$card-background-purple: #baa9ba !default; +$card-font-purple: #3a283d !default; +$card-subtitle-purple: #5a283d !default; +$card-background-orange: #ff8f5e !default; +$card-font-orange: #772510 !default; +$card-subtitle-orange: #e95e37 !default; //== Components // -$padding-input-vertical: 11px !default; -$padding-input-horizontal: 11px !default; +$padding-input-vertical: 11px !default; +$padding-input-horizontal: 11px !default; -$padding-btn-vertical: 11px !default; -$padding-btn-horizontal: 22px !default; +$padding-btn-vertical: 11px !default; +$padding-btn-horizontal: 22px !default; -$padding-base-vertical: .5rem !default; -$padding-base-horizontal: .7rem !default; +$padding-base-vertical: 0.5rem !default; +$padding-base-horizontal: 0.7rem !default; -$padding-round-horizontal: 23px !default; +$padding-round-horizontal: 23px !default; -$padding-simple-vertical: 10px !default; -$padding-simple-horizontal: 17px !default; +$padding-simple-vertical: 10px !default; +$padding-simple-horizontal: 17px !default; -$padding-large-vertical: 15px !default; -$padding-large-horizontal: 48px !default; +$padding-large-vertical: 15px !default; +$padding-large-horizontal: 48px !default; -$padding-small-vertical: 5px !default; -$padding-small-horizontal: 15px !default; +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 15px !default; // $padding-xs-vertical: 1px !default; // $padding-xs-horizontal: 5px !default; -$padding-label-vertical: 2px !default; -$padding-label-horizontal: 12px !default; - -$margin-large-vertical: 30px !default; -$margin-base-vertical: 15px !default; - -$margin-base-horizontal: 15px !default; - -$margin-bottom: 10px !default; -$border: 1px solid !default; -$border-radius-extra-small: 0.125rem !default; -$border-radius-small: 0.1875rem !default; -$border-radius-large: 0.25rem !default; -$border-radius-extreme: 0.875rem !default; - -$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; -$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; - -$btn-round-radius: 30px !default; - -$height-base: 40px !default; - -$btn-icon-size: 3.5rem !default; -$btn-icon-size-regular: 2.375rem !default; -$btn-icon-font-size-regular: 0.9375rem !default; -$btn-icon-font-size-small: 0.6875rem !default; -$btn-icon-size-small: 1.875rem !default; -$btn-icon-font-size-lg: 1.325rem !default; -$btn-icon-size-lg: 3.6rem !default; - -$font-size-h1: 3.5em !default; // ~ 49px -$font-size-h2: 2.5em !default; // ~ 35px -$font-size-h3: 2em !default; // ~ 28px -$font-size-h4: 1.714em !default; // ~ 24px -$font-size-h5: 1.57em !default; // ~ 22px -$font-size-h6: 1em !default; // ~ 14px - -$font-paragraph: 1em !default; -$font-size-navbar: 1em !default; -$font-size-mini: 0.7142em !default; -$font-size-small: 0.8571em !default; -$font-size-base: 14px !default; -$font-size-large: 1rem !default; -$font-size-large-navbar: 20px !default; -$font-size-blockquote: 1.1em !default; // ~ 15px -$font-size-medium: 16px !default; -$font-size-xs: 12px !default; - -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-semi: 600 !default; -$font-weight-bold: 700 !default; - -$line-height-general: 1.5 !default; -$line-height-nav-link: 1.625rem !default; -$btn-icon-line-height: 2.4em !default; -$line-height: 1.35em !default; -$line-height-lg: 54px !default; - - -$border-radius-top: 10px 10px 0 0 !default; -$border-radius-bottom: 0 0 10px 10px !default; - -$dropdown-shadow: 1px 2px 7px 1px rgba(0,0,0,.125); -$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); -$box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); -$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35); - -$general-transition-time: 300ms !default; - -$slow-transition-time: 370ms !default; -$dropdown-coordinates: 29px -50px !default; - -$fast-transition-time: 150ms !default; -$select-coordinates: 50% -40px !default; - -$transition-linear: linear !default; -$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; -$transition-ease: ease 0s; - +$padding-label-vertical: 2px !default; +$padding-label-horizontal: 12px !default; + +$margin-large-vertical: 30px !default; +$margin-base-vertical: 15px !default; + +$margin-base-horizontal: 15px !default; + +$margin-bottom: 10px !default; +$border: 1px solid !default; +$border-radius-extra-small: 0.125rem !default; +$border-radius-small: 0.1875rem !default; +$border-radius-large: 0.25rem !default; +$border-radius-extreme: 0.875rem !default; + +$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; +$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; + +$btn-round-radius: 30px !default; + +$height-base: 40px !default; + +$btn-icon-size: 3.5rem !default; +$btn-icon-size-regular: 2.375rem !default; +$btn-icon-font-size-regular: 0.9375rem !default; +$btn-icon-font-size-small: 0.6875rem !default; +$btn-icon-size-small: 1.875rem !default; +$btn-icon-font-size-lg: 1.325rem !default; +$btn-icon-size-lg: 3.6rem !default; + +$font-size-h1: 3.5em !default; // ~ 49px +$font-size-h2: 2.5em !default; // ~ 35px +$font-size-h3: 2em !default; // ~ 28px +$font-size-h4: 1.714em !default; // ~ 24px +$font-size-h5: 1.57em !default; // ~ 22px +$font-size-h6: 1em !default; // ~ 14px + +$font-paragraph: 1em !default; +$font-size-navbar: 1em !default; +$font-size-mini: 0.7142em !default; +$font-size-small: 0.8571em !default; +$font-size-base: 14px !default; +$font-size-large: 1rem !default; +$font-size-large-navbar: 20px !default; +$font-size-blockquote: 1.1em !default; // ~ 15px +$font-size-medium: 16px !default; +$font-size-xs: 12px !default; + +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-semi: 600 !default; +$font-weight-bold: 700 !default; + +$line-height-general: 1.5 !default; +$line-height-nav-link: 1.625rem !default; +$btn-icon-line-height: 2.4em !default; +$line-height: 1.35em !default; +$line-height-lg: 54px !default; + +$border-radius-top: 10px 10px 0 0 !default; +$border-radius-bottom: 0 0 10px 10px !default; + +$dropdown-shadow: 1px 2px 7px 1px rgba(0, 0, 0, 0.125); +$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +$box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); +$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0, 0.2), + 0px 2px 30px 0 rgba(0, 0, 0, 0.35); + +$general-transition-time: 300ms !default; + +$slow-transition-time: 370ms !default; +$dropdown-coordinates: 29px -50px !default; + +$fast-transition-time: 150ms !default; +$select-coordinates: 50% -40px !default; + +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-ease: ease 0s; //$navbar-padding-a: 9px 13px; -$navbar-margin-a: 15px 0px; +$navbar-margin-a: 15px 0px; -$padding-social-a: 10px 5px; +$padding-social-a: 10px 5px; -$navbar-margin-a-btn: 15px 0px; -$navbar-margin-a-btn-round: 16px 0px; +$navbar-margin-a-btn: 15px 0px; +$navbar-margin-a-btn-round: 16px 0px; -$navbar-padding-a-icons: 6px 15px; -$navbar-margin-a-icons: 6px 3px; +$navbar-padding-a-icons: 6px 15px; +$navbar-margin-a-icons: 6px 3px; -$navbar-padding-base: 0.625rem; +$navbar-padding-base: 0.625rem; //$navbar-margin-brand: 5px 0px; -$navbar-margin-brand-icons: 12px auto; -$navbar-margin-btn: 15px 3px; +$navbar-margin-brand-icons: 12px auto; +$navbar-margin-btn: 15px 3px; -$height-icon-sm: 32px; -$width-icon-sm: 32px; -$padding-icon-sm: 4px; -$border-radius-icon-sm: 7px; +$height-icon-sm: 32px; +$width-icon-sm: 32px; +$padding-icon-sm: 4px; +$border-radius-icon-sm: 7px; -$height-icon-message: 40px; -$width-icon-message: 40px; +$height-icon-message: 40px; +$width-icon-message: 40px; -$height-icon-message-sm: 20px; -$width-icon-message-sm: 20px; +$height-icon-message-sm: 20px; +$width-icon-message-sm: 20px; -$white-navbar: rgba(#FFFFFF, .96); -$primary-navbar: rgba(#34ACDC, .98); -$info-navbar: rgba(#5BCAFF, .98); -$success-navbar: rgba(#4CD964, .98); -$warning-navbar: rgba(#FF9500, .98); -$danger-navbar: rgba(#FF4C40, .98); +$white-navbar: rgba(#ffffff, 0.96); +$primary-navbar: rgba(#34acdc, 0.98); +$info-navbar: rgba(#5bcaff, 0.98); +$success-navbar: rgba(#4cd964, 0.98); +$warning-navbar: rgba(#ff9500, 0.98); +$danger-navbar: rgba(#ff4c40, 0.98); -$topbar-x: topbar-x !default; -$topbar-back: topbar-back !default; -$bottombar-x: bottombar-x !default; -$bottombar-back: bottombar-back !default; +$topbar-x: topbar-x !default; +$topbar-back: topbar-back !default; +$bottombar-x: bottombar-x !default; +$bottombar-back: bottombar-back !default; //Nucleo Icons -$nc-font-path: '../fonts' !default; -$nc-font-size-base: 14px !default; -$nc-css-prefix: nc !default; -$nc-background-color: #eee !default; -$nc-li-width: (30em / 14) !default; -$nc-padding-width: (1em/3) !default; +$nc-font-path: "../fonts" !default; +$nc-font-size-base: 14px !default; +$nc-css-prefix: nc !default; +$nc-background-color: #eee !default; +$nc-li-width: (30em / 14) !default; +$nc-padding-width: (1em/3) !default; // Social icons color -$social-twitter: #55acee !default; -$social-twitter-state-color: darken(#55acee, 5%) !default; +$social-twitter: #55acee !default; +$social-twitter-state-color: darken(#55acee, 5%) !default; -$social-facebook: #3b5998 !default; -$social-facebook-state-color: darken(#3b5998, 5%) !default; +$social-facebook: #3b5998 !default; +$social-facebook-state-color: darken(#3b5998, 5%) !default; -$social-google: #dd4b39 !default; -$social-google-state-color: darken(#dd4b39, 5%) !default; +$social-google: #dd4b39 !default; +$social-google-state-color: darken(#dd4b39, 5%) !default; -$social-linkedin: #0077B5 !default; -$social-linkedin-state-color: darken(#0077B5, 5%) !default; +$social-linkedin: #0077b5 !default; +$social-linkedin-state-color: darken(#0077b5, 5%) !default; // Sidebar variables -$sidebar-width: calc(100% - 260px) !default; -$sidebar-mini-width: calc(100% - 80px) !default; - +$sidebar-width: calc(100% - 260px) !default; +$sidebar-mini-width: calc(100% - 80px) !default; // Social icons color -$social-twitter: #55acee !default; -$social-twitter-state-color: lighten(#55acee, 6%) !default; +$social-twitter: #55acee !default; +$social-twitter-state-color: lighten(#55acee, 6%) !default; -$social-facebook: #3b5998 !default; -$social-facebook-state-color: lighten(#3b5998, 6%) !default; +$social-facebook: #3b5998 !default; +$social-facebook-state-color: lighten(#3b5998, 6%) !default; -$social-google: #dd4b39 !default; -$social-google-state-color: lighten(#dd4b39, 6%) !default; +$social-google: #dd4b39 !default; +$social-google-state-color: lighten(#dd4b39, 6%) !default; -$social-linkedin: #0077B5 !default; -$social-linkedin-state-color: lighten(#0077B5, 6%) !default; +$social-linkedin: #0077b5 !default; +$social-linkedin-state-color: lighten(#0077b5, 6%) !default; -$social-pinterest: #cc2127 !default; -$social-pinterest-state-color: lighten(#cc2127, 6%) !default; +$social-pinterest: #cc2127 !default; +$social-pinterest-state-color: lighten(#cc2127, 6%) !default; -$social-dribbble: #ea4c89 !default; -$social-dribbble-state-color: lighten(#ea4c89, 6%) !default; +$social-dribbble: #ea4c89 !default; +$social-dribbble-state-color: lighten(#ea4c89, 6%) !default; -$social-github: #333333 !default; -$social-github-state-color: lighten(#333333, 6%) !default; +$social-github: #333333 !default; +$social-github-state-color: lighten(#333333, 6%) !default; -$social-youtube: #e52d27 !default; -$social-youtube-state-color: lighten(#e52d27, 6%) !default; +$social-youtube: #e52d27 !default; +$social-youtube-state-color: lighten(#e52d27, 6%) !default; -$social-instagram: #125688 !default; -$social-instagram-state-color: lighten(#125688, 6%) !default; +$social-instagram: #125688 !default; +$social-instagram-state-color: lighten(#125688, 6%) !default; -$social-reddit: #ff4500 !default; -$social-reddit-state-color: lighten(#ff4500, 6%) !default; +$social-reddit: #ff4500 !default; +$social-reddit-state-color: lighten(#ff4500, 6%) !default; -$social-tumblr: #35465c !default; -$social-tumblr-state-color: lighten(#35465c, 6%) !default; +$social-tumblr: #35465c !default; +$social-tumblr-state-color: lighten(#35465c, 6%) !default; -$social-behance: #1769ff !default; -$social-behance-state-color: lighten(#1769ff, 6%) !default; +$social-behance: #1769ff !default; +$social-behance-state-color: lighten(#1769ff, 6%) !default; // Placeholder text color $input-color-placeholder: #999 !default; diff --git a/src/assets/scss/paper-dashboard/mixins/_page-header.scss b/src/assets/scss/paper-dashboard/mixins/_page-header.scss index 713dfd3..314f493 100644 --- a/src/assets/scss/paper-dashboard/mixins/_page-header.scss +++ b/src/assets/scss/paper-dashboard/mixins/_page-header.scss @@ -1,7 +1,4 @@ @mixin linear-gradient($color1, $color2){ background: $color1; /* For browsers that do not support gradients */ - background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ - background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ + } diff --git a/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss b/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss index 7c3e0d2..1a94237 100644 --- a/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss +++ b/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss @@ -1,228 +1,350 @@ @mixin box-shadow($shadow...) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; + -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 + box-shadow: $shadow; } -@mixin transition($time, $type){ - -webkit-transition: all $time $type; - -moz-transition: all $time $type; - -o-transition: all $time $type; - -ms-transition: all $time $type; - transition: all $time $type; +@mixin transition($time, $type) { + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; } - -@mixin sidebar-color($color){ - &:after{ - background: $color; - } +@mixin sidebar-color($color) { + &:after { + background: $color; + } } -@mixin bar-animation($type){ - -webkit-animation: $type 500ms linear 0s; - -moz-animation: $type 500ms linear 0s; - animation: $type 500ms 0s; - -webkit-animation-fill-mode: forwards; - -moz-animation-fill-mode: forwards; - animation-fill-mode: forwards; +@mixin bar-animation($type) { + -webkit-animation: $type 500ms linear 0s; + -moz-animation: $type 500ms linear 0s; + animation: $type 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; } -@mixin sidebar-active-color($font-color){ - .nav { - li { - &.active > a, - &.active > a i, - &.active > a[data-toggle="collapse"], - &.active > a[data-toggle="collapse"] i, - &.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon, - &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a { - color: $font-color; - opacity: 1; - } - } - } +@mixin sidebar-active-color($font-color) { + .nav { + li { + &.active > a, + &.active > a i, + &.active > a[data-toggle="collapse"], + &.active > a[data-toggle="collapse"] i, + &.active + > a[data-toggle="collapse"] + ~ div + > ul + > li.active + .sidebar-mini-icon, + &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a { + color: $font-color; + opacity: 1; + } + } + } } -@mixin transition-opacity($time, $type){ - -webkit-transition: opacity $time $type; - -moz-transition: opacity $time $type; - -o-transition: opacity $time $type; - -ms-transition: opacity $time $type; - transition: opacity $time $type; +@mixin transition-opacity($time, $type) { + -webkit-transition: opacity $time $type; + -moz-transition: opacity $time $type; + -o-transition: opacity $time $type; + -ms-transition: opacity $time $type; + transition: opacity $time $type; } @mixin transform-translate-y-dropdown($value) { - -webkit-transform: translate3d(-20px,$value,0) !important; - -moz-transform: translate3d(-20px,$value,0) !important; - -o-transform: translate3d(-20px,$value,0) !important; - -ms-transform: translate3d(-20px,$value,0) !important; - transform: translate3d(-20px,$value,0) !important; -} - -@mixin transform-translate-x($value){ - -webkit-transform: translate3d($value, 0, 0); - -moz-transform: translate3d($value, 0, 0); - -o-transform: translate3d($value, 0, 0); - -ms-transform: translate3d($value, 0, 0); - transform: translate3d($value, 0, 0); -} - -@mixin transform-translate-y($value){ - -webkit-transform: translate3d(0,$value,0) !important; - -moz-transform: translate3d(0,$value,0) !important; - -o-transform: translate3d(0,$value,0) !important; - -ms-transform: translate3d(0,$value,0) !important; - transform: translate3d(0,$value,0) !important; -} - -@mixin transform-translate-y-fixed-plugin($value){ - -webkit-transform: translate3d(0,$value,0) !important; - -moz-transform: translate3d(0,$value,0) !important; - -o-transform: translate3d(0,$value,0) !important; - -ms-transform: translate3d(0,$value,0) !important; - transform: translate3d(0,$value,0) !important; -} - -@mixin icon-gradient($color, $bottomColor: #000){ - background: $color; - background: -webkit-linear-gradient($color 0%, $bottomColor 80%); - background: -o-linear-gradient($color 0%, $bottomColor 80%); - background: -moz-linear-gradient($color 0%, $bottomColor 80%); - background: linear-gradient($color 0%, $bottomColor 80%); -} - -@mixin topbar-x-rotation(){ - @keyframes topbar-x { - 0% {top: 0px; transform: rotate(0deg); } - 45% {top: 6px; transform: rotate(145deg); } - 75% {transform: rotate(130deg); } - 100% {transform: rotate(135deg); } - } - @-webkit-keyframes topbar-x { - 0% {top: 0px; -webkit-transform: rotate(0deg); } - 45% {top: 6px; -webkit-transform: rotate(145deg); } - 75% {-webkit-transform: rotate(130deg); } - 100% { -webkit-transform: rotate(135deg); } - } - @-moz-keyframes topbar-x { - 0% {top: 0px; -moz-transform: rotate(0deg); } - 45% {top: 6px; -moz-transform: rotate(145deg); } - 75% {-moz-transform: rotate(130deg); } - 100% { -moz-transform: rotate(135deg); } - } -} - - -@mixin topbar-back-rotation(){ - @keyframes topbar-back { - 0% { top: 6px; transform: rotate(135deg); } - 45% { transform: rotate(-10deg); } - 75% { transform: rotate(5deg); } - 100% { top: 0px; transform: rotate(0); } - } - - @-webkit-keyframes topbar-back { - 0% { top: 6px; -webkit-transform: rotate(135deg); } - 45% { -webkit-transform: rotate(-10deg); } - 75% { -webkit-transform: rotate(5deg); } - 100% { top: 0px; -webkit-transform: rotate(0); } - } - - @-moz-keyframes topbar-back { - 0% { top: 6px; -moz-transform: rotate(135deg); } - 45% { -moz-transform: rotate(-10deg); } - 75% { -moz-transform: rotate(5deg); } - 100% { top: 0px; -moz-transform: rotate(0); } - } -} - -@mixin bottombar-x-rotation(){ - @keyframes bottombar-x { - 0% {bottom: 0px; transform: rotate(0deg);} - 45% {bottom: 6px; transform: rotate(-145deg);} - 75% {transform: rotate(-130deg);} - 100% {transform: rotate(-135deg);} - } - @-webkit-keyframes bottombar-x { - 0% {bottom: 0px; -webkit-transform: rotate(0deg);} - 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} - 75% {-webkit-transform: rotate(-130deg);} - 100% {-webkit-transform: rotate(-135deg);} - } - @-moz-keyframes bottombar-x { - 0% {bottom: 0px; -moz-transform: rotate(0deg);} - 45% {bottom: 6px; -moz-transform: rotate(-145deg);} - 75% {-moz-transform: rotate(-130deg);} - 100% {-moz-transform: rotate(-135deg);} - } -} - -@mixin bottombar-back-rotation{ - @keyframes bottombar-back { - 0% { bottom: 6px;transform: rotate(-135deg);} - 45% { transform: rotate(10deg);} - 75% { transform: rotate(-5deg);} - 100% { bottom: 0px;transform: rotate(0);} - } - @-webkit-keyframes bottombar-back { - 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} - 45% {-webkit-transform: rotate(10deg);} - 75% {-webkit-transform: rotate(-5deg);} - 100% {bottom: 0px;-webkit-transform: rotate(0);} - } - @-moz-keyframes bottombar-back { - 0% {bottom: 6px;-moz-transform: rotate(-135deg);} - 45% {-moz-transform: rotate(10deg);} - 75% {-moz-transform: rotate(-5deg);} - 100% {bottom: 0px;-moz-transform: rotate(0);} - } - -} - -@mixin sidebar-text-color($text-color){ - .nav { - li { - a, - a i, - a[data-toggle="collapse"], - a[data-toggle="collapse"] i, - a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon, - a[data-toggle="collapse"] ~ div > ul > li > a { - color: $text-color; - opacity: .7; - } - - &:hover:not(.active) > a, - &:focus:not(.active) > a { - opacity: 1; - } - } - } - - .logo { - .simple-text { - color: $text-color; - } - &:after { - background-color: $text-color; - opacity: .4; - } - } - - .user { - .info a span, - .nav .sidebar-mini-icon, - .nav .sidebar-normal { - color: $text-color !important; - } - &:after { - background-color: $text-color; - opacity: .4; - } - } + -webkit-transform: translate3d(-20px, $value, 0) !important; + -moz-transform: translate3d(-20px, $value, 0) !important; + -o-transform: translate3d(-20px, $value, 0) !important; + -ms-transform: translate3d(-20px, $value, 0) !important; + transform: translate3d(-20px, $value, 0) !important; +} + +@mixin transform-translate-x($value) { + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); +} + +@mixin transform-translate-y($value) { + -webkit-transform: translate3d(0, $value, 0) !important; + -moz-transform: translate3d(0, $value, 0) !important; + -o-transform: translate3d(0, $value, 0) !important; + -ms-transform: translate3d(0, $value, 0) !important; + transform: translate3d(0, $value, 0) !important; +} + +@mixin transform-translate-y-fixed-plugin($value) { + -webkit-transform: translate3d(0, $value, 0) !important; + -moz-transform: translate3d(0, $value, 0) !important; + -o-transform: translate3d(0, $value, 0) !important; + -ms-transform: translate3d(0, $value, 0) !important; + transform: translate3d(0, $value, 0) !important; +} + +@mixin icon-gradient($color, $bottomColor: #007f60) { + background: $color; + background: -webkit-linear-gradient($color 0%, $bottomColor 80%); + background: -o-linear-gradient($color 0%, $bottomColor 80%); + background: -moz-linear-gradient($color 0%, $bottomColor 80%); + background: linear-gradient($color 0%, $bottomColor 80%); +} + +@mixin topbar-x-rotation() { + @keyframes topbar-x { + 0% { + top: 0px; + transform: rotate(0deg); + } + 45% { + top: 6px; + transform: rotate(145deg); + } + 75% { + transform: rotate(130deg); + } + 100% { + transform: rotate(135deg); + } + } + @-webkit-keyframes topbar-x { + 0% { + top: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + top: 6px; + -webkit-transform: rotate(145deg); + } + 75% { + -webkit-transform: rotate(130deg); + } + 100% { + -webkit-transform: rotate(135deg); + } + } + @-moz-keyframes topbar-x { + 0% { + top: 0px; + -moz-transform: rotate(0deg); + } + 45% { + top: 6px; + -moz-transform: rotate(145deg); + } + 75% { + -moz-transform: rotate(130deg); + } + 100% { + -moz-transform: rotate(135deg); + } + } +} + +@mixin topbar-back-rotation() { + @keyframes topbar-back { + 0% { + top: 6px; + transform: rotate(135deg); + } + 45% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(5deg); + } + 100% { + top: 0px; + transform: rotate(0); + } + } + + @-webkit-keyframes topbar-back { + 0% { + top: 6px; + -webkit-transform: rotate(135deg); + } + 45% { + -webkit-transform: rotate(-10deg); + } + 75% { + -webkit-transform: rotate(5deg); + } + 100% { + top: 0px; + -webkit-transform: rotate(0); + } + } + + @-moz-keyframes topbar-back { + 0% { + top: 6px; + -moz-transform: rotate(135deg); + } + 45% { + -moz-transform: rotate(-10deg); + } + 75% { + -moz-transform: rotate(5deg); + } + 100% { + top: 0px; + -moz-transform: rotate(0); + } + } +} + +@mixin bottombar-x-rotation() { + @keyframes bottombar-x { + 0% { + bottom: 0px; + transform: rotate(0deg); + } + 45% { + bottom: 6px; + transform: rotate(-145deg); + } + 75% { + transform: rotate(-130deg); + } + 100% { + transform: rotate(-135deg); + } + } + @-webkit-keyframes bottombar-x { + 0% { + bottom: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -webkit-transform: rotate(-145deg); + } + 75% { + -webkit-transform: rotate(-130deg); + } + 100% { + -webkit-transform: rotate(-135deg); + } + } + @-moz-keyframes bottombar-x { + 0% { + bottom: 0px; + -moz-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -moz-transform: rotate(-145deg); + } + 75% { + -moz-transform: rotate(-130deg); + } + 100% { + -moz-transform: rotate(-135deg); + } + } +} + +@mixin bottombar-back-rotation { + @keyframes bottombar-back { + 0% { + bottom: 6px; + transform: rotate(-135deg); + } + 45% { + transform: rotate(10deg); + } + 75% { + transform: rotate(-5deg); + } + 100% { + bottom: 0px; + transform: rotate(0); + } + } + @-webkit-keyframes bottombar-back { + 0% { + bottom: 6px; + -webkit-transform: rotate(-135deg); + } + 45% { + -webkit-transform: rotate(10deg); + } + 75% { + -webkit-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -webkit-transform: rotate(0); + } + } + @-moz-keyframes bottombar-back { + 0% { + bottom: 6px; + -moz-transform: rotate(-135deg); + } + 45% { + -moz-transform: rotate(10deg); + } + 75% { + -moz-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -moz-transform: rotate(0); + } + } +} + +@mixin sidebar-text-color($text-color) { + .nav { + li { + a, + a i, + a[data-toggle="collapse"], + a[data-toggle="collapse"] i, + a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon, + a[data-toggle="collapse"] ~ div > ul > li > a { + color: $text-color; + opacity: 0.7; + } + + &:hover:not(.active) > a, + &:focus:not(.active) > a { + opacity: 1; + } + } + } + + .logo { + .simple-text { + color: $text-color; + } + &:after { + background-color: $text-color; + opacity: 0.4; + } + } + + .user { + .info a span, + .nav .sidebar-mini-icon, + .nav .sidebar-normal { + color: $text-color !important; + } + &:after { + background-color: $text-color; + opacity: 0.4; + } + } } @mixin badge-color($color) { - border-color: $color; - background-color: $color; + border-color: $color; + background-color: $color; } diff --git a/src/components/Sidebar/Sidebar.Auth.tsx b/src/components/Sidebar/Sidebar.Auth.tsx index f99d31a..a8a94e0 100644 --- a/src/components/Sidebar/Sidebar.Auth.tsx +++ b/src/components/Sidebar/Sidebar.Auth.tsx @@ -34,13 +34,8 @@ function Sidebar({ props, routes }: ISideBarProps) { }; }); return ( -
-
+
+
-
diff --git a/src/views/Mail.tsx b/src/views/Mail.tsx new file mode 100644 index 0000000..e45f05f --- /dev/null +++ b/src/views/Mail.tsx @@ -0,0 +1,103 @@ +import React, { useEffect, useState } from "react"; +import { + Button, + Card, + CardBody, + FormGroup, + Form, + Input, + InputGroupAddon, + InputGroupText, + InputGroup, + Row, + Col, + Spinner, + CardHeader, +} from "reactstrap"; +import { ILogin } from "../models/login"; +import { useDispatch } from "react-redux"; +import { useHistory } from "react-router"; +import { mailAction } from "../store/actionCreators/login.actionCreator"; +import { useTypeSelector } from "../hooks/useTypeSelector"; + +const Mail = () => { + const [email, setEmail] = useState(""); + const [loginData, setLoginData] = useState(); + const { login, isLoading, errorMessage } = useTypeSelector( + (state) => state.login + ); + + const dispatch = useDispatch(); + const history = useHistory(); + + const mailHandler = () => { + dispatch(mailAction(email)); + }; + + useEffect(() => { + setLoginData(login); + + if (loginData?.token || localStorage.getItem("user")) { + history.push("/admin/dashboard"); + } + }, [login, history, loginData?.token]); + + useEffect(() => { + if (errorMessage) { + alert("Error of Login" + errorMessage); + } + }, [errorMessage]); + + return ( + <> +
+ + + + +
+ Vamos enviar um link de recuperação +
+ + +
+ + + + + + + + setEmail(e.target.value)} + /> + + +
+ +
+ +
+ + + +
+ {isLoading && } + + ); +}; + +export default Mail; diff --git a/src/views/Recover.tsx b/src/views/Recover.tsx index 0f4498a..028703e 100644 --- a/src/views/Recover.tsx +++ b/src/views/Recover.tsx @@ -21,7 +21,8 @@ import { recoverAction } from "../store/actionCreators/login.actionCreator"; import { useTypeSelector } from "../hooks/useTypeSelector"; const Login = () => { - const [email, setEmail] = useState(""); + const [password,setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); const [loginData, setLoginData] = useState(); const { login, isLoading, errorMessage } = useTypeSelector( (state) => state.login @@ -30,8 +31,8 @@ const Login = () => { const dispatch = useDispatch(); const history = useHistory(); - const loginHandler = () => { - dispatch(recoverAction(email)); + const recoverHandler = () => { + dispatch(recoverAction(password)); }; useEffect(() => { @@ -41,10 +42,9 @@ const Login = () => { history.push("/admin/dashboard"); } }, [login, history, loginData?.token]); - useEffect(() => { if (errorMessage) { - alert("Error of Login" + errorMessage); + alert("Error ao trocar a passowrd" + errorMessage); } }, [errorMessage]); @@ -52,12 +52,7 @@ const Login = () => { <>
- +
@@ -70,19 +65,37 @@ const Login = () => { - + setEmail(e.target.value)} + placeholder="Senha" + type="password" + autoComplete="new-password" + value={password} + onChange={(e) => setPassword(e.target.value)} /> - +
+ + + + + + + + setConfirmPassword(e.target.value)} + /> + + + +
diff --git a/tsconfig.json b/tsconfig.json index 30e8bec..b8d15da 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,30 +1,23 @@ { - "compilerOptions": { - "target": "es5", - "module": "esnext", - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "allowSyntheticDefaultImports": true, - "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "noImplicitAny": true, - "strictNullChecks": true, - "noImplicitThis": true, - "alwaysStrict": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] + "compilerOptions": { + "target": "es5", + "module": "esnext", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "allowSyntheticDefaultImports": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "noImplicitAny": true, + "strictNullChecks": true, + "noImplicitThis": true, + "alwaysStrict": true, + "jsx": "react-jsx" + } } From a3a75cf842b2c282fa1957cef1fa0ef89d0b6bac Mon Sep 17 00:00:00 2001 From: salmento Date: Wed, 26 Jan 2022 19:01:14 +0200 Subject: [PATCH 3/3] Dashboard and notifications --- src/PrivateRoutes.tsx | 5 +- src/components/Sidebar/Sidebar.tsx | 9 +- src/index.tsx | 1 + src/layouts/Admin.tsx | 2 +- src/routes.tsx | 36 -- src/views/Dashboard.tsx | 396 ++++++++++----------- src/views/Icons.tsx | 536 ----------------------------- src/views/Notifications.tsx | 83 +---- src/views/Tables.tsx | 154 --------- src/views/Typography.tsx | 135 -------- src/views/User.tsx | 313 ----------------- tsconfig.json | 49 +-- 12 files changed, 244 insertions(+), 1475 deletions(-) delete mode 100644 src/views/Icons.tsx delete mode 100644 src/views/Tables.tsx delete mode 100644 src/views/Typography.tsx delete mode 100644 src/views/User.tsx diff --git a/src/PrivateRoutes.tsx b/src/PrivateRoutes.tsx index c1cb0fa..9a01266 100644 --- a/src/PrivateRoutes.tsx +++ b/src/PrivateRoutes.tsx @@ -2,8 +2,9 @@ import React from "react"; import {Redirect, Route, RouteProps} from "react-router-dom"; const PrivateRoute: React.FC = ({ ...rest }) => { - if(!localStorage.getItem('user')) return ; - return ; + //!localStorage.getItem('user') + if (localStorage.getItem("user")) return ; + return ; } export default PrivateRoute; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 243dfc4..ceedc4e 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -35,12 +35,17 @@ function Sidebar({props, routes} : ISideBarProps) { }; }); return ( -
+
ECO-FEUEM diff --git a/src/index.tsx b/src/index.tsx index 2f77dee..afc4bb2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,7 @@ ReactDOM.render( } /> } /> + diff --git a/src/layouts/Admin.tsx b/src/layouts/Admin.tsx index 4a70a49..bd90a3c 100644 --- a/src/layouts/Admin.tsx +++ b/src/layouts/Admin.tsx @@ -46,7 +46,7 @@ function Dashboard({props} : IDashboardProps) { props={props} routes={routes} /> -
+
{routes.map((prop, key) => { diff --git a/src/routes.tsx b/src/routes.tsx index 3757b33..1f721dd 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -2,10 +2,6 @@ import Login from "../src/views/Login"; import Recover from "../src/views/Recover"; import Dashboard from "../src/views/Dashboard"; import Notifications from "../src/views/Notifications"; -import Icons from "../src/views/Icons"; -import Typography from "../src/views/Typography"; -import TableList from "../src/views/Tables"; -import UserPage from "../src/views/User"; import Mail from "../src/views/Mail"; const routes = [ @@ -41,14 +37,6 @@ const routes = [ layout: "/admin", invisible: false, }, - { - path: "/icons", - name: "Icons", - icon: "nc-icon nc-diamond", - component: Icons, - layout: "/admin", - invisible: false, - }, { path: "/notifications", name: "Notifications", @@ -57,29 +45,5 @@ const routes = [ layout: "/admin", invisible: false, }, - { - path: "/user-page", - name: "User Profile", - icon: "nc-icon nc-single-02", - component: UserPage, - layout: "/admin", - invisible: false, - }, - { - path: "/tables", - name: "Table List", - icon: "nc-icon nc-tile-56", - component: TableList, - layout: "/admin", - invisible: false, - }, - { - path: "/typography", - name: "Typography", - icon: "nc-icon nc-caps-small", - component: Typography, - layout: "/admin", - invisible: false, - }, ]; export default routes; diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx index 65f32ed..d83367c 100644 --- a/src/views/Dashboard.tsx +++ b/src/views/Dashboard.tsx @@ -1,203 +1,213 @@ -/*! - -========================================================= -* Paper Dashboard React - v1.3.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/paper-dashboard-react -* Copyright 2021 Creative Tim (https://www.creative-tim.com) - -* Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md) - -* Coded by Creative Tim - -========================================================= - -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -*/ import React from "react"; // reactstrap components import { - Card, - CardHeader, - CardBody, - CardFooter, - CardTitle, - Row, - Col, + Card, + CardBody, + CardFooter, + CardTitle, + Row, + Col, } from "reactstrap"; // core components function Dashboard() { - return ( - <> -
- - - - - - -
- -
- - -
-

Capacity

- 150GB -

-

- - - - -
-
- Update Now -
- - - - - - - - -
- -
- - -
-

Revenue

- $ 1,345 -

-

- - - - -
-
- Last day -
- - - - - - - - -
- -
- - -
-

Errors

- 23 -

-

- - - - -
-
- In the last hour -
- - - - - - - - -
- -
- - -
-

Followers

- +45K -

-

- - - - -
-
- Update now -
- - - - - - - - - Users Behavior -

24 Hours performance

- - -
-
- Updated 3 minutes ago -
- - - - - - - - - Email Statistics -

Last Campaign Performance

- - -
- Opened{" "} - Read{" "} - Deleted{" "} - Unopened -
-
-
- Number of emails sent -
- - - - - - - NASDAQ: AAPL -

Line Chart with Points

- - -
- Tesla Model S{" "} - BMW 5 Series -
-
-
- Data information certified -
- - - - -
- - ); + return ( + <> +
+ + + + + + +
+

SST

+ Sistema de Suporte Técnico +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + + + +
+

SGCA

+ + Sistema de Gestão de Calendário Académico + +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + + + +
+

SCP

+ + Sistema de Controle de Precedências + +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + + + + + +
+

SPSP

+ + Sistema de Processamento de Sálarios do Pós-Laboral{" "} + +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + + + +
+

SGP

+ + Sistema de Gestão de Aquisições + +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + + + +
+

SIGA

+ + Sistema Integrado de Gestão Académica + +

+

+ + + + +
+
+

+ Utilizadores 45 +

+

+ Novas notificações 56 +

+

+ + Painel Administrativo + +

+
+ + + + +
+ + ); } export default Dashboard; diff --git a/src/views/Icons.tsx b/src/views/Icons.tsx deleted file mode 100644 index c6e5068..0000000 --- a/src/views/Icons.tsx +++ /dev/null @@ -1,536 +0,0 @@ -import React from "react"; - -// reactstrap components -import { Card, CardHeader, CardBody, CardTitle, Row, Col } from "reactstrap"; - -function Icons() { - return ( - <> -
- - - - - 100 Awesome Nucleo Icons -

- Handcrafted by our friends from{" "} - NucleoApp -

- - -
-
-
    -
  • - -

    nc-air-baloon

    - \ea01 -
    • -
  • - -

    nc-album-2

    - \ea02 -
    • -
  • - -

    nc-alert-circle-i

    - \ea04 -
    • -
  • - -

    nc-align-center

    - \ea03 -
    • -
  • - -

    nc-align-left-2

    - \ea05 -
    • -
  • - -

    nc-ambulance

    - \ea06 -
    • -
  • - -

    nc-app

    - \ea07 -
    • -
  • - -

    nc-atom

    - \ea08 -
    • -
  • - -

    nc-badge

    - \ea09 -
    • -
  • - -

    nc-bag-16

    - \ea0a -
    • -
  • - -

    nc-bank

    - \ea0b -
    • -
  • - -

    nc-basket

    - \ea0c -
    • -
  • - -

    nc-bell-55

    - \ea0d -
    • -
  • - -

    nc-bold

    - \ea0e -
    • -
  • - -

    nc-book-bookmark

    - \ea0f -
    • -
  • - -

    nc-bookmark-2

    - \ea10 -
    • -
  • - -

    nc-box-2

    - \ea11 -
    • -
  • - -

    nc-box

    - \ea12 -
    • -
  • - -

    nc-briefcase-24

    - \ea13 -
    • -
  • - -

    nc-bulb-63

    - \ea14 -
    • -
  • - -

    nc-bullet-list-67

    - \ea15 -
    • -
  • - -

    nc-bus-front-12

    - \ea16 -
    • -
  • - -

    nc-button-pause

    - \ea17 -
    • -
  • - -

    nc-button-play

    - \ea18 -
    • -
  • - -

    nc-button-power

    - \ea19 -
    • -
  • - -

    nc-calendar-60

    - \ea1a -
    • -
  • - -

    nc-camera-compact

    - \ea1b -
    • -
  • - -

    nc-caps-small

    - \ea1c -
    • -
  • - -

    nc-cart-simple

    - \ea1d -
    • -
  • - -

    nc-chart-bar-32

    - \ea1e -
    • -
  • - -

    nc-chart-pie-36

    - \ea1f -
    • -
  • - -

    nc-chat-33

    - \ea20 -
    • -
  • - -

    nc-check-2

    - \ea21 -
    • -
  • - -

    nc-circle-10

    - \ea22 -
    • -
  • - -

    nc-cloud-download-93

    - \ea23 -
    • -
  • - -

    nc-cloud-upload-94

    - \ea24 -
    • -
  • - -

    nc-compass-05

    - \ea25 -
    • -
  • - -

    nc-controller-modern

    - \ea26 -
    • -
  • - -

    nc-credit-card

    - \ea27 -
    • -
  • - -

    nc-delivery-fast

    - \ea28 -
    • -
  • - -

    nc-diamond

    - \ea29 -
    • -
  • - -

    nc-email-85

    - \ea2a -
    • -
  • - -

    nc-favourite-28

    - \ea2b -
    • -
  • - -

    nc-glasses-2

    - \ea2c -
    • -
  • - -

    nc-globe-2

    - \ea2d -
    • -
  • - -

    nc-globe

    - \ea2e -
    • -
  • - -

    nc-hat-3

    - \ea2f -
    • -
  • - -

    nc-headphones

    - \ea30 -
    • -
  • - -

    nc-html5

    - \ea31 -
    • -
  • - -

    nc-image

    - \ea32 -
    • -
  • - -

    nc-istanbul

    - \ea33 -
    • -
  • - -

    nc-key-25

    - \ea34 -
    • -
  • - -

    nc-laptop

    - \ea35 -
    • -
  • - -

    nc-layout-11

    - \ea36 -
    • -
  • - -

    nc-lock-circle-open

    - \ea37 -
    • -
  • - -

    nc-map-big

    - \ea38 -
    • -
  • - -

    nc-minimal-down

    - \ea39 -
    • -
  • - -

    nc-minimal-left

    - \ea3a -
    • -
  • - -

    nc-minimal-right

    - \ea3b -
    • -
  • - -

    nc-minimal-up

    - \ea3c -
    • -
  • - -

    nc-mobile

    - \ea3d -
    • -
  • - -

    nc-money-coins

    - \ea3e -
    • -
  • - -

    nc-note-03

    - \ea3f -
    • -
  • - -

    nc-palette

    - \ea40 -
    • -
  • - -

    nc-paper

    - \ea41 -
    • -
  • - -

    nc-pin-3

    - \ea42 -
    • -
  • - -

    nc-planet

    - \ea43 -
    • -
  • - -

    nc-refresh-69

    - \ea44 -
    • -
  • - -

    nc-ruler-pencil

    - \ea45 -
    • -
  • - -

    nc-satisfied

    - \ea46 -
    • -
  • - -

    nc-scissors

    - \ea47 -
    • -
  • - -

    nc-send

    - \ea48 -
    • -
  • - -

    nc-settings-gear-65

    - \ea49 -
    • -
  • - -

    nc-settings

    - \ea4a -
    • -
  • - -

    nc-share-66

    - \ea4b -
    • -
  • - -

    nc-shop

    - \ea4c -
    • -
  • - -

    nc-simple-add

    - \ea4d -
    • -
  • - -

    nc-simple-delete

    - \ea4e -
    • -
  • - -

    nc-simple-remove

    - \ea4f -
    • -
  • - -

    nc-single-02

    - \ea50 -
    • -
  • - -

    nc-single-copy-04

    - \ea51 -
    • -
  • - -

    nc-sound-wave

    - \ea52 -
    • -
  • - -

    nc-spaceship

    - \ea53 -
    • -
  • - -

    nc-sun-fog-29

    - \ea54 -
    • -
  • - -

    nc-support-17

    - \ea55 -
    • -
  • - -

    nc-tablet-2

    - \ea56 -
    • -
  • - -

    nc-tag-content

    - \ea57 -
    • -
  • - -

    nc-tap-01

    - \ea58 -
    • -
  • - -

    nc-tie-bow

    - \ea59 -
    • -
  • - -

    nc-tile-56

    - \ea5a -
    • -
  • - -

    nc-time-alarm

    - \ea5b -
    • -
  • - -

    nc-touch-id

    - \ea5c -
    • -
  • - -

    nc-trophy

    - \ea5d -
    • -
  • - -

    nc-tv-2

    - \ea5e -
    • -
  • - -

    nc-umbrella-13

    - \ea5f -
    • -
  • - -

    nc-user-run

    - \ea60 -
    • -
  • - -

    nc-vector

    - \ea61 -
    • -
  • - -

    nc-watch-time

    - \ea62 -
    • -
  • - -

    nc-world-2

    - \ea63 -
    • -
  • - -

    nc-zoom-split

    - \ea64 -
    • -
-
-
- - - - -
- - ); -} - -export default Icons; diff --git a/src/views/Notifications.tsx b/src/views/Notifications.tsx index 708da5e..6fe3738 100644 --- a/src/views/Notifications.tsx +++ b/src/views/Notifications.tsx @@ -180,88 +180,7 @@ function Notifications() { - - - - -
- - - Notifications Places -

Click to view notifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - +
); diff --git a/src/views/Tables.tsx b/src/views/Tables.tsx deleted file mode 100644 index ed87f96..0000000 --- a/src/views/Tables.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import React from "react"; - -// reactstrap components -import { - Card, - CardHeader, - CardBody, - CardTitle, - Table, - Row, - Col, -} from "reactstrap"; - -function Tables() { - return ( - <> -
- - - - - Simple Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameCountryCitySalary
Dakota RiceNigerOud-Turnhout$36,738
Minerva HooperCuraçaoSinaai-Waas$23,789
Sage RodriguezNetherlandsBaileux$56,142
Philip ChaneyKorea, SouthOverland Park$38,735
Doris GreeneMalawiFeldkirchen in Kärnten$63,542
Mason PorterChileGloucester$78,615
Jon PorterPortugalGloucester$98,615
- - - - - - - Table on Plain Background -

- Here is a subtitle for this table -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameCountryCitySalary
Dakota RiceNigerOud-Turnhout$36,738
Minerva HooperCuraçaoSinaai-Waas$23,789
Sage RodriguezNetherlandsBaileux$56,142
Philip ChaneyKorea, SouthOverland Park$38,735
Doris GreeneMalawiFeldkirchen in Kärnten$63,542
Mason PorterChileGloucester$78,615
Jon PorterPortugalGloucester$98,615
- - - - -
- - ); -} - -export default Tables; diff --git a/src/views/Typography.tsx b/src/views/Typography.tsx deleted file mode 100644 index 93ec3a3..0000000 --- a/src/views/Typography.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React from "react"; - -// reactstrap components -import { Card, CardHeader, CardBody, Row, Col } from "reactstrap"; - -function Typography() { - return ( - <> -
- - - - -
Paper Table Heading
-

Created using Montserrat Font Family

- - -
-

- Header 1 - The Life of Paper Dashboard -

-
-
-

- Header 2 - The Life of Paper Dashboard -

-
-
-

- Header 3 - The Life of Paper Dashboard -

-
-
-

- Header 4 - The Life of Paper Dashboard -

-
-
-
- Header 5 - The Life of Paper Dashboard -
-
-
-
- Header 6 - The Life of Paper Dashboard -
-
-
-

- ParagraphI will be the leader of a company that - ends up being worth billions of dollars, because I got the - answers. I understand culture. I am the nucleus. I think - that’s a responsibility that I have, to push possibilities, - to show people, this is the level that things could be at. -

-
-
- Quote -
-

- "I will be the leader of a company that ends up being - worth billions of dollars, because I got the answers. I - understand culture. I am the nucleus. I think that’s a - responsibility that I have, to push possibilities, to show - people, this is the level that things could be at."
-
- - Noaa -

-
-
-
- Muted Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
- Primary Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
- Info Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
- Success Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
- Warning Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
- Danger Text -

- I will be the leader of a company that ends up being worth - billions of dollars, because I got the answers... -

-
-
-

- Small Tag - Header with small subtitle
- Use "small" tag for the headers -

-
- - - - -
- - ); -} - -export default Typography; diff --git a/src/views/User.tsx b/src/views/User.tsx deleted file mode 100644 index 0f4b7a2..0000000 --- a/src/views/User.tsx +++ /dev/null @@ -1,313 +0,0 @@ - -import React from "react"; - -// reactstrap components -import { - Button, - Card, - CardHeader, - CardBody, - CardFooter, - CardTitle, - FormGroup, - Form, - Input, - Row, - Col, -} from "reactstrap"; - -function User() { - return ( - <> -
- - - -
- ... -
- - -

- "I like the way you work it
- No diggity
I wanna bag it up" -

- - -
-
- - -
- 12
- Files -
- - -
- 2GB
- Used -
- - -
- 24,6$
- Spent -
- - -
- - - - - Team Members - - -
    -
  • - - -
    - ... -
    - - - DJ Khaled
    - - Offline - - - - - -     -
    • -
  • - - -
    - ... -
    - - - Creative Tim
    - - Available - - - - - -     -
    • -
  • - - -
    - ... -
    - - - Flume
    - - Busy - - - - - -     -
    • -
- - - - - - - Edit Profile - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - - - -
- - ); -} - -export default User; diff --git a/tsconfig.json b/tsconfig.json index b8d15da..30e8bec 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,30 @@ { - "compilerOptions": { - "target": "es5", - "module": "esnext", - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "allowSyntheticDefaultImports": true, - "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "noImplicitAny": true, - "strictNullChecks": true, - "noImplicitThis": true, - "alwaysStrict": true, - "jsx": "react-jsx" - } + "compilerOptions": { + "target": "es5", + "module": "esnext", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "allowSyntheticDefaultImports": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "noImplicitAny": true, + "strictNullChecks": true, + "noImplicitThis": true, + "alwaysStrict": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] }