@coreui/coreui 5.0.0-alpha.1 → 5.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/README.md +1 -1
  2. package/dist/css/coreui-grid.css +1 -1
  3. package/dist/css/coreui-grid.css.map +1 -1
  4. package/dist/css/coreui-grid.min.css +1 -1
  5. package/dist/css/coreui-grid.min.css.map +1 -1
  6. package/dist/css/coreui-grid.rtl.css +1 -6
  7. package/dist/css/coreui-grid.rtl.css.map +1 -1
  8. package/dist/css/coreui-grid.rtl.min.css +1 -5
  9. package/dist/css/coreui-grid.rtl.min.css.map +1 -1
  10. package/dist/css/coreui-reboot.css +45 -40
  11. package/dist/css/coreui-reboot.css.map +1 -1
  12. package/dist/css/coreui-reboot.min.css +2 -2
  13. package/dist/css/coreui-reboot.min.css.map +1 -1
  14. package/dist/css/coreui-reboot.rtl.css +45 -45
  15. package/dist/css/coreui-reboot.rtl.css.map +1 -1
  16. package/dist/css/coreui-reboot.rtl.min.css +2 -6
  17. package/dist/css/coreui-reboot.rtl.min.css.map +1 -1
  18. package/dist/css/coreui-utilities.css +87 -82
  19. package/dist/css/coreui-utilities.css.map +1 -1
  20. package/dist/css/coreui-utilities.min.css +2 -2
  21. package/dist/css/coreui-utilities.min.css.map +1 -1
  22. package/dist/css/coreui-utilities.rtl.css +81 -81
  23. package/dist/css/coreui-utilities.rtl.css.map +1 -1
  24. package/dist/css/coreui-utilities.rtl.min.css +2 -6
  25. package/dist/css/coreui-utilities.rtl.min.css.map +1 -1
  26. package/dist/css/coreui.css +659 -675
  27. package/dist/css/coreui.css.map +1 -1
  28. package/dist/css/coreui.min.css +2 -2
  29. package/dist/css/coreui.min.css.map +1 -1
  30. package/dist/css/coreui.rtl.css +690 -717
  31. package/dist/css/coreui.rtl.css.map +1 -1
  32. package/dist/css/coreui.rtl.min.css +2 -6
  33. package/dist/css/coreui.rtl.min.css.map +1 -1
  34. package/dist/js/coreui.bundle.js +13 -5
  35. package/dist/js/coreui.bundle.js.map +1 -1
  36. package/dist/js/coreui.bundle.min.js +2 -2
  37. package/dist/js/coreui.bundle.min.js.map +1 -1
  38. package/dist/js/coreui.esm.js +13 -5
  39. package/dist/js/coreui.esm.js.map +1 -1
  40. package/dist/js/coreui.esm.min.js +2 -2
  41. package/dist/js/coreui.esm.min.js.map +1 -1
  42. package/dist/js/coreui.js +13 -5
  43. package/dist/js/coreui.js.map +1 -1
  44. package/dist/js/coreui.min.js +2 -2
  45. package/dist/js/coreui.min.js.map +1 -1
  46. package/js/dist/alert.js +1 -1
  47. package/js/dist/base-component.js +2 -2
  48. package/js/dist/base-component.js.map +1 -1
  49. package/js/dist/button.js +1 -1
  50. package/js/dist/carousel.js +1 -1
  51. package/js/dist/collapse.js +1 -1
  52. package/js/dist/dom/data.js +1 -1
  53. package/js/dist/dom/event-handler.js +1 -1
  54. package/js/dist/dom/manipulator.js +1 -1
  55. package/js/dist/dom/selector-engine.js +1 -1
  56. package/js/dist/dropdown.js +1 -1
  57. package/js/dist/modal.js +1 -1
  58. package/js/dist/navigation.js +1 -1
  59. package/js/dist/offcanvas.js +1 -1
  60. package/js/dist/popover.js +1 -1
  61. package/js/dist/scrollspy.js +1 -1
  62. package/js/dist/sidebar.js +1 -1
  63. package/js/dist/tab.js +12 -4
  64. package/js/dist/tab.js.map +1 -1
  65. package/js/dist/toast.js +1 -1
  66. package/js/dist/tooltip.js +1 -1
  67. package/js/dist/util/backdrop.js +1 -1
  68. package/js/dist/util/component-functions.js +1 -1
  69. package/js/dist/util/config.js +1 -1
  70. package/js/dist/util/focustrap.js +1 -1
  71. package/js/dist/util/index.js +1 -1
  72. package/js/dist/util/sanitizer.js +1 -1
  73. package/js/dist/util/scrollbar.js +1 -1
  74. package/js/dist/util/swipe.js +1 -1
  75. package/js/dist/util/template-factory.js +1 -1
  76. package/js/src/base-component.js +1 -1
  77. package/js/src/tab.js +13 -3
  78. package/package.json +20 -20
  79. package/scss/_button-group.scss +3 -3
  80. package/scss/_card.scss +3 -3
  81. package/scss/_close.scss +1 -0
  82. package/scss/_dropdown.scss +4 -4
  83. package/scss/_header.scss +3 -12
  84. package/scss/_nav.scss +35 -17
  85. package/scss/_reboot.scss +4 -4
  86. package/scss/_root.scss +18 -12
  87. package/scss/_tooltip.scss +1 -1
  88. package/scss/_type.scss +1 -1
  89. package/scss/_variables-dark.scss +8 -17
  90. package/scss/_variables.scss +119 -139
  91. package/scss/coreui-grid.rtl.scss +0 -3
  92. package/scss/coreui-reboot.rtl.scss +0 -3
  93. package/scss/coreui-utilities.rtl.scss +0 -3
  94. package/scss/coreui.rtl.scss +0 -3
  95. package/scss/coreui.scss +0 -1
  96. package/scss/forms/_floating-labels.scss +3 -2
  97. package/scss/forms/_form-check.scss +12 -12
  98. package/scss/forms/_form-control.scss +1 -1
  99. package/scss/forms/_form-range.scss +3 -3
  100. package/scss/forms/_form-select.scss +1 -1
  101. package/scss/helpers/_color-bg.scss +1 -2
  102. package/scss/helpers/_vr.scss +1 -1
  103. package/scss/mixins/_banner.scss +1 -1
  104. package/scss/mixins/_caret.scss +3 -3
  105. package/scss/sidebar/_sidebar-narrow.scss +33 -13
  106. package/scss/sidebar/_sidebar-nav.scss +114 -19
  107. package/scss/sidebar/_sidebar.scss +82 -131
  108. package/scss/_subheader.scss +0 -72
package/scss/_variables.scss CHANGED
@@ -36,14 +36,6 @@ $grays: (
36
36
  // scss-docs-end gray-colors-map
37
37
  // fusv-enable
38
38
 
39
- $high-emphasis: rgba(shift-color($gray-base, +26%), .95) !default;
40
- $medium-emphasis: rgba(shift-color($gray-base, +26%), .681) !default;
41
- $disabled: rgba(shift-color($gray-base, +26%), .38) !default;
42
-
43
- $high-emphasis-inverse: rgba($white, .87) !default;
44
- $medium-emphasis-inverse: rgba($white, .6) !default;
45
- $disabled-inverse: rgba($white, .38) !default;
46
-
47
39
  // scss-docs-start color-variables
48
40
  $blue: #0d6efd !default;
49
41
  $indigo: #6610f2 !default;
@@ -81,8 +73,8 @@ $colors: (
81
73
  $min-contrast-ratio: 4.5 !default;
82
74
 
83
75
  // Customize the light and dark text colors for use in our color contrast function.
84
- $color-contrast-dark: $high-emphasis-inverse !default;
85
- $color-contrast-light: $high-emphasis !default;
76
+ $color-contrast-dark: $black !default;
77
+ $color-contrast-light: $white !default;
86
78
 
87
79
  // fusv-disable
88
80
  $blue-100: tint-color($blue, 80%) !default;
@@ -307,7 +299,7 @@ $cyans: (
307
299
  // fusv-enable
308
300
 
309
301
  // scss-docs-start theme-color-variables
310
- $primary: #321fdb !default;
302
+ $primary: #5856d6 !default;
311
303
  $secondary: #9da5b1 !default;
312
304
  $success: #2eb85c !default;
313
305
  $info: #39f !default;
@@ -331,7 +323,7 @@ $theme-colors: (
331
323
  // scss-docs-end theme-colors-map
332
324
 
333
325
  // scss-docs-start theme-text-variables
334
- $primary-text-emphasis: #1f1498 !default;
326
+ $primary-text-emphasis: #3634a3 !default;
335
327
  $secondary-text-emphasis: #212233 !default;
336
328
  $success-text-emphasis: #0f5722 !default;
337
329
  $info-text-emphasis: #184c77 !default;
@@ -342,7 +334,7 @@ $dark-text-emphasis: $gray-800 !default;
342
334
  // scss-docs-end theme-text-variables
343
335
 
344
336
  // scss-docs-start theme-bg-subtle-variables
345
- $primary-bg-subtle: #ccc7f6 !default;
337
+ $primary-bg-subtle: #cfc7f3 !default;
346
338
  $secondary-bg-subtle: #ced2d8 !default;
347
339
  $success-bg-subtle: #cbedd6 !default;
348
340
  $info-bg-subtle: #c0e6ff !default;
@@ -353,7 +345,7 @@ $dark-bg-subtle: $gray-400 !default;
353
345
  // scss-docs-end theme-bg-subtle-variables
354
346
 
355
347
  // scss-docs-start theme-border-subtle-variables
356
- $primary-border-subtle: #988fed !default;
348
+ $primary-border-subtle: #9d92e6 !default;
357
349
  $secondary-border-subtle: #9da5b1 !default;
358
350
  $success-border-subtle: #96dbad !default;
359
351
  $info-border-subtle: #80c6ff !default;
@@ -450,13 +442,13 @@ $position-values: (
450
442
  // Settings for the `<body>` element.
451
443
 
452
444
  $body-text-align: null !default;
453
- $body-color: $high-emphasis !default;
445
+ $body-color: rgba(shift-color($gray-base, +26%), .95) !default;
454
446
  $body-bg: $white !default;
455
447
 
456
- $body-secondary-color: $medium-emphasis !default;
448
+ $body-secondary-color: rgba(shift-color($gray-base, +26%), .681) !default;
457
449
  $body-secondary-bg: $gray-200 !default;
458
450
 
459
- $body-tertiary-color: $disabled !default;
451
+ $body-tertiary-color: rgba(shift-color($gray-base, +26%), .38) !default;
460
452
  $body-tertiary-bg: $gray-100 !default;
461
453
 
462
454
  $body-emphasis-color: $black !default;
@@ -568,7 +560,7 @@ $border-radius-xxl: 2rem !default;
568
560
  $border-radius-pill: 50rem !default;
569
561
  // scss-docs-end border-radius-variables
570
562
  // fusv-disable
571
- $border-radius-2xl: $border-radius-xxl !default; // Deprecated in v4.3.0
563
+ $border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.0.0
572
564
  // fusv-enable
573
565
 
574
566
  // scss-docs-start box-shadow-variables
@@ -578,8 +570,8 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
578
570
  $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
579
571
  // scss-docs-end box-shadow-variables
580
572
 
581
- $component-active-color: $high-emphasis-inverse !default;
582
- $component-active-bg: $primary !default;
573
+ $component-active-color: rgba($white, .87) !default;
574
+ $component-active-bg: var(--#{$prefix}primary) !default;
583
575
 
584
576
  // scss-docs-start focus-ring-variables
585
577
  $focus-ring-width: .25rem !default;
@@ -699,7 +691,7 @@ $small-font-size: .875em !default;
699
691
  $sub-sup-font-size: .75em !default;
700
692
 
701
693
  // fusv-disable
702
- $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
694
+ $text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.0.0
703
695
  // fusv-enable
704
696
 
705
697
  $initialism-font-size: $small-font-size !default;
@@ -721,6 +713,10 @@ $hr-border-color: null !default; // Allows for inherited colors
721
713
  $hr-border-width: var(--#{$prefix}border-width) !default;
722
714
  $hr-opacity: .25 !default;
723
715
 
716
+ // scss-docs-start vr-variables
717
+ $vr-border-width: var(--#{$prefix}border-width) !default;
718
+ // scss-docs-end vr-variables
719
+
724
720
  $legend-margin-bottom: .5rem !default;
725
721
  $legend-font-size: 1.5rem !default;
726
722
  $legend-font-weight: null !default;
@@ -953,7 +949,7 @@ $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !defau
953
949
  $input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
954
950
 
955
951
  $input-focus-bg: $input-bg !default;
956
- $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
952
+ $input-focus-border-color: tint-color($primary, 50%) !default;
957
953
  $input-focus-color: $input-color !default;
958
954
  $input-focus-width: $input-btn-focus-width !default;
959
955
  $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@@ -1110,7 +1106,7 @@ $form-range-thumb-border-radius: 1rem !default;
1110
1106
  $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
1111
1107
  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
1112
1108
  $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
1113
- $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
1109
+ $form-range-thumb-active-bg: tint-color($primary, 70%) !default;
1114
1110
  $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
1115
1111
  $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
1116
1112
  // scss-docs-end form-range-variables
@@ -1232,6 +1228,10 @@ $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefi
1232
1228
  $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
1233
1229
  $nav-pills-link-active-color: $component-active-color !default;
1234
1230
  $nav-pills-link-active-bg: $component-active-bg !default;
1231
+
1232
+ $nav-underline-gap: 1rem !default;
1233
+ $nav-underline-border-width: .125rem !default;
1234
+ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
1235
1235
  // scss-docs-end nav-variables
1236
1236
 
1237
1237
 
@@ -1273,8 +1273,9 @@ $navbar-dark-color: rgba($white, .55) !default;
1273
1273
  $navbar-dark-hover-color: rgba($white, .75) !default;
1274
1274
  $navbar-dark-active-color: $white !default;
1275
1275
  $navbar-dark-disabled-color: rgba($white, .25) !default;
1276
- $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1277
- $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1276
+ $navbar-dark-icon-color: $navbar-dark-color !default;
1277
+ $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1278
+ $navbar-dark-toggler-border-color: rgba($white, .1) !default;$navbar-dark-toggler-border-color: rgba($white, .1) !default;
1278
1279
  $navbar-dark-brand-color: $navbar-dark-active-color !default;
1279
1280
  $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1280
1281
  // scss-docs-end navbar-dark-variables
@@ -1316,7 +1317,7 @@ $dropdown-header-color: $gray-600 !default;
1316
1317
  $dropdown-header-padding-x: $dropdown-item-padding-x !default;
1317
1318
  $dropdown-header-padding-y: $dropdown-padding-y !default;
1318
1319
  // fusv-disable
1319
- $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
1320
+ $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v4.2.6
1320
1321
  // fusv-enable
1321
1322
  // scss-docs-end dropdown-variables
1322
1323
 
@@ -1509,12 +1510,6 @@ $popover-arrow-color: $popover-bg !default;
1509
1510
  $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1510
1511
  // fusv-enable
1511
1512
 
1512
- // fusv-disable
1513
- // Deprecated in 4.2.0 for CSS variables
1514
- $popover-arrow-color: $popover-bg !default;
1515
- $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1516
- // fusv-enable
1517
-
1518
1513
 
1519
1514
  // Toasts
1520
1515
 
@@ -1624,9 +1619,6 @@ $alert-margin-bottom: 1rem !default;
1624
1619
  $alert-border-radius: var(--#{$prefix}border-radius) !default;
1625
1620
  $alert-link-font-weight: $font-weight-bold !default;
1626
1621
  $alert-border-width: var(--#{$prefix}border-width) !default;
1627
- $alert-bg-scale: -80% !default;
1628
- $alert-border-scale: -70% !default;
1629
- $alert-color-scale: 40% !default;
1630
1622
  $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1631
1623
  // scss-docs-end alert-variables
1632
1624
 
@@ -1689,8 +1681,8 @@ $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1689
1681
  $list-group-item-padding-y: $spacer * .5 !default;
1690
1682
  $list-group-item-padding-x: $spacer !default;
1691
1683
  // fusv-disable
1692
- $list-group-item-bg-scale: -80% !default; // Deprecated in v4.3.0
1693
- $list-group-item-color-scale: 40% !default; // Deprecated in v4.3.0
1684
+ $list-group-item-bg-scale: -80% !default; // Deprecated in v5.0.0
1685
+ $list-group-item-color-scale: 40% !default; // Deprecated in v5.0.0
1694
1686
  // fusv-enable
1695
1687
 
1696
1688
  $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
@@ -1722,6 +1714,7 @@ $header-border-width: var(--#{$prefix}border-width) !default;
1722
1714
  $header-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1723
1715
  $header-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1724
1716
  $header-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1717
+ $header-transition: box-shadow .15s ease-in-out !default;
1725
1718
 
1726
1719
  // Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
1727
1720
  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
@@ -1750,26 +1743,6 @@ $header-divider-border-width: var(--#{$prefix}border-width) !default;
1750
1743
  $header-divider-border-color: var(--#{$prefix}border-color) !default;
1751
1744
  // scss-docs-end header-variables
1752
1745
 
1753
- // Subheader
1754
- // scss-docs-start subheader-variables
1755
- $subheader-min-height: 3rem !default;
1756
- $subheader-padding-y: $spacer * .5 !default;
1757
- $subheader-padding-x: $spacer !default;
1758
- $subheader-border-color: var(--#{$prefix}border-color) !default;
1759
- $subheader-border-width: 1px !default;
1760
-
1761
- $subheader-nav-link-padding-x: .5rem !default;
1762
- // scss-docs-end subheader-variables
1763
-
1764
- // Default theme //TODO: check
1765
- // scss-docs-start subheader-default-themes
1766
- $subheader-bg: $white !default;
1767
- $subheader-color: var(--#{$prefix}secondary-color) !default;
1768
- $subheader-hover-color: var(--#{$prefix}body-color) !default;
1769
- $subheader-active-color: var(--#{$prefix}body-color) !default;
1770
- $subheader-disabled-color: $disabled !default;
1771
- // scss-docs-end subheader-default-themes
1772
-
1773
1746
 
1774
1747
  // Image thumbnails
1775
1748
 
@@ -1852,93 +1825,100 @@ $sidebar-widths: (
1852
1825
  lg: 20rem,
1853
1826
  xl: 24rem
1854
1827
  ) !default;
1855
- $sidebar-padding-y: 0 !default;
1856
- $sidebar-padding-x: 0 !default;
1857
- $sidebar-color: $high-emphasis-inverse !default;
1858
- $sidebar-bg: $gray-800 !default;
1859
- $sidebar-border-width: 0 !default;
1860
- $sidebar-border-color: transparent !default;
1828
+ $sidebar-narrow-width: 4rem !default;
1829
+ $sidebar-padding-y: $spacer !default;
1830
+ $sidebar-padding-x: $spacer !default;
1831
+ $sidebar-color: var(--#{$prefix}body-color) !default;
1832
+ $sidebar-bg: var(--#{$prefix}body-bg) !default;
1861
1833
  $sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
1862
-
1863
- $sidebar-brand-height: 4rem !default;
1864
- $sidebar-brand-color: $high-emphasis-inverse !default;
1834
+ $sidebar-brand-color: var(--#{$prefix}body-color) !default;
1865
1835
  $sidebar-brand-bg: rgba($black, .2) !default;
1866
-
1867
- $sidebar-header-height: 4rem !default;
1868
- $sidebar-header-padding-y: .75rem !default;
1869
- $sidebar-header-padding-x: 1rem !default;
1870
- $sidebar-header-bg: rgba($black, .2) !default;
1871
- $sidebar-header-height-transition: height .15s, padding .15s !default;
1872
-
1873
- $sidebar-narrow-width: 4rem !default;
1874
-
1875
1836
  $sidebar-backdrop-bg: $black !default;
1876
1837
  $sidebar-backdrop-opacity: .5 !default;
1877
-
1878
- $sidebar-nav-title-padding-y: .75rem !default;
1879
- $sidebar-nav-title-padding-x: 1rem !default;
1880
- $sidebar-nav-title-margin-top: 1rem !default;
1881
- $sidebar-nav-title-color: $medium-emphasis-inverse !default;
1882
- $sidebar-nav-title-transition: height .15s, margin .15s !default;
1883
-
1884
- $sidebar-nav-link-padding-y: .8445rem !default;
1885
- $sidebar-nav-link-padding-x: 1rem !default;
1886
- $sidebar-nav-link-color: $medium-emphasis-inverse !default;
1887
- $sidebar-nav-link-bg: transparent !default;
1888
- $sidebar-nav-link-border-width: 0 !default;
1889
- $sidebar-nav-link-border-color: transparent !default;
1890
- $sidebar-nav-link-border-radius: 0 !default;
1891
- $sidebar-nav-link-transition: background .15s ease, color .15s ease !default;
1892
- $sidebar-nav-link-icon-color: $medium-emphasis-inverse !default;
1893
-
1894
- $sidebar-nav-link-hover-color: $high-emphasis-inverse !default;
1895
- $sidebar-nav-link-hover-bg: rgba($white, .05) !default;
1896
- $sidebar-nav-link-hover-icon-color: $high-emphasis-inverse !default;
1897
-
1898
- $sidebar-nav-link-active-color: $high-emphasis-inverse !default;
1899
- $sidebar-nav-link-active-bg: rgba($white, .05) !default;
1900
- $sidebar-nav-link-active-icon-color: $high-emphasis-inverse !default;
1901
-
1902
- $sidebar-nav-link-disabled-color: $disabled-inverse !default;
1903
- $sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color !default;
1904
-
1905
- $sidebar-nav-icon-width: 4rem !default;
1906
- $sidebar-nav-icon-height: 1.25rem !default;
1907
- $sidebar-nav-icon-font-size: $sidebar-nav-icon-height !default;
1908
-
1909
- $sidebar-nav-group-bg: rgba(0, 0, 0, .2) !default;
1910
- $sidebar-nav-group-transition: background .15s ease-in-out !default;
1911
- $sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color !default;
1912
-
1913
- $sidebar-nav-group-items-padding-y: 0 !default;
1914
- $sidebar-nav-group-items-padding-x: 0 !default;
1915
- $sidebar-nav-group-items-transition: height .15s ease !default;
1916
-
1917
- $sidebar-nav-group-indicator-color: $medium-emphasis-inverse !default;
1918
- $sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1919
- $sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1920
- $sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1921
- $sidebar-nav-group-indicator-transition: transform .15s !default;
1922
-
1923
- $sidebar-footer-height: auto !default;
1924
- $sidebar-footer-padding-y: .75rem !default;
1925
- $sidebar-footer-padding-x: 1rem !default;
1926
- $sidebar-footer-bg: rgba($black, .2) !default;
1927
- $sidebar-footer-height-transition: height .15s, padding .15s !default;
1928
-
1929
- $sidebar-toggler-height: 3rem !default;
1930
- $sidebar-toggler-bg: rgba($black, .2) !default;
1931
- $sidebar-toggler-transition: transform .15s !default;
1932
-
1933
- $sidebar-toggler-indicator-width: 4rem !default;
1934
- $sidebar-toggler-indicator-height: 3rem !default;
1935
- $sidebar-toggler-indicator-color: $disabled-inverse !default;
1936
- $sidebar-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-color}' 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") !default;
1937
- $sidebar-toggler-hover-bg: rgba(0, 0, 0, .3) !default;
1938
- $sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1939
- $sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' 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") !default;
1940
1838
  // scss-docs-end sidebar-variables
1941
1839
 
1840
+ // scss-docs-start sidebar-nav-variables
1841
+ $sidebar-nav-padding-y: $sidebar-padding-y * .5 !default;
1842
+ $sidebar-nav-padding-x: $sidebar-padding-x * .5 !default;
1843
+
1844
+ $sidebar-nav-title-padding-y: .75rem !default;
1845
+ $sidebar-nav-title-padding-x: 1rem !default;
1846
+ $sidebar-nav-title-margin-top: 1rem !default;
1847
+ $sidebar-nav-title-color: var(--#{$prefix}tertiary-color) !default;
1848
+ $sidebar-nav-title-transition: height .15s, margin .15s !default;
1849
+
1850
+ $sidebar-nav-link-padding-y: .75rem !default;
1851
+ $sidebar-nav-link-padding-x: 1rem !default;
1852
+ $sidebar-nav-link-color: var(--#{$prefix}body-color) !default;
1853
+ $sidebar-nav-link-bg: transparent !default;
1854
+ $sidebar-nav-link-border-width: 0 !default;
1855
+ $sidebar-nav-link-border-color: transparent !default;
1856
+ $sidebar-nav-link-border-radius: var(--#{$prefix}border-radius) !default;
1857
+ $sidebar-nav-link-transition: background .15s ease, color .15s ease, gap .15s ease !default;
1858
+
1859
+ $sidebar-narrow-nav-link-padding-y: .75rem !default;
1860
+ $sidebar-narrow-nav-link-padding-x: .5rem !default;
1861
+
1862
+ $sidebar-nav-link-icon-margin: .75rem !default;
1863
+ $sidebar-nav-link-icon-color: var(--#{$prefix}tertiary-color) !default;
1864
+ $sidebar-nav-link-icon-width: 1.25rem !default;
1865
+ $sidebar-nav-link-icon-height: 1.25rem !default;
1866
+ $sidebar-nav-link-icon-font-size: $sidebar-nav-link-icon-height !default;
1867
+
1868
+ $sidebar-nav-link-icon-bullet-size: .3125rem !default;
1869
+ $sidebar-nav-link-icon-bullet-bg: transparent !default;
1870
+ $sidebar-nav-link-icon-bullet-border-width: 1px !default;
1871
+ $sidebar-nav-link-icon-bullet-border-color: var(--#{$prefix}tertiary-color) !default;
1872
+ $sidebar-nav-link-icon-bullet-border-radius: 50rem !default;
1873
+
1874
+ $sidebar-nav-link-hover-color: var(--#{$prefix}emphasis-color) !default;
1875
+ $sidebar-nav-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1876
+ $sidebar-nav-link-hover-icon-color: var(--#{$prefix}body-color) !default;
1877
+ $sidebar-nav-link-hover-icon-bullet-bg: transparent !default;
1878
+ $sidebar-nav-link-hover-icon-bullet-border-color: var(--#{$prefix}body-color) !default;
1879
+
1880
+ $sidebar-nav-link-active-color: var(--#{$prefix}emphasis-color) !default;
1881
+ $sidebar-nav-link-active-bg: var(--#{$prefix}tertiary-bg) !default;
1882
+ $sidebar-nav-link-active-icon-color: var(--#{$prefix}primary) !default;
1883
+ $sidebar-nav-link-active-icon-bullet-bg: transparent !default;
1884
+ $sidebar-nav-link-active-icon-bullet-border-color: var(--#{$prefix}primary) !default;
1885
+
1886
+ $sidebar-nav-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1887
+ $sidebar-nav-link-disabled-icon-color: var(--#{$prefix}tertiary-color) !default;
1888
+ $sidebar-nav-link-disabled-icon-bullet-bg: transparent !default;
1889
+ $sidebar-nav-link-disabled-icon-bullet-border-color: var(--#{$prefix}tertiary-color) !default;
1890
+
1891
+ $sidebar-nav-group-bg: transparent !default;
1892
+ $sidebar-nav-group-border-width: 0 !default;
1893
+ $sidebar-nav-group-border-color: transparent !default;
1894
+ $sidebar-nav-group-border-radius: var(--#{$prefix}border-radius) !default;
1895
+ $sidebar-nav-group-transition: background .15s ease-in-out !default;
1896
+ $sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color !default;
1897
+
1898
+ $sidebar-nav-group-items-padding-y: 0 !default;
1899
+ $sidebar-nav-group-items-padding-x: 0 !default;
1900
+ $sidebar-nav-group-items-transition: height .15s ease !default;
1901
+
1902
+ $sidebar-nav-group-indicator-color: var(--#{$prefix}tertiary-color) !default;
1903
+ $sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1904
+ $sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1905
+ $sidebar-nav-group-indicator-hover-icon: $sidebar-nav-group-indicator-icon !default;
1906
+ $sidebar-nav-group-indicator-transition: transform .15s !default;
1907
+ // scss-docs-end sidebar-nav-variables
1908
+
1909
+ // scss-docs-start sidebar-toggler
1910
+ $sidebar-toggler-width: .5rem !default;
1911
+ $sidebar-toggler-height: .5rem !default;
1912
+ $sidebar-toggler-padding-x: .25rem !default;
1913
+ $sidebar-toggler-padding-y: .25rem !default;
1914
+ $sidebar-toggler-color: var(--#{$prefix}tertiary-color) !default;
1915
+ $sidebar-toggler-bg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
1916
+ $sidebar-toggler-focus-shadow: $focus-ring-box-shadow !default;
1917
+ $sidebar-toggler-hover-color: var(--#{$prefix}secondary-color) !default;
1918
+ $sidebar-toggler-focus-color: var(--#{$prefix}secondary-color) !default;
1919
+ $sidebar-toggler-transition: transform .15s !default;
1920
+ // scss-docs-end sidebar-toggler
1921
+
1942
1922
  // Footer
1943
1923
  // scss-docs-start footer-variables
1944
1924
  $footer-min-height: 3rem !default;
@@ -2011,6 +1991,6 @@ $kbd-padding-x: .375rem !default;
2011
1991
  $kbd-font-size: $code-font-size !default;
2012
1992
  $kbd-color: var(--#{$prefix}body-bg) !default;
2013
1993
  $kbd-bg: var(--#{$prefix}body-color) !default;
2014
- $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1994
+ $nested-kbd-font-weight: null !default; // Deprecated in v4.2.6, removing in v6
2015
1995
 
2016
1996
  $pre-color: null !default;
package/scss/coreui-grid.rtl.scss CHANGED
@@ -1,6 +1,3 @@
1
- @import "mixins/banner";
2
- @include bsBanner("");
3
-
4
1
  $enable-ltr: false !default;
5
2
  $enable-rtl: true !default;
6
3
 
package/scss/coreui-reboot.rtl.scss CHANGED
@@ -1,6 +1,3 @@
1
- @import "mixins/banner";
2
- @include bsBanner("");
3
-
4
1
  $enable-ltr: false !default;
5
2
  $enable-rtl: true !default;
6
3
 
package/scss/coreui-utilities.rtl.scss CHANGED
@@ -1,6 +1,3 @@
1
- @import "mixins/banner";
2
- @include bsBanner("");
3
-
4
1
  $enable-ltr: false !default;
5
2
  $enable-rtl: true !default;
6
3
 
package/scss/coreui.rtl.scss CHANGED
@@ -1,6 +1,3 @@
1
- @import "mixins/banner";
2
- @include bsBanner("");
3
-
4
1
  $enable-ltr: false !default;
5
2
  $enable-rtl: true !default;
6
3
 
package/scss/coreui.scss CHANGED
@@ -49,7 +49,6 @@
49
49
  @import "header";
50
50
  @import "icon";
51
51
  @import "sidebar";
52
- @import "subheader";
53
52
 
54
53
  // Helpers
55
54
  @import "helpers";
package/scss/forms/_floating-labels.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  > label {
13
13
  position: absolute;
14
14
  top: 0;
15
- left: 0;
15
+ @include ltr-rtl("left", 0);
16
16
  z-index: 2;
17
17
  height: 100%; // allow textareas
18
18
  padding: $form-floating-padding-y $form-floating-padding-x;
@@ -84,7 +84,8 @@
84
84
  }
85
85
  }
86
86
 
87
- > :disabled ~ label {
87
+ > :disabled ~ label,
88
+ > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
88
89
  color: $form-floating-label-disabled-color;
89
90
 
90
91
  &::after {
package/scss/forms/_form-check.scss CHANGED
@@ -15,14 +15,14 @@
15
15
  }
16
16
 
17
17
  .form-check-reverse {
18
- padding-right: $form-check-padding-start;
19
- padding-left: 0;
20
- text-align: right;
18
+ @include ltr-rtl("padding-right", $form-check-padding-start);
19
+ @include ltr-rtl("padding-left", 0);
20
+ @include ltr-rtl("text-align", right);
21
21
 
22
22
  .form-check-input {
23
- float: right;
24
- margin-right: $form-check-padding-start * -1;
25
- margin-left: 0;
23
+ @include ltr-rtl("float", right);
24
+ @include ltr-rtl("margin-right", $form-check-padding-start * -1);
25
+ @include ltr-rtl("margin-left", 0);
26
26
  }
27
27
  }
28
28
 
@@ -33,13 +33,13 @@
33
33
  height: $form-check-input-width;
34
34
  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
35
35
  vertical-align: top;
36
+ appearance: none;
36
37
  background-color: var(--#{$prefix}form-check-bg);
37
38
  background-image: var(--#{$prefix}form-check-bg-image);
38
39
  background-repeat: no-repeat;
39
40
  background-position: center;
40
41
  background-size: contain;
41
42
  border: $form-check-input-border;
42
- appearance: none;
43
43
  print-color-adjust: exact; // Keep themed appearance for print
44
44
  @include transition($form-check-transition);
45
45
 
@@ -127,7 +127,7 @@
127
127
  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
128
128
 
129
129
  width: $form-switch-width;
130
- margin-left: $form-switch-padding-start * -1;
130
+ @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
131
131
  background-image: var(--#{$prefix}form-switch-bg);
132
132
  background-position: left center;
133
133
  @include border-radius($form-switch-border-radius);
@@ -149,12 +149,12 @@
149
149
  }
150
150
 
151
151
  &.form-check-reverse {
152
- padding-right: $form-switch-padding-start;
153
- padding-left: 0;
152
+ @include ltr-rtl("padding-right", $form-check-padding-start);
153
+ @include ltr-rtl("padding-left", 0);
154
154
 
155
155
  .form-check-input {
156
- margin-right: $form-switch-padding-start * -1;
157
- margin-left: 0;
156
+ @include ltr-rtl("margin-right", $form-check-padding-start * -1);
157
+ @include ltr-rtl("margin-left", 0);
158
158
  }
159
159
  }
160
160
  }
package/scss/forms/_form-control.scss CHANGED
@@ -11,10 +11,10 @@
11
11
  font-weight: $input-font-weight;
12
12
  line-height: $input-line-height;
13
13
  color: $input-color;
14
+ appearance: none; // Fix appearance for date inputs in Safari
14
15
  background-color: $input-bg;
15
16
  background-clip: padding-box;
16
17
  border: $input-border-width solid $input-border-color;
17
- appearance: none; // Fix appearance for date inputs in Safari
18
18
 
19
19
  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
20
20
  @include border-radius($input-border-radius, 0);
package/scss/forms/_form-range.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  width: 100%;
9
9
  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
10
10
  padding: 0; // Need to reset padding
11
- background-color: transparent;
12
11
  appearance: none;
12
+ background-color: transparent;
13
13
 
14
14
  &:focus {
15
15
  outline: 0;
@@ -28,12 +28,12 @@
28
28
  width: $form-range-thumb-width;
29
29
  height: $form-range-thumb-height;
30
30
  margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
31
+ appearance: none;
31
32
  @include gradient-bg($form-range-thumb-bg);
32
33
  border: $form-range-thumb-border;
33
34
  @include border-radius($form-range-thumb-border-radius);
34
35
  @include box-shadow($form-range-thumb-box-shadow);
35
36
  @include transition($form-range-thumb-transition);
36
- appearance: none;
37
37
 
38
38
  &:active {
39
39
  @include gradient-bg($form-range-thumb-active-bg);
@@ -54,12 +54,12 @@
54
54
  &::-moz-range-thumb {
55
55
  width: $form-range-thumb-width;
56
56
  height: $form-range-thumb-height;
57
+ appearance: none;
57
58
  @include gradient-bg($form-range-thumb-bg);
58
59
  border: $form-range-thumb-border;
59
60
  @include border-radius($form-range-thumb-border-radius);
60
61
  @include box-shadow($form-range-thumb-box-shadow);
61
62
  @include transition($form-range-thumb-transition);
62
- appearance: none;
63
63
 
64
64
  &:active {
65
65
  @include gradient-bg($form-range-thumb-active-bg);
package/scss/forms/_form-select.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  font-weight: $form-select-font-weight;
15
15
  line-height: $form-select-line-height;
16
16
  color: $form-select-color;
17
+ appearance: none;
17
18
  background-color: $form-select-bg;
18
19
  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
19
20
  background-repeat: no-repeat;
@@ -23,7 +24,6 @@
23
24
  @include border-radius($form-select-border-radius, 0);
24
25
  @include box-shadow($form-select-box-shadow);
25
26
  @include transition($form-select-transition);
26
- appearance: none;
27
27
 
28
28
  &:focus {
29
29
  border-color: var($form-select-focus-border-color);
package/scss/helpers/_color-bg.scss CHANGED
@@ -1,9 +1,8 @@
1
1
  // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
2
2
  @each $color, $value in $theme-colors {
3
- $color-rgb: to-rgb($value);
4
3
  .text-bg-#{$color} {
5
4
  color: color-contrast($value) if($enable-important-utilities, !important, null);
6
- background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
5
+ background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
7
6
  }
8
7
  }
9
8
 
package/scss/helpers/_vr.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .vr {
2
2
  display: inline-block;
3
3
  align-self: stretch;
4
- width: 1px;
4
+ width: $vr-border-width;
5
5
  min-height: 1em;
6
6
  padding: 0;
7
7
  background-color: currentcolor;
package/scss/mixins/_banner.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @mixin bsBanner($file) {
2
2
  /*!
3
- * CoreUI #{$file} v5.0.0-alpha.1 (https://coreui.io)
3
+ * CoreUI #{$file} v5.0.0-alpha.2 (https://coreui.io)
4
4
  * Copyright (c) 2023 creativeLabs Łukasz Holeczek
5
5
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
6
6
  */