-
- For more information please visit our official{' '} -
+
+)
+
+DocsComponents.propTypes = {
+ href: PropTypes.string,
+}
+
+export default DocsComponents
diff --git a/src/components/DocsIcons.js b/src/components/DocsIcons.js
new file mode 100644
index 000000000..e3fab60a7
--- /dev/null
+++ b/src/components/DocsIcons.js
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconsImg from 'src/assets/images/icons.webp'
+
+const DocsIcons = () => (
+
+
+
+ 
+
+
+ Our Admin Panel isn’t just a mix of third-party components. It’s{' '}
+
+ the only open-source React dashboard built on a professional, enterprise-grade UI
+ Components Library
+
+ . This component is part of this library, and we present only the basic usage of it here. To
+ explore extended examples, detailed API documentation, and customization options, refer to
+ our docs.
+
+
+
+
+)
+
+export default DocsIcons
diff --git a/src/components/index.js b/src/components/index.js
index 6cdf33563..93fb52c43 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,7 +4,8 @@ import AppFooter from './AppFooter'
import AppHeader from './AppHeader'
import AppHeaderDropdown from './header/AppHeaderDropdown'
import AppSidebar from './AppSidebar'
-import DocsCallout from './DocsCallout'
+import DocsComponents from './DocsComponents'
+import DocsIcons from './DocsIcons'
import DocsLink from './DocsLink'
import DocsExample from './DocsExample'
@@ -15,7 +16,8 @@ export {
AppHeader,
AppHeaderDropdown,
AppSidebar,
- DocsCallout,
+ DocsComponents,
+ DocsIcons,
DocsLink,
DocsExample,
}
diff --git a/src/routes.js b/src/routes.js
index d168b1ca4..d2e9d6479 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -17,6 +17,7 @@ const Placeholders = React.lazy(() => import('./views/base/placeholders/Placehol
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
+const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
@@ -69,6 +70,7 @@ const routes = [
{ path: '/base/popovers', name: 'Popovers', element: Popovers },
{ path: '/base/progress', name: 'Progress', element: Progress },
{ path: '/base/spinners', name: 'Spinners', element: Spinners },
+ { path: '/base/tabs', name: 'Tabs', element: Tabs },
{ path: '/base/tables', name: 'Tables', element: Tables },
{ path: '/base/tooltips', name: 'Tooltips', element: Tooltips },
{ path: '/buttons', name: 'Buttons', element: Buttons, exact: true },
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
deleted file mode 100644
index 15d367af4..000000000
--- a/src/scss/_custom.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Here you can add other styles
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
deleted file mode 100644
index 49e1c79e6..000000000
--- a/src/scss/_theme.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-body {
- background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
- width: 100%;
- @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
- @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
- will-change: auto;
- @include transition(padding .15s);
-}
-
-.header > .container-fluid,
-.sidebar-header {
- min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.sidebar-brand-full {
- margin-left: 3px;
-}
-
-.sidebar-header {
- .nav-underline-border {
- --cui-nav-underline-border-link-padding-x: 1rem;
- --cui-nav-underline-border-gap: 0;
- }
-
- .nav-link {
- display: flex;
- align-items: center;
- min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
- }
-}
-
-.sidebar-toggler {
- @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
- .sidebar-toggler {
- @include ltr-rtl("margin-right", auto);
- }
-}
-
-.header > .container-fluid + .container-fluid {
- min-height: 3rem;
-}
-
-.footer {
- min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-@if $enable-dark-mode {
- @include color-mode(dark) {
- body {
- background-color: var(--cui-dark-bg-subtle);
- }
-
- .footer {
- --cui-footer-bg: var(--cui-body-bg);
- }
- }
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
deleted file mode 100644
index b0f8a52a3..000000000
--- a/src/scss/_variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Variable overrides
-//
-// If you want to customize your project please add your variables below.
-
-$enable-deprecation-messages: false !default;
diff --git a/src/scss/examples.scss b/src/scss/examples.scss
index 2390ba194..83e43f34e 100644
--- a/src/scss/examples.scss
+++ b/src/scss/examples.scss
@@ -1,9 +1,9 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
-
-@import "@coreui/coreui/scss/functions";
-@import "@coreui/coreui/scss/variables";
-@import "@coreui/coreui/scss/mixins";
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+@use "@coreui/coreui/scss/variables" as * with (
+ $enable-deprecation-messages: false
+);
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
.example {
&:not(:first-child) {
@@ -53,6 +53,8 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
}
// Buttons
+ .col > .btn,
+ .col-auto > .btn,
> .btn,
> .btn-group {
margin: .25rem .125rem;
@@ -107,10 +109,8 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
}
}
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .example .tab-content {
- background-color: var(--#{$prefix}secondary-bg) !important;
- }
+@include color-mode(dark) {
+ .example .tab-content {
+ background-color: var(--#{$prefix}secondary-bg);
}
}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 4fbc82356..6b8f2b2e5 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,15 +1,67 @@
-// If you want to override variables do it here
-@import "variables";
+@use "@coreui/coreui/scss/coreui" as * with (
+ $enable-deprecation-messages: false,
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
-// Import styles
-@import "@coreui/coreui/scss/coreui";
-@import "@coreui/chartjs/scss/coreui-chartjs";
+body {
+ background-color: var(--cui-tertiary-bg);
+}
-// Vendors
-@import "vendors/simplebar";
+.wrapper {
+ width: 100%;
+ padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+ will-change: auto;
+ @include transition(padding .15s);
+}
-// Custom styles for this theme
-@import "theme";
+.header > .container-fluid,
+.sidebar-header {
+ min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
-// If you want to add custom CSS you can put it here
-@import "custom";
+.sidebar-brand-full {
+ margin-left: 3px;
+}
+
+.sidebar-header {
+ .nav-underline-border {
+ --cui-nav-underline-border-link-padding-x: 1rem;
+ --cui-nav-underline-border-gap: 0;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+ }
+}
+
+.sidebar-toggler {
+ margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+ .sidebar-toggler {
+ margin-inline-end: auto;
+ }
+}
+
+.header > .container-fluid + .container-fluid {
+ min-height: 3rem;
+}
+
+.footer {
+ min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+ body {
+ background-color: var(--cui-dark-bg-subtle);
+ }
+
+ .footer {
+ --cui-footer-bg: var(--cui-body-bg);
+ }
+}
diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js
index 5d6644a46..edcb5e7ae 100644
--- a/src/views/base/accordion/Accordion.js
+++ b/src/views/base/accordion/Accordion.js
@@ -10,12 +10,13 @@ import {
CAccordionHeader,
CAccordionItem,
} from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
const Accordion = () => {
return (
+
+
+ 
+
+
+ CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+ and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+ can use them in your digital products for web or mobile app. For more information please
+ visit our documentation.
+
+
+
- Card headers can be styled by adding ex. component="h5".
+ Card headers can be styled by adding ex. as="h5".
Custom jumbotron
-- Using a series of utilities, you can create this jumbotron, just like the one in - previous versions of Bootstrap. Check out the examples below for how you can remix and - restyle it to your liking. -
-
-
- DocsExample button
-
-
- Change the background
-- Swap the background-color utility and add a `.text-*` color utility to mix up the - jumbotron look. Then, mix and match with additional component themes and more. -
-
-
- DocsExample button
-
-
- Add borders
-- Or, keep it light and add a border for some added definition to the boundaries of - your content. Be sure to look under the hood at the source HTML here as we've - adjusted the alignment and sizing of both column's content for equal-height. -
-
Use <a>s or <button>s to create{' '}
actionable list group items with hover, disabled, and active states by adding{' '}
- component="a|button". We separate these pseudo-classes to ensure
- list groups made of non-interactive elements (like <li>s or{' '}
+ as="a|button". We separate these pseudo-classes to ensure list
+ groups made of non-interactive elements (like <li>s or{' '}
<div>
s) don'tprovide a click or tap affordance.
Centered with .justify-content-center:
Right-aligned with .justify-content-end:
.flex-column utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., .flex-sm-column).
- variant="tabs" class
to generate a tabbed interface
-
Take that same HTML, but use variant="pills" instead:
.nav-items, use layout="fill". Notice that all
horizontal space is occupied, but not every nav item has the same width.
-