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