├── .env ├── .gitignore ├── Changelog.md ├── LICENSE ├── README.md ├── config-overrides.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── DemoPages ├── Applications │ ├── Chat │ │ └── index.js │ ├── FaqSection │ │ └── index.js │ ├── Mailbox │ │ └── index.js │ └── index.js ├── Charts │ ├── ApexCharts │ │ ├── Examples │ │ │ ├── Basic │ │ │ │ ├── Area.jsx │ │ │ │ ├── Bar.jsx │ │ │ │ ├── Donut.jsx │ │ │ │ ├── RadialBar.jsx │ │ │ │ └── index.js │ │ │ └── Sparklines │ │ │ │ ├── Area.jsx │ │ │ │ ├── Bar.jsx │ │ │ │ ├── Line.jsx │ │ │ │ └── index.js │ │ └── index.js │ ├── ChartJs │ │ ├── Examples │ │ │ ├── Circular │ │ │ │ └── index.js │ │ │ ├── LinesBars │ │ │ │ └── index.js │ │ │ ├── bar.js │ │ │ ├── doughnut.js │ │ │ ├── dynamicDoughnut.js │ │ │ ├── horizontalBar.js │ │ │ ├── line.js │ │ │ ├── line2.js │ │ │ ├── mix.js │ │ │ ├── pie.js │ │ │ ├── polar.js │ │ │ └── radar.js │ │ └── index.js │ ├── Gauges │ │ ├── Examples │ │ │ └── liquidGauge.js │ │ └── index.js │ ├── Sparklines1 │ │ ├── Examples │ │ │ └── index.js │ │ └── index.js │ ├── Sparklines2 │ │ ├── Examples │ │ │ └── index.js │ │ └── index.js │ └── index.js ├── Components │ ├── Accordion │ │ ├── Examples │ │ │ └── Basic.js │ │ └── index.js │ ├── BlockLoading │ │ ├── dummyData.js │ │ └── index.js │ ├── Calendar │ │ ├── Examples │ │ │ ├── Basic.js │ │ │ └── Events.js │ │ └── index.js │ ├── Carousel │ │ ├── Examples │ │ │ ├── Carousel │ │ │ │ ├── Carousel.js │ │ │ │ ├── CustomTag.js │ │ │ │ └── index.js │ │ │ └── Slideshow │ │ │ │ ├── CenterMode.js │ │ │ │ ├── DarkImg.js │ │ │ │ ├── MultipleItems.js │ │ │ │ ├── Responsive.js │ │ │ │ ├── SimpleSlider.js │ │ │ │ ├── VariableWidth.js │ │ │ │ └── index.js │ │ └── index.js │ ├── CountUp │ │ └── index.js │ ├── GuidedTours │ │ ├── Examples │ │ │ ├── Box.js │ │ │ ├── Button.js │ │ │ ├── Demo.js │ │ │ ├── Glitch.js │ │ │ ├── Heading.js │ │ │ ├── Image.js │ │ │ ├── Logo.js │ │ │ ├── Row.js │ │ │ ├── Scrollable.js │ │ │ ├── Section.js │ │ │ ├── Text.js │ │ │ ├── Tooltip.js │ │ │ └── settings.js │ │ └── index.js │ ├── ImageCropper │ │ └── index.js │ ├── Maps │ │ ├── Examples │ │ │ ├── GoogleMaps │ │ │ │ └── index.js │ │ │ └── VectorMaps │ │ │ │ ├── Basic.js │ │ │ │ ├── Markers.js │ │ │ │ ├── Static │ │ │ │ ├── world-110m.json │ │ │ │ ├── world-50m-with-population.json │ │ │ │ └── world-50m.json │ │ │ │ └── index.js │ │ └── index.js │ ├── Modal │ │ ├── Examples │ │ │ ├── Modal.js │ │ │ ├── ModalBackdrop.js │ │ │ ├── ModalCustomCloseButton.js │ │ │ ├── ModalCustomCloseIcon.js │ │ │ ├── ModalCustomTimeout.js │ │ │ ├── ModalExternal.js │ │ │ ├── ModalFadeless.js │ │ │ ├── ModalNested.js │ │ │ └── index.js │ │ └── index.js │ ├── Notifications │ │ ├── Examples │ │ │ ├── BasicAlerts.js │ │ │ ├── SweetAlerts.js │ │ │ └── ToastifyAlerts.js │ │ └── index.js │ ├── Pagination │ │ ├── Examples │ │ │ └── Basic.js │ │ └── index.js │ ├── ProgressBar │ │ ├── Examples │ │ │ ├── Advanced │ │ │ │ └── index.js │ │ │ └── Basic │ │ │ │ ├── Progress.js │ │ │ │ ├── ProgressAnimated.js │ │ │ │ ├── ProgressColor.js │ │ │ │ ├── ProgressLabels.js │ │ │ │ ├── ProgressMax.js │ │ │ │ ├── ProgressMulti.js │ │ │ │ ├── ProgressRounded.js │ │ │ │ ├── ProgressSizing.js │ │ │ │ ├── ProgressStriped.js │ │ │ │ └── index.js │ │ └── index.js │ ├── Ratings │ │ ├── Examples │ │ │ └── Basic.js │ │ └── index.js │ ├── ScrollableElements │ │ ├── Examples │ │ │ └── index.js │ │ └── index.js │ ├── StickyElements │ │ ├── Examples │ │ │ └── index.js │ │ └── index.js │ ├── Tabs │ │ ├── Examples │ │ │ ├── AnimatedLines │ │ │ │ └── index.js │ │ │ ├── Basic │ │ │ │ └── index.js │ │ │ ├── CardTabs │ │ │ │ └── index.js │ │ │ └── dummyData.js │ │ └── index.js │ ├── TooltipsPopovers │ │ ├── Examples │ │ │ ├── Popovers │ │ │ │ ├── Basic.js │ │ │ │ ├── Custom.js │ │ │ │ └── index.js │ │ │ └── Tooltips │ │ │ │ ├── TooltipDark.js │ │ │ │ ├── TooltipLight.js │ │ │ │ └── index.js │ │ └── index.js │ ├── TreeView │ │ └── index.js │ └── index.js ├── Dashboards │ ├── Analytics │ │ ├── Examples │ │ │ ├── Variation1.js │ │ │ └── Variation2.js │ │ └── index.js │ ├── CRM │ │ ├── Examples │ │ │ ├── Variation1.js │ │ │ └── Variation2.js │ │ └── index.js │ ├── Commerce │ │ ├── Examples │ │ │ ├── Components │ │ │ │ ├── IncomeReport.js │ │ │ │ └── IncomeReport2.js │ │ │ ├── Variation1.js │ │ │ └── Variation2.js │ │ └── index.js │ ├── Minimal │ │ ├── Examples │ │ │ ├── Area.jsx │ │ │ ├── Bar.jsx │ │ │ ├── Column.jsx │ │ │ └── Mixed.jsx │ │ ├── Variation1.js │ │ └── Variation2.js │ ├── Sales │ │ ├── Examples │ │ │ ├── Tabbed.js │ │ │ └── Variation1.js │ │ └── index.js │ └── index.js ├── Elements │ ├── BadgesLabels │ │ ├── Examples │ │ │ ├── avatars.js │ │ │ ├── badges.js │ │ │ └── labels.js │ │ └── index.js │ ├── Button │ │ ├── Icons │ │ │ ├── Examples │ │ │ │ ├── Horizontal.js │ │ │ │ └── Vertical.js │ │ │ └── index.js │ │ ├── Pill │ │ │ ├── Examples │ │ │ │ ├── Dashed.js │ │ │ │ ├── Gradients.js │ │ │ │ ├── Outline.js │ │ │ │ ├── Outline2x.js │ │ │ │ └── Solid.js │ │ │ └── index.js │ │ ├── Shadow │ │ │ ├── Examples │ │ │ │ ├── Dashed.js │ │ │ │ ├── Gradients.js │ │ │ │ ├── Outline.js │ │ │ │ ├── Outline2x.js │ │ │ │ └── Solid.js │ │ │ └── index.js │ │ ├── Square │ │ │ ├── Examples │ │ │ │ ├── Dashed.js │ │ │ │ ├── Gradients.js │ │ │ │ ├── Outline.js │ │ │ │ ├── Outline2x.js │ │ │ │ └── Solid.js │ │ │ └── index.js │ │ └── Standard │ │ │ ├── Examples │ │ │ ├── Dashed.js │ │ │ ├── Gradients.js │ │ │ ├── Outline.js │ │ │ ├── Outline2x.js │ │ │ └── Solid.js │ │ │ └── index.js │ ├── Cards │ │ ├── Examples │ │ │ ├── Advanced.js │ │ │ ├── Basic.js │ │ │ ├── Colors.js │ │ │ ├── Loading.js │ │ │ └── dummyData.js │ │ └── index.js │ ├── Dropdowns │ │ ├── Examples │ │ │ ├── DropdownGridMenus.js │ │ │ └── DropdownStyles.js │ │ └── index.js │ ├── Icons │ │ ├── Examples │ │ │ ├── FlagIcons.js │ │ │ ├── FontAwesome.js │ │ │ ├── IonIcons.js │ │ │ ├── LinearIcons.js │ │ │ └── Pe7Icons.js │ │ └── index.js │ ├── ListGroup │ │ ├── Examples │ │ │ ├── Advanced.js │ │ │ └── Basic │ │ │ │ ├── ListGroup.js │ │ │ │ ├── ListGroupAnchorsAndButtons.js │ │ │ │ ├── ListGroupBadge.js │ │ │ │ ├── ListGroupContextualClasses.js │ │ │ │ ├── ListGroupCustomContent.js │ │ │ │ ├── ListGroupDisabledItems.js │ │ │ │ ├── ListGroupFlush.js │ │ │ │ └── index.js │ │ └── index.js │ ├── Loaders │ │ ├── Examples │ │ │ ├── Basic.js │ │ │ └── Colors.js │ │ └── index.js │ ├── Navs │ │ ├── Examples │ │ │ ├── NavGrid.js │ │ │ ├── NavHorizontal.js │ │ │ └── NavVertical.js │ │ └── index.js │ ├── ScreenVisibility │ │ ├── Examples │ │ │ └── Fade.js │ │ └── index.js │ ├── Timeline │ │ ├── Examples │ │ │ ├── DotBadge.js │ │ │ ├── IconBadge.js │ │ │ └── ScrollableTimeline.js │ │ └── index.js │ ├── Utilities │ │ ├── Examples │ │ │ ├── ColorStates │ │ │ │ ├── ColorGradients.js │ │ │ │ ├── ColorSolids.js │ │ │ │ ├── Headers.js │ │ │ │ ├── TextColor.js │ │ │ │ └── index.js │ │ │ └── Helpers │ │ │ │ ├── Breadcrumb.js │ │ │ │ └── index.js │ │ └── index.js │ └── index.js ├── Forms │ ├── Components │ │ ├── Clipboard │ │ │ └── index.js │ │ ├── ColorPicker │ │ │ └── index.js │ │ ├── DatePicker │ │ │ ├── Examples │ │ │ │ ├── DateRangePicker.js │ │ │ │ ├── example1.js │ │ │ │ ├── example2.js │ │ │ │ ├── example3.js │ │ │ │ ├── example4.js │ │ │ │ ├── example5.js │ │ │ │ ├── example6.js │ │ │ │ ├── example7.js │ │ │ │ └── example8.js │ │ │ └── index.js │ │ ├── DropZone │ │ │ ├── Examples │ │ │ │ └── example1.js │ │ │ └── index.js │ │ ├── Dropdown │ │ │ ├── Examples │ │ │ │ ├── Combobox │ │ │ │ │ └── index.js │ │ │ │ └── Dropdown │ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── InputMask │ │ │ ├── Examples │ │ │ │ └── example1.js │ │ │ └── index.js │ │ ├── MultiSelect │ │ │ ├── Examples │ │ │ │ ├── ComboBox │ │ │ │ │ └── index.js │ │ │ │ ├── DropdownSelect │ │ │ │ │ └── index.js │ │ │ │ ├── Multiselect │ │ │ │ │ └── index.js │ │ │ │ ├── ReactSelect │ │ │ │ │ ├── Examples │ │ │ │ │ │ └── data.js │ │ │ │ │ └── index.js │ │ │ │ └── SelectList │ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── NumberPicker │ │ │ ├── Examples │ │ │ │ ├── NumberPicker.js │ │ │ │ └── NumericInput.js │ │ │ └── index.js │ │ ├── RangeSlider │ │ │ ├── Examples │ │ │ │ ├── Basic │ │ │ │ │ └── index.js │ │ │ │ ├── Styles │ │ │ │ │ └── index.js │ │ │ │ └── Vertical │ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── TextareaAutosize │ │ │ └── index.js │ │ ├── ToggleSwitch │ │ │ ├── Examples │ │ │ │ └── Basic │ │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Typeahead │ │ │ ├── Examples │ │ │ │ └── DummyData.js │ │ │ └── index.js │ │ └── WysiwygEditor │ │ │ ├── Examples │ │ │ └── CkEditor.js │ │ │ └── index.js │ ├── Elements │ │ ├── Controls │ │ │ ├── Examples │ │ │ │ ├── CustomControls.js │ │ │ │ ├── FormBasic.js │ │ │ │ └── InputGroup │ │ │ │ │ ├── InputGroupAddon.js │ │ │ │ │ ├── InputGroupButton.js │ │ │ │ │ ├── InputGroupButtonDropdown.js │ │ │ │ │ ├── InputGroupButtonShorthand.js │ │ │ │ │ ├── InputGroupOverview.js │ │ │ │ │ ├── InputGroupSizing.js │ │ │ │ │ └── InputGroups.js │ │ │ └── index.js │ │ ├── Layouts │ │ │ ├── Examples │ │ │ │ ├── FormGrid.js │ │ │ │ └── FormGridFormRow.js │ │ │ └── index.js │ │ ├── StickyHeaders │ │ │ ├── Examples │ │ │ │ └── Basic.js │ │ │ └── index.js │ │ ├── Validation │ │ │ ├── Examples │ │ │ │ └── Feedback.js │ │ │ └── index.js │ │ └── Wizard │ │ │ ├── Examples │ │ │ ├── Steps │ │ │ │ ├── Step1.js │ │ │ │ ├── Step2.js │ │ │ │ └── Step4.js │ │ │ ├── Variation1.js │ │ │ ├── Variation2.js │ │ │ └── Variation3.js │ │ │ └── Wizard.js │ └── index.js ├── Main │ └── index.js ├── Tables │ ├── DataTables │ │ └── Examples │ │ │ ├── Basic.js │ │ │ ├── FixedHeader.js │ │ │ ├── Pivoting.js │ │ │ └── utils.js │ ├── RegularTables │ │ ├── Examples │ │ │ ├── Table.js │ │ │ ├── TableBordered.js │ │ │ ├── TableBorderless.js │ │ │ ├── TableDark.js │ │ │ ├── TableHover.js │ │ │ ├── TableResponsive.js │ │ │ ├── TableSizing.js │ │ │ └── TableStriped.js │ │ └── index.js │ └── index.js ├── UserPages │ ├── ForgotPassword │ │ └── index.js │ ├── ForgotPasswordBoxed │ │ └── index.js │ ├── Login │ │ └── index.js │ ├── LoginBoxed │ │ └── index.js │ ├── Register │ │ └── index.js │ ├── RegisterBoxed │ │ └── index.js │ └── index.js └── Widgets │ ├── ChartBoxes │ ├── Examples │ │ ├── Alignment.js │ │ ├── Basic.js │ │ ├── Colors.js │ │ ├── Grids.js │ │ └── Progress.js │ └── index.js │ ├── ChartBoxes2 │ ├── Examples │ │ ├── Basic.js │ │ └── Colors.js │ └── index.js │ ├── ChartBoxes3 │ ├── Examples │ │ └── Basic.js │ └── index.js │ ├── ContentBoxes │ ├── Examples │ │ └── Basic.js │ └── index.js │ ├── ProfileBoxes │ ├── Examples │ │ ├── ListBoxes.js │ │ └── ProfileBlocks.js │ └── index.js │ └── index.js ├── Layout ├── AppFooter │ ├── Components │ │ ├── FooterDots.js │ │ ├── FooterMegaMenu.js │ │ └── TabsContent │ │ │ ├── ChatExample.js │ │ │ ├── SystemExample.js │ │ │ └── TimelineExample.js │ └── index.js ├── AppHeader │ ├── Components │ │ ├── SearchBox.js │ │ └── UserBox.js │ └── index.js ├── AppLogo │ └── index.js ├── AppMain │ ├── PageTitle.js │ ├── PageTitleAlt.js │ ├── PageTitleAlt2.js │ ├── PageTitleAlt3.js │ ├── PageTitleAlt3Examples │ │ ├── Variation1.js │ │ ├── Variation2.js │ │ ├── Variation3.js │ │ └── Variation4.js │ ├── PageTitleExamples │ │ ├── Variation1.js │ │ ├── Variation2.js │ │ └── Variation3.js │ └── index.js ├── AppMobileMenu │ └── index.js ├── AppNav │ ├── NavItems.js │ └── VerticalNavWrapper.js ├── AppSidebar │ └── index.js └── ThemeOptions │ └── index.js ├── assets ├── applications │ ├── _applications-base.scss │ ├── _chat.scss │ └── _responsive.scss ├── base.scss ├── components │ ├── block-loading │ │ └── _block-loading.scss │ ├── calendar │ │ ├── _calendar.scss │ │ └── scss │ │ │ ├── _agenda.scss │ │ │ ├── _event.scss │ │ │ ├── _month.scss │ │ │ ├── _reset.scss │ │ │ ├── _time-column.scss │ │ │ ├── _time-grid.scss │ │ │ ├── _toolbar.scss │ │ │ └── _variables.scss │ ├── drawer │ │ └── _drawer.scss │ ├── forms │ │ ├── datepicker │ │ │ ├── _datepicker.scss │ │ │ ├── _mixins.scss │ │ │ └── _variables.scss │ │ ├── dropzone │ │ │ └── _dropzone.scss │ │ ├── multiselect │ │ │ └── _multiselect.scss │ │ ├── rangeslider │ │ │ ├── _rangeslider.scss │ │ │ └── _tooltip.scss │ │ ├── toggle-switch │ │ │ └── _switch.scss │ │ ├── typeahead │ │ │ ├── _mixins.scss │ │ │ └── _typeahead.scss │ │ └── wysiwyg │ │ │ └── _wysiwyg.scss │ ├── hamburgers │ │ ├── _base.scss │ │ ├── hamburgers.scss │ │ └── types │ │ │ ├── _3dx-r.scss │ │ │ ├── _3dx.scss │ │ │ ├── _3dxy-r.scss │ │ │ ├── _3dxy.scss │ │ │ ├── _3dy-r.scss │ │ │ ├── _3dy.scss │ │ │ ├── _arrow-r.scss │ │ │ ├── _arrow.scss │ │ │ ├── _arrowalt-r.scss │ │ │ ├── _arrowalt.scss │ │ │ ├── _arrowturn-r.scss │ │ │ ├── _arrowturn.scss │ │ │ ├── _boring.scss │ │ │ ├── _collapse-r.scss │ │ │ ├── _collapse.scss │ │ │ ├── _elastic-r.scss │ │ │ ├── _elastic.scss │ │ │ ├── _emphatic-r.scss │ │ │ ├── _emphatic.scss │ │ │ ├── _minus.scss │ │ │ ├── _slider-r.scss │ │ │ ├── _slider.scss │ │ │ ├── _spin-r.scss │ │ │ ├── _spin.scss │ │ │ ├── _spring-r.scss │ │ │ ├── _spring.scss │ │ │ ├── _squeeze.scss │ │ │ ├── _stand-r.scss │ │ │ ├── _stand.scss │ │ │ ├── _vortex-r.scss │ │ │ └── _vortex.scss │ ├── icons │ │ ├── _linearicons.scss │ │ ├── _p7icons.scss │ │ └── linearicons │ │ │ ├── Linearicons-Free.eot │ │ │ ├── Linearicons-Free.svg │ │ │ ├── Linearicons-Free.ttf │ │ │ ├── Linearicons-Free.woff │ │ │ └── Linearicons-Free.woff2 │ ├── loading-buttons │ │ └── _loading-buttons.scss │ ├── modals │ │ └── _rodal.scss │ ├── notifications │ │ ├── _sweetalerts.scss │ │ ├── _toastify.scss │ │ └── toastify │ │ │ ├── _closeButton.scss │ │ │ ├── _progressBar.scss │ │ │ ├── _toast.scss │ │ │ ├── _toastContainer.scss │ │ │ ├── _variables.scss │ │ │ └── animations │ │ │ ├── _bounce.scss │ │ │ ├── _flip.scss │ │ │ ├── _slide.scss │ │ │ └── _zoom.scss │ ├── perfect-scrollbar │ │ └── _perfect-scrollbar.scss │ ├── popovers-tooltips │ │ └── _popovers-tooltips.scss │ ├── progress-bar │ │ └── _progress-bar.scss │ ├── rc-tabs │ │ └── _rc-tabs.scss │ ├── react-widgets │ │ ├── fonts │ │ │ ├── rw-widgets.eot │ │ │ ├── rw-widgets.svg │ │ │ ├── rw-widgets.ttf │ │ │ ├── rw-widgets.woff │ │ │ └── rw-widgets.woff2 │ │ ├── img │ │ │ ├── loader-big.gif │ │ │ └── loading.gif │ │ └── scss │ │ │ ├── autocomplete.scss │ │ │ ├── button.scss │ │ │ ├── calendar.scss │ │ │ ├── dropdown-list.scss │ │ │ ├── icons.scss │ │ │ ├── list.scss │ │ │ ├── mixins.scss │ │ │ ├── multiselect.scss │ │ │ ├── normalize.scss │ │ │ ├── number-picker.scss │ │ │ ├── popup.scss │ │ │ ├── react-widgets.scss │ │ │ ├── select-list.scss │ │ │ ├── state.scss │ │ │ ├── variables.scss │ │ │ └── widget.scss │ ├── slick-carousel │ │ └── slick │ │ │ ├── _slick-theme.scss │ │ │ ├── _slick.scss │ │ │ └── ajax-loader.gif │ ├── splitters │ │ └── _splitters.scss │ ├── sticky-elements │ │ └── _sticky-elements.scss │ ├── tables │ │ └── _tables.scss │ └── tree-view │ │ └── _tree-view.scss ├── demo-ui │ ├── _demo.scss │ ├── elements │ │ ├── _layout-themes.scss │ │ └── _theme-options.scss │ └── images │ │ └── logo.png ├── elements │ ├── _accordions.scss │ ├── _badges.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _chat.scss │ ├── _dropdown.scss │ ├── _forms-wizard.scss │ ├── _forms.scss │ ├── _loaders.scss │ ├── _modals.scss │ ├── _navs.scss │ ├── _pagination.scss │ ├── _progressbar.scss │ ├── _tabs.scss │ ├── _timeline.scss │ └── listgroup.scss ├── layout │ ├── _layout-variables.scss │ ├── _layout.scss │ ├── elements │ │ ├── page-title │ │ │ └── _page-title-base.scss │ │ └── search-box │ │ │ └── _search-box.scss │ ├── footer │ │ ├── _fixed-footer.scss │ │ └── _footer-base.scss │ ├── generic │ │ ├── _animations.scss │ │ └── _generic-base.scss │ ├── header │ │ ├── _header-base.scss │ │ ├── modifiers │ │ │ ├── _fixed-header.scss │ │ │ ├── _header-buttons.scss │ │ │ ├── _header-dots.scss │ │ │ ├── _header-horizontal.scss │ │ │ └── _header-megamenu.scss │ │ └── themes │ │ │ ├── _header-dark.scss │ │ │ └── _header-light.scss │ ├── main │ │ ├── _main-base.scss │ │ └── themes │ │ │ ├── _main-gray.scss │ │ │ └── _main-white.scss │ ├── responsive │ │ └── _responsive-base.scss │ └── sidebar │ │ ├── _sidebar-base.scss │ │ ├── modifiers │ │ ├── _closed-sidebar.scss │ │ ├── _fixed-sidebar.scss │ │ └── _navmenu-vertical.scss │ │ └── themes │ │ ├── _sidebar-dark.scss │ │ └── _sidebar-light.scss ├── pages │ └── _userpages.scss ├── themes │ ├── _layout-variables.scss │ ├── black │ │ └── _variables.scss │ ├── blue-alt │ │ └── _variables.scss │ ├── dark │ │ └── _variables.scss │ ├── default │ │ └── _variables.scss │ ├── green │ │ └── _variables.scss │ ├── orange │ │ └── _variables.scss │ ├── purple-alt │ │ └── _variables.scss │ ├── purple │ │ └── _variables.scss │ └── red │ │ └── _variables.scss ├── utils │ ├── _animate.scss │ ├── _backgrounds.scss │ ├── _comps-animations.scss │ ├── _helpers.scss │ ├── helpers │ │ ├── _grayscale.scss │ │ └── _opacity.scss │ └── images │ │ ├── avatars │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ │ ├── dropdown-header │ │ ├── abstract1.jpg │ │ ├── abstract10.jpg │ │ ├── abstract2.jpg │ │ ├── abstract3.jpg │ │ ├── abstract4.jpg │ │ ├── abstract5.jpg │ │ ├── abstract6.jpg │ │ ├── abstract7.jpg │ │ ├── abstract8.jpg │ │ ├── abstract9.jpg │ │ ├── city1.jpg │ │ ├── city2.jpg │ │ ├── city3.jpg │ │ ├── city4.jpg │ │ └── city5.jpg │ │ ├── logo-inverse.png │ │ ├── logo.png │ │ ├── originals │ │ ├── abstract.jpg │ │ ├── abstract2.jpg │ │ ├── abstract3.jpg │ │ ├── abstract4.jpg │ │ ├── abstract5.jpg │ │ ├── abstract6.jpg │ │ ├── buildings.jpg │ │ ├── city.jpg │ │ ├── citydark.jpg │ │ ├── citynights.jpg │ │ ├── colors.jpg │ │ ├── fence-small.jpg │ │ ├── fence.jpg │ │ ├── interconnected.jpg │ │ ├── nightcolors.jpg │ │ └── water.jpg │ │ └── sidebar │ │ ├── abstract1.jpg │ │ ├── abstract10.jpg │ │ ├── abstract2.jpg │ │ ├── abstract3.jpg │ │ ├── abstract4.jpg │ │ ├── abstract5.jpg │ │ ├── abstract6.jpg │ │ ├── abstract7.jpg │ │ ├── abstract8.jpg │ │ ├── abstract9.jpg │ │ ├── city1.jpg │ │ ├── city2.jpg │ │ ├── city3.jpg │ │ ├── city4.jpg │ │ └── city5.jpg └── widgets │ ├── chart-boxes │ └── _chart-boxes.scss │ ├── content-boxes │ └── _content-boxes.scss │ └── profile-boxes │ └── _profile-boxes.scss ├── config └── configureStore.js ├── index.js ├── polyfills.js ├── reducers ├── ThemeOptions.js └── index.js └── serviceWorker.js /.env: -------------------------------------------------------------------------------- 1 | NODE_PATH=./src 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | #idea 4 | .idea 5 | 6 | # dependencies 7 | /node_modules 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | /documentation 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /Changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [3.0.0] - 2023-11-20 4 | 5 | ### Changed 6 | 7 | - Migrated to React v18. 8 | - Import SCSS files from `node_modules` by using the sass-loader instead of relative paths like `../../node_modules`. 9 | - Upgraded all dependencies to latest versions. 10 | 11 | ### Fixed 12 | 13 | - Fixed SCSS bugs. 14 | 15 | ## [2.1.0] - 2022-08-19 16 | 17 | ### Changed 18 | - Updated Libraries 19 | 20 | ## [2.0.0] - 2022-03-03 21 | 22 | ### Changed 23 | - Updated to React 17 24 | - Added react-app-rewired 25 | - Updated to Bootstrap 5 26 | - Updated to Reactstrap 9 27 | - Updated all Libraries 28 | 29 | ## [1.1.0] - 2021-05-17 30 | 31 | ### Changed 32 | - Updated Libraries 33 | 34 | ## [1.1.0] - 2021-04-06 35 | 36 | ### Changed 37 | - Updated Libraries 38 | 39 | ## [1.0.0] - 2019-03-05 40 | 41 | ### Added 42 | - Initial Release 43 | 44 | [3.0.0]: https://github.com/DashboardPack/architectui-react-theme-free/releases/tag/v3.0.0 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 DashboardPack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | module.exports = function override(config, env) { 2 | //do stuff with the webpack config... 3 | 4 | config.resolve.fallback = { 5 | url: require.resolve('url'), 6 | assert: require.resolve('assert'), 7 | crypto: require.resolve('crypto-browserify'), 8 | http: require.resolve('stream-http'), 9 | https: require.resolve('https-browserify'), 10 | buffer: require.resolve('buffer/'), 11 | stream: require.resolve('stream-browserify'), 12 | }; 13 | 14 | config.ignoreWarnings = [ 15 | { 16 | file: /node_modules\/.*\.scss$/ 17 | } 18 | ]; 19 | 20 | return config; 21 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/public/favicon.ico -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/DemoPages/Applications/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Route } from "react-router-dom"; 3 | 4 | // APPLICATIONS 5 | 6 | import Mailbox from "./Mailbox/"; 7 | import Chat from "./Chat/"; 8 | import FaqSection from "./FaqSection/"; 9 | 10 | // Layout 11 | 12 | import AppHeader from "../../Layout/AppHeader/"; 13 | import AppSidebar from "../../Layout/AppSidebar/"; 14 | import AppFooter from "../../Layout/AppFooter/"; 15 | 16 | // Theme Options 17 | import ThemeOptions from "../../Layout/ThemeOptions/"; 18 | 19 | const Applications = ({ match }) => ( 20 | 21 | 22 | 23 |
24 | 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 | 33 |
34 |
35 |
36 | 37 | ); 38 | 39 | export default Applications; 40 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Basic/Bar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'react-apexcharts' 3 | 4 | class Bar extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | options2: { 11 | chart: { 12 | id: 'apexchart-example-3' 13 | }, 14 | dataLabels: { 15 | enabled: false 16 | }, 17 | plotOptions: { 18 | bar: { 19 | horizontal: true 20 | } 21 | }, 22 | xaxis: { 23 | categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 24 | } 25 | }, 26 | series2: [{ 27 | data: [30, 40, 25, 50, 49, 21, 70, 51] 28 | }], 29 | } 30 | } 31 | 32 | render() { 33 | 34 | return ( 35 |
36 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | export default Bar; 43 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Basic/Donut.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'react-apexcharts' 3 | 4 | class Donut extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | options4: { 11 | chart: { 12 | id: 'apexchart-example-2' 13 | }, 14 | labels: ['A', 'B', 'C', 'D', 'E'], 15 | }, 16 | series4: [44, 55, 41, 17, 15], 17 | } 18 | } 19 | 20 | render() { 21 | 22 | return ( 23 |
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | export default Donut; 31 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Basic/RadialBar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'react-apexcharts' 3 | 4 | class RadialBar extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | options: { 11 | labels: ['RadialBar'], 12 | plotOptions: { 13 | radialBar: { 14 | hollow: { 15 | size: '70%', 16 | } 17 | }, 18 | }, 19 | }, 20 | series: [68], 21 | } 22 | } 23 | 24 | render() { 25 | 26 | return ( 27 |
28 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | export default RadialBar; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Sparklines/Bar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'react-apexcharts' 3 | 4 | class Bar extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | options: { 11 | dataLabels: { 12 | enabled: false 13 | }, 14 | plotOptions: { 15 | bar: { 16 | horizontal: true 17 | } 18 | }, 19 | xaxis: { 20 | categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 21 | }, 22 | 23 | chart: { 24 | sparkline: { 25 | enabled: true, 26 | } 27 | } 28 | }, 29 | series: [{ 30 | data: [30, 40, 25, 50, 49, 21, 70, 51] 31 | }], 32 | } 33 | } 34 | 35 | render() { 36 | 37 | return ( 38 |
39 | 40 |
41 | ); 42 | } 43 | } 44 | 45 | export default Bar; 46 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Sparklines/Line.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'react-apexcharts' 3 | 4 | class Line extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | options: { 11 | stroke: { 12 | curve: 'smooth' 13 | }, 14 | markers: { 15 | size: 0 16 | }, 17 | xaxis: { 18 | categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 19 | }, 20 | chart: { 21 | sparkline: { 22 | enabled: true, 23 | } 24 | } 25 | }, 26 | series: [{ 27 | data: [30, 40, 25, 50, 49, 21, 70, 51] 28 | }], 29 | } 30 | } 31 | 32 | render() { 33 | 34 | return ( 35 |
36 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | export default Line; 43 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/Examples/Sparklines/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import { Row, Col, Card, CardBody, CardTitle } from "reactstrap"; 4 | 5 | // Examples 6 | import Area from "./Area"; 7 | import Bar from "./Bar"; 8 | // import Column from './Column'; 9 | import Line from "./Line"; 10 | 11 | export default class ApexChartsSparklines extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | Area 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Bar 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | Line 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ApexCharts/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ApexChartsBasic from "./Examples/Basic/"; 7 | import ApexChartsSparklines from "./Examples/Sparklines/"; 8 | 9 | export default class ApexCharts extends Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/bar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Bar } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["January", "February", "March", "April", "May", "June", "July"], 7 | datasets: [ 8 | { 9 | label: "My First dataset", 10 | backgroundColor: "rgba(255,99,132,0.2)", 11 | borderColor: "rgba(255,99,132,1)", 12 | borderWidth: 1, 13 | hoverBackgroundColor: "rgba(255,99,132,0.4)", 14 | hoverBorderColor: "rgba(255,99,132,1)", 15 | borderCapStyle: "round", 16 | data: [65, 59, 80, 81, 56, 55, 40], 17 | }, 18 | ], 19 | }; 20 | 21 | class BarExample extends React.Component { 22 | render() { 23 | return ( 24 |
25 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | export default BarExample; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/doughnut.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Doughnut } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["Cars", "Trains", "Airplanes"], 7 | datasets: [ 8 | { 9 | data: [300, 50, 100], 10 | backgroundColor: ["#8dace7", "#71deb9", "#ef869e"], 11 | hoverBackgroundColor: ["#7097e1", "#4dd6a7", "#eb6886"], 12 | 13 | }, 14 | ], 15 | }; 16 | 17 | 18 | class DoughnutExample extends React.Component { 19 | render() { 20 | return ( 21 |
22 | 23 |
24 | ); 25 | } 26 | } 27 | 28 | export default DoughnutExample; 29 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/dynamicDoughnut.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Doughnut } from "react-chartjs-2"; 4 | 5 | function getRandomInt(min, max) { 6 | return Math.floor(Math.random() * (max - min + 1)) + min; 7 | } 8 | 9 | // var createReactClass = require('create-react-class'); 10 | export default class DynamicDoughnutExample extends React.Component { 11 | constructor() { 12 | super(); 13 | this.state = { 14 | data: { 15 | labels: ["Cars", "Trains", "Airplanes"], 16 | datasets: [ 17 | { 18 | data: [ 19 | getRandomInt(50, 200), 20 | getRandomInt(100, 150), 21 | getRandomInt(150, 250), 22 | ], 23 | backgroundColor: ["#cbd5dc", "#71deb9", "#ef869e"], 24 | hoverBackgroundColor: ["#7097e1", "#4dd6a7", "#eb6886"], 25 | }, 26 | ], 27 | }, 28 | }; 29 | } 30 | render() { 31 | return ( 32 |
33 | 34 |
35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/horizontalBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Bar } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["January", "February", "March", "April", "May", "June", "July"], 7 | datasets: [ 8 | { 9 | label: "My First dataset", 10 | backgroundColor: "rgba(255,99,132,0.2)", 11 | borderColor: "rgba(255,99,132,1)", 12 | borderWidth: 1, 13 | hoverBackgroundColor: "rgba(255,99,132,0.4)", 14 | hoverBorderColor: "rgba(255,99,132,1)", 15 | borderCapStyle: "round", 16 | data: [65, 59, 80, 81, 56, 55, 40], 17 | }, 18 | ], 19 | }; 20 | 21 | const options = { 22 | indexAxis: 'y', 23 | }; 24 | class BarExample extends React.Component { 25 | render() { 26 | return ( 27 |
28 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | export default BarExample; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/line.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Line } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["January", "February", "March", "April", "May", "June", "July"], 7 | datasets: [ 8 | { 9 | label: "My First dataset", 10 | fill: false, 11 | lineTension: 0.1, 12 | backgroundColor: "#ed0f51", 13 | borderColor: "#ed0f51", 14 | borderCapStyle: "round", 15 | borderDash: [], 16 | borderDashOffset: 0.0, 17 | borderJoinStyle: "miter", 18 | pointBorderColor: "#ed0f51", 19 | pointBackgroundColor: "#ffffff", 20 | pointBorderWidth: 2, 21 | pointHoverRadius: 10, 22 | pointHoverBackgroundColor: "#ed0f51", 23 | pointHoverBorderColor: "#ed0f51", 24 | pointHoverBorderWidth: 2, 25 | pointRadius: 1, 26 | pointHitRadius: 10, 27 | data: [65, 59, 80, 81, 56, 55, 40], 28 | }, 29 | ], 30 | }; 31 | 32 | class LineExample extends React.Component { 33 | render() { 34 | return ( 35 |
36 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | export default LineExample; 43 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/line2.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Line } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["January", "February", "March", "April", "May", "June", "July"], 7 | datasets: [ 8 | { 9 | label: "My First dataset", 10 | fill: true, 11 | lineTension: 0.1, 12 | backgroundColor: "rgba(75,192,192,0.4)", 13 | borderColor: "rgba(75,192,192,1)", 14 | borderCapStyle: "round", 15 | borderDash: [], 16 | borderDashOffset: 0.0, 17 | borderJoinStyle: "miter", 18 | pointBorderColor: "rgba(75,192,192,1)", 19 | pointBackgroundColor: "#fff", 20 | pointBorderWidth: 1, 21 | pointHoverRadius: 5, 22 | pointHoverBackgroundColor: "rgba(75,192,192,1)", 23 | pointHoverBorderColor: "rgba(220,220,220,1)", 24 | pointHoverBorderWidth: 2, 25 | pointRadius: 1, 26 | pointHitRadius: 10, 27 | data: [65, 59, 80, 81, 56, 55, 40], 28 | }, 29 | ], 30 | }; 31 | 32 | class LineExample2 extends React.Component { 33 | render() { 34 | return ( 35 |
36 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | export default LineExample2; 43 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/pie.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Pie } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: ["Cars", "Trains", "Airplanes"], 7 | datasets: [ 8 | { 9 | data: [300, 50, 100], 10 | backgroundColor: ["#8dace7", "#71deb9", "#ef869e"], 11 | hoverBackgroundColor: ["#8dace7", "#71deb9", "#ef869e"], 12 | }, 13 | ], 14 | }; 15 | 16 | class PieExample extends React.Component { 17 | render() { 18 | return ( 19 |
20 | 21 |
22 | ); 23 | } 24 | } 25 | 26 | export default PieExample; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/polar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { PolarArea } from "react-chartjs-2"; 4 | 5 | const data = { 6 | datasets: [ 7 | { 8 | data: [11, 16, 7, 3, 14], 9 | backgroundColor: ["#8dace7", "#4BC0C0", "#ef869e", "#E7E9ED", "#71deb9"], 10 | label: "My dataset", // for legend 11 | }, 12 | ], 13 | labels: ["Red", "Green", "Yellow", "Grey", "Blue"], 14 | }; 15 | 16 | class PolarExample extends React.Component { 17 | render() { 18 | return ( 19 |
20 | 21 |
22 | ); 23 | } 24 | } 25 | 26 | export default PolarExample; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/ChartJs/Examples/radar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import 'chart.js/auto'; 3 | import { Radar } from "react-chartjs-2"; 4 | 5 | const data = { 6 | labels: [ 7 | "Eating", 8 | "Drinking", 9 | "Sleeping", 10 | "Designing", 11 | "Coding", 12 | "Cycling", 13 | "Running", 14 | ], 15 | datasets: [ 16 | { 17 | label: "My First dataset", 18 | backgroundColor: "rgba(179,181,198,0.2)", 19 | borderColor: "rgba(179,181,198,1)", 20 | pointBackgroundColor: "rgba(179,181,198,1)", 21 | pointBorderColor: "#fff", 22 | pointHoverBackgroundColor: "#fff", 23 | pointHoverBorderColor: "rgba(179,181,198,1)", 24 | data: [65, 59, 90, 81, 56, 55, 40], 25 | }, 26 | { 27 | label: "My Second dataset", 28 | backgroundColor: "rgba(255,99,132,0.2)", 29 | borderColor: "rgba(255,99,132,1)", 30 | pointBackgroundColor: "rgba(255,99,132,1)", 31 | pointBorderColor: "#fff", 32 | pointHoverBackgroundColor: "#fff", 33 | pointHoverBorderColor: "rgba(255,99,132,1)", 34 | data: [28, 48, 40, 19, 96, 27, 100], 35 | }, 36 | ], 37 | }; 38 | 39 | class RadarExample extends React.Component { 40 | render() { 41 | return ( 42 |
43 | 44 |
45 | ); 46 | } 47 | } 48 | 49 | export default RadarExample; 50 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/Gauges/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ChartsLiquidGaugeExample from "./Examples/liquidGauge"; 7 | 8 | export default class ChartsGauges extends Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/Sparklines1/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ChartsSparklines1 from "./Examples"; 7 | 8 | export default class Sparklines1Examples extends Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/Sparklines2/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ChartsSparklines2 from "./Examples/index"; 7 | 8 | export default class Sparklines2Examples extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Charts/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Route } from "react-router-dom"; 3 | 4 | // Charts 5 | 6 | import ChartsSparklines1 from "./Sparklines1/"; 7 | import ChartsSparklines2 from "./Sparklines2/"; 8 | import ChartsChartJs from "./ChartJs/"; 9 | import ChartsGauges from "./Gauges/"; 10 | import ApexCharts from "./ApexCharts/"; 11 | 12 | // Layout 13 | 14 | import AppHeader from "../../Layout/AppHeader/"; 15 | import AppSidebar from "../../Layout/AppSidebar/"; 16 | import AppFooter from "../../Layout/AppFooter/"; 17 | 18 | // Theme Options 19 | 20 | import ThemeOptions from "../../Layout/ThemeOptions/"; 21 | 22 | const Charts = ({ match }) => ( 23 | 24 | 25 | 26 |
27 | 28 |
29 |
30 | {/* Charts */} 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 |
40 |
41 | 42 | ); 43 | 44 | export default Charts; 45 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Accordion/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import AccordionsBasicExample from "./Examples/Basic"; 7 | 8 | export default class AccordionExample extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/BlockLoading/dummyData.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | 3 | export const presidents = [ 4 | { 5 | name: "George Washington", 6 | biography: 7 | "George Washington (February 22, 1732 – December 14, 1799) was the first President of the United States...", 8 | }, 9 | { 10 | name: "Thomas Jefferson", 11 | biography: 12 | "Thomas Jefferson (April 13 1743 – July 4, 1826) was an American lawyer", 13 | }, 14 | { 15 | name: "Abraham Lincoln", 16 | biography: 17 | "Abraham Lincoln (February 12, 1809 – April 15, 1865) was the 16th President of the United States", 18 | }, 19 | ]; 20 | 21 | export default presidents; 22 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Calendar/Examples/Basic.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, Component } from "react"; 2 | 3 | import { Card, CardBody } from "reactstrap"; 4 | 5 | import { Calendar, momentLocalizer } from "react-big-calendar"; 6 | import 'react-big-calendar/lib/css/react-big-calendar.css'; 7 | import moment from "moment"; 8 | import events from "./Events"; 9 | 10 | const localizer = momentLocalizer(moment); 11 | 12 | export default class CalendarBasic extends Component { 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Calendar/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import CalendarBasic from "./Examples/Basic"; 7 | 8 | export default class CalendarExample extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Carousel/Examples/Carousel/Carousel.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UncontrolledCarousel } from "reactstrap"; 3 | import image1 from "../../../../../assets/utils/images/dropdown-header/abstract1.jpg"; 4 | import image2 from "../../../../../assets/utils/images/dropdown-header/abstract2.jpg"; 5 | import image3 from "../../../../../assets/utils/images/dropdown-header/abstract3.jpg"; 6 | 7 | const items = [ 8 | { 9 | id: 1, 10 | src: image1, 11 | altText: "Slide 1", 12 | caption: "Slide 1", 13 | }, 14 | { 15 | id: 2, 16 | src: image2, 17 | altText: "Slide 2", 18 | caption: "Slide 2", 19 | }, 20 | { 21 | id: 3, 22 | src: image3, 23 | altText: "Slide 3", 24 | caption: "Slide 3", 25 | }, 26 | ]; 27 | 28 | const CarouselDefault = () => ; 29 | 30 | export default CarouselDefault; 31 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Carousel/Examples/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { CSSTransition, TransitionGroup } from 'react-transition-group'; 3 | 4 | import { Row, Col, Card, CardBody, CardTitle } from "reactstrap"; 5 | 6 | import CarouselDefault from "./Carousel"; 7 | import CustomExample from "./CustomTag"; 8 | 9 | const CarouselBSExample = (props) => { 10 | return ( 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | Basic 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Custom Tags 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default CarouselBSExample; 40 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Carousel/Examples/Slideshow/CenterMode.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, Component } from "react"; 2 | import Slider from "react-slick"; 3 | 4 | export default class CenterMode extends Component { 5 | render() { 6 | const settings = { 7 | className: "center", 8 | centerMode: true, 9 | infinite: true, 10 | centerPadding: "60px", 11 | slidesToShow: 3, 12 | speed: 500, 13 | dots: true, 14 | }; 15 | return ( 16 | 17 | 18 |
19 |
1
20 |
21 |
22 |
2
23 |
24 |
25 |
3
26 |
27 |
28 |
4
29 |
30 |
31 |
5
32 |
33 |
34 |
6
35 |
36 |
37 |
7
38 |
39 |
40 |
8
41 |
42 | 43 | 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Carousel/Examples/Slideshow/SimpleSlider.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, Component } from "react"; 2 | import Slider from "react-slick"; 3 | 4 | class SimpleSlider extends Component { 5 | render() { 6 | const settings = { 7 | dots: true, 8 | infinite: true, 9 | speed: 500, 10 | slidesToShow: 1, 11 | slidesToScroll: 1, 12 | }; 13 | return ( 14 | 15 | 16 |
17 |
1
18 |
19 |
20 |
2
21 |
22 |
23 |
3
24 |
25 |
26 |
4
27 |
28 |
29 |
5
30 |
31 |
32 |
6
33 |
34 | 35 | 36 | ); 37 | } 38 | } 39 | 40 | export default SimpleSlider; 41 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import CarouselBSExample from "./Examples/Carousel"; 7 | import SlideshowExample from "./Examples/Slideshow"; 8 | 9 | export default class CarouselExample extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 |
18 |
19 | Bootstrap 5 Carousel 20 |
21 |
22 | 23 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Box.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export default styled.div` 4 | flex: 0 0 100%; 5 | padding: 1em; 6 | text-align: ${(props) => 7 | props.center ? "center" : props.align ? props.align : "left"}; 8 | @media (min-width: 40em) { 9 | flex: ${(props) => (props.width ? `0 0 ${props.width}` : 1)}; 10 | width: ${(props) => (props.width ? props.width : "100%")}; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Button.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { headingSizes, themeColors } from "./settings"; 3 | 4 | const styles = ` 5 | border: 0; 6 | border-radius: 4px; 7 | outline: 0; 8 | color: white; 9 | padding: .5em 1em; 10 | margin-left: .25em; 11 | margin-right: .25em; 12 | 13 | &:hover { 14 | opacity: .9; 15 | } 16 | `; 17 | const Button = styled.button` 18 | ${styles}; 19 | `; 20 | const Link = styled.a` 21 | ${styles}; 22 | `; 23 | 24 | const StyledButton = styled(Button)` 25 | font-size: ${(props) => (props.h ? headingSizes[props.h - 1] : "inherit")}; 26 | background-color: ${(props) => themeColors[props.color] || themeColors.dark}; 27 | `; 28 | 29 | const StyledLink = styled(Link)` 30 | text-decoration: none; 31 | font-size: ${(props) => (props.h ? headingSizes[props.h - 1] : "inherit")}; 32 | background: ${(props) => (props.bg ? themeColors[props.bg] : "none")}; 33 | color: ${(props) => 34 | props.bg 35 | ? "white" 36 | : props.color 37 | ? themeColors[props.color] 38 | : themeColors.black}; 39 | ${(props) => 40 | props.nospaces && 41 | ` 42 | display: inline-block; 43 | padding: 0; 44 | margin: 0; 45 | `}; 46 | `; 47 | 48 | export { StyledButton as Button }; 49 | export { StyledLink as Link }; 50 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Heading.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { headingSizes, themeColors } from "./settings"; 4 | 5 | export default styled(({ h, ...props }) => { 6 | const H = `h${h}`; 7 | return ; 8 | })` 9 | font-size: ${(props) => headingSizes[props.h - 1]}; 10 | color: ${(props) => themeColors[props.color] || themeColors.dark}; 11 | letter-spacing: 1px; 12 | line-height: 1.375; 13 | `; 14 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Image.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export default styled.img` 4 | border: 0; 5 | display: block; 6 | max-width: 100%; 7 | width: 100%; 8 | `; 9 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Logo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import PropTypes from "prop-types"; 4 | 5 | const LogoWrapper = styled.div` 6 | width: 50%; 7 | display: inline-block; 8 | max-width: 430px; 9 | margin-top: 2rem; 10 | `; 11 | 12 | export default function Logo({ iso = true, ...props }) { 13 | return ( 14 | 15 |
First Paragraph
16 | {iso &&
Second Paragraph
} 17 | 18 | ); 19 | } 20 | 21 | Logo.propTypes = { 22 | iso: PropTypes.bool, 23 | }; 24 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Row.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export default styled.div` 4 | display: flex; 5 | flex-wrap: wrap; 6 | `; 7 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Scrollable.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { themeColors } from "./settings"; 3 | 4 | export default styled.aside` 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | bottom: 0; 9 | color: ${themeColors.dark}; 10 | width: 130px; 11 | overflow-y: scroll; 12 | -ms-overflow-style: none; 13 | &::-webkit-scrollbar { 14 | width: 0 !important; 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Section.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export default styled.section` 4 | padding: 1em; 5 | text-align: ${(props) => 6 | props.center ? "center" : props.align ? props.align : "left"}; 7 | `; 8 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Text.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { themeColors } from "./settings"; 3 | 4 | export default styled.p` 5 | margin: 0; 6 | color: ${(props) => 7 | props.color 8 | ? themeColors[props.color] 9 | ? themeColors[props.color] 10 | : props.color 11 | : themeColors.black}; 12 | line-height: 1.5; 13 | font-size: ${(props) => (props.size ? props.size : "inherit")}; 14 | `; 15 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/Tooltip.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { themeColors } from "./settings"; 3 | 4 | export default styled.span` 5 | position: relative; 6 | color: ${themeColors.dark}; 7 | 8 | &:after { 9 | content: attr(data-tooltip); 10 | position: absolute; 11 | transition: 0.3s; 12 | background-color: ${themeColors.dark}; 13 | color: white; 14 | left: 0; 15 | bottom: 100%; 16 | box-shadow: 0 0.5em 3em rgba(255, 255, 255, 0.3); 17 | opacity: 0; 18 | padding: 0.2em 0.5em; 19 | border-radius: 2px; 20 | font-size: 0.7em; 21 | } 22 | 23 | &:hover:after { 24 | opacity: 1; 25 | } 26 | `; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Components/GuidedTours/Examples/settings.js: -------------------------------------------------------------------------------- 1 | export const fontFamily = `BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif`; 2 | 3 | export const headingSizes = [ 4 | "2rem", 5 | "1.5rem", 6 | "1.25rem", 7 | "1rem", 8 | ".875rem", 9 | ".75rem", 10 | ]; 11 | 12 | export const themeColors = { 13 | dark: "#3f6ad8", 14 | light: "#3ac47d", 15 | black: "#444054", 16 | }; 17 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Maps/Examples/VectorMaps/Basic.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { 4 | ComposableMap, 5 | Geographies, 6 | Geography, 7 | ZoomableGroup, 8 | } from "react-simple-maps"; 9 | 10 | import world from "./Static/world-50m.json"; 11 | 12 | export default class VectorMapsBasic extends React.Component { 13 | render() { 14 | return ( 15 | 16 |
17 | 18 | 19 | 20 | {({ geographies }) => 21 | geographies.map(geo => ( 22 | 23 | )) 24 | } 25 | 26 | 27 | 28 |
29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Modal/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ModalsExample from "./Examples"; 7 | 8 | export default class ModalsExamples extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { CSSTransition, TransitionGroup } from 'react-transition-group'; 3 | 4 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 5 | 6 | 7 | // Examples 8 | import BasicPagination from "./Examples/Basic"; 9 | 10 | export default class PaginationExamples extends React.Component { 11 | render() { 12 | return ( 13 | 14 | 15 | 17 |
18 | 21 | 22 |
23 | 24 | 25 | 26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/Progress.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressExample = (props) => { 5 | return ( 6 |
7 |
0%
8 | 9 |
25%
10 | 11 |
50%
12 | 13 |
75%
14 | 15 |
100%
16 | 17 |
Multiple bars
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | ); 27 | }; 28 | 29 | export default ProgressExample; 30 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/ProgressColor.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressColorExample = (props) => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 | ); 14 | }; 15 | 16 | export default ProgressColorExample; 17 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/ProgressLabels.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressLabelsExample = (props) => { 5 | return ( 6 |
7 | 8 | 25% 9 | 10 | 11 | 1/2 12 | 13 | 14 | You're almost there! 15 | 16 | 17 | You did it! 18 | 19 | 20 | 21 | Meh 22 | 23 | 24 | Wow! 25 | 26 | 27 | Cool 28 | 29 | 30 | 20% 31 | 32 | 33 | !! 34 | 35 | 36 |
37 | ); 38 | }; 39 | 40 | export default ProgressLabelsExample; 41 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/ProgressMax.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressMaxExample = (props) => { 5 | return ( 6 |
7 |
1 of 5
8 | 9 |
50 of 135
10 | 11 |
75 of 111
12 | 13 |
463 of 500
14 | 15 |
Various (40) of 55
16 | 17 | 18 | 5 19 | 20 | 21 | 15 22 | 23 | 24 | 10 25 | 26 | 27 | 10 28 | 29 | 30 |
31 | ); 32 | }; 33 | 34 | export default ProgressMaxExample; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/ProgressRounded.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressRoundedExample = (props) => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | ); 21 | }; 22 | 23 | export default ProgressRoundedExample; 24 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ProgressBar/Examples/Basic/ProgressStriped.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Progress } from "reactstrap"; 3 | 4 | const ProgressStripedExample = (props) => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | }; 21 | 22 | export default ProgressStripedExample; 23 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Ratings/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import RatingsBasicExample from "./Examples/Basic"; 7 | 8 | export default class RatingsExample extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/ScrollableElements/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ScrollableElements from "./Examples/index"; 7 | 8 | export default class ScrollableExamples extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/StickyElements/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import StickyElements from "./Examples/index"; 7 | 8 | export default class StickyElementsExamples extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Components/Tabs/Examples/dummyData.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | 3 | export const presidents = [ 4 | { 5 | name: "George Washington", 6 | biography: 7 | "George Washington (February 22, 1732 – December 14, 1799) was the first President of the United States...", 8 | }, 9 | { 10 | name: "Thomas Jefferson", 11 | biography: 12 | "Thomas Jefferson (April 13 1743 – July 4, 1826) was an American lawyer", 13 | }, 14 | { 15 | name: "Abraham Lincoln", 16 | biography: 17 | "Abraham Lincoln (February 12, 1809 – April 15, 1865) was the 16th President of the United States", 18 | }, 19 | ]; 20 | 21 | export default presidents; 22 | -------------------------------------------------------------------------------- /src/DemoPages/Components/TooltipsPopovers/Examples/Popovers/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Container, Col, Card, CardBody, CardTitle, Row } from "reactstrap"; 3 | 4 | import PopoversBasicExample from "./Basic"; 5 | import PopoversCustomExample from "./Custom"; 6 | 7 | const PopoversExample = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | Popovers Alignments 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Custom 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default PopoversExample; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Components/TooltipsPopovers/Examples/Tooltips/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Row, Col, Card, CardBody, CardTitle, Container } from "reactstrap"; 3 | 4 | import TooltipExampleDark from "./TooltipDark"; 5 | import TooltipExampleLight from "./TooltipLight"; 6 | 7 | const TooltipsExample = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | Dark Tooltips 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Light Tooltips 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default TooltipsExample; 35 | -------------------------------------------------------------------------------- /src/DemoPages/Components/TreeView/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | import { CSSTransition, TransitionGroup } from 'react-transition-group'; 3 | 4 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 5 | 6 | import { Row, Col, Card, CardBody, CardTitle } from "reactstrap"; 7 | 8 | class TreeView extends Component { 9 | constructor(props) { 10 | super(props); 11 | 12 | this.state = { 13 | // treeData: treeData, 14 | }; 15 | } 16 | 17 | render() { 18 | return ( 19 | 20 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | Basic 31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | 44 | export default TreeView; 45 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/Cards/Examples/dummyData.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | 3 | export const presidents = [ 4 | { 5 | name: "George Washington", 6 | biography: 7 | "George Washington (February 22, 1732 – December 14, 1799) was the first President of the United States...", 8 | }, 9 | { 10 | name: "Thomas Jefferson", 11 | biography: 12 | "Thomas Jefferson (April 13 1743 – July 4, 1826) was an American lawyer", 13 | }, 14 | { 15 | name: "Abraham Lincoln", 16 | biography: 17 | "Abraham Lincoln (February 12, 1809 – April 15, 1865) was the 16th President of the United States", 18 | }, 19 | ]; 20 | 21 | export default presidents; 22 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroup.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem } from "reactstrap"; 3 | 4 | export default class ListGroupDefault extends React.Component { 5 | render() { 6 | return ( 7 | 8 | Cras justo odio 9 | Dapibus ac facilisis in 10 | Morbi leo risus 11 | Porta ac consectetur ac 12 | Vestibulum at eros 13 | 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupAnchorsAndButtons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem } from "reactstrap"; 3 | 4 | export default class ListGroupAnchorsAndButtons extends React.Component { 5 | render() { 6 | return ( 7 |
8 | 9 | 10 | Cras justo odio 11 | 12 | 13 | Dapibus ac facilisis in 14 | 15 | 16 | Morbi leo risus 17 | 18 | 19 | Porta ac consectetur ac 20 | 21 | 22 | Vestibulum at eros 23 | 24 | 25 |
26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupBadge.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem, Badge } from "reactstrap"; 3 | 4 | export default class ListGroupBadge extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | Cras justo odio 14{" "} 10 | 11 | 12 | Dapibus ac facilisis in 2{" "} 13 | 14 | 15 | Morbi leo risus 1{" "} 16 | 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupContextualClasses.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem } from "reactstrap"; 3 | 4 | export default class ListGroupContextualClasses extends React.Component { 5 | render() { 6 | return ( 7 | 8 | Cras justo odio 9 | Dapibus ac facilisis in 10 | Morbi leo risus 11 | Porta ac consectetur ac 12 | 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupCustomContent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | ListGroup, 4 | ListGroupItem, 5 | ListGroupItemHeading, 6 | ListGroupItemText, 7 | } from "reactstrap"; 8 | 9 | export default class ListGroupCustomContent extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 14 | List group item heading 15 | 16 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam 17 | eget risus varius blandit. 18 | 19 | 20 | 21 | List group item heading 22 | 23 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam 24 | eget risus varius blandit. 25 | 26 | 27 | 28 | List group item heading 29 | 30 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam 31 | eget risus varius blandit. 32 | 33 | 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupDisabledItems.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem } from "reactstrap"; 3 | 4 | export default class ListGroupDisabledItems extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | Cras justo odio 10 | 11 | 12 | Dapibus ac facilisis in 13 | 14 | 15 | Morbi leo risus 16 | 17 | 18 | Porta ac consectetur ac 19 | 20 | 21 | Vestibulum at eros 22 | 23 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ListGroup/Examples/Basic/ListGroupFlush.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ListGroup, ListGroupItem } from "reactstrap"; 3 | 4 | export default class ListGroupFlush extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | Cras justo odio 10 | 11 | 12 | Dapibus ac facilisis in 13 | 14 | 15 | Morbi leo risus 16 | 17 | 18 | Porta ac consectetur ac 19 | 20 | 21 | Vestibulum at eros 22 | 23 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/ScreenVisibility/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | import { Row, Col, Card, CardBody, CardTitle } from "reactstrap"; 6 | 7 | import FadeVisibility from "./Examples/Fade"; 8 | 9 | export default class ScreenVisibilityExamples extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | 19 | 20 | Fade Animation 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/Utilities/Examples/ColorStates/TextColor.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | const TextColor = () => { 4 | return ( 5 | 6 |

7 | Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. 8 |

9 |

10 | Nullam id dolor id nibh ultricies vehicula ut id elit. 11 |

12 |

13 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula. 14 |

15 |

16 | Maecenas sed diam eget risus varius blandit sit amet non magna. 17 |

18 |

19 | Etiam porta sem malesuada magna mollis euismod. 20 |

21 |

22 | Donec ullamcorper nulla non metus auctor fringilla. 23 |

24 |

25 | Etiam porta sem malesuada ultricies vehicula. 26 |

27 | 28 | ); 29 | }; 30 | 31 | export default TextColor; 32 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/Utilities/Examples/Helpers/Breadcrumb.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Breadcrumb, BreadcrumbItem } from "reactstrap"; 3 | 4 | const BreadcrumbExample = (props) => { 5 | return ( 6 |
7 | 8 | Home 9 | 10 | 11 | 12 | e.preventDefault()}> 13 | Home 14 | {" "} 15 | 16 | Library 17 | 18 | 19 | 20 | e.preventDefault()}> 21 | Home 22 | {" "} 23 | 24 | 25 | e.preventDefault()}> 26 | Library 27 | {" "} 28 | 29 | Data 30 | 31 |
32 | ); 33 | }; 34 | 35 | export default BreadcrumbExample; 36 | -------------------------------------------------------------------------------- /src/DemoPages/Elements/Utilities/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import UtilitiesColors from "./Examples/ColorStates"; 7 | import UtilitiesHelpers from "./Examples/Helpers"; 8 | 9 | export default class UtilitiesExamples extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example1.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { InputGroup } from "reactstrap"; 4 | 5 | import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | import DatePicker from "react-datepicker"; 10 | 11 | class FormDatePicker1 extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | startDate: new Date(), 16 | }; 17 | this.handleChange = this.handleChange.bind(this); 18 | } 19 | 20 | handleChange(date) { 21 | this.setState({ 22 | startDate: date, 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | ); 37 | } 38 | } 39 | 40 | export default FormDatePicker1; 41 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example2.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { InputGroup, } from "reactstrap"; 4 | 5 | import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | import DatePicker from "react-datepicker"; 10 | 11 | class FormDatePicker2 extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | startDate: new Date(), 16 | }; 17 | this.handleChange = this.handleChange.bind(this); 18 | } 19 | 20 | handleChange(date) { 21 | this.setState({ 22 | startDate: date, 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 | 32 |
33 | 34 |
35 | 36 | 37 | ); 38 | } 39 | } 40 | 41 | export default FormDatePicker2; 42 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example3.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { InputGroup } from "reactstrap"; 4 | 5 | import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | import DatePicker from "react-datepicker"; 10 | 11 | class FormDatePicker3 extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | startDate: new Date(), 16 | }; 17 | this.handleChange = this.handleChange.bind(this); 18 | } 19 | 20 | handleChange(date) { 21 | this.setState({ 22 | startDate: date, 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 |
31 | 32 |
33 | 35 | 36 | 37 | ); 38 | } 39 | } 40 | 41 | export default FormDatePicker3; 42 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example4.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { InputGroup } from "reactstrap"; 4 | 5 | import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | import DatePicker from "react-datepicker"; 10 | 11 | class FormDatePicker4 extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | startDate: new Date(), 16 | }; 17 | this.handleChange = this.handleChange.bind(this); 18 | } 19 | 20 | handleChange(date) { 21 | this.setState({ 22 | startDate: date, 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | ); 37 | } 38 | } 39 | 40 | export default FormDatePicker4; 41 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example5.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import DatePicker from "react-datepicker"; 4 | import addDays from "date-fns/addDays"; 5 | 6 | class FormDatePicker5 extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | startDate: null, 11 | }; 12 | this.handleChange = this.handleChange.bind(this); 13 | } 14 | 15 | handleChange(date) { 16 | this.setState({ 17 | startDate: date, 18 | }); 19 | } 20 | 21 | render() { 22 | return ( 23 | 24 | 32 | 33 | ); 34 | } 35 | } 36 | 37 | export default FormDatePicker5; 38 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example7.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import { InputGroup } from "reactstrap"; 4 | 5 | import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | import DatePicker from "react-datepicker"; 10 | 11 | class FormDatePicker4 extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | startDate: new Date(), 16 | }; 17 | this.handleChange = this.handleChange.bind(this); 18 | } 19 | 20 | handleChange(date) { 21 | this.setState({ 22 | startDate: date, 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 |
31 | 32 |
33 | 35 | 36 | 37 | ); 38 | } 39 | } 40 | 41 | export default FormDatePicker4; 42 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DatePicker/Examples/example8.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import DatePicker from "react-datepicker"; 4 | 5 | class FormDatePicker8 extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | startDate: new Date(), 10 | }; 11 | this.handleChange = this.handleChange.bind(this); 12 | } 13 | 14 | handleChange(date) { 15 | this.setState({ 16 | startDate: date, 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 | 23 |
24 | 26 |
27 | 28 | ); 29 | } 30 | } 31 | 32 | export default FormDatePicker8; 33 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/DropZone/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { CSSTransition, TransitionGroup } from 'react-transition-group'; 3 | import { Row, Col, Card, CardBody, CardTitle } from "reactstrap"; 4 | 5 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 6 | 7 | // Examples 8 | 9 | import FormDropZoneExample1 from "./Examples/example1"; 10 | 11 | class FormDropZone extends React.Component { 12 | render() { 13 | return ( 14 | 15 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | Basic 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | export default FormDropZone; 39 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/InputMask/index.js: -------------------------------------------------------------------------------- 1 | import React, {Fragment} from 'react' 2 | import { CSSTransition, TransitionGroup } from 'react-transition-group'; 3 | 4 | import PageTitle from '../../../../Layout/AppMain/PageTitle'; 5 | 6 | // Examples 7 | 8 | import FormInputMaskExample from './Examples/example1'; 9 | 10 | class FormInputMask extends React.Component { 11 | 12 | render() { 13 | return ( 14 | 15 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | ) 28 | } 29 | } 30 | 31 | export default FormInputMask; -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/MultiSelect/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormMultiSelectBasic from "./Examples/ReactSelect/"; 8 | import FormDropdownSelectBasic from "./Examples/DropdownSelect/"; 9 | import FormMultiSelectWidget from "./Examples/Multiselect/"; 10 | import FormSelectListBasic from "./Examples/SelectList/"; 11 | import FormComboBoxBasic from "./Examples/ComboBox/"; 12 | 13 | class FormMultiSelect extends React.Component { 14 | render() { 15 | return ( 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | } 29 | 30 | export default FormMultiSelect; 31 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/NumberPicker/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormNumberPicker from "./Examples/NumberPicker"; 8 | import FormNumbericInput from "./Examples/NumericInput"; 9 | 10 | class FormsNumberPickerExamples extends React.Component { 11 | render() { 12 | return ( 13 | 14 | 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | export default FormsNumberPickerExamples; 25 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/RangeSlider/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormRangeSliderBasic from "./Examples/Basic/"; 8 | import FormRangeSliderStyles from "./Examples/Styles/"; 9 | import FormRangeSliderVertical from "./Examples/Vertical/"; 10 | 11 | class FormRangeSlider extends React.Component { 12 | render() { 13 | return ( 14 | 15 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default FormRangeSlider; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/ToggleSwitch/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormToggleSwitchExample from "./Examples/Basic/"; 8 | 9 | class FormToggleSwitch extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | export default FormToggleSwitch; 23 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Components/WysiwygEditor/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormCkEditorEditor from "./Examples/CkEditor"; 8 | 9 | export default class FormWysiwygEditor extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 |
17 | 18 |
19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Controls/Examples/InputGroup/InputGroupAddon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InputGroup, InputGroupText, Input } from "reactstrap"; 3 | 4 | const FormInputGroupAddon = (props) => { 5 | return ( 6 |
7 | 8 | To the Left! 9 | 10 | 11 |
12 | 13 | 14 | To the Right! 15 | 16 |
17 | 18 | To the Left! 19 | 20 | To the Right! 21 | 22 |
23 | ); 24 | }; 25 | 26 | export default FormInputGroupAddon; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Controls/Examples/InputGroup/InputGroupButtonDropdown.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { 3 | Dropdown, 4 | InputGroup, 5 | Input, 6 | DropdownToggle, 7 | DropdownMenu, 8 | DropdownItem, 9 | } from "reactstrap"; 10 | 11 | class FormInputGroupButtonDropdown extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | 15 | this.toggle = this.toggle.bind(this); 16 | this.state = { 17 | dropdownOpen: false, 18 | }; 19 | } 20 | 21 | toggle() { 22 | this.setState({ 23 | dropdownOpen: !this.state.dropdownOpen, 24 | }); 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | 31 | 32 | Button Dropdown 33 | 34 | Header 35 | Action 36 | Another Action 37 | 38 | Another Action 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | } 47 | 48 | export default FormInputGroupButtonDropdown; 49 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Controls/Examples/InputGroup/InputGroupButtonShorthand.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InputGroup, Button, Input } from "reactstrap"; 3 | 4 | const FormInputGroupButtonShorthand = (props) => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 | ); 24 | }; 25 | 26 | export default FormInputGroupButtonShorthand; 27 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Controls/Examples/InputGroup/InputGroupOverview.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InputGroup, InputGroupText, Input } from "reactstrap"; 3 | 4 | const FormInputGroupOverview = (props) => { 5 | return ( 6 |
7 | 8 | @ 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | @example.com 22 | 23 |
24 | 25 | $ 26 | $ 27 | 28 | $ 29 | $ 30 | 31 |
32 | 33 | $ 34 | 35 | .00 36 | 37 |
38 | ); 39 | }; 40 | 41 | export default FormInputGroupOverview; 42 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Controls/Examples/InputGroup/InputGroupSizing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InputGroup, Input, InputGroupText } from "reactstrap"; 3 | 4 | const FormInputGroupSizing = (props) => { 5 | return ( 6 |
7 | 8 | @lg 9 | 10 | 11 |
12 | 13 | @normal 14 | 15 | 16 |
17 | 18 | @sm 19 | 20 | 21 |
22 | ); 23 | }; 24 | 25 | export default FormInputGroupSizing; 26 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/StickyHeaders/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | 7 | import FormStickyBasic from "./Examples/Basic"; 8 | 9 | class FormElementsSticky extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | export default FormElementsSticky; 23 | -------------------------------------------------------------------------------- /src/DemoPages/Forms/Elements/Wizard/Examples/Steps/Step4.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Button } from "reactstrap"; 3 | 4 | export default class WizardStep4 extends React.Component { 5 | render() { 6 | return ( 7 | 8 |
9 |
10 |
11 | 12 | 13 |
14 |
15 |
16 |
Finished!
17 |
18 | You arrived at the last form wizard step! 19 |
20 |
21 |
22 | 25 |
26 |
27 |
28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/DataTables/Examples/utils.js: -------------------------------------------------------------------------------- 1 | import namor from "namor"; 2 | 3 | const range = (len) => { 4 | const arr = []; 5 | for (let i = 0; i < len; i++) { 6 | arr.push(i); 7 | } 8 | return arr; 9 | }; 10 | 11 | const newPerson = () => { 12 | const statusChance = Math.random(); 13 | return { 14 | firstName: namor.generate({ words: 1}), 15 | lastName: namor.generate({ words: 1 }), 16 | age: Math.floor(Math.random() * 30), 17 | visits: Math.floor(Math.random() * 100), 18 | progress: Math.floor(Math.random() * 100), 19 | status: 20 | statusChance > 0.66 21 | ? "relationship" 22 | : statusChance > 0.33 23 | ? "complicated" 24 | : "single", 25 | }; 26 | }; 27 | 28 | export function makeData(len = 5553) { 29 | return range(len).map((d) => { 30 | return { 31 | ...newPerson(), 32 | children: range(10).map(newPerson), 33 | }; 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/Table.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableExample extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableBordered.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableBordered extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableBorderless.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableBorderless extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableDark.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableDark extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableHover.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableHover extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableSizing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableSizing extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/RegularTables/Examples/TableStriped.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Table } from "reactstrap"; 3 | 4 | export default class TableStriped extends React.Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/DemoPages/Tables/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Route } from "react-router-dom"; 3 | 4 | // Tables 5 | 6 | import DataTableBasic from "./DataTables/Examples/Basic"; 7 | import DataTableFixedHeader from "./DataTables/Examples/FixedHeader"; 8 | import DataTablePivoting from "./DataTables/Examples/Pivoting"; 9 | import RegularTables from "./RegularTables"; 10 | 11 | // Layout 12 | 13 | import AppHeader from "../../Layout/AppHeader/"; 14 | import AppSidebar from "../../Layout/AppSidebar/"; 15 | import AppFooter from "../../Layout/AppFooter/"; 16 | 17 | // Theme Options 18 | 19 | import ThemeOptions from "../../Layout/ThemeOptions/"; 20 | 21 | const Tables = ({ match }) => ( 22 | 23 | 24 | 25 |
26 | 27 |
28 |
29 | {/* Tables */} 30 | 31 | 32 | 33 | 34 | 35 |
36 | 37 |
38 |
39 | 40 | ); 41 | 42 | export default Tables; 43 | -------------------------------------------------------------------------------- /src/DemoPages/UserPages/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import { Route } from "react-router-dom"; 3 | 4 | // USER PAGES 5 | 6 | import Login from "./Login/"; 7 | import LoginBoxed from "./LoginBoxed/"; 8 | 9 | import Register from "./Register/"; 10 | import RegisterBoxed from "./RegisterBoxed/"; 11 | 12 | import ForgotPassword from "./ForgotPassword/"; 13 | import ForgotPasswordBoxed from "./ForgotPasswordBoxed/"; 14 | 15 | const UserPages = ({ match }) => ( 16 | 17 |
18 | {/* User Pages */} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | ); 29 | 30 | export default UserPages; 31 | -------------------------------------------------------------------------------- /src/DemoPages/Widgets/ChartBoxes3/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import Basic3Example from "./Examples/Basic"; 7 | 8 | export default class WidgetsContentBoxes extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Widgets/ContentBoxes/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import BasicExample from "./Examples/Basic"; 7 | 8 | export default class WidgetsContentBoxes extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/DemoPages/Widgets/ProfileBoxes/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import PageTitle from "../../../Layout/AppMain/PageTitle"; 4 | 5 | // Examples 6 | import ListBoxes from "./Examples/ListBoxes"; 7 | import ProfileBlocks from "./Examples/ProfileBlocks"; 8 | 9 | export default class WidgetsProfileBoxes extends React.Component { 10 | render() { 11 | return ( 12 | 13 | 16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/Layout/AppFooter/Components/TabsContent/SystemExample.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | import PerfectScrollbar from "react-perfect-scrollbar"; 3 | 4 | class SysErrEx extends Component { 5 | render() { 6 | return ( 7 | 8 |
9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 |
17 |
All caught up!
18 |
There are no system errors!
19 |
20 | 21 |
22 | 23 | ); 24 | } 25 | } 26 | 27 | export default SysErrEx; 28 | -------------------------------------------------------------------------------- /src/Layout/AppFooter/index.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import MegaMenuFooter from "./Components/FooterMegaMenu"; 3 | import FooterDots from "./Components/FooterDots"; 4 | 5 | class AppFooter extends React.Component { 6 | render() { 7 | return ( 8 | 9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 |
19 | 20 | ); 21 | } 22 | } 23 | 24 | export default AppFooter; 25 | -------------------------------------------------------------------------------- /src/Layout/AppHeader/Components/SearchBox.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | import cx from "classnames"; 4 | 5 | class SearchBox extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | activeSearch: false, 11 | }; 12 | } 13 | 14 | render() { 15 | return ( 16 | 17 |
20 |
21 | 22 | 28 |
29 |
34 | 35 | ); 36 | } 37 | } 38 | 39 | export default SearchBox; 40 | -------------------------------------------------------------------------------- /src/Layout/AppMain/PageTitleAlt3Examples/Variation3.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import { Breadcrumb, BreadcrumbItem } from "reactstrap"; 4 | 5 | import { faHome } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | export default class TitleComponent3 extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | e.preventDefault()}> 16 | 17 | 18 | 19 | 20 | e.preventDefault()}> 21 | Dashboards 22 | 23 | 24 | Minimal Dashboard Example 25 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/Layout/AppMain/PageTitleAlt3Examples/Variation4.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import { ButtonGroup, Button } from "reactstrap"; 4 | 5 | export default class TitleComponent4 extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | 13 | 16 | 19 | 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/Layout/AppMain/PageTitleExamples/Variation1.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import { Button, UncontrolledTooltip } from "reactstrap"; 4 | 5 | import { toast, Slide } from "react-toastify"; 6 | 7 | import { faBatteryThreeQuarters } from "@fortawesome/free-solid-svg-icons"; 8 | 9 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 10 | 11 | export default class TitleComponent1 extends Component { 12 | state = { 13 | expZoomIn: false, 14 | }; 15 | 16 | toggle(name) { 17 | this.setState({ 18 | [name]: !this.state[name], 19 | progress: 0.5, 20 | }); 21 | } 22 | 23 | notify22 = () => 24 | (this.toastId = toast("You can add whatever element in this section.", { 25 | transition: Slide, 26 | closeButton: true, 27 | autoClose: 5000, 28 | position: "bottom-center", 29 | type: "default", 30 | })); 31 | 32 | render() { 33 | return ( 34 | 35 | 38 | 39 | Show a Toastify notification example! 40 | 41 | 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/Layout/AppMain/PageTitleExamples/Variation3.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | 3 | import { Breadcrumb, BreadcrumbItem } from "reactstrap"; 4 | 5 | import { faHome } from "@fortawesome/free-solid-svg-icons"; 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 8 | 9 | export default class TitleComponent3 extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | e.preventDefault()}> 16 | 17 | 18 | 19 | 20 | e.preventDefault()}> 21 | Dashboards 22 | 23 | 24 | Example Breadcrumb 25 | 26 | 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/applications/_chat.scss: -------------------------------------------------------------------------------- 1 | // Chat 2 | $app-layout-chat-sidebar-width: 360px; 3 | 4 | .chat-layout { 5 | &.app-inner-layout { 6 | .app-inner-layout__sidebar { 7 | width: $app-layout-chat-sidebar-width; 8 | flex: 0 0 $app-layout-chat-sidebar-width; 9 | } 10 | } 11 | 12 | .app-inner-layout__top-pane h4 { 13 | font-size: $h5-font-size; 14 | 15 | div { 16 | font-size: $font-size-base; 17 | } 18 | } 19 | 20 | .chat-box-wrapper { 21 | padding: $layout-spacer-x; 22 | } 23 | } 24 | 25 | @include media-breakpoint-down(lg) { 26 | .chat-layout { 27 | &.app-inner-layout { 28 | .app-inner-layout__sidebar { 29 | .widget-content .widget-content-left .widget-subheading { 30 | white-space: normal; 31 | } 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /src/assets/applications/_responsive.scss: -------------------------------------------------------------------------------- 1 | // Responsive Applications 2 | 3 | @include media-breakpoint-down(md) { 4 | .app-inner-layout__sidebar { 5 | display: none !important; 6 | } 7 | 8 | .mobile-app-menu-btn { 9 | display: block; 10 | } 11 | 12 | .open-mobile-menu { 13 | 14 | .app-inner-layout__sidebar { 15 | display: block !important; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/assets/components/block-loading/_block-loading.scss: -------------------------------------------------------------------------------- 1 | .loading-indicator { 2 | text-align: center; 3 | } 4 | 5 | .loading-bullet { 6 | display: inline-block; 7 | opacity: 0; 8 | font-size: 2em; 9 | color: #02a17c; 10 | } 11 | 12 | .block-ui { 13 | position: relative; 14 | min-height: 3em; 15 | } 16 | 17 | .block-ui-container { 18 | position: absolute; 19 | z-index: 1010; 20 | top: 0; 21 | right: 0; 22 | bottom: 0; 23 | left: 0; 24 | height: 100%; 25 | min-height: 2em; 26 | cursor: wait; 27 | overflow: hidden; 28 | } 29 | 30 | .block-ui-container:focus { 31 | outline: none; 32 | } 33 | 34 | .block-ui-overlay { 35 | width: 100%; 36 | height: 100%; 37 | opacity: 0.5; 38 | filter: alpha(opacity=50); 39 | background-color: white; 40 | } 41 | 42 | .block-ui-message-container { 43 | position: absolute; 44 | top: 50%; 45 | left: 0; 46 | width: 100%; 47 | right: 0; 48 | text-align: center; 49 | transform: translateY(-50%); 50 | z-index: 10001; 51 | } 52 | 53 | .block-ui-message { 54 | color: #333; 55 | background: none; 56 | z-index: 1011; 57 | 58 | display: flex; 59 | align-items: center; 60 | justify-content: center; 61 | } 62 | 63 | .block-overlay-dark { 64 | .block-ui-overlay { 65 | background: rgba(0,0,0,1); 66 | } 67 | } -------------------------------------------------------------------------------- /src/assets/components/calendar/scss/_agenda.scss: -------------------------------------------------------------------------------- 1 | 2 | .rbc-agenda-view { 3 | display: flex; 4 | flex-direction: column; 5 | flex: 1 0 0; 6 | overflow: auto; 7 | 8 | table { 9 | width: 100%; 10 | border: 1px solid $cell-border; 11 | 12 | tbody > tr > td { 13 | padding: 5px 10px; 14 | vertical-align: top; 15 | 16 | } 17 | 18 | .rbc-agenda-time-cell { 19 | padding-left: 15px; 20 | padding-right: 15px; 21 | text-transform: lowercase; 22 | } 23 | 24 | tbody > tr > td + td { 25 | border-left: 1px solid $cell-border; 26 | } 27 | 28 | .rbc-rtl & { 29 | tbody > tr > td + td { 30 | border-left-width: 0; 31 | border-right: 1px solid $cell-border; 32 | } 33 | } 34 | 35 | tbody > tr + tr { 36 | border-top: 1px solid $cell-border; 37 | } 38 | 39 | thead > tr > th { 40 | padding: 3px 5px; 41 | text-align: left; 42 | border-bottom: 1px solid $cell-border; 43 | 44 | .rbc-rtl & { 45 | text-align: right; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .rbc-agenda-time-cell { 52 | text-transform: lowercase; 53 | 54 | .rbc-continues-after:after { 55 | content: ' »' 56 | } 57 | .rbc-continues-prior:before { 58 | content: '« ' 59 | } 60 | } 61 | 62 | .rbc-agenda-date-cell, 63 | .rbc-agenda-time-cell { 64 | white-space: nowrap; 65 | } 66 | 67 | 68 | 69 | .rbc-agenda-event-cell { 70 | width: 100% 71 | } 72 | -------------------------------------------------------------------------------- /src/assets/components/calendar/scss/_event.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .rbc-event { 4 | cursor: pointer; 5 | padding: $event-padding; 6 | background-color: $event-bg; 7 | border-radius: $event-border-radius; 8 | color: $event-color; 9 | 10 | &.rbc-selected { 11 | background-color: shade-color($event-bg, 10%); 12 | } 13 | } 14 | 15 | .rbc-event-label { 16 | @extend .rbc-ellipsis; 17 | font-size: 80%; 18 | } 19 | 20 | .rbc-event-overlaps { 21 | box-shadow: -1px 1px 5px 0px rgba(51,51,51,.5); 22 | } 23 | 24 | .rbc-event-continues-prior { 25 | border-top-left-radius: 0; 26 | border-bottom-left-radius: 0; 27 | } 28 | .rbc-event-continues-after { 29 | border-top-right-radius: 0; 30 | border-bottom-right-radius: 0; 31 | } 32 | 33 | 34 | .rbc-event-continues-earlier { 35 | border-top-left-radius: 0; 36 | border-top-right-radius: 0; 37 | } 38 | .rbc-event-continues-later { 39 | border-bottom-left-radius: 0; 40 | border-bottom-right-radius: 0; 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/components/calendar/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | .rbc-btn { 2 | color: inherit; 3 | font: inherit; 4 | margin: 0; 5 | } 6 | 7 | button.rbc-btn { 8 | overflow: visible; 9 | text-transform: none; 10 | -webkit-appearance: button; 11 | cursor: pointer; 12 | } 13 | 14 | button[disabled].rbc-btn { 15 | cursor: not-allowed; 16 | } 17 | 18 | button.rbc-input::-moz-focus-inner { 19 | border: 0; 20 | padding: 0; 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/components/calendar/scss/_time-column.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | 4 | .rbc-time-column { 5 | display: flex; 6 | flex-direction: column; 7 | min-height: 100%; 8 | 9 | .rbc-timeslot-group { 10 | flex: 1; 11 | } 12 | } 13 | 14 | 15 | .rbc-timeslot-group { 16 | border-bottom: 1px solid $cell-border; 17 | min-height: 40px; 18 | display: flex; 19 | flex-flow: column nowrap; 20 | } 21 | 22 | .rbc-time-gutter, 23 | .rbc-header-gutter { 24 | flex: none; 25 | } 26 | 27 | .rbc-label { 28 | padding: 0 5px; 29 | } 30 | 31 | .rbc-day-slot { 32 | position: relative; 33 | 34 | .rbc-event { 35 | border: 1px solid $event-border; 36 | display: flex; 37 | max-height: 100%; 38 | flex-flow: column wrap; 39 | align-items: flex-start; 40 | overflow: hidden; 41 | } 42 | 43 | .rbc-event-label { 44 | flex: none; 45 | padding-right: 5px; 46 | width: auto; 47 | } 48 | 49 | .rbc-event-content { 50 | width: 100%; 51 | flex: 1 1 0; 52 | word-wrap: break-word; 53 | line-height: 1; 54 | height: 100%; 55 | min-height: 1em; 56 | } 57 | 58 | .rbc-time-slot { 59 | border-top: 1px solid tint-color($cell-border, 10%); 60 | } 61 | } 62 | 63 | .rbc-time-slot { 64 | flex: 1 0 0; 65 | 66 | &.rbc-now { 67 | font-weight: bold; 68 | } 69 | } 70 | 71 | .rbc-day-header { 72 | text-align: center; 73 | } 74 | 75 | .rbc-day-slot .rbc-event { 76 | position: absolute; 77 | z-index: 2; 78 | } 79 | -------------------------------------------------------------------------------- /src/assets/components/calendar/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | @use "sass:math"; 3 | 4 | $out-of-range-color: tint-color(#333, 50%); 5 | 6 | $calendar-border: $gray-200; 7 | $cell-border: $gray-200; 8 | 9 | $border-color: $gray-300; 10 | 11 | $segment-width: percentage(math.div(1, 7)); 12 | 13 | $time-selection-color: #white; 14 | $time-selection-bg-color: rgba(0,0,0, .50); 15 | $date-selection-bg-color: rgba(0,0,0, .10); 16 | 17 | 18 | $event-bg: $primary; 19 | $event-border: shade-color($event-bg, 10%); 20 | $event-color: $white; 21 | $event-border-radius: $border-radius; 22 | $event-padding: $dropdown-spacer; 23 | $event-zindex: 4; 24 | 25 | $btn-color: $white; 26 | $btn-bg: $primary; 27 | $btn-border: $primary; 28 | 29 | $current-time-color: $success; 30 | 31 | $rbc-css-prefix: rbc-i; 32 | 33 | $today-highlight-bg: $dropdown-link-hover-bg; 34 | -------------------------------------------------------------------------------- /src/assets/components/drawer/_drawer.scss: -------------------------------------------------------------------------------- 1 | // Drawers 2 | 3 | @use "sass:math"; 4 | 5 | .drawer-content-wrapper { 6 | background: $white; 7 | position: relative; 8 | padding: $layout-spacer-x; 9 | 10 | .drawer-heading { 11 | font-size: $font-size-sm; 12 | color: $body-color; 13 | margin: 0; 14 | background: $gray-100; 15 | padding: math.div($layout-spacer-x, 2) $layout-spacer-x; 16 | border-bottom: $gray-300 solid 1px; 17 | border-top: $gray-300 solid 1px; 18 | 19 | &:first-child { 20 | border-top: 0; 21 | } 22 | } 23 | 24 | .drawer-section { 25 | padding: $layout-spacer-x; 26 | } 27 | 28 | & > .app-sidebar__heading:first-child { 29 | margin-top: 0; 30 | } 31 | } 32 | 33 | .drawer-nav-btn { 34 | @include border-radius(30px); 35 | background: $white; 36 | position: fixed; 37 | right: math.div($layout-spacer-x, 2); 38 | top: math.div($layout-spacer-x, 2); 39 | padding: math.div($layout-spacer-x, 3); 40 | box-shadow: $box-shadow-sm; 41 | z-index: 20; 42 | 43 | .hamburger { 44 | margin-top: 4px; 45 | } 46 | } -------------------------------------------------------------------------------- /src/assets/components/forms/datepicker/_mixins.scss: -------------------------------------------------------------------------------- 1 | %triangle-arrow { 2 | margin-left: -$datepicker__triangle-size; 3 | position: absolute; 4 | 5 | &, 6 | &::before { 7 | box-sizing: content-box; 8 | position: absolute; 9 | border: $datepicker__triangle-size solid transparent; 10 | 11 | height: 0; 12 | width: 1px; 13 | } 14 | 15 | &::before { 16 | content: ""; 17 | z-index: -1; 18 | border-width: $datepicker__triangle-size; 19 | 20 | left: -$datepicker__triangle-size; 21 | border-bottom-color: $datepicker__border-color; 22 | } 23 | } 24 | 25 | %triangle-arrow-up { 26 | @extend %triangle-arrow; 27 | 28 | top: 0; 29 | margin-top: -$datepicker__triangle-size; 30 | 31 | &, 32 | &::before { 33 | border-top: none; 34 | border-bottom-color: $datepicker__background-color; 35 | } 36 | 37 | &::before { 38 | top: -1px; 39 | border-bottom-color: $datepicker__border-color; 40 | } 41 | } 42 | 43 | %triangle-arrow-down { 44 | @extend %triangle-arrow; 45 | 46 | bottom: 0; 47 | margin-bottom: -$datepicker__triangle-size; 48 | 49 | &, 50 | &::before { 51 | border-bottom: none; 52 | border-top-color: #fff; 53 | } 54 | 55 | &::before { 56 | bottom: -1px; 57 | border-top-color: $datepicker__border-color; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/components/forms/datepicker/_variables.scss: -------------------------------------------------------------------------------- 1 | // Datepicker 2 | 3 | $datepicker__background-color: $white; 4 | $datepicker__border-color: $gray-300; 5 | $datepicker__highlighted-color: map-get($theme-colors, 'primary'); 6 | $datepicker__holidays-color: $orange; 7 | $datepicker__muted-color: $gray-400; 8 | $datepicker__selected-color: map-get($theme-colors, 'primary'); 9 | $datepicker__text-color: $gray-700; 10 | $datepicker__header-color: $gray-800; 11 | $datepicker__navigation-disabled-color: shade-color($datepicker__muted-color, 5%) 12 | ; 13 | 14 | $datepicker__border-radius: $border-radius; 15 | $datepicker__day-margin: 0.166rem; 16 | $datepicker__font-size: $font-size-base; 17 | $datepicker__font-family: $font-family-base; 18 | $datepicker__item-size: 2rem; 19 | $datepicker__margin: 0.5rem; 20 | $datepicker__navigation-size: 0.35rem; 21 | $datepicker__triangle-size: 6px; -------------------------------------------------------------------------------- /src/assets/components/forms/dropzone/_dropzone.scss: -------------------------------------------------------------------------------- 1 | // Dropzone 2 | 3 | .dropzone-wrapper { 4 | width: 100%; 5 | border: $gray-400 dashed 2px; 6 | @include border-radius($border-radius-lg); 7 | display: flex; 8 | align-items: center; 9 | align-content: center; 10 | text-align: center; 11 | height: 230px; 12 | transition: all .2s; 13 | 14 | &:hover { 15 | border-color: $primary; 16 | } 17 | 18 | & > div { 19 | width: 100%; 20 | height: 100%; 21 | outline: none !important; 22 | display: flex; 23 | align-items: center; 24 | } 25 | 26 | &.dropzone-wrapper-lg { 27 | height: 300px; 28 | } 29 | 30 | &.dropzone-wrapper-sm { 31 | height: 150px; 32 | } 33 | 34 | input { 35 | width: 100%; 36 | height: 100%; 37 | } 38 | 39 | .dropzone-content { 40 | margin: 0 auto; 41 | color: $gray-600; 42 | } 43 | 44 | &[aria-disabled="true"] { 45 | border-color: $gray-300; 46 | 47 | .dropzone-content { 48 | color: $gray-400; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /src/assets/components/forms/multiselect/_multiselect.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/forms/multiselect/_multiselect.scss -------------------------------------------------------------------------------- /src/assets/components/forms/typeahead/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin animation($animation) { 3 | -webkit-animation: $animation; 4 | -o-animation: $animation; 5 | animation: $animation; 6 | } 7 | 8 | @mixin box-shadow($shadow, $inset: false) { 9 | @if $inset { 10 | -webkit-box-shadow: $inset, $shadow; 11 | -moz-box-shadow: $inset, $shadow; 12 | box-shadow: $inset, $shadow; 13 | } @else { 14 | -webkit-box-shadow: $shadow; 15 | -moz-box-shadow: $shadow; 16 | box-shadow: $shadow; 17 | } 18 | } 19 | 20 | @mixin display-flex() { 21 | display: -webkit-box; 22 | display: -moz-box; 23 | display: -ms-flexbox; 24 | display: -webkit-flex; 25 | display: flex; 26 | } 27 | 28 | @mixin flex($value) { 29 | -webkit-box-flex: $value; 30 | -moz-box-flex: $value; 31 | -webkit-flex: $value; 32 | -ms-flex: $value; 33 | flex: $value; 34 | } 35 | 36 | @mixin placeholder($placeholder-color) { 37 | // Firefox 38 | &::-moz-placeholder { 39 | color: $placeholder-color; 40 | opacity: 1; 41 | } 42 | 43 | // Internet Explorer 10+ 44 | &:-ms-input-placeholder { 45 | color: $placeholder-color; 46 | } 47 | 48 | // Safari and Chrome 49 | &::-webkit-input-placeholder { 50 | color: $placeholder-color; 51 | } 52 | } -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dx-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dx-r) { 2 | /* 3 | * 3DX Reverse 4 | */ 5 | .hamburger--3dx-r { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateY(-180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dx.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dx) { 2 | /* 3 | * 3DX 4 | */ 5 | .hamburger--3dx { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateY(180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dxy-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dxy-r) { 2 | /* 3 | * 3DXY Reverse 4 | */ 5 | .hamburger--3dxy-r { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dxy.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dxy) { 2 | /* 3 | * 3DXY 4 | */ 5 | .hamburger--3dxy { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateX(180deg) rotateY(180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dy-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dy-r) { 2 | /* 3 | * 3DY Reverse 4 | */ 5 | .hamburger--3dy-r { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateX(180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_3dy.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, 3dy) { 2 | /* 3 | * 3DY 4 | */ 5 | .hamburger--3dy { 6 | .hamburger-box { 7 | perspective: $hamburger-layer-width * 2; 8 | } 9 | 10 | .hamburger-inner { 11 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), 12 | background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 13 | 14 | &::before, 15 | &::after { 16 | transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 | } 18 | } 19 | 20 | &.is-active { 21 | .hamburger-inner { 22 | background-color: transparent !important; 23 | transform: rotateX(-180deg); 24 | 25 | &::before { 26 | transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg); 27 | } 28 | 29 | &::after { 30 | transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrow-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrow-r) { 2 | /* 3 | * Arrow Right 4 | */ 5 | .hamburger--arrow-r.is-active { 6 | .hamburger-inner { 7 | &::before { 8 | transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1); 9 | } 10 | 11 | &::after { 12 | transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1); 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrow.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrow) { 2 | /* 3 | * Arrow 4 | */ 5 | .hamburger--arrow.is-active { 6 | .hamburger-inner { 7 | &::before { 8 | transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1); 9 | } 10 | 11 | &::after { 12 | transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1); 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrowalt-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrowalt-r) { 2 | /* 3 | * Arrow Alt Right 4 | */ 5 | .hamburger--arrowalt-r { 6 | .hamburger-inner { 7 | &::before { 8 | transition: top 0.1s 0.1s ease, 9 | transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 10 | } 11 | 12 | &::after { 13 | transition: bottom 0.1s 0.1s ease, 14 | transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 15 | } 16 | } 17 | 18 | &.is-active { 19 | .hamburger-inner { 20 | &::before { 21 | top: 0; 22 | transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1); 23 | transition: top 0.1s ease, 24 | transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); 25 | } 26 | 27 | &::after { 28 | bottom: 0; 29 | transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1); 30 | transition: bottom 0.1s ease, 31 | transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrowalt.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrowalt) { 2 | /* 3 | * Arrow Alt 4 | */ 5 | .hamburger--arrowalt { 6 | .hamburger-inner { 7 | &::before { 8 | transition: top 0.1s 0.1s ease, 9 | transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 10 | } 11 | 12 | &::after { 13 | transition: bottom 0.1s 0.1s ease, 14 | transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 15 | } 16 | } 17 | 18 | &.is-active { 19 | .hamburger-inner { 20 | &::before { 21 | top: 0; 22 | transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1); 23 | transition: top 0.1s ease, 24 | transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); 25 | } 26 | 27 | &::after { 28 | bottom: 0; 29 | transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1); 30 | transition: bottom 0.1s ease, 31 | transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrowturn-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrowturn-r) { 2 | /* 3 | * Arrow Turn Right 4 | */ 5 | .hamburger--arrowturn-r.is-active { 6 | .hamburger-inner { 7 | transform: rotate(-180deg); 8 | 9 | &::before { 10 | transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); 11 | } 12 | 13 | &::after { 14 | transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_arrowturn.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, arrowturn) { 2 | /* 3 | * Arrow Turn 4 | */ 5 | .hamburger--arrowturn.is-active { 6 | .hamburger-inner { 7 | transform: rotate(-180deg); 8 | 9 | &::before { 10 | transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); 11 | } 12 | 13 | &::after { 14 | transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_boring.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, boring) { 2 | /* 3 | * Boring 4 | */ 5 | .hamburger--boring { 6 | .hamburger-inner { 7 | &, 8 | &::before, 9 | &::after { 10 | transition-property: none; 11 | } 12 | } 13 | 14 | &.is-active { 15 | .hamburger-inner { 16 | transform: rotate(45deg); 17 | 18 | &::before { 19 | top: 0; 20 | opacity: 0; 21 | } 22 | 23 | &::after { 24 | bottom: 0; 25 | transform: rotate(-90deg); 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_elastic-r.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @if index($hamburger-types, elastic-r) { 4 | /* 5 | * Elastic Reverse 6 | */ 7 | .hamburger--elastic-r { 8 | .hamburger-inner { 9 | top: math.div($hamburger-layer-height, 2); 10 | transition-duration: 0.275s; 11 | transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 12 | 13 | &::before { 14 | top: $hamburger-layer-height + $hamburger-layer-spacing; 15 | transition: opacity 0.125s 0.275s ease; 16 | } 17 | 18 | &::after { 19 | top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2); 20 | transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); 21 | } 22 | } 23 | 24 | &.is-active { 25 | .hamburger-inner { 26 | $y-offset: $hamburger-layer-spacing + $hamburger-layer-height; 27 | 28 | transform: translate3d(0, $y-offset, 0) rotate(-135deg); 29 | transition-delay: 0.075s; 30 | 31 | &::before { 32 | transition-delay: 0s; 33 | opacity: 0; 34 | } 35 | 36 | &::after { 37 | transform: translate3d(0, $y-offset * -2, 0) rotate(270deg); 38 | transition-delay: 0.075s; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_elastic.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @if index($hamburger-types, elastic) { 4 | /* 5 | * Elastic 6 | */ 7 | .hamburger--elastic { 8 | .hamburger-inner { 9 | top: math.div($hamburger-layer-height, 2); 10 | transition-duration: 0.275s; 11 | transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 12 | 13 | &::before { 14 | top: $hamburger-layer-height + $hamburger-layer-spacing; 15 | transition: opacity 0.125s 0.275s ease; 16 | } 17 | 18 | &::after { 19 | top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2); 20 | transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); 21 | } 22 | } 23 | 24 | &.is-active { 25 | .hamburger-inner { 26 | $y-offset: $hamburger-layer-spacing + $hamburger-layer-height; 27 | 28 | transform: translate3d(0, $y-offset, 0) rotate(135deg); 29 | transition-delay: 0.075s; 30 | 31 | &::before { 32 | transition-delay: 0s; 33 | opacity: 0; 34 | } 35 | 36 | &::after { 37 | transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg); 38 | transition-delay: 0.075s; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_minus.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, minus) { 2 | /* 3 | * Minus 4 | */ 5 | .hamburger--minus { 6 | .hamburger-inner { 7 | &::before, 8 | &::after { 9 | transition: bottom 0.08s 0s ease-out, 10 | top 0.08s 0s ease-out, 11 | opacity 0s linear; 12 | } 13 | } 14 | 15 | &.is-active { 16 | .hamburger-inner { 17 | &::before, 18 | &::after { 19 | opacity: 0; 20 | transition: bottom 0.08s ease-out, 21 | top 0.08s ease-out, 22 | opacity 0s 0.08s linear; 23 | } 24 | &::before { 25 | top: 0; 26 | } 27 | 28 | &::after { 29 | bottom: 0; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_slider-r.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @if index($hamburger-types, slider-r) { 4 | /* 5 | * Slider Reverse 6 | */ 7 | .hamburger--slider-r { 8 | .hamburger-inner { 9 | top: math.div($hamburger-layer-height, 2); 10 | 11 | &::before { 12 | top: $hamburger-layer-height + $hamburger-layer-spacing; 13 | transition-property: transform, opacity; 14 | transition-timing-function: ease; 15 | transition-duration: 0.15s; 16 | } 17 | 18 | &::after { 19 | top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2); 20 | } 21 | } 22 | 23 | &.is-active { 24 | .hamburger-inner { 25 | $y-offset: $hamburger-layer-spacing + $hamburger-layer-height; 26 | 27 | transform: translate3d(0, $y-offset, 0) rotate(-45deg); 28 | 29 | &::before { 30 | transform: rotate(45deg) translate3d(math.div($hamburger-layer-width, 7), $hamburger-layer-spacing * -1, 0); 31 | opacity: 0; 32 | } 33 | 34 | &::after { 35 | transform: translate3d(0, $y-offset * -2, 0) rotate(90deg); 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_slider.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @if index($hamburger-types, slider) { 4 | /* 5 | * Slider 6 | */ 7 | .hamburger--slider { 8 | .hamburger-inner { 9 | top: math.div($hamburger-layer-height, 2); 10 | 11 | &::before { 12 | top: $hamburger-layer-height + $hamburger-layer-spacing; 13 | transition-property: transform, opacity; 14 | transition-timing-function: ease; 15 | transition-duration: 0.15s; 16 | } 17 | 18 | &::after { 19 | top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2); 20 | } 21 | } 22 | 23 | &.is-active { 24 | .hamburger-inner { 25 | $y-offset: $hamburger-layer-spacing + $hamburger-layer-height; 26 | 27 | transform: translate3d(0, $y-offset, 0) rotate(45deg); 28 | 29 | &::before { 30 | transform: rotate(-45deg) translate3d(math.div($hamburger-layer-width, -7), $hamburger-layer-spacing * -1, 0); 31 | opacity: 0; 32 | } 33 | 34 | &::after { 35 | transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg); 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_spin-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, spin-r) { 2 | /* 3 | * Spin Reverse 4 | */ 5 | .hamburger--spin-r { 6 | .hamburger-inner { 7 | transition-duration: 0.22s; 8 | transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 9 | 10 | &::before { 11 | transition: top 0.1s 0.25s ease-in, 12 | opacity 0.1s ease-in; 13 | } 14 | 15 | &::after { 16 | transition: bottom 0.1s 0.25s ease-in, 17 | transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 18 | } 19 | } 20 | 21 | &.is-active { 22 | .hamburger-inner { 23 | transform: rotate(-225deg); 24 | transition-delay: 0.12s; 25 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 26 | 27 | &::before { 28 | top: 0; 29 | opacity: 0; 30 | transition: top 0.1s ease-out, 31 | opacity 0.1s 0.12s ease-out; 32 | } 33 | 34 | &::after { 35 | bottom: 0; 36 | transform: rotate(90deg); 37 | transition: bottom 0.1s ease-out, 38 | transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_spin.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, spin) { 2 | /* 3 | * Spin 4 | */ 5 | .hamburger--spin { 6 | .hamburger-inner { 7 | transition-duration: 0.22s; 8 | transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 9 | 10 | &::before { 11 | transition: top 0.1s 0.25s ease-in, 12 | opacity 0.1s ease-in; 13 | } 14 | 15 | &::after { 16 | transition: bottom 0.1s 0.25s ease-in, 17 | transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 18 | } 19 | } 20 | 21 | &.is-active { 22 | .hamburger-inner { 23 | transform: rotate(225deg); 24 | transition-delay: 0.12s; 25 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 26 | 27 | &::before { 28 | top: 0; 29 | opacity: 0; 30 | transition: top 0.1s ease-out, 31 | opacity 0.1s 0.12s ease-out; 32 | } 33 | 34 | &::after { 35 | bottom: 0; 36 | transform: rotate(-90deg); 37 | transition: bottom 0.1s ease-out, 38 | transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_squeeze.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, squeeze) { 2 | /* 3 | * Squeeze 4 | */ 5 | .hamburger--squeeze { 6 | .hamburger-inner { 7 | transition-duration: 0.075s; 8 | transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 9 | 10 | &::before { 11 | transition: top 0.075s 0.12s ease, 12 | opacity 0.075s ease; 13 | } 14 | 15 | &::after { 16 | transition: bottom 0.075s 0.12s ease, 17 | transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); 18 | } 19 | } 20 | 21 | &.is-active { 22 | .hamburger-inner { 23 | transform: rotate(45deg); 24 | transition-delay: 0.12s; 25 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 26 | 27 | &::before { 28 | top: 0; 29 | opacity: 0; 30 | transition: top 0.075s ease, 31 | opacity 0.075s 0.12s ease; 32 | } 33 | 34 | &::after { 35 | bottom: 0; 36 | transform: rotate(-90deg); 37 | transition: bottom 0.075s ease, 38 | transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_stand.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, stand) { 2 | /* 3 | * Stand 4 | */ 5 | .hamburger--stand { 6 | .hamburger-inner { 7 | transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), 8 | background-color 0s 0.075s linear; 9 | 10 | &::before { 11 | transition: top 0.075s 0.075s ease-in, 12 | transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); 13 | } 14 | 15 | &::after { 16 | transition: bottom 0.075s 0.075s ease-in, 17 | transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); 18 | } 19 | } 20 | 21 | &.is-active { 22 | .hamburger-inner { 23 | transform: rotate(90deg); 24 | background-color: transparent !important; 25 | 26 | transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), 27 | background-color 0s 0.15s linear; 28 | 29 | &::before { 30 | top: 0; 31 | transform: rotate(-45deg); 32 | transition: top 0.075s 0.1s ease-out, 33 | transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 34 | } 35 | 36 | &::after { 37 | bottom: 0; 38 | transform: rotate(45deg); 39 | transition: bottom 0.075s 0.1s ease-out, 40 | transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_vortex-r.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, vortex-r) { 2 | /* 3 | * Vortex Reverse 4 | */ 5 | .hamburger--vortex-r { 6 | .hamburger-inner { 7 | transition-duration: 0.2s; 8 | transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 9 | 10 | &::before, 11 | &::after { 12 | transition-duration: 0s; 13 | transition-delay: 0.1s; 14 | transition-timing-function: linear; 15 | } 16 | 17 | &::before { 18 | transition-property: top, opacity; 19 | } 20 | 21 | &::after { 22 | transition-property: bottom, transform; 23 | } 24 | } 25 | 26 | &.is-active { 27 | .hamburger-inner { 28 | transform: rotate(-765deg); 29 | transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 30 | 31 | &::before, 32 | &::after { 33 | transition-delay: 0s; 34 | } 35 | 36 | &::before { 37 | top: 0; 38 | opacity: 0; 39 | } 40 | 41 | &::after { 42 | bottom: 0; 43 | transform: rotate(-90deg); 44 | } 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/components/hamburgers/types/_vortex.scss: -------------------------------------------------------------------------------- 1 | @if index($hamburger-types, vortex) { 2 | /* 3 | * Vortex 4 | */ 5 | .hamburger--vortex { 6 | .hamburger-inner { 7 | transition-duration: 0.2s; 8 | transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 9 | 10 | &::before, 11 | &::after { 12 | transition-duration: 0s; 13 | transition-delay: 0.1s; 14 | transition-timing-function: linear; 15 | } 16 | 17 | &::before { 18 | transition-property: top, opacity; 19 | } 20 | 21 | &::after { 22 | transition-property: bottom, transform; 23 | } 24 | } 25 | 26 | &.is-active { 27 | .hamburger-inner { 28 | transform: rotate(765deg); 29 | transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 30 | 31 | &::before, 32 | &::after { 33 | transition-delay: 0s; 34 | } 35 | 36 | &::before { 37 | top: 0; 38 | opacity: 0; 39 | } 40 | 41 | &::after { 42 | bottom: 0; 43 | transform: rotate(90deg); 44 | } 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/components/icons/_p7icons.scss: -------------------------------------------------------------------------------- 1 | $pe-7s-font-path: "~pe7-icon/dist/fonts"; 2 | 3 | @import "~pe7-icon/dist/scss/pe-icon-7-stroke.scss"; -------------------------------------------------------------------------------- /src/assets/components/icons/linearicons/Linearicons-Free.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/icons/linearicons/Linearicons-Free.eot -------------------------------------------------------------------------------- /src/assets/components/icons/linearicons/Linearicons-Free.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/icons/linearicons/Linearicons-Free.ttf -------------------------------------------------------------------------------- /src/assets/components/icons/linearicons/Linearicons-Free.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/icons/linearicons/Linearicons-Free.woff -------------------------------------------------------------------------------- /src/assets/components/icons/linearicons/Linearicons-Free.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/icons/linearicons/Linearicons-Free.woff2 -------------------------------------------------------------------------------- /src/assets/components/notifications/_toastify.scss: -------------------------------------------------------------------------------- 1 | @import "toastify/variables"; 2 | @import "toastify/toastContainer"; 3 | @import "toastify/toast"; 4 | @import "toastify/closeButton"; 5 | @import "toastify/progressBar"; 6 | 7 | // entrance and exit animations 8 | @import "toastify/animations/bounce"; 9 | @import "toastify/animations/zoom"; 10 | @import "toastify/animations/flip"; 11 | @import "toastify/animations/slide"; 12 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/_closeButton.scss: -------------------------------------------------------------------------------- 1 | .#{$rt-namespace}__close-button { 2 | color: $white; 3 | font-size: 14px; 4 | background: transparent; 5 | outline: none; 6 | border: none; 7 | padding: 0; 8 | cursor: pointer; 9 | opacity: 0.7; 10 | transition: 0.3s ease; 11 | position: absolute; 12 | top: 5px; 13 | right: 9px; 14 | &--default { 15 | color: #000; 16 | opacity: 0.3; 17 | } 18 | 19 | &:hover, 20 | &:focus { 21 | opacity: 1; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/_progressBar.scss: -------------------------------------------------------------------------------- 1 | @keyframes #{$rt-namespace}__trackProgress { 2 | 0%{ 3 | width: 96%; 4 | } 5 | 100%{ 6 | width: 0; 7 | } 8 | } 9 | 10 | .#{$rt-namespace}__progress-bar { 11 | position: absolute; 12 | bottom: 9%; 13 | left: 2%; 14 | width: 0; 15 | height: 5px; 16 | z-index: $rt-z-index; 17 | animation: #{$rt-namespace}__trackProgress linear 1; 18 | background-color: rgba(255,255,255,.3); 19 | @include border-radius($border-radius); 20 | 21 | &--rtl { 22 | right: 0; 23 | left: initial; 24 | } 25 | &--default{ 26 | background: $rt-color-progress-default; 27 | } 28 | 29 | &--info{} 30 | &--success{} 31 | &--warning{} 32 | &--error{} 33 | } 34 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/_toastContainer.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | .#{$rt-namespace}__toast-container { 4 | z-index: $rt-z-index; 5 | position: fixed; 6 | padding: 0; 7 | width: $rt-toast-width; 8 | box-sizing: border-box; 9 | color: $white; 10 | &--top-left { 11 | top: $spacer; 12 | left: $spacer; 13 | } 14 | &--top-center { 15 | top: $spacer; 16 | left: 50%; 17 | margin-left: -(math.div($rt-toast-width, 2)); 18 | } 19 | &--top-right { 20 | top: $spacer; 21 | right: $spacer; 22 | } 23 | &--bottom-left { 24 | bottom: $spacer; 25 | left: $spacer; 26 | } 27 | &--bottom-center { 28 | bottom: $spacer; 29 | left: 50%; 30 | margin-left: -(math.div($rt-toast-width, 2)); 31 | } 32 | &--bottom-right { 33 | bottom: $spacer; 34 | right: $spacer; 35 | } 36 | } 37 | 38 | @media #{$rt-mobile} { 39 | .#{$rt-namespace}__toast-container { 40 | width: 100vw; 41 | padding: 0; 42 | left: 0; 43 | margin: 0; 44 | &--top-left, 45 | &--top-center, 46 | &--top-right { 47 | top: 0; 48 | } 49 | &--bottom-left, 50 | &--bottom-center, 51 | &--bottom-right { 52 | bottom: 0; 53 | } 54 | &--rtl{ 55 | right: 0; 56 | left: initial; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/_variables.scss: -------------------------------------------------------------------------------- 1 | $rt-namespace: 'Toastify'; 2 | $rt-toast-width: 320px !default; 3 | $rt-toast-background: #ffffff !default; 4 | $rt-toast-min-height: 54px !default; 5 | $rt-toast-max-height: 800px !default; 6 | 7 | 8 | $rt-color-default: #fff !default; 9 | $rt-color-info: $info !default; 10 | $rt-color-success: $success !default; 11 | $rt-color-warning: $warning !default; 12 | $rt-color-error: $danger !default; 13 | 14 | $rt-color-progress-default: $primary !default; 15 | 16 | $rt-mobile: "only screen and (max-width : 480px)" !default; 17 | $rt-font-family: sans-serif !default; 18 | $rt-z-index: 9999 !default; 19 | 20 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/animations/_flip.scss: -------------------------------------------------------------------------------- 1 | @keyframes #{$rt-namespace}__flipIn { 2 | from { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 40% { 8 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 9 | animation-timing-function: ease-in; 10 | } 11 | 60% { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 13 | opacity: 1 14 | } 15 | 80% { 16 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 17 | } 18 | to { 19 | transform: perspective(400px); 20 | } 21 | } 22 | 23 | @keyframes #{$rt-namespace}__flipOut { 24 | from { 25 | transform: perspective(400px); 26 | } 27 | 30% { 28 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 29 | opacity: 1 30 | } 31 | to { 32 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 33 | opacity: 0 34 | } 35 | } 36 | 37 | .#{$rt-namespace}__flip-enter { 38 | animation-name: #{$rt-namespace}__flipIn; 39 | } 40 | 41 | .#{$rt-namespace}__flip-exit { 42 | animation-name: #{$rt-namespace}__flipOut; 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/components/notifications/toastify/animations/_zoom.scss: -------------------------------------------------------------------------------- 1 | @keyframes #{$rt-namespace}__zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.3, 0.3, 0.3); 5 | } 6 | 50% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @keyframes #{$rt-namespace}__zoomOut { 12 | from { 13 | opacity: 1; 14 | } 15 | 50% { 16 | opacity: 0; 17 | transform: scale3d(0.3, 0.3, 0.3); 18 | } 19 | to { 20 | opacity: 0 21 | } 22 | } 23 | 24 | .#{$rt-namespace}__zoom-enter { 25 | animation-name: #{$rt-namespace}__zoomIn; 26 | } 27 | 28 | .#{$rt-namespace}__zoom-exit { 29 | animation-name: #{$rt-namespace}__zoomOut; 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/fonts/rw-widgets.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/fonts/rw-widgets.eot -------------------------------------------------------------------------------- /src/assets/components/react-widgets/fonts/rw-widgets.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/fonts/rw-widgets.ttf -------------------------------------------------------------------------------- /src/assets/components/react-widgets/fonts/rw-widgets.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/fonts/rw-widgets.woff -------------------------------------------------------------------------------- /src/assets/components/react-widgets/fonts/rw-widgets.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/fonts/rw-widgets.woff2 -------------------------------------------------------------------------------- /src/assets/components/react-widgets/img/loader-big.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/img/loader-big.gif -------------------------------------------------------------------------------- /src/assets/components/react-widgets/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/react-widgets/img/loading.gif -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/autocomplete.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .rw-autocomplete { 4 | & .rw-select { 5 | position: absolute; 6 | display: block; 7 | width: auto; 8 | top: 0; 9 | bottom: 0; 10 | right: 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/button.scss: -------------------------------------------------------------------------------- 1 | 2 | .rw-btn { 3 | position: relative; 4 | color: $btn-color; 5 | display: inline-block; 6 | text-align: center; 7 | vertical-align: middle; 8 | border: 1px solid transparent; 9 | cursor: pointer; 10 | outline: none; // these are never individually focusable 11 | 12 | .rw-state-readonly &, 13 | .rw-state-disabled & { 14 | cursor: not-allowed; 15 | } 16 | } 17 | 18 | .rw-btn-select { 19 | @include opacity(.75); 20 | transition: opacity 150ms ease-in; 21 | 22 | &:hover, 23 | .rw-state-focus &, 24 | :hover > & { 25 | @include opacity(1); 26 | } 27 | } 28 | 29 | .rw-btn-primary { 30 | width: 100%; 31 | white-space: normal; 32 | line-height: 2em; 33 | 34 | &:hover { 35 | background-color: $state-bg-hover; 36 | } 37 | } 38 | 39 | .rw-btn-select[disabled], 40 | .rw-btn-primary[disabled], 41 | fieldset[disabled] .rw-btn-select, 42 | fieldset[disabled] .rw-btn-primary, { 43 | @include state-disabled(); 44 | @include opacity(.65); 45 | pointer-events: none; 46 | } 47 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/dropdown-list.scss: -------------------------------------------------------------------------------- 1 | .rw-dropdown-list-autofill { 2 | @extend .rw-input; 3 | 4 | padding: 0; 5 | } 6 | 7 | .rw-dropdown-list { 8 | 9 | .rw-select, 10 | .rw-select .rw-btn { 11 | height: 100%; 12 | } 13 | } 14 | 15 | .rw-dropdown-list-input { 16 | background-color: transparent; 17 | vertical-align: middle; 18 | padding-right: 0; 19 | 20 | /* ellipsis */ 21 | & { 22 | max-width: 1px; // very hacky to force ellipsis 23 | text-overflow: ellipsis; 24 | white-space: nowrap; 25 | overflow: hidden; 26 | } 27 | 28 | .rw-rtl & { 29 | padding-right: $input-padding-horizontal; 30 | padding-left: 0; 31 | } 32 | } 33 | 34 | .rw-filter-input { 35 | @extend .rw-input; 36 | @extend .rw-widget-input; 37 | 38 | position: relative; 39 | margin: 4px; 40 | padding-right: 0; 41 | 42 | .rw-rtl { 43 | padding-right: $input-padding-horizontal; 44 | padding-left: 0; 45 | } 46 | 47 | .rw-select, 48 | .rw-btn { 49 | @include opacity(0.75); 50 | cursor: text; 51 | } 52 | 53 | > .rw-select { 54 | &, 55 | &:active, 56 | &:hover { 57 | background: none; 58 | cursor: initial; 59 | box-shadow: none; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/icons.scss: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'RwWidgets'; 4 | font-weight: normal; 5 | font-style: normal; 6 | src: url('#{$font-path}/rw-widgets.eot?v=#{$version}'); 7 | src: url('#{$font-path}/rw-widgets.eot?#iefix&v=#{$version}') format('embedded-opentype'), 8 | url('#{$font-path}/rw-widgets.woff?v=#{$version}') format('woff'), 9 | url('#{$font-path}/rw-widgets.ttf?v=#{$version}') format('truetype'), 10 | url('#{$font-path}/rw-widgets.svg?v=#{$version}#fontawesomeregular') format('svg'); 11 | } 12 | 13 | 14 | .rw-i { 15 | display: inline-block; 16 | color: $icon-color; 17 | font-family: RwWidgets; 18 | font-style: normal; 19 | font-weight: normal; 20 | font-variant: normal; 21 | text-transform: none; 22 | -moz-osx-font-smoothing: grayscale; 23 | -webkit-font-smoothing: antialiased; 24 | } 25 | 26 | .rw-i-caret-down:before { content: '\e803'; } 27 | .rw-i-caret-up:before { content: '\e800'; } 28 | .rw-i-chevron-left:before { content: '\f104'; } 29 | .rw-i-chevron-right:before { content: '\f105'; } 30 | 31 | .rw-i-clock-o:before { content:'\e805'; } 32 | .rw-i-calendar:before { content: '\e804'; } 33 | .rw-i-search:before { content: '\e801'; } 34 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/normalize.scss: -------------------------------------------------------------------------------- 1 | 2 | // Normalize.css 3 | .rw-btn, 4 | .rw-input-reset { 5 | color: inherit; 6 | padding: 0; 7 | margin: 0; 8 | border: none; 9 | box-shadow: none; 10 | background: none; 11 | background-image: none; 12 | font-family: inherit; 13 | font-size: inherit; 14 | line-height: inherit; 15 | -ms-touch-action: manipulation; 16 | touch-action: manipulation; 17 | } 18 | 19 | .rw-btn::-moz-focus-inner { 20 | padding: 0; 21 | border: 0; 22 | } 23 | 24 | select.rw-input { 25 | text-transform: none; 26 | } 27 | 28 | html input[type="button"].rw-input { 29 | -webkit-appearance: button; 30 | cursor: pointer; 31 | } 32 | 33 | textarea.rw-input { 34 | overflow: auto; 35 | resize: vertical; 36 | } 37 | 38 | 39 | button[disabled].rw-input, 40 | fieldset[disabled] .rw-input, 41 | html input[disabled].rw-input { 42 | cursor: not-allowed; 43 | } 44 | 45 | button.rw-input::-moz-focus-inner, 46 | input.rw-input::-moz-focus-inner { 47 | border: 0; 48 | padding: 0; 49 | } 50 | 51 | input[type="checkbox"], 52 | input[type="radio"] { 53 | box-sizing: border-box; 54 | padding: 0; 55 | } 56 | 57 | /* -------------- */ 58 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/number-picker.scss: -------------------------------------------------------------------------------- 1 | 2 | @use "sass:math"; 3 | @use "sass:list"; 4 | 5 | .rw-number-picker { 6 | $half-width: list.slash($input-height, 2); 7 | 8 | .rw-btn { 9 | @include make-btn-state(); 10 | @include height-calc($half-width, $input-border-width); 11 | 12 | line-height: $half-width; 13 | line-height: calc(#{$half-width} - #{$input-border-width}); 14 | display: block; 15 | border: none; 16 | } 17 | 18 | & .rw-select { 19 | vertical-align: middle; 20 | 21 | &:hover, 22 | &:active { 23 | box-shadow: none; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/react-widgets.scss: -------------------------------------------------------------------------------- 1 | // @import "variables"; 2 | // 3 | // @import "mixins"; 4 | // @import "normalize"; 5 | // @import "icons"; 6 | // 7 | //@import "./button.scss"; 8 | // @import "widget"; 9 | // @import "list"; 10 | // @import "dropdown-list"; 11 | // @import "number-picker"; 12 | //@import "./calendar.scss"; 13 | // @import "select-list"; 14 | // @import "multiselect"; 15 | //@import "./autocomplete.scss"; 16 | // 17 | // @import "popup"; 18 | // @import "state"; 19 | 20 | @import "react-widgets/scss/styles.scss"; -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/select-list.scss: -------------------------------------------------------------------------------- 1 | .rw-select-list { 2 | overflow: auto; 3 | position: relative; 4 | 5 | .rw-list { 6 | max-height: none; 7 | font-size: $font-size; // use widget font-size 8 | } 9 | } 10 | 11 | .rw-select-list-label { 12 | display: block; 13 | position: relative; 14 | font-weight: normal; 15 | cursor: inherit; 16 | padding-left: 20px; 17 | margin: 0; 18 | 19 | .rw-rtl & { 20 | padding-left: 0; 21 | padding-right: 20px; 22 | } 23 | } 24 | 25 | input.rw-select-list-input { 26 | position: absolute; 27 | left: 0; 28 | top: 50%; 29 | transform: translateY(-50%); 30 | top: 0.1em /9; 31 | margin: 0; 32 | line-height: normal; 33 | cursor: inherit; 34 | 35 | .rw-rtl & { 36 | left: auto; 37 | right: 0; 38 | } 39 | } 40 | 41 | .rw-loading-mask { 42 | content: ''; 43 | background: $img-busy-lg no-repeat center; 44 | position: absolute; 45 | background-color: #fff; 46 | border-radius: $input-border-radius; 47 | 48 | @include opacity(0.7); 49 | top: 0; 50 | left: 0; 51 | height: 100%; 52 | width: 100%; 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/components/react-widgets/scss/state.scss: -------------------------------------------------------------------------------- 1 | 2 | .rw-state-disabled { 3 | @include state-disabled(); 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/components/slick-carousel/slick/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/components/slick-carousel/slick/ajax-loader.gif -------------------------------------------------------------------------------- /src/assets/components/splitters/_splitters.scss: -------------------------------------------------------------------------------- 1 | // Layout Splitter 2 | 3 | .handle-bar { 4 | background: transparent !important; 5 | @include border-radius(30px); 6 | 7 | &:active, 8 | &:hover, 9 | &.handle-bar_clone { 10 | background-color: $gray-200 !important; 11 | } 12 | 13 | &.resize-not-allowed:hover { 14 | background-color: $gray-200; 15 | } 16 | 17 | .handle-bar_drag { 18 | border-color: $primary !important; 19 | } 20 | } -------------------------------------------------------------------------------- /src/assets/components/sticky-elements/_sticky-elements.scss: -------------------------------------------------------------------------------- 1 | // Sticky Elements 2 | 3 | .scrollable-block { 4 | margin-bottom: 50px; 5 | overflow: hidden; 6 | position: relative; 7 | .sticky { 8 | z-index: 2; 9 | } 10 | } -------------------------------------------------------------------------------- /src/assets/demo-ui/elements/_layout-themes.scss: -------------------------------------------------------------------------------- 1 | // Themes 2 | 3 | $themes: (); 4 | 5 | $themes: map_merge( 6 | ( 7 | "default": ( 8 | 9 | ), 10 | "light-blue": ( 11 | 12 | ), 13 | ), 14 | $themes 15 | ); 16 | 17 | @mixin theme-variant($app-container-bg, $app-sidebar-bg, $app-header-bg, $app-header-logo-bg) { 18 | 19 | } 20 | 21 | @each $theme, $colors in $themes { 22 | $color1: nth($colors, 1); 23 | $color2: nth($colors, 2); 24 | $color3: nth($colors, 3); 25 | $color4: nth($colors, 4); 26 | 27 | .theme-#{$theme} { 28 | @include theme-variant($color1, $color2, $color3, $color4); 29 | } 30 | } -------------------------------------------------------------------------------- /src/assets/demo-ui/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/demo-ui/images/logo.png -------------------------------------------------------------------------------- /src/assets/elements/_accordions.scss: -------------------------------------------------------------------------------- 1 | // Accordions 2 | 3 | .accordion-wrapper { 4 | @include border-radius($border-radius); 5 | border: $gray-200 solid 1px; 6 | 7 | & > .card { 8 | box-shadow: 0 0 0 0 transparent; 9 | 10 | & > .card-header { 11 | padding: 1rem; 12 | height: auto; 13 | 14 | .btn:active, 15 | .btn:focus, 16 | .btn:hover { 17 | text-decoration: none; 18 | } 19 | 20 | .form-heading { 21 | p { 22 | margin: 0; 23 | } 24 | } 25 | } 26 | 27 | .collapse { 28 | border-bottom: transparent solid 1px; 29 | 30 | &.show { 31 | border-bottom-color: $gray-200; 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /src/assets/elements/_chat.scss: -------------------------------------------------------------------------------- 1 | // Chat 2 | 3 | @use "sass:math"; 4 | 5 | .chat-box-wrapper { 6 | display: flex; 7 | clear: both; 8 | padding: math.div($layout-spacer-x, 2); 9 | 10 | & + .chat-box-wrapper { 11 | padding-top: 0; 12 | } 13 | 14 | .chat-box { 15 | box-shadow: 0 0 0 transparent; 16 | position: relative; 17 | opacity: 1; 18 | background: $dropdown-link-hover-bg; 19 | border: 0; 20 | padding: math.div($layout-spacer-x, 2) $layout-spacer-x; 21 | @include border-radius(30px); 22 | border-top-left-radius: $border-radius; 23 | flex: 1; 24 | display: flex; 25 | max-width: 50%; 26 | min-width: 100%; 27 | text-align: left; 28 | 29 | & + small { 30 | text-align: left; 31 | padding: math.div($layout-spacer-x, 3) 0 0; 32 | margin-left: $layout-spacer-x; 33 | display: block; 34 | } 35 | } 36 | 37 | &.chat-box-wrapper-right { 38 | text-align: right; 39 | 40 | .chat-box { 41 | @include border-radius(30px); 42 | border-top-left-radius: 30px; 43 | border-top-right-radius: $border-radius; 44 | margin-left: auto; 45 | 46 | & + small { 47 | text-align: right; 48 | margin-right: $layout-spacer-x; 49 | margin-left: 0; 50 | } 51 | } 52 | 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/assets/elements/_modals.scss: -------------------------------------------------------------------------------- 1 | // Modals 2 | 3 | .modal-header, 4 | .modal-footer { 5 | background: $gray-100; 6 | } 7 | 8 | .modal-footer { 9 | @include border-bottom-radius($border-radius); 10 | } 11 | 12 | .modal-dialog { 13 | box-shadow: $box-shadow-lg-default; 14 | @include border-radius($border-radius); 15 | } -------------------------------------------------------------------------------- /src/assets/elements/_progressbar.scss: -------------------------------------------------------------------------------- 1 | // Progress Bar 2 | 3 | .progress { 4 | 5 | .progress-bar { 6 | &:last-child { 7 | @include border-end-radius($progress-border-radius); 8 | } 9 | } 10 | 11 | &.progress-bar-sm { 12 | height: .5rem; 13 | } 14 | 15 | &.progress-bar-xs { 16 | height: .3rem; 17 | } 18 | 19 | &.progress-bar-rounded { 20 | @include border-radius(30px); 21 | } 22 | 23 | } 24 | 25 | .progress-bar-animated-alt { 26 | &.progress-bar, 27 | .progress-bar { 28 | position: relative; 29 | 30 | &::after { 31 | content: ''; 32 | opacity: 0; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | right: 0; 37 | bottom: 0; 38 | background: $white; 39 | animation: progress-active 2s ease infinite; 40 | } 41 | } 42 | } 43 | 44 | @keyframes progress-active { 45 | 0% { 46 | opacity: .4; 47 | width: 0 48 | } 49 | 100% { 50 | opacity: 0; 51 | width: 100% 52 | } 53 | } -------------------------------------------------------------------------------- /src/assets/elements/listgroup.scss: -------------------------------------------------------------------------------- 1 | // List Group 2 | 3 | @use "sass:math"; 4 | 5 | .todo-list-wrapper { 6 | .todo-indicator { 7 | position: absolute; 8 | width: 4px; 9 | height: 60%; 10 | @include border-radius($border-radius-lg); 11 | left: math.div($card-spacer-x, 2); 12 | top: 20%; 13 | opacity: .6; 14 | transition: opacity .2s; 15 | } 16 | 17 | .list-group-item { 18 | &:hover { 19 | .todo-indicator { 20 | opacity: .9; 21 | } 22 | } 23 | } 24 | 25 | .custom-control, 26 | input[checkbox] { 27 | margin-left: math.div($card-spacer-x, 2); 28 | } 29 | } 30 | 31 | .list-group-flush + .card-footer { 32 | border-top: 0; 33 | } 34 | 35 | .rm-list-borders { 36 | .list-group-item { 37 | border: 0; 38 | padding: math.div($card-spacer-y, 1.5) 0; 39 | } 40 | } 41 | 42 | .rm-list-borders-scroll { 43 | .list-group-item { 44 | border: 0; 45 | padding-right: ($card-spacer-y * 1.5); 46 | } 47 | } -------------------------------------------------------------------------------- /src/assets/layout/_layout-variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | $spacer-lg : 3rem; 4 | $spacer-sm : 1.5rem; 5 | 6 | $layout-spacer-lg : 3rem; 7 | $layout-spacer-x : 1.5rem; 8 | 9 | $app-sidebar-width : 280px; 10 | $app-sidebar-width-collapsed : 80px; 11 | 12 | $logo-height : 23px; 13 | $logo-width : 97px; 14 | 15 | $app-header-height : 60px; -------------------------------------------------------------------------------- /src/assets/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | @import "layout-variables"; 4 | 5 | @import "generic/generic-base"; 6 | @import "generic/animations"; 7 | 8 | @import "header/header-base"; 9 | @import "sidebar/sidebar-base"; 10 | @import "main/main-base"; 11 | @import "footer/footer-base"; 12 | 13 | @import "elements/page-title/page-title-base"; 14 | @import "elements/search-box/search-box"; -------------------------------------------------------------------------------- /src/assets/layout/footer/_fixed-footer.scss: -------------------------------------------------------------------------------- 1 | // Fixed Header 2 | 3 | .fixed-footer { 4 | .app-footer { 5 | position: fixed; 6 | width: 100%; 7 | bottom: 0; 8 | left: 0; 9 | z-index: 7; 10 | 11 | .app-footer__inner { 12 | margin-left: $app-sidebar-width; 13 | box-shadow: 0.3rem -0.46875rem 2.1875rem rgba(shade-color($primary, 50%), .02), 14 | 0.3rem -0.9375rem 1.40625rem rgba(shade-color($primary, 50%), .02), 15 | 0.3rem -0.25rem 0.53125rem rgba(shade-color($primary, 50%), .04), 16 | 0.3rem -0.125rem 0.1875rem rgba(shade-color($primary, 50%), .02); 17 | 18 | } 19 | } 20 | 21 | .app-main .app-main__outer { 22 | padding-bottom: $app-header-height; 23 | } 24 | 25 | &.closed-sidebar { 26 | .app-footer { 27 | .app-footer__inner { 28 | margin-left: $app-sidebar-width-collapsed !important; 29 | } 30 | } 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/assets/layout/footer/_footer-base.scss: -------------------------------------------------------------------------------- 1 | // Footer base 2 | 3 | @use "sass:math"; 4 | 5 | .app-footer { 6 | height: $app-header-height; 7 | 8 | .app-footer__inner { 9 | padding: 0 $layout-spacer-x 0 math.div($layout-spacer-x, 2); 10 | height: $app-header-height; 11 | transition: all .2s; 12 | 13 | display: flex; 14 | align-content: center; 15 | align-items: center; 16 | 17 | .app-footer-left { 18 | display: flex; 19 | align-items: center; 20 | } 21 | 22 | .app-footer-right { 23 | margin-left: auto; 24 | display: flex; 25 | } 26 | } 27 | } 28 | 29 | // Footer Dots Section 30 | 31 | .footer-dots { 32 | display: flex; 33 | align-items: center; 34 | align-content: center; 35 | 36 | .dots-separator { 37 | height: 40px; 38 | margin: 0 math.div($layout-spacer-x, 2.5); 39 | width: 1px; 40 | background: $gray-200; 41 | } 42 | } 43 | 44 | .dot-btn-wrapper { 45 | padding: .5rem; 46 | position: relative; 47 | display: flex; 48 | opacity: .7; 49 | transition: opacity .2s; 50 | 51 | .badge-abs { 52 | right: 50%; 53 | 54 | &.badge-dot-sm { 55 | top: -2px; 56 | margin-right: -3px; 57 | } 58 | } 59 | 60 | .dot-btn-icon { 61 | font-size: 1.8rem; 62 | } 63 | 64 | &:hover { 65 | text-decoration: none; 66 | opacity: 1; 67 | } 68 | } 69 | 70 | // Footer Modifiers 71 | 72 | @import "fixed-footer"; 73 | -------------------------------------------------------------------------------- /src/assets/layout/generic/_animations.scss: -------------------------------------------------------------------------------- 1 | // Sidebar Animation 2 | 3 | .SidebarAnimation-appear { 4 | transform: translateX(-30px); 5 | opacity: 0; 6 | 7 | &.SidebarAnimation-appear-active { 8 | opacity: 1; 9 | transform: translateX(0); 10 | transition: all .4s linear; 11 | } 12 | } 13 | 14 | // Tabs Animation 15 | 16 | .TabsAnimation-appear { 17 | @extend .animated; 18 | @extend .fadeInUp; 19 | } 20 | 21 | // Header Animation 22 | 23 | .HeaderAnimation-appear { 24 | transform: translateY(-30px); 25 | opacity: 0; 26 | 27 | &.HeaderAnimation-appear-active { 28 | opacity: 1; 29 | transform: translateY(0); 30 | transition: all .4s linear; 31 | } 32 | } 33 | 34 | // Main Animation 35 | 36 | .MainAnimation-appear { 37 | transform: translateY(-30px); 38 | opacity: 0; 39 | 40 | &.MainAnimation-appear-active { 41 | opacity: 1; 42 | transform: translateY(0); 43 | transition: all .4s linear; 44 | } 45 | } -------------------------------------------------------------------------------- /src/assets/layout/generic/_generic-base.scss: -------------------------------------------------------------------------------- 1 | // General 2 | 3 | a, 4 | button, 5 | .btn { 6 | outline: none !important; 7 | } 8 | 9 | .app-container { 10 | display: flex; 11 | min-height: 100vh; 12 | flex-direction: column; 13 | margin: 0; 14 | } -------------------------------------------------------------------------------- /src/assets/layout/header/modifiers/_fixed-header.scss: -------------------------------------------------------------------------------- 1 | // Fixed Header 2 | 3 | .fixed-header { 4 | .app-header { 5 | position: fixed; 6 | width: 100%; 7 | top: 0; 8 | 9 | .app-header__logo { 10 | visibility: visible; 11 | } 12 | } 13 | 14 | .app-main { 15 | padding-top: $app-header-height; 16 | } 17 | 18 | &:not(.fixed-sidebar):not(.closed-sidebar) { 19 | .app-sidebar { 20 | .app-header__logo { 21 | visibility: hidden; 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/assets/layout/header/modifiers/_header-buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | // Header Buttons 3 | 4 | .header-btn-lg { 5 | padding: 0 0 0 ($layout-spacer-x); 6 | margin-left: ($layout-spacer-x); 7 | display: flex; 8 | align-items: center; 9 | position: relative; 10 | 11 | &::before { 12 | position: absolute; 13 | left: -1px; 14 | top: 50%; 15 | background: $border-color; 16 | width: 1px; 17 | height: 30px; 18 | margin-top: -15px; 19 | content: ''; 20 | } 21 | 22 | .hamburger-inner, 23 | .hamburger-inner::before, 24 | .hamburger-inner::after { 25 | background: $gray-600; 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /src/assets/layout/header/modifiers/_header-dots.scss: -------------------------------------------------------------------------------- 1 | // Header Dots 2 | 3 | .header-dots { 4 | margin-left: auto; 5 | display: flex; 6 | 7 | & > .dropdown { 8 | display: flex; 9 | align-content: center; 10 | } 11 | 12 | .icon-wrapper-alt { 13 | margin: 0; 14 | height: 44px; 15 | width: 44px; 16 | text-align: center; 17 | overflow: visible; 18 | 19 | .language-icon { 20 | @include border-radius(30px); 21 | position: relative; 22 | z-index: 4; 23 | width: 28px; 24 | height: 28px; 25 | overflow: hidden; 26 | margin: 0 auto; 27 | 28 | img { 29 | position: relative; 30 | top: 50%; 31 | left: 50%; 32 | margin: -22px 0 0 -20px; 33 | } 34 | 35 | } 36 | 37 | .icon-wrapper-bg { 38 | opacity: .1; 39 | transition: opacity .2s; 40 | @include border-radius(40px); 41 | } 42 | 43 | svg { 44 | margin: 0 auto; 45 | } 46 | 47 | @-moz-document url-prefix() { 48 | svg { 49 | width: 50%; 50 | } 51 | } 52 | 53 | i { 54 | font-size: 1.3rem; 55 | } 56 | 57 | &:hover { 58 | cursor: pointer; 59 | 60 | .icon-wrapper-bg { 61 | opacity: .2; 62 | } 63 | } 64 | 65 | .badge-dot { 66 | top: 1px; 67 | right: 1px; 68 | border: 0; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/assets/layout/header/modifiers/_header-megamenu.scss: -------------------------------------------------------------------------------- 1 | // Header Mega Menu 2 | 3 | @use "sass:math"; 4 | 5 | .header-megamenu { 6 | &.nav { 7 | & > li > .nav-link { 8 | color: $gray-600; 9 | padding-left: math.div($nav-link-padding-x, 1.5); 10 | padding-right: math.div($nav-link-padding-x, 1.5); 11 | 12 | .rounded-pill { 13 | padding: 5px 7px; 14 | } 15 | 16 | &:hover { 17 | color: $gray-800; 18 | } 19 | 20 | svg { 21 | margin-top: 1px; 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/assets/layout/main/themes/_main-white.scss: -------------------------------------------------------------------------------- 1 | // Theme White 2 | 3 | // Variables 4 | 5 | $app-container-bg: #f1f4f6; 6 | $app-sidebar-bg: #ffffff; 7 | $app-header-bg: #fafbfc; 8 | $app-header-logo-bg: rgba(255, 255, 255, .9); 9 | 10 | // Content 11 | 12 | .app-theme-white { 13 | 14 | &.app-container { 15 | background: $app-container-bg; 16 | } 17 | 18 | .app-sidebar { 19 | background: $app-sidebar-bg; 20 | } 21 | 22 | .app-page-title { 23 | background: rgba(255, 255, 255, .55); 24 | } 25 | 26 | .app-footer .app-footer__inner, 27 | .app-header { 28 | background: $app-header-bg; 29 | } 30 | 31 | &.fixed-header { 32 | .app-header__logo { 33 | background: rgba($app-header-bg, .1); 34 | } 35 | } 36 | 37 | } -------------------------------------------------------------------------------- /src/assets/layout/sidebar/modifiers/_fixed-sidebar.scss: -------------------------------------------------------------------------------- 1 | // Fixed Sidebar 2 | 3 | .fixed-sidebar { 4 | .app-sidebar { 5 | position: fixed; 6 | height: 100vh; 7 | } 8 | 9 | .app-main { 10 | 11 | .app-main__outer { 12 | z-index: 9; 13 | padding-left: $app-sidebar-width; 14 | } 15 | 16 | } 17 | 18 | &.fixed-header { 19 | .app-sidebar { 20 | .app-header__logo { 21 | display: none; 22 | } 23 | } 24 | } 25 | 26 | &:not(.fixed-header) { 27 | .app-sidebar { 28 | .app-header__logo { 29 | display: flex; 30 | } 31 | } 32 | 33 | .app-header { 34 | 35 | margin-left: $app-sidebar-width; 36 | 37 | .app-header__logo { 38 | display: none; 39 | } 40 | } 41 | 42 | .app-main { 43 | //z-index: 12; 44 | } 45 | } 46 | 47 | &.closed-sidebar { 48 | &:not(.fixed-header) { 49 | 50 | .app-header { 51 | margin-left: $app-sidebar-width-collapsed; 52 | } 53 | 54 | .app-sidebar { 55 | 56 | .app-header__logo { 57 | width: $app-sidebar-width-collapsed; 58 | padding: 0; 59 | 60 | .logo-src { 61 | display: none; 62 | } 63 | 64 | .header__pane { 65 | margin-right: auto; 66 | } 67 | } 68 | } 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/assets/pages/_userpages.scss: -------------------------------------------------------------------------------- 1 | // User Pages 2 | 3 | .app-logo { 4 | height: $logo-height; 5 | width: $logo-width; 6 | background: url('../../assets/utils/images/logo-inverse.png'); 7 | } 8 | 9 | .app-logo-inverse { 10 | height: $logo-height; 11 | width: $logo-width; 12 | background: url('../../assets/utils/images/logo.png'); 13 | } 14 | 15 | .app-login-box { 16 | .app-logo { 17 | margin-bottom: $layout-spacer-lg; 18 | } 19 | 20 | h4 { 21 | margin-bottom: $layout-spacer-x; 22 | font-weight: normal; 23 | 24 | div { 25 | opacity: .6; 26 | } 27 | 28 | span { 29 | font-size: $font-size-lg; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /src/assets/themes/_layout-variables.scss: -------------------------------------------------------------------------------- 1 | // Default 2 | 3 | @import "default/variables"; 4 | 5 | // Black 6 | 7 | //@import "black/variables"; 8 | 9 | // Blue Alternate 10 | 11 | //@import "blue-alt/variables"; 12 | 13 | // Dark 14 | 15 | //@import "dark/variables"; 16 | 17 | // Green 18 | 19 | //@import "green/variables"; 20 | 21 | // Orange 22 | 23 | //@import "orange/variables"; 24 | 25 | // Purple 26 | 27 | //@import "purple/variables"; 28 | 29 | // Purple Alternate 30 | 31 | //@import "purple-alt/variables"; 32 | 33 | // Red 34 | 35 | //@import "red/variables"; 36 | -------------------------------------------------------------------------------- /src/assets/utils/_comps-animations.scss: -------------------------------------------------------------------------------- 1 | // Common Comps Animations 2 | 3 | 4 | $base-duration : .2s; 5 | $base-distance : 10px; 6 | $base-fill-mode : both; 7 | 8 | // Dropdown Animation 9 | 10 | .dropdown-menu { 11 | &.show { 12 | animation: fade-in2 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; 13 | } 14 | } 15 | 16 | .popover { 17 | &.show { 18 | display: block; 19 | animation: fade-in2 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; 20 | } 21 | } 22 | 23 | .dropdown-menu { 24 | &[data-placement^="top"].show { 25 | animation: fade-in3 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; 26 | bottom: auto !important; 27 | top: auto !important; 28 | } 29 | } 30 | 31 | @keyframes fade-in2 { 32 | 0% { 33 | margin-top: -50px; 34 | visibility: hidden; 35 | opacity: 0; 36 | } 37 | 100% { 38 | margin-top: 0px; 39 | visibility: visible; 40 | opacity: 1; 41 | } 42 | } 43 | 44 | .form-control { 45 | transition: all .2s; 46 | } 47 | -------------------------------------------------------------------------------- /src/assets/utils/helpers/_grayscale.scss: -------------------------------------------------------------------------------- 1 | // Grayscale Filter 2 | 3 | .filter-grayscale-5 { 4 | filter: grayscale(5%) !important; 5 | } 6 | 7 | .filter-grayscale-10 { 8 | filter: grayscale(10%) !important; 9 | } 10 | 11 | .filter-grayscale-20 { 12 | filter: grayscale(20%) !important; 13 | } 14 | 15 | .filter-grayscale-30 { 16 | filter: grayscale(30%) !important; 17 | } 18 | 19 | .filter-grayscale-40 { 20 | filter: grayscale(40%) !important; 21 | } 22 | 23 | .filter-grayscale-50 { 24 | filter: grayscale(50%) !important; 25 | } 26 | 27 | .filter-grayscale-80 { 28 | filter: grayscale(80%) !important; 29 | } 30 | 31 | .filter-grayscale-100 { 32 | filter: grayscale(100%) !important; 33 | } -------------------------------------------------------------------------------- /src/assets/utils/helpers/_opacity.scss: -------------------------------------------------------------------------------- 1 | 2 | // Opacity 3 | 4 | .opacity-01 { 5 | opacity: .01 !important; 6 | } 7 | 8 | .opacity-02 { 9 | opacity: .02 !important; 10 | } 11 | 12 | .opacity-03 { 13 | opacity: .03 !important; 14 | } 15 | 16 | .opacity-04 { 17 | opacity: .04 !important; 18 | } 19 | 20 | .opacity-05 { 21 | opacity: .05 !important; 22 | } 23 | 24 | .opacity-06 { 25 | opacity: .06 !important; 26 | } 27 | 28 | .opacity-07 { 29 | opacity: .07 !important; 30 | } 31 | 32 | .opacity-08 { 33 | opacity: .08 !important; 34 | } 35 | 36 | .opacity-09 { 37 | opacity: .09 !important; 38 | } 39 | 40 | .opacity-1 { 41 | opacity: .1 !important; 42 | } 43 | 44 | .opacity-15 { 45 | opacity: .15 !important; 46 | } 47 | 48 | .opacity-2 { 49 | opacity: .2 !important; 50 | } 51 | 52 | .opacity-3 { 53 | opacity: .3 !important; 54 | } 55 | 56 | .opacity-4 { 57 | opacity: .4 !important; 58 | } 59 | 60 | .opacity-5 { 61 | opacity: .5 !important; 62 | } 63 | 64 | .opacity-6 { 65 | opacity: .6 !important; 66 | } 67 | 68 | .opacity-7 { 69 | opacity: .7 !important; 70 | } 71 | 72 | .opacity-8 { 73 | opacity: .8 !important; 74 | } 75 | 76 | .opacity-9 { 77 | opacity: .9 !important; 78 | } 79 | 80 | .opacity-10 { 81 | opacity: 1 !important; 82 | } -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/1.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/10.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/11.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/12.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/5.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/8.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/avatars/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/avatars/9.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract1.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract10.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract5.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract6.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract7.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract8.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/abstract9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/abstract9.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/city1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/city1.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/city2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/city2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/city3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/city3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/city4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/city4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/dropdown-header/city5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/dropdown-header/city5.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/logo-inverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/logo-inverse.png -------------------------------------------------------------------------------- /src/assets/utils/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/logo.png -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract5.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/abstract6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/abstract6.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/buildings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/buildings.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/city.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/citydark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/citydark.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/citynights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/citynights.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/colors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/colors.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/fence-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/fence-small.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/fence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/fence.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/interconnected.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/interconnected.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/nightcolors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/nightcolors.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/originals/water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/originals/water.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract1.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract10.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract5.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract6.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract7.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract8.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/abstract9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/abstract9.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/city1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/city1.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/city2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/city2.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/city3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/city3.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/city4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/city4.jpg -------------------------------------------------------------------------------- /src/assets/utils/images/sidebar/city5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DashboardPack/architectui-react-theme-free/65ef3cbf2608188c8fb7b6b4c3e1905ce45b55bf/src/assets/utils/images/sidebar/city5.jpg -------------------------------------------------------------------------------- /src/assets/widgets/profile-boxes/_profile-boxes.scss: -------------------------------------------------------------------------------- 1 | // Profile Boxes 2 | 3 | @use "sass:math"; 4 | 5 | .profile-block { 6 | position: relative; 7 | overflow: hidden; 8 | 9 | .profile-blur { 10 | width: 100%; 11 | height: 100%; 12 | filter: blur(5px); 13 | transform: scale(1.8); 14 | position: absolute; 15 | left: -25%; 16 | top: -25%; 17 | } 18 | 19 | .profile-inner { 20 | position: absolute; 21 | width: 100%; 22 | height: 100%; 23 | opacity: .5; 24 | left: 0; 25 | top: 0; 26 | } 27 | 28 | .dropdown-menu-header { 29 | 30 | .menu-header-content { 31 | padding: $layout-spacer-lg; 32 | 33 | .menu-header-title { 34 | margin: math.div($layout-spacer-x, 2) 0 0; 35 | } 36 | 37 | .menu-header-subtitle { 38 | margin: math.div($layout-spacer-x, 3) 0 0; 39 | } 40 | } 41 | 42 | .menu-header-btn-pane { 43 | margin: math.div($layout-spacer-x, 3) 0 0; 44 | 45 | .btn-icon { 46 | color: $white; 47 | padding: 0; 48 | width: 44px; 49 | height: 44px; 50 | line-height: 37px; 51 | font-size: $font-size-lg; 52 | 53 | &:hover { 54 | background: rgba(255, 255, 255, .2); 55 | } 56 | } 57 | } 58 | } 59 | 60 | } -------------------------------------------------------------------------------- /src/config/configureStore.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers } from "redux"; 2 | import reducers from "../reducers"; 3 | 4 | export default function configureStore() { 5 | return createStore( 6 | combineReducers({ 7 | ...reducers, 8 | }), 9 | {} 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import "./polyfills"; 2 | import React from "react"; 3 | import { createRoot } from 'react-dom/client'; 4 | 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | import { HashRouter } from "react-router-dom"; 8 | import "./assets/base.scss"; 9 | import Main from "./DemoPages/Main"; 10 | import configureStore from "./config/configureStore"; 11 | import { Provider } from "react-redux"; 12 | 13 | const store = configureStore(); 14 | const rootElement = document.getElementById("root"); 15 | 16 | const renderApp = (Component) => ( 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | const root = createRoot(rootElement).render(renderApp(Main)); 25 | 26 | if (module.hot) { 27 | module.hot.accept("./DemoPages/Main", () => { 28 | const NextApp = require("./DemoPages/Main").default; 29 | root.render(renderApp(NextApp)); 30 | }); 31 | } 32 | serviceWorker.unregister(); -------------------------------------------------------------------------------- /src/polyfills.js: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import ThemeOptions from "./ThemeOptions"; 2 | 3 | const reducer = { 4 | ThemeOptions, 5 | }; 6 | 7 | export default reducer; 8 | --------------------------------------------------------------------------------