File: /home/mmickelson/theflexguy.com/wp-content/themes/storefront/sass/components/_forms.scss
/**
* Forms
*/
form {
margin-bottom: 1.618em;
}
button,
input,
select,
textarea {
font-size: 100%; /* Corrects font size not being inherited in all browsers */
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: baseline; /* Improves appearance and consistency in all browsers */
*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart {
border: 0;
background: none;
background-color: $color_body;
border-color: $color_body;
color: #fff;
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
line-height: 1;
padding: .618em 1em;
text-decoration: none;
font-weight: 700;
text-shadow: none;
display: inline-block;
outline: none;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
border-radius: 0;
box-shadow:
inset 0 -2px 0 rgba(#000,.2),
0 1px 1px rgba(#000,.1);
&.cta,
&.alt {
background-color: $color_links;
border-color: $color_links;
&:hover {
background-color: $color_links;
}
}
&:hover {
color: #fff;
}
&:focus {
outline: 2px solid $color_links;
}
&.added {
&:after {
content: "\f00c";
font-family: "FontAwesome";
margin-left: .53em;
}
}
&.loading {
opacity: 0.5;
}
&.small {
padding: .53em .857em;
font-size: .857em;
}
&.disabled,
&:disabled {
opacity: 0.5 !important;
&:hover {
opacity: 0.5 !important;
}
}
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
input[type="search"] {
box-sizing: border-box; // Overrules normalize.css.
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
padding: .618em;
background-color: darken($body-background,5%);
color: $color_body;
line-height: 1;
outline: none;
border: 0;
-webkit-appearance: none;
border-radius: 0;
box-sizing: border-box;
font-weight: normal;
box-shadow:
inset 0 1px 2px rgba(0,0,0,0.125);
&:focus {
background-color: darken( $body-background,10% );
color: darken( $color_body, 10% );
}
}
textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
padding-left: .857em;
vertical-align: top; /* Improves readability and alignment in all browsers */
width: 100%;
}
label {
font-weight: 700;
}
label.inline {
input {
width: auto;
}
}
fieldset {
padding: 0;
border: 0;
margin-bottom: 1.618em;
legend {
font-weight: 700;
}
}
[placeholder]:focus::-webkit-input-placeholder {
-webkit-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
transition: opacity 0.5s 0.5s ease;
opacity: 0;
}