// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Primary
Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
```
```
*/
.CDB-Button {
position: relative;
padding: $baseSize $baseSize + 12;
transition: background, 300ms;
border-radius: $baseSize / 2;
cursor: pointer;
box-sizing: border-box;
.CDB-Button-Text {
display: block;
}
&.is-disabled {
opacity: 0.24;
cursor: default;
}
}
.CDB-Button--loading {
.CDB-Button-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: 50%;
opacity: 0;
z-index: 10;
}
.CDB-Button-Text {
transition: all 600ms;
}
&.is-loading {
cursor: default;
.CDB-Button-loader {
animation-name: showIn;
animation-duration: 600ms;
animation-fill-mode: forwards;
}
.CDB-Button-Text {
opacity: 0;
}
}
}
@keyframes showIn {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.CDB-Button--small {
padding: $baseSize / 2 $baseSize + 4;
border-radius: 3px;
}
.CDB-Button--big {
padding: $baseSize + 3 $baseSize + 12;
}
.CDB-Button--icon {
padding: 7px 9px;
}
.CDB-Button--primary {
background: $cBlue;
color: $cWhite;
&:hover,
&:active {
background: $cBlueHover;
}
&.is-loading {
&:hover,
&:active {
background: $cBlue;
}
}
&.is-disabled {
&:hover,
&:active {
background: $cBlue;
}
}
}
.CDB-Button--alert {
background: $cAlert;
color: $cWhite;
&:hover,
&:active {
background: darken($cAlert, 8%);
}
&.is-disabled {
&:hover,
&:active {
background: $cAlert;
}
}
}
.CDB-Button--error,
.CDB-Button--negative {
background: $cError;
color: $cWhite;
&:hover,
&:active {
background: darken($cError, 8%);
}
&.is-disabled {
&:hover,
&:active {
background: $cError;
}
}
}
// Buttons styles
// ----------------------------------------------
/* SG
# Buttons/Secondary
```
```
*/
.CDB-Button--secondary {
color: $cBlue;
box-shadow: inset 0 0 0 1px $cBlue;
&:hover {
background: rgba($cBlue, 0.08);
box-shadow: inset 0 0 0 2px $cBlueHover;
}
&:active {
background: $cBlue;
color: $cWhite;
}
&.is-disabled {
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px $cBlue;
}
&:active {
background: transparent;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: $cBlue;
}
}
&--background {
background-color: $cWhite;
}
}
.CDB-Button--white {
color: $cWhite;
box-shadow: inset 0 0 0 1px $cWhite;
&:hover {
background: rgba($cWhite, 0.08);
box-shadow: inset 0 0 0 2px darken($cWhite, 8%);
}
&:active {
background: rgba($cMainBg, 0.08);
color: $cWhite;
}
&.is-disabled {
opacity: 0.24;
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px $cWhite;
}
&:active {
background: transparent;
color: $cWhite;
}
}
&.is-loading {
cursor: default;
&:hover,
&:active {
background: none;
color: $cWhite;
}
}
}