Split toolbox Sass partials

2026-08-14 09:24:54 +02:00 · 2026-08-14 09:24:54 +02:00 · c312b9ed91
commit c312b9ed91
parent b221257616
19 changed files with 6490 additions and 6419 deletions
--- a/website/src/styles/toolboxes/_calculator-results.scss
+++ b/website/src/styles/toolboxes/_calculator-results.scss
@ -0,0 +1,139 @@
+// Rôle : gère les résultats et entrées sauvegardées du calculateur.
+@use "../mixins";
+
+.calculator-card {
+  gap: 10px;
+  align-self: start;
+  align-content: start;
+}
+
+.calculator-form label,
+.calculator-result {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 7px;
+}
+
+.calculator-card > *,
+.calculator-form input {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.calculator-entry.has-drag-handle {
+  grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
+}
+
+.tool-split-entry-list li.is-editing > .calculator-entry.has-drag-handle {
+  grid-template-columns: 30px auto minmax(0, 1fr) 34px 34px;
+}
+
+.calculator-drag-handle {
+  width: 30px;
+  min-width: 30px;
+  min-height: 36px;
+  padding: 0;
+  color: var(--color-text-muted);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.calculator-entry .tool-split-entry-summary > span {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 7px;
+}
+
+.calculator-entry .tool-split-entry-summary strong,
+.calculator-entry .tool-split-entry-value strong {
+  min-width: 0;
+  overflow: visible;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.calculator-entry .tool-split-entry-summary strong {
+  flex: 0 0 auto;
+  font-size: var(--font-size-sm);
+}
+
+.calculator-entry .tool-split-entry-summary strong.is-long,
+.calculator-entry .tool-split-entry-value strong.is-long {
+  font-size: var(--font-size-xs);
+}
+
+.calculator-entry .tool-split-entry-summary strong.is-compact,
+.calculator-entry .tool-split-entry-value strong.is-compact {
+  font-size: 0.68rem;
+}
+
+.calculator-entry .tool-split-entry-summary em {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calculator-number-group {
+  color: var(--color-text-primary);
+}
+
+.calculator-number-group.is-muted,
+.calculator-number-separator {
+  color: rgba(215, 221, 237, 0.84);
+}
+
+.calculator-number-separator {
+  display: inline-block;
+  min-width: 0.24em;
+}
+
+.calculator-form label span,
+.calculator-result span,
+.tool-split-root-button {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+}
+
+.calculator-result {
+  min-height: 72px;
+  justify-content: stretch;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 36%),
+    rgba(5, 7, 17, 0.56);
+}
+
+.calculator-result strong {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: visible;
+  color: var(--color-text-primary);
+  font-size: clamp(1.55rem, 3vw, 2.15rem);
+  font-variant-numeric: tabular-nums;
+  font-weight: 900;
+  line-height: 0.95;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.calculator-result.is-long strong {
+  font-size: 1.18rem;
+  line-height: 1;
+}
+
+.calculator-result.is-compact strong {
+  font-size: 0.92rem;
+  line-height: 1.05;
+}