Fixes buefy#2219

service-paradis · Feb 10, 2020 · ef980e5 · ef980e5
1 parent 4fdbf49
commit ef980e5
Showing 1 changed file with 36 additions and 35 deletions.
diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
@@ -67,17 +67,50 @@ $floating-in-height: 3.25em !default;
 }
 
 .field {
-    &.is-floating-label {
+    &.is-floating-label,
+    &.is-floating-in-label {
         position: relative;
+
         .label {
             position: absolute;
-            top: -0.775em;
             left: 1em;
             font-size: calc(#{$size-normal} * 3 / 4);
             background-color: transparent;
+            z-index: 5;
+            &.is-small {
+                font-size: calc(#{$size-small} * 3 / 4);
+            }
+            &.is-medium {
+                font-size: calc(#{$size-medium} * 3 / 4);
+            }
+            &.is-large {
+                font-size: calc(#{$size-large} * 3 / 4);
+            }
+        }
+        .taginput .counter {
+            float: none;
+            text-align: right;
+        }
+
+        &.has-addons {
+            > .label {
+                + .control {
+                    .button,
+                    .input,
+                    .select select {
+                        border-bottom-left-radius: $input-radius;
+                        border-top-left-radius: $input-radius;
+                    }
+                }
+            }
+        }
+    }
+
+    &.is-floating-label {
+        .label {
+            top: -0.775em;
             padding-left: 0.125em;
             padding-right: 0.125em;
-            z-index: 5;
             &:before {
                 content: '';
                 display: block;
@@ -89,15 +122,6 @@ $floating-in-height: 3.25em !default;
                 background-color: $input-background-color;
                 z-index: -1;
             }
-            &.is-small {
-                font-size: calc(#{$size-small} * 3 / 4);
-            }
-            &.is-medium {
-                font-size: calc(#{$size-medium} * 3 / 4);
-            }
-            &.is-large {
-                font-size: calc(#{$size-large} * 3 / 4);
-            }
         }
         .input,
         .textarea,
@@ -113,29 +137,10 @@ $floating-in-height: 3.25em !default;
                 box-shadow: none;
             }
         }
-        .taginput .counter {
-            float: none;
-            text-align: right;
-        }
     }
     &.is-floating-in-label {
-        position: relative;
         .label {
-            position: absolute;
             top: 0.25em;
-            left: 1em;
-            font-size: calc(#{$size-normal} * 3 / 4);
-            background-color: transparent;
-            z-index: 5;
-            &.is-small {
-                font-size: calc(#{$size-small} * 3 / 4);
-            }
-            &.is-medium {
-                font-size: calc(#{$size-medium} * 3 / 4);
-            }
-            &.is-large {
-                font-size: calc(#{$size-large} * 3 / 4);
-            }
         }
         > .datepicker, > .timepicker {
             .input {
@@ -180,10 +185,6 @@ $floating-in-height: 3.25em !default;
             // 0.275em - 1px _taginput.scss
             padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2 + (0.275em - 1px));
         }
-        .taginput .counter {
-            float: none;
-            text-align: right;
-        }
 
         &.has-numberinput {
             .b-numberinput {