@open-rlb/ng-bootstrap 3.1.14 → 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.
- package/assets/scss/_custom.scss +3 -3
- package/assets/scss/_variables-dark.scss +16 -1
- package/assets/scss/_variables.scss +13 -11
- package/assets/scss/custom/components/_card.scss +4 -4
- package/assets/scss/custom/components/_dropdown.scss +4 -14
- package/assets/scss/custom/structure/_vertical.scss +57 -46
- package/package.json +1 -1
package/assets/scss/_custom.scss
CHANGED
|
@@ -458,12 +458,12 @@ a.ck.ck-button.ck-on {
|
|
|
458
458
|
rlb-dt-table.dt-card-style {
|
|
459
459
|
display: block;
|
|
460
460
|
margin-bottom: 1.5rem;
|
|
461
|
-
|
|
462
461
|
.table-responsive {
|
|
463
462
|
box-shadow: $card-box-shadow;
|
|
464
463
|
border-radius: $card-border-radius;
|
|
465
464
|
background-color: var(--bs-secondary-bg, var(--bs-body-bg));
|
|
466
465
|
border: 1px solid var(--bs-border-color-translucent);
|
|
466
|
+
padding: 1rem;
|
|
467
467
|
}
|
|
468
468
|
|
|
469
469
|
.table {
|
|
@@ -487,13 +487,13 @@ rlb-dt-table.dt-card-style {
|
|
|
487
487
|
tfoot tr:last-child td:first-child,
|
|
488
488
|
tbody:last-child tr:last-child td:first-child {
|
|
489
489
|
border-bottom-left-radius: $card-inner-border-radius;
|
|
490
|
-
border-bottom: 0;
|
|
490
|
+
//border-bottom: 0;
|
|
491
491
|
}
|
|
492
492
|
|
|
493
493
|
tfoot tr:last-child td:last-child,
|
|
494
494
|
tbody:last-child tr:last-child td:last-child {
|
|
495
495
|
border-bottom-right-radius: $card-inner-border-radius;
|
|
496
|
-
border-bottom: 0;
|
|
496
|
+
//border-bottom: 0;
|
|
497
497
|
}
|
|
498
498
|
}
|
|
499
499
|
}
|
|
@@ -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:
|
|
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;
|
|
@@ -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: #
|
|
527
|
+
$body-bg: #f3f4f6;
|
|
526
528
|
$body-color: $gray-700;
|
|
527
529
|
$body-text-align: null;
|
|
528
530
|
|
|
@@ -701,7 +703,7 @@ $font-family-code: var(--#{$prefix}font-monospace);
|
|
|
701
703
|
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
|
|
702
704
|
// $font-size-base effects the font size of the body text
|
|
703
705
|
$font-size-root: null;
|
|
704
|
-
$font-size-base:
|
|
706
|
+
$font-size-base: 0.9rem;
|
|
705
707
|
$font-size-sm: $font-size-base * .875;
|
|
706
708
|
$font-size-lg: $font-size-base * 1.25;
|
|
707
709
|
|
|
@@ -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-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
1424
|
-
$card-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
|
|
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;
|
|
@@ -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
|
+
}
|
|
@@ -2,19 +2,9 @@
|
|
|
2
2
|
// _dropdown.scss
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
+
}
|
|
@@ -3,52 +3,67 @@
|
|
|
3
3
|
// _menu.scss
|
|
4
4
|
//
|
|
5
5
|
|
|
6
|
+
// ==========================================
|
|
7
|
+
// 1. Sidebar Configuration (The "Bridge")
|
|
8
|
+
// ==========================================
|
|
9
|
+
// We map global theme variables to sidebar specific variables here.
|
|
10
|
+
|
|
11
|
+
// Spacing
|
|
12
|
+
$sidebar-padding-y: $spacer;
|
|
13
|
+
$menu-item-padding-y: $nav-link-padding-y;
|
|
14
|
+
$menu-item-padding-x: 1.5rem;
|
|
15
|
+
$menu-item-margin-y: 2px;
|
|
16
|
+
|
|
17
|
+
// Typography
|
|
18
|
+
$menu-item-font-size: $font-size-base;
|
|
19
|
+
$menu-item-icon-size: $font-size-lg;
|
|
20
|
+
$submenu-font-size: $font-size-sm;
|
|
21
|
+
$submenu-level-2-font-size: $font-size-sm;
|
|
22
|
+
|
|
23
|
+
// Indentation logic
|
|
24
|
+
$submenu-indent-base: $menu-item-padding-x;
|
|
25
|
+
$submenu-indent-step: 1.25rem; // How much to indent per level
|
|
26
|
+
|
|
6
27
|
rlb-sidebar {
|
|
7
28
|
--rlb-sidebar-width: #{$sidebar-width};
|
|
8
|
-
--rlb-item-padding-x: 1.5rem;
|
|
9
|
-
--rlb-item-padding-y: 0.625rem;
|
|
10
29
|
|
|
11
|
-
|
|
12
|
-
--
|
|
30
|
+
// SYNC: Mapped to variables above
|
|
31
|
+
--rlb-item-padding-x: #{$menu-item-padding-x};
|
|
32
|
+
--rlb-item-padding-y: #{$menu-item-padding-y};
|
|
33
|
+
|
|
34
|
+
--bs-body-color: #{$body-color}; // SYNC: Use global body color variable
|
|
35
|
+
--bs-body-bg: #{$white};
|
|
36
|
+
|
|
13
37
|
color: var(--bs-body-color);
|
|
14
38
|
|
|
15
39
|
&[data-bs-theme="light"] {
|
|
16
|
-
--rlb-sidebar-bg: #
|
|
40
|
+
--rlb-sidebar-bg: #{$sidebar-bg};
|
|
17
41
|
--rlb-sidebar-border: #eff0f2;
|
|
18
|
-
|
|
19
|
-
--rlb-menu-item-color: #
|
|
20
|
-
--rlb-menu-item-
|
|
21
|
-
--rlb-menu-item-active-
|
|
22
|
-
|
|
23
|
-
--rlb-
|
|
24
|
-
|
|
25
|
-
--rlb-submenu-bg: #ffffff;
|
|
26
|
-
|
|
27
|
-
--rlb-scrollbar-thumb: #ced4da;
|
|
42
|
+
--rlb-menu-item-color: #{$sidebar-menu-item-color};
|
|
43
|
+
--rlb-menu-item-hover-color: #{$sidebar-menu-item-hover-color};
|
|
44
|
+
--rlb-menu-item-active-color: #{$sidebar-menu-item-active-color};
|
|
45
|
+
--rlb-menu-item-active-bg: #{$gray-100}; // SYNC: Used $gray-100 instead of hex
|
|
46
|
+
--rlb-submenu-bg: #{$sidebar-bg};
|
|
47
|
+
--rlb-scrollbar-thumb: #{$gray-400};
|
|
28
48
|
--rlb-scrollbar-track: transparent;
|
|
29
49
|
}
|
|
30
50
|
|
|
31
51
|
&[data-bs-theme="dark"] {
|
|
32
|
-
--rlb-sidebar-bg: #
|
|
52
|
+
--rlb-sidebar-bg: #{$sidebar-dark-bg};
|
|
33
53
|
--rlb-sidebar-border: #32394e;
|
|
34
|
-
|
|
35
|
-
--rlb-menu-item-color: #
|
|
36
|
-
--rlb-menu-item-
|
|
37
|
-
--rlb-menu-item-active-color:
|
|
38
|
-
|
|
39
|
-
--rlb-menu-item-active-bg: #{color.adjust(#2a3042, $lightness: 3%)};
|
|
40
|
-
|
|
41
|
-
--rlb-submenu-bg: #2a3042;
|
|
42
|
-
|
|
54
|
+
--rlb-menu-item-color: #{$sidebar-dark-menu-item-color};
|
|
55
|
+
--rlb-menu-item-hover-color: #{$sidebar-dark-menu-item-hover-color};
|
|
56
|
+
--rlb-menu-item-active-color: #{$sidebar-dark-menu-item-active-color};
|
|
57
|
+
--rlb-menu-item-active-bg: #{color.adjust($sidebar-dark-bg, $lightness: 3%)};
|
|
58
|
+
--rlb-submenu-bg: #{$sidebar-dark-bg};
|
|
43
59
|
--rlb-scrollbar-thumb: #5c6276;
|
|
44
60
|
--rlb-scrollbar-track: transparent;
|
|
45
61
|
}
|
|
46
62
|
}
|
|
47
63
|
|
|
48
64
|
#sidebar-menu {
|
|
49
|
-
padding:
|
|
65
|
+
padding: $sidebar-padding-y 0;
|
|
50
66
|
scrollbar-gutter: stable;
|
|
51
|
-
|
|
52
67
|
scrollbar-width: thin;
|
|
53
68
|
scrollbar-color: var(--rlb-scrollbar-thumb) var(--rlb-scrollbar-track);
|
|
54
69
|
|
|
@@ -82,16 +97,12 @@ rlb-sidebar {
|
|
|
82
97
|
&:after {
|
|
83
98
|
content: "\F0140";
|
|
84
99
|
font-family: 'Material Design Icons';
|
|
85
|
-
|
|
86
100
|
position: absolute;
|
|
87
101
|
right: 1rem;
|
|
88
102
|
top: 50%;
|
|
89
103
|
display: block;
|
|
90
104
|
font-size: 1.2rem;
|
|
91
|
-
|
|
92
|
-
// smoothly animate the transform
|
|
93
105
|
transition: transform 0.3s ease-in-out;
|
|
94
|
-
|
|
95
106
|
transform: translateY(-50%) rotate(0deg);
|
|
96
107
|
}
|
|
97
108
|
|
|
@@ -109,10 +120,11 @@ rlb-sidebar {
|
|
|
109
120
|
padding: var(--rlb-item-padding-y) var(--rlb-item-padding-x);
|
|
110
121
|
color: var(--rlb-menu-item-color);
|
|
111
122
|
position: relative;
|
|
112
|
-
|
|
123
|
+
|
|
124
|
+
font-size: $menu-item-font-size;
|
|
113
125
|
transition: all .4s;
|
|
114
126
|
|
|
115
|
-
margin:
|
|
127
|
+
margin: $menu-item-margin-y ($spacer * 0.3);
|
|
116
128
|
border-radius: $border-radius;
|
|
117
129
|
|
|
118
130
|
.menu-text {
|
|
@@ -120,7 +132,7 @@ rlb-sidebar {
|
|
|
120
132
|
white-space: nowrap;
|
|
121
133
|
overflow: hidden;
|
|
122
134
|
text-overflow: ellipsis;
|
|
123
|
-
margin-right: 0.
|
|
135
|
+
margin-right: ($spacer * 0.5);
|
|
124
136
|
}
|
|
125
137
|
|
|
126
138
|
i {
|
|
@@ -128,7 +140,8 @@ rlb-sidebar {
|
|
|
128
140
|
display: inline-block;
|
|
129
141
|
min-width: 1.75rem;
|
|
130
142
|
padding-bottom: .125em;
|
|
131
|
-
|
|
143
|
+
|
|
144
|
+
font-size: $menu-item-icon-size;
|
|
132
145
|
line-height: 1.40625rem;
|
|
133
146
|
vertical-align: middle;
|
|
134
147
|
color: inherit;
|
|
@@ -142,8 +155,6 @@ rlb-sidebar {
|
|
|
142
155
|
|
|
143
156
|
&:hover {
|
|
144
157
|
color: var(--rlb-menu-item-hover-color);
|
|
145
|
-
//background-color: rgba(255,255,255, 0.05);
|
|
146
|
-
|
|
147
158
|
i {
|
|
148
159
|
color: inherit;
|
|
149
160
|
}
|
|
@@ -158,7 +169,7 @@ rlb-sidebar {
|
|
|
158
169
|
&.mm-active > a {
|
|
159
170
|
color: var(--rlb-menu-item-active-color) !important;
|
|
160
171
|
background-color: var(--rlb-menu-item-active-bg);
|
|
161
|
-
font-weight:
|
|
172
|
+
font-weight: $font-weight-semibold;
|
|
162
173
|
|
|
163
174
|
i {
|
|
164
175
|
color: inherit !important;
|
|
@@ -176,8 +187,10 @@ rlb-sidebar {
|
|
|
176
187
|
flex-direction: column;
|
|
177
188
|
li {
|
|
178
189
|
a {
|
|
179
|
-
padding
|
|
180
|
-
|
|
190
|
+
// Calculate padding based on Base + Step
|
|
191
|
+
padding: 0.4rem $menu-item-padding-x 0.4rem ($submenu-indent-base + $submenu-indent-step);
|
|
192
|
+
|
|
193
|
+
font-size: $submenu-font-size;
|
|
181
194
|
color: var(--rlb-menu-item-color);
|
|
182
195
|
background-color: transparent;
|
|
183
196
|
|
|
@@ -195,8 +208,10 @@ rlb-sidebar {
|
|
|
195
208
|
padding: 0;
|
|
196
209
|
li {
|
|
197
210
|
a {
|
|
198
|
-
padding:
|
|
199
|
-
|
|
211
|
+
// Calculate padding: Base + (Step * 2)
|
|
212
|
+
padding: 0.4rem $menu-item-padding-x 0.4rem ($submenu-indent-base + ($submenu-indent-step * 2));
|
|
213
|
+
|
|
214
|
+
font-size: $submenu-level-2-font-size;
|
|
200
215
|
}
|
|
201
216
|
}
|
|
202
217
|
}
|
|
@@ -238,12 +253,8 @@ rlb-sidebar {
|
|
|
238
253
|
|
|
239
254
|
.vertical-menu {
|
|
240
255
|
width: inherit;
|
|
241
|
-
//z-index: 1001;
|
|
242
256
|
background: var(--rlb-sidebar-bg);
|
|
243
|
-
//bottom: 0;
|
|
244
257
|
margin-top: 0;
|
|
245
|
-
// position: fixed;
|
|
246
|
-
//top: $header-height;
|
|
247
258
|
box-shadow: $box-shadow;
|
|
248
259
|
height: 100%;
|
|
249
260
|
}
|