@prokodo/ui 0.0.33 → 0.0.34
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/components/button/Button.client.js +15 -87
- package/dist/components/button/Button.server.js +9 -65
- package/dist/components/button/Button.view.js +61 -0
- package/dist/constants/project.js +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/button/Button.client.d.ts +1 -1
- package/dist/types/components/button/Button.model.d.ts +10 -0
- package/dist/types/components/button/Button.server.d.ts +2 -2
- package/dist/types/components/button/Button.view.d.ts +3 -0
- package/dist/ui.css +209 -209
- package/package.json +1 -1
|
@@ -25,3 +25,13 @@ export type ButtonIconProps = (Omit<ButtonProperties, "title" | "aria-label"> &
|
|
|
25
25
|
inert: boolean;
|
|
26
26
|
});
|
|
27
27
|
export type ButtonProps = ButtonIconProps | ButtonDefaultProps;
|
|
28
|
+
export type ButtonViewProps = ButtonProps & {
|
|
29
|
+
isIconOnly: boolean;
|
|
30
|
+
LinkComponent: React.ComponentType<{
|
|
31
|
+
href: string;
|
|
32
|
+
className: string;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
id?: string;
|
|
35
|
+
children: React.ReactNode;
|
|
36
|
+
}>;
|
|
37
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { ButtonProps } from './Button.model';
|
|
2
|
-
import type { JSX } from
|
|
3
|
-
export default function ButtonServer(
|
|
2
|
+
import type { JSX } from "react";
|
|
3
|
+
export default function ButtonServer(p: ButtonProps): JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { ButtonViewProps } from './Button.model';
|
|
2
|
+
import type { JSX } from "react";
|
|
3
|
+
export declare function ButtonView({ fullWidth, color, variant, className, contentClassName, disabled, redirect, iconProps, isIconOnly, LinkComponent, ...rest }: ButtonViewProps): JSX.Element;
|
package/dist/ui.css
CHANGED
|
@@ -890,192 +890,71 @@
|
|
|
890
890
|
* This mixin specifies basic text-styles for components that render a richtext
|
|
891
891
|
* content.
|
|
892
892
|
*/
|
|
893
|
-
.prokodo-
|
|
894
|
-
|
|
895
|
-
border-radius: 1.5rem;
|
|
896
|
-
border-width: 0;
|
|
897
|
-
padding: 0.875rem 1.5rem;
|
|
898
|
-
background-color: var(--color-grey-50);
|
|
899
|
-
box-shadow: var(--elevation-1);
|
|
893
|
+
.prokodo-Link {
|
|
894
|
+
text-decoration: none;
|
|
900
895
|
cursor: pointer;
|
|
901
|
-
|
|
902
|
-
font-weight:
|
|
903
|
-
font-size:
|
|
904
|
-
font-family: var(--font-
|
|
905
|
-
font-style: normal
|
|
906
|
-
line-height: 1.
|
|
907
|
-
letter-spacing: 0.03em
|
|
908
|
-
text-transform: none
|
|
909
|
-
text-align: left
|
|
910
|
-
text-decoration: none
|
|
911
|
-
}
|
|
912
|
-
html[data-theme=dark] .prokodo-Button {
|
|
913
|
-
background-color: var(--color-grey-100);
|
|
914
|
-
}
|
|
915
|
-
.prokodo-Button:hover {
|
|
916
|
-
box-shadow: none;
|
|
917
|
-
}
|
|
918
|
-
.prokodo-Button:focus-within {
|
|
919
|
-
outline: 3px solid #1E90FF;
|
|
920
|
-
outline-offset: 4px;
|
|
921
|
-
border-radius: 1.5rem;
|
|
922
|
-
border-radius: 1.5rem;
|
|
923
|
-
}
|
|
924
|
-
.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
|
|
925
|
-
color: #FFFFFF !important;
|
|
926
|
-
}
|
|
927
|
-
.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
|
|
928
|
-
color: var(--color-black);
|
|
929
|
-
}
|
|
930
|
-
.prokodo-Button--has-bg-primary {
|
|
931
|
-
background: var(--gradient-background-primary);
|
|
932
|
-
}
|
|
933
|
-
.prokodo-Button--has-bg-secondary {
|
|
934
|
-
background: var(--gradient-background-secondary);
|
|
935
|
-
}
|
|
936
|
-
.prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
|
|
937
|
-
background: var(--gradient-background-info);
|
|
938
|
-
}
|
|
939
|
-
.prokodo-Button--has-bg-success {
|
|
940
|
-
background: var(--gradient-background-success);
|
|
941
|
-
}
|
|
942
|
-
.prokodo-Button--has-bg-warning {
|
|
943
|
-
background: var(--gradient-background-warning);
|
|
944
|
-
}
|
|
945
|
-
.prokodo-Button--has-bg-error {
|
|
946
|
-
background: var(--gradient-background-error);
|
|
896
|
+
color: var(--color-grey-500);
|
|
897
|
+
font-weight: 500;
|
|
898
|
+
font-size: 1.125rem;
|
|
899
|
+
font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
900
|
+
font-style: normal;
|
|
901
|
+
line-height: 1.55;
|
|
902
|
+
letter-spacing: 0.03em;
|
|
903
|
+
text-transform: none;
|
|
904
|
+
text-align: left;
|
|
905
|
+
text-decoration: none;
|
|
947
906
|
}
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
907
|
+
@media screen and (min-width: 480px) {
|
|
908
|
+
.prokodo-Link {
|
|
909
|
+
font-size: 1rem;
|
|
910
|
+
line-height: 1.5;
|
|
911
|
+
}
|
|
953
912
|
}
|
|
954
|
-
|
|
955
|
-
|
|
913
|
+
@media screen and (min-width: 960px) {
|
|
914
|
+
.prokodo-Link {
|
|
915
|
+
font-size: 1rem;
|
|
916
|
+
line-height: 1.5;
|
|
917
|
+
}
|
|
956
918
|
}
|
|
957
|
-
.prokodo-
|
|
958
|
-
|
|
919
|
+
.prokodo-Link:hover {
|
|
920
|
+
text-decoration: underline;
|
|
959
921
|
}
|
|
960
|
-
.prokodo-
|
|
961
|
-
|
|
922
|
+
.prokodo-Link--has-no-background:hover {
|
|
923
|
+
text-decoration: underline;
|
|
924
|
+
color: var(--color-primary-500);
|
|
962
925
|
}
|
|
963
|
-
.prokodo-
|
|
926
|
+
.prokodo-Link--has-no-background:focus {
|
|
964
927
|
color: var(--color-primary-500);
|
|
965
928
|
}
|
|
966
|
-
.prokodo-
|
|
967
|
-
|
|
929
|
+
.prokodo-Link--has-no-background--primary {
|
|
930
|
+
color: var(--color-primary-500);
|
|
968
931
|
}
|
|
969
|
-
.prokodo-
|
|
932
|
+
.prokodo-Link--has-no-background--secondary {
|
|
970
933
|
color: var(--color-secondary-500);
|
|
971
934
|
}
|
|
972
|
-
.prokodo-
|
|
973
|
-
|
|
974
|
-
}
|
|
975
|
-
.prokodo-Button--is-disabled, .prokodo-Button--has-text-info {
|
|
976
|
-
color: var(--color-grey-700);
|
|
977
|
-
}
|
|
978
|
-
.prokodo-Button--is-disabled:hover, .prokodo-Button--has-text-info:hover {
|
|
979
|
-
background-color: var(--color-grey-100);
|
|
935
|
+
.prokodo-Link--has-no-background--info {
|
|
936
|
+
color: var(--color-grey-300);
|
|
980
937
|
}
|
|
981
|
-
.prokodo-
|
|
938
|
+
.prokodo-Link--has-no-background--success {
|
|
982
939
|
color: var(--color-success);
|
|
983
940
|
}
|
|
984
|
-
.prokodo-
|
|
985
|
-
background-color: var(--color-success);
|
|
986
|
-
}
|
|
987
|
-
.prokodo-Button--has-text-warning {
|
|
941
|
+
.prokodo-Link--has-no-background--warning {
|
|
988
942
|
color: var(--color-warning);
|
|
989
943
|
}
|
|
990
|
-
.prokodo-
|
|
991
|
-
background-color: var(--color-warning);
|
|
992
|
-
}
|
|
993
|
-
.prokodo-Button--has-text-error {
|
|
944
|
+
.prokodo-Link--has-no-background--error {
|
|
994
945
|
color: var(--color-error);
|
|
995
946
|
}
|
|
996
|
-
.prokodo-
|
|
997
|
-
|
|
998
|
-
}
|
|
999
|
-
.prokodo-Button--has-variant-outlined {
|
|
1000
|
-
position: relative;
|
|
1001
|
-
background: none;
|
|
1002
|
-
}
|
|
1003
|
-
.prokodo-Button--has-variant-outlined::before {
|
|
1004
|
-
content: "";
|
|
1005
|
-
position: absolute;
|
|
1006
|
-
top: 0;
|
|
1007
|
-
left: 0;
|
|
1008
|
-
right: 0;
|
|
1009
|
-
bottom: 0;
|
|
1010
|
-
border-radius: inherit;
|
|
1011
|
-
padding: 2px;
|
|
1012
|
-
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1013
|
-
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1014
|
-
-webkit-mask-composite: xor;
|
|
1015
|
-
mask-composite: exclude;
|
|
1016
|
-
z-index: 0;
|
|
1017
|
-
background: var(--gradient-border-4);
|
|
1018
|
-
}
|
|
1019
|
-
html[data-theme=dark] .prokodo-Button--has-variant-outlined {
|
|
1020
|
-
background: none;
|
|
1021
|
-
}
|
|
1022
|
-
.prokodo-Button--icon-only {
|
|
1023
|
-
display: flex;
|
|
1024
|
-
justify-content: center;
|
|
1025
|
-
align-items: center;
|
|
1026
|
-
border-radius: 10000px;
|
|
1027
|
-
padding: 0.75rem;
|
|
1028
|
-
}
|
|
1029
|
-
html[data-theme=dark] .prokodo-Button--icon-only {
|
|
1030
|
-
background: none;
|
|
1031
|
-
}
|
|
1032
|
-
.prokodo-Button--has-fullWidth {
|
|
1033
|
-
display: block;
|
|
1034
|
-
width: 100%;
|
|
1035
|
-
}
|
|
1036
|
-
.prokodo-Button--is-disabled {
|
|
1037
|
-
cursor: default;
|
|
1038
|
-
}
|
|
1039
|
-
.prokodo-Button__title {
|
|
1040
|
-
display: flex;
|
|
1041
|
-
flex-direction: row;
|
|
1042
|
-
align-items: center;
|
|
1043
|
-
}
|
|
1044
|
-
.prokodo-Button__icon {
|
|
1045
|
-
margin-right: 5px;
|
|
1046
|
-
}
|
|
1047
|
-
.prokodo-Button__icon--icon-only {
|
|
1048
|
-
margin-right: 0;
|
|
1049
|
-
}
|
|
1050
|
-
.prokodo-Button__link {
|
|
1051
|
-
display: table;
|
|
1052
|
-
width: 100%;
|
|
1053
|
-
color: inherit;
|
|
1054
|
-
font-weight: 400;
|
|
1055
|
-
font-size: 1rem;
|
|
1056
|
-
font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1057
|
-
font-style: normal;
|
|
1058
|
-
line-height: 1.4;
|
|
1059
|
-
letter-spacing: 0.03em;
|
|
1060
|
-
text-transform: none;
|
|
1061
|
-
text-align: left;
|
|
1062
|
-
text-decoration: none;
|
|
1063
|
-
}
|
|
1064
|
-
.prokodo-Button__link--icon-only {
|
|
1065
|
-
display: contents;
|
|
947
|
+
.prokodo-Link--has-no-background--white {
|
|
948
|
+
color: var(--color-white);
|
|
1066
949
|
}
|
|
1067
|
-
.prokodo-
|
|
1068
|
-
|
|
950
|
+
.prokodo-Link--has-no-background--white:hover {
|
|
951
|
+
color: var(--color-white);
|
|
1069
952
|
}
|
|
1070
|
-
.prokodo-
|
|
1071
|
-
|
|
1072
|
-
justify-content: center;
|
|
1073
|
-
border-radius: 2rem;
|
|
1074
|
-
width: 100%;
|
|
953
|
+
.prokodo-Link--has-no-background--primary:hover, .prokodo-Link--has-no-background--secondary:hover, .prokodo-Link--has-no-background--success:hover, .prokodo-Link--has-no-background--error:hover, .prokodo-Link--has-no-background--info:hover, .prokodo-Link--has-no-background--warning:hover {
|
|
954
|
+
color: var(--color-grey-500);
|
|
1075
955
|
}
|
|
1076
|
-
.prokodo-
|
|
1077
|
-
|
|
1078
|
-
border-radius: 2000rem;
|
|
956
|
+
.prokodo-Link--has-no-background--primary:focus, .prokodo-Link--has-no-background--secondary:focus, .prokodo-Link--has-no-background--success:focus, .prokodo-Link--has-no-background--error:focus, .prokodo-Link--has-no-background--info:focus, .prokodo-Link--has-no-background--warning:focus {
|
|
957
|
+
color: var(--color-grey-500);
|
|
1079
958
|
}/* stylelint-disable */
|
|
1080
959
|
/**
|
|
1081
960
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -1225,71 +1104,192 @@ html[data-theme=dark] .prokodo-Button--icon-only {
|
|
|
1225
1104
|
* This mixin specifies basic text-styles for components that render a richtext
|
|
1226
1105
|
* content.
|
|
1227
1106
|
*/
|
|
1228
|
-
.prokodo-
|
|
1229
|
-
|
|
1107
|
+
.prokodo-Button {
|
|
1108
|
+
display: inline-block;
|
|
1109
|
+
border-radius: 1.5rem;
|
|
1110
|
+
border-width: 0;
|
|
1111
|
+
padding: 0.875rem 1.5rem;
|
|
1112
|
+
background-color: var(--color-grey-50);
|
|
1113
|
+
box-shadow: var(--elevation-1);
|
|
1230
1114
|
cursor: pointer;
|
|
1231
|
-
|
|
1232
|
-
font-weight:
|
|
1233
|
-
font-size:
|
|
1234
|
-
font-family: var(--font-
|
|
1235
|
-
font-style: normal;
|
|
1236
|
-
line-height: 1.
|
|
1237
|
-
letter-spacing: 0.03em;
|
|
1238
|
-
text-transform: none;
|
|
1239
|
-
text-align: left;
|
|
1240
|
-
text-decoration: none;
|
|
1115
|
+
background: var(--gradient-background-inherit);
|
|
1116
|
+
font-weight: 400 !important;
|
|
1117
|
+
font-size: 1rem !important;
|
|
1118
|
+
font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
|
|
1119
|
+
font-style: normal !important;
|
|
1120
|
+
line-height: 1.4 !important;
|
|
1121
|
+
letter-spacing: 0.03em !important;
|
|
1122
|
+
text-transform: none !important;
|
|
1123
|
+
text-align: left !important;
|
|
1124
|
+
text-decoration: none !important;
|
|
1241
1125
|
}
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
font-size: 1rem;
|
|
1245
|
-
line-height: 1.5;
|
|
1246
|
-
}
|
|
1126
|
+
html[data-theme=dark] .prokodo-Button {
|
|
1127
|
+
background-color: var(--color-grey-100);
|
|
1247
1128
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
font-size: 1rem;
|
|
1251
|
-
line-height: 1.5;
|
|
1252
|
-
}
|
|
1129
|
+
.prokodo-Button:hover {
|
|
1130
|
+
box-shadow: none;
|
|
1253
1131
|
}
|
|
1254
|
-
.prokodo-
|
|
1255
|
-
|
|
1132
|
+
.prokodo-Button:focus-within {
|
|
1133
|
+
outline: 3px solid #1E90FF;
|
|
1134
|
+
outline-offset: 4px;
|
|
1135
|
+
border-radius: 1.5rem;
|
|
1136
|
+
border-radius: 1.5rem;
|
|
1256
1137
|
}
|
|
1257
|
-
.prokodo-
|
|
1258
|
-
|
|
1259
|
-
color: var(--color-primary-500);
|
|
1138
|
+
.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
|
|
1139
|
+
color: #FFFFFF !important;
|
|
1260
1140
|
}
|
|
1261
|
-
.prokodo-
|
|
1262
|
-
color: var(--color-
|
|
1141
|
+
.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
|
|
1142
|
+
color: var(--color-black);
|
|
1263
1143
|
}
|
|
1264
|
-
.prokodo-
|
|
1144
|
+
.prokodo-Button--has-bg-primary {
|
|
1145
|
+
background: var(--gradient-background-primary);
|
|
1146
|
+
}
|
|
1147
|
+
.prokodo-Button--has-bg-secondary {
|
|
1148
|
+
background: var(--gradient-background-secondary);
|
|
1149
|
+
}
|
|
1150
|
+
.prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
|
|
1151
|
+
background: var(--gradient-background-info);
|
|
1152
|
+
}
|
|
1153
|
+
.prokodo-Button--has-bg-success {
|
|
1154
|
+
background: var(--gradient-background-success);
|
|
1155
|
+
}
|
|
1156
|
+
.prokodo-Button--has-bg-warning {
|
|
1157
|
+
background: var(--gradient-background-warning);
|
|
1158
|
+
}
|
|
1159
|
+
.prokodo-Button--has-bg-error {
|
|
1160
|
+
background: var(--gradient-background-error);
|
|
1161
|
+
}
|
|
1162
|
+
.prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
|
|
1163
|
+
background: none;
|
|
1164
|
+
background-color: var(--color-grey-50);
|
|
1165
|
+
padding: 0.75rem 1rem;
|
|
1166
|
+
transition: background-color 0.3s ease-in-out;
|
|
1167
|
+
}
|
|
1168
|
+
.prokodo-Button--has-text-inherit:hover, .prokodo-Button--has-text-primary:hover, .prokodo-Button--has-text-secondary:hover, .prokodo-Button--has-text-info:hover, .prokodo-Button--has-text-success:hover, .prokodo-Button--has-text-warning:hover, .prokodo-Button--has-text-error:hover {
|
|
1169
|
+
color: #FFFFFF;
|
|
1170
|
+
}
|
|
1171
|
+
.prokodo-Button--has-text-inherit {
|
|
1172
|
+
color: var(--color-black);
|
|
1173
|
+
}
|
|
1174
|
+
.prokodo-Button--has-text-inherit:hover {
|
|
1175
|
+
background-color: var(--color-grey-500);
|
|
1176
|
+
}
|
|
1177
|
+
.prokodo-Button--has-text-primary {
|
|
1265
1178
|
color: var(--color-primary-500);
|
|
1266
1179
|
}
|
|
1267
|
-
.prokodo-
|
|
1180
|
+
.prokodo-Button--has-text-primary:hover {
|
|
1181
|
+
background-color: var(--color-primary-500);
|
|
1182
|
+
}
|
|
1183
|
+
.prokodo-Button--has-text-secondary {
|
|
1268
1184
|
color: var(--color-secondary-500);
|
|
1269
1185
|
}
|
|
1270
|
-
.prokodo-
|
|
1271
|
-
color: var(--color-
|
|
1186
|
+
.prokodo-Button--has-text-secondary:hover {
|
|
1187
|
+
background-color: var(--color-secondary-500);
|
|
1272
1188
|
}
|
|
1273
|
-
.prokodo-
|
|
1189
|
+
.prokodo-Button--is-disabled, .prokodo-Button--has-text-info {
|
|
1190
|
+
color: var(--color-grey-700);
|
|
1191
|
+
}
|
|
1192
|
+
.prokodo-Button--is-disabled:hover, .prokodo-Button--has-text-info:hover {
|
|
1193
|
+
background-color: var(--color-grey-100);
|
|
1194
|
+
}
|
|
1195
|
+
.prokodo-Button--has-text-success {
|
|
1274
1196
|
color: var(--color-success);
|
|
1275
1197
|
}
|
|
1276
|
-
.prokodo-
|
|
1198
|
+
.prokodo-Button--has-text-success:hover {
|
|
1199
|
+
background-color: var(--color-success);
|
|
1200
|
+
}
|
|
1201
|
+
.prokodo-Button--has-text-warning {
|
|
1277
1202
|
color: var(--color-warning);
|
|
1278
1203
|
}
|
|
1279
|
-
.prokodo-
|
|
1204
|
+
.prokodo-Button--has-text-warning:hover {
|
|
1205
|
+
background-color: var(--color-warning);
|
|
1206
|
+
}
|
|
1207
|
+
.prokodo-Button--has-text-error {
|
|
1280
1208
|
color: var(--color-error);
|
|
1281
1209
|
}
|
|
1282
|
-
.prokodo-
|
|
1283
|
-
color: var(--color-
|
|
1210
|
+
.prokodo-Button--has-text-error:hover {
|
|
1211
|
+
background-color: var(--color-error);
|
|
1284
1212
|
}
|
|
1285
|
-
.prokodo-
|
|
1286
|
-
|
|
1213
|
+
.prokodo-Button--has-variant-outlined {
|
|
1214
|
+
position: relative;
|
|
1215
|
+
background: none;
|
|
1287
1216
|
}
|
|
1288
|
-
.prokodo-
|
|
1289
|
-
|
|
1217
|
+
.prokodo-Button--has-variant-outlined::before {
|
|
1218
|
+
content: "";
|
|
1219
|
+
position: absolute;
|
|
1220
|
+
top: 0;
|
|
1221
|
+
left: 0;
|
|
1222
|
+
right: 0;
|
|
1223
|
+
bottom: 0;
|
|
1224
|
+
border-radius: inherit;
|
|
1225
|
+
padding: 2px;
|
|
1226
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1227
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1228
|
+
-webkit-mask-composite: xor;
|
|
1229
|
+
mask-composite: exclude;
|
|
1230
|
+
z-index: 0;
|
|
1231
|
+
background: var(--gradient-border-4);
|
|
1290
1232
|
}
|
|
1291
|
-
|
|
1292
|
-
|
|
1233
|
+
html[data-theme=dark] .prokodo-Button--has-variant-outlined {
|
|
1234
|
+
background: none;
|
|
1235
|
+
}
|
|
1236
|
+
.prokodo-Button--icon-only {
|
|
1237
|
+
display: flex;
|
|
1238
|
+
justify-content: center;
|
|
1239
|
+
align-items: center;
|
|
1240
|
+
border-radius: 10000px;
|
|
1241
|
+
padding: 0.75rem;
|
|
1242
|
+
}
|
|
1243
|
+
html[data-theme=dark] .prokodo-Button--icon-only {
|
|
1244
|
+
background: none;
|
|
1245
|
+
}
|
|
1246
|
+
.prokodo-Button--has-fullWidth {
|
|
1247
|
+
display: block;
|
|
1248
|
+
width: 100%;
|
|
1249
|
+
}
|
|
1250
|
+
.prokodo-Button--is-disabled {
|
|
1251
|
+
cursor: default;
|
|
1252
|
+
}
|
|
1253
|
+
.prokodo-Button__title {
|
|
1254
|
+
display: flex;
|
|
1255
|
+
flex-direction: row;
|
|
1256
|
+
align-items: center;
|
|
1257
|
+
}
|
|
1258
|
+
.prokodo-Button__icon {
|
|
1259
|
+
margin-right: 5px;
|
|
1260
|
+
}
|
|
1261
|
+
.prokodo-Button__icon--icon-only {
|
|
1262
|
+
margin-right: 0;
|
|
1263
|
+
}
|
|
1264
|
+
.prokodo-Button__link {
|
|
1265
|
+
display: table;
|
|
1266
|
+
width: 100%;
|
|
1267
|
+
color: inherit;
|
|
1268
|
+
font-weight: 400;
|
|
1269
|
+
font-size: 1rem;
|
|
1270
|
+
font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1271
|
+
font-style: normal;
|
|
1272
|
+
line-height: 1.4;
|
|
1273
|
+
letter-spacing: 0.03em;
|
|
1274
|
+
text-transform: none;
|
|
1275
|
+
text-align: left;
|
|
1276
|
+
text-decoration: none;
|
|
1277
|
+
}
|
|
1278
|
+
.prokodo-Button__link--icon-only {
|
|
1279
|
+
display: contents;
|
|
1280
|
+
}
|
|
1281
|
+
.prokodo-Button__link:hover {
|
|
1282
|
+
text-decoration: none;
|
|
1283
|
+
}
|
|
1284
|
+
.prokodo-Button__content {
|
|
1285
|
+
display: flex;
|
|
1286
|
+
justify-content: center;
|
|
1287
|
+
border-radius: 2rem;
|
|
1288
|
+
width: 100%;
|
|
1289
|
+
}
|
|
1290
|
+
.prokodo-Button__content--icon-only {
|
|
1291
|
+
padding: 0.5rem;
|
|
1292
|
+
border-radius: 2000rem;
|
|
1293
1293
|
}/* stylelint-disable */
|
|
1294
1294
|
/**
|
|
1295
1295
|
* Calculates a rem-based value by a given pixel size.
|
package/package.json
CHANGED