From 2cd62df785d1ed65101a7f2f9e0ce60983f438f0 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 6 Nov 2018 16:42:25 +0100 Subject: [PATCH 1/4] chore: dependencies update - update `@coreui/coreui` to `2.1.0` - sidebar-nav-link-disabled-* - chore: update `react-perfect-scrollbar` to `1.4.2` - chore: update `eslint` to `5.8.0` - chore: update `react` to `16.6.0` - chore: update `react-dom` to `16.6.0` --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index bdcff6ee..731f73e1 100644 --- a/package.json +++ b/package.json @@ -41,24 +41,24 @@ "element-closest": "^2.0.2", "prop-types": "^15.6.2", "react-onclickout": "^2.0.8", - "react-perfect-scrollbar": "^1.2.2", + "react-perfect-scrollbar": "^1.4.2", "react-router-dom": "^4.3.1", "reactstrap": "^6.5.0" }, "peerDependencies": { - "@coreui/coreui": "^2.0.14", + "@coreui/coreui": "^2.1.0", "react": "16.x" }, "devDependencies": { "babel-eslint": "^10.0.1", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", - "eslint": "^5.6.1", + "eslint": "^5.8.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-react": "^7.11.1", "nwb": "^0.23.0", - "react": "^16.5.2", - "react-dom": "^16.5.2", + "react": "^16.6.0", + "react-dom": "^16.6.0", "sinon": "^5.1.1" }, "repository": { From 38df53a511e00cc3ef398f9924d4ece4c7d01fe8 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 6 Nov 2018 16:45:01 +0100 Subject: [PATCH 2/4] feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming: - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc... ```json { name: 'Try CoreUI PRO', url: 'https://coreui.io/pro/react/', icon: 'cui-layers icons', variant: 'danger', attributes: { target: '_blank', rel: "noopener" }, }, ``` --- src/SidebarNav.js | 17 ++++++++++++----- src/SidebarNav.md | 3 ++- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/SidebarNav.js b/src/SidebarNav.js index 51b92e8a..a8695cb3 100644 --- a/src/SidebarNav.js +++ b/src/SidebarNav.js @@ -133,15 +133,22 @@ class AppSidebarNav extends Component { // nav link navLink(item, key, classes) { const url = item.url ? item.url : ''; + const itemIcon = + const itemBadge = this.navBadge(item.badge) + const attributes = item.attributes || {} return ( - { + { attributes.disabled ? + + {itemIcon}{item.name}{itemBadge} + + : this.isExternal(url) ? - - {item.name}{this.navBadge(item.badge)} + + {itemIcon}{item.name}{itemBadge} : - - {item.name}{this.navBadge(item.badge)} + + {itemIcon}{item.name}{itemBadge} } diff --git a/src/SidebarNav.md b/src/SidebarNav.md index 9c80616a..c2979239 100644 --- a/src/SidebarNav.md +++ b/src/SidebarNav.md @@ -35,7 +35,8 @@ tag | `nav` variant: 'info', text: 'NEW', class: '' // optional - } + }, + attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming }, ```` - item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items` From d7ecc4f7e6b6fbc9a595bf0462938485a39dedef Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 6 Nov 2018 16:45:38 +0100 Subject: [PATCH 3/4] chore(demo): update style.css to `@coreui/coreui v2.1.0`, navLink `disabled` example --- demo/src/_nav.js | 23 +- demo/src/scss/style.css | 519 ++++++++++++++++++++++------------------ 2 files changed, 303 insertions(+), 239 deletions(-) diff --git a/demo/src/_nav.js b/demo/src/_nav.js index ca7efd57..4f29b836 100644 --- a/demo/src/_nav.js +++ b/demo/src/_nav.js @@ -8,6 +8,27 @@ export default { variant: 'info', text: 'NEW' } - } + }, + { + name: 'Disabled', + url: '/dashboard', + icon: 'cui-ban icons', + attributes: { disabled: true }, + }, + { + name: 'Download CoreUI', + url: 'https://coreui.io/react/', + icon: 'cui-cloud-download icons', + class: 'mt-auto', + variant: 'success', + attributes: { target: '_blank', rel: "noopener" }, + }, + { + name: 'Try CoreUI PRO', + url: 'https://coreui.io/pro/react/', + icon: 'cui-layers icons', + variant: 'danger', + attributes: { target: '_blank', rel: "noopener" }, + }, ] }; diff --git a/demo/src/scss/style.css b/demo/src/scss/style.css index db6c6ee2..7393fff6 100644 --- a/demo/src/scss/style.css +++ b/demo/src/scss/style.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! * CoreUI - Open Source Dashboard UI Kit - * @version v2.0.15 + * @version v2.1.0 * @link https://coreui.io * Copyright (c) 2018 creativeLabs Łukasz Holeczek * Licensed under MIT (https://coreui.io/license) @@ -9379,6 +9379,16 @@ a.text-dark:hover, a.text-dark:focus { border-bottom: 1px solid #c8ced3; } +*[dir="rtl"] .breadcrumb-item::before { + padding-right: 0; + padding-left: 0.5rem; +} + +*[dir="rtl"] .breadcrumb-item { + padding-right: 0.5rem; + padding-left: 0; +} + .brand-card { position: relative; display: -ms-flexbox; @@ -10337,10 +10347,6 @@ a.text-dark:hover, a.text-dark:focus { box-shadow: 0 0 0 0.2rem rgba(170, 212, 80, 0.5); } -button { - cursor: pointer; -} - .btn-transparent { color: #fff; background-color: transparent; @@ -10897,6 +10903,11 @@ button { background: #fff; } +*[dir="rtl"] .card-header > i { + margin-right: 0; + margin-left: 0.5rem; +} + .card-header-icon-bg { display: inline-block; width: 2.8125rem; @@ -10915,6 +10926,12 @@ button { margin-right: -0.25rem; } +*[dir="rtl"] .card-header-actions { + float: left; + margin-right: auto; + margin-left: -0.25rem; +} + .card-header-action { padding: 0 0.25rem; color: #73818f; @@ -11678,6 +11695,28 @@ canvas { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } +.sidebar .nav-link.disabled { + color: #b3b3b3; + cursor: default; + background: transparent; +} + +.sidebar .nav-link.disabled .nav-icon { + color: #73818f; +} + +.sidebar .nav-link.disabled:hover { + color: #b3b3b3; +} + +.sidebar .nav-link.disabled:hover .nav-icon { + color: #73818f; +} + +.sidebar .nav-link.disabled:hover.nav-dropdown-toggle::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); +} + .sidebar .nav-link.nav-link-primary { background: #20a8d8; } @@ -11845,6 +11884,19 @@ canvas { border-left: 0; } +.sidebar .nav-dropdown.open .nav-link.disabled { + color: #b3b3b3; + background: transparent; +} + +.sidebar .nav-dropdown.open .nav-link.disabled:hover { + color: #b3b3b3; +} + +.sidebar .nav-dropdown.open .nav-link.disabled:hover .nav-icon { + color: #73818f; +} + .sidebar .nav-dropdown.open > .nav-dropdown-toggle::before { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); @@ -11889,6 +11941,7 @@ canvas { position: relative; -ms-flex: 0 0 50px; flex: 0 0 50px; + cursor: pointer; background-color: rgba(0, 0, 0, 0.2); border: 0; } @@ -12001,6 +12054,12 @@ canvas { .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon { color: #fff; } + .sidebar-minimized .sidebar .nav-item:hover > .nav-link.disabled { + background: #2f353a; + } + .sidebar-minimized .sidebar .nav-item:hover > .nav-link.disabled .nav-icon { + color: #73818f; + } .sidebar-minimized .sidebar .nav-link { position: relative; padding-left: 0; @@ -12048,6 +12107,43 @@ canvas { left: 50px; display: inline; } + *[dir="rtl"] .sidebar-minimized .sidebar .nav { + list-style-image: url("data:,"); + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav .divider { + height: 0; + } + *[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before { + width: 100%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav-link { + padding-right: 0; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon { + float: right; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge { + right: auto; + left: 15px; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav-link:hover .badge { + display: inline; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items { + display: none; + max-height: 1000px; + background: #2f353a; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover { + background: #20a8d8; + } + *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items { + position: absolute; + left: 0; + display: inline; + } } *[dir="rtl"] .sidebar .nav-dropdown-toggle::before { @@ -12077,28 +12173,11 @@ canvas { margin-left: 16px; } -*[dir="rtl"] .sidebar-minimized .sidebar .nav { - list-style-type: disc; -} - -*[dir="rtl"] .sidebar-minimized .sidebar .nav-link { - padding-right: 0; -} - -*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon { - float: right; - padding: 0; - margin: 0; -} - -*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge { +*[dir="rtl"] .sidebar .sidebar-minimizer::before { right: auto; - left: 15px; -} - -*[dir="rtl"] .sidebar-minimized .sidebar .nav-dropdown:hover > .nav-dropdown-items { - right: 50px; left: 0; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } *[dir="rtl"] .sidebar-toggler { @@ -12805,94 +12884,26 @@ html[dir="rtl"] .aside-menu { z-index: 1017; } +html:not([dir="rtl"]) .sidebar-show .sidebar, html:not([dir="rtl"]) .sidebar-show .sidebar { margin-left: 0; } -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { - margin-left: 200px; -} - -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-left: 150px; -} - -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, -html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; -} - -html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { - left: 200px; -} - -html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - left: 150px; -} - -html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - left: 50px; -} - +html:not([dir="rtl"]) .aside-menu-show .aside-menu, html:not([dir="rtl"]) .aside-menu-show .aside-menu { margin-right: 0; } -html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, -html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer { - margin-right: 250px; -} - -html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb { - right: 250px; -} - +html[dir="rtl"] .sidebar-show .sidebar, html[dir="rtl"] .sidebar-show .sidebar { margin-right: 0; } -html[dir="rtl"] .sidebar-show.sidebar-fixed .main, -html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { - margin-right: 200px; -} - -html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, -html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-right: 150px; -} - -html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, -html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; -} - -html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { - right: 200px; -} - -html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - right: 150px; -} - -html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - right: 50px; -} - +html[dir="rtl"] .aside-menu-show .aside-menu, html[dir="rtl"] .aside-menu-show .aside-menu { margin-left: 0; } -html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, -html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer { - margin-left: 250px; -} - -html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { - left: 250px; -} - @-webkit-keyframes opacity { 0% { opacity: 0; @@ -12932,71 +12943,99 @@ html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { } @media (min-width: 576px) { - html:not([dir="rtl"]) .sidebar-sm-show .sidebar { + html:not([dir="rtl"]) .sidebar-sm-show .sidebar, + html:not([dir="rtl"]) .sidebar-show .sidebar { margin-left: 0; } html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer { + html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { margin-left: 200px; } html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer { + html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-left: 150px; } html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; + html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { + margin-left: 200px; } - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb { + html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { left: 200px; } - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { left: 150px; } - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { left: 50px; } + html:not([dir="rtl"]) .aside-menu-show .aside-menu, html:not([dir="rtl"]) .aside-menu-sm-show .aside-menu { margin-right: 0; } + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .main, html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .app-footer { margin-right: 250px; } + html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, html:not([dir="rtl"]) .aside-menu-sm-show.breadcrumb-fixed .breadcrumb { right: 250px; } - html[dir="rtl"] .sidebar-sm-show .sidebar { + html[dir="rtl"] .sidebar-sm-show .sidebar, + html[dir="rtl"] .sidebar-show .sidebar { margin-right: 0; } html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer { + html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { margin-right: 200px; } html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer { + html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-right: 150px; } html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; + html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { + margin-right: 200px; } - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb { + html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { right: 200px; } - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { right: 150px; } - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { right: 50px; } + html[dir="rtl"] .aside-menu-show .aside-menu, html[dir="rtl"] .aside-menu-sm-show .aside-menu { margin-left: 0; } + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .main, html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .app-footer { margin-left: 250px; } + html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, html[dir="rtl"] .aside-menu-sm-show.breadcrumb-fixed .breadcrumb { left: 250px; } @@ -13018,92 +13057,100 @@ html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { } } -@media (min-width: 576px) and (max-width: 575.98px) { - .sidebar-sm-show .main, - .aside-menu-sm-show .main { - position: relative; - } - .sidebar-sm-show .main::before, - .aside-menu-sm-show .main::before { - position: absolute; - top: 0; - left: 0; - z-index: 1018; - width: 100%; - height: 100%; - content: ""; - background: rgba(0, 0, 0, 0.7); - -webkit-animation: opacity 0.25s; - animation: opacity 0.25s; - } -} - @media (min-width: 768px) { - html:not([dir="rtl"]) .sidebar-md-show .sidebar { + html:not([dir="rtl"]) .sidebar-md-show .sidebar, + html:not([dir="rtl"]) .sidebar-show .sidebar { margin-left: 0; } html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer { + html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { margin-left: 200px; } html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer { + html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-left: 150px; } html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; + html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { + margin-left: 200px; } - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb { + html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { left: 200px; } - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { left: 150px; } - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { left: 50px; } + html:not([dir="rtl"]) .aside-menu-show .aside-menu, html:not([dir="rtl"]) .aside-menu-md-show .aside-menu { margin-right: 0; } + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .main, html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .app-footer { margin-right: 250px; } + html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, html:not([dir="rtl"]) .aside-menu-md-show.breadcrumb-fixed .breadcrumb { right: 250px; } - html[dir="rtl"] .sidebar-md-show .sidebar { + html[dir="rtl"] .sidebar-md-show .sidebar, + html[dir="rtl"] .sidebar-show .sidebar { margin-right: 0; } html[dir="rtl"] .sidebar-md-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer { + html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { margin-right: 200px; } html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer { + html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-right: 150px; } html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; + html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { + margin-right: 200px; } - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb { + html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { right: 200px; } - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { right: 150px; } - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { right: 50px; } + html[dir="rtl"] .aside-menu-show .aside-menu, html[dir="rtl"] .aside-menu-md-show .aside-menu { margin-left: 0; } + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .main, html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .app-footer { margin-left: 250px; } + html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, html[dir="rtl"] .aside-menu-md-show.breadcrumb-fixed .breadcrumb { left: 250px; } @@ -13125,92 +13172,100 @@ html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { } } -@media (min-width: 768px) and (max-width: 575.98px) { - .sidebar-md-show .main, - .aside-menu-md-show .main { - position: relative; - } - .sidebar-md-show .main::before, - .aside-menu-md-show .main::before { - position: absolute; - top: 0; - left: 0; - z-index: 1018; - width: 100%; - height: 100%; - content: ""; - background: rgba(0, 0, 0, 0.7); - -webkit-animation: opacity 0.25s; - animation: opacity 0.25s; - } -} - @media (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-lg-show .sidebar { + html:not([dir="rtl"]) .sidebar-lg-show .sidebar, + html:not([dir="rtl"]) .sidebar-show .sidebar { margin-left: 0; } html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer { + html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { margin-left: 200px; } html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer { + html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-left: 150px; } html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer { + html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { margin-left: 50px; } - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb { + html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { left: 200px; } - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { left: 150px; } - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { left: 50px; } + html:not([dir="rtl"]) .aside-menu-show .aside-menu, html:not([dir="rtl"]) .aside-menu-lg-show .aside-menu { margin-right: 0; } + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .main, html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .app-footer { margin-right: 250px; } + html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, html:not([dir="rtl"]) .aside-menu-lg-show.breadcrumb-fixed .breadcrumb { right: 250px; } - html[dir="rtl"] .sidebar-lg-show .sidebar { + html[dir="rtl"] .sidebar-lg-show .sidebar, + html[dir="rtl"] .sidebar-show .sidebar { margin-right: 0; } html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer { + html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { margin-right: 200px; } html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer { + html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-right: 150px; } html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer { + html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { margin-right: 50px; } - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb { + html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { right: 200px; } - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { right: 150px; } - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { right: 50px; } + html[dir="rtl"] .aside-menu-show .aside-menu, html[dir="rtl"] .aside-menu-lg-show .aside-menu { margin-left: 0; } + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .main, html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .app-footer { margin-left: 250px; } + html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, html[dir="rtl"] .aside-menu-lg-show.breadcrumb-fixed .breadcrumb { left: 250px; } @@ -13232,92 +13287,100 @@ html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { } } -@media (min-width: 992px) and (max-width: 575.98px) { - .sidebar-lg-show .main, - .aside-menu-lg-show .main { - position: relative; - } - .sidebar-lg-show .main::before, - .aside-menu-lg-show .main::before { - position: absolute; - top: 0; - left: 0; - z-index: 1018; - width: 100%; - height: 100%; - content: ""; - background: rgba(0, 0, 0, 0.7); - -webkit-animation: opacity 0.25s; - animation: opacity 0.25s; - } -} - @media (min-width: 1200px) { - html:not([dir="rtl"]) .sidebar-xl-show .sidebar { + html:not([dir="rtl"]) .sidebar-xl-show .sidebar, + html:not([dir="rtl"]) .sidebar-show .sidebar { margin-left: 0; } html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer { + html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { margin-left: 200px; } html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer { + html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-left: 150px; } html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer { + html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { margin-left: 50px; } - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb { + html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { left: 200px; } - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { left: 150px; } - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { left: 50px; } + html:not([dir="rtl"]) .aside-menu-show .aside-menu, html:not([dir="rtl"]) .aside-menu-xl-show .aside-menu { margin-right: 0; } + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, + html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .main, html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .app-footer { margin-right: 250px; } + html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, html:not([dir="rtl"]) .aside-menu-xl-show.breadcrumb-fixed .breadcrumb { right: 250px; } - html[dir="rtl"] .sidebar-xl-show .sidebar { + html[dir="rtl"] .sidebar-xl-show .sidebar, + html[dir="rtl"] .sidebar-show .sidebar { margin-right: 0; } html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer { + html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { margin-right: 200px; } html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer { + html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { margin-right: 150px; } html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer { + html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, + html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { margin-right: 50px; } - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb { + html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { right: 200px; } - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb { + html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { right: 150px; } - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { + html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, + html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { right: 50px; } + html[dir="rtl"] .aside-menu-show .aside-menu, html[dir="rtl"] .aside-menu-xl-show .aside-menu { margin-left: 0; } + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, + html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .main, html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .app-footer { margin-left: 250px; } + html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, html[dir="rtl"] .aside-menu-xl-show.breadcrumb-fixed .breadcrumb { left: 250px; } @@ -13339,26 +13402,6 @@ html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb { } } -@media (min-width: 1200px) and (max-width: 575.98px) { - .sidebar-xl-show .main, - .aside-menu-xl-show .main { - position: relative; - } - .sidebar-xl-show .main::before, - .aside-menu-xl-show .main::before { - position: absolute; - top: 0; - left: 0; - z-index: 1018; - width: 100%; - height: 100%; - content: ""; - background: rgba(0, 0, 0, 0.7); - -webkit-animation: opacity 0.25s; - animation: opacity 0.25s; - } -} - .footer-fixed .app-footer { position: fixed; right: 0; @@ -14124,4 +14167,4 @@ body { breakpoint-lg: 992px; breakpoint-xl: 1200px; } -/*# sourceMappingURL=coreui.css.map */ +/*# sourceMappingURL=coreui.css.map */ \ No newline at end of file From dfda83688e8cac05db8048ed7eb41d821a43127e Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 6 Nov 2018 16:47:27 +0100 Subject: [PATCH 4/4] ship: v2.1.0 --- CHANGELOG.md | 20 ++++++++++++++++++++ package.json | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f209a16f..9a245b0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ ### [@coreui/react](https://coreui.io/) changelog +##### `v2.1.0` +- feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming: + - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc... + - item example: + ```json + { + name: 'Try CoreUI PRO', + url: 'https://coreui.io/pro/react/', + icon: 'cui-layers icons', + variant: 'danger', + attributes: { target: '_blank', rel: "noopener" }, + }, + ``` +- update `@coreui/coreui` to `2.1.0` - sidebar-nav-link-disabled-* +- chore: update `react-perfect-scrollbar` to `1.4.2` +- chore: update `eslint` to `5.8.0` +- chore: update `react` to `16.6.0` +- chore: update `react-dom` to `16.6.0` +- chore(demo): style.css update to `@coreui/coreui v2.1.0`, navLink `disabled` example + ##### `v2.0.9` - feat(Sidebar): badge on parent dropdown - thanks @jeff-nz - fix(SidebarNav): handleClick() target->currentTarget open diff --git a/package.json b/package.json index 731f73e1..39df4427 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "2.0.9", + "version": "2.1.0", "description": "CoreUI React Bootstrap 4 components", "license": "MIT", "author": {