Revize b7a21811

Re #8161 - new timeline button due animation per day(s)

website/public/css/style.scss

@@ -734 +734 @@
     bottom: -30px;
   }
 
-  .next, .prev, .play, .pause {
+  .next, .prev, .play, .pause, .lock-date {
     display: inline-block;
     width: 42px;
     height: 42px;
@@ -827 +827 @@
   }
 
   .date {
+    display: flex;
+    align-items: center;
+    align-content: center;
     font-size: 15px;
-    padding: 3px 12px 4px 12px;
     margin-right: 10px;
     text-align: center;
     border-radius: 15px;
     cursor: pointer;
-    background: $secondary-bg-color;
+    background: rgba(11, 21, 90, .7);
 
     @media (max-width: 390px) {
       margin-right: 0;
     }
 
-    &:hover {
-      opacity: .7;
+    span {
+      padding: 3px 6px 4px 12px;
+    }
+
+    .lock-date {
+      width: 26px;
+      height: 26px;
+      margin-right: 2px;
+      opacity: 1;
+      border: 1px solid $primary-text-color;
+      box-shadow: 0 0 0 2px $secondary-bg-color;
+
+      &:hover {
+        box-shadow: 0 0 0 2px rgba(11, 21, 90, .2);
+        background: rgba(11, 21, 90, .2);
+
+        &:after {
+          background-position: -8px 0;
+        }
+      }
+
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 8px;
+        height: 11px;
+        background: url($images-dir + 'btn-lock.svg') no-repeat 0 0;
+        background-size: cover;
+      }
+
+      &.unlock {
+        &:after {
+          background-position: -8px 0;
+        }
+
+        &:hover:after {
+          background-position: 0 0;
+        }
+      }
     }
   }