Merge pull request #810 from valadas/dnn-input-sizing

Fixed a sizing/positioning issue with dnn-select and dnn-input
DNNCommunity · Aug 23, 2023 · affc9b8 · affc9b8
2 parents 6558c0e + 8fdc69e
commit affc9b8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/packages/stencil-library/src/components/dnn-input/dnn-input.scss b/packages/stencil-library/src/components/dnn-input/dnn-input.scss
@@ -23,7 +23,7 @@
 .container{
   border: 1px solid var(--foreground, #000);
   border-radius: var(--control-radius, 3px);
-  padding: 0.75rem;
+  padding: 0.75em;
   display: flex;
   justify-content: space-between;
   gap: 0.1em;
@@ -43,12 +43,12 @@
     transition: all 150ms ease-in-out;
     left: 0;
     top: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.5em;
     background-color: var(--background);
     white-space: nowrap;
     max-width: 100%;
     border-radius: var(--control-radius);
-    font-size: 1rem;
+    font-size: 1em;
   }
   input{
     border: none;
@@ -67,8 +67,8 @@
     }
     label{
       opacity: 1;
-      left: 0.5rem;
-      top: -1.25rem;
+      left: 0.5em;
+      top: -1.25em;
     }
     input{
       color: var(--foreground, #000);
@@ -77,8 +77,8 @@
   &.has-value{
     label{
       opacity: 1;
-      left: 0.5rem;
-      top: -1.25rem;
+      left: 0.5em;
+      top: -1.25em;
     }
     input{
       color: var(--foreground, #000);
@@ -95,22 +95,22 @@
 .help-text, .error-message{
   font-style: italic;
   opacity: 0.7;
-  font-size: 0.8rem;
-  margin: 0.25rem;
+  font-size: 0.8em;
+  margin: 0.25em;
 }
 .error-message{
   color: var(--danger-color);
   font-style: normal;
   font-weight: bold;
 }
 .prefix, .suffix{
-  font-size: 0.8rem;
+  font-size: 0.8em;
 }
 svg{
   &.error{
     fill: red;
-    width: 1rem;
-    height: 1rem;
+    width: 1em;
+    height: 1em;
     transform: scale(1.5);
   }
 }
@@ -120,7 +120,7 @@ button.show-password{
   margin: 0;
   padding: 0;
   svg{
-    height: 1rem;
+    height: 1em;
     width: auto;
     fill: var(--foreground);
     transform: scale(1.5);

diff --git a/packages/stencil-library/src/components/dnn-select/dnn-select.scss b/packages/stencil-library/src/components/dnn-select/dnn-select.scss
@@ -23,10 +23,10 @@
 .container{
   border: 1px solid var(--foreground, #000);
   border-radius: var(--control-radius, 3px);
-  padding: 0.75rem;
+  padding: 0.75em;
   display: flex;
   justify-content: space-between;
-  gap: 0.1rem;
+  gap: 0.1em;
   position: relative;
   background-color: var(--background);
   .inner-container{
@@ -43,12 +43,12 @@
     transition: all 150ms ease-in-out;
     left: 0;
     top: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.5em;
     background-color: var(--background);
     white-space: nowrap;
     max-width: 100%;
     border-radius: var(--control-radius);
-    font-size: 1rem;
+    font-size: 1em;
   }
   select{
     border: none;
@@ -60,8 +60,8 @@
   }
   label{
     opacity: 1;
-    left: 0.5rem;
-    top: -1.25rem;
+    left: 0.5em;
+    top: -1.25em;
   }
   &.focused{
     border: 1px solid var(--focus-color);
@@ -83,22 +83,22 @@
 .help-text, .error-message{
   font-style: italic;
   opacity: 0.7;
-  font-size: 0.8rem;
-  margin: 0.25rem;
+  font-size: 0.8em;
+  margin: 0.25em;
 }
 .error-message{
   color: var(--danger-color);
   font-style: normal;
   font-weight: bold;
 }
 .prefix, .suffix{
-  font-size: 0.8rem;
+  font-size: 0.8em;
 }
 svg{
   &.error{
     fill: red;
-    width: 1rem;
-    height: 1rem;
+    width: 1em;
+    height: 1em;
     transform: scale(1.5);
   }
 }