From 694a02c6cd1614f8b1e2468d470be472cd5ca08f Mon Sep 17 00:00:00 2001
From: crusader <crusader@atgame.net>
Date: Tue, 18 Sep 2018 22:11:01 +0900
Subject: [PATCH] ing

---
 .../ui/component/menu/menu-bar.component.html |   6 +-
 .../ui/component/menu/menu-bar.component.scss | 303 ++++++
 .../ui/component/menu/menu-bar.component.ts   |  44 +
 src/app/app.component.ts                      |   3 +-
 src/assets/scss/themes/light/theme.scss       | 949 ++++++++++--------
 5 files changed, 857 insertions(+), 448 deletions(-)
 create mode 100644 @overflow/commons/ui/component/menu/menu-bar.component.scss

diff --git a/@overflow/commons/ui/component/menu/menu-bar.component.html b/@overflow/commons/ui/component/menu/menu-bar.component.html
index fe9e945..6ae6f33 100644
--- a/@overflow/commons/ui/component/menu/menu-bar.component.html
+++ b/@overflow/commons/ui/component/menu/menu-bar.component.html
@@ -1,5 +1,5 @@
 <div id="app-menu-bar" role="menubar" aria-label="Application menu">
-  <div class="toolbar-dropdown closed" role="menuitem" aria-expanded="false">
+  <!-- <div class="toolbar-dropdown closed" role="menuitem" aria-expanded="false">
     <div class="toolbar-button">
       <button class="button-component" type="button" tabindex="-1">
         <div class="menu-item">
@@ -54,5 +54,7 @@
         </div>
       </button>
     </div>
-  </div>
+  </div> -->
+  <p-menubar [model]="items" [autoDisplay]="false">
+  </p-menubar>
 </div>
\ No newline at end of file
diff --git a/@overflow/commons/ui/component/menu/menu-bar.component.scss b/@overflow/commons/ui/component/menu/menu-bar.component.scss
new file mode 100644
index 0000000..a18bcb1
--- /dev/null
+++ b/@overflow/commons/ui/component/menu/menu-bar.component.scss
@@ -0,0 +1,303 @@
+// /deep/ .ui-menubar {
+//   height: var(--darwin-title-bar-height);
+//   color: var(--app-menu-button-color);
+//   background: transparent;
+//   padding: 0px;
+//   border: 0em;
+// }
+// /deep/ .ui-menu .ui-menuitem {
+//   padding-top: 2px;
+//     float: right;
+// }
+// // /deep/ .ui-menubar > .ui-menuitem {
+// //   width: 100%;
+// //   height: 100%;
+// // }
+// /deep/ p-menubarsub {
+//   margin: 0px;
+//   width: 100%;
+//   li.ui-menuitem{
+//     height: 22px !important;
+//   }
+// }
+// /deep/ .ui-menubar .ui-menubar-root-list>.ui-menuitem>.ui-menuitem-link {
+//   width: 100%;
+//   height: 100%;
+//   padding: 0em;
+//   color: var(--app-menu-button-color);
+// }
+// /deep/ .ui-menuitem .ui-menuitem-link {
+//   color: #222222;
+// }
+// /deep/ .ui-menuitem {
+//   min-width: 0;
+//   min-height: 0;
+//   position: relative;
+// }
+// /deep/ .ui-menubar .ui-menubar-root-list>.ui-menuitem {
+//     position: relative;
+//     display: inline-block;
+//     flex-direction: row;
+//     align-items: center;
+//     // padding-right: 10px;
+//     // padding: var(--spacing);
+//     // margin: 0em;
+//     // overflow: hidden;
+//     background-color: var(--toolbar-button-background-color);
+//     color: var(--toolbar-button-color);
+// }
+// /deep/ .ui-widget {
+//   font: 14px Arial;
+// }
+// // .ui-corner-all {
+// //     border-radius: 3px;
+// // }
+// // .ui-widget, .ui-widget * {
+// //     box-sizing: border-box;
+// // }
+// // #app-menu-bar .toolbar-dropdown:not(.open) > .toolbar-button > button {
+// //     color: var(--app-menu-button-color);
+// //     background: transparent;
+// // }
+// // #app-menu-bar .toolbar-button > button {
+// //     padding: 0 var(--spacing);
+// //     border: 0;
+// // }
+// // .toolbar-button > button {
+// //     position: relative;
+// //     display: flex;
+// //     flex-direction: row;
+// //     align-items: center;
+// //     padding: var(--spacing);
+// //     margin: 0;
+// //     overflow: hidden;
+// //     background-color: var(--toolbar-button-background-color);
+// //     color: var(--toolbar-button-color);
+// //     border-right: 1px solid var(--toolbar-button-border-color);
+// // }
+// // .toolbar-button > button {
+// //     -webkit-appearance: none;
+// //     border: none;
+// //     box-shadow: none;
+// //     background: transparent;
+// //     border-radius: 0;
+// //     text-align: left;
+// //     margin: 0;
+// //     padding: 0;
+// //     height: 100%;
+// //     width: 100%;
+// // }
+/deep/ body {
+  font-family: var(--font-family-sans-serif);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+/deep/ body .ui-corner-all {
+  border-radius: 0px;
+}
+
+/deep/ body .ui-widget {
+  font-family: var(--font-family-sans-serif);
+  font-size: 1.1em;
+  line-height: 1.5;
+}
+
+/deep/ body .ui-widget-content {
+  border: 0;
+}
+
+/deep/ body .ui-splitbutton.ui-buttonset .ui-menu {
+  min-width: 100%;
+}
+
+/deep/ body .ui-menubar .ui-menuitem {
+  margin: 0;
+}
+
+/deep/ body .ui-menu .ui-menuitem-link,
+/deep/ body .ui-menubar .ui-menuitem-link,
+/deep/ body .ui-tieredmenu .ui-menuitem-link,
+/deep/ body .ui-contextmenu .ui-menuitem-link,
+/deep/ body .ui-megamenu .ui-menuitem-link,
+/deep/ body .ui-slidemenu .ui-menuitem-link {
+  padding: 0.714em 0.857em;
+  color: #333333;
+  font-weight: normal;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+}
+
+/deep/ body .ui-menu .ui-menuitem-link .ui-menuitem-text,
+/deep/ body .ui-menubar .ui-menuitem-link .ui-menuitem-text,
+/deep/ body .ui-tieredmenu .ui-menuitem-link .ui-menuitem-text,
+/deep/ body .ui-contextmenu .ui-menuitem-link .ui-menuitem-text,
+/deep/ body .ui-megamenu .ui-menuitem-link .ui-menuitem-text,
+/deep/ body .ui-slidemenu .ui-menuitem-link .ui-menuitem-text {
+  // color: #333333;
+  color: var(--app-menu-button-color);
+}
+
+/deep/ body .ui-menu .ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-menubar .ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-tieredmenu .ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-contextmenu .ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-megamenu .ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-slidemenu .ui-menuitem-link .ui-menuitem-icon {
+  color: #333333;
+  margin-right: 0.5em;
+}
+
+/deep/ body .ui-menu .ui-menuitem-link:hover,
+/deep/ body .ui-menubar .ui-menuitem-link:hover,
+/deep/ body .ui-tieredmenu .ui-menuitem-link:hover,
+/deep/ body .ui-contextmenu .ui-menuitem-link:hover,
+/deep/ body .ui-megamenu .ui-menuitem-link:hover,
+/deep/ body .ui-slidemenu .ui-menuitem-link:hover {
+  background-color: #eaeaea;
+}
+
+/deep/ body .ui-menu .ui-menuitem>.ui-menuitem-link:hover,
+/deep/ body .ui-menubar .ui-menuitem>.ui-menuitem-link:hover,
+/deep/ body .ui-tieredmenu .ui-menuitem>.ui-menuitem-link:hover,
+/deep/ body .ui-slidemenu .ui-menuitem>.ui-menuitem-link:hover,
+/deep/ body .ui-contextmenu .ui-menuitem>.ui-menuitem-link:hover,
+/deep/ body .ui-megamenu .ui-menuitem>.ui-menuitem-link:hover {
+  background: var(--app-menu-button-hover-background-color);
+}
+
+/deep/ body .ui-menu .ui-menuitem-link:hover .ui-menuitem-text,
+/deep/ body .ui-menubar .ui-menuitem-link:hover .ui-menuitem-text,
+/deep/ body .ui-tieredmenu .ui-menuitem-link:hover .ui-menuitem-text,
+/deep/ body .ui-contextmenu .ui-menuitem-link:hover .ui-menuitem-text,
+/deep/ body .ui-megamenu .ui-menuitem-link:hover .ui-menuitem-text,
+/deep/ body .ui-slidemenu .ui-menuitem-link:hover .ui-menuitem-text {
+  color: var(--app-menu-button-hover-color);
+}
+
+/deep/ body .ui-menu .ui-menuitem-link:hover .ui-menuitem-icon,
+/deep/ body .ui-menubar .ui-menuitem-link:hover .ui-menuitem-icon,
+/deep/ body .ui-tieredmenu .ui-menuitem-link:hover .ui-menuitem-icon,
+/deep/ body .ui-contextmenu .ui-menuitem-link:hover .ui-menuitem-icon,
+/deep/ body .ui-megamenu .ui-menuitem-link:hover .ui-menuitem-icon,
+/deep/ body .ui-slidemenu .ui-menuitem-link:hover .ui-menuitem-icon {
+  color: #333333;
+}
+
+/deep/ body .ui-menubar .ui-menuitem.ui-menuitem-active>.ui-menuitem-link {
+  // background-color: #eaeaea;
+  background-color: var(--app-menu-button-active-background-color);
+}
+
+/deep/ body .ui-menubar .ui-menuitem.ui-menuitem-active>.ui-menuitem-link .ui-menuitem-text {
+  color: var(--app-menu-button-active-color);
+}
+
+/deep/ body .ui-menubar .ui-menuitem.ui-menuitem-active>.ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-menubar .ui-menuitem.ui-menuitem-active>.ui-menuitem-link .ui-submenu-icon {
+  color: #333333;
+}
+
+/deep/ body .ui-menu {
+  padding: 0;
+  background-color: #ffffff;
+  border: 1px solid #c8c8c8;
+}
+
+/deep/ body .ui-menu .ui-menuitem {
+  margin: 0;
+}
+
+/deep/ body .ui-menu.ui-shadow {
+  border: 1px solid #c8c8c8;
+  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+/deep/ body .ui-menu .ui-submenu-header {
+  margin: 0;
+  padding: 0.714em 0.857em;
+  color: #ffffff;
+  background-color: #333333;
+  font-weight: 400;
+  border: 0 none;
+}
+
+/deep/ body .ui-menu .ui-menu-separator {
+  border: 1px solid #c8c8c8;
+  border-width: 1px 0 0 0;
+}
+
+/deep/ body .ui-menubar {
+  padding: 0; // background-color: #ffffff;
+  // border: 1px solid #c8c8c8;
+  background: linear-gradient(to bottom, #3b3f46 0%, #2b2e33 100%); // border-bottom: 1px solid #000;
+}
+
+/deep/ body .ui-menubar .ui-menubar-root-list>.ui-menuitem>.ui-menuitem-link {
+  padding: 0.01em 0.857em;
+}
+
+/deep/ body .ui-menubar .ui-submenu-list {
+  padding: 0; // background-color: #ffffff;
+  // border: 1px solid #c8c8c8;
+  // -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  // -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  // box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  color: #1b1d1f;
+  background: var(--app-menu-pane-background-color); // /* Old browsers */
+  // background: -moz-linear-gradient(top, var(--app-menu-pane-background-color) 0%, #ebedf0 100%);
+  // /* FF3.6+ */
+  // background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--app-menu-pane-background-color)), color-stop(100%, #ebedf0));
+  // /* Chrome,Safari4+ */
+  // background: -webkit-linear-gradient(top, var(--app-menu-pane-background-color) 0%, #ebedf0 100%);
+  // /* Chrome10+,Safari5.1+ */
+  // background: -o-linear-gradient(top, var(--app-menu-pane-background-color) 0%, #ebedf0 100%);
+  // /* Opera11.10+ */
+  // background: -ms-linear-gradient(top, var(--app-menu-pane-background-color) 0%, #ebedf0 100%);
+  // /* IE10+ */
+  // background: linear-gradient(to bottom, var(--app-menu-pane-background-color) 0%, #ebedf0 100%);
+  // /* W3C */
+}
+
+/deep/ body .ui-menubar .ui-submenu-list .ui-menuitem {
+  margin: 0;
+}
+
+/deep/ body .ui-menubar .ui-submenu-list .ui-menu-separator {
+  border: 1px solid var(--app-menu-divider-color);
+  border-width: 1px 0 0 0;
+}
+
+/deep/ body .ui-menubar .ui-submenu-list .ui-menuitem-text {
+  // color: #333333;
+  color: var(---app-menu-pane-color);
+}
+
+/deep/ body .ui-menubar .ui-menuitem .ui-submenu-list .ui-menuitem-active>.ui-menuitem-link {
+  // background-color: #eaeaea;
+  background-color: var(--link-button-hover-color);
+}
+
+/deep/ body .ui-menubar .ui-menuitem .ui-submenu-list .ui-menuitem-active>.ui-menuitem-link .ui-menuitem-text {
+  color: var(--button-text-color);
+}
+
+/deep/ body .ui-menubar .ui-menuitem .ui-submenu-list .ui-menuitem-active>.ui-menuitem-link .ui-menuitem-icon,
+/deep/ body .ui-menubar .ui-menuitem .ui-submenu-list .ui-menuitem-active>.ui-menuitem-link .ui-submenu-icon {
+  color: #333333;
+}
+
+// /deep/ body .ui-menubar .ui-menuitem .ui-submenu-list .ui-menuitem:hover {
+//   background: #3b3f46;
+// }
+// /deep/ body .ui-menubar .ui-submenu-list:hover .ui-menuitem-text {
+//   color: var(--app-menu-pane-secondary-color);
+// }
+// /deep/ body .ui-menubar .ui-submenu-list:hover .ui-menuitem-icon {
+//   color: #333333;
+// }
\ No newline at end of file
diff --git a/@overflow/commons/ui/component/menu/menu-bar.component.ts b/@overflow/commons/ui/component/menu/menu-bar.component.ts
index e01760b..f7ff8c1 100644
--- a/@overflow/commons/ui/component/menu/menu-bar.component.ts
+++ b/@overflow/commons/ui/component/menu/menu-bar.component.ts
@@ -4,6 +4,7 @@ import { MenuItem } from 'primeng/primeng';
 @Component({
   selector: 'app-menu-bar',
   templateUrl: './menu-bar.component.html',
+  styleUrls: ['./menu-bar.component.scss'],
 })
 export class MenuBarComponent implements OnInit {
 
@@ -13,6 +14,49 @@ export class MenuBarComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.items = [
+      {
+        label: 'File',
+        items: [
+          { label: 'New' },
+          { label: 'Open' },
+          { separator: true },
+          { label: 'Quit' }
+        ]
+      },
+      {
+        label: 'Edit',
+        items: [
+          { label: 'Delete' },
+          { label: 'Refresh' }
+        ]
+      },
+      {
+        label: 'Help',
+        items: [
+          {
+            label: 'Contents'
+          },
+          {
+            label: 'Search',
+          }
+        ]
+      },
+      {
+        label: 'Actions',
+        items: [
+          {
+            label: 'Edit',
+          },
+          {
+            label: 'Other',
+          }
+        ]
+      },
+      {
+        label: 'Quit',
+      }
+    ];
   }
 
   onTitlebarDoubleClick() {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3ace270..e66a0c5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -15,7 +15,8 @@ export class AppComponent implements OnInit {
     private electronProxyService: ElectronProxyService,
     private probeService: ProbeService,
   ) {
-    this.showTitleBar = !__LINUX__;
+    // this.showTitleBar = !__LINUX__;
+    this.showTitleBar = true;
   }
 
   ngOnInit(): void {
diff --git a/src/assets/scss/themes/light/theme.scss b/src/assets/scss/themes/light/theme.scss
index f1fe393..41e366c 100644
--- a/src/assets/scss/themes/light/theme.scss
+++ b/src/assets/scss/themes/light/theme.scss
@@ -1,8 +1,11 @@
-$fontFamily:  "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
+$fontFamily: "Roboto",
+"Trebuchet MS",
+Arial,
+Helvetica,
+sans-serif;
 $fontSize: 1em;
 $borderRadius: 3px;
 $disabledOpacity: 0.35;
-
 //Header
 $headerBorderWidth: 1px;
 $headerBorderColor: #d9d9d9; //d9d9d9
@@ -10,654 +13,710 @@ $headerBgColor: #f6f7f9;
 $headerTextColor: #1b1d1f;
 $headerFontWeight: normal;
 $headerIconTextColor: #1b1d1f;
-
 //Content
 $contentBorderWidth: 1px;
 $contentBorderColor: #D5D5D5;
 $contentBgColor: #ffffff;
 $contentTextColor: #222222;
-
 //Default State
 $stateDefaultBorderWidth: 1px;
 $stateDefaultBorderColor: #d6d6d6;
 $stateDefaultBgColor: #ffffff;
 $stateDefaultTextColor: #555555;
-
 //Active State
 $stateActiveBorderColor: #bebebe;
 $stateActiveBgColor: #d6d6d6;
 $stateActiveTextColor: #212121;
-
 //Highlight State
 $stateHighlightBorderColor: #156090; //156090
 $stateHighlightBgColor: #186ba0; //186ba0
-$stateHighlightTextColor: #FFFFFF;//FFFFFF
-
+$stateHighlightTextColor: #FFFFFF; //FFFFFF
 //Focus State
 $stateFocusBorderColor: #c0c0c0;
 $stateFocusBgColor: #eeeeee;
 $stateFocusTextColor: #212121;
-
 //Error State
 $stateErrorBorderColor: #f44336;
 $stateErrorBgColor: #f5554a;
 $stateErrorTextColor: #cd0a0a;
-
 //Hover State
 $stateHoverBorderColor: #c0c0c0;
 $stateHoverBgColor: #eeeeee;
 $stateHoverTextColor: #212121;
-
 //Forms
 $inputBgColor: #ffffff;
 $inputTextColor: #222222;
 $invalidInputBorderColor: #f44336;
 $inputGroupTextColor: #222222;
-
 @import '../_theme';
-
 /* roboto-regular - latin */
+
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Roboto'), local('Roboto-Regular'),
-       url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+  src: url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.eot');
+  /* IE9 Compat Modes */
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('assets/scss/themes/light/fonts/roboto-v15-latin-regular.svg#Roboto') format('svg');
+  /* Legacy iOS */
 }
 
 .ui-widget-header {
-	background: #f6f7f9 0 0 repeat-x;  /* Old browsers */
-	background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* Opera11.10+ */
-	background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* IE10+ */
-	background: linear-gradient(to bottom, #f6f7f9 0%,#ebedf0 100%); /* W3C */
+  background: #f6f7f9 0 0 repeat-x;
+  /* Old browsers */
+  background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f7f9), color-stop(100%, #ebedf0));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* IE10+ */
+  background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);
+  /* W3C */
 }
 
 .ui-accordion {
-    .ui-accordion-header {
-        background: $headerBgColor;
-    	border-top: 1px solid $headerBorderColor;
-
-        a {
-            color: $headerTextColor;
-        }
-
-        &:not(.ui-state-active):not(.ui-state-disabled):hover {
-            background: #ededf0;
-        }
-
-        &.ui-state-active {
-            background: #ffffff;
-            border-left-color: transparent;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            -webkit-border-radius: 0;
-            -moz-border-radius: 0;
-            border-radius: 0;
-        }
+  .ui-accordion-header {
+    background: $headerBgColor;
+    border-top: 1px solid $headerBorderColor;
+    a {
+      color: $headerTextColor;
     }
-
-     .ui-accordion-content {
-         border: 0 none;
-     }
+    &:not(.ui-state-active):not(.ui-state-disabled):hover {
+      background: #ededf0;
+    }
+    &.ui-state-active {
+      background: #ffffff;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+      border-radius: 0;
+    }
+  }
+  .ui-accordion-content {
+    border: 0 none;
+  }
 }
 
 /* Tabview */
+
 .ui-tabview {
-    &.ui-widget-content {
-        border: 0 none;
-    }
-
-    .ui-tabview-nav {
-        background: transparent;
-
-        > li {
-            &.ui-state-default {
-               background: #f6f7f9;
-            }
-
-            &.ui-state-active {
-                background: #ffffff;
-                font-weight: normal;
-                color: #555555;
-            }
-
-            &:not(.ui-state-active):not(.ui-state-disabled):hover {
-                background: #ededf0;
-            }
-         }
+  &.ui-widget-content {
+    border: 0 none;
+  }
+  .ui-tabview-nav {
+    background: transparent;
+    >li {
+      &.ui-state-default {
+        background: #f6f7f9;
+      }
+      &.ui-state-active {
+        background: #ffffff;
+        font-weight: normal;
+        color: #555555;
+      }
+      &:not(.ui-state-active):not(.ui-state-disabled):hover {
+        background: #ededf0;
+      }
     }
+  }
 }
 
 /* Spinner */
+
 .ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:hover {
-    border: 1px solid #1f89ce;
-    background: #1f89ce;
-    outline: 0 none;
-    color: #ffffff;
+  border: 1px solid #1f89ce;
+  background: #1f89ce;
+  outline: 0 none;
+  color: #ffffff;
 }
 
 .ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:active {
-    border: 1px solid $stateHighlightBorderColor;
-    background: $stateHighlightBgColor;
-    color: $stateHighlightTextColor;
+  border: 1px solid $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
 }
 
-.ui-slider { position: relative; text-align: left; background: #838688; border: none; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;}
-.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 17px !important; height: 21px  !important; cursor: default; background: url("assets/scss/themes/light/images/slider_handles.png") 0 0 no-repeat; outline: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; }
-.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background: #14a4ff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
-.ui-slider .ui-slider-handle.ui-state-active { background-position: -17px 0; }
+.ui-slider {
+  position: relative;
+  text-align: left;
+  background: #838688;
+  border: none;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+}
 
-.ui-slider-horizontal { height: 6px; }
-.ui-slider-horizontal .ui-slider-handle { top: -2px !important; margin-left: -.6em; }
-.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-horizontal .ui-slider-range-min { left: 0; }
-.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+.ui-slider .ui-slider-handle {
+  position: absolute;
+  z-index: 2;
+  width: 17px !important;
+  height: 21px !important;
+  cursor: default;
+  background: url("assets/scss/themes/light/images/slider_handles.png") 0 0 no-repeat;
+  outline: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  border: none;
+}
 
-.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.1em !important; margin-left: 0; margin-bottom: -.6em; }
-.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
-.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
-.ui-slider-vertical .ui-slider-range-max { top: 0; }
+.ui-slider .ui-slider-range {
+  position: absolute;
+  z-index: 1;
+  font-size: .7em;
+  display: block;
+  border: 0;
+  background: #14a4ff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+.ui-slider .ui-slider-handle.ui-state-active {
+  background-position: -17px 0;
+}
+
+.ui-slider-horizontal {
+  height: 6px;
+}
+
+.ui-slider-horizontal .ui-slider-handle {
+  top: -2px !important;
+  margin-left: -.6em;
+}
+
+.ui-slider-horizontal .ui-slider-range {
+  top: 0;
+  height: 100%;
+}
+
+.ui-slider-horizontal .ui-slider-range-min {
+  left: 0;
+}
+
+.ui-slider-horizontal .ui-slider-range-max {
+  right: 0;
+}
+
+.ui-slider-vertical {
+  width: .8em;
+  height: 100px;
+}
+
+.ui-slider-vertical .ui-slider-handle {
+  left: -.1em !important;
+  margin-left: 0;
+  margin-bottom: -.6em;
+}
+
+.ui-slider-vertical .ui-slider-range {
+  left: 0;
+  width: 100%;
+}
+
+.ui-slider-vertical .ui-slider-range-min {
+  bottom: 0;
+}
+
+.ui-slider-vertical .ui-slider-range-max {
+  top: 0;
+}
 
 .ui-progressbar {
-    &.ui-progressbar-determinate {
-        .ui-progressbar-value {
-        	 border: 0 none;
-             background: #8ec5fc;
-        }
-
-        .ui-progressbar .ui-progressbar-label {
-        	color: #222222;
-        }
+  &.ui-progressbar-determinate {
+    .ui-progressbar-value {
+      border: 0 none;
+      background: #8ec5fc;
     }
-
-    &.ui-progressbar-indeterminate {
-        background: #8ec5fc;
-
-        .ui-progressbar-value {
-        	 border: 0 none;
-             background-color: $stateHighlightBgColor;
-        }
+    .ui-progressbar .ui-progressbar-label {
+      color: #222222;
     }
+  }
+  &.ui-progressbar-indeterminate {
+    background: #8ec5fc;
+    .ui-progressbar-value {
+      border: 0 none;
+      background-color: $stateHighlightBgColor;
+    }
+  }
 }
 
-
-
 .ui-widget-header .ui-button,
 .ui-widget-content .ui-button,
 .ui-widget.ui-button,
 .ui-button {
-	border: 1px solid #2399e5;
-	color: #FFFFFF;
-	background: #2399e5;
-    -webkit-transition: background-color .2s;
-    -moz-transition: background-color .2s;
-    transition: background-color .2s;
-
-    &:enabled:hover,
-    &:focus {
-        border: 1px solid #1f89ce;
-    	background: #1f89ce;
-    	outline: 0 none;
-        color: #ffffff;
-    }
-
-    &:enabled:active {
-        border: 1px solid $stateHighlightBorderColor;
-    	background: $stateHighlightBgColor;
-        color: $stateHighlightTextColor;
-    }
+  border: 1px solid #2399e5;
+  color: #FFFFFF;
+  background: #2399e5;
+  -webkit-transition: background-color .2s;
+  -moz-transition: background-color .2s;
+  transition: background-color .2s;
+  &:enabled:hover,
+  &:focus {
+    border: 1px solid #1f89ce;
+    background: #1f89ce;
+    outline: 0 none;
+    color: #ffffff;
+  }
+  &:enabled:active {
+    border: 1px solid $stateHighlightBorderColor;
+    background: $stateHighlightBgColor;
+    color: $stateHighlightTextColor;
+  }
 }
 
 .ui-widget-header .ui-button-secondary,
 .ui-widget-content .ui-button-secondary,
 .ui-widget.ui-button-secondary,
 .ui-button-secondary {
-	border: 1px solid #e9e9e9;
-	color: #535353;
-	background: #eeeeee;
-    -webkit-transition: background-color .2s;
-    -moz-transition: background-color .2s;
-    transition: background-color .2s;
-
-    &:enabled:hover,
-    &:focus {
-        border: 1px solid #e0e0e0;
-    	background: #dfdfdf;
-    	outline: 0 none;
-        color: #797979;
-    }
-
-    &:enabled:active {
-        border: 1px solid #dadada;
-    	background: #dbdbdb;
-        color: #535353;
-    }
+  border: 1px solid #e9e9e9;
+  color: #535353;
+  background: #eeeeee;
+  -webkit-transition: background-color .2s;
+  -moz-transition: background-color .2s;
+  transition: background-color .2s;
+  &:enabled:hover,
+  &:focus {
+    border: 1px solid #e0e0e0;
+    background: #dfdfdf;
+    outline: 0 none;
+    color: #797979;
+  }
+  &:enabled:active {
+    border: 1px solid #dadada;
+    background: #dbdbdb;
+    color: #535353;
+  }
 }
 
 .ui-fileupload-choose:not(.ui-state-disabled):hover,
 .ui-fileupload-choose.ui-state-focus {
-    border: 1px solid #1f89ce;
-    background: #1f89ce;
-    outline: 0 none;
-    color: #ffffff;
+  border: 1px solid #1f89ce;
+  background: #1f89ce;
+  outline: 0 none;
+  color: #ffffff;
 }
 
 .ui-fileupload-choose:not(.ui-state-disabled):active {
-    border: 1px solid $stateHighlightBorderColor;
-    background: $stateHighlightBgColor;
-    color: $stateHighlightTextColor;
+  border: 1px solid $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
 }
 
 /* Checkbox and Radio */
+
 .ui-chkbox-box.ui-state-active,
 .ui-radiobutton-box.ui-state-active {
-    border: 1px solid $stateHighlightBorderColor;
-    background: $stateHighlightBgColor;
-    color: $stateHighlightTextColor;
+  border: 1px solid $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
 }
 
 .ui-chkbox-box.ui-state-focus,
-.ui-radiobutton-box.ui-state-focus  {
-    -moz-box-shadow: 0px 0px 5px #1f89ce;
-	-webkit-box-shadow: 0px 0px 5px #1f89ce;
-	box-shadow: 0px 0px 5px #1f89ce;
+.ui-radiobutton-box.ui-state-focus {
+  -moz-box-shadow: 0px 0px 5px #1f89ce;
+  -webkit-box-shadow: 0px 0px 5px #1f89ce;
+  box-shadow: 0px 0px 5px #1f89ce;
 }
 
 .ui-chkbox-box.ui-state-focus.ui-state-active {
-    background: $stateHighlightBgColor;
+  background: $stateHighlightBgColor;
 }
 
 /* Inputs */
+
 .ui-inputtext {
-	background: #ffffff;
-	color: #222222;
-    -webkit-transition: .2s;
-    -moz-transition: .2s;
-    transition: .2s;
+  background: #ffffff;
+  color: #222222;
+  -webkit-transition: .2s;
+  -moz-transition: .2s;
+  transition: .2s;
 }
 
 .ui-inputtext.ui-state-focus,
 .ui-inputtext:focus {
-	-moz-box-shadow: 0px 0px 5px #1f89ce;
-	-webkit-box-shadow: 0px 0px 5px #1f89ce;
-	box-shadow: 0px 0px 5px #1f89ce;
+  -moz-box-shadow: 0px 0px 5px #1f89ce;
+  -webkit-box-shadow: 0px 0px 5px #1f89ce;
+  box-shadow: 0px 0px 5px #1f89ce;
 }
 
 /* InputSwitch */
+
 /* InputSwitch */
+
 .ui-inputswitch.ui-inputswitch-focus {
-    .ui-inputswitch-slider {
-        -moz-box-shadow: 0px 0px 5px #1f89ce;
-        -webkit-box-shadow: 0px 0px 5px #1f89ce;
-        box-shadow: 0px 0px 5px #1f89ce;
-    }
+  .ui-inputswitch-slider {
+    -moz-box-shadow: 0px 0px 5px #1f89ce;
+    -webkit-box-shadow: 0px 0px 5px #1f89ce;
+    box-shadow: 0px 0px 5px #1f89ce;
+  }
 }
 
 .ui-paginator .ui-paginator-page.ui-state-active {
-	background: $stateHighlightBgColor;
-	color: $stateHighlightTextColor;
-	border-color: $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
+  border-color: $stateHighlightBorderColor;
 }
 
 /* DataTable  */
+
 .ui-datatable {
-    th {
-        &.ui-state-default {
-            background: #ebedf0;
-            border-color: $headerBorderColor;
-        }
-
-        &.ui-sortable-column:not(.ui-state-active):hover {
-            background: #d3d5d8;
-            border-color: $headerBorderColor;
-        }
-
-        &.ui-state-active {
-            background: $stateHighlightBgColor;
-            color: #ffffff;
-        }
+  th {
+    &.ui-state-default {
+      background: #ebedf0;
+      border-color: $headerBorderColor;
     }
-
-    tbody {
-        > tr.ui-widget-content {
-            border-color: $headerBorderColor;
-
-            &.ui-datatable-odd {
-                background-color: #fafafb;
-            }
-
-            &.ui-state-highlight {
-                background-color: $stateHighlightBgColor;
-                color: $stateHighlightTextColor;
-            }
-        }
+    &.ui-sortable-column:not(.ui-state-active):hover {
+      background: #d3d5d8;
+      border-color: $headerBorderColor;
     }
-
-    tfoot {
-        td {
-            &.ui-state-default {
-                background: #ebedf0;
-                border-color: $headerBorderColor;
-            }
-        }
+    &.ui-state-active {
+      background: $stateHighlightBgColor;
+      color: #ffffff;
     }
-}
-
-/* TurboTable */
-.ui-table {
-    .ui-table-thead > tr > th,
-    .ui-table-tfoot > tr > td {
-        background-color: #ebedf0;
-        border-color: $headerBorderColor;
-    }
-
-    .ui-sortable-column:not(.ui-state-highlight):hover {
-        background-color: #d3d5d8;
-        border-color: $headerBorderColor;
-    }
-
-    .ui-table-tbody > tr:nth-child(even) {
+  }
+  tbody {
+    >tr.ui-widget-content {
+      border-color: $headerBorderColor;
+      &.ui-datatable-odd {
         background-color: #fafafb;
-
-        &.ui-state-highlight {
-            background-color: $stateHighlightBgColor;
-            color: $stateHighlightTextColor;
-        }
-
-        &.ui-contextmenu-selected {
-            background-color: lighten($stateHighlightBgColor, 20%);
-            color: $stateHighlightTextColor;
-        }
+      }
+      &.ui-state-highlight {
+        background-color: $stateHighlightBgColor;
+        color: $stateHighlightTextColor;
+      }
     }
+  }
+  tfoot {
+    td {
+      &.ui-state-default {
+        background: #ebedf0;
+        border-color: $headerBorderColor;
+      }
+    }
+  }
 }
 
 /* TurboTable */
-.ui-treetable {
-    .ui-treetable-thead > tr > th,
-    .ui-treetable-tfoot > tr > td {
-        background-color: #ebedf0;
-        border-color: $headerBorderColor;
-    }
 
-    .ui-sortable-column:not(.ui-state-highlight):hover {
-        background-color: #d3d5d8;
-        border-color: $headerBorderColor;
+.ui-table {
+  .ui-table-thead>tr>th,
+  .ui-table-tfoot>tr>td {
+    background-color: #ebedf0;
+    border-color: $headerBorderColor;
+  }
+  .ui-sortable-column:not(.ui-state-highlight):hover {
+    background-color: #d3d5d8;
+    border-color: $headerBorderColor;
+  }
+  .ui-table-tbody>tr:nth-child(even) {
+    background-color: #fafafb;
+    &.ui-state-highlight {
+      background-color: $stateHighlightBgColor;
+      color: $stateHighlightTextColor;
     }
+    &.ui-contextmenu-selected {
+      background-color: lighten($stateHighlightBgColor, 20%);
+      color: $stateHighlightTextColor;
+    }
+  }
+}
+
+/* TurboTable */
+
+.ui-treetable {
+  .ui-treetable-thead>tr>th,
+  .ui-treetable-tfoot>tr>td {
+    background-color: #ebedf0;
+    border-color: $headerBorderColor;
+  }
+  .ui-sortable-column:not(.ui-state-highlight):hover {
+    background-color: #d3d5d8;
+    border-color: $headerBorderColor;
+  }
 }
 
 /* Panel */
+
 .ui-panel.ui-widget {
-    padding: 0;
-
-    .ui-panel-titlebar.ui-corner-all {
-        -moz-border-radius-bottom-left: 0;
-        -webkit-border-bottom-left-radius: 0;
-        border-bottom-left-radius: 0;
-        -moz-border-radius-bottom-right: 0;
-        -webkit-border-bottom-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .ui-panel-titlebar {
-         border-width: 0 0 1px 0;
-    }
-
-    .ui-panel-titlebar-icon span {
-        position: relative;
-        top: 1px;
-    }
-
+  padding: 0;
+  .ui-panel-titlebar.ui-corner-all {
+    -moz-border-radius-bottom-left: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottom-right: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .ui-panel-titlebar {
+    border-width: 0 0 1px 0;
+  }
+  .ui-panel-titlebar-icon span {
+    position: relative;
+    top: 1px;
+  }
 }
 
 /* TreeTable */
+
 .ui-treetable {
-    th.ui-state-default {
-        background: #ebedf0;
-        border-color: $headerBorderColor;
-    }
+  th.ui-state-default {
+    background: #ebedf0;
+    border-color: $headerBorderColor;
+  }
 }
 
 /* ButtonSet */
+
 .ui-togglebutton.ui-button.ui-state-default,
 .ui-selectbutton .ui-button.ui-state-default {
-    border: 1px solid #d6d6d6;
-    background: #ffffff;
-    font-weight: normal;
-    color: #555555;
+  border: 1px solid #d6d6d6;
+  background: #ffffff;
+  font-weight: normal;
+  color: #555555;
 }
 
-.ui-togglebutton.ui-button.ui-state-hover,.ui-togglebutton.ui-button.ui-state-focus,
-.ui-selectbutton .ui-button.ui-state-hover,.ui-selectbutton .ui-button.ui-state-focus, .ui-selectbutton .ui-button:focus {
-   border: 1px solid #c0c0c0;
-   background: #eeeeee;
-   font-weight: normal;
-   color: #212121;
+.ui-togglebutton.ui-button.ui-state-hover,
+.ui-togglebutton.ui-button.ui-state-focus,
+.ui-selectbutton .ui-button.ui-state-hover,
+.ui-selectbutton .ui-button.ui-state-focus,
+.ui-selectbutton .ui-button:focus {
+  border: 1px solid #c0c0c0;
+  background: #eeeeee;
+  font-weight: normal;
+  color: #212121;
 }
 
 .ui-togglebutton.ui-button.ui-state-focus,
 .ui-selectbutton .ui-button.ui-state-focus.ui-state-active,
-.ui-selectbutton .ui-button.ui-state-active:focus  {
-    -moz-box-shadow: 0px 0px 5px #1f89ce;
-	-webkit-box-shadow: 0px 0px 5px #1f89ce;
-	box-shadow: 0px 0px 5px #1f89ce;
+.ui-selectbutton .ui-button.ui-state-active:focus {
+  -moz-box-shadow: 0px 0px 5px #1f89ce;
+  -webkit-box-shadow: 0px 0px 5px #1f89ce;
+  box-shadow: 0px 0px 5px #1f89ce;
 }
 
 .ui-togglebutton.ui-button.ui-state-active,
 .ui-selectbutton .ui-button.ui-state-active {
-   border: 1px solid $stateHighlightBorderColor;
-   background: $stateHighlightBgColor;
-   color: $stateHighlightTextColor;
+  border: 1px solid $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
 }
 
 .ui-multiselect {
-    .ui-multiselect-label {
-        background-color: #ffffff;
-    }
+  .ui-multiselect-label {
+    background-color: #ffffff;
+  }
 }
 
-.ui-dropdown.ui-state-focus, .ui-multiselect.ui-state-focus {
-    -moz-box-shadow: 0px 0px 5px #1f89ce;
-    -webkit-box-shadow: 0px 0px 5px #1f89ce;
-    box-shadow: 0px 0px 5px #1f89ce;
+.ui-dropdown.ui-state-focus,
+.ui-multiselect.ui-state-focus {
+  -moz-box-shadow: 0px 0px 5px #1f89ce;
+  -webkit-box-shadow: 0px 0px 5px #1f89ce;
+  box-shadow: 0px 0px 5px #1f89ce;
 }
 
 /* Growl */
+
 .ui-growl-item-container.ui-state-highlight {
-    &.ui-growl-message-info {
-        background-color: #2196f3;
-        border-color :#2196f3;
-    }
-
-    &.ui-growl-message-error {
-        background-color: #f44336;
-        border-color :#f44336;
-    }
-
-    &.ui-growl-message-warn {
-        background-color: #FFB300;
-        border-color :#FFB300;
-    }
-
-    &.ui-growl-message-success {
-        background-color: #4CAF50;
-        border-color :#4CAF50;
-    }
+  &.ui-growl-message-info {
+    background-color: #2196f3;
+    border-color: #2196f3;
+  }
+  &.ui-growl-message-error {
+    background-color: #f44336;
+    border-color: #f44336;
+  }
+  &.ui-growl-message-warn {
+    background-color: #FFB300;
+    border-color: #FFB300;
+  }
+  &.ui-growl-message-success {
+    background-color: #4CAF50;
+    border-color: #4CAF50;
+  }
 }
 
 /* TabMenu */
+
 .ui-tabmenu {
-    border: 0 none;
-
-    .ui-tabmenu-nav {
-        background: none;
-
-        > li {
-            &.ui-state-default {
-               background: #f6f7f9;
-            }
-
-            &.ui-state-active {
-                background: #ffffff;
-                font-weight: normal;
-                color: #555555;
-            }
-
-            &:not(.ui-state-active):not(.ui-state-disabled):hover {
-                background: #ededf0;
-            }
-         }
+  border: 0 none;
+  .ui-tabmenu-nav {
+    background: none;
+    >li {
+      &.ui-state-default {
+        background: #f6f7f9;
+      }
+      &.ui-state-active {
+        background: #ffffff;
+        font-weight: normal;
+        color: #555555;
+      }
+      &:not(.ui-state-active):not(.ui-state-disabled):hover {
+        background: #ededf0;
+      }
     }
+  }
 }
 
 /* Menus */
+
 .ui-menu,
-.ui-menubar, .ui-menubar .ui-submenu-list,
-.ui-tieredmenu, .ui-tieredmenu .ui-submenu-list,
-.ui-slidemenu, .ui-slidemenu .ui-submenu-list,
-.ui-contextmenu, .ui-contextmenu .ui-submenu-list,
+.ui-menubar,
+.ui-menubar .ui-submenu-list,
+.ui-tieredmenu,
+.ui-tieredmenu .ui-submenu-list,
+.ui-slidemenu,
+.ui-slidemenu .ui-submenu-list,
+.ui-contextmenu,
+.ui-contextmenu .ui-submenu-list,
 .ui-megamenu {
-    color: #1b1d1f;
-    background: #f6f7f9 0 0 repeat-x;  /* Old browsers */
-    background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%); /* IE10+ */
-    background: linear-gradient(to bottom, #f6f7f9 0%,#ebedf0 100%); /* W3C */
+  color: #1b1d1f;
+  background: #f6f7f9 0 0 repeat-x;
+  /* Old browsers */
+  background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f7f9), color-stop(100%, #ebedf0));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
+  /* IE10+ */
+  background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);
+  /* W3C */
 }
 
-.ui-menu .ui-menuitem > .ui-menuitem-link:hover,
-.ui-menubar .ui-menuitem > .ui-menuitem-link:hover,
-.ui-tieredmenu .ui-menuitem > .ui-menuitem-link:hover,
-.ui-slidemenu .ui-menuitem > .ui-menuitem-link:hover,
-.ui-contextmenu .ui-menuitem > .ui-menuitem-link:hover,
-.ui-megamenu .ui-menuitem > .ui-menuitem-link:hover {
-    background-color: #a6a6a6;
-    color: #ffffff;
+.ui-menu .ui-menuitem>.ui-menuitem-link:hover,
+.ui-menubar .ui-menuitem>.ui-menuitem-link:hover,
+.ui-tieredmenu .ui-menuitem>.ui-menuitem-link:hover,
+.ui-slidemenu .ui-menuitem>.ui-menuitem-link:hover,
+.ui-contextmenu .ui-menuitem>.ui-menuitem-link:hover,
+.ui-megamenu .ui-menuitem>.ui-menuitem-link:hover {
+  background-color: #a6a6a6;
+  color: #ffffff;
 }
 
-.ui-menu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
-.ui-menubar .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
-.ui-tieredmenu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
-.ui-slidemenu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
-.ui-contextmenu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
-.ui-megamenu .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
-    background-color: #a6a6a6;
-    color: #ffffff;
+.ui-menu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
+.ui-menubar .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
+.ui-tieredmenu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
+.ui-slidemenu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
+.ui-contextmenu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
+.ui-megamenu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link {
+  background-color: #a6a6a6;
+  color: #ffffff;
 }
 
 /* PanelMenu */
+
 .ui-panelmenu .ui-panelmenu-header.ui-state-active,
 .ui-panelmenu .ui-panelmenu-header.ui-state-active a {
-    border-color: $stateHighlightBorderColor;
-    background: $stateHighlightBgColor;
-    color: $stateHighlightTextColor;
+  border-color: $stateHighlightBorderColor;
+  background: $stateHighlightBgColor;
+  color: $stateHighlightTextColor;
 }
 
 /* DatePicker */
+
 .ui-datepicker.ui-widget {
-    padding: 0;
-
-    .ui-datepicker-header {
-        -webkit-border-radius: 0px;
-        -moz-border-radius: 0px;
-        border-radius: 0px;
-        border-top: 0 none;
-        border-left: 0 none;
-        border-right: 0 none;
-
-        a {
-            &:hover {
-                border-width: 1px;
-            }
-        }
+  padding: 0;
+  .ui-datepicker-header {
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    border-radius: 0px;
+    border-top: 0 none;
+    border-left: 0 none;
+    border-right: 0 none;
+    a {
+      &:hover {
+        border-width: 1px;
+      }
     }
-
-    .ui-datepicker-calendar {
-        margin: 0;
-
-        thead th {
-            background-color: #f6f8fa;
-        }
-
-        td {
-            border-bottom: 1px solid rgba(213, 213, 213, 0.5);
-
-            a {
-                &.ui-state-highlight {
-                    background-color: #d6d6d6;
-                    color: #212121;
-                }
-
-                &.ui-state-active {
-                    background-color: $stateHighlightBgColor;
-                    color: #ffffff;
-                }
-            }
-        }
-
-        tr:last-child td {
-            border-bottom: 0 none;
-        }
+  }
+  .ui-datepicker-calendar {
+    margin: 0;
+    thead th {
+      background-color: #f6f8fa;
     }
-
-    .ui-monthpicker {
-        a.ui-state-active {
-            background-color: $stateHighlightBgColor;
-            color: #ffffff;
+    td {
+      border-bottom: 1px solid rgba(213, 213, 213, 0.5);
+      a {
+        &.ui-state-highlight {
+          background-color: #d6d6d6;
+          color: #212121;
         }
+        &.ui-state-active {
+          background-color: $stateHighlightBgColor;
+          color: #ffffff;
+        }
+      }
     }
-
+    tr:last-child td {
+      border-bottom: 0 none;
+    }
+  }
+  .ui-monthpicker {
+    a.ui-state-active {
+      background-color: $stateHighlightBgColor;
+      color: #ffffff;
+    }
+  }
+  .ui-timepicker {
+    border-bottom: 0 none;
+    border-left: 0 none;
+    border-right: 0 none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+  }
+  &.ui-datepicker-timeonly {
     .ui-timepicker {
-        border-bottom: 0 none;
-        border-left: 0 none;
-        border-right: 0 none;
-        -moz-border-radius: 0;
-        -webkit-border-radius: 0;
-        border-radius: 0;
-    }
-
-    &.ui-datepicker-timeonly {
-        .ui-timepicker {
-            border-top: 0 none;
-        }
+      border-top: 0 none;
     }
+  }
 }
 
 /* Steps */
+
 .ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link {
-    color: #ffffff;
+  color: #ffffff;
 }
 
 /* Dialog */
+
 .ui-dialog.ui-widget .ui-dialog-titlebar {
-    padding: 1em 1.5em;
+  padding: 1em 1.5em;
 }
 
 .ui-dialog.ui-widget .ui-dialog-titlebar .ui-dialog-title {
-    font-size: 1.25em;
+  font-size: 1.25em;
 }
 
 .ui-dialog.ui-widget .ui-dialog-content {
-    padding: 1em 1.5em;
+  padding: 1em 1.5em;
 }
 
 /* Schedule */
+
 .fc {
-    .fc-button-group {
-        .ui-state-active {
-            border: 1px solid $stateHighlightBorderColor;
-            background: $stateHighlightBgColor;
-            color: $stateHighlightTextColor;
-        }
+  .fc-button-group {
+    .ui-state-active {
+      border: 1px solid $stateHighlightBorderColor;
+      background: $stateHighlightBgColor;
+      color: $stateHighlightTextColor;
     }
+  }
 }
\ No newline at end of file