diff -r de8d18c8251d -r a28361bda28c client/src/components/SessionList.scss --- 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; }