gorbenko.pavel
da158cfd84
Tests / test (push) Successful in 2m26s
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5
82 lines
1.6 KiB
SCSS
82 lines
1.6 KiB
SCSS
@import '../../../../styles/design-tokens';
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 10px 20px;
|
|
border-radius: $r-sm;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: $font-sans;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: .18s;
|
|
white-space: nowrap;
|
|
letter-spacing: .15px;
|
|
text-decoration: none;
|
|
|
|
&:disabled {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.primary {
|
|
background: $navy-800;
|
|
color: #fff;
|
|
border-color: $navy-800;
|
|
&:hover:not(:disabled) { background: $navy-700; box-shadow: $sh-2; }
|
|
}
|
|
|
|
.accent {
|
|
@include btn-accent;
|
|
}
|
|
|
|
.secondary {
|
|
background: #fff;
|
|
color: $navy-800;
|
|
border-color: $gray-300;
|
|
&:hover:not(:disabled) { border-color: $gold-500; color: $navy-900; }
|
|
}
|
|
|
|
.ghost {
|
|
background: transparent;
|
|
color: $navy-700;
|
|
border-color: transparent;
|
|
&:hover:not(:disabled) { background: $navy-100; }
|
|
}
|
|
|
|
.danger {
|
|
background: #fff;
|
|
color: $red-500;
|
|
border-color: $gray-300;
|
|
&:hover:not(:disabled) { border-color: $red-500; background: $red-50; }
|
|
}
|
|
|
|
.sm {
|
|
padding: 7px 14px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.iconButton {
|
|
width: 33px;
|
|
height: 33px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: $r-sm;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
color: $gray-400;
|
|
transition: .18s;
|
|
|
|
&:hover:not(:disabled) { color: $navy-800; background: $navy-50; border-color: $gray-200; }
|
|
&.danger:hover:not(:disabled) { color: $red-500; background: $red-50; }
|
|
&:disabled { opacity: .4; cursor: not-allowed; }
|
|
}
|