dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved sidebar hover bg and text colors, fixed wrapping of nav bar when screen width smaller, tweaked active/inactive accordion and chevron colors

Browse Source
pull/2/head
Rebecca Hollis 5 years ago
parent 37e8d5b13f
commit 44b9b6f7df
7 changed files with 102 additions and 52 deletions
Show Stats Download Patch File Download Diff File

2
src/assets/images/chevron-down-light.svg
Unescape Escape View File

@ -1 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#080404" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 283 B

2
src/assets/images/chevron-up-light.svg
Unescape Escape View File

@ -1 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#3f4959" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 264 B

After

Width:  |  Height:  |  Size: 264 B

24
src/assets/pages/resources-landing-page.html
Unescape Escape View File

@ -16,6 +16,8 @@
<body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
<div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
<a class="navbar-brand text-navbartext my-0 mr-md-auto">
<img src="../images/Asset4.png" height="30" class="d-inline-block align-top"
@ -63,51 +65,54 @@
<a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
</div>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active text-sidebartext" href="#">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Top <span class="sr-only">(current)</span>
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
<span>Resource Categories</span>
<a class="d-flex align-items-center" href="#">
</a>
</h6>
<ul class="nav flex-column mb-2 ml-4">
<li class="nav-item">
<a class="nav-link text-sidebartext" href="#human-resources-collapser">
<a class="nav-link" href="#human-resources-collapser">
<span data-feather="list-ul"></span>
Human Resources
</a>
</li>
<li class="nav-item">
<a class="nav-link text-sidebartext" href="#marketing-collapser">
<a class="nav-link" href="#marketing-collapser">
<span data-feather="list-ul"></span>
Marketing
</a>
</li>
<li class="nav-item">
<a class="nav-link text-sidebartext" href="#productivity-collapser">
<a class="nav-link" href="#productivity-collapser">
<span data-feather="list-ul"></span>
Productivity
</a>
</li>
<li class="nav-item">
<a class="nav-link text-sidebartext" href="#training-collapser">
<a class="nav-link" href="#training-collapser">
<span data-feather="list-ul"></span>
Training
</a>
</li>
<li class="nav-item">
<a class="nav-link text-sidebartext" href="#workflow-collapser">
<a class="nav-link" href="#workflow-collapser">
<span data-feather="list-ul"></span>
Workflow
</a>
@ -148,9 +153,8 @@
<footer class="page-footer">
<div class="container">
<p class="float-right footer-text">
Here's some footer text that is not a link
<a href="#">Back to top</a>
<p class="float-right">
<a href="#" class="footer-text">Back to top</a>
</p>
</div>
</footer>

29
src/assets/pages/styles/resources-landing-page.scss
Unescape Escape View File

@ -2,7 +2,7 @@ html {
font-size: 14px;
}
@media (min-width: 768px) {
@media (min-width: 876px) {
html {
font-size: 16px;
}
@ -23,10 +23,11 @@ html {
body {
font-size: 1rem;
padding-top: 80px;
padding-top: 125px;
padding-bottom: 20px;
}
.feather {
width: 16px;
height: 16 px;
@ -62,7 +63,10 @@ body {
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 0;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
@ -77,25 +81,6 @@ body {
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: navbartext;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: navbartextfeather;
}
.sidebar .nav-link.active {
color: navbartextactive;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;

75
src/assets/pages/styles/theme-base.scss
Unescape Escape View File

@ -168,29 +168,84 @@ body {
cursor: pointer; /* Add a pointer on hover */
}
.help-menu-item{
color: map-get($theme-colors, activetextaccordion) !important;
.help-menu-item {
color: map-get($theme-colors, navbartext) !important;
}
.help-menu-item:hover{
.help-menu-item:hover {
color: map-get($theme-colors, activetextaccordion) !important;
}
.footer-text{
color: red;
.footer-text {
color: map-get($theme-colors, footerback);
}
.text-sidebartext{
color: map-get($theme-colors, navbartextactive) !important;
.footer-text:focus {
color: map-get($theme-colors, footerbackfocus);
}
.text-sidebartext:hover{
color: map-get($theme-colors, navbartext) !important;
.sidebarsticky li a:hover {
color: map-get($theme-colors, activetextaccordion) !important; /* This is NOT working */
}
.sidebar-sticky {
color: map-get($theme-colors, yellow) !important; /* This is NOT working */
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: blue; /* This is NOT working */
}
.sidebar {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
}
.sidebar:hover {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
}
.sidebar .nav-link.active {
color: map-get($theme-colors, sidebartext); /* This is the color of the Top item in menu when inactive */
}
.sidebar .nav-link.active:hover {
color: map-get($theme-colors, activetextaccordion); /* This is the color of the Top item in menu when hovered */
background-color: map-get($theme-colors, sidebarbg);
}
.sidebar .nav-link {
font-weight: 500;
color: map-get($theme-colors, sidebartext); /* This is the color of the category names when inactive */
}
.sidebar .nav-link:hover {
font-weight: 500;
color: map-get($theme-colors, activetextaccordion); /* This is the color of the category names when hovered */
background-color: map-get($theme-colors, sidebarbg);
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: green;
}
.chevron-img{}
.overlay-content{
.overlay-content {
position: fixed; /* Sit on top of the page content */
width: 400px; /* Full width (cover the whole page) */
height: 600px; /* Full height (cover the whole page) */

3
src/assets/pages/styles/theme-dark.scss
Unescape Escape View File

@ -18,6 +18,7 @@ $theme-colors: (
"searchbuttonfill": #39393f,
"searchicon": #737373,
"sidebartext": #787572,
"sidebarbg": #29292d,
"webcardimagebackground": #707070,
"webcardimagebackgroundhover": #98928F,
"headertextcolor": #9d9d9d,
@ -40,6 +41,8 @@ $theme-colors: (
"feedbackmessagefill": #3c3c42,
"feedbackmessageborder": #363434,
"feedbackmessagehint": #787572,
"footerback": rgba(120, 117, 114, 0.8),
"footerbackfocus": rgba(120, 117, 114, 1),
);
.theme-button{

19
src/assets/pages/styles/theme-light.scss
Unescape Escape View File

@ -4,9 +4,9 @@ $theme-colors: (
"success": #0B031C,
"info": #f9f9f9,
"warning": #700000,
"navbartext": #121213,
"navbartextfeather": #323233,
"navbartextactive": #212122,
"navbartext": #080404,
"navbartextfeather": #080404,
"navbartextactive": #080404,
"inactivecard": #ffffff,
"activecard": #13a04a,
"boxborder": #c0c2c6,
@ -15,20 +15,21 @@ $theme-colors: (
"searchhint": #c0c2c6,
"searchfont": #2c2c2c,
"sidebarfill": #efefef,
"sidebartext": #545455,
"sidebartext": #3f4959,
"sidebarbg": #e5e5e5,
"searchbuttonfill": #f6f6f6,
"searchicon": #545455,
"webcardimagebackground": #eeeeee,
"webcardimagebackgroundhover": #f0f0f0,
"headertextcolor": #434344,
"headertextcolor": #080404,
"headertextcolorhover": #ffffff,
"paragraphtextcolor": #434344,
"paragraphtextcolor": #080404,
"paragraphtextcolorhover": #ffffff,
"themebuttonoutline": #434344,
"inactiveaccordion": #efefef,
"activeaccordion": #ffffff,
"inactivetextaccordion": #434344,
"activetextaccordion": #434344,
"inactivetextaccordion": #3f4959,
"activetextaccordion": #080404,
"borderaccordion": #c0c2c6,
"inactiveborderaccordion": #c0c2c6,
"activeborderaccordion": rgba(26, 26, 26, 0),
@ -41,6 +42,8 @@ $theme-colors: (
"feedbackmessagefill": #efefef,
"feedbackmessageborder": #dbdbdb,
"feedbackmessagehint": #c0c2c6,
"footerback": #434344,
"footerbackfocus": #000000,
);
.theme-button{

Write Preview
Loading…
Cancel
Save