/home/arranoyd/magicraft/wp-content/plugins/jetpack/scss/atoms/_buttons.scss
// ==========================================================================
// 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;
}
};
}