diff --git a/CHANGELOG.md b/CHANGELOG.md index 48197cc2..2a2fba3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ ### [@coreui/react](https://coreui.io/) changelog +##### `v2.1.4` +- fix(Sidebar): *How to set left sidebar is minimized as default* [#145](https://github.com/coreui/coreui-free-react-admin-template/issues/145) +- refactor(Layout): LayoutHelper germ +- refactor(Sidabar): use static methods from `LayoutHelper` +- refactor(SidabarMinimizer): use static methods from `LayoutHelper` +- chore: update demo css + +###### dependencies update +- update `@coreui/coreui` to `^2.1.7` +- update `core-js` to `^2.6.5` +- update `prop-types` to `^15.7.2` +- update `reactstrap` to `^7.1.0` +- update `enzyme` to `^3.9.0` +- update `enzyme-adapter-react-16` to `^1.9.1` +- update `eslint` to `^5.14.1` +- update `eslint-plugin-import` to `^2.16.0` +- update `eslint-plugin-react` to `^7.12.4` +- update `react` to `^16.8.2` +- update `react-dom` to `^16.8.2` + ##### `v2.1.3` - chore: update `@coreui/coreui` to `^2.1.5` - chore: update `reactstrap` to `^7.0.2` diff --git a/demo/src/scss/style.css b/demo/src/scss/style.css index 0625404a..8cb182f9 100644 --- a/demo/src/scss/style.css +++ b/demo/src/scss/style.css @@ -1,15 +1,15 @@ @charset "UTF-8"; /*! * CoreUI - Open Source Dashboard UI Kit - * @version v2.1.5 + * @version v2.1.7 * @link https://coreui.io * Copyright (c) 2018 creativeLabs Ɓukasz Holeczek * Licensed under MIT (https://coreui.io/license) */ /*! - * Bootstrap v4.2.1 (https://getbootstrap.com/) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ :root { @@ -99,6 +99,7 @@ abbr[data-original-title] { text-decoration: underline dotted; cursor: help; border-bottom: 0; + -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } @@ -264,6 +265,10 @@ select { text-transform: none; } +select { + word-wrap: normal; +} + button, [type="button"], [type="reset"], @@ -271,6 +276,13 @@ button, -webkit-appearance: button; } +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled), +[type="submit"]:not(:disabled) { + cursor: pointer; +} + button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -359,10 +371,8 @@ template { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; - font-family: inherit; font-weight: 500; line-height: 1.2; - color: inherit; } h1, .h1 { @@ -1513,7 +1523,7 @@ pre code { .table { width: 100%; margin-bottom: 1rem; - background-color: transparent; + color: #23282c; } .table th, @@ -1532,10 +1542,6 @@ pre code { border-top: 2px solid #c8ced3; } -.table .table { - background-color: #e4e5e6; -} - .table-sm th, .table-sm td { padding: 0.3rem; @@ -1567,6 +1573,7 @@ pre code { } .table-hover tbody tr:hover { + color: #23282c; background-color: rgba(0, 0, 0, 0.075); } @@ -1763,8 +1770,8 @@ pre code { .table .thead-dark th { color: #fff; - background-color: #23282c; - border-color: #343b41; + background-color: #2f353a; + border-color: #40484f; } .table .thead-light th { @@ -1775,13 +1782,13 @@ pre code { .table-dark { color: #fff; - background-color: #23282c; + background-color: #2f353a; } .table-dark th, .table-dark td, .table-dark thead th { - border-color: #343b41; + border-color: #40484f; } .table-dark.table-bordered { @@ -1793,6 +1800,7 @@ pre code { } .table-dark.table-hover tbody tr:hover { + color: #fff; background-color: rgba(255, 255, 255, 0.075); } @@ -1802,7 +1810,6 @@ pre code { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-sm > .table-bordered { border: 0; @@ -1815,7 +1822,6 @@ pre code { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-md > .table-bordered { border: 0; @@ -1828,7 +1834,6 @@ pre code { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-lg > .table-bordered { border: 0; @@ -1841,7 +1846,6 @@ pre code { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-xl > .table-bordered { border: 0; @@ -1853,7 +1857,6 @@ pre code { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive > .table-bordered { @@ -1863,7 +1866,7 @@ pre code { .form-control { display: block; width: 100%; - height: calc(2.0625rem + 2px); + height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; @@ -1876,7 +1879,7 @@ pre code { transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .form-control { transition: none; } @@ -1977,7 +1980,7 @@ select.form-control:focus::-ms-value { } .form-control-sm { - height: calc(1.648438rem + 2px); + height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.765625rem; line-height: 1.5; @@ -1985,7 +1988,7 @@ select.form-control:focus::-ms-value { } .form-control-lg { - height: calc(2.640625rem + 2px); + height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: 1.09375rem; line-height: 1.5; @@ -2085,11 +2088,11 @@ textarea.form-control { .was-validated .form-control:valid, .form-control.is-valid { border-color: #4dbd74; - padding-right: 2.0625rem; - background-repeat: no-repeat; - background-position: center right calc(2.0625rem / 4); - background-size: calc(2.0625rem / 2) calc(2.0625rem / 2); + padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: center right calc(0.375em + 0.1875rem); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { @@ -2104,14 +2107,14 @@ textarea.form-control { } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: 2.0625rem; - background-position: top calc(2.0625rem / 4) right calc(2.0625rem / 4); + padding-right: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .custom-select:valid, .custom-select.is-valid { border-color: #4dbd74; - padding-right: 3.296875rem; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") no-repeat center right 1.75rem/1.03125rem 1.03125rem; + padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { @@ -2208,11 +2211,11 @@ textarea.form-control { .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #f86c6b; - padding-right: 2.0625rem; + padding-right: calc(1.5em + 0.75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); background-repeat: no-repeat; - background-position: center right calc(2.0625rem / 4); - background-size: calc(2.0625rem / 2) calc(2.0625rem / 2); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); + background-position: center right calc(0.375em + 0.1875rem); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { @@ -2227,14 +2230,14 @@ textarea.form-control { } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: 2.0625rem; - background-position: top calc(2.0625rem / 4) right calc(2.0625rem / 4); + padding-right: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } .was-validated .custom-select:invalid, .custom-select.is-invalid { border-color: #f86c6b; - padding-right: 3.296875rem; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") no-repeat center right 1.75rem/1.03125rem 1.03125rem; + padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { @@ -2364,6 +2367,8 @@ textarea.form-control { } .form-inline .form-check-input { position: relative; + -ms-flex-negative: 0; + flex-shrink: 0; margin-top: 0; margin-right: 0.25rem; margin-left: 0; @@ -2398,7 +2403,7 @@ textarea.form-control { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .btn { transition: none; } @@ -2418,10 +2423,6 @@ textarea.form-control { opacity: 0.65; } -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} - a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; @@ -2958,6 +2959,7 @@ fieldset:disabled a.btn { .btn-link { font-weight: 400; color: #20a8d8; + text-decoration: none; } .btn-link:hover { @@ -3008,7 +3010,7 @@ input[type="button"].btn-block { transition: opacity 0.15s linear; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .fade { transition: none; } @@ -3029,7 +3031,7 @@ input[type="button"].btn-block { transition: height 0.35s ease; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } @@ -3042,6 +3044,10 @@ input[type="button"].btn-block { position: relative; } +.dropdown-toggle { + white-space: nowrap; +} + .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -3077,49 +3083,25 @@ input[type="button"].btn-block { border-radius: 0.25rem; } -.dropdown-menu-right { - right: 0; - left: auto; -} - -@media (min-width: 576px) { - .dropdown-menu-sm-right { - right: 0; - left: auto; - } -} - -@media (min-width: 768px) { - .dropdown-menu-md-right { - right: 0; - left: auto; - } -} - -@media (min-width: 992px) { - .dropdown-menu-lg-right { - right: 0; - left: auto; - } -} - -@media (min-width: 1200px) { - .dropdown-menu-xl-right { - right: 0; - left: auto; - } -} - .dropdown-menu-left { right: auto; left: 0; } +.dropdown-menu-right { + right: 0; + left: auto; +} + @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; left: 0; } + .dropdown-menu-sm-right { + right: 0; + left: auto; + } } @media (min-width: 768px) { @@ -3127,6 +3109,10 @@ input[type="button"].btn-block { right: auto; left: 0; } + .dropdown-menu-md-right { + right: 0; + left: auto; + } } @media (min-width: 992px) { @@ -3134,6 +3120,10 @@ input[type="button"].btn-block { right: auto; left: 0; } + .dropdown-menu-lg-right { + right: 0; + left: auto; + } } @media (min-width: 1200px) { @@ -3141,6 +3131,10 @@ input[type="button"].btn-block { right: auto; left: 0; } + .dropdown-menu-xl-right { + right: 0; + left: auto; + } } .dropup .dropdown-menu { @@ -3566,7 +3560,7 @@ input[type="button"].btn-block { .input-group-lg > .form-control:not(textarea), .input-group-lg > .custom-select { - height: calc(2.640625rem + 2px); + height: calc(1.5em + 1rem + 2px); } .input-group-lg > .form-control, @@ -3583,7 +3577,7 @@ input[type="button"].btn-block { .input-group-sm > .form-control:not(textarea), .input-group-sm > .custom-select { - height: calc(1.648438rem + 2px); + height: calc(1.5em + 0.5rem + 2px); } .input-group-sm > .form-control, @@ -3697,9 +3691,7 @@ input[type="button"].btn-block { width: 1rem; height: 1rem; content: ""; - background-repeat: no-repeat; - background-position: center center; - background-size: 50% 50%; + background: no-repeat 50% / 50% 50%; } .custom-checkbox .custom-control-label::before { @@ -3762,7 +3754,7 @@ input[type="button"].btn-block { transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .custom-switch .custom-control-label::after { transition: none; } @@ -3781,8 +3773,9 @@ input[type="button"].btn-block { .custom-select { display: inline-block; width: 100%; - height: calc(2.0625rem + 2px); + height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; + font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #5c6873; @@ -3799,7 +3792,7 @@ input[type="button"].btn-block { .custom-select:focus { border-color: #8ad4ee; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(138, 212, 238, 0.5); + box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); } .custom-select:focus::-ms-value { @@ -3819,11 +3812,11 @@ input[type="button"].btn-block { } .custom-select::-ms-expand { - opacity: 0; + display: none; } .custom-select-sm { - height: calc(1.648438rem + 2px); + height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; @@ -3831,7 +3824,7 @@ input[type="button"].btn-block { } .custom-select-lg { - height: calc(2.640625rem + 2px); + height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; @@ -3842,7 +3835,7 @@ input[type="button"].btn-block { position: relative; display: inline-block; width: 100%; - height: calc(2.0625rem + 2px); + height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } @@ -3850,7 +3843,7 @@ input[type="button"].btn-block { position: relative; z-index: 2; width: 100%; - height: calc(2.0625rem + 2px); + height: calc(1.5em + 0.75rem + 2px); margin: 0; opacity: 0; } @@ -3878,7 +3871,7 @@ input[type="button"].btn-block { right: 0; left: 0; z-index: 1; - height: calc(2.0625rem + 2px); + height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-weight: 400; line-height: 1.5; @@ -3895,7 +3888,7 @@ input[type="button"].btn-block { bottom: 0; z-index: 3; display: block; - height: 2.0625rem; + height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: #5c6873; @@ -3947,7 +3940,7 @@ input[type="button"].btn-block { appearance: none; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .custom-range::-webkit-slider-thumb { transition: none; } @@ -3978,7 +3971,7 @@ input[type="button"].btn-block { appearance: none; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .custom-range::-moz-range-thumb { transition: none; } @@ -4011,7 +4004,7 @@ input[type="button"].btn-block { appearance: none; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .custom-range::-ms-thumb { transition: none; } @@ -4068,7 +4061,7 @@ input[type="button"].btn-block { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .custom-control-label::before, .custom-file-label, .custom-select { @@ -4257,10 +4250,6 @@ input[type="button"].btn-block { text-decoration: none; } -.navbar-toggler:not(:disabled):not(.disabled) { - cursor: pointer; -} - .navbar-toggler-icon { display: inline-block; width: 1.5em; @@ -4638,7 +4627,6 @@ input[type="button"].btn-block { .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; - color: inherit; background-color: #f0f3f5; border-bottom: 1px solid #c8ced3; } @@ -4755,52 +4743,30 @@ input[type="button"].btn-block { margin-left: 0; border-left: 0; } - .card-group > .card:first-child { + .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:first-child .card-img-top, - .card-group > .card:first-child .card-header { + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:first-child .card-img-bottom, - .card-group > .card:first-child .card-footer { + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } - .card-group > .card:last-child { + .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:last-child .card-img-top, - .card-group > .card:last-child .card-header { + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:last-child .card-img-bottom, - .card-group > .card:last-child .card-footer { + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } - .card-group > .card:only-child { - border-radius: 0.25rem; - } - .card-group > .card:only-child .card-img-top, - .card-group > .card:only-child .card-header { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - } - .card-group > .card:only-child .card-img-bottom, - .card-group > .card:only-child .card-footer { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - } - .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { - border-radius: 0; - } - .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top, - .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, - .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, - .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer { - border-radius: 0; - } } .card-columns .card { @@ -4824,31 +4790,31 @@ input[type="button"].btn-block { } } -.accordion .card { +.accordion > .card { overflow: hidden; } -.accordion .card:not(:first-of-type) .card-header:first-child { +.accordion > .card:not(:first-of-type) .card-header:first-child { border-radius: 0; } -.accordion .card:not(:first-of-type):not(:last-of-type) { +.accordion > .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0; border-radius: 0; } -.accordion .card:first-of-type { +.accordion > .card:first-of-type { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.accordion .card:last-of-type { +.accordion > .card:last-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } -.accordion .card .card-header { +.accordion > .card .card-header { margin-bottom: -1px; } @@ -4920,10 +4886,6 @@ input[type="button"].btn-block { box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); } -.page-link:not(:disabled):not(.disabled) { - cursor: pointer; -} - .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; @@ -4992,6 +4954,13 @@ input[type="button"].btn-block { white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .badge { + transition: none; + } } a.badge:hover, a.badge:focus { @@ -5023,6 +4992,11 @@ a.badge-primary:hover, a.badge-primary:focus { background-color: #1985ac; } +a.badge-primary:focus, a.badge-primary.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +} + .badge-secondary { color: #23282c; background-color: #c8ced3; @@ -5033,6 +5007,11 @@ a.badge-secondary:hover, a.badge-secondary:focus { background-color: #acb5bc; } +a.badge-secondary:focus, a.badge-secondary.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +} + .badge-success { color: #fff; background-color: #4dbd74; @@ -5043,6 +5022,11 @@ a.badge-success:hover, a.badge-success:focus { background-color: #3a9d5d; } +a.badge-success:focus, a.badge-success.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +} + .badge-info { color: #23282c; background-color: #63c2de; @@ -5053,6 +5037,11 @@ a.badge-info:hover, a.badge-info:focus { background-color: #39b2d5; } +a.badge-info:focus, a.badge-info.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); +} + .badge-warning { color: #23282c; background-color: #ffc107; @@ -5063,6 +5052,11 @@ a.badge-warning:hover, a.badge-warning:focus { background-color: #d39e00; } +a.badge-warning:focus, a.badge-warning.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +} + .badge-danger { color: #fff; background-color: #f86c6b; @@ -5073,6 +5067,11 @@ a.badge-danger:hover, a.badge-danger:focus { background-color: #f63c3a; } +a.badge-danger:focus, a.badge-danger.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +} + .badge-light { color: #23282c; background-color: #f0f3f5; @@ -5083,6 +5082,11 @@ a.badge-light:hover, a.badge-light:focus { background-color: #d1dbe1; } +a.badge-light:focus, a.badge-light.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +} + .badge-dark { color: #fff; background-color: #2f353a; @@ -5093,6 +5097,11 @@ a.badge-dark:hover, a.badge-dark:focus { background-color: #181b1e; } +a.badge-dark:focus, a.badge-dark.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); +} + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -5294,7 +5303,7 @@ a.badge-dark:hover, a.badge-dark:focus { transition: width 0.6s ease; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } @@ -5310,6 +5319,13 @@ a.badge-dark:hover, a.badge-dark:focus { animation: progress-bar-stripes 1s linear infinite; } +@media (prefers-reduced-motion: reduce) { + .progress-bar-animated { + -webkit-animation: none; + animation: none; + } +} + .media { display: -ms-flexbox; display: flex; @@ -5338,6 +5354,7 @@ a.badge-dark:hover, a.badge-dark:focus { } .list-group-item-action:hover, .list-group-item-action:focus { + z-index: 1; color: #5c6873; text-decoration: none; background-color: #f0f3f5; @@ -5368,11 +5385,6 @@ a.badge-dark:hover, a.badge-dark:focus { border-bottom-left-radius: 0.25rem; } -.list-group-item:hover, .list-group-item:focus { - z-index: 1; - text-decoration: none; -} - .list-group-item.disabled, .list-group-item:disabled { color: #73818f; pointer-events: none; @@ -5386,6 +5398,117 @@ a.badge-dark:hover, a.badge-dark:focus { border-color: #20a8d8; } +.list-group-horizontal { + -ms-flex-direction: row; + flex-direction: row; +} + +.list-group-horizontal .list-group-item { + margin-right: -1px; + margin-bottom: 0; +} + +.list-group-horizontal .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; +} + +.list-group-horizontal .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; +} + +@media (min-width: 576px) { + .list-group-horizontal-sm { + -ms-flex-direction: row; + flex-direction: row; + } + .list-group-horizontal-sm .list-group-item { + margin-right: -1px; + margin-bottom: 0; + } + .list-group-horizontal-sm .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-sm .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 768px) { + .list-group-horizontal-md { + -ms-flex-direction: row; + flex-direction: row; + } + .list-group-horizontal-md .list-group-item { + margin-right: -1px; + margin-bottom: 0; + } + .list-group-horizontal-md .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-md .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 992px) { + .list-group-horizontal-lg { + -ms-flex-direction: row; + flex-direction: row; + } + .list-group-horizontal-lg .list-group-item { + margin-right: -1px; + margin-bottom: 0; + } + .list-group-horizontal-lg .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-lg .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 1200px) { + .list-group-horizontal-xl { + -ms-flex-direction: row; + flex-direction: row; + } + .list-group-horizontal-xl .list-group-item { + margin-right: -1px; + margin-bottom: 0; + } + .list-group-horizontal-xl .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xl .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + .list-group-flush .list-group-item { border-right: 0; border-left: 0; @@ -5548,10 +5671,6 @@ a.badge-dark:hover, a.badge-dark:focus { text-decoration: none; } -.close:not(:disabled):not(.disabled) { - cursor: pointer; -} - .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; } @@ -5576,11 +5695,11 @@ a.close.disabled { background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 0.25rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; + border-radius: 0.25rem; } .toast:not(:last-child) { @@ -5652,7 +5771,7 @@ a.close.disabled { transform: translate(0, -50px); } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } @@ -5663,20 +5782,57 @@ a.close.disabled { transform: none; } +.modal-dialog-scrollable { + display: -ms-flexbox; + display: flex; + max-height: calc(100% - 1rem); +} + +.modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 1rem); + overflow: hidden; +} + +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} + .modal-dialog-centered { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; - min-height: calc(100% - (0.5rem * 2)); + min-height: calc(100% - 1rem); } .modal-dialog-centered::before { display: block; - height: calc(100vh - (0.5rem * 2)); + height: calc(100vh - 1rem); content: ""; } +.modal-dialog-centered.modal-dialog-scrollable { + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + height: 100%; +} + +.modal-dialog-centered.modal-dialog-scrollable .modal-content { + max-height: none; +} + +.modal-dialog-centered.modal-dialog-scrollable::before { + content: none; +} + .modal-content { position: relative; display: -ms-flexbox; @@ -5718,7 +5874,7 @@ a.close.disabled { -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; - border-bottom: 1px solid #e4e7ea; + border-bottom: 1px solid #c8ced3; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } @@ -5748,7 +5904,7 @@ a.close.disabled { -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; - border-top: 1px solid #e4e7ea; + border-top: 1px solid #c8ced3; border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } @@ -5774,11 +5930,17 @@ a.close.disabled { max-width: 500px; margin: 1.75rem auto; } + .modal-dialog-scrollable { + max-height: calc(100% - 3.5rem); + } + .modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 3.5rem); + } .modal-dialog-centered { - min-height: calc(100% - (1.75rem * 2)); + min-height: calc(100% - 3.5rem); } .modal-dialog-centered::before { - height: calc(100vh - (1.75rem * 2)); + height: calc(100vh - 3.5rem); } .modal-sm { max-width: 300px; @@ -5958,25 +6120,19 @@ a.close.disabled { margin-bottom: 0.5rem; } -.bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { +.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc((0.5rem + 1px) * -1); } -.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, -.bs-popover-top .arrow::after, -.bs-popover-auto[x-placement^="top"] .arrow::after { - border-width: 0.5rem 0.5rem 0; -} - -.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { +.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; + border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-top .arrow::after, -.bs-popover-auto[x-placement^="top"] .arrow::after { +.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; + border-width: 0.5rem 0.5rem 0; border-top-color: #fff; } @@ -5984,28 +6140,22 @@ a.close.disabled { margin-left: 0.5rem; } -.bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow { +.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { left: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, -.bs-popover-right .arrow::after, -.bs-popover-auto[x-placement^="right"] .arrow::after { - border-width: 0.5rem 0.5rem 0.5rem 0; -} - -.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { +.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; + border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-right .arrow::after, -.bs-popover-auto[x-placement^="right"] .arrow::after { +.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; + border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #fff; } @@ -6013,25 +6163,19 @@ a.close.disabled { margin-top: 0.5rem; } -.bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { +.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc((0.5rem + 1px) * -1); } -.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, -.bs-popover-bottom .arrow::after, -.bs-popover-auto[x-placement^="bottom"] .arrow::after { - border-width: 0 0.5rem 0.5rem 0.5rem; -} - -.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { +.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; + border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-bottom .arrow::after, -.bs-popover-auto[x-placement^="bottom"] .arrow::after { +.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; + border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #fff; } @@ -6050,28 +6194,22 @@ a.close.disabled { margin-right: 0.5rem; } -.bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow { +.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { right: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, -.bs-popover-left .arrow::after, -.bs-popover-auto[x-placement^="left"] .arrow::after { - border-width: 0.5rem 0 0.5rem 0.5rem; -} - -.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { +.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; + border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-left .arrow::after, -.bs-popover-auto[x-placement^="left"] .arrow::after { +.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; + border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #fff; } @@ -6079,7 +6217,6 @@ a.close.disabled { padding: 0.5rem 0.75rem; margin-bottom: 0; font-size: 0.875rem; - color: inherit; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-top-left-radius: calc(0.3rem - 1px); @@ -6129,7 +6266,7 @@ a.close.disabled { transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .carousel-item { transition: none; } @@ -6174,7 +6311,7 @@ a.close.disabled { transition: 0s 0.6s opacity; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { transition: none; @@ -6200,7 +6337,7 @@ a.close.disabled { transition: opacity 0.15s ease; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .carousel-control-prev, .carousel-control-next { transition: none; @@ -6229,8 +6366,7 @@ a.close.disabled { display: inline-block; width: 20px; height: 20px; - background: transparent no-repeat center center; - background-size: 100% 100%; + background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { @@ -6275,7 +6411,7 @@ a.close.disabled { transition: opacity 0.6s ease; } -@media screen and (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { .carousel-indicators li { transition: none; } @@ -6554,6 +6690,10 @@ button.bg-dark:focus { border-color: #fff !important; } +.rounded-sm { + border-radius: 0.2rem !important; +} + .rounded { border-radius: 0.25rem !important; } @@ -6578,6 +6718,10 @@ button.bg-dark:focus { border-bottom-left-radius: 0.25rem !important; } +.rounded-lg { + border-radius: 0.3rem !important; +} + .rounded-circle { border-radius: 50% !important; } @@ -6829,8 +6973,8 @@ button.bg-dark:focus { padding-top: 56.25%; } -.embed-responsive-3by4::before { - padding-top: 133.333333%; +.embed-responsive-4by3::before { + padding-top: 75%; } .embed-responsive-1by1::before { @@ -6845,8 +6989,8 @@ button.bg-dark:focus { padding-top: 56.25%; } -.embed-responsive-3by4::before { - padding-top: 133.333333%; +.embed-responsive-4by3::before { + padding-top: 75%; } .embed-responsive-1by1::before { @@ -7793,6 +7937,18 @@ button.bg-dark:focus { height: 100vh !important; } +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 0, 0); +} + .m-0 { margin: 0 !important; } @@ -9606,7 +9762,7 @@ button.bg-dark:focus { } .text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .text-justify { @@ -9819,6 +9975,11 @@ a.text-dark:hover, a.text-dark:focus { text-decoration: none !important; } +.text-break { + word-break: break-word !important; + overflow-wrap: break-word !important; +} + .text-reset { color: inherit !important; } @@ -15047,4 +15208,4 @@ body { breakpoint-lg: 992px; breakpoint-xl: 1200px; } -/*# sourceMappingURL=style.css.map */ +/*# sourceMappingURL=coreui.css.map */ diff --git a/package.json b/package.json index 117dd36b..bb6fe9dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "2.1.3", + "version": "2.1.4", "description": "CoreUI React Bootstrap 4 components", "license": "MIT", "author": { @@ -37,27 +37,27 @@ "dependencies": { "@coreui/icons": "0.3.0", "classnames": "^2.2.6", - "core-js": "^2.6.1", - "prop-types": "^15.6.2", + "core-js": "^2.6.5", + "prop-types": "^15.7.2", "react-onclickout": "^2.0.8", "react-perfect-scrollbar": "^1.4.4", "react-router-dom": "^4.3.1", - "reactstrap": "^7.0.2" + "reactstrap": "^7.1.0" }, "peerDependencies": { - "@coreui/coreui": "^2.1.5", + "@coreui/coreui": "^2.1.7", "react": "16.x" }, "devDependencies": { "babel-eslint": "^10.0.1", - "enzyme": "^3.8.0", - "enzyme-adapter-react-16": "^1.7.1", - "eslint": "^5.12.0", - "eslint-plugin-import": "^2.14.0", - "eslint-plugin-react": "^7.12.3", + "enzyme": "^3.9.0", + "enzyme-adapter-react-16": "^1.9.1", + "eslint": "^5.14.1", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-react": "^7.12.4", "nwb": "^0.23.0", - "react": "^16.7.0", - "react-dom": "^16.7.0", + "react": "^16.8.2", + "react-dom": "^16.8.2", "sinon": "^5.1.1" }, "repository": { diff --git a/src/Shared/layout/layout.js b/src/Shared/layout/layout.js index 01d5f7ad..b7cd28b2 100644 --- a/src/Shared/layout/layout.js +++ b/src/Shared/layout/layout.js @@ -1,29 +1,31 @@ -// import { toggleClasses } from '../toggle-classes'; +class LayoutHelper { -class Layout { - static sidebarToggle() { - - } - - static sidebarMinimize() { - document.body.classList.toggle('sidebar-minimized'); + static sidebarToggle(toggle) { + const minimize = arguments.length ? toggle : !document.body.classList.contains('sidebar-minimized'); + this.sidebarMinimize(minimize); + this.brandMinimize(minimize); + this.sidebarPSToggle(!minimize); /*remove PS on sidebar minimized*/ } - static mobileSidebarToggle() { - document.body.classList.toggle('sidebar-mobile-show'); + static sidebarMinimize(force) { + return document.body.classList.toggle('sidebar-minimized', force); } - static sidebarOffCanvasClose() { - + static brandMinimize(force) { + document.body.classList.toggle('brand-minimized', force); } - static brandMinimize() { - document.body.classList.toggle('brand-minimized'); - } - - static asideToggleDirective() { - + // sidebar perfect scrollbar + static sidebarPSToggle(toggle) { + const sidebar = document.querySelector('.sidebar-nav'); + if (sidebar) { + if (toggle) { + sidebar.classList.add('ps', 'ps-container', 'ps--active-y'); + } else { + sidebar.classList.remove('ps', 'ps-container', 'ps--active-y'); + } + } } } -export default Layout; +export default LayoutHelper; diff --git a/src/Sidebar.js b/src/Sidebar.js index b6f2e107..58f6c644 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -3,7 +3,9 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import { sidebarCssClasses } from './Shared'; import ClickOutHandler from 'react-onclickout' + import './Shared/element-closest' +import LayoutHelper from './Shared/layout/layout' const propTypes = { children: PropTypes.node, @@ -57,7 +59,7 @@ class AppSidebar extends Component { } isMinimized(minimized) { - if (minimized) { document.body.classList.add('sidebar-minimized'); } + LayoutHelper.sidebarToggle(minimized) } isOffCanvas(offCanvas) { diff --git a/src/SidebarMinimizer.js b/src/SidebarMinimizer.js index 4b365663..51b9298c 100644 --- a/src/SidebarMinimizer.js +++ b/src/SidebarMinimizer.js @@ -2,6 +2,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import LayoutHelper from './Shared/layout/layout' + const propTypes = { children: PropTypes.node, className: PropTypes.string, @@ -23,33 +25,11 @@ class AppSidebarMinimizer extends Component { componentDidMount() { const isMinimized = document.body.classList.contains('sidebar-minimized'); - this.togglePs(!isMinimized) - } - - sidebarMinimize() { - const isMinimized = document.body.classList.toggle('sidebar-minimized'); - this.togglePs(!isMinimized) - } - - togglePs(toggle) { - const sidebar = document.querySelector('.sidebar-nav') - if (sidebar) { - if (toggle) { - sidebar.classList.add('ps', 'ps-container', 'ps--active-y') - } else { - sidebar.classList.remove('ps', 'ps-container', 'ps--active-y') - } - } - - } - - brandMinimize() { - document.body.classList.toggle('brand-minimized'); + LayoutHelper.sidebarPSToggle(!isMinimized) } - handleClick(e) { - this.sidebarMinimize(e) - this.brandMinimize(e) + handleClick() { + LayoutHelper.sidebarToggle() } render() {