(feat) styling for searchbar

src/app/modules/pro/channel/channel.component.html

@@ -8,7 +8,13 @@
  [src]="channel.pro_settings.logo_image"
  >
 
- <input type="search" placeholder="Search..." i18n>
+ <div class="m-proChannelTopbar__SearchBox">
+ <div class="mdl-textfield mdl-js-textfield">
+ <i class="material-icons">search</i>
+ <input autocomplete="off" class="mdl-textfield__input ng-pristine ng-valid ng-touched" type="text" (keyup)="search()">
+ <label class="mdl-textfield__label" for="search"></label>
+ </div>
+ </div>
 
  <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
  <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>

src/app/modules/pro/channel/channel.component.scss

@@ -33,6 +33,46 @@ m-pro--channel {
  & > * {
  padding-right: 16px;
  }
+
+ .m-proChannelTopbar__SearchBox {
+ margin: 0 16px;
+ 
+ @media screen and (max-width: 1081px) {
+ flex-grow: 1;
+ }
+
+ div.mdl-textfield.mdl-js-textfield {
+ width: 180px;
+ transition: width ease-in-out .2s;
+ padding: 8px 0;
+
+ i {
+ position: absolute;
+ margin: 6px;
+ font-size: 20px;
+ color: rgba(0,0,0,.87)!important;
+ }
+ 
+ input {
+ height: 32px;
+ border-radius: 18px;
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ letter-spacing: .5px;
+ font-weight: 600;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px 8px 8px 32px;
+ box-sizing: border-box;
+ }
+
+ label {
+ display: none;
+ }
+ }
+
+ 
+ }
  }
 
  a {
@@ -70,3 +110,11 @@ m-pro--channel {
  color: var(--text-color) !important;
  }
 }
+
+@media screen and (max-width: 480px) {
+
+ .m-proChannelTopbar__SearchBox {
+ display: none;
+ }
+
+}

src/app/modules/pro/channel/channel.component.ts

@@ -130,4 +130,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  return this.session.getLoggedInUser();
  }
+
+ search() {
+ return;
+ }
 }