diff options
Diffstat (limited to 'plugins/jetpack/scss/atoms/_buttons.scss')
-rw-r--r-- | plugins/jetpack/scss/atoms/_buttons.scss | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/atoms/_buttons.scss b/plugins/jetpack/scss/atoms/_buttons.scss new file mode 100644 index 00000000..45825f97 --- /dev/null +++ b/plugins/jetpack/scss/atoms/_buttons.scss @@ -0,0 +1,137 @@ +// ========================================================================== +// 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-weight: bold; + font-size: 0.9285714286em; // 13/14 + line-height: 1; + 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(50px, 46px) em(15px, 28px); + color: #fff; + font-weight: 400; + font-size: 20px; + line-height: 1; + 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; + } + }; +} |