@platformatic/ui-components 0.6.6 → 0.6.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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React, { useEffect, useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
|
-
import styles from './
|
|
4
|
+
import styles from './ButtonOnlyIcon.module.css'
|
|
5
5
|
import commonStyles from './Common.module.css'
|
|
6
6
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
7
7
|
import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
|
|
@@ -19,6 +19,7 @@ function ButtonOnlyIcon ({
|
|
|
19
19
|
fullWidth = false,
|
|
20
20
|
platformaticIcon = null,
|
|
21
21
|
selected = false,
|
|
22
|
+
fullRounded = false,
|
|
22
23
|
...rest
|
|
23
24
|
}) {
|
|
24
25
|
let contentClassName = `${styles.content} `
|
|
@@ -32,6 +33,10 @@ function ButtonOnlyIcon ({
|
|
|
32
33
|
if (fullWidth) {
|
|
33
34
|
baseButtonClassName += ` ${styles.fullWidth}`
|
|
34
35
|
}
|
|
36
|
+
if (fullRounded) {
|
|
37
|
+
baseButtonClassName += ` ${styles.fullRounded}`
|
|
38
|
+
contentClassName += ` ${styles.fullRounded} `
|
|
39
|
+
}
|
|
35
40
|
if (selected) baseButtonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
|
|
36
41
|
const [hover, setHover] = useState(false)
|
|
37
42
|
const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
.button {
|
|
2
|
+
@apply rounded text-center cursor-pointer font-normal border border-solid box-border;
|
|
3
|
+
padding-block: 0px;
|
|
4
|
+
padding-inline: 0px;
|
|
5
|
+
}
|
|
6
|
+
.content {
|
|
7
|
+
@apply rounded flex items-center justify-center gap-x-2;
|
|
8
|
+
background: transparent;
|
|
9
|
+
}
|
|
10
|
+
.fontBold {
|
|
11
|
+
@apply font-semibold;
|
|
12
|
+
}
|
|
13
|
+
.button-small {
|
|
14
|
+
@apply p-1 text-sm;
|
|
15
|
+
}
|
|
16
|
+
.button-medium {
|
|
17
|
+
@apply p-1;
|
|
18
|
+
}
|
|
19
|
+
.button-large {
|
|
20
|
+
@apply p-2;
|
|
21
|
+
}
|
|
22
|
+
.button-extra-large {
|
|
23
|
+
@apply p-2 md:p-2.5;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.margin-right-medium,
|
|
27
|
+
.margin-right-small {
|
|
28
|
+
@apply mr-1;
|
|
29
|
+
}
|
|
30
|
+
.margin-right-large {
|
|
31
|
+
@apply mr-2;
|
|
32
|
+
}
|
|
33
|
+
.margin-right-extra-large {
|
|
34
|
+
@apply mr-3;
|
|
35
|
+
}
|
|
36
|
+
.color-main-green {
|
|
37
|
+
@apply text-main-green border-main-green;
|
|
38
|
+
}
|
|
39
|
+
.color-light-green {
|
|
40
|
+
@apply text-light-green border-light-green;
|
|
41
|
+
}
|
|
42
|
+
.color-dark-green {
|
|
43
|
+
@apply text-dark-green border-dark-green;
|
|
44
|
+
}
|
|
45
|
+
.color-main-dark-blue {
|
|
46
|
+
@apply text-main-dark-blue border-main-dark-blue;
|
|
47
|
+
}
|
|
48
|
+
.color-dark-blue{
|
|
49
|
+
@apply text-dark-blue border-dark-blue;
|
|
50
|
+
}
|
|
51
|
+
.color-light-blue{
|
|
52
|
+
@apply text-light-blue border-light-blue;
|
|
53
|
+
}
|
|
54
|
+
.color-white{
|
|
55
|
+
@apply text-white;
|
|
56
|
+
}
|
|
57
|
+
.color-error-red{
|
|
58
|
+
@apply text-error-red border-error-red;
|
|
59
|
+
}
|
|
60
|
+
.color-tertiary-blue{
|
|
61
|
+
@apply text-tertiary-blue border-tertiary-blue;
|
|
62
|
+
}
|
|
63
|
+
.color-transparent{
|
|
64
|
+
@apply text-transparent border-transparent;
|
|
65
|
+
}
|
|
66
|
+
.color-rich-black{
|
|
67
|
+
@apply text-rich-black border-rich-black;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.no-border {
|
|
71
|
+
@apply border-0;
|
|
72
|
+
}
|
|
73
|
+
.disabled {
|
|
74
|
+
@apply opacity-30 cursor-default;
|
|
75
|
+
}
|
|
76
|
+
.hover-box-shadow-main-green {
|
|
77
|
+
@apply hover:shadow-main-green;
|
|
78
|
+
}
|
|
79
|
+
.hover-box-shadow-light-green {
|
|
80
|
+
@apply hover:shadow-light-green;
|
|
81
|
+
}
|
|
82
|
+
.hover-box-shadow-dark-green {
|
|
83
|
+
@apply hover:shadow-dark-green;
|
|
84
|
+
}
|
|
85
|
+
.hover-box-shadow-main-dark-blue {
|
|
86
|
+
@apply hover:shadow-main-dark-blue;
|
|
87
|
+
}
|
|
88
|
+
.hover-box-shadow-dark-blue {
|
|
89
|
+
@apply hover:shadow-dark-blue;
|
|
90
|
+
}
|
|
91
|
+
.hover-box-shadow-light-blue {
|
|
92
|
+
@apply hover:shadow-light-blue;
|
|
93
|
+
}
|
|
94
|
+
.hover-box-shadow-white {
|
|
95
|
+
@apply hover:shadow-white;
|
|
96
|
+
}
|
|
97
|
+
.hover-box-shadow-error-red {
|
|
98
|
+
@apply hover:shadow-error-red;
|
|
99
|
+
}
|
|
100
|
+
.hover-box-shadow-tertiary-blue {
|
|
101
|
+
@apply hover:shadow-tertiary-blue;
|
|
102
|
+
}
|
|
103
|
+
.hover-box-shadow-rich-black {
|
|
104
|
+
@apply hover:shadow-rich-black;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.underline-effect {
|
|
108
|
+
@apply hover:underline;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.fullWidth {
|
|
112
|
+
@apply w-full;
|
|
113
|
+
}
|
|
114
|
+
.label {
|
|
115
|
+
@apply w-max;
|
|
116
|
+
}
|
|
117
|
+
.inactive {
|
|
118
|
+
@apply opacity-70;
|
|
119
|
+
}
|
|
120
|
+
.active {
|
|
121
|
+
@apply opacity-100;
|
|
122
|
+
}
|
|
123
|
+
.cursorDefault {
|
|
124
|
+
@apply cursor-default;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.fullRounded {
|
|
128
|
+
@apply rounded-full;
|
|
129
|
+
}
|