Add Lotusdocs theme

themes/lotusdocs/assets/scss/custom/components/_backgrounds.scss

@@ -0,0 +1,22 @@
+//
+// backgrounds.scss
+//
+
+@each $name,
+$value in $theme-colors {
+    .bg-#{$name} {
+        background-color: rgba($value, 0.04) !important;
+    }
+    .bg-hard-#{$name} {
+        background-color: rgba($value, 1) !important;
+    }
+    .bg-soft-#{$name} {
+        background-color: rgba($value, 0.1) !important;
+        border: 1px solid rgba($value, 0.1) !important;
+        color: #{$value} !important;
+    }
+}
+
+.bg-white-color {
+    background-color: $bg-white-color !important;
+}

themes/lotusdocs/assets/scss/custom/components/_badge.scss

@@ -0,0 +1,16 @@
+// 
+// _badge.scss
+// 
+
+//Badges
+.badge {
+    letter-spacing: 0.5px;
+    padding: 4px 8px;
+    font-weight: 600;
+    line-height: 11px;
+    &.badge-link {
+        &:hover {
+            color: $white !important;
+        }
+    }
+}

themes/lotusdocs/assets/scss/custom/components/_buttons.scss

@@ -0,0 +1,105 @@
+//
+// _buttons.scss
+//
+//Buttons
+@each $name,
+$value in $theme-colors {
+    .btn-soft-#{$name} {
+        background-color: rgba($value, 0.05) !important;
+        border: 1px solid rgba($value, 0.05) !important;
+        color: #{$value} !important;
+        box-shadow: 0 2px 1px 0 rgba($value, 0.1);
+        &:hover, &:focus, &:active, &.active, &.focus{
+            background-color: #{$value} !important;
+            border-color: #{$value} !important;
+            color: $white !important;
+        }
+    }
+}
+
+.btn {
+    padding: 8px 20px;
+    outline: none;
+    text-decoration: none;
+    font-size: 16px;
+    letter-spacing: 0.5px;
+    transition: all 0.3s;
+    font-weight: 600;
+    border-radius: 5px;
+    &:focus {
+        box-shadow: none !important;
+    }
+    &.btn-sm {
+        padding: 7px 16px;
+        font-size: 10px;
+    }
+    &.btn-lg {
+        padding: 14px 30px;
+        font-size: 16px;
+    }
+    &.searchbtn {
+        padding: 6px 20px;
+    }
+    &.btn-pills {
+        border-radius: 30px;
+    }
+    &.btn-light{
+        border: 1px solid darken($light, 2%);
+    }
+    &.btn-outline-light {
+        border-color: $gray-200 !important;
+    }
+    &.btn-soft-light {
+        color: $gray-400 !important;
+        border-color: $gray-200 !important;
+    }
+    &.btn-soft-dark {
+        &:hover, &:focus, &:active, &.active, &.focus {
+            color: $gray-400 !important;
+            border-color: $gray-200 !important;
+        }
+    }
+    &.btn-dark,
+    &.btn-secondary{
+        color: $gray-200;
+    }
+    &.btn-outline-light{
+        color: $gray-900;
+    }
+    &.btn-icon {
+        height: 36px;
+        width: 36px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        .icons {
+            height: 16px;
+            width: 16px;
+            font-size: 16px;
+        }
+        &.btn-lg {
+            height: 48px;
+            width: 48px;
+            line-height: 46px;
+            .icons {
+                height: 20px;
+                width: 20px;
+                font-size: 20px;
+            }
+        }
+        &.btn-sm {
+            height: 30px;
+            width: 30px;
+            line-height: 28px;
+        }
+    }
+}
+
+button:not(:disabled) {
+    outline: none;
+}
+
+.btn-landing {
+    color: #3c4858;
+}

themes/lotusdocs/assets/scss/custom/components/_nav.scss

@@ -0,0 +1,49 @@
+// 
+// _nav.scss
+// 
+
+// //Nav
+// .nav-pills {
+//     margin-bottom: 15px;
+//     background: darken($light, 1%);
+//     .nav-link {
+//         color: $gray-700 !important;
+//         padding: 5px;
+//         transition: all 0.5s ease;
+//         &.nav-link-alt {
+//             color: $nav-pills-color !important;
+//             &.active {
+//                 background: $nav-pills-bg !important;
+//             }
+//         }
+//         &.active {
+//             background: $primary;
+//             color: $nav-pills-color !important;
+//             .tab-para {
+//                 color: rgba($nav-pills-color, 0.65) !important;
+//             }
+//         }
+//     }
+// }
+
+//Nav
+.nav-bg {
+    background: $navs-bg !important;
+}
+.nav-pills {
+    .nav-link{
+        color: $dark !important;
+        &.nav-link-alt {
+            color: rgba($white, 0.5) !important;
+            &:hover {
+                background: none !important;
+            }
+            &.active {
+                background: $nav-link-alt !important;
+            }
+        }
+        &.active {
+            color: $white !important;
+        }
+    }
+}