vendor/assets/stylesheets/purecss/forms.css in purecss-0.0.11 vs vendor/assets/stylesheets/purecss/forms.css in purecss-0.2.0
- old
+ new
@@ -1,7 +1,7 @@
/*!
-Pure v0.1.1-pre
+Pure v0.2.1-pre
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*!
@@ -156,230 +156,312 @@
.pure-form textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
-.pure-form input,
+.pure-form input[type="text"],
+.pure-form input[type="password"],
+.pure-form input[type="email"],
+.pure-form input[type="url"],
+.pure-form input[type="date"],
+.pure-form input[type="month"],
+.pure-form input[type="time"],
+.pure-form input[type="datetime"],
+.pure-form input[type="datetime-local"],
+.pure-form input[type="week"],
+.pure-form input[type="number"],
+.pure-form input[type="search"],
+.pure-form input[type="tel"],
+.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
- padding: 0.5em 0.6em;
- display: inline-block;
- border: 1px solid #ccc;
- font-size: 0.8em;
- box-shadow: inset 0 1px 3px #ddd;
- border-radius: 4px;
- -webkit-transition: 0.3s linear border;
- -moz-transition: 0.3s linear border;
- -ms-transition: 0.3s linear border;
- -o-transition: 0.3s linear border;
- transition: 0.3s linear border;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
+ padding: 0.5em 0.6em;
+ display: inline-block;
+ border: 1px solid #ccc;
+ font-size: 0.8em;
+ box-shadow: inset 0 1px 3px #ddd;
+ border-radius: 4px;
+ -webkit-transition: 0.3s linear border;
+ -moz-transition: 0.3s linear border;
+ -ms-transition: 0.3s linear border;
+ -o-transition: 0.3s linear border;
+ transition: 0.3s linear border;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
}
-.pure-form input:focus,
+.pure-form input[type="text"]:focus,
+.pure-form input[type="password"]:focus,
+.pure-form input[type="email"]:focus,
+.pure-form input[type="url"]:focus,
+.pure-form input[type="date"]:focus,
+.pure-form input[type="month"]:focus,
+.pure-form input[type="time"]:focus,
+.pure-form input[type="datetime"]:focus,
+.pure-form input[type="datetime-local"]:focus,
+.pure-form input[type="week"]:focus,
+.pure-form input[type="number"]:focus,
+.pure-form input[type="search"]:focus,
+.pure-form input[type="tel"]:focus,
+.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
- outline: 0;
- outline: thin dotted \9; /* IE6-9 */
- border-color: #129FEA;
+ outline: 0;
+ outline: thin dotted \9; /* IE6-9 */
+ border-color: #129FEA;
}
+
.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
- outline: thin dotted #333;
- outline: 1px auto #129FEA;
+ outline: thin dotted #333;
+ outline: 1px auto #129FEA;
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
- margin: 0.5em 0;
- display: block;
+ margin: 0.5em 0;
+ display: block;
}
-.pure-form input[disabled],
+.pure-form input[type="text"][disabled],
+.pure-form input[type="password"][disabled],
+.pure-form input[type="email"][disabled],
+.pure-form input[type="url"][disabled],
+.pure-form input[type="date"][disabled],
+.pure-form input[type="month"][disabled],
+.pure-form input[type="time"][disabled],
+.pure-form input[type="datetime"][disabled],
+.pure-form input[type="datetime-local"][disabled],
+.pure-form input[type="week"][disabled],
+.pure-form input[type="number"][disabled],
+.pure-form input[type="search"][disabled],
+.pure-form input[type="tel"][disabled],
+.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled],
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
- cursor: not-allowed;
- background-color: #eaeded;
- color: #cad2d3;
- border-color: transparent;
+ cursor: not-allowed;
+ background-color: #eaeded;
+ color: #cad2d3;
+ border-color: transparent;
}
.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
- color: #b94a48;
- border: 1px solid #ee5f5b;
+ color: #b94a48;
+ border: 1px solid #ee5f5b;
}
.pure-form input:focus:invalid:focus,
.pure-form textarea:focus:invalid:focus,
.pure-form select:focus:invalid:focus {
- border-color: #e9322d;
+ border-color: #e9322d;
}
.pure-form input[type="file"]:focus:invalid:focus,
.pure-form input[type="radio"]:focus:invalid:focus,
.pure-form input[type="checkbox"]:focus:invalid:focus {
- outline-color: #e9322d;
+ outline-color: #e9322d;
}
.pure-form select {
- border: 1px solid #ccc;
- background-color: white;
+ border: 1px solid #ccc;
+ background-color: white;
}
.pure-form select[multiple] {
- height: auto;
+ height: auto;
}
.pure-form label {
- margin: 0.5em 0 0.2em;
- color: #999;
- font-size:90%;
+ margin: 0.5em 0 0.2em;
+ color: #999;
+ font-size: 90%;
}
.pure-form fieldset {
- margin: 0;
- padding: 0.35em 0 0.75em;
- border: 0;
+ margin: 0;
+ padding: 0.35em 0 0.75em;
+ border: 0;
}
.pure-form legend {
- display: block;
- width: 100%;
- padding: 0.3em 0;
- margin-bottom: 0.3em;
- font-size: 125%;
- color: #333;
- border-bottom: 1px solid #e5e5e5;
+ display: block;
+ width: 100%;
+ padding: 0.3em 0;
+ margin-bottom: 0.3em;
+ font-size: 125%;
+ color: #333;
+ border-bottom: 1px solid #e5e5e5;
}
-.pure-form-stacked input[type='text'],
+.pure-form-stacked input[type="text"],
+.pure-form-stacked input[type="password"],
+.pure-form-stacked input[type="email"],
+.pure-form-stacked input[type="url"],
+.pure-form-stacked input[type="date"],
+.pure-form-stacked input[type="month"],
+.pure-form-stacked input[type="time"],
+.pure-form-stacked input[type="datetime"],
+.pure-form-stacked input[type="datetime-local"],
+.pure-form-stacked input[type="week"],
+.pure-form-stacked input[type="number"],
+.pure-form-stacked input[type="search"],
+.pure-form-stacked input[type="tel"],
+.pure-form-stacked input[type="color"],
.pure-form-stacked select,
.pure-form-stacked label {
- display: block;
+ display: block;
}
.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
-.pure-form-aligned .pure-help-inline, /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
+/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
+.pure-form-aligned .pure-help-inline,
.pure-form-message-inline {
- display: inline-block;
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
- vertical-align: middle;
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+ vertical-align: middle;
}
-/* aligned Forms */
+/* Aligned Forms */
.pure-form-aligned .pure-control-group {
- margin-bottom: 0.5em;
+ margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
- text-align: right;
- display: inline-block;
- vertical-align: middle;
- width: 10em;
- margin: 0 1em 0 0;
+ text-align: right;
+ display: inline-block;
+ vertical-align: middle;
+ width: 10em;
+ margin: 0 1em 0 0;
}
.pure-form-aligned .pure-controls {
- margin: 1.5em 0 0 10em;
+ margin: 1.5em 0 0 10em;
}
/* Rounded Inputs */
.pure-form .pure-input-rounded {
- border-radius: 20px;
- padding-left: 1em;
+ border-radius: 20px;
+ padding-left: 1em;
}
/* Grouped Inputs */
.pure-form .pure-group fieldset {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.pure-form .pure-group input {
- display: block;
- padding: 10px;
- margin: 0;
- border-radius: 0;
- position: relative;
- top: -1px;
+ display: block;
+ padding: 10px;
+ margin: 0;
+ border-radius: 0;
+ position: relative;
+ top: -1px;
}
.pure-form .pure-group input:focus {
- z-index: 2;
+ z-index: 2;
}
.pure-form .pure-group input:first-child {
- top: 1px;
- border-radius: 4px 4px 0 0;
+ top: 1px;
+ border-radius: 4px 4px 0 0;
}
.pure-form .pure-group input:last-child {
- top: -2px;
- border-radius: 0 0 4px 4px;
+ top: -2px;
+ border-radius: 0 0 4px 4px;
}
.pure-form .pure-group button {
- margin: 0.35em 0;
+ margin: 0.35em 0;
}
.pure-form .pure-input-1 {
- width: 100%;
+ width: 100%;
}
.pure-form .pure-input-2-3 {
- width: 66%;
+ width: 66%;
}
.pure-form .pure-input-1-2 {
- width: 50%;
+ width: 50%;
}
.pure-form .pure-input-1-3 {
- width: 33%;
+ width: 33%;
}
.pure-form .pure-input-1-4 {
- width: 25%;
+ width: 25%;
}
/* Inline help for forms */
-/* Note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
+/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
.pure-form .pure-help-inline,
.pure-form-message-inline {
- display: inline-block;
- padding-left: 0.3em;
- color: #666;
- vertical-align: middle;
- font-size: 90%;
+ display: inline-block;
+ padding-left: 0.3em;
+ color: #666;
+ vertical-align: middle;
+ font-size: 90%;
}
/* Block help for forms */
.pure-form-message {
- display: block;
- color: #666;
- font-size: 90%;
+ display: block;
+ color: #666;
+ font-size: 90%;
}
@media only screen and (max-width : 480px) {
- .pure-form button[type='submit'] {
- margin: 0.7em 0 0;
- }
+ .pure-form button[type="submit"] {
+ margin: 0.7em 0 0;
+ }
- .pure-form input[type='text'], .pure-form button, .pure-form label {
- margin-bottom: 0.3em;
- display: block;
- }
+ .pure-form input[type="text"],
+ .pure-form input[type="password"],
+ .pure-form input[type="email"],
+ .pure-form input[type="url"],
+ .pure-form input[type="date"],
+ .pure-form input[type="month"],
+ .pure-form input[type="time"],
+ .pure-form input[type="datetime"],
+ .pure-form input[type="datetime-local"],
+ .pure-form input[type="week"],
+ .pure-form input[type="number"],
+ .pure-form input[type="search"],
+ .pure-form input[type="tel"],
+ .pure-form input[type="color"],
+ .pure-form label {
+ margin-bottom: 0.3em;
+ display: block;
+ }
- .pure-group input[type='text'] {
- margin-bottom: 0;
- }
+ .pure-group input[type="text"],
+ .pure-form input[type="password"],
+ .pure-form input[type="email"],
+ .pure-form input[type="url"],
+ .pure-form input[type="date"],
+ .pure-form input[type="month"],
+ .pure-form input[type="time"],
+ .pure-form input[type="datetime"],
+ .pure-form input[type="datetime-local"],
+ .pure-form input[type="week"],
+ .pure-form input[type="number"],
+ .pure-form input[type="search"],
+ .pure-form input[type="tel"],
+ .pure-form input[type="color"] {
+ margin-bottom: 0;
+ }
- .pure-form-aligned .pure-control-group label {
- margin-bottom: 0.3em;
- text-align: left;
- display: block;
- width: 100%;
- }
+ .pure-form-aligned .pure-control-group label {
+ margin-bottom: 0.3em;
+ text-align: left;
+ display: block;
+ width: 100%;
+ }
- .pure-form-aligned .pure-controls {
- margin: 1.5em 0 0 0;
- }
+ .pure-form-aligned .pure-controls {
+ margin: 1.5em 0 0 0;
+ }
- /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
- .pure-form .pure-help-inline,
- .pure-form-message-inline,
- .pure-form-message {
- display: block;
- font-size: 80%;
- padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */
- }
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
+ .pure-form .pure-help-inline,
+ .pure-form-message-inline,
+ .pure-form-message {
+ display: block;
+ font-size: 80%;
+ /* Increased bottom padding to make it group with its related input element. */
+ padding: 0.2em 0 0.8em;
+ }
}