Change accordion styles

CruGlobal · Dec 15, 2023 · e416e9b · e416e9b
1 parent 427ff61
commit e416e9b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 54 deletions.
diff --git a/src/app/new-page/component/content-accordion/content-accordion.component.css b/src/app/new-page/component/content-accordion/content-accordion.component.css
@@ -1,3 +1,11 @@
+.accordion {
+  margin-top: 10px;
+  border-radius: 5px;
+  border: 1px solid var(--kg-gray-light);
+  background-color: var(--kg-white);
+  overflow: hidden;
+}
+
 /* Style the buttons that are used to open and close the accordion panel */
 .accordion-header {
   background-color: #eee;
@@ -7,55 +15,53 @@
   width: 100%;
   text-align: left;
   font-size: 16px;
+  font-family:
+    Source Sans Pro,
+    sans-serif !important;
   border: none;
   outline: none;
   transition: 0.4s;
-  color: var(--kg-white);
-  background-color: var(--kg-blue);
-  transition: all 0.3s ease 0s;
+  color: var(--kg-gray-dark);
+  background-color: var(--kg-gray-light);
+  transition: all 0.3s linear;
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .accordion-header:hover {
-  background-color: var(--kg-blue-light);
+  background-color: var(--kg-gray);
+  color: var(--kg-gray-dark);
+}
+.accordion-header:active {
+  background-color: var(--kg-gray-medium-dark);
 }
 
 .accordion-header i {
   position: absolute;
   right: 20px;
-  transform: translateY(-50%);
-  transition: all 0.3s ease 0s;
-  top: 50%;
+  -moz-transition: all 0.2s linear;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
 }
 
-.accordion-header i.fa-plus {
-  opacity: 1;
-}
-.accordion-header i.fa-minus {
-  opacity: 0;
-}
-
-.accordion.mw568.active .accordion-header i.fa-plus {
-  opacity: 0;
-}
-.accordion.mw568.active .accordion-header i.fa-minus {
-  opacity: 1;
+.accordion.mw568.active .accordion-header i.fa-chevron-down {
+  -ms-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 /* Style the accordion panel. Note: hidden by default */
 .accordion-content {
   padding: 0 18px;
-  background-color: white;
   max-height: 0px;
   overflow: hidden;
   transition: all 0.5s ease 0s;
-  border: 1px solid var(--kg-white);
-  background-color: var(--kg-white);
   padding: 0px 24px;
 }
 
 .accordion.active .accordion-content {
-  border: 1px solid var(--kg-blue);
   padding: 0px 24px 24px;
   max-height: 400px;
 }

diff --git a/src/app/new-page/component/content-accordion/content-accordion.component.html b/src/app/new-page/component/content-accordion/content-accordion.component.html
@@ -3,8 +3,7 @@
     <div class="accordion mw568">
       <button class="accordion-header" (click)="onClick($event)">
         {{ section.section.header.text }}
-        <i class="far fa-plus"></i>
-        <i class="far fa-minus"></i>
+        <i class="far fa-chevron-down"></i>
       </button>
       <div class="accordion-content">
         <app-content-new-repeater

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -1,13 +1,16 @@
 :root {
-  --kg-blue: #3BA4DB;
+  --kg-blue: #3ba4db;
   --kg-blue-light: #7fbfe0;
-  --kg-gray: #BEBEBE;
-  --kg-gray-light: #E6E6E6;
-  --kg-gray-dark: #5A5A5A;
-  --kg-white: #FFFFFF;
+  --kg-gray-light: #e6e6e6;
+  --kg-gray: #bebebe;
+  --kg-gray-medium-dark: #999;
+  --kg-gray-dark: #5a5a5a;
+  --kg-white: #ffffff;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -16,17 +19,26 @@ html {
 }
 body {
   margin: 0;
-  font-family: "Source Sans Pro", sans-serif !important;
+  font-family: 'Source Sans Pro', sans-serif !important;
   color: var(--kg-gray-dark);
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0 0 14.5px;
   color: var(--kg-blue);
 }
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   font-weight: 200;
 }
-h5, h6 {
+h5,
+h6 {
   font-weight: 400;
 }
 h1 {
@@ -44,7 +56,7 @@ h4 {
   font-size: 36px;
 }
 p {
-  margin:0 0 14.5px;
+  margin: 0 0 14.5px;
 }
 a {
   text-decoration: none;
@@ -140,10 +152,10 @@ img {
   margin-left: 114px;
   margin-right: 114px;
 }
-.action{
+.action {
   text-align: right;
-    font-style: italic;
-    padding-top: 10px;
+  font-style: italic;
+  padding-top: 10px;
 }
 .db {
   display: block;
@@ -173,11 +185,11 @@ img {
   height: 8px;
 }
 .fa-chevron-up {
-  transition: .2s;
+  transition: 0.2s;
 }
-.fa-chevron-up.flip{
+.fa-chevron-up.flip {
   transform: scaleY(-1);
-  transition: .2s;
+  transition: 0.2s;
 }
 .tc {
   text-align: center;
@@ -203,22 +215,22 @@ img {
 }
 
 .frame-square img {
-    width: 100%;
-    height: auto;
-    margin: auto;
-    position: absolute;
-    top: -100%;
-    right: -100%;
-    bottom: -100%;
-    left: -100%;
-  }
+  width: 100%;
+  height: auto;
+  margin: auto;
+  position: absolute;
+  top: -100%;
+  right: -100%;
+  bottom: -100%;
+  left: -100%;
+}
 
 /*CSS Colors */
 .kg-blue {
   color: var(--kg-blue);
 }
 .kg-bg-blue {
-  background-color: var(--kg-blue);  
+  background-color: var(--kg-blue);
 }
 .kg-bg-gray {
   background-color: var(--kg-gray);
@@ -247,7 +259,6 @@ img {
   cursor: pointer;
 }
 
-
 /***** Bootstrap-ish *****/
 .bs-container {
   width: 100%;
@@ -324,7 +335,7 @@ img {
   word-wrap: break-word;
   background-color: white;
   background-clip: border-box;
-  border: 0px solid rgba(0,0,0,0.125);
+  border: 0px solid rgba(0, 0, 0, 0.125);
   border-radius: 8px;
 }