Resolve "Forum 3: Iconauswahl passend stylen"

Closes #5775

Merge request studip/studip!4405

3 files changed, 41 insertions, 26 deletions

diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 63457fd..bedd67c 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -101,20 +101,10 @@ button.button {
 @mixin button-base() {
     color: var(--base-color);
     transition: color var(--transition-duration);
-
-    &:hover,
-    &:active,
-    &.active,
-    &[aria-pressed="true"] {
-        color: var(--active-color);
-        text-decoration: none;
-    }
 }
 
 button,
 .button {
-    @include button-base;
-
     &.as-link,
     &.styleless,
     &.undecorated,
@@ -129,6 +119,21 @@ button,
         margin: 0;
         padding: 0;
     }
+
+    &.as-link,
+    &.undecorated[formaction] {
+        @include button-base;
+
+        &:hover,
+        &:active {
+            color: var(--active-color);
+            text-decoration: none;
+        }
+
+        &[disabled] {
+            pointer-events: none;
+        }
+    }
 }
 
 .button-base {
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 68a5967..9e1027c 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -63,7 +63,7 @@ $card-max-width: 300px;
                 justify-content: end;
                 padding: 0;
                 &:hover {
-                    color: var(--active-color);
+                    color: var(--base-color);
                 }
             }
         }
@@ -1040,27 +1040,37 @@ $card-max-width: 300px;
         border: thin solid var(--color--button-inactive-border);
         max-width: calc(48em - 30px);
 
-        .icon {
-            border-radius: 5px;
-            padding: 0.5rem;
+        .button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10px;
+            margin: 0;
+            min-width: unset;
             cursor: pointer;
-            border: 1px solid $light-gray-color-20;
-            outline: transparent;
+            border: 1px solid var(--light-gray-color-20);
+            outline: 1px solid transparent;
             background: none;
-            transition: background-color 0.2s ease;
+            transition: all var(--transition-duration) ease;
 
-            &:hover:not(.active) {
-                background-color: $light-gray-color-20;
+            &.disabled
+            {
+                opacity: 0.5;
             }
 
-            &.disabled {
-                opacity: 0.25;
+            &:hover:not(.active),
+            &:focus:not(.active)
+            {
+                opacity: 1;
+                color: var(--base-color);
+                border-color: var(--color--focus);
+                outline: 1px solid var(--color--focus);
             }
 
             &.active {
-                border-color: $green-40;
-                outline-color: $green-40;
-                outline-style: solid;
+                color: var(--base-color);
+                border-color: var(--base-color);
+                outline: 1px solid var(--base-color);
             }
         }
     }
diff --git a/resources/vue/apps/forum/discussions_types/Edit.vue b/resources/vue/apps/forum/discussions_types/Edit.vue
index df6fa28..1d5b48b 100644
--- a/resources/vue/apps/forum/discussions_types/Edit.vue
+++ b/resources/vue/apps/forum/discussions_types/Edit.vue
@@ -64,7 +64,7 @@ const formActionURL = computed(() => {
 
                     <template v-for="icon in icons" :key="icon">
                         <button
-                            class="icon"
+                            class="button"
                             type="button"
                             :title="icon"
                             :class="{
@@ -72,7 +72,7 @@ const formActionURL = computed(() => {
                                 'active': formSate.icon === icon
                             }"
                             @click="formSate.icon = icon">
-                            <StudipIcon :shape="icon" :size="40" />
+                            <StudipIcon :shape="icon" :size="35" />
                         </button>
                     </template>
                 </div>