softui-css 1.0.8 → 1.1.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.
- package/README.md +78 -35
- package/dist/softui.css +428 -0
- package/dist/softui.js +25 -1
- package/dist/softui.min.css +1 -1
- package/dist/softui.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-dark.png">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png">
|
|
5
|
+
<img alt="SoftUI — Neumorphic CSS Components" src="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png" width="100%">
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<h1 align="center">SoftUI</h1>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
A neumorphic CSS library with soft shadows, muted palettes, and tactile depth.<br>
|
|
13
|
+
Zero dependencies. Dark mode built in. Just drop it in.
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/v/softui-css?color=5B54E0&label=npm" alt="npm version"></a>
|
|
18
|
+
<a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/dm/softui-css?color=22c55e" alt="npm downloads"></a>
|
|
19
|
+
<a href="https://github.com/siddharth-bhansali/softui/blob/main/LICENSE"><img src="https://img.shields.io/github/license/siddharth-bhansali/softui?color=f59e0b" alt="license"></a>
|
|
20
|
+
<a href="https://softui-css.netlify.app"><img src="https://img.shields.io/badge/docs-live-5B54E0" alt="docs"></a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<a href="https://softui-css.netlify.app"><strong>Documentation</strong></a> ·
|
|
25
|
+
<a href="https://softui-demo.netlify.app"><strong>Live Demo</strong></a> ·
|
|
26
|
+
<a href="https://softui-css.netlify.app/playground/"><strong>Playground</strong></a>
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Highlights
|
|
32
|
+
|
|
33
|
+
| | |
|
|
34
|
+
|---|---|
|
|
35
|
+
| **44+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
|
|
36
|
+
| **Dark Mode** | Add `data-theme="dark"` and everything adapts |
|
|
37
|
+
| **Zero Dependencies** | Pure CSS + vanilla JS. No build step required |
|
|
38
|
+
| **CSS Variables** | Fully customizable via custom properties |
|
|
39
|
+
| **Responsive Grid** | 12-column flexbox grid with breakpoints and gap utilities |
|
|
40
|
+
| **Interactive Playground** | Write HTML and preview components live in the browser |
|
|
41
|
+
|
|
42
|
+
---
|
|
6
43
|
|
|
7
44
|
## Install
|
|
8
45
|
|
|
9
46
|
```bash
|
|
10
47
|
npm install softui-css
|
|
11
|
-
# or
|
|
12
|
-
yarn add softui-css
|
|
13
|
-
# or
|
|
14
|
-
pnpm add softui-css
|
|
15
|
-
# or
|
|
16
|
-
bun add softui-css
|
|
17
48
|
```
|
|
18
49
|
|
|
19
50
|
### CDN
|
|
@@ -23,19 +54,18 @@ bun add softui-css
|
|
|
23
54
|
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
|
|
24
55
|
```
|
|
25
56
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Download `softui.min.css` and `softui.min.js` from the `dist/` folder and include them in your HTML:
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<link rel="stylesheet" href="softui.min.css">
|
|
32
|
-
<script src="softui.min.js"></script>
|
|
33
|
-
```
|
|
57
|
+
---
|
|
34
58
|
|
|
35
59
|
## Quick Start
|
|
36
60
|
|
|
37
61
|
```html
|
|
62
|
+
<!DOCTYPE html>
|
|
63
|
+
<html lang="en">
|
|
64
|
+
<head>
|
|
65
|
+
<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
|
|
66
|
+
</head>
|
|
38
67
|
<body class="sui-d-flex sui-justify-center sui-align-center sui-min-vh-100">
|
|
68
|
+
|
|
39
69
|
<div class="sui-card sui-raised sui-p-5 sui-text-center">
|
|
40
70
|
<h3>Hello SoftUI</h3>
|
|
41
71
|
<p class="sui-text-muted sui-mt-2 sui-mb-3">
|
|
@@ -43,53 +73,66 @@ Download `softui.min.css` and `softui.min.js` from the `dist/` folder and includ
|
|
|
43
73
|
</p>
|
|
44
74
|
<button class="sui-btn sui-btn-primary">Get Started</button>
|
|
45
75
|
</div>
|
|
76
|
+
|
|
77
|
+
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
|
|
46
78
|
</body>
|
|
79
|
+
</html>
|
|
47
80
|
```
|
|
48
81
|
|
|
49
|
-
|
|
82
|
+
---
|
|
50
83
|
|
|
51
|
-
|
|
84
|
+
## Dark Mode
|
|
52
85
|
|
|
53
86
|
```html
|
|
54
87
|
<html data-theme="dark">
|
|
55
88
|
```
|
|
56
89
|
|
|
90
|
+
That's it. Every component adapts automatically.
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
57
94
|
## Components
|
|
58
95
|
|
|
59
|
-
**Layout**
|
|
96
|
+
**Layout** — Container, Grid, Flex utilities
|
|
60
97
|
|
|
61
|
-
**Forms**
|
|
98
|
+
**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox
|
|
62
99
|
|
|
63
|
-
**Data Display**
|
|
100
|
+
**Data Display** — Table, Data Table, Card, Badge, Avatar, Kbd, Chart
|
|
64
101
|
|
|
65
|
-
**Feedback**
|
|
102
|
+
**Feedback** — Alert, Toast, Progress, Skeleton, Spinner
|
|
66
103
|
|
|
67
|
-
**Navigation**
|
|
104
|
+
**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
|
|
68
105
|
|
|
69
|
-
**Overlay**
|
|
106
|
+
**Overlay** — Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette
|
|
70
107
|
|
|
71
|
-
**Interactive**
|
|
108
|
+
**Interactive** — Accordion, Collapsible, Carousel, Toggle Group, Calendar, Drag & Drop
|
|
72
109
|
|
|
73
|
-
**Content**
|
|
110
|
+
**Content** — Chip, Divider, Scroll Area, Resizable, Button Group
|
|
74
111
|
|
|
75
|
-
**Utilities**
|
|
112
|
+
**Utilities** — Shadows, Radius, Spacing, Text, Aspect Ratio, Typography
|
|
76
113
|
|
|
77
|
-
|
|
114
|
+
> Browse all components at [softui-css.netlify.app](https://softui-css.netlify.app) or try them in the [Playground](https://softui-css.netlify.app/playground/).
|
|
78
115
|
|
|
79
|
-
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Customization
|
|
119
|
+
|
|
120
|
+
SoftUI is built on CSS custom properties. Override them to make it yours:
|
|
80
121
|
|
|
81
122
|
```css
|
|
82
123
|
:root {
|
|
83
124
|
--sui-primary: #7C5CFC;
|
|
84
125
|
--sui-radius: 12px;
|
|
85
|
-
--sui-
|
|
126
|
+
--sui-font: 'Inter', sans-serif;
|
|
86
127
|
}
|
|
87
128
|
```
|
|
88
129
|
|
|
130
|
+
---
|
|
131
|
+
|
|
89
132
|
## Browser Support
|
|
90
133
|
|
|
91
|
-
All modern browsers
|
|
134
|
+
All modern browsers — Chrome, Firefox, Safari, Edge.
|
|
92
135
|
|
|
93
136
|
## License
|
|
94
137
|
|
|
95
|
-
MIT
|
|
138
|
+
[MIT](LICENSE)
|
package/dist/softui.css
CHANGED
|
@@ -7828,3 +7828,431 @@ a.sui-btn-warning:visited {
|
|
|
7828
7828
|
width: 100%;
|
|
7829
7829
|
}
|
|
7830
7830
|
}
|
|
7831
|
+
|
|
7832
|
+
/* ===========================================
|
|
7833
|
+
Sidebar
|
|
7834
|
+
=========================================== */
|
|
7835
|
+
.sui-sidebar {
|
|
7836
|
+
--sui-sidebar-width: 260px;
|
|
7837
|
+
width: var(--sui-sidebar-width);
|
|
7838
|
+
flex-shrink: 0;
|
|
7839
|
+
display: flex;
|
|
7840
|
+
flex-direction: column;
|
|
7841
|
+
background: var(--sui-bg);
|
|
7842
|
+
box-shadow: var(--sui-shadow);
|
|
7843
|
+
overflow: hidden;
|
|
7844
|
+
transition: width 0.2s ease;
|
|
7845
|
+
}
|
|
7846
|
+
|
|
7847
|
+
/* --- Sticky behaviour --- */
|
|
7848
|
+
.sui-sidebar-sticky {
|
|
7849
|
+
position: sticky;
|
|
7850
|
+
top: 0;
|
|
7851
|
+
align-self: flex-start;
|
|
7852
|
+
height: 100vh;
|
|
7853
|
+
}
|
|
7854
|
+
|
|
7855
|
+
/* Offset for a fixed navbar above */
|
|
7856
|
+
.sui-sidebar-sticky.sui-sidebar-nav-offset {
|
|
7857
|
+
top: 56px;
|
|
7858
|
+
height: calc(100vh - 56px);
|
|
7859
|
+
}
|
|
7860
|
+
|
|
7861
|
+
/* --- Header / Content / Footer --- */
|
|
7862
|
+
.sui-sidebar-header {
|
|
7863
|
+
flex-shrink: 0;
|
|
7864
|
+
padding: 20px 16px 12px;
|
|
7865
|
+
}
|
|
7866
|
+
|
|
7867
|
+
.sui-sidebar-header-toggle {
|
|
7868
|
+
display: flex;
|
|
7869
|
+
align-items: center;
|
|
7870
|
+
justify-content: space-between;
|
|
7871
|
+
}
|
|
7872
|
+
|
|
7873
|
+
.sui-sidebar-brand {
|
|
7874
|
+
display: flex;
|
|
7875
|
+
align-items: center;
|
|
7876
|
+
gap: 10px;
|
|
7877
|
+
min-width: 0;
|
|
7878
|
+
font-weight: 700;
|
|
7879
|
+
font-size: 14px;
|
|
7880
|
+
white-space: nowrap;
|
|
7881
|
+
overflow: hidden;
|
|
7882
|
+
}
|
|
7883
|
+
|
|
7884
|
+
.sui-sidebar-content {
|
|
7885
|
+
flex: 1;
|
|
7886
|
+
overflow-x: hidden;
|
|
7887
|
+
overflow-y: auto;
|
|
7888
|
+
padding: 12px 16px;
|
|
7889
|
+
}
|
|
7890
|
+
|
|
7891
|
+
.sui-sidebar-header + .sui-sidebar-divider + .sui-sidebar-content,
|
|
7892
|
+
.sui-sidebar-header + .sui-sidebar-content {
|
|
7893
|
+
padding-top: 4px;
|
|
7894
|
+
}
|
|
7895
|
+
|
|
7896
|
+
.sui-sidebar-footer {
|
|
7897
|
+
flex-shrink: 0;
|
|
7898
|
+
padding: 12px 16px 20px;
|
|
7899
|
+
margin-top: auto;
|
|
7900
|
+
}
|
|
7901
|
+
|
|
7902
|
+
/* --- Groups --- */
|
|
7903
|
+
.sui-sidebar-group {
|
|
7904
|
+
margin-bottom: 8px;
|
|
7905
|
+
}
|
|
7906
|
+
|
|
7907
|
+
.sui-sidebar-group-label {
|
|
7908
|
+
font-size: 11px;
|
|
7909
|
+
font-weight: 700;
|
|
7910
|
+
text-transform: uppercase;
|
|
7911
|
+
letter-spacing: 1px;
|
|
7912
|
+
color: var(--sui-text-muted);
|
|
7913
|
+
padding: 8px 12px 4px;
|
|
7914
|
+
margin: 0;
|
|
7915
|
+
}
|
|
7916
|
+
|
|
7917
|
+
/* --- Nav list --- */
|
|
7918
|
+
.sui-sidebar-nav {
|
|
7919
|
+
list-style: none;
|
|
7920
|
+
padding: 0;
|
|
7921
|
+
margin: 0;
|
|
7922
|
+
}
|
|
7923
|
+
|
|
7924
|
+
.sui-sidebar-nav li a,
|
|
7925
|
+
.sui-sidebar-nav li button {
|
|
7926
|
+
position: relative;
|
|
7927
|
+
display: flex;
|
|
7928
|
+
align-items: center;
|
|
7929
|
+
gap: 10px;
|
|
7930
|
+
width: 100%;
|
|
7931
|
+
padding: 9px 12px;
|
|
7932
|
+
border: none;
|
|
7933
|
+
background: none;
|
|
7934
|
+
border-radius: var(--sui-radius-sm);
|
|
7935
|
+
color: var(--sui-text-muted);
|
|
7936
|
+
text-decoration: none;
|
|
7937
|
+
font-family: var(--sui-font);
|
|
7938
|
+
font-size: 14px;
|
|
7939
|
+
cursor: pointer;
|
|
7940
|
+
transition: var(--sui-transition);
|
|
7941
|
+
}
|
|
7942
|
+
|
|
7943
|
+
.sui-sidebar-nav li a:hover,
|
|
7944
|
+
.sui-sidebar-nav li button:hover {
|
|
7945
|
+
background: rgba(91, 84, 224, 0.06);
|
|
7946
|
+
color: var(--sui-text);
|
|
7947
|
+
}
|
|
7948
|
+
|
|
7949
|
+
.sui-sidebar-nav li a.active,
|
|
7950
|
+
.sui-sidebar-nav li button.active {
|
|
7951
|
+
background: rgba(91, 84, 224, 0.1);
|
|
7952
|
+
color: var(--sui-primary);
|
|
7953
|
+
font-weight: 600;
|
|
7954
|
+
box-shadow: var(--sui-shadow-inset-sm);
|
|
7955
|
+
}
|
|
7956
|
+
|
|
7957
|
+
[data-theme="dark"] .sui-sidebar-nav li a:hover,
|
|
7958
|
+
[data-theme="dark"] .sui-sidebar-nav li button:hover {
|
|
7959
|
+
background: rgba(124, 107, 255, 0.1);
|
|
7960
|
+
}
|
|
7961
|
+
|
|
7962
|
+
[data-theme="dark"] .sui-sidebar-nav li a.active,
|
|
7963
|
+
[data-theme="dark"] .sui-sidebar-nav li button.active {
|
|
7964
|
+
background: rgba(124, 107, 255, 0.15);
|
|
7965
|
+
}
|
|
7966
|
+
|
|
7967
|
+
/* Nav item icon */
|
|
7968
|
+
.sui-sidebar-nav li svg {
|
|
7969
|
+
width: 18px;
|
|
7970
|
+
height: 18px;
|
|
7971
|
+
flex-shrink: 0;
|
|
7972
|
+
opacity: 0.7;
|
|
7973
|
+
}
|
|
7974
|
+
|
|
7975
|
+
.sui-sidebar-nav li a.active svg,
|
|
7976
|
+
.sui-sidebar-nav li button.active svg {
|
|
7977
|
+
opacity: 1;
|
|
7978
|
+
}
|
|
7979
|
+
|
|
7980
|
+
/* Nav item badge (right-aligned) */
|
|
7981
|
+
.sui-sidebar-nav li .sui-sidebar-badge {
|
|
7982
|
+
margin-left: auto;
|
|
7983
|
+
font-size: 11px;
|
|
7984
|
+
font-weight: 600;
|
|
7985
|
+
padding: 2px 8px;
|
|
7986
|
+
border-radius: var(--sui-radius-full);
|
|
7987
|
+
background: rgba(91, 84, 224, 0.1);
|
|
7988
|
+
color: var(--sui-primary);
|
|
7989
|
+
}
|
|
7990
|
+
|
|
7991
|
+
/* --- Divider --- */
|
|
7992
|
+
.sui-sidebar-divider {
|
|
7993
|
+
height: 1px;
|
|
7994
|
+
background: var(--sui-bg-dark);
|
|
7995
|
+
margin: 8px 12px;
|
|
7996
|
+
border: none;
|
|
7997
|
+
}
|
|
7998
|
+
|
|
7999
|
+
/* --- Width variants --- */
|
|
8000
|
+
.sui-sidebar-sm {
|
|
8001
|
+
--sui-sidebar-width: 200px;
|
|
8002
|
+
}
|
|
8003
|
+
|
|
8004
|
+
.sui-sidebar-lg {
|
|
8005
|
+
--sui-sidebar-width: 300px;
|
|
8006
|
+
}
|
|
8007
|
+
|
|
8008
|
+
/* --- Border variant (no shadow) --- */
|
|
8009
|
+
.sui-sidebar-bordered {
|
|
8010
|
+
box-shadow: none;
|
|
8011
|
+
border-right: 1px solid var(--sui-bg-dark);
|
|
8012
|
+
}
|
|
8013
|
+
|
|
8014
|
+
/* --- Inset variant (flat, blends with page) --- */
|
|
8015
|
+
.sui-sidebar-inset {
|
|
8016
|
+
box-shadow: none;
|
|
8017
|
+
background: transparent;
|
|
8018
|
+
}
|
|
8019
|
+
|
|
8020
|
+
/* --- Compact variant (docs-style, tighter spacing) --- */
|
|
8021
|
+
.sui-sidebar-compact {
|
|
8022
|
+
--sui-sidebar-width: 220px;
|
|
8023
|
+
}
|
|
8024
|
+
|
|
8025
|
+
.sui-sidebar-compact .sui-sidebar-content {
|
|
8026
|
+
padding: 12px 10px;
|
|
8027
|
+
}
|
|
8028
|
+
|
|
8029
|
+
.sui-sidebar-compact .sui-sidebar-group-label {
|
|
8030
|
+
font-size: 10px;
|
|
8031
|
+
padding: 12px 12px 4px;
|
|
8032
|
+
color: var(--sui-text-light);
|
|
8033
|
+
}
|
|
8034
|
+
|
|
8035
|
+
.sui-sidebar-compact .sui-sidebar-group-label:first-child {
|
|
8036
|
+
padding-top: 0;
|
|
8037
|
+
}
|
|
8038
|
+
|
|
8039
|
+
.sui-sidebar-compact .sui-sidebar-nav li a,
|
|
8040
|
+
.sui-sidebar-compact .sui-sidebar-nav li button {
|
|
8041
|
+
padding: 7px 12px;
|
|
8042
|
+
font-size: 13px;
|
|
8043
|
+
border-radius: var(--sui-radius-xs);
|
|
8044
|
+
}
|
|
8045
|
+
|
|
8046
|
+
.sui-sidebar-compact .sui-sidebar-nav li a.active,
|
|
8047
|
+
.sui-sidebar-compact .sui-sidebar-nav li button.active {
|
|
8048
|
+
box-shadow: none;
|
|
8049
|
+
}
|
|
8050
|
+
|
|
8051
|
+
/* --- Collapsed (icon-only) --- */
|
|
8052
|
+
.sui-sidebar-collapsed {
|
|
8053
|
+
--sui-sidebar-width: 64px;
|
|
8054
|
+
}
|
|
8055
|
+
|
|
8056
|
+
.sui-sidebar-collapsed .sui-sidebar-header,
|
|
8057
|
+
.sui-sidebar-collapsed .sui-sidebar-content,
|
|
8058
|
+
.sui-sidebar-collapsed .sui-sidebar-footer {
|
|
8059
|
+
padding-left: 8px;
|
|
8060
|
+
padding-right: 8px;
|
|
8061
|
+
}
|
|
8062
|
+
|
|
8063
|
+
.sui-sidebar-collapsed .sui-sidebar-group-label,
|
|
8064
|
+
.sui-sidebar-collapsed .sui-sidebar-badge,
|
|
8065
|
+
.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
|
|
8066
|
+
display: none;
|
|
8067
|
+
}
|
|
8068
|
+
|
|
8069
|
+
.sui-sidebar-collapsed .sui-sidebar-nav li a,
|
|
8070
|
+
.sui-sidebar-collapsed .sui-sidebar-nav li button {
|
|
8071
|
+
justify-content: center;
|
|
8072
|
+
padding: 10px;
|
|
8073
|
+
gap: 0;
|
|
8074
|
+
}
|
|
8075
|
+
|
|
8076
|
+
.sui-sidebar-collapsed .sui-sidebar-nav li svg {
|
|
8077
|
+
width: 20px;
|
|
8078
|
+
height: 20px;
|
|
8079
|
+
opacity: 0.85;
|
|
8080
|
+
}
|
|
8081
|
+
|
|
8082
|
+
.sui-sidebar-collapsed .sui-sidebar-divider {
|
|
8083
|
+
margin: 8px 4px;
|
|
8084
|
+
}
|
|
8085
|
+
|
|
8086
|
+
/* --- Collapsible (animated collapse/expand) --- */
|
|
8087
|
+
.sui-sidebar-collapsible {
|
|
8088
|
+
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8089
|
+
}
|
|
8090
|
+
|
|
8091
|
+
.sui-sidebar-collapsible .sui-sidebar-header,
|
|
8092
|
+
.sui-sidebar-collapsible .sui-sidebar-content,
|
|
8093
|
+
.sui-sidebar-collapsible .sui-sidebar-footer {
|
|
8094
|
+
transition: padding 0.25s ease;
|
|
8095
|
+
}
|
|
8096
|
+
|
|
8097
|
+
.sui-sidebar-collapsible .sui-sidebar-nav li a,
|
|
8098
|
+
.sui-sidebar-collapsible .sui-sidebar-nav li button {
|
|
8099
|
+
transition: padding 0.25s ease, gap 0.25s ease, color 0.15s ease, background 0.15s ease;
|
|
8100
|
+
}
|
|
8101
|
+
|
|
8102
|
+
.sui-sidebar-collapsible .sui-sidebar-group-label {
|
|
8103
|
+
transition: opacity 0.15s ease, max-height 0.25s ease, margin 0.25s ease;
|
|
8104
|
+
max-height: 30px;
|
|
8105
|
+
overflow: hidden;
|
|
8106
|
+
}
|
|
8107
|
+
|
|
8108
|
+
.sui-sidebar-collapsible .sui-sidebar-nav li span:not(.sui-sidebar-icon),
|
|
8109
|
+
.sui-sidebar-collapsible .sui-sidebar-badge {
|
|
8110
|
+
display: inline-block;
|
|
8111
|
+
overflow: hidden;
|
|
8112
|
+
white-space: nowrap;
|
|
8113
|
+
max-width: 180px;
|
|
8114
|
+
transition: opacity 0.15s ease, max-width 0.25s ease, padding 0.25s ease, margin 0.25s ease;
|
|
8115
|
+
}
|
|
8116
|
+
|
|
8117
|
+
.sui-sidebar-collapsible .sui-sidebar-header span,
|
|
8118
|
+
.sui-sidebar-collapsible .sui-sidebar-footer span {
|
|
8119
|
+
display: inline-block;
|
|
8120
|
+
overflow: hidden;
|
|
8121
|
+
white-space: nowrap;
|
|
8122
|
+
max-width: 180px;
|
|
8123
|
+
transition: opacity 0.15s ease, max-width 0.25s ease;
|
|
8124
|
+
}
|
|
8125
|
+
|
|
8126
|
+
.sui-sidebar-collapsible .sui-sidebar-divider {
|
|
8127
|
+
transition: margin 0.25s ease;
|
|
8128
|
+
}
|
|
8129
|
+
|
|
8130
|
+
/* Override static display:none for collapsible — use animated properties instead */
|
|
8131
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-group-label {
|
|
8132
|
+
display: block;
|
|
8133
|
+
opacity: 0;
|
|
8134
|
+
max-height: 0;
|
|
8135
|
+
margin: 0;
|
|
8136
|
+
}
|
|
8137
|
+
|
|
8138
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-badge,
|
|
8139
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
|
|
8140
|
+
position: absolute;
|
|
8141
|
+
opacity: 0;
|
|
8142
|
+
pointer-events: none;
|
|
8143
|
+
}
|
|
8144
|
+
|
|
8145
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header span,
|
|
8146
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer span {
|
|
8147
|
+
position: absolute;
|
|
8148
|
+
opacity: 0;
|
|
8149
|
+
pointer-events: none;
|
|
8150
|
+
}
|
|
8151
|
+
|
|
8152
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header > *:not(.sui-sidebar-toggle) {
|
|
8153
|
+
display: none;
|
|
8154
|
+
}
|
|
8155
|
+
|
|
8156
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header {
|
|
8157
|
+
display: flex;
|
|
8158
|
+
justify-content: center;
|
|
8159
|
+
}
|
|
8160
|
+
|
|
8161
|
+
.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer {
|
|
8162
|
+
display: flex;
|
|
8163
|
+
justify-content: center;
|
|
8164
|
+
}
|
|
8165
|
+
|
|
8166
|
+
/* Toggle button */
|
|
8167
|
+
.sui-sidebar-toggle {
|
|
8168
|
+
display: inline-flex;
|
|
8169
|
+
align-items: center;
|
|
8170
|
+
justify-content: center;
|
|
8171
|
+
width: 28px;
|
|
8172
|
+
height: 28px;
|
|
8173
|
+
padding: 0;
|
|
8174
|
+
border: 1px solid var(--sui-bg-dark);
|
|
8175
|
+
background: var(--sui-bg);
|
|
8176
|
+
border-radius: var(--sui-radius-xs);
|
|
8177
|
+
cursor: pointer;
|
|
8178
|
+
color: var(--sui-text-muted);
|
|
8179
|
+
transition: var(--sui-transition);
|
|
8180
|
+
flex-shrink: 0;
|
|
8181
|
+
}
|
|
8182
|
+
|
|
8183
|
+
.sui-sidebar-toggle:hover {
|
|
8184
|
+
color: var(--sui-text);
|
|
8185
|
+
border-color: var(--sui-primary);
|
|
8186
|
+
}
|
|
8187
|
+
|
|
8188
|
+
.sui-sidebar-toggle svg {
|
|
8189
|
+
width: 16px;
|
|
8190
|
+
height: 16px;
|
|
8191
|
+
transition: transform 0.25s ease;
|
|
8192
|
+
}
|
|
8193
|
+
|
|
8194
|
+
.sui-sidebar-collapsed .sui-sidebar-toggle svg {
|
|
8195
|
+
transform: rotate(180deg);
|
|
8196
|
+
}
|
|
8197
|
+
|
|
8198
|
+
/* --- Trigger button --- */
|
|
8199
|
+
.sui-sidebar-trigger {
|
|
8200
|
+
display: inline-flex;
|
|
8201
|
+
align-items: center;
|
|
8202
|
+
justify-content: center;
|
|
8203
|
+
width: 32px;
|
|
8204
|
+
height: 32px;
|
|
8205
|
+
padding: 0;
|
|
8206
|
+
border: 1px solid var(--sui-bg-dark);
|
|
8207
|
+
background: var(--sui-bg);
|
|
8208
|
+
border-radius: var(--sui-radius-xs);
|
|
8209
|
+
cursor: pointer;
|
|
8210
|
+
color: var(--sui-text-muted);
|
|
8211
|
+
transition: var(--sui-transition);
|
|
8212
|
+
}
|
|
8213
|
+
|
|
8214
|
+
.sui-sidebar-trigger:hover {
|
|
8215
|
+
color: var(--sui-text);
|
|
8216
|
+
border-color: var(--sui-primary);
|
|
8217
|
+
}
|
|
8218
|
+
|
|
8219
|
+
/* --- Responsive --- */
|
|
8220
|
+
@media (max-width: 900px) {
|
|
8221
|
+
.sui-sidebar {
|
|
8222
|
+
display: none;
|
|
8223
|
+
}
|
|
8224
|
+
|
|
8225
|
+
.sui-sidebar.sui-sidebar-mobile-open {
|
|
8226
|
+
display: flex;
|
|
8227
|
+
position: fixed;
|
|
8228
|
+
top: 0;
|
|
8229
|
+
left: 0;
|
|
8230
|
+
width: 280px;
|
|
8231
|
+
height: 100vh;
|
|
8232
|
+
z-index: 200;
|
|
8233
|
+
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
|
|
8234
|
+
}
|
|
8235
|
+
}
|
|
8236
|
+
|
|
8237
|
+
/* Sidebar overlay for mobile */
|
|
8238
|
+
.sui-sidebar-overlay {
|
|
8239
|
+
display: none;
|
|
8240
|
+
}
|
|
8241
|
+
|
|
8242
|
+
@media (max-width: 900px) {
|
|
8243
|
+
.sui-sidebar-overlay {
|
|
8244
|
+
position: fixed;
|
|
8245
|
+
inset: 0;
|
|
8246
|
+
background: rgba(0, 0, 0, 0.4);
|
|
8247
|
+
z-index: 199;
|
|
8248
|
+
opacity: 0;
|
|
8249
|
+
pointer-events: none;
|
|
8250
|
+
transition: opacity 0.3s ease;
|
|
8251
|
+
}
|
|
8252
|
+
|
|
8253
|
+
.sui-sidebar-overlay.open {
|
|
8254
|
+
display: block;
|
|
8255
|
+
opacity: 1;
|
|
8256
|
+
pointer-events: auto;
|
|
8257
|
+
}
|
|
8258
|
+
}
|
package/dist/softui.js
CHANGED
|
@@ -2874,5 +2874,29 @@ const SoftUI = (() => {
|
|
|
2874
2874
|
});
|
|
2875
2875
|
}
|
|
2876
2876
|
|
|
2877
|
-
|
|
2877
|
+
// =========================================
|
|
2878
|
+
// Sidebar — collapsible toggle
|
|
2879
|
+
// =========================================
|
|
2880
|
+
document.addEventListener('click', function(e) {
|
|
2881
|
+
var btn = e.target.closest('[data-sidebar-toggle]');
|
|
2882
|
+
if (!btn) return;
|
|
2883
|
+
var sidebar = btn.closest('.sui-sidebar');
|
|
2884
|
+
if (sidebar) {
|
|
2885
|
+
sidebar.classList.toggle('sui-sidebar-collapsed');
|
|
2886
|
+
}
|
|
2887
|
+
});
|
|
2888
|
+
|
|
2889
|
+
function sidebar(selector) {
|
|
2890
|
+
var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
|
|
2891
|
+
if (!el) return null;
|
|
2892
|
+
|
|
2893
|
+
function collapse() { el.classList.add('sui-sidebar-collapsed'); }
|
|
2894
|
+
function expand() { el.classList.remove('sui-sidebar-collapsed'); }
|
|
2895
|
+
function toggle() { el.classList.toggle('sui-sidebar-collapsed'); }
|
|
2896
|
+
function isCollapsed() { return el.classList.contains('sui-sidebar-collapsed'); }
|
|
2897
|
+
|
|
2898
|
+
return { collapse: collapse, expand: expand, toggle: toggle, isCollapsed: isCollapsed, el: el };
|
|
2899
|
+
}
|
|
2900
|
+
|
|
2901
|
+
return { modal, sheet, toast, carousel, sidebar };
|
|
2878
2902
|
})();
|