Advertisement
Guest User

Untitled

a guest
Feb 17th, 2020
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.20 KB | None | 0 0
  1. /* Coner Notifications */
  2. .cornerNotif {
  3.   display: flex;
  4.   flex-direction: column;
  5.  
  6.   /* Position the notification to always reside in the top corner */
  7.   position: fixed;
  8.   top: 20px;
  9.   right: 20px;
  10.   z-index: 2147483647;
  11.  
  12.   border: 1px solid #DDDDDD;
  13.   border-radius: 2px;
  14.  
  15.   /* Shadow and Background */
  16.   box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
  17.  
  18.   /* Sizing */
  19.   min-width: 200px;
  20.   min-height: 75px;
  21.  
  22.   /* Padding and Margin */
  23.   padding: 10px 0px;
  24.   padding-right: 30px;
  25.   margin: 0px;
  26.   box-sizing: border-box;
  27.  
  28.   /* Font */
  29.   font-family: 'Open Sans', sans-serif;
  30. }
  31.  
  32. .cornerNotif * {
  33.   /* Padding and Margin */
  34.   padding: 0px;
  35.   margin: 0px;
  36.   box-sizing: border-box;
  37. }
  38.  
  39. .notifHeader {
  40.   display: flex;
  41.   justify-content: flex-end;
  42.   align-items: center;
  43. }
  44.  
  45. /* Notif Header X */
  46. .svgEx {
  47.   width: 10px;
  48.   height: 10px;
  49. }
  50.  
  51.  
  52. /* Notification Body */
  53. .notifBody {
  54.   display: grid;
  55.   grid-template-columns: 100px auto;
  56.   column-gap: 10px;
  57. }
  58.  
  59. .notifStatus {
  60.   display: flex;
  61.   justify-content: center;
  62.   align-items: center;
  63.  
  64.   min-height: 90px;
  65. }
  66.  
  67. .notifStatus > svg {
  68.   width: 50px;
  69.   height: 50px;
  70. }
  71.  
  72. .notifText > main > h3 {
  73.   font-size: 1em;
  74. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement