assets/follow: update classes to match refactor, add a4 prefix, corre…

…ct font name
liqd · Feb 5, 2024 · 3981406 · 3981406
1 parent 04eb04e
commit 3981406
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/adhocracy-plus/assets/scss/_utility.scss b/adhocracy-plus/assets/scss/_utility.scss
@@ -159,6 +159,10 @@
     color: $text-muted;
 }
 
+.a4-sr-only {
+    @extend .visually-hidden;
+}
+
 // FIXME BS5.1 changed text- and bg- classes are created requires additional SASS map
 .text-info {
     color: $brand-info;

diff --git a/adhocracy-plus/assets/scss/components/_accordion.scss b/adhocracy-plus/assets/scss/components/_accordion.scss
@@ -42,7 +42,7 @@
 
     a[href^="/documents"]:before {
         content: "\f016"; // file-o
-        font-family: "FontAwesome", sans-serif;
+        font-family: "Font Awesome 5 Free", sans-serif;
         font-weight: 900;
         margin-right: 0.3em;
     }

diff --git a/adhocracy-plus/assets/scss/components/_button.scss b/adhocracy-plus/assets/scss/components/_button.scss
@@ -43,7 +43,8 @@
     margin-bottom: 0;
 }
 
-.btn {
+.btn,
+.a4-btn {
     @extend %button-base;
 
     &:disabled,

diff --git a/adhocracy-plus/assets/scss/components/_follow.scss b/adhocracy-plus/assets/scss/components/_follow.scss
@@ -1,20 +1,33 @@
-.follow__notification {
+.a4-follow__notification {
     .alert {
         margin-top: $r-spacer;
     }
 }
 
-// nasty overwrite, needs to be changed in a4
+.a4-btn--follow:before,
+.a4-btn--following:before {
+    font-family: "Font Awesome\ 5 Free", sans-serif;
+    font-weight: 900;
+    margin-right: 0.3em;
+}
+
+.a4-btn--follow:before {
+    content: "\f067"; // plus
+}
+
+.a4-btn--following:before {
+    content: "\f00c"; // check
+}
 
-.follow > .btn--light,
-.follow > .btn--primary {
+.a4-btn--follow,
+.a4-btn--following {
     background-color: transparent;
     border: none;
 }
 
 .project-header--image {
-    .follow > .btn--light,
-    .follow > .btn--primary {
+    .a4-btn--follow,
+    .a4-btn--following {
         color: $white;
         background-color: transparent;
         border: none;