mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
(E-Commerce) Matched search fields styles to the rest of the apps
(Contacts) Search field doesn't span to the full width of its container
This commit is contained in:
sercan
parent
06c8903f91
commit
eeed00b30e
|
|
@ -86,6 +86,8 @@ $typography: mat-typography-config(
|
|||
@import "src/app/main/apps/chat/chat.theme";
|
||||
@import "src/app/main/apps/contacts/contacts.theme";
|
||||
@import "src/app/main/apps/dashboards/project/project.theme";
|
||||
@import "src/app/main/apps/e-commerce/orders/orders.theme";
|
||||
@import "src/app/main/apps/e-commerce/products/products.theme";
|
||||
@import "src/app/main/apps/file-manager/file-manager.theme";
|
||||
@import "src/app/main/apps/mail/mail.theme";
|
||||
@import "src/app/main/apps/mail-ngrx/mail.theme";
|
||||
|
|
@ -134,6 +136,8 @@ $typography: mat-typography-config(
|
|||
@include chat-theme($theme);
|
||||
@include contacts-theme($theme);
|
||||
@include dashboards-project-theme($theme);
|
||||
@include e-commerce-orders-theme($theme);
|
||||
@include e-commerce-products-theme($theme);
|
||||
@include file-manager-theme($theme);
|
||||
@include mail-theme($theme);
|
||||
@include mail-ngrx-theme($theme);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<div class="search-wrapper mt-16 mt-sm-0">
|
||||
|
||||
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input [formControl]="searchInput" placeholder="Search for a contact">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
padding: 0 18px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
|
|
@ -39,4 +40,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-sm-0"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-input-wrapper ml-sm-32" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
<label for="search" class="mr-8">
|
||||
<mat-icon class="secondary-text s-18">search</mat-icon>
|
||||
</label>
|
||||
<input id="search" #filter placeholder="Search">
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
e-commerce-orders {
|
||||
|
||||
#orders {
|
||||
|
||||
|
|
@ -15,32 +15,33 @@
|
|||
|
||||
> .header {
|
||||
|
||||
.search-input-wrapper {
|
||||
.search-wrapper {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 21px;
|
||||
padding: 0 16px;
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(1);
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 18px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator, MatSort } from '@angular/material';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
|
|
@ -11,10 +11,11 @@ import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.s
|
|||
import { takeUntil } from 'rxjs/internal/operators';
|
||||
|
||||
@Component({
|
||||
selector : 'e-commerce-orders',
|
||||
templateUrl: './orders.component.html',
|
||||
styleUrls : ['./orders.component.scss'],
|
||||
animations : fuseAnimations
|
||||
selector : 'e-commerce-orders',
|
||||
templateUrl : './orders.component.html',
|
||||
styleUrls : ['./orders.component.scss'],
|
||||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EcommerceOrdersComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
|
|
|||
27
src/app/main/apps/e-commerce/orders/orders.theme.scss
Normal file
27
src/app/main/apps/e-commerce/orders/orders.theme.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
@mixin e-commerce-orders-theme($theme) {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
e-commerce-orders {
|
||||
|
||||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
background: map-get($background, card);
|
||||
|
||||
.search {
|
||||
|
||||
.mat-icon {
|
||||
color: map-get($foreground, icon);
|
||||
}
|
||||
|
||||
input {
|
||||
background: map-get($background, card);
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- APP TITLE -->
|
||||
<div class="logo mb-24 mb-md-0"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
|
||||
|
|
@ -25,12 +25,11 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-input-wrapper mx-32 mx-md-0" fxFlex="1 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<label for="search" class="mr-8">
|
||||
<mat-icon class="secondary-text s-18">search</mat-icon>
|
||||
</label>
|
||||
<input id="search" #filter placeholder="Search">
|
||||
<div class="search-wrapper mx-32 mx-md-0">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for a product">
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
e-commerce-products {
|
||||
|
||||
#products {
|
||||
|
||||
|
|
@ -15,32 +15,33 @@
|
|||
|
||||
> .header {
|
||||
|
||||
.search-input-wrapper {
|
||||
.search-wrapper {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 21px;
|
||||
padding: 0 16px;
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(1);
|
||||
|
||||
@include media-breakpoint('lt-md') {
|
||||
@include media-breakpoint('xs') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 18px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint('lt-md') {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatPaginator, MatSort } from '@angular/material';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
|
|
@ -14,7 +14,8 @@ import { takeUntil } from 'rxjs/internal/operators';
|
|||
selector : 'e-commerce-products',
|
||||
templateUrl : './products.component.html',
|
||||
styleUrls : ['./products.component.scss'],
|
||||
animations : fuseAnimations
|
||||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EcommerceProductsComponent implements OnInit
|
||||
{
|
||||
|
|
|
|||
27
src/app/main/apps/e-commerce/products/products.theme.scss
Normal file
27
src/app/main/apps/e-commerce/products/products.theme.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
@mixin e-commerce-products-theme($theme) {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
e-commerce-products {
|
||||
|
||||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
background: map-get($background, card);
|
||||
|
||||
.search {
|
||||
|
||||
.mat-icon {
|
||||
color: map-get($foreground, icon);
|
||||
}
|
||||
|
||||
input {
|
||||
background: map-get($background, card);
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user