refactor(accordion): adjust to volto theming

eea · Feb 14, 2022 · 971fcb8 · 971fcb8
1 parent 572e655
commit 971fcb8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 149 deletions.
diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -2,171 +2,56 @@
          Theme Overrides
 *******************************/
 
-div.ui.accordion.eea-accordion .eea-accordion-item {
-  margin: @itemsMargin;
-  font-family: @titleFont;
-  transition: @styledTitleTransition;
 
-  .title {
-    display: flex;
-    align-items: center;
-    padding: 10px 19px;
-    background-color: @backrgoundColor;
-    font-family: @titleFont;
-    font-size: @h4;
-
-    i.icon {
-      display: flex;
-      width: 31px;
-      height: 31px;
-      align-items: center;
-      justify-content: center;
-      margin-right: 18px;
-      color: @iconColor;
-      font-size: 25px !important;
-      transition: @iconTransition;
-    }
-  }
-
-  div.content {
-    padding: 12px 24px;
-    border-top: @contentBorder;
-    background: @contentBckground;
-    font-family: @titleFont;
-    font-size: @fontSize;
-  }
-}
-
-/* Active accordion arrow */
-.ui.accordion.eea-accordion .eea-accordion-item .active.title i.icon {
-  transform: rotate(180deg);
-}
-
-/* Accordion content padding for unstyled */
-div.ui.accordion.eea-accordion:not(.styled)
-  .accordion
-  .title
-  ~ .content:not(.ui),
-div.ui.accordion.eea-accordion:not(.styled) .title ~ .content:not(.ui) {
-  padding: 12px 24px;
-}
-
-@media only screen and (min-width: @mobileBreakpoint + 1) and (max-width: @tabletBreakpoint) {
-  div.ui.accordion.eea-accordion .eea-accordion-item div.content,
-  div.ui.accordion.eea-accordion:not(.styled)
-    .accordion
-    .title
-    ~ .content:not(.ui),
-  div.ui.accordion.eea-accordion:not(.styled) .title ~ .content:not(.ui) {
-    padding: 12px 34px;
-  }
-
-  div.ui.accordion.eea-accordion .eea-accordion-item .title {
-    padding: 11px 25px;
-  }
-}
-
-@media only screen and (min-width: @tabletBreakpoint + 1) {
-  div.ui.accordion.eea-accordion .eea-accordion-item div.content,
-  div.ui.accordion.eea-accordion:not(.styled)
-    .accordion
-    .title
-    ~ .content:not(.ui),
-  div.ui.accordion.eea-accordion:not(.styled) .title ~ .content:not(.ui) {
-    padding: 12px 74px;
-  }
-
-  div.ui.accordion.eea-accordion .eea-accordion-item .title {
-    padding: 12px 25px;
-  }
-}
-
-/*accordion without classes*/
 
 .ui.accordion {
   margin: @itemsMargin;
-  font-family: @titleFont;
   transition: @styledTitleTransition;
 
   .title {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 19px !important;
-    border-bottom: 3px solid @silverGray;
-    background-color: #ffffff;
-    font-family: @titleFont;
-    font-size: @h4 !important;
+    border-bottom: @titleBorderBottom;
 
     &:hover {
-      color: @darkCyan;
+      color: @titleColorHover;
 
       i.icon {
-        color: @darkCyan;
+        color: @iconColorHover;
       }
     }
 
-    &.active {
-      border-bottom: none;
-      margin-top: 20px;
-      background-color: @darkCyan;
-      color: #ffffff;
-    }
-
     i.icon {
       display: flex;
-      width: 31px;
-      height: 31px;
       align-items: center;
-      justify-content: center;
-      margin-right: 18px;
-      margin-left: 10px;
-      color: @silverGray;
-      font-size: 25px !important;
-      transition: @iconTransition;
+      color: @iconColor;
+      font-size: @iconFontSize;
+      order: @iconOrder;
+      &:before {
+        content: @iconInactive;
+      }
     }
   }
 
-  .content {
-    padding: 10px 19px !important;
-    background: @contentBckground;
-    font-family: @titleFont;
-    font-size: @fontSize;
-  }
-}
-
-/* Active accordion arrow */
-.ui.accordion .active.title i.icon {
-  color: #ffffff;
-  transform: rotate(180deg) !important;
-}
-
-/* Accordion content padding for unstyled */
-div.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui),
-div.ui.accordion:not(.styled) .title ~ .content:not(.ui) {
-  padding: 12px 24px;
-}
-
-@media only screen and (min-width: @mobileBreakpoint + 1) and (max-width: @tabletBreakpoint) {
-  div.ui.accordion div.content,
-  div.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui),
-  div.ui.accordion:not(.styled) .title ~ .content:not(.ui) {
-    padding: 12px 34px;
+  .active.title {
+    border-bottom: @activeTitleBorderBottom;
+    background-color: @activeTitleBackground;
+    color: @activeTitleColor;
+    i.icon {
+      color: @iconColorActive;
+      &:before {
+        content: @iconActive;
+      }
+    }
   }
 
-  div.ui.accordion .title {
-    padding: 11px 25px;
+  .content {
+    background: @contentBackground;
   }
 }
 
-@media only screen and (min-width: @tabletBreakpoint + 1) {
-  div.ui.accordion div.content,
-  div.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui),
-  div.ui.accordion:not(.styled) .title ~ .content:not(.ui) {
-    padding-right: 74px;
-  }
-
-  div.ui.accordion .title {
-    padding: 12px 25px;
-  }
+/* All content padding are equal including last child */
+.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+  padding-bottom: @contentPaddingBottom;
 }
diff --git a/theme/themes/eea/modules/accordion.variables b/theme/themes/eea/modules/accordion.variables
@@ -7,18 +7,20 @@
 
 /* Title */
 @titleFont: @headerFont;
-@titlePadding: 0.5em 0em;
-@titleFontSize: 1em;
+@titlePadding: 1rem 1.563rem;
+@titleFontSize: 1.125rem;
 @titleColor: @textColor;
-@backrgoundColor: @silverGray;
+@titleBorderBottom: @1px solid @silverGray;
+@titleColorHover: @darkCyan;
 
 /* Icon */
-@iconColor: @secondaryColor;
+@iconColor: @oldSilver;
+@iconColorActive: @white;
 @iconOpacity: 1;
-@iconFontSize: 1em;
+@iconFontSize: 1.563rem;
 @iconFloat: none;
-@iconWidth: 1.25em;
-@iconHeight: 1em;
+@iconWidth: 1.563rem;
+@iconHeight: 1.563rem;
 @iconDisplay: inline-block;
 @iconMargin: 0em 0.25rem 0em 0rem;
 @iconPadding: 0em;
@@ -28,15 +30,20 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
+@iconColorHover: @darkCyan;
+@iconInactive: '\f078'; // Icon of closed accordion
+@iconActive: '\f077'; // Icon of open accordion
+@iconOrder: 1; // Icon after text of the title
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;
 @childAccordionPadding: 0em;
 
 /* Content */
-@contentMargin: '';
-@contentPadding: @relative16px @relative64px;
-@contentBckground: #F9F9F9;
+@contentMargin: 0;
+@contentPaddingBottom: 1.563rem;
+@contentPadding: 1rem @contentPaddingBottom;
+@contentBackground: #F9F9F9;
 
 /*-------------------
        Coupling
@@ -53,6 +60,9 @@
 --------------------*/
 
 @activeIconTransform: none;
+@activeTitleBackground: @darkCyan;
+@activeTitleColor: @white;
+@activeTitleBorderBottom: 0;
 
 /*-------------------
       Variations