2019-10-29 08:22:51 +00:00
|
|
|
//
|
|
|
|
// Mixins: Navbar
|
|
|
|
//
|
|
|
|
|
|
|
|
// Navbar Variant
|
2020-12-04 08:10:22 +00:00
|
|
|
@mixin navbar-variant($name, $color) {
|
|
|
|
.navbar-#{$name} {
|
|
|
|
background-color: $color;
|
|
|
|
color: color-yiq($color);
|
2019-10-29 08:22:51 +00:00
|
|
|
|
2020-12-04 08:10:22 +00:00
|
|
|
&.navbar-light {
|
|
|
|
.form-control-navbar {
|
|
|
|
&::placeholder {
|
|
|
|
color: rgba($gray-800, .8);
|
|
|
|
}
|
|
|
|
&,
|
|
|
|
+ .input-group-append > .btn-navbar {
|
2021-01-27 19:28:47 +00:00
|
|
|
background-color: darken($color, 4%);
|
|
|
|
border-color: darken($color, 9%);
|
2020-12-04 08:10:22 +00:00
|
|
|
color: rgba($gray-800, .8);
|
|
|
|
}
|
2019-10-29 08:22:51 +00:00
|
|
|
|
2020-12-04 08:10:22 +00:00
|
|
|
&:focus {
|
|
|
|
&::placeholder {
|
|
|
|
color: $gray-800;
|
|
|
|
}
|
|
|
|
&,
|
|
|
|
+ .input-group-append .btn-navbar {
|
2021-01-27 19:28:47 +00:00
|
|
|
background-color: darken($color, 5%);
|
|
|
|
border-color: darken($color, 9%) !important;
|
2020-12-04 08:10:22 +00:00
|
|
|
color: $gray-800;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.navbar-dark {
|
|
|
|
.form-control-navbar {
|
|
|
|
&::placeholder {
|
|
|
|
color: rgba($white, .8);
|
|
|
|
}
|
|
|
|
&,
|
|
|
|
+ .input-group-append > .btn-navbar {
|
2021-01-27 19:28:47 +00:00
|
|
|
background-color: lighten($color, 4%);
|
|
|
|
border-color: lighten($color, 9%);
|
2020-12-04 08:10:22 +00:00
|
|
|
color: rgba($white, .8);
|
|
|
|
}
|
2019-10-29 08:22:51 +00:00
|
|
|
|
2020-12-04 08:10:22 +00:00
|
|
|
&:focus {
|
|
|
|
&::placeholder {
|
|
|
|
color: $white;
|
|
|
|
}
|
|
|
|
&,
|
|
|
|
+ .input-group-append .btn-navbar {
|
2021-01-27 19:28:47 +00:00
|
|
|
background-color: lighten($color, 5%);
|
|
|
|
border-color: lighten($color, 9%) !important;
|
2020-12-04 08:10:22 +00:00
|
|
|
color: $white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-10-29 08:22:51 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|