// ========================================================================== // Buttony button buttons // ========================================================================== .button, .download-jetpack { transition: all .1s ease-in-out; } .jp-button { display: inline-block; position: relative; padding: em(10px, 13px) em(19px, 13px); color: #efefef; font: 800 0.9285714286em/1 'Open Sans', Helvetica, sans-serif; // 13/14 text-shadow: 0 1px 1px rgba(0,0,0,.2); background: #6f7476; border-radius: 3px; &:visited { color: #efefef; } &:hover, &:focus { color: #fff; background: #57972d; } &:active { background: #57972d; opacity: 0.8; } } .jp-button--settings { @extend .jp-button; background: #93b45f; color: #e8eedf; &:visited { color: #e8eedf } &:hover, &:focus { background: #9fbd72; color: #fff; } &.current { background: #3c6621; color: #fff; box-shadow: inset 0 2px 0 #365A1F, inset 0 1px 3px #3c6621; } } .download-jetpack { display: inline-block; position: relative; padding: em(18px, 28px) em(24px, 28px) em(15px, 28px); color: #fff; font: 400 20px/1 "proxima-nova", 'Open Sans', Helvetica, sans-serif; // 28/14 background: #518d2a; z-index: 3; border-radius: 6px; box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0,0,0,.4); &:visited { color: #fff; } &:hover, &:focus { color: #fff; background: #57972d; box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0,0,0,.4); } &:active { top: 6px; box-shadow: 0 0px 0 #3e6c20, 0 0 0 rgba(0,0,0,.4); &:after { // fixes buggy clicks top: -6px; } } &:before { content: ''; display: inline-block; position: relative; top: -2px; margin-right: 13px; width: 30px; height: 30px; vertical-align: middle; background: url('../images/connect-plug.svg') center center no-repeat; background-size: 100%; } &:after { // fixes buggy clicks content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @include breakpoint(large-desktop){ font-size: em(18px); &:before { top: -1px; width: 23px; height: 23px; } }; @include breakpoint(desktop){ &:active { top: 0; } }; @include breakpoint(large-phone){ font-size: em(17px); font-weight: 600; &:before { width: 19px; height: 19px; margin-right: 9px; } }; } #searchsubmit { display: inline-block; border: none; position: relative; padding: em(5px, 7px) em(9px, 6px); color: #efefef; font: 800 0.8em/1 'Open Sans', Helvetica, sans-serif; // 13/14 text-shadow: 0 1px 1px rgba(0,0,0,.2); background: #6f7476; outline: none; border-radius: 3px; &:visited { color: #efefef; } &:hover, &:focus { color: #fff; background: #2aa0d5; } &:active { opacity: 0.7; } }