Creata pagina step della commessa

salesbook.Shared/Components/Pages/Commessa.razor.css

@@ -0,0 +1,215 @@
+/* Container scrollabile */
+
+.timeline-container {
+    height: 100%;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+
+.timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    position: relative;
+    padding-left: 40px; /* spazio per linea e cerchi */
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    position: relative;
+}
+
+/* Linea sopra e sotto ogni step */
+
+.step::before,
+.step::after {
+    content: "";
+    position: absolute;
+    left: -31px;
+    width: 2px;
+    background: #ddd;
+}
+
+.step::after {
+    top: 30%;
+    bottom: -1.5rem;
+}
+
+.step:first-child::before { display: none; }
+
+.step:last-child::after { display: none; }
+
+/* Cerchio base */
+
+.circle,
+.in-progress {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    z-index: 1;
+    margin-left: -40px;
+    background-color: var(--mud-palette-tertiary);
+}
+
+/* Stato skippato */
+
+.skipped { background: #ccc; }
+
+/* Stato completato */
+
+.completed {
+    background: var(--mud-palette-primary);
+    color: white;
+    font-weight: bold;
+}
+
+/* Stato in corso con spinner */
+
+.in-progress {
+    border: 2px solid var(--mud-palette-primary);
+    border-top: 2px solid transparent;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+
+    100% { transform: rotate(360deg); }
+}
+
+/* Label con titolo + sottotitolo */
+
+.label {
+    display: flex;
+    flex-direction: column;
+}
+
+.titleStep {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #111;
+    line-height: normal;
+}
+
+.subtitleStep {
+    font-size: .90rem;
+    color: #666;
+    line-height: normal;
+}
+
+.timeline-container::-webkit-scrollbar { width: 6px; }
+
+.timeline-container::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border-radius: 3px;
+}
+
+/*--------------
+    TabPanel
+----------------*/
+
+.box {
+    display: flex;
+    flex-direction: column;
+    width: -webkit-fill-available;
+    box-shadow: var(--custom-box-shadow);
+    border-radius: 16px;
+    overflow: clip;
+    margin-bottom: 1rem;
+}
+
+/* nascondo gli input */
+
+.tab-toggle { display: none; }
+
+.tab-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    position: relative;
+    z-index: 1;
+    background: var(--mud-palette-surface);
+}
+
+/* la lineetta */
+
+.tab-list::before {
+    content: '';
+    display: block;
+    height: 3px;
+    width: calc(100% / 3);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: var(--mud-palette-primary);
+    transition: transform .3s;
+}
+
+.tab-item {
+    flex: 1;
+    text-align: center;
+    transition: .3s;
+    opacity: 0.5;
+}
+
+.tab-trigger {
+    display: block;
+    padding: 10px 0;
+    cursor: pointer;
+}
+
+/* tab attivo */
+
+#tab1:checked ~ .box .tab-list .tab-item:nth-child(1),
+#tab2:checked ~ .box .tab-list .tab-item:nth-child(2),
+#tab3:checked ~ .box .tab-list .tab-item:nth-child(3) {
+    opacity: 1;
+    font-weight: bold;
+    display: block;
+}
+
+/* spostamento lineetta */
+
+#tab1:checked ~ .box .tab-list::before { transform: translateX(0%); }
+
+#tab2:checked ~ .box .tab-list::before { transform: translateX(100%); }
+
+#tab3:checked ~ .box .tab-list::before { transform: translateX(200%); }
+
+.tab-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: -webkit-fill-available;
+}
+
+.tab-content {
+    display: none;
+    flex: 1;
+    overflow-y: auto;
+    animation: fade .3s ease;
+    padding: .5rem;
+}
+
+#tab1:checked ~ .tab-container .tab-content:nth-child(1),
+#tab2:checked ~ .tab-container .tab-content:nth-child(2),
+#tab3:checked ~ .tab-container .tab-content:nth-child(3) { display: block; }
+
+@keyframes fade {
+    from {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}