update basic and app.component styles
This commit is contained in:
Quique Fernandez
parent
c08eff1444
commit
07e863502d
30
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss
Normal file
30
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@import './modules/_variables.scss';
|
||||
|
||||
$dist: './fonts/Montserrat-Regular';
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-weight: 400;
|
||||
src: url("./fonts/Montserrat-Regular.eot?") format("eot"),url("./fonts/Montserrat-Regular.woff") format("woff"),url("./fonts/Montserrat-Regular.ttf") format("truetype"),url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-weight: 700;
|
||||
src: url("./fonts/Montserrat-Bold.eot?") format("eot"),url("./fonts/Montserrat-Bold.woff") format("woff"),url("./fonts/Montserrat-Bold.ttf") format("truetype"),url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg")
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: Montserrat,sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-normal;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preloading {
|
||||
color: $color-brand;
|
||||
font-size: $font-size-xl;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
}
|
||||
@ -13,7 +13,7 @@ $color-secondary-brighter: lighten($color-secondary, 20%);
|
||||
|
||||
$color-background-dark: #333333;
|
||||
$color-background-darker: #000000;
|
||||
$color-background-bright: #EEEEEE;
|
||||
$color-background-bright: #EEEEFF;
|
||||
$color-background-brighter: #FFFFFF;
|
||||
|
||||
$color-foreground-dark: #333333;
|
||||
@ -49,8 +49,5 @@ $media-screen-xl: 1440px;
|
||||
$media-screen-xxl: 1680px;
|
||||
$media-screen-xxxl: 1920px;
|
||||
|
||||
// Margins
|
||||
$margin-center: 10vw;
|
||||
|
||||
$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
|
||||
$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;
|
||||
// Borders
|
||||
$border-light: 1px;
|
||||
|
||||
@ -1,44 +1,38 @@
|
||||
<div class="app">
|
||||
<header class="navbar navbar-light navbar-static-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-10">
|
||||
<a class="navbar-brand" routerLink="catalog">
|
||||
<img src="../images/brand.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
|
||||
<esh-identity></esh-identity>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<header class="navbar navbar-light navbar-static-top">
|
||||
<div class="container">
|
||||
<article class="row">
|
||||
|
||||
<section class="col-sm-10">
|
||||
<a class="navbar-brand" routerLink="catalog">
|
||||
<img src="../images/brand.png" />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="col-sm-2">
|
||||
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
|
||||
<esh-identity></esh-identity>
|
||||
</section>
|
||||
|
||||
<!-- component routing placeholder -->
|
||||
<router-outlet></router-outlet>
|
||||
</article>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- component routing placeholder -->
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<footer class="app-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<br>
|
||||
<div class="app-footer-brand">
|
||||
<img src="../images/brand_dark.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="app-footer-text hidden-xs">e-ShoponContainers. All right reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<footer class="esh-app-footer">
|
||||
<div class="container">
|
||||
<article class="row">
|
||||
|
||||
<section class="col-sm-6">
|
||||
<img class="esh-app-footer-brand" src="../images/brand_dark.png" />
|
||||
</section>
|
||||
|
||||
<section class="col-sm-6">
|
||||
<div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
@ -1,44 +1,28 @@
|
||||
@import './_variables.scss';
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-weight: 400;
|
||||
src: url("../dist/fonts/Montserrat-Regular.eot?") format("eot"),url("../dist/fonts/Montserrat-Regular.woff") format("woff"),url("../dist/fonts/Montserrat-Regular.ttf") format("truetype"),url("../dist/fonts/Montserrat-Regular.svg#Montserrat") format("svg")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-weight: 700;
|
||||
src: url("../dist/fonts/Montserrat-Bold.eot?") format("eot"),url("../dist/fonts/Montserrat-Bold.woff") format("woff"),url("../dist/fonts/Montserrat-Bold.ttf") format("truetype"),url("../dist/fonts/Montserrat-Bold.svg#Montserrat") format("svg")
|
||||
}
|
||||
|
||||
.app {
|
||||
font-family: Montserrat,sans-serif;
|
||||
|
||||
.esh-app {
|
||||
&-footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
border-top: 1px solid #eee;
|
||||
background-color: black;
|
||||
$margin: 2.5rem;
|
||||
$padding: 2.5rem;
|
||||
|
||||
background-color: $color-background-darker;
|
||||
border-top: $border-light solid $color-foreground-bright;
|
||||
margin-top: $margin;
|
||||
padding-bottom: $padding;
|
||||
padding-top: $padding;
|
||||
width: 100%;
|
||||
|
||||
$height: 50px;
|
||||
&-brand {
|
||||
margin-top: 25px;
|
||||
max-width: 231px;
|
||||
height: 52px;
|
||||
margin-left: 0px !important;
|
||||
height: $height;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: $color-secondary;
|
||||
line-height: $height;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #83d01b;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ import { SecurityService } from './shared/services/security.service';
|
||||
*/
|
||||
|
||||
@Component({
|
||||
selector: 'appc-app',
|
||||
selector: 'esh-app.esh-app',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
|
||||
@ -11,11 +11,6 @@ export const routes: Routes = [
|
||||
{ path: 'catalog', component: CatalogComponent },
|
||||
{ path: 'orders', component: OrdersComponent },
|
||||
{ path: 'orders/:id', component: OrdersDetailComponent },
|
||||
//Lazy async modules (angular-loader-router) and enable a router in each module.
|
||||
//{
|
||||
// path: 'basket', loadChildren: '/basket/basket.module' });
|
||||
// })
|
||||
//}
|
||||
];
|
||||
|
||||
export const routing = RouterModule.forRoot(routes);
|
||||
|
||||
@ -28,7 +28,7 @@ select::-ms-expand {
|
||||
&-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: $primary-colour;
|
||||
background-color: $color-brand;
|
||||
left: 0;
|
||||
height: 65px;
|
||||
}
|
||||
@ -37,7 +37,7 @@ select::-ms-expand {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 6px 20px 10px 8px;
|
||||
background-color: $primary-accent;
|
||||
background-color: $color-secondary;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
@ -96,7 +96,7 @@ select::-ms-expand {
|
||||
width: 255px;
|
||||
height: 45px;
|
||||
padding: 10px 20px 10px 20px;
|
||||
background-color: $primary-accent;
|
||||
background-color: $color-secondary;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
<style>
|
||||
div.app-spinner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<appc-app asp-prerender-webpack-config="config/webpack.config.js">
|
||||
<div class="app-spinner">
|
||||
<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
|
||||
<div class="preloading">
|
||||
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
|
||||
</div>
|
||||
</appc-app>
|
||||
</esh-app>
|
||||
|
||||
<script>
|
||||
window.user = '@ViewBag.user';
|
||||
|
||||
@ -44,7 +44,8 @@ module.exports = {
|
||||
'@angular/forms',
|
||||
'@angular/platform-browser',
|
||||
'@angular/platform-browser-dynamic',
|
||||
'@angular/router'
|
||||
'@angular/router',
|
||||
'./Client/globals.scss'
|
||||
]
|
||||
},
|
||||
output: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user