You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
consul/website/pages/_temporary_button.css

117 lines
1.9 KiB

.button {
background: var(--consul);
border-radius: 1px;
box-sizing: border-box;
color: var(--white);
display: inline-block;
font-size: 0.938rem;
font-weight: 500;
line-height: 1.6em;
margin-bottom: 4px;
padding: 14px 20px;
text-decoration: none;
&:hover,
&:active,
&:focus {
color: var(--white);
text-decoration: none;
}
&:focus {
border: 3px solid #e07eac;
outline: none;
padding: 11px 17px;
}
&:hover {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
var(--consul);
border: none;
padding: 14px 20px;
}
&:active {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
var(--consul);
border: none;
}
&.white {
background: var(--white);
color: var(--black);
& path {
fill: black;
}
&:hover {
background: #fff2f8;
}
&:active {
background: #f8d9e7;
}
}
&.secondary {
background: transparent;
border: 1px solid rgba(29, 30 35, 0.2);
color: var(--black);
padding: 13px 19px;
&:focus {
border: 3px solid #e07eac;
padding: 11px 17px;
}
&:hover {
background: rgba(29, 30 35, 0.1);
border: none;
padding: 14px 20px;
}
&:active {
background: rgba(29, 30 35, 0.16);
}
&.white {
border: 1px solid rgba(255, 255, 255, 0.24);
color: var(--white);
&:focus {
border: 3px solid #e07eac;
padding: 11px 17px;
}
&:hover {
background: rgba(255, 255, 255, 0.14);
border: none;
padding: 14px 20px;
}
&:active {
background: rgba(255, 255, 255, 0.08);
}
}
}
&.download {
& svg {
margin: 0 4px -4px 0;
& path {
transition: fill 0.25s ease;
}
}
}
&.inline {
padding: 8px 14px;
}
& path {
fill: var(--white);
}
}