@open-rlb/ng-bootstrap 3.2.0 → 3.3.0

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 (8) hide show
  1. package/assets/scss/_custom.scss +2 -2
  2. package/assets/scss/_variables-dark.scss +67 -69
  3. package/assets/scss/_variables.scss +908 -908
  4. package/assets/scss/custom/components/_root.scss +19 -0
  5. package/fesm2022/open-rlb-ng-bootstrap.mjs +188 -112
  6. package/fesm2022/open-rlb-ng-bootstrap.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/types/open-rlb-ng-bootstrap.d.ts +10 -9
package/assets/scss/_custom.scss CHANGED
@@ -459,7 +459,7 @@ rlb-dt-table.dt-card-style {
459
459
  display: block;
460
460
  margin-bottom: 1.5rem;
461
461
  .table-responsive {
462
- box-shadow: $card-box-shadow;
462
+ box-shadow: var(--#{$prefix}card-box-shadow);
463
463
  border-radius: $card-border-radius;
464
464
  background-color: var(--bs-secondary-bg, var(--bs-body-bg));
465
465
  border: 1px solid var(--bs-border-color-translucent);
@@ -502,7 +502,7 @@ rlb-accordion.accordion-card-style {
502
502
  display: block; // Required for the box-shadow to render on a custom element
503
503
 
504
504
  // Give the wrapper the card shadow and radius
505
- box-shadow: $card-box-shadow;
505
+ box-shadow: var(--#{$prefix}card-box-shadow);
506
506
  border-radius: $card-border-radius;
507
507
 
508
508
  // Feed the Card variables directly into Bootstrap's Accordion Engine!
package/assets/scss/_variables-dark.scss CHANGED
@@ -8,69 +8,69 @@
8
8
 
9
9
  // scss-docs-start sass-dark-mode-vars
10
10
  // scss-docs-start theme-text-dark-variables
11
- $primary-text-emphasis-dark: tint-color($primary, 40%);
12
- $secondary-text-emphasis-dark: tint-color($secondary, 40%);
13
- $success-text-emphasis-dark: tint-color($success, 40%);
14
- $info-text-emphasis-dark: tint-color($info, 40%);
15
- $warning-text-emphasis-dark: tint-color($warning, 40%);
16
- $danger-text-emphasis-dark: tint-color($danger, 40%);
17
- $light-text-emphasis-dark: $gray-100;
18
- $dark-text-emphasis-dark: $gray-300;
11
+ $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
12
+ $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
13
+ $success-text-emphasis-dark: tint-color($success, 40%) !default;
14
+ $info-text-emphasis-dark: tint-color($info, 40%) !default;
15
+ $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
16
+ $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
17
+ $light-text-emphasis-dark: $gray-100 !default;
18
+ $dark-text-emphasis-dark: $gray-300 !default;
19
19
  // scss-docs-end theme-text-dark-variables
20
20
 
21
21
  // scss-docs-start theme-bg-subtle-dark-variables
22
- $primary-bg-subtle-dark: rgba($primary, 0.25);
23
- $secondary-bg-subtle-dark: rgba($secondary, 0.25);
24
- $success-bg-subtle-dark: rgba($success, 0.25);
25
- $info-bg-subtle-dark: rgba($info, 0.25);
26
- $warning-bg-subtle-dark: rgba($warning, 0.25);
27
- $danger-bg-subtle-dark: rgba($danger, 0.25);
28
- $light-bg-subtle-dark: $gray-800;
29
- $dark-bg-subtle-dark: rgba($dark, 0.25);
22
+ $primary-bg-subtle-dark: rgba($primary, 0.25) !default;
23
+ $secondary-bg-subtle-dark: rgba($secondary, 0.25) !default;
24
+ $success-bg-subtle-dark: rgba($success, 0.25) !default;
25
+ $info-bg-subtle-dark: rgba($info, 0.25) !default;
26
+ $warning-bg-subtle-dark: rgba($warning, 0.25) !default;
27
+ $danger-bg-subtle-dark: rgba($danger, 0.25) !default;
28
+ $light-bg-subtle-dark: $gray-800 !default;
29
+ $dark-bg-subtle-dark: rgba($dark, 0.25) !default;
30
30
  // scss-docs-end theme-bg-subtle-dark-variables
31
31
 
32
32
  // scss-docs-start theme-border-subtle-dark-variables
33
- $primary-border-subtle-dark: shade-color($primary, 40%);
34
- $secondary-border-subtle-dark: shade-color($secondary, 40%);
35
- $success-border-subtle-dark: shade-color($success, 40%);
36
- $info-border-subtle-dark: shade-color($info, 40%);
37
- $warning-border-subtle-dark: shade-color($warning, 40%);
38
- $danger-border-subtle-dark: shade-color($danger, 40%);
39
- $light-border-subtle-dark: $gray-700;
40
- $dark-border-subtle-dark: $gray-800;
33
+ $primary-border-subtle-dark: shade-color($primary, 40%) !default;
34
+ $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
35
+ $success-border-subtle-dark: shade-color($success, 40%) !default;
36
+ $info-border-subtle-dark: shade-color($info, 40%) !default;
37
+ $warning-border-subtle-dark: shade-color($warning, 40%) !default;
38
+ $danger-border-subtle-dark: shade-color($danger, 40%) !default;
39
+ $light-border-subtle-dark: $gray-700 !default;
40
+ $dark-border-subtle-dark: $gray-800 !default;
41
41
  // scss-docs-end theme-border-subtle-dark-variables
42
42
 
43
- $body-color-dark: #a6b0cf;
44
- $body-bg-dark: #222736;
45
- $body-secondary-color-dark: #c3cbe4;
46
- $body-secondary-bg-dark: #2a3042;
47
- $body-tertiary-color-dark: #f6f6f6;
48
- $body-tertiary-bg-dark: #32394e;
49
- $body-emphasis-color-dark: $white;
50
- $border-color-dark: #32394e;
51
- $border-color-translucent-dark: rgba(255, 255, 255, 0.1);
52
- $headings-color-dark: #f6f6f6;
53
- $link-color-dark: $primary;
54
- $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
55
- $code-color-dark: $code-color;
43
+ $body-color-dark: #a6b0cf !default;
44
+ $body-bg-dark: #222736 !default;
45
+ $body-secondary-color-dark: #c3cbe4 !default;
46
+ $body-secondary-bg-dark: #2a3042 !default;
47
+ $body-tertiary-color-dark: #f6f6f6 !default;
48
+ $body-tertiary-bg-dark: #32394e !default;
49
+ $body-emphasis-color-dark: $white !default;
50
+ $border-color-dark: #32394e !default;
51
+ $border-color-translucent-dark: rgba(255, 255, 255, 0.1) !default;
52
+ $headings-color-dark: #f6f6f6 !default;
53
+ $link-color-dark: $primary !default;
54
+ $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
55
+ $code-color-dark: $code-color !default;
56
56
 
57
57
 
58
58
  //
59
59
  // Forms
60
60
  //
61
61
 
62
- $form-select-indicator-color-dark: $body-color-dark;
63
- $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
62
+ $form-select-indicator-color-dark: $body-color-dark !default;
63
+ $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
64
64
 
65
- $form-switch-color-dark: rgba($white, .25);
66
- $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
67
- $input-border-color: var(--#{$prefix}border-color-translucent);
65
+ $form-switch-color-dark: rgba($white, .25) !default;
66
+ $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
67
+ $input-border-color: var(--#{$prefix}border-color-translucent) !default;
68
68
 
69
69
  // scss-docs-start form-validation-colors-dark
70
- $form-valid-color-dark: $green-300;
71
- $form-valid-border-color-dark: $green-300;
72
- $form-invalid-color-dark: $red-300;
73
- $form-invalid-border-color-dark: $red-300;
70
+ $form-valid-color-dark: $green-300 !default;
71
+ $form-valid-border-color-dark: $green-300 !default;
72
+ $form-invalid-color-dark: $red-300 !default;
73
+ $form-invalid-border-color-dark: $red-300 !default;
74
74
  // scss-docs-end form-validation-colors-dark
75
75
 
76
76
 
@@ -78,43 +78,41 @@ $form-invalid-border-color-dark: $red-300;
78
78
  // Accordion
79
79
  //
80
80
 
81
- $accordion-icon-color-dark: $primary-text-emphasis-dark;
82
- $accordion-icon-active-color-dark: $primary-text-emphasis-dark;
81
+ $accordion-icon-color-dark: $primary-text-emphasis-dark !default;
82
+ $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
83
83
 
84
- $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><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>");
85
- $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><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>");
84
+ $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><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;
85
+ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><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;
86
86
  // scss-docs-end sass-dark-mode-vars
87
87
 
88
88
  /* =============================Custom Variables========================== */
89
89
 
90
- $header-bg-dark: #262b3c;
91
- $header-item-color-dark: #a6b0cf;
90
+ $header-bg-dark: #262b3c !default;
91
+ $header-item-color-dark: #a6b0cf !default;
92
92
 
93
93
  //topbra dark
94
- $header-dark-bg-dark: $primary;
95
- $header-dark-item-color-dark: #e9ecef;
96
- $topbar-search-bg-dark: #2a3042;
94
+ $header-dark-bg-dark: $primary !default;
95
+ $header-dark-item-color-dark: #e9ecef !default;
96
+ $topbar-search-bg-dark: #2a3042 !default;
97
97
 
98
98
  // Footer
99
- $footer-bg-dark: #262b3c;
100
- $footer-color-dark: #a6b0cf;
99
+ $footer-bg-dark: #262b3c !default;
100
+ $footer-color-dark: #a6b0cf !default;
101
101
 
102
102
  // Horizontal nav
103
- $topnav-bg-dark: #282e3f;
104
- $menu-item-color-dark: #a6b0cf;
105
- $menu-item-active-color-dark: #556ee6;
103
+ $topnav-bg-dark: #282e3f !default;
104
+ $menu-item-color-dark: #a6b0cf !default;
105
+ $menu-item-active-color-dark: #556ee6 !default;
106
106
 
107
- $boxed-body-bg-dark: #32394f;
107
+ $boxed-body-bg-dark: #32394f !default;
108
108
 
109
109
  // Table
110
- $table-dark-border-color: tint-color($gray-800, 7.5%);
110
+ $table-dark-border-color: tint-color($gray-800, 7.5%) !default;
111
111
 
112
112
  // Display
113
- $display-none-dark: block;
114
- $display-block-dark: none;
113
+ $display-none-dark: block !default;
114
+ $display-block-dark: none !default;
115
115
 
116
- $card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
117
- $input-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
118
116
 
119
117
  // OVERRIDES
120
118
  $card-bg: var(--#{$prefix}secondary-bg);
@@ -124,6 +122,6 @@ $table-head-bg: $body-tertiary-bg-dark; // Darker header for
124
122
  $input-bg: rgba(255, 255, 255, 0.05); // Glass effect
125
123
  $input-border-color: rgba(255, 255, 255, 0.1);
126
124
 
127
- $sidebar-dark-bg: $body-secondary-bg-dark;
128
- $sidebar-dark-menu-item-color: #a6b0cf;
129
- $sidebar-dark-menu-item-active-color: #ffffff;
125
+ $sidebar-dark-bg: $body-secondary-bg-dark !default;
126
+ $sidebar-dark-menu-item-color: #a6b0cf !default;
127
+ $sidebar-dark-menu-item-active-color: #ffffff !default;