Commit 8598213b authored by Juan Manuel Solaro's avatar Juan Manuel Solaro

(feat) styling for searchbar

1 merge request!459WIP: (feat): Minds Pro
Pipeline #73558093 failed with stages
in 34 minutes and 52 seconds
......@@ -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>
......
......@@ -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;
}
}
......@@ -130,4 +130,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
return this.session.getLoggedInUser();
}
search() {
return;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment