Bootstrap5 (#17)

* Bootstrap5 migration

dev/scss/wvc-theme/slate/_bootswatch.scss

@@ -1,20 +1,20 @@
-// Slate 4.6.0
+// Slate 5.0.2
 // Bootswatch
 
 
-// Mixins ======================================================================
+// Mixins
 
 @mixin btn-shadow($color){
-  @include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
+  @include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%));
   filter: none;
 }
 
 @mixin btn-shadow-inverse($color){
-  @include gradient-y-three-colors(darken($color, 18%), darken($color, 15%), 40%, darken($color, 13%));
+  @include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%));
   filter: none;
 }
 
-// Navbar ======================================================================
+// Navbar
 
 .navbar {
   border: 1px solid rgba(0, 0, 0, .6);
@@ -103,7 +103,7 @@
   }
 }
 
-// Buttons =====================================================================
+// Buttons
 
 .btn {
   border-color: rgba(0, 0, 0, .6);
@@ -211,7 +211,7 @@
   }
 }
 
-// Typography ==================================================================
+// Typography
 
 h1,
 h2,
@@ -222,167 +222,7 @@ h6 {
   text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
 }
 
-// Tables ======================================================================
-
-.table {
-  &-primary,
-  &-secondary,
-  &-success,
-  &-info,
-  &-warning,
-  &-danger {
-    color: $white;
-  }
-
-  &-primary {
-    &,
-    > th,
-    > td {
-      background-color: $primary;
-    }
-  }
-
-  &-secondary {
-    &,
-    > th,
-    > td {
-      background-color: $secondary;
-    }
-  }
-
-  &-light {
-    &,
-    > th,
-    > td {
-      background-color: $light;
-    }
-  }
-
-  &-dark {
-    &,
-    > th,
-    > td {
-      background-color: $dark;
-    }
-  }
-
-  &-success {
-    &,
-    > th,
-    > td {
-      background-color: $success;
-    }
-  }
-
-  &-info {
-    &,
-    > th,
-    > td {
-      background-color: $info;
-    }
-  }
-
-  &-danger {
-    &,
-    > th,
-    > td {
-      background-color: $danger;
-    }
-  }
-
-  &-warning {
-    &,
-    > th,
-    > td {
-      background-color: $warning;
-    }
-  }
-
-  &-active {
-    &,
-    > th,
-    > td {
-      background-color: $table-active-bg;
-    }
-  }
-
-  &-hover {
-    .table-primary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($primary, 5%);
-      }
-    }
-
-    .table-secondary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($secondary, 5%);
-      }
-    }
-
-    .table-light:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($light, 5%);
-      }
-    }
-
-    .table-dark:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($dark, 5%);
-      }
-    }
-
-    .table-success:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($success, 5%);
-      }
-    }
-
-    .table-info:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($info, 5%);
-      }
-    }
-
-    .table-danger:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($danger, 5%);
-      }
-    }
-
-    .table-warning:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($warning, 5%);
-      }
-    }
-
-    .table-active:hover {
-      &,
-      > th,
-      > td {
-        background-color: $table-active-bg;
-      }
-    }
-
-  }
-}
-
-// Forms =======================================================================
+// Forms
 
 legend {
   color: $white;
@@ -394,7 +234,7 @@ legend {
   color: $white;
 }
 
-// Navs ========================================================================
+// Navs
 
 .nav-tabs {
   .nav-link {
@@ -472,13 +312,15 @@ legend {
   background-color: transparent;
   @include btn-shadow($gray-800);
 
-  a,
+  a {
+    text-decoration: none;
+  }
   a:hover {
     color: $white;
   }
 }
 
-// Indicators ==================================================================
+// Indicators
 
 .alert {
   border: none;
@@ -503,29 +345,18 @@ legend {
       color: $body-bg;
     }
   }
-
-  .close {
-    color: $close-color;
-    text-decoration: none;
-  }
 }
 
 .badge {
-  &-success,
-  &-warning,
-  &-info {
-    color: $white;
+  &.bg-light {
+    color: $dark;
   }
 }
 
-// Containers ==================================================================
-
-.jumbotron {
-  border: 1px solid rgba(0, 0, 0, .6);
-}
+// Containers
 
 .list-group {
   &-item-action:hover {
-    background-color: darken($gray-900, 5%);
+    background-color: shade-color($gray-900, 10%);
   }
 }