Change close notification button for all screen sizes
This commit is contained in:
parent
066c3c3c1c
commit
f28d458b60
1 changed files with 7 additions and 10 deletions
|
@ -56,7 +56,7 @@ a { color: black }
|
||||||
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
||||||
}
|
}
|
||||||
.notification .body {
|
.notification .body {
|
||||||
padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; box-sizing: border-box;
|
border-right: 40px solid transparent; padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ;
|
||||||
background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
|
background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
.notification .message-outer { display: table-row }
|
.notification .message-outer { display: table-row }
|
||||||
|
@ -66,9 +66,12 @@ a { color: black }
|
||||||
|
|
||||||
.notification.visible { max-width: 350px }
|
.notification.visible { max-width: 350px }
|
||||||
|
|
||||||
.notification .close { position: absolute; top: 0; right: 0; font-size: 19px; line-height: 13px; color: #DDD; padding: 7px; text-decoration: none }
|
.notification .close:hover { opacity: 0.8 }
|
||||||
.notification .close:hover { color: black }
|
.notification .close {
|
||||||
.notification .close:active, .notification .close:focus { color: #AF3BFF }
|
position: absolute; top: 0; right: 0; text-decoration: none; margin: 10px; padding: 0px; display: block; width: 30px; height: 30px;
|
||||||
|
text-align: center; background-color: tomato; line-height: 30px; vertical-align: bottom; font-size: 30px; color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.notification small { color: #AAA }
|
.notification small { color: #AAA }
|
||||||
.notification .multiline { white-space: normal; word-break: break-word; max-width: 300px; }
|
.notification .multiline { white-space: normal; word-break: break-word; max-width: 300px; }
|
||||||
.body-white .notification { box-shadow: 0 1px 9px rgba(0,0,0,0.1) }
|
.body-white .notification { box-shadow: 0 1px 9px rgba(0,0,0,0.1) }
|
||||||
|
@ -225,12 +228,6 @@ a { color: black }
|
||||||
.notification .message { white-space: normal; }
|
.notification .message { white-space: normal; }
|
||||||
.notification .buttons { padding-right: 22px; padding-right: 40px; }
|
.notification .buttons { padding-right: 22px; padding-right: 40px; }
|
||||||
.notification .button { white-space: nowrap; }
|
.notification .button { white-space: nowrap; }
|
||||||
.notification .close:hover { color: white }
|
|
||||||
.notification .close:active, .notification .close:focus { color: white }
|
|
||||||
.notification .close {
|
|
||||||
padding: 0px; display: block; width: 50px; height: 50px;
|
|
||||||
text-align: center; background-color: tomato; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
|
||||||
}
|
|
||||||
.notification { margin: 0px; }
|
.notification { margin: 0px; }
|
||||||
.notifications { right: 0px; max-width: 80%; }
|
.notifications { right: 0px; max-width: 80%; }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue