fix(list): replace icon (#489)

atinc · Jan 8, 2020 · af14511 · af14511
1 parent 692142c
commit af14511
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/src/core/option/list-option.component.html b/src/core/option/list-option.component.html
@@ -1,7 +1,7 @@
 <ng-content></ng-content>
 <span class="checked-icon" *ngIf="parentSelectionList.multiple && parentSelectionList.layout === 'list'">
-  <i class="wtf wtf-checked"></i>
+  <thy-icon thyIconName="check"></thy-icon>
 </span>
 <span *ngIf="parentSelectionList.layout === 'grid'" class="checked-icon">
-  <i class="wtf wtf-accepted"></i>
+  <thy-icon thyIconName="check-circle-fill"></thy-icon>
 </span>
diff --git a/src/core/option/module.ts b/src/core/option/module.ts
@@ -11,9 +11,10 @@ import { CommonModule } from '@angular/common';
 
 import { ThyListOptionComponent } from './list-option.component';
 import { ThyOptionGroupComponent } from './option-group.component';
+import { ThyIconModule } from '../../icon';
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, ThyIconModule],
     exports: [ThyListOptionComponent, ThyOptionGroupComponent],
     declarations: [ThyListOptionComponent, ThyOptionGroupComponent]
 })

diff --git a/src/core/option/option.mixin.scss b/src/core/option/option.mixin.scss
@@ -179,13 +179,11 @@ $option-disabled-color: $gray-400 !default;
             position: absolute;
             right: 10px;
             top: 10px;
-            height: 20px;
-            width: 20px;
-            line-height: 20px;
-            color: $white;
-            background: $primary;
-            border-radius: 50%;
+            color: $primary;
             text-align: center;
+            .thy-icon {
+                font-size: 20px;
+            }
         }
 
         &:not(.disabled) {
@@ -205,7 +203,7 @@ $option-disabled-color: $gray-400 !default;
 
                 &.hover,
                 &:hover {
-                    background: $white;
+                    // background: $white;
                     border-color: $primary;
                 }
             }
@@ -219,7 +217,7 @@ $option-disabled-color: $gray-400 !default;
             &.active {
                 .checked-icon {
                     visibility: visible;
-                    background: $gray-400;
+                    color: $gray-400;
                 }
             }
         }