fix styling for 'Date and Time', 'Buttons', 'US Address Template'

orbeon · Oct 22, 2022 · e40305f · e40305f
1 parent 9c8bc8b
commit e40305f
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 21 deletions.
diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-bootstrap5-override.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-bootstrap5-override.less
@@ -67,6 +67,12 @@
   text-decoration: underline !important;
 }
 
+// form controls > Buttons
+.fr-grid-body .fr-grid-1-2 .btn-link {
+  border: 1px solid transparent;
+  background-color: white;
+}
+
 // home button
 .xforms-trigger-appearance-full .btn {
   color: #000;
@@ -189,7 +195,14 @@
     outline: 0 none !important;
   }
 
-  #message-section≡grid-2-grid≡topic-control≡select1≡≡c, #fr-view-component≡typed-controls-section≡grid-3-grid≡us-state-control≡select1≡≡c {
+  #message-section≡grid-2-grid≡topic-control≡select1≡≡c, #fr-view-component≡typed-controls-section≡grid-3-grid≡us-state-control≡select1≡≡c,
+  #fr-view-component≡us-address-control≡xf-2183≡grid-1-grid≡state-control≡select1≡≡c {
     height: 28px;
+
+  }
+
+  // form control > US Address Template
+  .fr-grid-body .xforms-label:before {
+    color: #B94A48;
   }
 }
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/date/date.less b/form-runner/jvm/src/main/assets/xbl/orbeon/date/date.less
@@ -24,10 +24,8 @@
         // Don't show input-group-text on iOS, rely on native widget
         .input-group-addon { display: none }
     }
-}
-// .input-group .xforms-input-input {
-//     max-width: 130px;
-//   }
-// .input-group-text {
-//     padding: 0.1rem 0.3rem !important;
-// }
+
+    #fr-view-component≡date-time-controls-section≡grid-4-grid≡date-control≡input {
+        border-radius: 4px 0 0 4px !important;
+    }
+}
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/datetime/datetime.less b/form-runner/jvm/src/main/assets/xbl/orbeon/datetime/datetime.less
@@ -27,5 +27,9 @@
 
         .xbl-fr-date { padding-right : 2px }
         .xbl-fr-time { padding-left  : 2px }
+
+        #fr-view-component≡date-time-controls-section≡grid-4-grid≡datetime-control≡date≡input {
+            border-radius: 4px 0 0 4px !important;
+        }
     }
 }
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/dropdown-date/dropdown-date.less b/form-runner/jvm/src/main/assets/xbl/orbeon/dropdown-date/dropdown-date.less
@@ -3,5 +3,8 @@
         .fr-component-group .xforms-select1-appearance-minimal select {
             width: auto;
         }
+        #fr-view-component≡date-time-controls-section≡grid-4-grid≡dropdown-date-control≡select1≡≡c, #fr-view-component≡date-time-controls-section≡grid-4-grid≡dropdown-date-control≡xf-1467≡≡c, #fr-view-component≡date-time-controls-section≡grid-4-grid≡dropdown-date-control≡xf-1474≡≡c {
+            height: 28px;
+        }
     }
 }
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/fields-date/fields-date.less b/form-runner/jvm/src/main/assets/xbl/orbeon/fields-date/fields-date.less
@@ -22,16 +22,27 @@
             input { display: none ; }
             display: inline-block;
             vertical-align: middle;
-            .add-on {
-                // Rounded corners on all sides, not just right side
-                border-radius: 4px 4px 4px 4px;
-                // Center calendar icon
-                padding: 3px 6px 5px 6px;
+            // .input-group-text {
+            //     // Rounded corners on all sides, not just right side
+            //     border-radius: 4px 4px 4px 4px;
+            //     // Center calendar icon
+            //     padding: 3px 6px 5px 6px;
+            // }
+            .input-group-addon {
+                height: 28px;
+                border-radius: 4px 4px 4px 4px !important;
+                margin-top: -3px;
             }
         }
     }
 
     // For use outside of Form Runner
-    .fr-width-2digits .xforms-input-input { width: 29px }
-    .fr-width-4digits .xforms-input-input { width: 43px }
+    .fr-width-2digits .xforms-input-input { 
+        width: 29px;
+        padding-left: 5px; 
+    }
+    .fr-width-4digits .xforms-input-input { 
+        width: 55px !important;
+        padding-left: 6px; 
+     }
 }
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/time/time.less b/form-runner/jvm/src/main/assets/xbl/orbeon/time/time.less
@@ -1,8 +1,12 @@
 .xbl-fr-time {
-    .orbeon .fr-grid & .input-append .xforms-input .xforms-type-time {
+    .input-group {
+        flex-wrap: nowrap !important;
+    }
+
+    .xforms-input .xforms-type-time {
         // Override CSS we still kept for pre-2018.2 date/time controls
-        background-image: none;
-        width: 100%;
+        background-image: none !important;
+        width: 100% !important;
     }
 
     .fr-field-width-natural {
@@ -11,6 +15,6 @@
 
     .xforms-ios & {
         // Don't show add-on on iOS, rely on native widget
-        .add-on { display: none }
+        .input-group-text { display: none }
     }
 }
diff --git a/form-runner/jvm/src/main/resources/xbl/orbeon/time/time.xbl b/form-runner/jvm/src/main/resources/xbl/orbeon/time/time.xbl
@@ -161,11 +161,11 @@
                 "/>
 
             <xf:group ref="$binding[not($view)]">
-                <xh:div class="input-append fr-field-width-{$field-width}">
+                <xh:div class="input-group fr-field-width-{$field-width}">
                     <xf:input ref="." id="fr-time-input">
                         <xf:hint value="$placeholder" appearance="minimal"/>
                     </xf:input>
-                    <xh:span class="add-on">
+                    <xh:span class="input-group-text">
                         <xh:i class="fa fa-fw fa-clock-o"/>
                     </xh:span>
                 </xh:div>