@platformatic/ui-components 0.1.74 → 0.1.75
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/dist/assets/index.8666e478.css +1 -0
- package/dist/assets/{index.ffe4afbc.js → index.d594f700.js} +1 -1
- package/dist/index.html +2 -2
- package/dist/main.css +15 -11
- package/package.json +1 -1
- package/src/components/ButtonFullRounded.jsx +9 -4
- package/src/components/Common.module.css +9 -9
- package/src/components/DetailedMetric.jsx +2 -0
- package/src/components/MetricValue.jsx +11 -5
- package/src/components/MetricValue.module.css +13 -1
- package/src/components/Sidebar.jsx +1 -1
- package/src/components/SimpleMetric.jsx +7 -5
- package/src/components/SimpleMetric.module.css +4 -1
- package/src/components/constants.js +1 -0
- package/src/stories/Button.stories.jsx +57 -43
- package/src/stories/DetailedMetric.stories.jsx +4 -4
- package/src/stories/SimpleMetric.stories.jsx +4 -3
- package/tailwind.config.cjs +12 -9
- package/dist/assets/index.a278d949.css +0 -1
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index.
|
|
8
|
-
<link rel="stylesheet" href="/assets/index.
|
|
7
|
+
<script type="module" crossorigin src="/assets/index.d594f700.js"></script>
|
|
8
|
+
<link rel="stylesheet" href="/assets/index.8666e478.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -562,10 +562,6 @@ video {
|
|
|
562
562
|
margin-left: 0.5rem;
|
|
563
563
|
}
|
|
564
564
|
|
|
565
|
-
.ml-4 {
|
|
566
|
-
margin-left: 1rem;
|
|
567
|
-
}
|
|
568
|
-
|
|
569
565
|
.mt-4 {
|
|
570
566
|
margin-top: 1rem;
|
|
571
567
|
}
|
|
@@ -578,6 +574,10 @@ video {
|
|
|
578
574
|
display: inline-flex;
|
|
579
575
|
}
|
|
580
576
|
|
|
577
|
+
.grid {
|
|
578
|
+
display: grid;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
581
|
.h-screen {
|
|
582
582
|
height: 100vh;
|
|
583
583
|
}
|
|
@@ -590,6 +590,10 @@ video {
|
|
|
590
590
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
591
591
|
}
|
|
592
592
|
|
|
593
|
+
.grid-cols-6 {
|
|
594
|
+
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
595
|
+
}
|
|
596
|
+
|
|
593
597
|
.flex-col {
|
|
594
598
|
flex-direction: column;
|
|
595
599
|
}
|
|
@@ -598,12 +602,12 @@ video {
|
|
|
598
602
|
align-items: center;
|
|
599
603
|
}
|
|
600
604
|
|
|
601
|
-
.gap-
|
|
602
|
-
gap:
|
|
605
|
+
.gap-2 {
|
|
606
|
+
gap: 0.5rem;
|
|
603
607
|
}
|
|
604
608
|
|
|
605
|
-
.gap-
|
|
606
|
-
|
|
609
|
+
.gap-10 {
|
|
610
|
+
gap: 2.5rem;
|
|
607
611
|
}
|
|
608
612
|
|
|
609
613
|
.border {
|
|
@@ -620,9 +624,9 @@ video {
|
|
|
620
624
|
line-height: 2rem;
|
|
621
625
|
}
|
|
622
626
|
|
|
623
|
-
.text-
|
|
624
|
-
font-size:
|
|
625
|
-
line-height: 1.
|
|
627
|
+
.text-sm {
|
|
628
|
+
font-size: 0.875rem;
|
|
629
|
+
line-height: 1.25rem;
|
|
626
630
|
}
|
|
627
631
|
|
|
628
632
|
.text-3xl {
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ import commonStyles from './Common.module.css'
|
|
|
5
5
|
import styles from './ButtonFullRounded.module.css'
|
|
6
6
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
7
7
|
import { COLORS_ICON, SIZES, BACKGROUND_COLOR_OPAQUE, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
|
|
8
|
-
function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled, paddingSize, alt, onClick, hoverEffect, bordered }) {
|
|
8
|
+
function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled, paddingSize, alt, onClick, hoverEffect, bordered, tip }) {
|
|
9
9
|
const padding = commonStyles[`padding--${paddingSize}`]
|
|
10
10
|
const containerClassName = `${className} ${styles.roundedFull}`
|
|
11
11
|
let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
|
|
@@ -25,7 +25,7 @@ function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled
|
|
|
25
25
|
return (
|
|
26
26
|
<div className={containerClassName}>
|
|
27
27
|
<button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt}>
|
|
28
|
-
<PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} />
|
|
28
|
+
<PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} tip={tip} />
|
|
29
29
|
</button>
|
|
30
30
|
</div>
|
|
31
31
|
)
|
|
@@ -67,7 +67,11 @@ ButtonFullRounded.propTypes = {
|
|
|
67
67
|
/**
|
|
68
68
|
* bordered
|
|
69
69
|
*/
|
|
70
|
-
bordered: PropTypes.bool
|
|
70
|
+
bordered: PropTypes.bool,
|
|
71
|
+
/**
|
|
72
|
+
* tip
|
|
73
|
+
*/
|
|
74
|
+
tip: PropTypes.string
|
|
71
75
|
|
|
72
76
|
}
|
|
73
77
|
|
|
@@ -80,7 +84,8 @@ ButtonFullRounded.defaultProps = {
|
|
|
80
84
|
alt: 'ButtonFullRounded',
|
|
81
85
|
onClick: () => {},
|
|
82
86
|
hoverEffect: '',
|
|
83
|
-
bordered: true
|
|
87
|
+
bordered: true,
|
|
88
|
+
tip: ''
|
|
84
89
|
}
|
|
85
90
|
|
|
86
91
|
export default ButtonFullRounded
|
|
@@ -105,30 +105,30 @@
|
|
|
105
105
|
@apply p-6;
|
|
106
106
|
}
|
|
107
107
|
.hover-background-color-opaque-main-green {
|
|
108
|
-
@apply hover:bg-main-green hover:bg-opacity-
|
|
108
|
+
@apply hover:bg-main-green hover:bg-opacity-15;
|
|
109
109
|
}
|
|
110
110
|
.hover-background-color-opaque-light-green {
|
|
111
|
-
@apply hover:bg-light-green hover:bg-opacity-
|
|
111
|
+
@apply hover:bg-light-green hover:bg-opacity-15;
|
|
112
112
|
}
|
|
113
113
|
.hover-background-color-opaque-dark-green {
|
|
114
|
-
@apply hover:bg-dark-green hover:bg-opacity-
|
|
114
|
+
@apply hover:bg-dark-green hover:bg-opacity-15;
|
|
115
115
|
}
|
|
116
116
|
.hover-background-color-opaque-main-dark-blue{
|
|
117
|
-
@apply hover:bg-main-dark-blue hover:bg-opacity-
|
|
117
|
+
@apply hover:bg-main-dark-blue hover:bg-opacity-10;
|
|
118
118
|
}
|
|
119
119
|
.hover-background-color-opaque-dark-blue {
|
|
120
|
-
@apply hover:bg-dark-blue hover:bg-opacity-
|
|
120
|
+
@apply hover:bg-dark-blue hover:bg-opacity-15;
|
|
121
121
|
}
|
|
122
122
|
.hover-background-color-opaque-light-blue {
|
|
123
|
-
@apply hover:bg-light-blue hover:bg-opacity-
|
|
123
|
+
@apply hover:bg-light-blue hover:bg-opacity-15;
|
|
124
124
|
}
|
|
125
125
|
.hover-background-color-opaque-white{
|
|
126
|
-
@apply hover:bg-white hover:bg-opacity-
|
|
126
|
+
@apply hover:bg-white hover:bg-opacity-15;
|
|
127
127
|
}
|
|
128
128
|
.hover-background-color-opaque-error-red{
|
|
129
|
-
@apply hover:bg-error-red hover:bg-opacity-
|
|
129
|
+
@apply hover:bg-error-red hover:bg-opacity-15;
|
|
130
130
|
}
|
|
131
131
|
.hover-background-color-opaque-tertiary-blue{
|
|
132
|
-
@apply hover:bg-tertiary-blue hover:bg-opacity-
|
|
132
|
+
@apply hover:bg-tertiary-blue hover:bg-opacity-15;
|
|
133
133
|
}
|
|
134
134
|
|
|
@@ -17,6 +17,7 @@ export default function DetailedMetric (props) {
|
|
|
17
17
|
unit={leftDetail.unit}
|
|
18
18
|
color={leftDetail.color}
|
|
19
19
|
value={leftDetail.value}
|
|
20
|
+
flexDirectionMetric='col'
|
|
20
21
|
/>
|
|
21
22
|
<VerticalSeparator />
|
|
22
23
|
<MetricValue
|
|
@@ -24,6 +25,7 @@ export default function DetailedMetric (props) {
|
|
|
24
25
|
unit={rightDetail.unit}
|
|
25
26
|
color={rightDetail.color}
|
|
26
27
|
value={rightDetail.value}
|
|
28
|
+
flexDirectionMetric='col'
|
|
27
29
|
/>
|
|
28
30
|
</div>
|
|
29
31
|
</SimpleMetric>
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import styles from './MetricValue.module.css'
|
|
4
|
-
import
|
|
5
|
-
export default function MetricValue ({ pre, color, value, unit }) {
|
|
4
|
+
import commonStyles from './Common.module.css'
|
|
5
|
+
export default function MetricValue ({ pre, color = 'main-green', value, unit, fontValue = 'small', flexDirectionMetric = 'row' }) {
|
|
6
|
+
let classNameValue = styles.value
|
|
7
|
+
classNameValue += ' ' + commonStyles[`text--${color}`]
|
|
8
|
+
classNameValue += ' ' + styles[`value-${fontValue}`]
|
|
9
|
+
|
|
10
|
+
let classNameWrapper = `${styles.metric} `
|
|
11
|
+
classNameWrapper += styles[`flex-direction-${flexDirectionMetric}`]
|
|
6
12
|
return (
|
|
7
|
-
<div className={
|
|
8
|
-
{pre
|
|
9
|
-
<span className={
|
|
13
|
+
<div className={classNameWrapper}>
|
|
14
|
+
{pre ? <span className={styles.pre}>{pre}</span> : <span className={styles.pre}> </span>}
|
|
15
|
+
<span className={classNameValue}>
|
|
10
16
|
{value}
|
|
11
17
|
</span>
|
|
12
18
|
<span className={styles.unit}>{unit}</span>
|
|
@@ -2,9 +2,21 @@
|
|
|
2
2
|
@apply flex justify-center items-center gap-x-2;
|
|
3
3
|
}
|
|
4
4
|
.value {
|
|
5
|
-
@apply
|
|
5
|
+
@apply font-semibold;
|
|
6
6
|
}
|
|
7
7
|
.unit,
|
|
8
8
|
.pre {
|
|
9
9
|
@apply text-sm;
|
|
10
|
+
}
|
|
11
|
+
.value-small {
|
|
12
|
+
@apply text-[22px];
|
|
13
|
+
}
|
|
14
|
+
.value-large {
|
|
15
|
+
@apply text-[32px];
|
|
16
|
+
}
|
|
17
|
+
.flex-direction-row {
|
|
18
|
+
@apply flex-row;
|
|
19
|
+
}
|
|
20
|
+
.flex-direction-col {
|
|
21
|
+
@apply flex-col;
|
|
10
22
|
}
|
|
@@ -5,22 +5,24 @@ import ReactTooltip from 'react-tooltip'
|
|
|
5
5
|
import BorderedBox from './BorderedBox'
|
|
6
6
|
import styles from './SimpleMetric.module.css'
|
|
7
7
|
import MetricValue from './MetricValue'
|
|
8
|
-
import
|
|
8
|
+
import ButtonFullRounded from './ButtonFullRounded'
|
|
9
|
+
import { BACKGROUND_COLOR_OPAQUE, MEDIUM, WHITE } from './constants'
|
|
9
10
|
|
|
10
11
|
export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
|
|
12
|
+
const withoutChildrenSingleMetric = !children ? styles.centerMetric : ''
|
|
11
13
|
return (
|
|
12
14
|
<>
|
|
13
15
|
<BorderedBox>
|
|
14
16
|
<div className={styles.header}>
|
|
15
17
|
<span className={styles.title}>{title}</span>
|
|
16
|
-
<
|
|
18
|
+
<ButtonFullRounded hoverEffect={BACKGROUND_COLOR_OPAQUE} iconColor={WHITE} iconSize={MEDIUM} iconName='CircleExclamationIcon' tip={tooltip} onClick={() => {}} />
|
|
17
19
|
</div>
|
|
18
|
-
<div>
|
|
19
|
-
<MetricValue pre={pre} color={color} unit={unit} value={value} />
|
|
20
|
+
<div className={withoutChildrenSingleMetric}>
|
|
21
|
+
<MetricValue pre={pre} color={color} unit={unit} value={value} fontValue='large' />
|
|
20
22
|
{children}
|
|
21
23
|
</div>
|
|
22
24
|
</BorderedBox>
|
|
23
|
-
<ReactTooltip />
|
|
25
|
+
<ReactTooltip place='top' type='info' />
|
|
24
26
|
</>
|
|
25
27
|
)
|
|
26
28
|
}
|
|
@@ -4,6 +4,7 @@ export const COLORS_BORDERED_BOX = ['main-green', 'error-red', 'white', 'dark-bl
|
|
|
4
4
|
export const WHITE = 'white'
|
|
5
5
|
export const MAIN_DARK_BLUE = 'main-dark-blue'
|
|
6
6
|
export const MAIN_GREEN = 'main-green'
|
|
7
|
+
export const ERROR_RED = 'error-red'
|
|
7
8
|
export const NONE = 'none'
|
|
8
9
|
export const SMALL = 'small'
|
|
9
10
|
export const MEDIUM = 'medium'
|
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
'use strict'
|
|
2
|
-
import
|
|
3
|
-
import { useState } from 'react'
|
|
2
|
+
import React from 'react'
|
|
4
3
|
import Button from '../components/Button'
|
|
5
|
-
import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES } from '../components/constants'
|
|
4
|
+
import { BOX_SHADOW, COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, LARGE, SIZES, WHITE } from '../components/constants'
|
|
5
|
+
|
|
6
|
+
const divStyle = {
|
|
7
|
+
width: '100%',
|
|
8
|
+
height: 'auto',
|
|
9
|
+
padding: '2px',
|
|
10
|
+
backgroundColor: 'white'
|
|
11
|
+
}
|
|
6
12
|
|
|
7
13
|
export default {
|
|
8
14
|
title: 'Platformatic/Button',
|
|
9
15
|
component: Button,
|
|
16
|
+
decorators: [
|
|
17
|
+
(Story) => (
|
|
18
|
+
<div style={divStyle}>
|
|
19
|
+
<Story />
|
|
20
|
+
</div>
|
|
21
|
+
)
|
|
22
|
+
],
|
|
10
23
|
argTypes: {
|
|
11
24
|
label: {
|
|
12
25
|
type: 'string',
|
|
@@ -61,53 +74,54 @@ OnlyLabel.args = {
|
|
|
61
74
|
backgroundColor: 'main-green'
|
|
62
75
|
}
|
|
63
76
|
|
|
64
|
-
|
|
65
|
-
BorderedRed.args = {
|
|
66
|
-
label: 'Borderer Red',
|
|
67
|
-
color: 'error-red'
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export const TransparentWhite = Template.bind({})
|
|
71
|
-
TransparentWhite.args = {
|
|
72
|
-
label: 'White',
|
|
73
|
-
color: 'white',
|
|
74
|
-
icon: faCheck
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
const DisabledTemplate = (args) => {
|
|
78
|
-
const [enabled, setEnabled] = useState(false)
|
|
77
|
+
const AllBorderedTemplate = (args) => {
|
|
79
78
|
return (
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
79
|
+
<>
|
|
80
|
+
{COLORS_BUTTON.map(color => (
|
|
81
|
+
<React.Fragment key={color}>
|
|
82
|
+
<div className='grid grid-cols-6 gap-2 items-center' key={color}>
|
|
83
|
+
<span className='text-sm'>{color}</span>
|
|
84
|
+
<Button color={color} onClick={() => alert('clicked ' + color)} {...args} />
|
|
85
|
+
<Button color={color} onClick={() => alert('clicked ' + color)} disabled {...args} />
|
|
86
|
+
</div>
|
|
87
|
+
<br />
|
|
88
|
+
</React.Fragment>
|
|
89
|
+
))}
|
|
90
|
+
</>
|
|
89
91
|
)
|
|
90
92
|
}
|
|
91
93
|
|
|
92
|
-
export const
|
|
94
|
+
export const AllBordered = AllBorderedTemplate.bind({})
|
|
93
95
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
color: 'main-dark-blue',
|
|
98
|
-
disabled: true
|
|
96
|
+
AllBordered.args = {
|
|
97
|
+
label: 'Sample label',
|
|
98
|
+
size: LARGE
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
101
|
+
const AllFilledTemplate = (args) => {
|
|
102
|
+
return (
|
|
103
|
+
<>
|
|
104
|
+
{COLORS_BUTTON.map(color => (
|
|
105
|
+
<React.Fragment key={color}>
|
|
106
|
+
<div className='grid grid-cols-6 gap-2 items-center'>
|
|
107
|
+
<span className='text-sm'>{color}</span>
|
|
108
|
+
<Button backgroundColor={color} onClick={() => alert('clicked ' + color)} {...args} />
|
|
109
|
+
<Button backgroundColor={color} onClick={() => alert('clicked ' + color)} disabled {...args} />
|
|
110
|
+
</div>
|
|
111
|
+
<br />
|
|
112
|
+
</React.Fragment>
|
|
113
|
+
))}
|
|
114
|
+
</>
|
|
115
|
+
)
|
|
106
116
|
}
|
|
107
117
|
|
|
108
|
-
export const
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
export const AllFilled = AllFilledTemplate.bind({})
|
|
119
|
+
|
|
120
|
+
AllFilled.args = {
|
|
121
|
+
label: 'Sample label',
|
|
122
|
+
size: LARGE,
|
|
123
|
+
color: WHITE,
|
|
124
|
+
bordered: false,
|
|
125
|
+
hoverEffect: BOX_SHADOW,
|
|
126
|
+
bold: true
|
|
113
127
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
+
import { MAIN_GREEN } from '../components/constants'
|
|
3
4
|
import DetailedMetric from '../components/DetailedMetric'
|
|
4
5
|
|
|
5
6
|
export default {
|
|
@@ -13,7 +14,7 @@ export const Default = Template.bind({})
|
|
|
13
14
|
|
|
14
15
|
Default.args = {
|
|
15
16
|
title: 'Requests',
|
|
16
|
-
color:
|
|
17
|
+
color: MAIN_GREEN,
|
|
17
18
|
unit: 'ms',
|
|
18
19
|
value: 120,
|
|
19
20
|
pre: 'P90',
|
|
@@ -21,13 +22,12 @@ Default.args = {
|
|
|
21
22
|
leftDetail: {
|
|
22
23
|
value: 600,
|
|
23
24
|
unit: 'ms',
|
|
24
|
-
color:
|
|
25
|
-
pre: 'P99'
|
|
25
|
+
color: MAIN_GREEN
|
|
26
26
|
},
|
|
27
27
|
rightDetail: {
|
|
28
28
|
value: 4.42,
|
|
29
29
|
unit: 's',
|
|
30
|
-
color:
|
|
30
|
+
color: MAIN_GREEN,
|
|
31
31
|
pre: 'P95'
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
+
import { ERROR_RED, MAIN_GREEN } from '../components/constants'
|
|
3
4
|
import SimpleMetric from '../components/SimpleMetric'
|
|
4
5
|
|
|
5
6
|
export default {
|
|
@@ -13,7 +14,7 @@ export const Green = Template.bind({})
|
|
|
13
14
|
|
|
14
15
|
Green.args = {
|
|
15
16
|
title: 'Requests',
|
|
16
|
-
color:
|
|
17
|
+
color: MAIN_GREEN,
|
|
17
18
|
unit: 'ms',
|
|
18
19
|
value: 120,
|
|
19
20
|
tooltip: 'This is a tooltip for the metric'
|
|
@@ -23,7 +24,7 @@ export const Red = Template.bind({})
|
|
|
23
24
|
|
|
24
25
|
Red.args = {
|
|
25
26
|
title: 'Requests',
|
|
26
|
-
color:
|
|
27
|
+
color: ERROR_RED,
|
|
27
28
|
unit: 'ms',
|
|
28
29
|
value: 120,
|
|
29
30
|
tooltip: 'This is a tooltip for the metric'
|
|
@@ -33,7 +34,7 @@ export const WithPrefix = Template.bind({})
|
|
|
33
34
|
|
|
34
35
|
WithPrefix.args = {
|
|
35
36
|
title: 'Requests',
|
|
36
|
-
color:
|
|
37
|
+
color: MAIN_GREEN,
|
|
37
38
|
unit: 'ms',
|
|
38
39
|
value: 120,
|
|
39
40
|
pre: 'P90',
|
package/tailwind.config.cjs
CHANGED
|
@@ -11,15 +11,18 @@ module.exports = {
|
|
|
11
11
|
// => @media (min-width: 1440px) { ... }
|
|
12
12
|
},
|
|
13
13
|
boxShadow: {
|
|
14
|
-
wrap: '0px 0px
|
|
15
|
-
'main-green': '0px 0px
|
|
16
|
-
'dark-green': '0px 0px
|
|
17
|
-
'light-green': '0px 0px
|
|
18
|
-
'main-dark-blue': '0px 0px
|
|
19
|
-
'dark-blue': '0px 0px
|
|
20
|
-
'light-blue': '0px 0px
|
|
21
|
-
'error-red': '0px 0px
|
|
22
|
-
'tertiary-blue': '0px 0px
|
|
14
|
+
wrap: '0px 0px 4px rgba(0, 0, 0, 0.5)',
|
|
15
|
+
'main-green': '0px 0px 4px rgba(33, 250, 144, 0.5)',
|
|
16
|
+
'dark-green': '0px 0px 4px rgba(2, 120, 63, 1)',
|
|
17
|
+
'light-green': '0px 0px 4px rgba(33, 241, 144, 0.5)',
|
|
18
|
+
'main-dark-blue': '0px 0px 4px rgba(33, 250, 144, 0.5)',
|
|
19
|
+
'dark-blue': '0px 0px 4px rgba(0, 52, 79, 0.5)',
|
|
20
|
+
'light-blue': '0px 0px 4px rgba(233, 247, 255, 0.5)',
|
|
21
|
+
'error-red': '0px 0px 4px rgba(250, 33, 33, 0.5)',
|
|
22
|
+
'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)'
|
|
23
|
+
},
|
|
24
|
+
opacity: {
|
|
25
|
+
15: '.15'
|
|
23
26
|
}
|
|
24
27
|
},
|
|
25
28
|
colors: {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_1c6m4_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1c6m4_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1c6m4_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_1c6m4_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1c6m4_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1c6m4_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1c6m4_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_1c6m4_23{position:absolute;bottom:-1.25rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_1c6m4_27{padding:.625rem .5rem}._text--error-red_1c6m4_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_1c6m4_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_1c6m4_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_1c6m4_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_1c6m4_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_1c6m4_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_1c6m4_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_1c6m4_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_1c6m4_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_1c6m4_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_1c6m4_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_1c6m4_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_1c6m4_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-warning-yellow_1c6m4_71{--tw-bg-opacity: 1 !important;background-color:rgb(254 185 40 / var(--tw-bg-opacity))!important}._background-color-transparent_1c6m4_74{background-color:transparent}._background-color-opaque-100_1c6m4_77{--tw-bg-opacity: 1 !important}._background-color-opaque-60_1c6m4_80{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1c6m4_83{--tw-bg-opacity: .3 !important}._background-color-opaque-20_1c6m4_86{--tw-bg-opacity: .2 !important}._apply-opacity-30_1c6m4_89{opacity:.3}._padding--none_1c6m4_92{padding:0}._padding--small_1c6m4_95{padding:.25rem}._padding--medium_1c6m4_98{padding:.5rem}._padding--large_1c6m4_101{padding:1rem}._padding--extra-large_1c6m4_104{padding:1.5rem}._hover-background-color-opaque-main-green_1c6m4_107:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-light-green_1c6m4_110:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-dark-green_1c6m4_113:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-main-dark-blue_1c6m4_116:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-dark-blue_1c6m4_119:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-light-blue_1c6m4_122:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-white_1c6m4_125:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-error-red_1c6m4_128:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._hover-background-color-opaque-tertiary-blue_1c6m4_131:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .2 }._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_l2p5a_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_l2p5a_5{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_l2p5a_5:hover{cursor:pointer}._tab_l2p5a_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_l2p5a_1:first-child{margin-left:0}._tab_l2p5a_1:last-child{margin-right:0}._selected-tab_l2p5a_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_l2p5a_15{min-height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-10{gap:2.5rem}.gap-y-6{row-gap:1.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}
|