popup

Step/wwwroot/assets/styles/base/card.less

@@ -884,12 +884,18 @@
         }
       }
       & .popup{
-        background-color: @color-silver;
         position: absolute;
         display: flex;
         padding: 4px;
         top: 78px;
-        left: 246px;
+        left: 60px;
+        .edit-reps{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+        }
         // &:before {
         //     content: "\f0d8";
         //     color: @color-silver;

Step/wwwroot/assets/styles/base/popups.less

@@ -6,9 +6,43 @@
 @popup: popup;
 
 .@{popup}{
-    width: 200px;
-    height: 100px;
-    background-color: @color-silver;
+    width: 288px;
+    height: 218px;
+    display: flex;
+    flex-flow: column;
+    background-color: @color-background-white;
+    z-index: 100;
+    header{
+        height: 64px;
+        border-bottom: solid 2px @color-silver;
+        position: relative;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        color: @color-darkish-blue;
+        padding-left: 16px;
+        button.close {
+            position: absolute;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            border: none;
+            background-color: @color-background-white;
+            color: @color-darkish-blue;
+            top: calc(50% - 20px);
+            right: 14px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        button.close:active {
+            background-color: @color-clear-blue;
+            color: @color-white;
+          }
+    }
+    section.body{
+        width: 100%;
+        height: calc(~'100% - 64px');
+    }
 }
 
 // .@{popup}.arrow-bottom::after, .@{popup}.arrow-top::after, .@{popup}.arrow-right::after, .@{popup}.arrow-left::after{
@@ -49,29 +83,29 @@
 // }
 
 .@{popup}.arrow-top {
-    border: 2px solid black;
+    border: 2px solid @color-clear-blue;
 }
 
 .@{popup}.arrow-top::before {
     content: '';
     display: block;  
     position: absolute;
-    left: 86px;
+    left: 128px;
     bottom: 100%;
     width: 0;
     height: 0;
     border: 18px solid transparent;
-    border-bottom-color: black;
+    border-bottom-color: @color-clear-blue;
 }
 
 .@{popup}.arrow-top::after {
     content: '';
     display: block;  
     position: absolute;
-    left: 88px;
+    left: 130px;
     bottom: 100%;
     width: 0;
     height: 0;
     border: 16px solid transparent;
-    border-bottom-color: @color-silver;
+    border-bottom-color: @color-background-white;
 }

Step/wwwroot/assets/styles/style.css

@@ -1844,34 +1844,68 @@
   justify-content: flex-end;
 }
 .popup {
-  width: 200px;
-  height: 100px;
-  background-color: #bbbcbc;
+  width: 288px;
+  height: 218px;
+  display: flex;
+  flex-flow: column;
+  background-color: #fff;
+  z-index: 100;
+}
+.popup header {
+  height: 64px;
+  border-bottom: solid 2px #bbbcbc;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #002680;
+  padding-left: 16px;
+}
+.popup header button.close {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background-color: #fff;
+  color: #002680;
+  top: calc(30%);
+  right: 14px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.popup header button.close:active {
+  background-color: #1791ff;
+  color: #fff;
+}
+.popup section.body {
+  width: 100%;
+  height: calc(100% - 64px);
 }
 .popup.arrow-top {
-  border: 2px solid black;
+  border: 2px solid #1791ff;
 }
 .popup.arrow-top::before {
   content: '';
   display: block;
   position: absolute;
-  left: 86px;
+  left: 128px;
   bottom: 100%;
   width: 0;
   height: 0;
   border: 18px solid transparent;
-  border-bottom-color: black;
+  border-bottom-color: #1791ff;
 }
 .popup.arrow-top::after {
   content: '';
   display: block;
   position: absolute;
-  left: 88px;
+  left: 130px;
   bottom: 100%;
   width: 0;
   height: 0;
   border: 16px solid transparent;
-  border-bottom-color: #bbbcbc;
+  border-bottom-color: #fff;
 }
 .row {
   display: flex;
@@ -5915,12 +5949,18 @@ footer .container button.big:before {
   font-size: 24px;
 }
 .card-element-queue .popup {
-  background-color: #bbbcbc;
   position: absolute;
   display: flex;
   padding: 4px;
   top: 78px;
-  left: 246px;
+  left: 60px;
+}
+.card-element-queue .popup .edit-reps {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
 }
 .card-element-queue .popup input {
   width: 50px;

Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue

@@ -15,8 +15,12 @@
             </div>
             <button class="btn" @click="onClick()"><i class="fa fa-trash"></i></button>
         </div>
-        <popup v-if="enablePopup" :arrow="'arrow-top'" :title="'prova'">
-            <input type="number" @change="changeReps()" :value="numberReps">
+        <popup v-if="enablePopup" :arrow="'arrow-top'" :title="'Modifica ripetizioni'">
+            <button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
+            <div class="edit-reps">
+                <label>Ripetizioni</label>
+                <input type="number" @change="changeReps()" :value="numberReps">
+            </div>
         </popup>
     </div>
 <!-- </div> -->
@@ -53,6 +57,9 @@ export default {
         },
         changeReps(value){
             this.numberReps = value;
+        },
+        close(){
+            this.enablePopup = false;
         }
     }
 };