@juspay/svelte-ui-components 2.132.0 → 2.133.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/dist/Toolbar/Toolbar.svelte +24 -2
- package/package.json +1 -1
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
.content {
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: row;
|
|
75
|
-
align-items: center;
|
|
75
|
+
align-items: var(--toolbar-content-align-items, center);
|
|
76
76
|
padding: var(--toolbar-content-padding, 0px);
|
|
77
77
|
justify-content: var(--toolbar-justify-content, normal);
|
|
78
78
|
visibility: var(--toolbar-content-visibility, visible);
|
|
@@ -83,8 +83,15 @@
|
|
|
83
83
|
defaults reproduce the previous rendering exactly. */
|
|
84
84
|
width: var(--toolbar-content-width, auto);
|
|
85
85
|
height: var(--toolbar-content-height, auto);
|
|
86
|
+
min-height: var(--toolbar-content-min-height, auto);
|
|
86
87
|
max-width: var(--toolbar-content-max-width, none);
|
|
87
88
|
margin: var(--toolbar-content-margin, 0);
|
|
89
|
+
|
|
90
|
+
/* Row wrapping and gaps. An in-flow page header lets its action side drop to its own
|
|
91
|
+
line on a narrow viewport; the fixed bar never wraps, which is the default. */
|
|
92
|
+
flex-wrap: var(--toolbar-content-flex-wrap, nowrap);
|
|
93
|
+
row-gap: var(--toolbar-content-row-gap, 0);
|
|
94
|
+
column-gap: var(--toolbar-content-column-gap, 0);
|
|
88
95
|
}
|
|
89
96
|
|
|
90
97
|
.additional-content {
|
|
@@ -118,7 +125,22 @@
|
|
|
118
125
|
|
|
119
126
|
.center-content {
|
|
120
127
|
display: flex;
|
|
121
|
-
|
|
128
|
+
/* `1 1 auto` rather than the default `1` (`1 1 0%`) lets a title region grow from its
|
|
129
|
+
CONTENT width, so a row deficit is shared with the action side instead of collapsing
|
|
130
|
+
the title to nothing. `min-width: 0` is what actually permits the shrink. */
|
|
131
|
+
flex: var(--toolbar-center-flex, 1);
|
|
132
|
+
min-width: var(--toolbar-center-min-width, auto);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* The action region as a flex ITEM of the row. Its inner layout stays the consumer's —
|
|
136
|
+
the snippet's own markup — so there is no gap/justify/align token here. Every default
|
|
137
|
+
below is the property's initial value, i.e. what a bare div already rendered. */
|
|
138
|
+
.right-content {
|
|
139
|
+
display: var(--toolbar-right-display, block);
|
|
140
|
+
flex-shrink: var(--toolbar-right-flex-shrink, 1);
|
|
141
|
+
min-width: var(--toolbar-right-min-width, auto);
|
|
142
|
+
max-width: var(--toolbar-right-max-width, none);
|
|
143
|
+
width: var(--toolbar-right-width, auto);
|
|
122
144
|
}
|
|
123
145
|
|
|
124
146
|
.text {
|