final work changes

src/assets/scss/material-kit/_datepicker.scss

@@ -15,6 +15,30 @@
   }
 }
 
+.md-dialog-actions .md-button {
+  &,
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  &:active:focus,
+  &:active:hover,
+  &.active:focus,
+  &.active:hover,
+  .open > &.dropdown-toggle,
+  .open > &.dropdown-toggle:focus,
+  .open > &.dropdown-toggle:hover {
+      background-color: $brand-success !important;
+  }
+
+  &:focus,
+  &:active,
+  &:hover{
+    // remove this line if you want black shadows
+    @include button-shadow-color($brand-success);
+  }
+}
+
 .md-datepicker-header .md-datepicker-date-select{
   font-size: 30px;
 }
@@ -48,13 +72,13 @@
 
 .md-datepicker-today,
 .md-datepicker-selected{
-  @include shadow-2dp-color($brand-primary);
+  @include shadow-2dp-color($brand-success);
   font-weight: lighter !important;
 
   &,
   &:hover,
   &:focus{
-    background-color: $brand-primary !important;
+    background-color: $brand-success !important;
     color: $white-color !important;
   }
 }
@@ -71,7 +95,7 @@
 }
 
 .md-datepicker-dialog .md-datepicker-header{
-  background: linear-gradient(60deg, $purple-400, $purple-600) !important;
+  background: linear-gradient(60deg, $green-400, $green-600) !important;
 }
 
 .md-datepicker-overlay,

src/assets/scss/material-kit/_dropdown.scss

@@ -54,20 +54,8 @@
         a:hover,
         a:focus,
         a:active {
-            background-color: $brand-primary !important;
+            background-color: $brand-success !important;
-            color: #FFFFFF !important;
+            color: $white-color !important;
-        }
-    }
-    .navbar &,
-    .navbar.navbar-default &{
-        li{
-            a:hover,
-            a:focus,
-            a:active {
-                background-color: $brand-primary;
-                color: #FFFFFF;
-                @include shadow-big-color($brand-primary);
-            }
         }
     }
 }

src/assets/scss/material-kit/_example-pages.scss

@@ -42,7 +42,7 @@
         background-position: center center;
 
         &::before {
-          background: rgba(0,0,0, .5);
+          background: rgba(0,0,0, .2);
         }
     }
     .profile{
@@ -134,7 +134,7 @@
 .landing-page {
   .page-header {
     &::before {
-      background: rgba(0,0,0, .5);
+      background: rgba(0,0,0, .2);
     }
   }
 }
@@ -158,7 +158,7 @@
     min-height: -webkit-fill-available;
 
     &::before {
-      background: rgba(0,0,0, .5);
+      background: rgba(0,0,0, .2);
     }
 
     > .container {

src/assets/scss/material-kit/_inputs.scss

@@ -47,6 +47,13 @@
     }
   }
 
+  @include inputs-color('green', $brand-success);
+  @include inputs-color('danger', $brand-danger);
+  @include inputs-color('warning', $brand-warning);
+  @include inputs-color('rose', $brand-rose);
+  @include inputs-color('info', $brand-info);
+  @include inputs-color('primary', $brand-primary);
+
   &.md-has-textarea:not(.md-autogrow).md-focused .md-textarea, &.md-has-textarea:not(.md-autogrow).md-has-value .md-textarea{
     margin-top: 20px;
     padding-top: 0;
@@ -150,7 +157,7 @@
   }
 
   &:before{
-    background-color: $brand-primary !important;
+    background-color: $brand-success !important;
   }
 
   &.md-focused label,
@@ -169,7 +176,7 @@
 
   &.md-has-textarea:not(.md-autogrow):before{
     border-bottom: 2px solid transparent;
-    border-color: $brand-primary !important;
+    border-color: $brand-success !important;
     transform: scaleX(.12);
   }
 
@@ -212,10 +219,11 @@
   }
 
   &.md-focused > .fa,
+  &.md-focused > .md-icon,
   &.md-focused > .fas,
   &.md-focused > .fab {
 
-    color: $brand-primary;
+    color: $brand-success !important;
   }
 
   .success.md-icon,

src/assets/scss/material-kit/_mixins.scss

@@ -24,6 +24,18 @@
   }
 }
 
+@mixin inputs-color($input-class, $color) {
+  &.has-#{$input-class} {
+    &:before {
+      background-color: $color !important;
+    }
+
+    &.md-focused .md-icon {
+      color: $color !important;
+    }
+  }
+}
+
 @mixin tabs-color($color) {
   &,
   &:hover,

src/assets/scss/material-kit/_navbars.scss

@@ -101,7 +101,7 @@
 
 
   // default color for dropdown
-  @include dropdown-colors($brand-primary);
+  @include dropdown-colors($brand-success);
   @include toolbar-colors($gray-light, $white-color);
 
   &.md-white {

src/views/Index.vue

@@ -76,13 +76,13 @@
             <div class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center">
               <login-card header-color="green">
                 <h4 slot="title" class="card-title">Login</h4>
-                <md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">
+                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                   <i class="fab fa-facebook-square"></i>
                 </md-button>
-                <md-button slot="buttons" to="#twitter" class="md-just-icon md-simple md-white">
+                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                   <i class="fab fa-twitter"></i>
                 </md-button>
-                <md-button slot="buttons" to="#google" class="md-just-icon md-simple md-white">
+                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                   <i class="fab fa-google-plus-g"></i>
                 </md-button>
                 <p slot="description" class="description">Or Be Classical</p>
@@ -111,7 +111,7 @@
       </div>
       <div class="md-layout">
         <div class="md-layout-item text-center">
-          <md-button href="#/login" class="md-simple md-primary md-lg">View Login Page</md-button>
+          <md-button href="#/login" class="md-simple md-success md-lg">View Login Page</md-button>
         </div>
       </div>
       <div class="section section-examples">
@@ -121,13 +121,13 @@
                     <a href="#/landing" target="_blank">
                         <img :src="landing" alt="Rounded Image" class="img-raised rounded img-fluid">
                     </a>
-                    <md-button href="#/landing" class="md-simple md-primary md-lg">View Landing Page</md-button>
+                    <md-button href="#/landing" class="md-simple md-success md-lg">View Landing Page</md-button>
                 </div>
                 <div class="md-layout-item">
                   <a href="#/profile" target="_blank">
                       <img :src="profile" alt="Rounded Image" class="img-raised rounded img-fluid">
                   </a>
-                  <md-button href="#/profile" class="md-simple md-primary md-lg">View Profile Page</md-button>
+                  <md-button href="#/profile" class="md-simple md-success md-lg">View Profile Page</md-button>
                 </div>
             </div>
         </div>
@@ -140,8 +140,8 @@
               <h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
             </div>
             <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
-              <md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-primary md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
+              <md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-success md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
-              <md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
+              <md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-success md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
             </div>
   	      </div>
     	    <br><br>
@@ -153,8 +153,8 @@
             </div>
         		<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
               <div class="btn-container">
-                <md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade disabled" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
+                <md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-success md-lg md-upgrade disabled" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
-                <md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
+                <md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmk-demos" class="md-button md-success md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
               </div>
         		</div>
           </div>

src/views/Landing.vue

@@ -7,7 +7,7 @@
     				<h1 class="title">Your Story Starts With Us.</h1>
               <h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
               <br>
-              <md-button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="md-danger md-lg" target="_blank"><i class="fas fa-play"></i> Watch video</md-button>
+              <md-button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="md-success md-lg" target="_blank"><i class="fas fa-play"></i> Watch video</md-button>
     			</div>
         </div>
       </div>
@@ -94,7 +94,7 @@
                         <div class="md-layout-item md-size-50 mx-auto">
                           <img :src="teamImg2" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
                         </div>
-                        <h4 class="card-title">Christian Louboutin
+                        <h4 class="card-title">Carla Hortensia
                           <br>
                           <small class="card-description text-muted">Designer</small>
                         </h4>
@@ -174,7 +174,7 @@
                   </md-field>
                   <div class="md-layout">
                     <div class="md-layout-item md-size-33 mx-auto text-center">
-                      <md-button class="md-primary">Send Message</md-button>
+                      <md-button class="md-success">Send Message</md-button>
                     </div>
                   </div>
               </form>

src/views/Login.vue

@@ -6,13 +6,13 @@
           <div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
             <login-card header-color="green">
               <h4 slot="title" class="card-title">Login</h4>
-              <md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">
+              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                 <i class="fab fa-facebook-square"></i>
               </md-button>
-              <md-button slot="buttons" to="#twitter" class="md-just-icon md-simple md-white">
+              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                 <i class="fab fa-twitter"></i>
               </md-button>
-              <md-button slot="buttons" to="#google" class="md-just-icon md-simple md-white">
+              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
                 <i class="fab fa-google-plus-g"></i>
               </md-button>
               <p slot="description" class="description">Or Be Classical</p>

src/views/Profile.vue

@@ -11,7 +11,7 @@
                   <img :src="img" alt="Circle Image" class="img-raised rounded-circle img-fluid">
                 </div>
                 <div class="name">
-                  <h3 class="title">Christian Louboutin</h3>
+                  <h3 class="title">Carla Hortensia</h3>
                   <h6>Designer</h6>
                   <md-button href="javascript:void(0)" class="md-just-icon md-simple md-dribbble"><i class="fab fa-dribbble"></i></md-button>
                   <md-button href="javascript:void(0)" class="md-just-icon md-simple md-twitter"><i class="fab fa-twitter"></i></md-button>
@@ -29,7 +29,7 @@
               :tab-icon="['camera', 'palette', 'favorite']"
               plain
               nav-pills-icons
-              color-button="primary">
+              color-button="success">
 
               <!-- here you can add your content for tab-content -->
               <template slot="tab-pane-1">

src/views/components/JavascriptComponentsSection.vue

@@ -11,7 +11,7 @@
           </div>
           <div class="md-layout">
             <div class="md-layout-item md-size-33">
-              <md-button class="md-primary md-block" @click="classicModal = true"><md-icon>library_books</md-icon> Classic</md-button>
+              <md-button class="md-success md-block" @click="classicModal = true"><md-icon>library_books</md-icon> Classic</md-button>
               <modal v-if="classicModal" @close="classicModalHide">
                 <template slot="header">
                   <h4 class="modal-title">Modal Title</h4>
@@ -185,9 +185,9 @@ export default {
     return {
       classicModal: false,
       selectedDate: new Date("2018/03/26"),
-      carousel1: require("@/assets/img/bg.jpg"),
+      carousel1: require("@/assets/img/nature-2.jpg"),
-      carousel2: require("@/assets/img/bg3.jpg"),
+      carousel2: require("@/assets/img/nature.jpg"),
-      carousel3: require("@/assets/img/city.jpg")
+      carousel3: require("@/assets/img/nature-3.jpg")
     };
   },
   methods: {