@ulu/frontend 0.6.17 → 0.6.19
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/lib/scss/_layout.scss
CHANGED
|
@@ -46,6 +46,7 @@ $config: (
|
|
|
46
46
|
/// @prop {Map} [name] The width definition
|
|
47
47
|
/// @prop {String|Number} [name].value The base width value
|
|
48
48
|
/// @prop {Boolean} [name].helper-class Output a helper class for this width
|
|
49
|
+
/// @prop {Boolean} [name].match-font-size If enabled will set font size equal to width for font based icon fonts (only output with helper class)
|
|
49
50
|
/// @prop {Map} [name].breakpoints Responsive breakpoints (optional)
|
|
50
51
|
|
|
51
52
|
$widths: (
|
|
@@ -27,6 +27,7 @@ $-fallbacks: (
|
|
|
27
27
|
/// Module Settings
|
|
28
28
|
/// @type Map
|
|
29
29
|
/// @prop {CssUnit} gap [1rem] The gap between graphic and text.
|
|
30
|
+
/// @prop {CssUnit} gap-compact [0.5rem] The smaller gap applied when the compact modifier is used.
|
|
30
31
|
/// @prop {List} margin [2em 0] Margin applied to the group.
|
|
31
32
|
/// @prop {CssUnit} graphic-width [3.5rem] The default safe width for the graphic.
|
|
32
33
|
/// @prop {Border} rule-border [true] The border style for the rules.
|
|
@@ -37,6 +38,7 @@ $-fallbacks: (
|
|
|
37
38
|
|
|
38
39
|
$config: (
|
|
39
40
|
"gap" : 1rem,
|
|
41
|
+
"gap-compact" : 0.5rem,
|
|
40
42
|
"margin" : (2em 0),
|
|
41
43
|
"graphic-width" : 3.5rem,
|
|
42
44
|
"rule-border" : true,
|
|
@@ -136,6 +138,10 @@ $config: (
|
|
|
136
138
|
align-items: flex-start;
|
|
137
139
|
}
|
|
138
140
|
|
|
141
|
+
#{ $prefix }--align-baseline {
|
|
142
|
+
align-items: baseline;
|
|
143
|
+
}
|
|
144
|
+
|
|
139
145
|
#{ $prefix }--align-end {
|
|
140
146
|
align-items: flex-end;
|
|
141
147
|
}
|
|
@@ -179,5 +185,18 @@ $config: (
|
|
|
179
185
|
border-bottom: get("rule-border");
|
|
180
186
|
padding-bottom: get("rule-padding");
|
|
181
187
|
}
|
|
188
|
+
|
|
189
|
+
// Spacing Modifiers
|
|
190
|
+
#{ $prefix }--compact {
|
|
191
|
+
gap: get("gap-compact");
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// Graphic Modifiers
|
|
195
|
+
#{ $prefix }--auto {
|
|
196
|
+
> #{ $prefix }__graphic {
|
|
197
|
+
width: auto;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
182
200
|
}
|
|
183
201
|
|
|
202
|
+
|
|
@@ -37,7 +37,6 @@ $-fallbacks: (
|
|
|
37
37
|
|
|
38
38
|
/// Module Settings
|
|
39
39
|
/// @type Map
|
|
40
|
-
|
|
41
40
|
/// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
|
|
42
41
|
/// @prop {Dimension} rule-margin [0.5em] Sets the padding and margin of the rule.
|
|
43
42
|
/// @prop {String} rule-style [default] Determines the styling of the rule. Uses the rule.scss component.
|
|
@@ -19,8 +19,12 @@
|
|
|
19
19
|
@each $name, $props in layout.$widths {
|
|
20
20
|
@if map.get($props, "helper-class") {
|
|
21
21
|
#{ $prefix-width }-#{ $name } {
|
|
22
|
-
|
|
22
|
+
$var-name: "width-#{ $name }";
|
|
23
|
+
width: cssvar.use-ulu($var-name);
|
|
23
24
|
max-width: 100%;
|
|
25
|
+
@if (map.get($props, "match-font-size")) {
|
|
26
|
+
font-size: cssvar.use-ulu($var-name);
|
|
27
|
+
}
|
|
24
28
|
}
|
|
25
29
|
}
|
|
26
30
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulu/frontend",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.19",
|
|
4
4
|
"description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|