/// /// Multiverse by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Form */ form { margin: 0 0 _size(element-margin) 0; > :last-child { margin-bottom: 0; } > .fields { $gutter: (_size(element-margin) * 0.75); @include vendor('display', 'flex'); @include vendor('flex-wrap', 'wrap'); width: calc(100% + #{$gutter * 2}); margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); > .field { @include vendor('flex-grow', '0'); @include vendor('flex-shrink', '0'); padding: $gutter 0 0 $gutter; width: calc(100% - #{$gutter * 1}); &.half { width: calc(50% - #{$gutter * 0.5}); } &.third { width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); } &.quarter { width: calc(25% - #{$gutter * 0.25}); } } } @include breakpoint('<=small') { > .fields { $gutter: (_size(element-margin) * 0.75); width: calc(100% + #{$gutter * 2}); margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); > .field { padding: $gutter 0 0 $gutter; width: calc(100% - #{$gutter * 1}); &.half { width: calc(100% - #{$gutter * 1}); } &.third { width: calc(100% - #{$gutter * 1}); } &.quarter { width: calc(100% - #{$gutter * 1}); } } } } } label { color: _palette(fg-bold); display: block; font-size: 0.9em; font-weight: _font(weight-bold); margin: 0 0 (_size(element-margin) * 0.5) 0; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea { @include vendor('appearance', 'none'); background: _palette(border-bg); border: 0; border-radius: 0; color: _palette(fg); display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; &:invalid { box-shadow: none; } &:focus { box-shadow: inset 0 0 0 2px _palette(accent1); } } select { background-image: svg-url(""); background-size: 1.25rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; height: _size(element-height); padding-right: _size(element-height); text-overflow: ellipsis; option { color: _palette(fg-bold); background: _palette(bg); } &:focus { &::-ms-value { background-color: transparent; } } &::-ms-expand { display: none; } } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select { height: _size(element-height); } textarea { padding: 0.75em 1em; } input[type="checkbox"], input[type="radio"], { @include vendor('appearance', 'none'); display: block; float: left; margin-right: -2em; opacity: 0; width: 1em; z-index: -1; & + label { @include icon(false, solid); color: _palette(fg); cursor: pointer; display: inline-block; font-size: 1em; font-weight: _font(weight); padding-left: (_size(element-height) * 0.6) + 0.75em; padding-right: 0.75em; position: relative; &:before { background: _palette(border-bg); content: ''; display: inline-block; font-size: 0.8em; height: (_size(element-height) * 0.75); left: 0; line-height: (_size(element-height) * 0.75); position: absolute; text-align: center; top: 0; width: (_size(element-height) * 0.75); } } &:checked + label { &:before { background: _palette(accent1); border-color: _palette(accent1); color: _palette(fg-bold); content: '\f00c'; } } &:focus + label { &:before { box-shadow: 0 0 0 2px _palette(accent1); } } } input[type="checkbox"] { & + label { &:before { } } } input[type="radio"] { & + label { &:before { border-radius: 100%; } } } ::-webkit-input-placeholder { color: _palette(fg-medium) !important; opacity: 1.0; } :-moz-placeholder { color: _palette(fg-medium) !important; opacity: 1.0; } ::-moz-placeholder { color: _palette(fg-medium) !important; opacity: 1.0; } :-ms-input-placeholder { color: _palette(fg-medium) !important; opacity: 1.0; }