Icons in the new login are not displayed correctly #22

cuba-platform · Apr 20, 2020 · a647f6c · a647f6c
1 parent 58c068b
commit a647f6c
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 8 deletions.
diff --git a/modules/web/themes/helium/app/global.scss b/modules/web/themes/helium/app/global.scss
@@ -34,13 +34,21 @@
     @include he-select-size-style();
   }
 
+  .v-caption {
+    @include he-caption-size-style();
+  }
+  @include he-caption-inline-icon-style();
+
   &.small {
     &.v-app,
     &.v-app-loading {
       font-size: $v-font-size--small;
     }
 
-    @include he-caption-size-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
+    .v-caption {
+      @include he-caption-size-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
+    }
+    @include he-caption-inline-icon-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
 
     select {
       @include he-select-size-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
@@ -53,31 +61,43 @@
       font-size: $v-font-size--large;
     }
 
-    @include he-caption-size-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
+    .v-caption {
+      @include he-caption-size-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
+    }
+    @include he-caption-inline-icon-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
 
     select {
       @include he-select-size-style($unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
     }
   }
 
   .small {
-    @include he-caption-size-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
+    .v-caption {
+      @include he-caption-size-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
+    }
+    @include he-caption-inline-icon-style($unit-size: $v-unit-size--small, $font-size: $v-caption-font-size--small);
 
     select {
       @include he-select-size-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
     }
   }
 
   .medium {
-    @include he-caption-size-style($unit-size: $v-unit-size, $font-size: $v-caption-font-size);
+    .v-caption {
+      @include he-caption-size-style($unit-size: $v-unit-size, $font-size: $v-caption-font-size);
+    }
+    @include he-caption-inline-icon-style($unit-size: $v-unit-size, $font-size: $v-caption-font-size);
 
     select {
       @include he-select-size-style($unit-size: $v-unit-size, $font-size: $v-font-size);
     }
   }
 
   .large {
-    @include he-caption-size-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
+    .v-caption {
+      @include he-caption-size-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
+    }
+    @include he-caption-inline-icon-style($unit-size: $v-unit-size--large, $font-size: $v-caption-font-size--large);
 
     select {
       @include he-select-size-style($unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
@@ -87,9 +107,8 @@
 
 @mixin he-caption-size-style($unit-size : $v-unit-size,
                              $font-size : $v-caption-font-size) {
-  .v-caption {
-    font-size: $font-size;
-  }
+  font-size: $font-size;
+  padding-bottom: 0;
 
   .v-icon + .v-captiontext,
   .v-icon + span {
@@ -101,4 +120,47 @@
                             $font-size  : null) {
   font-size: $font-size;
   padding: round($unit-size / 6);
+}
+
+@mixin he-caption-inline-icon-style($unit-size  : $v-unit-size,
+                                    $font-size  : $v-font-size) {
+  .v-slot-inline-icon {
+    .v-caption-inline-icon {
+      & > .v-icon {
+        // Move the icon if a field has a caption
+        &:not(:only-child) {
+          $caption-font-height: $font-size * $v-line-height;
+          margin-top: $caption-font-height;
+        }
+      }
+
+      & > span.v-icon {
+        padding-left: 0; // get rid of cuba padding
+      }
+    }
+  }
+
+  .v-caption-inline-icon {
+    @include he-caption-size-style($unit-size: $unit-size, $font-size: $font-size);
+
+    .v-icon + .v-captiontext,
+    .v-icon + span {
+      margin-left: 0;
+    }
+
+    .v-captiontext {
+      // override vaadin styles
+      font-size: $font-size;
+      padding: 0;
+    }
+
+    // Font icons
+    span.v-icon {
+      width: $unit-size;
+      line-height: $unit-size;
+      font-size: $font-size;
+
+      margin-left: first-number(he-border());
+    }
+  }
 }
diff --git a/modules/web/themes/helium/components/textfield/textfield.scss b/modules/web/themes/helium/components/textfield/textfield.scss
@@ -86,6 +86,10 @@
   } @else {
     padding: he-input-padding($unit-size);
   }
+
+  &.inline-icon {
+    padding-left: $unit-size;
+  }
 }
 
 @function he-input-padding($unit-size: $v-unit-size) {