291 lines
6.6 KiB
SCSS
291 lines
6.6 KiB
SCSS
@import "bootstrap_variables_leafweb";
|
|
@import "bootstrap/bootstrap.scss";
|
|
|
|
.navbar-brand img {
|
|
width: 140px;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
.navbar-brand img {
|
|
width: 175px;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(lg) {
|
|
.navbar-brand img {
|
|
width: 205px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
$bgDefault: $dark;
|
|
$bgHighlight: $primary;
|
|
$colDefault: #ecf0f1;
|
|
$colHighlight: #b7f696;
|
|
$dropDown: false;
|
|
|
|
.navbar {
|
|
background-color: $bgDefault !important;
|
|
|
|
.navbar-brand {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $colDefault;
|
|
|
|
a {
|
|
color: $colHighlight;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: $colDefault;
|
|
border-radius: .25rem;
|
|
margin: 0 0.25em;
|
|
|
|
&:not(.disabled) {
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if ($dropDown) {
|
|
.dropdown-menu {
|
|
background-color: $bgDefault;
|
|
border-color: $bgHighlight;
|
|
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus, &.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-top-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item.active, .nav-item.show {
|
|
.nav-link, .nav-link:hover, .nav-link:focus {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-toggle {
|
|
border-color: $bgHighlight;
|
|
|
|
&:hover, &:focus {
|
|
background-color: $bgHighlight;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
color: $colDefault;
|
|
}
|
|
}
|
|
|
|
.navbar-collapse,
|
|
.navbar-form {
|
|
border-color: $colDefault;
|
|
}
|
|
|
|
.navbar-link {
|
|
color: $colDefault;
|
|
|
|
&:hover {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.navbar-expend-sm .navbar-nav .show .dropdown-menu {
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.navbar-expend-md .navbar-nav .show .dropdown-menu {
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.navbar-expend-lg .navbar-nav .show .dropdown-menu {
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.navbar-expend-xl .navbar-nav .show .dropdown-menu {
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-expend .navbar-nav .show .dropdown-menu {
|
|
.dropdown-item {
|
|
color: $colDefault;
|
|
|
|
&:hover, &:focus {
|
|
color: $colHighlight;
|
|
}
|
|
}
|
|
|
|
.dropdown-item.active {
|
|
color: $colHighlight;
|
|
background-color: $bgHighlight;
|
|
}
|
|
}
|
|
*/
|
|
/*
|
|
// Alternate buttons styles inverse and transparent
|
|
// --------------------------------------------------
|
|
.btn-default {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-secondary-bg, $btn-secondary-color, $btn-secondary-bg);
|
|
&:hover {
|
|
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-secondary-bg, transparent, $btn-secondary-bg);
|
|
&:hover {
|
|
@include button-variant($btn-secondary-bg, darken($btn-secondary-bg, 25%), $btn-secondary-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-bg);
|
|
&:hover {
|
|
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-primary-bg, transparent, $btn-primary-bg);
|
|
&:hover {
|
|
@include button-variant($btn-primary-bg, darken($btn-primary-bg, 25%), $btn-primary-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-success {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-success-bg, $btn-success-color, $btn-success-bg);
|
|
&:hover {
|
|
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-success-bg, transparent, $btn-success-bg);
|
|
&:hover {
|
|
@include button-variant($btn-success-bg, darken($btn-success-bg, 25%), $btn-success-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-info {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-info-bg, $btn-info-color, $btn-info-bg);
|
|
&:hover {
|
|
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-info-bg, transparent, $btn-info-bg);
|
|
&:hover {
|
|
@include button-variant($btn-info-bg, darken($btn-info-bg, 25%), $btn-info-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-warning {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-warning-bg, $btn-warning-color, $btn-warning-bg);
|
|
&:hover {
|
|
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-warning-bg, transparent, $btn-warning-bg);
|
|
&:hover {
|
|
@include button-variant($btn-warning-bg, darken($btn-warning-bg, 25%), $btn-warning-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
&.btn-inverse {
|
|
@include button-variant($btn-danger-bg, $btn-danger-color, $btn-danger-bg);
|
|
&:hover {
|
|
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
|
}
|
|
}
|
|
&.btn-transparent {
|
|
@include button-variant($btn-danger-bg, transparent, $btn-danger-bg);
|
|
&:hover {
|
|
@include button-variant($btn-danger-bg, darken($btn-danger-bg, 25%), $btn-danger-bg);
|
|
}
|
|
}
|
|
}
|
|
*/ |