refactor(global): apply new blur design

src/app/pages/form/layouts/layouts.html

@@ -17,6 +17,21 @@
           ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/layouts/widgets/basicForm.html'"></div>
       </div>
+
+      <div
+          ba-panel
+          ba-panel-title="Horizontal Form"
+          ba-panel-class="with-scroll">
+        <div ng-include="'app/pages/form/layouts/widgets/horizontalForm.html'"></div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div
+          ba-panel
+          ba-panel-title="Form Without Labels"
+          ba-panel-class="with-scroll">
+        <div ng-include="'app/pages/form/layouts/widgets/formWithoutLabels.html'"></div>
+      </div>
       <div
           ba-panel
           ba-panel-title="Block Form"
@@ -24,20 +39,6 @@
         <div ng-include="'app/pages/form/layouts/widgets/blockForm.html'"></div>
       </div>
     </div>
-    <div class="col-md-6">
-      <div
-          ba-panel
-          ba-panel-title="Horizontal Form"
-          ba-panel-class="with-scroll">
-        <div ng-include="'app/pages/form/layouts/widgets/horizontalForm.html'"></div>
-      </div>
-      <div
-          ba-panel
-          ba-panel-title="Form Without Labels"
-          ba-panel-class="with-scroll">
-        <div ng-include="'app/pages/form/layouts/widgets/formWithoutLabels.html'"></div>
-      </div>
-    </div>
   </div>
 
 </div>

src/app/pages/profile/profile.html

@@ -1,7 +1,4 @@
-<div class="widgets">
-  <div class="widgets-block">
-    <div class="panel panel-default invisible" zoom-in>
-      <div class="panel-body content-panel profile-page">
+<div ba-panel ba-panel-class="profile-page">
   <div class="panel-content">
     <div class="progress-info">Your profile is 70% Complete</div>
     <div class="progress">
@@ -212,6 +209,3 @@
     </button>
   </div>
 </div>
-    </div>
-  </div>
-</div>

src/app/pages/ui/alerts/alerts.html

@@ -25,7 +25,7 @@
          ba-panel
          ba-panel-title="Dismissible alerts"
          ba-panel-class="with-scroll">
-      <div>
+      <div class="default-color">
         <div class="alert bg-success closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <strong>Well done!</strong> You successfully read this important alert message.
         </div>
@@ -49,7 +49,7 @@
          ba-panel
          ba-panel-title="Links in alerts"
          ba-panel-class="with-scroll">
-      <div>
+      <div class="default-color">
         <div class="alert bg-success">
           <strong>Well done!</strong> You successfully read <a href class="alert-link">this important alert message</a>.
         </div>
@@ -69,13 +69,13 @@
          ba-panel
          ba-panel-title="Composite alerts"
          ba-panel-class="with-scroll">
-      <div>
+      <div class="default-color">
         <div class="alert bg-warning">
-          <h4>Warning!</h4>
+          <h4 class="default-color">Warning!</h4>
           <strong>Pay attention.</strong> Change a few things up and try submitting again.
           <div class="control-alert">
             <button type="button" class="btn btn-warning">Pay Attention</button>
-            <button type="button" class="btn btn-default ">Ignore</button>
+            <button type="button" class="btn btn-primary">Ignore</button>
           </div>
         </div>
       </div>

src/app/pages/ui/grid/baseGrid.html

@@ -134,7 +134,7 @@
 <h4 class="grid-h">Responsive column resets</h4>
 <div class="row show-grid">
   <div class="col-xs-6 col-sm-3">
-    <div>.col-xs-6 .col-sm-3 <p class="default-color">Resize your viewport or check it out on your phone for an example.</p></div>
+    <div>.col-xs-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
   </div>
   <div class="col-xs-6 col-sm-3">
     <div>.col-xs-6 .col-sm-3</div>

src/app/theme/components/baWizard/baWizard.html

@@ -6,7 +6,7 @@
     </div>
 
     <div class="progress ba-wizard-progress">
-        <div class="progress-bar progress-bar-info active" role="progressbar"
+        <div class="progress-bar progress-bar-danger active" role="progressbar"
              aria-valuemin="0" aria-valuemax="100" ng-style="{width: $baWizardController.progress + '%'}">
         </div>
     </div>

src/app/theme/components/sidebar/sidebar.html

@@ -18,7 +18,7 @@
 
       <ul ng-if="item.subMenu" class="al-sidebar-sublist"
           ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
-        <li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
+        <li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': item.subMenu}">
           <a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
             <b class="fa" ng-class="{'fa-angle-up': subitem.selected, 'fa-angle-down': !subitem.selected}"

src/sass/app/_form.scss

@@ -366,11 +366,19 @@ label.custom-input-danger {
   font-size: 18px;
 }
 
+.bootstrap-select{
+  .btn-default{
+    &:focus{
+      color: $default-text;
+    }
+  }
+}
+
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
   background: transparent;
   color: $disabled;
   border-color: $disabled-bg;
-  @include placeholderStyle($disabled);
+  @include placeholderStyle($disabled, 1);
 }
 
 .form-control-rounded {

src/sass/app/_grid.scss

@@ -5,7 +5,7 @@
     color: $default-text;
     text-align: center;
     font-size: 18px;
-    background-color: $border-light;;
+    background-color: $border-light;
     padding: 12px 5px;
   }
 }
@@ -17,3 +17,13 @@
     margin-top: 0;
   }
 }
+
+body.badmin-transparent {
+  .show-grid div[class^=col-]{
+    div {
+      color: $default;
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+

src/sass/app/_modals.scss

@@ -45,6 +45,10 @@
   }
 }
 
+.modal-content .modal-header .modal-title{
+  color: $default-text;
+}
+
 .message-modal {
   .modal-header {
     text-align: center;

src/sass/app/maps/_leaflet.scss

@@ -430,6 +430,7 @@
 .leaflet-popup-content {
   margin: 13px 19px;
   line-height: 1.4;
+  color: $default-text;
 }
 
 .leaflet-popup-content p {

src/sass/theme/components/_baWizard.scss

@@ -24,8 +24,9 @@
     text-align: center;
     font-weight: $font-light;
     font-size: 18px;
+    opacity: 0.7;
     &.active {
-      color: $primary-dark;
+      opacity: 0.95;
     }
   }
 }

src/sass/theme/components/_sidebar.scss

@@ -109,7 +109,7 @@ a.al-sidebar-list-link {
   &.expanded {
     display: block;
   }
-  li {
+  > li {
     display: block;
     float: none;
     padding: 0;
@@ -128,7 +128,7 @@ a.al-sidebar-list-link {
         color: $success;
       }
     }
-    &.selected {
+    > &.selected:not(.with-sub-menu)  {
       a {
         border: none;
         background-color: $success;

src/sass/theme/conf/_mixins.scss

@@ -60,20 +60,24 @@
   background: rgba(0, 0, 0, $opacity);
 }
 
-@mixin placeholderStyle($color) {
+@mixin placeholderStyle($color, $opacity) {
   &::-webkit-input-placeholder {
     color: $color;
+    opacity: $opacity;
   }
   &:-moz-placeholder {
     /* Firefox 18- */
     color: $color;
+    opacity: $opacity;
   }
   &::-moz-placeholder {
     /* Firefox 19+ */
     color: $color;
+    opacity: $opacity;
   }
   &:-ms-input-placeholder {
     color: $color;
+    opacity: $opacity;
   }
 }
 
@@ -93,7 +97,8 @@
   .panel-title>small,
   .panel-title>small>a,
   .traffic-text span,
-  .form-group label {
+  .form-group label,
+  .help-block{
     color: $color;
   }
   .traffic-text {

src/sass/theme/conf/_variables.scss

@@ -7,27 +7,16 @@ $warning: #b9f2a1 !default;
 $danger: #ffa76d !default;
 $default: #ffffff !default;
 
-$primary-dark: shade($primary, 66%);
-$success-dark: shade($success, 66%);
-$warning-dark: shade($warning, 66%);
-$danger-dark: shade($danger, 66%);
+$primary-dark: #003e4b;
+$danger-dark: #c37350;
+$success-dark: #18524b;
+$warning-dark: #8adc68;
 
-$primary-bg: tint($primary, 70%);
-$info-bg: tint($info, 70%);
-$success-bg: tint($success, 70%);
-$warning-bg: tint($warning, 70%);
-$danger-bg: tint($danger, 70%);
-
-$primaryDark: #003e4b;
-$dangerDark: #c37350;
-$successDark: #18524b;
-$warningDark: #8adc68;
-
-$primaryBg: #0d8da2;
-$successBg: #02b6a2;
-$dangerBg: #ffcd92;
-$infoBg: #a8e6b3;
-$warningBg: #e4fbd3;
+$primary-bg: #0d8da2;
+$success-bg: #02b6a2;
+$danger-bg: #ffcd92;
+$info-bg: #a8e6b3;
+$warning-bg: #e4fbd3;
 
 $primary-light: #5FBCBB;
 $success-light: #85BA54;

src/sass/theme/dashboard/_todo.scss

@@ -137,10 +137,6 @@ body.badmin-transparent {
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
     }
-    &::-webkit-input-placeholder {
-      color: white;
-      opacity: 0.6;
-    }
   }
   .add-item-icon {
     display: block;

src/sass/theme/skins/_02_transparent.scss

@@ -15,4 +15,12 @@ body.badmin-transparent {
   .btn-default{
     color: $default;
   }
+  .form-control, .bootstrap-tagsinput input {
+    @include placeholderStyle($default, 0.8);
+    background-color: transparent;
+    color: $default;
+  }
+  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    @include placeholderStyle($default, 0.6);
+  }
 }