Edit
/* scss/7-rows/_button-bar-row.scss */
.button-row {
text-align: center;
height: auto;
overflow: hidden;
&.--green,
&.--green .bb-button {
background: #115740;
}
&.--web-gold,
&.--web-gold .bb-button {
background: #866f45;
}
&.--patina,
&.--patina .bb-button {
background: #00906d;
}
&.--moss,
&.--moss .bb-button {
background: #607d3b;
}
&.--spirit-gold,
&.--spirit-gold .bb-button {
background: #f0b323;
}
&.--blue,
&.--blue .bb-button {
background: #00467f;
}
&.--coral,
&.--coral .bb-button {
background: #b65300;
}
&.--teal,
&.--teal .bb-button {
background: #0089a4;
}
&.--green + &.--green {
border-top: 1px solid #0a3426;
}
&.--web-gold + &.--web-gold {
border-top: 1px solid #57482d;
}
&.--patina + &.--patina {
border-top: 1px solid #005e47;
}
&.--moss + &.--moss {
border-top: 1px solid #3e5126;
}
&.--spirit-gold + &.--spirit-gold {
border-top: 1px solid #9c7517;
}
&.--blue + &.--blue {
border-top: 1px solid #002e53;
}
&.--coral + &.--coral {
border-top: 1px solid #763600;
}
&.--teal + &.--teal {
border-top: 1px solid #037d96;
}
.button-group {
display: grid;
justify-items: center;
background-color: transparent;
max-width: 1200px;
width: 100%;
margin: 0 auto;
.button-wrapper {
display: flex;
width: 100%;
min-width: 300px;
min-height: 90px;
&.--green {
border-bottom: 1px solid #0a3426;
}
&.--web-gold {
border-bottom: 1px solid #57482d;
}
&.--patina {
border-bottom: 1px solid #005e47;
}
&.--moss {
border-bottom: 1px solid #3e5126;
}
&.--spirit-gold {
border-bottom: 1px solid #9c7517;
}
&.--blue {
border-bottom: 1px solid #002e53;
}
&.--coral {
border-bottom: 1px solid #763600;
}
&.--teal {
border-bottom: 1px solid #037d96;
}
&:last-of-type {
border-bottom: none;
}
.bb-button {
width: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 22px 44px;
position: relative;
z-index: 1;
text-transform: uppercase;
transition: all 0.3s ease;
margin: 0;
}
}
}
&.--buttons1 .button-wrapper {
max-width: 644px;
}
&.--spirit-gold .bb-button {
color: #000 !important;
&:hover,
&:focus {
color: #fff !important;
}
}
&.--buttons1 .bb-button span,
&.--buttons2 .bb-button span,
&.--buttons3 .bb-button span {
font-family: "Avenir Next W01", "Nunito Sans", Verdana, sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
line-height: 20px;
}
&.--buttons4 .bb-button span {
font-family: "Avenir Next W01", "Nunito Sans", Verdana, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
line-height: 19px;
}
&.--green .bb-button:hover,
&.--green .bb-button:focus,
&.--web-gold .bb-button:hover,
&.--web-gold .bb-button:focus,
&.--patina .bb-button:hover,
&.--patina .bb-button:focus,
&.--moss .bb-button:hover,
&.--moss .bb-button:focus,
&.--spirit-gold .bb-button:hover,
&.--spirit-gold .bb-button:focus {
text-decoration: none;
background: #183028;
}
&.--blue .bb-button:hover,
&.--blue .bb-button:focus,
&.--coral .bb-button:hover,
&.--coral .bb-button:focus,
&.--teal .bb-button:hover,
&.--teal .bb-button:focus {
text-decoration: none;
background: #0f2c4c;
}
@include breakpoint($widget-mobile-to-tablet-breakpoint) {
&.--buttons1 .button-wrapper,
&.--buttons2 .button-wrapper {
transform: skewX(-20deg);
}
&.--buttons1 .bb-button span,
&.--buttons2 .bb-button span {
transform: skewX(20deg);
}
&.--buttons2 .button-group {
grid-template-columns: 1fr 1fr;
}
&.--buttons4 .button-group {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
&.--buttons4 .button-wrapper {
border-bottom: none !important;
}
&.--buttons1 .button-wrapper {
&.--green .bb-button {
border-left: 1px solid #0a3426;
border-right: 1px solid #0a3426;
}
&.--web-gold .bb-button {
border-left: 1px solid #57482d;
border-right: 1px solid #57482d;
}
&.--patina .bb-button {
border-left: 1px solid #005e47;
border-right: 1px solid #005e47;
}
&.--moss .bb-button {
border-left: 1px solid #3e5126;
border-right: 1px solid #3e5126;
}
&.--spirit-gold .bb-button {
border-left: 1px solid #9c7517;
border-right: 1px solid #9c7517;
}
&.--blue .bb-button {
border-left: 1px solid #002e53;
border-right: 1px solid #002e53;
}
&.--coral .bb-button {
border-left: 1px solid #763600;
border-right: 1px solid #763600;
}
&.--teal .bb-button {
border-left: 1px solid #037d96;
border-right: 1px solid #037d96;
}
}
&.--buttons2 .button-wrapper {
&:first-of-type {
border-bottom: none !important;
}
&.--green:last-of-type .bb-button {
border-left: 1px solid #0a3426;
}
&.--web-gold:last-of-type .bb-button {
border-left: 1px solid #57482d;
}
&.--patina:last-of-type .bb-button {
border-left: 1px solid #005e47;
}
&.--moss:last-of-type .bb-button {
border-left: 1px solid #3e5126;
}
&.--spirit-gold:last-of-type .bb-button {
border-left: 1px solid #9c7517;
}
&.--blue:last-of-type .bb-button {
border-left: 1px solid #002e53;
}
&.--coral:last-of-type .bb-button {
border-left: 1px solid #763600;
}
&.--teal:last-of-type .bb-button {
border-left: 1px solid #037d96;
}
}
&.--buttons4 .button-wrapper {
&.--green:nth-of-type(even) .bb-button {
border-left: 1px solid #0a3426;
}
&.--green:nth-of-type(3) .bb-button,
&.--green:nth-of-type(4) .bb-button {
border-top: 1px solid #0a3426;
}
&.--web-gold:nth-of-type(even) .bb-button {
border-left: 1px solid #57482d;
}
&.--web-gold:nth-of-type(3) .bb-button,
&.--web-gold:nth-of-type(4) .bb-button {
border-top: 1px solid #57482d;
}
&.--patina:nth-of-type(even) .bb-button {
border-left: 1px solid #005e47;
}
&.--patina:nth-of-type(3) .bb-button,
&.--patina:nth-of-type(4) .bb-button {
border-top: 1px solid #005e47;
}
&.--moss:nth-of-type(even) .bb-button {
border-left: 1px solid #3e5126;
}
&.--moss:nth-of-type(3) .bb-button,
&.--moss:nth-of-type(4) .bb-button {
border-top: 1px solid #3e5126;
}
&.--spirit-gold:nth-of-type(even) .bb-button {
border-left: 1px solid #9c7517;
}
&.--spirit-gold:nth-of-type(3) .bb-button,
&.--spirit-gold:nth-of-type(4) .bb-button {
border-top: 1px solid #9c7517;
}
&.--blue:nth-of-type(even) .bb-button {
border-left: 1px solid #002e53;
}
&.--blue:nth-of-type(3) .bb-button,
&.--blue:nth-of-type(4) .bb-button {
border-top: 1px solid #002e53;
}
&.--coral:nth-of-type(even) .bb-button {
border-left: 1px solid #763600;
}
&.--coral:nth-of-type(3) .bb-button,
&.--coral:nth-of-type(4) .bb-button {
border-top: 1px solid #763600;
}
&.--teal:nth-of-type(even) .bb-button {
border-left: 1px solid #037d96;
}
&.--teal:nth-of-type(3) .bb-button,
&.--teal:nth-of-type(4) .bb-button {
border-top: 1px solid #037d96;
}
}
}
@include breakpoint($mobile-to-desktop-breakpoint) {
&.--buttons3 .button-group {
grid-template-columns: 1fr 1fr 1fr;
}
&.--buttons3 .button-wrapper {
transform: skewX(-20deg);
border-bottom: none !important;
&.--green:first-of-type .bb-button {
border-right: 1px solid #0a3426;
}
&.--web-gold:first-of-type .bb-button {
border-right: 1px solid #57482d;
}
&.--patina:first-of-type .bb-button {
border-right: 1px solid #005e47;
}
&.--moss:first-of-type .bb-button {
border-right: 1px solid #3e5126;
}
&.--spirit-gold:first-of-type .bb-button {
border-right: 1px solid #9c7517;
}
&.--blue:first-of-type .bb-button {
border-right: 1px solid #002e53;
}
&.--coral:first-of-type .bb-button {
border-right: 1px solid #763600;
}
&.--teal:first-of-type .bb-button {
border-right: 1px solid #00596b;
}
&.--green:last-of-type .bb-button {
border-left: 1px solid #0a3426;
}
&.--web-gold:last-of-type .bb-button {
border-left: 1px solid #57482d;
}
&.--patina:last-of-type .bb-button {
border-left: 1px solid #005e47;
}
&.--moss:last-of-type .bb-button {
border-left: 1px solid #3e5126;
}
&.--spirit-gold:last-of-type .bb-button {
border-left: 1px solid #9c7517;
}
&.--blue:last-of-type .bb-button {
border-left: 1px solid #002e53;
}
&.--coral:last-of-type .bb-button {
border-left: 1px solid #763600;
}
&.--teal:last-of-type .bb-button {
border-left: 1px solid #57482d;
}
}
&.--buttons3 .bb-button span {
transform: skewX(20deg);
}
}
@include breakpoint($desktop-to-wide-desktop-breakpoint) {
&.--buttons4 .button-group {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: none;
}
&.--buttons4 .button-wrapper {
transform: skewX(-20deg);
&:nth-of-type(3) .bb-button,
&:nth-of-type(4) .bb-button {
border-top: none !important;
}
&.--green:nth-of-type(2) .bb-button {
border-right: 1px solid #0a3426;
}
&.--web-gold:nth-of-type(2) .bb-button {
border-right: 1px solid #57482d;
}
&.--patina:nth-of-type(2) .bb-button {
border-right: 1px solid #005e47;
}
&.--moss:nth-of-type(2) .bb-button {
border-right: 1px solid #3e5126;
}
&.--spirit-gold:nth-of-type(2) .bb-button {
border-right: 1px solid #9c7517;
}
&.--blue:nth-of-type(2) .bb-button {
border-right: 1px solid #002e53;
}
&.--coral:nth-of-type(2) .bb-button {
border-right: 1px solid #763600;
}
&.--teal:nth-of-type(2) .bb-button {
border-right: 1px solid #57482d;
}
}
&.--buttons4 .bb-button span {
transform: skewX(20deg);
}
}
}