wp-theme/ascribe/assets/_src/less/ascribe/_buttons.less

85 lines
1.7 KiB
Plaintext

.button {
&:extend(.fontRegular);
display: block;
padding: (@spacer / 2) @spacer;
border: 1px solid;
font-size: 22px;
line-height: 26px;
text-decoration: none;
text-align: center;
transition: .2s ease-out;
@media (@screen-sm) {
display: inline-block;
min-width: 265px;
}
&.blue {
@bgColor: @blueBright;
color: @white;
background-color: @bgColor;
border-color: @bgColor;
&:hover,
&:focus {
background-color: fade(@bgColor,50);
}
}
&.pink {
@bgColor: @pink;
color: @white;
background-color: @bgColor;
border-color: @bgColor;
&:hover,
&:focus {
background-color: fade(@bgColor,50);
}
}
&.blue-overPic {
@bgColor: @blueBright;
color: @white;
background-color: @bgColor;
border-color: @bgColor;
&:hover,
&:focus {
background-color: @white;
color: @bgColor;
}
}
&.pink-overPic {
@bgColor: @pink;
color: @white;
background-color: @bgColor;
border-color: @bgColor;
&:hover,
&:focus {
background-color: @white;
color: @bgColor;
}
}
&.white-blue {
@bgColor: @white;
color: @blueBright;
background-color: @bgColor;
border-color: @blueBright;
&:hover,
&:focus {
background-color: fade(@blueBright,50);
color: @white;
}
}
&.small {
padding: (@spacer / 4) (@spacer / 2);
font-size: @font-size-small;
min-width: 0;
}
}