--- 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;
}