From c0a2aee9f005aced05864490522efd751b42ec94 Mon Sep 17 00:00:00 2001 From: Eric Fleming Date: Fri, 1 Feb 2019 19:46:32 -0500 Subject: [PATCH 1/3] Adding header styles --- src/Web/Views/Shared/_Layout.cshtml | 17 +++++- src/Web/Views/Shared/_LoginPartial.cshtml | 3 +- .../css/shared/components/header/header.css | 18 ++++++ .../shared/components/header/header.min.css | 1 + .../css/shared/components/header/header.scss | 21 +++++++ .../shared/components/identity/identity.css | 57 +++++++++++++++++++ .../components/identity/identity.min.css | 1 + .../shared/components/identity/identity.scss | 56 ++++++++++++++++++ .../css/shared/components/pager/pager.css | 35 ++++++++++++ .../css/shared/components/pager/pager.min.css | 1 + .../css/shared/components/pager/pager.scss | 36 ++++++++++++ 11 files changed, 243 insertions(+), 3 deletions(-) create mode 100644 src/Web/wwwroot/css/shared/components/header/header.css create mode 100644 src/Web/wwwroot/css/shared/components/header/header.min.css create mode 100644 src/Web/wwwroot/css/shared/components/header/header.scss create mode 100644 src/Web/wwwroot/css/shared/components/identity/identity.css create mode 100644 src/Web/wwwroot/css/shared/components/identity/identity.min.css create mode 100644 src/Web/wwwroot/css/shared/components/identity/identity.scss create mode 100644 src/Web/wwwroot/css/shared/components/pager/pager.css create mode 100644 src/Web/wwwroot/css/shared/components/pager/pager.min.css create mode 100644 src/Web/wwwroot/css/shared/components/pager/pager.scss diff --git a/src/Web/Views/Shared/_Layout.cshtml b/src/Web/Views/Shared/_Layout.cshtml index c6408ee..0338b86 100644 --- a/src/Web/Views/Shared/_Layout.cshtml +++ b/src/Web/Views/Shared/_Layout.cshtml @@ -7,6 +7,19 @@ + + + + + + + + + + + + + - + @* - + *@
diff --git a/src/Web/Views/Shared/_LoginPartial.cshtml b/src/Web/Views/Shared/_LoginPartial.cshtml index 5385d36..e27824f 100644 --- a/src/Web/Views/Shared/_LoginPartial.cshtml +++ b/src/Web/Views/Shared/_LoginPartial.cshtml @@ -37,10 +37,11 @@ } else { -
+
+ Login diff --git a/src/Web/wwwroot/css/shared/components/header/header.css b/src/Web/wwwroot/css/shared/components/header/header.css new file mode 100644 index 0000000..1d2add9 --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/header/header.css @@ -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; +} + diff --git a/src/Web/wwwroot/css/shared/components/header/header.min.css b/src/Web/wwwroot/css/shared/components/header/header.min.css new file mode 100644 index 0000000..6d6217d --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/header/header.min.css @@ -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;} \ No newline at end of file diff --git a/src/Web/wwwroot/css/shared/components/header/header.scss b/src/Web/wwwroot/css/shared/components/header/header.scss new file mode 100644 index 0000000..98d455c --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/header/header.scss @@ -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; + } + } +} diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.css b/src/Web/wwwroot/css/shared/components/identity/identity.css new file mode 100644 index 0000000..cd38600 --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/identity/identity.css @@ -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; +} + diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.min.css b/src/Web/wwwroot/css/shared/components/identity/identity.min.css new file mode 100644 index 0000000..778140c --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/identity/identity.min.css @@ -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;} \ No newline at end of file diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.scss b/src/Web/wwwroot/css/shared/components/identity/identity.scss new file mode 100644 index 0000000..b9fd5c6 --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/identity/identity.scss @@ -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; + } + } +} diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.css b/src/Web/wwwroot/css/shared/components/pager/pager.css new file mode 100644 index 0000000..9ca8550 --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/pager/pager.css @@ -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; + } +} + diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.min.css b/src/Web/wwwroot/css/shared/components/pager/pager.min.css new file mode 100644 index 0000000..79a734e --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/pager/pager.min.css @@ -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;}} \ No newline at end of file diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.scss b/src/Web/wwwroot/css/shared/components/pager/pager.scss new file mode 100644 index 0000000..078256c --- /dev/null +++ b/src/Web/wwwroot/css/shared/components/pager/pager.scss @@ -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; + } + } +} From dbb7bbc4d8d5e59a1b1e028d90789c9931dbc91b Mon Sep 17 00:00:00 2001 From: Eric Fleming Date: Fri, 1 Feb 2019 19:58:13 -0500 Subject: [PATCH 2/3] Using the correct login name --- src/Web/Views/Shared/_LoginPartial.cshtml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Web/Views/Shared/_LoginPartial.cshtml b/src/Web/Views/Shared/_LoginPartial.cshtml index e27824f..1b9d12e 100644 --- a/src/Web/Views/Shared/_LoginPartial.cshtml +++ b/src/Web/Views/Shared/_LoginPartial.cshtml @@ -4,7 +4,7 @@