├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── css ├── base.css ├── form_buttons.css └── min │ ├── all.min.css │ ├── base.min.css │ └── form_buttons.min.css ├── gulpfile.js ├── img └── example.gif ├── index.haml ├── index.html ├── js ├── form_buttons.js └── min │ └── form_buttons.min.js ├── package.json └── sass ├── base.sass └── form_buttons.sass /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Stelios Constantinides 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Forms within buttons, oh my! 2 | Inspired by https://dribbble.com/shots/1937525-Create-New-Project 3 | 4 | ## Examples 5 | ![Examples](https://sconstantinides.github.io/FormButtons/img/example.gif) 6 | 7 | ## Getting started 8 | 1. Get the JS (also requires jQuery): [Normal JS](https://github.com/sconstantinides/FormButtons/blob/master/js/form_buttons.js) or [Minified JS](https://github.com/sconstantinides/FormButtons/blob/master/js/min/form_buttons.min.js) 9 | 2. Get the CSS: [Sass](https://github.com/sconstantinides/FormButtons/blob/master/sass/form_buttons.sass) or [Normal CSS](https://github.com/sconstantinides/FormButtons/blob/master/css/form_buttons.css) or [Minified CSS](https://github.com/sconstantinides/FormButtons/blob/master/css/min/form_buttons.min.css) 10 | 3. Add the buttons: HTML example below or [HAML](https://github.com/sconstantinides/FormButtons/blob/master/index.haml) 11 | 12 | ```html 13 |
14 | 18 | 19 | 22 |
23 | ``` 24 | 25 | ## Options 26 | Options can be set by mixing & matching classes on `
` 27 | - **Width:** Fixed-width by default. Add class "full-width" to have the input expand to fill its container. 28 | - **Auto-close:** Class "auto-close" returns the button to its initial state when the user clicks elsewhere. 29 | 30 | ## Feedback 31 | Feel free to open issues with suggestions or submit pull requests. 32 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "FormButtons", 3 | "version": "1.0.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "git://github.com/sconstantinides/FormButtons.git" 7 | }, 8 | "homepage": "http://www.steliosconstantinides.com/FormButtons", 9 | "description": "Forms within buttons, oh my!", 10 | "main": [ 11 | "./css/form_buttons.css", 12 | "./js/form_buttons.js" 13 | ], 14 | "license": "MIT", 15 | "ignore": [ 16 | "img", 17 | "node_modules", 18 | "sass", 19 | ".gitignore", 20 | "bower.json", 21 | "gulpfile.js", 22 | "index.haml", 23 | "index.html", 24 | "package.json", 25 | "README.md" 26 | ], 27 | "dependencies": { 28 | "jquery": "~2.1" 29 | } 30 | } -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | min-width: 320px; 5 | background: #eee; 6 | font-family: Montserrat, sans-serif; 7 | font-weight: 400; } 8 | 9 | form { 10 | max-width: 500px; 11 | margin: 0 auto; } 12 | form .row { 13 | margin: 10px 20px; } 14 | form h2 { 15 | margin: 50px 0 30px 0; 16 | color: #333; 17 | text-transform: uppercase; } 18 | form h2 small { 19 | display: block; 20 | margin-top: 5px; 21 | color: #999; 22 | font-weight: 400; 23 | font-size: 14px; } 24 | -------------------------------------------------------------------------------- /css/form_buttons.css: -------------------------------------------------------------------------------- 1 | .form-button { 2 | vertical-align: top; 3 | white-space: nowrap; 4 | overflow: hidden; 5 | font-size: 0; 6 | border-radius: 6px; 7 | color: #fff; 8 | display: inline-block; 9 | cursor: pointer; } 10 | .form-button.red { 11 | background: #E74C3C; } 12 | .form-button.red:hover, .form-button.red .submit:hover { 13 | background: #D64541; } 14 | .form-button.red.active, .form-button.red .input, .form-button.red .submit { 15 | color: #D64541; } 16 | .form-button.blue { 17 | background: #22A7F0; } 18 | .form-button.blue:hover, .form-button.blue .submit:hover { 19 | background: #3498DB; } 20 | .form-button.blue.active, .form-button.blue .input, .form-button.blue .submit { 21 | color: #3498DB; } 22 | .form-button.green { 23 | background: #26C281; } 24 | .form-button.green:hover, .form-button.green .submit:hover { 25 | background: #03A678; } 26 | .form-button.green.active, .form-button.green .input, .form-button.green .submit { 27 | color: #03A678; } 28 | .form-button.purple { 29 | background: #8E44AD; } 30 | .form-button.purple:hover, .form-button.purple .submit:hover { 31 | background: #674172; } 32 | .form-button.purple.active, .form-button.purple .input, .form-button.purple .submit { 33 | color: #674172; } 34 | .form-button label, .form-button input, .form-button button { 35 | vertical-align: top; 36 | font-family: inherit; 37 | color: inherit; 38 | background: none; 39 | border: none; 40 | padding: 0; 41 | margin: 0; 42 | font-size: 16px; 43 | height: 50px; 44 | line-height: 50px; } 45 | .form-button label:focus, .form-button input:focus, .form-button button:focus { 46 | outline: none; } 47 | .form-button label.cta, .form-button input.cta, .form-button button.cta { 48 | cursor: pointer; 49 | padding-right: 16px; } 50 | .form-button label.cta .icon, .form-button input.cta .icon, .form-button button.cta .icon { 51 | vertical-align: top; 52 | font-size: 20px; 53 | height: 50px; 54 | line-height: 50px; 55 | padding-left: 16px; } 56 | .form-button label.cta .text, .form-button input.cta .text, .form-button button.cta .text { 57 | text-transform: uppercase; 58 | margin-left: 12px; } 59 | .form-button label.input, .form-button label.submit, .form-button input.input, .form-button input.submit, .form-button button.input, .form-button button.submit { 60 | display: none; } 61 | .form-button label.input, .form-button input.input, .form-button button.input { 62 | width: 0; 63 | height: 16px; 64 | line-height: 20px; 65 | padding: 17px 5px 17px 15px; } 66 | .form-button label.submit, .form-button input.submit, .form-button button.submit { 67 | cursor: pointer; 68 | height: 50px; 69 | line-height: 50px; 70 | font-size: 20px; 71 | padding: 0 10px; } 72 | .form-button label.submit:hover, .form-button input.submit:hover, .form-button button.submit:hover { 73 | color: #fff; } 74 | .form-button.active { 75 | background: #fff !important; } 76 | .form-button.active .cta { 77 | cursor: auto; 78 | padding-right: 0; } 79 | .form-button.active .cta .text { 80 | display: none; } 81 | .form-button.active .submit { 82 | display: inline-block; } 83 | -------------------------------------------------------------------------------- /css/min/all.min.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;min-width:320px;background:#eee;font-family:Montserrat,sans-serif;font-weight:400}form{max-width:500px;margin:0 auto}form .row{margin:10px 20px}form h2{margin:50px 0 30px;color:#333;text-transform:uppercase}form h2 small{display:block;margin-top:5px;color:#999;font-weight:400;font-size:14px} 2 | .form-button{vertical-align:top;white-space:nowrap;overflow:hidden;font-size:0;border-radius:6px;color:#fff;display:inline-block;cursor:pointer}.form-button button.input,.form-button button.submit,.form-button input.input,.form-button input.submit,.form-button label.input,.form-button label.submit,.form-button.active .cta .text{display:none}.form-button.red{background:#E74C3C}.form-button.red .submit:hover,.form-button.red:hover{background:#D64541}.form-button.red .input,.form-button.red .submit,.form-button.red.active{color:#D64541}.form-button.blue{background:#22A7F0}.form-button.blue .submit:hover,.form-button.blue:hover{background:#3498DB}.form-button.blue .input,.form-button.blue .submit,.form-button.blue.active{color:#3498DB}.form-button.green{background:#26C281}.form-button.green .submit:hover,.form-button.green:hover{background:#03A678}.form-button.green .input,.form-button.green .submit,.form-button.green.active{color:#03A678}.form-button.purple{background:#8E44AD}.form-button.purple .submit:hover,.form-button.purple:hover{background:#674172}.form-button.purple .input,.form-button.purple .submit,.form-button.purple.active{color:#674172}.form-button button,.form-button input,.form-button label{vertical-align:top;font-family:inherit;color:inherit;background:0 0;border:none;padding:0;margin:0;font-size:16px;height:50px;line-height:50px}.form-button button:focus,.form-button input:focus,.form-button label:focus{outline:0}.form-button button.cta,.form-button input.cta,.form-button label.cta{cursor:pointer;padding-right:16px}.form-button button.cta .icon,.form-button input.cta .icon,.form-button label.cta .icon{vertical-align:top;font-size:20px;height:50px;line-height:50px;padding-left:16px}.form-button button.cta .text,.form-button input.cta .text,.form-button label.cta .text{text-transform:uppercase;margin-left:12px}.form-button button.input,.form-button input.input,.form-button label.input{width:0;height:16px;line-height:20px;padding:17px 5px 17px 15px}.form-button button.submit,.form-button input.submit,.form-button label.submit{cursor:pointer;height:50px;line-height:50px;font-size:20px;padding:0 10px}.form-button button.submit:hover,.form-button input.submit:hover,.form-button label.submit:hover{color:#fff}.form-button.active{background:#fff!important}.form-button.active .cta{cursor:auto;padding-right:0}.form-button.active .submit{display:inline-block} -------------------------------------------------------------------------------- /css/min/base.min.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;min-width:320px;background:#eee;font-family:Montserrat,sans-serif;font-weight:400}form{max-width:500px;margin:0 auto}form .row{margin:10px 20px}form h2{margin:50px 0 30px;color:#333;text-transform:uppercase}form h2 small{display:block;margin-top:5px;color:#999;font-weight:400;font-size:14px} -------------------------------------------------------------------------------- /css/min/form_buttons.min.css: -------------------------------------------------------------------------------- 1 | .form-button{vertical-align:top;white-space:nowrap;overflow:hidden;font-size:0;border-radius:6px;color:#fff;display:inline-block;cursor:pointer}.form-button button.input,.form-button button.submit,.form-button input.input,.form-button input.submit,.form-button label.input,.form-button label.submit,.form-button.active .cta .text{display:none}.form-button.red{background:#E74C3C}.form-button.red .submit:hover,.form-button.red:hover{background:#D64541}.form-button.red .input,.form-button.red .submit,.form-button.red.active{color:#D64541}.form-button.blue{background:#22A7F0}.form-button.blue .submit:hover,.form-button.blue:hover{background:#3498DB}.form-button.blue .input,.form-button.blue .submit,.form-button.blue.active{color:#3498DB}.form-button.green{background:#26C281}.form-button.green .submit:hover,.form-button.green:hover{background:#03A678}.form-button.green .input,.form-button.green .submit,.form-button.green.active{color:#03A678}.form-button.purple{background:#8E44AD}.form-button.purple .submit:hover,.form-button.purple:hover{background:#674172}.form-button.purple .input,.form-button.purple .submit,.form-button.purple.active{color:#674172}.form-button button,.form-button input,.form-button label{vertical-align:top;font-family:inherit;color:inherit;background:0 0;border:none;padding:0;margin:0;font-size:16px;height:50px;line-height:50px}.form-button button:focus,.form-button input:focus,.form-button label:focus{outline:0}.form-button button.cta,.form-button input.cta,.form-button label.cta{cursor:pointer;padding-right:16px}.form-button button.cta .icon,.form-button input.cta .icon,.form-button label.cta .icon{vertical-align:top;font-size:20px;height:50px;line-height:50px;padding-left:16px}.form-button button.cta .text,.form-button input.cta .text,.form-button label.cta .text{text-transform:uppercase;margin-left:12px}.form-button button.input,.form-button input.input,.form-button label.input{width:0;height:16px;line-height:20px;padding:17px 5px 17px 15px}.form-button button.submit,.form-button input.submit,.form-button label.submit{cursor:pointer;height:50px;line-height:50px;font-size:20px;padding:0 10px}.form-button button.submit:hover,.form-button input.submit:hover,.form-button label.submit:hover{color:#fff}.form-button.active{background:#fff!important}.form-button.active .cta{cursor:auto;padding-right:0}.form-button.active .submit{display:inline-block} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 2 | var gulp = require('gulp'), 3 | jshint = require('gulp-jshint'), 4 | sass = require('gulp-sass'), 5 | concat = require('gulp-concat'), 6 | uglify = require('gulp-uglify'), 7 | rename = require('gulp-rename'), 8 | haml = require('gulp-haml'), 9 | minifyCss = require('gulp-minify-css'); 10 | 11 | // Check JS for errors 12 | gulp.task('lint', function() { 13 | return gulp.src('js/*.js') 14 | .pipe(jshint()) 15 | .pipe(jshint.reporter('default')); 16 | }); 17 | 18 | // Minify JS 19 | gulp.task('scripts', function() { 20 | return gulp.src('js/*.js') 21 | .pipe(rename({suffix: '.min'})) 22 | .pipe(uglify()) 23 | .on('error', onError) 24 | .pipe(gulp.dest('js/min')); 25 | }); 26 | 27 | // Compile & minify SASS 28 | gulp.task('styles', function() { 29 | return gulp.src('sass/*.sass') 30 | .pipe(sass()) 31 | .on('error', onError) 32 | .pipe(gulp.dest('css')) 33 | .pipe(minifyCss()) 34 | .pipe(rename({suffix: '.min'})) 35 | .pipe(gulp.dest('css/min')) 36 | .pipe(concat('all.min.css')) 37 | .pipe(gulp.dest('css/min')); 38 | }); 39 | 40 | // Compile index.html 41 | gulp.task('index', function() { 42 | gulp.src('index.haml') 43 | .pipe(haml()) 44 | .on('error', onError) 45 | .pipe(gulp.dest('./')); 46 | }); 47 | 48 | // Watch for changes 49 | gulp.task('watch', function() { 50 | gulp.watch('js/*.js', ['lint', 'scripts']); 51 | gulp.watch('sass/*.sass', ['styles']); 52 | gulp.watch('index.haml', ['index']); 53 | }); 54 | 55 | // Error logging 56 | function onError(err) { 57 | console.log(err); 58 | this.emit('end'); 59 | } 60 | 61 | // Run tasks 62 | gulp.task('default', ['lint', 'scripts', 'styles', 'index', 'watch']); 63 | -------------------------------------------------------------------------------- /img/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sconstantinides/FormButtons/c23a291390406018896e0847cda193aeada9ad11/img/example.gif -------------------------------------------------------------------------------- /index.haml: -------------------------------------------------------------------------------- 1 | !!! 5 2 | %html 3 | %head 4 | %title Forms within buttons 5 | %meta{ name: "viewport", content: "width=device-width, initial-scale=1" } 6 | %link{ rel:"stylesheet", type: "text/css", href: "https://fonts.googleapis.com/css?family=Montserrat:400,700" } 7 | %link{ rel: "stylesheet", type: "text/css", href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" } 8 | %link{ rel: "stylesheet", type: "text/css", href: "css/min/all.min.css" } 9 | %script{ type: "text/javascript", src: "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" } 10 | %script{ type: "text/javascript", src: "js/min/form_buttons.min.js" } 11 | 12 | %body 13 | %a{ href: "https://github.com/sconstantinides/FormButtons" } 14 | %img{ style: "position: absolute; top: 0; right: 0; border: 0;", src: "https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67", alt: "Fork me on GitHub", data-canonical-src: "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" } 15 | 16 | %form 17 | .row 18 | %h2 19 | Fixed-width buttons 20 | %small Input width based on the length of the label 21 | 22 | .row 23 | .form-button.auto-close.red 24 | %label.cta{ for: "name" } 25 | %i.icon.fa.fa-file-text-o 26 | %span.text Create new file 27 | %input.input{ type: "text", placeholder: "File name", id: "name", name: "name" } 28 | %button.submit{ type: "submit" } 29 | %i.fa.fa-arrow-right 30 | 31 | .row 32 | .form-button.auto-close.blue 33 | %label.cta{ for: "email" } 34 | %i.icon.fa.fa-newspaper-o 35 | %span.text Get our newsletter 36 | %input.input{ type: "text", placeholder: "Enter your email", id: "email", name: "email" } 37 | %button.submit{ type: "submit" } 38 | %i.fa.fa-arrow-right 39 | 40 | .row 41 | %h2 42 | Full-width buttons 43 | %small Inputs expand to fill the container 44 | 45 | .row 46 | .form-button.full-width.auto-close.green 47 | %label.cta{ for: "search" } 48 | %i.icon.fa.fa-search 49 | %input.input{ type: "text", placeholder: "Search...", id: "search", name: "search" } 50 | %button.submit{ type: "submit" } 51 | %i.fa.fa-arrow-right 52 | 53 | .row 54 | .form-button.full-width.auto-close.purple 55 | %label.cta{ for: "share" } 56 | %i.icon.fa.fa-share-alt 57 | %span.text Share 58 | %input.input{ type: "text", placeholder: "Email or phone number", id: "share", name: "share" } 59 | %button.submit{ type: "submit" } 60 | %i.fa.fa-arrow-right 61 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | Forms within buttonsFork me on GitHub

Fixed-width buttonsInput width based on the length of the label

Full-width buttonsInputs expand to fill the container

3 | -------------------------------------------------------------------------------- /js/form_buttons.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $(".form-button").click(function(e) { 3 | if(!$(this).hasClass("active")) { 4 | var fullWidth = $(this).hasClass("full-width"); 5 | var containerWidth = $(this).outerWidth(); 6 | if(fullWidth) { 7 | containerWidth = $(this).parent().width(); 8 | } 9 | var input = $(this).find(".input"); 10 | var width = containerWidth - $(this).find(".icon").outerWidth() - $(this).find(".submit").outerWidth() - (input.outerWidth() - input.width()); 11 | if(fullWidth) { 12 | input.animate({ width: width }); 13 | } else { 14 | input.css("width", width); 15 | } 16 | input.css("display", "inline-block"); 17 | $(this).addClass("active"); 18 | input.focus(); 19 | } 20 | }); 21 | 22 | $(document).click(function(e) { 23 | if(!$(e.target).hasClass("form-button") && 24 | !$(e.target).parents().is(".form-button")) { 25 | $.each($(".form-button.auto-close.active"), function() { 26 | var input = $(this).find(".input"); 27 | input.css({ 28 | width: 0, 29 | display: "none" 30 | }); 31 | $(this).removeClass("active"); 32 | }); 33 | } 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /js/min/form_buttons.min.js: -------------------------------------------------------------------------------- 1 | $(function(){$(".form-button").click(function(t){if(!$(this).hasClass("active")){var i=$(this).hasClass("full-width"),s=$(this).outerWidth();i&&(s=$(this).parent().width());var n=$(this).find(".input"),a=s-$(this).find(".icon").outerWidth()-$(this).find(".submit").outerWidth()-(n.outerWidth()-n.width());i?n.animate({width:a}):n.css("width",a),n.css("display","inline-block"),$(this).addClass("active"),n.focus()}}),$(document).click(function(t){$(t.target).hasClass("form-button")||$(t.target).parents().is(".form-button")||$.each($(".form-button.auto-close.active"),function(){var t=$(this).find(".input");t.css({width:0,display:"none"}),$(this).removeClass("active")})})}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "FormButtons", 3 | "version": "1.0.0", 4 | "description": "Forms within buttons.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/sconstantinides/FormButtons.git" 8 | }, 9 | "devDependencies": { 10 | "gulp": "^3.9.0", 11 | "gulp-concat": "^2.6.0", 12 | "gulp-haml": "^0.1.5", 13 | "gulp-jquery": "^1.0.2", 14 | "gulp-jshint": "^1.11.2", 15 | "gulp-livereload": "^3.8.0", 16 | "gulp-minify-css": "^1.2.0", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-sass": "^2.0.4", 19 | "gulp-uglify": "^1.2.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /sass/base.sass: -------------------------------------------------------------------------------- 1 | 2 | body 3 | margin: 0 4 | padding: 0 5 | min-width: 320px 6 | background: #eee 7 | font-family: Montserrat, sans-serif 8 | font-weight: 400 9 | 10 | form 11 | max-width: 500px 12 | margin: 0 auto 13 | 14 | .row 15 | margin: 10px 20px 16 | 17 | h2 18 | margin: 50px 0 30px 0 19 | color: #333 20 | text-transform: uppercase 21 | 22 | small 23 | display: block 24 | margin-top: 5px 25 | color: #999 26 | font-weight: 400 27 | font-size: 14px -------------------------------------------------------------------------------- /sass/form_buttons.sass: -------------------------------------------------------------------------------- 1 | 2 | $white: #fff 3 | $red: #E74C3C 4 | $dark-red: #D64541 5 | 6 | $blue: #22A7F0 7 | $dark-blue: #3498DB 8 | 9 | $green: #26C281 10 | $dark-green: #03A678 11 | 12 | $purple: #8E44AD 13 | $dark-purple: #674172 14 | 15 | .form-button 16 | vertical-align: top 17 | white-space: nowrap 18 | overflow: hidden 19 | font-size: 0 20 | border-radius: 6px 21 | color: $white 22 | display: inline-block 23 | cursor: pointer 24 | 25 | &.red 26 | background: $red 27 | 28 | &:hover, .submit:hover 29 | background: $dark-red 30 | 31 | &.active, .input, .submit 32 | color: $dark-red 33 | 34 | &.blue 35 | background: $blue 36 | 37 | &:hover, .submit:hover 38 | background: $dark-blue 39 | 40 | &.active, .input, .submit 41 | color: $dark-blue 42 | 43 | &.green 44 | background: $green 45 | 46 | &:hover, .submit:hover 47 | background: $dark-green 48 | 49 | &.active, .input, .submit 50 | color: $dark-green 51 | 52 | &.purple 53 | background: $purple 54 | 55 | &:hover, .submit:hover 56 | background: $dark-purple 57 | 58 | &.active, .input, .submit 59 | color: $dark-purple 60 | 61 | label, input, button 62 | vertical-align: top 63 | font-family: inherit 64 | color: inherit 65 | background: none 66 | border: none 67 | padding: 0 68 | margin: 0 69 | font-size: 16px 70 | height: 50px 71 | line-height: 50px 72 | 73 | &:focus 74 | outline: none 75 | 76 | &.cta 77 | cursor: pointer 78 | padding-right: 16px 79 | 80 | .icon 81 | vertical-align: top 82 | font-size: 20px 83 | height: 50px 84 | line-height: 50px 85 | padding-left: 16px 86 | 87 | .text 88 | text-transform: uppercase 89 | margin-left: 12px 90 | 91 | &.input, &.submit 92 | display: none 93 | 94 | &.input 95 | width: 0 96 | height: 16px 97 | line-height: 20px 98 | padding: 17px 5px 17px 15px 99 | 100 | &.submit 101 | cursor: pointer 102 | height: 50px 103 | line-height: 50px 104 | font-size: 20px 105 | padding: 0 10px 106 | 107 | &:hover 108 | color: $white 109 | 110 | &.active 111 | // .input { display: inline-block } is done in JS to prevent Firefox bug 112 | 113 | background: $white !important 114 | 115 | .cta 116 | cursor: auto 117 | padding-right: 0 118 | 119 | .text 120 | display: none 121 | 122 | .submit 123 | display: inline-block 124 | --------------------------------------------------------------------------------