diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss deleted file mode 100644 index df7f199..0000000 --- a/assets/sass/components/_form.scss +++ /dev/null @@ -1,287 +0,0 @@ -/* - Hugo Story by CaressOfSteel - A (modular, highly tweakable) responsive one-page theme for Hugo. - Ported from Story by HTML5UP. - This Hugo theme is licensed under the Creative Commons Attribution 3.0 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 { - display: block; - font-size: 0.9rem; - 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-color: transparent; - border-radius: _size(border-radius); - border: none; - border: solid _size(border-width); - color: inherit; - display: block; - outline: 0; - padding: 0 0.825rem; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - } - - select { - 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; - - &: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.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(false, solid); - @include vendor('user-select', 'none'); - cursor: pointer; - display: inline-block; - font-size: 1rem; - font-weight: _font(weight); - padding-left: (_size(element-height) * 0.6) + 0.75rem; - padding-right: 0.75rem; - position: relative; - margin-bottom: 0; - - &:before { - border-radius: _size(border-radius); - border: solid _size(border-width); - content: ''; - display: inline-block; - font-size: 0.8rem; - height: (_size(element-height) * 0.6); - left: 0; - line-height: (_size(element-height) * 0.6); - position: absolute; - text-align: center; - top: 0; - width: (_size(element-height) * 0.6); - } - } - - &:checked + label { - &:before { - content: '\f00c'; - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-webkit-input-placeholder { - opacity: 1.0; - } - - :-moz-placeholder { - opacity: 1.0; - } - - ::-moz-placeholder { - opacity: 1.0; - } - - :-ms-input-placeholder { - opacity: 1.0; - } - - @mixin color-form($p: null) { - label { - color: _palette($p, fg-bold); - } - - input[type="text"], - input[type="password"], - input[type="email"], - input[type="tel"], - input[type="search"], - input[type="url"], - select, - textarea { - border-color: _palette($p, border); - - &:focus { - border-color: _palette($p, accent); - box-shadow: 0 0 0 _size(border-width) _palette($p, accent); - } - } - - select { - background-image: svg-url(""); - - option { - color: _palette(fg-bold); - background: _palette(bg); - } - } - - input[type="checkbox"], - input[type="radio"], { - & + label { - color: _palette($p, fg); - - &:before { - border-color: _palette($p, border); - } - } - - &:checked + label { - &:before { - background-color: _palette($p, fg-bold); - border-color: _palette($p, fg-bold); - color: _palette($p, bg); - } - } - - &:focus + label { - &:before { - border-color: _palette($p, accent); - box-shadow: 0 0 0 _size(border-width) _palette($p, accent); - } - } - } - - ::-webkit-input-placeholder { - color: _palette($p, fg-light) !important; - } - - :-moz-placeholder { - color: _palette($p, fg-light) !important; - } - - ::-moz-placeholder { - color: _palette($p, fg-light) !important; - } - - :-ms-input-placeholder { - color: _palette($p, fg-light) !important; - } - } - - @include color-form; \ No newline at end of file