105 lines
2.5 KiB
SCSS
105 lines
2.5 KiB
SCSS
.btn {
|
|
padding: rem(9px) rem(12px);
|
|
font-size: rem(16px);
|
|
font-weight: 500;
|
|
&.btn-lg {
|
|
padding: rem(15px) rem(14px);
|
|
font-weight: 600;
|
|
}
|
|
&.btn-sm {
|
|
padding: rem(8px) rem(14px);
|
|
font-size: rem(14px);
|
|
}
|
|
}
|
|
|
|
// // Add btn class name and color through sass loop
|
|
$btn-colors: (
|
|
"success" --success,
|
|
"danger" --danger,
|
|
"warning" --warning,
|
|
"info" --info,
|
|
);
|
|
|
|
@each $name, $color in $btn-colors {
|
|
.btn-#{$name} {
|
|
background-color: var(#{$color}-main);
|
|
color: #fff;
|
|
border-color: var(#{$color}-main);
|
|
&:hover {
|
|
background-color: var(#{$color}-hover);
|
|
color: #fff;
|
|
border-color: var(#{$color}-main);
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(#{$color}-pressed);
|
|
color: #fff;
|
|
border-color: var(#{$color}-pressed);
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $name, $color in $btn-colors {
|
|
.btn-outline-#{$name} {
|
|
background-color: transparent;
|
|
color: var(#{$color}-main);
|
|
border-color: var(#{$color}-main);
|
|
&:hover {
|
|
background-color: var(#{$color}-hover);
|
|
color: #fff;
|
|
border-color: var(#{$color}-main);
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(#{$color}-pressed) !important;
|
|
color: #fff !important;
|
|
border-color: var(#{$color}-pressed) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Pill Btn */
|
|
@each $color, $shades in $colors {
|
|
@each $shade, $value in $shades {
|
|
.btn-#{$color}-#{$shade} {
|
|
background-color: var(--#{$color}-#{$shade});
|
|
color: #fff;
|
|
border-color: var(--#{$color}-#{$shade});
|
|
&:hover {
|
|
background-color: var(--#{$color}-700);
|
|
color: #fff !important;
|
|
border-color: var(--#{$color}-700);
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(--#{$color}-800) !important;
|
|
color: #fff !important;
|
|
border-color: var(--#{$color}-800) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Outline Btn */
|
|
@each $color, $shades in $colors {
|
|
@each $shade, $value in $shades {
|
|
.btn-outline-#{$color}-#{$shade} {
|
|
background-color: transparent !important;
|
|
color: var(--#{$color}-#{$shade}) !important;
|
|
border-color: var(--#{$color}-#{$shade}) !important;
|
|
&:hover {
|
|
background-color: var(--#{$color}-#{$shade}) !important;
|
|
color: #fff !important;
|
|
border-color: var(--#{$color}-#{$shade}) !important;
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(--#{$color}-800) !important;
|
|
color: #fff !important;
|
|
border-color: var(--#{$color}-800) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|