💄 Introduce the edition buttons

worldline · Mar 6, 2020 · f7e53bf · f7e53bf
1 parent 9fa42f5
commit f7e53bf
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.css b/src/app/components/formatted-tickets/formatted-tickets.component.css
@@ -33,7 +33,6 @@ html, body {
     padding: 3mm;
     width: 120mm;
     height: 70mm;
-    overflow: hidden;
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
@@ -47,7 +46,6 @@ html, body {
     padding: 0mm;
     width: 126mm;
     height: 76mm;
-    overflow: hidden;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
@@ -299,15 +297,15 @@ p {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   }
   .full-ticket:before, .full-ticket:after, .divided-ticket:before, .divided-ticket:after {
-    content: "";
+/*     content: "";
     position: absolute;
     z-index: -1;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
     top: 50%;
     bottom: 0;
     left: 10px;
     right: 10px;
-    border-radius: 100px / 10px;
+    border-radius: 100px / 10px; */
   }
   .full-ticket:after, .divided-ticket:after {
     right: 10px;
@@ -364,4 +362,44 @@ p {
         -ms-transform: translate(-50%, -50%);
         text-align: center;
     }
+
+/*==================================================
+* Edition styling
+* ===============================================*/
+    .btn {
+        display: inline-block;
+        position: absolute;
+        text-decoration: none;
+        bottom: -20px;
+        right: 60px;
+        background: #ff8181;
+        color: #FFF;
+        width: 40px;
+        height: 40px;
+        line-height: 20px;
+        border-radius: 50%;
+        text-align: center;
+        font-weight: bold;
+        vertical-align: middle;
+        overflow: hidden;
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29);
+        border-bottom: solid 3px #bd6565;
+        transition: .4s;
+        margin: 0;
+        padding: 0;
+    }
+
+    .btn2 {
+        right:100px;
+    }
+
+    .btn:active {
+        top: none;
+        position: absolute;
+        -ms-transform: translateY(2px);
+        -webkit-transform: translateY(2px);
+        transform: translateY(2px);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+        border-bottom: none;
+    }
 }
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html
@@ -37,6 +37,8 @@ <h1>{{sprintName}}</h1>
         <img src="../../assets/pencil-black.svg">
       </div>
     </div>
+    <button class="btn">.</button>
+    <button class="btn btn2">.</button>
   </div>
   <ng-container *ngFor="let issues of smallPostitIssues">
     <div class="divided-ticket" *ngFor="let chunk of issues | chunks: 3; let i = index; let last = last">