Nell/eShopOnWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #201 from dotnet-architecture/fixing-header-styles

Browse Source 
Fixing header styles
This commit is contained in:
Eric Fleming
2019-02-01 20:44:14 -05:00
committed by GitHub
parent 746c0c9945 3752f80560
commit c8f30a220b
11 changed files with 241 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Web/Views/Shared/_Layout.cshtml
View File

@@ -7,6 +7,18 @@
<environment names="Development"> <environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/app.css" /> <link rel="stylesheet" href="~/css/app.css" />
<link rel="stylesheet" href="~/css/app.component.css" />
<link rel="stylesheet" href="~/css/shared/components/header/header.css" />
<link rel="stylesheet" href="~/css/shared/components/identity/identity.css" />
<link rel="stylesheet" href="~/css/shared/components/pager/pager.css" />
<link rel="stylesheet" href="~/css/basket/basket.component.css" />
<link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
<link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
<link rel="stylesheet" href="~/css/orders/orders.component.css" />
<link rel="stylesheet" href="~/css/orders/orders-detail/orders-detail.component.css" />
<link rel="stylesheet" href="~/css/orders/orders-new/orders-new.component.css" />
<link rel="stylesheet" href="~/css/override.css" type="text/css" />
<link rel="stylesheet" href="~/css/site.min.css" type="text/css" />
</environment> </environment>
<environment names="Staging,Production"> <environment names="Staging,Production">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
@@ -14,12 +26,6 @@
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" /> <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" />
</environment> </environment>
<link rel="stylesheet" href="~/css/app.component.css" />
<link rel="stylesheet" href="~/css/basket/basket.component.css" />
<link rel="stylesheet" href="~/css/catalog/pager.css" />
<link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
<link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
<link rel="stylesheet" href="~/css/orders/orders.component.css" />
</head> </head>
<body> <body>
<header class="navbar navbar-light navbar-static-top"> <header class="navbar navbar-light navbar-static-top">

7
src/Web/Views/Shared/_LoginPartial.cshtml
View File

@@ -4,7 +4,7 @@
<div class="esh-identity"> <div class="esh-identity">
<form asp-area="" asp-controller="Account" asp-action="SignOut" method="post" id="logoutForm" class="navbar-right"> <form asp-area="" asp-controller="Account" asp-action="SignOut" method="post" id="logoutForm" class="navbar-right">
<section class="esh-identity-section"> <section class="esh-identity-section">
@*<div class="esh-identity-name">@User.FindFirst(x => x.Type == "preferred_username").Value</div>*@ <div class="esh-identity-name">@Context.User.Identity.Name</div>
<img class="esh-identity-image" src="~/images/arrow-down.png"> <img class="esh-identity-image" src="~/images/arrow-down.png">
</section> </section>
<section class="esh-identity-drop"> <section class="esh-identity-drop">
@@ -12,13 +12,11 @@
asp-controller="Order" asp-controller="Order"
asp-action="MyOrders"> asp-action="MyOrders">
<div class="esh-identity-name esh-identity-name--upper">My orders</div> <div class="esh-identity-name esh-identity-name--upper">My orders</div>
<img class="esh-identity-image" src="~/images/my_orders.png">
</a> </a>
<a class="esh-identity-item" <a class="esh-identity-item"
asp-controller="Manage" asp-controller="Manage"
asp-action="MyAccount"> asp-action="MyAccount">
<div class="esh-identity-name esh-identity-name--upper">My account</div> <div class="esh-identity-name esh-identity-name--upper">My account</div>
<img class="esh-identity-image" src="~/images/my_orders.png">
</a> </a>
<a class="esh-identity-item" <a class="esh-identity-item"
href="javascript:document.getElementById('logoutForm').submit()"> href="javascript:document.getElementById('logoutForm').submit()">
@@ -37,10 +35,11 @@
} }
else else
{ {
<section class="col-lg-1 col-lg-offset-3 col-md-3 col-xs-6"> <section class="col-lg-4 col-md-5 col-xs-12">
<div class="esh-identity"> <div class="esh-identity">
<section class="esh-identity-section"> <section class="esh-identity-section">
<div class="esh-identity-item"> <div class="esh-identity-item">
<a asp-area="" asp-controller="Account" asp-action="SignIn" class="esh-identity-name esh-identity-name--upper"> <a asp-area="" asp-controller="Account" asp-action="SignIn" class="esh-identity-name esh-identity-name--upper">
Login Login
</a> </a>

18
src/Web/wwwroot/css/shared/components/header/header.css Normal file
View File

@@ -0,0 +1,18 @@
.esh-header {
background-color: #00A69C;
height: 4rem;
}
.esh-header-back {
color: rgba(255, 255, 255, 0.5);
line-height: 4rem;
text-decoration: none;
text-transform: uppercase;
transition: color 0.35s;
}
.esh-header-back:hover {
color: #FFFFFF;
transition: color 0.35s;
}

1
src/Web/wwwroot/css/shared/components/header/header.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.esh-header{background-color:#00a69c;height:4rem;}.esh-header-back{color:rgba(255,255,255,.5);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s;}.esh-header-back:hover{color:#fff;transition:color .35s;}

21
src/Web/wwwroot/css/shared/components/header/header.scss Normal file
View File

@@ -0,0 +1,21 @@
@import '../../../variables';
.esh-header {
$header-height: 4rem;
background-color: $color-brand;
height: $header-height;
&-back {
color: rgba($color-foreground-brighter, .5);
line-height: $header-height;
text-decoration: none;
text-transform: uppercase;
transition: color $animation-speed-default;
&:hover {
color: $color-foreground-brighter;
transition: color $animation-speed-default;
}
}
}

57
src/Web/wwwroot/css/shared/components/identity/identity.css Normal file
View File

@@ -0,0 +1,57 @@
.esh-identity {
line-height: 3rem;
position: relative;
text-align: right;
}
.esh-identity-section {
display: inline-block;
width: 100%;
}
.esh-identity-name {
display: inline-block;
}
.esh-identity-name--upper {
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.esh-identity-name {
font-size: 0.85rem;
}
}
.esh-identity-image {
display: inline-block;
}
.esh-identity-drop {
background: #FFFFFF;
height: 10px;
width: 10rem;
overflow: hidden;
padding: .5rem;
position: absolute;
right: 0;
top: 2.5rem;
transition: height 0.35s;
}
.esh-identity:hover .esh-identity-drop {
border: 1px solid #EEEEEE;
height: 10rem;
transition: height 0.35s;
}
.esh-identity-item {
cursor: pointer;
transition: color 0.35s;
}
.esh-identity-item:hover {
color: #75b918;
transition: color 0.35s;
}

1
src/Web/wwwroot/css/shared/components/identity/identity.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.esh-identity{line-height:3rem;position:relative;text-align:right;}.esh-identity-section{display:inline-block;width:100%;}.esh-identity-name{display:inline-block;}.esh-identity-name--upper{text-transform:uppercase;}@media screen and (max-width:768px){.esh-identity-name{font-size:.85rem;}}.esh-identity-image{display:inline-block;}.esh-identity-drop{background:#fff;height:10px;width:10rem;overflow:hidden;padding:.5rem;position:absolute;right:0;top:2.5rem;transition:height .35s;}.esh-identity:hover .esh-identity-drop{border:1px solid #eee;height:10rem;transition:height .35s;}.esh-identity-item{cursor:pointer;transition:color .35s;}.esh-identity-item:hover{color:#75b918;transition:color .35s;}

56
src/Web/wwwroot/css/shared/components/identity/identity.scss Normal file
View File

@@ -0,0 +1,56 @@
@import '../../../variables';
.esh-identity {
line-height: 3rem;
position: relative;
text-align: right;
&-section {
display: inline-block;
width: 100%;
}
&-name {
display: inline-block;
&--upper {
text-transform: uppercase;
}
@media screen and (max-width: $media-screen-s) {
font-size: $font-size-s;
}
}
&-image {
display: inline-block;
}
&-drop {
background: $color-background-brighter;
height: 10px;
width: 10rem;
overflow: hidden;
padding: .5rem;
position: absolute;
right: 0;
top: 2.5rem;
transition: height $animation-speed-default;
}
&:hover &-drop {
border: $border-light solid $color-foreground-bright;
height: 10rem;
transition: height $animation-speed-default;
}
&-item {
cursor: pointer;
transition: color $animation-speed-default;
&:hover {
color: $color-secondary-dark;
transition: color $animation-speed-default;
}
}
}

35
src/Web/wwwroot/css/shared/components/pager/pager.css Normal file
View File

@@ -0,0 +1,35 @@
.esh-pager-wrapper {
padding-top: 1rem;
text-align: center;
}
.esh-pager-item {
margin: 0 5vw;
}
.esh-pager-item.is-disabled {
opacity: 0;
pointer-events: none;
}
.esh-pager-item--navigable {
cursor: pointer;
display: inline-block;
}
.esh-pager-item--navigable:hover {
color: #83D01B;
}
@media screen and (max-width: 1280px) {
.esh-pager-item {
font-size: 0.85rem;
}
}
@media screen and (max-width: 1024px) {
.esh-pager-item {
margin: 0 2.5vw;
}
}

1
src/Web/wwwroot/css/shared/components/pager/pager.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:0;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}}

36
src/Web/wwwroot/css/shared/components/pager/pager.scss Normal file
View File

@@ -0,0 +1,36 @@
@import '../../../variables';
.esh-pager {
&-wrapper {
padding-top: 1rem;
text-align: center;
}
&-item {
$margin: 5vw;
margin: 0 $margin;
&.is-disabled {
opacity: 0;
pointer-events: none;
}
&--navigable {
cursor: pointer;
display: inline-block;
&:hover {
color: $color-secondary;
}
}
@media screen and (max-width: $media-screen-l) {
font-size: $font-size-s;
}
@media screen and (max-width: $media-screen-m) {
margin: 0 $margin / 2;
}
}
}