// // Grid Forms // Copyright © 2013 Kumail Hunaid // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the “Software”), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. //
_placeholder¶ ↑
&::-webkit-input-placeholder @content &:-moz-placeholder @content
_breakpoints($min, $max: false)¶ ↑
@if $max == false @media only screen and (min-width: $min) @content @else @media only screen and (min-width: $min) and (max-width: $max) @content
_clear¶ ↑
zoom: 1 &:before, &:after content: "" display: table &:after clear: both
grid-form($max-columns: 12, $font-size-large: 18px, $legend-color: lighten(#333, 5%), $field-padding: 8px, $label-font-size: 10px, $grid-border-color: #333, $label-color: #333, $field-focus-color: darken(#FFFDED, 5%))¶ ↑
// Sacrifice compatibility with IE7 and below to use the border-box model *, *:before, *:after -webkit-box-sizing: border-box -moz-box-sizing: border-box box-sizing: border-box // Fields cannot be spaced away from the grid (clear out margins/padding) // Field font sizes need to be applied here input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select font-size: $font-size-large padding: 0 margin: 0 width: 100% // Remove backgrounds and borders from fields input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea border: 0 background: transparent +_placeholder font-weight: 100 color: lighten($label-color, 15%) &:focus outline: none fieldset border: none padding: 0 margin: 0 legend border: none border-bottom: 4px solid $legend-color color: $legend-color font-size: $font-size-large font-weight: bold padding-bottom: 5px position: static width: 100% fieldset legend border-bottom: 2px solid $legend-color font-weight: normal fieldset legend border-bottom: 1px solid $legend-color font-weight: normal font-size: $font-size-large - 3px [data-row-span] border-bottom: 1px solid $grid-border-color width: 100% +_clear +_breakpoints(0, 700px) border-bottom: none [data-field-span] padding: $field-padding float: left +_breakpoints(0, 700px) border-bottom: 1px solid $grid-border-color width: 100% !important +_breakpoints(700px) border-right: 1px solid $grid-border-color display: block label:first-child margin-top: 0 text-transform: uppercase letter-spacing: 1px font-size: $label-font-size color: $label-color display: block margin-bottom: 4px &:hover cursor: text &:last-child border-right: none &:hover background: lighten($field-focus-color, 5%) cursor: text &.focus background: $field-focus-color label color: darken($label-color, 5%) // Overide styles when printing to ensure good looking output. @media print [data-row-span] display: table height: 56px page-break-inside: avoid [data-field-span] border-right: 1px solid #333333 display: table-cell float: none &.focus, &:hover background: none label:first-child letter-spacing: 0 // Create row spans for n columns in the grid @for $grid_i from 1 through $max-columns [data-row-span="#{$grid_i}"] // Each field can only span to the maximum row span // For each possible field span @for $span_i from 1 through $grid_i & > [data-field-span="#{$span_i}"] // Divide the grid by $grid_i columns // Set the width for this particular field span width: percentage($span_i/$grid_i)
// Create Grid Form .grid-form
+grid-form