fix(ui/button): increase icon size

ngx-kit · Oct 27, 2018 · d4af6a8 · d4af6a8
1 parent 4701d2f
commit d4af6a8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/projects/ui/src/lib/ui-button/ui-button/ui-button.component.html b/projects/ui/src/lib/ui-button/ui-button/ui-button.component.html
@@ -1,9 +1,11 @@
 <kit-icon *ngIf="icon && !loading"
           [name]="icon"
+          size="1.5em"
           class="icon">
 </kit-icon>
 <kit-icon *ngIf="loading"
           name="loading-7"
+          size="1.5em"
           class="icon">
 </kit-icon>
 <span class="content">

diff --git a/projects/ui/src/lib/ui-button/ui-button/ui-button.component.scss b/projects/ui/src/lib/ui-button/ui-button/ui-button.component.scss
@@ -7,7 +7,7 @@
   box-sizing: border-box;
   color: var(--color);
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   font-weight: 400;
   line-height: 1.42857;
   margin-bottom: 0;
@@ -18,9 +18,16 @@
   transition-duration: var(--transition);
   transition-property: background, box-shadow;
   user-select: none;
-  vertical-align: middle;
+  vertical-align: top;
   white-space: nowrap;
 
+  .content {
+    line-height: 1.5;
+  }
+  .icon + .content:not(:empty) {
+    padding-left: var(--grid);
+  }
+
   &:hover {
     background: var(--hoverBackground);
     box-shadow: var(--shadow);
@@ -181,7 +188,4 @@
       }
     }
   }
-  .icon + .content:not(:empty) {
-    padding-left: var(--grid);
-  }
 }