From 7a49218515236263500473bae362eecfd8884435 Mon Sep 17 00:00:00 2001
From: Gleb Mazovetskiy <glex.spb@gmail.com>
Date: Sun, 9 Aug 2020 09:11:29 +0100
Subject: rake update[a1708ec2a38d331c4c9eacac08ce9c9839649476]

---
 .../stylesheets/bootstrap/forms/_input-group.scss  | 140 +++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 assets/stylesheets/bootstrap/forms/_input-group.scss

(limited to 'assets/stylesheets/bootstrap/forms/_input-group.scss')

diff --git a/assets/stylesheets/bootstrap/forms/_input-group.scss b/assets/stylesheets/bootstrap/forms/_input-group.scss
new file mode 100644
index 0000000..c8e86ce
--- /dev/null
+++ b/assets/stylesheets/bootstrap/forms/_input-group.scss
@@ -0,0 +1,140 @@
+//
+// Base styles
+//
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // For form validation feedback
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-select,
+  > .form-file {
+    position: relative; // For focus state's z-index
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+  }
+
+  // Bring the "active" form control to the top of surrounding elements
+  > .form-control:focus,
+  > .form-select:focus,
+  > .form-file .form-file-input:focus ~ .form-file-label {
+    z-index: 3;
+  }
+
+  // Bring the custom file input above the label
+  > .form-file {
+    > .form-file-input:focus {
+      z-index: 4;
+    }
+
+    &:not(:last-child) > .form-file-label {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) > .form-file-label {
+      @include border-left-radius(0);
+    }
+  }
+
+  // Ensure buttons are always above inputs for more visually pleasing borders.
+  // This isn't needed for `.input-group-text` since it shares the same border-color
+  // as our inputs.
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+}
+
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: $input-padding-y $input-padding-x;
+  @include font-size($input-font-size); // Match inputs
+  font-weight: $font-weight-normal;
+  line-height: $input-line-height;
+  color: $input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+  @include border-radius($input-border-radius);
+}
+
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control {
+  min-height: $input-height-lg;
+}
+
+.input-group-lg > .form-select {
+  height: $input-height-lg;
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control {
+  min-height: $input-height-sm;
+}
+
+.input-group-sm > .form-select {
+  height: $input-height-sm;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
+
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+  > .dropdown-toggle:nth-last-child(n + 3) {
+    @include border-right-radius(0);
+  }
+
+  > :not(:first-child):not(.dropdown-menu) {
+    margin-left: -$input-border-width;
+    @include border-left-radius(0);
+  }
+}
-- 
cgit v1.2.3