nicolas
/
eShopOnWeb
mirror of https://github.com/nmasse-itix/eShopOnWeb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adding header styles

main
Eric Fleming 7 years ago
parent
746c0c9945
commit
c0a2aee9f0
11 changed files with 243 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/Web/Views/Shared/_Layout.cshtml
  2. 3
      src/Web/Views/Shared/_LoginPartial.cshtml
  3. 18
      src/Web/wwwroot/css/shared/components/header/header.css
  4. 1
      src/Web/wwwroot/css/shared/components/header/header.min.css
  5. 21
      src/Web/wwwroot/css/shared/components/header/header.scss
  6. 57
      src/Web/wwwroot/css/shared/components/identity/identity.css
  7. 1
      src/Web/wwwroot/css/shared/components/identity/identity.min.css
  8. 56
      src/Web/wwwroot/css/shared/components/identity/identity.scss
  9. 35
      src/Web/wwwroot/css/shared/components/pager/pager.css
  10. 1
      src/Web/wwwroot/css/shared/components/pager/pager.min.css
  11. 36
      src/Web/wwwroot/css/shared/components/pager/pager.scss

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

@ -7,6 +7,19 @@
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.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/campaigns/campaigns.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 names="Staging,Production">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
@ -14,12 +27,12 @@
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" />
</environment>
<link rel="stylesheet" href="~/css/app.component.css" />
@*<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" />
<link rel="stylesheet" href="~/css/orders/orders.component.css" />*@
</head>
<body>
<header class="navbar navbar-light navbar-static-top">

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

@ -37,10 +37,11 @@
}
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">
<section class="esh-identity-section">
<div class="esh-identity-item">
<a asp-area="" asp-controller="Account" asp-action="SignIn" class="esh-identity-name esh-identity-name--upper">
Login
</a>

18
src/Web/wwwroot/css/shared/components/header/header.css
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
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
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
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
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
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
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
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
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;
}
}
}
Write Preview
Loading…
Cancel
Save