///\r
-/// Massively by HTML5 UP\r
+/// Editorial by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
form {\r
margin: 0 0 _size(element-margin) 0;\r
-\r
- > :last-child {\r
- margin-bottom: 0;\r
- }\r
-\r
- > .fields {\r
- $gutter: (_size(element-margin) * 0.75);\r
-\r
- @include vendor('display', 'flex');\r
- @include vendor('flex-wrap', 'wrap');\r
- width: calc(100% + #{$gutter * 2});\r
- margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);\r
-\r
- > .field {\r
- @include vendor('flex-grow', '0');\r
- @include vendor('flex-shrink', '0');\r
- padding: $gutter 0 0 $gutter;\r
- width: calc(100% - #{$gutter * 1});\r
-\r
- &.half {\r
- width: calc(50% - #{$gutter * 0.5});\r
- }\r
-\r
- &.third {\r
- width: calc(#{100% / 3} - #{$gutter * (1 / 3)});\r
- }\r
-\r
- &.quarter {\r
- width: calc(25% - #{$gutter * 0.25});\r
- }\r
- }\r
- }\r
-\r
- @include breakpoint('<=xsmall') {\r
- > .fields {\r
- $gutter: (_size(element-margin) * 0.75);\r
-\r
- width: calc(100% + #{$gutter * 2});\r
- margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);\r
-\r
- > .field {\r
- padding: $gutter 0 0 $gutter;\r
- width: calc(100% - #{$gutter * 1});\r
-\r
- &.half {\r
- width: calc(100% - #{$gutter * 1});\r
- }\r
-\r
- &.third {\r
- width: calc(100% - #{$gutter * 1});\r
- }\r
-\r
- &.quarter {\r
- width: calc(100% - #{$gutter * 1});\r
- }\r
- }\r
- }\r
- }\r
}\r
\r
label {\r
+ color: _palette(fg-bold);\r
display: block;\r
- font-family: _font(family-heading);\r
- font-weight: _font(weight-heading);\r
- line-height: 1.5;\r
- letter-spacing: 0.075em;\r
- font-size: 0.8rem;\r
- text-transform: uppercase;\r
- margin: 0 0 (_size(element-margin) * 0.375) 0;\r
-\r
- @include breakpoint('<=medium') {\r
- font-size: 0.9rem;\r
- }\r
+ font-size: 0.9em;\r
+ font-weight: _font(weight-bold);\r
+ margin: 0 0 (_size(element-margin) * 0.5) 0;\r
}\r
\r
input[type="text"],\r
input[type="password"],\r
input[type="email"],\r
+ input[type="tel"],\r
+ input[type="search"],\r
+ input[type="url"],\r
select,\r
textarea {\r
@include vendor('appearance', 'none');\r
- background: transparent;\r
- border-radius: 0;\r
- border: solid 2px;\r
+ background: _palette(bg);\r
+ border-radius: _size(border-radius);\r
+ border: none;\r
+ border: solid 1px _palette(border);\r
color: inherit;\r
display: block;\r
outline: 0;\r
- padding: 0 1rem;\r
+ padding: 0 1em;\r
text-decoration: none;\r
width: 100%;\r
\r
&:invalid {\r
box-shadow: none;\r
}\r
+\r
+ &:focus {\r
+ border-color: _palette(accent);\r
+ box-shadow: 0 0 0 1px _palette(accent);\r
+ }\r
}\r
\r
select {\r
- background-size: 1.25rem;\r
+ background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");\r
+ background-size: 1.25em;\r
background-repeat: no-repeat;\r
- background-position: calc(100% - 1rem) center;\r
+ background-position: calc(100% - 1em) center;\r
height: _size(element-height);\r
padding-right: _size(element-height);\r
text-overflow: ellipsis;\r
\r
+ option {\r
+ color: _palette(fg-bold);\r
+ background: _palette(bg);\r
+ }\r
+\r
&:focus {\r
&::-ms-value {\r
background-color: transparent;\r
input[type="text"],\r
input[type="password"],\r
input[type="email"],\r
+ input[type="tel"],\r
+ input[type="search"],\r
+ input[type="url"],\r
select {\r
height: _size(element-height);\r
}\r
\r
textarea {\r
- padding: 0.75rem 1rem;\r
+ padding: 0.75em 1em;\r
}\r
\r
input[type="checkbox"],\r
@include vendor('appearance', 'none');\r
display: block;\r
float: left;\r
- margin-right: -2rem;\r
+ margin-right: -2em;\r
opacity: 0;\r
- width: 1rem;\r
+ width: 1em;\r
z-index: -1;\r
\r
& + label {\r
@include icon;\r
+ color: _palette(fg);\r
cursor: pointer;\r
display: inline-block;\r
- font-size: 1rem;\r
- letter-spacing: 0;\r
- font-family: _font(family);\r
- text-transform: none;\r
+ font-size: 1em;\r
font-weight: _font(weight);\r
- padding-left: (_size(element-height) * 0.6) + 1rem;\r
- padding-right: 1rem;\r
+ padding-left: (_size(element-height) * 0.6) + 0.75em;\r
+ padding-right: 0.75em;\r
position: relative;\r
\r
&:before {\r
- border-radius: 0;\r
- border: solid 2px;\r
+ background: _palette(bg);\r
+ border-radius: _size(border-radius);\r
+ border: solid 1px _palette(border);\r
content: '';\r
display: inline-block;\r
height: (_size(element-height) * 0.6);\r
line-height: (_size(element-height) * 0.575);\r
position: absolute;\r
text-align: center;\r
- top: -0.125rem;\r
+ top: 0;\r
width: (_size(element-height) * 0.6);\r
}\r
}\r
\r
&:checked + label {\r
&:before {\r
+ background: _palette(fg-bold);\r
+ border-color: _palette(fg-bold);\r
+ color: _palette(bg);\r
content: '\f00c';\r
}\r
}\r
+\r
+ &:focus + label {\r
+ &:before {\r
+ border-color: _palette(accent);\r
+ box-shadow: 0 0 0 1px _palette(accent);\r
+ }\r
+ }\r
}\r
\r
input[type="checkbox"] {\r
& + label {\r
&:before {\r
- border-radius: 0;\r
+ border-radius: _size(border-radius);\r
}\r
}\r
}\r
}\r
\r
::-webkit-input-placeholder {\r
+ color: _palette(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
:-moz-placeholder {\r
+ color: _palette(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
::-moz-placeholder {\r
+ color: _palette(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
:-ms-input-placeholder {\r
+ color: _palette(fg-light) !important;\r
opacity: 1.0;\r
- }\r
-\r
- @mixin color-form($p: null) {\r
- label {\r
- color: _palette($p, fg-bold);\r
- }\r
-\r
- input[type="text"],\r
- input[type="password"],\r
- input[type="email"],\r
- select,\r
- textarea {\r
- border-color: _palette($p, border);\r
-\r
- &:focus {\r
- border-color: _palette($p, accent);\r
- }\r
- }\r
-\r
- select {\r
- background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette($p, border)}' /></svg>");\r
-\r
- option {\r
- background-color: _palette($p, bg);\r
- color: _palette($p, fg);\r
- }\r
- }\r
-\r
- .select-wrapper {\r
- &:before {\r
- color: _palette($p, border);\r
- }\r
- }\r
-\r
- input[type="checkbox"],\r
- input[type="radio"], {\r
- & + label {\r
- color: _palette($p, fg);\r
-\r
- &:before {\r
- border-color: _palette($p, border);\r
- }\r
- }\r
-\r
- &:checked + label {\r
- &:before {\r
- background-color: _palette($p, fg-bold);\r
- border-color: _palette($p, fg-bold);\r
- color: _palette($p, bg);\r
- }\r
- }\r
-\r
- &:focus + label {\r
- &:before {\r
- border-color: _palette($p, accent);\r
- }\r
- }\r
- }\r
-\r
- ::-webkit-input-placeholder {\r
- color: _palette($p, fg-light) !important;\r
- }\r
-\r
- :-moz-placeholder {\r
- color: _palette($p, fg-light) !important;\r
- }\r
-\r
- ::-moz-placeholder {\r
- color: _palette($p, fg-light) !important;\r
- }\r
-\r
- :-ms-input-placeholder {\r
- color: _palette($p, fg-light) !important;\r
- }\r
-\r
- .formerize-placeholder {\r
- color: _palette($p, fg-light) !important;\r
- }\r
- }\r
-\r
- @include color-form;
\ No newline at end of file
+ }
\ No newline at end of file
projects / editorial.git / blobdiff