summaryrefslogtreecommitdiff
path: root/design/sass/_forms.scss
diff options
context:
space:
mode:
authorluxagraf <sng@luxagraf>2021-01-15 14:54:30 -0500
committerluxagraf <sng@luxagraf>2021-01-15 14:54:30 -0500
commit47b79fd9d4329e73cef7929ed8f64d9eeb287ae5 (patch)
tree189381bfe0d81fdc1105679910114deaab3cdb58 /design/sass/_forms.scss
parente61f3d2c4537a2670c40b33eb02231a71dfb028a (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.scss129
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;
}
}