materia: fix small and large input addons, closes #819

thomaspark · Apr 16, 2018 · c641b1e · c641b1e
1 parent 7ee8fc6
commit c641b1e
Show file tree

Hide file tree

Showing 6 changed files with 258 additions and 2 deletions.
diff --git a/dist/materia/_bootswatch.scss b/dist/materia/_bootswatch.scss
@@ -411,6 +411,75 @@ select.form-control {
   }
 }
 
+.input-group {
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: 0.25rem;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: 0.25rem;
+  }
+
+  .form-control {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+}
+
+.input-group-sm {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: $input-btn-padding-x-sm;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-sm;
+    border-bottom-left-radius: $btn-border-radius-sm;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-sm;
+    border-bottom-right-radius: $btn-border-radius-sm;
+  }
+}
+
+.input-group-lg {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: $input-btn-padding-x-lg;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-lg;
+    border-bottom-left-radius: $btn-border-radius-lg;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-lg;
+    border-bottom-right-radius: $btn-border-radius-lg;
+  }
+}
+
+
 .form-group-lg {
   select,
   select.form-control {

diff --git a/dist/materia/bootstrap.css b/dist/materia/bootstrap.css
@@ -10627,6 +10627,65 @@ select.form-control[multiple] {
   background-color: transparent;
 }
 
+.input-group > .input-group-prepend > .input-group-text {
+  padding-right: 0.25rem;
+}
+
+.input-group > .input-group-append > .input-group-text {
+  padding-left: 0.25rem;
+}
+
+.input-group .form-control {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: 0.25rem 0.5rem;
+}
+
+.input-group-sm > .input-group-prepend > .input-group-text {
+  padding-right: 0.5rem;
+}
+
+.input-group-sm > .input-group-append > .input-group-text {
+  padding-left: 0.5rem;
+}
+
+.input-group-sm > .input-group-prepend > .btn {
+  border-top-left-radius: 0.2rem;
+  border-bottom-left-radius: 0.2rem;
+}
+
+.input-group-sm > .input-group-append > .btn {
+  border-top-right-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
+}
+
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: 0.5rem 1rem;
+}
+
+.input-group-lg > .input-group-prepend > .input-group-text {
+  padding-right: 1rem;
+}
+
+.input-group-lg > .input-group-append > .input-group-text {
+  padding-left: 1rem;
+}
+
+.input-group-lg > .input-group-prepend > .btn {
+  border-top-left-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
+}
+
+.input-group-lg > .input-group-append > .btn {
+  border-top-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
+}
+
 .form-group-lg select,
 .form-group-lg select.form-control {
   line-height: 1.5;

diff --git a/dist/materia/bootstrap.min.css b/dist/materia/bootstrap.min.css
diff --git a/docs/4/materia/_bootswatch.scss b/docs/4/materia/_bootswatch.scss
@@ -411,6 +411,75 @@ select.form-control {
   }
 }
 
+.input-group {
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: 0.25rem;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: 0.25rem;
+  }
+
+  .form-control {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+}
+
+.input-group-sm {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: $input-btn-padding-x-sm;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-sm;
+    border-bottom-left-radius: $btn-border-radius-sm;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-sm;
+    border-bottom-right-radius: $btn-border-radius-sm;
+  }
+}
+
+.input-group-lg {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: $input-btn-padding-x-lg;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-lg;
+    border-bottom-left-radius: $btn-border-radius-lg;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-lg;
+    border-bottom-right-radius: $btn-border-radius-lg;
+  }
+}
+
+
 .form-group-lg {
   select,
   select.form-control {

diff --git a/docs/4/materia/bootstrap.css b/docs/4/materia/bootstrap.css
@@ -10627,6 +10627,65 @@ select.form-control[multiple] {
   background-color: transparent;
 }
 
+.input-group > .input-group-prepend > .input-group-text {
+  padding-right: 0.25rem;
+}
+
+.input-group > .input-group-append > .input-group-text {
+  padding-left: 0.25rem;
+}
+
+.input-group .form-control {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: 0.25rem 0.5rem;
+}
+
+.input-group-sm > .input-group-prepend > .input-group-text {
+  padding-right: 0.5rem;
+}
+
+.input-group-sm > .input-group-append > .input-group-text {
+  padding-left: 0.5rem;
+}
+
+.input-group-sm > .input-group-prepend > .btn {
+  border-top-left-radius: 0.2rem;
+  border-bottom-left-radius: 0.2rem;
+}
+
+.input-group-sm > .input-group-append > .btn {
+  border-top-right-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
+}
+
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: 0.5rem 1rem;
+}
+
+.input-group-lg > .input-group-prepend > .input-group-text {
+  padding-right: 1rem;
+}
+
+.input-group-lg > .input-group-append > .input-group-text {
+  padding-left: 1rem;
+}
+
+.input-group-lg > .input-group-prepend > .btn {
+  border-top-left-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
+}
+
+.input-group-lg > .input-group-append > .btn {
+  border-top-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
+}
+
 .form-group-lg select,
 .form-group-lg select.form-control {
   line-height: 1.5;

diff --git a/docs/4/materia/bootstrap.min.css b/docs/4/materia/bootstrap.min.css