@soba-so/react 0.0.25 → 0.0.27
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/index.mjs +184 -8
- package/dist/styles.css +176 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -491,6 +491,29 @@ a.sc-btn {
|
|
|
491
491
|
.sc-rrow + .sc-rrow {
|
|
492
492
|
box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
|
|
493
493
|
}
|
|
494
|
+
|
|
495
|
+
.sc-rgo {
|
|
496
|
+
display: flex;
|
|
497
|
+
flex: 1;
|
|
498
|
+
min-width: 0;
|
|
499
|
+
align-items: center;
|
|
500
|
+
gap: calc(14px * var(--sc-scale, 1));
|
|
501
|
+
margin: calc(-8px * var(--sc-scale, 1)) 0;
|
|
502
|
+
padding: calc(8px * var(--sc-scale, 1)) 0;
|
|
503
|
+
border: 0;
|
|
504
|
+
background: transparent;
|
|
505
|
+
font: inherit;
|
|
506
|
+
color: inherit;
|
|
507
|
+
text-align: left;
|
|
508
|
+
cursor: pointer;
|
|
509
|
+
}
|
|
510
|
+
.sc-rgo .sc-chev {
|
|
511
|
+
margin-left: calc(2px * var(--sc-scale, 1));
|
|
512
|
+
opacity: 0.75;
|
|
513
|
+
}
|
|
514
|
+
.sc-rgo:hover .sc-chev {
|
|
515
|
+
opacity: 1;
|
|
516
|
+
}
|
|
494
517
|
.sc-rdot {
|
|
495
518
|
flex: none;
|
|
496
519
|
width: calc(10px * var(--sc-scale, 1));
|
|
@@ -971,6 +994,159 @@ a.sc-btn {
|
|
|
971
994
|
color: var(--sc-muted, #6b6b69);
|
|
972
995
|
}
|
|
973
996
|
|
|
997
|
+
.sc-screen-from {
|
|
998
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
999
|
+
color: var(--sc-muted, #6b6b69);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
.sc-rd-head {
|
|
1003
|
+
display: grid;
|
|
1004
|
+
gap: calc(8px * var(--sc-scale, 1));
|
|
1005
|
+
padding: 0 calc(4px * var(--sc-scale, 1));
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.sc-rd-name {
|
|
1009
|
+
margin: 0;
|
|
1010
|
+
font-size: calc(var(--sc-font-size, 15px) * 1.3333);
|
|
1011
|
+
line-height: 1.25;
|
|
1012
|
+
font-weight: 600;
|
|
1013
|
+
color: var(--sc-text, #1b1b1a);
|
|
1014
|
+
overflow-wrap: anywhere;
|
|
1015
|
+
}
|
|
1016
|
+
.sc-rd-state {
|
|
1017
|
+
display: flex;
|
|
1018
|
+
align-items: center;
|
|
1019
|
+
gap: calc(8px * var(--sc-scale, 1));
|
|
1020
|
+
margin: 0;
|
|
1021
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
1022
|
+
color: var(--sc-text-2, #3f3f46);
|
|
1023
|
+
font-variant-numeric: tabular-nums;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.sc-rd-dot {
|
|
1027
|
+
flex: none;
|
|
1028
|
+
width: calc(10px * var(--sc-scale, 1));
|
|
1029
|
+
height: calc(10px * var(--sc-scale, 1));
|
|
1030
|
+
border-radius: 50%;
|
|
1031
|
+
background: var(--sc-line-2, #dcdce0);
|
|
1032
|
+
}
|
|
1033
|
+
.sc-rd-dot-live {
|
|
1034
|
+
background: var(--sc-ok, #1e8e5a);
|
|
1035
|
+
}
|
|
1036
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1037
|
+
.sc-rd-dot-live {
|
|
1038
|
+
animation: sc-breathe 1.6s ease-in-out infinite;
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
.sc-group-card.sc-rd-facts,
|
|
1043
|
+
.sc-group-card.sc-rd-steps {
|
|
1044
|
+
padding: 0 calc(16px * var(--sc-scale, 1));
|
|
1045
|
+
}
|
|
1046
|
+
.sc-rd-fact {
|
|
1047
|
+
display: flex;
|
|
1048
|
+
align-items: center;
|
|
1049
|
+
gap: calc(10px * var(--sc-scale, 1));
|
|
1050
|
+
margin: 0;
|
|
1051
|
+
padding: calc(14px * var(--sc-scale, 1)) 0;
|
|
1052
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1053
|
+
}
|
|
1054
|
+
.sc-rd-fact + .sc-rd-fact,
|
|
1055
|
+
.sc-rd-step + .sc-rd-step {
|
|
1056
|
+
box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
|
|
1057
|
+
}
|
|
1058
|
+
.sc-rd-key {
|
|
1059
|
+
flex: none;
|
|
1060
|
+
width: calc(74px * var(--sc-scale, 1));
|
|
1061
|
+
color: var(--sc-muted, #6b6b69);
|
|
1062
|
+
}
|
|
1063
|
+
.sc-rd-val {
|
|
1064
|
+
flex: 1;
|
|
1065
|
+
min-width: 0;
|
|
1066
|
+
overflow-wrap: anywhere;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.sc-rd-step {
|
|
1070
|
+
display: flex;
|
|
1071
|
+
align-items: center;
|
|
1072
|
+
gap: calc(12px * var(--sc-scale, 1));
|
|
1073
|
+
margin: 0;
|
|
1074
|
+
padding: calc(13px * var(--sc-scale, 1)) 0;
|
|
1075
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1076
|
+
}
|
|
1077
|
+
.sc-rd-mark {
|
|
1078
|
+
flex: none;
|
|
1079
|
+
width: calc(18px * var(--sc-scale, 1));
|
|
1080
|
+
height: calc(18px * var(--sc-scale, 1));
|
|
1081
|
+
color: var(--sc-line-2, #dcdce0);
|
|
1082
|
+
}
|
|
1083
|
+
.sc-rd-mark-done {
|
|
1084
|
+
color: var(--sc-ok, #1e8e5a);
|
|
1085
|
+
}
|
|
1086
|
+
.sc-rd-mark-now {
|
|
1087
|
+
color: var(--sc-text, #1b1b1a);
|
|
1088
|
+
}
|
|
1089
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1090
|
+
.sc-rd-mark-now {
|
|
1091
|
+
animation: sc-spin 900ms linear infinite;
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.sc-rd-say {
|
|
1096
|
+
flex: 1;
|
|
1097
|
+
min-width: 0;
|
|
1098
|
+
overflow-wrap: anywhere;
|
|
1099
|
+
}
|
|
1100
|
+
.sc-rd-wait {
|
|
1101
|
+
color: var(--sc-muted, #6b6b69);
|
|
1102
|
+
}
|
|
1103
|
+
.sc-rd-when {
|
|
1104
|
+
flex: none;
|
|
1105
|
+
font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
|
|
1106
|
+
color: var(--sc-muted, #6b6b69);
|
|
1107
|
+
font-variant-numeric: tabular-nums;
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
.sc-act-stop {
|
|
1111
|
+
display: flex;
|
|
1112
|
+
align-items: center;
|
|
1113
|
+
justify-content: center;
|
|
1114
|
+
height: calc(48px * var(--sc-scale, 1));
|
|
1115
|
+
border: 0;
|
|
1116
|
+
border-radius: calc(10px * var(--sc-scale, 1));
|
|
1117
|
+
background: var(--sc-tray-card, #ffffff);
|
|
1118
|
+
color: var(--sc-danger, #c2452d);
|
|
1119
|
+
box-shadow:
|
|
1120
|
+
var(--sc-shadow-1),
|
|
1121
|
+
inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
|
|
1122
|
+
font: inherit;
|
|
1123
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1124
|
+
font-weight: 600;
|
|
1125
|
+
cursor: pointer;
|
|
1126
|
+
transition: background-color 120ms ease;
|
|
1127
|
+
}
|
|
1128
|
+
.sc-act-stop:hover:not(:disabled) {
|
|
1129
|
+
background: color-mix(in srgb, var(--sc-danger, #c2452d) 7%, var(--sc-tray-card, #ffffff));
|
|
1130
|
+
}
|
|
1131
|
+
.sc-act-stop:disabled {
|
|
1132
|
+
cursor: default;
|
|
1133
|
+
color: var(--sc-muted, #6b6b69);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.sc-act-quiet {
|
|
1137
|
+
display: grid;
|
|
1138
|
+
place-items: center;
|
|
1139
|
+
height: calc(44px * var(--sc-scale, 1));
|
|
1140
|
+
border-radius: calc(10px * var(--sc-scale, 1));
|
|
1141
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
1142
|
+
color: var(--sc-muted, #6b6b69);
|
|
1143
|
+
text-decoration: none;
|
|
1144
|
+
cursor: pointer;
|
|
1145
|
+
}
|
|
1146
|
+
.sc-act-quiet:hover {
|
|
1147
|
+
color: var(--sc-text, #1b1b1a);
|
|
1148
|
+
}
|
|
1149
|
+
|
|
974
1150
|
.sc-arow {
|
|
975
1151
|
display: flex;
|
|
976
1152
|
align-items: center;
|
package/package.json
CHANGED