feat(button): refactor hover state for text button (#234)

* style(button): redesign hover state for text button * style(button): change naming for text hover bg color
Trendyol · Sep 13, 2022 · 4ea8f5a · 4ea8f5a
1 parent a940f3f
commit 4ea8f5a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
@@ -5,6 +5,7 @@
 
   --bl-button-main-color: var(--bl-color-primary);
   --bl-button-main-hover-color: var(--bl-color-primary-hover);
+  --bl-button-text-hover-color: var(--bl-color-secondary-background);
   --bl-button-content-color: var(--bl-color-primary-background);
   --bl-button-bg-color: var(--bl-button-main-color);
   --bl-button-border-color: var(--bl-button-main-color);
@@ -111,10 +112,6 @@
   --bl-button-bg-color: transparent;
 }
 
-:host([kind='text']) .button {
-  text-decoration: underline;
-}
-
 :host([kind='outline']) {
   --bl-button-bg-color: transparent;
   --bl-button-content-color: var(--bl-button-main-color);
@@ -127,4 +124,5 @@
 
 :host([kind='text']:hover:not([disabled])) {
   --bl-button-content-color: var(--bl-button-main-hover-color);
+  --bl-button-bg-color: var(--bl-button-text-hover-color);
 }
diff --git a/src/components/input/bl-input.css b/src/components/input/bl-input.css
@@ -37,14 +37,14 @@ input:focus {
   --bl-input-border-color: var(--bl-color-primary);
 }
 
-:host([label-fixed]) bl-icon {
-  top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));
-}
-
 input:focus ~ bl-icon {
   --bl-input-icon-color: var(--bl-color-primary);
 }
 
+:host([label-fixed]) bl-icon {
+  top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));
+}
+
 :host ::placeholder {
   color: var(--bl-color-content-tertiary);
 }