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"> <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"> <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"> <a class="navbar-brand text-navbartext my-0 mr-md-auto">
<img src="../images/Asset4.png" height="30" class="d-inline-block align-top" <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> <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar"> <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
<div class="sidebar-sticky"> <div class="sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active text-sidebartext" href="#"> <a class="nav-link active" href="#">
<span data-feather="home"></span> <span data-feather="home"></span>
Top <span class="sr-only">(current)</span> Top <span class="sr-only">(current)</span>
</a> </a>
</li> </li>
</ul> </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> <span>Resource Categories</span>
<a class="d-flex align-items-center" href="#"> <a class="d-flex align-items-center" href="#">
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2 ml-4"> <ul class="nav flex-column mb-2 ml-4">
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Human Resources Human Resources
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Marketing Marketing
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Productivity Productivity
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Training Training
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Workflow Workflow
</a> </a>
@ -148,9 +153,8 @@
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> <div class="container">
<p class="float-right footer-text"> <p class="float-right">
Here's some footer text that is not a link <a href="#" class="footer-text">Back to top</a>
<a href="#">Back to top</a>
</p> </p>
</div> </div>
</footer> </footer>

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

@ -2,7 +2,7 @@ html {
font-size: 14px; font-size: 14px;
} }
@media (min-width: 768px) { @media (min-width: 876px) {
html { html {
font-size: 16px; font-size: 16px;
} }
@ -23,10 +23,11 @@ html {
body { body {
font-size: 1rem; font-size: 1rem;
padding-top: 80px; padding-top: 125px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.feather { .feather {
width: 16px; width: 16px;
height: 16 px; height: 16 px;
@ -62,7 +63,10 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; /* Behind the navbar */ 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); 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. */ 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 { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
text-transform: uppercase; 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 */ cursor: pointer; /* Add a pointer on hover */
} }
.help-menu-item{ .help-menu-item {
color: map-get($theme-colors, activetextaccordion) !important; color: map-get($theme-colors, navbartext) !important;
} }
.help-menu-item:hover{ .help-menu-item:hover {
color: map-get($theme-colors, activetextaccordion) !important; color: map-get($theme-colors, activetextaccordion) !important;
} }
.footer-text{ .footer-text {
color: red; color: map-get($theme-colors, footerback);
} }
.text-sidebartext{ .footer-text:focus {
color: map-get($theme-colors, navbartextactive) !important; 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{} .chevron-img{}
.overlay-content{ .overlay-content {
position: fixed; /* Sit on top of the page content */ position: fixed; /* Sit on top of the page content */
width: 400px; /* Full width (cover the whole page) */ width: 400px; /* Full width (cover the whole page) */
height: 600px; /* Full height (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, "searchbuttonfill": #39393f,
"searchicon": #737373, "searchicon": #737373,
"sidebartext": #787572, "sidebartext": #787572,
"sidebarbg": #29292d,
"webcardimagebackground": #707070, "webcardimagebackground": #707070,
"webcardimagebackgroundhover": #98928F, "webcardimagebackgroundhover": #98928F,
"headertextcolor": #9d9d9d, "headertextcolor": #9d9d9d,
@ -40,6 +41,8 @@ $theme-colors: (
"feedbackmessagefill": #3c3c42, "feedbackmessagefill": #3c3c42,
"feedbackmessageborder": #363434, "feedbackmessageborder": #363434,
"feedbackmessagehint": #787572, "feedbackmessagehint": #787572,
"footerback": rgba(120, 117, 114, 0.8),
"footerbackfocus": rgba(120, 117, 114, 1),
); );
.theme-button{ .theme-button{

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

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

Write Preview
Loading…
Cancel
Save