@open-rlb/ng-bootstrap 3.1.15 → 3.1.16

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 (5) hide show
  1. package/assets/scss/_variables-dark.scss +16 -1
  2. package/assets/scss/_variables.scss +12 -10
  3. package/assets/scss/custom/components/_card.scss +4 -4
  4. package/assets/scss/custom/components/_dropdown.scss +4 -14
  5. package/package.json +1 -1
package/assets/scss/_variables-dark.scss CHANGED
@@ -48,7 +48,7 @@ $body-tertiary-color-dark: #f6f6f6;
48
48
  $body-tertiary-bg-dark: #32394e;
49
49
  $body-emphasis-color-dark: $white;
50
50
  $border-color-dark: #32394e;
51
- $border-color-translucent-dark: #353d55;
51
+ $border-color-translucent-dark: rgba(255, 255, 255, 0.1);
52
52
  $headings-color-dark: #f6f6f6;
53
53
  $link-color-dark: $primary;
54
54
  $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
@@ -64,6 +64,7 @@ $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://w
64
64
 
65
65
  $form-switch-color-dark: rgba($white, .25);
66
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);
67
68
 
68
69
  // scss-docs-start form-validation-colors-dark
69
70
  $form-valid-color-dark: $green-300;
@@ -105,6 +106,8 @@ $menu-item-active-color-dark: #556ee6;
105
106
 
106
107
  $boxed-body-bg-dark: #32394f;
107
108
 
109
+ // Table
110
+ $table-dark-border-color: tint-color($gray-800, 7.5%);
108
111
 
109
112
  // Display
110
113
  $display-none-dark: block;
@@ -112,3 +115,15 @@ $display-block-dark: none;
112
115
 
113
116
  $card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
114
117
  $input-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
118
+
119
+ // OVERRIDES
120
+ $card-bg: var(--#{$prefix}secondary-bg);
121
+ $card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); // Stronger shadow for dark mode
122
+ $card-border-width: 0;
123
+ $table-head-bg: $body-tertiary-bg-dark; // Darker header for tables
124
+ $input-bg: rgba(255, 255, 255, 0.05); // Glass effect
125
+ $input-border-color: rgba(255, 255, 255, 0.1);
126
+
127
+ $sidebar-dark-bg: $body-secondary-bg-dark;
128
+ $sidebar-dark-menu-item-color: #a6b0cf;
129
+ $sidebar-dark-menu-item-active-color: #ffffff;
package/assets/scss/_variables.scss CHANGED
@@ -82,6 +82,8 @@ $apex-grid-color: var(--#{$prefix}border-color
82
82
 
83
83
  // table
84
84
  $table-head-bg: $gray-100;
85
+ $table-head-bg: #eff2f7; // Distinct light gray
86
+ //$table-head-color: $body-color;
85
87
  $table-dark-border-color: tint-color($gray-800, 7.5%);
86
88
 
87
89
 
@@ -522,7 +524,7 @@ $position-values: (
522
524
  //
523
525
  // Settings for the `<body>` element.
524
526
 
525
- $body-bg: #f8f8fb;
527
+ $body-bg: #f3f4f6;
526
528
  $body-color: $gray-700;
527
529
  $body-text-align: null;
528
530
 
@@ -913,7 +915,7 @@ $btn-font-size-lg: $input-btn-font-size-lg;
913
915
 
914
916
  $btn-border-width: $input-btn-border-width;
915
917
 
916
- $btn-font-weight: $font-weight-normal;
918
+ $btn-font-weight: $font-weight-medium;
917
919
  $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
918
920
  $btn-focus-width: $input-btn-focus-width;
919
921
  $btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
@@ -956,7 +958,7 @@ $form-text-color: var(--#{$prefix}secondary-color);
956
958
  $form-label-margin-bottom: .5rem;
957
959
  $form-label-font-size: null;
958
960
  $form-label-font-style: null;
959
- $form-label-font-weight: null;
961
+ $form-label-font-weight: $font-weight-medium;
960
962
  $form-label-color: null;
961
963
  // scss-docs-end form-label-variables
962
964
 
@@ -991,10 +993,10 @@ $input-border-radius-sm: var(--#{$prefix}border-radius-sm);
991
993
  $input-border-radius-lg: var(--#{$prefix}border-radius-lg);
992
994
 
993
995
  $input-focus-bg: $input-bg;
994
- $input-focus-border-color: rgb(var(--#{$prefix}body-color-rgb), 0.2);
996
+ $input-focus-border-color: $primary;
995
997
  $input-focus-color: $input-color;
996
998
  $input-focus-width: $input-btn-focus-width;
997
- $input-focus-box-shadow: none;
999
+ $input-focus-box-shadow: 0 0 0 0.15rem rgba($primary, 0.25);
998
1000
 
999
1001
  $input-placeholder-color: var(--#{$prefix}secondary-color);
1000
1002
  $input-plaintext-color: var(--#{$prefix}body-color);
@@ -1320,11 +1322,11 @@ $dropdown-color: var(--#{$prefix}body-color);
1320
1322
  $dropdown-bg: var(--#{$prefix}secondary-bg);
1321
1323
  $dropdown-border-color: var(--#{$prefix}border-color);
1322
1324
  $dropdown-border-radius: var(--#{$prefix}border-radius);
1323
- $dropdown-border-width: 0;
1325
+ $dropdown-border-width: 1px;
1324
1326
  $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width});
1325
1327
  $dropdown-divider-bg: $dropdown-border-color;
1326
1328
  $dropdown-divider-margin-y: $spacer * .5;
1327
- $dropdown-box-shadow: $box-shadow;
1329
+ $dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
1328
1330
 
1329
1331
  $dropdown-link-color: var(--#{$prefix}body-color);
1330
1332
  $dropdown-link-hover-color: var(--#{$prefix}emphasis-color);
@@ -1420,10 +1422,10 @@ $card-spacer-x: 1.5rem;
1420
1422
  $card-title-spacer-y: $spacer * .5;
1421
1423
  $card-title-color: var(--#{$prefix}emphasis-color);
1422
1424
  $card-subtitle-color: null;
1423
- $card-border-width: 0;
1424
- $card-border-color: var(--#{$prefix}border-color);
1425
+ $card-border-width: 1px;
1426
+ $card-border-color: rgba($gray-200, 0.5);
1425
1427
  $card-border-radius: 1rem; // Soft bubbly cards
1426
- $card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
1428
+ $card-box-shadow: 0 4px 6px rgba(18, 38, 63, 0.03), 0 1px 3px rgba(18, 38, 63, 0.05);
1427
1429
  $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
1428
1430
  $card-cap-padding-y: $card-spacer-y * .5;
1429
1431
  $card-cap-padding-x: $card-spacer-x;
package/assets/scss/custom/components/_card.scss CHANGED
@@ -1,10 +1,10 @@
1
- //
1
+ //
2
2
  // _card.scss
3
- //
3
+ //
4
4
 
5
5
  .card {
6
6
  margin-bottom: $grid-gutter-width;
7
- box-shadow: $box-shadow;
7
+ box-shadow: $card-box-shadow;
8
8
  }
9
9
 
10
10
  .card-drop {
@@ -21,4 +21,4 @@
21
21
  .card-title-desc {
22
22
  color: var(--#{$prefix}secondary-color);
23
23
  margin-bottom: 24px;
24
- }
24
+ }
package/assets/scss/custom/components/_dropdown.scss CHANGED
@@ -2,19 +2,9 @@
2
2
  // _dropdown.scss
3
3
  //
4
4
 
5
- //.dropdown-menu {
6
- // box-shadow: $box-shadow-lg;
7
- // animation-name: DropDownSlide;
8
- // animation-duration: 0.3s;
9
- // animation-fill-mode: both;
10
- // margin: 0;
11
- // position: absolute;
12
- // z-index: 1000;
13
- //
14
- // &.show {
15
- // top: 100% !important;
16
- // }
17
- //}
5
+ .dropdown-menu {
6
+ box-shadow: $dropdown-box-shadow;
7
+ }
18
8
 
19
9
 
20
10
  //.dropdown-menu-end[style] {
@@ -99,4 +89,4 @@
99
89
  // force inline styles to have bootstrap-like behavior
100
90
  rlb-dropdown {
101
91
  display: inline-block;
102
- }
92
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-rlb/ng-bootstrap",
3
- "version": "3.1.15",
3
+ "version": "3.1.16",
4
4
  "peerDependencies": {
5
5
  "bootstrap": ">=5.3.0",
6
6
  "@types/bootstrap": ">5.2.0",