bootsteam-theme 5.3.0

package/src/_twr-variables.scss

@@ -0,0 +1,71 @@
+///<reference path="../node_modules/bootstrap/scss/variables.scss" />
+
+$body-color: #2a465b !default;
+$body-bg: #e1e9f2 !default;
+
+$primary: #417a9b !default;
+$success: #7d9f05 !default;
+$info: #31a48c !default;
+/*$info: #80458e !default;*/
+$warning: #d5702c !default;
+$danger: #dc3b36 !default;
+$light: #f8f9fa !default;
+$dark: lighten(#111924, 1) !default;
+
+
+$body-tertiary-bg: darken($body-bg, 10) !default;
+
+$min-contrast-ratio: 3 !default;
+
+
+/* border radius */
+$border-radius: 2px !default;
+$border-radius-sm: 2px !default;
+$border-radius-lg: 2px !default;
+$border-radius-xl: 2px !default;
+$border-radius-xxl: 2px !default;
+
+/* nav */
+$nav-link-padding-y: .2rem !default;
+
+$navbar-toggler-padding-y: 0 !default;
+$navbar-toggler-font-size: 1rem !default;
+$navbar-light-toggler-border-color: transparent !default;
+$navbar-dark-toggler-border-color: transparent !default;
+
+/* input */
+$input-btn-padding-y: .25rem !default;
+$input-btn-padding-x: .4rem !default;
+
+$input-btn-padding-y-sm: .1rem !default;
+$input-btn-padding-x-sm: .25rem !default;
+
+$input-btn-padding-y-lg: .25rem !default;
+$input-btn-padding-x-lg: 0.5rem !default;
+
+$input-bg: darken($body-bg, 5) !default;
+$input-border-color: darken($body-bg, 15) !default;
+$input-focus-border-color: $primary !default;
+$input-placeholder-color: #888 !default;
+
+
+/*$input-border-radius: 2px 2px 0 0 !default;
+$input-border-radius-sm: 2px 2px 0 0 !default;
+$input-border-radius-lg: 3px 3px 0 0 !default;*/
+
+$input-disabled-bg: lighten($input-bg, 4) !default;
+
+$focus-ring-width: 0 !default;
+
+
+$form-range-thumb-focus-box-shadow: 0 0 0 1px darken($primary, 5) !default; // none !default; //0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+/*$form-range-thumb-focus-box-shadow-width: 0 !default; //$input-focus-width !default; // For focus box shadow issue in Edge*/
+/* buttons */
+$btn-box-shadow: none !default;
+
+/* floating label */
+$form-floating-label-transform: scale(.85) translateY(-.8rem) translateX(.15rem) !default;
+
+
+/* tables */
+$table-striped-bg-factor: .03 !default;

package/src/bootsteam.scss

@@ -0,0 +1,25 @@
+
+$enable-shadows: true !default;
+
+$gray-800: #2A2A2E !default;
+
+$gray-900: darken($gray-800, 4) !default;
+$gray-700: lighten($gray-800, 10) !default;
+$gray-600: lighten($gray-700, 10) !default;
+$gray-500: lighten($gray-600, 10) !default;
+$gray-400: lighten($gray-500, 10) !default;
+$gray-300: lighten($gray-400, 10) !default;
+$gray-200: lighten($gray-300, 10) !default;
+$gray-100: lighten($gray-200, 10) !default;
+
+@import "_twr-variables.scss";
+@import "_twr-variables-dark.scss";
+
+@import "../node_modules/bootstrap/scss/bootstrap.scss";
+
+@import "_darkThemeOverrides.scss";
+@import "_forms.scss";
+@import "_fieldset.scss";
+@import "_tables.scss";
+@import "_alerts.scss";
+@import "plugins/_allPlugins.scss";

package/src/plugins/_allPlugins.scss

@@ -0,0 +1,2 @@
+@import "summernote";
+@import "slimSelect";

package/src/plugins/_slimSelect.scss

@@ -0,0 +1,106 @@
+///<reference path="../twr-variables.scss" />
+///<reference path="../twr-variables-dark.scss" />
+///<reference path="../../node_modules/bootstrap/scss/variables.scss" />
+
+:root,
+[data-bs-theme=light] {
+    --ss-primary-color: #{$primary};
+    --ss-bg-color: #{$input-bg};
+    --ss-font-color: #{$input-color};
+    --ss-font-placeholder-color: #{$input-placeholder-color};
+    --ss-disabled-color: #{$input-disabled-color};
+    --ss-border-color: #{$input-border-color};
+    --ss-highlight-color: #{$primary};
+    --ss-success-color: #{$success};
+    --ss-error-color: #{$danger};
+    --ss-main-height: 30px;
+    --ss-border-radius: 2px 2px 0 0;
+}
+
+.ss-main {
+    border: none;
+    border-bottom: 1px solid var(--ss-border-color);
+
+
+    &:focus {
+        box-shadow: none;
+        border-bottom-color: $primary;
+    }
+
+    &.ss-disabled:focus {
+        box-shadow: none;
+        border-bottom-color: $input-border-color;
+    }
+}
+
+.ss-content {
+    .ss-search input {
+        background: darken($input-bg, 3);
+        color: $body-color;
+        border: none;
+        border-bottom: 1px solid $input-border-color;
+
+        &:focus {
+            box-shadow: none;
+            border-bottom-color: $primary;
+        }
+    }
+
+    .ss-list .ss-option {
+        &.ss-highlighted, &:not(.ss-disabled).ss-selected {
+            color: $white;
+        }
+
+        &:hover {
+            color: $white;
+            background-color: darken($primary, 5);
+        }
+    }
+}
+
+.ss-main .ss-values .ss-value {
+    .ss-value-text {
+        color: $white;
+    }
+
+    .ss-value-delete {
+        border-left-color: rgba(255, 255, 255, 0.2);
+        height: 1rem;
+
+        svg path {
+            stroke: rgba(255, 255, 255, 0.5);
+        }
+    }
+}
+// Bootstrap input-group support
+.input-group > .ss-main {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+}
+
+// Prevent the select from showing up before the plugin loads
+select.slim-select-basic {
+    opacity: 0;
+}
+
+[data-bs-theme=dark] {
+    --ss-bg-color: #{$input-bg-dark};
+    --ss-border-color: #{$input-border-color-dark};
+
+    .ss-content {
+        .ss-search input {
+            color: $body-color-dark;
+            background: darken($input-bg-dark, 3);
+        }
+    }
+
+    .ss-main.ss-disabled {
+        background: lighten($input-bg-dark, 5);
+
+        &:focus {
+            border-bottom-color: lighten($input-bg-dark, 5);
+        }
+    }
+}

package/src/plugins/_summernote.scss

@@ -0,0 +1,45 @@
+///<reference path="twr-variables.scss" />
+///<reference path="twr-variables-dark.scss" />
+///<reference path="../node_modules/bootstrap/scss/variables.scss" />
+
+div.note-editor.note-frame {
+    border-color: $input-border-color;
+
+    div.note-toolbar {
+        background: darken($body-bg,2);
+        border-bottom: 1px solid $input-border-color;
+
+        & > .note-btn-group {
+            border: 1px solid $input-border-color;
+
+            .note-btn {
+                background: $body-bg;
+                color: $body-color;
+
+                &.active {
+                    background: $primary;
+                }
+
+                &:hover {
+                    background: darken($body-bg,3);
+                }
+            }
+        }
+    }
+
+    .note-editing-area .note-editable {
+        color: $body-color;
+        background: $input-bg;
+    }
+
+    .note-statusbar {
+        background: darken($body-bg,2);
+        border-top-color: $input-border-color;
+    }
+}
+
+
+.note-btn.btn-sm {
+    padding: .125rem .5rem;
+    font-size: 1rem;
+}