Refactor: Style changes

Author: rarestoma

package.json

@@ -25,7 +25,7 @@
         "@types/googlemaps": "3.40.5",
         "animate.css": "4.1.1",
         "arrive": "2.4.1",
-        "bootstrap": "4.5.3",
+        "bootstrap": "3.3.7",
         "bootstrap-notify": "3.1.3",
         "chartist": "0.11.4",
         "core-js": "3.8.1",

src/app/notifications/notifications.component.ts

@@ -22,7 +22,7 @@ export class NotificationsComponent implements OnInit {
           message: "Welcome to <b>Light Bootstrap Dashboard</b> - a beautiful freebie for every web developer."
       },{
           type: type[color],
-          timer: 1000,
+          timer: 100000,
           placement: {
               from: from,
               align: align

src/app/shared/navbar/navbar.component.html

@@ -46,15 +46,15 @@
             <ul class="nav navbar-nav navbar-right">
                 <li>
                     <a href="#">
-                        <p>Account</p>
+                        Account
                     </a>
                 </li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                        <p>
+
                             Dropdown
                             <b class="caret"></b>
-                        </p>
+                        
                     </a>
                     <ul class="dropdown-menu">
                         <li><a href="#">Action</a></li>
@@ -68,7 +68,7 @@
                 </li>
                 <li>
                     <a href="#">
-                        <p>Log out</p>
+                        Log out
                     </a>
                 </li>
                 <li class="separator hidden-lg hidden-md"></li>

src/assets/sass/lbd/_navbars.scss

@@ -4,13 +4,18 @@
         > a:focus{
             background-color: transparent;
         }
-    } 
+        a{
+          p{
+            margin-bottom: 0;
+          }
+        }
+    }
 }
 .navbar{
     border: $none;
     font-size: $font-size-navbar;
     border-radius: 0;
-    
+
     .navbar-brand {
         font-weight: $font-weight-normal;
         margin: $navbar-margin-brand;
@@ -31,12 +36,12 @@
              margin: $navbar-margin-a-btn-round;
          }
          > li > a [class^="fa"]{
-             font-size: $font-size-large + 1;   
+             font-size: $font-size-large + 1;
              position: relative;
              line-height: 16px;
              top: 1px;
         }
-        
+
         .notification{
             position: absolute;
             background-color: #FB404B;
@@ -63,7 +68,7 @@
     .caret{
        // @include center-item();
     }
-    
+
     &.fixed{
         width: calc(100% - $sidebar-width);
         right: 0;
@@ -78,11 +83,11 @@
     margin-top: -5px;
 }
 
-.navbar-transparent, [class*="navbar-ct"]{    
+.navbar-transparent, [class*="navbar-ct"]{
     .navbar-brand{
         color: $white-color;
         @include opacity(.9);
-    
+
         &:focus,
         &:hover{
             background-color: transparent;
@@ -109,14 +114,14 @@
         .nav > li > a.btn:hover{
             background-color: transparent;
         }
-        
+
         > .dropdown > a .caret,
         > .dropdown > a:hover .caret,
         > .dropdown > a:focus .caret{
             border-bottom-color: $white-color;
             border-top-color: $white-color;
-        } 
-        
+        }
+
         > .open > a,
         > .open > a:hover,
         > .open > a:focus {
@@ -125,7 +130,7 @@
             @include opacity(1);
         }
     }
-    
+
     .btn-default{
         color: $white-color;
         border-color: $white-color;
@@ -135,15 +140,15 @@
         background-color: $white-color;
         @include opacity(.9);
     }
-    .btn-default.btn-fill:hover, 
-    .btn-default.btn-fill:focus, 
+    .btn-default.btn-fill:hover,
+    .btn-default.btn-fill:focus,
     .btn-default.btn-fill:active,
-    .btn-default.btn-fill.active, 
+    .btn-default.btn-fill.active,
     .open .dropdown-toggle.btn-fill.btn-default{
         border-color: $white-color;
         @include opacity(1);
     }
-    
+
 }
 .navbar-transparent{
     .dropdown-menu .divider{
@@ -159,32 +164,32 @@
 .navbar-default {
     background-color: $white-navbar;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  
+
     .navbar-nav{
         > li > a:not(.btn){
             color: $dark-gray;
         }
-        
-        > .active > a, 
-        > .active > a:not(.btn):hover, 
-        > .active > a:not(.btn):focus, 
-        > li > a:not(.btn):hover, 
+
+        > .active > a,
+        > .active > a:not(.btn):hover,
+        > .active > a:not(.btn):focus,
+        > li > a:not(.btn):hover,
         > li > a:not(.btn):focus {
             background-color: transparent;
             border-radius: 3px;
             color: $info-color;
             @include opacity(1);
         }
-        
-        > .dropdown > a:hover .caret, 
+
+        > .dropdown > a:hover .caret,
         > .dropdown > a:focus .caret {
             border-bottom-color: $info-color;
             border-top-color: $info-color;
-            
+
         }
-        
-        > .open > a, 
-        > .open > a:hover, 
+
+        > .open > a,
+        > .open > a:hover,
         > .open > a:focus{
             background-color: transparent;
             color: $info-color;
@@ -193,9 +198,9 @@
         .navbar-toggle:hover,.navbar-toggle:focus {
             background-color: transparent;
         }
-        
-    } 
-    
+
+    }
+
     &:not(.navbar-transparent) .btn-default:hover{
         color: $info-color;
         border-color: $info-color;
@@ -204,7 +209,7 @@
     &:not(.navbar-transparent) .btn-neutral:hover,
     &:not(.navbar-transparent) .btn-neutral:active{
             color: $dark-gray;
-        } 
+        }
 }
 
 /*      Navbar with icons            */
@@ -220,27 +225,27 @@
             padding: $navbar-padding-a-icons;
             margin: $navbar-margin-a-icons;
         }
-        
+
         [class^="pe"] {
             font-size: 30px;
             position: relative;
         }
         p {
             margin: 3px 0 0;
-        }    
-    }    
+        }
+    }
 }
 
 .navbar-form{
    @include box-shadow(none);
    .form-control{
-        @include light-form();       
+        @include light-form();
         height: 22px;
         font-size: $font-size-navbar;
         line-height: $line-height-general;
         color: $light-gray;
     }
-    .navbar-transparent & .form-control, 
+    .navbar-transparent & .form-control,
     [class*="navbar-ct"] & .form-control{
         color: $white-color;
         border: $none;
@@ -275,19 +280,17 @@
     margin-top: 19px;
     margin-bottom: 19px;
     border: $none;
-    
+
     .icon-bar {
         background-color: $white-color;
     }
-     .navbar-collapse, 
+     .navbar-collapse,
      .navbar-form {
         border-color: transparent;
     }
-    
+
     &.navbar-default .navbar-toggle:hover,
     &.navbar-default .navbar-toggle:focus {
         background-color: transparent;
     }
 }
-
-