diff options
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; } } |