hensei-web/components/Button/index.scss

74 lines
1.2 KiB
SCSS

.Button {
align-items: center;
background: transparent;
border: none;
border-radius: 6px;
color: $grey-50;
display: inline-flex;
font-size: $font-button;
font-weight: $normal;
gap: 6px;
padding: 8px 12px;
&:hover {
background: white;
cursor: pointer;
color: $grey-00;
.icon svg {
fill: $grey-50;
}
}
.icon {
margin-top: 2px;
svg {
fill: $grey-50;
height: 12px;
width: 12px;
}
}
&.btn-blue {
background: $blue;
color: #8b8b8b;
&:hover {
background: #4B9BE5;
color: #233E56;
}
}
&.btn-red {
background: #fa4242;
color: #860f0f;
&:hover {
background: #e91a1a;
color: #4e1717;
.icon {
color: #4e1717;
}
}
.icon {
color: #860f0f;
}
}
&.btn-disabled {
background: #e0e0e0;
color: #bababa;
&:hover {
background: #e0e0e0;
color: #bababa;
}
}
.text {
color: inherit;
}
}