@oardi/css-utils 0.109.0 → 0.110.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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/scss/components/input-group.scss +194 -0
  3. package/scss/index.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.109.0",
3
+ "version": "0.110.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/input-group.scss ADDED
@@ -0,0 +1,194 @@
1
+ @use '../layers.scss';
2
+
3
+ @layer components {
4
+ .input-group {
5
+ --input-group-bg-color: var(--bg-surface);
6
+ --input-group-border-width: var(--border-width);
7
+ --input-group-border-color: var(--control-border-color);
8
+ --input-group-border-radius: var(--border-radius-lg);
9
+ --input-group-box-shadow: var(--shadow-sm);
10
+ --input-group-color: var(--text-color);
11
+ --input-group-addon-bg-color: var(--bg-highlight);
12
+ --input-group-addon-color: var(--text-muted);
13
+ --input-group-inset: var(--spacer-1);
14
+ --input-group-gap: var(--spacer-1);
15
+ --input-group-item-border-radius: calc(
16
+ var(--input-group-border-radius) - var(--input-group-inset)
17
+ );
18
+ --input-group-padding-y: var(--spacer-1);
19
+ --input-group-padding-x: var(--spacer-3);
20
+ --input-group-font-size: var(--font-size);
21
+ --input-group-control-min-size: 8rem;
22
+ --input-group-focus-border-color: var(--primary-hover);
23
+ --input-group-focus-outline-width: var(--focus-outline-width);
24
+ --input-group-focus-outline-style: var(--focus-outline-style);
25
+ --input-group-focus-outline-color: var(--focus-outline-color);
26
+ --input-group-focus-outline-offset: var(--focus-offset);
27
+ --input-group-invalid-color: var(--error);
28
+ --input-group-disabled-text-color: var(--disabled-text-color);
29
+ --input-group-disabled-bg-color: var(--disabled-bg-color);
30
+ --input-group-disabled-border-color: var(--disabled-border-color);
31
+ --input-group-transition-duration: var(--transition-duration);
32
+ --input-group-transition-easing: var(--transition-easing);
33
+
34
+ display: flex;
35
+ flex-wrap: wrap;
36
+ align-items: stretch;
37
+ gap: var(--input-group-gap);
38
+ max-inline-size: 100%;
39
+ padding: var(--input-group-inset);
40
+ color: var(--input-group-color);
41
+ background-color: var(--input-group-bg-color);
42
+ border: var(--input-group-border-width) solid var(--input-group-border-color);
43
+ border-radius: var(--input-group-border-radius);
44
+ box-shadow: var(--input-group-box-shadow);
45
+ overflow: clip;
46
+
47
+ transition:
48
+ background-color var(--input-group-transition-duration)
49
+ var(--input-group-transition-easing),
50
+ border-color var(--input-group-transition-duration) var(--input-group-transition-easing),
51
+ box-shadow var(--input-group-transition-duration) var(--input-group-transition-easing),
52
+ outline-offset var(--input-group-transition-duration)
53
+ var(--input-group-transition-easing);
54
+
55
+ > :where(.form-control, .form-select, .input-group-text, .btn, .icon-btn) {
56
+ margin: 0;
57
+ border: 0;
58
+ border-radius: var(--input-group-item-border-radius);
59
+ }
60
+
61
+ > :where(.form-control, .form-select) {
62
+ flex: 1 1 var(--input-group-control-min-size);
63
+ inline-size: 1%;
64
+ min-inline-size: min(100%, var(--input-group-control-min-size));
65
+ --form-control-bg-color: transparent;
66
+ --form-control-padding-y: var(--input-group-padding-y);
67
+ --form-control-padding-x: var(--input-group-padding-x);
68
+ --form-control-font-size: var(--input-group-font-size);
69
+ --form-select-bg-color: transparent;
70
+ --form-select-padding-y: var(--input-group-padding-y);
71
+ --form-select-padding-x: var(--input-group-padding-x);
72
+ --form-select-font-size: var(--input-group-font-size);
73
+ }
74
+
75
+ > :is(.form-control, .form-select):is(:focus, :focus-visible, .is-focus-visible) {
76
+ outline: 0;
77
+ outline-offset: 0;
78
+ }
79
+
80
+ > .input-group-text {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ flex: 0 0 auto;
85
+ min-inline-size: 0;
86
+ padding: var(--input-group-padding-y) var(--input-group-padding-x);
87
+ color: var(--input-group-addon-color);
88
+ background-color: var(--input-group-addon-bg-color);
89
+ font-size: var(--input-group-font-size);
90
+ line-height: var(--line-height);
91
+ white-space: nowrap;
92
+
93
+ > svg {
94
+ inline-size: 1em;
95
+ block-size: 1em;
96
+ fill: currentColor;
97
+ }
98
+ }
99
+
100
+ > :where(.btn, .icon-btn) {
101
+ flex: 0 0 auto;
102
+ --button-border-radius: var(--input-group-item-border-radius);
103
+ --button-padding-y: var(--input-group-padding-y);
104
+ --button-padding-x: var(--input-group-padding-x);
105
+ --button-font-size: var(--input-group-font-size);
106
+ --icon-button-border-radius: var(--input-group-item-border-radius);
107
+ --icon-button-size: auto;
108
+ --icon-button-padding: var(--input-group-padding-y);
109
+ }
110
+
111
+ &:focus-within,
112
+ &:has(> .is-focus-visible) {
113
+ border-color: var(--input-group-focus-border-color);
114
+ outline: var(--input-group-focus-outline-width) var(--input-group-focus-outline-style)
115
+ var(--input-group-focus-outline-color);
116
+ outline-offset: var(--input-group-focus-outline-offset);
117
+ }
118
+
119
+ &:has(> :is(.form-control, .form-select).is-invalid),
120
+ &:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
121
+ border-color: var(--input-group-invalid-color);
122
+
123
+ &:focus-within,
124
+ &:has(> .is-focus-visible) {
125
+ outline-color: var(--input-group-invalid-color);
126
+ }
127
+ }
128
+
129
+ &:has(> .form-control:disabled),
130
+ &:has(> .form-select:disabled) {
131
+ color: var(--input-group-disabled-text-color);
132
+ background-color: var(--input-group-disabled-bg-color);
133
+ border-color: var(--input-group-disabled-border-color);
134
+ box-shadow: none;
135
+
136
+ > .input-group-text {
137
+ color: var(--input-group-disabled-text-color);
138
+ background-color: var(--input-group-disabled-bg-color);
139
+ }
140
+ }
141
+ }
142
+
143
+ .was-validated .input-group:has(> :is(.form-control, .form-select):invalid) {
144
+ border-color: var(--input-group-invalid-color);
145
+
146
+ &:focus-within {
147
+ outline-color: var(--input-group-invalid-color);
148
+ }
149
+ }
150
+
151
+ .input-group:has(> :is(.form-control, .form-select).is-invalid) + .invalid-feedback,
152
+ .input-group:has(> :is(.form-control, .form-select)[aria-invalid='true']) + .invalid-feedback,
153
+ .was-validated
154
+ .input-group:has(> :is(.form-control, .form-select):invalid)
155
+ + .invalid-feedback {
156
+ display: block;
157
+ }
158
+
159
+ .input-group-sm {
160
+ --input-group-padding-y: var(--spacer-0);
161
+ --input-group-padding-x: var(--spacer-2);
162
+ --input-group-font-size: var(--font-size-sm);
163
+ --input-group-control-min-size: 7rem;
164
+ }
165
+
166
+ .input-group-lg {
167
+ --input-group-padding-y: var(--spacer-2);
168
+ --input-group-padding-x: var(--spacer-4);
169
+ --input-group-font-size: var(--font-size-lg);
170
+ --input-group-control-min-size: 10rem;
171
+ }
172
+
173
+ @media (forced-colors: active) {
174
+ .input-group {
175
+ border-color: CanvasText;
176
+
177
+ &:focus-within,
178
+ &:has(> .is-focus-visible) {
179
+ border-color: Highlight;
180
+ outline-color: Highlight;
181
+ }
182
+
183
+ &:has(> :is(.form-control, .form-select).is-invalid),
184
+ &:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
185
+ border-color: LinkText;
186
+ }
187
+
188
+ &:has(> .form-control:disabled),
189
+ &:has(> .form-select:disabled) {
190
+ border-color: GrayText;
191
+ }
192
+ }
193
+ }
194
+ }
package/scss/index.scss CHANGED
@@ -36,6 +36,7 @@
36
36
  @forward './components/expansion-panel.scss';
37
37
  @forward './components/form.scss';
38
38
  @forward './components/icon-button.scss';
39
+ @forward './components/input-group.scss';
39
40
  @forward './components/list.scss';
40
41
  @forward './components/menu.scss';
41
42
  @forward './components/modal.scss';