Merge branch 'v4-dev' of https://github.com/coreui/coreui into v4-dev-sync-pro

# Conflicts:
#	scss/_variables.scss
#	scss/sidebar/_sidebar.scss

Author: mrholek

.github/FUNDING.yml

@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-open_collective: bootstrap
+custom: "https://coreui.io/pro/"

build/postcss.config.js

@@ -13,6 +13,7 @@ module.exports = ctx => {
       autoprefixer: {
         cascade: false
       },
+      'postcss-combine-duplicated-selectors': {},
       rtlcss: ctx.env === 'RTL' ? {} : false
     }
   }

docs/content/4.0/content/tables.md

@@ -212,10 +212,10 @@ Highlight a table row or cell by adding a `.table-active` class.
 
 For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
-- We start by setting the background of a table cell with the `--coreui-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--coreui-table-accent-bg), var(--coreui-table-accent-bg));` to layer on top of any specified `background-color`. Since `--coreui-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
-- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--coreui-table-accent-bg` is set to a semitransparent color to colorize the background.
-- For each table variant, we generate a `--coreui-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+- We start by setting the background of a table cell with the `--cui-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--cui-table-accent-bg), var(--cui-table-accent-bg));` to layer on top of any specified `background-color`. Since `--cui-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
+- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--cui-table-accent-bg` is set to a semitransparent color to colorize the background.
+- For each table variant, we generate a `--cui-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
 Behind the scenes it looks like this:

docs/content/4.0/customize/css-variables.md

@@ -47,9 +47,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee
 
 ```css
 body {
-  font: 1rem/1.5 var(--coreui-font-sans-serif);
+  font: 1rem/1.5 var(--cui-font-sans-serif);
 }
 a {
-  color: var(--coreui-blue);
+  color: var(--cui-blue);
 }
 ```

docs/content/4.0/migration.md

@@ -93,7 +93,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 #### Breadcrumbs
 
 - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
-- Added new CSS custom property `--coreui-breadcrumb-divider` for easy customization without needing to recompile CSS.
+- Added new CSS custom property `--cui-breadcrumb-divider` for easy customization without needing to recompile CSS.
 
 #### Buttons
 

docs/content/4.0/utilities/colors.md

@@ -35,7 +35,7 @@ Sometimes contextual classes cannot be applied due to the specificity of another
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-Do you need a gradient in your custom CSS? Just add `background-image: var(--coreui-gradient);`.
+Do you need a gradient in your custom CSS? Just add `background-image: var(--cui-gradient);`.
 ### Variables
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.

js/src/dropdown.js

@@ -296,7 +296,7 @@ class Dropdown extends BaseComponent {
     }
 
     // We need to trim the value because custom properties can also include spaces
-    const isEnd = getComputedStyle(this._menu).getPropertyValue('--coreui-position').trim() === 'end'
+    const isEnd = getComputedStyle(this._menu).getPropertyValue('--cui-position').trim() === 'end'
 
     if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
       return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP

js/src/navigation.js

@@ -95,6 +95,10 @@ class Navigation extends BaseComponent {
 
   _setActiveLink() {
     Array.from(this._element.querySelectorAll(SELECTOR_NAV_LINK)).forEach(element => {
+      if (element.classList.contains(CLASS_NAME_NAV_GROUP_TOGGLE)) {
+        return
+      }
+
       let currentUrl = String(window.location)
 
       const urlHasParams = /\?.*=/

package.json

@@ -17,9 +17,8 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-lint-vars": "fusv scss/ docs/assets/scss/",
@@ -67,7 +66,6 @@
     "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
-    "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch docs/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
     "watch-js-docs": "nodemon --watch docs/assets/js/ --ext js --exec \"npm run js-lint\""
@@ -84,7 +82,6 @@
     "url": "https://github.com/coreui/coreui/issues"
   },
   "license": "MIT",
-  "dependencies": {},
   "peerDependencies": {
     "@popperjs/core": "^2.9.0"
   },
@@ -126,6 +123,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.6",
     "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "^10.0.2",
     "rollup": "^2.40.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.1.2",

scss/_accordion.scss

@@ -36,7 +36,7 @@
     flex-shrink: 0;
     width: $accordion-icon-width;
     height: $accordion-icon-width;
-    margin-left: auto;
+    @include ltr-rtl("margin-left", auto);
     content: "";
     background-image: var(--#{$variable-prefix}accordion-button-icon, escape-svg($accordion-button-icon));
     background-repeat: no-repeat;