diff --git a/dist/ratchet.css b/dist/ratchet.css
index 25fdd3a..5a4f41e 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -492,10 +492,12 @@ input[type="color"],
input[type=search] {
height: 34px;
+ padding: 0 10px;
font-size: 14px;
border-radius: 6px;
border-width: 0;
background-color: rgba(0, 0, 0, 0.1);
+ box-sizing: border-box;
}
textarea {
@@ -515,6 +517,9 @@ select {
width: auto;
height: auto;
padding: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
}
.input-group input {
@@ -541,9 +546,9 @@ select {
.input-row label {
float: left;
- width: 25%;
+ width: 35%;
padding: 11px 10px 9px 13px;
- font-weight: bold;
+ font-weight: 600;
}
.input-row label + input {
@@ -554,7 +559,7 @@ select {
border-bottom: 0;
}
-.bar-standard input[type=search] {
+[class*="bar-"] input[type=search] {
height: 32px;
margin: 0;
}
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 1df39e4..9904951 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -691,6 +691,11 @@ h6 {
margin: 10px;
}
+#formsWithInputGroupInPhone form,
+#formsWithInputGroupAndLabelsInPhone form {
+ margin: 10px 0;
+}
+
/* Footer
-------------------------------------------------- */
diff --git a/docs/index.html b/docs/index.html
index 984fb45..4d73feb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -815,7 +815,7 @@
- Choose existing
+ Choose existing
@@ -824,7 +824,7 @@
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
- <a class="button button-block">Choose existing</a>
+ <a class="button-positive button-block button-filled">Choose existing</a>
</form>
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index 4107b4f..b302f14 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -43,10 +43,12 @@ input[type="color"],
// Fully round search input
input[type=search] {
height: 34px;
+ padding: 0 10px;
font-size: 14px;
border-radius: 6px;
border-width: 0;
background-color: rgba(0,0,0,.1);
+ box-sizing: border-box; // Override content-box in normalize
}
// Allow text area's height to grow larger than a normal input
@@ -73,6 +75,9 @@ select {
width: auto;
height: auto;
padding: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
}
// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
@@ -108,9 +113,9 @@ select {
// Labels get floated left with a set percentage width
.input-row label {
float: left;
- width: 25%;
+ width: 35%;
padding: 11px 10px 9px 13px; // Optimizing the baseline for mobile.
- font-weight: bold;
+ font-weight: $font-weight-bold;
}
// Actual inputs float to right of labels and also have a set percentage
@@ -127,7 +132,7 @@ select {
// --------------------------------------------------
// Position/size search bar within the bar
-.bar-standard input[type=search] {
+[class*="bar-"] input[type=search] {
height: 32px;
margin: 0;
}
\ No newline at end of file