@rhavenside/baseline-ui 1.0.20 → 1.0.21
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/dist/baseline.css +155 -12
- package/dist/baseline.css.map +1 -1
- package/dist/baseline.min.css +1 -1
- package/package.json +1 -1
- package/src/components/_sidebar.scss +180 -12
package/dist/baseline.css
CHANGED
|
@@ -4871,8 +4871,26 @@ textarea {
|
|
|
4871
4871
|
box-shadow: var(--glass-shadow-lg);
|
|
4872
4872
|
transform: translateX(-100%);
|
|
4873
4873
|
transition: transform var(--transition-duration-slow) var(--transition-ease-out);
|
|
4874
|
-
overflow
|
|
4875
|
-
|
|
4874
|
+
overflow: hidden;
|
|
4875
|
+
}
|
|
4876
|
+
.bl-sidebar::-webkit-scrollbar {
|
|
4877
|
+
width: 6px;
|
|
4878
|
+
}
|
|
4879
|
+
.bl-sidebar::-webkit-scrollbar-track {
|
|
4880
|
+
background: transparent;
|
|
4881
|
+
}
|
|
4882
|
+
.bl-sidebar::-webkit-scrollbar-thumb {
|
|
4883
|
+
background: var(--glass-bg-medium);
|
|
4884
|
+
border-radius: 3px;
|
|
4885
|
+
border: 1px solid var(--glass-border-light);
|
|
4886
|
+
}
|
|
4887
|
+
.bl-sidebar::-webkit-scrollbar-thumb:hover {
|
|
4888
|
+
background: var(--glass-bg-heavy);
|
|
4889
|
+
border-color: var(--glass-border-medium);
|
|
4890
|
+
}
|
|
4891
|
+
.bl-sidebar {
|
|
4892
|
+
scrollbar-width: thin;
|
|
4893
|
+
scrollbar-color: var(--glass-bg-medium) transparent;
|
|
4876
4894
|
}
|
|
4877
4895
|
@media (min-width: 768px) {
|
|
4878
4896
|
.bl-sidebar {
|
|
@@ -4892,11 +4910,19 @@ textarea {
|
|
|
4892
4910
|
width: 64px;
|
|
4893
4911
|
}
|
|
4894
4912
|
.bl-sidebar.bl-sidebar-collapsed .bl-sidebar-header h3,
|
|
4895
|
-
.bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon)
|
|
4913
|
+
.bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
|
|
4914
|
+
.bl-sidebar.bl-sidebar-collapsed .bl-nav-group-header {
|
|
4896
4915
|
opacity: 0;
|
|
4897
4916
|
width: 0;
|
|
4898
4917
|
overflow: hidden;
|
|
4899
4918
|
}
|
|
4919
|
+
.bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link {
|
|
4920
|
+
justify-content: center;
|
|
4921
|
+
padding: var(--spacing-sm);
|
|
4922
|
+
}
|
|
4923
|
+
.bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link .bl-icon {
|
|
4924
|
+
margin: 0;
|
|
4925
|
+
}
|
|
4900
4926
|
}
|
|
4901
4927
|
.bl-sidebar.bl-sidebar-right {
|
|
4902
4928
|
left: auto;
|
|
@@ -4963,19 +4989,27 @@ textarea {
|
|
|
4963
4989
|
display: flex;
|
|
4964
4990
|
align-items: center;
|
|
4965
4991
|
justify-content: space-between;
|
|
4966
|
-
padding: var(--spacing-md);
|
|
4967
|
-
border-bottom: 1px solid var(--glass-border-
|
|
4992
|
+
padding: var(--spacing-lg) var(--spacing-md);
|
|
4993
|
+
border-bottom: 1px solid var(--glass-border-medium);
|
|
4968
4994
|
background: var(--glass-bg-light);
|
|
4969
4995
|
backdrop-filter: blur(var(--glass-blur-sm));
|
|
4970
4996
|
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
|
4997
|
+
flex-shrink: 0;
|
|
4971
4998
|
}
|
|
4972
4999
|
.bl-sidebar-header h3 {
|
|
4973
5000
|
margin: 0;
|
|
4974
|
-
font-size: var(--font-size-
|
|
4975
|
-
font-weight: var(--font-weight-
|
|
5001
|
+
font-size: var(--font-size-xl);
|
|
5002
|
+
font-weight: var(--font-weight-bold);
|
|
4976
5003
|
color: var(--color-text);
|
|
5004
|
+
line-height: var(--line-height-tight);
|
|
4977
5005
|
transition: var(--transition-base);
|
|
4978
5006
|
}
|
|
5007
|
+
.bl-sidebar-header .bl-sidebar-version {
|
|
5008
|
+
font-size: var(--font-size-xs);
|
|
5009
|
+
color: var(--color-text-muted);
|
|
5010
|
+
font-weight: var(--font-weight-normal);
|
|
5011
|
+
margin-top: var(--spacing-xs);
|
|
5012
|
+
}
|
|
4979
5013
|
|
|
4980
5014
|
.bl-sidebar-close {
|
|
4981
5015
|
display: inline-flex;
|
|
@@ -5012,10 +5046,34 @@ textarea {
|
|
|
5012
5046
|
|
|
5013
5047
|
.bl-sidebar-nav {
|
|
5014
5048
|
flex: 1;
|
|
5015
|
-
padding: var(--spacing-
|
|
5049
|
+
padding: var(--spacing-md);
|
|
5016
5050
|
overflow-y: auto;
|
|
5017
5051
|
overflow-x: hidden;
|
|
5018
5052
|
}
|
|
5053
|
+
@media (max-width: 767.98px) {
|
|
5054
|
+
.bl-sidebar-nav {
|
|
5055
|
+
padding: var(--spacing-sm);
|
|
5056
|
+
}
|
|
5057
|
+
}
|
|
5058
|
+
.bl-sidebar-nav::-webkit-scrollbar {
|
|
5059
|
+
width: 6px;
|
|
5060
|
+
}
|
|
5061
|
+
.bl-sidebar-nav::-webkit-scrollbar-track {
|
|
5062
|
+
background: transparent;
|
|
5063
|
+
}
|
|
5064
|
+
.bl-sidebar-nav::-webkit-scrollbar-thumb {
|
|
5065
|
+
background: var(--glass-bg-medium);
|
|
5066
|
+
border-radius: 3px;
|
|
5067
|
+
border: 1px solid var(--glass-border-light);
|
|
5068
|
+
}
|
|
5069
|
+
.bl-sidebar-nav::-webkit-scrollbar-thumb:hover {
|
|
5070
|
+
background: var(--glass-bg-heavy);
|
|
5071
|
+
border-color: var(--glass-border-medium);
|
|
5072
|
+
}
|
|
5073
|
+
.bl-sidebar-nav {
|
|
5074
|
+
scrollbar-width: thin;
|
|
5075
|
+
scrollbar-color: var(--glass-bg-medium) transparent;
|
|
5076
|
+
}
|
|
5019
5077
|
.bl-sidebar-nav .bl-nav {
|
|
5020
5078
|
background: transparent;
|
|
5021
5079
|
border: none;
|
|
@@ -5024,26 +5082,111 @@ textarea {
|
|
|
5024
5082
|
.bl-sidebar-nav .bl-nav-link {
|
|
5025
5083
|
display: flex;
|
|
5026
5084
|
align-items: center;
|
|
5027
|
-
gap: var(--spacing-
|
|
5085
|
+
gap: var(--spacing-md);
|
|
5028
5086
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
5087
|
+
margin-bottom: var(--spacing-xs);
|
|
5029
5088
|
border-radius: var(--tech-border-radius-sm);
|
|
5030
5089
|
transition: var(--transition-base);
|
|
5090
|
+
position: relative;
|
|
5091
|
+
font-size: var(--font-size-base);
|
|
5092
|
+
line-height: var(--line-height-base);
|
|
5093
|
+
color: var(--color-text);
|
|
5094
|
+
text-decoration: none;
|
|
5095
|
+
min-height: 40px;
|
|
5096
|
+
}
|
|
5097
|
+
@media (max-width: 767.98px) {
|
|
5098
|
+
.bl-sidebar-nav .bl-nav-link {
|
|
5099
|
+
padding: var(--spacing-md);
|
|
5100
|
+
min-height: 44px;
|
|
5101
|
+
}
|
|
5031
5102
|
}
|
|
5032
5103
|
.bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
|
|
5033
5104
|
transition: var(--transition-base);
|
|
5105
|
+
flex: 1;
|
|
5034
5106
|
}
|
|
5035
5107
|
.bl-sidebar-nav .bl-nav-link .bl-icon {
|
|
5036
5108
|
flex-shrink: 0;
|
|
5037
|
-
width:
|
|
5038
|
-
height:
|
|
5109
|
+
width: 18px;
|
|
5110
|
+
height: 18px;
|
|
5111
|
+
color: var(--color-text-muted);
|
|
5112
|
+
transition: var(--transition-base);
|
|
5113
|
+
}
|
|
5114
|
+
.bl-sidebar-nav .bl-nav-link:hover {
|
|
5115
|
+
background: var(--glass-bg-light);
|
|
5116
|
+
color: var(--color-text);
|
|
5117
|
+
transform: translateX(2px);
|
|
5118
|
+
}
|
|
5119
|
+
.bl-sidebar-nav .bl-nav-link:hover .bl-icon {
|
|
5120
|
+
color: var(--color-text);
|
|
5121
|
+
}
|
|
5122
|
+
.bl-sidebar-nav .bl-nav-link:active {
|
|
5123
|
+
transform: translateX(1px);
|
|
5124
|
+
}
|
|
5125
|
+
.bl-sidebar-nav .bl-nav-link.bl-active {
|
|
5126
|
+
background: var(--glass-bg-medium);
|
|
5127
|
+
color: var(--color-text);
|
|
5128
|
+
font-weight: var(--font-weight-medium);
|
|
5129
|
+
padding-left: calc(var(--spacing-md) - 3px);
|
|
5130
|
+
transform: translateX(0);
|
|
5131
|
+
}
|
|
5132
|
+
.bl-sidebar-nav .bl-nav-link.bl-active::before {
|
|
5133
|
+
content: "";
|
|
5134
|
+
position: absolute;
|
|
5135
|
+
left: 0;
|
|
5136
|
+
top: 0;
|
|
5137
|
+
bottom: 0;
|
|
5138
|
+
width: 3px;
|
|
5139
|
+
background: var(--color-accent);
|
|
5140
|
+
border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
|
|
5141
|
+
}
|
|
5142
|
+
.bl-sidebar-nav .bl-nav-link.bl-active .bl-icon {
|
|
5143
|
+
color: var(--color-accent);
|
|
5144
|
+
}
|
|
5145
|
+
.bl-sidebar-nav .bl-nav-link.bl-active:hover {
|
|
5146
|
+
background: var(--glass-bg-heavy);
|
|
5147
|
+
transform: translateX(0);
|
|
5148
|
+
}
|
|
5149
|
+
.bl-sidebar-nav .bl-nav-link:focus {
|
|
5150
|
+
outline: 1px solid var(--color-border-focus);
|
|
5151
|
+
outline-offset: -2px;
|
|
5152
|
+
}
|
|
5153
|
+
|
|
5154
|
+
.bl-nav-group {
|
|
5155
|
+
margin-bottom: var(--spacing-xl);
|
|
5156
|
+
}
|
|
5157
|
+
.bl-nav-group:last-child {
|
|
5158
|
+
margin-bottom: 0;
|
|
5159
|
+
}
|
|
5160
|
+
.bl-nav-group:first-child {
|
|
5161
|
+
margin-top: 0;
|
|
5162
|
+
}
|
|
5163
|
+
.bl-nav-group + .bl-nav-group {
|
|
5164
|
+
padding-top: var(--spacing-md);
|
|
5165
|
+
border-top: 1px solid var(--glass-border-light);
|
|
5166
|
+
margin-top: var(--spacing-lg);
|
|
5167
|
+
}
|
|
5168
|
+
|
|
5169
|
+
.bl-nav-group-header {
|
|
5170
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
5171
|
+
margin-bottom: var(--spacing-sm);
|
|
5172
|
+
margin-top: 0;
|
|
5173
|
+
font-size: var(--font-size-xs);
|
|
5174
|
+
font-weight: var(--font-weight-semibold);
|
|
5175
|
+
color: var(--color-text-muted);
|
|
5176
|
+
text-transform: uppercase;
|
|
5177
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
5178
|
+
line-height: var(--line-height-tight);
|
|
5179
|
+
opacity: 0.8;
|
|
5039
5180
|
}
|
|
5040
5181
|
|
|
5041
5182
|
.bl-sidebar-footer {
|
|
5042
5183
|
padding: var(--spacing-md);
|
|
5043
|
-
border-top: 1px solid var(--glass-border-
|
|
5184
|
+
border-top: 1px solid var(--glass-border-medium);
|
|
5044
5185
|
background: var(--glass-bg-light);
|
|
5045
5186
|
backdrop-filter: blur(var(--glass-blur-sm));
|
|
5046
5187
|
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
|
5188
|
+
flex-shrink: 0;
|
|
5189
|
+
margin-top: auto;
|
|
5047
5190
|
}
|
|
5048
5191
|
|
|
5049
5192
|
@media (max-width: 767.98px) {
|