You are here

Home » API reference » Notifications widget 8

notifications.base.css in Notifications widget 8 

#block-notificationblock {
  display: inline-block;
}

.glyphicon-bell {
  top: 8px;
  font-size: 16px;
  line-height: 17px;
  margin-right: 5px;
  margin-left: 10px;
}

.dropdown-menu.notify-drop {
  background: #fff!important;
  margin: 0;
  padding: 0;
}
.dropdown-menu.notify-drop .drop-content li a {
  color: #333!important;
}
.notify-drop .drop-content li {
  display: block;
  padding: 10px 10px 10px 30px !important;
  border-bottom: solid 1px #e5e5e5;
  position: relative;
}
.notify-drop .drop-content li .fa {
  position: absolute;
  left: 13px;
  top: 13px;
  font-weight: bold;
}
.notify-drop .drop-content li a {
  background: rgba(255,255,255,0)!important;
  padding: 0!important;
}
.notify-drop .drop-content li: nth-last-child(1) {
  border-bottom: 0px!important;
  border-radius: 0 0 0px 0px;
}
.notify-drop .drop-content li: hover {
  background: #f8f8f8;
}
.notify-drop-title {
  padding: 11px 15px;
  font-size: 15px;
  background: #fff;
}
.drop-content {
  border: solid 1px #e5e5e5;
  border-radius: 0 0 0px 0px;
  max-height: 400px;
  overflow: auto;
}

.notify-drop:after,
.notify-drop:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.notify-drop li.unread {
  border-left: 4px solid #54bbba;
}
.notify-drop li.unread a {
  font-weight: bold;
}
.notification-icon:after {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
  position: absolute;
  content: attr(data-count);
  margin-left: -6.8775px;
  margin-top: -6.8775px;
  padding: 0 4px;
  line-height: 13.755px;
  background: #54bbba;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 11.004px;
  font-weight: 600;
  border-radius: .25em;
}
.actionable-notification-msg,
.notification-items,
.notification-msg {
  font-size: 14px !important;
}
.clear-all-notification {
  display: block;
  text-align: center;
  padding: 11px 10px;
  cursor: pointer;
}
@media only screen and (min-width:  768px) {
  .notify-drop:after,
  .notify-drop:before {
    right: 0;
    left: 93%;
  }
}
@media (min-width:  1200px) {
  .dropdown-menu.notify-drop {
    min-width: 300px;
    right: -130px!important;
  }
}
@media (min-width:  768px) and ( max-width:  1199px) {
  .dropdown-menu.notify-drop {
    min-width: 300px;
    right: 0px!important;
  }
  .notify-drop: after,
  .notify-drop: before {
    right: 0;
    left: 93%!important;
  }
}
@media only screen and (max-width: 767px) {
  .dropdown-menu.notify-drop {
    right: -70px!important;
    min-width: 300px;
    position: absolute!important;
  }
  .dropdown-menu: after,
  .dropdown-menu: before {
    left: 71%!important;
  }
  .dropdown-menu.notify-drop:before {
    border-color: rgba(221, 221, 221, 0);
    border-bottom-color: #fff;
    border-width: 14px;
    margin-left: -15px;
  }
  .dropdown-menu.notify-drop:after {
    border-color: rgba(221, 221, 221, 0);
    border-bottom-color: #fff;
    border-width: 14px;
    margin-left: -15px;
  }
}

File

css/notifications.base.css
View source 
  1. #block-notificationblock {

  2.   display: inline-block;

  3. }

  4. 

  5. .glyphicon-bell {

  6.   top: 8px;

  7.   font-size: 16px;

  8.   line-height: 17px;

  9.   margin-right: 5px;

  10.   margin-left: 10px;

  11. }

  12. 

  13. .dropdown-menu.notify-drop {

  14.   background: #fff!important;

  15.   margin: 0;

  16.   padding: 0;

  17. }

  18. .dropdown-menu.notify-drop .drop-content li a {

  19.   color: #333!important;

  20. }

  21. .notify-drop .drop-content li {

  22.   display: block;

  23.   padding: 10px 10px 10px 30px !important;

  24.   border-bottom: solid 1px #e5e5e5;

  25.   position: relative;

  26. }

  27. .notify-drop .drop-content li .fa {

  28.   position: absolute;

  29.   left: 13px;

  30.   top: 13px;

  31.   font-weight: bold;

  32. }

  33. .notify-drop .drop-content li a {

  34.   background: rgba(255,255,255,0)!important;

  35.   padding: 0!important;

  36. }

  37. .notify-drop .drop-content li: nth-last-child(1) {

  38.   border-bottom: 0px!important;

  39.   border-radius: 0 0 0px 0px;

  40. }

  41. .notify-drop .drop-content li: hover {

  42.   background: #f8f8f8;

  43. }

  44. .notify-drop-title {

  45.   padding: 11px 15px;

  46.   font-size: 15px;

  47.   background: #fff;

  48. }

  49. .drop-content {

  50.   border: solid 1px #e5e5e5;

  51.   border-radius: 0 0 0px 0px;

  52.   max-height: 400px;

  53.   overflow: auto;

  54. }

  55. 

  56. .notify-drop:after,

  57. .notify-drop:before {

  58.   bottom: 100%;

  59.   border: solid transparent;

  60.   content: " ";

  61.   height: 0;

  62.   width: 0;

  63.   position: absolute;

  64.   pointer-events: none;

  65. }

  66. .notify-drop li.unread {

  67.   border-left: 4px solid #54bbba;

  68. }

  69. .notify-drop li.unread a {

  70.   font-weight: bold;

  71. }

  72. .notification-icon:after {

  73.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;

  74.   position: absolute;

  75.   content: attr(data-count);

  76.   margin-left: -6.8775px;

  77.   margin-top: -6.8775px;

  78.   padding: 0 4px;

  79.   line-height: 13.755px;

  80.   background: #54bbba;

  81.   border-radius: 10px;

  82.   color: #fff;

  83.   text-align: center;

  84.   vertical-align: middle;

  85.   font-size: 11.004px;

  86.   font-weight: 600;

  87.   border-radius: .25em;

  88. }

  89. .actionable-notification-msg,

  90. .notification-items,

  91. .notification-msg {

  92.   font-size: 14px !important;

  93. }

  94. .clear-all-notification {

  95.   display: block;

  96.   text-align: center;

  97.   padding: 11px 10px;

  98.   cursor: pointer;

  99. }

  100. @media only screen and (min-width:  768px) {

  101.   .notify-drop:after,

  102.   .notify-drop:before {

  103.     right: 0;

  104.     left: 93%;

  105.   }

  106. }

  107. @media (min-width:  1200px) {

  108.   .dropdown-menu.notify-drop {

  109.     min-width: 300px;

  110.     right: -130px!important;

  111.   }

  112. }

  113. @media (min-width:  768px) and ( max-width:  1199px) {

  114.   .dropdown-menu.notify-drop {

  115.     min-width: 300px;

  116.     right: 0px!important;

  117.   }

  118.   .notify-drop: after,

  119.   .notify-drop: before {

  120.     right: 0;

  121.     left: 93%!important;

  122.   }

  123. }

  124. @media only screen and (max-width: 767px) {

  125.   .dropdown-menu.notify-drop {

  126.     right: -70px!important;

  127.     min-width: 300px;

  128.     position: absolute!important;

  129.   }

  130.   .dropdown-menu: after,

  131.   .dropdown-menu: before {

  132.     left: 71%!important;

  133.   }

  134.   .dropdown-menu.notify-drop:before {

  135.     border-color: rgba(221, 221, 221, 0);

  136.     border-bottom-color: #fff;

  137.     border-width: 14px;

  138.     margin-left: -15px;

  139.   }

  140.   .dropdown-menu.notify-drop:after {

  141.     border-color: rgba(221, 221, 221, 0);

  142.     border-bottom-color: #fff;

  143.     border-width: 14px;

  144.     margin-left: -15px;

  145.   }

  146. }