@basis-ng/styles 0.0.1-alpha.146 → 0.0.1-alpha.147
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/package.json
CHANGED
|
@@ -68,4 +68,15 @@ button[b-button] {
|
|
|
68
68
|
&.b-squared.b-size-lg {
|
|
69
69
|
@apply size-12;
|
|
70
70
|
}
|
|
71
|
+
|
|
72
|
+
/* Rounded full - extra horizontal padding */
|
|
73
|
+
&.b-rounded-full:not(.b-squared) {
|
|
74
|
+
@apply px-4;
|
|
75
|
+
}
|
|
76
|
+
&.b-size-sm.b-rounded-full:not(.b-squared) {
|
|
77
|
+
@apply px-3;
|
|
78
|
+
}
|
|
79
|
+
&.b-size-lg.b-rounded-full:not(.b-squared) {
|
|
80
|
+
@apply px-5;
|
|
81
|
+
}
|
|
71
82
|
}
|
|
@@ -20,6 +20,16 @@ b-input-group {
|
|
|
20
20
|
@apply outline-0! px-0! inset-ring-0 w-full! rounded-none! bg-transparent hover:bg-transparent shadow-none;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/* Internal button adjustments when placed inside group */
|
|
24
|
+
button[b-button] {
|
|
25
|
+
@apply inset-ring-0 shadow-none rounded-size-sm;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Squared buttons should match the input group height */
|
|
29
|
+
button[b-button].b-squared {
|
|
30
|
+
@apply h-full! w-auto! aspect-square;
|
|
31
|
+
}
|
|
32
|
+
|
|
23
33
|
/* Focus state when any inner input is focused (and not readonly) */
|
|
24
34
|
&:has(input[b-input]:focus-visible:not(:read-only)) {
|
|
25
35
|
@apply outline-2 outline-offset-2 outline-primary dark:outline-primary-dark;
|
|
@@ -87,4 +97,41 @@ b-input-group {
|
|
|
87
97
|
> ng-icon {
|
|
88
98
|
@apply shrink-0;
|
|
89
99
|
}
|
|
100
|
+
|
|
101
|
+
/* Rounded full - extra horizontal padding */
|
|
102
|
+
&.b-rounded-full {
|
|
103
|
+
@apply px-4;
|
|
104
|
+
|
|
105
|
+
&:has(> button[b-button]:first-child) {
|
|
106
|
+
@apply pl-2!;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:has(> button[b-button]:last-child) {
|
|
110
|
+
@apply pr-2!;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:has(input[b-input].b-size-sm).b-rounded-full {
|
|
115
|
+
@apply px-3;
|
|
116
|
+
|
|
117
|
+
&:has(> button[b-button]:first-child) {
|
|
118
|
+
@apply pl-1.5!;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&:has(> button[b-button]:last-child) {
|
|
122
|
+
@apply pr-1.5!;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&:has(input[b-input].b-size-lg).b-rounded-full {
|
|
127
|
+
@apply px-5;
|
|
128
|
+
|
|
129
|
+
&:has(> button[b-button]:first-child) {
|
|
130
|
+
@apply pl-2.5!;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:has(> button[b-button]:last-child) {
|
|
134
|
+
@apply pr-2.5!;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
90
137
|
}
|
package/src/components/input.css
CHANGED
|
@@ -45,4 +45,17 @@ input[b-input] {
|
|
|
45
45
|
&.b-size-lg {
|
|
46
46
|
@apply px-3 py-0 text-base h-10 rounded-size-lg;
|
|
47
47
|
}
|
|
48
|
+
|
|
49
|
+
/* Rounded full - extra horizontal padding */
|
|
50
|
+
&.b-rounded-full {
|
|
51
|
+
@apply px-4;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&.b-size-sm.b-rounded-full {
|
|
55
|
+
@apply px-3;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&.b-size-lg.b-rounded-full {
|
|
59
|
+
@apply px-5;
|
|
60
|
+
}
|
|
48
61
|
}
|