Migrate to bootstrap 4 in LeafWeb

2019-12-06 22:29:15 -05:00
parent f9a452045f
commit 88469b19be
248 changed files with 20293 additions and 21639 deletions
@@ -1,19 +1,201 @@
@import "bootstrap_variables_leafweb";
-@import "bootstrap.scss";
+@import "bootstrap/bootstrap.scss";

+/*
+
+$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-default-bg, $btn-default-color, $btn-default-bg);
+    @include button-variant($btn-secondary-bg, $btn-secondary-color, $btn-secondary-bg);
    &:hover {
-      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+      @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
    }
  }
  &.btn-transparent {
-    @include button-variant($btn-default-bg, transparent, $btn-default-bg);
+    @include button-variant($btn-secondary-bg, transparent, $btn-secondary-bg);
    &:hover {
-      @include button-variant($btn-default-bg, darken($btn-default-bg, 25%), $btn-default-bg);
+      @include button-variant($btn-secondary-bg, darken($btn-secondary-bg, 25%), $btn-secondary-bg);
    }
  }
 }
@@ -92,3 +274,4 @@
    }
  }
 } 
+*/