feat(scroll): styling scroll

feat(getmdl-select): stylization
fix(dropdown): profile info cuts dropdown #7

Author: franckevva

angular.json

@@ -23,7 +23,8 @@
               "src/theme/styles.scss"
             ],
             "scripts": [
-              "node_modules/material-design-lite/material.js"
+              "node_modules/material-design-lite/material.js",
+              "node_modules/getmdl-select/getmdl-select.min.js"
             ]
           },
           "configurations": {

src/app/pages/ui/forms/forms.component.html

@@ -70,7 +70,7 @@ <h5 class="mdl-card__title-text text-color--white">PROFILE INFO</h5>
           </div>
           <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select full-size">
             <input class="mdl-textfield__input" type="text" id="location" readonly tabIndex="-1"/>
-
+            <input type="hidden" value="" name="location">
             <label class="mdl-textfield__label" for="location">Location</label>
 
             <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="location">

src/app/pages/ui/forms/forms.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding } from '@angular/core';
+import { AfterViewInit, Component, HostBinding } from '@angular/core';
 
 import { UpgradableComponent } from 'theme/components/upgradable';
 
@@ -7,11 +7,16 @@ import { UpgradableComponent } from 'theme/components/upgradable';
   templateUrl: './forms.component.html',
   styleUrls: ['./forms.component.scss'],
 })
-export class FormsComponent extends UpgradableComponent {
+export class FormsComponent extends UpgradableComponent implements AfterViewInit {
   @HostBinding('class.mdl-grid') private readonly mdlGrid = true;
   @HostBinding('class.mdl-cell') private readonly mdlCell = true;
   @HostBinding('class.mdl-cell--12-col-desktop') private readonly mdlCell12ColDesktop = true;
   @HostBinding('class.mdl-cell--12-col-tablet') private readonly mdlCell12ColTablet = true;
   @HostBinding('class.mdl-cell--4-col-phone') private readonly mdlCell4ColPhone = true;
   @HostBinding('class.mdl-cell--top') private readonly mdlCellTop = true;
+
+  public ngAfterViewInit() {
+    getmdlSelect.init('.getmdl-select');
+    componentHandler.upgradeDom();
+  }
 }

src/theme/components/card/card.component.scss

@@ -7,6 +7,7 @@
 .mdl-card__supporting-text {
   line-height: 22px;
   width: calc(100% - #{$card-horizontal-padding*2});
+  overflow: visible;
 }
 
 .mdl-card__actions {
@@ -15,4 +16,5 @@
 
 .mdl-card {
   height: 100%;
+  overflow: visible;
 }

src/theme/scss/_variables.scss

@@ -275,3 +275,7 @@ $weather-shadow-4px: 4px 4px 4px $weather-shadow-color;
 
 /* row */
 $row-col-padding: 30px;
+
+/* scroll */
+$scrollbar-thumb: $color-smooth-gray;
+$scrollbar-track: $color-smoke;

src/theme/scss/getmdl-select.scss

@@ -0,0 +1,36 @@
+.getmdl-select {
+  width: 100%;
+
+  .mdl-textfield__input:focus {
+    outline: none;
+  }
+
+  .selected {
+    background-color: $default-dropdown-bg-color;
+  }
+
+  &.is-focused {
+    .mdl-icon-toggle__label {
+      color: $color-primary;
+    }
+  }
+
+  .mdl-menu__item {
+    color: $text-color-primary;
+  }
+
+  // custom scroll
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $scrollbar-thumb;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: $scrollbar-track;
+  }
+}

src/theme/scss/layout.scss

@@ -167,6 +167,21 @@ main {
   }
 }
 
+// custom scroll
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $scrollbar-thumb;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-track {
+  background: $scrollbar-track;
+}
+
 @media screen and (max-width: $layout-screen-size-threshold) {
   .mdl-layout--fixed-drawer {
     main {

src/theme/scss/textfield.scss

@@ -3,6 +3,19 @@
 
   .mdl-textfield__input {
     @include typo-textfield-input;
+
+    &:-webkit-autofill {
+      border-color: #6b6b6b !important;
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-box-shadow: 0 0 0 30px $background-color inset;
+      -webkit-text-fill-color: $color-white !important;
+      border-color: $color-primary;
+    }
   }
 
   &.full-size {

src/theme/styles.scss

@@ -2,6 +2,7 @@
 @import '~nvd3/build/nv.d3.css';
 @import '~material-design-lite/src/material-design-lite.scss';
 @import '~getmdl-select/src/scss/getmdl-select.scss';
+@import './scss/getmdl-select';
 @import './scss/layout';
 @import './scss/chip';
 @import './scss/badge';

src/typings.d.ts

@@ -3,3 +3,7 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+
+declare var getmdlSelect: {
+  init: any;
+};