/// /// Dimension 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('<=xsmall') { > .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.8rem; font-weight: _font(weight); letter-spacing: _font(letter-spacing); line-height: 1.5; margin: 0 0 (_size(element-margin) * 0.5) 0; text-transform: uppercase; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea { @include vendor('appearance', 'none'); @include vendor('transition', ( 'border-color #{_duration(transition)} ease-in-out', 'box-shadow #{_duration(transition)} ease-in-out', 'background-color #{_duration(transition)} ease-in-out' )); background-color: transparent; border-radius: _size(border-radius); border: solid _size(border-width) _palette(border); color: inherit; display: block; outline: 0; padding: 0 1rem; text-decoration: none; width: 100%; &:invalid { box-shadow: none; } &:focus { background: _palette(border-bg); border-color: _palette(fg-bold); box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); } } 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); background: _palette(bg); } &:focus { &::-ms-value { background-color: transparent; } } &::-ms-expand { display: none; } } input[type="text"], input[type="password"], input[type="email"], select { height: _size(element-height); } textarea { padding: 0.75rem 1rem; } input[type="checkbox"], input[type="radio"], { @include vendor('appearance', 'none'); display: block; float: left; margin-right: -2rem; opacity: 0; width: 1rem; z-index: -1; & + label { @include icon; @include vendor('user-select', 'none'); color: _palette(fg); cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: _font(weight); margin: 0 0 (_size(element-margin) * 0.25) 0; padding-left: (_size(element-height) * 0.6) + 1rem; padding-right: 0.75rem; position: relative; &:before { @include vendor('transition', ( 'border-color #{_duration(transition)} ease-in-out', 'box-shadow #{_duration(transition)} ease-in-out', 'background-color #{_duration(transition)} ease-in-out' )); border-radius: _size(border-radius); border: solid _size(border-width) _palette(border); content: ''; display: inline-block; height: (_size(element-height) * 0.6); left: 0; //line-height: (_size(element-height) * 0.575); line-height: calc(#{_size(element-height) * 0.575} + 0em); position: absolute; text-align: center; top: -0.125rem; width: (_size(element-height) * 0.6); } } &:checked + label { &:before { background: _palette(fg-bold) !important; border-color: _palette(fg-bold) !important; color: _palette(bg); content: '\f00c'; } } &:focus + label { &:before { background: _palette(border-bg); border-color: _palette(fg-bold); box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); } } } input[type="checkbox"] { & + label { &:before { border-radius: _size(border-radius); } } } input[type="radio"] { & + label { &:before { border-radius: 100%; } } } ::-webkit-input-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } :-moz-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } ::-moz-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } :-ms-input-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } .formerize-placeholder { color: _palette(fg-light) !important; opacity: 1.0; }