styled accordions

pull/2/head
Rebecca Hollis 5 years ago
parent 85062144fd
commit bf73ba5645

@ -214,7 +214,7 @@
"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": [
{
"title": "Clarity",

@ -5,7 +5,7 @@
<head>
<meta charset="utf-8">
<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">
@ -20,7 +20,7 @@
<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"
alt="JDSfaulkner logo">
&nbsp;Steering Wheel
&nbsp;Resource Center
</a>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-navbartext" href="#">Help</a>
@ -84,19 +84,19 @@
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 text-navbartext">
<div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 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">
<div class="album py-5 bg-secondary text-navbartext">
<div class="container text-navbartext">
<div class="album py-5">
<div class="container">
<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?)"
aria-label="Search">
</div>
<div class="album py-5 bg-secondary text-navbartext">
<div class="container bg-secondary text-navbartext">
<div class="album py-5 ">
<div class="container">
<div id="grid-container">
</div>
</div>

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

@ -57,18 +57,20 @@ body{
}
.category-header {
border: 1px solid black;
border: 1px solid;
border-radius: 5px;
background-color: transparent;
cursor: pointer;
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 {
background-color: white;
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 {
}

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

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

@ -1,8 +1,8 @@
<html lang="en">
<div>
<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>
<p class="text-#000000 align-self-center">{{{category-description}}}</p>
<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="align-self-center">{{{category-description}}}</p>
</div>
<div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>
</div>

Loading…
Cancel
Save