admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

package/src/scss/_small-box.scss

@@ -5,10 +5,12 @@
 .small-box {
   @include border-radius($border-radius);
   @include box-shadow($lte-card-shadow);
-
   position: relative;
   display: block;
   margin-bottom: 1.25rem;
+  --bs-link-color-rgb: none;
+  --bs-link-hover-color-rgb: none;
+  --bs-heading-color: none;
 
   // content wrapper
   > .inner {
@@ -20,14 +22,11 @@
     z-index: 10;
     display: block;
     padding: 3px 0;
-    color: rgba($white, .8);
     text-align: center;
-    text-decoration: none;
-    background-color: rgba($black, .1);
+    background-color: rgba($black, .07);
 
     &:hover {
-      color: $white;
-      background-color: rgba($black, .15);
+      background-color: rgba($black, .1);
     }
   }
 
@@ -92,47 +91,22 @@
   }
 
   // the icon
-  .icon {
+  .small-box-icon {
+    position: absolute;
+    top: 15px;
+    right: 15px;
     z-index: 0;
+    height: 70px;
+    font-size: 70px;
     color: rgba($black, .15);
-
-    > i {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      font-size: 90px;
-      @include transition(transform $lte-transition-speed linear);
-
-      &.inner-icon {
-        top: 20px;
-        font-size: 70px;
-      }
-    }
-
-    svg {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      font-size: 70px;
-      @include transition(transform $lte-transition-speed linear);
-    }
+    @include transition(transform $lte-transition-speed linear);
   }
 
   // Small box hover state
   &:hover {
-    text-decoration: none;
-
     // Animate icons on small box hover
-    .icon {
-      > i {
-        &,
-        &.inner-icon {
-          transform: scale(1.1);
-        }
-      }
-      > svg {
-        transform: scale(1.1);
-      }
+    .small-box-icon {
+      transform: scale(1.1);
     }
   }
 }
@@ -142,7 +116,7 @@
   .small-box {
     text-align: center;
 
-    .icon {
+    .small-box-icon {
       display: none;
     }
 

package/src/scss/_table.scss

@@ -73,53 +73,3 @@
     }
   }
 }
-
-// Expandable Table
-
-.table-hover tbody tr.expandable-body:hover {
-  background-color: inherit !important;
-}
-
-[data-widget="expandable-table"] {
-  cursor: pointer;
-
-  i.expandable-table-caret {
-    @include transition(transform $lte-transition-speed linear);
-  }
-  &[aria-expanded="true"] {
-    td i.expandable-table-caret {
-      // stylelint-disable selector-max-attribute
-      &[class*="right"] {
-        transform: rotate(90deg);
-      }
-      &[class*="left"] {
-        transform: rotate(-90deg);
-      }
-      // stylelint-enable selector-max-attribute
-    }
-  }
-}
-
-.expandable-body {
-  > td {
-    width: 100%;
-    padding: 0 !important;
-
-    > div,
-    > p {
-      padding: $table-cell-padding-y $table-cell-padding-x;
-    }
-  }
-
-  .table {
-    width: subtract(100%, $table-cell-padding-x);
-    margin: 0 0 0 $table-cell-padding-x;
-
-    tr:first-child {
-      td,
-      th {
-        border-top: none;
-      }
-    }
-  }
-}

package/src/scss/_timeline.scss

@@ -0,0 +1,120 @@
+//
+// Component: Timeline
+//
+
+.timeline {
+  position: relative;
+  padding: 0;
+  margin: 0 0 45px;
+  // The line
+  &::before {
+    @include border-radius($border-radius);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 31px;
+    width: 4px;
+    margin: 0;
+    content: "";
+    background-color: var(--#{$prefix}border-color);
+  }
+  // Element
+  > div {
+    &::before,
+    &::after {
+      display: table;
+      content: "";
+    }
+
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 15px;
+    // The content
+    > .timeline-item {
+      @include box-shadow($lte-card-shadow);
+      @include border-radius($border-radius);
+      position: relative;
+      padding: 0;
+      margin-top: 0;
+      margin-right: 15px;
+      margin-left: 60px;
+      color: var(--#{$prefix}body-color);
+      background-color: var(--#{$prefix}body-bg);
+      // The time and header
+      > .time {
+        float: right;
+        padding: 10px;
+        font-size: 12px;
+        color: var(--#{$prefix}secondary-color);
+      }
+      // Header
+      > .timeline-header {
+        padding: 10px;
+        margin: 0;
+        font-size: 16px;
+        line-height: 1.1;
+        color: var(--#{$prefix}secondary-color);
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+        // Link in header
+        > a {
+          font-weight: 600;
+        }
+      }
+      // Item body and footer
+      > .timeline-body,
+      > .timeline-footer {
+        padding: 10px;
+      }
+
+      > .timeline-body {
+        > img {
+          margin: 10px;
+        }
+        > dl,
+        ol,
+        ul {
+          margin: 0;
+        }
+      }
+
+
+    }
+
+    .timeline-icon {
+      position: absolute;
+      top: 0;
+      left: 18px;
+      width: 30px;
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+      text-align: center;
+      background-color: var(--#{$prefix}secondary-bg);
+      border-radius: 50%; // stylelint-disable-line property-disallowed-list
+    }
+  }
+  // Time label
+  > .time-label {
+    > span {
+      @include border-radius(4px);
+      display: inline-block;
+      padding: 5px;
+      font-weight: 600;
+      background-color: var(--#{$prefix}body-bg);
+    }
+  }
+}
+
+.timeline-inverse {
+  > div {
+    > .timeline-item {
+      @include box-shadow(none);
+      background-color: var(--#{$prefix}tertiary-bg);
+      border: 1px solid var(--#{$prefix}border-color);
+
+      > .timeline-header {
+        border-bottom-color: var(--#{$prefix}border-color);
+      }
+    }
+  }
+}

package/src/scss/_variables-dark.scss

@@ -1,9 +1,16 @@
-// Body background (Affects main content background only)
-$lte-main-bg-dark:                 $body-tertiary-bg-dark !default;
-$lte-main-color-dark:              $body-color-dark !default;
+// SIDEBAR SKINS
+// --------------------------------------------------------
 
-// Dark sidebar
-$lte-sidebar-dark-bg-dark:         $dark !default;
-
-// Light sidebar
-$lte-sidebar-light-bg-dark:        $light !default;
+$lte-sidebar-hover-bg-dark:               rgba(255, 255, 255, .1) !default;
+$lte-sidebar-color-dark:                  #c2c7d0 !default;
+$lte-sidebar-hover-color-dark:            $white !default;
+$lte-sidebar-active-color-dark:           $white !default;
+$lte-sidebar-menu-active-bg-dark:         rgba(255, 255, 255, .1) !default;
+$lte-sidebar-menu-active-color-dark:      $white !default;
+$lte-sidebar-submenu-bg-dark:             transparent !default;
+$lte-sidebar-submenu-color-dark:          #c2c7d0 !default;
+$lte-sidebar-submenu-hover-color-dark:    $white !default;
+$lte-sidebar-submenu-hover-bg-dark:       rgba(255, 255, 255, .1) !default;
+$lte-sidebar-submenu-active-color-dark:   $white !default;
+$lte-sidebar-submenu-active-bg-dark:      rgba(255, 255, 255, .1) !default;
+$lte-sidebar-header-color-dark:           tint-color(#c2c7d0, 5%) !default;

package/src/scss/_variables.scss

@@ -1,13 +1,8 @@
 // Custom AdminLTE Variables
 
-// Prefix for :root CSS variables
+// Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
-// LAYOUT
-// --------------------------------------------------------
-
-$lte-font-size-root:              1rem !default;
-
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
@@ -18,13 +13,11 @@ $lte-transition-fn:               ease-in-out !default;
 // Sidebar
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
+$lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
+$lte-sidebar-padding-x-compact:   .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
-$lte-sidebar-custom-height:       4rem !default;
-$lte-sidebar-custom-height-lg:    6rem !default;
-$lte-sidebar-custom-height-xl:    8rem !default;
-$lte-sidebar-custom-padding-x:    .85rem !default;
-$lte-sidebar-custom-padding-y:    .5rem !default;
+$lte-sidebar-padding-y-compact:   .25rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -33,115 +26,74 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
-// Sidebar active links
-$lte-sidebar-menu-active-bg:              $primary !default;
-$lte-sidebar-menu-active-color:           $white !default;
-
-// Dark sidebar
-$lte-sidebar-dark-bg:                     #343a40 !default;
-$lte-sidebar-dark-hover-bg:               rgba(255, 255, 255, .1) !default;
-$lte-sidebar-dark-color:                  #c2c7d0 !default;
-$lte-sidebar-dark-hover-color:            $white !default;
-$lte-sidebar-dark-active-color:           $white !default;
-$lte-sidebar-dark-submenu-bg:             transparent !default;
-$lte-sidebar-dark-submenu-color:          $lte-sidebar-dark-color !default;
-$lte-sidebar-dark-submenu-hover-color:    $white !default;
-$lte-sidebar-dark-submenu-hover-bg:       $lte-sidebar-dark-hover-bg !default;
-$lte-sidebar-dark-submenu-active-color:   $lte-sidebar-dark-bg !default;
-$lte-sidebar-dark-submenu-active-bg:      rgba(255, 255, 255, .9) !default;
-$lte-sidebar-dark-header-color:           tint-color(#c2c7d0, 5%) !default;
-
-// Light sidebar
-$lte-sidebar-light-bg:                    $white !default;
-$lte-sidebar-light-hover-bg:              rgba($black, .1) !default;
-$lte-sidebar-light-color:                 $gray-800 !default;
-$lte-sidebar-light-hover-color:           $gray-900 !default;
-$lte-sidebar-light-active-color:          $black !default;
-$lte-sidebar-light-submenu-bg:            transparent !default;
-$lte-sidebar-light-submenu-color:         #777 !default;
-$lte-sidebar-light-submenu-hover-color:   $black !default;
-$lte-sidebar-light-submenu-hover-bg:      $lte-sidebar-light-hover-bg !default;
-$lte-sidebar-light-submenu-active-color:  $lte-sidebar-light-hover-color !default;
-$lte-sidebar-light-submenu-active-bg:     $lte-sidebar-light-submenu-hover-bg !default;
-$lte-sidebar-light-header-color:          shade-color($gray-800, 5%) !default;
+$lte-sidebar-hover-bg:              rgba($black, .1) !default;
+$lte-sidebar-color:                 $gray-800 !default;
+$lte-sidebar-hover-color:           $gray-900 !default;
+$lte-sidebar-active-color:          $black !default;
+$lte-sidebar-menu-active-bg:        rgba($black, .1) !default;
+$lte-sidebar-menu-active-color:     $black !default;
+$lte-sidebar-submenu-bg:            transparent !default;
+$lte-sidebar-submenu-color:         #777 !default;
+$lte-sidebar-submenu-hover-color:   $black !default;
+$lte-sidebar-submenu-hover-bg:      rgba($black, .1) !default;
+$lte-sidebar-submenu-active-color:  $gray-900 !default;
+$lte-sidebar-submenu-active-bg:     rgba($black, .1) !default;
+$lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
+$nav-link-padding-x-compact:      .25rem !default;
 $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
+$lte-sidebar-mini-width-compact:  ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
-
-// SIDEBAR HORIZONTAL
-// --------------------------------------------------------
-$lte-sidebar-horizontal-width:    100% !default;
-$lte-sidebar-horizontal-height:   80px !default;
-
-// CONTROL SIDEBAR
-// --------------------------------------------------------
-$lte-control-sidebar-width:       $lte-sidebar-width !default;
+$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
 
 // MAIN HEADER
 // --------------------------------------------------------
-$lte-main-header-bottom-border-width:  $border-width !default;
-$lte-main-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
-$lte-main-header-bottom-border:        $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
-$lte-main-header-link-padding-y:       $navbar-padding-y !default;
-$lte-main-header-height-inner:         ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height:               add($lte-main-header-height-inner, $lte-main-header-bottom-border-width) !default;
-$lte-nav-link-sm-padding-y:            .35rem !default;
-$lte-nav-link-sm-height:               ($font-size-sm * $line-height-sm + $lte-nav-link-sm-padding-y * 1.785) !default;
-$lte-main-header-height-sm-inner:      ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height-sm:            add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
-
-// HEADER SKINS
-// --------------------------------------------------------
-
-$lte-header-light-bg:             var(--#{$prefix}body-bg) !default;
-$lte-header-light-color:          var(--#{$prefix}body-color) !default;
-$lte-header-mobile-light-bg:      $lte-header-light-bg !default;
-$lte-header-mobile-light-color:   $lte-header-light-color !default;
+$nav-link-height-compact:             1.75rem !default;
+$lte-app-header-bottom-border-width:  $border-width !default;
+$lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
+$lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
+$lte-app-header-link-padding-y:       $navbar-padding-y !default;
+$lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
-// IMAGE SIZES
-// --------------------------------------------------------
-$lte-img-size-sm:   1.875rem !default;
-$lte-img-size-md:   3.75rem !default;
-$lte-img-size-lg:   6.25rem !default;
-$lte-img-size-push: .625rem !default;
+// MAIN CONTENT
+$lte-app-content-bottom-area-height-sm: 3.5rem !default;
+$lte-app-content-bottom-area-height-md: 6rem !default;
+$lte-app-content-bottom-area-height-lg: 9rem !default;
+$lte-app-content-bottom-area-height-xl: 12rem !default;
 
 // MAIN FOOTER
 // --------------------------------------------------------
-$lte-main-footer-padding:           1rem !default;
-$lte-main-footer-padding-sm:        $lte-main-footer-padding * .812 !default;
-$lte-main-footer-border-top-width:  1px !default;
-$lte-main-footer-border-top-color:  var(--#{$prefix}border-color) !default;
-$lte-main-footer-border-top:        $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
-$lte-main-footer-height-inner:      (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
-$lte-main-footer-height:            add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
-$lte-main-footer-height-sm:         add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-bg:                var(--#{$prefix}body-bg) !default;
-$lte-main-footer-color:             var(--#{$prefix}secondary-color) !default;
+$lte-app-footer-padding:           1rem !default;
+$lte-app-footer-padding-compact:   .5rem !default;
+$lte-app-footer-border-top-width:  1px !default;
+$lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
+$lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
+$lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
+$lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
-$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
+$navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
+$navbar-padding-y-compact:         $navbar-padding-y * .5 !default;
+$lte-brand-link-padding-y:         $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
+$lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
+$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
 
 // Cards
 // --------------------------------------------------------
-$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
-$lte-card-title-font-size-sm: 1rem !default;
 $lte-card-title-font-weight: $font-weight-normal !default;
-$lte-card-nav-link-padding-sm-y: .4rem !default;
-$lte-card-nav-link-padding-sm-x: .8rem !default;
-$lte-card-img-size: $lte-img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -155,46 +107,6 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
 
 // Z-INDEX
 // --------------------------------------------------------
-$lte-zindex-main-header:          $zindex-fixed + 4 !default;
-$lte-zindex-sidebar:              $zindex-fixed + 8 !default;
-$lte-zindex-main-footer:          $zindex-fixed + 2 !default;
-$lte-zindex-sidebar-horizontal:   $lte-zindex-main-header - 2 !default;
-$lte-zindex-control-sidebar:      $zindex-fixed + 1 !default;
-$lte-zindex-toasts:               $lte-zindex-sidebar + 2 !default;
-$lte-zindex-content-wrapper:      $lte-zindex-sidebar - 2 !default;
-$lte-zindex-preloader:            $lte-zindex-toasts + 2 !default;
-
-// Body background (Affects main content background only)
-$lte-main-bg:                   #f4f6f9 !default;
-$lte-main-color:                  $black !default;
-
-// BUTTON
-// --------------------------------------------------------
-$lte-button-default-background-color: $gray-100 !default;
-$lte-button-default-color: #444 !default;
-$lte-button-default-border-color: #ddd !default;
-
-$lte-button-padding-y-xs: .125rem !default;
-$lte-button-padding-x-xs: .25rem !default;
-$lte-button-line-height-xs: $line-height-sm !default;
-$lte-button-font-size-xs: ($font-size-base * .75) !default;
-$lte-button-border-radius-xs: .15rem !default;
-
-// RIBBON
-// --------------------------------------------------------
-$lte-ribbon-border-size: 3px !default;
-$lte-ribbon-line-height: 100% !default;
-$lte-ribbon-padding: .375rem 0 !default;
-$lte-ribbon-font-size: .8rem !default;
-$lte-ribbon-width: 90px !default;
-$lte-ribbon-wrapper-size: 70px !default;
-$lte-ribbon-top: 10px !default;
-$lte-ribbon-right: -2px !default;
-$lte-ribbon-lg-wrapper-size: 120px !default;
-$lte-ribbon-lg-width: 160px !default;
-$lte-ribbon-lg-top: 26px !default;
-$lte-ribbon-lg-right: 0 !default;
-$lte-ribbon-xl-wrapper-size: 180px !default;
-$lte-ribbon-xl-width: 240px !default;
-$lte-ribbon-xl-top: 47px !default;
-$lte-ribbon-xl-right: 4px !default;
+$lte-zindex-app-header:          $zindex-fixed + 4 !default;
+$lte-zindex-sidebar:             $zindex-fixed + 8 !default;
+$lte-zindex-sidebar-overlay:     $lte-zindex-sidebar - 1 !default;

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha.1
+ *   AdminLTE v4.0.0-alpha2
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/scss/mixins/_animations.scss

@@ -29,7 +29,6 @@
   }
 }
 
-
 @keyframes fadeIn {
   from {
     opacity: 0;

package/src/scss/mixins/_scrollbar.scss

@@ -3,10 +3,10 @@
 //
 
 @mixin scrollbar-color-gray() {
-  scrollbar-color: #a9a9a9 transparent;
+  scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
 
   &::-webkit-scrollbar-thumb {
-    background-color: #a9a9a9;
+    background-color: var(--#{$prefix}secondary-bg);
   }
 
   &::-webkit-scrollbar-track {

package/src/scss/pages/_lockscreen.scss

@@ -0,0 +1,74 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .lockscreen-logo {
+    margin-bottom: 25px;
+    font-size: 35px;
+    font-weight: 300;
+    text-align: center;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+
+  .lockscreen-wrapper {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-top: 10%;
+  }
+
+  // Will contain the image and the sign in form
+  .lockscreen-item {
+    position: relative;
+    width: 290px;
+    padding: 0;
+    margin: 10px auto 30px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(4px);
+  }
+
+  // User image
+  .lockscreen-image {
+    position: absolute;
+    top: -25px;
+    left: -10px;
+    z-index: 10;
+    padding: 5px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(50%);
+
+    > img {
+      @include border-radius(50%);
+      width: 70px;
+      height: 70px;
+    }
+  }
+
+  // Contains the password input and the login button
+  .lockscreen-credentials {
+    margin-left: 70px;
+
+    .form-control {
+      border: 0;
+    }
+
+    .btn {
+      padding: 0 10px;
+      border: 0;
+    }
+  }
+
+  .lockscreen-footer {
+    margin-top: 10px;
+  }
+}

package/src/scss/pages/_login_and_register.scss

@@ -20,8 +20,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  background-color: var(--#{$prefix}secondary-bg);
+  min-height: 100vh;
 }
 
 .login-box,
@@ -47,8 +46,6 @@
 
   .input-group {
     .form-control {
-      border-right: 0;
-
       &:focus {
         box-shadow: none;
 
@@ -83,7 +80,6 @@
     .input-group-text {
       color: var(--#{$prefix}secondary-color);
       background-color: transparent;
-      border-left: 0;
       @include border-top-end-radius($border-radius);
       @include border-bottom-end-radius($border-radius);
       @include transition($input-transition);