@idds/styles 1.4.4 → 1.4.7
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 +41 -17
- package/dist/base.css +35 -1
- package/dist/base.min.css +1 -1
- package/dist/index.css +60 -45
- package/dist/index.min.css +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @idds/styles
|
|
2
2
|
|
|
3
|
-
Shared CSS styles and
|
|
3
|
+
Shared CSS styles and color tokens for INA Digital Design System.
|
|
4
4
|
|
|
5
|
-
This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages. All styles are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.
|
|
5
|
+
This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages. All styles are built from scratch using pure CSS (not dependent on Tailwind CSS classes) and are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -12,7 +12,7 @@ npm install @idds/styles
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
### Import
|
|
15
|
+
### Import Complete Bundle (Recommended)
|
|
16
16
|
|
|
17
17
|
Import the main entry point which includes all components, base styles, colors, and reset:
|
|
18
18
|
|
|
@@ -29,11 +29,11 @@ Import the main entry point which includes all components, base styles, colors,
|
|
|
29
29
|
|
|
30
30
|
This will import:
|
|
31
31
|
|
|
32
|
-
- All component styles (Accordion, Button, Modal, Table, etc.)
|
|
32
|
+
- All component styles (Accordion, Button, Modal, Table, TextField, etc.)
|
|
33
33
|
- Base styles (colors, reset CSS)
|
|
34
34
|
- All color tokens and brand themes
|
|
35
35
|
|
|
36
|
-
### Import
|
|
36
|
+
### Import Base Styles Only
|
|
37
37
|
|
|
38
38
|
If you only need base styles (colors and reset) without components:
|
|
39
39
|
|
|
@@ -50,7 +50,7 @@ This will import:
|
|
|
50
50
|
- All color tokens and brand themes
|
|
51
51
|
- CSS reset styles
|
|
52
52
|
|
|
53
|
-
> **Note:** Individual component CSS files are
|
|
53
|
+
> **Note:** Individual component CSS files are not available as separate imports. All component styles are bundled into `index.css` for optimal performance. If you're using `@idds/react` or `@idds/vue`, the components already include the necessary styles via the main bundle.
|
|
54
54
|
|
|
55
55
|
### Using CDN
|
|
56
56
|
|
|
@@ -151,7 +151,7 @@ For production, it's recommended to pin to a specific version instead of `@lates
|
|
|
151
151
|
rel="stylesheet"
|
|
152
152
|
/>
|
|
153
153
|
<link
|
|
154
|
-
href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/
|
|
154
|
+
href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/bgn.min.css"
|
|
155
155
|
rel="stylesheet"
|
|
156
156
|
/>
|
|
157
157
|
```
|
|
@@ -172,11 +172,24 @@ The package is published from the `dist/` folder with the following structure:
|
|
|
172
172
|
├── css/ # Tailwind CSS v4 theme files
|
|
173
173
|
│ ├── idds.css # Default theme
|
|
174
174
|
│ ├── idds.min.css # Minified
|
|
175
|
-
│ ├──
|
|
175
|
+
│ ├── bgn.css # BGN brand theme
|
|
176
|
+
│ ├── bgn.min.css # Minified
|
|
177
|
+
│ ├── inagov.css # INAGov brand theme
|
|
178
|
+
│ ├── inaku.css # INAKu brand theme
|
|
179
|
+
│ ├── inapas.css # INAPas brand theme
|
|
180
|
+
│ ├── bkn.css # BKN brand theme
|
|
181
|
+
│ ├── lan.css # LAN brand theme
|
|
182
|
+
│ ├── panrb.css # panrb brand theme
|
|
176
183
|
│ └── ... # (with .min.css versions)
|
|
177
184
|
└── ts/ # Tailwind CSS v3 TypeScript tokens
|
|
178
185
|
├── default.ts
|
|
179
186
|
├── idds.ts
|
|
187
|
+
├── bgn.ts
|
|
188
|
+
├── inagov.ts
|
|
189
|
+
├── inaku.ts
|
|
190
|
+
├── inapas.ts
|
|
191
|
+
├── bkn.ts
|
|
192
|
+
├── lan.ts
|
|
180
193
|
├── panrb.ts
|
|
181
194
|
└── ... # Brand-specific tokens
|
|
182
195
|
```
|
|
@@ -187,13 +200,18 @@ The package is published from the `dist/` folder with the following structure:
|
|
|
187
200
|
|
|
188
201
|
This package includes CSS for all INA Digital Design System components:
|
|
189
202
|
|
|
190
|
-
- Accordion,
|
|
191
|
-
-
|
|
192
|
-
-
|
|
203
|
+
- Accordion, AccordionCard, AccordionGroup, ActionDropdown, Alert, Avatar, Badge
|
|
204
|
+
- BottomSheet, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Chip, Collapse
|
|
205
|
+
- DatePicker, Divider, Drawer, Dropdown, FieldInputTable, FileUpload, InputSearch
|
|
206
|
+
- LinearProgressIndicator, Modal, MonthPicker, MultipleChoiceGrid, OneTimePassword
|
|
207
|
+
- Pagination, PasswordInput, PhoneInput, ProgressBar, RadioInput, SelectDropdown
|
|
208
|
+
- SingleFileUpload, Skeleton, Spinner, Stepper, TabHorizontal, TabVertical
|
|
209
|
+
- Table, TableProgressBar, TextArea, TextField, ThemeToggle, TimePicker
|
|
210
|
+
- Toast, Toggle, Tooltip, YearPicker, and more...
|
|
193
211
|
|
|
194
|
-
## Tailwind CSS Integration
|
|
212
|
+
## Tailwind CSS Integration (Optional)
|
|
195
213
|
|
|
196
|
-
This package provides Tailwind CSS utilities for both Tailwind v3 and v4.
|
|
214
|
+
This package provides optional Tailwind CSS utilities for both Tailwind v3 and v4. These are **optional** and only needed if you want to use INA Digital color tokens with Tailwind utility classes in your project.
|
|
197
215
|
|
|
198
216
|
### Tailwind CSS v3
|
|
199
217
|
|
|
@@ -202,14 +220,14 @@ For Tailwind v3, use the TypeScript token files:
|
|
|
202
220
|
```js
|
|
203
221
|
// tailwind.config.js
|
|
204
222
|
import iddsTokens from '@idds/styles/tailwind/ts/idds';
|
|
205
|
-
import
|
|
223
|
+
import bgnTokens from '@idds/styles/tailwind/ts/bgn'; // Optional: brand theme
|
|
206
224
|
|
|
207
225
|
export default {
|
|
208
226
|
theme: {
|
|
209
227
|
extend: {
|
|
210
228
|
colors: {
|
|
211
229
|
...iddsTokens,
|
|
212
|
-
...
|
|
230
|
+
...bgnTokens, // Optional: extend with brand colors
|
|
213
231
|
},
|
|
214
232
|
},
|
|
215
233
|
},
|
|
@@ -241,14 +259,14 @@ For Tailwind v4, use the CSS files with `@theme` syntax:
|
|
|
241
259
|
```css
|
|
242
260
|
/* your main CSS file */
|
|
243
261
|
@import '@idds/styles/tailwind/css/idds.css';
|
|
244
|
-
@import '@idds/styles/tailwind/css/
|
|
262
|
+
@import '@idds/styles/tailwind/css/bgn.css'; /* Optional: brand theme */
|
|
245
263
|
```
|
|
246
264
|
|
|
247
265
|
Or use minified versions for production:
|
|
248
266
|
|
|
249
267
|
```css
|
|
250
268
|
@import '@idds/styles/tailwind/css/idds.min.css';
|
|
251
|
-
@import '@idds/styles/tailwind/css/
|
|
269
|
+
@import '@idds/styles/tailwind/css/bgn.min.css';
|
|
252
270
|
```
|
|
253
271
|
|
|
254
272
|
Then you can use classes like:
|
|
@@ -278,6 +296,12 @@ Then you can use classes like:
|
|
|
278
296
|
</div>
|
|
279
297
|
```
|
|
280
298
|
|
|
299
|
+
## Important Notes
|
|
300
|
+
|
|
301
|
+
- **No Tailwind Dependency**: This package does NOT require Tailwind CSS. All styles are built from scratch using pure CSS.
|
|
302
|
+
- **Tailwind Integration is Optional**: The Tailwind token files are provided as a convenience for projects that want to use INA Digital colors with Tailwind utility classes. You can use `@idds/styles` without Tailwind.
|
|
303
|
+
- **Component Styles**: Component styles use BEM-like naming convention (e.g., `ina-button`, `ina-button--primary`) and are self-contained.
|
|
304
|
+
|
|
281
305
|
## License
|
|
282
306
|
|
|
283
307
|
MIT
|
package/dist/base.css
CHANGED
|
@@ -209,20 +209,54 @@
|
|
|
209
209
|
--ina-font-black: 900;
|
|
210
210
|
|
|
211
211
|
/* Spacing */
|
|
212
|
+
--ina-spacing-0-5: 0.125rem; /* 2px */
|
|
212
213
|
--ina-spacing-1: 0.25rem; /* 4px */
|
|
214
|
+
--ina-spacing-1-5: 0.375rem; /* 6px */
|
|
213
215
|
--ina-spacing-2: 0.5rem; /* 8px */
|
|
216
|
+
--ina-spacing-2-5: 0.625rem; /* 10px */
|
|
214
217
|
--ina-spacing-3: 0.75rem; /* 12px */
|
|
215
218
|
--ina-spacing-3-5: 0.875rem; /* 14px */
|
|
216
219
|
--ina-spacing-4: 1rem; /* 16px */
|
|
220
|
+
--ina-spacing-4-5: 1.125rem; /* 18px */
|
|
217
221
|
--ina-spacing-5: 1.25rem; /* 20px */
|
|
222
|
+
--ina-spacing-5-5: 1.375rem; /* 22px */
|
|
218
223
|
--ina-spacing-6: 1.5rem; /* 24px */
|
|
224
|
+
--ina-spacing-6-5: 1.625rem; /* 26px */
|
|
225
|
+
--ina-spacing-7: 1.75rem; /* 28px */
|
|
226
|
+
--ina-spacing-7-5: 1.875rem; /* 30px */
|
|
219
227
|
--ina-spacing-8: 2rem; /* 32px */
|
|
228
|
+
--ina-spacing-8-5: 2.125rem; /* 34px */
|
|
229
|
+
--ina-spacing-9: 2.25rem; /* 36px */
|
|
230
|
+
--ina-spacing-9-5: 2.375rem; /* 38px */
|
|
220
231
|
--ina-spacing-10: 2.5rem; /* 40px */
|
|
232
|
+
--ina-spacing-10-5: 2.625rem; /* 42px */
|
|
233
|
+
--ina-spacing-11: 2.75rem; /* 44px */
|
|
234
|
+
--ina-spacing-11-5: 2.875rem; /* 46px */
|
|
221
235
|
--ina-spacing-12: 3rem; /* 48px */
|
|
236
|
+
--ina-spacing-12-5: 3.125rem; /* 50px */
|
|
237
|
+
--ina-spacing-13: 3.25rem; /* 52px */
|
|
238
|
+
--ina-spacing-13-5: 3.375rem; /* 54px */
|
|
239
|
+
--ina-spacing-14: 3.5rem; /* 56px */
|
|
240
|
+
--ina-spacing-14-5: 3.625rem; /* 58px */
|
|
241
|
+
--ina-spacing-15: 3.75rem; /* 60px */
|
|
242
|
+
--ina-spacing-15-5: 3.875rem; /* 62px */
|
|
222
243
|
--ina-spacing-16: 4rem; /* 64px */
|
|
244
|
+
--ina-spacing-16-5: 4.125rem; /* 66px */
|
|
245
|
+
--ina-spacing-17: 4.25rem; /* 68px */
|
|
246
|
+
--ina-spacing-17-5: 4.375rem; /* 70px */
|
|
247
|
+
--ina-spacing-18: 4.5rem; /* 72px */
|
|
248
|
+
--ina-spacing-18-5: 4.625rem; /* 74px */
|
|
249
|
+
--ina-spacing-19: 4.75rem; /* 76px */
|
|
250
|
+
--ina-spacing-19-5: 4.875rem; /* 78px */
|
|
223
251
|
--ina-spacing-20: 5rem; /* 80px */
|
|
252
|
+
--ina-spacing-20-5: 5.125rem; /* 82px */
|
|
253
|
+
--ina-spacing-21: 5.25rem; /* 84px */
|
|
254
|
+
--ina-spacing-21-5: 5.375rem; /* 86px */
|
|
255
|
+
--ina-spacing-22: 5.5rem; /* 88px */
|
|
256
|
+
--ina-spacing-22-5: 5.625rem; /* 90px */
|
|
257
|
+
--ina-spacing-23: 5.75rem; /* 92px */
|
|
258
|
+
--ina-spacing-23-5: 5.875rem; /* 94px */
|
|
224
259
|
--ina-spacing-24: 6rem; /* 96px */
|
|
225
|
-
|
|
226
260
|
/* Border Radius */
|
|
227
261
|
--ina-radius-sm: 0.125rem; /* 2px */
|
|
228
262
|
--ina-radius-base: 0.25rem; /* 4px */
|
package/dist/base.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");:root{--ina-neutral-25:#fff;--ina-neutral-50:#f8f8f7;--ina-neutral-100:#f5f5f5;--ina-neutral-200:#e5e5e5;--ina-neutral-300:#d4d4d4;--ina-neutral-400:#a3a3a3;--ina-neutral-500:#737373;--ina-neutral-600:#525252;--ina-neutral-700:#404040;--ina-neutral-800:#1f1f1f;--ina-neutral-900:#141414;--ina-neutral-1000:#050505;--ina-primary-25:#fff;--ina-primary-50:#f8f8f7;--ina-primary-100:#f5f5f5;--ina-primary-200:#e5e5e5;--ina-primary-300:#d4d4d4;--ina-primary-400:#a3a3a3;--ina-primary-500:#737373;--ina-primary-600:#525252;--ina-primary-700:#404040;--ina-primary-800:#1f1f1f;--ina-primary-900:#141414;--ina-primary-primary:#141414;--ina-secondary-25:#f2f9fd;--ina-secondary-50:#e3f0fb;--ina-secondary-100:#c1e3f6;--ina-secondary-200:#8accef;--ina-secondary-300:#4cb2e4;--ina-secondary-400:#269dd8;--ina-secondary-500:#177ab2;--ina-secondary-600:#146190;--ina-secondary-700:#145378;--ina-secondary-800:#164564;--ina-secondary-900:#0f2d42;--ina-blue-50:#fafcff;--ina-blue-100:#ebf3ff;--ina-blue-200:#d2e4fe;--ina-blue-300:#84b4fb;--ina-blue-400:#4d93fc;--ina-blue-500:#0968f6;--ina-blue-600:#004ab8;--ina-blue-700:#002a69;--ina-blue-800:#0a2142;--ina-blue-900:#031530;--ina-cyan-50:#fafeff;--ina-cyan-100:#ebfaff;--ina-cyan-200:#d2f3fe;--ina-cyan-300:#83defc;--ina-cyan-400:#51d0fb;--ina-cyan-500:#09bbf6;--ina-cyan-600:#008bb9;--ina-cyan-700:#00506b;--ina-cyan-800:#0a3442;--ina-cyan-900:#032530;--ina-green-50:#fafffb;--ina-green-100:#ebffef;--ina-green-200:#d2fedb;--ina-green-300:#83fc9b;--ina-green-400:#51fb73;--ina-green-500:#09f638;--ina-green-600:#00b925;--ina-green-700:#006b15;--ina-green-800:#0a4215;--ina-green-900:#03300c;--ina-lime-50:#fdfffa;--ina-lime-100:#f7ffeb;--ina-lime-200:#ecfed2;--ina-lime-300:#ccfc83;--ina-lime-400:#b7fb51;--ina-lime-500:#97f609;--ina-lime-600:#6fb900;--ina-lime-700:#406b00;--ina-lime-800:#2c420a;--ina-lime-900:#1e3003;--ina-yellow-50:#fffefa;--ina-yellow-100:#fffdeb;--ina-yellow-200:#fef9d2;--ina-yellow-300:#fcee83;--ina-yellow-400:#fbe751;--ina-yellow-500:#f6da09;--ina-yellow-600:#b9a300;--ina-yellow-700:#6b5f00;--ina-yellow-800:#423c0a;--ina-yellow-900:#302b03;--ina-orange-50:#fffdfa;--ina-orange-100:#fff3eb;--ina-orange-200:#fee4d2;--ina-orange-300:#fcb583;--ina-orange-400:#fc974f;--ina-orange-500:#f66a09;--ina-orange-600:#b84d00;--ina-orange-700:#6b2d00;--ina-orange-800:#42210a;--ina-orange-900:#301603;--ina-red-50:snow;--ina-red-100:#ffebeb;--ina-red-200:#fed2d2;--ina-red-300:#fb8383;--ina-red-400:#fc4f4f;--ina-red-500:#f60909;--ina-red-600:#b80000;--ina-red-700:#6b0000;--ina-red-800:#420a0a;--ina-red-900:#300303;--ina-pink-50:#fffafd;--ina-pink-100:#ffebf8;--ina-pink-200:#fed2ef;--ina-pink-300:#fc83d3;--ina-pink-400:#fb51c2;--ina-pink-500:#f609a7;--ina-pink-600:#b9007b;--ina-pink-700:#6b0047;--ina-pink-800:#420a2f;--ina-pink-900:#300321;--ina-magenta-50:#fefaff;--ina-magenta-100:#fbebff;--ina-magenta-200:#f5d2fe;--ina-magenta-300:#e483fc;--ina-magenta-400:#d951fb;--ina-magenta-500:#c709f6;--ina-magenta-600:#9400b9;--ina-magenta-700:#56006b;--ina-magenta-800:#370a42;--ina-magenta-900:#270330;--ina-purple-50:#fdfaff;--ina-purple-100:#f7ebff;--ina-purple-200:#ecd2fe;--ina-purple-300:#cc83fc;--ina-purple-400:#b751fb;--ina-purple-500:#9709f6;--ina-purple-600:#6f00b9;--ina-purple-700:#40006b;--ina-purple-800:#2c0a42;--ina-purple-900:#1e0330;--ina-indigo-50:#fafaff;--ina-indigo-100:#ebeaff;--ina-indigo-200:#d2d3fe;--ina-indigo-300:#8387fc;--ina-indigo-400:#5157fb;--ina-indigo-500:#0911f6;--ina-indigo-600:#0006b9;--ina-indigo-700:#00046b;--ina-indigo-800:#0a0c42;--ina-indigo-900:#030630;--ina-overlay:#1f1f1f7a;--ina-font-3xs:0.5rem;--ina-font-2xs:0.625rem;--ina-font-xs:0.75rem;--ina-font-sm:0.875rem;--ina-font-base:1rem;--ina-font-lg:1.125rem;--ina-font-xl:1.25rem;--ina-font-2xl:1.5rem;--ina-font-3xl:1.875rem;--ina-font-4xl:2.25rem;--ina-line-height-xs:1rem;--ina-line-height-sm:1.25rem;--ina-line-height-base:1.5rem;--ina-line-height-lg:1.75rem;--ina-line-height-xl:2rem;--ina-font-thin:100;--ina-font-extralight:200;--ina-font-light:300;--ina-font-normal:400;--ina-font-medium:500;--ina-font-semibold:600;--ina-font-bold:700;--ina-font-extrabold:800;--ina-font-black:900;--ina-spacing-1:0.25rem;--ina-spacing-2:0.5rem;--ina-spacing-3:0.75rem;--ina-spacing-3-5:0.875rem;--ina-spacing-4:1rem;--ina-spacing-5:1.25rem;--ina-spacing-6:1.5rem;--ina-spacing-8:2rem;--ina-spacing-10:2.5rem;--ina-spacing-12:3rem;--ina-spacing-16:4rem;--ina-spacing-20:5rem;--ina-spacing-24:6rem;--ina-radius-sm:0.125rem;--ina-radius-base:0.25rem;--ina-radius-md:0.375rem;--ina-radius-lg:0.5rem;--ina-radius-xl:0.75rem;--ina-radius-2xl:1rem;--ina-radius-full:9999px;--ina-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--ina-shadow-base:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--ina-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--ina-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--ina-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--ina-transition-fast:150ms ease-in-out;--ina-transition-base:200ms ease-in-out;--ina-transition-slow:300ms ease-in-out;--ina-breakpoint-sm:640px;--ina-breakpoint-md:768px;--ina-breakpoint-lg:1024px;--ina-breakpoint-xl:1280px}[data-brand=inapas]{--ina-primary-25:#fef2f2;--ina-primary-50:#f9dcdc;--ina-primary-100:#f9cdc7;--ina-primary-200:#ffa194;--ina-primary-300:#ff5f42;--ina-primary-400:#e8422d;--ina-primary-500:#cc1515;--ina-primary-600:#a00000;--ina-primary-700:#680000;--ina-primary-800:#290404;--ina-primary-900:#140202;--ina-primary-primary:#cc1515;--ina-accent-100:#f6fef9!important;--ina-accent-200:#ecfef3!important;--ina-accent-300:#d1fadf!important;--ina-accent-400:#a6f4c5!important;--ina-accent-500:#12b76a!important;--ina-accent-600:#039855!important;--ina-accent-700:#027a48!important;--ina-inapas-brand-hover:#155eef!important;--ina-inapas-neutral-hover:#f9fafb!important}[data-brand=inagov]{--ina-primary-25:#f6f9ff;--ina-primary-50:#eff5fd;--ina-primary-100:#c0d7f9;--ina-primary-200:#a1c4f5;--ina-primary-300:#629cef;--ina-primary-400:#196bcd;--ina-primary-500:#0956c3;--ina-primary-600:#0a489f;--ina-primary-700:#083575;--ina-primary-800:#022a5b;--ina-primary-900:#041225;--ina-primary-primary:#629cef;--ina-secondary-25:#fff;--ina-secondary-50:#fff;--ina-secondary-100:#fff;--ina-secondary-200:#fff5ee;--ina-secondary-300:#ffe8cc;--ina-secondary-400:#ffd2a6;--ina-secondary-500:#edb98a;--ina-secondary-600:#d39663;--ina-secondary-700:#cc1515;--ina-accent-100:#fff!important;--ina-accent-200:#fff5ee!important;--ina-accent-300:#ffe8cc!important;--ina-accent-400:#ffd2a6!important;--ina-accent-500:#edb98a!important;--ina-accent-600:#d39663!important;--ina-accent-700:#cc1515!important;--ina-brand-hover:#588cd7!important;--ina-neutral-hover:#edeff5!important}[data-brand=inaku]{--ina-primary-25:#e8f1fc;--ina-primary-50:#d9e9f9;--ina-primary-100:#abd1ff;--ina-primary-200:#629cef;--ina-primary-300:#3a78c1;--ina-primary-400:#194472;--ina-primary-500:#06264d;--ina-primary-600:#041d35;--ina-primary-700:#020f1f;--ina-primary-800:#020b17;--ina-primary-900:#01080f;--ina-primary-primary:#06264d;--ina-accent-100:#fff!important;--ina-accent-200:#6a7d94!important;--ina-accent-300:#06264d!important;--ina-accent-400:#051c3a!important;--ina-accent-500:#031327!important;--ina-accent-600:#000!important;--ina-accent-700:#6a7d94!important;--ina-inaku-brand-hover:#b81313!important;--ina-inaku-neutral-hover:#fafafa!important}[data-brand=bgn]{--ina-primary-50:#eff6ff;--ina-primary-100:#dbeafe;--ina-primary-200:#bfdbfe;--ina-primary-300:#93c5fd;--ina-primary-400:#60a5fa;--ina-primary-500:#3b82f6;--ina-primary-600:#2563eb;--ina-primary-700:#1d4ed8;--ina-primary-800:#1e40af;--ina-primary-900:#1e3a8a;--ina-primary-primary:#005494;--ina-bgn-brand-primary:#005494!important;--ina-bgn-stroke-primary:#ededed!important;--ina-background-tertiary:#f5f5f5!important;--ina-sentiment-info-400:#528aff!important;--ina-sentiment-info-500:#2871ff!important;--ina-sentiment-positive-500:#12b76a!important;--ina-sentiment-warning-500:#f79009!important;--ina-accent-coral-orange:#ff7b5a!important;--ina-accent-yellow:#ffcb00!important}[data-brand=bkn]{--ina-primary-25:#fdf2f7;--ina-primary-50:#fde6f1;--ina-primary-100:#fdcde3;--ina-primary-200:#fca5cb;--ina-primary-300:#f96da7;--ina-primary-400:#f24286;--ina-primary-500:#de1d5e;--ina-primary-600:#c41249;--ina-primary-700:#a2123c;--ina-primary-800:#871436;--ina-primary-900:#53041a;--ina-primary-primary:#de1d5e;--ina-secondary-25:#f2f9fd;--ina-secondary-50:#e3f0fb;--ina-secondary-100:#c1e3f6;--ina-secondary-200:#8accef;--ina-secondary-300:#4cb2e4;--ina-secondary-400:#269dd8;--ina-secondary-500:#177ab2;--ina-secondary-600:#146190;--ina-secondary-700:#145378;--ina-secondary-800:#164564;--ina-secondary-900:#0f2d42;--ina-bkn-brand-hover:#c41249!important;--ina-bkn-neutral-hover:#fafafa!important}[data-brand=lan]{--ina-primary-25:#f3f6fc;--ina-primary-50:#e5edf9;--ina-primary-100:#c6daf1;--ina-primary-200:#94bde5;--ina-primary-300:#5b9bd5;--ina-primary-400:#3781c7;--ina-primary-500:#2663a3;--ina-primary-600:#1f4f85;--ina-primary-700:#1e446e;--ina-primary-800:#1e3a5c;--ina-primary-900:#14263d;--ina-primary-primary:#2663a3;--ina-secondary-25:#fffdeb;--ina-secondary-50:#fdf9c8;--ina-secondary-100:#fbf38c;--ina-secondary-200:#f9e650;--ina-secondary-300:#f7d628;--ina-secondary-400:#f2bd1d;--ina-secondary-500:#d69009;--ina-secondary-600:#b1670c;--ina-secondary-700:#905110;--ina-secondary-800:#764111;--ina-secondary-900:#442204;--ina-accent-red:#a40f0a;--ina-accent-green:#1cbd19;--ina-accent-blue:#0a35c0;--ina-accent-orange:#f08519;--ina-lan-brand-hover:#1f4f85!important;--ina-lan-neutral-hover:#fafafa!important}[data-brand=panrb]{--ina-primary-25:#fdf3f3;--ina-primary-50:#fce4e4;--ina-primary-100:#facecf;--ina-primary-200:#f5acad;--ina-primary-300:#ed7c7e;--ina-primary-400:#e15254;--ina-primary-500:#cd3537;--ina-primary-600:#b42b2d;--ina-primary-700:#8f2527;--ina-primary-800:#772526;--ina-primary-900:#400f10;--ina-primary-primary:#b42b2d;--ina-secondary-25:#f8f7f8;--ina-secondary-50:#f0eeee;--ina-secondary-100:#ded9da;--ina-secondary-200:#c1b8bb;--ina-secondary-300:#9f9196;--ina-secondary-400:#847379;--ina-secondary-500:#6c5d62;--ina-secondary-600:#584c50;--ina-secondary-700:#4b4144;--ina-secondary-800:#41393b;--ina-secondary-900:#231f20;--ina-accent-yellow:#f2c548}:root,[data-theme=light]{--ina-white:var(--ina-neutral-25);--ina-black:var(--ina-neutral-900);--ina-background-primary:var(--ina-neutral-25);--ina-background-secondary:var(--ina-neutral-50);--ina-background-tertiary:var(--ina-neutral-100);--ina-background-overlay:var(--ina-overlay);--ina-content-primary:var(--ina-neutral-800);--ina-content-secondary:var(--ina-neutral-600);--ina-content-tertiary:var(--ina-neutral-400);--ina-content-guide:var(--ina-blue-500);--ina-content-negative:var(--ina-red-600);--ina-content-positive:var(--ina-green-600);--ina-stroke-primary:var(--ina-neutral-200);--ina-stroke-secondary:var(--ina-neutral-400);--ina-stroke-tertiary:var(--ina-neutral-900);--ina-guide-50:var(--ina-blue-50);--ina-guide-100:var(--ina-blue-100);--ina-guide-200:var(--ina-blue-200);--ina-guide-300:var(--ina-blue-300);--ina-guide-400:var(--ina-blue-400);--ina-guide-500:var(--ina-blue-500);--ina-guide-600:var(--ina-blue-600);--ina-guide-700:var(--ina-blue-700);--ina-guide-800:var(--ina-blue-800);--ina-guide-900:var(--ina-blue-900);--ina-negative-50:var(--ina-red-50);--ina-negative-100:var(--ina-red-100);--ina-negative-200:var(--ina-red-200);--ina-negative-300:var(--ina-red-300);--ina-negative-400:var(--ina-red-400);--ina-negative-500:var(--ina-red-500);--ina-negative-600:var(--ina-red-600);--ina-negative-700:var(--ina-red-700);--ina-negative-800:var(--ina-red-800);--ina-negative-900:var(--ina-red-900);--ina-sentiment-negative-50:var(--ina-red-50);--ina-sentiment-negative-100:var(--ina-red-100);--ina-sentiment-negative-200:var(--ina-red-200);--ina-sentiment-negative-300:var(--ina-red-300);--ina-sentiment-negative-400:var(--ina-red-400);--ina-sentiment-negative-500:var(--ina-red-500);--ina-sentiment-negative-600:var(--ina-red-600);--ina-sentiment-negative-700:var(--ina-red-700);--ina-sentiment-negative-800:var(--ina-red-800);--ina-sentiment-negative-900:var(--ina-red-900);--ina-positive-50:var(--ina-green-50);--ina-positive-100:var(--ina-green-100);--ina-positive-200:var(--ina-green-200);--ina-positive-300:var(--ina-green-300);--ina-positive-400:var(--ina-green-400);--ina-positive-500:var(--ina-green-500);--ina-positive-600:var(--ina-green-600);--ina-positive-700:var(--ina-green-700);--ina-positive-800:var(--ina-green-800);--ina-positive-900:var(--ina-green-900);--ina-sentiment-positive-50:var(--ina-green-50);--ina-sentiment-positive-100:var(--ina-green-100);--ina-sentiment-positive-200:var(--ina-green-200);--ina-sentiment-positive-300:var(--ina-green-300);--ina-sentiment-positive-400:var(--ina-green-400);--ina-sentiment-positive-500:var(--ina-green-500);--ina-sentiment-positive-600:var(--ina-green-600);--ina-sentiment-positive-700:var(--ina-green-700);--ina-sentiment-positive-800:var(--ina-green-800);--ina-warning-50:var(--ina-orange-50);--ina-warning-100:var(--ina-orange-100);--ina-warning-200:var(--ina-orange-200);--ina-warning-300:var(--ina-orange-300);--ina-warning-400:var(--ina-orange-400);--ina-warning-500:var(--ina-orange-500);--ina-warning-600:var(--ina-orange-600);--ina-warning-700:var(--ina-orange-700);--ina-warning-800:var(--ina-orange-800);--ina-warning-900:var(--ina-orange-900);--ina-sentiment-warning-50:var(--ina-orange-50);--ina-sentiment-warning-100:var(--ina-orange-100);--ina-sentiment-warning-200:var(--ina-orange-200);--ina-sentiment-warning-300:var(--ina-orange-300);--ina-sentiment-warning-400:var(--ina-orange-400);--ina-sentiment-warning-500:var(--ina-orange-500);--ina-sentiment-warning-600:var(--ina-orange-600);--ina-sentiment-warning-700:var(--ina-orange-700);--ina-sentiment-warning-800:var(--ina-orange-800)}[data-theme=dark]{--ina-white:var(--ina-neutral-900);--ina-black:var(--ina-neutral-25);--ina-background-primary:var(--ina-neutral-900);--ina-background-secondary:var(--ina-neutral-800);--ina-background-tertiary:var(--ina-neutral-700);--ina-background-overlay:var(--ina-overlay);--ina-content-primary:var(--ina-neutral-25);--ina-content-secondary:var(--ina-neutral-400);--ina-content-tertiary:var(--ina-neutral-500);--ina-content-guide:var(--ina-blue-400);--ina-content-negative:var(--ina-red-400);--ina-content-positive:var(--ina-green-400);--ina-stroke-primary:var(--ina-neutral-700);--ina-stroke-secondary:var(--ina-neutral-400);--ina-stroke-tertiary:var(--ina-neutral-200);--ina-guide-50:var(--ina-blue-50);--ina-guide-100:var(--ina-blue-100);--ina-guide-200:var(--ina-blue-200);--ina-guide-300:var(--ina-blue-300);--ina-guide-400:var(--ina-blue-400);--ina-guide-500:var(--ina-blue-500);--ina-guide-600:var(--ina-blue-600);--ina-guide-700:var(--ina-blue-700);--ina-guide-800:var(--ina-blue-800);--ina-guide-900:var(--ina-blue-900);--ina-negative-50:var(--ina-red-50);--ina-negative-100:var(--ina-red-100);--ina-negative-200:var(--ina-red-200);--ina-negative-300:var(--ina-red-300);--ina-negative-400:var(--ina-red-400);--ina-negative-500:var(--ina-red-500);--ina-negative-600:var(--ina-red-600);--ina-negative-700:var(--ina-red-700);--ina-negative-800:var(--ina-red-800);--ina-negative-900:var(--ina-red-900);--ina-sentiment-negative-50:var(--ina-red-50);--ina-sentiment-negative-100:var(--ina-red-100);--ina-sentiment-negative-200:var(--ina-red-200);--ina-sentiment-negative-300:var(--ina-red-300);--ina-sentiment-negative-400:var(--ina-red-400);--ina-sentiment-negative-500:var(--ina-red-500);--ina-sentiment-negative-600:var(--ina-red-600);--ina-sentiment-negative-700:var(--ina-red-700);--ina-sentiment-negative-800:var(--ina-red-800);--ina-sentiment-negative-900:var(--ina-red-900);--ina-positive-50:var(--ina-green-50);--ina-positive-100:var(--ina-green-100);--ina-positive-200:var(--ina-green-200);--ina-positive-300:var(--ina-green-300);--ina-positive-400:var(--ina-green-400);--ina-positive-500:var(--ina-green-500);--ina-positive-600:var(--ina-green-600);--ina-positive-700:var(--ina-green-700);--ina-positive-800:var(--ina-green-800);--ina-positive-900:var(--ina-green-900);--ina-sentiment-positive-50:var(--ina-green-50);--ina-sentiment-positive-100:var(--ina-green-100);--ina-sentiment-positive-200:var(--ina-green-200);--ina-sentiment-positive-300:var(--ina-green-300);--ina-sentiment-positive-400:var(--ina-green-400);--ina-sentiment-positive-500:var(--ina-green-500);--ina-sentiment-positive-600:var(--ina-green-600);--ina-sentiment-positive-700:var(--ina-green-700);--ina-sentiment-positive-800:var(--ina-green-800);--ina-warning-50:var(--ina-orange-50);--ina-warning-100:var(--ina-orange-100);--ina-warning-200:var(--ina-orange-200);--ina-warning-300:var(--ina-orange-300);--ina-warning-400:var(--ina-orange-400);--ina-warning-500:var(--ina-orange-500);--ina-warning-600:var(--ina-orange-600);--ina-warning-700:var(--ina-orange-700);--ina-warning-800:var(--ina-orange-800);--ina-warning-900:var(--ina-orange-900);--ina-sentiment-warning-50:var(--ina-orange-50);--ina-sentiment-warning-100:var(--ina-orange-100);--ina-sentiment-warning-200:var(--ina-orange-200);--ina-sentiment-warning-300:var(--ina-orange-300);--ina-sentiment-warning-400:var(--ina-orange-400);--ina-sentiment-warning-500:var(--ina-orange-500);--ina-sentiment-warning-600:var(--ina-orange-600);--ina-sentiment-warning-700:var(--ina-orange-700);--ina-sentiment-warning-800:var(--ina-orange-800);--ina-sentiment-warning-900:var(--ina-orange-900)}*,:after,:before{box-sizing:border-box}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}button:focus,input,input:focus,select,select:focus,textarea,textarea:focus{box-shadow:none;outline:none}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}textarea{resize:vertical}select{background:transparent;background-image:none;outline:none}button,select{-webkit-appearance:none;-moz-appearance:none;appearance:none}button{cursor:pointer}input[type=color],input[type=file],input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}optgroup{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}table{border-collapse:collapse;border-color:inherit;border-spacing:0;text-indent:0;width:100%}abbr,address,article,aside,cite,code,del,dfn,figure,footer,header,ins,kbd,main,mark,nav,samp,section,small,sub,sup{display:block}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}code,kbd,samp{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}mark{background-color:var(--ina-background-tertiary);color:var(--ina-black)}del{text-decoration:line-through}ins{text-decoration:underline}dfn{font-style:italic}
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");:root{--ina-neutral-25:#fff;--ina-neutral-50:#f8f8f7;--ina-neutral-100:#f5f5f5;--ina-neutral-200:#e5e5e5;--ina-neutral-300:#d4d4d4;--ina-neutral-400:#a3a3a3;--ina-neutral-500:#737373;--ina-neutral-600:#525252;--ina-neutral-700:#404040;--ina-neutral-800:#1f1f1f;--ina-neutral-900:#141414;--ina-neutral-1000:#050505;--ina-primary-25:#fff;--ina-primary-50:#f8f8f7;--ina-primary-100:#f5f5f5;--ina-primary-200:#e5e5e5;--ina-primary-300:#d4d4d4;--ina-primary-400:#a3a3a3;--ina-primary-500:#737373;--ina-primary-600:#525252;--ina-primary-700:#404040;--ina-primary-800:#1f1f1f;--ina-primary-900:#141414;--ina-primary-primary:#141414;--ina-secondary-25:#f2f9fd;--ina-secondary-50:#e3f0fb;--ina-secondary-100:#c1e3f6;--ina-secondary-200:#8accef;--ina-secondary-300:#4cb2e4;--ina-secondary-400:#269dd8;--ina-secondary-500:#177ab2;--ina-secondary-600:#146190;--ina-secondary-700:#145378;--ina-secondary-800:#164564;--ina-secondary-900:#0f2d42;--ina-blue-50:#fafcff;--ina-blue-100:#ebf3ff;--ina-blue-200:#d2e4fe;--ina-blue-300:#84b4fb;--ina-blue-400:#4d93fc;--ina-blue-500:#0968f6;--ina-blue-600:#004ab8;--ina-blue-700:#002a69;--ina-blue-800:#0a2142;--ina-blue-900:#031530;--ina-cyan-50:#fafeff;--ina-cyan-100:#ebfaff;--ina-cyan-200:#d2f3fe;--ina-cyan-300:#83defc;--ina-cyan-400:#51d0fb;--ina-cyan-500:#09bbf6;--ina-cyan-600:#008bb9;--ina-cyan-700:#00506b;--ina-cyan-800:#0a3442;--ina-cyan-900:#032530;--ina-green-50:#fafffb;--ina-green-100:#ebffef;--ina-green-200:#d2fedb;--ina-green-300:#83fc9b;--ina-green-400:#51fb73;--ina-green-500:#09f638;--ina-green-600:#00b925;--ina-green-700:#006b15;--ina-green-800:#0a4215;--ina-green-900:#03300c;--ina-lime-50:#fdfffa;--ina-lime-100:#f7ffeb;--ina-lime-200:#ecfed2;--ina-lime-300:#ccfc83;--ina-lime-400:#b7fb51;--ina-lime-500:#97f609;--ina-lime-600:#6fb900;--ina-lime-700:#406b00;--ina-lime-800:#2c420a;--ina-lime-900:#1e3003;--ina-yellow-50:#fffefa;--ina-yellow-100:#fffdeb;--ina-yellow-200:#fef9d2;--ina-yellow-300:#fcee83;--ina-yellow-400:#fbe751;--ina-yellow-500:#f6da09;--ina-yellow-600:#b9a300;--ina-yellow-700:#6b5f00;--ina-yellow-800:#423c0a;--ina-yellow-900:#302b03;--ina-orange-50:#fffdfa;--ina-orange-100:#fff3eb;--ina-orange-200:#fee4d2;--ina-orange-300:#fcb583;--ina-orange-400:#fc974f;--ina-orange-500:#f66a09;--ina-orange-600:#b84d00;--ina-orange-700:#6b2d00;--ina-orange-800:#42210a;--ina-orange-900:#301603;--ina-red-50:snow;--ina-red-100:#ffebeb;--ina-red-200:#fed2d2;--ina-red-300:#fb8383;--ina-red-400:#fc4f4f;--ina-red-500:#f60909;--ina-red-600:#b80000;--ina-red-700:#6b0000;--ina-red-800:#420a0a;--ina-red-900:#300303;--ina-pink-50:#fffafd;--ina-pink-100:#ffebf8;--ina-pink-200:#fed2ef;--ina-pink-300:#fc83d3;--ina-pink-400:#fb51c2;--ina-pink-500:#f609a7;--ina-pink-600:#b9007b;--ina-pink-700:#6b0047;--ina-pink-800:#420a2f;--ina-pink-900:#300321;--ina-magenta-50:#fefaff;--ina-magenta-100:#fbebff;--ina-magenta-200:#f5d2fe;--ina-magenta-300:#e483fc;--ina-magenta-400:#d951fb;--ina-magenta-500:#c709f6;--ina-magenta-600:#9400b9;--ina-magenta-700:#56006b;--ina-magenta-800:#370a42;--ina-magenta-900:#270330;--ina-purple-50:#fdfaff;--ina-purple-100:#f7ebff;--ina-purple-200:#ecd2fe;--ina-purple-300:#cc83fc;--ina-purple-400:#b751fb;--ina-purple-500:#9709f6;--ina-purple-600:#6f00b9;--ina-purple-700:#40006b;--ina-purple-800:#2c0a42;--ina-purple-900:#1e0330;--ina-indigo-50:#fafaff;--ina-indigo-100:#ebeaff;--ina-indigo-200:#d2d3fe;--ina-indigo-300:#8387fc;--ina-indigo-400:#5157fb;--ina-indigo-500:#0911f6;--ina-indigo-600:#0006b9;--ina-indigo-700:#00046b;--ina-indigo-800:#0a0c42;--ina-indigo-900:#030630;--ina-overlay:#1f1f1f7a;--ina-font-3xs:0.5rem;--ina-font-2xs:0.625rem;--ina-font-xs:0.75rem;--ina-font-sm:0.875rem;--ina-font-base:1rem;--ina-font-lg:1.125rem;--ina-font-xl:1.25rem;--ina-font-2xl:1.5rem;--ina-font-3xl:1.875rem;--ina-font-4xl:2.25rem;--ina-line-height-xs:1rem;--ina-line-height-sm:1.25rem;--ina-line-height-base:1.5rem;--ina-line-height-lg:1.75rem;--ina-line-height-xl:2rem;--ina-font-thin:100;--ina-font-extralight:200;--ina-font-light:300;--ina-font-normal:400;--ina-font-medium:500;--ina-font-semibold:600;--ina-font-bold:700;--ina-font-extrabold:800;--ina-font-black:900;--ina-spacing-0-5:0.125rem;--ina-spacing-1:0.25rem;--ina-spacing-1-5:0.375rem;--ina-spacing-2:0.5rem;--ina-spacing-2-5:0.625rem;--ina-spacing-3:0.75rem;--ina-spacing-3-5:0.875rem;--ina-spacing-4:1rem;--ina-spacing-4-5:1.125rem;--ina-spacing-5:1.25rem;--ina-spacing-5-5:1.375rem;--ina-spacing-6:1.5rem;--ina-spacing-6-5:1.625rem;--ina-spacing-7:1.75rem;--ina-spacing-7-5:1.875rem;--ina-spacing-8:2rem;--ina-spacing-8-5:2.125rem;--ina-spacing-9:2.25rem;--ina-spacing-9-5:2.375rem;--ina-spacing-10:2.5rem;--ina-spacing-10-5:2.625rem;--ina-spacing-11:2.75rem;--ina-spacing-11-5:2.875rem;--ina-spacing-12:3rem;--ina-spacing-12-5:3.125rem;--ina-spacing-13:3.25rem;--ina-spacing-13-5:3.375rem;--ina-spacing-14:3.5rem;--ina-spacing-14-5:3.625rem;--ina-spacing-15:3.75rem;--ina-spacing-15-5:3.875rem;--ina-spacing-16:4rem;--ina-spacing-16-5:4.125rem;--ina-spacing-17:4.25rem;--ina-spacing-17-5:4.375rem;--ina-spacing-18:4.5rem;--ina-spacing-18-5:4.625rem;--ina-spacing-19:4.75rem;--ina-spacing-19-5:4.875rem;--ina-spacing-20:5rem;--ina-spacing-20-5:5.125rem;--ina-spacing-21:5.25rem;--ina-spacing-21-5:5.375rem;--ina-spacing-22:5.5rem;--ina-spacing-22-5:5.625rem;--ina-spacing-23:5.75rem;--ina-spacing-23-5:5.875rem;--ina-spacing-24:6rem;--ina-radius-sm:0.125rem;--ina-radius-base:0.25rem;--ina-radius-md:0.375rem;--ina-radius-lg:0.5rem;--ina-radius-xl:0.75rem;--ina-radius-2xl:1rem;--ina-radius-full:9999px;--ina-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--ina-shadow-base:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--ina-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--ina-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--ina-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--ina-transition-fast:150ms ease-in-out;--ina-transition-base:200ms ease-in-out;--ina-transition-slow:300ms ease-in-out;--ina-breakpoint-sm:640px;--ina-breakpoint-md:768px;--ina-breakpoint-lg:1024px;--ina-breakpoint-xl:1280px}[data-brand=inapas]{--ina-primary-25:#fef2f2;--ina-primary-50:#f9dcdc;--ina-primary-100:#f9cdc7;--ina-primary-200:#ffa194;--ina-primary-300:#ff5f42;--ina-primary-400:#e8422d;--ina-primary-500:#cc1515;--ina-primary-600:#a00000;--ina-primary-700:#680000;--ina-primary-800:#290404;--ina-primary-900:#140202;--ina-primary-primary:#cc1515;--ina-accent-100:#f6fef9!important;--ina-accent-200:#ecfef3!important;--ina-accent-300:#d1fadf!important;--ina-accent-400:#a6f4c5!important;--ina-accent-500:#12b76a!important;--ina-accent-600:#039855!important;--ina-accent-700:#027a48!important;--ina-inapas-brand-hover:#155eef!important;--ina-inapas-neutral-hover:#f9fafb!important}[data-brand=inagov]{--ina-primary-25:#f6f9ff;--ina-primary-50:#eff5fd;--ina-primary-100:#c0d7f9;--ina-primary-200:#a1c4f5;--ina-primary-300:#629cef;--ina-primary-400:#196bcd;--ina-primary-500:#0956c3;--ina-primary-600:#0a489f;--ina-primary-700:#083575;--ina-primary-800:#022a5b;--ina-primary-900:#041225;--ina-primary-primary:#629cef;--ina-secondary-25:#fff;--ina-secondary-50:#fff;--ina-secondary-100:#fff;--ina-secondary-200:#fff5ee;--ina-secondary-300:#ffe8cc;--ina-secondary-400:#ffd2a6;--ina-secondary-500:#edb98a;--ina-secondary-600:#d39663;--ina-secondary-700:#cc1515;--ina-accent-100:#fff!important;--ina-accent-200:#fff5ee!important;--ina-accent-300:#ffe8cc!important;--ina-accent-400:#ffd2a6!important;--ina-accent-500:#edb98a!important;--ina-accent-600:#d39663!important;--ina-accent-700:#cc1515!important;--ina-brand-hover:#588cd7!important;--ina-neutral-hover:#edeff5!important}[data-brand=inaku]{--ina-primary-25:#e8f1fc;--ina-primary-50:#d9e9f9;--ina-primary-100:#abd1ff;--ina-primary-200:#629cef;--ina-primary-300:#3a78c1;--ina-primary-400:#194472;--ina-primary-500:#06264d;--ina-primary-600:#041d35;--ina-primary-700:#020f1f;--ina-primary-800:#020b17;--ina-primary-900:#01080f;--ina-primary-primary:#06264d;--ina-accent-100:#fff!important;--ina-accent-200:#6a7d94!important;--ina-accent-300:#06264d!important;--ina-accent-400:#051c3a!important;--ina-accent-500:#031327!important;--ina-accent-600:#000!important;--ina-accent-700:#6a7d94!important;--ina-inaku-brand-hover:#b81313!important;--ina-inaku-neutral-hover:#fafafa!important}[data-brand=bgn]{--ina-primary-50:#eff6ff;--ina-primary-100:#dbeafe;--ina-primary-200:#bfdbfe;--ina-primary-300:#93c5fd;--ina-primary-400:#60a5fa;--ina-primary-500:#3b82f6;--ina-primary-600:#2563eb;--ina-primary-700:#1d4ed8;--ina-primary-800:#1e40af;--ina-primary-900:#1e3a8a;--ina-primary-primary:#005494;--ina-bgn-brand-primary:#005494!important;--ina-bgn-stroke-primary:#ededed!important;--ina-background-tertiary:#f5f5f5!important;--ina-sentiment-info-400:#528aff!important;--ina-sentiment-info-500:#2871ff!important;--ina-sentiment-positive-500:#12b76a!important;--ina-sentiment-warning-500:#f79009!important;--ina-accent-coral-orange:#ff7b5a!important;--ina-accent-yellow:#ffcb00!important}[data-brand=bkn]{--ina-primary-25:#fdf2f7;--ina-primary-50:#fde6f1;--ina-primary-100:#fdcde3;--ina-primary-200:#fca5cb;--ina-primary-300:#f96da7;--ina-primary-400:#f24286;--ina-primary-500:#de1d5e;--ina-primary-600:#c41249;--ina-primary-700:#a2123c;--ina-primary-800:#871436;--ina-primary-900:#53041a;--ina-primary-primary:#de1d5e;--ina-secondary-25:#f2f9fd;--ina-secondary-50:#e3f0fb;--ina-secondary-100:#c1e3f6;--ina-secondary-200:#8accef;--ina-secondary-300:#4cb2e4;--ina-secondary-400:#269dd8;--ina-secondary-500:#177ab2;--ina-secondary-600:#146190;--ina-secondary-700:#145378;--ina-secondary-800:#164564;--ina-secondary-900:#0f2d42;--ina-bkn-brand-hover:#c41249!important;--ina-bkn-neutral-hover:#fafafa!important}[data-brand=lan]{--ina-primary-25:#f3f6fc;--ina-primary-50:#e5edf9;--ina-primary-100:#c6daf1;--ina-primary-200:#94bde5;--ina-primary-300:#5b9bd5;--ina-primary-400:#3781c7;--ina-primary-500:#2663a3;--ina-primary-600:#1f4f85;--ina-primary-700:#1e446e;--ina-primary-800:#1e3a5c;--ina-primary-900:#14263d;--ina-primary-primary:#2663a3;--ina-secondary-25:#fffdeb;--ina-secondary-50:#fdf9c8;--ina-secondary-100:#fbf38c;--ina-secondary-200:#f9e650;--ina-secondary-300:#f7d628;--ina-secondary-400:#f2bd1d;--ina-secondary-500:#d69009;--ina-secondary-600:#b1670c;--ina-secondary-700:#905110;--ina-secondary-800:#764111;--ina-secondary-900:#442204;--ina-accent-red:#a40f0a;--ina-accent-green:#1cbd19;--ina-accent-blue:#0a35c0;--ina-accent-orange:#f08519;--ina-lan-brand-hover:#1f4f85!important;--ina-lan-neutral-hover:#fafafa!important}[data-brand=panrb]{--ina-primary-25:#fdf3f3;--ina-primary-50:#fce4e4;--ina-primary-100:#facecf;--ina-primary-200:#f5acad;--ina-primary-300:#ed7c7e;--ina-primary-400:#e15254;--ina-primary-500:#cd3537;--ina-primary-600:#b42b2d;--ina-primary-700:#8f2527;--ina-primary-800:#772526;--ina-primary-900:#400f10;--ina-primary-primary:#b42b2d;--ina-secondary-25:#f8f7f8;--ina-secondary-50:#f0eeee;--ina-secondary-100:#ded9da;--ina-secondary-200:#c1b8bb;--ina-secondary-300:#9f9196;--ina-secondary-400:#847379;--ina-secondary-500:#6c5d62;--ina-secondary-600:#584c50;--ina-secondary-700:#4b4144;--ina-secondary-800:#41393b;--ina-secondary-900:#231f20;--ina-accent-yellow:#f2c548}:root,[data-theme=light]{--ina-white:var(--ina-neutral-25);--ina-black:var(--ina-neutral-900);--ina-background-primary:var(--ina-neutral-25);--ina-background-secondary:var(--ina-neutral-50);--ina-background-tertiary:var(--ina-neutral-100);--ina-background-overlay:var(--ina-overlay);--ina-content-primary:var(--ina-neutral-800);--ina-content-secondary:var(--ina-neutral-600);--ina-content-tertiary:var(--ina-neutral-400);--ina-content-guide:var(--ina-blue-500);--ina-content-negative:var(--ina-red-600);--ina-content-positive:var(--ina-green-600);--ina-stroke-primary:var(--ina-neutral-200);--ina-stroke-secondary:var(--ina-neutral-400);--ina-stroke-tertiary:var(--ina-neutral-900);--ina-guide-50:var(--ina-blue-50);--ina-guide-100:var(--ina-blue-100);--ina-guide-200:var(--ina-blue-200);--ina-guide-300:var(--ina-blue-300);--ina-guide-400:var(--ina-blue-400);--ina-guide-500:var(--ina-blue-500);--ina-guide-600:var(--ina-blue-600);--ina-guide-700:var(--ina-blue-700);--ina-guide-800:var(--ina-blue-800);--ina-guide-900:var(--ina-blue-900);--ina-negative-50:var(--ina-red-50);--ina-negative-100:var(--ina-red-100);--ina-negative-200:var(--ina-red-200);--ina-negative-300:var(--ina-red-300);--ina-negative-400:var(--ina-red-400);--ina-negative-500:var(--ina-red-500);--ina-negative-600:var(--ina-red-600);--ina-negative-700:var(--ina-red-700);--ina-negative-800:var(--ina-red-800);--ina-negative-900:var(--ina-red-900);--ina-sentiment-negative-50:var(--ina-red-50);--ina-sentiment-negative-100:var(--ina-red-100);--ina-sentiment-negative-200:var(--ina-red-200);--ina-sentiment-negative-300:var(--ina-red-300);--ina-sentiment-negative-400:var(--ina-red-400);--ina-sentiment-negative-500:var(--ina-red-500);--ina-sentiment-negative-600:var(--ina-red-600);--ina-sentiment-negative-700:var(--ina-red-700);--ina-sentiment-negative-800:var(--ina-red-800);--ina-sentiment-negative-900:var(--ina-red-900);--ina-positive-50:var(--ina-green-50);--ina-positive-100:var(--ina-green-100);--ina-positive-200:var(--ina-green-200);--ina-positive-300:var(--ina-green-300);--ina-positive-400:var(--ina-green-400);--ina-positive-500:var(--ina-green-500);--ina-positive-600:var(--ina-green-600);--ina-positive-700:var(--ina-green-700);--ina-positive-800:var(--ina-green-800);--ina-positive-900:var(--ina-green-900);--ina-sentiment-positive-50:var(--ina-green-50);--ina-sentiment-positive-100:var(--ina-green-100);--ina-sentiment-positive-200:var(--ina-green-200);--ina-sentiment-positive-300:var(--ina-green-300);--ina-sentiment-positive-400:var(--ina-green-400);--ina-sentiment-positive-500:var(--ina-green-500);--ina-sentiment-positive-600:var(--ina-green-600);--ina-sentiment-positive-700:var(--ina-green-700);--ina-sentiment-positive-800:var(--ina-green-800);--ina-warning-50:var(--ina-orange-50);--ina-warning-100:var(--ina-orange-100);--ina-warning-200:var(--ina-orange-200);--ina-warning-300:var(--ina-orange-300);--ina-warning-400:var(--ina-orange-400);--ina-warning-500:var(--ina-orange-500);--ina-warning-600:var(--ina-orange-600);--ina-warning-700:var(--ina-orange-700);--ina-warning-800:var(--ina-orange-800);--ina-warning-900:var(--ina-orange-900);--ina-sentiment-warning-50:var(--ina-orange-50);--ina-sentiment-warning-100:var(--ina-orange-100);--ina-sentiment-warning-200:var(--ina-orange-200);--ina-sentiment-warning-300:var(--ina-orange-300);--ina-sentiment-warning-400:var(--ina-orange-400);--ina-sentiment-warning-500:var(--ina-orange-500);--ina-sentiment-warning-600:var(--ina-orange-600);--ina-sentiment-warning-700:var(--ina-orange-700);--ina-sentiment-warning-800:var(--ina-orange-800)}[data-theme=dark]{--ina-white:var(--ina-neutral-900);--ina-black:var(--ina-neutral-25);--ina-background-primary:var(--ina-neutral-900);--ina-background-secondary:var(--ina-neutral-800);--ina-background-tertiary:var(--ina-neutral-700);--ina-background-overlay:var(--ina-overlay);--ina-content-primary:var(--ina-neutral-25);--ina-content-secondary:var(--ina-neutral-400);--ina-content-tertiary:var(--ina-neutral-500);--ina-content-guide:var(--ina-blue-400);--ina-content-negative:var(--ina-red-400);--ina-content-positive:var(--ina-green-400);--ina-stroke-primary:var(--ina-neutral-700);--ina-stroke-secondary:var(--ina-neutral-400);--ina-stroke-tertiary:var(--ina-neutral-200);--ina-guide-50:var(--ina-blue-50);--ina-guide-100:var(--ina-blue-100);--ina-guide-200:var(--ina-blue-200);--ina-guide-300:var(--ina-blue-300);--ina-guide-400:var(--ina-blue-400);--ina-guide-500:var(--ina-blue-500);--ina-guide-600:var(--ina-blue-600);--ina-guide-700:var(--ina-blue-700);--ina-guide-800:var(--ina-blue-800);--ina-guide-900:var(--ina-blue-900);--ina-negative-50:var(--ina-red-50);--ina-negative-100:var(--ina-red-100);--ina-negative-200:var(--ina-red-200);--ina-negative-300:var(--ina-red-300);--ina-negative-400:var(--ina-red-400);--ina-negative-500:var(--ina-red-500);--ina-negative-600:var(--ina-red-600);--ina-negative-700:var(--ina-red-700);--ina-negative-800:var(--ina-red-800);--ina-negative-900:var(--ina-red-900);--ina-sentiment-negative-50:var(--ina-red-50);--ina-sentiment-negative-100:var(--ina-red-100);--ina-sentiment-negative-200:var(--ina-red-200);--ina-sentiment-negative-300:var(--ina-red-300);--ina-sentiment-negative-400:var(--ina-red-400);--ina-sentiment-negative-500:var(--ina-red-500);--ina-sentiment-negative-600:var(--ina-red-600);--ina-sentiment-negative-700:var(--ina-red-700);--ina-sentiment-negative-800:var(--ina-red-800);--ina-sentiment-negative-900:var(--ina-red-900);--ina-positive-50:var(--ina-green-50);--ina-positive-100:var(--ina-green-100);--ina-positive-200:var(--ina-green-200);--ina-positive-300:var(--ina-green-300);--ina-positive-400:var(--ina-green-400);--ina-positive-500:var(--ina-green-500);--ina-positive-600:var(--ina-green-600);--ina-positive-700:var(--ina-green-700);--ina-positive-800:var(--ina-green-800);--ina-positive-900:var(--ina-green-900);--ina-sentiment-positive-50:var(--ina-green-50);--ina-sentiment-positive-100:var(--ina-green-100);--ina-sentiment-positive-200:var(--ina-green-200);--ina-sentiment-positive-300:var(--ina-green-300);--ina-sentiment-positive-400:var(--ina-green-400);--ina-sentiment-positive-500:var(--ina-green-500);--ina-sentiment-positive-600:var(--ina-green-600);--ina-sentiment-positive-700:var(--ina-green-700);--ina-sentiment-positive-800:var(--ina-green-800);--ina-warning-50:var(--ina-orange-50);--ina-warning-100:var(--ina-orange-100);--ina-warning-200:var(--ina-orange-200);--ina-warning-300:var(--ina-orange-300);--ina-warning-400:var(--ina-orange-400);--ina-warning-500:var(--ina-orange-500);--ina-warning-600:var(--ina-orange-600);--ina-warning-700:var(--ina-orange-700);--ina-warning-800:var(--ina-orange-800);--ina-warning-900:var(--ina-orange-900);--ina-sentiment-warning-50:var(--ina-orange-50);--ina-sentiment-warning-100:var(--ina-orange-100);--ina-sentiment-warning-200:var(--ina-orange-200);--ina-sentiment-warning-300:var(--ina-orange-300);--ina-sentiment-warning-400:var(--ina-orange-400);--ina-sentiment-warning-500:var(--ina-orange-500);--ina-sentiment-warning-600:var(--ina-orange-600);--ina-sentiment-warning-700:var(--ina-orange-700);--ina-sentiment-warning-800:var(--ina-orange-800);--ina-sentiment-warning-900:var(--ina-orange-900)}*,:after,:before{box-sizing:border-box}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}button:focus,input,input:focus,select,select:focus,textarea,textarea:focus{box-shadow:none;outline:none}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}textarea{resize:vertical}select{background:transparent;background-image:none;outline:none}button,select{-webkit-appearance:none;-moz-appearance:none;appearance:none}button{cursor:pointer}input[type=color],input[type=file],input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}optgroup{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}table{border-collapse:collapse;border-color:inherit;border-spacing:0;text-indent:0;width:100%}abbr,address,article,aside,cite,code,del,dfn,figure,footer,header,ins,kbd,main,mark,nav,samp,section,small,sub,sup{display:block}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}code,kbd,samp{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}mark{background-color:var(--ina-background-tertiary);color:var(--ina-black)}del{text-decoration:line-through}ins{text-decoration:underline}dfn{font-style:italic}
|
package/dist/index.css
CHANGED
|
@@ -222,20 +222,54 @@
|
|
|
222
222
|
--ina-font-black: 900;
|
|
223
223
|
|
|
224
224
|
/* Spacing */
|
|
225
|
+
--ina-spacing-0-5: 0.125rem; /* 2px */
|
|
225
226
|
--ina-spacing-1: 0.25rem; /* 4px */
|
|
227
|
+
--ina-spacing-1-5: 0.375rem; /* 6px */
|
|
226
228
|
--ina-spacing-2: 0.5rem; /* 8px */
|
|
229
|
+
--ina-spacing-2-5: 0.625rem; /* 10px */
|
|
227
230
|
--ina-spacing-3: 0.75rem; /* 12px */
|
|
228
231
|
--ina-spacing-3-5: 0.875rem; /* 14px */
|
|
229
232
|
--ina-spacing-4: 1rem; /* 16px */
|
|
233
|
+
--ina-spacing-4-5: 1.125rem; /* 18px */
|
|
230
234
|
--ina-spacing-5: 1.25rem; /* 20px */
|
|
235
|
+
--ina-spacing-5-5: 1.375rem; /* 22px */
|
|
231
236
|
--ina-spacing-6: 1.5rem; /* 24px */
|
|
237
|
+
--ina-spacing-6-5: 1.625rem; /* 26px */
|
|
238
|
+
--ina-spacing-7: 1.75rem; /* 28px */
|
|
239
|
+
--ina-spacing-7-5: 1.875rem; /* 30px */
|
|
232
240
|
--ina-spacing-8: 2rem; /* 32px */
|
|
241
|
+
--ina-spacing-8-5: 2.125rem; /* 34px */
|
|
242
|
+
--ina-spacing-9: 2.25rem; /* 36px */
|
|
243
|
+
--ina-spacing-9-5: 2.375rem; /* 38px */
|
|
233
244
|
--ina-spacing-10: 2.5rem; /* 40px */
|
|
245
|
+
--ina-spacing-10-5: 2.625rem; /* 42px */
|
|
246
|
+
--ina-spacing-11: 2.75rem; /* 44px */
|
|
247
|
+
--ina-spacing-11-5: 2.875rem; /* 46px */
|
|
234
248
|
--ina-spacing-12: 3rem; /* 48px */
|
|
249
|
+
--ina-spacing-12-5: 3.125rem; /* 50px */
|
|
250
|
+
--ina-spacing-13: 3.25rem; /* 52px */
|
|
251
|
+
--ina-spacing-13-5: 3.375rem; /* 54px */
|
|
252
|
+
--ina-spacing-14: 3.5rem; /* 56px */
|
|
253
|
+
--ina-spacing-14-5: 3.625rem; /* 58px */
|
|
254
|
+
--ina-spacing-15: 3.75rem; /* 60px */
|
|
255
|
+
--ina-spacing-15-5: 3.875rem; /* 62px */
|
|
235
256
|
--ina-spacing-16: 4rem; /* 64px */
|
|
257
|
+
--ina-spacing-16-5: 4.125rem; /* 66px */
|
|
258
|
+
--ina-spacing-17: 4.25rem; /* 68px */
|
|
259
|
+
--ina-spacing-17-5: 4.375rem; /* 70px */
|
|
260
|
+
--ina-spacing-18: 4.5rem; /* 72px */
|
|
261
|
+
--ina-spacing-18-5: 4.625rem; /* 74px */
|
|
262
|
+
--ina-spacing-19: 4.75rem; /* 76px */
|
|
263
|
+
--ina-spacing-19-5: 4.875rem; /* 78px */
|
|
236
264
|
--ina-spacing-20: 5rem; /* 80px */
|
|
265
|
+
--ina-spacing-20-5: 5.125rem; /* 82px */
|
|
266
|
+
--ina-spacing-21: 5.25rem; /* 84px */
|
|
267
|
+
--ina-spacing-21-5: 5.375rem; /* 86px */
|
|
268
|
+
--ina-spacing-22: 5.5rem; /* 88px */
|
|
269
|
+
--ina-spacing-22-5: 5.625rem; /* 90px */
|
|
270
|
+
--ina-spacing-23: 5.75rem; /* 92px */
|
|
271
|
+
--ina-spacing-23-5: 5.875rem; /* 94px */
|
|
237
272
|
--ina-spacing-24: 6rem; /* 96px */
|
|
238
|
-
|
|
239
273
|
/* Border Radius */
|
|
240
274
|
--ina-radius-sm: 0.125rem; /* 2px */
|
|
241
275
|
--ina-radius-base: 0.25rem; /* 4px */
|
|
@@ -3863,9 +3897,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
3863
3897
|
display: flex;
|
|
3864
3898
|
flex-direction: column;
|
|
3865
3899
|
gap: var(--ina-spacing-4);
|
|
3866
|
-
/* Ensure content fits naturally */
|
|
3867
|
-
width: -moz-fit-content;
|
|
3868
|
-
width: fit-content;
|
|
3869
3900
|
height: -moz-fit-content;
|
|
3870
3901
|
height: fit-content;
|
|
3871
3902
|
/* Allow content to overflow if needed */
|
|
@@ -3897,8 +3928,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
3897
3928
|
flex-direction: row;
|
|
3898
3929
|
/* Ensure dual panel doesn't exceed viewport width */
|
|
3899
3930
|
max-width: 100%;
|
|
3900
|
-
width: -moz-fit-content;
|
|
3901
|
-
width: fit-content;
|
|
3902
3931
|
/* Prevent stretching */
|
|
3903
3932
|
align-items: flex-start;
|
|
3904
3933
|
/* Prevent content from stretching vertically */
|
|
@@ -3907,7 +3936,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
3907
3936
|
|
|
3908
3937
|
/* Limit calendar container width in dual mode */
|
|
3909
3938
|
.ina-date-picker__panel-content--dual .ina-date-picker__calendar-container {
|
|
3910
|
-
flex: 0 0 auto; /* Don't grow or shrink, use auto basis */
|
|
3911
3939
|
width: auto; /* Let content determine width */
|
|
3912
3940
|
min-width: 280px; /* Minimum readable width */
|
|
3913
3941
|
max-width: calc(
|
|
@@ -3917,13 +3945,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
3917
3945
|
|
|
3918
3946
|
/* Limit calendar width in dual mode */
|
|
3919
3947
|
.ina-date-picker__panel-content--dual .ina-date-picker__calendar {
|
|
3920
|
-
flex: 0 0 auto; /* Don't grow or shrink, use auto basis */
|
|
3921
3948
|
width: auto; /* Let content determine width */
|
|
3922
3949
|
min-width: 280px; /* Minimum readable width */
|
|
3923
3950
|
max-width: 100%; /* Don't exceed container */
|
|
3924
3951
|
/* Prevent calendar from stretching vertically */
|
|
3925
3952
|
height: -moz-fit-content;
|
|
3926
3953
|
height: fit-content;
|
|
3954
|
+
padding-right: var(--ina-spacing-4);
|
|
3927
3955
|
}
|
|
3928
3956
|
}
|
|
3929
3957
|
@media (max-width: 1279px) {
|
|
@@ -4021,7 +4049,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
4021
4049
|
border-radius: var(--ina-radius-lg);
|
|
4022
4050
|
transition: all var(--ina-transition-fast);
|
|
4023
4051
|
height: 40px;
|
|
4024
|
-
width: 40px;
|
|
4025
4052
|
}
|
|
4026
4053
|
.ina-date-picker__day:hover {
|
|
4027
4054
|
background-color: var(--ina-background-tertiary);
|
|
@@ -4063,14 +4090,18 @@ dialog.bottom-sheet-dropdown {
|
|
|
4063
4090
|
background-color: var(--ina-background-tertiary);
|
|
4064
4091
|
border-radius: 0;
|
|
4065
4092
|
}
|
|
4066
|
-
.ina-date-picker__day--disabled {
|
|
4067
|
-
color: var(--ina-content-
|
|
4093
|
+
.ina-date-picker__day.ina-date-picker__day--disabled {
|
|
4094
|
+
color: var(--ina-content-tertiary);
|
|
4068
4095
|
cursor: not-allowed;
|
|
4069
4096
|
background-color: var(--ina-background-secondary);
|
|
4097
|
+
border-radius: 0;
|
|
4070
4098
|
}
|
|
4071
|
-
.ina-date-picker__day--disabled:hover {
|
|
4099
|
+
.ina-date-picker__day.ina-date-picker__day--disabled:hover {
|
|
4072
4100
|
opacity: 0.4;
|
|
4073
4101
|
}
|
|
4102
|
+
.ina-date-picker__day.ina-date-picker__day--disabled.ina-date-picker__day--selected {
|
|
4103
|
+
border-radius: var(--ina-radius-lg);
|
|
4104
|
+
}
|
|
4074
4105
|
.ina-date-picker__day.ina-date-picker__day--today {
|
|
4075
4106
|
display: flex;
|
|
4076
4107
|
flex-direction: column;
|
|
@@ -4182,9 +4213,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
4182
4213
|
.ina-date-picker__trigger--size-lg {
|
|
4183
4214
|
height: 40px;
|
|
4184
4215
|
}
|
|
4185
|
-
.ina-date-picker__dropdown-panel {
|
|
4186
|
-
min-width: 280px;
|
|
4187
|
-
}
|
|
4188
4216
|
/* Trigger adjustments */
|
|
4189
4217
|
.ina-date-picker__trigger {
|
|
4190
4218
|
padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
|
|
@@ -4260,7 +4288,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
4260
4288
|
.ina-date-picker__day {
|
|
4261
4289
|
padding: var(--ina-spacing-1);
|
|
4262
4290
|
font-size: var(--ina-font-2xs);
|
|
4263
|
-
width: 32px !important;
|
|
4264
4291
|
height: 32px !important;
|
|
4265
4292
|
}
|
|
4266
4293
|
|
|
@@ -4528,19 +4555,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
4528
4555
|
.ina-date-picker__dropdown-container {
|
|
4529
4556
|
position: relative;
|
|
4530
4557
|
}
|
|
4531
|
-
/* Dropdown panels */
|
|
4532
|
-
.ina-date-picker__dropdown-panel {
|
|
4533
|
-
position: absolute;
|
|
4534
|
-
top: 100%;
|
|
4535
|
-
left: 0;
|
|
4536
|
-
margin-top: var(--ina-spacing-1);
|
|
4537
|
-
background-color: var(--ina-background-primary);
|
|
4538
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
4539
|
-
border-radius: var(--ina-radius-lg);
|
|
4540
|
-
box-shadow: var(--ina-shadow-lg);
|
|
4541
|
-
z-index: 50;
|
|
4542
|
-
min-width: 320px;
|
|
4543
|
-
}
|
|
4544
4558
|
/* Decade panels */
|
|
4545
4559
|
.ina-date-picker__decade-panel {
|
|
4546
4560
|
position: absolute;
|
|
@@ -11876,6 +11890,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
11876
11890
|
color: var(--ina-content-secondary);
|
|
11877
11891
|
background: transparent;
|
|
11878
11892
|
border-bottom: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
|
|
11893
|
+
border-radius: 0px;
|
|
11879
11894
|
}
|
|
11880
11895
|
.ina-tab-horizontal__tab--variant-outline:hover:not(
|
|
11881
11896
|
.ina-tab-horizontal__tab--disabled
|
|
@@ -11985,22 +12000,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
11985
12000
|
outline: none;
|
|
11986
12001
|
}
|
|
11987
12002
|
/* Dark Mode */
|
|
11988
|
-
[data-theme=
|
|
12003
|
+
[data-theme="dark"] .ina-tab-horizontal__tab--variant-outline {
|
|
11989
12004
|
color: var(--ina-content-secondary);
|
|
11990
12005
|
}
|
|
11991
|
-
[data-theme=
|
|
12006
|
+
[data-theme="dark"]
|
|
11992
12007
|
.ina-tab-horizontal__tab--variant-outline:hover:not(
|
|
11993
12008
|
.ina-tab-horizontal__tab--disabled
|
|
11994
12009
|
) {
|
|
11995
12010
|
color: var(--ina-content-primary);
|
|
11996
12011
|
}
|
|
11997
|
-
[data-theme=
|
|
12012
|
+
[data-theme="dark"]
|
|
11998
12013
|
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
|
|
11999
12014
|
.ina-tab-horizontal__tab--disabled
|
|
12000
12015
|
) {
|
|
12001
12016
|
color: var(--ina-content-primary);
|
|
12002
12017
|
}
|
|
12003
|
-
[data-theme=
|
|
12018
|
+
[data-theme="dark"]
|
|
12004
12019
|
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
|
|
12005
12020
|
.ina-tab-horizontal__tab--selected
|
|
12006
12021
|
) {
|
|
@@ -12016,29 +12031,29 @@ dialog.bottom-sheet-dropdown {
|
|
|
12016
12031
|
) {
|
|
12017
12032
|
color: var(--ina-content-primary);
|
|
12018
12033
|
}
|
|
12019
|
-
[data-theme=
|
|
12034
|
+
[data-theme="dark"]
|
|
12020
12035
|
.ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
|
|
12021
12036
|
color: var(--ina-content-primary);
|
|
12022
12037
|
border-bottom-color: var(--ina-content-primary);
|
|
12023
12038
|
}
|
|
12024
|
-
[data-theme=
|
|
12039
|
+
[data-theme="dark"] .ina-tab-horizontal__tab--variant-button-brand {
|
|
12025
12040
|
color: var(--ina-content-secondary);
|
|
12026
12041
|
}
|
|
12027
|
-
[data-theme=
|
|
12042
|
+
[data-theme="dark"]
|
|
12028
12043
|
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
|
|
12029
12044
|
.ina-tab-horizontal__tab--disabled
|
|
12030
12045
|
) {
|
|
12031
12046
|
color: var(--ina-content-primary);
|
|
12032
12047
|
}
|
|
12033
|
-
[data-theme=
|
|
12048
|
+
[data-theme="dark"]
|
|
12034
12049
|
.ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
|
|
12035
12050
|
background-color: var(--ina-primary-25);
|
|
12036
12051
|
color: var(--ina-primary-primary) !important;
|
|
12037
12052
|
}
|
|
12038
|
-
[data-theme=
|
|
12053
|
+
[data-theme="dark"] .ina-tab-horizontal--variant-button-white {
|
|
12039
12054
|
background-color: var(--ina-background-secondary);
|
|
12040
12055
|
}
|
|
12041
|
-
[data-theme=
|
|
12056
|
+
[data-theme="dark"]
|
|
12042
12057
|
.ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
|
|
12043
12058
|
background-color: var(--ina-background-primary);
|
|
12044
12059
|
color: var(--ina-content-primary);
|
|
@@ -14868,11 +14883,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
14868
14883
|
/* RESPONSIVE DESIGN */
|
|
14869
14884
|
/* =========================== */
|
|
14870
14885
|
/* Mobile adjustments */
|
|
14871
|
-
@media (max-width:
|
|
14886
|
+
@media (max-width: 639px) {
|
|
14872
14887
|
.ina-year-picker__panel {
|
|
14873
14888
|
/* Center panel horizontally in viewport */
|
|
14874
14889
|
width: calc(100vw - 2rem) !important;
|
|
14875
|
-
max-width:
|
|
14890
|
+
max-width: 180px !important;
|
|
14876
14891
|
/* Ensure panel doesn't exceed viewport */
|
|
14877
14892
|
padding: var(--ina-spacing-2);
|
|
14878
14893
|
}
|
|
@@ -14894,7 +14909,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
14894
14909
|
}
|
|
14895
14910
|
|
|
14896
14911
|
.ina-year-picker__decade-range {
|
|
14897
|
-
font-size:
|
|
14912
|
+
font-size: var(--ina-font-2xs);
|
|
14898
14913
|
}
|
|
14899
14914
|
|
|
14900
14915
|
.ina-year-picker__grid {
|
|
@@ -14904,9 +14919,9 @@ dialog.bottom-sheet-dropdown {
|
|
|
14904
14919
|
}
|
|
14905
14920
|
|
|
14906
14921
|
.ina-year-picker__year-option {
|
|
14907
|
-
min-height:
|
|
14908
|
-
font-size:
|
|
14922
|
+
min-height: 30px;
|
|
14923
|
+
font-size: var(--ina-font-2xs);
|
|
14909
14924
|
padding: var(--ina-spacing-0-5);
|
|
14910
|
-
|
|
14925
|
+
border-radius: var(--ina-radius-base);
|
|
14911
14926
|
}
|
|
14912
14927
|
}
|