@lion-npm/ui 1.0.2 → 1.0.3

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 (78) hide show
  1. package/dist/index.js +2564 -0
  2. package/dist/style.css +2 -0
  3. package/package.json +20 -2
  4. package/.oxlintrc.json +0 -8
  5. package/AGENTS.md +0 -0
  6. package/Dockerfile +0 -7
  7. package/compose.yml +0 -14
  8. package/index.html +0 -15
  9. package/src/App.tsx +0 -84
  10. package/src/assets/css/buttons/buttons-android.css +0 -251
  11. package/src/assets/css/buttons/buttons-ios.css +0 -213
  12. package/src/assets/css/buttons/buttons-web.css +0 -138
  13. package/src/assets/css/custom.css +0 -8
  14. package/src/assets/css/index.css +0 -60
  15. package/src/assets/css/inputs/inputs-android.css +0 -259
  16. package/src/assets/css/inputs/inputs-bootstrap.css +0 -74
  17. package/src/assets/css/inputs/inputs-ios.css +0 -268
  18. package/src/assets/css/loadings/loading-bar.css +0 -86
  19. package/src/assets/css/modals/modals.css +0 -236
  20. package/src/components/buttons/AndroidButton.tsx +0 -43
  21. package/src/components/buttons/BootstrapButton.tsx +0 -50
  22. package/src/components/buttons/IOSButton.tsx +0 -42
  23. package/src/components/buttons/LionButton.tsx +0 -73
  24. package/src/components/inputs/AndroidInput.tsx +0 -158
  25. package/src/components/inputs/BootstrapInput.tsx +0 -106
  26. package/src/components/inputs/IOSInput.tsx +0 -163
  27. package/src/components/inputs/LionInput.tsx +0 -81
  28. package/src/components/loadings/LoadingBar.tsx +0 -21
  29. package/src/components/modals/LionModal.tsx +0 -155
  30. package/src/context/LionUIComponentsContext.tsx +0 -73
  31. package/src/features/Header.tsx +0 -83
  32. package/src/features/VariantList.tsx +0 -19
  33. package/src/features/buttons/ButtonsSection.tsx +0 -7
  34. package/src/features/buttons/components/ButtonsAndroidSection.tsx +0 -79
  35. package/src/features/buttons/components/ButtonsBootstrapSection.tsx +0 -77
  36. package/src/features/buttons/components/ButtonsCustomSection.tsx +0 -234
  37. package/src/features/buttons/components/ButtonsIOSSection.tsx +0 -78
  38. package/src/features/inputs/InputsSection.tsx +0 -7
  39. package/src/features/inputs/components/InputsAndroidSection.tsx +0 -155
  40. package/src/features/inputs/components/InputsBootstrapSection.tsx +0 -154
  41. package/src/features/inputs/components/InputsCustomSection.tsx +0 -234
  42. package/src/features/inputs/components/InputsIOSSection.tsx +0 -156
  43. package/src/features/loadings/LoadingSection.tsx +0 -5
  44. package/src/features/loadings/components/LoadingBarSection.tsx +0 -74
  45. package/src/features/modals/ModalsSection.tsx +0 -5
  46. package/src/features/modals/components/ModalsAndroidSection.tsx +0 -108
  47. package/src/features/modals/components/ModalsDefaultForm.tsx +0 -31
  48. package/src/features/modals/components/ModalsDefaultInput.tsx +0 -22
  49. package/src/features/modals/components/ModalsIOSSection.tsx +0 -106
  50. package/src/features/modals/components/ModalsWebSection.tsx +0 -104
  51. package/src/index.ts +0 -27
  52. package/src/interfaces/LionUIComponentsProviderProps.tsx +0 -7
  53. package/src/interfaces/LionUIContextProps.tsx +0 -6
  54. package/src/interfaces/LionUIState.tsx +0 -13
  55. package/src/main.tsx +0 -9
  56. package/src/types/Android/AndroidInputShapeTypes.tsx +0 -7
  57. package/src/types/Android/AndroidInputStyleTypes.tsx +0 -7
  58. package/src/types/Android/AndroidShapeTypes.tsx +0 -6
  59. package/src/types/Android/AndroidStyleTypes.tsx +0 -9
  60. package/src/types/ButtonTypes.tsx +0 -9
  61. package/src/types/IOS/IOSInputShapeTypes.tsx +0 -9
  62. package/src/types/IOS/IOSInputStyleTypes.tsx +0 -11
  63. package/src/types/IOS/IOSShapeTypes.tsx +0 -7
  64. package/src/types/IOS/IOSStyleTypes.tsx +0 -9
  65. package/src/types/InputTypes.tsx +0 -13
  66. package/src/types/PlatformTypes.tsx +0 -9
  67. package/src/types/SizeTypes.tsx +0 -11
  68. package/src/types/VariantTypes.tsx +0 -19
  69. package/src/types/Web/BootstrapInputShapeTypes.tsx +0 -9
  70. package/src/types/Web/BootstrapInputStyleTypes.tsx +0 -8
  71. package/src/types/Web/BootstrapShapeTypes.tsx +0 -8
  72. package/src/types/Web/BootstrapStyleTypes.tsx +0 -7
  73. package/tsconfig.app.json +0 -26
  74. package/tsconfig.json +0 -7
  75. package/tsconfig.node.json +0 -23
  76. package/vite.config.ts +0 -30
  77. /package/{public → dist}/favicon.svg +0 -0
  78. /package/{public → dist}/icons.svg +0 -0
@@ -1,213 +0,0 @@
1
- /* ==========================================================================
2
- iOS Human Interface Guidelines (HIG) - Base Configuration
3
- ========================================================================== */
4
-
5
- .ios-btn {
6
- /* Default CSS Variables for Color Inheritance */
7
- --btn-color: #007aff; /* Apple standard system blue */
8
- --btn-bg: var(--btn-color);
9
- --btn-text: #ffffff;
10
-
11
- position: relative;
12
- display: inline-flex;
13
- align-items: center;
14
- justify-content: center;
15
- border: none;
16
- outline: none;
17
- font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
18
- font-weight: 600;
19
- letter-spacing: -0.24px;
20
- cursor: pointer;
21
- user-select: none;
22
- -webkit-tap-highlight-color: transparent;
23
-
24
- /* Native iOS Spring Transition Mechanics */
25
- transition: opacity 0.1s ease-out, transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), background-color 0.15s ease-in-out;
26
- will-change: transform, opacity;
27
- }
28
-
29
- /* Native iOS Hover State (Desktop Web Match) */
30
- @media (hover: hover) {
31
- .ios-btn-filled:hover:not(:disabled) {
32
- filter: brightness(0.96);
33
- }
34
- .ios-btn-tinted:hover:not(:disabled) {
35
- background-color: color-mix(in srgb, var(--btn-color) 22%, transparent);
36
- }
37
- .ios-btn-gray:hover:not(:disabled) {
38
- background-color: rgba(120, 120, 128, 0.24);
39
- }
40
- .ios-btn-plain:hover:not(:disabled) {
41
- opacity: 0.8;
42
- }
43
- }
44
-
45
- /* Native iOS Active Press Behavior */
46
- .ios-btn:active:not(:disabled) {
47
- opacity: 0.55;
48
- transform: scale(0.96);
49
- transition-duration: 0.05s;
50
- }
51
-
52
- /* Shapes: HIG Continuous Curved Corners (Squircle simulation via percentage-based radii) */
53
- .ios-btn-rounded.ios-btn-sm { border-radius: 9px; }
54
- .ios-btn-rounded.ios-btn-md { border-radius: 12px; }
55
- .ios-btn-rounded.ios-btn-lg { border-radius: 16px; }
56
-
57
- .ios-btn-capsule { border-radius: 9999px; }
58
-
59
- /* Disabled State */
60
- .ios-btn.disabled,
61
- .ios-btn:disabled {
62
- opacity: 0.35 !important;
63
- cursor: not-allowed;
64
- transform: none !important;
65
- filter: none !important;
66
- }
67
-
68
- /* ==========================================================================
69
- iOS Button Styles (Filled, Tinted, Gray, Plain)
70
- ========================================================================== */
71
-
72
- /* 1. Filled Button (High Emphasis) */
73
- .ios-btn-filled {
74
- background-color: var(--btn-bg);
75
- color: var(--btn-text) !important;
76
- }
77
-
78
- /* 2. Tinted Button (Medium Emphasis) */
79
- .ios-btn-tinted {
80
- background-color: color-mix(in srgb, var(--btn-color) 15%, transparent);
81
- color: var(--btn-color) !important;
82
- }
83
-
84
- /* 3. Gray Button (Neutral Background) */
85
- .ios-btn-gray {
86
- background-color: rgba(120, 120, 128, 0.16);
87
- color: var(--btn-color) !important;
88
- }
89
-
90
- /* 4. Plain Button (Low Emphasis / Text Only) */
91
- .ios-btn-plain {
92
- background-color: transparent;
93
- color: var(--btn-color) !important;
94
- padding-left: 4px !important;
95
- padding-right: 4px !important;
96
- }
97
-
98
- /* ==========================================================================
99
- Sizes
100
- ========================================================================== */
101
-
102
- .ios-btn-sm {
103
- height: 28px;
104
- padding: 0 10px;
105
- font-size: 0.8125rem;
106
- }
107
-
108
- .ios-btn-md {
109
- height: 36px;
110
- padding: 0 16px;
111
- font-size: 0.9375rem;
112
- }
113
-
114
- .ios-btn-lg {
115
- height: 50px;
116
- padding: 0 22px;
117
- font-size: 1.0625rem;
118
- }
119
-
120
- /* ==========================================================================
121
- Color Mapping & Readability Fixes
122
- ========================================================================== */
123
-
124
- .ios-btn.btn-primary {
125
- --btn-color: var(--bs-primary, #007aff);
126
- --btn-text: #ffffff;
127
- }
128
-
129
- .ios-btn.btn-secondary {
130
- --btn-color: var(--bs-secondary, #6c757d);
131
- --btn-text: #ffffff;
132
- }
133
-
134
- .ios-btn.btn-success {
135
- --btn-color: var(--bs-success, #34c759);
136
- --btn-text: #ffffff;
137
- }
138
-
139
- .ios-btn.btn-danger {
140
- --btn-color: var(--bs-danger, #ff3b30);
141
- --btn-text: #ffffff;
142
- }
143
-
144
- .ios-btn.btn-warning {
145
- --btn-color: var(--bs-warning, #ff9500);
146
- --btn-text: #000000; /* Dark text for filled style */
147
- }
148
-
149
- .ios-btn.btn-info {
150
- --btn-color: var(--bs-info, #5ac8fa);
151
- --btn-text: #000000; /* Dark text for filled style */
152
- }
153
-
154
- /* Fix for btn-light:
155
- --btn-color uses System Gray (#8e8e93) to provide contrast in tinted, gray, and plain styles.
156
- --btn-bg handles the light background for filled style. */
157
- .ios-btn.btn-light {
158
- --btn-color: #8e8e93;
159
- --btn-bg: var(--bs-light, #e5e5ea);
160
- --btn-text: #000000;
161
- }
162
-
163
- .ios-btn.btn-dark {
164
- --btn-color: var(--bs-dark, #1c1c1e);
165
- --btn-text: #ffffff;
166
- }
167
-
168
- .ios-btn.btn-link {
169
- --btn-color: var(--bs-link-hover-color, #007aff);
170
- --btn-text: #007aff;
171
- background-color: transparent !important;
172
- text-decoration: underline;
173
- }
174
-
175
- /* Custom Lion Variants */
176
- .ios-btn.btn-lion-packages {
177
- --btn-color: var(--lion-packages, #af52de);
178
- --btn-text: #ffffff;
179
- }
180
-
181
- .ios-btn.btn-lion-parking {
182
- --btn-color: var(--lion-parking, #ff9500);
183
- --btn-text: #ffffff;
184
- }
185
-
186
- .ios-btn.btn-lion-tech {
187
- --btn-color: var(--lion-tech, #30b0c7);
188
- --btn-text: #ffffff;
189
- }
190
-
191
- .ios-btn.btn-lion-glam {
192
- --btn-color: var(--lion-glam, #ff2d55);
193
- --btn-text: #ffffff;
194
- }
195
-
196
- /* ==========================================================================
197
- Contrast Specific Overrides for Light Variations
198
- ========================================================================== */
199
-
200
- /* Ensures readable dark text for LIGHT variant in transparent/subtle styles */
201
- .ios-btn-tinted.btn-light {
202
- background-color: rgba(120, 120, 128, 0.12);
203
- color: #1c1c1e !important;
204
- }
205
-
206
- .ios-btn-gray.btn-light {
207
- background-color: rgba(120, 120, 128, 0.18);
208
- color: #1c1c1e !important;
209
- }
210
-
211
- .ios-btn-plain.btn-light {
212
- color: #1c1c1e !important;
213
- }
@@ -1,138 +0,0 @@
1
- /* ==========================================================================
2
- Bootstrap 5 Extended - Custom Lion Variants & Overrides
3
- ========================================================================== */
4
-
5
- /* Fix for Native Bootstrap Outlined Light Button Contrast on Light Backgrounds */
6
- .btn-outline-light {
7
- --bs-btn-color: #212529;
8
- --bs-btn-border-color: #ced4da; /* Visible neutral border for light background */
9
- --bs-btn-hover-color: #000000;
10
- --bs-btn-hover-bg: #f8f9fa;
11
- --bs-btn-hover-border-color: #ced4da;
12
- --bs-btn-active-color: #000000;
13
- --bs-btn-active-bg: #e9ecef;
14
- --bs-btn-active-border-color: #ced4da;
15
- --bs-btn-disabled-color: #6c757d;
16
- --bs-btn-disabled-bg: transparent;
17
- --bs-btn-disabled-border-color: #ced4da;
18
- }
19
-
20
- /* 1. Lion Packages Variant */
21
- .btn-lion-packages {
22
- --bs-btn-color: var(--lion-white);
23
- --bs-btn-bg: var(--lion-packages, #6f42c1);
24
- --bs-btn-border-color: var(--lion-packages, #6f42c1);
25
- --bs-btn-hover-color: var(--lion-white);
26
- --bs-btn-hover-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
27
- --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
28
- --bs-btn-active-color: var(--lion-white);
29
- --bs-btn-active-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
30
- --bs-btn-active-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
31
- --bs-btn-disabled-color: var(--lion-white);
32
- --bs-btn-disabled-bg: var(--lion-packages, #6f42c1);
33
- --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
34
- }
35
-
36
- .btn-outline-lion-packages {
37
- --bs-btn-color: var(--lion-packages, #6f42c1);
38
- --bs-btn-border-color: var(--lion-packages, #6f42c1);
39
- --bs-btn-hover-color: var(--lion-white);
40
- --bs-btn-hover-bg: var(--lion-packages, #6f42c1);
41
- --bs-btn-hover-border-color: var(--lion-packages, #6f42c1);
42
- --bs-btn-active-color: var(--lion-white);
43
- --bs-btn-active-bg: var(--lion-packages, #6f42c1);
44
- --bs-btn-active-border-color: var(--lion-packages, #6f42c1);
45
- --bs-btn-disabled-color: var(--lion-packages, #6f42c1);
46
- --bs-btn-disabled-bg: transparent;
47
- --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
48
- }
49
-
50
- /* 2. Lion Parking Variant */
51
- .btn-lion-parking {
52
- --bs-btn-color: var(--lion-white);
53
- --bs-btn-bg: var(--lion-parking, #fd7e14);
54
- --bs-btn-border-color: var(--lion-parking, #fd7e14);
55
- --bs-btn-hover-color: var(--lion-white);
56
- --bs-btn-hover-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
57
- --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
58
- --bs-btn-active-color: var(--lion-white);
59
- --bs-btn-active-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
60
- --bs-btn-active-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
61
- --bs-btn-disabled-color: var(--lion-white);
62
- --bs-btn-disabled-bg: var(--lion-parking, #fd7e14);
63
- --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
64
- }
65
-
66
- .btn-outline-lion-parking {
67
- --bs-btn-color: var(--lion-parking, #fd7e14);
68
- --bs-btn-border-color: var(--lion-parking, #fd7e14);
69
- --bs-btn-hover-color: var(--lion-white);
70
- --bs-btn-hover-bg: var(--lion-parking, #fd7e14);
71
- --bs-btn-hover-border-color: var(--lion-parking, #fd7e14);
72
- --bs-btn-active-color: var(--lion-white);
73
- --bs-btn-active-bg: var(--lion-parking, #fd7e14);
74
- --bs-btn-active-border-color: var(--lion-parking, #fd7e14);
75
- --bs-btn-disabled-color: var(--lion-parking, #fd7e14);
76
- --bs-btn-disabled-bg: transparent;
77
- --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
78
- }
79
-
80
- /* 3. Lion Tech Variant */
81
- .btn-lion-tech {
82
- --bs-btn-color: var(--lion-white);
83
- --bs-btn-bg: var(--lion-tech, #20c997);
84
- --bs-btn-border-color: var(--lion-tech, #20c997);
85
- --bs-btn-hover-color: var(--lion-white);
86
- --bs-btn-hover-bg: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
87
- --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
88
- --bs-btn-active-color: var(--lion-white);
89
- --bs-btn-active-bg: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
90
- --bs-btn-active-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
91
- --bs-btn-disabled-color: var(--lion-white);
92
- --bs-btn-disabled-bg: var(--lion-tech, #20c997);
93
- --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
94
- }
95
-
96
- .btn-outline-lion-tech {
97
- --bs-btn-color: var(--lion-tech, #20c997);
98
- --bs-btn-border-color: var(--lion-tech, #20c997);
99
- --bs-btn-hover-color: var(--lion-white);
100
- --bs-btn-hover-bg: var(--lion-tech, #20c997);
101
- --bs-btn-hover-border-color: var(--lion-tech, #20c997);
102
- --bs-btn-active-color: var(--lion-white);
103
- --bs-btn-active-bg: var(--lion-tech, #20c997);
104
- --bs-btn-active-border-color: var(--lion-tech, #20c997);
105
- --bs-btn-disabled-color: var(--lion-tech, #20c997);
106
- --bs-btn-disabled-bg: transparent;
107
- --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
108
- }
109
-
110
- /* 4. Lion Glam Variant */
111
- .btn-lion-glam {
112
- --bs-btn-color: var(--lion-white);
113
- --bs-btn-bg: var(--lion-glam, #e83e8c);
114
- --bs-btn-border-color: var(--lion-glam, #e83e8c);
115
- --bs-btn-hover-color: var(--lion-white);
116
- --bs-btn-hover-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
117
- --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
118
- --bs-btn-active-color: var(--lion-white);
119
- --bs-btn-active-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
120
- --bs-btn-active-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
121
- --bs-btn-disabled-color: var(--lion-white);
122
- --bs-btn-disabled-bg: var(--lion-glam, #e83e8c);
123
- --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
124
- }
125
-
126
- .btn-outline-lion-glam {
127
- --bs-btn-color: var(--lion-glam, #e83e8c);
128
- --bs-btn-border-color: var(--lion-glam, #e83e8c);
129
- --bs-btn-hover-color: var(--lion-white);
130
- --bs-btn-hover-bg: var(--lion-glam, #e83e8c);
131
- --bs-btn-hover-border-color: var(--lion-glam, #e83e8c);
132
- --bs-btn-active-color: var(--lion-white);
133
- --bs-btn-active-bg: var(--lion-glam, #e83e8c);
134
- --bs-btn-active-border-color: var(--lion-glam, #e83e8c);
135
- --bs-btn-disabled-color: var(--lion-glam, #e83e8c);
136
- --bs-btn-disabled-bg: transparent;
137
- --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
138
- }
@@ -1,8 +0,0 @@
1
- :root {
2
- --default-color: var(--lion-packages);
3
- }
4
-
5
- * {
6
- margin: 0;
7
- padding: 0;
8
- }
@@ -1,60 +0,0 @@
1
- :root {
2
- --lion-packages: #ff8731;
3
- --lion-parking: #ff8731;
4
- --lion-tech: #B11226;
5
- --lion-glam: #FF69b4;
6
- --lion-black: #111111;
7
- --lion-white: #FFFFFF;
8
- }
9
-
10
- /** Background Colors */
11
-
12
- .bg-lion-black {
13
- background-color: var(--lion-black);
14
- }
15
-
16
- .bg-lion-white {
17
- background-color: var(--lion-white);
18
- }
19
-
20
- .bg-lion-packages {
21
- background-color: var(--lion-packages);
22
- }
23
-
24
- .bg-lion-parking {
25
- background-color: var(--lion-parking);
26
- }
27
-
28
- .bg-lion-tech {
29
- background-color: var(--lion-tech);
30
- }
31
-
32
- .bg-lion-glam {
33
- background-color: var(--lion-glam);
34
- }
35
-
36
- /** Text Colors */
37
-
38
- .text-lion-black {
39
- color: var(--lion-black);
40
- }
41
-
42
- .text-lion-white {
43
- color: var(--lion-white);
44
- }
45
-
46
- .text-lion-packages {
47
- color: var(--lion-packages);
48
- }
49
-
50
- .text-lion-parking {
51
- color: var(--lion-parking);
52
- }
53
-
54
- .text-lion-glam {
55
- color: var(--lion-glam);
56
- }
57
-
58
- .text-lion-tech {
59
- color: var(--lion-tech);
60
- }
@@ -1,259 +0,0 @@
1
- /* ==========================================================================
2
- Android Material Design 3 - Isolated Input Configuration
3
- ========================================================================== */
4
-
5
- .android-input-container {
6
- --android-input-color: var(--bs-primary, #0d6efd);
7
- --android-input-label-bg: var(--bs-body-bg, #ffffff);
8
- --android-input-border-color: var(--bs-border-color, #ccc);
9
- --android-input-error-color: var(--bs-danger, #dc3545);
10
-
11
- position: relative;
12
- display: flex;
13
- flex-direction: column;
14
- width: 100%;
15
- max-width: 100%;
16
- font-family: var(--bs-body-font-family, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
17
- box-sizing: border-box;
18
- }
19
-
20
- .android-input-field-wrapper {
21
- position: relative;
22
- display: flex;
23
- align-items: center;
24
- width: 100%;
25
- max-width: 100%;
26
- box-sizing: border-box;
27
- transition: all 0.4s ease-in-out;
28
- }
29
-
30
- /* --- Real Input Element --- */
31
- .android-input-element {
32
- width: 100%;
33
- max-width: 100%;
34
- border: 1px solid var(--android-input-border-color);
35
- border-radius: var(--bs-border-radius-sm, 4px);
36
- background-color: transparent;
37
- color: var(--bs-body-color, #212529);
38
- font: inherit;
39
- font-size: 1rem;
40
- outline: none;
41
- box-sizing: border-box;
42
- transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
43
- }
44
-
45
- /* Android Sizes */
46
- .android-input-field-wrapper.android-size-normal .android-input-element {
47
- padding: 14.5px 14px;
48
- }
49
-
50
- .android-input-field-wrapper.android-size-small .android-input-element {
51
- padding: 10px 12px;
52
- font-size: 0.875rem;
53
- }
54
-
55
- /* --- Outlined Style (Default) --- */
56
- .android-input-field-wrapper.android-style-outlined {
57
- background-color: transparent;
58
- }
59
-
60
- .android-input-field-wrapper.android-style-outlined .android-input-element:focus,
61
- .android-input-field-wrapper.android-style-outlined .android-input-element:not(:placeholder-shown) {
62
- border-color: var(--android-active-color, var(--android-input-color));
63
- }
64
-
65
- .android-input-field-wrapper.android-style-outlined .android-input-element:focus {
66
- box-shadow: 0 0 0 1px var(--android-active-color, var(--android-input-color));
67
- }
68
-
69
- /* --- Filled Style --- */
70
- .android-input-field-wrapper.android-style-filled {
71
- background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 8%, var(--bs-body-bg, #ffffff));
72
- border-radius: 4px 4px 0 0;
73
- border-bottom: 1px solid var(--android-input-border-color);
74
- }
75
-
76
- .android-input-field-wrapper.android-style-filled .android-input-element {
77
- border: none;
78
- background: transparent;
79
- }
80
-
81
- /* Specific top padding for Filled based on size */
82
- .android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element {
83
- padding: 22px 14px 6px 14px;
84
- }
85
-
86
- .android-input-field-wrapper.android-style-filled.android-size-small .android-input-element {
87
- padding: 18px 12px 4px 12px;
88
- }
89
-
90
- /* Active bottom border and background for Filled with focus or value */
91
- .android-input-field-wrapper.android-style-filled.is-focused,
92
- .android-input-field-wrapper.android-style-filled:has(.android-input-element:not(:placeholder-shown)) {
93
- border-bottom: 2px solid var(--android-active-color, var(--android-input-color));
94
- background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 14%, var(--bs-body-bg, #ffffff));
95
- }
96
-
97
- /* ==========================================================================
98
- Android Floating Label Logic (Proportional to Normal and Small sizes)
99
- ========================================================================== */
100
-
101
- .android-input-label {
102
- position: absolute;
103
- left: 14px;
104
- top: 50%;
105
- transform: translateY(-50%);
106
- pointer-events: none;
107
- color: var(--bs-secondary-color, #777);
108
- font-size: 1rem;
109
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
110
- background-color: transparent;
111
- padding: 0 4px;
112
- z-index: 2;
113
- margin: 0;
114
- white-space: nowrap;
115
- max-width: calc(100% - 28px);
116
- overflow: hidden;
117
- text-overflow: ellipsis;
118
- }
119
-
120
- .android-input-field-wrapper.android-size-small .android-input-label {
121
- left: 12px;
122
- font-size: 0.875rem;
123
- max-width: calc(100% - 24px);
124
- }
125
-
126
- /* --- Outlined Floating States --- */
127
- .android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:focus ~ .android-input-label,
128
- .android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
129
- top: 0;
130
- transform: translateY(-50%);
131
- font-size: 0.75rem;
132
- color: var(--android-active-color, var(--android-input-color));
133
- background-color: var(--android-input-label-bg);
134
- }
135
-
136
- .android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:focus ~ .android-input-label,
137
- .android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
138
- top: 0;
139
- transform: translateY(-50%);
140
- font-size: 0.68rem;
141
- color: var(--android-active-color, var(--android-input-color));
142
- background-color: var(--android-input-label-bg);
143
- }
144
-
145
- /* --- Filled Floating States (Proportionally adjusted for Normal and Small) --- */
146
- .android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:focus ~ .android-input-label,
147
- .android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
148
- top: 8px;
149
- transform: translateY(0);
150
- font-size: 0.75rem;
151
- color: var(--android-active-color, var(--android-input-color));
152
- background-color: transparent;
153
- }
154
-
155
- .android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:focus ~ .android-input-label,
156
- .android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
157
- top: 5px;
158
- transform: translateY(0);
159
- font-size: 0.68rem;
160
- color: var(--android-active-color, var(--android-input-color));
161
- background-color: transparent;
162
- }
163
-
164
- /* Hide placeholder at rest */
165
- .android-input-element:not(:focus)::placeholder {
166
- color: transparent !important;
167
- }
168
-
169
- .android-input-element:focus::placeholder {
170
- color: var(--bs-secondary-color, #aaa);
171
- opacity: 0.7;
172
- }
173
-
174
- /* ==========================================================================
175
- Android Color Variants Mapping
176
- ========================================================================== */
177
- .android-input-container.android-variant-primary {
178
- --android-active-color: var(--bs-primary, #0d6efd);
179
- }
180
-
181
- .android-input-container.android-variant-secondary {
182
- --android-active-color: var(--bs-secondary, #6c757d);
183
- }
184
-
185
- .android-input-container.android-variant-success {
186
- --android-active-color: var(--bs-success, #198754);
187
- }
188
-
189
- .android-input-container.android-variant-danger {
190
- --android-active-color: var(--bs-danger, #dc3545);
191
- }
192
-
193
- .android-input-container.android-variant-warning {
194
- --android-active-color: var(--bs-warning, #ffc107);
195
- }
196
-
197
- .android-input-container.android-variant-info {
198
- --android-active-color: var(--bs-info, #0dcaf0);
199
- }
200
-
201
- .android-input-container.android-variant-dark {
202
- --android-active-color: var(--bs-dark, #212529);
203
- }
204
-
205
- /* Custom Lion Variants */
206
- .android-input-container.android-variant-lion-packages {
207
- --android-active-color: var(--lion-packages, #6f42c1);
208
- }
209
-
210
- .android-input-container.android-variant-lion-parking {
211
- --android-active-color: var(--lion-parking, #20c997);
212
- }
213
-
214
- .android-input-container.android-variant-lion-tech {
215
- --android-active-color: var(--lion-tech, #fd7e14);
216
- }
217
-
218
- .android-input-container.android-variant-lion-glam {
219
- --android-active-color: var(--lion-glam, #e83e8c);
220
- }
221
-
222
- /* --- Error States & Subtext --- */
223
- .android-input-field-wrapper.has-error {
224
- border-color: var(--android-input-error-color) !important;
225
- }
226
-
227
- .android-input-field-wrapper.has-error .android-input-element {
228
- border-color: var(--android-input-error-color) !important;
229
- }
230
-
231
- .android-input-field-wrapper.has-error .android-input-label {
232
- color: var(--android-input-error-color) !important;
233
- }
234
-
235
- .android-input-subtext-container {
236
- display: flex;
237
- justify-content: space-between;
238
- padding: 0.25rem 0.25rem 0 0.25rem;
239
- }
240
-
241
- .android-input-error-text {
242
- font-size: 0.78rem;
243
- color: var(--android-input-error-color);
244
- margin-top: 0.25rem;
245
- font-weight: 500;
246
- }
247
-
248
- .android-input-helper-text {
249
- font-size: 0.78rem;
250
- color: var(--bs-secondary-color, #777);
251
- margin-top: 0.25rem;
252
- }
253
-
254
- .android-input-counter {
255
- margin-left: auto;
256
- margin-top: 0.25rem;
257
- color: var(--bs-secondary-color, #777);
258
- font-size: 0.78rem;
259
- }