designed the help screens and tried to change theme toggle colors

pull/2/head
Rebecca Hollis 5 years ago
parent d3f9146a92
commit 7588f397d6

@ -7,6 +7,6 @@
<p></p> <p></p>
<p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p> <p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p>
<p></p> <p></p>
<p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools available to them.</p> <p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools that JDSfaulkner offers.</p>
</div> </div>
</html> </html>

@ -5,7 +5,7 @@
<p></p> <p></p>
<p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p> <p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p>
<p></p> <p></p>
<p class="lead">What is going on? An <i>update</i>.</p> <p class="lead">What is going on? Resource Center is making an <i>update</i>.</p>
<p></p> <p></p>
<p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p> <p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p>
</div> </div>

@ -46,7 +46,7 @@
<p class="feedback-instructions px-4 py-3">Would you like to send feedback or report an issue? Type your message and click "Submit."</p> <p class="feedback-instructions px-4 py-3">Would you like to send feedback or report an issue? Type your message and click "Submit."</p>
<div class="dropdown divider"> <div class="feedbackentry"><hr/>
<form class="px-4 py-3"> <form class="px-4 py-3">
<div class="form-group"> <div class="form-group">

@ -74,6 +74,25 @@ body {
border-color: map-get($theme-colors, activeborderaccordion); border-color: map-get($theme-colors, activeborderaccordion);
} }
#theme-toggle {
btn-outline: map-get($theme-colors, themebuttonoutline);
}
#theme-toggle:hover {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
#theme-toggle:focus {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
#theme-toggle:active {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
.searchTerm::-webkit-input-placeholder { .searchTerm::-webkit-input-placeholder {
color: map-get($theme-colors, searchhint) !important; color: map-get($theme-colors, searchhint) !important;
} }
@ -186,19 +205,6 @@ body {
color: map-get($theme-colors, feedbackmessagehint) !important; color: map-get($theme-colors, feedbackmessagehint) !important;
} }
.overlay-custom {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7); /* Black background with opacity */
z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.help-menu-item { .help-menu-item {
color: map-get($theme-colors, helpmenudropdowntext) !important; color: map-get($theme-colors, helpmenudropdowntext) !important;
} }
@ -220,31 +226,12 @@ body {
color: map-get($theme-colors, footerbackfocus); color: map-get($theme-colors, footerbackfocus);
} }
.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 { .sidebar {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */ color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color inactive */
} }
.sidebar:hover { .sidebar:hover {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */ color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color on hover */
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
@ -267,26 +254,32 @@ body {
background-color: map-get($theme-colors, sidebarbg); background-color: map-get($theme-colors, sidebarbg);
} }
.overlay-custom {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
.sidebar .nav-link:hover .feather, top: 0;
.sidebar .nav-link.active .feather { left: 0;
color: green; right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7); /* Black background with opacity */
z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
} }
.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: 50%; /* Full width (cover the whole page) */
height: 600px; /* Full height (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */
top: 5%; top: 0%;
right: 25%; right: 0%;
background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */ background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */
cursor: pointer; /* Add a pointer on hover */ cursor: pointer; /* Add a pointer on hover */
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
} }

@ -29,6 +29,8 @@ $theme-colors: (
"paragraphtextcolor": #9d9d9d, "paragraphtextcolor": #9d9d9d,
"paragraphtextcolorhover":#d9d2d2, "paragraphtextcolorhover":#d9d2d2,
"themebuttonoutline": #808080, "themebuttonoutline": #808080,
"themebuttonfill": #c0c0c0,
"themebuttontext": #cdcdcd,
"inactiveaccordion": #202023, "inactiveaccordion": #202023,
"activeaccordion": #333337, "activeaccordion": #333337,
"inactivetextaccordion": #787572, "inactivetextaccordion": #787572,
@ -42,7 +44,7 @@ $theme-colors: (
"feedbacksubmitbutton": #0c218c, "feedbacksubmitbutton": #0c218c,
"feedbacksubmitbuttontext": #d9d2d2, "feedbacksubmitbuttontext": #d9d2d2,
"feedbackmessagefill": #3c3c42, "feedbackmessagefill": #3c3c42,
"feedbackmessageborder": #363434, "feedbackmessageborder": #5b5b63,
"feedbackmessagehint": #787572, "feedbackmessagehint": #787572,
"footerback": #787572, "footerback": #787572,
"footerbackfocus": #787572, "footerbackfocus": #787572,

@ -28,7 +28,9 @@ $theme-colors: (
"headertextcolorhover": #ffffff, "headertextcolorhover": #ffffff,
"paragraphtextcolor": #080404, "paragraphtextcolor": #080404,
"paragraphtextcolorhover": #ffffff, "paragraphtextcolorhover": #ffffff,
"themebuttonoutline": #3f4a5a, "themebuttonoutline": #3f4959,
"themebuttonfill": #dcdcdc,
"themebuttontext": #fdfdfd,
"inactiveaccordion": #efefef, "inactiveaccordion": #efefef,
"activeaccordion": #ffffff, "activeaccordion": #ffffff,
"inactivetextaccordion": #3f4959, "inactivetextaccordion": #3f4959,

Loading…
Cancel
Save