@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-alpha.9
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/README.md +15 -15
- package/dist/{auth-BYmxZdJl.js → auth-DsI0rQ7_.js} +6 -6
- package/dist/auth-DsI0rQ7_.js.map +1 -0
- package/dist/components/index.js +2 -2
- package/dist/{components-CKf-UpGi.js → components-CzbQQPCb.js} +1429 -1429
- package/dist/components-CzbQQPCb.js.map +1 -0
- package/dist/composables/index.js +2 -2
- package/dist/composables/usePlatformContext.d.ts +3 -3
- package/dist/{composables-D0QfFzq1.js → composables-BXklV5ii.js} +3 -3
- package/dist/{composables-D0QfFzq1.js.map → composables-BXklV5ii.js.map} +1 -1
- package/dist/index.js +4 -4
- package/dist/install.d.ts +3 -3
- package/dist/install.js +5 -5
- package/dist/install.js.map +1 -1
- package/dist/stores/auth.d.ts +1 -1
- package/dist/stores/index.js +1 -1
- package/dist/stores/settings.d.ts +1 -1
- package/dist/styles.css +5388 -5388
- package/dist/types/platform.d.ts +1 -1
- package/dist/{useScheduleDrag-DAJueTbK.js → useScheduleDrag-CxBeqYcu.js} +331 -331
- package/dist/useScheduleDrag-CxBeqYcu.js.map +1 -0
- package/package.json +2 -2
- package/src/__tests__/components/AppLayout.test.ts +23 -23
- package/src/__tests__/components/AppSidebar.test.ts +29 -29
- package/src/__tests__/components/AppTopBar.test.ts +45 -45
- package/src/__tests__/components/BaseInput.test.ts +2 -2
- package/src/__tests__/components/BasePill.test.ts +37 -37
- package/src/__tests__/components/Calendar.test.ts +52 -52
- package/src/__tests__/components/CollapsibleCard.test.ts +81 -81
- package/src/__tests__/components/DataFrame.test.ts +80 -80
- package/src/__tests__/components/DropdownButton.test.ts +80 -80
- package/src/__tests__/composables/usePlatformContext.test.ts +1 -1
- package/src/components/AlertBox.story.vue +1 -1
- package/src/components/AlertBox.vue +14 -14
- package/src/components/AppAvatarMenu.vue +26 -26
- package/src/components/AppContainer.vue +3 -3
- package/src/components/AppLayout.vue +7 -7
- package/src/components/AppPageSelector.vue +30 -30
- package/src/components/AppPillNav.vue +10 -10
- package/src/components/AppPluginSwitcher.vue +31 -31
- package/src/components/AppSidebar.vue +8 -8
- package/src/components/AppTopBar.story.vue +7 -7
- package/src/components/AppTopBar.vue +102 -102
- package/src/components/AuditTrail.vue +19 -19
- package/src/components/AutoGroupModal.vue +76 -76
- package/src/components/Avatar.vue +6 -6
- package/src/components/BaseButton.vue +6 -6
- package/src/components/BaseCheckbox.vue +9 -9
- package/src/components/BaseInput.vue +4 -4
- package/src/components/BaseModal.story.vue +1 -1
- package/src/components/BaseModal.vue +14 -14
- package/src/components/BasePill.vue +9 -9
- package/src/components/BaseRadioGroup.vue +21 -21
- package/src/components/BaseSelect.vue +6 -6
- package/src/components/BaseSlider.vue +8 -8
- package/src/components/BaseTabs.vue +7 -7
- package/src/components/BaseTextarea.vue +5 -5
- package/src/components/BaseToggle.vue +10 -10
- package/src/components/BatchProgressList.vue +25 -25
- package/src/components/Breadcrumb.vue +8 -8
- package/src/components/Calendar.vue +19 -19
- package/src/components/ChartContainer.vue +9 -9
- package/src/components/ChemicalFormula.vue +7 -7
- package/src/components/CollapsibleCard.vue +20 -20
- package/src/components/ColorSlider.vue +6 -6
- package/src/components/ConcentrationInput.vue +12 -12
- package/src/components/ConfirmDialog.story.vue +1 -1
- package/src/components/ConfirmDialog.vue +7 -7
- package/src/components/DataFrame.vue +40 -40
- package/src/components/DatePicker.vue +29 -29
- package/src/components/DateTimePicker.vue +41 -41
- package/src/components/Divider.vue +9 -9
- package/src/components/DoseCalculator.vue +66 -66
- package/src/components/DropdownButton.vue +19 -19
- package/src/components/EmptyState.vue +9 -9
- package/src/components/ExperimentCodeBadge.vue +3 -3
- package/src/components/ExperimentDataViewer.vue +25 -25
- package/src/components/ExperimentPopover.vue +35 -35
- package/src/components/ExperimentSelectorModal.vue +40 -40
- package/src/components/ExperimentTimeline.vue +48 -48
- package/src/components/FileUploader.vue +31 -31
- package/src/components/FitPanel.vue +9 -9
- package/src/components/FormActions.vue +1 -1
- package/src/components/FormBuilder.vue +2 -2
- package/src/components/FormField.vue +7 -7
- package/src/components/FormSection.vue +7 -7
- package/src/components/FormulaInput.vue +10 -10
- package/src/components/GroupAssigner.vue +40 -40
- package/src/components/GroupingModal.vue +45 -45
- package/src/components/IconButton.vue +6 -6
- package/src/components/LoadingSpinner.vue +5 -5
- package/src/components/MoleculeInput.vue +21 -21
- package/src/components/MultiSelect.vue +13 -13
- package/src/components/NumberInput.vue +13 -13
- package/src/components/PlateMapEditor.vue +63 -63
- package/src/components/ProgressBar.vue +18 -18
- package/src/components/ProtocolStepEditor.vue +57 -57
- package/src/components/RackEditor.vue +28 -28
- package/src/components/ReagentEditor.vue +61 -61
- package/src/components/ReagentList.vue +49 -49
- package/src/components/ResourceCard.vue +28 -28
- package/src/components/SampleHierarchyTree.vue +13 -13
- package/src/components/SampleLegend.vue +12 -12
- package/src/components/SampleSelector.vue +104 -104
- package/src/components/ScheduleCalendar.vue +42 -42
- package/src/components/ScientificNumber.vue +11 -11
- package/src/components/SegmentedControl.vue +12 -12
- package/src/components/SequenceInput.vue +32 -32
- package/src/components/SettingsButton.vue +5 -5
- package/src/components/SettingsModal.vue +17 -17
- package/src/components/StatusIndicator.vue +5 -5
- package/src/components/StepWizard.vue +16 -16
- package/src/components/TagsInput.vue +20 -20
- package/src/components/ThemeToggle.vue +3 -3
- package/src/components/TimePicker.vue +21 -21
- package/src/components/TimeRangeInput.vue +5 -5
- package/src/components/ToastNotification.vue +8 -8
- package/src/components/Tooltip.vue +7 -7
- package/src/components/UnitInput.vue +12 -12
- package/src/components/WellEditPopup.vue +28 -28
- package/src/components/WellPlate.vue +37 -37
- package/src/composables/useAppExperiment.ts +1 -1
- package/src/composables/usePlatformContext.ts +16 -16
- package/src/composables/useProtocolTemplates.ts +1 -1
- package/src/install.ts +3 -3
- package/src/stores/auth.ts +3 -3
- package/src/stores/settings.ts +2 -2
- package/src/styles/components/alert-box.css +30 -30
- package/src/styles/components/app-avatar-menu.css +23 -23
- package/src/styles/components/app-container.css +6 -6
- package/src/styles/components/app-layout.css +15 -15
- package/src/styles/components/app-page-selector.css +26 -26
- package/src/styles/components/app-pill-nav.css +7 -7
- package/src/styles/components/app-plugin-switcher.css +27 -27
- package/src/styles/components/app-sidebar.css +24 -24
- package/src/styles/components/app-top-bar.css +65 -65
- package/src/styles/components/audit-trail.css +29 -29
- package/src/styles/components/auto-group-modal.css +91 -91
- package/src/styles/components/avatar.css +15 -15
- package/src/styles/components/batch-progress-list.css +40 -40
- package/src/styles/components/breadcrumb.css +8 -8
- package/src/styles/components/button.css +31 -31
- package/src/styles/components/calendar.css +27 -27
- package/src/styles/components/chart-container.css +9 -9
- package/src/styles/components/checkbox.css +20 -20
- package/src/styles/components/chemical-formula.css +8 -8
- package/src/styles/components/collapsible-card.css +35 -35
- package/src/styles/components/color-slider.css +8 -8
- package/src/styles/components/concentration-input.css +27 -27
- package/src/styles/components/confirm-dialog.css +32 -32
- package/src/styles/components/dataframe.css +66 -66
- package/src/styles/components/date-picker.css +40 -40
- package/src/styles/components/datetime-picker.css +37 -37
- package/src/styles/components/divider.css +13 -13
- package/src/styles/components/dose-calculator.css +43 -43
- package/src/styles/components/dropdown-button.css +46 -46
- package/src/styles/components/empty-state.css +44 -44
- package/src/styles/components/experiment-code-badge.css +8 -8
- package/src/styles/components/experiment-data-viewer.css +23 -23
- package/src/styles/components/experiment-popover.css +97 -97
- package/src/styles/components/experiment-selector-modal.css +39 -39
- package/src/styles/components/experiment-timeline.css +98 -98
- package/src/styles/components/file-uploader.css +44 -44
- package/src/styles/components/fit-panel.css +12 -12
- package/src/styles/components/form-builder.css +11 -11
- package/src/styles/components/form-field.css +7 -7
- package/src/styles/components/formula-input.css +17 -17
- package/src/styles/components/group-assigner.css +26 -26
- package/src/styles/components/grouping-modal.css +51 -51
- package/src/styles/components/icon-button.css +41 -41
- package/src/styles/components/input.css +13 -13
- package/src/styles/components/loading-spinner.css +12 -12
- package/src/styles/components/modal.css +69 -69
- package/src/styles/components/molecule-input.css +27 -27
- package/src/styles/components/multi-select.css +23 -23
- package/src/styles/components/number-input.css +32 -32
- package/src/styles/components/pill.css +37 -37
- package/src/styles/components/plate-map-editor.css +67 -67
- package/src/styles/components/progress-bar.css +41 -41
- package/src/styles/components/protocol-step-editor.css +63 -63
- package/src/styles/components/rack-editor.css +34 -34
- package/src/styles/components/radio-group.css +41 -41
- package/src/styles/components/reagent-editor.css +70 -70
- package/src/styles/components/reagent-list.css +65 -65
- package/src/styles/components/resource-card.css +52 -52
- package/src/styles/components/sample-hierarchy-tree.css +56 -56
- package/src/styles/components/sample-legend.css +37 -37
- package/src/styles/components/sample-selector.css +121 -121
- package/src/styles/components/schedule-calendar.css +67 -67
- package/src/styles/components/scientific-number.css +11 -11
- package/src/styles/components/segmented-control.css +33 -33
- package/src/styles/components/select.css +11 -11
- package/src/styles/components/sequence-input.css +29 -29
- package/src/styles/components/settings-button.css +16 -16
- package/src/styles/components/settings-modal.css +14 -14
- package/src/styles/components/skeleton.css +2 -2
- package/src/styles/components/slider.css +10 -10
- package/src/styles/components/status-indicator.css +12 -12
- package/src/styles/components/step-wizard.css +32 -32
- package/src/styles/components/tabs.css +16 -16
- package/src/styles/components/tags-input.css +46 -46
- package/src/styles/components/textarea.css +17 -17
- package/src/styles/components/theme-toggle.css +13 -13
- package/src/styles/components/time-picker.css +28 -28
- package/src/styles/components/time-range-input.css +8 -8
- package/src/styles/components/toast.css +18 -18
- package/src/styles/components/toggle.css +27 -27
- package/src/styles/components/tooltip.css +18 -18
- package/src/styles/components/unit-input.css +25 -25
- package/src/styles/components/well-edit-popup.css +32 -32
- package/src/styles/components/well-plate.css +49 -49
- package/src/styles/index.css +1 -1
- package/src/styles/variables.css +3 -3
- package/src/types/platform.ts +6 -6
- package/dist/auth-BYmxZdJl.js.map +0 -1
- package/dist/components-CKf-UpGi.js.map +0 -1
- package/dist/useScheduleDrag-DAJueTbK.js.map +0 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/* DateTimePicker Component Styles */
|
|
2
2
|
|
|
3
|
-
.
|
|
3
|
+
.mint-datetime-picker {
|
|
4
4
|
position: relative;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.
|
|
7
|
+
.mint-datetime-picker__input-wrapper {
|
|
8
8
|
position: relative;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.mint-datetime-picker__input {
|
|
12
12
|
width: 100%;
|
|
13
13
|
border-radius: var(--radius-md);
|
|
14
14
|
border: 1px solid var(--border-color);
|
|
@@ -20,45 +20,45 @@
|
|
|
20
20
|
padding-right: 2.5rem;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.
|
|
23
|
+
.mint-datetime-picker__input:focus-visible {
|
|
24
24
|
outline: none;
|
|
25
25
|
border-color: transparent;
|
|
26
26
|
box-shadow: var(--focus-ring);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.
|
|
29
|
+
.mint-datetime-picker__input--sm {
|
|
30
30
|
padding-top: 0.375rem;
|
|
31
31
|
padding-bottom: 0.375rem;
|
|
32
32
|
font-size: 0.875rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.
|
|
35
|
+
.mint-datetime-picker__input--md {
|
|
36
36
|
padding-top: 0.5rem;
|
|
37
37
|
padding-bottom: 0.5rem;
|
|
38
38
|
font-size: 0.875rem;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.
|
|
41
|
+
.mint-datetime-picker__input--lg {
|
|
42
42
|
padding-top: 0.75rem;
|
|
43
43
|
padding-bottom: 0.75rem;
|
|
44
44
|
font-size: 1rem;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.
|
|
47
|
+
.mint-datetime-picker__input--error {
|
|
48
48
|
border-color: var(--mint-error);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.mint-datetime-picker__input--error:focus-visible {
|
|
52
52
|
box-shadow: var(--focus-ring-error);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.
|
|
55
|
+
.mint-datetime-picker__input--disabled {
|
|
56
56
|
opacity: var(--mint-disabled-opacity);
|
|
57
57
|
cursor: not-allowed;
|
|
58
58
|
background-color: var(--bg-tertiary);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.
|
|
61
|
+
.mint-datetime-picker__icon-calendar {
|
|
62
62
|
position: absolute;
|
|
63
63
|
top: 0;
|
|
64
64
|
bottom: 0;
|
|
@@ -69,13 +69,13 @@
|
|
|
69
69
|
pointer-events: none;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
.
|
|
72
|
+
.mint-datetime-picker__icon-calendar svg {
|
|
73
73
|
width: 1rem;
|
|
74
74
|
height: 1rem;
|
|
75
75
|
color: var(--text-muted);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.
|
|
78
|
+
.mint-datetime-picker__icon-clock {
|
|
79
79
|
position: absolute;
|
|
80
80
|
top: 0;
|
|
81
81
|
bottom: 0;
|
|
@@ -86,14 +86,14 @@
|
|
|
86
86
|
pointer-events: none;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.
|
|
89
|
+
.mint-datetime-picker__icon-clock svg {
|
|
90
90
|
width: 1rem;
|
|
91
91
|
height: 1rem;
|
|
92
92
|
color: var(--text-muted);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
/* Dropdown */
|
|
96
|
-
.
|
|
96
|
+
.mint-datetime-picker__dropdown {
|
|
97
97
|
position: absolute;
|
|
98
98
|
z-index: 50;
|
|
99
99
|
margin-top: 0.25rem;
|
|
@@ -106,23 +106,23 @@
|
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
/* Calendar section */
|
|
109
|
-
.
|
|
109
|
+
.mint-datetime-picker__calendar-section {
|
|
110
110
|
margin-bottom: 0;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
/* Divider */
|
|
114
|
-
.
|
|
114
|
+
.mint-datetime-picker__divider {
|
|
115
115
|
height: 1px;
|
|
116
116
|
background-color: var(--border-color);
|
|
117
117
|
margin: 0.5rem 0;
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
/* Time section */
|
|
121
|
-
.
|
|
121
|
+
.mint-datetime-picker__time-section {
|
|
122
122
|
padding: 0;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.
|
|
125
|
+
.mint-datetime-picker__time-label {
|
|
126
126
|
font-size: 0.6875rem;
|
|
127
127
|
font-weight: 500;
|
|
128
128
|
color: var(--text-muted);
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
margin-bottom: 0.375rem;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.
|
|
134
|
+
.mint-datetime-picker__time-grid {
|
|
135
135
|
display: grid;
|
|
136
136
|
grid-template-columns: repeat(4, 1fr);
|
|
137
137
|
gap: 0.25rem;
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
/* Time chips */
|
|
143
|
-
.
|
|
143
|
+
.mint-datetime-picker__time-chip {
|
|
144
144
|
padding: 0.25rem 0.5rem;
|
|
145
145
|
font-size: 0.75rem;
|
|
146
146
|
border-radius: var(--radius, 0.375rem);
|
|
@@ -152,28 +152,28 @@
|
|
|
152
152
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
.
|
|
155
|
+
.mint-datetime-picker__time-chip:hover {
|
|
156
156
|
background-color: var(--bg-hover);
|
|
157
157
|
border-color: var(--color-primary);
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
.
|
|
160
|
+
.mint-datetime-picker__time-chip--active {
|
|
161
161
|
background-color: var(--color-primary);
|
|
162
162
|
border-color: var(--color-primary);
|
|
163
163
|
color: white;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
.
|
|
166
|
+
.mint-datetime-picker__time-chip--active:hover {
|
|
167
167
|
background-color: var(--color-primary);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
.
|
|
170
|
+
.mint-datetime-picker__time-chip--disabled {
|
|
171
171
|
opacity: 0.3;
|
|
172
172
|
cursor: not-allowed;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
/* Footer */
|
|
176
|
-
.
|
|
176
|
+
.mint-datetime-picker__footer {
|
|
177
177
|
display: flex;
|
|
178
178
|
align-items: center;
|
|
179
179
|
justify-content: space-between;
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
border-top: 1px solid var(--border-color);
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
-
.
|
|
185
|
+
.mint-datetime-picker__footer-btn {
|
|
186
186
|
font-size: 0.75rem;
|
|
187
187
|
background: transparent;
|
|
188
188
|
border: none;
|
|
@@ -191,39 +191,39 @@
|
|
|
191
191
|
color: var(--color-primary);
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.
|
|
194
|
+
.mint-datetime-picker__footer-btn:hover {
|
|
195
195
|
opacity: 0.8;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.
|
|
198
|
+
.mint-datetime-picker__footer-btn + .mint-datetime-picker__footer-btn {
|
|
199
199
|
margin-left: 0.75rem;
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
.
|
|
202
|
+
.mint-datetime-picker__footer-btn--muted {
|
|
203
203
|
color: var(--text-muted);
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
.
|
|
206
|
+
.mint-datetime-picker__footer-btn--muted:hover {
|
|
207
207
|
color: var(--text-primary);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
/* Transition classes */
|
|
211
|
-
.
|
|
211
|
+
.mint-datetime-picker__dropdown-enter-active {
|
|
212
212
|
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
.
|
|
215
|
+
.mint-datetime-picker__dropdown-leave-active {
|
|
216
216
|
transition: opacity 0.075s ease-in, transform 0.075s ease-in;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
.
|
|
220
|
-
.
|
|
219
|
+
.mint-datetime-picker__dropdown-enter-from,
|
|
220
|
+
.mint-datetime-picker__dropdown-leave-to {
|
|
221
221
|
opacity: 0;
|
|
222
222
|
transform: scale(0.95);
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
.
|
|
226
|
-
.
|
|
225
|
+
.mint-datetime-picker__dropdown-enter-to,
|
|
226
|
+
.mint-datetime-picker__dropdown-leave-from {
|
|
227
227
|
opacity: 1;
|
|
228
228
|
transform: scale(1);
|
|
229
229
|
}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
/* Divider Component Styles */
|
|
2
2
|
|
|
3
|
-
.
|
|
3
|
+
.mint-divider {
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
border: none;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
/* Horizontal without label - single line */
|
|
10
|
-
.
|
|
10
|
+
.mint-divider:not(.mint-divider--vertical):not(.mint-divider--labeled) {
|
|
11
11
|
border-top: 1px solid var(--border-color);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
/* Line segments (for labeled variants) */
|
|
15
|
-
.
|
|
15
|
+
.mint-divider__line {
|
|
16
16
|
flex: 1;
|
|
17
17
|
height: 1px;
|
|
18
18
|
background-color: var(--border-color);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/* ---------- Center-aligned label ---------- */
|
|
22
|
-
.
|
|
22
|
+
.mint-divider--center .mint-divider__label {
|
|
23
23
|
padding: 0 0.75rem;
|
|
24
24
|
font-size: 0.6875rem;
|
|
25
25
|
font-weight: 500;
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/* ---------- Left-aligned label ---------- */
|
|
33
|
-
.
|
|
33
|
+
.mint-divider--left {
|
|
34
34
|
gap: 0.75rem;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.mint-divider--left .mint-divider__label {
|
|
38
38
|
font-size: 0.8125rem;
|
|
39
39
|
font-weight: 500;
|
|
40
40
|
color: var(--text-primary);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/* Vertical */
|
|
46
|
-
.
|
|
46
|
+
.mint-divider--vertical {
|
|
47
47
|
display: inline-block;
|
|
48
48
|
width: 1px;
|
|
49
49
|
height: auto;
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/* Horizontal spacing */
|
|
56
|
-
.
|
|
57
|
-
.
|
|
58
|
-
.
|
|
56
|
+
.mint-divider--sm:not(.mint-divider--vertical) { margin: 0.5rem 0; }
|
|
57
|
+
.mint-divider--md:not(.mint-divider--vertical) { margin: 1rem 0; }
|
|
58
|
+
.mint-divider--lg:not(.mint-divider--vertical) { margin: 1.5rem 0; }
|
|
59
59
|
|
|
60
60
|
/* Vertical spacing */
|
|
61
|
-
.
|
|
62
|
-
.
|
|
63
|
-
.
|
|
61
|
+
.mint-divider--vertical.mint-divider--sm { margin: 0 0.5rem; }
|
|
62
|
+
.mint-divider--vertical.mint-divider--md { margin: 0 1rem; }
|
|
63
|
+
.mint-divider--vertical.mint-divider--lg { margin: 0 1.5rem; }
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
/* DoseCalculator Component Styles */
|
|
2
2
|
|
|
3
|
-
.
|
|
3
|
+
.mint-dose-calculator {
|
|
4
4
|
border-radius: var(--radius-md);
|
|
5
5
|
border: 1px solid var(--border-color);
|
|
6
6
|
background-color: var(--bg-secondary);
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.mint-dose-calculator--disabled {
|
|
11
11
|
opacity: var(--mint-disabled-opacity);
|
|
12
12
|
pointer-events: none;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Tabs */
|
|
16
|
-
.
|
|
16
|
+
.mint-dose-calculator__tabs {
|
|
17
17
|
display: flex;
|
|
18
18
|
border-bottom: 1px solid var(--border-color);
|
|
19
19
|
background-color: var(--bg-tertiary);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.mint-dose-calculator__tab {
|
|
23
23
|
flex: 1;
|
|
24
24
|
padding: 0.75rem 1rem;
|
|
25
25
|
font-size: 0.875rem;
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.
|
|
35
|
+
.mint-dose-calculator__tab:hover:not(.mint-dose-calculator__tab--active) {
|
|
36
36
|
color: var(--text-secondary);
|
|
37
37
|
background-color: var(--bg-hover);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.
|
|
40
|
+
.mint-dose-calculator__tab--active {
|
|
41
41
|
color: var(--color-primary);
|
|
42
42
|
border-bottom-color: var(--color-primary);
|
|
43
43
|
background-color: var(--bg-secondary);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
/* Form */
|
|
47
|
-
.
|
|
47
|
+
.mint-dose-calculator__form {
|
|
48
48
|
display: flex;
|
|
49
49
|
flex-direction: column;
|
|
50
50
|
gap: 1rem;
|
|
@@ -52,13 +52,13 @@
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/* Field */
|
|
55
|
-
.
|
|
55
|
+
.mint-dose-calculator__field {
|
|
56
56
|
display: flex;
|
|
57
57
|
flex-direction: column;
|
|
58
58
|
gap: 0.375rem;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.
|
|
61
|
+
.mint-dose-calculator__field-label {
|
|
62
62
|
font-size: 0.75rem;
|
|
63
63
|
font-weight: 500;
|
|
64
64
|
color: var(--text-secondary);
|
|
@@ -66,17 +66,17 @@
|
|
|
66
66
|
letter-spacing: 0.05em;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
.
|
|
69
|
+
.mint-dose-calculator__field-row {
|
|
70
70
|
display: flex;
|
|
71
71
|
gap: 0.5rem;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.
|
|
74
|
+
.mint-dose-calculator__field-row > * {
|
|
75
75
|
flex: 1;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
/* Input styles */
|
|
79
|
-
.
|
|
79
|
+
.mint-dose-calculator__input {
|
|
80
80
|
width: 100%;
|
|
81
81
|
padding: 0.5rem 0.75rem;
|
|
82
82
|
font-size: 0.875rem;
|
|
@@ -91,23 +91,23 @@
|
|
|
91
91
|
appearance: textfield;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
.
|
|
95
|
-
.
|
|
94
|
+
.mint-dose-calculator__input::-webkit-outer-spin-button,
|
|
95
|
+
.mint-dose-calculator__input::-webkit-inner-spin-button {
|
|
96
96
|
-webkit-appearance: none;
|
|
97
97
|
margin: 0;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.
|
|
100
|
+
.mint-dose-calculator__input:focus-visible {
|
|
101
101
|
border-color: var(--color-primary);
|
|
102
102
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
.
|
|
105
|
+
.mint-dose-calculator__input::placeholder {
|
|
106
106
|
color: var(--text-muted);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/* Select styles */
|
|
110
|
-
.
|
|
110
|
+
.mint-dose-calculator__select {
|
|
111
111
|
width: 100%;
|
|
112
112
|
padding: 0.5rem 2rem 0.5rem 0.75rem;
|
|
113
113
|
font-size: 0.875rem;
|
|
@@ -125,23 +125,23 @@
|
|
|
125
125
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.
|
|
128
|
+
.mint-dose-calculator__select:focus-visible {
|
|
129
129
|
border-color: var(--color-primary);
|
|
130
130
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
/* Unit suffix inline */
|
|
134
|
-
.
|
|
134
|
+
.mint-dose-calculator__input-wrapper {
|
|
135
135
|
position: relative;
|
|
136
136
|
display: flex;
|
|
137
137
|
align-items: center;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
.
|
|
140
|
+
.mint-dose-calculator__input-wrapper .mint-dose-calculator__input {
|
|
141
141
|
padding-right: 2.5rem;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
.
|
|
144
|
+
.mint-dose-calculator__unit-suffix {
|
|
145
145
|
position: absolute;
|
|
146
146
|
right: 0.75rem;
|
|
147
147
|
font-size: 0.75rem;
|
|
@@ -150,21 +150,21 @@
|
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
/* Divider */
|
|
153
|
-
.
|
|
153
|
+
.mint-dose-calculator__divider {
|
|
154
154
|
height: 1px;
|
|
155
155
|
background-color: var(--border-color);
|
|
156
156
|
margin: 0.5rem 0;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
/* Result section */
|
|
160
|
-
.
|
|
160
|
+
.mint-dose-calculator__result {
|
|
161
161
|
margin-top: 0.5rem;
|
|
162
162
|
padding: 1rem;
|
|
163
163
|
background-color: var(--bg-tertiary);
|
|
164
164
|
border-radius: var(--radius);
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
-
.
|
|
167
|
+
.mint-dose-calculator__result-title {
|
|
168
168
|
font-size: 0.625rem;
|
|
169
169
|
font-weight: 600;
|
|
170
170
|
color: var(--text-muted);
|
|
@@ -173,23 +173,23 @@
|
|
|
173
173
|
margin-bottom: 0.75rem;
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
-
.
|
|
176
|
+
.mint-dose-calculator__result-row {
|
|
177
177
|
display: flex;
|
|
178
178
|
justify-content: space-between;
|
|
179
179
|
align-items: center;
|
|
180
180
|
padding: 0.375rem 0;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
-
.
|
|
183
|
+
.mint-dose-calculator__result-row:not(:last-child) {
|
|
184
184
|
border-bottom: 1px solid var(--border-color);
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
.
|
|
187
|
+
.mint-dose-calculator__result-label {
|
|
188
188
|
font-size: 0.875rem;
|
|
189
189
|
color: var(--text-secondary);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.
|
|
192
|
+
.mint-dose-calculator__result-value {
|
|
193
193
|
font-size: 0.875rem;
|
|
194
194
|
font-weight: 600;
|
|
195
195
|
color: var(--text-primary);
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
/* Error state */
|
|
200
|
-
.
|
|
200
|
+
.mint-dose-calculator__error {
|
|
201
201
|
padding: 0.75rem;
|
|
202
202
|
font-size: 0.875rem;
|
|
203
203
|
color: var(--mint-error);
|
|
@@ -207,11 +207,11 @@
|
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
/* Serial dilution preview */
|
|
210
|
-
.
|
|
210
|
+
.mint-dose-calculator__preview {
|
|
211
211
|
margin-top: 1rem;
|
|
212
212
|
}
|
|
213
213
|
|
|
214
|
-
.
|
|
214
|
+
.mint-dose-calculator__preview-title {
|
|
215
215
|
font-size: 0.625rem;
|
|
216
216
|
font-weight: 600;
|
|
217
217
|
color: var(--text-muted);
|
|
@@ -220,13 +220,13 @@
|
|
|
220
220
|
margin-bottom: 0.5rem;
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
.
|
|
223
|
+
.mint-dose-calculator__preview-steps {
|
|
224
224
|
display: flex;
|
|
225
225
|
flex-wrap: wrap;
|
|
226
226
|
gap: 0.5rem;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
.
|
|
229
|
+
.mint-dose-calculator__preview-step {
|
|
230
230
|
display: flex;
|
|
231
231
|
align-items: center;
|
|
232
232
|
gap: 0.5rem;
|
|
@@ -236,22 +236,22 @@
|
|
|
236
236
|
font-size: 0.75rem;
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
-
.
|
|
239
|
+
.mint-dose-calculator__preview-step-num {
|
|
240
240
|
font-weight: 600;
|
|
241
241
|
color: var(--color-primary);
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
.
|
|
244
|
+
.mint-dose-calculator__preview-step-conc {
|
|
245
245
|
font-family: 'Fira Code', monospace;
|
|
246
246
|
color: var(--text-primary);
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
-
.
|
|
249
|
+
.mint-dose-calculator__preview-arrow {
|
|
250
250
|
color: var(--text-muted);
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
/* Apply button */
|
|
254
|
-
.
|
|
254
|
+
.mint-dose-calculator__apply-btn {
|
|
255
255
|
display: flex;
|
|
256
256
|
align-items: center;
|
|
257
257
|
justify-content: center;
|
|
@@ -269,33 +269,33 @@
|
|
|
269
269
|
transition: background-color 0.15s ease;
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
-
.
|
|
272
|
+
.mint-dose-calculator__apply-btn:hover:not(:disabled) {
|
|
273
273
|
background-color: var(--color-primary-hover);
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
-
.
|
|
276
|
+
.mint-dose-calculator__apply-btn:disabled {
|
|
277
277
|
opacity: var(--mint-disabled-opacity);
|
|
278
278
|
cursor: not-allowed;
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
-
.
|
|
281
|
+
.mint-dose-calculator__apply-btn svg {
|
|
282
282
|
width: 1rem;
|
|
283
283
|
height: 1rem;
|
|
284
284
|
}
|
|
285
285
|
|
|
286
286
|
/* Molecular weight input */
|
|
287
|
-
.
|
|
287
|
+
.mint-dose-calculator__mw-section {
|
|
288
288
|
padding: 0.75rem 1rem;
|
|
289
289
|
background-color: var(--bg-tertiary);
|
|
290
290
|
border-top: 1px solid var(--border-color);
|
|
291
291
|
}
|
|
292
292
|
|
|
293
|
-
.
|
|
293
|
+
.mint-dose-calculator__mw-label {
|
|
294
294
|
font-size: 0.75rem;
|
|
295
295
|
color: var(--text-muted);
|
|
296
296
|
margin-bottom: 0.375rem;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
.
|
|
299
|
+
.mint-dose-calculator__mw-input {
|
|
300
300
|
width: 100%;
|
|
301
301
|
}
|