@hotosm/hanko-auth 0.4.1 → 0.4.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.
- package/README.md +32 -0
- package/dist/hanko-auth.esm.js +2515 -1861
- package/dist/hanko-auth.iife.js +121 -86
- package/dist/hanko-auth.umd.js +121 -86
- package/package.json +3 -2
- package/src/hanko-auth.styles.ts +64 -40
- package/src/hanko-auth.ts +91 -27
- package/src/hanko-i18n-es.ts +229 -0
- package/src/hanko-i18n-fr.ts +229 -0
- package/src/hanko-i18n-pt.ts +229 -0
package/README.md
CHANGED
|
@@ -185,6 +185,38 @@ Shows full authentication form (for login pages):
|
|
|
185
185
|
></hotosm-auth>
|
|
186
186
|
```
|
|
187
187
|
|
|
188
|
+
## Styling
|
|
189
|
+
|
|
190
|
+
The component uses Shadow DOM and can be customized using CSS custom properties.
|
|
191
|
+
|
|
192
|
+
### CSS Custom Properties
|
|
193
|
+
|
|
194
|
+
| Property | Description | Default |
|
|
195
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------ |
|
|
196
|
+
| `--login-btn-margin` | Margin around the login button | `0` |
|
|
197
|
+
| `--login-btn-padding` | Padding inside the login button | `var(--hot-spacing-x-small) var(--hot-spacing-medium)` |
|
|
198
|
+
| `--login-btn-bg-color` | Background color of login button | `var(--hot-color-primary-1000)` |
|
|
199
|
+
| `--login-btn-hover-bg-color` | Background color on hover | `var(--hot-color-primary-900)` |
|
|
200
|
+
| `--login-btn-border-radius` | Border radius of login button | `var(--hot-border-radius-medium)` |
|
|
201
|
+
| `--login-btn-text-color` | Text color of login button | `white` |
|
|
202
|
+
| `--login-btn-text-size` | Font size of login button text | `var(--hot-font-size-medium)` |
|
|
203
|
+
| `--login-btn-font-family` | Font family of login button | `inherit` |
|
|
204
|
+
|
|
205
|
+
**Example:**
|
|
206
|
+
|
|
207
|
+
```css
|
|
208
|
+
hotosm-auth {
|
|
209
|
+
--login-btn-margin: 8px;
|
|
210
|
+
--login-btn-padding: 12px 24px;
|
|
211
|
+
--login-btn-bg-color: #d73f3f;
|
|
212
|
+
--login-btn-hover-bg-color: #b83333;
|
|
213
|
+
--login-btn-border-radius: 8px;
|
|
214
|
+
--login-btn-text-color: #ffffff;
|
|
215
|
+
--login-btn-text-size: 16px;
|
|
216
|
+
--login-btn-font-family: 'Arial', sans-serif;
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
188
220
|
## Configuration
|
|
189
221
|
|
|
190
222
|
### Hanko URL Detection
|