Merge pull request #33902 from dimagi/jt/file-upload-style

File Upload Button Style
dimagi · Jan 1, 2024 · cdf3565 · cdf3565
2 parents 8c0eada + de6b908
commit cdf3565
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/buttons.less b/corehq/apps/hqwebapp/static/hqwebapp/less/_hq/buttons.less
@@ -1,8 +1,16 @@
+@import "../../../../../../node_modules/bootstrap/less/buttons.less";
+
 .btn-primary {
   .button-variant(#ffffff; @call-to-action-mid; @call-to-action-mid);
   font-weight: bold;
 }
 
+input::file-selector-button {
+  .btn;
+  .btn-xs;
+  .btn-default;
+}
+
 .btn-default {
   .button-variant(@call-to-action-mid; #ffffff; @call-to-action-mid);
 }

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_buttons.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_buttons.scss
@@ -35,3 +35,20 @@
 .btn-outline-danger:hover {
   color: #ffffff;
 }
+
+.btn-default {
+  @include button-variant(white, $call-to-action-mid,  $call-to-action-mid);
+}
+
+.btn-group-xs > .btn, .btn-xs {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+  }
+
+input::file-selector-button {
+  @extend .btn;
+  @extend .btn-xs;
+  @extend .btn-default;
+}
diff --git a/.../hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/buttons._buttons.style.diff.txt b/.../hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/buttons._buttons.style.diff.txt
@@ -1,11 +1,19 @@
 --- 
 +++ 
-@@ -1,26 +1,5 @@
+@@ -1,34 +1,5 @@
+-@import "../../../../../../node_modules/bootstrap/less/buttons.less";
+-
 -.btn-primary {
 -  .button-variant(#ffffff; @call-to-action-mid; @call-to-action-mid);
 -  font-weight: bold;
 -}
 -
+-input::file-selector-button {
+-  .btn;
+-  .btn-xs;
+-  .btn-default;
+-}
+-
 -.btn-default {
 -  .button-variant(@call-to-action-mid; #ffffff; @call-to-action-mid);
 -}
@@ -28,7 +36,7 @@
  }
 
  .btn-full-width {
-@@ -30,25 +9,29 @@
+@@ -38,25 +9,46 @@
  // Separated button groups in toolbars need more space between them,
  // since the buttons within the group have space between them
  .btn-toolbar > .btn-group-separated:not(:first-child) {
@@ -74,3 +82,20 @@
 +.btn-outline-danger:hover {
 +  color: #ffffff;
 +}
++
++.btn-default {
++  @include button-variant(white, $call-to-action-mid,  $call-to-action-mid);
++}
++
++.btn-group-xs > .btn, .btn-xs {
++  padding: 1px 5px;
++  font-size: 12px;
++  line-height: 1.5;
++  border-radius: 3px;
++  }
++
++input::file-selector-button {
++  @extend .btn;
++  @extend .btn-xs;
++  @extend .btn-default;
++}