client/src/components/SessionList.scss
changeset 154 a28361bda28c
parent 151 57d63a248f0d
child 160 183b128a4189
--- a/client/src/components/SessionList.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,34 +1,56 @@
-.top-fade {
-    width: max-content;
-    height: 80px;
-}
-
 a.sessions{
     cursor: pointer;
 }
 
-.session {
-    padding-top: 5%;
-    padding-bottom: 1%;
-    padding-left: 5%;
+#delete {
+    // opacity: 0;
+    // display: none;
+    -webkit-transition: .5s all;
+    -webkit-transition-delay: 5s;
+    -moz-transition: .5s all;
+    -moz-transition-delay: 5s;
+    -ms-transition: .5s all;
+    -ms-transition-delay: 5s;
+    -o-transition: .5s all;
+    -o-transition-delay: 5s;
+    transition: .5s all;
+    transition-delay: 5s;
 }
 
+#delete:hover {
+    // opacity: 1;
+    display: inline-block;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    -ms-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.sessions:hover ~ #delete {
+    // opacity: 1;
+    display: inline-block;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    -ms-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.sessions:hover {
+    opacity: .7;
+}
+
+
 span.session-title {
     font-size: 20px;
-    font-weight: 600;
 }
 
 span.session-description {
     font-size: 12px;
-    font-weight: 500
 }
 span.session-date {
     font-size: 13px;
-    font-weight: 700;
-}
-
-#toggle-edit {
-    padding-top:-20%;
 }
 
 .edit{
@@ -40,9 +62,6 @@
 }
 
 #delete-session-modal{
-    padding-top: 2%;
-    margin-top: 30%;
-
     -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 0.5s; /* Firefox < 16 */
         -ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -80,11 +99,10 @@
 }
 
 #delete-session-close-modal-button{
-    margin-top: -2.5%;
-    margin-left: 92%;
     background-color: transparent;
     border: transparent;
     color: rgba(#769FED, .4);
+    cursor: pointer;
 }
 
 #delete-session-close-modal-button:hover{
@@ -94,15 +112,9 @@
 }
 
 .modal-text{
-    margin-top: 10%;
     font-size: 16px;
-    font-weight: 500;
 }
 
 #delete-session-modal-button {
-    padding: 1.5%;
-    margin-top: 5%;
-    margin-right: 40%;
-    width: 20%;
     font-size: 14px;
 }