diff options
author | luxagraf <sng@luxagraf> | 2021-01-15 14:54:30 -0500 |
---|---|---|
committer | luxagraf <sng@luxagraf> | 2021-01-15 14:54:30 -0500 |
commit | 47b79fd9d4329e73cef7929ed8f64d9eeb287ae5 (patch) | |
tree | 189381bfe0d81fdc1105679910114deaab3cdb58 /design/sass/_forms.scss | |
parent | e61f3d2c4537a2670c40b33eb02231a71dfb028a (diff) |
Proj: Massive design overhaul to simplify code
Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.
Reduced CSS file size by 2/3
Diffstat (limited to 'design/sass/_forms.scss')
-rw-r--r-- | design/sass/_forms.scss | 129 |
1 files changed, 32 insertions, 97 deletions
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index 4e0227b..93a283d 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -1,113 +1,48 @@ .generic-form { margin: 2rem 0; @extend %clearfix; - fieldset { - padding: 0; - border: none; - width: 100%; - position: relative; - } - input[type=email] { - width: 210px; - @include fontsize(18); - background-color: #fff; - border: 2px solid darken(#efefef, 10); - border-radius: 5px; - height: 2.2rem; - padding: 4px 4px 4px 8px; - margin-right: .5rem; - @include breakpoint(omega){ - width: 92%; - } - @include breakpoint(alpha){ - width: 96%; - } - } - label { - display: block; - visibility: hidden; - width: 0; - height: 0; - } - .btn-hollow { - @include fontsize(16); - display: inline-block; - padding: 10px 15px; - margin-bottom: 0; - line-height: 20px; - text-align: center; - vertical-align: middle; - cursor: pointer; - color: #ddd; - border: 0; - border-radius: 5px; - font-weight: bold; - transition: all 0.2s ease; - background: $orange; - &:hover { - color: white; - } - } } -.flex { - display: flex; - .btn, .btn-hollow { - flex-basis: 10%; - } -} - - -form fieldset { - margin: 1rem 0; +.generic-form fieldset { padding: 0; border: none; width: 100%; position: relative; } -form fieldset label { - position: absolute; - -webkit-transform: translate3d(10px, 100%); - -moz-transform: translate3d(10px, 100%); - -ms-transform: translate3d(10px, 100%); - -o-transform: translate3d(10px, 100%); - transform: translate3d(10px, 100%); - @include fontsize(14); - @include fancy_sans; - color: lighten($body_font_color, 25); - line-height: 14px; - top: .7rem; - left: .75rem; - z-index: 1; +.generic-form input[type=email] { + width: 210px; + @include fontsize(18); + background-color: #fff; + border: 2px solid darken(#efefef, 10); + border-radius: 5px; + height: 2.2rem; + padding: 4px 4px 4px 8px; + margin-right: .5rem; + @include breakpoint(alpha){ + width: 96%; + } } -input, .textarea-rounded textarea { - border: 1px solid #dedddd; - border-radius: 4px; - padding: 2.2rem 0 .75rem .75rem; - width: 96%; - @include fontsize(24); - @include fancy_sans; +.generic-form label { + display: block; + visibility: hidden; + width: 0; + height: 0; } - -.btn { - @include fontsize(15); +.btn-hollow { + @include fontsize(16); display: inline-block; - border-radius: 4px; - -webkit-appearance: none; - text-decoration: none; + padding: 10px 15px; + margin-bottom: 0; + line-height: 20px; + text-align: center; + vertical-align: middle; cursor: pointer; - background: $link_color; - color: #fff; - border: 1px solid $link_color; - padding: 7px 14px; - white-space: nowrap; + color: #ddd; + border: 0; + border-radius: 5px; + font-weight: bold; + transition: all 0.2s ease; + background: $orange; &:hover { - background: $link_color; - border: 1px solid $link_color; - } -} -.newsletter-subscribe { - margin: 3rem 0; - fieldset { - margin: 0; + color: white; } } |