assets/buttons: adding better focus behaviour for button light //list…

…-item: rm link styling as list items are nolonger links
liqd · Dec 28, 2021 · bae3e3b · bae3e3b
1 parent 291b53f
commit bae3e3b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -481,11 +481,6 @@ <h2 id="cl-breadcrumbs">Breadcrumbs</h2>
             <h2 id="cl-buttons">Buttons</h2>
 
             <div class="cl-example">
-                <p>
-                    <button class="btn" type="button">Button</button>
-                    <input class="btn" type="button" value="Input Button" />
-                    <a class="btn" href="#">Link as Button</a>
-                </p>
                 <p>
                     <button class="btn btn--light" type="button">Light Button</button>
                     <button class="btn btn--transparent" type="button">Transparent Button</button>
@@ -503,6 +498,8 @@ <h2 id="cl-buttons">Buttons</h2>
                 <p>
                     <button class="btn btn--link" type="button">Button as Link</button>
                     <button class="btn btn--none" type="button">No Button</button>
+                    <a class="btn btn--link" href="#" type="button">Link as Button</a>
+                    <a class="btn btn--link is-disabled" type="button" href="">Link Button disabled</a>
                 </p>
                 <p>
                     <button class="btn btn--select" type="button">Select Button <i class="fa fa-caret-down" aria-hidden="true"></i></button>

diff --git a/meinberlin/assets/scss/components/_button.scss b/meinberlin/assets/scss/components/_button.scss
@@ -68,13 +68,16 @@
     @include button-color($body-bg, $bg-secondary);
 
     &,
-    &:focus,
-    &:hover,
-    &:active,
     &:disabled,
     &.is-disabled {
         border-color: $border-color;
     }
+
+    &:focus,
+    &:hover,
+    &:active {
+        border-color: $idea-remark-color;
+    }
 }
 
 .btn--transparent {
@@ -109,19 +112,21 @@
     background-color: transparent;
 
     color: $link-color;
-    text-decoration: underline;
+    text-decoration: underline !important;
     font-weight: normal;
+    cursor: pointer;
 
     &:hover,
     &:focus {
-        color: $link-hover-color;
+        color: $link-hover-color !important;
         border-color: transparent;
         background-color: transparent;
     }
 
-    &.is-disabled,
-    &:disabled {
-        color: $text-color;
+    &.is-disabled {
+        color: $text-color !important;
+        border-color: transparent;
+        background-color: transparent;
         cursor: not-allowed;
     }
 }

diff --git a/meinberlin/assets/scss/components/_list_item.scss b/meinberlin/assets/scss/components/_list_item.scss
@@ -6,18 +6,6 @@
     background-color: $body-bg;
     margin-bottom: $em-spacer;
     page-break-inside: avoid;
-
-    &.selected {
-        background-color: $bg-secondary;
-    }
-
-    &.selected:focus {
-        outline: none;
-    }
-
-    // &:hover:not(.no-hover) {
-    //     background-color: mix($body-bg, $bg-secondary);
-    // }
 }
 
 .list-item--squashed {