button.scss
TLDR
This file (button.scss
) contains the styles for a button component in the Demo Projects project.
END
.Button {
--danger-button-bg-rgb: 247, 67, 67;
font-family: 'Open Sans', sans-serif;
display: flex;
flex: 0 0 auto;
align-items: center;
text-align: center;
justify-content: center;
border-radius: var(--default-rad);
min-width: 20px;
cursor: pointer;
overflow: hidden;
background: transparent;
border: 0;
transition: all 100ms ease-out 0s;
color: inherit;
height: 32px;
padding: 0 10px;
font-weight: 600;
&:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
}
.CompassIcon {
align-items: center;
display: flex;
height: 18px;
justify-content: center;
margin-right: 0;
width: 18px;
font-size: 18px;
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
&.filled,
&.emphasis--primary {
color: #fff;
background-color: rgb(var(--button-bg-rgb));
padding: 6px 12px;
&:hover {
background-color: rgb(var(--button-bg-rgb), 0.8);
}
&.danger {
background: linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb)));
&:hover {
background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb)));
}
&:active {
background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb)));
}
}
}
&.emphasis--secondary {
border: 1px solid rgb(var(--button-bg-rgb));
color: rgb(var(--button-bg-rgb));
&:hover {
background-color: rgb(var(--button-bg-rgb), 0.08);
}
&:active {
background-color: rgb(var(--button-bg-rgb), 0.16);
}
}
&.emphasis--tertiary {
background: rgba(var(--button-bg-rgb), 0.08);
color: rgb(var(--button-bg-rgb));
&:hover {
background-color: rgb(var(--button-bg-rgb), 0.12);
}
&:active {
background-color: rgb(var(--button-bg-rgb), 0.16);
}
}
&.emphasis--quaternary {
background: transparent;
color: rgb(var(--button-bg-rgb));
&:hover {
background: rgba(var(--button-bg-rgb), 0.08);
}
&:active {
background-color: rgb(var(--button-bg-rgb), 0.12);
}
}
&.emphasis--gray {
background: transparent;
color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
}
&:active {
color: rgb(var(--button-bg-rgb));
background-color: rgb(var(--button-bg-rgb), 0.12);
}
}
&.emphasis--danger {
color: rgb(var(--button-danger-color-rgb));
background-color: rgb(var(--button-danger-bg-rgb));
&:hover {
background-color: rgb(var(--button-danger-bg-rgb), 0.8);
}
}
&.emphasis--default {
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
}
}
&.emphasis--link {
color: rgb(var(--button-bg-rgb));
}
&.active {
background: rgba(var(--button-bg-rgb), 0.08);
color: rgb(var(--button-bg-rgb));
}
&.size--xsmall {
font-size: 12px;
padding: 0 10px;
height: 24px;
.CompassIcon {
font-size: 14.4px;
width: 12px;
height: 12px;
&:first-child {
margin-right: 6px;
}
&:last-child {
margin-left: 6px;
}
}
}
&.size--small {
font-size: 12px;
padding: 0 16px;
height: 32px;
.CompassIcon {
font-size: 14.4px;
width: 12px;
height: 12px;
&:first-child {
margin-right: 6px;
}
&:last-child {
margin-left: 6px;
}
}
}
&.size--medium {
font-size: 14px;
font-weight: 600;
padding: 0 20px;
height: 40px;
}
&.size--large {
font-size: 16px;
height: 48px;
padding: 0 24px;
.CompassIcon {
font-size: 24px;
width: 20px;
height: 20px;
&:first-child {
margin-right: 10px;
}
&:last-child {
margin-left: 10px;
}
}
}
}