@ulu/frontend 0.6.12 → 0.6.13
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/_button.scss
CHANGED
|
@@ -84,7 +84,7 @@ $config: (
|
|
|
84
84
|
"transition-enabled": true,
|
|
85
85
|
"transition-duration": 200ms,
|
|
86
86
|
"transition-properties": (border-color, background-color, color, box-shadow),
|
|
87
|
-
"
|
|
87
|
+
"gap": 0.5em,
|
|
88
88
|
) !default;
|
|
89
89
|
|
|
90
90
|
/// Button sizes
|
|
@@ -199,9 +199,11 @@ $styles: (
|
|
|
199
199
|
@include reset();
|
|
200
200
|
}
|
|
201
201
|
appearance: none; // If used with select for example
|
|
202
|
-
display: inline-
|
|
202
|
+
display: inline-flex;
|
|
203
|
+
align-items: center;
|
|
204
|
+
justify-content: center;
|
|
205
|
+
gap: get("gap");
|
|
203
206
|
text-transform: get("text-transform");
|
|
204
|
-
text-align: center;
|
|
205
207
|
text-shadow: get("text-shadow");
|
|
206
208
|
vertical-align: middle;
|
|
207
209
|
font-family: get("font-family");
|
|
@@ -22,3 +22,9 @@
|
|
|
22
22
|
description: A larger button variant.
|
|
23
23
|
-->
|
|
24
24
|
<button class="button button--large">Large Button</button>
|
|
25
|
+
|
|
26
|
+
<!-- @ulu-demo
|
|
27
|
+
title: Left Aligned Button
|
|
28
|
+
description: A button with its content aligned to the left, useful when the button spans a larger width.
|
|
29
|
+
-->
|
|
30
|
+
<button class="button button--left" style="width: 100%;">Left Aligned</button>
|
|
@@ -18,10 +18,8 @@ $-fallbacks: (
|
|
|
18
18
|
|
|
19
19
|
/// Module Settings
|
|
20
20
|
/// @type Map
|
|
21
|
-
/// @prop {Dimension} icon-margin [1em] List of other sizes (large by default), each size is a map of (width, font-size)
|
|
22
21
|
|
|
23
22
|
$config: (
|
|
24
|
-
"icon-margin" : 0.5em,
|
|
25
23
|
"icon-centered-vertical-offset": true
|
|
26
24
|
) !default;
|
|
27
25
|
|
|
@@ -65,13 +63,9 @@ $config: (
|
|
|
65
63
|
#{ $prefix }--fit {
|
|
66
64
|
min-width: 0;
|
|
67
65
|
}
|
|
68
|
-
#{ $prefix }
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
&:not(:last-child) {
|
|
73
|
-
margin-inline-end: get("icon-margin");
|
|
74
|
-
}
|
|
66
|
+
#{ $prefix }--left {
|
|
67
|
+
justify-content: flex-start;
|
|
68
|
+
text-align: left;
|
|
75
69
|
}
|
|
76
70
|
|
|
77
71
|
@each $size, $values in button.$sizes {
|
|
@@ -88,9 +82,6 @@ $config: (
|
|
|
88
82
|
|
|
89
83
|
#{ $icon-selector } {
|
|
90
84
|
|
|
91
|
-
display: inline-flex;
|
|
92
|
-
align-items: center;
|
|
93
|
-
justify-content: center;
|
|
94
85
|
min-width: 0;
|
|
95
86
|
max-width: none;
|
|
96
87
|
border-radius: button.get("icon-border-radius");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulu/frontend",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.13",
|
|
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": [
|