Creata pagina step della commessa

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

@@ -87,6 +87,7 @@
     box-shadow: var(--custom-box-shadow);
     padding: .25rem 0;
     border-radius: 16px;
+    margin-bottom: 0 !important;
 }
 
 .container-button .divider {
@@ -156,4 +157,121 @@
     display: flex;
     gap: 1rem;
     flex-direction: column;
+}
+
+.commesse-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.commesse-container ::deep > div:first-child:not(.activity-card) {
+    display: none;
+}
+
+/*--------------
+    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% / 2);
+    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) {
+    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%); }
+
+.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;
+}
+
+.tab-content::-webkit-scrollbar { width: 3px; }
+
+.tab-content::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border-radius: 2px;
+}
+
+#tab1:checked ~ .tab-container .tab-content:nth-child(1),
+#tab2:checked ~ .tab-container .tab-content:nth-child(2) { display: block; }
+
+@keyframes fade {
+    from {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }