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

styled accordions

Browse Source
pull/2/head
Rebecca Hollis 5 years ago
parent 85062144fd
commit bf73ba5645
7 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File

2
src/assets/conf/resources-landing-page.json
Unescape Escape View File

@ -214,7 +214,7 @@
"Workflow": { "Workflow": {
"description": "Project management, task assignment and status, client information, data, invoicing and reports", "description": "Project management, task assignment and status, client information, invoicing and reports",
"cards": [ "cards": [
{ {
"title": "Clarity", "title": "Clarity",

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

@ -5,7 +5,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Steering Wheel</title> <title>Resource Center</title>
<link rel="stylesheet" href="styles/resources-landing-page.css"> <link rel="stylesheet" href="styles/resources-landing-page.css">
@ -20,7 +20,7 @@
<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/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top" <img src="../images/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top"
alt="JDSfaulkner logo"> alt="JDSfaulkner logo">
&nbsp;Steering Wheel &nbsp;Resource Center
</a> </a>
<nav class="my-2 my-md-0 mr-md-3"> <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-navbartext" href="#">Help</a> <a class="p-2 text-navbartext" href="#">Help</a>
@ -84,19 +84,19 @@
</nav> </nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 text-navbartext"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 text-navbartext"> <div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
<div class="album py-5 bg-secondary text-navbartext"> <div class="album py-5">
<div class="container text-navbartext"> <div class="container">
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont" <input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
placeholder="Search (What kind of resource are you looking for?)" placeholder="Search (What kind of resource are you looking for?)"
aria-label="Search"> aria-label="Search">
</div> </div>
<div class="album py-5 bg-secondary text-navbartext"> <div class="album py-5 ">
<div class="container bg-secondary text-navbartext"> <div class="container">
<div id="grid-container"> <div id="grid-container">
</div> </div>
</div> </div>

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

@ -132,10 +132,12 @@ body {
.category-header p { .category-header p {
margin: 0 0 .15em 0; margin: 0 0 .15em 0;
padding-left: 1rem; padding-left: 1rem;
padding-bottom: .5rem;
} }
.category-header h4 { .category-header h5 {
padding-left: 1rem; padding-left: 1rem;
padding-top: .5rem;
} }
.footer { .footer {

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

@ -57,18 +57,20 @@ body{
} }
.category-header { .category-header {
border: 1px solid black; border: 1px solid;
border-radius: 5px; border-radius: 5px;
background-color: transparent;
cursor: pointer; cursor: pointer;
margin-bottom: 4px; margin-bottom: 4px;
background-color: map-get($theme-colors, inactiveaccordion);
color: map-get($theme-colors, textaccordion);
border-color: map-get($theme-colors, inactiveborderaccordion);
} }
.category-header.active { .category-header.active {
background-color: white;
margin-bottom: 25px; margin-bottom: 25px;
background-color: map-get($theme-colors, activeaccordion);
color: map-get($theme-colors, textaccordion);
border-color: map-get($theme-colors, activeborderaccordion);
} }
.category-header br {
}

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

@ -21,7 +21,11 @@ $theme-colors: (
"paragraphtextcolor": #808080, "paragraphtextcolor": #808080,
"paragraphtextcolorhover":#202022, "paragraphtextcolorhover":#202022,
"themebuttonoutline": #414144, "themebuttonoutline": #414144,
"categorybox": #707070, "inactiveaccordion": #202023,
"activeaccordion": #414144,
"textaccordion": #808080,
"inactiveborderaccordion": #55555c,
"activeborderaccordion": rgba(26, 26, 26, 0),
"footertext": #808080, "footertext": #808080,
); );

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

@ -21,7 +21,12 @@ $theme-colors: (
"paragraphtextcolor": #434344, "paragraphtextcolor": #434344,
"paragraphtextcolorhover": #ffffff, "paragraphtextcolorhover": #ffffff,
"themebuttonoutline": #434344, "themebuttonoutline": #434344,
"categorybox": #ffffff, "inactiveaccordion": #f6f6f6,
"activeaccordion": #ffffff,
"textaccordion": #434344,
"borderaccordion": #c0c2c6,
"inactiveborderaccordion": #c0c2c6,
"activeborderaccordion": rgba(26, 26, 26, 0),
"footertext": #434344, "footertext": #434344,
); );

4
src/assets/views/card-category.mustache
Unescape Escape View File

@ -1,8 +1,8 @@
<html lang="en"> <html lang="en">
<div> <div>
<div id="{{{category-key}}}-collapser" class="category-header"> <div id="{{{category-key}}}-collapser" class="category-header">
<div class="d-inline-flex"><h4>{{{category-id-clean}}}</h4> <img id="{{{category-key}}}-img" src="../images/chevron-up.svg" alt="button"/></div> <div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" src="../images/chevron-up.svg" class="ml-auto p-2" alt="button"/></div>
<p class="text-#000000 align-self-center">{{{category-description}}}</p> <p class="align-self-center">{{{category-description}}}</p>
</div> </div>
<div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div> <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>
</div> </div>

Write Preview
Loading…
Cancel
Save