Merge pull request #561 from maykinmedia/feature/1257-underline-ancho…

…rs-in-content 💄 [#1257] Underline anchors in some content
maykinmedia · Apr 12, 2023 · 8354bd0 · 8354bd0
2 parents 23cfb4d + 2025d6a
commit 8354bd0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 8 deletions.
diff --git a/src/open_inwoner/components/templates/components/Faq/Faq.html b/src/open_inwoner/components/templates/components/Faq/Faq.html
@@ -8,7 +8,7 @@
             <li class="faq__list-item">
                 {% firstof question.pk|slugify as id %}
                 {% firstof 'question-'|add:id|add:'-answer' as answer_id %}
-                {% link bold=True href='#'|add:answer_id icon='chevron_right' secondary=True text=question.question toggle="open"  %}
+                {% link bold=True href='#'|add:answer_id icon='keyboard_arrow_down' secondary=True text=question.question toggle="open"  %}
                 <div id="{{ answer_id }}" class="p faq__answer">{{ question.answer|ckeditor_content|safe }}</div>
             </li>
         {% endfor %}

diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -36,8 +36,16 @@
     transform-origin: center;
   }
 
+  .link[aria-expanded='false'] {
+    color: var(--font-color-body);
+    font-weight: normal;
+  }
+  .link[aria-expanded='true'] {
+    color: var(--color-secondary);
+  }
+
   .link[aria-expanded='true'] [class*='icon'] {
-    transform: rotate(90deg);
+    transform: rotate(180deg);
   }
 
   .faq__answer {
@@ -52,6 +60,10 @@
 
   &__answer--open {
     margin-top: var(--spacing-large) !important;
+
+    .link {
+      text-decoration: underline;
+    }
   }
 
   &__answer:not(#{&}__answer--open) {

diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss
@@ -27,8 +27,8 @@
 
   *[class*='icon'],
   *[class*='Icon'] {
-    font-size: 20px;
-    width: 20px;
+    font-size: 24px;
+    width: 24px;
   }
 
   &--icon-position-before {

diff --git a/src/open_inwoner/scss/components/Typography/LinkList.scss b/src/open_inwoner/scss/components/Typography/LinkList.scss
@@ -15,6 +15,10 @@
     white-space: nowrap;
     margin-bottom: var(--spacing-small);
 
+    .material-icons {
+      vertical-align: middle;
+    }
+
     &--wrap {
       white-space: normal;
     }

diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
@@ -39,12 +39,18 @@
 }
 
 .p .link {
+  //text-decoration: underline;
+  .content {
+    text-decoration: underline;
+  }
   &:hover {
     text-decoration: none;
   }
-
-  strong {
-    text-decoration: underline;
+  .material-icons {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
   }
 }
 
@@ -54,4 +60,9 @@
   & > .p {
     margin: 0 !important;
   }
+
+  /// leaflet reset
+  .link {
+    text-decoration: underline;
+  }
 }
diff --git a/src/open_inwoner/scss/overwrites/_ckeditor.scss b/src/open_inwoner/scss/overwrites/_ckeditor.scss
@@ -1,3 +1,13 @@
-.li .link {
+.li .link,
+.p .link {
   text-decoration: underline;
+  display: inline;
+}
+
+// Style icons separately
+.p .link *[class*='icon'] {
+  text-decoration: none;
+  transform: scale(0.75);
+  display: inline-block;
+  vertical-align: bottom;
 }