Responsive button styles

This commit is contained in:
kitajchuk
2021-03-31 09:25:50 -07:00
parent 244e197bb6
commit 3c34a5cdd9

View File

@@ -1,7 +1,7 @@
.btn {
font-size: 16px;
font-size: $m-size;
line-height: 1;
padding: 23px 65px 21px;
padding: 23px 64px 21px;
background-color: $jambonz;
color: $white;
text-decoration: none;
@@ -9,6 +9,27 @@
border-radius: 30px;
display: inline-block;
@media (max-width: $width-tablet-2) {
font-size: $ms-size;
}
@media (max-width: $width-mobile) {
font-size: $mxs-size;
}
&--login {
font-family: 'objectivityregular';
font-size: $ms-size;
background-color: transparent;
border: 2px solid $jambonz;
color: $jambonz;
padding: 10px 26px 8px;
@media (max-width: $width-tablet-2) {
font-size: $mxs-size;
}
}
&--fill {
&--dark {
background-color: $charcoal;
@@ -33,11 +54,11 @@
}
&--pill {
font-family: 'objectivityregular';
background-color: transparent;
border: 2px solid $charcoal;
color: $charcoal;
padding: 19px 32px 18px;
font-family: 'objectivityregular';
padding: 18px 32px 17px;
svg, span {
display: inline-block;
@@ -57,21 +78,18 @@
}
}
}
}
&--login {
background-color: transparent;
border: 2px solid $jambonz;
color: $jambonz;
padding: 10px 26px 8px;
font-family: 'objectivityregular';
font-size: 14px;
.btn:not(.btn--pill, .btn--login) {
@media (max-width: $width-tablet-2) {
padding: 18px 46px;
}
}
.btns {
margin: 0 -32px;
margin: 0 -2.2222222222vw;
.btn {
margin: 0 32px;
margin: 0 2.2222222222vw;
}
}