Merge pull request #5312 from glewe/bs5-components

Bs5 Components
pull/5334/head
Daniel 2023-09-14 17:56:06 +05:30 committed by GitHub
commit 4a95b7f438
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1519 additions and 21 deletions

View File

@ -9,21 +9,25 @@ const adminlteJsUrl = path + "/js/adminlte.js";
integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
crossorigin="anonymous"
></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<!--end::Required Plugin(popperjs for Bootstrap 5)-->
<!--begin::Required Plugin(Bootstrap 5)-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
crossorigin="anonymous"
></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<!--end::Required Plugin(Bootstrap 5)-->
<!--begin::Required Plugin(AdminLTE)-->
<script src={adminlteJsUrl} is:inline></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<!--end::Required Plugin(AdminLTE)-->
<!--begin::OverlayScrollbars Configure-->
<script is:inline>
const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
const Default = {
@ -31,7 +35,6 @@ const adminlteJsUrl = path + "/js/adminlte.js";
scrollbarAutoHide: "leave",
scrollbarClickScroll: true,
};
document.addEventListener("DOMContentLoaded", function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if (

View File

@ -1,6 +1,6 @@
---
import { convertPathToHtml } from "../../../utils/index.js";
const { path, mainPage, page } = Astro.props;
import {convertPathToHtml} from "../../../utils/index.js";
const {path, mainPage, page} = Astro.props;
const htmlPath = convertPathToHtml(path);
---
@ -125,7 +125,7 @@ const htmlPath = convertPathToHtml(path);
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3"
>6</span
>6</span
>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
@ -216,6 +216,15 @@ const htmlPath = convertPathToHtml(path);
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a
href={htmlPath + "/UI/general.html"}
class:list={["nav-link", page === "general" && "active"]}
>
<i class="nav-icon bi bi-circle"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a
href={htmlPath + "/UI/timeline.html"}

File diff suppressed because it is too large Load Diff

View File

@ -58,7 +58,7 @@ const page = "general";
<!--begin::Col-->
<div class="col-12">
<div class="callout callout-info">
For detailed documentaion of Form visit <a
For detailed documentation of Form visit <a
href="https://getbootstrap.com/docs/5.3/forms/overview/"
target="_blank"
rel="noopener noreferrer"
@ -72,7 +72,7 @@ const page = "general";
<!--begin::Col-->
<div class="col-md-6">
<!--begin::Quick Example-->
<div class="card card-primary card-outline">
<div class="card card-primary card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Quick Example</div>
@ -140,7 +140,7 @@ const page = "general";
</div>
<!--end::Quick Example-->
<!--begin::Input Group-->
<div class="card card-success card-outline">
<div class="card card-success card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Input Group</div>
@ -234,7 +234,7 @@ const page = "general";
</div>
<!--end::Input Group-->
<!--begin::Horizontal Form-->
<div class="card card-warning card-outline">
<div class="card card-warning card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Horizontal Form</div>
@ -348,7 +348,7 @@ const page = "general";
<!--begin::Col-->
<div class="col-md-6">
<!--begin::Different Height-->
<div class="card card-secondary card-outline">
<div class="card card-secondary card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Different Height</div>
@ -381,7 +381,7 @@ const page = "general";
</div>
<!--end::Different Height-->
<!--begin::Different Width-->
<div class="card card-danger card-outline">
<div class="card card-danger card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Different Width</div>
@ -425,7 +425,7 @@ const page = "general";
</div>
<!--end::Different Width-->
<!--begin::Form Validation-->
<div class="card card-info card-outline">
<div class="card card-info card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Form Validation</div>

33
src/scss/_toasts.scss Normal file
View File

@ -0,0 +1,33 @@
//
// Toast
//
@each $name, $color in $theme-colors {
.toast-#{$name} {
--#{$prefix}toast-header-color: #{color-contrast($color)};
--#{$prefix}toast-header-bg: #{$color};
--#{$prefix}toast-header-border-color: #{$color};
--#{$prefix}toast-border-color: #{$color};
--#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
@if color-contrast($color) == $color-contrast-light {
.btn-close {
@include btn-close-white();
}
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
@each $name, $color in $theme-colors {
.toast-#{$name} {
@if color-contrast($color) == $color-contrast-dark {
.btn-close {
--#{$prefix}btn-close-white-filter: none;
}
}
}
}
}
}

View File

@ -1,16 +1,17 @@
//
// Custom AdminLTE Variables
//
// Prefix for :root CSS variables and others.
$lte-prefix: lte- !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
// Transition global options
$lte-transition-speed: .3s !default;
$lte-transition-fn: ease-in-out !default;
// Sidebar
// SIDEBAR
// --------------------------------------------------------
$lte-sidebar-width: 250px !default;
$lte-sidebar-breakpoint: lg !default;
@ -58,11 +59,13 @@ $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
// CONTENT PADDING
// --------------------------------------------------------
$lte-content-padding-y: 0 !default;
$lte-content-padding-x: .5rem !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;
@ -88,8 +91,7 @@ $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
// CARDS
// --------------------------------------------------------
$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;

View File

@ -60,7 +60,6 @@
// Bootstrap Utilities
@import "bootstrap/scss/utilities/api";
// AdminLTE Configuration
// ---------------------------------------------------
@import "variables";

View File

@ -6,3 +6,4 @@
@import "../info-box";
@import "../timeline";
@import "../direct-chat";
@import "../toasts";