playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fixing up forms a bit.

pull/231/head
connors 11 years ago
parent
59536556f6
commit
94c267cc15
2 changed files with 20 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      dist/ratchet.css
  2. 15
      lib/sass/forms.scss

19
dist/ratchet.css vendored
Unescape View File

@ -537,6 +537,7 @@ input[type="color"],
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px; border-radius: 3px;
@ -584,31 +585,35 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; background-image: none;
} }
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; background-image: none;
} }
.input-row label { .input-row label {
float: left; float: left;
width: 35%; width: 35%;
padding: 11px 10px 9px 15px; padding: 10px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: 500; line-height: 1.1;
} }
.input-row label + input { .input-row label + input {
@ -616,7 +621,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; background-image: none;
} }
[class*="bar-"] input[type=search] { [class*="bar-"] input[type=search] {

15
lib/sass/forms.scss
Unescape View File

@ -33,6 +33,7 @@ input[type="color"],
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: $line-height-default;
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px; border-radius: 3px;
@ -87,14 +88,14 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0; border-radius: 0;
@include box-shadow(none); @include box-shadow(none);
@include hairline(single, #c8c7cc, 320px, 15px);
} }
// Remove bottom border on last input to avoid double bottom border // Remove bottom border on last input to avoid double bottom border
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; background-image: none;
} }
// Input groups with labels // Input groups with labels
@ -104,21 +105,21 @@ select {
// To use labels with input groups, wrap a label and an input in an .input-row // To use labels with input groups, wrap a label and an input in an .input-row
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, .2); @include hairline(single, #c8c7cc, 320px, 15px);
} }
// Remove bottom border on last input-row to avoid double bottom border // Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; background-image: none;
} }
// Labels get floated left with a set percentage width // Labels get floated left with a set percentage width
.input-row label { .input-row label {
float: left; float: left;
width: 35%; width: 35%;
padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile. padding: 10px 15px;
font-family: $font-family-default; font-family: $font-family-default;
font-weight: $font-weight; line-height: 1.1; // Put the text on the baseline.
} }
// Actual inputs float to right of labels and also have a set percentage // Actual inputs float to right of labels and also have a set percentage
@ -127,7 +128,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; background-image: none;
} }

Write Preview
Loading…
Cancel
Save