@policystudio/policy-studio-ui-vue 1.0.28 → 1.0.31
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/.storybook/preview.js +7 -1
- package/README.md +6 -2
- package/dist/css/psui_styles.css +1863 -210
- package/package.json +15 -5
- package/src/assets/scss/base.scss +4 -0
- package/src/assets/scss/components/PsAccordion.scss +28 -11
- package/src/assets/scss/components/PsButton.scss +39 -18
- package/src/assets/scss/components/PsCardInfos.scss +1 -1
- package/src/assets/scss/components/PsCheckbox.scss +4 -5
- package/src/assets/scss/components/PsChips.scss +13 -8
- package/src/assets/scss/components/PsClimateZoneBadge.scss +1 -1
- package/src/assets/scss/components/PsCostEffectBar.scss +22 -27
- package/src/assets/scss/components/PsDialog.scss +5 -2
- package/src/assets/scss/components/PsDotLoader.scss +45 -0
- package/src/assets/scss/components/PsDraggable.scss +64 -0
- package/src/assets/scss/components/PsDropdown.scss +5 -22
- package/src/assets/scss/components/PsDropdownList.scss +19 -0
- package/src/assets/scss/components/PsHighlightRippleDot.scss +1 -1
- package/src/assets/scss/components/PsInlineSelector.scss +92 -1
- package/src/assets/scss/components/PsInput.scss +8 -3
- package/src/assets/scss/components/PsInputSelect.scss +75 -30
- package/src/assets/scss/components/PsInputTextArea.scss +5 -2
- package/src/assets/scss/components/PsMiniTag.scss +36 -0
- package/src/assets/scss/components/PsRadioButton.scss +5 -5
- package/src/assets/scss/components/PsSwitch.scss +4 -4
- package/src/assets/scss/components/PsTabHeader.scss +14 -0
- package/src/assets/scss/components/PsToast.scss +3 -3
- package/src/assets/scss/components/PsToggle.scss +6 -2
- package/src/assets/scss/components/PsTooltip.scss +51 -18
- package/src/components/accordion/PsAccordion.vue +7 -23
- package/src/components/accordion/PsAccordionItem.vue +41 -25
- package/src/components/badges-and-tags/PsCardInfos.vue +12 -0
- package/src/components/badges-and-tags/PsChartLegend.vue +13 -0
- package/src/components/badges-and-tags/PsClimateZoneBadge.vue +7 -0
- package/src/components/badges-and-tags/PsCostEffectBar.vue +6 -1
- package/src/components/badges-and-tags/PsHighlightRippleDot.vue +3 -1
- package/src/components/badges-and-tags/PsMiniTag.vue +21 -24
- package/src/components/badges-and-tags/PsProgressBar.vue +17 -9
- package/src/components/buttons/PsButton.vue +27 -2
- package/src/components/chips/PsChips.vue +24 -4
- package/src/components/controls/PsCheckbox.vue +32 -16
- package/src/components/controls/PsDraggable.vue +39 -150
- package/src/components/controls/PsInlineSelector.vue +144 -6
- package/src/components/controls/PsRadioButton.vue +28 -15
- package/src/components/controls/PsSlider.vue +1 -1
- package/src/components/controls/PsSwitch.vue +20 -11
- package/src/components/controls/PsToggle.vue +33 -12
- package/src/components/datatable/PsDataTable.vue +18 -0
- package/src/components/forms/PsDropdown.vue +18 -60
- package/src/components/forms/PsDropdownList.vue +82 -0
- package/src/components/forms/PsInput.vue +28 -1
- package/src/components/forms/PsInputSelect.vue +31 -2
- package/src/components/forms/PsInputTextArea.vue +53 -40
- package/src/components/notifications/PsDialog.vue +15 -0
- package/src/components/notifications/PsToast.vue +15 -0
- package/src/components/playground/PsScrollBar.vue +15 -0
- package/src/components/tabs/PsTabHeader.vue +19 -1
- package/src/components/tooltip/PsDialogTooltip.vue +103 -20
- package/src/components/tooltip/PsRichTooltip.vue +6 -3
- package/src/components/tooltip/PsTooltip.vue +19 -3
- package/src/components/ui/PsDotLoader.vue +15 -0
- package/src/components/ui/PsIcon.vue +30 -0
- package/src/index.js +39 -7
- package/src/stories/Accordion.stories.js +12 -48
- package/src/stories/Button.stories.js +30 -7
- package/src/stories/Chips.stories.js +14 -2
- package/src/stories/Colors.stories.mdx +1 -0
- package/src/stories/Dropdown.stories.js +36 -13
- package/src/stories/InlineSelector.stories.js +3 -1
- package/src/stories/InputSelect.stories.js +8 -0
- package/src/stories/MiniTag.stories.js +12 -6
- package/src/stories/Playground.stories.js +16 -0
- package/src/stories/Switch.stories.js +8 -2
- package/src/stories/Toast.stories.js +16 -16
- package/src/stories/Tooltip.stories.js +6 -6
- package/src/stories/Typography.stories.mdx +22 -18
- package/src/util/GeneralFunctions.js +8 -0
- package/tailwind.config.js +8 -3
- package/vetur/attributes.json +1376 -0
- package/vetur/tags.json +632 -0
- package/src/components/badges-and-tags/PsCostEffectBar.Copy.vue +0 -72
|
@@ -1,5 +1,96 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.psui-el-inline-selector {
|
|
3
|
-
|
|
3
|
+
@apply psui-w-auto psui-max-w-full psui-text-h4 psui-relative psui-flex-shrink-0 psui-text-blue-60 psui-box-border;
|
|
4
|
+
|
|
5
|
+
::-webkit-scrollbar {
|
|
6
|
+
@apply psui-bg-gray-30;
|
|
7
|
+
display: block;
|
|
8
|
+
width: 6px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
::-webkit-scrollbar-thumb {
|
|
12
|
+
@apply psui-bg-blue-70 psui-rounded;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
input {
|
|
16
|
+
@apply psui-border-b psui-border-dashed psui-border-blue-50;
|
|
17
|
+
transition: 300ms ease-in all;
|
|
18
|
+
padding-bottom: 3px;
|
|
19
|
+
|
|
20
|
+
&::placeholder {
|
|
21
|
+
@apply psui-text-h4 psui-text-gray-40
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.psui-el-inline-selector-input-wrapper {
|
|
26
|
+
@apply psui-relative;
|
|
27
|
+
|
|
28
|
+
span {
|
|
29
|
+
@apply psui-block psui-opacity-0;
|
|
30
|
+
min-width: 100px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
input {
|
|
34
|
+
@apply psui-appearance-none psui-bg-transparent psui-block psui-absolute psui-w-full psui-left-0 psui-top-0;
|
|
35
|
+
|
|
36
|
+
&:hover {
|
|
37
|
+
@apply psui-text-blue-50;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.psui-el-inline-selector-dropdown-wrapper {
|
|
43
|
+
@apply psui-absolute psui-left-0 psui-bg-white psui-rounded psui-shadow-elevation-20 psui-z-50 psui-overflow-y-auto;
|
|
44
|
+
max-height: 30vh;
|
|
45
|
+
min-width: 300px;
|
|
46
|
+
|
|
47
|
+
.psui-el-inline-selector-dropdown {
|
|
48
|
+
@apply psui-flex psui-bg-white;
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
.psui-el-inline-selector-error {
|
|
52
|
+
@apply psui-w-full psui-p-3 psui-flex psui-flex-col;
|
|
53
|
+
|
|
54
|
+
h3 {
|
|
55
|
+
@apply psui-text-red-20
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
p {
|
|
59
|
+
@apply psui-text-gray-50
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
ul {
|
|
64
|
+
@apply psui-w-full psui-bg-white;
|
|
65
|
+
|
|
66
|
+
li {
|
|
67
|
+
@apply psui-flex psui-cursor-pointer;
|
|
68
|
+
padding: 7.5px 16px;
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
@apply psui-bg-blue-20;
|
|
72
|
+
|
|
73
|
+
span p {
|
|
74
|
+
@apply psui-text-blue-60;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
span {
|
|
79
|
+
@apply psui-flex psui-items-center psui-w-full;
|
|
80
|
+
|
|
81
|
+
> p {
|
|
82
|
+
@apply psui-inline-block psui-text-big psui-text-gray-60 psui-flex-shrink-0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
p + p {
|
|
86
|
+
@apply psui-text-gray-40 psui-ml-auto psui-inline-block;
|
|
87
|
+
font-size: 12px;
|
|
88
|
+
line-height: 120%;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
4
95
|
}
|
|
5
96
|
}
|
|
@@ -11,15 +11,20 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&-hint {
|
|
14
|
-
@apply psui-text-gray-50 psui-
|
|
14
|
+
@apply psui-text-gray-50 psui-mt-1;
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
line-height: 24px;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
&-wrapper {
|
|
18
|
-
@apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex
|
|
20
|
+
@apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex;
|
|
21
|
+
transition: ease 130ms;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
label {
|
|
22
|
-
@apply psui-font-bold psui-text-gray-80
|
|
25
|
+
@apply psui-font-bold psui-text-gray-80;
|
|
26
|
+
line-height: 32px;
|
|
27
|
+
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
input {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.psui-el-input-select {
|
|
3
|
-
@apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40;
|
|
3
|
+
@apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
|
|
4
|
+
transition: ease 130ms;
|
|
4
5
|
|
|
5
6
|
&.disabled {
|
|
6
7
|
@apply psui-pointer-events-none;
|
|
@@ -10,53 +11,97 @@
|
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
select {
|
|
13
|
-
@apply
|
|
14
|
+
@apply psui-text-gray-40 psui-border-gray-20 psui-bg-gray-20 !important
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
&::after {
|
|
17
|
-
@apply psui-z-
|
|
18
|
+
@apply psui-z-20 psui-text-gray-50 !important;
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
&.
|
|
22
|
-
select {
|
|
23
|
-
@apply psui-border-blue-50 psui-text-gray-60
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&::after {
|
|
28
|
-
@apply psui-absolute psui-inline-block psui-text-gray-50;
|
|
29
|
-
content: 'arrow_drop_down';
|
|
30
|
-
font-family: 'Material Icons Round';
|
|
31
|
-
font-size: 24px;
|
|
32
|
-
top: 28px;
|
|
33
|
-
right: 16px;
|
|
34
|
-
z-index: -20;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
select {
|
|
38
|
-
@apply psui-appearance-none psui-w-full psui-border psui-bg-transparent psui-border-gray-30 psui-rounded-md psui-text-gray-40;
|
|
39
|
-
padding: 10px 16px;
|
|
22
|
+
&.layout-default {
|
|
40
23
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
24
|
+
&.selected {
|
|
25
|
+
select {
|
|
26
|
+
@apply psui-border-blue-50 psui-text-gray-60
|
|
27
|
+
}
|
|
44
28
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
@apply psui-
|
|
29
|
+
|
|
30
|
+
&::after {
|
|
31
|
+
@apply psui-absolute psui-inline-block psui-text-gray-50;
|
|
32
|
+
content: 'arrow_drop_down';
|
|
33
|
+
font-family: 'Material Icons Round';
|
|
34
|
+
font-size: 24px;
|
|
35
|
+
top: 38px;
|
|
36
|
+
right: 15px;
|
|
37
|
+
z-index: -20;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
select {
|
|
41
|
+
@apply psui-appearance-none psui-bg-transparent psui-text-big psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
|
|
42
|
+
padding: 11.5px 16px;
|
|
43
|
+
|
|
44
|
+
&:hover,
|
|
45
|
+
&:active {
|
|
46
|
+
@apply psui-border-blue-50 psui-text-gray-60
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:focus {
|
|
50
|
+
@apply psui-border-blue-60 psui-text-gray-60
|
|
51
|
+
}
|
|
48
52
|
}
|
|
49
53
|
|
|
50
54
|
}
|
|
51
55
|
|
|
56
|
+
|
|
52
57
|
label {
|
|
53
|
-
@apply psui-flex psui-text-gray-80 psui-
|
|
58
|
+
@apply psui-flex psui-text-gray-80 psui-items-center psui-w-full psui-font-bold psui-pointer-events-none;
|
|
59
|
+
font-size: 16px;
|
|
60
|
+
line-height: 32px;
|
|
54
61
|
}
|
|
55
62
|
|
|
56
63
|
.psui-el-input-helper {
|
|
57
64
|
@apply psui-text-gray-50;
|
|
58
65
|
font-size: 12px;
|
|
59
|
-
line-height:
|
|
66
|
+
line-height: 24px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.layout-mini {
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
select {
|
|
73
|
+
@apply psui-text-small psui-appearance-none psui-bg-transparent psui-w-full psui-border psui-border-gray-30;
|
|
74
|
+
border-radius: 4px;
|
|
75
|
+
padding: 7px 8px;
|
|
76
|
+
|
|
77
|
+
&:hover,
|
|
78
|
+
&:active {
|
|
79
|
+
@apply psui-border-green-20 psui-text-gray-50
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&:focus {
|
|
83
|
+
@apply psui-border-green-70 psui-text-gray-50
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&::after {
|
|
90
|
+
@apply psui-absolute psui-inline-block psui-text-gray-50 ;
|
|
91
|
+
content: 'unfold_more';
|
|
92
|
+
font-family: 'Material Icons Round';
|
|
93
|
+
font-size: 18px;
|
|
94
|
+
top: 4px;
|
|
95
|
+
right: 4px;
|
|
96
|
+
z-index: -20;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.selected {
|
|
100
|
+
select {
|
|
101
|
+
@apply psui-border-green-20 psui-text-green-70
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
60
105
|
}
|
|
61
106
|
}
|
|
62
107
|
}
|
|
@@ -19,9 +19,12 @@
|
|
|
19
19
|
|
|
20
20
|
.psui-el-input-textarea-wrapper {
|
|
21
21
|
@apply psui-flex psui-flex-col;
|
|
22
|
+
transition: ease 130ms;
|
|
22
23
|
|
|
23
24
|
label {
|
|
24
|
-
@apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1
|
|
25
|
+
@apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1;
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
line-height: 32px;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
textarea {
|
|
@@ -42,7 +45,7 @@
|
|
|
42
45
|
.psui-el-input-textarea-message {
|
|
43
46
|
@apply psui-text-gray-50 psui-flex psui-font-normal;
|
|
44
47
|
font-size: 12px;
|
|
45
|
-
line-height:
|
|
48
|
+
line-height: 24px;
|
|
46
49
|
padding: 5px 0px;
|
|
47
50
|
}
|
|
48
51
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.psui-el-mini-tag {
|
|
3
|
+
@apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
|
|
4
|
+
width: fit-content;
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
div {
|
|
8
|
+
@apply psui-w-full psui-font-bold;
|
|
9
|
+
padding: 1px 8px 0px 8px;
|
|
10
|
+
font-size: 10px;
|
|
11
|
+
letter-spacing: 0.5px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&-layout{
|
|
15
|
+
&-info {
|
|
16
|
+
@apply psui-bg-blue-20 psui-text-blue-60
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-success {
|
|
20
|
+
@apply psui-bg-green-10 psui-text-green-70
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-warning {
|
|
24
|
+
@apply psui-bg-yellow-10 psui-text-yellow-70
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-error {
|
|
28
|
+
@apply psui-bg-red-10 psui-text-red-20
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-default {
|
|
32
|
+
@apply psui-bg-gray-20 psui-text-gray-50
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
|
|
3
3
|
.psui-el-radio {
|
|
4
|
-
@apply psui-relative psui-text-gray-50;
|
|
4
|
+
@apply psui-relative psui-text-gray-50 psui-flex psui-bg-gray-10;
|
|
5
5
|
|
|
6
6
|
&.disabled {
|
|
7
7
|
.psui-el-checkmark {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.psui-el-checkmark {
|
|
31
|
-
@apply psui-
|
|
31
|
+
@apply psui-cursor-pointer psui-flex psui-items-center;
|
|
32
32
|
height: 18px;
|
|
33
33
|
|
|
34
34
|
span {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
&::before {
|
|
39
39
|
content: 'radio_button_unchecked';
|
|
40
|
-
@apply psui-text-gray-40
|
|
40
|
+
@apply psui-text-gray-40;
|
|
41
41
|
font-family: 'Material Icons Round';
|
|
42
42
|
font-size: 18px;
|
|
43
43
|
}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.psui-el-checkmark {
|
|
62
|
-
@apply psui-
|
|
62
|
+
@apply psui-cursor-pointer psui-flex psui-items-center;
|
|
63
63
|
height: 24px;
|
|
64
64
|
|
|
65
65
|
span {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
|
|
69
69
|
&::before {
|
|
70
70
|
content: 'radio_button_unchecked';
|
|
71
|
-
@apply psui-text-gray-40
|
|
71
|
+
@apply psui-text-gray-40;
|
|
72
72
|
font-family: 'Material Icons Round';
|
|
73
73
|
font-size: 24px;
|
|
74
74
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
.psui-el-switch-button {
|
|
13
13
|
&.toggle-false{
|
|
14
14
|
&::before {
|
|
15
|
-
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-
|
|
15
|
+
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
16
16
|
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
|
|
17
17
|
left: 2px;
|
|
18
18
|
top: 2px;
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
@apply psui-bg-green-20;
|
|
25
25
|
|
|
26
26
|
&::before {
|
|
27
|
-
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-
|
|
27
|
+
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
28
28
|
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
|
|
29
29
|
left: 16px;
|
|
30
30
|
top: 2px;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
&.toggle-false{
|
|
46
46
|
&::before {
|
|
47
|
-
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-
|
|
47
|
+
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
48
48
|
left: 2px;
|
|
49
49
|
top: 2px;
|
|
50
50
|
content: '';
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
@apply psui-bg-green-20;
|
|
56
56
|
|
|
57
57
|
&::before {
|
|
58
|
-
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-
|
|
58
|
+
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
59
59
|
left: 24px;
|
|
60
60
|
top:2px;
|
|
61
61
|
content: '';
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
&.status-disabled {
|
|
9
9
|
@apply cursor-not-allowed
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
&:focus {
|
|
13
|
+
outline: none;
|
|
14
|
+
}
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
&.status-disabled {
|
|
@@ -24,6 +28,7 @@
|
|
|
24
28
|
button {
|
|
25
29
|
@apply psui-bg-gray-10 psui-text-gray-60;
|
|
26
30
|
padding: 6px 12px;
|
|
31
|
+
box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
|
|
27
32
|
|
|
28
33
|
&:not(:last-child) {
|
|
29
34
|
margin-right: 1px;
|
|
@@ -39,6 +44,7 @@
|
|
|
39
44
|
|
|
40
45
|
&:hover {
|
|
41
46
|
@apply psui-text-blue-60;
|
|
47
|
+
box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
|
|
42
48
|
}
|
|
43
49
|
|
|
44
50
|
&.status-active {
|
|
@@ -62,6 +68,10 @@
|
|
|
62
68
|
border-bottom: 3px solid transparent;
|
|
63
69
|
padding: 11.5px 0;
|
|
64
70
|
|
|
71
|
+
&:hover {
|
|
72
|
+
@apply psui-text-blue-60;
|
|
73
|
+
}
|
|
74
|
+
|
|
65
75
|
&:not(:last-child) {
|
|
66
76
|
margin-right: 20px;
|
|
67
77
|
}
|
|
@@ -85,6 +95,10 @@
|
|
|
85
95
|
@apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
|
|
86
96
|
padding: 9px 12px;
|
|
87
97
|
|
|
98
|
+
&:hover {
|
|
99
|
+
@apply psui-text-blue-60;
|
|
100
|
+
}
|
|
101
|
+
|
|
88
102
|
&:not(:last-child) {
|
|
89
103
|
margin-right: 4px;
|
|
90
104
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.psui-el-toast {
|
|
3
|
-
@apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold;
|
|
3
|
+
@apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;
|
|
4
4
|
|
|
5
5
|
.psui-el-toast-icon {
|
|
6
6
|
@apply psui-flex psui-mr-4;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.psui-el-toast-actions {
|
|
15
|
-
@apply psui-flex psui-gap-4
|
|
15
|
+
@apply psui-flex psui-gap-4 psui-text-accentSmall;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
&.fill-intense.layout{
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
&.fill-soft.layout {
|
|
37
37
|
&-info {
|
|
38
|
-
@apply psui-text-blue-60 psui-bg-blue-20
|
|
38
|
+
@apply psui-text-blue-60 psui-bg-blue-20;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
&-success {
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
@layer components{
|
|
2
2
|
|
|
3
3
|
.psui-el-toggle {
|
|
4
|
-
@apply psui-flex psui-
|
|
4
|
+
@apply psui-flex psui-bg-gray-10 psui-items-center;
|
|
5
5
|
padding: 2px;
|
|
6
|
+
gap: 2px;
|
|
7
|
+
border-radius: 4px;
|
|
6
8
|
|
|
7
9
|
button {
|
|
8
|
-
@apply transition-default psui-inline-flex psui-
|
|
10
|
+
@apply transition-default psui-inline-flex psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
padding:1px 8px;
|
|
9
13
|
|
|
10
14
|
&.status-active {
|
|
11
15
|
@apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;
|
|
@@ -5,11 +5,14 @@
|
|
|
5
5
|
@apply psui-relative;
|
|
6
6
|
|
|
7
7
|
.psui-el-tooltip-dialog {
|
|
8
|
-
@apply psui-fixed psui-
|
|
9
|
-
|
|
8
|
+
@apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
|
|
9
|
+
transition-delay: 0.4s;
|
|
10
|
+
min-width: 256px;
|
|
11
|
+
|
|
10
12
|
.psui-el-tooltip-content {
|
|
11
|
-
@apply psui-flex psui-flex-col psui-
|
|
12
|
-
padding: 5px 8px;
|
|
13
|
+
@apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
|
|
14
|
+
padding: 5px 8px 4px 8px;
|
|
15
|
+
border-radius: 4px;
|
|
13
16
|
|
|
14
17
|
h2 {
|
|
15
18
|
@apply psui-font-bold;
|
|
@@ -21,9 +24,10 @@
|
|
|
21
24
|
|
|
22
25
|
&.layout {
|
|
23
26
|
&-gray {
|
|
24
|
-
@apply psui-bg-gray-30 psui-text-gray-80 psui-
|
|
27
|
+
@apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
|
|
25
28
|
font-size: 12px;
|
|
26
29
|
line-height: 120%;
|
|
30
|
+
padding: 10px 16px 12px 16px;
|
|
27
31
|
|
|
28
32
|
.psui-el-tooltip-content-wrapper {
|
|
29
33
|
@apply psui-font-normal psui-mt-1
|
|
@@ -31,9 +35,10 @@
|
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
&-blue {
|
|
34
|
-
@apply psui-bg-blue-70 psui-text-white psui-
|
|
38
|
+
@apply psui-bg-blue-70 psui-text-white psui-shadow-none;
|
|
35
39
|
font-size: 12px;
|
|
36
40
|
line-height: 120%;
|
|
41
|
+
padding: 10px 16px 12px 16px;
|
|
37
42
|
|
|
38
43
|
.psui-el-tooltip-content-wrapper {
|
|
39
44
|
@apply psui-font-normal psui-mt-1
|
|
@@ -41,9 +46,10 @@
|
|
|
41
46
|
}
|
|
42
47
|
|
|
43
48
|
&-red {
|
|
44
|
-
@apply psui-bg-red-10 psui-text-red-70 psui-
|
|
49
|
+
@apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
|
|
45
50
|
font-size: 12px;
|
|
46
51
|
line-height: 120%;
|
|
52
|
+
padding: 10px 16px 12px 16px;
|
|
47
53
|
|
|
48
54
|
.psui-el-tooltip-content-wrapper {
|
|
49
55
|
@apply psui-font-normal psui-mt-1
|
|
@@ -51,7 +57,8 @@
|
|
|
51
57
|
}
|
|
52
58
|
|
|
53
59
|
&-white {
|
|
54
|
-
@apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-
|
|
60
|
+
@apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
|
|
61
|
+
gap: 8.8px;
|
|
55
62
|
|
|
56
63
|
h2 {
|
|
57
64
|
@apply psui-text-gray-80 psui-font-bold;
|
|
@@ -60,19 +67,27 @@
|
|
|
60
67
|
}
|
|
61
68
|
|
|
62
69
|
.psui-el-tooltip-content-wrapper {
|
|
63
|
-
@apply psui-text-gray-50 psui-
|
|
70
|
+
@apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
|
|
71
|
+
gap: 13.6px;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
line-height: 120%;
|
|
64
74
|
|
|
65
75
|
button {
|
|
66
|
-
@apply psui-rounded-md psui-bg-blue-20 psui-text-blue-60;
|
|
76
|
+
@apply psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
|
|
67
77
|
padding: 7px 16px;
|
|
68
78
|
width: fit-content;
|
|
79
|
+
|
|
80
|
+
&:focus {
|
|
81
|
+
outline: none;
|
|
82
|
+
}
|
|
69
83
|
}
|
|
70
84
|
}
|
|
71
85
|
}
|
|
72
86
|
|
|
73
87
|
&-dark {
|
|
74
|
-
@apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-
|
|
75
|
-
|
|
88
|
+
@apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
|
|
89
|
+
gap: 8.8px;
|
|
90
|
+
|
|
76
91
|
h2 {
|
|
77
92
|
@apply psui-text-white psui-font-bold;
|
|
78
93
|
font-size: 17px;
|
|
@@ -80,19 +95,29 @@
|
|
|
80
95
|
}
|
|
81
96
|
|
|
82
97
|
.psui-el-tooltip-content-wrapper {
|
|
83
|
-
@apply psui-text-white psui-
|
|
98
|
+
@apply psui-text-white psui-font-normal psui-flex psui-flex-col;
|
|
99
|
+
gap: 13.6px;
|
|
100
|
+
font-size: 14px;
|
|
101
|
+
line-height: 120%;
|
|
84
102
|
|
|
85
103
|
button {
|
|
86
|
-
@apply psui-rounded-md psui-bg-blue-60 psui-text-white;
|
|
104
|
+
@apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
|
|
87
105
|
padding: 7px 16px;
|
|
88
106
|
width: fit-content;
|
|
107
|
+
|
|
108
|
+
&:focus {
|
|
109
|
+
outline: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
89
112
|
}
|
|
90
113
|
}
|
|
91
114
|
}
|
|
92
115
|
|
|
93
116
|
&-color {
|
|
94
|
-
@apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-
|
|
95
|
-
|
|
117
|
+
@apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
|
|
118
|
+
gap: 8.8px;
|
|
119
|
+
|
|
120
|
+
|
|
96
121
|
h2 {
|
|
97
122
|
@apply psui-text-white psui-font-bold;
|
|
98
123
|
font-size: 17px;
|
|
@@ -100,12 +125,20 @@
|
|
|
100
125
|
}
|
|
101
126
|
|
|
102
127
|
.psui-el-tooltip-content-wrapper {
|
|
103
|
-
@apply psui-text-white psui-
|
|
128
|
+
@apply psui-text-white psui-font-normal psui-flex psui-flex-col;
|
|
129
|
+
gap: 13.6px;
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
line-height: 120%;
|
|
104
132
|
|
|
105
133
|
button {
|
|
106
|
-
@apply psui-rounded-md psui-bg-blue-60 psui-text-white;
|
|
134
|
+
@apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
|
|
107
135
|
padding: 7px 16px;
|
|
108
136
|
width: fit-content;
|
|
137
|
+
|
|
138
|
+
&:focus {
|
|
139
|
+
outline: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
109
142
|
}
|
|
110
143
|
}
|
|
111
144
|
}
|