From 9113dbd668d66556ddbf2c2154763fab388832e9 Mon Sep 17 00:00:00 2001 From: xidedix Date: Sun, 16 Feb 2020 20:24:20 +0100 Subject: [PATCH 001/198] CoreUI v3.0.0-alpha.0 for React - initial commit --- package.json | 24 +- src/Aside.js | 76 ---- src/Aside.md | 13 - src/AsideToggler.js | 76 ---- src/AsideToggler.md | 12 - src/Breadcrumb.js | 101 ------ src/Breadcrumb.md | 14 - src/Breadcrumb2.js | 109 ------ src/CAlert.js | 108 ++++++ src/CBadge.js | 55 +++ src/CBreadcrumb.js | 138 +++++++ src/CBreadcrumbCustom.js | 64 ++++ src/CBreadcrumbItem.js | 47 +++ src/CButton.js | 105 ++++++ src/CButtonClose.js | 48 +++ src/CButtonGroup.js | 51 +++ src/CButtonToolbar.js | 50 +++ src/CCallout.js | 47 +++ src/CCard.js | 103 ++++++ src/CCardBody.js | 47 +++ src/CCardColumn.js | 43 +++ src/CCardDeck.js | 44 +++ src/CCardFooter.js | 44 +++ src/CCardGroup.js | 48 +++ src/CCardHeader.js | 44 +++ src/CCardImg.js | 46 +++ src/CCardImgOverlay.js | 44 +++ src/CCardLink.js | 44 +++ src/CCardSubtitle.js | 44 +++ src/CCardText.js | 44 +++ src/CCardTitle.js | 43 +++ src/CCarousel.js | 123 +++++++ src/CCarouselCaption.js | 47 +++ src/CCarouselControl.js | 67 ++++ src/CCarouselCustom.js | 224 ++++++++++++ src/CCarouselIndicators.js | 64 ++++ src/CCarouselItem.js | 118 ++++++ src/CCharts.js | 171 +++++++++ src/CChartsOld.js | 64 ++++ src/CCol.js | 102 ++++++ src/CCollapse.js | 76 ++++ src/CCollapseCustom.js | 130 +++++++ src/CContainer.js | 46 +++ src/CCustomInput.js | 96 +++++ src/CDataTable.js | 654 ++++++++++++++++++++++++++++++++++ src/CDataTable.module.css | 17 + src/CDropdown.js | 45 +++ src/CDropdownCustom.js | 266 ++++++++++++++ src/CDropdownItem.js | 106 ++++++ src/CDropdownMenu.js | 93 +++++ src/CDropdownToggle.js | 135 +++++++ src/CEmbed.js | 73 ++++ src/CEmbedObject.js | 44 +++ src/CFade.js | 76 ++++ src/CFooter.js | 49 +++ src/CForm.js | 50 +++ src/CFormFeedback.js | 52 +++ src/CFormGroup.js | 56 +++ src/CFormText.js | 51 +++ src/CHeader.js | 52 +++ src/CHeaderBrand.js | 42 +++ src/CHeaderNav.js | 45 +++ src/CHeaderNavItem.js | 62 ++++ src/CHeaderNavLink.js | 42 +++ src/CHeaderSubheader.js | 45 +++ src/CIcon.js | 68 ++++ src/CIcon.module.css | 69 ++++ src/CIconRaw.js | 134 +++++++ src/CImg.js | 105 ++++++ src/CInput.js | 130 +++++++ src/CInputGroup.js | 47 +++ src/CInputGroupAddon.js | 59 +++ src/CInputGroupText.js | 44 +++ src/CJumbotron.js | 47 +++ src/CLabel.js | 120 +++++++ src/CLink.js | 72 ++++ src/CListGroup.js | 55 +++ src/CListGroupHeading.js | 44 +++ src/CListGroupItem.js | 74 ++++ src/CListGroupText.js | 44 +++ src/CMedia.js | 53 +++ src/CMediaAside.js | 72 ++++ src/CMediaBody.js | 44 +++ src/CModal.js | 375 +++++++++++++++++++ src/CModalBody.js | 44 +++ src/CModalFooter.js | 44 +++ src/CModalHeader.js | 84 +++++ src/CNav.js | 75 ++++ src/CNavItem.js | 66 ++++ src/CNavLink.js | 43 +++ src/CNavbar.js | 71 ++++ src/CNavbarBrand.js | 88 +++++ src/CNavbarNav.js | 46 +++ src/CNavbarText.js | 45 +++ src/CPagination.js | 138 +++++++ src/CPaginationItem.js | 72 ++++ src/CPaginationLink.js | 114 ++++++ src/CPopover.js | 70 ++++ src/CPopoverBody.js | 44 +++ src/CPopoverHeader.js | 44 +++ src/CPopperContent.js | 183 ++++++++++ src/CPopperTargetHelper.js | 23 ++ src/CPortal.js | 48 +++ src/CProgress.js | 123 +++++++ src/CRow.js | 56 +++ src/CSidebar.js | 166 +++++++++ src/CSidebarBrand.js | 120 +++++++ src/CSidebarClose.js | 41 +++ src/CSidebarFooter.js | 44 +++ src/CSidebarForm.js | 44 +++ src/CSidebarHeader.js | 47 +++ src/CSidebarMinimizer.js | 44 +++ src/CSidebarNav.js | 180 ++++++++++ src/CSidebarNavDivider.js | 42 +++ src/CSidebarNavDropdown.js | 129 +++++++ src/CSidebarNavItem.js | 72 ++++ src/CSidebarNavLink.js | 77 ++++ src/CSidebarNavTitle.js | 42 +++ src/CSpinner.js | 66 ++++ src/CSwitch.js | 171 +++++++++ src/CTabContent.js | 61 ++++ src/CTabPane.js | 50 +++ src/CTable.js | 89 +++++ src/CToast.js | 149 ++++++++ src/CToast.module.css | 12 + src/CToastBody.js | 44 +++ src/CToastHeader.js | 47 +++ src/CToaster.js | 51 +++ src/CToggler.js | 82 +++++ src/CTooltip.js | 70 ++++ src/CTooltipPopoverWrapper.js | 343 ++++++++++++++++++ src/CWidgetBrand.js | 151 ++++++++ src/CWidgetBrandOld.js | 77 ++++ src/CWidgetDropdown.js | 127 +++++++ src/CWidgetIcon.js | 103 ++++++ src/CWidgetProgress.js | 78 ++++ src/CWidgetProgressIcon.js | 77 ++++ src/CWidgetSimple.js | 82 +++++ src/Footer.js | 50 --- src/Footer.md | 8 - src/Header.js | 48 --- src/Header.md | 10 - src/HeaderDropdown.js | 44 --- src/HeaderDropdown.md | 3 - src/NavbarBrand.js | 80 ----- src/NavbarBrand.md | 24 -- src/README.md | 5 - src/Shared/Slot.js | 28 ++ src/Shared/classes.js | 20 +- src/Shared/helper.js | 316 ++++++++++++++++ src/Shared/index.js | 1 - src/Shared/layout/layout.js | 102 ------ src/Shared/toggle-classes.js | 13 - src/Sidebar.js | 119 ------- src/Sidebar.md | 25 -- src/SidebarFooter.js | 35 -- src/SidebarFooter.md | 3 - src/SidebarForm.js | 34 -- src/SidebarForm.md | 3 - src/SidebarHeader.js | 34 -- src/SidebarHeader.md | 3 - src/SidebarMinimizer.js | 51 --- src/SidebarMinimizer.md | 8 - src/SidebarNav.js | 205 ----------- src/SidebarNav.md | 134 ------- src/SidebarNav2.js | 281 --------------- src/SidebarToggler.js | 62 ---- src/SidebarToggler.md | 11 - src/Switch.js | 142 -------- src/Switch.md | 22 -- src/index.js | 140 +++++++- 171 files changed, 11383 insertions(+), 1995 deletions(-) delete mode 100644 src/Aside.js delete mode 100644 src/Aside.md delete mode 100644 src/AsideToggler.js delete mode 100644 src/AsideToggler.md delete mode 100644 src/Breadcrumb.js delete mode 100644 src/Breadcrumb.md delete mode 100644 src/Breadcrumb2.js create mode 100644 src/CAlert.js create mode 100644 src/CBadge.js create mode 100644 src/CBreadcrumb.js create mode 100644 src/CBreadcrumbCustom.js create mode 100644 src/CBreadcrumbItem.js create mode 100644 src/CButton.js create mode 100644 src/CButtonClose.js create mode 100644 src/CButtonGroup.js create mode 100644 src/CButtonToolbar.js create mode 100644 src/CCallout.js create mode 100644 src/CCard.js create mode 100644 src/CCardBody.js create mode 100644 src/CCardColumn.js create mode 100644 src/CCardDeck.js create mode 100644 src/CCardFooter.js create mode 100644 src/CCardGroup.js create mode 100644 src/CCardHeader.js create mode 100644 src/CCardImg.js create mode 100644 src/CCardImgOverlay.js create mode 100644 src/CCardLink.js create mode 100644 src/CCardSubtitle.js create mode 100644 src/CCardText.js create mode 100644 src/CCardTitle.js create mode 100644 src/CCarousel.js create mode 100644 src/CCarouselCaption.js create mode 100644 src/CCarouselControl.js create mode 100644 src/CCarouselCustom.js create mode 100644 src/CCarouselIndicators.js create mode 100644 src/CCarouselItem.js create mode 100644 src/CCharts.js create mode 100644 src/CChartsOld.js create mode 100644 src/CCol.js create mode 100644 src/CCollapse.js create mode 100644 src/CCollapseCustom.js create mode 100644 src/CContainer.js create mode 100644 src/CCustomInput.js create mode 100644 src/CDataTable.js create mode 100644 src/CDataTable.module.css create mode 100644 src/CDropdown.js create mode 100644 src/CDropdownCustom.js create mode 100644 src/CDropdownItem.js create mode 100644 src/CDropdownMenu.js create mode 100644 src/CDropdownToggle.js create mode 100644 src/CEmbed.js create mode 100644 src/CEmbedObject.js create mode 100644 src/CFade.js create mode 100644 src/CFooter.js create mode 100644 src/CForm.js create mode 100644 src/CFormFeedback.js create mode 100644 src/CFormGroup.js create mode 100644 src/CFormText.js create mode 100644 src/CHeader.js create mode 100644 src/CHeaderBrand.js create mode 100644 src/CHeaderNav.js create mode 100644 src/CHeaderNavItem.js create mode 100644 src/CHeaderNavLink.js create mode 100644 src/CHeaderSubheader.js create mode 100644 src/CIcon.js create mode 100644 src/CIcon.module.css create mode 100644 src/CIconRaw.js create mode 100644 src/CImg.js create mode 100644 src/CInput.js create mode 100644 src/CInputGroup.js create mode 100644 src/CInputGroupAddon.js create mode 100644 src/CInputGroupText.js create mode 100644 src/CJumbotron.js create mode 100644 src/CLabel.js create mode 100644 src/CLink.js create mode 100644 src/CListGroup.js create mode 100644 src/CListGroupHeading.js create mode 100644 src/CListGroupItem.js create mode 100644 src/CListGroupText.js create mode 100644 src/CMedia.js create mode 100644 src/CMediaAside.js create mode 100644 src/CMediaBody.js create mode 100644 src/CModal.js create mode 100644 src/CModalBody.js create mode 100644 src/CModalFooter.js create mode 100644 src/CModalHeader.js create mode 100644 src/CNav.js create mode 100644 src/CNavItem.js create mode 100644 src/CNavLink.js create mode 100644 src/CNavbar.js create mode 100644 src/CNavbarBrand.js create mode 100644 src/CNavbarNav.js create mode 100644 src/CNavbarText.js create mode 100644 src/CPagination.js create mode 100644 src/CPaginationItem.js create mode 100644 src/CPaginationLink.js create mode 100644 src/CPopover.js create mode 100644 src/CPopoverBody.js create mode 100644 src/CPopoverHeader.js create mode 100644 src/CPopperContent.js create mode 100644 src/CPopperTargetHelper.js create mode 100644 src/CPortal.js create mode 100644 src/CProgress.js create mode 100644 src/CRow.js create mode 100644 src/CSidebar.js create mode 100644 src/CSidebarBrand.js create mode 100644 src/CSidebarClose.js create mode 100644 src/CSidebarFooter.js create mode 100644 src/CSidebarForm.js create mode 100644 src/CSidebarHeader.js create mode 100644 src/CSidebarMinimizer.js create mode 100644 src/CSidebarNav.js create mode 100644 src/CSidebarNavDivider.js create mode 100644 src/CSidebarNavDropdown.js create mode 100644 src/CSidebarNavItem.js create mode 100644 src/CSidebarNavLink.js create mode 100644 src/CSidebarNavTitle.js create mode 100644 src/CSpinner.js create mode 100644 src/CSwitch.js create mode 100644 src/CTabContent.js create mode 100644 src/CTabPane.js create mode 100644 src/CTable.js create mode 100644 src/CToast.js create mode 100644 src/CToast.module.css create mode 100644 src/CToastBody.js create mode 100644 src/CToastHeader.js create mode 100644 src/CToaster.js create mode 100644 src/CToggler.js create mode 100644 src/CTooltip.js create mode 100644 src/CTooltipPopoverWrapper.js create mode 100644 src/CWidgetBrand.js create mode 100644 src/CWidgetBrandOld.js create mode 100644 src/CWidgetDropdown.js create mode 100644 src/CWidgetIcon.js create mode 100644 src/CWidgetProgress.js create mode 100644 src/CWidgetProgressIcon.js create mode 100644 src/CWidgetSimple.js delete mode 100644 src/Footer.js delete mode 100644 src/Footer.md delete mode 100644 src/Header.js delete mode 100644 src/Header.md delete mode 100644 src/HeaderDropdown.js delete mode 100644 src/HeaderDropdown.md delete mode 100644 src/NavbarBrand.js delete mode 100644 src/NavbarBrand.md create mode 100644 src/Shared/Slot.js create mode 100644 src/Shared/helper.js delete mode 100644 src/Shared/layout/layout.js delete mode 100644 src/Shared/toggle-classes.js delete mode 100644 src/Sidebar.js delete mode 100644 src/Sidebar.md delete mode 100644 src/SidebarFooter.js delete mode 100644 src/SidebarFooter.md delete mode 100644 src/SidebarForm.js delete mode 100644 src/SidebarForm.md delete mode 100644 src/SidebarHeader.js delete mode 100644 src/SidebarHeader.md delete mode 100644 src/SidebarMinimizer.js delete mode 100644 src/SidebarMinimizer.md delete mode 100644 src/SidebarNav.js delete mode 100644 src/SidebarNav.md delete mode 100644 src/SidebarNav2.js delete mode 100644 src/SidebarToggler.js delete mode 100644 src/SidebarToggler.md delete mode 100644 src/Switch.js delete mode 100644 src/Switch.md diff --git a/package.json b/package.json index 06e160ca..b6a8d44a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "2.5.5", + "version": "3.0.0-alpha.0", "description": "CoreUI React Bootstrap 4 components", "license": "MIT", "author": { @@ -10,6 +10,10 @@ "twitter": "https://twitter.com/lukaszholeczek" }, "contributors": [ + { + "name": "Tomasz John", + "url": "https://github.com/thomasjohn" + }, { "name": "Andrzej Kopański", "url": "https://github.com/xidedix" @@ -36,30 +40,36 @@ }, "dependencies": { "classnames": "^2.2.6", - "core-js": "^2.6.11", + "core-js": "^3.6.4", "prop-types": "^15.7.2", "react-onclickout": "^2.0.8", - "react-perfect-scrollbar": "~1.5.8" + "react-perfect-scrollbar": "~1.5.8", + "react-transition-group": "^4.3.0" }, "peerDependencies": { - "@coreui/coreui": "^2.1.16", + "@coreui/coreui": "3.0.0-rc.0", "react": "^16.12.0", "react-router-dom": "^5.1.2", "mutationobserver-shim": "^0.3.3" }, "devDependencies": { - "@coreui/icons": "~0.3.0", + "@coreui/icons": "^1.0.1", + "@coreui/coreui-chartjs": "^2.0.0-beta.0", "babel-eslint": "^10.0.3", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", - "eslint": "^5.16.0", + "eslint": "^6.8.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-react": "^7.18.3", + "lodash.isfunction": "^3.0.9", + "lodash.isobject": "^3.0.2", + "lodash.tonumber": "^4.0.3", "nwb": "^0.23.0", "react": "^16.12.0", + "react-app-polyfill": "^1.0.6", "react-dom": "^16.12.0", + "react-popper": "^0.10.4", "react-router-dom": "^5.1.2", - "reactstrap": "^8.4.1", "sinon": "^5.1.1" }, "repository": { diff --git a/src/Aside.js b/src/Aside.js deleted file mode 100644 index aba1295e..00000000 --- a/src/Aside.js +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { asideMenuCssClasses, checkBreakpoint, validBreakpoints } from './Shared'; -import toggleClasses from './Shared/toggle-classes'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - display: PropTypes.string, - fixed: PropTypes.bool, - isOpen: PropTypes.bool, - offCanvas: PropTypes.bool, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'aside', - display: '', - fixed: false, - isOpen: false, - offCanvas: true -}; - -class AppAside extends Component { - constructor(props) { - super(props); - - this.isFixed = this.isFixed.bind(this); - this.isOffCanvas = this.isOffCanvas.bind(this); - this.displayBreakpoint = this.displayBreakpoint.bind(this); - } - - componentDidMount() { - this.isFixed(this.props.fixed); - this.isOffCanvas(this.props.offCanvas); - this.displayBreakpoint(this.props.display); - } - - isFixed(fixed) { - if (fixed) { document.body.classList.add('aside-menu-fixed'); } - } - - isOffCanvas(offCanvas) { - if (offCanvas) { document.body.classList.add('aside-menu-off-canvas'); } - } - - displayBreakpoint(display) { - if (display && checkBreakpoint(display, validBreakpoints)) { - const cssClass = `aside-menu-${display}-show` - toggleClasses(cssClass, asideMenuCssClasses, true) - } - } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - delete attributes.display - delete attributes.fixed - delete attributes.offCanvas - delete attributes.isOpen - - const classes = classNames(className, 'aside-menu'); - - return ( - - {children} - - ); - } -} - -AppAside.propTypes = propTypes; -AppAside.defaultProps = defaultProps; - -export default AppAside; diff --git a/src/Aside.md b/src/Aside.md deleted file mode 100644 index 7f8fa2a4..00000000 --- a/src/Aside.md +++ /dev/null @@ -1,13 +0,0 @@ -### CoreUI `Aside` menu component - -| prop | default | -| ------- | --------- -| children | -| className | `aside-menu` -| display | `sm, md, lg, xl, ""` -| fixed | `false` -| hidden | `false` *deprecated* in v2 as conflicting with HTML5 `hidden` attribute -| isOpen | `false` -| offCanvas | `true` -| tag | `aside` - diff --git a/src/AsideToggler.js b/src/AsideToggler.js deleted file mode 100644 index 38f4ffc3..00000000 --- a/src/AsideToggler.js +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from './Shared/index'; -import toggleClasses from './Shared/toggle-classes'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - defaultOpen: PropTypes.bool, - display: PropTypes.any, - mobile: PropTypes.bool, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - type: PropTypes.string -}; - -const defaultProps = { - defaultOpen: false, - display: 'lg', - mobile: false, - tag: 'button', - type: 'button' -}; - -class AppAsideToggler extends Component { - constructor(props) { - super(props); - this.asideToggle = this.asideToggle.bind(this); - - this.state = {}; - } - - componentDidMount() { - this.toggle(this.props.defaultOpen) - } - - toggle (force) { - const [display, mobile] = [this.props.display, this.props.mobile]; - let cssClass = asideMenuCssClasses[0]; - if (!mobile && display && checkBreakpoint(display, validBreakpoints)) { - cssClass = `aside-menu-${display}-show` - } - toggleClasses(cssClass, asideMenuCssClasses, force) - } - - asideToggle(e) { - e.preventDefault(); - this.toggle() - } - - render() { - const { className, children, type, tag: Tag, ...attributes } = this.props; - - delete attributes.defaultOpen; - delete attributes.display; - delete attributes.mobile; - - const classes = classNames(className, 'navbar-toggler'); - - return ( - this.asideToggle(event)} - > - {children || } - - ); - } -} - -AppAsideToggler.propTypes = propTypes; -AppAsideToggler.defaultProps = defaultProps; - -export default AppAsideToggler; diff --git a/src/AsideToggler.md b/src/AsideToggler.md deleted file mode 100644 index d185c64c..00000000 --- a/src/AsideToggler.md +++ /dev/null @@ -1,12 +0,0 @@ -### CoreUI `AsideToggler` component - - -prop | default ---- | --- -children | `` -className | `navbar-toggler` -defaultOpen| `false` -display | `lg` -mobile | `false` -tag | `button` -type | `button` diff --git a/src/Breadcrumb.js b/src/Breadcrumb.js deleted file mode 100644 index a1b76a00..00000000 --- a/src/Breadcrumb.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { Component } from 'react'; -import { Route, Link, matchPath } from 'react-router-dom'; -import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -let routes; - -const getPaths = (pathname) => { - const paths = ['/']; - - if (pathname === '/') return paths; - - pathname.split('/').reduce((prev, curr) => { - const currPath = `${prev}/${curr}`; - paths.push(currPath); - return currPath; - }); - return paths; -}; - -const findRouteName = (url) => { - const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact})); - return (aroute && aroute.name) ? aroute.name : null -}; - -const BreadcrumbsItem = ({ match }) => { - const routeName = findRouteName(match.url); - if (routeName) { - return ( - // eslint-disable-next-line react/prop-types - match.isExact ? - {routeName} - : - - - {routeName} - - - ); - } - return null; -}; - -BreadcrumbsItem.propTypes = { - match: PropTypes.shape({ - url: PropTypes.string - }) -}; - -const Breadcrumbs = (args) => { - const paths = getPaths(args.location.pathname); - const items = paths.map((path, i) => ); - return ( - - {items} - - ); -}; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - appRoutes: PropTypes.any, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'div', - className: '', - appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }] -}; - -class AppBreadcrumb extends Component { - constructor(props) { - super(props); - - this.state = { routes: props.appRoutes }; - routes = this.state.routes; - } - - render() { - const { className, tag: Tag, ...attributes } = this.props; - - delete attributes.children - delete attributes.appRoutes - - const classes = classNames(className); - - return ( - - - - ); - } -} - -AppBreadcrumb.propTypes = propTypes; -AppBreadcrumb.defaultProps = defaultProps; - -export default AppBreadcrumb; diff --git a/src/Breadcrumb.md b/src/Breadcrumb.md deleted file mode 100644 index 98433a96..00000000 --- a/src/Breadcrumb.md +++ /dev/null @@ -1,14 +0,0 @@ -### CoreUI `Breadcrumb` component - -usage in `DefaultLayout`: -```jsx -import * as router from 'react-router-dom'; -import { AppBreadcrumb2 as AppBreadcrumb } from '@coreui/react'; -// routes config -import routes from '../../routes.js'; -``` - -```html - -``` -_todo_ diff --git a/src/Breadcrumb2.js b/src/Breadcrumb2.js deleted file mode 100644 index 5bc929d5..00000000 --- a/src/Breadcrumb2.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { Component } from 'react'; -import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -let routes; -let router; - -const getPaths = (pathname) => { - const paths = ['/']; - - if (pathname === '/') return paths; - - pathname.split('/').reduce((prev, curr) => { - const currPath = `${prev}/${curr}`; - paths.push(currPath); - return currPath; - }); - return paths; -}; - -const findRouteName2 = (url) => { - const matchPath = router.matchPath; - const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact})); - return (aroute && aroute.name) ? aroute.name : null -}; - -const BreadcrumbsItem2 = ({ match }) => { - const routeName = findRouteName2(match.url); - const Link = router.Link; - if (routeName) { - return ( - // eslint-disable-next-line react/prop-types - match.isExact ? - {routeName} - : - - - {routeName} - - - ); - } - return null; -}; - -BreadcrumbsItem2.propTypes = { - match: PropTypes.shape({ - url: PropTypes.string - }) -}; - -const Breadcrumbs2 = (args) => { - const Route = router.Route; - const paths = getPaths(args.location.pathname); - const items = paths.map((path, i) => ); - return ( - - {items} - - ); -}; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - appRoutes: PropTypes.any, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - router: PropTypes.any -}; - -const defaultProps = { - tag: 'div', - className: '', - appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }] -}; - -class AppBreadcrumb2 extends Component { - constructor(props) { - super(props); - - this.state = { routes: props.appRoutes }; - routes = this.state.routes; - router = props.router; - } - - render() { - const { className, tag: Tag, ...attributes } = this.props; - - delete attributes.children - delete attributes.appRoutes - delete attributes.router - - const classes = classNames(className); - - const Route = router.Route; - - return ( - - - - ); - } -} - -AppBreadcrumb2.propTypes = propTypes; -AppBreadcrumb2.defaultProps = defaultProps; - -export default AppBreadcrumb2; diff --git a/src/CAlert.js b/src/CAlert.js new file mode 100644 index 00000000..cd3c5d74 --- /dev/null +++ b/src/CAlert.js @@ -0,0 +1,108 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CFade from './CFade'; + +//component - CoreUI / CAlert + +const CAlert = props=>{ + + let { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + toggle, + transition, + closeAriaLabel, + closeClassName, + color, + fade, + show, + iconSlot, + closeProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'alert', + `alert-${color}`, + { 'alert-dismissible': toggle } + ), cssModule); + + const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule); + + const alertTransition = { + ...CFade.defaultProps, + ...transition, + baseClass: fade ? transition.baseClass : '', + timeout: fade ? transition.timeout : 0, + }; + + const [isOpen, setIsOpen] = useState(true); + + if (!custom){ + let userToggle = toggle; + toggle = ()=>{ + setIsOpen(!isOpen); + if (userToggle) + userToggle(); + }; + show = isOpen; + } + + return ( + + {!custom ? + + : null} + {children} + + ); + +} + +CAlert.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + toggle: PropTypes.func, + closeClassName: PropTypes.string, + closeProps: PropTypes.object, + closeAriaLabel: PropTypes.string, + color: PropTypes.string, + fade: PropTypes.bool, + show: PropTypes.bool, + transition: PropTypes.shape(CFade.propTypes), + iconSlot: PropTypes.node +}; + +CAlert.defaultProps = { + tag: 'div', + // + color: 'success', + show: true, + closeAriaLabel: 'Close', + fade: true, + transition: { + ...CFade.defaultProps, + unmountOnExit: true, + }, + iconSlot: × +}; + +//export +export default CAlert; diff --git a/src/CBadge.js b/src/CBadge.js new file mode 100644 index 00000000..8198157d --- /dev/null +++ b/src/CBadge.js @@ -0,0 +1,55 @@ +import React,{useMemo, useRef} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CBadge + +const CBadge = props=>{ + + let { + tag: Tag, + className, + cssModule, + // + innerRef, + color, + shape, + ...attributes + } = props; + + // render + + const classes = mapToCssModules(classNames( + className, + 'badge', + 'badge-' + color, + shape ? 'badge-'+shape : false + ), cssModule); + + if (attributes.href && Tag === 'span') { + Tag = 'a'; + } + + return ( + + ); + +} + +CBadge.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + color: PropTypes.string, + shape: PropTypes.string +}; + +CBadge.defaultProps = { + tag: 'span' +}; + +export default CBadge; diff --git a/src/CBreadcrumb.js b/src/CBreadcrumb.js new file mode 100644 index 00000000..b2a7407e --- /dev/null +++ b/src/CBreadcrumb.js @@ -0,0 +1,138 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Route, Link, matchPath} from 'react-router-dom'; +import CBreadcrumbCustom from './CBreadcrumbCustom'; +import CBreadcrumbItem from './CBreadcrumbItem'; + +let routes; + +const getPaths = pathname=>{ + const paths = ['/']; + if (pathname === '/') return paths; + pathname.split('/').reduce((prev, curr) => { + const currPath = `${prev}/${curr}`; + paths.push(currPath); + return currPath; + }); + return paths; +}; + +const findRouteName = url=>{ + const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact})); + return (aroute && aroute.name) ? aroute.name : null +}; + +//component - CoreUI / CBreadcrumbRouteItem + +const CBreadcrumbRouteItem = ({ match }) => { + const routeName = findRouteName(match.url); + if (routeName) { + return ( + match.isExact ? + {routeName} + : + + + {routeName} + + + ); + } + return null; +}; + +CBreadcrumbRouteItem.propTypes = { + match: PropTypes.shape({ + url: PropTypes.string + }) +}; + +//component - CoreUI / CBreadcrumbRouter + +let postItems; + +const CBreadcrumbRouter = args=>{ + + const paths = getPaths(args.location.pathname); + const items = paths.map( + (path, i) => + ); + if (postItems) + items.push(postItems); + + // render + + return items; + /* + return ( + + {items} + + ); + */ + +}; + +//component - CoreUI / CBreadcrumb + +const CBreadcrumb = props=>{ + + const { + tag: Tag, + children, + className, + custom, + // + routesProps, + ...attributes + } = props; + + if (children) + postItems = children; + else { + postItems = null; + } + + routes = props.appRoutes; + + //render + + delete attributes.appRoutes; + const classes = classNames(className); + + if (!custom){ + return ( + + + + ); + } + + return ( + + {children} + + ); + +} + +CBreadcrumb.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + appRoutes: PropTypes.any, + routesProps: PropTypes.object +}; + +CBreadcrumb.defaultProps = { + tag: 'div', + className: '', + appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }] +}; + +export default CBreadcrumb; diff --git a/src/CBreadcrumbCustom.js b/src/CBreadcrumbCustom.js new file mode 100644 index 00000000..6f782593 --- /dev/null +++ b/src/CBreadcrumbCustom.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CBreadcrumbCustom + +const CBreadcrumbCustom = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + listClassName, + listTag: ListTag, + 'aria-label': label, + listProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className + ), cssModule); + + const listClasses = mapToCssModules(classNames( + 'breadcrumb', + listClassName + ), cssModule); + + return ( + + + {children} + + + ); + +}; + +CBreadcrumbCustom.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + listTag: tagPropType, + listClassName: PropTypes.string, + listProps: PropTypes.object, + 'aria-label': PropTypes.string +}; + +CBreadcrumbCustom.defaultProps = { + tag: 'nav', + listTag: 'ol', + 'aria-label': 'breadcrumb' +}; + +export default CBreadcrumbCustom; diff --git a/src/CBreadcrumbItem.js b/src/CBreadcrumbItem.js new file mode 100644 index 00000000..ecbca7ec --- /dev/null +++ b/src/CBreadcrumbItem.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CBreadcrumbItem + +const CBreadcrumbItem = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + active, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + active ? 'active' : false, + 'breadcrumb-item' + ), cssModule); + + return ( + + ); + +} + +CBreadcrumbItem.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool +}; + +CBreadcrumbItem.defaultProps = { + tag: 'li' +}; + +export default CBreadcrumbItem; diff --git a/src/CButton.js b/src/CButton.js new file mode 100644 index 00000000..d5c3f9f8 --- /dev/null +++ b/src/CButton.js @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CButton + +const CButton = props=>{ + + let { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + active, + 'aria-label': ariaLabel, + block, + close, + color, + size, + textHtml, + pressed, + shape, + variant, + ...attributes + } = props; + + const onClick = e=>{ + if (props.disabled) { + e.preventDefault(); + return; + } + if (props.onClick) { + props.onClick(e); + } + } + + //render + + if (close && typeof children === 'undefined') { + children = ×; + } + + const btnColor = `btn${variant ? '-'+variant : ''}-${color}`; + + const classes = mapToCssModules(classNames( + className, + { close }, + close || 'btn', + close || btnColor, + size ? `btn-${size}` : false, + block ? 'btn-block' : false, + shape ? `btn-${shape}` : false, + pressed ? 'btn-pressed' : false, + { 'active': active, + 'disabled': props.disabled } + ), cssModule); + + if (attributes.href && Tag === 'button') { + Tag = 'a'; + } + + const defaultAriaLabel = close ? 'Close' : null; + + return ; + +} + +CButton.propTypes = { + tag: tagPropType, + children: PropTypes.node, + cssModule: PropTypes.object, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + block: PropTypes.bool, + shape: PropTypes.string, + variant: PropTypes.oneOf(['', 'ghost', 'outline']), + color: PropTypes.string, + close: PropTypes.bool, + disabled: PropTypes.bool, + onClick: PropTypes.func, + size: PropTypes.string, + pressed: PropTypes.bool, + textHtml: PropTypes.string, + 'aria-label': PropTypes.string, +}; + +CButton.defaultProps = { + tag: 'button' +}; + +//export +export default CButton; diff --git a/src/CButtonClose.js b/src/CButtonClose.js new file mode 100644 index 00000000..f5a39184 --- /dev/null +++ b/src/CButtonClose.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CButtonClose + +const CButtonClose = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + iconHtml, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + 'close', + className + ), cssModule); + + return ( + {children||iconHtml} + ); + +} + +CButtonClose.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + iconHtml: PropTypes.oneOfType([PropTypes.node, PropTypes.string])//object +}; + +CButtonClose.defaultProps = { + tag: 'button', + iconHtml: × +}; + +export default CButtonClose; diff --git a/src/CButtonGroup.js b/src/CButtonGroup.js new file mode 100644 index 00000000..fe4f1605 --- /dev/null +++ b/src/CButtonGroup.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CButtonGroup + +const CButtonGroup = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + size, + vertical, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + size ? 'btn-group-' + size : false, + vertical ? 'btn-group-vertical' : 'btn-group' + ), cssModule); + + return ( + + ); + +} + +CButtonGroup.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + size: PropTypes.string, + vertical: PropTypes.bool, + role: PropTypes.string +}; + +CButtonGroup.defaultProps = { + tag: 'div', + role: 'group', +}; + +export default CButtonGroup; diff --git a/src/CButtonToolbar.js b/src/CButtonToolbar.js new file mode 100644 index 00000000..2960dcdc --- /dev/null +++ b/src/CButtonToolbar.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CButtonToolbar + +const CButtonToolbar = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + justify, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + justify ? 'justify-content-between' : false, + 'btn-toolbar' + ), cssModule); + + return ( + + ); + +} + +CButtonToolbar.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + role: PropTypes.string, + justify: PropTypes.bool, + 'aria-label': PropTypes.string, +}; + +CButtonToolbar.defaultProps = { + tag: 'div', + role: 'toolbar', +}; + +export default CButtonToolbar; diff --git a/src/CCallout.js b/src/CCallout.js new file mode 100644 index 00000000..153f356d --- /dev/null +++ b/src/CCallout.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCallout + +const CCallout = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + color, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + 'c-callout', + 'c-callout-'+color, + className + ), cssModule); + + return ( + + ); + +} + +CCallout.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + color: PropTypes.string +}; + +CCallout.defaultProps = { + tag: 'div', +}; + +export default CCallout; diff --git a/src/CCard.js b/src/CCard.js new file mode 100644 index 00000000..302fc7fb --- /dev/null +++ b/src/CCard.js @@ -0,0 +1,103 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules, deprecated} from './Shared/helper.js'; +import CCardBody from './CCardBody'; +import CCardHeader from './CCardHeader'; +import CCardFooter from './CCardFooter'; + +//component - CoreUI / CCard + +const CCard = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + color, + textColor, + borderColor, + accentColor, + headerSlot, + footerSlot, + align, + bodyClassName, + bodyProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card', + align ? `text-${align}` : false, + textColor ? `text-${textColor}` : false, + color ? `bg-${color}` : false, + borderColor ? `border-${borderColor}` : false, + accentColor ? `card-accent-${accentColor}` : false, + ), cssModule); + + if (!custom) + return ( + + {headerSlot?( + + {headerSlot} + + ): ''} + + {children} + + {footerSlot?( + + {footerSlot} + + ): ''} + + ); + + return ( + + ); + +} + +CCard.sharedPropTypes = { + align: PropTypes.string, + color: PropTypes.string, + borderColor: PropTypes.string, + textColor: PropTypes.string, + accentColor: PropTypes.string, + bodyClassName: PropTypes.string, + bodyProps: PropTypes.object +} + +CCard.propTypes = { + ...CCard.sharedPropTypes, + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + align: PropTypes.string, + color: PropTypes.string, + borderColor: PropTypes.string, + textColor: PropTypes.string, + accentColor: PropTypes.string, + bodyClassName: PropTypes.string, + bodyProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + headerSlot: PropTypes.node, + footerSlot: PropTypes.node +} + +CCard.defaultProps = { + tag: 'div' +} + +export default CCard; diff --git a/src/CCardBody.js b/src/CCardBody.js new file mode 100644 index 00000000..593332a3 --- /dev/null +++ b/src/CCardBody.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardBody + +const CCardBody = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + overlay, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-body', + overlay ? 'card-img-overlay' : null + ), cssModule); + + return ( + + ); + +} + +CCardBody.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + overlay: PropTypes.bool, +}; + +CCardBody.defaultProps = { + tag: 'div' +}; + +export default CCardBody; diff --git a/src/CCardColumn.js b/src/CCardColumn.js new file mode 100644 index 00000000..242f7d53 --- /dev/null +++ b/src/CCardColumn.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardColumn + +const CCardColumn = props=>{ + + const { + tag: Tag, + className, + cssModule, + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-columns' + ), cssModule); + + return ( + + ); + +} + +CCardColumn.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardColumn.defaultProps = { + tag: 'div' +}; + +export default CCardColumn; diff --git a/src/CCardDeck.js b/src/CCardDeck.js new file mode 100644 index 00000000..3032d482 --- /dev/null +++ b/src/CCardDeck.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardDeck + +const CCardDeck = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-deck' + ), cssModule); + + return ( + + ); + +} + +CCardDeck.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardDeck.defaultProps = { + tag: 'div', +}; + +export default CCardDeck; diff --git a/src/CCardFooter.js b/src/CCardFooter.js new file mode 100644 index 00000000..263aba57 --- /dev/null +++ b/src/CCardFooter.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardFooter + +const CCardFooter = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-footer' + ), cssModule); + + return ( + + ); + +} + +CCardFooter.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardFooter.defaultProps = { + tag: 'footer' +}; + +export default CCardFooter; diff --git a/src/CCardGroup.js b/src/CCardGroup.js new file mode 100644 index 00000000..a7947f2a --- /dev/null +++ b/src/CCardGroup.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardGroup + +const CCardGroup = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + deck, + columns, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + columns ? 'card-columns' : deck ? 'card-deck' : 'card-group' + ), cssModule); + + return ( + + ); + +} + +CCardGroup.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + deck: PropTypes.bool, + columns: PropTypes.bool, +}; + +CCardGroup.defaultProps = { + tag: 'div' +}; + +export default CCardGroup; diff --git a/src/CCardHeader.js b/src/CCardHeader.js new file mode 100644 index 00000000..bf7c5823 --- /dev/null +++ b/src/CCardHeader.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +//import CCard, {sharedPropTypes} from './CCard'; + +//component - CoreUI / CCardHeader + +const CCardHeader = props=>{ + + const { + tag: Tag, + className, + cssModule, + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-header' + ), cssModule); + + return ( + + ); + +} + +CCardHeader.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardHeader.defaultProps = { + tag: 'header' +}; + +export default CCardHeader; diff --git a/src/CCardImg.js b/src/CCardImg.js new file mode 100644 index 00000000..90eeb6d2 --- /dev/null +++ b/src/CCardImg.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardImg + +const CCardImg = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + placement, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + placement ? `card-img-${placement}`: 'card-img' + ), cssModule); + + return ( + + ); + +} + +CCardImg.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + placement: PropTypes.string +}; + +CCardImg.defaultProps = { + tag: 'img' +}; + +export default CCardImg; diff --git a/src/CCardImgOverlay.js b/src/CCardImgOverlay.js new file mode 100644 index 00000000..19617584 --- /dev/null +++ b/src/CCardImgOverlay.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardImgOverlay + +const CCardImgOverlay = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-img-overlay' + ), cssModule); + + return ( + + ); + +} + +CCardImgOverlay.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardImgOverlay.defaultProps = { + tag: 'div' +}; + +export default CCardImgOverlay; diff --git a/src/CCardLink.js b/src/CCardLink.js new file mode 100644 index 00000000..3b8e749e --- /dev/null +++ b/src/CCardLink.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardLink + +const CCardLink = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-link' + ), cssModule); + + return ( + + ); + +} + +CCardLink.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardLink.defaultProps = { + tag: 'a' +}; + +export default CCardLink; diff --git a/src/CCardSubtitle.js b/src/CCardSubtitle.js new file mode 100644 index 00000000..11dbdad1 --- /dev/null +++ b/src/CCardSubtitle.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardSubtitle + +const CCardSubtitle = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-subtitle' + ), cssModule); + + return ( + + ); + +} + +CCardSubtitle.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardSubtitle.defaultProps = { + tag: 'h6' +}; + +export default CCardSubtitle; diff --git a/src/CCardText.js b/src/CCardText.js new file mode 100644 index 00000000..81faf21b --- /dev/null +++ b/src/CCardText.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardText + +const CCardText = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-text' + ), cssModule); + + return ( + + ); + +} + +CCardText.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardText.defaultProps = { + tag: 'p' +}; + +export default CCardText; diff --git a/src/CCardTitle.js b/src/CCardTitle.js new file mode 100644 index 00000000..0734135c --- /dev/null +++ b/src/CCardTitle.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCardTitle + +const CCardTitle = props=>{ + + const { + tag: Tag, + className, + cssModule, + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'card-title' + ), cssModule); + + return ( + + ); + +} + +CCardTitle.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CCardTitle.defaultProps = { + tag: 'h4' +}; + +export default CCardTitle; diff --git a/src/CCarousel.js b/src/CCarousel.js new file mode 100644 index 00000000..efe236bf --- /dev/null +++ b/src/CCarousel.js @@ -0,0 +1,123 @@ +import React, {useState, useRef} from 'react'; +import PropTypes from 'prop-types'; +import CCarouselCustom from './CCarouselCustom'; +import CCarouselItem from './CCarouselItem'; +import CCarouselControl from './CCarouselControl'; +import CCarouselIndicators from './CCarouselIndicators'; +import CCarouselCaption from './CCarouselCaption'; + +//component - CoreUI / CCarousel + +const CCarousel = props=>{ + + const { + custom, + autoPlay, + indicators, + controls, + items, + goToIndex + } = props; + + const [activeIndex, setActiveIndex] = useState(props.defaultOpen || false); + + const fields = useRef({animating: false}).current; + + if (!custom){ + + const onExiting = ()=>{ + fields.animating = true; + } + + const onExited = ()=>{ + fields.animating = false; + } + + const next = ()=>{ + if (fields.animating) return; + const nextIndex = activeIndex === props.items.length - 1 ? 0 : activeIndex + 1; + setActiveIndex(nextIndex); + } + + const previous = ()=>{ + if (fields.animating) return; + const nextIndex = activeIndex === 0 ? props.items.length - 1 : activeIndex - 1; + setActiveIndex(nextIndex); + } + + const toIndex = newIndex=>{ + if (fields.animating) return; + setActiveIndex(newIndex); + } + + //render + + const slides = items.map((item) => { + return ( + + {item.altText} + + + ); + }); + + return ( + + {indicators && } + {slides} + {controls && } + {controls && } + + ); + + } + + return ( + + ); + +} + +CCarousel.propTypes = { + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + items: PropTypes.array, + indicators: PropTypes.bool, + controls: PropTypes.bool, + autoPlay: PropTypes.bool, + activeIndex: PropTypes.number, + next: PropTypes.func, + previous: PropTypes.func, + goToIndex: PropTypes.func +}; + +CCarousel.defaultProps = { + controls: true, + indicators: true, + autoPlay: true, +}; + +export default CCarousel; diff --git a/src/CCarouselCaption.js b/src/CCarouselCaption.js new file mode 100644 index 00000000..9e08d299 --- /dev/null +++ b/src/CCarouselCaption.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCarouselCaption + +const CCarouselCaption = props=>{ + + const { + cssModule, + className, + // + innerRef, + captionHeader, + captionText, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'carousel-caption', + 'd-none', + 'd-md-block' + ), cssModule); + + return ( +
+

{captionHeader}

+

{captionText}

+
+ ); + +} + +CCarouselCaption.propTypes = { + cssModule: PropTypes.object, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + captionHeader: PropTypes.string, + captionText: PropTypes.string.isRequired +}; + +export default CCarouselCaption; diff --git a/src/CCarouselControl.js b/src/CCarouselControl.js new file mode 100644 index 00000000..8cbdb265 --- /dev/null +++ b/src/CCarouselControl.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCarouselControl + +const CCarouselControl = props=>{ + + const { + className, + cssModule, + // + innerRef, + direction, + onClickHandler, + directionText, + ...attributes + } = props; + + const onClick = e=>{ + e.preventDefault(); + onClickHandler(); + } + + //render + + const anchorClasses = mapToCssModules(classNames( + className, + `carousel-control-${direction}` + ), cssModule); + + const iconClasses = mapToCssModules(classNames( + `carousel-control-${direction}-icon` + ), cssModule); + + const screenReaderClasses = mapToCssModules(classNames( + 'sr-only' + ), cssModule); + + return ( + + + ); + +} + +CCarouselControl.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + direction: PropTypes.oneOf(['prev', 'next']).isRequired, + onClickHandler: PropTypes.func.isRequired, + directionText: PropTypes.string +}; + +export default CCarouselControl; diff --git a/src/CCarouselCustom.js b/src/CCarouselCustom.js new file mode 100644 index 00000000..2b4fc3a0 --- /dev/null +++ b/src/CCarouselCustom.js @@ -0,0 +1,224 @@ +import React, {useState, useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; +import CCarouselItem from './CCarouselItem'; + +export const Context = React.createContext({}); + +//component - CoreUI / CCarouselCustom + +const CCarouselCustom = props=>{ + + const { + className, + cssModule, + // + innerRef, + slide, + } = props; + + const [direction, setDirection] = useState("right"); + const [indicatorClicked, setIndicatorClicked] = useState(false); + + const fields = useRef({lastProps: null}).current; + + const setInterval = (properties = props)=>{ + clearInterval(); + if (properties.interval) { + fields.cycleInterval = window.setInterval(() => { + properties.next(); + }, parseInt(properties.interval, 10)); + } + } + + const clearInterval = ()=>{ + window.clearInterval(fields.cycleInterval); + } + + const hoverStart = (...args)=>{ + if (props.pause === 'hover') { + clearInterval(); + } + if (props.mouseEnter) { + props.mouseEnter(...args); + } + } + + const hoverEnd = (...args)=>{ + if (props.pause === 'hover') { + setInterval(); + } + if (props.mouseLeave) { + props.mouseLeave(...args); + } + } + + const handleKeyPress = (e)=>{ + if (props.keyboard) { + if (e.keyCode === 37) { + props.previous(); + } else if (e.keyCode === 39) { + props.next(); + } + } + } + + const renderItems = (carouselItems, className)=>{ + const {slide} = props; + return ( +
+ {carouselItems.map((item, index) => { + const isIn = (index === props.activeIndex); + return React.cloneElement(item, { + in: isIn, + slide: slide, + }); + })} +
+ ); + } + + const setState = (oVal, nVal, setF)=>{ + if (nVal===oVal) + return; + setF(nVal); + } + + //effect + + useEffect(() => { + if (props.ride === 'carousel') { + setInterval(); + } + document.addEventListener('keyup', handleKeyPress); + fields._handleKeyPress = handleKeyPress; + return function cleanup() { + clearInterval(); + document.removeEventListener('keyup', fields._handleKeyPress); + }; + }, + []); + + useEffect(() => { + if (fields.wrappedOnClickFunc){ + fields.wrappedOnClickFunc(); + setIndicatorClicked(false); + fields.wrappedOnClickFunc = null; + } + }); + + //render + + setInterval(props); + if (fields.lastProps){ + if (fields.lastProps.activeIndex + 1 === props.activeIndex) { + setState(direction, "right", setDirection); + } else if (fields.lastProps.activeIndex - 1 === props.activeIndex) { + setState(direction, "left", setDirection); + } else if (fields.lastProps.activeIndex > props.activeIndex) { + setState(direction, indicatorClicked ? "left" : "right", setDirection); + } else if (fields.lastProps.activeIndex !== props.activeIndex) { + setState(direction, indicatorClicked ? "right" : "left", setDirection); + } + setState(indicatorClicked, false, setIndicatorClicked); + } + + fields.lastProps = props; + + const outerClasses = mapToCssModules(classNames( + className, + 'carousel', + slide && 'slide' + ), cssModule); + const innerClasses = mapToCssModules(classNames( + 'carousel-inner' + ), cssModule); + + const children = props.children.filter(child => child !== null && child !== undefined && typeof child !== 'boolean'); + + const slidesOnly = children.every(child => child.type === CCarouselItem); + + if (slidesOnly) { + return ( + +
+ {renderItems(children, innerClasses)} +
+ + ); + } + + if (children[0] instanceof Array) { + const carouselItems = children[0]; + const controlLeft = children[1]; + const controlRight = children[2]; + + return ( + +
+ {renderItems(carouselItems, innerClasses)} + {controlLeft} + {controlRight} +
+ + ); + } + + const indicators = children[0]; + const wrappedOnClick = (e) => { + if (typeof indicators.props.onClickHandler === 'function') { + //this.setState({ indicatorClicked: true }, () => indicators.props.onClickHandler(e)); + fields.wrappedOnClickFunc = ()=>indicators.props.onClickHandler(e); + setIndicatorClicked(true); + } + }; + + const wrappedIndicators = React.cloneElement(indicators, { onClickHandler: wrappedOnClick }); + const carouselItems = children[1]; + const controlLeft = children[2]; + const controlRight = children[3]; + + return ( + +
+ {wrappedIndicators} + {renderItems(carouselItems, innerClasses)} + {controlLeft} + {controlRight} +
+ + ); + +} + +CCarouselCustom.propTypes = { + cssModule: PropTypes.object, + className: PropTypes.string, + children: PropTypes.array, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + activeIndex: PropTypes.number, + next: PropTypes.func.isRequired, + previous: PropTypes.func.isRequired, + keyboard: PropTypes.bool, + pause: PropTypes.oneOf(['hover', false]), + ride: PropTypes.oneOf(['carousel']), + interval: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + PropTypes.bool, + ]), + mouseEnter: PropTypes.func, + mouseLeave: PropTypes.func, + slide: PropTypes.bool +}; + +CCarouselCustom.defaultProps = { + interval: 5000, + pause: 'hover', + keyboard: true, + slide: true, +}; + +export default CCarouselCustom; diff --git a/src/CCarouselIndicators.js b/src/CCarouselIndicators.js new file mode 100644 index 00000000..cf43438a --- /dev/null +++ b/src/CCarouselIndicators.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCarouselIndicators + +const CCarouselIndicators = props=>{ + + const { + className, + cssModule, + // + innerRef, + items, + activeIndex, + onClickHandler, + itemProps, + ...attributes + } = props; + + //render + + const listClasses = mapToCssModules(classNames( + className, + 'carousel-indicators' + ), cssModule); + + const indicators = items.map((item, idx) => { + const indicatorClasses = mapToCssModules(classNames( + { 'active': activeIndex === idx } + ), cssModule); + return ( +
  • { + e.preventDefault(); + onClickHandler(idx); + }} + className={indicatorClasses} + {...itemProps} + />); + }); + + return ( +
      + {indicators} +
    + ); + +} + +CCarouselIndicators.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + items: PropTypes.array.isRequired, + activeIndex: PropTypes.number.isRequired, + onClickHandler: PropTypes.func.isRequired, + itemProps: PropTypes.object +}; + +export default CCarouselIndicators; diff --git a/src/CCarouselItem.js b/src/CCarouselItem.js new file mode 100644 index 00000000..ae32e6cc --- /dev/null +++ b/src/CCarouselItem.js @@ -0,0 +1,118 @@ +import React, {useState, useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, TransitionTimeouts, TransitionStatuses, tagPropType} from './Shared/helper.js'; +import {Transition} from 'react-transition-group'; +import {Context} from './CCarouselCustom'; + +//component - CoreUI / CCarouselItem + +const CCarouselItem = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + in: isIn, + slide, + itemProps, + ...transitionProps + } = props; + + const context = useContext(Context); + + const [startAnimation, setStartAnimation] = useState(false); + + const onEnter = (node, isAppearing)=>{ + setStartAnimation(false); + props.onEnter(node, isAppearing); + } + + const onEntering = (node, isAppearing)=>{ + // getting this variable triggers a reflow + const offsetHeight = node.offsetHeight; + setStartAnimation(true); + props.onEntering(node, isAppearing); + return offsetHeight; + } + + const onExit = node=>{ + setStartAnimation(false); + props.onExit(node); + } + + const onExiting = node=>{ + setStartAnimation(true); + node.dispatchEvent(new CustomEvent('slide.bs.carousel')); + props.onExiting(node); + } + + const onExited = node=>{ + node.dispatchEvent(new CustomEvent('slid.bs.carousel')); + props.onExited(node); + } + + //render + + return ( + + {(status) => { + const {direction} = context; + const isActive = (status === TransitionStatuses.ENTERED) || (status === TransitionStatuses.EXITING); + const directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && + startAnimation && + (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right'); + const orderClassName = (status === TransitionStatuses.ENTERING) && + (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev'); + const itemClasses = mapToCssModules(classNames( + className, + 'carousel-item', + isActive && 'active', + directionClassName, + orderClassName, + ), cssModule); + return ( + + {children} + + ); + }} + + ); + +} + +CCarouselItem.propTypes = { + ...Transition.propTypes, + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + in: PropTypes.bool, + slide: PropTypes.bool, + itemProps: PropTypes.object, +}; + +CCarouselItem.defaultProps = { + ...Transition.defaultProps, + tag: 'div', + timeout: TransitionTimeouts.Carousel, + slide: true, +}; + +export default CCarouselItem; diff --git a/src/CCharts.js b/src/CCharts.js new file mode 100644 index 00000000..32df9e70 --- /dev/null +++ b/src/CCharts.js @@ -0,0 +1,171 @@ +import React, {useState, useEffect, useRef, useMemo} from 'react'; +import PropTypes from 'prop-types'; +//import classNames from 'classnames'; +//import Chart from 'react-chartjs-2'; +//import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2'; +import Chart from 'chart.js' +import { customTooltips } from '@coreui/coreui-chartjs/dist/js/coreui-chartjs.js' +import "@coreui/coreui-chartjs/dist/css/coreui-chartjs.css"; + +//component - CoreUI / CCharts + +const CCharts = props=>{ + + const { + // + innerRef, + datasets, + labels, + options, + plugins, + type, + ...attributes + } = props; + + //console.log(Chart); + + const compData = useRef({firstRun:true}).current; + const [chart, setChart] = useState(); + const ref = useRef(); + + const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; +// const type = '' + + // methods + + const renderChart = ()=>{ + destroyChart() + setChart(new Chart( + ref.current.getContext('2d'), + chartConfig + )) + } + const updateChart = ()=>{ + Object.assign(chart, chartConfig) + chart.update() + } + const destroyChart = ()=>{ + if (chart) { + chart.destroy() + } + } + + // vars + + const _uid = ''; + const safeId = (()=>{ + // as long as this._uid() works there is no need to generate the key + const key = () => Math.random().toString(36).replace('0.', '') + return '__safe_id__' + _uid || key() + })(); + const computedDatasets = (()=>{ + return datasets + })(); + // + const computedLabels = (()=>{ + if (labels && typeof labels !== 'string') { + return labels + } else if (!datasets || !datasets[0] || !datasets[0].data) { + return [] + } + const emptyLabels = Array(datasets[0].data.length).fill('') + if (labels === 'indexes') { + return emptyLabels.map((u, i) => i + 1) + } else if (labels === 'months') { + return emptyLabels.map((u, i) => months[i % 12]) + } + return emptyLabels + })(); + const computedData = (()=>{ + return { + datasets: computedDatasets, + labels: computedLabels + } + })(); + const customTooltips = (()=>{ + if (options && options.tooltips) { + return + } + return { + tooltips: { + enabled: false, + custom: customTooltips, + intersect: true, + mode: 'index', + position: 'nearest', + callbacks: { + labelColor(tooltipItem, chart) { + function getValue(prop) { + return typeof prop === 'object' ? prop[tooltipItem.index] : prop + } + const dataset = chart.data.datasets[tooltipItem.datasetIndex] + //tooltipLabelColor is coreUI custom prop used only here + const backgroundColor = getValue( + dataset.tooltipLabelColor || + dataset.pointHoverBackgroundColor || + dataset.borderColor || + dataset.backgroundColor + ) + return { + backgroundColor + } + } + } + } + } + })(); + const computedOptions = (()=>{ + return Object.assign({}, options, customTooltips || {}) + })(); + const chartConfig = (()=>{ + return { + type: type, + data: computedData, + options: computedOptions || options, + plugins: plugins + } + })(); + + //watch + + //chartConfig + useMemo(()=>{ + if (compData.firstRun) return; + updateChart(); + }, [chartConfig]); + + + // effect + + useEffect(() => { + renderChart(); + compData.firstRun = false; + return () => { + destroyChart() + }; + }, []); + + // render + + return ( +
    + +
    + ); + +} + +CCharts.propTypes = { + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + datasets: PropTypes.array, + labels: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), + options: PropTypes.object, + plugins: PropTypes.array, + type: PropTypes.string +}; + +CCharts.defaultProps = { +}; + +export default CCharts; diff --git a/src/CChartsOld.js b/src/CChartsOld.js new file mode 100644 index 00000000..b277e26d --- /dev/null +++ b/src/CChartsOld.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, tagPropType} from './Shared/helper.js'; +//import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2'; + +//component - CoreUI / CCharts + +const CCharts = props=>{ + + const { + children, + className, + cssModule, + // + innerRef, + type, + data, + options, + ...attributes + } = props; + + const set = { + line: Line, + bar: Bar, + doughnut: Doughnut, + pie: Pie, + polar: Polar, + radar: Radar + } + + const Chart = set[type]; + + // render + + const classes = mapToCssModules(classNames( + className, + 'c-chart-wrapper' + ), cssModule); + + return ( +
    + +
    + ); + +} + +CCharts.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + data: PropTypes.object, + options: PropTypes.object, + type: PropTypes.oneOf(['line', 'bar', 'doughnut', 'pie', 'polar', 'radar']) +}; + +CCharts.defaultProps = { + type: 'line' +}; + +export default CCharts; diff --git a/src/CCol.js b/src/CCol.js new file mode 100644 index 00000000..6b143631 --- /dev/null +++ b/src/CCol.js @@ -0,0 +1,102 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, tagPropType} from './Shared/helper.js'; +import isobject from 'lodash.isobject'; + +const colWidths = ['xs', 'sm', 'md', 'lg', 'xl']; +const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +const columnProps = PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.number, + PropTypes.string, + PropTypes.shape({ + size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]), + order: stringOrNumberProp, + offset: stringOrNumberProp + }) +]); +const getColumnSizeClass = (isXs, colWidth, colSize) => { + if (colSize === true || colSize === '') { + return isXs ? 'col' : `col-${colWidth}`; + } else if (colSize === 'auto') { + return isXs ? 'col-auto' : `col-${colWidth}-auto`; + } + return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`; +}; + +//component - CoreUI / CCol + +const CCol = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + widths, + ...attributes + } = props; + + //render + + const colClasses = []; + + widths.forEach((colWidth, i) => { + let columnProp = props[colWidth]; + delete attributes[colWidth]; + if (!columnProp && columnProp !== '') { + return; + } + const isXs = !i; + if (isobject(columnProp)) { + const colSizeInterfix = isXs ? '-' : `-${colWidth}-`; + const colClass = getColumnSizeClass(isXs, colWidth, columnProp.size); + + colClasses.push(mapToCssModules(classNames({ + [colClass]: columnProp.size || columnProp.size === '', + [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0, + [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0 + }), cssModule)); + } else { + const colClass = getColumnSizeClass(isXs, colWidth, columnProp); + colClasses.push(colClass); + } + }); + + if (!colClasses.length) { + colClasses.push('col'); + } + + const classes = mapToCssModules(classNames( + className, + colClasses + ), cssModule); + + return ( + + ); + +} + +CCol.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + xs: columnProps, + sm: columnProps, + md: columnProps, + lg: columnProps, + xl: columnProps, + widths: PropTypes.array +}; + +CCol.defaultProps = { + tag: 'div', + widths: colWidths, +}; + +export default CCol; diff --git a/src/CCollapse.js b/src/CCollapse.js new file mode 100644 index 00000000..021ce5bd --- /dev/null +++ b/src/CCollapse.js @@ -0,0 +1,76 @@ +import React, {useState, useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import {omit, findDOMElements, defaultToggleEvents, addMultipleEventListeners} from './Shared/helper.js'; +import CCollapseCustom from './CCollapseCustom'; + +//component - CoreUI / CCollapse + +const omitKeys = ['toggleEvents', 'defaultOpen', 'custom']; + +const CCollapse = props=>{ + + let { + custom, + // + toggle, + show + } = props; + + const [isOpen, setIsOpen] = useState(props.defaultOpen || false); + + const fields = useRef({ + togglers: null, + removeEventListeners: null + }).current; + + if (!custom){ + show = isOpen; + const userToggle = toggle; + toggle = e=>{ + setIsOpen(!isOpen); + e.preventDefault(); + if (userToggle) + userToggle(e); + } + } + + //effect + + useEffect(() => { + if (custom) + return; + fields.togglers = findDOMElements(props.toggler); + if (fields.togglers.length) { + fields.removeEventListeners = addMultipleEventListeners( + fields.togglers, + toggle, + props.toggleEvents + ); + } + return function cleanup() { + if (fields.togglers.length && fields.removeEventListeners) { + fields.removeEventListeners(); + } + }; + }); + + //render + + return ; + +} + +CCollapse.propTypes = { + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + defaultOpen: PropTypes.bool, + toggler: PropTypes.string, + toggleEvents: PropTypes.arrayOf(PropTypes.string), +}; + +CCollapse.defaultProps = { + toggleEvents: defaultToggleEvents +}; + +export default CCollapse; diff --git a/src/CCollapseCustom.js b/src/CCollapseCustom.js new file mode 100644 index 00000000..0631468d --- /dev/null +++ b/src/CCollapseCustom.js @@ -0,0 +1,130 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, omit, pick, TransitionTimeouts, TransitionPropTypeKeys, TransitionStatuses, tagPropType} from './Shared/helper.js'; +import {Transition} from 'react-transition-group'; + +const transitionStatusToClassHash = { + [TransitionStatuses.ENTERING]: 'collapsing', + [TransitionStatuses.ENTERED]: 'collapse show', + [TransitionStatuses.EXITING]: 'collapsing', + [TransitionStatuses.EXITED]: 'collapse', +}; + +const getTransitionClass = status=>{ + return transitionStatusToClassHash[status] || 'collapse'; +} + +const getHeight = node=>{ + return node.scrollHeight; +} + +//component - CoreUI / CCollapseCustom + +const CCollapseCustom = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + show, + navbar, + ...otherProps + } = props; + + const [height, setHeight] = useState(null); + + const onEntering = (node, isAppearing)=>{ + setHeight(getHeight(node)); + props.onEntering(node, isAppearing); + } + + const onEntered = (node, isAppearing)=>{ + setHeight(null); + props.onEntered(node, isAppearing); + } + + const onExit = node=>{ + setHeight(getHeight(node)); + props.onExit(node); + } + + const onExiting = node=>{ + const _unused = node.offsetHeight; // eslint-disable-line no-unused-vars + setHeight(0); + props.onExiting(node); + } + + const onExited = node=>{ + setHeight(null); + props.onExited(node); + } + + //render + + const transitionProps = pick(otherProps, TransitionPropTypeKeys); + const childProps = omit(otherProps, TransitionPropTypeKeys); + + return ( + + {(status) => { + let collapseClass = getTransitionClass(status); + const classes = mapToCssModules(classNames( + className, + collapseClass, + navbar && 'navbar-collapse' + ), cssModule); + const style = height === null ? null : { height }; + return ( + + {children} + + ); + }} + + ); + +} + +CCollapseCustom.propTypes = { + ...Transition.propTypes, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]), + tag: tagPropType, + className: PropTypes.node, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + show: PropTypes.bool, + navbar: PropTypes.bool +}; + +CCollapseCustom.defaultProps = { + ...Transition.defaultProps, + show: false, + appear: false, + enter: true, + exit: true, + tag: 'div', + timeout: TransitionTimeouts.Collapse, +}; + +export default CCollapseCustom; diff --git a/src/CContainer.js b/src/CContainer.js new file mode 100644 index 00000000..81416745 --- /dev/null +++ b/src/CContainer.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CContainer + +const CContainer = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + fluid, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + fluid ? 'container-fluid' : 'container' + ), cssModule); + + return ( + + ); + +} + +CContainer.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + fluid: PropTypes.bool +}; + +CContainer.defaultProps = { + tag: 'div', +}; + +export default CContainer; diff --git a/src/CCustomInput.js b/src/CCustomInput.js new file mode 100644 index 00000000..03af34dd --- /dev/null +++ b/src/CCustomInput.js @@ -0,0 +1,96 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CCustomInput + +const CCustomInput = props=>{ + + const { + children, + className, + cssModule, + // + innerRef, + label, + inline, + valid, + invalid, + bsSize, + wrapperProps, + ...attributes + } = props; + + //render + + const type = attributes.type; + + const customClass = mapToCssModules(classNames( + className, + `custom-${type}`, + bsSize ? `custom-${type}-${bsSize}` : false, + ), cssModule); + + const validationClassNames = mapToCssModules(classNames( + invalid && 'is-invalid', + valid && 'is-valid', + ), cssModule); + + if (type === 'select') { + return ; + } + + if (type === 'file') { + return ( +
    + + +
    + ); + } + + if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') { + return ; + } + + const wrapperClasses = classNames( + customClass, + mapToCssModules(classNames( + 'custom-control', + { 'custom-control-inline': inline } + ), cssModule) + ); + + return ( +
    + + + {children} +
    + ); + +} + +CCustomInput.propTypes = { + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + type: PropTypes.string.isRequired, + label: PropTypes.node, + inline: PropTypes.bool, + valid: PropTypes.bool, + invalid: PropTypes.bool, + bsSize: PropTypes.string, + wrapperProps: PropTypes.object +}; + +export default CCustomInput; diff --git a/src/CDataTable.js b/src/CDataTable.js new file mode 100644 index 00000000..c999707b --- /dev/null +++ b/src/CDataTable.js @@ -0,0 +1,654 @@ +import React, { useState, useEffect, useRef, useMemo } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import Slot from './Shared/Slot'; +import CIcon from './CIcon'; +import CSpinner from './CSpinner'; +import CPagination from './CPagination'; +import style from './CDataTable.module.css'; + +//component - CoreUI / CTable + +const CDataTable = props=>{ + + const { + children, + //custom, + // + innerRef, + overTableSlot, + columnHeaderSlot, + sortingIconSlot, + columnFilterSlot, + detailsSlot, + noItemViewSlot, + captionSlot, + underTableSlot, + colNameSlot, + fields, + pagination, + activePage, + itemsPerPage, + items, + sorter, + clickableRows, + columnFilter, + tableFilterValue, + tableFilter, + addTableClasses, + size, + dark, + striped, + fixed, + hover, + border, + outlined, + responsive, + footer, + itemsPerPageSelect, + loading, + change, + onChange, + customContent, + ...attributes + } = props; + + //Object.assign(style, cssModule) + + const compData = useRef({firstRun:true}).current; + + // vars + + // + const [perPageItems, setPerPageItems] = useState(itemsPerPage); + const [sorterState, setSorterState] = useState({ + column: null, + asc: true + }); + const [tableFilterState, setTableFilterState] = useState(tableFilterValue); + const [columnFilterState, setColumnFilterState] = useState({}); + const [page, setPage] = useState(activePage || 1); + const [passedItems, setPassedItems] = useState(items || []); + + // functions + + const cellClass = (item, colName, index)=>{ + let classes = []; + if (item._cellClasses && item._cellClasses[colName]) { + classes.push(item._cellClasses[colName]); + } + if (fields && fields[index]._classes) { + classes.push(fields[index]._classes); + } + return classes; + } + const pretifyName = (name)=>{ + return name.replace(/[-_.]/g, ' ') + .replace(/ +/g, ' ') + .replace(/([a-z0-9])([A-Z])/g, '$1 $2') + .split(' ') + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' ') + } + const headerClass = (index)=>{ + //const fields = this.fields ??? + return fields && fields[index]._classes ? fields[index]._classes : '' + } + const isSortable = (index)=>{ + return sorter && (!fields || fields[index].sorter !== false) + } + const headerStyles = (index)=>{ + let style = {} + if (isSortable(index)) { + style['cursor']='pointer;'; + } + if (fields && fields[index] && fields[index]._style) { + let r = fields[index]._style.split(':'); + style[r[0]] = r[1].substr(0, r[1].length-2) + } + return style + } + const getIconState = (index)=>{ + const direction = sorterState.asc ? 'asc' : 'desc' + return rawColumnNames[index] === sorterState.column ? direction : 0 + } + const iconClasses = (index)=>{ + const state = getIconState(index) + return [ + style['icon-transition position-absolute arrow-position'], + !state ? style['transparent'] : '', + state === 'desc' ? style['rotate-icon'] : '' + ] + } + const rowClicked = (item, index)=>{ + onChange && onChange('row-clicked', item, index); + } + const changeSort = (column, index)=>{ + if (isSortable(index)) { + return + } + //if column changed or sort was descending change asc to true + const state = sorterState + const columnRepeated = state.column === column + if (!sorter || !sorter.resetable) { + state.column = column + } else { + state.column = columnRepeated && state.asc === false ? null : column + } + state.asc = !(columnRepeated && state.asc) + onChange && onChange('update:sorter-value', sorterState) + } + const paginationChange = (e)=>{ + onChange && onChange('pagination-change', Number(e.target.value)); + setPerPageItems(Number(e.target.value)) + } + const columnFilterEvent = (colName, value, type)=>{ + const isLazy = columnFilter && columnFilter.lazy === true + if (isLazy && type === 'input' || !isLazy && type === 'change') { + return + } + let state = {}; + state[colName] = value; + setColumnFilterState({...columnFilterState, ...state}); + onChange && onChange('update:column-filter-value', columnFilterState); + } + const tableFilterChange = (value, type)=>{ + const isLazy = tableFilter && tableFilter.lazy === true + if (isLazy && type === 'input' || !isLazy && type === 'change') { + return + } + setTableFilterState(value) + onChange && onChange('update:table-filter-value', tableFilterState); + } + + // computed + + let generatedColumnNames = Object.keys(passedItems[0] || {}).filter(el => el.charAt(0) !== '_'); + let rawColumnNames = (()=>{ + if (fields) { + return fields.map(el => el.key || el) + } + return generatedColumnNames + })(); + let columnFiltered = (()=>{ + let items = passedItems.slice() + if (columnFilter && columnFilter.external) { + return items + } + Object.entries(columnFilterState).forEach(([key, value]) => { + const columnFilter = String(value).toLowerCase() + if (columnFilter && rawColumnNames.includes(key)) { + items = items.filter(item => { + return String(item[key]).toLowerCase().includes(columnFilter) + }) + } + }) + return items + })(); + let filterableCols = (()=>{ + return rawColumnNames.filter(name => { + return generatedColumnNames.includes(name) + }) + })(); + let tableFiltered = (()=>{ + let items = columnFiltered.slice() + if (!tableFilterState || (tableFilter && tableFilter.external)) { + return items + } + const filter = tableFilterState.toLowerCase() + const hasFilter = (item) => String(item).toLowerCase().includes(filter) + items = items.filter(item => { + return filterableCols.filter(key => hasFilter(item[key])).length + }) + return items + })(); + let sortedItems = (()=>{ + const col = sorterState.column + if (!col || !rawColumnNames.includes(col) || sorter.external) { + return tableFiltered + } + //if values in column are to be sorted by numeric value they all have to be type number + const flip = sorterState.asc ? 1 : -1 + return tableFiltered.slice().sort((a,b) => { + return (a[col] > b[col]) ? 1 * flip : ((b[col] > a[col]) ? -1 * flip : 0) + }) + })(); + let tableClasses = (()=>{ + return [ + 'table', + addTableClasses, + { + [`table-${size}`]: size, + 'table-dark': dark, + 'table-striped': striped, + 'b-table-fixed': fixed, + 'table-hover': hover, + 'table-bordered': border, + 'border': outlined + } + ] + })(); + let columnNames = (()=>{ + if (fields) { + return fields.map(f => { + return f.label !== undefined ? f.label : pretifyName(f.key || f) + }) + } + return rawColumnNames.map(el => pretifyName(el)) + })(); + let sortingIconStyles = (()=>{ + return {'position-relative pr-4' : sorter } + })(); + let colspan = (()=>{ + return rawColumnNames.length + })(); + let totalPages = (()=>{ + return Math.ceil((sortedItems.length) / perPageItems) || 1 + })(); + // + let computedPage = pagination ? page : activePage; + let firstItemIndex = (computedPage - 1) * perPageItems || 0; + let paginatedItems = sortedItems.slice( + firstItemIndex, + firstItemIndex + perPageItems + ) + let currentItems = computedPage ? paginatedItems : sortedItems; + + let tableFilterData; + if (tableFilter) + tableFilterData = { + label: tableFilter.label || 'Filter:', + placeholder: tableFilter.placeholder || 'type string...' + } + + // watch + + //itemsPerPage + useMemo(()=>{ + if (compData.firstRun) return; + setPerPageItems(itemsPerPage); + }, [itemsPerPage]); + + //sorterValue + /* + useMemo(()=>{ + const asc = sorterValue.asc === false ? false : true; + setSorterState(Object.assign({}, { asc, column: sorterValue.column })); + }, [sorterValue]); + */ + + //tableFilterValue + useMemo(()=>{ + if (compData.firstRun) return; + setTableFilterState(tableFilterValue); + }, [tableFilterValue]); + + //columnFilterValue + /* + useMemo(()=>{ + setColumnFilterState(Object.assign({}, columnFilterValue)); + }, [columnFilterValue]); + */ + + //items + useMemo(()=>{ + compData.oldItems = items; + if (compData.firstRun) return; + if (items.length !== compData.oldItems.length || + JSON.stringify(items) !== JSON.stringify(compData.oldItems)) { + setPassedItems(items||[]); + } + }, [items]); + + //totalPages + useMemo(()=>{ + onChange && onChange('pages-change', totalPages); + }, [totalPages]); + + //get render par + if (change) + change(); + + // render + + //custom + //if (custom) + // return ({children}); + + compData.firstRun = false; + + let scopedSlots = {}; //+ + + return ( + +
    + { + itemsPerPageSelect || tableFilter ? +
    + { + tableFilter ? +
    + + {tableFilterChange(e.target.value, 'input')}} + onChange={(e)=>{tableFilterChange(e.target.value, 'change')}} + value={tableFilterState} + /> +
    :'' + } + { + itemsPerPageSelect ? +
    +
    + + +
    +
    :'' + } +
    :'' + } +
    + + + +
    + + + + { + columnNames.map((name, index)=>{ + return ( + + ) + }) + } + + { + columnFilter ? + + { + rawColumnNames.map((colName, index)=>{ + return ( + + ) + }) + } + :'' + } + + + {currentItems.map((item, itemIndex)=>{ + return ( + + {rowClicked(item, itemIndex + firstItemIndex)}} + key={itemIndex} + > + { + rawColumnNames.map((colName, index)=>{ + if (scopedSlots[colName]) + return( + + ) + else + return ( + + ) + }) + } + + { + scopedSlots.details? + + + :'' + } + + ) + })} + { + !currentItems.length ? + + + :'' + } + + { + footer && currentItems.length > 0 ? + + + { + columnNames.map((name, index)=>{ + return( + + ) + }) + } + + : '' + } + +
    {changeSort(rawColumnNames[index], index)}} + className={classNames([headerClass(index), sortingIconStyles])} + style={headerStyles(index)} + key={index} + > + +
    {name}
    +     + { + isSortable(index)? + + + :'' + } +
    + + { + !fields || fields[index].filter !== false ? + {columnFilterEvent(colName, e.target.value, 'input')}} + onChange={(e)=>{columnFilterEvent(colName, e.target.value, 'change')}} + value={columnFilterState[colName]} + />:'' + } + +
    + {String(item[colName])} +
    + +
    + +
    +

    + {passedItems.length ? 'No filtering results ' : 'No items' } + +

    +
    +     +
    + +
    {name}
    +     + { + isSortable(index) ? + + + :'' + } +
    + + { + loading ? + +
    +
    + +
    +
    +     :'' + } + +
    + + + + { + //:activePage.sync="page" + pagination ? + 0 ? 'inline' : 'none'}} + pages={totalPages} + v-bind={typeof pagination === 'object' ? {...pagination} : null} + />:'' + } + +     + ) + +} + +CDataTable.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + //custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.func, + ]), + overTableSlot: PropTypes.node, + colNameSlot: PropTypes.node, + columnHeaderSlot: PropTypes.array, + sortingIconSlot: PropTypes.node, + columnFilterSlot: PropTypes.node, + detailsSlot: PropTypes.node, + noItemViewSlot: PropTypes.node, + captionSlot: PropTypes.node, + underTableSlot: PropTypes.node, + fields: PropTypes.array, + pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + activePage: PropTypes.number, + itemsPerPage: PropTypes.number, + items: PropTypes.array, + sorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + clickableRows: PropTypes.bool, + columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + tableFilterValue: PropTypes.string, + tableFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + addTableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), + size: PropTypes.string, + dark: PropTypes.bool, + striped: PropTypes.bool, + fixed: PropTypes.bool, + hover: PropTypes.bool, + border: PropTypes.bool, + outlined: PropTypes.bool, + responsive: PropTypes.bool, + footer: PropTypes.bool, + itemsPerPageSelect: PropTypes.bool, + loading: PropTypes.bool, + change: PropTypes.func, //+ + onChange: PropTypes.func +} + +CDataTable.defaultProps = { + itemsPerPage: 10, + responsive: true, + columnHeaderSlot: [], + columnFilterSlot: [], +} + +export default CDataTable; diff --git a/src/CDataTable.module.css b/src/CDataTable.module.css new file mode 100644 index 00000000..d7768cc9 --- /dev/null +++ b/src/CDataTable.module.css @@ -0,0 +1,17 @@ +.transparent { + opacity: 0.4; +} +.icon-transition { + -webkit-transition: transform 0.3s; + transition: transform 0.3s; +} +.arrow-position { + right: 0; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.rotate-icon { + -ms-transform: translateY(-50%) rotate(-180deg); + transform: translateY(-50%) rotate(-180deg); +} diff --git a/src/CDropdown.js b/src/CDropdown.js new file mode 100644 index 00000000..719c331f --- /dev/null +++ b/src/CDropdown.js @@ -0,0 +1,45 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import CDropdownCustom from './CDropdownCustom'; + +//component - CoreUI / CDropdown + +const CDropdown = props=>{ + + let { + custom, + // + toggle, + show, + defaultOpen, + ...attributes + } = props; + + //custom + + const [isOpen, setIsOpen] = useState(props.defaultOpen || false); + + if (!custom){ + const userToggle = toggle; + show = isOpen; + toggle = ()=>{ + setIsOpen(!isOpen); + if (userToggle) + userToggle(); + } + } + + //render + + return ; + +} + +CDropdown.propTypes = { + ...CDropdownCustom.propTypes, + custom: PropTypes.bool, + // + defaultOpen: PropTypes.bool, +}; + +export default CDropdown; diff --git a/src/CDropdownCustom.js b/src/CDropdownCustom.js new file mode 100644 index 00000000..97c15453 --- /dev/null +++ b/src/CDropdownCustom.js @@ -0,0 +1,266 @@ +import React, {useEffect, useRef} from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules, omit, keyCodes, deprecated} from './Shared/helper.js'; +import {Manager} from 'react-popper'; + +export const Context = React.createContext({}); + +//component - CoreUI / CPopperContentWrapper + +class CPopperContentWrapper extends React.Component { + + getChildContext(){ + return this.context; + } + + render(){ + return this.props.children; + } + +} + +CPopperContentWrapper.contextType = Context; + +CPopperContentWrapper.childContextTypes = { + toggle: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired, + inNavbar: PropTypes.bool.isRequired +}; + +//component - CoreUI / CDropdownCustom + +const CDropdownCustom = props=>{ + + const { + className, + cssModule, + // + dropup, + show, + group, + size, + inNav, + setActiveFromChild, + active, + addonType, + ...attributes + } = omit(props, ['toggle', 'disabled', 'inNavbar', 'direction']); + + const fields = useRef({ + firstRender: true + }).current; + + const ref = useRef(null); + + const getContainer = ()=>{ + if (fields._$container) return fields._$container; + fields._$container = ReactDOM.findDOMNode(ref.current); + return fields._$container; + } + + const getMenuCtrl = ()=>{ + if (fields._$menuCtrl) return fields._$menuCtrl; + fields._$menuCtrl = getContainer().querySelector('[aria-expanded]'); + return fields._$menuCtrl; + } + + const getMenuItems = ()=>{ + return [].slice.call(getContainer().querySelectorAll('[role="menuitem"]')); + } + + const addEvents = ()=>{ + ['click', 'touchstart', 'keyup'].forEach(event => + document.addEventListener(event, handleDocumentClick, true) + ); + fields.handleDocumentClick = handleDocumentClick; + } + + const removeEvents = ()=>{ + ['click', 'touchstart', 'keyup'].forEach(event => + document.removeEventListener(event, fields.handleDocumentClick, true) + ); + } + + const handleDocumentClick = e=>{ + if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== keyCodes.tab))) return; + const container = getContainer(); + if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === keyCodes.tab)) { + return; + } + toggle(e); + } + + const handleKeyDown = e=>{ + if ( + /input|textarea/i.test(e.target.tagName) + || (keyCodes.tab === e.which && e.target.getAttribute('role') !== 'menuitem') + ) { + return; + } + e.preventDefault(); + if (fields.disabled) return; + if (getMenuCtrl() === e.target) { + if ( + !fields.isOpen + && ([keyCodes.space, keyCodes.enter, keyCodes.up, keyCodes.down].indexOf(e.which) > -1) + ) { + toggle(e); + setTimeout(()=>getMenuItems()[0].focus()); + } + } + if (fields.isOpen && (e.target.getAttribute('role') === 'menuitem')) { + if ([keyCodes.tab, keyCodes.esc].indexOf(e.which) > -1) { + toggle(e); + getMenuCtrl().focus(); + } else if ([keyCodes.space, keyCodes.enter].indexOf(e.which) > -1) { + e.target.click(); + getMenuCtrl().focus(); + } else if ( + [keyCodes.down, keyCodes.up].indexOf(e.which) > -1 + || ([keyCodes.n, keyCodes.p].indexOf(e.which) > -1 && e.ctrlKey) + ) { + const $menuitems = getMenuItems(); + let index = $menuitems.indexOf(e.target); + if (keyCodes.up === e.which || (keyCodes.p === e.which && e.ctrlKey)) { + index = index !== 0 ? index - 1 : $menuitems.length - 1; + } else if (keyCodes.down === e.which || (keyCodes.n === e.which && e.ctrlKey)) { + index = index === $menuitems.length - 1 ? 0 : index + 1; + } + $menuitems[index].focus(); + } else if (keyCodes.end === e.which) { + const $menuitems = getMenuItems(); + $menuitems[$menuitems.length - 1].focus(); + } else if (keyCodes.home === e.which) { + const $menuitems = getMenuItems(); + $menuitems[0].focus(); + } else if ((e.which >= 48) && (e.which <= 90)) { + const $menuitems = getMenuItems(); + const charPressed = String.fromCharCode(e.which).toLowerCase(); + for (let i = 0; i < $menuitems.length; i += 1) { + const firstLetter = $menuitems[i].textContent && $menuitems[i].textContent[0].toLowerCase(); + if (firstLetter === charPressed) { + $menuitems[i].focus(); + break; + } + } + } + } + } + + const handleProps = ()=>{ + if (props.show) { + addEvents(); + } else { + removeEvents(); + } + } + + const toggle = e=>{ + if (fields.disabled) { + return e && e.preventDefault(); + } + return props.toggle(e); + } + + //effect + + useEffect(() => { + if (fields.firstRender){ + return; + }; + handleProps(); + }, [props.show]); + + useEffect(() => { + fields.firstRender = false; + handleProps(); + return function cleanup() { + removeEvents(); + }; + }, []); + + //render + + fields.disabled = props.disabled; + fields.isOpen = props.show; + + const direction = (props.direction === 'down' && dropup) ? 'up' : props.direction; + + attributes.tag = attributes.tag || (inNav ? 'li' : 'div'); + + let subItemIsActive = false; + + if (setActiveFromChild){ + React.Children.map(props.children[1].props.children, + (dropdownItem) => { + if (dropdownItem && dropdownItem.props.active) subItemIsActive = true; + } + ); + } + + const classes = mapToCssModules(classNames( + className, + direction !== 'down' && `drop${direction}`, + inNav && active ? 'active' : false, + setActiveFromChild && subItemIsActive ? 'active' : false, + { + [`input-group-${addonType}`]: addonType, + 'btn-group': group, + [`btn-group-${size}`]: !!size, + 'dropdown': !group && !addonType, + 'show': show, + 'nav-item': inNav + } + ), cssModule); + + return ( + + + + + + ); + +} + +CDropdownCustom.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), + group: PropTypes.bool, + show: PropTypes.bool, + disabled: PropTypes.bool, + active: PropTypes.bool, + addonType: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['prepend', 'append'])]), + size: PropTypes.string, + toggle: PropTypes.func, + inNav: PropTypes.bool, + inNavbar: PropTypes.bool, + setActiveFromChild: PropTypes.bool, + dropup: deprecated(PropTypes.bool, 'Please use the prop "direction" with the value "up".')// +}; + +CDropdownCustom.defaultProps = { + show: false, + direction: 'down', + active: false, + addonType: false, + inNav: false, + inNavbar: false, + setActiveFromChild: false, + group: true +}; + +export default CDropdownCustom; diff --git a/src/CDropdownItem.js b/src/CDropdownItem.js new file mode 100644 index 00000000..63954bb1 --- /dev/null +++ b/src/CDropdownItem.js @@ -0,0 +1,106 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, omit, tagPropType} from './Shared/helper.js'; +import {Context} from './CDropdownCustom'; + +//component - CoreUI / CDropdownItem + +const CDropdownItem = props=>{ + + let { + tag: Tag, + className, + cssModule, + // + innerRef, + color, + divider, + header, + active, + ...attributes + } = omit(props, ['toggle']); + + const context = useContext(Context); + + const onClick = e=>{ + if (props.disabled || props.header || props.divider) { + e.preventDefault(); + return; + } + if (props.onClick) { + props.onClick(e); + } + if (props.toggle) { + context.toggle(e); + } + } + + const getTabIndex = ()=>{ + if (props.disabled || props.header || props.divider) { + return '-1'; + } + return '0'; + } + + //render + + const tabIndex = getTabIndex(); + const role = tabIndex > -1 ? 'menuitem' : undefined; + + const classes = mapToCssModules(classNames( + className, + header ? 'dropdown-header' : divider ? 'dropdown-divider' : 'dropdown-item', + active ? 'active' : null, + color ? 'bg-'+color : null, + { + disabled: attributes.disabled, + } + ), cssModule); + + if (Tag === 'button') { + if (header) { + Tag = 'h6'; + } else if (divider) { + Tag = 'div'; + } else if (props.href) { + Tag = 'a'; + } + } + + return ( + + ); + +} + +CDropdownItem.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + color: PropTypes.string, + divider: PropTypes.bool, + header: PropTypes.bool, + active: PropTypes.bool, + disabled: PropTypes.bool, + onClick: PropTypes.func, + toggle: PropTypes.bool +}; + +CDropdownItem.defaultProps = { + tag: 'button', + toggle: true +}; + +export default CDropdownItem; diff --git a/src/CDropdownMenu.js b/src/CDropdownMenu.js new file mode 100644 index 00000000..c99803b9 --- /dev/null +++ b/src/CDropdownMenu.js @@ -0,0 +1,93 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Popper} from 'react-popper'; +import {Context} from './CDropdownCustom'; + +//component - CoreUI / CDropdownMenu + +const CDropdownMenu = props=>{ + + const { + className, + cssModule, + right, + tag, + flip, + modifiers, + persist, + innerRef, + ...attributes + } = props; + + const noFlipModifier = { flip: { enabled: false } }; + + const directionPositionMap = { + up: 'top', + left: 'left', + right: 'right', + down: 'bottom', + }; + + const context = useContext(Context); + + //render + + const classes = mapToCssModules(classNames( + className, + 'dropdown-menu', + { + 'dropdown-menu-right': right, + 'show': context.isOpen, + } + ), cssModule); + //dash + + let Tag = tag; + + if (persist || (context.isOpen && !context.inNavbar)) { + Tag = Popper; + const position1 = directionPositionMap[context.direction] || 'bottom'; + const position2 = right ? 'end' : 'start'; + attributes.placement = `${position1}-${position2}`; + attributes.component = tag; + attributes.modifiers = !flip ? { + ...modifiers, + ...noFlipModifier, + } : modifiers; + } + + return ( + + ); + +} + +CDropdownMenu.propTypes = { + tag: tagPropType, + children: PropTypes.node.isRequired, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + right: PropTypes.bool, + flip: PropTypes.bool, + modifiers: PropTypes.object, + persist: PropTypes.bool, +}; + +CDropdownMenu.defaultProps = { + tag: 'div', + flip: true, +}; + +export default CDropdownMenu; diff --git a/src/CDropdownToggle.js b/src/CDropdownToggle.js new file mode 100644 index 00000000..34633256 --- /dev/null +++ b/src/CDropdownToggle.js @@ -0,0 +1,135 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Target} from 'react-popper'; +import CButton from './CButton'; +import {Context} from './CDropdownCustom'; + +//component - CoreUI / CDropdownToggle + +const CDropdownToggle = props=>{ + + const { + className, + color, + cssModule, + // + innerRef, + caret, + split, + nav, + header, + tag, + togglerHtml, + ...attributes + } = props; + + const context = useContext(Context); + + const onClick = e=>{ + if (props.disabled) { + e.preventDefault(); + return; + } + if (props.nav && !props.tag) { + e.preventDefault(); + } + if (props.onClick) { + props.onClick(e); + } + context.toggle(e); + } + + //render + + const ariaLabel = attributes['aria-label'] || 'Toggle Dropdown'; + + const classes = mapToCssModules(classNames( + className, + { + 'dropdown-toggle': caret || split, + 'dropdown-toggle-split': split, + 'nav-link': nav && !header, + 'c-header-nav-link': nav && header + } + ), cssModule); + + const children = togglerHtml || attributes.children || {ariaLabel}; + + let Tag; + let isButton = false; + + if (nav && !tag) { + Tag = 'a'; + attributes.href = '#'; + } else if (!tag) { + Tag = CButton; + attributes.color = color; + attributes.cssModule = cssModule; + isButton = true; + } else { + Tag = tag; + } + + if (context.inNavbar) { + if (isButton) + return ( + + ); + else + return ( + + ); + } + + return ( + + ); + +} + +CDropdownToggle.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + caret: PropTypes.bool, + color: PropTypes.string, + disabled: PropTypes.bool, + onClick: PropTypes.func, + 'aria-haspopup': PropTypes.bool, + split: PropTypes.bool, + togglerHtml: PropTypes.node, + nav: PropTypes.bool, + header: PropTypes.bool, +}; + +CDropdownToggle.defaultProps = { + 'aria-haspopup': true +}; + +export default CDropdownToggle; diff --git a/src/CEmbed.js b/src/CEmbed.js new file mode 100644 index 00000000..c47c00b0 --- /dev/null +++ b/src/CEmbed.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +import CEmbedObject from './CEmbedObject'; + +//component - CoreUI / CEmbed + +const CEmbed = props=>{ + + const { + tag: Tag, + className, + cssModule, + custom, + innerRef, + // + ratio, + type, + src, + objectClassName, + objectProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + ratio ? `embed-responsive-${ratio}` : null, + 'embed-responsive' + ), cssModule); + + const objectClasses = mapToCssModules(classNames( + objectClassName + ), cssModule); + + if (!custom){ + return ( + + + + ); + } + + return ( + + ); + +} + +CEmbed.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + ratio: PropTypes.string, + objectClassName: PropTypes.string, + objectProps: PropTypes.object, + /// + type: PropTypes.string, + src: PropTypes.string, +}; + +CEmbed.defaultProps = { + tag: 'span', + ratio: '16by9', + type: 'iframe', +}; + +export default CEmbed; diff --git a/src/CEmbedObject.js b/src/CEmbedObject.js new file mode 100644 index 00000000..f2a7b8b1 --- /dev/null +++ b/src/CEmbedObject.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; + +//component - CoreUI / CEmbedObject + +const CEmbedObject = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'embed-responsive-item' + ), cssModule); + + return ( + + ); + +} + +CEmbedObject.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CEmbedObject.defaultProps = { + tag: 'iframe' +}; + +export default CEmbedObject; diff --git a/src/CFade.js b/src/CFade.js new file mode 100644 index 00000000..7a30e38a --- /dev/null +++ b/src/CFade.js @@ -0,0 +1,76 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +import {Transition} from 'react-transition-group'; + +//component - CoreUI / CFade + +const CFade = props=>{ + + const { + tag: Tag, + className, + cssModule, + children, + // + innerRef, + baseClass, + baseClassActive, + ...attributes + } = props; + + //render + + const transitionProps = pick(attributes, TransitionPropTypeKeys); + const childProps = omit(attributes, TransitionPropTypeKeys); + + return ( + + {(status) => { + const isActive = status === 'entered'; + const classes = mapToCssModules(classNames( + className, + baseClass, + isActive && baseClassActive + ), cssModule); + return ( + + {children} + + ); + }} + + ); + +} + +CFade.propTypes = { + ...Transition.propTypes, + tag: tagPropType, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]), + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + baseClass: PropTypes.string, + baseClassActive: PropTypes.string +}; + +CFade.defaultProps = { + ...Transition.defaultProps, + tag: 'div', + // + baseClass: 'fade', + baseClassActive: 'show', + timeout: TransitionTimeouts.Fade, + appear: true, + enter: true, + exit: true, + in: true, +}; + +export default CFade; diff --git a/src/CFooter.js b/src/CFooter.js new file mode 100644 index 00000000..20fb3ebf --- /dev/null +++ b/src/CFooter.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CFooter + +const CFooter = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + fixed, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + fixed ? 'c-footer-fixed' : null, + 'c-footer' + ), cssModule); + + return ( + + ); + +} + +CFooter.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + fixed: PropTypes.bool +}; + +CFooter.defaultProps = { + tag: 'footer', + fixed: true +}; + +export default CFooter; diff --git a/src/CForm.js b/src/CForm.js new file mode 100644 index 00000000..059e02c9 --- /dev/null +++ b/src/CForm.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CForm + +const CForm = props=>{ + + const { + tag: Tag, + className, + cssModule, + innerRef, + // + inline, + wasValidated, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + inline ? 'form-inline' : false, + wasValidated ? 'was-validated' : false + ), cssModule); + + return ( + + ); + +} + +CForm.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + inline: PropTypes.bool, + wasValidated: PropTypes.bool +}; + +CForm.defaultProps = { + tag: 'form', +}; + +export default CForm; diff --git a/src/CFormFeedback.js b/src/CFormFeedback.js new file mode 100644 index 00000000..f331207e --- /dev/null +++ b/src/CFormFeedback.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CFormFeedback + +const CFormFeedback = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + valid, + tooltip, + ...attributes + } = props; + + //render + + const validMode = tooltip ? 'tooltip' : 'feedback'; + const classes = mapToCssModules( + classNames( + className, + valid ? `valid-${validMode}` : `invalid-${validMode}` + ), + cssModule + ); + + return ; + +} + +CFormFeedback.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + valid: PropTypes.bool, + tooltip: PropTypes.bool +}; + +CFormFeedback.defaultProps = { + tag: 'div', + valid: undefined +}; + +export default CFormFeedback; diff --git a/src/CFormGroup.js b/src/CFormGroup.js new file mode 100644 index 00000000..08ab8b3d --- /dev/null +++ b/src/CFormGroup.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CFormGroup + +const CFormGroup = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + row, + disabled, + check, + inline, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + row ? 'row' : false, + check ? 'form-check' : 'form-group', + check && inline ? 'form-check-inline' : false, + check && disabled ? 'disabled' : false + ), cssModule); + + return ( + + ); + +} + +CFormGroup.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + row: PropTypes.bool, + check: PropTypes.bool, + inline: PropTypes.bool, + disabled: PropTypes.bool +}; + +CFormGroup.defaultProps = { + tag: 'div', +}; + +export default CFormGroup; diff --git a/src/CFormText.js b/src/CFormText.js new file mode 100644 index 00000000..078485c7 --- /dev/null +++ b/src/CFormText.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CFormText + +const CFormText = props=>{ + + const { + tag: Tag, + className, + cssModule, + innerRef, + // + inline, + color, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + !inline ? 'form-text' : false, + color ? `text-${color}` : false + ), cssModule); + + return ( + + ); + +} + +CFormText.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + inline: PropTypes.bool, + color: PropTypes.string +}; + +CFormText.defaultProps = { + tag: 'small', + color: 'muted', +}; + +export default CFormText; diff --git a/src/CHeader.js b/src/CHeader.js new file mode 100644 index 00000000..36b0a52d --- /dev/null +++ b/src/CHeader.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CHeader + +const CHeader = props=>{ + + const { + tag: Tag, + className, + // + innerRef, + fixed, + colorScheme, + withSubheader, + ...attributes + } = props; + + // render + + const classes = classNames(className, + 'c-header', + 'c-header-'+colorScheme, + fixed ? 'c-header-fixed' : null, + withSubheader ? 'c-header-with-subheader' : null); + + return ( + + ); + +} + +CHeader.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + children: PropTypes.node, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + fixed: PropTypes.bool, + withSubheader: PropTypes.bool, + colorScheme: PropTypes.string, +}; + +CHeader.defaultProps = { + tag: 'header', + fixed: true, + colorScheme: 'light' +}; + +export default CHeader; diff --git a/src/CHeaderBrand.js b/src/CHeaderBrand.js new file mode 100644 index 00000000..80c885e7 --- /dev/null +++ b/src/CHeaderBrand.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CHeaderBrand + +const CHeaderBrand = props=>{ + + const { + tag: Tag, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames( + className, + 'c-header-brand' + ); + + return ( + + ); + +} + +CHeaderBrand.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CHeaderBrand.defaultProps = { + tag: 'img' +}; + +export default CHeaderBrand; diff --git a/src/CHeaderNav.js b/src/CHeaderNav.js new file mode 100644 index 00000000..04e2f281 --- /dev/null +++ b/src/CHeaderNav.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CHeaderNav + +const CHeaderNav = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'c-header-nav' + ), cssModule); + + return ( + + ); + +} + +CHeaderNav.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CHeaderNav.defaultProps = { + tag: 'ul' +}; + +export default CHeaderNav; diff --git a/src/CHeaderNavItem.js b/src/CHeaderNavItem.js new file mode 100644 index 00000000..cb6883a9 --- /dev/null +++ b/src/CHeaderNavItem.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CHeaderNavLink from './CHeaderNavLink'; + +//component - CoreUI / CHeaderNavItem + +const CHeaderNavItem = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + to, + linkClassName, + linkProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'c-header-nav-item', + ), cssModule); + + if (!custom){ + return ( + + + + ); + } + + return ( + + ); + +} + +CHeaderNavItem.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + to: PropTypes.string, + linkClassName: PropTypes.string, + linkProps: PropTypes.object +}; + +CHeaderNavItem.defaultProps = { + tag: 'li' +}; + +export default CHeaderNavItem; diff --git a/src/CHeaderNavLink.js b/src/CHeaderNavLink.js new file mode 100644 index 00000000..13c4a066 --- /dev/null +++ b/src/CHeaderNavLink.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CLink from './CLink'; + +//component - CoreUI / CHeaderNavLink + +const CHeaderNavLink = props=>{ + + const { + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'c-header-nav-link', + ), cssModule); + + return ( + + ); + +} + +CHeaderNavLink.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CHeaderNavLink.defaultProps = { +}; + +export default CHeaderNavLink; diff --git a/src/CHeaderSubheader.js b/src/CHeaderSubheader.js new file mode 100644 index 00000000..1ce7bdb7 --- /dev/null +++ b/src/CHeaderSubheader.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CHeaderSubheader + +const CHeaderSubheader = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'c-subheader' + ), cssModule); + + return ( + + ); + +} + +CHeaderSubheader.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CHeaderSubheader.defaultProps = { + tag: 'div' +}; + +export default CHeaderSubheader; diff --git a/src/CIcon.js b/src/CIcon.js new file mode 100644 index 00000000..9c18af66 --- /dev/null +++ b/src/CIcon.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CIconRaw from './CIconRaw'; +import style from './CIcon.module.css'; + +//component - CoreUI / CIcon + +const CIcon = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + name, + size, + ...attributes + } = props; + + //render + + let type = 'svg'; + + if (typeof name == 'object'){ + switch(name.type){ + case 'class': + type = 'class'; + break; + default: + } + } + + //gdy modulowo sa zdefiniowane np Button - musialbyby miec wszystkie bo zostana przetlumaczone + + if (type=='svg'){ + return ( + + ); + } + + const classes = (classNames( + mapToCssModules(className, Object.assign(style, cssModule)), + type=='name' ? name : + type=='class' ? name.className : null, + size ? 'c-icon-'+size : null + )); + + return ( + + ); + +} + +CIcon.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + name: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + size: PropTypes.string +}; + +CIcon.defaultProps = { + tag: 'i' +}; + +export default CIcon; diff --git a/src/CIcon.module.css b/src/CIcon.module.css new file mode 100644 index 00000000..7ef24704 --- /dev/null +++ b/src/CIcon.module.css @@ -0,0 +1,69 @@ +.c-icon { + display: inline-block; + color: inherit; + text-align: center; + fill: currentColor; + width: 1rem; + height: 1rem; + font-size: 1rem; +} +.c-icon-2xl { + width: 2rem; + height: 2rem; + font-size: 2rem; +} +.c-icon-3xl { + width: 3rem; + height: 3rem; + font-size: 3rem; +} +.c-icon-4xl { + width: 4rem; + height: 4rem; + font-size: 4rem; +} +.c-icon-5xl { + width: 5rem; + height: 5rem; + font-size: 5rem; +} +.c-icon-6xl { + width: 6rem; + height: 6rem; + font-size: 6rem; +} +.c-icon-7xl { + width: 7rem; + height: 7rem; + font-size: 7rem; +} +.c-icon-8xl { + width: 8rem; + height: 8rem; + font-size: 8rem; +} +.c-icon-9xl { + width: 9rem; + height: 9rem; + font-size: 9rem; +} +.c-icon-xl { + width: 1.5rem; + height: 1.5rem; + font-size: 1.5rem; +} +.c-icon-lg { + width: 1.25rem; + height: 1.25rem; + font-size: 1.25rem; +} +.c-icon-sm { + width: 0.875rem; + height: 0.875rem; + font-size: 0.875rem; +} +.c-icon-c-s, +.c-icon-custom-size { + width: initial !important; + height: initial !important; +} diff --git a/src/CIconRaw.js b/src/CIconRaw.js new file mode 100644 index 00000000..4c96b36c --- /dev/null +++ b/src/CIconRaw.js @@ -0,0 +1,134 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; +import style from './CIcon.module.css'; + +//component - CoreUI / CIconRaw + +const CIconRaw = props=>{ + + const { + className, + // + name, + content, + customClasses, + size, + src, + title, + use, + ...attributes + } = props; + + // methods + + const toCamelCase = (str)=>{ + return str.replace(/([-_][a-z0-9])/ig, ($1) => { + return $1.toUpperCase().replace('-', '') + }) + } + + //vars + + const iconName = (()=>{ + const iconNameIsKebabCase = name && name.includes('-') + return iconNameIsKebabCase ? toCamelCase(name) : name + })(); + const titleCode = (()=>{ + return title ? `${title}` : '' + })(); + const code = (()=>{ + if (content) { + return content + } else if (React.icons) { + return React.icons[iconName] ? React.icons[iconName] : console.log(iconName) + } + return content; + })(); + const iconCode = (()=>{ + return Array.isArray(code) ? code[1] || code[0] : code + })(); + const scale = (()=>{ + return Array.isArray(code) && code.length > 1 ? code[0] : '64 64' + })(); + const viewBox = (()=>{ + return attributes.viewBox || `0 0 ${scale}` + })(); + const computedSize = (()=>{ + const addCustom = !size && (attributes.width || attributes.height) + return size === 'custom' || addCustom ? 'custom-size' : size + })(); + //console.log(iconName, computedSize) +/* + computedClasses () { + const size = this.computedSize + return this.customClasses || ['c-icon', { [`c-icon-${size}`]: size }] + } +*/ + + //render + + const class1 = mapToCssModules(classNames( + className, + 'c-icon', + computedSize ? `c-icon-${computedSize}` : '' + )); + + const class2 = mapToCssModules(classNames( + 'c-icon', + computedSize ? `c-icon-${computedSize}` : '' + ), style); + + const classes = customClasses || (class1 + ' ' + class2) + + //console.log(code, viewBox, classes, titleCode+' - '+iconCode); + //v-html={titleCode+iconCode} + + return ( + + {!src && !use ? + : src ? + : use ? + + + : ''} + + ); + +} + +CIconRaw.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + // + name: PropTypes.string, + content: PropTypes.oneOfType([String, Array]), + size: PropTypes.oneOf(['custom', 'custom-size', 'sm', 'lg', 'xl', + '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']), + customClasses: PropTypes.oneOfType([String, Array, Object]), + src: PropTypes.string, + title: PropTypes.string, + use: PropTypes.string +}; + +CIconRaw.defaultProps = { +}; + +export default CIconRaw; diff --git a/src/CImg.js b/src/CImg.js new file mode 100644 index 00000000..20d871c5 --- /dev/null +++ b/src/CImg.js @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CImg + +const CImg = props=>{ + + const { + className, + cssModule, + // + innerRef, + fluid, + block, + thumbnail, + shape, + align, + alt, + src, + width, + height, + placeholderColor, + active, + fluidGrow, + ...attributes + } = props; + + // vars + + const isActive = (()=>{ + //active prop is present in CImgLazy component, here always undefined + return active !== false + })(); + + const alignClass = (()=>{ + if (align === 'center') { + return 'mx-auto' + } else if (align === 'right') { + return 'float-right' + } else if (align === 'left') { + return 'float-left' + } + return null + })(); + + // render + + const classes = mapToCssModules(classNames( + className, + alignClass, + thumbnail ? 'img-thumbnail' : null, + fluid || fluidGrow ? 'img-fluid' : null, + fluidGrow ? 'w-100' : null, + block ? 'd-block' : null, + shape ? shape : null, + ), cssModule); + + return ( + src && isActive? + {alt} : + + ); + +} + +CImg.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + src: PropTypes.string, + alt: PropTypes.string, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + block: PropTypes.bool, + fluid: PropTypes.bool, + fluidGrow: PropTypes.bool, + shape: PropTypes.string,//oneOf(['', 'rounded']), + thumbnail: PropTypes.bool, + align: PropTypes.oneOf(['', 'left', 'right', 'center']), + placeholderColor: PropTypes.string +}; + +CImg.defaultProps = { + placeholderColor: 'transparent' +}; + +export default CImg; diff --git a/src/CInput.js b/src/CInput.js new file mode 100644 index 00000000..667162f4 --- /dev/null +++ b/src/CInput.js @@ -0,0 +1,130 @@ +import React, {useRef} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, deprecated, warnOnce, tagPropType} from './Shared/helper.js'; + +//component - CoreUI / CInput + +const CInput = props=>{ + + let { + tag, + className, + cssModule, + // + innerRef, + type, + bsSize, + state, + valid, + invalid, + addon, + static: staticInput, + plaintext, + ...attributes + } = props; + + let fields = useRef({}).current; + + const getRef = (ref)=>{ + if (props.innerRef) { + props.innerRef(ref); + } + fields.ref = ref; + } + + const focus = ()=>{ + if (fields.ref) { + fields.ref.focus(); + } + } + + // render + + const checkInput = ['radio', 'checkbox'].indexOf(type) > -1; + const isNotaNumber = new RegExp('\\D', 'g'); + + const fileInput = type === 'file'; + const textareaInput = type === 'textarea'; + const selectInput = type === 'select'; + let Tag = tag || (selectInput || textareaInput ? type : 'input'); + + let formControlClass = 'form-control'; + + if (plaintext || staticInput) { + formControlClass = `${formControlClass}-plaintext`; + Tag = tag || 'input'; + } else if (fileInput) { + formControlClass = `${formControlClass}-file`; + } else if (checkInput) { + if (addon) { + formControlClass = null; + } else { + formControlClass = 'form-check-input'; + } + } + + if (attributes.size && isNotaNumber.test(attributes.size)) { + warnOnce( + 'Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.' + ); + bsSize = attributes.size; + delete attributes.size; + } + + const classes = mapToCssModules( + classNames( + className, + invalid && 'is-invalid', + valid && 'is-valid', + bsSize ? `form-control-${bsSize}` : false, + formControlClass + ), + cssModule + ); + + if (Tag === 'input' || (tag && typeof tag === 'function')) { + attributes.type = type; + } + + if ( + attributes.children && + !( + plaintext || + staticInput || + type === 'select' || + typeof Tag !== 'string' || + Tag === 'select' + ) + ) { + warnOnce( + `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.` + ); + delete attributes.children; + } + + return ; + +} + +CInput.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + type: PropTypes.string, + size: PropTypes.string, + bsSize: PropTypes.string, + valid: PropTypes.bool, + invalid: PropTypes.bool, + plaintext: PropTypes.bool, + addon: PropTypes.bool +}; + +CInput.defaultProps = { + type: 'text' +}; + +export default CInput; diff --git a/src/CInputGroup.js b/src/CInputGroup.js new file mode 100644 index 00000000..1edc44d1 --- /dev/null +++ b/src/CInputGroup.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CInputGroup + +const CInputGroup = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + size, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'input-group', + size ? `input-group-${size}` : null + ), cssModule); + + return ( + + ); + +} + +CInputGroup.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + size: PropTypes.string +}; + +CInputGroup.defaultProps = { + tag: 'div' +}; + +export default CInputGroup; diff --git a/src/CInputGroupAddon.js b/src/CInputGroupAddon.js new file mode 100644 index 00000000..cf382776 --- /dev/null +++ b/src/CInputGroupAddon.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CInputGroupText from './CInputGroupText'; + +//component - CoreUI / CInputGroupAddon + +const CInputGroupAddon = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + addonType, + inputProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'input-group-' + addonType + ), cssModule); + + if (typeof children === 'string') { + return ( + + + + ); + } + + return ( + + ); + +} + +CInputGroupAddon.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + addonType: PropTypes.oneOf(['prepend', 'append']).isRequired, + inputProps: PropTypes.object +}; + +CInputGroupAddon.defaultProps = { + tag: 'div' +}; + +export default CInputGroupAddon; diff --git a/src/CInputGroupText.js b/src/CInputGroupText.js new file mode 100644 index 00000000..a3c3314a --- /dev/null +++ b/src/CInputGroupText.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CInputGroupText + +const CInputGroupText = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'input-group-text' + ), cssModule); + + return ( + + ); + +} + +CInputGroupText.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), +}; + +CInputGroupText.defaultProps = { + tag: 'span' +}; + +export default CInputGroupText; diff --git a/src/CJumbotron.js b/src/CJumbotron.js new file mode 100644 index 00000000..cd95f2b7 --- /dev/null +++ b/src/CJumbotron.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CJumbotron + +const CJumbotron = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + fluid, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'jumbotron', + fluid ? 'jumbotron-fluid' : false + ), cssModule); + + return ( + + ); + +} + +CJumbotron.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + fluid: PropTypes.bool +}; + +CJumbotron.defaultProps = { + tag: 'div' +}; + +export default CJumbotron; diff --git a/src/CLabel.js b/src/CLabel.js new file mode 100644 index 00000000..100aa38e --- /dev/null +++ b/src/CLabel.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules, deprecated} from './Shared/helper.js'; +import isobject from 'lodash.isobject'; + +const colWidths = ['xs', 'sm', 'md', 'lg', 'xl']; + +const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); + +const columnProps = PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.shape({ + size: stringOrNumberProp, + push: deprecated(stringOrNumberProp, 'Please use the prop "order"'), + pull: deprecated(stringOrNumberProp, 'Please use the prop "order"'), + order: stringOrNumberProp, + offset: stringOrNumberProp, + }), +]); + +const getColumnSizeClass = (isXs, colWidth, colSize)=>{ + if (colSize === true || colSize === '') { + return isXs ? 'col' : `col-${colWidth}`; + } else if (colSize === 'auto') { + return isXs ? 'col-auto' : `col-${colWidth}-auto`; + } + return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`; +}; + +//component - CoreUI / CLabel + +const CLabel = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + hidden, + widths, + check, + size, + for: htmlFor, + ...attributes + } = props; + + // render + + const colClasses = []; + + widths.forEach((colWidth, i) => { + + let columnProp = props[colWidth]; + delete attributes[colWidth]; + + if (!columnProp && columnProp !== '') { + return; + } + + const isXs = !i; + let colClass; + + if (isobject(columnProp)) { + const colSizeInterfix = isXs ? '-' : `-${colWidth}-`; + colClass = getColumnSizeClass(isXs, colWidth, columnProp.size); + colClasses.push(mapToCssModules(classNames({ + [colClass]: columnProp.size || columnProp.size === '', + [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0, + [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0 + })), cssModule); + } else { + colClass = getColumnSizeClass(isXs, colWidth, columnProp); + colClasses.push(colClass); + } + + }); + + const classes = mapToCssModules(classNames( + className, + hidden ? 'sr-only' : false, + check ? 'form-check-label' : false, + size ? `col-form-label-${size}` : false, + colClasses, + colClasses.length ? 'col-form-label' : false + ), cssModule); + + return ( + + ); + +} + +CLabel.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + hidden: PropTypes.bool, + check: PropTypes.bool, + size: PropTypes.string, + for: PropTypes.string, + xs: columnProps, + sm: columnProps, + md: columnProps, + lg: columnProps, + xl: columnProps, + widths: PropTypes.array +}; + +CLabel.defaultProps = { + tag: 'label', + widths: colWidths +}; + +export default CLabel; diff --git a/src/CLink.js b/src/CLink.js new file mode 100644 index 00000000..7ae4acfb --- /dev/null +++ b/src/CLink.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Link} from 'react-router-dom'; + +//component - CoreUI / CLink + +const CLink = props=>{ + + const { + className, + cssModule, + // + innerRef, + active, + disabled, + href, + to, + ...attributes + } = props; + + let href2 = href; + + const onClick = e=>{ + if (props.disabled) { + e.preventDefault(); + return; + } + if (href2 === '#') { + e.preventDefault(); + } + if (props.onClick) { + props.onClick(e); + } + } + + // render + + const classes = mapToCssModules(classNames( + className, + active ? 'active' : null, + disabled ? 'disabled' : null + ), cssModule); + + // + + to || (href2 || (href2='#')); + + return ( + to ? + : + + ); + +} + +CLink.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + disabled: PropTypes.bool, + href: PropTypes.string, + to: PropTypes.string +}; + +CLink.defaultProps = { +}; + +export default CLink; diff --git a/src/CListGroup.js b/src/CListGroup.js new file mode 100644 index 00000000..a5904f09 --- /dev/null +++ b/src/CListGroup.js @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CListGroup + +const CListGroup = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + horizontal, + flush, + variant, + ...attributes + } = props; + + // render + + const classes = mapToCssModules(classNames( + className, + 'list-group', + horizontal ? `list-group-horizontal-${horizontal}` : false, + flush ? 'list-group-flush' : false, + variant ? 'list-group-'+variant : false + ), cssModule); + + return ( + + ); + +} + +CListGroup.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + flush: PropTypes.bool, + horizontal: PropTypes.string, + role: PropTypes.string, + variant: PropTypes.string +}; + +CListGroup.defaultProps = { + tag: 'ul', + role: 'list-items' +}; + +export default CListGroup; diff --git a/src/CListGroupHeading.js b/src/CListGroupHeading.js new file mode 100644 index 00000000..ecfb1d56 --- /dev/null +++ b/src/CListGroupHeading.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CListGroupHeading + +const CListGroupHeading = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + // render + + const classes = mapToCssModules(classNames( + className, + 'list-group-item-heading' + ), cssModule); + + return ( + + ); + +} + +CListGroupHeading.propTypes = { + tag: tagPropType, + className: PropTypes.any, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CListGroupHeading.defaultProps = { + tag: 'h5' +}; + +export default CListGroupHeading; diff --git a/src/CListGroupItem.js b/src/CListGroupItem.js new file mode 100644 index 00000000..2cc483e3 --- /dev/null +++ b/src/CListGroupItem.js @@ -0,0 +1,74 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CLink from './CLink'; + +//component - CoreUI / CListGroupItem + +const CListGroupItem = props=>{ + + let { + tag: Tag, + className, + cssModule, + // + innerRef, + active, + disabled, + action, + color, + accent, + ...attributes + } = props; + + if (disabled) { + attributes.onClick = e=>{ + e.preventDefault(); + }; + } + + //render + + const classes = mapToCssModules(classNames( + className, + active ? 'active' : false, + disabled ? 'disabled' : false, + action||attributes.href||attributes.to||Tag=='button' ? 'list-group-item-action' : false, + color ? `list-group-item-${color}` : false, + accent ? `list-group-item-accent-${accent}` : false, + 'list-group-item' + ), cssModule); + + if (props.href || props.to){ + Tag = CLink; + return ( + + ); + } + else { + return ( + + ); + } + +} + +CListGroupItem.propTypes = { + tag: tagPropType, + className: PropTypes.any, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + disabled: PropTypes.bool, + color: PropTypes.string, + accent: PropTypes.string, + action: PropTypes.bool +}; + +CListGroupItem.defaultProps = { + tag: 'li' +}; + +export default CListGroupItem; diff --git a/src/CListGroupText.js b/src/CListGroupText.js new file mode 100644 index 00000000..431ae8b2 --- /dev/null +++ b/src/CListGroupText.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CListGroupText + +const CListGroupText = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'list-group-item-text' + ), cssModule); + + return ( + + ); + +} + +CListGroupText.propTypes = { + tag: tagPropType, + className: PropTypes.any, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CListGroupText.defaultProps = { + tag: 'p' +}; + +export default CListGroupText; diff --git a/src/CMedia.js b/src/CMedia.js new file mode 100644 index 00000000..a165d59b --- /dev/null +++ b/src/CMedia.js @@ -0,0 +1,53 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +export const Context = React.createContext({}); + +//component - CoreUI / CMedia + +const CMedia = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + asideRight, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + asideRight ? 'd-flex flex-row-reverse' : null, + 'media', + ), cssModule); + + return ( + + + + ); + +} + +CMedia.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + asideRight: PropTypes.bool +}; + +CMedia.defaultProps = { + tag: 'div' +}; + +export default CMedia; diff --git a/src/CMediaAside.js b/src/CMediaAside.js new file mode 100644 index 00000000..ac5ff65e --- /dev/null +++ b/src/CMediaAside.js @@ -0,0 +1,72 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +import {Context} from './CMedia'; + +//component - CoreUI / CMediaAside + +const CMediaAside = props=>{ + + let { + tag: Tag, + className, + cssModule, + // + innerRef, + asideImageProps, + asideVerticalPosition, + asideRight, + addAsideMargin, + ...attributes + } = props; + + const computedAsideImageProps = ()=>{ + return Object.assign( + { + placeholderColor: '#777777', + width: '64px', + height: asideVerticalPosition === 'stretch' ? '100%' : '64px' + }, + asideImageProps || {} + ) + } + + const context = useContext(Context); + + if (!asideRight && context.asideRight) + asideRight = true; + + //render + + const classes = mapToCssModules(classNames( + className, + addAsideMargin ? `m${asideRight? 'l' : 'r' }-3` : '', + `align-self-${asideVerticalPosition}` + ), cssModule); + + return ( + + ); + +} + +CMediaAside.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + asideVerticalPosition: PropTypes.string, + asideRight: PropTypes.bool, + asideImageProps: PropTypes.object, + addAsideMargin: PropTypes.bool +}; + +CMediaAside.defaultProps = { + tag: 'div', + asideVerticalPosition: 'start' +}; + +export default CMediaAside; diff --git a/src/CMediaBody.js b/src/CMediaBody.js new file mode 100644 index 00000000..bbb4f1d6 --- /dev/null +++ b/src/CMediaBody.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CMediaBody + +const CMediaBody = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'media-body' + ), cssModule); + + return ( + + ); + +} + +CMediaBody.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CMediaBody.defaultProps = { + tag: 'div' +}; + +export default CMediaBody; diff --git a/src/CModal.js b/src/CModal.js new file mode 100644 index 00000000..dad471ba --- /dev/null +++ b/src/CModal.js @@ -0,0 +1,375 @@ +import React, {useState, useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, + getOriginalBodyPadding, + conditionallyUpdateScrollbar, + setScrollbarWidth, + omit, + focusableElements, + TransitionTimeouts} from './Shared/helper.js'; +import CPortal from './CPortal'; +import CFade from './CFade'; + +function noop() { } + +const FadePropTypes = PropTypes.shape(CFade.propTypes); + +const propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + isOpen: PropTypes.bool, + autoFocus: PropTypes.bool, + centered: PropTypes.bool, + size: PropTypes.string, + toggle: PropTypes.func, + keyboard: PropTypes.bool, + role: PropTypes.string, + labelledBy: PropTypes.string, + backdrop: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.oneOf(['static']) + ]), + onEnter: PropTypes.func, + onExit: PropTypes.func, + onOpened: PropTypes.func, + onClosed: PropTypes.func, + wrapClassName: PropTypes.string, + modalClassName: PropTypes.string, + backdropClassName: PropTypes.string, + contentClassName: PropTypes.string, + external: PropTypes.node, + fade: PropTypes.bool, + zIndex: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + ]), + backdropTransition: FadePropTypes, + modalTransition: FadePropTypes +}; + +const propsToOmit = Object.keys(propTypes); + +//component - CoreUI / CModal + +const CModal = props=>{ + + const [isOpen, setIsOpen] = useState(props.isOpen); + + const fields = useRef({ + _element: null, + _originalBodyPadding: null, + lastProps: {} + }).current; + + const onOpened = (node, isAppearing)=>{ + props.onOpened(); + (props.modalTransition.onEntered || noop)(node, isAppearing); + } + + const onClosed = node=>{ + props.onClosed(); + (props.modalTransition.onExited || noop)(node); + destroy(); + if (fields._isMounted) { + setIsOpen(false); + } + } + + const setFocus = ()=>{ + if (fields._dialog && fields._dialog.parentNode && typeof fields._dialog.parentNode.focus === 'function') { + fields._dialog.parentNode.focus(); + } + } + + const getFocusableChildren = ()=>{ + return fields._element.querySelectorAll(focusableElements.join(', ')); + } + + const getFocusedChild = ()=>{ + let currentFocus; + const focusableChildren = getFocusableChildren(); + try { + currentFocus = document.activeElement; + } catch (err) { + currentFocus = focusableChildren[0]; + } + return currentFocus; + } + + const handleBackdropClick = e=>{ + if (e.target === fields._mouseDownElement) { + e.stopPropagation(); + if (!isOpen || props.backdrop !== true) return; + const backdrop = fields._dialog ? fields._dialog.parentNode : null; + if (backdrop && e.target === backdrop && props.toggle) { + props.toggle(e); + } + } + } + + const handleTab = e=>{ + if (e.which !== 9) return; + const focusableChildren = getFocusableChildren(); + const totalFocusable = focusableChildren.length; + const currentFocus = getFocusedChild(); + let focusedIndex = 0; + for (let i = 0; i < totalFocusable; i += 1) { + if (focusableChildren[i] === currentFocus) { + focusedIndex = i; + break; + } + } + if (e.shiftKey && focusedIndex === 0) { + e.preventDefault(); + focusableChildren[totalFocusable - 1].focus(); + } else if (!e.shiftKey && focusedIndex === totalFocusable - 1) { + e.preventDefault(); + focusableChildren[0].focus(); + } + } + + const handleBackdropMouseDown = e=>{ + fields._mouseDownElement = e.target; + } + + const handleEscape = e=>{ + if (props.isOpen && props.keyboard && e.keyCode === 27 && props.toggle) { + e.preventDefault(); + e.stopPropagation(); + props.toggle(e); + } + } + + const init = ()=>{ + try { + fields._triggeringElement = document.activeElement; + } catch (err) { + fields._triggeringElement = null; + } + fields._element = document.createElement('div'); + fields._element.setAttribute('tabindex', '-1'); + fields._element.style.position = 'relative'; + fields._element.style.zIndex = props.zIndex; + fields._originalBodyPadding = getOriginalBodyPadding(); + conditionallyUpdateScrollbar(); + document.body.appendChild(fields._element); + if (CModal.openCount === 0) { + document.body.className = classNames( + document.body.className, + mapToCssModules('modal-open', props.cssModule) + ); + } + CModal.openCount += 1; + } + + const destroy = ()=>{ + if (fields._element) { + document.body.removeChild(fields._element); + fields._element = null; + } + if (fields._triggeringElement) { + if (fields._triggeringElement.focus) fields._triggeringElement.focus(); + fields._triggeringElement = null; + } + if (CModal.openCount <= 1) { + const modalOpenClassName = mapToCssModules('modal-open', props.cssModule); + // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened` + const modalOpenClassNameRegex = new RegExp(`(^| )${modalOpenClassName}( |$)`); + document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim(); + } + CModal.openCount -= 1; + setScrollbarWidth(fields._originalBodyPadding); + } + + const setState = (oVal, nVal, setF)=>{ + if (nVal===oVal) + return; + setF(nVal); + } + + // effect + + useEffect(() => { + //did mount + if (props.onEnter) { + props.onEnter(); + } + if (isOpen && props.autoFocus) { + setFocus(); + } + fields._isMounted = true; + return function cleanup() { + if (props.onExit) { + props.onExit(); + } + if (isOpen) { + destroy(); + } + fields._isMounted = false; + }; + }, + []); + + useEffect(() => { + if (props.autoFocus && isOpen && !fields.lastIsOpen) { + setFocus(); + } + if (fields._element && fields.lastProps.zIndex !== props.zIndex) { + fields._element.style.zIndex = props.zIndex; + } + }, + [isOpen]); + + useEffect(() => { + fields.lastProps = {...props}; + fields.lastIsOpen = isOpen; + fields.firstRender = false; + }); + + // render + + const renderModalDialog = ()=>{ + const attributes = omit(props, propsToOmit); + const dialogBaseClass = 'modal-dialog'; + return ( +
    { + fields._dialog = c; + }} + > +
    + {props.children} +
    +
    + ); + + } + + if (props.isOpen && !fields.lastProps.isOpen){ + setState(isOpen, props.isOpen, setIsOpen); + } + if (!fields.firstRender){ + if (isOpen && !fields.lastIsOpen){ + init(); + } + } + + if (isOpen) { + + const { + cssModule, + innerRef, + wrapClassName, + modalClassName, + backdropClassName, + isOpen, + backdrop, + role, + labelledBy, + external + } = props; + + const modalAttributes = { + onClick: handleBackdropClick, + onMouseDown: handleBackdropMouseDown, + onKeyUp: handleEscape, + onKeyDown: handleTab, + style: { display: 'block' }, + 'aria-labelledby': labelledBy, + role, + tabIndex: '-1' + }; + + const hasTransition = props.fade; + + const modalTransition = { + ...CFade.defaultProps, + ...props.modalTransition, + baseClass: hasTransition ? props.modalTransition.baseClass : '', + timeout: hasTransition ? props.modalTransition.timeout : 0, + }; + + const backdropTransition = { + ...CFade.defaultProps, + ...props.backdropTransition, + baseClass: hasTransition ? props.backdropTransition.baseClass : '', + timeout: hasTransition ? props.backdropTransition.timeout : 0, + }; + + const Backdrop = backdrop && ( + hasTransition ? + () + :
    + ); + + return ( + +
    + + {external} + {renderModalDialog()} + + {Backdrop} +
    +     + ); + } + + return null; + +} + +CModal.propTypes = propTypes; + +CModal.defaultProps = { + isOpen: false, + autoFocus: true, + centered: false, + role: 'dialog', + backdrop: true, + keyboard: true, + zIndex: 1050, + fade: true, + onOpened: noop, + onClosed: noop, + modalTransition: { + timeout: TransitionTimeouts.Modal, + }, + backdropTransition: { + mountOnEnter: true, + timeout: TransitionTimeouts.Fade + }, +}; + +CModal.openCount = 0; + +export default CModal; diff --git a/src/CModalBody.js b/src/CModalBody.js new file mode 100644 index 00000000..4bb0be1c --- /dev/null +++ b/src/CModalBody.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CModalBody + +const CModalBody = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'modal-body' + ), cssModule); + + return ( + + ); + +} + +CModalBody.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CModalBody.defaultProps = { + tag: 'div', +}; + +export default CModalBody; diff --git a/src/CModalFooter.js b/src/CModalFooter.js new file mode 100644 index 00000000..77918902 --- /dev/null +++ b/src/CModalFooter.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CModalFooter + +const CModalFooter = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'modal-footer' + ), cssModule); + + return ( + + ); + +} + +CModalFooter.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CModalFooter.defaultProps = { + tag: 'div', +}; + +export default CModalFooter; diff --git a/src/CModalHeader.js b/src/CModalHeader.js new file mode 100644 index 00000000..af83fdf3 --- /dev/null +++ b/src/CModalHeader.js @@ -0,0 +1,84 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CModalHeader + +const CModalHeader = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + toggle, + wrapTag: WrapTag, + closeAriaLabel, + charCode, + close, + mainClassName, + mainProps, + ...attributes + } = props; + + //render + + let closeButton; + + const classes = mapToCssModules(classNames( + className, + 'modal-header' + ), cssModule); + + const mainClasses = mapToCssModules(classNames( + mainClassName, + 'modal-title' + ), cssModule); + + if (!close && toggle) { + const closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode; + closeButton = ( + + ); + } + + return ( + + + {children} + + {close || closeButton} + + ); + +} + +CModalHeader.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + wrapTag: tagPropType, + toggle: PropTypes.func, + closeAriaLabel: PropTypes.string, + charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + close: PropTypes.object, + mainClassName: PropTypes.string, + mainProps: PropTypes.object +}; + +CModalHeader.defaultProps = { + tag: 'h5', + wrapTag: 'div', + closeAriaLabel: 'Close', + charCode: 215 +}; + +export default CModalHeader; diff --git a/src/CNav.js b/src/CNav.js new file mode 100644 index 00000000..4c694064 --- /dev/null +++ b/src/CNav.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CNav + +const CNav = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + variant, + vertical, + horizontal, + justified, + fill, + inCard, + ...attributes + } = props; + + const getVerticalClass = vertical=>{ + if (vertical === false) { + return false; + } else if (vertical === true || vertical === 'xs') { + return 'flex-column'; + } + return `flex-${vertical}-column`; + }; + + //render + + const classes = mapToCssModules(classNames( + className, + 'nav', + horizontal ? `justify-content-${horizontal}` : false, + variant=='tabs' ? 'nav-tabs' : variant=='pills' ? 'nav-pills' : null, + getVerticalClass(vertical), + { + 'card-header-tabs': inCard && variant=='tabs', + 'card-header-pills': inCard && variant=='pills', + 'nav-justified': justified, + 'nav-fill': fill, + } + ), cssModule); + + return ( + + ); + +} + +CNav.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + variant: PropTypes.oneOf(['', 'tabs', 'pills']), + vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + horizontal: PropTypes.string, + justified: PropTypes.bool, + fill: PropTypes.bool, + inCard: PropTypes.bool +}; + +CNav.defaultProps = { + tag: 'ul', + vertical: false, +}; + +export default CNav; diff --git a/src/CNavItem.js b/src/CNavItem.js new file mode 100644 index 00000000..b22ab50e --- /dev/null +++ b/src/CNavItem.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CNavLink from './CNavLink'; + +//component - CoreUI / CNavItem + +const CNavItem = props=>{ + + const { + tag: Tag, + className, + cssModule, + custom, + // + innerRef, + active, + linkClassName, + linkProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'nav-item', + active ? 'active' : false + ), cssModule); + + const linkClasses = mapToCssModules(classNames( + linkClassName, + ), cssModule); + + if (!custom){ + return ( + + + + ); + } + + return ( + + ); + +} + +CNavItem.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + custom: PropTypes.bool, + linkClassName: PropTypes.string, + linkProps: PropTypes.object +}; + +CNavItem.defaultProps = { + tag: 'li' +}; + +export default CNavItem; diff --git a/src/CNavLink.js b/src/CNavLink.js new file mode 100644 index 00000000..9e0dfd27 --- /dev/null +++ b/src/CNavLink.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules} from './Shared/helper.js'; +import CLink from './CLink'; + +//component - CoreUI / CNavLink + +const CNavLink = props=>{ + + const { + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'nav-link', + ), cssModule); + + return ( + + ); + +} + +CNavLink.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + onClick: PropTypes.func +}; + +CNavLink.defaultProps = { +}; + +export default CNavLink; diff --git a/src/CNavbar.js b/src/CNavbar.js new file mode 100644 index 00000000..9fa51eae --- /dev/null +++ b/src/CNavbar.js @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, tagPropType} from './Shared/helper.js'; + +const getExpandClass = expand=>{ + if (expand === false) { + return false; + } else if (expand === true || expand === 'xs') { + return 'navbar-expand'; + } + return `navbar-expand-${expand}`; +}; + +//component - CoreUI / CNavbar + +const CNavbar = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + expandable, + light, + fixed, + sticky, + color, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'navbar', + getExpandClass(expandable), + light ? 'navbar-light' : 'navbar-dark', + { + [`bg-${color}`]: color, + [`fixed-${fixed}`]: fixed, + [`sticky-${sticky}`]: sticky, + } + ), cssModule); + + return ( + + ); + +} + +CNavbar.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + light: PropTypes.bool, + color: PropTypes.string, + fixed: PropTypes.string, + sticky: PropTypes.string, + expandable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), +}; + +CNavbar.defaultProps = { + tag: 'nav', + expandable: false, +}; + +export default CNavbar; diff --git a/src/CNavbarBrand.js b/src/CNavbarBrand.js new file mode 100644 index 00000000..ddb54e50 --- /dev/null +++ b/src/CNavbarBrand.js @@ -0,0 +1,88 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {mapToCssModules, tagPropType} from './Shared/helper.js'; + +//component - CoreUI / CNavbarBrand + +const CNavbarBrand = props=>{ + + const { + tag: Tag, + className, + children, + // + innerRef, + ...attributes + } = props; + + const imgSrc = brand=>{ + return brand.src ? brand.src : ''; + } + const imgWidth = brand=>{ + return brand.width ? brand.width : 'auto'; + } + const imgHeight = brand=>{ + return brand.height ? brand.height : 'auto'; + } + const imgAlt = brand=>{ + return brand.alt ? brand.alt : ''; + } + const navbarBrandImg = (props, classBrand, key)=>{ + return ( + {imgAlt(props)} + ); + } + + //render + + const classes = classNames( + className, + 'navbar-brand' + ); + + const img = []; + if (props.brand) { + const classBrand = 'navbar-brand';//navbar-brand + img.push(navbarBrandImg(props.brand, classBrand, img.length + 1)); + } + if (props.full) { + const classBrand = 'navbar-brand-full'; + img.push(navbarBrandImg(props.full, classBrand, img.length + 1)); + } + if (props.minimized) { + const classBrand = 'navbar-brand-minimized'; + img.push(navbarBrandImg(props.minimized, classBrand, img.length + 1)); + } + + return ( + + {children || img} + + ); + +} + +CNavbarBrand.propTypes = { + tag: tagPropType, + className: PropTypes.string, + children: PropTypes.node, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + brand: PropTypes.any, + full: PropTypes.any, + minimized: PropTypes.any +}; + +CNavbarBrand.defaultProps = { + tag: 'div' +}; + +export default CNavbarBrand; diff --git a/src/CNavbarNav.js b/src/CNavbarNav.js new file mode 100644 index 00000000..e6b7e5ac --- /dev/null +++ b/src/CNavbarNav.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CNavbarNav + +const CNavbarNav = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'navbar-nav', + 'nav' + ), cssModule); + + return ( + + ); + +} + +CNavbarNav.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CNavbarNav.defaultProps = { + tag: 'ul' +}; + +export default CNavbarNav; diff --git a/src/CNavbarText.js b/src/CNavbarText.js new file mode 100644 index 00000000..cfd14c1d --- /dev/null +++ b/src/CNavbarText.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CNavbarText + +const CNavbarText = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'navbar-text' + ), cssModule); + + return ( + + ); + +} + +CNavbarText.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CNavbarText.defaultProps = { + tag: 'ul' +}; + +export default CNavbarText; diff --git a/src/CPagination.js b/src/CPagination.js new file mode 100644 index 00000000..2147aef9 --- /dev/null +++ b/src/CPagination.js @@ -0,0 +1,138 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CPaginationItem from './CPaginationItem'; +import CPaginationLink from './CPaginationLink'; + +export const Context = React.createContext({}); + +//component - CoreUI / CPagination + +const CPagination = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + listClassName, + pageFrom, + pageTo, + pageMin, + pageMax, + activePage, + size, + firstButtonHtml, + previousButtonHtml, + nextButtonHtml, + lastButtonHtml, + hideDots, + hideArrows, + hideDoubleArrows, + listTag: ListTag, + 'aria-label': label, + listProps, + onClick, + ...attributes + } = props; + + + const paginationClick = (e, type, n)=>{ + onClick && onClick(e, type, n); + } + + //render + + const classes = mapToCssModules(classNames( + className + ), cssModule); + + const listClasses = mapToCssModules(classNames( + listClassName, + 'pagination', + { + [`pagination-${size}`]: !!size, + } + ), cssModule); + + let autoChildren; + + if (!custom){ + let list=[]; + for (let i=pageFrom;i<=pageTo;i++) + list.push({i}); + const pagesBefore = pageFrom>pageMin; + const pagesAfter = pageTo + {pagesBefore&&firstButtonHtml?{firstButtonHtml}:''} + {pagesBefore&&previousButtonHtml?{previousButtonHtml}:''} + {!hideDots&&pagesBefore?...:''} + {list} + {!hideDots&&pagesAfter?...:''} + {pagesAfter&&nextButtonHtml?{nextButtonHtml}:''} + {pagesAfter&&lastButtonHtml?{lastButtonHtml}:''} + + ) + } + + return ( + + + + + + ); + +} + +CPagination.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + pageMin: PropTypes.number, + pageMax: PropTypes.number, + pageFrom: PropTypes.number, + pageTo: PropTypes.number, + activePage: PropTypes.number, + size: PropTypes.string, + listTag: tagPropType, + hideDots: PropTypes.bool, + hideArrows: PropTypes.bool, + hideDoubleArrows: PropTypes.bool, + firstButtonHtml: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + previousButtonHtml: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + nextButtonHtml: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + lastButtonHtml: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + 'aria-label': PropTypes.string, + listClassName: PropTypes.string, + listProps: PropTypes.object, + onClick: PropTypes.func +}; + +CPagination.defaultProps = { + tag: 'nav', + listTag: 'ul', + 'aria-label': 'pagination', + pageFrom: 2, + pageTo: 3, + pageMin: 1, + pageMax: 5, + activePage: 2, + firstButtonHtml: «, + previousButtonHtml: ‹, + nextButtonHtml: ›, + lastButtonHtml: », +}; + +export default CPagination; diff --git a/src/CPaginationItem.js b/src/CPaginationItem.js new file mode 100644 index 00000000..bc27b786 --- /dev/null +++ b/src/CPaginationItem.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CPaginationLink from './CPaginationLink'; + +//component - CoreUI / CPaginationItem + +const CPaginationItem = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + active, + disabled, + linkClassName, + linkProps, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'page-item', + { + 'active': active, + 'disabled': disabled, + } + ), cssModule); + + const linkClasses = mapToCssModules(classNames( + linkClassName, + ), cssModule); + + if (!custom){ + return ( + + + + ); + } + + return (); + +} + +CPaginationItem.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + disabled: PropTypes.bool, + linkClassName: PropTypes.string, + linkProps: PropTypes.object +}; + +CPaginationItem.defaultProps = { + tag: 'li', + active: false +}; + +export default CPaginationItem; diff --git a/src/CPaginationLink.js b/src/CPaginationLink.js new file mode 100644 index 00000000..d1b0b25e --- /dev/null +++ b/src/CPaginationLink.js @@ -0,0 +1,114 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Context} from './CPagination'; + +//component - CoreUI / CPaginationLink + +const CPaginationLink = props=>{ + + let { + tag: Tag, + className, + cssModule, + // + innerRef, + next, + previous, + onClick, + type, + n, + ...attributes + } = props; + + const context = useContext(Context); + + const linkClick = (e)=>{ + onClick && onClick(e, type, n); + context.paginationClick && context.paginationClick(e, type, n); + } + + //render + + const classes = mapToCssModules(classNames( + className, + 'page-link' + ), cssModule); + + let defaultAriaLabel; + if (previous) { + defaultAriaLabel = 'Previous'; + } else if (next) { + defaultAriaLabel = 'Next'; + } + const ariaLabel = props['aria-label'] || defaultAriaLabel; + + let defaultCaret; + if (previous) { + defaultCaret = ‹; + } else if (next) { + defaultCaret = ›; + } + + let children = props.children; + + if (children && Array.isArray(children) && children.length === 0) { + children = null; + } + + if (!attributes.href && Tag === 'a') { + Tag = 'button'; + } + + if (previous || next) { + children = [ + , + + {ariaLabel} + , + ]; + } + + return ( + + {children} + + ); + +} + +CPaginationLink.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + next: PropTypes.bool, + type: PropTypes.string, + n: PropTypes.number, + previous: PropTypes.bool, + onClick: PropTypes.func, + 'aria-label': PropTypes.string +}; + +CPaginationLink.defaultProps = { + tag: 'a', +}; + +export default CPaginationLink; diff --git a/src/CPopover.js b/src/CPopover.js new file mode 100644 index 00000000..66f9ace9 --- /dev/null +++ b/src/CPopover.js @@ -0,0 +1,70 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CTooltipPopoverWrapper from './CTooltipPopoverWrapper'; + +//component - CoreUI / CPopover + +const CPopover = props=>{ + + let { + custom, + // + toggle, + show, + defaultOpen, + ...attributes + } = props; + + const [isOpen, setIsOpen] = useState(defaultOpen || false); + + if (!custom){ + const userToggle = toggle; + toggle = (e)=>{ + setIsOpen(!isOpen); + if (userToggle) + userToggle(e); + } + show = isOpen; + } + + //render + + const popperClasses = classNames( + 'popover', + 'show', + props.className + ); + + const classes = classNames( + 'popover-inner', + props.innerClassName + ); + + return ( + + ); + +} + +CPopover.propTypes = { + ...CTooltipPopoverWrapper.propTypes, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + defaultOpen: PropTypes.bool, +} + +CPopover.defaultProps = { + placement: 'right', + placementPrefix: 'bs-popover', + trigger: 'click', +}; + +export default CPopover; diff --git a/src/CPopoverBody.js b/src/CPopoverBody.js new file mode 100644 index 00000000..1135adc2 --- /dev/null +++ b/src/CPopoverBody.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CPopoverBody + +const CPopoverBody = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'popover-body' + ), cssModule); + + return ( + + ); + +} + +CPopoverBody.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CPopoverBody.defaultProps = { + tag: 'div' +}; + +export default CPopoverBody; diff --git a/src/CPopoverHeader.js b/src/CPopoverHeader.js new file mode 100644 index 00000000..c30dda2b --- /dev/null +++ b/src/CPopoverHeader.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CPopoverHeader + +const CPopoverHeader = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'popover-header' + ), cssModule); + + return ( + + ); + +} + +CPopoverHeader.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CPopoverHeader.defaultProps = { + tag: 'h3' +}; + +export default CPopoverHeader; diff --git a/src/CPopperContent.js b/src/CPopperContent.js new file mode 100644 index 00000000..32a1165b --- /dev/null +++ b/src/CPopperContent.js @@ -0,0 +1,183 @@ +import React, {useState, useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import ReactDOM from 'react-dom'; +import classNames from 'classnames'; +import {Arrow, Popper as ReactPopper} from 'react-popper'; +import {getTarget, targetPropType, mapToCssModules, DOMElement, tagPropType} from './Shared/helper.js'; +import CFade from './CFade'; + +export const Context = React.createContext({}); + +//component - CoreUI / CPopperContentWrapper + +class CPopperContentWrapper extends React.Component { + getChildContext(){ + return this.context; + } + render(){ + return this.props.children; + } +} + +CPopperContentWrapper.contextType = Context; + +CPopperContentWrapper.childContextTypes = { + popperManager: PropTypes.object.isRequired +}; + +//component - CoreUI / CPopperContent + +const CPopperContent = props=>{ + + const [placement, setPlacement] = useState(); + + const fields = useRef({ + firstRender: true + }).current; + + const setTargetNode = node=>{ + fields.targetNode = node; + } + + const getTargetNode = ()=>{ + return fields.targetNode; + } + + const getContainerNode = ()=>{ + return getTarget(props.container); + } + + const getRef = ref=>{ + fields._element = ref; + } + + const handlePlacementChange = data=>{ + if (placement !== data.placement) { + setPlacement(data.placement); + } + return data; + } + + //effect - update + useEffect(() => { + if (fields.firstRender) + return; + if (fields._element && fields._element.childNodes && fields._element.childNodes[0] && fields._element.childNodes[0].focus) { + fields._element.childNodes[0].focus(); + } + }); + + useEffect(() => { + fields.firstRender = false; + }, + []); + + //render + + const renderChildren = ()=>{ + + const { + tag, + children, + className, + cssModule, + // + isOpen, + flip, + target, + offset, + fallbackPlacement, + placementPrefix, + arrowClassName: _arrowClassName, + hideArrow, + container, + modifiers, + boundariesElement, + ...attributes + } = props; + + const arrowClassName = mapToCssModules(classNames( + 'arrow', + _arrowClassName + ), cssModule); + + const placement2 = (placement || attributes.placement).split('-')[0]; + + const popperClassName = mapToCssModules(classNames( + className, //8 _popperClassName + placementPrefix ? `${placementPrefix}-${placement2}` : placement2 + ), props.cssModule); + + const extendedModifiers = { + offset: { offset }, + flip: { enabled: flip, behavior: fallbackPlacement }, + preventOverflow: { boundariesElement }, + update: { + enabled: true, + order: 950, + fn: handlePlacementChange, + }, + ...modifiers, + }; + + return ( + + + + {children} + {!hideArrow && } + + + + ); + + } + + setTargetNode(getTarget(props.target)); + + if (props.isOpen) { + return props.container === 'inline' ? + renderChildren() : + ReactDOM.createPortal((
    {renderChildren()}
    ), getContainerNode()); + } + + return null; + +} + +CPopperContent.propTypes = { + tag: tagPropType, + children: PropTypes.node.isRequired, + className: PropTypes.string, + cssModule: PropTypes.object, + // + placement: PropTypes.string, + placementPrefix: PropTypes.string, + arrowClassName: PropTypes.string, + hideArrow: PropTypes.bool, + isOpen: PropTypes.bool.isRequired, + offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + fallbackPlacement: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), + flip: PropTypes.bool, + container: targetPropType, + target: targetPropType.isRequired, + modifiers: PropTypes.object, + boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), +}; + +CPopperContent.defaultProps = { + boundariesElement: 'scrollParent', + placement: 'auto', + hideArrow: false, + isOpen: false, + offset: 0, + fallbackPlacement: 'flip', + flip: true, + container: 'body', + modifiers: {}, +}; + +export default CPopperContent; diff --git a/src/CPopperTargetHelper.js b/src/CPopperTargetHelper.js new file mode 100644 index 00000000..ee1ccb6a --- /dev/null +++ b/src/CPopperTargetHelper.js @@ -0,0 +1,23 @@ +import {useContext} from 'react'; +import PropTypes from 'prop-types'; +import {getTarget, targetPropType} from './Shared/helper.js'; +import {Context} from './CPopperContent'; + +//component - CoreUI / CPopperTargetHelper + +const CPopperTargetHelper = props=>{ + + const context = useContext(Context); + + //render + + context.popperManager.setTargetNode(getTarget(props.target)); + return null; + +} + +CPopperTargetHelper.propTypes = { + target: targetPropType.isRequired, +}; + +export default CPopperTargetHelper; diff --git a/src/CPortal.js b/src/CPortal.js new file mode 100644 index 00000000..c9177e68 --- /dev/null +++ b/src/CPortal.js @@ -0,0 +1,48 @@ +import {useEffect, useRef} from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import {canUseDOM} from './Shared/helper.js'; + +//component - CoreUI / CPortal + +const CPortal = props=>{ + + const fields = useRef({defaultNode: null}).current; + + // effect + + useEffect(() => { + return function cleanup() { + if (fields.defaultNode) { + document.body.removeChild(fields.defaultNode); + } + fields.defaultNode = null; + }; + }, + [fields.defaultNode]); + + // render + + if (!canUseDOM) { + return null; + } + + if (!props.node && !fields.defaultNode) { + fields.defaultNode = document.createElement('div'); + document.body.appendChild(fields.defaultNode); + } + + return ReactDOM.createPortal( + props.children, + props.node || fields.defaultNode + ); + +} + +CPortal.propTypes = { + children: PropTypes.node.isRequired, + // + node: PropTypes.any +}; + +export default CPortal; diff --git a/src/CProgress.js b/src/CProgress.js new file mode 100644 index 00000000..d8cb6f8b --- /dev/null +++ b/src/CProgress.js @@ -0,0 +1,123 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import toNumber from 'lodash.tonumber'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CProgress + +const CProgress = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + barClassName, + barProps, + height, + value, + max, + animated, + striped, + color, + bar, + multi, + showPercentage, + showValue, + precision, + size, + ...attributes + } = props; + + let valueNumber = toNumber(value); + let percent = (valueNumber / toNumber(max)) * 100; + + // render + + const progressClasses = mapToCssModules(classNames( + className, + size ? 'progress-'+size : null, + 'progress' + ), cssModule); + + const progressBarClasses = mapToCssModules(classNames( + 'progress-bar', + bar ? className || barClassName : barClassName, + animated ? 'progress-bar-animated' : null, + color ? `bg-${color}` : null, + striped || animated ? 'progress-bar-striped' : null + ), cssModule); + + if (precision) + percent = percent.toPrecision(precision); + if (precision) + valueNumber = valueNumber.toPrecision(precision); + + const ProgressBar = multi ? children : ( +
    + ); + + if (bar) { + return ProgressBar; + } + + let style; + if (height) + style = {height}; + else + style = {}; + + return ( + + ); + +} + +CProgress.propTypes = { + tag: tagPropType, + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + barClassName: PropTypes.string, + barProps: PropTypes.object, + height: PropTypes.string, + bar: PropTypes.bool, + multi: PropTypes.bool, + value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + max: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + animated: PropTypes.bool, + striped: PropTypes.bool, + color: PropTypes.string, + precision: PropTypes.number, + showPercentage: PropTypes.bool, + showValue: PropTypes.bool, + size: PropTypes.string +}; + +CProgress.defaultProps = { + tag: 'div', + value: 0, + max: 100, +}; + +export default CProgress; diff --git a/src/CRow.js b/src/CRow.js new file mode 100644 index 00000000..2ffa9690 --- /dev/null +++ b/src/CRow.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CRow + +const CRow = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + gutters, + form, + alignHorizontal, + alignVertical, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + !gutters ? 'no-gutters' : null, + alignHorizontal ? `justify-content-${alignHorizontal}` : null, + alignVertical ? `align-${alignVertical}` : null, + form ? 'form-row' : 'row' + ), cssModule); + + return ( + + ); + +} + +CRow.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + gutters: PropTypes.bool, + form: PropTypes.bool, + alignHorizontal: PropTypes.string, + alignVertical: PropTypes.string +}; + +CRow.defaultProps = { + tag: 'div', + gutters: true +}; + +export default CRow; diff --git a/src/CSidebar.js b/src/CSidebar.js new file mode 100644 index 00000000..71c40f66 --- /dev/null +++ b/src/CSidebar.js @@ -0,0 +1,166 @@ +import React, {useState, useRef, useMemo, useEffect} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {sidebarCssClasses} from './Shared'; +import ClickOutHandler from 'react-onclickout' +import './Shared/element-closest' + +export const Context = React.createContext({}); + +//component - CoreUI / CSidebar + +const CSidebar = props=>{ + + const { + tag: Tag, + children, + className, + innerRef, + breakpoint, + show, + fixed, + unfoldable, + minimize, + size, + hideOnMobileClick, + aside, + colorScheme, + overlaid, + dropdownMode, + onChange, + ...attributes + } = props; + + const [isOpen, setIsOpen] = useState(show); + const compData = useRef({reRender:false}).current; + const ref = useRef(); + + //methods + + const closeSidebar = ()=>{ + setIsOpen('responsive'); + onChange && onChange('close'); + } + const isOnMobile = ()=>{ + return Boolean(getComputedStyle(ref.current).getPropertyValue('--is-mobile')) + } + const onSidebarClick = (e)=>{ + const hiddingElementClicked = e.target.className.includes && e.target.className.includes('c-sidebar-nav-link') + if ( + hiddingElementClicked && + hideOnMobileClick && + isOnMobile() + ) { + closeSidebar() + } + } + const onClickOut = e=>{ + if (compData.reRender){ + return; + } + closeSidebar() + } + + useMemo(()=>{ + if (compData.nextRender){ + compData.reRender = true; + setIsOpen(show); + } + },[show]); + + useEffect(()=>{ + compData.reRender = false; + }) + + + compData.nextRender = true; + + //console.log(isOpen); + + // render + + const haveResponsiveClass = breakpoint && isOpen === 'responsive' + const classes = classNames( + className, + 'c-sidebar', + colorScheme ? `c-sidebar-${colorScheme}` : null, + isOpen===true ? 'c-sidebar-show' : null, + haveResponsiveClass ? `c-sidebar-${breakpoint}-show` : null, + fixed && !overlaid ? 'c-sidebar-fixed' : null, + aside ? 'c-sidebar-right' : null, + minimize && !unfoldable ? 'c-sidebar-minimized' : null, + minimize && unfoldable ? 'c-sidebar-unfoldable' : null, + overlaid ? 'c-sidebar-overlaid' : null, + size ? `c-sidebar-${size}` : null + ); + + const clickOutClasses = classNames( + 'c-sidebar-backdrop', + isOpen ? 'd-show' : 'd-none' + ); + const style = { + background: isOpen? 'black' : 'white' + } + + const state = { + minimize: minimize && !unfoldable + } + + if (isOpen) + return ( + + + + {children} + + + + ); + else + return ( + + + {children} + + + ); + +} + +CSidebar.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + fixed: PropTypes.bool, + unfoldable: PropTypes.bool, + overlaid: PropTypes.bool, + breakpoint: PropTypes.oneOf([false, '', 'sm', 'md', 'lg', 'xl']), + minimize: PropTypes.bool, + show: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']), + hideOnMobileClick: PropTypes.bool, + aside: PropTypes.bool, + colorScheme: PropTypes.string, + dropdownMode: PropTypes.oneOf(['', 'openActive', 'close', 'closeInactive', 'noAction']), + onChange: PropTypes.func +}; + +CSidebar.defaultProps = { + tag: 'div', + fixed: true, + breakpoint: 'lg', + show: 'responsive', + hideOnMobileClick: true, + colorScheme: 'dark', + dropdownMode: 'openActive', +}; + +export default CSidebar; diff --git a/src/CSidebarBrand.js b/src/CSidebarBrand.js new file mode 100644 index 00000000..a3b0b3eb --- /dev/null +++ b/src/CSidebarBrand.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CLink from './CLink'; + +//component - CoreUI / CSidebarBrand + +const CSidebarBrand = props=>{ + + let { + tag: Tag, + children, + className, + custom, + // + innerRef, + img, + imgFull, + imgMinimized, + wrappedInLink, + linkClassName, + linkProps, + ...attributes + } = props; + + const imgSrc = brand=>{ + return brand.src ? brand.src : ''; + } + const imgWidth = brand=>{ + return brand.width ? brand.width : 'auto'; + } + const imgHeight = brand=>{ + return brand.height ? brand.height : 'auto'; + } + const imgAlt = brand=>{ + return brand.alt ? brand.alt : ''; + } + const navbarBrandImg = (props, classBrand, key)=>{ + const { + src, + width, + alt, + height, + ...attributes + } = props; + return ( + {imgAlt(props)} + ); + } + + // render + + const classes = classNames( + className, + 'c-sidebar-brand' + ); + + if (custom){ + return ( + + {children} + + ); + } + + const classesLink = classNames( + linkClassName, + 'c-sidebar-brand' + ); + + const imgChildren = []; + if (imgFull) { + imgChildren.push(navbarBrandImg(imgFull||img, 'c-sidebar-brand-full', 1)); + } + if (imgMinimized) { + imgChildren.push(navbarBrandImg(imgMinimized||img, 'c-sidebar-brand-minimized', imgChildren.length + 1)); + } + + return ( + + { + wrappedInLink ? + + {imgChildren} + + :imgChildren + } + + ); + +} + +CSidebarBrand.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + img: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + imgFull: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + imgMinimized: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + linkClassName: PropTypes.string, + linkProps: PropTypes.object, + wrappedInLink: PropTypes.oneOfType([PropTypes.object, PropTypes.string]) +}; + +CSidebarBrand.defaultProps = { + tag: 'div' +}; + +export default CSidebarBrand; diff --git a/src/CSidebarClose.js b/src/CSidebarClose.js new file mode 100644 index 00000000..d5744e8f --- /dev/null +++ b/src/CSidebarClose.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CButtonClose from './CButtonClose'; + +//component - CoreUI / CSidebarClose + +const CSidebarClose = props=>{ + + const { + className, + ...attributes + } = props; + + // render + + const classes = classNames( + 'c-sidebar-close', + className + ); + + return ( + + + x + + + + ); + +} + +CSidebarClose.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; + +CSidebarClose.defaultProps = { +}; + +export default CSidebarClose; diff --git a/src/CSidebarFooter.js b/src/CSidebarFooter.js new file mode 100644 index 00000000..4f71f093 --- /dev/null +++ b/src/CSidebarFooter.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarFooter + +const CSidebarFooter = props=>{ + + const { + tag: Tag, + children, + className, + // + innerRef, + ...attributes + } = props; + + // render + + const classes = classNames(className, 'c-sidebar-footer'); + + return ( + children ? + + {children} + + : null + ); + +} + +CSidebarFooter.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CSidebarFooter.defaultProps = { + tag: 'div' +}; + +export default CSidebarFooter; diff --git a/src/CSidebarForm.js b/src/CSidebarForm.js new file mode 100644 index 00000000..c1e9e6e1 --- /dev/null +++ b/src/CSidebarForm.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarForm + +const CSidebarForm = props=>{ + + const { + tag: Tag, + children, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames(className, 'c-sidebar-form'); + + return ( + children ? + + {children} + + : null + ); + +} + +CSidebarForm.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CSidebarForm.defaultProps = { + tag: 'div' +}; + +export default CSidebarForm; diff --git a/src/CSidebarHeader.js b/src/CSidebarHeader.js new file mode 100644 index 00000000..15b1b0a1 --- /dev/null +++ b/src/CSidebarHeader.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarHeader + +const CSidebarHeader = props=>{ + + const { + tag: Tag, + children, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames( + className, + 'c-sidebar-header' + ); + + return ( + children ? + + {children} + + : null + ); + +} + +CSidebarHeader.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CSidebarHeader.defaultProps = { + tag: 'div' +}; + +export default CSidebarHeader; diff --git a/src/CSidebarMinimizer.js b/src/CSidebarMinimizer.js new file mode 100644 index 00000000..3093518a --- /dev/null +++ b/src/CSidebarMinimizer.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarMinimizer + +const CSidebarMinimizer = props=>{ + + const { + tag: Tag, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames( + className, + 'c-sidebar-minimizer' + ); + + return ( + + ); + +} + +CSidebarMinimizer.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + type: PropTypes.string +}; + +CSidebarMinimizer.defaultProps = { + tag: 'button', + type: 'button' +}; + +export default CSidebarMinimizer; diff --git a/src/CSidebarNav.js b/src/CSidebarNav.js new file mode 100644 index 00000000..0612570c --- /dev/null +++ b/src/CSidebarNav.js @@ -0,0 +1,180 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import PerfectScrollbar from 'react-perfect-scrollbar'; +import 'react-perfect-scrollbar/dist/css/styles.css'; +import CBadge from './CBadge'; +import CSidebarNavTitle from './CSidebarNavTitle'; +import CSidebarNavDivider from './CSidebarNavDivider'; +import CSidebarNavDropdown from './CSidebarNavDropdown'; +import CSidebarNavItem from './CSidebarNavItem'; +import CSidebarNavLink from './CSidebarNavLink'; + +//component - CoreUI / CSidebarNav + +const CSidebarNav = props=>{ + + const { + tag: Tag, + children, + className, + // + innerRef, + navConfig, + ...attributes + } = props; + + const isExternal = url=>{ + const link = url ? url.substring(0, 4) : ''; + return link === 'http'; + } + + // render items + + // nav dropdown + const navDropdown = (item, key)=>{ + return ( + -1} + > + {navList(item.children)} + + ) + } + // nav item with nav link + const navItem = (item, key)=>{ + + let badgeProps; + if (item.badge){ + badgeProps={ + text: item.badge.text, + color: item.badge.variant + } + } + else { + badgeProps={}; + } + + let disabled = false; + if (item.attributes && item.attributes.disabled){ + disabled = true; + } + + return -1 ? 'c-active' : null} + linkProps={{disabled}} + > + {item.name} + + + } + + // simple wrapper for nav-title item + const navWrapper = item=>{ + return item.wrapper && item.wrapper.element ? React.createElement(item.wrapper.element, item.wrapper.attributes, item.name) : item.name; + } + // nav list section title + const navTitle = (title, key)=>{ + return {navWrapper(title)}; + } + + // nav list divider + const navDivider = (divider, key)=>{ + return ; + } + + // nav label with nav link + const navLabel = (item, key)=>{ + + const classes = classNames( + item.label.class ? item.label.class : null, + item.label.variant ? 'text-'+item.label.variant : null, + ) + + return + {item.name} + + + } + + // select nav type + const navType = (item, idx)=>{ + return ( + item.title ? navTitle(item, idx) //+ + : item.divider ? navDivider(item, idx) //+ + : item.label ? navLabel(item, idx) + : item.children ? navDropdown(item, idx) + : navItem(item, idx) + ); + } + + // nav list + const navList = items=>{ + return items.map((item, index) => navType(item, index)); + } + + //render + + delete attributes.Tag; + + const navClasses = classNames( + className, + 'c-sidebar-nav', + 'h-100' + ); + + //state + + const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl' + + // sidebar-nav root + + return ( + + + {navConfig.items ? navList(navConfig.items) : null} + {children} + + + ); + +} + +CSidebarNav.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + navConfig: PropTypes.any +}; + +CSidebarNav.defaultProps = { + tag: 'ul', + navConfig: { + items: [ + { + name: 'Dashboard', + url: '/dashboard', + icon: 'icon-speedometer', + badge: { variant: 'info', text: 'NEW' } + }] + } +}; + +export default CSidebarNav; diff --git a/src/CSidebarNavDivider.js b/src/CSidebarNavDivider.js new file mode 100644 index 00000000..d81bfe8c --- /dev/null +++ b/src/CSidebarNavDivider.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarNavDivider + +const CSidebarNavDivider = props=>{ + + const { + tag: Tag, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames( + className, + 'c-sidebar-nav-divider' + ); + + return ( + + ); + +} + +CSidebarNavDivider.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CSidebarNavDivider.defaultProps = { + tag: 'li' +}; + +export default CSidebarNavDivider; diff --git a/src/CSidebarNavDropdown.js b/src/CSidebarNavDropdown.js new file mode 100644 index 00000000..f77e7689 --- /dev/null +++ b/src/CSidebarNavDropdown.js @@ -0,0 +1,129 @@ +import React, {useState, useContext, useMemo, useRef, useEffect} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CIcon from './CIcon'; + +import {Context} from './CSidebar'; + +//component - CoreUI / CSidebarNavDropdown + +const CSidebarNavDropdown = props=>{ + + const { + tag: Tag, + children, + className, + // + innerRef, + icon, + fontIcon, + name, + show, + toggle, + toggleItem, + route, + ...attributes + } = props; + + const [isOpen, setIsOpen] = useState(show); + const compData = useRef({}).current; + + // context + const context = useContext(Context); + + let dropdownMode; + + // methods + + const onClick = (e)=>{ + setIsOpen(!isOpen); + toggle && toggle(e); + } + const onItemClick = (e)=>{ + toggleItem && toggleItem(e); + } + + // computed + + if (context.dropdownMode) + dropdownMode = context.dropdownMode; + else + dropdownMode = 'openActive'; + + //watch + //show + useMemo(()=>{ + if (compData.nextRender) + setIsOpen(show); + },[show]); + //dropdownMode + useMemo(()=>{ + const mode = dropdownMode; + if (mode === 'close') { + setIsOpen(false); + } else if (mode === 'closeInactive' && route) { + setIsOpen(route.fullPath.includes(route)); + } else if (mode === 'openActive' && !isOpen && route) { + setIsOpen(route.fullPath.includes(route)); + } + },[route]); + + //effect + useEffect(() => { + compData.nextRender = true; + }, []); + + //render + + const classes = classNames( + className, + 'c-sidebar-nav-dropdown', + isOpen ? 'c-show' : null + ); + + let iconProps; + if (typeof icon === 'object') + iconProps = icon; + else + iconProps = {name:icon}; + + const iconClasses = classNames( + 'c-sidebar-nav-icon', + fontIcon ? fontIcon : null + ); + + return ( + + + {icon ? : ''} + {fontIcon ? : ''} + {name} + +
      + {children} +
    + + ); + +} + +CSidebarNavDropdown.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + children: PropTypes.node, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + name: PropTypes.string, + icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + fontIcon: PropTypes.string, + show: PropTypes.bool, + toggle: PropTypes.func, + toggleItem: PropTypes.func, + route: PropTypes.string +}; + +CSidebarNavDropdown.defaultProps = { + tag: 'li' +}; + +export default CSidebarNavDropdown; diff --git a/src/CSidebarNavItem.js b/src/CSidebarNavItem.js new file mode 100644 index 00000000..9bd6ac69 --- /dev/null +++ b/src/CSidebarNavItem.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CSidebarNavLink from './CSidebarNavLink'; + +//component - CoreUI / CSidebarNavItem + +const CSidebarNavItem = props=>{ + + const { + tag: Tag, + children, + className, + custom, + // + innerRef, + linkClassName, + linkProps, + /// + icon, + to, + badge, + ...attributes + } = props; + + let link = {...linkProps}; + + //render + + const classes = classNames( + className, + 'c-sidebar-nav-item' + ); + + const linkClasses = classNames( + linkClassName + ); + + !link && (link={}) + icon && (link.icon = icon); + to && (link.to = to); + badge && (link.badgeProps = badge); + + return ( + !custom ? + + + : + + ); + +} + +CSidebarNavItem.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + linkClassName: PropTypes.string, + linkProps: PropTypes.object, + /// + icon: PropTypes.oneOfType(['string', 'object']), + badge: PropTypes.object, +}; + +CSidebarNavItem.defaultProps = { + tag: 'li' +}; + +export default CSidebarNavItem; diff --git a/src/CSidebarNavLink.js b/src/CSidebarNavLink.js new file mode 100644 index 00000000..47e4a2bb --- /dev/null +++ b/src/CSidebarNavLink.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CLink from './CLink'; +import CBadge from './CBadge'; +import CIcon from './CIcon'; + +//component - CoreUI / CSidebarNavLink + +const CSidebarNavLink = props=>{ + + const { + children, + className, + custom, + // + label, + icon, + fontIcon, + badgeClassName, + badgeProps, + ...attributes + } = props; + + // render + + const classes = classNames( + className, + label ? 'c-sidebar-nav-label' : 'c-sidebar-nav-link' + ); + + let iconProps; + if (typeof icon === 'object') + iconProps = icon; + else + iconProps = {name:icon}; + + if (!custom){ + const iconClasses = classNames( + 'c-sidebar-nav-icon', + fontIcon ? fontIcon : null + ); + const badgeClasses = classNames( + badgeClassName + ); + return ( + + {icon?:''} + {fontIcon?:''} + {children} + {badgeProps?{badgeProps.text}:''} + + ); + } + + return ( + + ); + +} + +CSidebarNavLink.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + custom: PropTypes.bool, + // + icon: PropTypes.oneOfType(['string', 'object']), + label: PropTypes.bool, + fontIcon: PropTypes.string, + badgeProps: PropTypes.object, + badgeClassName: PropTypes.object +}; + +CSidebarNavLink.defaultProps = { +}; + +export default CSidebarNavLink; diff --git a/src/CSidebarNavTitle.js b/src/CSidebarNavTitle.js new file mode 100644 index 00000000..0287d150 --- /dev/null +++ b/src/CSidebarNavTitle.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSidebarNavTitle + +const CSidebarNavTitle = props=>{ + + const { + tag: Tag, + className, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = classNames( + className, + 'c-sidebar-nav-title' + ); + + return ( + + ); + +} + +CSidebarNavTitle.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) +}; + +CSidebarNavTitle.defaultProps = { + tag: 'li' +}; + +export default CSidebarNavTitle; diff --git a/src/CSpinner.js b/src/CSpinner.js new file mode 100644 index 00000000..005c7b4a --- /dev/null +++ b/src/CSpinner.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CSpinner + +const CSpinner = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + // + innerRef, + variant, + size, + color, + ...attributes + } = props; + + //render + + const classes = mapToCssModules( + classNames( + className, + `spinner-${variant}`, + size ? `spinner-${variant}-${size}` : false, + color ? `text-${color}` : false + ), + cssModule + ); + + return ( + + { + children && + + {children} + + } + + ); + +} + +CSpinner.propTypes = { + tag: tagPropType, + children: PropTypes.string, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + variant: PropTypes.string, + size: PropTypes.string, + color: PropTypes.string +}; + +CSpinner.defaultProps = { + tag: 'div', + variant: 'border', + children: 'Loading...' +}; + +export default CSpinner; diff --git a/src/CSwitch.js b/src/CSwitch.js new file mode 100644 index 00000000..87ff2e5b --- /dev/null +++ b/src/CSwitch.js @@ -0,0 +1,171 @@ +import React, {useEffect, useState, useRef} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +//component - CoreUI / CSwitch + +const CSwitch = props=>{ + + let { + className, + cssModule, + // + innerRef, + type, + size, + disabled, + color, + labelOn, + labelOff, + variant, + shape, + + name, + required, + value, + ...attributes + //label, + //outline, + } = props; + + const fields = useRef({firstRender: true}).current; + const [checked, setChecked] = useState(props.defaultChecked || props.checked); + const [selected, setSelected] = useState([]); + + //effect - update + useEffect(() => { + if (fields.firstRender) return; + setChecked(props.checked); + }, + [props.checked]); + + useEffect(() => { + fields.firstRender = false; + }, + []); + + //events + const onChange = e=>{ + const target = e.target; + setChecked(target.checked); + if (props.onChange) { + props.onChange(e); + } + } + + //render + + delete attributes.checked; + delete attributes.defaultChecked; + delete attributes.onChange; + + /* + const outlineString = this.outline ? '-outline' : '' + const outlinedAltString = this.outline === 'alt' ? '-alt' : '' + return [ + 'c-switch form-check-label', + `c-switch${outlineString}-${this.color}${outlinedAltString}`, + { + [`c-switch-${this.size}`]: this.size, + [`c-switch-${this.shape}`]: this.shape, + 'c-switch-label': this.labelOn || this.labelOff + } + ] + */ + /* + let outline=''; + switch (variant) { + case '3d': + + break; + case 'opposite': + variant="alt"; + break; + case '3d-opposite': + + break; + } + */ + + //console.log(variant); + + const variant2 = ['opposite', 'outline'].indexOf(variant)>-1 ? `-${variant}` : '' + let classes = classNames( + className, + 'c-switch form-check-label', + labelOn||labelOff ? 'c-switch-label' : false, + size ? `c-switch-${size}` : '', + shape ? `c-switch-${shape}` : '', + color ? `c-switch${variant2}-${color}` : '', + variant=='3d' ? 'c-switch-3d' : '' + ); + + const inputClasses = classNames( + 'c-switch-input', + 'c-form-check-input', + ); + + const sliderClasses = classNames( + 'c-switch-slider' + ); + + //classes = "c-switch form-check-label c-switch-label c-switch-opposite c-switch-primary c-switch-lg" + + return ( + + ); + +} + +CSwitch.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + size: PropTypes.oneOf(['', 'lg', 'sm']), + shape: PropTypes.oneOf(['', 'pill', 'square']), + variant: PropTypes.oneOf(['', '3d', '3d-opposite', 'opposite', 'outline']), + color: PropTypes.string, + checked: PropTypes.bool, + labelOn: PropTypes.string, + labelOff: PropTypes.string, + type: PropTypes.oneOf(['checkbox', 'radio']), + + value: PropTypes.string, + defaultChecked: PropTypes.bool, + name: PropTypes.string, + disabled: PropTypes.bool, + form: PropTypes.any,//? + required: PropTypes.bool, + onChange: PropTypes.func + + //label: PropTypes.bool, + /* + outline: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.string, + PropTypes.oneOf(['', 'alt']) + ]), + */ + +}; + +CSwitch.defaultProps = { + size: '', + checked: false, + type: 'checkbox', + variant: '', + + defaultChecked: false, + disabled: false, + required: false, + //labelOn: 'On', + //labelOff: 'Off', + //label: false, + //outline: false, +}; + +export default CSwitch; diff --git a/src/CTabContent.js b/src/CTabContent.js new file mode 100644 index 00000000..ff86aceb --- /dev/null +++ b/src/CTabContent.js @@ -0,0 +1,61 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +//import {polyfill} from 'react-lifecycles-compat'; + +export const Context = React.createContext({}); + +//component - CoreUI / CTabContent + +const CTabContent = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + activeTab: activeTabProp, + ...attributes + } = props; + + const [activeTab, setActiveTab] = useState(activeTabProp); + + if (activeTab!==activeTabProp) + setActiveTab(activeTabProp); + + // render + + const classes = mapToCssModules(classNames( + 'tab-content', + className), + cssModule + ); + + return ( + + + + ); + +} + +CTabContent.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + activeTab: PropTypes.any +}; + +CTabContent.defaultProps = { + tag: 'div', +}; + +//polyfill(CTabContent); + +export default CTabContent; diff --git a/src/CTabPane.js b/src/CTabPane.js new file mode 100644 index 00000000..9f7dbd01 --- /dev/null +++ b/src/CTabPane.js @@ -0,0 +1,50 @@ +import React, {useContext} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import {Context} from './CTabContent.js'; + +//component - CoreUI / CTabPane + +const CTabPane = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + tabId, + ...attributes + } = props; + + const context = useContext(Context); + + //render + + const classes = mapToCssModules(classNames( + 'tab-pane', + className, + { 'active': tabId === context.activeTabId } + ), cssModule); + + return ( + + ); + +} + +CTabPane.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + tabId: PropTypes.any +}; + +CTabPane.defaultProps = { + tag: 'div', +}; + +export default CTabPane; diff --git a/src/CTable.js b/src/CTable.js new file mode 100644 index 00000000..5cefdf4f --- /dev/null +++ b/src/CTable.js @@ -0,0 +1,89 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CTable + +const CTable = props=>{ + + const { + tag: Tag, + className, + cssModule, + custom, + // + innerRef, + size, + bordered, + borderless, + striped, + dark, + hover, + responsive, + responsiveTag: ResponsiveTag, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'table', + size ? 'table-' + size : false, + bordered ? 'table-bordered' : false, + borderless ? 'table-borderless' : false, + striped ? 'table-striped' : false, + dark ? 'table-dark' : false, + hover ? 'table-hover' : false, + ), cssModule); + + let table; + if (custom) + table = ; + else { + table = ( + + + {attributes.children} + + + ) + } + + if (responsive) { + const responsiveClassName = responsive === true ? 'table-responsive' : `table-responsive-${responsive}`; + return ( + + {table} + + ); + } + + return table; + +} + +CTable.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + size: PropTypes.string, + bordered: PropTypes.bool, + borderless: PropTypes.bool, + striped: PropTypes.bool, + dark: PropTypes.bool, + hover: PropTypes.bool, + responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + responsiveTag: tagPropType +}; + +CTable.defaultProps = { + tag: 'table', + responsiveTag: 'div', +}; + +export default CTable; diff --git a/src/CToast.js b/src/CToast.js new file mode 100644 index 00000000..a9652286 --- /dev/null +++ b/src/CToast.js @@ -0,0 +1,149 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import Slot from './Shared/Slot'; +import CToastHeader from './CToastHeader'; +import CToastBody from './CToastBody'; +import CButtonClose from './CButtonClose'; +import CFade from './CFade'; +import style from './CToast.module.css'; + +//component - CoreUI / CToast + +const CToast = props=>{ + + const { + tag: Tag, + className, + cssModule, + custom, + // + innerRef, + show, + header, + headerSlot, + autohide, + closeButton, + fade, + transition, + ...attributes + } = props; + + const [shown, setShown] = useState(show); + + const transitionPar = { + ...CFade.defaultProps, + ...transition, + baseClass: fade ? transition.baseClass : '', + timeout: fade ? transition.timeout : 0, + }; + + let timeout; + + const setAutohide = ()=>{ + timeout = setTimeout(()=>{ + setShown(false); + }, autohide); + } + + const onMouseOver = ()=>{ + clearTimeout(timeout); + } + const onMouseOut = ()=>{ + if (autohide) + setAutohide(); + } + const onClick = ()=>{ + setShown(false); + } + + if (autohide){ + setAutohide(); + } + + // render + + const classes = mapToCssModules(classNames( + className, + 'toast', + 'mytoast', + ), Object.assign(style, cssModule)); + + if (!shown) + return null; + + if (!custom) + return ( + + + + { + headerSlot || header? + + {header} + :'' + } + { + closeButton? + :'' + } + + + {attributes.children} + + + + ); + + return ( + + ); + +} + +CToast.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + headerSlot: PropTypes.node, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + show: PropTypes.bool, + header: PropTypes.string, + autohide: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), + closeButton: PropTypes.bool, + fade: PropTypes.bool, + transition: PropTypes.shape(CFade.propTypes), + role: PropTypes.string +}; + +CToast.defaultProps = { + tag: 'div', + autohide: 1500, + closeButton: true, + fade: true, + transition: { + ...CFade.defaultProps, + unmountOnExit: true, + }, + role: 'alert', +}; + +export default CToast; diff --git a/src/CToast.module.css b/src/CToast.module.css new file mode 100644 index 00000000..603e1a5f --- /dev/null +++ b/src/CToast.module.css @@ -0,0 +1,12 @@ +.mytoast { + opacity: inherit; +} +.fade-enter-active { + transition: opacity .5s; +} +.fade-leave-active { + transition: opacity 2s; +} +.fade-enter, .fade-leave-to { + opacity: 0; +} diff --git a/src/CToastBody.js b/src/CToastBody.js new file mode 100644 index 00000000..e5c49878 --- /dev/null +++ b/src/CToastBody.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CToastBody + +const CToastBody = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'toast-body' + ), cssModule); + + return ( + + ); + +} + +CToastBody.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]) +}; + +CToastBody.defaultProps = { + tag: 'div' +}; + +export default CToastBody; diff --git a/src/CToastHeader.js b/src/CToastHeader.js new file mode 100644 index 00000000..3b5b6717 --- /dev/null +++ b/src/CToastHeader.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CToastHeader + +const CToastHeader = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + closeButton, + ...attributes + } = props; + + //render + + const classes = mapToCssModules(classNames( + className, + 'toast-header' + ), cssModule); + + return ( + + ); + +} + +CToastHeader.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + closeButton: PropTypes.bool +}; + +CToastHeader.defaultProps = { + tag: 'div', + closeButton: true +}; + +export default CToastHeader; diff --git a/src/CToaster.js b/src/CToaster.js new file mode 100644 index 00000000..3df5800b --- /dev/null +++ b/src/CToaster.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; + +//component - CoreUI / CToaster + +const CToaster = props=>{ + + const { + tag: Tag, + className, + cssModule, + // + innerRef, + position, + ...attributes + } = props; + + // render + + const classes = mapToCssModules(classNames( + className, + 'toaster', + (position && position !== 'static') ? 'toaster-'+position : null + ), cssModule); + + return ( + + ); + +} + +CToaster.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + position: PropTypes.oneOf([ + '', 'static', 'top-right', 'top-left', 'top-center', 'top-full', + 'bottom-right', 'bottom-left', 'bottom-center', 'bottom-full' + ]) +}; + +CToaster.defaultProps = { + tag: 'div', + position: 'top-right', +}; + +export default CToaster; diff --git a/src/CToggler.js b/src/CToggler.js new file mode 100644 index 00000000..e6bba4bb --- /dev/null +++ b/src/CToggler.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import {tagPropType, mapToCssModules} from './Shared/helper.js'; +//import {Context} from './CDropdownCustom'; + +//component - CoreUI / CToggler + +const CToggler = props=>{ + + const { + tag: Tag, + children, + className, + cssModule, + custom, + // + innerRef, + toggle, + inHeader, + inNavbar, + ...attributes + } = props; + + //const context = useContext(Context); + + //events + const onClick = e=>{ + e.preventDefault(); + //if (context.toggle) + // context.toggle(); + if (toggle) + toggle(e); + } + + //render + + const togglerType = inNavbar ? 'c-navbar' : inHeader ? 'c-header' : null; + + const classes = mapToCssModules(classNames( + className, + togglerType ? `${togglerType}-toggler` : null, + ), cssModule); + + if (!custom){ + const classesTrigger = mapToCssModules(classNames( + togglerType ? `${togglerType}-toggler-icon` : null, + ), cssModule); + return ( + + + + ); + } + + return ( + + {children} + + ); + +} + +CToggler.propTypes = { + tag: tagPropType, + className: PropTypes.string, + cssModule: PropTypes.object, + custom: PropTypes.bool, + // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), + inHeader: PropTypes.bool, + inNavbar: PropTypes.bool, + type: PropTypes.string, + toggle: PropTypes.func +}; + +CToggler.defaultProps = { + tag: 'button', + type: 'button' +}; + +export default CToggler; diff --git a/src/CTooltip.js b/src/CTooltip.js new file mode 100644 index 00000000..7c840d1c --- /dev/null +++ b/src/CTooltip.js @@ -0,0 +1,70 @@ +import React, {useState} from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import CTooltipPopoverWrapper from './CTooltipPopoverWrapper'; + +//component - CoreUI / CTooltip + +const CTooltip = props=>{ + + let { + custom, + // + show, + toggle, + defaultOpen, + ...attributes + } = props; + + const [isOpen, setIsOpen] = useState(defaultOpen || false); + + if (!custom){ + const userToggle = toggle; + toggle = (e)=>{ + setIsOpen(!isOpen); + if (userToggle) + userToggle(e); + } + show = isOpen; + } + + // render + + const popperClasses = classNames( + 'tooltip', + 'show', + props.className + ); + + const classes = classNames( + 'tooltip-inner', + props.innerClassName + ); + + return ( + + ); + +} + +CTooltip.propTypes = { + ...CTooltipPopoverWrapper.propTypes, + custom: PropTypes.bool, + // + defaultOpen: PropTypes.bool +} + +CTooltip.defaultProps = { + placement: 'top', + autohide: true, + placementPrefix: 'bs-tooltip', + trigger: 'hover focus', +}; + +export default CTooltip; diff --git a/src/CTooltipPopoverWrapper.js b/src/CTooltipPopoverWrapper.js new file mode 100644 index 00000000..f825f886 --- /dev/null +++ b/src/CTooltipPopoverWrapper.js @@ -0,0 +1,343 @@ +import React, {useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import CPopperContent from './CPopperContent'; +import { + getTarget, + targetPropType, + omit, + PopperPlacements, + mapToCssModules, + DOMElement +} from './Shared/helper.js'; + +// global + +export const propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.object + ]), + placement: PropTypes.oneOf(PopperPlacements), + target: targetPropType.isRequired, + container: targetPropType, + isOpen: PropTypes.bool, + disabled: PropTypes.bool, + hideArrow: PropTypes.bool, + boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), + innerClassName: PropTypes.string, + arrowClassName: PropTypes.string, + toggle: PropTypes.func, + autohide: PropTypes.bool, + placementPrefix: PropTypes.string, + delay: PropTypes.oneOfType([ + PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }), + PropTypes.number + ]), + modifiers: PropTypes.object, + offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + trigger: PropTypes.string, +}; + +const DEFAULT_DELAYS = { + show: 0, + hide: 250 +}; + +const isInDOMSubtree = (element, subtreeRoot)=>{ + return subtreeRoot && (element === subtreeRoot || subtreeRoot.contains(element)); +} + +//component - CoreUI / CTooltipPopoverWrapper + +const CTooltipPopoverWrapper = props=>{ + + const { + className, + cssModule, + // + innerRef, + innerClassName, + target, + isOpen, + hideArrow, + boundariesElement, + placement, + placementPrefix, + arrowClassName, + container, + modifiers, + offset, + } = props; + + const fields = useRef({_target: null}).current; + + const onMouseOverTooltipContent = ()=>{ + if (fields.trigger.indexOf('hover') > -1 && !fields.autohide) { + if (fields._hideTimeout) { + clearHideTimeout(); + } + } + } + + const onMouseLeaveTooltipContent = e=>{ + if (fields.trigger.indexOf('hover') > -1 && !fields.autohide) { + if (fields._showTimeout) { + clearShowTimeout(); + } + e.persist(); + fields._hideTimeout = setTimeout( + ()=>hide(e), + getDelay('hide') + ); + } + } + + const onEscKeyDown = e=>{ + if (e.key === 'Escape') { + hide(e); + } + } + + const getRef = ref=>{ + const {innerRef} = props; + if (innerRef) { + if (typeof innerRef === 'function') { + innerRef(ref); + } else if (typeof innerRef === 'object') { + innerRef.current = ref; + } + } + fields._popover = ref; + } + + const getDelay = key=>{ + if (typeof fields.delay === 'object') { + return isNaN(fields.delay[key]) ? DEFAULT_DELAYS[key] : fields.delay[key]; + } + return fields.delay; + } + + const show = e=>{ + if (!fields.isOpen) { + clearShowTimeout(); + toggle(e); + } + } + + const showWithDelay = e=>{ + if (fields._hideTimeout) { + clearHideTimeout(); + } + fields._showTimeout = setTimeout( + ()=>show(e), + getDelay('show') + ); + } + + const hide = e=>{ + if (fields.isOpen) { + clearHideTimeout(); + toggle(e); + } + } + + const hideWithDelay = e=>{ + if (fields._showTimeout) { + clearShowTimeout(); + } + fields._hideTimeout = setTimeout( + ()=>hide(e), + getDelay('hide') + ); + } + + const clearShowTimeout = ()=>{ + clearTimeout(fields._showTimeout); + fields._showTimeout = undefined; + } + + const clearHideTimeout = ()=>{ + clearTimeout(fields._hideTimeout); + fields._hideTimeout = undefined; + } + + const handleDocumentClick = e=>{ + const triggers = fields.trigger.split(' '); + if (triggers.indexOf('legacy') > -1 && (fields.isOpen || isInDOMSubtree(e.target, fields._target))) { + if (fields._hideTimeout) { + clearHideTimeout(); + } + if (fields.isOpen && !isInDOMSubtree(e.target, fields._popover)) { + hideWithDelay(e); + } else { + showWithDelay(e); + } + } + else if (triggers.indexOf('click') > -1 && isInDOMSubtree(e.target, fields._target)) { + if (fields._hideTimeout) { + clearHideTimeout(); + } + if (!fields.isOpen) { + showWithDelay(e); + } else { + hideWithDelay(e); + } + } + } + + const addTargetEvents = ()=>{ + if (props.trigger) { + let triggers = props.trigger.split(' '); + if (triggers.indexOf('manual') === -1) { + if (triggers.indexOf('click') > -1 || triggers.indexOf('legacy') > -1) { + ['click', 'touchstart'].forEach(event => + document.addEventListener(event, handleDocumentClick, true) + ); + fields._handleDocumentClick = handleDocumentClick; + } + + if (fields._target) { + if (triggers.indexOf('hover') > -1) { + fields._target.addEventListener( + 'mouseover', + showWithDelay, + true + ); + fields._target.addEventListener( + 'mouseout', + hideWithDelay, + true + ); + fields._showWithDelay = showWithDelay; + fields._hideWithDelay = hideWithDelay; + } + if (triggers.indexOf('focus') > -1) { + fields._target.addEventListener('focusin', show, true); + fields._target.addEventListener('focusout', hide, true); + fields._show = show; + fields._hide = hide; + } + fields._target.addEventListener('keydown', onEscKeyDown, true); + fields._onEscKeyDown = onEscKeyDown; + } + + } + } + } + + const removeTargetEvents = ()=>{ + + if (fields._target) { + fields._target.removeEventListener( + 'mouseover', + fields._showWithDelay, + true + ); + fields._target.removeEventListener( + 'mouseout', + fields._hideWithDelay, + true + ); + fields._target.removeEventListener('keydown', fields._onEscKeyDown, true); + fields._target.removeEventListener('focusin', fields._show, true); + fields._target.removeEventListener('focusout', fields._hide, true); + } + + ['click', 'touchstart'].forEach(event => + document.removeEventListener(event, fields._handleDocumentClick, true) + ); + + } + + const updateTarget = ()=>{ + const newTarget = getTarget(props.target); + if (newTarget !== fields._target) { + removeTargetEvents(); + fields._target = newTarget; + addTargetEvents(); + } + } + + const toggle = e=>{ + if (fields.disabled) { + return e && e.preventDefault(); + } + return fields.toggle(e); + } + + + //effect + useEffect(() => { + updateTarget(); + return function cleanup() { + removeTargetEvents(); + }; + }, + []); + + //render + + fields.isOpen = props.isOpen; + fields.autohide = props.autohide; + fields.trigger = props.trigger; + fields.delay = props.delay; + fields.toggle = props.toggle; + fields.disabled = props.disabled; + + if (!props.isOpen) { + return null; + } + + updateTarget(); + + const attributes = omit(props, Object.keys(propTypes)); + const popperClasses = mapToCssModules(className, cssModule); + const classes = mapToCssModules(innerClassName, cssModule); + + return ( + +
    + + ); + +} + +CTooltipPopoverWrapper.propTypes = propTypes; + +CTooltipPopoverWrapper.defaultProps = { + isOpen: false, + hideArrow: false, + autohide: false, + delay: DEFAULT_DELAYS, + toggle: function () {}, + trigger: 'click', +}; + +export default CTooltipPopoverWrapper; diff --git a/src/CWidgetBrand.js b/src/CWidgetBrand.js new file mode 100644 index 00000000..e68de122 --- /dev/null +++ b/src/CWidgetBrand.js @@ -0,0 +1,151 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +//import CProgress from './CProgress'; +import CCardBody from './CCardBody'; +import CCardHeader from './CCardHeader'; +import CCardFooter from './CCardFooter'; +import Slot from './Shared/Slot.js'; +import CCol from './CCol'; + +//component - CoreUI / CWidget3 + +const CWidgetBrand = props=>{ + + const { + children, + className, + cssModule, + // + dataBox, + + color, + rightHeader, + rightFooter, + leftHeader, + leftFooter, + addHeaderClasses, + bodySlot, + ...attributes + } = props; + + // render + + const classes = mapToCssModules( + classNames( + className, + "content-center text-white p-0", + color ? `bg-${color}` : '', + addHeaderClasses + ), + cssModule + ); + + return ( + + + + + + + + { + rightHeader? +
    + {rightHeader} +
    :'' + } + { + rightFooter? +
    + {rightFooter} +
    :'' + } +     +
    + + { + leftHeader? +
    + {rightHeader} +
    :'' + } + { + leftFooter? +
    + {rightFooter} +
    :'' + } +     +     +     +     + ) + + + const data = dataBox(); + const variant = data.variant; + + if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) { + return (null); + } + + const back = 'bg-' + variant; + const icon = 'my-4 icon text-white fa fa-' + variant; + const keys = Object.keys(data); + const vals = Object.values(data); + + const classCard = 'card'; + const classCardHeader = classNames(`${classCard}-header`, back, 'content-center'); + const classCardBody = classNames(`${classCard}-body`, 'row text-center'); + //const classes = mapToCssModules(classNames(classCard, className), cssModule); + + return ( + + + + {children} + + +
    +
    {vals[1]}
    +
    {keys[1]}
    +
    +
    +
    +
    {vals[2]}
    +
    {keys[2]}
    +
    +     +     + ); + +} + +CWidgetBrand.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + dataBox: PropTypes.func, + + color: PropTypes.string, + rightHeader: PropTypes.string, + rightFooter: PropTypes.string, + leftHeader: PropTypes.string, + leftFooter: PropTypes.string, + addHeaderClasses: PropTypes.oneOfType([String, Array, Object]), + bodySlot: PropTypes.node +}; + +CWidgetBrand.defaultProps = { + dataBox: () => ({ variant: 'facebook', friends: '-', feeds: '-' }), +}; + +export default CWidgetBrand; diff --git a/src/CWidgetBrandOld.js b/src/CWidgetBrandOld.js new file mode 100644 index 00000000..7d9c750e --- /dev/null +++ b/src/CWidgetBrandOld.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +//import CProgress from './CProgress'; +import CCardBody from './CCardBody'; +import CCardHeader from './CCardHeader'; +//import CCardFooter from './CCardFooter'; + +//component - CoreUI / CWidget3 + +const CWidget3 = props=>{ + + const { + children, + className, + cssModule, + // + dataBox, + ...attributes + } = props; + + const data = dataBox(); + const variant = data.variant; + + if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) { + return (null); + } + + const back = 'bg-' + variant; + const icon = 'my-4 icon text-white fa fa-' + variant; + const keys = Object.keys(data); + const vals = Object.values(data); + + const classCard = 'card'; + const classCardHeader = classNames(`${classCard}-header`, back, 'content-center'); + const classCardBody = classNames(`${classCard}-body`, 'row text-center'); + const classes = mapToCssModules(classNames(classCard, className), cssModule); + + return ( + + + + {children} + + +
    +
    {vals[1]}
    +
    {keys[1]}
    +
    +
    +
    +
    {vals[2]}
    +
    {keys[2]}
    +
    +     +     + ); + +} + +CWidget3.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + dataBox: PropTypes.func +}; + +CWidget3.defaultProps = { + dataBox: () => ({ variant: 'facebook', friends: '-', feeds: '-' }), +}; + +export default CWidget3; diff --git a/src/CWidgetDropdown.js b/src/CWidgetDropdown.js new file mode 100644 index 00000000..c6233989 --- /dev/null +++ b/src/CWidgetDropdown.js @@ -0,0 +1,127 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +import CCardBody from './CCardBody'; +import CIcon from './CIcon'; +import CButtonGroup from './CButtonGroup'; +import CDropdownToggle from './CDropdownToggle'; +import CDropdownMenu from './CDropdownMenu'; +import CDropdownItem from './CDropdownItem'; +import CDropdown from './CDropdown'; +import Slot from './Shared/Slot.js'; + +//component - CoreUI / CWidgetDropdown + +const CWidgetDropdown = props=>{ + + const { + children, + className, + cssModule, + // + header, + text, + color, + toggle, + dropdownSlot, + + mainText, + smallText, + value, + variant, + ...attributes + } = props; + + const [isOpen, setIsOpen] = useState(false); + + return ( + + +
    + {header?
    {header}
    :''} + {mainText?
    {text}
    :''} +
    + +     + {children} +     + ) + + // + + const onToggle = ()=>{ + setIsOpen(!isOpen); + toggle && toggle(isOpen); + } + + const progress = { style: '', color: color, value: value }; + const card = { style: '', bgColor: '' }; + + if (variant === 'inverse') { + progress.style = 'progress-white'; + progress.color = ''; + card.style = 'text-white'; + card.bgColor = 'bg-' + color; + } + + const classes = mapToCssModules(classNames( + className, + card.style, + card.bgColor + ), cssModule); + progress.style = classNames('progress-xs my-3', progress.style); + + return ( + + + + + + + Action + Another action + Something else here + + + +
    {header}
    +
    {mainText}
    +     +
    {children}
    +     + ); + +} + +CWidgetDropdown.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + header: PropTypes.string, + text: PropTypes.string, + color: PropTypes.string, + toggle: PropTypes.func, + dropdownSlot: PropTypes.node, + + mainText: PropTypes.string, + smallText: PropTypes.string, + value: PropTypes.string, + variant: PropTypes.string, +}; + +CWidgetDropdown.defaultProps = { + header: '89.9%', + text: 'text', + mainText: 'Widget title', + smallText: 'Widget helper text', + // color: '', + value: '25', + variant: '', +}; + +export default CWidgetDropdown; diff --git a/src/CWidgetIcon.js b/src/CWidgetIcon.js new file mode 100644 index 00000000..1cb951d2 --- /dev/null +++ b/src/CWidgetIcon.js @@ -0,0 +1,103 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +//import CProgress from './CProgress'; +import CCardBody from './CCardBody'; +//import CCardHeader from './CCardHeader'; +import CCardFooter from './CCardFooter'; + +//component - CoreUI / CWidgetIcon + +const CWidgetIcon = props=>{ + + const { + children, + className, + cssModule, + // + header, + mainText, + icon, + color, + footer, + link, + variant, + ...attributes + } = props; + + const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3' } : (variant === '1' ? { + card: 'p-0', icon: 'p-4', lead: 'pt-3', + } : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' })); + + const card = { style: 'd-flex', color: color, icon: icon, classes: '' }; + card.classes = mapToCssModules(classNames(className, card.style, padding.card, 'align-items-center'), cssModule); + + const lead = { style: 'text-value', color: color, classes: '' }; + lead.classes = classNames(lead.style, 'text-' + card.color); + + const blockIcon = function (icon) { + const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left'); + return (); + }; + + const cardFooter = function () { + if (footer) { + return ( + + + + View More + + + + + ); + } + }; + + return ( + + +
    + {blockIcon(card.icon)} +
    +
    +
    {header}
    +
    {mainText}
    +
    +     + {cardFooter()} +     + ); + +} + +CWidgetIcon.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + header: PropTypes.string, + mainText: PropTypes.string, + icon: PropTypes.string, + color: PropTypes.string, + variant: PropTypes.string, + footer: PropTypes.bool, + link: PropTypes.string, + children: PropTypes.node, +}; + +CWidgetIcon.defaultProps = { + header: '$1,999.50', + mainText: 'Widget title', + icon: 'fa fa-cogs', + color: 'primary', + variant: '0', + link: '#', +}; + +export default CWidgetIcon; diff --git a/src/CWidgetProgress.js b/src/CWidgetProgress.js new file mode 100644 index 00000000..31eea7f1 --- /dev/null +++ b/src/CWidgetProgress.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +import CProgress from './CProgress'; +//import CCardBody from './CCardBody'; +//import CCardHeader from './CCardHeader'; +//import CCardFooter from './CCardFooter'; + +//component - CoreUI / CWidgetProgress + +const CWidgetProgress = props=>{ + + const { + children, + className, + cssModule, + // + header, + mainText, + smallText, + color, + value, + variant, + ...attributes + } = props; + + const progress = { style: '', color: color, value: value }; + const card = { style: '', bgColor: '' }; + + if (variant === 'inverse') { + progress.style = 'progress-white'; + progress.color = ''; + card.style = 'text-white'; + card.bgColor = 'bg-' + color; + } + + const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); + progress.style = classNames('progress-xs my-3', progress.style); + + return ( + +
    {header}
    +
    {mainText}
    + + {smallText} +
    {children}
    +     + ); + +} + +CWidgetProgress.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + header: PropTypes.string, + mainText: PropTypes.string, + smallText: PropTypes.string, + color: PropTypes.string, + value: PropTypes.string, + variant: PropTypes.string, +}; + +CWidgetProgress.defaultProps = { + header: '89.9%', + mainText: 'Widget title', + smallText: 'Widget helper text', + // color: '', + value: '25', + variant: '' +}; + +export default CWidgetProgress; diff --git a/src/CWidgetProgressIcon.js b/src/CWidgetProgressIcon.js new file mode 100644 index 00000000..9360cadb --- /dev/null +++ b/src/CWidgetProgressIcon.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +import CProgress from './CProgress'; +import CCardBody from './CCardBody'; +//import CCardHeader from './CCardHeader'; +//import CCardFooter from './CCardFooter'; + +//component - CoreUI / CWidget4 + +const CWidgetProgressIcon = props=>{ + + const { + children, + className, + cssModule, + // + header, + value, + icon, + color, + invert, + ...attributes + } = props; + + const progress = { style: '', color: color, value: value }; + const card = { style: '', bgColor: '', icon: 'icon '+icon }; + + if (invert) { + progress.style = 'progress-white'; + progress.color = ''; + card.style = 'text-white'; + card.bgColor = 'bg-' + color; + } + + const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); + progress.style = classNames('progress-xs mt-3 mb-0', progress.style); + + return ( + +
    + +
    +
    {header}
    + {children} + +     + ); + +} + +CWidgetProgressIcon.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + header: PropTypes.string, + icon: PropTypes.string, + color: PropTypes.string, + value: PropTypes.string, + invert: PropTypes.bool, +}; + +CWidgetProgressIcon.defaultProps = { + header: '87.500', + icon: 'icon-people', + color: 'info', + value: '25', + children: 'Visitors', + invert: false, +}; + +export default CWidgetProgressIcon; diff --git a/src/CWidgetSimple.js b/src/CWidgetSimple.js new file mode 100644 index 00000000..bd5483ba --- /dev/null +++ b/src/CWidgetSimple.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; +// +import CCard from './CCard'; +//import CProgress from './CProgress'; +import CCardBody from './CCardBody'; +//import CCardHeader from './CCardHeader'; +//import CCardFooter from './CCardFooter'; + +//component - CoreUI / CWidgetSimple + +const CWidgetSimple = props=>{ + + const { + children, + className, + cssModule, + // + header, + mainText, + color, + variant, + ...attributes + } = props; + + const card = { style: '', bgColor: '' }; + + if (variant === 'inverse') { + card.style = 'text-white'; + card.bgColor = 'bg-' + color; + } + + const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); + + return ( + + + {/* + + { this.setState({ card1: !this.state.card1 }); }}> + + + + + Action + Another action + Something else here + + + + */} +
    {header}
    +
    {mainText}
    + {children} +     +     + ); + +} + +CWidgetSimple.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + header: PropTypes.string, + mainText: PropTypes.string, + color: PropTypes.string, + variant: PropTypes.string, +}; + +CWidgetSimple.defaultProps = { + header: 'title', + mainText: 'text', + color: '', + variant: '', +}; + +export default CWidgetSimple; diff --git a/src/Footer.js b/src/Footer.js deleted file mode 100644 index b139162c..00000000 --- a/src/Footer.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - fixed: PropTypes.bool, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'footer', - fixed: false -}; - -class AppFooter extends Component { - constructor(props) { - super(props); - - this.isFixed = this.isFixed.bind(this); - } - - componentDidMount() { - this.isFixed(this.props.fixed); - } - - isFixed(fixed) { - if (fixed) { document.body.classList.add('footer-fixed'); } - } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - delete attributes.fixed - - const classes = classNames(className, 'app-footer'); - - return ( - - {children} - - ); - } -} - -AppFooter.propTypes = propTypes; -AppFooter.defaultProps = defaultProps; - -export default AppFooter; diff --git a/src/Footer.md b/src/Footer.md deleted file mode 100644 index af994b9c..00000000 --- a/src/Footer.md +++ /dev/null @@ -1,8 +0,0 @@ -### CoreUI `Footer` component - -prop | default ---- | --- -children | -className | `app-footer` -fixed | `false` -tag | `footer` diff --git a/src/Header.js b/src/Header.js deleted file mode 100644 index e7ee43af..00000000 --- a/src/Header.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - fixed: PropTypes.bool, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'header', - fixed: false -}; - -class AppHeader extends Component { - componentDidMount() { - this.isFixed(this.props.fixed); - } - - isFixed(fixed) { - if (fixed) { document.body.classList.add('header-fixed'); } - } - - // breakpoint(breakpoint) { - // return breakpoint || ''; - // } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - delete attributes.fixed - - const classes = classNames(className, 'app-header', 'navbar'); - - return ( - - {children} - - ); - } -} - -AppHeader.propTypes = propTypes; -AppHeader.defaultProps = defaultProps; - -export default AppHeader; diff --git a/src/Header.md b/src/Header.md deleted file mode 100644 index ed0e6c98..00000000 --- a/src/Header.md +++ /dev/null @@ -1,10 +0,0 @@ -### CoreUI `Header` component - -prop | default ---- | --- -children | -className | `app-header`, `navbar` -fixed | `false` -tag | `header` - - diff --git a/src/HeaderDropdown.js b/src/HeaderDropdown.js deleted file mode 100644 index 7fc33be3..00000000 --- a/src/HeaderDropdown.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { Component } from 'react'; -import { Dropdown } from 'reactstrap'; -import PropTypes from 'prop-types'; - -const propTypes = { - children: PropTypes.node, - direction: PropTypes.string, - ...Dropdown.propTypes -}; - -const defaultProps = { - direction: 'down' -}; - -class AppHeaderDropdown extends Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: false - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen - }); - } - - render() { - const { children, ...attributes } = this.props; - return ( - - {children} - - ); - } -} - -AppHeaderDropdown.propTypes = propTypes; -AppHeaderDropdown.defaultProps = defaultProps; - -export default AppHeaderDropdown; diff --git a/src/HeaderDropdown.md b/src/HeaderDropdown.md deleted file mode 100644 index c787aabc..00000000 --- a/src/HeaderDropdown.md +++ /dev/null @@ -1,3 +0,0 @@ -### CoreUI `HeaderDropdown` component - -_todo_ diff --git a/src/NavbarBrand.js b/src/NavbarBrand.js deleted file mode 100644 index d142cbf2..00000000 --- a/src/NavbarBrand.js +++ /dev/null @@ -1,80 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - children: PropTypes.node, - className: PropTypes.string, - brand: PropTypes.any, - full: PropTypes.any, - minimized: PropTypes.any -}; - -const defaultProps = { - tag: 'a' -}; - -class AppNavbarBrand extends Component { - imgSrc(brand) { - return brand.src ? brand.src : ''; - } - - imgWidth(brand) { - return brand.width ? brand.width : 'auto'; - } - - imgHeight(brand) { - return brand.height ? brand.height : 'auto'; - } - - imgAlt(brand) { - return brand.alt ? brand.alt : ''; - } - - navbarBrandImg(props, classBrand, key) { - return ( - {this.imgAlt(props)} - ); - } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - const classes = classNames(className, 'navbar-brand'); - - const img = []; - if (this.props.brand) { - const props = this.props.brand; - const classBrand = 'navbar-brand'; - img.push(this.navbarBrandImg(props, classBrand, img.length + 1)); - } - if (this.props.full) { - const props = this.props.full; - const classBrand = 'navbar-brand-full'; - img.push(this.navbarBrandImg(props, classBrand, img.length + 1)); - } - if (this.props.minimized) { - const props = this.props.minimized; - const classBrand = 'navbar-brand-minimized'; - img.push(this.navbarBrandImg(props, classBrand, img.length + 1)); - } - - return ( - - {children || img} - - ); - } -} - -AppNavbarBrand.propTypes = propTypes; -AppNavbarBrand.defaultProps = defaultProps; - -export default AppNavbarBrand; diff --git a/src/NavbarBrand.md b/src/NavbarBrand.md deleted file mode 100644 index d1b01951..00000000 --- a/src/NavbarBrand.md +++ /dev/null @@ -1,24 +0,0 @@ -### CoreUI `NavbarBrand` component - - -prop | default ---- | --- -tag | `a` -children | `` -className | `navbar-brand` -brand | `{src, width, height, alt, className: 'navbar-brand' }` -full | `{src, width, height, alt, className: 'navbar-brand-full' }` -minimized | `{src, width, height, alt, className: 'navbar-brand-minimized' }` - - -example: -```js -import { AppNavbarBrand } from '@coreui/react'; -import logo from './logo.svg' -import sygnet from './sygnet.svg' - -const full= { src: logo, width: 89, height: 25, alt: 'CoreUI Logo' } -const minimized= { src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' } - - -``` diff --git a/src/README.md b/src/README.md index de008875..f2761aa5 100644 --- a/src/README.md +++ b/src/README.md @@ -2,8 +2,6 @@ ##### Layout components -- [Aside](./Aside.md) -- [AsideToggler](./AsideToggler.md) - [Breadcrumb](./Breadcrumb.md) - [Footer](./Footer.md) - [Header](./Header.md) @@ -21,6 +19,3 @@ ##### Installation: `npm install @coreui/react` - -##### Import -`import { AppAside } from '@coreui/react'` diff --git a/src/Shared/Slot.js b/src/Shared/Slot.js new file mode 100644 index 00000000..ccdfbc80 --- /dev/null +++ b/src/Shared/Slot.js @@ -0,0 +1,28 @@ +import React from 'react'; + +//export const Context = React.createContext({}); + +const Slot = (props)=>{ + + const { + content, + children, + ...attributes + } = props; + + //Context.slotData = attributes; + + //console.log(attributes); + + //alert(attributes.length); + /* + var clonedElementWithMoreProps = React.cloneElement( + children, + attributes + ); + */ + + return content?content:children?children:''; +} + +export default Slot; diff --git a/src/Shared/classes.js b/src/Shared/classes.js index 6fc0420b..bc3b7c00 100644 --- a/src/Shared/classes.js +++ b/src/Shared/classes.js @@ -1,17 +1,17 @@ export const sidebarCssClasses = [ - 'sidebar-show', - 'sidebar-sm-show', - 'sidebar-md-show', - 'sidebar-lg-show', - 'sidebar-xl-show' + 'c-sidebar-show', + 'c-sidebar-sm-show', + 'c-sidebar-md-show', + 'c-sidebar-lg-show', + 'c-sidebar-xl-show' ]; export const asideMenuCssClasses = [ - 'aside-menu-show', - 'aside-menu-sm-show', - 'aside-menu-md-show', - 'aside-menu-lg-show', - 'aside-menu-xl-show' + 'c-aside-menu-show', + 'c-aside-menu-sm-show', + 'c-aside-menu-md-show', + 'c-aside-menu-lg-show', + 'c-aside-menu-xl-show' ]; export const validBreakpoints = [ 'sm', 'md', 'lg', 'xl' ] diff --git a/src/Shared/helper.js b/src/Shared/helper.js new file mode 100644 index 00000000..9b5bf3b0 --- /dev/null +++ b/src/Shared/helper.js @@ -0,0 +1,316 @@ +import PropTypes from 'prop-types'; +import isFunction from 'lodash.isfunction'; + +let globalCssModule; + +/* eslint key-spacing: ["error", { afterColon: true, align: "value" }] */ +// These are all setup to match what is in the bootstrap _variables.scss +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss +export const TransitionTimeouts = { + Fade: 150, // $transition-fade + Collapse: 350, // $transition-collapse + Modal: 300, // $modal-transition + Carousel: 600, // $carousel-transition +}; + +export const PopperPlacements = [ + 'auto-start', + 'auto', + 'auto-end', + 'top-start', + 'top', + 'top-end', + 'right-start', + 'right', + 'right-end', + 'bottom-end', + 'bottom', + 'bottom-start', + 'left-end', + 'left', + 'left-start', +]; + +// Duplicated Transition.propType keys to ensure that Reactstrap builds +// for distribution properly exclude these keys for nested child HTML attributes +// since `react-transition-group` removes propTypes in production builds. +export const TransitionPropTypeKeys = [ + 'in', + 'mountOnEnter', + 'unmountOnExit', + 'appear', + 'enter', + 'exit', + 'timeout', + 'onEnter', + 'onEntering', + 'onEntered', + 'onExit', + 'onExiting', + 'onExited', +]; + +export const TransitionStatuses = { + ENTERING: 'entering', + ENTERED: 'entered', + EXITING: 'exiting', + EXITED: 'exited', +}; + +export const keyCodes = { + esc: 27, + space: 32, + enter: 13, + tab: 9, + up: 38, + down: 40, + home: 36, + end: 35, + n: 78, + p: 80, +}; + +export const canUseDOM = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); + +export const targetPropType = PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + DOMElement, + PropTypes.shape({ current: PropTypes.any }), +]); + +const tagPropType = PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }), + PropTypes.arrayOf(PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }), + ])) +]); + +export const focusableElements = [ + 'a[href]', + 'area[href]', + 'input:not([disabled]):not([type=hidden])', + 'select:not([disabled])', + 'textarea:not([disabled])', + 'button:not([disabled])', + 'object', + 'embed', + '[tabindex]:not(.modal)', + 'audio[controls]', + 'video[controls]', + '[contenteditable]:not([contenteditable="false"])', +]; + +export const defaultToggleEvents = ['touchstart', 'click']; + +export function omit(obj, omitKeys) { + const result = {}; + Object.keys(obj).forEach(key => { + if (omitKeys.indexOf(key) === -1) { + result[key] = obj[key]; + } + }); + return result; +} + +export function pick(obj, keys) { + const pickKeys = Array.isArray(keys) ? keys : [keys]; + let length = pickKeys.length; + let key; + const result = {}; + + while (length > 0) { + length -= 1; + key = pickKeys[length]; + result[key] = obj[key]; + } + return result; +} + +export function conditionallyUpdateScrollbar() { + const scrollbarWidth = getScrollbarWidth(); + // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/js/src/modal.js#L433 + const fixedContent = document.querySelectorAll( + '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' + )[0]; + const bodyPadding = fixedContent + ? parseInt(fixedContent.style.paddingRight || 0, 10) + : 0; + + if (isBodyOverflowing()) { + setScrollbarWidth(bodyPadding + scrollbarWidth); + } +} + +export function DOMElement(props, propName, componentName) { + if (!(props[propName] instanceof Element)) { + return new Error( + 'Invalid prop `' + + propName + + '` supplied to `' + + componentName + + '`. Expected prop to be an instance of Element. Validation failed.' + ); + } +} + +export function isReactRefObj(target) { + if (target && typeof target === 'object') { + return 'current' in target; + } + return false; +} + +export function findDOMElements(target) { + if (isReactRefObj(target)) { + return target.current; + } + if (isFunction(target)) { + return target(); + } + if (typeof target === 'string' && canUseDOM) { + let selection = document.querySelectorAll(target); + if (!selection.length) { + selection = document.querySelectorAll(`#${target}`); + } + if (!selection.length) { + throw new Error( + `The target '${target}' could not be identified in the dom, tip: check spelling` + ); + } + return selection; + } + return target; +} + +export function isArrayOrNodeList(els) { + if (els === null) { + return false; + } + return Array.isArray(els) || (canUseDOM && typeof els.length === 'number'); +} + +export function getTarget(target) { + const els = findDOMElements(target); + if (isArrayOrNodeList(els)) { + return els[0]; + } + return els; +} + +const mapToCssModules = (className = '', cssModule = globalCssModule)=>{ + if (!cssModule) return className; + return className + .split(' ') + .map(c => cssModule[c] || c) + .join(' '); +} + +let warned = {}; +export function warnOnce(message) { + if (!warned[message]) { + /* istanbul ignore else */ + if (typeof console !== 'undefined') { + console.error(message); // eslint-disable-line no-console + } + warned[message] = true; + } +} + +function deprecated(propType, explanation) { + return function validate(props, propName, componentName, ...rest) { + if (props[propName] !== null && typeof props[propName] !== 'undefined') { + warnOnce( + `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}` + ); + } + return propType(props, propName, componentName, ...rest); + }; +} + +export {tagPropType, mapToCssModules, deprecated}; + +export function getOriginalBodyPadding() { + const style = window.getComputedStyle(document.body, null); + + return parseInt((style && style.getPropertyValue('padding-right')) || 0, 10); +} + +// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L436-L443 +export function getScrollbarWidth() { + let scrollDiv = document.createElement('div'); + // .modal-scrollbar-measure styles // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/scss/_modal.scss#L106-L113 + scrollDiv.style.position = 'absolute'; + scrollDiv.style.top = '-9999px'; + scrollDiv.style.width = '50px'; + scrollDiv.style.height = '50px'; + scrollDiv.style.overflow = 'scroll'; + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + return scrollbarWidth; +} + +export function setScrollbarWidth(padding) { + document.body.style.paddingRight = padding > 0 ? `${padding}px` : null; +} + +export function isBodyOverflowing() { + return document.body.clientWidth < window.innerWidth; +} + +export function addMultipleEventListeners(_els, handler, _events, useCapture) { + let els = _els; + if (!isArrayOrNodeList(els)) { + els = [els]; + } + let events = _events; + if (typeof events === 'string') { + events = events.split(/\s+/); + } + if ( + !isArrayOrNodeList(els) || + typeof handler !== 'function' || + !Array.isArray(events) + ) { + throw new Error(` + The first argument of this function must be DOM node or an array on DOM nodes or NodeList. + The second must be a function. + The third is a string or an array of strings that represents DOM events + `); + } + Array.prototype.forEach.call(events, event => { + Array.prototype.forEach.call(els, el => { + el.addEventListener(event, handler, useCapture); + }); + }); + return function removeEvents() { + Array.prototype.forEach.call(events, event => { + Array.prototype.forEach.call(els, el => { + el.removeEventListener(event, handler, useCapture); + }); + }); + }; +} + +export default function toggleClasses (toggleClass, classList, force) { + const level = classList.indexOf(toggleClass) + const removeClassList = classList.slice(0, level) + removeClassList.map((className) => document.body.classList.remove(className)) + if (force === true) { + document.body.classList.add(toggleClass); + } else if (force === false) { + document.body.classList.remove(toggleClass); + } else { + document.body.classList.toggle(toggleClass); + } + return document.body.classList.contains(toggleClass); +} diff --git a/src/Shared/index.js b/src/Shared/index.js index 517f2787..d7bda5e6 100644 --- a/src/Shared/index.js +++ b/src/Shared/index.js @@ -1,3 +1,2 @@ import { sidebarCssClasses, asideMenuCssClasses, validBreakpoints, checkBreakpoint } from './classes'; - export { sidebarCssClasses, asideMenuCssClasses, validBreakpoints, checkBreakpoint }; diff --git a/src/Shared/layout/layout.js b/src/Shared/layout/layout.js deleted file mode 100644 index 48ad2338..00000000 --- a/src/Shared/layout/layout.js +++ /dev/null @@ -1,102 +0,0 @@ -class LayoutHelper { - - static elClassList = document.body.classList; - - static sidebarToggle(toggle) { - const minimize = arguments.length ? toggle : !this.elClassList.contains('sidebar-minimized'); - this.sidebarMinimize(minimize); - this.brandMinimize(minimize); - this.sidebarPSToggle(!minimize); /*remove PS on sidebar minimized*/ - } - - static sidebarMinimize(force) { - return this.toggleClass('sidebar-minimized', force); - } - - static brandMinimize(force) { - this.toggleClass('brand-minimized', force); - } - - // sidebar perfect scrollbar ugly hack - static sidebarPSToggle(toggle) { - - if (this.isOnMobile()) { - toggle = true - } else { - const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false - toggle = !isSidebarMinimized - } - - const ps = { y: { rail: {}, thumb: {} } }; - const isRtl = getComputedStyle(document.documentElement).direction === 'rtl' - const sidebar = document.querySelector('.sidebar-nav'); - ps.y.rail.on = document.querySelector('.sidebar-nav .ps__rail-y'); - ps.y.rail.off = document.querySelector('.sidebar-nav .ps__rail-y-off'); - ps.y.thumb.on = document.querySelector('.sidebar-nav .ps__thumb-y'); - ps.y.thumb.off = document.querySelector('.sidebar-nav .ps__thumb-y-off'); - if (sidebar) { - if (toggle) { - sidebar.classList.add('ps'); - sidebar.classList.add('ps-container'); - sidebar.classList.add('ps--active-y'); - if (ps.y.rail.off) { - ps.y.rail.off.classList.add('ps__rail-y'); - ps.y.rail.off.removeAttribute('style'); - ps.y.rail.off.style.left = isRtl ? '0px' : 'unset'; - ps.y.rail.off.style.right = isRtl ? 'unset' : '0px'; - ps.y.rail.off.classList.remove('ps__rail-y-off'); - } - if (ps.y.thumb.off) { - ps.y.thumb.off.removeAttribute('style'); - ps.y.thumb.off.classList.add('ps__thumb-y'); - ps.y.thumb.off.classList.remove('ps__thumb-y-off'); - } - } else { - if (ps.y.rail.on) { - ps.y.rail.on.classList.add('ps__rail-y-off'); - ps.y.rail.on.removeAttribute('style'); - ps.y.rail.on.classList.remove('ps__rail-y'); - } - if (ps.y.thumb.on) { - ps.y.thumb.on.classList.add('ps__thumb-y-off'); - ps.y.thumb.on.removeAttribute('style'); - ps.y.thumb.on.classList.remove('ps__thumb-y'); - } - sidebar.classList.remove('ps'); - sidebar.classList.remove('ps-container'); - sidebar.classList.remove('ps--active-y'); - } - } - } - - static toggleClass(className, force) { - - if (force === true) { - this.elClassList.add(className); - } else if (force === false) { - this.elClassList.remove(className); - } else { - this.elClassList.toggle(className); - } - return this.elClassList.contains(className); - } - - static isOnMobile() { - let onMobile = false; - try { - const minimizerElement = document.querySelector('.sidebar-minimizer'); - if (minimizerElement) { - onMobile = getComputedStyle(minimizerElement).getPropertyValue('display') === 'none'; - } else { - const sidebarElement = document.querySelector('.sidebar .sidebar-nav'); - sidebarElement && (onMobile = getComputedStyle(sidebarElement).getPropertyValue('overflow-y') === 'auto'); - } - } catch (ignore) { - // eslint-disable-next-line - console.warn('CoreUI isOnMobile failed to getComputedStyle', ignore) - } - return onMobile - } -} - -export default LayoutHelper; diff --git a/src/Shared/toggle-classes.js b/src/Shared/toggle-classes.js deleted file mode 100644 index 64aa8430..00000000 --- a/src/Shared/toggle-classes.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function toggleClasses (toggleClass, classList, force) { - const level = classList.indexOf(toggleClass) - const removeClassList = classList.slice(0, level) - removeClassList.map((className) => document.body.classList.remove(className)) - if (force === true) { - document.body.classList.add(toggleClass); - } else if (force === false) { - document.body.classList.remove(toggleClass); - } else { - document.body.classList.toggle(toggleClass); - } - return document.body.classList.contains(toggleClass); -} diff --git a/src/Sidebar.js b/src/Sidebar.js deleted file mode 100644 index 58f6c644..00000000 --- a/src/Sidebar.js +++ /dev/null @@ -1,119 +0,0 @@ -import React, { Component } from 'react'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import { sidebarCssClasses } from './Shared'; -import ClickOutHandler from 'react-onclickout' - -import './Shared/element-closest' -import LayoutHelper from './Shared/layout/layout' - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - compact: PropTypes.bool, - display: PropTypes.string, - fixed: PropTypes.bool, - minimized: PropTypes.bool, - isOpen: PropTypes.bool, - offCanvas: PropTypes.bool, - staticContext: PropTypes.any, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'div', - compact: false, - display: '', - fixed: false, - minimized: false, - isOpen: false, - offCanvas: false -}; - -class AppSidebar extends Component { - constructor(props) { - super(props); - - this.isCompact = this.isCompact.bind(this); - this.isFixed = this.isFixed.bind(this); - this.isMinimized = this.isMinimized.bind(this); - this.isOffCanvas = this.isOffCanvas.bind(this); - this.displayBreakpoint = this.displayBreakpoint.bind(this); - this.hideMobile = this.hideMobile.bind(this); - } - - componentDidMount() { - this.displayBreakpoint(this.props.display); - this.isCompact(this.props.compact); - this.isFixed(this.props.fixed); - this.isMinimized(this.props.minimized); - this.isOffCanvas(this.props.offCanvas); - } - - isCompact(compact) { - if (compact) { document.body.classList.add('sidebar-compact'); } - } - - isFixed(fixed) { - if (fixed) { document.body.classList.add('sidebar-fixed'); } - } - - isMinimized(minimized) { - LayoutHelper.sidebarToggle(minimized) - } - - isOffCanvas(offCanvas) { - if (offCanvas) { document.body.classList.add('sidebar-off-canvas'); } - } - - displayBreakpoint(display) { - const cssTemplate = `sidebar-${display}-show`; - let [cssClass] = sidebarCssClasses[0]; - if (display && sidebarCssClasses.indexOf(cssTemplate) > -1) { - cssClass = cssTemplate; - } - document.body.classList.add(cssClass); - } - - hideMobile() { - if (document.body.classList.contains('sidebar-show')) { - document.body.classList.remove('sidebar-show'); - } - } - - onClickOut(e) { - if (typeof window !== 'undefined' && document.body.classList.contains('sidebar-show')) { - if (!e.target.closest('[data-sidebar-toggler]')) { - this.hideMobile(); - } - } - } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - delete attributes.compact - delete attributes.display - delete attributes.fixed - delete attributes.minimized - delete attributes.offCanvas - delete attributes.isOpen - delete attributes.staticContext - - const classes = classNames(className, 'sidebar'); - - // sidebar-nav root - return ( - {this.onClickOut(e)}}> - - {children} - - - ); - } -} - -AppSidebar.propTypes = propTypes; -AppSidebar.defaultProps = defaultProps; - -export default AppSidebar; diff --git a/src/Sidebar.md b/src/Sidebar.md deleted file mode 100644 index 70ec4fa0..00000000 --- a/src/Sidebar.md +++ /dev/null @@ -1,25 +0,0 @@ -### CoreUI `Sidebar` component - - -prop | default ---- | --- -children | -className | `sidebar` -compact | `false` -display | `sm, md, lg, xl, ""` -fixed | `false` -minimized | `false` -isOpen | `false` -offCanvas | `false` -tag | `div` - - -#### Supported content -Sidebar come with built-in support for a handful of sub-components. - -- SidebarFooter -- SidebarForm -- SidebarHeader -- [SidebarMinimizer](./SidebarMinimizer.md) -- [SidebarNav](./SidebarNav.md) - diff --git a/src/SidebarFooter.js b/src/SidebarFooter.js deleted file mode 100644 index 45209870..00000000 --- a/src/SidebarFooter.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'div' -}; - -class AppSidebarFooter extends Component { - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - const classes = classNames(className, 'sidebar-footer'); - const footer = children ? - - {children} - - : null; - - return ( - footer - ); - } -} - -AppSidebarFooter.propTypes = propTypes; -AppSidebarFooter.defaultProps = defaultProps; - -export default AppSidebarFooter; diff --git a/src/SidebarFooter.md b/src/SidebarFooter.md deleted file mode 100644 index a453987d..00000000 --- a/src/SidebarFooter.md +++ /dev/null @@ -1,3 +0,0 @@ -### CoreUI `SidebarFooter` component - -_todo_ diff --git a/src/SidebarForm.js b/src/SidebarForm.js deleted file mode 100644 index 21c8d161..00000000 --- a/src/SidebarForm.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'div' -}; - -class AppSidebarForm extends Component { - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - const classes = classNames(className, 'sidebar-form'); - const form = children ? - - {children} - - : null; - - return ( - form - ); - } -} - -AppSidebarForm.propTypes = propTypes; -AppSidebarForm.defaultProps = defaultProps; - -export default AppSidebarForm; diff --git a/src/SidebarForm.md b/src/SidebarForm.md deleted file mode 100644 index 7e18826e..00000000 --- a/src/SidebarForm.md +++ /dev/null @@ -1,3 +0,0 @@ -### CoreUI `SidebarForm` component - -_todo_ diff --git a/src/SidebarHeader.js b/src/SidebarHeader.js deleted file mode 100644 index 0c6f98f5..00000000 --- a/src/SidebarHeader.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'div' -}; - -class AppSidebarHeader extends Component { - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - const classes = classNames(className, 'sidebar-header'); - const header = children ? - - {children} - - : null; - - return ( - header - ); - } -} - -AppSidebarHeader.propTypes = propTypes; -AppSidebarHeader.defaultProps = defaultProps; - -export default AppSidebarHeader; diff --git a/src/SidebarHeader.md b/src/SidebarHeader.md deleted file mode 100644 index 2f206d3b..00000000 --- a/src/SidebarHeader.md +++ /dev/null @@ -1,3 +0,0 @@ -### CoreUI `SidebarHeader` component - -_todo_ diff --git a/src/SidebarMinimizer.js b/src/SidebarMinimizer.js deleted file mode 100644 index 51b9298c..00000000 --- a/src/SidebarMinimizer.js +++ /dev/null @@ -1,51 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import LayoutHelper from './Shared/layout/layout' - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - type: PropTypes.string -}; - -const defaultProps = { - tag: 'button', - type: 'button' -}; - -class AppSidebarMinimizer extends Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - } - - componentDidMount() { - const isMinimized = document.body.classList.contains('sidebar-minimized'); - LayoutHelper.sidebarPSToggle(!isMinimized) - } - - handleClick() { - LayoutHelper.sidebarToggle() - } - - render() { - const { className, children, tag: Tag, type, ...attributes } = this.props; - - const classes = classNames(className, 'sidebar-minimizer', 'mt-auto'); - - return ( - this.handleClick(event)} > - {children} - - ); - } -} - -AppSidebarMinimizer.propTypes = propTypes; -AppSidebarMinimizer.defaultProps = defaultProps; - -export default AppSidebarMinimizer; diff --git a/src/SidebarMinimizer.md b/src/SidebarMinimizer.md deleted file mode 100644 index a257cb62..00000000 --- a/src/SidebarMinimizer.md +++ /dev/null @@ -1,8 +0,0 @@ -### CoreUI `SidebarMinimizer` component - -prop | default ---- | --- -children | -className | `sidebar-minimizer mt-auto` -tag | `button` -type | `button` diff --git a/src/SidebarNav.js b/src/SidebarNav.js deleted file mode 100644 index 25229ebc..00000000 --- a/src/SidebarNav.js +++ /dev/null @@ -1,205 +0,0 @@ -import React, { Component } from 'react'; -import { NavLink } from 'react-router-dom'; -import { Badge, Nav, NavItem, NavLink as RsNavLink } from 'reactstrap'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import PerfectScrollbar from 'react-perfect-scrollbar'; -import 'react-perfect-scrollbar/dist/css/styles.css'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - navConfig: PropTypes.any, - navFunc: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - isOpen: PropTypes.bool, - staticContext: PropTypes.any, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) -}; - -const defaultProps = { - tag: 'nav', - navConfig: { - items: [ - { - name: 'Dashboard', - url: '/dashboard', - icon: 'icon-speedometer', - badge: { variant: 'info', text: 'NEW' } - }] - }, - isOpen: false -}; - -class AppSidebarNav extends Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - this.activeRoute = this.activeRoute.bind(this); - this.hideMobile = this.hideMobile.bind(this); - } - - handleClick(e) { - e.preventDefault(); - e.currentTarget.parentElement.classList.toggle('open'); - } - - activeRoute(routeName, props) { - return props.location.pathname.indexOf(routeName) > -1 - ? 'nav-item nav-dropdown open' - : 'nav-item nav-dropdown'; - } - - hideMobile() { - if (document.body.classList.contains('sidebar-show')) { - document.body.classList.toggle('sidebar-show'); - } - } - - // nav list - navList(items) { - return items.map((item, index) => this.navType(item, index)); - } - - // nav type - navType(item, idx) { - return ( - item.title ? this.navTitle(item, idx) - : item.divider ? this.navDivider(item, idx) - : item.label ? this.navLabel(item, idx) - : item.children ? this.navDropdown(item, idx) - : this.navItem(item, idx) - ); - } - - // nav list section title - navTitle(title, key) { - const classes = classNames('nav-title', title.class); - return
  • {this.navWrapper(title)}
    • ; - } - - // simple wrapper for nav-title item - navWrapper(item) { - return item.wrapper && item.wrapper.element ? React.createElement(item.wrapper.element, item.wrapper.attributes, item.name) : item.name; - } - - // nav list divider - navDivider(divider, key) { - const classes = classNames('divider', divider.class); - return
  • ; - } - - // nav label with nav link - navLabel(item, key) { - const classes = { - item: classNames('hidden-cn', item.class), - link: classNames('nav-label', item.class ? item.class : ''), - icon: classNames( - 'nav-icon', - !item.icon ? 'fa fa-circle' : item.icon, - item.label.variant ? `text-${item.label.variant}` : '', - item.label.class ? item.label.class : '', - ) - }; - return ( - this.navLink(item, key, classes) - ); - } - - // nav dropdown - navDropdown(item, key) { - const classIcon = classNames('nav-icon', item.icon); - const attributes = JSON.parse(JSON.stringify(item.attributes || {})); - const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class); - delete attributes.class; - return ( -
  • - - {item.name}{this.navBadge(item.badge)} - -
      - {this.navList(item.children)} -
    -
    • ); - } - - // nav item with nav link - navItem(item, key) { - const classes = { - item: classNames(item.class), - link: classNames('nav-link', item.variant ? `nav-link-${item.variant}` : ''), - icon: classNames('nav-icon', item.icon) - }; - return ( - this.navLink(item, key, classes) - ); - } - - // nav link - navLink(item, key, classes) { - const url = item.url || ''; - const itemIcon = - const itemBadge = this.navBadge(item.badge) - const attributes = item.attributes || {} - return ( - - { attributes.disabled ? - - {itemIcon}{item.name}{itemBadge} - - : - this.isExternal(url) ? - - {itemIcon}{item.name}{itemBadge} - : - - {itemIcon}{item.name}{itemBadge} - - } - - ); - } - - // badge addon to NavItem - navBadge(badge) { - if (badge) { - const classes = classNames(badge.class); - return ( - {badge.text} - ); - } - return null; - } - - isExternal(url) { - const link = url ? url.substring(0, 4) : ''; - return link === 'http'; - } - - render() { - const { className, children, navConfig, ...attributes } = this.props; - - delete attributes.isOpen - delete attributes.staticContext - delete attributes.Tag - - const navClasses = classNames(className, 'sidebar-nav'); - - // ToDo: find better rtl fix - const isRtl = getComputedStyle(document.documentElement).direction === 'rtl' - - // sidebar-nav root - return ( - - - - ); - } -} - -AppSidebarNav.propTypes = propTypes; -AppSidebarNav.defaultProps = defaultProps; - -export default AppSidebarNav; diff --git a/src/SidebarNav.md b/src/SidebarNav.md deleted file mode 100644 index d9b81f39..00000000 --- a/src/SidebarNav.md +++ /dev/null @@ -1,134 +0,0 @@ -### CoreUI `SidebarNav` subcomponent -usage in `DefaultLayout`: -```jsx -import * as router from 'react-router-dom'; -import { AppSidebarNav2 as AppSidebarNav } from '@coreui/react'; -// sidebar nav config -import navigation from '../../_nav'; -``` - -```html - -``` -props: - -prop | default | notes ---- | --- | --- -children | `this.navList(navConfig.items)` | -className | `sidebar-nav` | -navConfig | `{ items: [ { name url icon badge } ] }` | -isOpen | `false` | -tag | `nav` | -router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.0_ - ---- -#### `navConfig` shape - -- title: -```json5 -{ - title: true, - name: 'Theme', - class: '', // optional class names space delimited list for title item ex: "text-center" - wrapper: { // optional wrapper object - element: '', // optional* valid HTML5 element tag ( *required when passing attributes) - attributes: {} // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"} - }, -}, -``` - -- item: -```json5 -{ - name: 'Dashboard', - url: '/dashboard', - icon: 'icon-speedometer', - class: '', // optional - variant: 'success', // optional - badge: { - variant: 'info', - text: 'NEW', - class: '' // optional - }, - attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) link html attributes - optional valid JS object with JS API naming - itemAttr: { id: 'item-1'}, // item html attributes - optional -}, -``` - -__React Router Link `url`__ - -`url: string` - a string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties. -`url: object` - (^2.5.4 up) an object that can have any of the following properties. -- `pathname`: a string representing the path to link to. -- `search`: a string representation of query parameters. -- `hash`: a hash to put in the URL, e.g. #a-hash. -- `state`: state to persist to the location. - -`url: function` - (^2.5.4 up) a function to which current location is passed as an argument and which should return location representation as a string or as an object - -__React Router Link props to pass in `attributes` object:__ -`replace: bool` - when true, clicking the link will replace the current entry in the history stack instead of adding a new one. -`innerRef: function` - allows access to the underlying `ref` of the component -`innerRef: RefObject` - get the underlying `ref` of the component with `React.createRef()` - -`others` - you can also pass props you’d like to be on the such as a `title`, `id`, etc. - -__React Router NavLink props to pass in `attributes` object:__ -`activeStyle: object` - the styles to apply to the element when it is active. -`exact: bool` - when true, the active class/style will only be applied if the location is matched exactly. -`strict: bool` - when true, the trailing slash on a location’s pathname will be taken into consideration when determining if the location matches the current URL. - -```json5 -{ - name: 'Dashboard', - url: { - pathname: '/dashboard', - search: '?name=search&period=today', - state: { fromDashboard: true } - }, - icon: 'icon-speedometer', - attributes: { - replace: true, - activeStyle: { textTransform: 'uppercase' }, - id: 'link-1', - title: 'Dashboard', - } -} -``` - ---- - -- item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items` -```json5 -{ - name: 'Icons', - url: '/icons', - icon: 'icon-star', - class: 'text-uppercase', // (v2.5.1 up) optional - attributes: { class: 'bg-success' }, // (v2.5.1 up) nav-dropdown link html attributes - optional valid JS object with JS API naming, - itemAttr: { id: 'drop-1' }, // (v2.5.3 up) item html attributes - optional - children: [ - { - name: 'Flags', // item options apply - url: '/icons/flags', - icon: 'icon-star', - badge: { - variant: 'success', - text: 'NEW' - } - }, - ] -} -``` -- divider: -```json5 -{ - divider: true -}, -``` - -- order of precedence: -``` -title > divider > children > item -``` - diff --git a/src/SidebarNav2.js b/src/SidebarNav2.js deleted file mode 100644 index 9ae699e4..00000000 --- a/src/SidebarNav2.js +++ /dev/null @@ -1,281 +0,0 @@ -import React, { Component } from 'react'; -import { Badge, Nav, NavItem, NavLink as RsNavLink } from 'reactstrap'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import PerfectScrollbar from 'react-perfect-scrollbar'; -import 'react-perfect-scrollbar/dist/css/styles.css'; -import '../css/scrollbar.css'; - -import LayoutHelper from './Shared/layout/layout' - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - navConfig: PropTypes.any, - navFunc: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - isOpen: PropTypes.bool, - staticContext: PropTypes.any, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - router: PropTypes.any, - props: PropTypes.any -}; - -const defaultProps = { - tag: 'nav', - navConfig: { - items: [ - { - name: 'Dashboard', - url: '/dashboard', - icon: 'icon-speedometer', - badge: { variant: 'info', text: 'NEW' } - }] - }, - isOpen: false, - router: {RsNavLink} -}; - -class AppSidebarNav2 extends Component { - constructor(props) { - super(props); - - this.handleClick = this.handleClick.bind(this); - this.activeRoute = this.activeRoute.bind(this); - this.hideMobile = this.hideMobile.bind(this); - - this.changes = null; - this.state = { sidebarMinimized: false } - } - - _scrollBarRef = null; - - handleClick(e) { - e.preventDefault(); - e.currentTarget.parentElement.classList.toggle('open'); - } - - isActiveRoute(routeName, props) { - return props.location.pathname.indexOf(routeName) > -1 - } - - activeRoute(routeName, props) { - return this.isActiveRoute(routeName, props) ? - 'nav-item nav-dropdown open' : - 'nav-item nav-dropdown'; - } - - hideMobile() { - if (document.body.classList.contains('sidebar-show')) { - document.body.classList.toggle('sidebar-show'); - } - } - - getAttribs(attributes) { - return JSON.parse(JSON.stringify(attributes || {})); - } - - // nav list - navList(items) { - return items.map((item, index) => this.navType(item, index)); - } - - // nav type - navType(item, idx) { - return ( - item.title ? this.navTitle(item, idx) - : item.divider ? this.navDivider(item, idx) - : item.label ? this.navLabel(item, idx) - : item.children ? this.navDropdown(item, idx) - : this.navItem(item, idx) - ); - } - - // nav list section title - navTitle(title, key) { - const classes = classNames('nav-title', title.class, title.className); - return
  • {this.navWrapper(title)}
    • ; - } - - // simple wrapper for nav-title item - navWrapper(item) { - return item.wrapper && item.wrapper.element ? React.createElement(item.wrapper.element, item.wrapper.attributes, item.name) : item.name; - } - - // nav list divider - navDivider(divider, key) { - const classes = classNames('divider', divider.class, divider.className); - return
  • ; - } - - // nav label with nav link - navLabel(item, key) { - const classes = { - item: classNames('hidden-cn', item.class), - link: classNames('nav-label', item.class ? item.class : ''), - icon: classNames( - 'nav-icon', - !item.icon ? 'fa fa-circle' : item.icon, - item.label.variant ? `text-${item.label.variant}` : '', - item.label.class ? item.label.class : '', - ) - }; - return ( - this.navLink(item, key, classes) - ); - } - - // nav dropdown - navDropdown(item, key) { - const classIcon = classNames('nav-icon', item.icon); - const attributes = this.getAttribs(item.attributes); - const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class, attributes.className); - delete attributes.class; - delete attributes.className; - const itemAttr = this.getAttribs(item.itemAttr); - const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class, itemAttr.className) - delete itemAttr.class; - delete itemAttr.className; - return ( -
  • - - {item.name}{this.navBadge(item.badge)} - -
      - {this.navList(item.children)} -
    -
    • ); - } - - // nav item with nav link - navItem(item, key) { - const classes = { - item: classNames(item.class), - link: classNames('nav-link', item.variant ? `nav-link-${item.variant}` : ''), - icon: classNames('nav-icon', item.icon) - }; - return ( - this.navLink(item, key, classes) - ); - } - - // nav link - navLink(item, key, classes) { - const ref = React.createRef(); - const url = item.url || ''; - const itemIcon = - const itemBadge = this.navBadge(item.badge) - const attributes = this.getAttribs(item.attributes) - classes.link = classNames(classes.link, attributes.class, attributes.className) - delete attributes.class; - delete attributes.className; - const itemAttr = this.getAttribs(item.itemAttr) - classes.item = classNames(classes.item, itemAttr.class, itemAttr.className) - delete itemAttr.class; - delete itemAttr.className; - const NavLink = this.props.router.NavLink || RsNavLink - return ( - - { attributes.disabled ? - - {itemIcon}{item.name}{itemBadge} - - : - this.isExternal(url, this.props) || NavLink === RsNavLink ? - - {itemIcon}{item.name}{itemBadge} - : - this.hideMobile(ref)} ref={ref} {...attributes}> - {itemIcon}{item.name}{itemBadge} - - } - - ); - } - - // badge addon to NavItem - navBadge(badge) { - if (badge) { - const classes = classNames(badge.class, badge.className); - return ( - {badge.text} - ); - } - return null; - } - - isExternal(url, props) { - const linkType = typeof url; - const link = - linkType === 'string' ? url : - linkType === 'object' && url.pathname ? url.pathname : - linkType === 'function' && typeof url(props.location) === 'string' ? url(props.location) : - linkType === 'function' && typeof url(props.location) === 'object' ? url(props.location).pathname : '' ; - return link.substring(0, 4) === 'http'; - } - - observeDomMutations() { - if (window.MutationObserver) { - - // eslint-disable-next-line - this.changes = new MutationObserver((mutations) => { - - const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false - this.setState({ sidebarMinimized: isSidebarMinimized }) - - LayoutHelper.sidebarPSToggle(!isSidebarMinimized) - - }); - const element = document.body; - this.changes.observe(element, { - attributes: true, - attributeFilter: ['class'] - }); - } - window.addEventListener('resize', this.onResize); - } - - onResize() { - LayoutHelper.sidebarPSToggle(true) - } - - componentDidMount() { - this.observeDomMutations() - } - - componentWillUnmount() { - try { - this.changes.disconnect() - window.removeEventListener('resize', this.onResize); - } catch (ignore) { - // eslint-disable-next-line - console.warn('CoreUI SidebarNav failed to disconnect from MutationObserver', ignore) - } - } - - render() { - const { className, children, navConfig, ...attributes } = this.props; - - delete attributes.isOpen - delete attributes.staticContext - delete attributes.Tag - delete attributes.router - - const navClasses = classNames(className, 'sidebar-nav') - - const options = Object.assign({}, { suppressScrollX: true, suppressScrollY: this.state.sidebarMinimized }) - - // sidebar-nav root - return ( - { this._scrollBarRef = ref; }} > - - - ); - } -} - -AppSidebarNav2.propTypes = propTypes; -AppSidebarNav2.defaultProps = defaultProps; - -export default AppSidebarNav2; diff --git a/src/SidebarToggler.js b/src/SidebarToggler.js deleted file mode 100644 index c0e5497b..00000000 --- a/src/SidebarToggler.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from './Shared/index'; -import toggleClasses from './Shared/toggle-classes'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - display: PropTypes.any, - mobile: PropTypes.bool, - tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - type: PropTypes.string -}; - -const defaultProps = { - display: 'lg', - mobile: false, - tag: 'button', - type: 'button' -}; - -class AppSidebarToggler extends Component { - constructor(props) { - super(props); - this.sidebarToggle = this.sidebarToggle.bind(this); - } - - sidebarToggle(e) { - e.preventDefault(); - this.toggle(); - } - - toggle(force) { - const [display, mobile] = [this.props.display, this.props.mobile] - let cssClass = sidebarCssClasses[0] - if (!mobile && display && checkBreakpoint(display, validBreakpoints)) { - cssClass = `sidebar-${display}-show` - } - toggleClasses(cssClass, sidebarCssClasses, force) - } - - render() { - const { className, children, tag: Tag, ...attributes } = this.props; - - delete attributes.mobile - delete attributes.display - - const classes = classNames(className, 'navbar-toggler'); - - return ( - this.sidebarToggle(event)} data-sidebar-toggler> - {children || } - - ); - } -} - -AppSidebarToggler.propTypes = propTypes; -AppSidebarToggler.defaultProps = defaultProps; - -export default AppSidebarToggler; diff --git a/src/SidebarToggler.md b/src/SidebarToggler.md deleted file mode 100644 index c1f7d8cf..00000000 --- a/src/SidebarToggler.md +++ /dev/null @@ -1,11 +0,0 @@ -### CoreUI `SidebarToggler` component - - -prop | default ---- | --- -children | ` ` -className | `navbar-toggler` -display | `lg` -mobile | `false` -tag | `button` -type | `button` diff --git a/src/Switch.js b/src/Switch.js deleted file mode 100644 index 75125d68..00000000 --- a/src/Switch.js +++ /dev/null @@ -1,142 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const propTypes = { - color: PropTypes.string, - label: PropTypes.bool, - outline: PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.string, - PropTypes.oneOf(['', 'alt']) - ]), - size: PropTypes.oneOf(['', 'lg', 'sm']), - checked: PropTypes.bool, - defaultChecked: PropTypes.bool, - defaultValue: PropTypes.any, - value: PropTypes.string, - disabled: PropTypes.bool, - form: PropTypes.any, - name: PropTypes.string, - required: PropTypes.bool, - onChange: PropTypes.func, - type: PropTypes.oneOf(['checkbox', 'radio']), - variant: PropTypes.oneOf(['', '3d', 'pill']), - className: PropTypes.string, - dataOn: PropTypes.string, - dataOff: PropTypes.string, -}; - -const defaultProps = { - color: 'secondary', - label: false, - outline: false, - size: '', - checked: false, - defaultChecked: undefined, - disabled: undefined, - required: undefined, - type: 'checkbox', - variant: '', - dataOn: 'On', - dataOff: 'Off', -}; - -class AppSwitch extends Component { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleKeyUp = this.handleKeyUp.bind(this); - this.state = { - uncontrolled: !!this.props.defaultChecked, - checked: this.props.defaultChecked || this.props.checked, - selected: [] - }; - } - - toggleState(check) { - this.setState({ - checked: check - }) - } - - handleChange(event) { - const target = event.target; - this.toggleState(target.checked) - - if (this.props.onChange) { - this.props.onChange(event); - } - } - - handleKeyDown(event) { - if (event.key === ' ') { - event.preventDefault(); - } - } - - handleKeyUp(event) { - if (event.key === 'Enter' || event.key === ' ') { - this.toggleState(!this.state.checked); - } - } - - componentDidUpdate(prevProps, prevState) { - if (!this.state.uncontrolled && (this.props.checked !== prevState.checked)) { - this.toggleState(this.props.checked) - } - } - - render() { - const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props; - - const tabindex = attributes.tabIndex - delete attributes.tabIndex - delete attributes.checked - delete attributes.defaultChecked - delete attributes.onChange - - const classes = classNames( - className, - 'switch', - label ? 'switch-label' : false, - size ? `switch-${size}` : false, - variant ? `switch-${variant}` : false, - `switch${outline ? '-outline' : ''}-${color}${outline==='alt' ? '-alt' : ''}`, - 'form-check-label', - ); - - const inputClasses = classNames( - 'switch-input', - 'form-check-input', - ); - - const sliderClasses = classNames( - 'switch-slider', - ); - - return ( - - ); - } -} - -AppSwitch.propTypes = propTypes; -AppSwitch.defaultProps = defaultProps; - -export default AppSwitch; diff --git a/src/Switch.md b/src/Switch.md deleted file mode 100644 index ec8124b8..00000000 --- a/src/Switch.md +++ /dev/null @@ -1,22 +0,0 @@ -### CoreUI `Switch` component - -prop | default ---- | --- -color | `secondary` -label | `false` -outline | `false` -size | `'', 'lg', 'sm'` -checked | `false` -defaultChecked | `false` -defaultValue | -value | -disabled | `false` -form | -name | -required | `false` -onChange | -type | `checkbox` -variant | `''` -className | `switch` -dataOn | `On` -dataOff | `Off` diff --git a/src/index.js b/src/index.js index b32539fa..26548eca 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,123 @@ -export AppAside from './Aside'; -export AppAsideToggler from './AsideToggler'; -export AppBreadcrumb from './Breadcrumb'; -export AppBreadcrumb2 from './Breadcrumb2'; -export AppFooter from './Footer'; -export AppHeader from './Header'; -export AppHeaderDropdown from './HeaderDropdown'; -export AppNavbarBrand from './NavbarBrand'; -export AppSidebar from './Sidebar'; -export AppSidebarFooter from './SidebarFooter'; -export AppSidebarForm from './SidebarForm'; -export AppSidebarHeader from './SidebarHeader'; -export AppSidebarMinimizer from './SidebarMinimizer'; -export AppSidebarNav from './SidebarNav'; -export AppSidebarNav2 from './SidebarNav2'; -export AppSidebarToggler from './SidebarToggler'; -export AppSwitch from './Switch'; +// CoreUI 3 index + +export {default as CAlert} from './CAlert'; +export {default as CBadge} from './CBadge'; +export {default as CButton} from './CButton'; +export {default as CButtonClose} from './CButtonClose'; +export {default as CButtonGroup} from './CButtonGroup'; +export {default as CButtonToolbar} from './CButtonToolbar'; +export {default as CCard} from './CCard'; +export {default as CCardColumns} from './CCardColumn'; +export {default as CCardDeck} from './CCardDeck'; +export {default as CCardBody} from './CCardBody'; +export {default as CCardHeader} from './CCardHeader'; +export {default as CCardFooter} from './CCardFooter'; +export {default as CCardGroup} from './CCardGroup'; +export {default as CCardImg} from './CCardImg'; +export {default as CCardImgOverlay} from './CCardImgOverlay'; +export {default as CCardLink} from './CCardLink'; +export {default as CCardTitle} from './CCardTitle'; +export {default as CCardSubtitle} from './CCardSubtitle'; +export {default as CCardText} from './CCardText'; +export {default as CRow} from './CRow'; +export {default as CCol} from './CCol'; +export {default as CContainer} from './CContainer'; +export {default as CJumbotron} from './CJumbotron'; +export {default as CLabel} from './CLabel'; +export {default as CMedia} from './CMedia'; +export {default as CMediaBody} from './CMediaBody'; +export {default as CMediaAside} from './CMediaAside'; +export {default as CPagination} from './CPagination'; +export {default as CPaginationItem} from './CPaginationItem'; +export {default as CPaginationLink} from './CPaginationLink'; +export {default as CSpinner} from './CSpinner'; +export {default as CTabPane} from './CTabPane'; +export {default as CTabContent} from './CTabContent'; +export {default as CPopover} from './CPopover'; +export {default as CPopoverBody} from './CPopoverBody'; +export {default as CPopoverHeader} from './CPopoverHeader'; +export {default as CPopperContent} from './CPopperContent'; +export {default as CPopperTargetHelper} from './CPopperTargetHelper'; +export {default as CProgress} from './CProgress'; +export {default as CPortal} from './CPortal'; +export {default as CDropdown} from './CDropdown'; +export {default as CDropdownItem} from './CDropdownItem'; +export {default as CDropdownMenu} from './CDropdownMenu'; +export {default as CDropdownToggle} from './CDropdownToggle'; +export {default as CForm} from './CForm'; +export {default as CFormFeedback} from './CFormFeedback'; +export {default as CFormGroup} from './CFormGroup'; +export {default as CFormText} from './CFormText'; +export {default as CInput} from './CInput'; +export {default as CInputGroup} from './CInputGroup'; +export {default as CInputGroupAddon} from './CInputGroupAddon'; +export {default as CInputGroupText} from './CInputGroupText'; +export {default as CListGroup} from './CListGroup'; +export {default as CListGroupItem} from './CListGroupItem'; +export {default as CListGroupItemHeading} from './CListGroupHeading'; +export {default as CListGroupItemText} from './CListGroupText'; +export {default as CModal} from './CModal'; +export {default as CModalBody} from './CModalBody'; +export {default as CModalHeader} from './CModalHeader'; +export {default as CModalFooter} from './CModalFooter'; +export {default as CDataTable} from './CDataTable'; +export {default as CFade} from './CFade'; +export {default as CCustomInput} from './CCustomInput'; +export {default as CNav} from './CNav'; +export {default as CNavItem} from './CNavItem'; +export {default as CNavLink} from './CNavLink'; +export {default as CNavbar} from './CNavbar'; +export {default as CCarousel} from './CCarousel'; +export {default as CCarouselItem} from './CCarouselItem'; +export {default as CCarouselControl} from './CCarouselControl'; +export {default as CCarouselIndicators} from './CCarouselIndicators'; +export {default as CCarouselCaption} from './CCarouselCaption'; +export {default as CCollapse} from './CCollapse'; +export {default as CTooltip} from './CTooltip'; +export {default as CTooltipPopoverWrapper} from './CTooltipPopoverWrapper'; +export {default as CBreadcrumb} from './CBreadcrumb'; +export {default as CBreadcrumbItem} from './CBreadcrumbItem'; +export {default as CFooter} from './CFooter'; +export {default as CHeader} from './CHeader'; +export {default as CHeaderNav} from './CHeaderNav'; +export {default as CHeaderNavItem} from './CHeaderNavItem'; +export {default as CHeaderNavLink} from './CHeaderNavLink'; +export {default as CHeaderBrand} from './CHeaderBrand'; +export {default as CHeaderSubheader} from './CHeaderSubheader'; +export {default as CNavbarBrand} from './CNavbarBrand'; +export {default as CNavbarNav} from './CNavbarNav'; +export {default as CNavbarText} from './CNavbarText'; +export {default as CSidebar} from './CSidebar'; +export {default as CSidebarBrand} from './CSidebarBrand'; +export {default as CSidebarNavDivider} from './CSidebarNavDivider'; +export {default as CSidebarNavTitle} from './CSidebarNavTitle'; +export {default as CSidebarNavItem} from './CSidebarNavItem'; +export {default as CSidebarNavLink} from './CSidebarNavLink'; +export {default as CSidebarNavDropdown} from './CSidebarNavDropdown'; +export {default as CSidebarFooter} from './CSidebarFooter'; +export {default as CSidebarForm} from './CSidebarForm'; +export {default as CSidebarHeader} from './CSidebarHeader'; +export {default as CSidebarMinimizer} from './CSidebarMinimizer'; +export {default as CSidebarNav} from './CSidebarNav'; +export {default as CSidebarClose} from './CSidebarClose'; +export {default as CSwitch} from './CSwitch'; +export {default as CTable} from './CTable'; +export {default as CToast} from './CToast'; +export {default as CToastHeader} from './CToastHeader'; +export {default as CToastBody} from './CToastBody'; +export {default as CToaster} from './CToaster'; +export {default as CCallout} from './CCallout'; +export {default as CEmbed} from './CEmbed'; +export {default as CEmbedObject} from './CEmbedObject'; +export {default as CLink} from './CLink'; +export {default as CToggler} from './CToggler'; +export {default as CIcon} from './CIcon'; +export {default as CIconRaw} from './CIconRaw'; +export {default as CImg} from './CImg'; +export {default as CCharts} from './CCharts'; +export {default as CWidgetProgress} from './CWidgetProgress'; +export {default as CWidgetIcon} from './CWidgetIcon'; +export {default as CWidgetBrand} from './CWidgetBrand'; +export {default as CWidgetProgressIcon} from './CWidgetProgressIcon'; +export {default as CWidgetDropdown} from './CWidgetDropdown'; +export {default as CWidgetSimple} from './CWidgetSimple'; From c8905a3d86731d2a494fba52abed062a400a0830 Mon Sep 17 00:00:00 2001 From: xidedix Date: Sun, 16 Feb 2020 20:29:11 +0100 Subject: [PATCH 002/198] CoreUI v3.0.0-alpha.0 for React - demo update WIP --- demo/src/App.css | 6 +- demo/src/App.js | 25 +- demo/src/_nav.js | 8 +- .../assets/img/brand/coreui-base-white.svg | 24 + demo/src/assets/img/brand/coreui-base.svg | 24 + .../img/brand/coreui-pro-base-white.svg | 24 + demo/src/assets/img/brand/coreui-pro-base.svg | 38 + .../assets/img/brand/coreui-signet-white.svg | 16 + demo/src/assets/img/brand/coreui-signet.svg | 16 + .../containers/DefaultLayout/DefaultAside.js | 287 + .../containers/DefaultLayout/DefaultFooter.js | 27 + .../containers/DefaultLayout/DefaultHeader.js | 139 + .../DefaultLayout/DefaultHeaderDropdown.js | 335 + .../containers/DefaultLayout/DefaultLayout.js | 271 +- .../DefaultLayout/DefaultSidebar.js | 108 + demo/src/index.js | 5 + demo/src/polyfill.js | 11 +- demo/src/scss/style.css | 24176 ++++++++-------- 18 files changed, 13495 insertions(+), 12045 deletions(-) create mode 100644 demo/src/assets/img/brand/coreui-base-white.svg create mode 100644 demo/src/assets/img/brand/coreui-base.svg create mode 100644 demo/src/assets/img/brand/coreui-pro-base-white.svg create mode 100644 demo/src/assets/img/brand/coreui-pro-base.svg create mode 100644 demo/src/assets/img/brand/coreui-signet-white.svg create mode 100644 demo/src/assets/img/brand/coreui-signet.svg create mode 100644 demo/src/containers/DefaultLayout/DefaultAside.js create mode 100644 demo/src/containers/DefaultLayout/DefaultFooter.js create mode 100644 demo/src/containers/DefaultLayout/DefaultHeader.js create mode 100644 demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js create mode 100644 demo/src/containers/DefaultLayout/DefaultSidebar.js diff --git a/demo/src/App.css b/demo/src/App.css index 8b137891..9ba0d01b 100644 --- a/demo/src/App.css +++ b/demo/src/App.css @@ -1 +1,5 @@ - +/*Styles*/ +/*CoreUI Icons Set*/ +@import '~@coreui/icons/css/all.css'; +/*Import Flag Icons Set*/ +@import './scss/style.css'; diff --git a/demo/src/App.js b/demo/src/App.js index c052da42..82d44ee6 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -1,31 +1,24 @@ import React, { Component } from 'react'; import { HashRouter, Route, Switch } from 'react-router-dom'; import './App.css'; -// Styles -// CoreUI Icons Set -import '@coreui/icons/css/coreui-icons.min.css'; -// Import Flag Icons Set -// import 'flag-icon-css/css/flag-icon.min.css'; -// Import Font Awesome Icons Set -// import 'font-awesome/css/font-awesome.min.css'; -// Import Simple Line Icons Set -// import 'simple-line-icons/css/simple-line-icons.css'; -// Import Main styles for this application import './scss/style.css' -// import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss'; + +const loading = () =>
    ; // Containers -import Full from './containers/DefaultLayout/DefaultLayout.js'; +const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout/DefaultLayout')); -// import { renderRoutes } from 'react-router-config'; class App extends Component { + render() { return ( - - - + + + } /> + + ); } diff --git a/demo/src/_nav.js b/demo/src/_nav.js index 4f29b836..554c9277 100644 --- a/demo/src/_nav.js +++ b/demo/src/_nav.js @@ -3,7 +3,7 @@ export default { { name: 'Dashboard', url: '/dashboard', - icon: 'cui-speedometer icons', + icon: 'cil-speedometer', badge: { variant: 'info', text: 'NEW' @@ -12,13 +12,13 @@ export default { { name: 'Disabled', url: '/dashboard', - icon: 'cui-ban icons', + icon: 'cil-ban', attributes: { disabled: true }, }, { name: 'Download CoreUI', url: 'https://coreui.io/react/', - icon: 'cui-cloud-download icons', + icon: 'cil-cloud-download', class: 'mt-auto', variant: 'success', attributes: { target: '_blank', rel: "noopener" }, @@ -26,7 +26,7 @@ export default { { name: 'Try CoreUI PRO', url: 'https://coreui.io/pro/react/', - icon: 'cui-layers icons', + icon: 'cil-layers', variant: 'danger', attributes: { target: '_blank', rel: "noopener" }, }, diff --git a/demo/src/assets/img/brand/coreui-base-white.svg b/demo/src/assets/img/brand/coreui-base-white.svg new file mode 100644 index 00000000..047dbdf5 --- /dev/null +++ b/demo/src/assets/img/brand/coreui-base-white.svg @@ -0,0 +1,24 @@ + + + + + Base_negative + + + + + + + + + + + + + + + diff --git a/demo/src/assets/img/brand/coreui-base.svg b/demo/src/assets/img/brand/coreui-base.svg new file mode 100644 index 00000000..b452672b --- /dev/null +++ b/demo/src/assets/img/brand/coreui-base.svg @@ -0,0 +1,24 @@ + + + + + Base + + + + + + + + + + + + + + + diff --git a/demo/src/assets/img/brand/coreui-pro-base-white.svg b/demo/src/assets/img/brand/coreui-pro-base-white.svg new file mode 100644 index 00000000..c8c1125c --- /dev/null +++ b/demo/src/assets/img/brand/coreui-pro-base-white.svg @@ -0,0 +1,24 @@ + + + + + Base_PRO_negative + + + + + + + + + + + + + + + diff --git a/demo/src/assets/img/brand/coreui-pro-base.svg b/demo/src/assets/img/brand/coreui-pro-base.svg new file mode 100644 index 00000000..4ee07cb3 --- /dev/null +++ b/demo/src/assets/img/brand/coreui-pro-base.svg @@ -0,0 +1,38 @@ + + + + + Base_PRO_color + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/src/assets/img/brand/coreui-signet-white.svg b/demo/src/assets/img/brand/coreui-signet-white.svg new file mode 100644 index 00000000..ee9700dc --- /dev/null +++ b/demo/src/assets/img/brand/coreui-signet-white.svg @@ -0,0 +1,16 @@ + + + + + signet_white + + + + + + + diff --git a/demo/src/assets/img/brand/coreui-signet.svg b/demo/src/assets/img/brand/coreui-signet.svg new file mode 100644 index 00000000..278b33c3 --- /dev/null +++ b/demo/src/assets/img/brand/coreui-signet.svg @@ -0,0 +1,16 @@ + + + + + signet + + + + + + + diff --git a/demo/src/containers/DefaultLayout/DefaultAside.js b/demo/src/containers/DefaultLayout/DefaultAside.js new file mode 100644 index 00000000..43115660 --- /dev/null +++ b/demo/src/containers/DefaultLayout/DefaultAside.js @@ -0,0 +1,287 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import * as router from 'react-router-dom'; +import { + CNav, + CNavItem, + CNavLink, + CTabContent, + CTabPane, + CListGroup, + CListGroupItem, + CSwitch, + CProgress, + CSidebar, + CIcon, + CImg, + CBadge, + CSidebarClose +} from '../../../../src'; + +//logo +import logo from '../../assets/img/brand/coreui-pro-base.svg' +import sygnet from '../../assets/img/brand/coreui-signet.svg' + +// sidebar nav config +import navigation from '../../_nav'; + +class DefaultAside extends Component { + + constructor(props) { + super(props); + + this.toggleAsideTab = this.toggleAsideTab.bind(this); + this.state = { + activeAsideTab: 'timeline', + }; + } + + toggleAsideTab(name) { + this.setState({ + activeAsideTab: name + }); + } + + render() { + + const { + sidebarShow, + toggleAside, + ...attributes + } = this.props; + + const classesSidebar = classNames( + 'c-sidebar-dark' + ); + + return ( + + + + + { this.toggleAsideTab('timeline'); }}> + + + + + { this.toggleAsideTab('messages'); }}> + + + + + { this.toggleAsideTab('settings'); }}> + + + + + + toggleAside(e)} /> + + + + + + Today + +
    + +
    +
    Meeting with Lucas
    +  1 - 3pm +  Palo Alto, CA +     + +
    + +
    +
    Skype with Megan
    +   4 - 5pm +   On-line +     +
    + Tomorrow + +
    New UI Project - deadline
    + 10 - 11pm +  creativeLabs HQ +
    +
    +
    +
    +
    +
    +
    +     + +
    #10 Startups.Garden Meetup
    + 1 - 3pm + Palo Alto, CA +     + +
    Team meeting
    + 4 - 6pm + creativeLabs HQ +
    +
    +
    +
    +
    +
    +
    +
    +
    +     +     +     + + +
    +
    +
    + + +
    +
    +
    + Lukasz Holeczek + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +
    +
    +
    + + +
    +
    +
    + Lukasz Holeczek + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +
    +
    +
    + + +
    +
    +
    + Lukasz Holeczek + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +
    +
    +
    + + +
    +
    +
    + Lukasz Holeczek + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +
    +
    +
    + + +
    +
    +
    + Lukasz Holeczek + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +     + + +
    Settings
    +
    +
    Option 1 + +
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    +
    +
    +
    Option 2 + +
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    +
    +
    +
    Option 3 + +
    +
    +
    +
    Option 4 + +
    +
    +
    +
    System Utilization
    +
    CPU Usage
    + + 348 Processes. 1/4 Cores. +
    Memory Usage
    + + 11444GB/16384MB +
    SSD 1 Usage
    + + 243GB/256GB +
    SSD 2 Usage
    + + 25GB/256GB +     + +     +     + ); + } +} + +DefaultAside.propTypes = { + children: PropTypes.node, +}; + +DefaultAside.defaultProps = { +}; + +export default DefaultAside; diff --git a/demo/src/containers/DefaultLayout/DefaultFooter.js b/demo/src/containers/DefaultLayout/DefaultFooter.js new file mode 100644 index 00000000..4c68e460 --- /dev/null +++ b/demo/src/containers/DefaultLayout/DefaultFooter.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class DefaultFooter extends Component { + render() { + return ( + +
    + CoreUI + © 2019 creativeLabs. +
    +
    + Powered by + CoreUI for React +
    +     + ); + } +} + +DefaultFooter.propTypes = { + children: PropTypes.node, +}; + +DefaultFooter.defaultProps = {}; + +export default DefaultFooter; diff --git a/demo/src/containers/DefaultLayout/DefaultHeader.js b/demo/src/containers/DefaultLayout/DefaultHeader.js new file mode 100644 index 00000000..f95625c5 --- /dev/null +++ b/demo/src/containers/DefaultLayout/DefaultHeader.js @@ -0,0 +1,139 @@ +import React, { Component } from 'react'; +//import { NavLink } from 'react-router-dom'; +import * as router from 'react-router-dom'; +import { + CBadge, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CNav, + CNavItem, + CAsideToggler, + CHeaderDropdown, + CNavbarBrand, + CSidebarToggler, + CButton, + CNavbarNav, + CToggler, + CHeaderBrand, + CHeaderNav, + CHeaderNavItem, + CHeaderNavLink, + CHeaderSubheader, + CBreadcrumb, + CLink, + CIcon + } from '../../../../src'; +import PropTypes from 'prop-types'; + +// routes config +import routes from '../../routes'; + +//import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react'; +import DefaultHeaderDropdown from './DefaultHeaderDropdown' +import logo from '../../assets/img/brand/coreui-pro-base.svg' +import sygnet from '../../assets/img/brand/coreui-signet.svg' + +const propTypes = { + children: PropTypes.node, +}; + +const defaultProps = {}; + +class DefaultHeader extends Component { + render() { + + // eslint-disable-next-line + const { + toggleSidebarMobile, + toggleSidebar, + toggleAside, + toggleTheme, + children, + ...attributes + } = this.props; + + return ( + + + + + + + + + + + Dashboard + + + Users + + + Settings + + + + + + + + + + + + + toggleAside(e)} + > + + + + + + + + + + + + Dashboard + + + Settings + + + + + + ); + } +} + +DefaultHeader.propTypes = propTypes; +DefaultHeader.defaultProps = defaultProps; + +export default DefaultHeader; diff --git a/demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js b/demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js new file mode 100644 index 00000000..9bc21429 --- /dev/null +++ b/demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js @@ -0,0 +1,335 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { + CBadge, + CDropdown, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CProgress, + CIcon, + CImg, + CHeaderNavLink +} from '../../../../src'; + +import avatar7 from '../../assets/img/avatars/7.jpg' +import avatar6 from '../../assets/img/avatars/6.jpg' +import avatar5 from '../../assets/img/avatars/5.jpg' +import avatar4 from '../../assets/img/avatars/4.jpg' + +const propTypes = { + notif: PropTypes.bool, + accnt: PropTypes.bool, + tasks: PropTypes.bool, + mssgs: PropTypes.bool, +}; +const defaultProps = { + notif: false, + accnt: false, + tasks: false, + mssgs: false, +}; + +class DefaultHeaderDropdown extends Component { + + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + this.state = { + dropdownOpen: false, + }; + } + + toggle() { + this.setState({ + dropdownOpen: !this.state.dropdownOpen, + }); + } + + dropNotif() { + const itemsCount = 5; + return ( + + + {itemsCount} + + + + You have {itemsCount} notifications + + New user registered + User deleted + Sales report is ready + New client + Server overloaded + + Server + + +
    + CPU Usage +
    + + 348 Processes. 1/4 Cores. +     + +
    + Memory Usage +
    + + 11444GB/16384MB +     + +
    + SSD 1 Usage +
    + + 243GB/256GB +     +     +     + ); + } + + dropTasks() { + const itemsCount = 5; + return ( + + + {itemsCount} + + + + You have {itemsCount} pending tasks + + +
    Upgrade NPM & Bower 0%
    + +     + +
    ReactJS Version 25%
    + +     + +
    VueJS Version 50%
    + +     + +
    Add new layouts 75%
    + +     + +
    Angular 2 Cli Version 100%
    + +     + View all tasks +     +     + ); + } + + dropMssgs() { + const itemsCount = 4; + return ( + + + {itemsCount} + + + + You have {itemsCount} messages + + +
    +
    +
    + admin@bootstrapmaster.com + {/**/} + +
    +
    +
    + John Doe + Just now +
    +
    + Important message +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +     + + +
    +
    +
    + + +
    +
    +
    + Jane Dovve + 5 minutes ago +
    +
    Lorem ipsum dolor sit amet
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +     + + +
    +
    +
    + + +
    +
    +
    + Janet Doe + 1:52 PM +
    +
    Lorem ipsum dolor sit amet
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +     + + +
    +
    +
    + + +
    +
    +
    + Joe Doe + 4:03 AM +
    +
    Lorem ipsum dolor sit amet
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
    +
    +     + View all messages +     +     + ); + } + + dropAccnt() { + return ( + + +
    + +
    +     + + + Account + + Updates42 + Messages42 + Tasks42 + Comments42 + + Settings + + Profile + Settings + Payments42 + Projects42 + + Lock Account + Logout + {/* Logout*/} + +     + ); + } + + render() { + const { notif, accnt, tasks, mssgs } = this.props; + return ( + notif ? this.dropNotif() : + accnt ? this.dropAccnt() : + tasks ? this.dropTasks() : + mssgs ? this.dropMssgs() : null + ); + } +} + +DefaultHeaderDropdown.propTypes = propTypes; +DefaultHeaderDropdown.defaultProps = defaultProps; + +export default DefaultHeaderDropdown; diff --git a/demo/src/containers/DefaultLayout/DefaultLayout.js b/demo/src/containers/DefaultLayout/DefaultLayout.js index 6e66ad3d..dd458407 100644 --- a/demo/src/containers/DefaultLayout/DefaultLayout.js +++ b/demo/src/containers/DefaultLayout/DefaultLayout.js @@ -1,100 +1,201 @@ -import React, { Component } from 'react'; +import React, { Component, Suspense } from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import * as router from 'react-router-dom'; -import { Container, Nav, NavItem, NavLink, Badge, DropdownToggle, DropdownMenu } from 'reactstrap'; +import classNames from 'classnames'; import { - AppAside, - AppAsideToggler, - AppBreadcrumb2 as AppBreadcrumb, - AppFooter, - AppHeader, - AppHeaderDropdown, - AppNavbarBrand, - AppSidebar, - AppSidebarFooter, - AppSidebarForm, - AppSidebarHeader, - AppSidebarMinimizer, - // AppSidebarNav as AppSidebarNav, - AppSidebarNav2 as AppSidebarNav, - AppSidebarToggler, + CContainer, + CAside, + CFooter, + CHeader, + CSidebar, + CSidebarFooter, + CSidebarForm, + CSidebarHeader, + CSidebarMinimizer, + CBreadcrumb, + CSidebarNav, + CNav, + CTabContent, + CProgress, + CNavItem, + CNavLink, + CTabPane, + CListGroup, + CListGroupItem, + CSwitch, + CLabel, + CInput, + CSidebarBrand, + CSidebarDivider, + CSidebarTitle } from '../../../../src'; -// sidebar nav config -import navigation from '../../_nav.js'; + // routes config -import routes from '../../routes.js'; +import routes from '../../routes'; -import logo from '../../assets/img/brand/logo.svg' -import sygnet from '../../assets/img/brand/sygnet.svg' -import avatar from '../../assets/img/avatars/6.jpg' +const DefaultSidebar = React.lazy(() => import('./DefaultSidebar')); +const DefaultAside = React.lazy(() => import('./DefaultAside')); +const DefaultFooter = React.lazy(() => import('./DefaultFooter')); +const DefaultHeader = React.lazy(() => import('./DefaultHeader')); class DefaultLayout extends Component { + + constructor(props) { + super(props); + + this.toggleSidebar = this.toggleSidebar.bind(this); + this.toggleSidebarMobile = this.toggleSidebarMobile.bind(this); + this.minimizeSidebar = this.minimizeSidebar.bind(this); + this.closeSidebar = this.closeSidebar.bind(this); + this.toggleAside = this.toggleAside.bind(this); + this.toggleTheme = this.toggleTheme.bind(this); + this.state = { + isAsideOpen: false, + isSidebarOpen: 'responsive', + isSidebarMinimized: false, + themeDark: false, + sidebarMobile: false, + sidebarDisplay: 'sm' + }; + } + + loading = () =>
    ; + + signOut(e) { + e.preventDefault() + this.props.history.push('/login') + } + +/* +this.$root.$on('toggle-sidebar', () => { + const sidebarOpened = this.show === true || this.show === 'responsive' + this.show = sidebarOpened ? false : 'responsive' + }) + this.$root.$on('toggle-sidebar-mobile', () => { + const sidebarClosed = this.show === 'responsive' || this.show === false + this.show = sidebarClosed ? true : 'responsive' + }) + */ + + toggleSidebar(display, mobile) { + //alert('sidebar') + const sidebarOpened = this.state.isSidebarOpen === true || this.state.isSidebarOpen === 'responsive' + this.setState({ + isSidebarOpen: sidebarOpened ? false : 'responsive', + }); + /* + this.setState({ + isSidebarOpen: this.state.isSidebarOpen ? false : 'responsive', + sidebarDisplay: display ? true : false, + sidebarMobile: mobile ? true : false + }); + */ + } + + toggleSidebarMobile(display, mobile) { + const sidebarClosed = this.state.isSidebarOpen === 'responsive' || this.state.isSidebarOpen === false + //alert('sidebarMobile '+(sidebarClosed ? true : 'responsive')) + this.setState({ + isSidebarOpen: sidebarClosed ? true : 'responsive', + }); + /* + this.setState({ + isSidebarOpen: this.state.isSidebarOpen ? false : 'responsive', + sidebarDisplay: display ? true : false, + sidebarMobile: mobile ? true : false + }); + */ + } + + minimizeSidebar() { + this.setState({ + isSidebarMinimized: !this.state.isSidebarMinimized + }); + } + + closeSidebar() { + this.setState({ + isSidebarOpen: 'responsive', + }); + } + + toggleAside(e) { + e.preventDefault(); + this.setState({ + isAsideOpen: !this.state.isAsideOpen + }); + } + + toggleTheme() { + this.setState({ + themeDark: !this.state.themeDark + }); + } + render() { + + // dark theme + const classes = classNames( + 'c-app c-default-layout', + this.state.themeDark ? 'c-dark-theme' : false + ); + return ( -
    - - - - - - - - -
    - - - - {/**/} - - - - -
    - {/**/} - - - - {routes.map((route, idx) => { - return route.component ? ( ( - - )} />) - : (null); - }, - )} - - - -
    - - Aside - +
    + + +
    + + + this.signOut(e)} + toggleSidebar={this.toggleSidebar} + toggleSidebarMobile={this.toggleSidebarMobile} + toggleAside={this.toggleAside} + toggleTheme={this.toggleTheme} + /> + + +
    +
    + + + + {routes.map((route, idx) => { + return route.component ? ( + ( + + )} /> + ) : (null); + })} + + + + +
    +
    - - CoreUI © 2019 creativeLabs - Powered by CoreUI for React - + + + + +
    ); } diff --git a/demo/src/containers/DefaultLayout/DefaultSidebar.js b/demo/src/containers/DefaultLayout/DefaultSidebar.js new file mode 100644 index 00000000..b0dc8401 --- /dev/null +++ b/demo/src/containers/DefaultLayout/DefaultSidebar.js @@ -0,0 +1,108 @@ +import React, { Component, Suspense } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import * as router from 'react-router-dom'; +import { + CSidebar, + CSidebarBrand, + CSidebarNav, + CSidebarNavDivider, + CSidebarNavTitle, + CNavItem, + CProgress, + CSidebarMinimizer, + CSidebarNavItem, + CSidebarNavDropdown +} from '../../../../src'; + +//logo +import logo from '../../assets/img/brand/coreui-pro-base.svg' +import sygnet from '../../assets/img/brand/coreui-signet.svg' + +// sidebar nav config +import navigation from '../../_nav'; + +class DefaultSidebar extends Component { + + constructor(props) { + super(props); + + this.state = { + activeTab: '1', + minimize: props.sidebarMinimize, + k: 2 + }; + this.lastSidebarMinimize = props.sidebarMinimize; + } + + render() { + + const { + sidebarShow, + sidebarMinimize, + onChange, + + sidebarDisplay,// + sidebarMobile,// + location, + ...attributes + } = this.props; + + const classesSidebar = classNames( + 'c-sidebar-dark' + ); + + if (sidebarMinimize!=this.lastSidebarMinimize){ + this.state.minimize = sidebarMinimize; + this.lastSidebarMinimize = sidebarMinimize; + } + + //alert(sidebarShow) + + return ( + + + + + + System Utilization + +
    CPU Usage
    + + 348 Processes. 1/4 Cores. +     + +
    Memory Usage
    + + 11444GB/16384MB +     + +
    SSD 1 Usage
    + + 243GB/256GB +     +     +     + {this.setState({minimize: !this.state.minimize})}} /> +     + ); + } +} + +DefaultSidebar.propTypes = { + children: PropTypes.node, +}; + +DefaultSidebar.defaultProps = { +}; + +export default DefaultSidebar; diff --git a/demo/src/index.js b/demo/src/index.js index a2fbd4a5..2d02d78c 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -1,9 +1,14 @@ import './polyfill' import React from 'react'; import ReactDOM from 'react-dom'; +import './index.css'; import App from './App'; // import registerServiceWorker from './registerServiceWorker'; +import {freeSet, flagSet, brandSet} from '@coreui/icons'; + +React.icons = {...freeSet, ...flagSet, ...brandSet} + ReactDOM.render(, document.querySelector('#demo')) // ReactDOM.render(, document.getElementById('root')); // registerServiceWorker(); diff --git a/demo/src/polyfill.js b/demo/src/polyfill.js index 4826bf56..3a7313a7 100644 --- a/demo/src/polyfill.js +++ b/demo/src/polyfill.js @@ -1,6 +1,9 @@ /* * required polyfills */ +// import 'react-app-polyfill/ie9'; // For IE 9-11 support +import 'react-app-polyfill/ie11'; // For IE 11 support +import 'react-app-polyfill/stable'; /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol' @@ -12,12 +15,12 @@ // import 'core-js/es6/math' // import 'core-js/es6/string' // import 'core-js/es6/date' -import 'core-js/es6/array' +// import 'core-js/es6/array' // import 'core-js/es6/regexp' -import 'core-js/es6/map' +// import 'core-js/es6/map' // import 'core-js/es6/weak-map' -import 'core-js/es6/set' -import 'core-js/es7/object' +// import 'core-js/es6/set' +// import 'core-js/es7/object' /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect' diff --git a/demo/src/scss/style.css b/demo/src/scss/style.css index bee40e2f..47416c28 100644 --- a/demo/src/scss/style.css +++ b/demo/src/scss/style.css @@ -1,40 +1,20 @@ @charset "UTF-8"; /*! - * CoreUI - Open Source Dashboard UI Kit - * @version v2.1.12 - * @link https://coreui.io - * Copyright (c) 2018 creativeLabs Łukasz Holeczek - * Licensed under MIT (https://coreui.io/license) - */ -/*! - * Bootstrap v4.3.1 (https://getbootstrap.com/) - * Copyright 2011-2019 The Bootstrap Authors - * Copyright 2011-2019 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * CoreUI Open Source UI Kit + * @version v3.0.0-rc.3 + * @link https://coreui.io/ + * Copyright (c) 2020 creativeLabs Łukasz Holeczek + License MIT (https://coreui.io/) */ :root { - --blue: #20a8d8; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #f86c6b; - --orange: #f8cb00; - --yellow: #ffc107; - --green: #4dbd74; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #73818f; - --gray-dark: #2f353a; - --light-blue: #63c2de; - --primary: #20a8d8; - --secondary: #c8ced3; - --success: #4dbd74; - --info: #63c2de; - --warning: #ffc107; - --danger: #f86c6b; - --light: #f0f3f5; - --dark: #2f353a; + --primary: #321fdb; + --secondary: #ced2d8; + --success: #2eb85c; + --info: #39f; + --warning: #f9b115; + --danger: #e55353; + --light: #ebedef; + --dark: #636f83; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; @@ -54,7 +34,7 @@ html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 21, 0); } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { @@ -67,12 +47,25 @@ body { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #23282c; text-align: left; - background-color: #e4e5e6; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +body,.c-app { + color: #3c4b64; + background-color: #ebedef; +} + +.c-app { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; } -[tabindex="-1"]:focus { +[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } @@ -80,6 +73,10 @@ hr { box-sizing: content-box; height: 0; overflow: visible; + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid rgba(0, 0, 21, 0.2); } h1, h2, h3, h4, h5, h6 { @@ -104,16 +101,20 @@ abbr[data-original-title] { } address { - margin-bottom: 1rem; font-style: normal; line-height: inherit; } +address,ol, +ul, +dl { + margin-bottom: 1rem; +} + ol, ul, dl { margin-top: 0; - margin-bottom: 1rem; } ol ol, @@ -129,9 +130,16 @@ dt { dd { margin-bottom: .5rem; +} + +html:not([dir="rtl"]) dd { margin-left: 0; } +*[dir="rtl"] dd { + margin-right: 0; +} + blockquote { margin: 0 0 1rem; } @@ -162,30 +170,23 @@ sup { } a { - color: #20a8d8; text-decoration: none; background-color: transparent; } -a:hover { - color: #167495; - text-decoration: underline; +a,a:hover { + color: #321fdb; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; +a:hover { + text-decoration: underline; } -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { +a:not([href]),a:not([href]):hover { color: inherit; text-decoration: none; } -a:not([href]):not([tabindex]):focus { - outline: 0; -} - pre, code, kbd, @@ -198,6 +199,9 @@ pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; + display: block; + font-size: 87.5%; + color: #4f5d73; } figure { @@ -205,13 +209,15 @@ figure { } img { - vertical-align: middle; border-style: none; } +img,svg { + vertical-align: middle; +} + svg { overflow: hidden; - vertical-align: middle; } table { @@ -221,7 +227,7 @@ table { caption { padding-top: 0.75rem; padding-bottom: 0.75rem; - color: #73818f; + color: #768192; text-align: left; caption-side: bottom; } @@ -368,16029 +374,16329 @@ template { display: none !important; } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - margin-bottom: 0.5rem; - font-weight: 500; - line-height: 1.2; +.ps { + overflow: hidden !important; + -ms-touch-action: auto; + touch-action: auto; + -ms-overflow-style: none; + overflow-anchor: none; } -h1, .h1 { - font-size: 2.1875rem; +.ps__rail-x { + bottom: 0; + height: 15px; } -h2, .h2 { - font-size: 1.75rem; +.ps__rail-x,.ps__rail-y { + position: absolute; + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; } -h3, .h3 { - font-size: 1.53125rem; +.ps__rail-y { + width: 15px; } -h4, .h4 { - font-size: 1.3125rem; +html:not([dir="rtl"]) .ps__rail-y { + right: 0; } -h5, .h5 { - font-size: 1.09375rem; +*[dir="rtl"] .ps__rail-y { + left: 0; } -h6, .h6 { - font-size: 0.875rem; +.ps--active-x > .ps__rail-x, +.ps--active-y > .ps__rail-y { + display: block; + background-color: transparent; } -.lead { - font-size: 1.09375rem; - font-weight: 300; +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: .6; } -.display-1 { - font-size: 6rem; - font-weight: 300; - line-height: 1.2; +.ps__rail-x:hover, +.ps__rail-y:hover, +.ps__rail-x:focus, +.ps__rail-y:focus { + background-color: #eee; + opacity: .9; } -.display-2 { - font-size: 5.5rem; - font-weight: 300; - line-height: 1.2; +/* + * Scrollbar thumb styles + */ +.ps__thumb-x { + bottom: 2px; + height: 6px; + transition: background-color .2s linear, height .2s ease-in-out; } -.display-3 { - font-size: 4.5rem; - font-weight: 300; - line-height: 1.2; +.ps__thumb-x,.ps__thumb-y { + position: absolute; + background-color: #aaa; + border-radius: 6px; } -.display-4 { - font-size: 3.5rem; - font-weight: 300; - line-height: 1.2; +.ps__thumb-y { + width: 6px; + transition: background-color .2s linear, width .2s ease-in-out; } -hr { - margin-top: 1rem; - margin-bottom: 1rem; - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); +html:not([dir="rtl"]) .ps__thumb-y { + right: 2px; } -small, -.small { - font-size: 80%; - font-weight: 400; +*[dir="rtl"] .ps__thumb-y { + left: 2px; } -mark, -.mark { - padding: 0.2em; - background-color: #fcf8e3; +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x { + height: 11px; + background-color: #999; } -.list-unstyled { - padding-left: 0; - list-style: none; +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y { + width: 11px; + background-color: #999; } -.list-inline { - padding-left: 0; - list-style: none; +@supports (-ms-overflow-style: none) { + .ps { + overflow: auto !important; + } } -.list-inline-item { - display: inline-block; +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps { + overflow: auto !important; + } } -.list-inline-item:not(:last-child) { - margin-right: 0.5rem; +.alert { + position: relative; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: 0.25rem; } -.initialism { - font-size: 90%; - text-transform: uppercase; +.alert-heading { + color: inherit; } -.blockquote { - margin-bottom: 1rem; - font-size: 1.09375rem; +.alert-link { + font-weight: 700; } -.blockquote-footer { - display: block; - font-size: 80%; - color: #73818f; +html:not([dir="rtl"]) .alert-dismissible { + padding-right: 3.8125rem; } -.blockquote-footer::before { - content: "\2014\00A0"; +*[dir="rtl"] .alert-dismissible { + padding-left: 3.8125rem; } -.img-fluid { - max-width: 100%; - height: auto; +.alert-dismissible .close { + position: absolute; + top: 0; + padding: 0.75rem 1.25rem; + color: inherit; } -.img-thumbnail { - padding: 0.25rem; - background-color: #e4e5e6; - border: 1px solid #c8ced3; - border-radius: 0.25rem; - max-width: 100%; - height: auto; +html:not([dir="rtl"]) .alert-dismissible .close { + right: 0; } -.figure { - display: inline-block; +*[dir="rtl"] .alert-dismissible .close { + left: 0; } -.figure-img { - margin-bottom: 0.5rem; - line-height: 1; +.alert-primary { + color: #1a107c; + background-color: #d6d2f8; + border-color: #c6c0f5; } -.figure-caption { - font-size: 90%; - color: #73818f; +.alert-primary hr { + border-top-color: #b2aaf2; } -code { - font-size: 87.5%; - color: #e83e8c; - word-break: break-word; +.alert-primary .alert-link { + color: #110a4f; } -a > code { - color: inherit; +.alert-secondary { + color: #6b6d7a; + background-color: #f5f6f7; + border-color: #f1f2f4; } -kbd { - padding: 0.2rem 0.4rem; - font-size: 87.5%; - color: #fff; - background-color: #23282c; - border-radius: 0.2rem; +.alert-secondary hr { + border-top-color: #e3e5e9; } -kbd kbd { - padding: 0; - font-size: 100%; - font-weight: 700; +.alert-secondary .alert-link { + color: #53555f; } -pre { - display: block; - font-size: 87.5%; - color: #23282c; +.alert-success { + color: #18603a; + background-color: #d5f1de; + border-color: #c4ebd1; } -pre code { - font-size: inherit; - color: inherit; - word-break: normal; +.alert-success hr { + border-top-color: #b1e5c2; } -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; +.alert-success .alert-link { + color: #0e3721; } -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; +.alert-info { + color: #1b508f; + background-color: #d6ebff; + border-color: #c6e2ff; } -@media (min-width: 576px) { - .container { - max-width: 540px; - } +.alert-info hr { + border-top-color: #add5ff; } -@media (min-width: 768px) { - .container { - max-width: 720px; - } +.alert-info .alert-link { + color: #133864; } -@media (min-width: 992px) { - .container { - max-width: 960px; - } +.alert-warning { + color: #815c15; + background-color: #feefd0; + border-color: #fde9bd; } -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } +.alert-warning hr { + border-top-color: #fce1a4; } -.container-fluid { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; +.alert-warning .alert-link { + color: #553d0e; } -.row { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; +.alert-danger { + color: #772b35; + background-color: #fadddd; + border-color: #f8cfcf; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.alert-danger hr { + border-top-color: #f5b9b9; } -.no-gutters > .col, -.no-gutters > [class*="col-"] { - padding-right: 0; - padding-left: 0; +.alert-danger .alert-link { + color: #521d24; } -.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, -.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, -.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, -.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, -.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, -.col-xl-auto { +.alert-light { + color: #7a7b86; + background-color: #fbfbfc; + border-color: #f9fafb; +} + +.alert-light hr { + border-top-color: #eaedf1; +} + +.alert-light .alert-link { + color: #62626b; +} + +.alert-dark { + color: #333a4e; + background-color: #e0e2e6; + border-color: #d3d7dc; +} + +.alert-dark hr { + border-top-color: #c5cad1; +} + +.alert-dark .alert-link { + color: #1f232f; +} + +.c-avatar { position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 50em; + width: 36px; + height: 36px; + font-size: 14.4px; +} + +.c-avatar .c-avatar-status { + width: 10px; + height: 10px; +} + +.c-avatar-img { width: 100%; - padding-right: 15px; - padding-left: 15px; + height: auto; + border-radius: 50em; } -.col { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; +.c-avatar-status { + position: absolute; + bottom: 0; + display: block; + border: 1px solid #fff; + border-radius: 50em; } -.col-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: 100%; +html:not([dir="rtl"]) .c-avatar-status { + right: 0; } -.col-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; +*[dir="rtl"] .c-avatar-status { + left: 0; } -.col-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; +.c-avatar-sm { + width: 24px; + height: 24px; + font-size: 9.6px; } -.col-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; +.c-avatar-sm .c-avatar-status { + width: 8px; + height: 8px; } -.col-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; +.c-avatar-lg { + width: 48px; + height: 48px; + font-size: 19.2px; } -.col-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; +.c-avatar-lg .c-avatar-status { + width: 12px; + height: 12px; } -.col-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; +.c-avatar-xl { + width: 64px; + height: 64px; + font-size: 25.6px; } -.col-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; +.c-avatar-xl .c-avatar-status { + width: 14px; + height: 14px; } -.col-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; +.c-avatars-stack { + display: -ms-flexbox; + display: flex; } -.col-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; +.c-avatars-stack .c-avatar { + margin-right: -18px; + transition: margin-right 0.25s; } -.col-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; +.c-avatars-stack .c-avatar:hover { + margin-right: 0; } -.col-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; +.c-avatars-stack .c-avatar-sm { + margin-right: -12px; } -.col-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; +.c-avatars-stack .c-avatar-lg { + margin-right: -24px; } -.order-first { - -ms-flex-order: -1; - order: -1; +.c-avatars-stack .c-avatar-xl { + margin-right: -32px; } -.order-last { - -ms-flex-order: 13; - order: 13; +.c-avatar-rounded { + border-radius: 0.25rem; } -.order-0 { - -ms-flex-order: 0; - order: 0; +.c-avatar-square { + border-radius: 0; } -.order-1 { - -ms-flex-order: 1; - order: 1; +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -.order-2 { - -ms-flex-order: 2; - order: 2; +@media (prefers-reduced-motion: reduce) { + .badge { + transition: none; + } } -.order-3 { - -ms-flex-order: 3; - order: 3; +a.badge:hover, a.badge:focus { + text-decoration: none; } -.order-4 { - -ms-flex-order: 4; - order: 4; +.badge:empty { + display: none; } -.order-5 { - -ms-flex-order: 5; - order: 5; +.btn .badge { + position: relative; + top: -1px; } -.order-6 { - -ms-flex-order: 6; - order: 6; +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; } -.order-7 { - -ms-flex-order: 7; - order: 7; +.badge-primary { + color: #fff; + background-color: #321fdb; } -.order-8 { - -ms-flex-order: 8; - order: 8; +a.badge-primary:hover, a.badge-primary:focus { + color: #fff; + background-color: #2819ae; } -.order-9 { - -ms-flex-order: 9; - order: 9; +a.badge-primary:focus, a.badge-primary.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.5); } -.order-10 { - -ms-flex-order: 10; - order: 10; +.badge-secondary { + color: #4f5d73; + background-color: #ced2d8; } -.order-11 { - -ms-flex-order: 11; - order: 11; +a.badge-secondary:hover, a.badge-secondary:focus { + color: #4f5d73; + background-color: #b2b8c1; } -.order-12 { - -ms-flex-order: 12; - order: 12; +a.badge-secondary:focus, a.badge-secondary.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5); } -.offset-1 { - margin-left: 8.333333%; +.badge-success { + color: #fff; + background-color: #2eb85c; } -.offset-2 { - margin-left: 16.666667%; +a.badge-success:hover, a.badge-success:focus { + color: #fff; + background-color: #248f48; } -.offset-3 { - margin-left: 25%; +a.badge-success:focus, a.badge-success.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.5); } -.offset-4 { - margin-left: 33.333333%; +.badge-info { + color: #fff; + background-color: #39f; } -.offset-5 { - margin-left: 41.666667%; +a.badge-info:hover, a.badge-info:focus { + color: #fff; + background-color: #0080ff; } -.offset-6 { - margin-left: 50%; +a.badge-info:focus, a.badge-info.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(51, 153, 255, 0.5); } -.offset-7 { - margin-left: 58.333333%; +.badge-warning { + color: #4f5d73; + background-color: #f9b115; } -.offset-8 { - margin-left: 66.666667%; +a.badge-warning:hover, a.badge-warning:focus { + color: #4f5d73; + background-color: #d69405; } -.offset-9 { - margin-left: 75%; +a.badge-warning:focus, a.badge-warning.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(249, 177, 21, 0.5); } -.offset-10 { - margin-left: 83.333333%; +.badge-danger { + color: #fff; + background-color: #e55353; } -.offset-11 { - margin-left: 91.666667%; +a.badge-danger:hover, a.badge-danger:focus { + color: #fff; + background-color: #de2727; } -@media (min-width: 576px) { - .col-sm { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-sm-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-sm-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-sm-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-sm-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-sm-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-sm-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-sm-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-sm-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - -ms-flex-order: -1; - order: -1; - } - .order-sm-last { - -ms-flex-order: 13; - order: 13; - } - .order-sm-0 { - -ms-flex-order: 0; - order: 0; - } - .order-sm-1 { - -ms-flex-order: 1; - order: 1; - } - .order-sm-2 { - -ms-flex-order: 2; - order: 2; - } - .order-sm-3 { - -ms-flex-order: 3; - order: 3; - } - .order-sm-4 { - -ms-flex-order: 4; - order: 4; - } - .order-sm-5 { - -ms-flex-order: 5; - order: 5; - } - .order-sm-6 { - -ms-flex-order: 6; - order: 6; - } - .order-sm-7 { - -ms-flex-order: 7; - order: 7; - } - .order-sm-8 { - -ms-flex-order: 8; - order: 8; - } - .order-sm-9 { - -ms-flex-order: 9; - order: 9; - } - .order-sm-10 { - -ms-flex-order: 10; - order: 10; - } - .order-sm-11 { - -ms-flex-order: 11; - order: 11; - } - .order-sm-12 { - -ms-flex-order: 12; - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.333333%; - } - .offset-sm-2 { - margin-left: 16.666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.333333%; - } - .offset-sm-5 { - margin-left: 41.666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.333333%; - } - .offset-sm-8 { - margin-left: 66.666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.333333%; - } - .offset-sm-11 { - margin-left: 91.666667%; - } +a.badge-danger:focus, a.badge-danger.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.5); } -@media (min-width: 768px) { - .col-md { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-md-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-md-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-md-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-md-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-md-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-md-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-md-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-md-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - -ms-flex-order: -1; - order: -1; - } - .order-md-last { - -ms-flex-order: 13; - order: 13; - } - .order-md-0 { - -ms-flex-order: 0; - order: 0; - } - .order-md-1 { - -ms-flex-order: 1; - order: 1; - } - .order-md-2 { - -ms-flex-order: 2; - order: 2; - } - .order-md-3 { - -ms-flex-order: 3; - order: 3; - } - .order-md-4 { - -ms-flex-order: 4; - order: 4; - } - .order-md-5 { - -ms-flex-order: 5; - order: 5; - } - .order-md-6 { - -ms-flex-order: 6; - order: 6; - } - .order-md-7 { - -ms-flex-order: 7; - order: 7; - } - .order-md-8 { - -ms-flex-order: 8; - order: 8; - } - .order-md-9 { - -ms-flex-order: 9; - order: 9; - } - .order-md-10 { - -ms-flex-order: 10; - order: 10; - } - .order-md-11 { - -ms-flex-order: 11; - order: 11; - } - .order-md-12 { - -ms-flex-order: 12; - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.333333%; - } - .offset-md-2 { - margin-left: 16.666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.333333%; - } - .offset-md-5 { - margin-left: 41.666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.333333%; - } - .offset-md-8 { - margin-left: 66.666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.333333%; - } - .offset-md-11 { - margin-left: 91.666667%; - } +.badge-light { + color: #4f5d73; + background-color: #ebedef; } -@media (min-width: 992px) { - .col-lg { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-lg-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-lg-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-lg-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-lg-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-lg-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-lg-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-lg-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-lg-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - -ms-flex-order: -1; - order: -1; - } - .order-lg-last { - -ms-flex-order: 13; - order: 13; - } - .order-lg-0 { - -ms-flex-order: 0; - order: 0; - } - .order-lg-1 { - -ms-flex-order: 1; - order: 1; - } - .order-lg-2 { - -ms-flex-order: 2; - order: 2; - } - .order-lg-3 { - -ms-flex-order: 3; - order: 3; - } - .order-lg-4 { - -ms-flex-order: 4; - order: 4; - } - .order-lg-5 { - -ms-flex-order: 5; - order: 5; - } - .order-lg-6 { - -ms-flex-order: 6; - order: 6; - } - .order-lg-7 { - -ms-flex-order: 7; - order: 7; - } - .order-lg-8 { - -ms-flex-order: 8; - order: 8; - } - .order-lg-9 { - -ms-flex-order: 9; - order: 9; - } - .order-lg-10 { - -ms-flex-order: 10; - order: 10; - } - .order-lg-11 { - -ms-flex-order: 11; - order: 11; - } - .order-lg-12 { - -ms-flex-order: 12; - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.333333%; - } - .offset-lg-2 { - margin-left: 16.666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.333333%; - } - .offset-lg-5 { - margin-left: 41.666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.333333%; - } - .offset-lg-8 { - margin-left: 66.666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.333333%; - } - .offset-lg-11 { - margin-left: 91.666667%; - } +a.badge-light:hover, a.badge-light:focus { + color: #4f5d73; + background-color: #cfd4d8; } -@media (min-width: 1200px) { - .col-xl { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-xl-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-xl-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-xl-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-xl-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-xl-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-xl-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-xl-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-xl-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - -ms-flex-order: -1; - order: -1; - } - .order-xl-last { - -ms-flex-order: 13; - order: 13; - } - .order-xl-0 { - -ms-flex-order: 0; - order: 0; - } - .order-xl-1 { - -ms-flex-order: 1; - order: 1; - } - .order-xl-2 { - -ms-flex-order: 2; - order: 2; - } - .order-xl-3 { - -ms-flex-order: 3; - order: 3; - } - .order-xl-4 { - -ms-flex-order: 4; - order: 4; - } - .order-xl-5 { - -ms-flex-order: 5; - order: 5; - } - .order-xl-6 { - -ms-flex-order: 6; - order: 6; - } - .order-xl-7 { - -ms-flex-order: 7; - order: 7; - } - .order-xl-8 { - -ms-flex-order: 8; - order: 8; - } - .order-xl-9 { - -ms-flex-order: 9; - order: 9; - } - .order-xl-10 { - -ms-flex-order: 10; - order: 10; - } - .order-xl-11 { - -ms-flex-order: 11; - order: 11; - } - .order-xl-12 { - -ms-flex-order: 12; - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.333333%; - } - .offset-xl-2 { - margin-left: 16.666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.333333%; - } - .offset-xl-5 { - margin-left: 41.666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.333333%; - } - .offset-xl-8 { - margin-left: 66.666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.333333%; - } - .offset-xl-11 { - margin-left: 91.666667%; - } -} - -.table { - width: 100%; - margin-bottom: 1rem; - color: #23282c; -} - -.table th, -.table td { - padding: 0.75rem; - vertical-align: top; - border-top: 1px solid #c8ced3; +a.badge-light:focus, a.badge-light.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(235, 237, 239, 0.5); } -.table thead th { - vertical-align: bottom; - border-bottom: 2px solid #c8ced3; +.badge-dark { + color: #fff; + background-color: #636f83; } -.table tbody + tbody { - border-top: 2px solid #c8ced3; +a.badge-dark:hover, a.badge-dark:focus { + color: #fff; + background-color: #4d5666; } -.table-sm th, -.table-sm td { - padding: 0.3rem; +a.badge-dark:focus, a.badge-dark.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(99, 111, 131, 0.5); } -.table-bordered { - border: 1px solid #c8ced3; +html:not([dir="rtl"]) .breadcrumb-menu { + margin-left: auto; + margin-right: auto; } -.table-bordered th, -.table-bordered td { - border: 1px solid #c8ced3; +.breadcrumb-menu::before { + display: none; } -.table-bordered thead th, -.table-bordered thead td { - border-bottom-width: 2px; +.breadcrumb-menu .btn-group,.breadcrumb-menu .btn { + vertical-align: top; } -.table-borderless th, -.table-borderless td, -.table-borderless thead th, -.table-borderless tbody + tbody { +.breadcrumb-menu .btn { + padding: 0 0.75rem; + color: #768192; border: 0; } -.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.05); +.breadcrumb-menu .btn:hover, .breadcrumb-menu .btn.active,.breadcrumb-menu .show .btn { + color: #4f5d73; + background: transparent; } -.table-hover tbody tr:hover { - color: #23282c; - background-color: rgba(0, 0, 0, 0.075); +.breadcrumb-menu .dropdown-menu { + min-width: 180px; + line-height: 1.5; } -.table-primary, -.table-primary > th, -.table-primary > td { - background-color: #c1e7f4; +.breadcrumb { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin-bottom: 1.5rem; + list-style: none; + border-radius: 0; + border-bottom: 1px solid; + background-color: transparent; + border-color: #d8dbe0; } -.table-primary th, -.table-primary td, -.table-primary thead th, -.table-primary tbody + tbody { - border-color: #8bd2eb; +html:not([dir="rtl"]) .breadcrumb-item + .breadcrumb-item { + padding-left: 0.5rem; } -.table-hover .table-primary:hover { - background-color: #abdff0; +*[dir="rtl"] .breadcrumb-item + .breadcrumb-item { + padding-right: 0.5rem; } -.table-hover .table-primary:hover > td, -.table-hover .table-primary:hover > th { - background-color: #abdff0; +.breadcrumb-item + .breadcrumb-item::before { + display: inline-block; + color: #8a93a2; + content: "/"; } -.table-secondary, -.table-secondary > th, -.table-secondary > td { - background-color: #f0f1f3; +html:not([dir="rtl"]) .breadcrumb-item + .breadcrumb-item::before { + padding-right: 0.5rem; } -.table-secondary th, -.table-secondary td, -.table-secondary thead th, -.table-secondary tbody + tbody { - border-color: #e2e6e8; +*[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { + padding-left: 0.5rem; } -.table-hover .table-secondary:hover { - background-color: #e2e4e8; +.breadcrumb-item + .breadcrumb-item:hover::before { + text-decoration: underline; + text-decoration: none; } -.table-hover .table-secondary:hover > td, -.table-hover .table-secondary:hover > th { - background-color: #e2e4e8; +.breadcrumb-item.active { + color: #8a93a2; } -.table-success, -.table-success > th, -.table-success > td { - background-color: #cdedd8; +.btn-group, +.btn-group-vertical { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; } -.table-success th, -.table-success td, -.table-success thead th, -.table-success tbody + tbody { - border-color: #a2ddb7; +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } -.table-hover .table-success:hover { - background-color: #bae6c9; +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover,.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 1; } -.table-hover .table-success:hover > td, -.table-hover .table-success:hover > th { - background-color: #bae6c9; +.btn-toolbar { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: start; + justify-content: flex-start; } -.table-info, -.table-info > th, -.table-info > td { - background-color: #d3eef6; +.btn-toolbar .input-group { + width: auto; } -.table-info th, -.table-info td, -.table-info thead th, -.table-info tbody + tbody { - border-color: #aedfee; +html:not([dir="rtl"]) .btn-group > .btn:not(:first-child), html:not([dir="rtl"]) +.btn-group > .btn-group:not(:first-child) { + margin-left: -1px; } -.table-hover .table-info:hover { - background-color: #bee6f2; +*[dir="rtl"] .btn-group > .btn:not(:first-child), *[dir="rtl"] +.btn-group > .btn-group:not(:first-child) { + margin-right: -1px; } -.table-hover .table-info:hover > td, -.table-hover .table-info:hover > th { - background-color: #bee6f2; +html:not([dir="rtl"]) .btn-group > .btn:not(:last-child):not(.dropdown-toggle), +html:not([dir="rtl"]) .btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.table-warning, -.table-warning > th, -.table-warning > td { - background-color: #ffeeba; +html:not([dir="rtl"]) .btn-group > .btn:not(:first-child), +html:not([dir="rtl"]) .btn-group > .btn-group:not(:first-child) > .btn,*[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle), +*[dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.table-warning th, -.table-warning td, -.table-warning thead th, -.table-warning tbody + tbody { - border-color: #ffdf7e; +*[dir="rtl"] .btn-group > .btn:not(:first-child), +*[dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.table-hover .table-warning:hover { - background-color: #ffe8a1; +.dropdown-toggle-split { + padding-right: 0.5625rem; + padding-left: 0.5625rem; } -.table-hover .table-warning:hover > td, -.table-hover .table-warning:hover > th { - background-color: #ffe8a1; +html:not([dir="rtl"]) .dropdown-toggle-split::after, html:not([dir="rtl"]) +.dropup .dropdown-toggle-split::after, html:not([dir="rtl"]) +.dropright .dropdown-toggle-split::after { + margin-left: 0; } -.table-danger, -.table-danger > th, -.table-danger > td { - background-color: #fdd6d6; +*[dir="rtl"] .dropdown-toggle-split::after, *[dir="rtl"] +.dropup .dropdown-toggle-split::after, *[dir="rtl"] +.dropright .dropdown-toggle-split::after,html:not([dir="rtl"]) .dropleft .dropdown-toggle-split::before { + margin-right: 0; } -.table-danger th, -.table-danger td, -.table-danger thead th, -.table-danger tbody + tbody { - border-color: #fbb3b2; +*[dir="rtl"] .dropleft .dropdown-toggle-split::before { + margin-left: 0; } -.table-hover .table-danger:hover { - background-color: #fcbebe; +.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { + padding-right: 0.375rem; + padding-left: 0.375rem; } -.table-hover .table-danger:hover > td, -.table-hover .table-danger:hover > th { - background-color: #fcbebe; +.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { + padding-right: 0.75rem; + padding-left: 0.75rem; } -.table-light, -.table-light > th, -.table-light > td { - background-color: #fbfcfc; +.btn-group-vertical { + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-pack: center; + justify-content: center; } -.table-light th, -.table-light td, -.table-light thead th, -.table-light tbody + tbody { - border-color: #f7f9fa; +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { + width: 100%; } -.table-hover .table-light:hover { - background-color: #ecf1f1; +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { + margin-top: -1px; } -.table-hover .table-light:hover > td, -.table-hover .table-light:hover > th { - background-color: #ecf1f1; +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } -.table-dark, -.table-dark > th, -.table-dark > td { - background-color: #c5c6c8; +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; } -.table-dark th, -.table-dark td, -.table-dark thead th, -.table-dark tbody + tbody { - border-color: #939699; +.btn-group-toggle > .btn, +.btn-group-toggle > .btn-group > .btn { + margin-bottom: 0; } -.table-hover .table-dark:hover { - background-color: #b8b9bc; +.btn-group-toggle > .btn input[type="radio"], +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; } -.table-hover .table-dark:hover > td, -.table-hover .table-dark:hover > th { - background-color: #b8b9bc; -} +.btn { + display: inline-block; + font-weight: 400; + color: #4f5d73; + text-align: center; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + line-height: 1.5; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} -.table-active, -.table-active > th, -.table-active > td { - background-color: rgba(0, 0, 0, 0.075); +.btn i, +.btn .c-icon { + width: 0.875rem; + height: 0.875rem; + margin: 0.21875rem 0; + height: 0.875rem; + margin: 0.21875rem 0; } -.table-hover .table-active:hover { - background-color: rgba(0, 0, 0, 0.075); +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } } -.table-hover .table-active:hover > td, -.table-hover .table-active:hover > th { - background-color: rgba(0, 0, 0, 0.075); +.btn:hover { + color: #4f5d73; + text-decoration: none; } -.table .thead-dark th { - color: #fff; - background-color: #2f353a; - border-color: #40484f; +.btn:focus, .btn.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.table .thead-light th { - color: #5c6873; - background-color: #e4e7ea; - border-color: #c8ced3; +.btn.disabled, .btn:disabled { + opacity: 0.65; } -.table-dark { +a.btn.disabled, +fieldset:disabled a.btn { + pointer-events: none; +} + +.btn-primary { color: #fff; - background-color: #2f353a; + background-color: #321fdb; + border-color: #321fdb; } -.table-dark th, -.table-dark td, -.table-dark thead th { - border-color: #40484f; +.btn-primary:hover,.btn-primary:focus, .btn-primary.focus { + color: #fff; + background-color: #2a1ab9; + border-color: #2819ae; } -.table-dark.table-bordered { - border: 0; +.btn-primary:focus, .btn-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(81, 65, 224, 0.5); } -.table-dark.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(255, 255, 255, 0.05); +.btn-primary.disabled, .btn-primary:disabled { + color: #fff; + background-color: #321fdb; + border-color: #321fdb; } -.table-dark.table-hover tbody tr:hover { +.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, +.show > .btn-primary.dropdown-toggle { color: #fff; - background-color: rgba(255, 255, 255, 0.075); + background-color: #2819ae; + border-color: #2517a3; } -@media (max-width: 575.98px) { - .table-responsive-sm { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-sm > .table-bordered { - border: 0; - } +.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(81, 65, 224, 0.5); } -@media (max-width: 767.98px) { - .table-responsive-md { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-md > .table-bordered { - border: 0; - } +.btn-secondary { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -@media (max-width: 991.98px) { - .table-responsive-lg { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-lg > .table-bordered { - border: 0; - } +.btn-secondary:hover,.btn-secondary:focus, .btn-secondary.focus { + color: #4f5d73; + background-color: #b9bec7; + border-color: #b2b8c1; } -@media (max-width: 1199.98px) { - .table-responsive-xl { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-xl > .table-bordered { - border: 0; - } +.btn-secondary:focus, .btn-secondary.focus { + box-shadow: 0 0 0 0.2rem rgba(187, 192, 201, 0.5); } -.table-responsive { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; +.btn-secondary.disabled, .btn-secondary:disabled { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -.table-responsive > .table-bordered { - border: 0; +.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle { + color: #4f5d73; + background-color: #b2b8c1; + border-color: #abb1bc; } -.form-control { - display: block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #5c6873; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #e4e7ea; - border-radius: 0.25rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, +.show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(187, 192, 201, 0.5); } -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } +.btn-success { + color: #fff; + background-color: #2eb85c; + border-color: #2eb85c; } -.form-control::-ms-expand { - background-color: transparent; - border: 0; +.btn-success:hover,.btn-success:focus, .btn-success.focus { + color: #fff; + background-color: #26994d; + border-color: #248f48; } -.form-control:focus { - color: #5c6873; - background-color: #fff; - border-color: #8ad4ee; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.btn-success:focus, .btn-success.focus { + box-shadow: 0 0 0 0.2rem rgba(77, 195, 116, 0.5); } -.form-control::-webkit-input-placeholder { - color: #73818f; - opacity: 1; +.btn-success.disabled, .btn-success:disabled { + color: #fff; + background-color: #2eb85c; + border-color: #2eb85c; } -.form-control::-moz-placeholder { - color: #73818f; - opacity: 1; +.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, +.show > .btn-success.dropdown-toggle { + color: #fff; + background-color: #248f48; + border-color: #218543; } -.form-control:-ms-input-placeholder { - color: #73818f; - opacity: 1; +.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, +.show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(77, 195, 116, 0.5); } -.form-control::-ms-input-placeholder { - color: #73818f; - opacity: 1; +.btn-info { + color: #fff; + background-color: #39f; + border-color: #39f; } -.form-control::placeholder { - color: #73818f; - opacity: 1; +.btn-info:hover,.btn-info:focus, .btn-info.focus { + color: #fff; + background-color: #0d86ff; + border-color: #0080ff; } -.form-control:disabled, .form-control[readonly] { - background-color: #e4e7ea; - opacity: 1; +.btn-info:focus, .btn-info.focus { + box-shadow: 0 0 0 0.2rem rgba(82, 168, 255, 0.5); } -select.form-control:focus::-ms-value { - color: #5c6873; - background-color: #fff; +.btn-info.disabled, .btn-info:disabled { + color: #fff; + background-color: #39f; + border-color: #39f; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, +.show > .btn-info.dropdown-toggle { + color: #fff; + background-color: #0080ff; + border-color: #0079f2; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.5; +.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, +.show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(82, 168, 255, 0.5); } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.btn-warning { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.btn-warning:hover,.btn-warning:focus, .btn-warning.focus { + color: #4f5d73; + background-color: #e29c06; + border-color: #d69405; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.5; - color: #23282c; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; +.btn-warning:focus, .btn-warning.focus { + box-shadow: 0 0 0 0.2rem rgba(224, 164, 35, 0.5); } -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.btn-warning.disabled, .btn-warning:disabled { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, +.show > .btn-warning.dropdown-toggle { + color: #4f5d73; + background-color: #d69405; + border-color: #c98b05; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, +.show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(224, 164, 35, 0.5); } -select.form-control[size], select.form-control[multiple] { - height: auto; +.btn-danger { + color: #fff; + background-color: #e55353; + border-color: #e55353; } -textarea.form-control { - height: auto; +.btn-danger:hover,.btn-danger:focus, .btn-danger.focus { + color: #fff; + background-color: #e03232; + border-color: #de2727; } -.form-group { - margin-bottom: 1rem; +.btn-danger:focus, .btn-danger.focus { + box-shadow: 0 0 0 0.2rem rgba(233, 109, 109, 0.5); } -.form-text { - display: block; - margin-top: 0.25rem; +.btn-danger.disabled, .btn-danger:disabled { + color: #fff; + background-color: #e55353; + border-color: #e55353; } -.form-row { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; +.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, +.show > .btn-danger.dropdown-toggle { + color: #fff; + background-color: #de2727; + border-color: #d82121; } -.form-row > .col, -.form-row > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; +.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, +.show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(233, 109, 109, 0.5); } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.btn-light { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; +.btn-light:hover,.btn-light:focus, .btn-light.focus { + color: #4f5d73; + background-color: #d6dade; + border-color: #cfd4d8; } -.form-check-input:disabled ~ .form-check-label { - color: #73818f; +.btn-light:focus, .btn-light.focus { + box-shadow: 0 0 0 0.2rem rgba(212, 215, 220, 0.5); } -.form-check-label { - margin-bottom: 0; +.btn-light.disabled, .btn-light:disabled { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -.form-check-inline { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; +.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, +.show > .btn-light.dropdown-toggle { + color: #4f5d73; + background-color: #cfd4d8; + border-color: #c8cdd3; } -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, +.show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(212, 215, 220, 0.5); } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #4dbd74; +.btn-dark { + color: #fff; + background-color: #636f83; + border-color: #636f83; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: .1rem; - font-size: 0.765625rem; - line-height: 1.5; +.btn-dark:hover,.btn-dark:focus, .btn-dark.focus { color: #fff; - background-color: rgba(77, 189, 116, 0.9); - border-radius: 0.25rem; + background-color: #535d6d; + border-color: #4d5666; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #4dbd74; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.375em + 0.1875rem); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +.btn-dark:focus, .btn-dark.focus { + box-shadow: 0 0 0 0.2rem rgba(122, 133, 150, 0.5); } -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #4dbd74; - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25); +.btn-dark.disabled, .btn-dark:disabled { + color: #fff; + background-color: #636f83; + border-color: #636f83; } -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, +.show > .btn-dark.dropdown-toggle { + color: #fff; + background-color: #4d5666; + border-color: #48505f; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); +.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, +.show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(122, 133, 150, 0.5); } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #4dbd74; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +.btn-transparent { + color: rgba(255, 255, 255, 0.8); } -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #4dbd74; - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25); +.btn-transparent:hover { + color: white; } -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.btn-outline-primary { + color: #321fdb; + border-color: #321fdb; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.btn-outline-primary:hover { + color: #fff; + background-color: #321fdb; + border-color: #321fdb; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #4dbd74; +.btn-outline-primary:focus, .btn-outline-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.5); } -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.btn-outline-primary.disabled, .btn-outline-primary:disabled { + color: #321fdb; + background-color: transparent; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #4dbd74; +.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, +.show > .btn-outline-primary.dropdown-toggle { + color: #fff; + background-color: #321fdb; + border-color: #321fdb; } -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #4dbd74; +.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.5); } -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; +.btn-outline-secondary { + color: #ced2d8; + border-color: #ced2d8; } -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #72cb91; - background-color: #72cb91; +.btn-outline-secondary:hover { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25); +.btn-outline-secondary:focus, .btn-outline-secondary.focus { + box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5); } -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #4dbd74; +.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { + color: #ced2d8; + background-color: transparent; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #4dbd74; +.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, +.show > .btn-outline-secondary.dropdown-toggle { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; +.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5); } -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #4dbd74; - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25); +.btn-outline-success { + color: #2eb85c; + border-color: #2eb85c; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f86c6b; +.btn-outline-success:hover { + color: #fff; + background-color: #2eb85c; + border-color: #2eb85c; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: .1rem; - font-size: 0.765625rem; - line-height: 1.5; - color: #fff; - background-color: rgba(248, 108, 107, 0.9); - border-radius: 0.25rem; +.btn-outline-success:focus, .btn-outline-success.focus { + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.5); } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f86c6b; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.375em + 0.1875rem); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +.btn-outline-success.disabled, .btn-outline-success:disabled { + color: #2eb85c; + background-color: transparent; } -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f86c6b; - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25); +.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, +.show > .btn-outline-success.dropdown-toggle { + color: #fff; + background-color: #2eb85c; + border-color: #2eb85c; } -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.5); } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); +.btn-outline-info { + color: #39f; + border-color: #39f; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f86c6b; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +.btn-outline-info:hover { + color: #fff; + background-color: #39f; + border-color: #39f; } -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f86c6b; - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25); +.btn-outline-info:focus, .btn-outline-info.focus { + box-shadow: 0 0 0 0.2rem rgba(51, 153, 255, 0.5); } -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-info.disabled, .btn-outline-info:disabled { + color: #39f; + background-color: transparent; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, +.show > .btn-outline-info.dropdown-toggle { + color: #fff; + background-color: #39f; + border-color: #39f; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f86c6b; +.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(51, 153, 255, 0.5); } -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-warning { + color: #f9b115; + border-color: #f9b115; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f86c6b; +.btn-outline-warning:hover { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f86c6b; +.btn-outline-warning:focus, .btn-outline-warning.focus { + box-shadow: 0 0 0 0.2rem rgba(249, 177, 21, 0.5); } -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-warning.disabled, .btn-outline-warning:disabled { + color: #f9b115; + background-color: transparent; } -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #fa9c9c; - background-color: #fa9c9c; +.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, +.show > .btn-outline-warning.dropdown-toggle { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25); +.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(249, 177, 21, 0.5); } -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f86c6b; +.btn-outline-danger { + color: #e55353; + border-color: #e55353; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f86c6b; +.btn-outline-danger:hover { + color: #fff; + background-color: #e55353; + border-color: #e55353; } -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; +.btn-outline-danger:focus, .btn-outline-danger.focus { + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.5); } -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f86c6b; - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25); +.btn-outline-danger.disabled, .btn-outline-danger:disabled { + color: #e55353; + background-color: transparent; } -.form-inline { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -ms-flex-align: center; - align-items: center; +.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, +.show > .btn-outline-danger.dropdown-toggle { + color: #fff; + background-color: #e55353; + border-color: #e55353; } -.form-inline .form-check { - width: 100%; +.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.5); } -@media (min-width: 576px) { - .form-inline label { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: -ms-flexbox; - display: flex; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -ms-flex-align: center; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.btn-outline-light { + color: #ebedef; + border-color: #ebedef; } -.btn { - display: inline-block; - font-weight: 400; - color: #23282c; - text-align: center; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - border: 1px solid transparent; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - line-height: 1.5; - border-radius: 0.25rem; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +.btn-outline-light:hover { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -@media (prefers-reduced-motion: reduce) { - .btn { - transition: none; - } +.btn-outline-light:focus, .btn-outline-light.focus { + box-shadow: 0 0 0 0.2rem rgba(235, 237, 239, 0.5); } -.btn:hover { - color: #23282c; - text-decoration: none; +.btn-outline-light.disabled, .btn-outline-light:disabled { + color: #ebedef; + background-color: transparent; } -.btn:focus, .btn.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, +.show > .btn-outline-light.dropdown-toggle { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -.btn.disabled, .btn:disabled { - opacity: 0.65; +.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(235, 237, 239, 0.5); } -a.btn.disabled, -fieldset:disabled a.btn { - pointer-events: none; +.btn-outline-dark { + color: #636f83; + border-color: #636f83; } -.btn-primary { +.btn-outline-dark:hover { color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; + background-color: #636f83; + border-color: #636f83; } -.btn-primary:hover { - color: #fff; - background-color: #1b8eb7; - border-color: #1985ac; +.btn-outline-dark:focus, .btn-outline-dark.focus { + box-shadow: 0 0 0 0.2rem rgba(99, 111, 131, 0.5); } -.btn-primary:focus, .btn-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5); +.btn-outline-dark.disabled, .btn-outline-dark:disabled { + color: #636f83; + background-color: transparent; } -.btn-primary.disabled, .btn-primary:disabled { +.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, +.show > .btn-outline-dark.dropdown-toggle { color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; + background-color: #636f83; + border-color: #636f83; } -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, -.show > .btn-primary.dropdown-toggle { - color: #fff; - background-color: #1985ac; - border-color: #187da0; +.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(99, 111, 131, 0.5); } -.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, -.show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5); +.btn-link { + font-weight: 400; + color: #321fdb; + text-decoration: none; } -.btn-secondary { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.btn-link:hover { + color: #231698; + text-decoration: underline; } -.btn-secondary:hover { - color: #23282c; - background-color: #b3bbc2; - border-color: #acb5bc; +.btn-link:focus, .btn-link.focus { + text-decoration: underline; + box-shadow: none; } -.btn-secondary:focus, .btn-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(175, 181, 186, 0.5); +.btn-link:disabled, .btn-link.disabled { + color: #8a93a2; + pointer-events: none; } -.btn-secondary.disabled, .btn-secondary:disabled { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.btn-lg, .btn-group-lg > .btn { + padding: 0.5rem 1rem; + font-size: 1.09375rem; + line-height: 1.5; + border-radius: 0.3rem; } -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, -.show > .btn-secondary.dropdown-toggle { - color: #23282c; - background-color: #acb5bc; - border-color: #a5aeb7; +.btn-lg i, .btn-group-lg > .btn i, +.btn-lg .c-icon, +.btn-group-lg > .btn .c-icon { + width: 1.09375rem; + height: 1.09375rem; + margin: 0.2734375rem 0; } -.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, -.show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(175, 181, 186, 0.5); +.btn-sm, .btn-group-sm > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.765625rem; + line-height: 1.5; + border-radius: 0.2rem; } -.btn-success { - color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; +.btn-sm i, .btn-group-sm > .btn i, +.btn-sm .c-icon, +.btn-group-sm > .btn .c-icon { + width: 0.765625rem; + height: 0.765625rem; + margin: 0.19140625rem 0; } -.btn-success:hover { - color: #fff; - background-color: #3ea662; - border-color: #3a9d5d; +.btn-block { + display: block; + width: 100%; } -.btn-success:focus, .btn-success.focus { - box-shadow: 0 0 0 0.2rem rgba(104, 199, 137, 0.5); +.btn-block + .btn-block { + margin-top: 0.5rem; } -.btn-success.disabled, .btn-success:disabled { - color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; } -.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle { - color: #fff; - background-color: #3a9d5d; - border-color: #379457; +.btn-pill { + border-radius: 50em; } -.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(104, 199, 137, 0.5); +.btn-square { + border-radius: 0; } -.btn-info { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.btn-ghost-primary { + color: #321fdb; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-info:hover { - color: #23282c; - background-color: #43b6d7; - border-color: #39b2d5; +.btn-ghost-primary:hover { + color: #fff; + background-color: #321fdb; + border-color: #321fdb; } -.btn-info:focus, .btn-info.focus { - box-shadow: 0 0 0 0.2rem rgba(89, 171, 195, 0.5); +.btn-ghost-primary:focus, .btn-ghost-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.5); } -.btn-info.disabled, .btn-info:disabled { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.btn-ghost-primary.disabled, .btn-ghost-primary:disabled { + color: #321fdb; + background-color: transparent; + border-color: transparent; } -.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, -.show > .btn-info.dropdown-toggle { +.btn-ghost-primary:not(:disabled):not(.disabled):active, .btn-ghost-primary:not(:disabled):not(.disabled).active, +.show > .btn-ghost-primary.dropdown-toggle { color: #fff; - background-color: #39b2d5; - border-color: #2eadd3; + background-color: #321fdb; + border-color: #321fdb; } -.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, -.show > .btn-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(89, 171, 195, 0.5); +.btn-ghost-primary:not(:disabled):not(.disabled):active:focus, .btn-ghost-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.5); } -.btn-warning { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.btn-ghost-secondary { + color: #ced2d8; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-warning:hover { - color: #23282c; - background-color: #e0a800; - border-color: #d39e00; +.btn-ghost-secondary:hover { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -.btn-warning:focus, .btn-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(222, 170, 13, 0.5); +.btn-ghost-secondary:focus, .btn-ghost-secondary.focus { + box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5); } -.btn-warning.disabled, .btn-warning:disabled { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.btn-ghost-secondary.disabled, .btn-ghost-secondary:disabled { + color: #ced2d8; + background-color: transparent; + border-color: transparent; } -.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, -.show > .btn-warning.dropdown-toggle { - color: #23282c; - background-color: #d39e00; - border-color: #c69500; +.btn-ghost-secondary:not(:disabled):not(.disabled):active, .btn-ghost-secondary:not(:disabled):not(.disabled).active, +.show > .btn-ghost-secondary.dropdown-toggle { + color: #4f5d73; + background-color: #ced2d8; + border-color: #ced2d8; } -.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, -.show > .btn-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(222, 170, 13, 0.5); +.btn-ghost-secondary:not(:disabled):not(.disabled):active:focus, .btn-ghost-secondary:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5); } -.btn-danger { - color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; +.btn-ghost-success { + color: #2eb85c; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-danger:hover { +.btn-ghost-success:hover { color: #fff; - background-color: #f64846; - border-color: #f63c3a; + background-color: #2eb85c; + border-color: #2eb85c; } -.btn-danger:focus, .btn-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(249, 130, 129, 0.5); +.btn-ghost-success:focus, .btn-ghost-success.focus { + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.5); } -.btn-danger.disabled, .btn-danger:disabled { - color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; +.btn-ghost-success.disabled, .btn-ghost-success:disabled { + color: #2eb85c; + background-color: transparent; + border-color: transparent; } -.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, -.show > .btn-danger.dropdown-toggle { +.btn-ghost-success:not(:disabled):not(.disabled):active, .btn-ghost-success:not(:disabled):not(.disabled).active, +.show > .btn-ghost-success.dropdown-toggle { color: #fff; - background-color: #f63c3a; - border-color: #f5302e; + background-color: #2eb85c; + border-color: #2eb85c; } -.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, -.show > .btn-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(249, 130, 129, 0.5); +.btn-ghost-success:not(:disabled):not(.disabled):active:focus, .btn-ghost-success:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.5); } -.btn-light { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.btn-ghost-info { + color: #39f; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-light:hover { - color: #23282c; - background-color: #d9e1e6; - border-color: #d1dbe1; +.btn-ghost-info:hover { + color: #fff; + background-color: #39f; + border-color: #39f; } -.btn-light:focus, .btn-light.focus { - box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5); +.btn-ghost-info:focus, .btn-ghost-info.focus { + box-shadow: 0 0 0 0.2rem rgba(51, 153, 255, 0.5); } -.btn-light.disabled, .btn-light:disabled { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.btn-ghost-info.disabled, .btn-ghost-info:disabled { + color: #39f; + background-color: transparent; + border-color: transparent; } -.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, -.show > .btn-light.dropdown-toggle { - color: #23282c; - background-color: #d1dbe1; - border-color: #cad4dc; +.btn-ghost-info:not(:disabled):not(.disabled):active, .btn-ghost-info:not(:disabled):not(.disabled).active, +.show > .btn-ghost-info.dropdown-toggle { + color: #fff; + background-color: #39f; + border-color: #39f; } -.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, -.show > .btn-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5); +.btn-ghost-info:not(:disabled):not(.disabled):active:focus, .btn-ghost-info:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(51, 153, 255, 0.5); } -.btn-dark { - color: #fff; - background-color: #2f353a; - border-color: #2f353a; +.btn-ghost-warning { + color: #f9b115; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-dark:hover { - color: #fff; - background-color: #1e2225; - border-color: #181b1e; +.btn-ghost-warning:hover { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.btn-dark:focus, .btn-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(78, 83, 88, 0.5); +.btn-ghost-warning:focus, .btn-ghost-warning.focus { + box-shadow: 0 0 0 0.2rem rgba(249, 177, 21, 0.5); } -.btn-dark.disabled, .btn-dark:disabled { - color: #fff; - background-color: #2f353a; - border-color: #2f353a; +.btn-ghost-warning.disabled, .btn-ghost-warning:disabled { + color: #f9b115; + background-color: transparent; + border-color: transparent; } -.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, -.show > .btn-dark.dropdown-toggle { - color: #fff; - background-color: #181b1e; - border-color: #121517; +.btn-ghost-warning:not(:disabled):not(.disabled):active, .btn-ghost-warning:not(:disabled):not(.disabled).active, +.show > .btn-ghost-warning.dropdown-toggle { + color: #4f5d73; + background-color: #f9b115; + border-color: #f9b115; } -.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, -.show > .btn-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(78, 83, 88, 0.5); +.btn-ghost-warning:not(:disabled):not(.disabled):active:focus, .btn-ghost-warning:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(249, 177, 21, 0.5); } -.btn-outline-primary { - color: #20a8d8; - border-color: #20a8d8; +.btn-ghost-danger { + color: #e55353; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-outline-primary:hover { +.btn-ghost-danger:hover { color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; + background-color: #e55353; + border-color: #e55353; } -.btn-outline-primary:focus, .btn-outline-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +.btn-ghost-danger:focus, .btn-ghost-danger.focus { + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.5); } -.btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #20a8d8; +.btn-ghost-danger.disabled, .btn-ghost-danger:disabled { + color: #e55353; background-color: transparent; + border-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, -.show > .btn-outline-primary.dropdown-toggle { +.btn-ghost-danger:not(:disabled):not(.disabled):active, .btn-ghost-danger:not(:disabled):not(.disabled).active, +.show > .btn-ghost-danger.dropdown-toggle { color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; + background-color: #e55353; + border-color: #e55353; } -.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +.btn-ghost-danger:not(:disabled):not(.disabled):active:focus, .btn-ghost-danger:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.5); } -.btn-outline-secondary { - color: #c8ced3; - border-color: #c8ced3; +.btn-ghost-light { + color: #ebedef; + background-color: transparent; + background-image: none; + border-color: transparent; } -.btn-outline-secondary:hover { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.btn-ghost-light:hover { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -.btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +.btn-ghost-light:focus, .btn-ghost-light.focus { + box-shadow: 0 0 0 0.2rem rgba(235, 237, 239, 0.5); } -.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #c8ced3; +.btn-ghost-light.disabled, .btn-ghost-light:disabled { + color: #ebedef; background-color: transparent; + border-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, -.show > .btn-outline-secondary.dropdown-toggle { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.btn-ghost-light:not(:disabled):not(.disabled):active, .btn-ghost-light:not(:disabled):not(.disabled).active, +.show > .btn-ghost-light.dropdown-toggle { + color: #4f5d73; + background-color: #ebedef; + border-color: #ebedef; } -.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +.btn-ghost-light:not(:disabled):not(.disabled):active:focus, .btn-ghost-light:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(235, 237, 239, 0.5); } -.btn-outline-success { - color: #4dbd74; - border-color: #4dbd74; -} +.btn-ghost-dark { + color: #636f83; + background-color: transparent; + background-image: none; + border-color: transparent; +} -.btn-outline-success:hover { +.btn-ghost-dark:hover { color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; + background-color: #636f83; + border-color: #636f83; } -.btn-outline-success:focus, .btn-outline-success.focus { - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +.btn-ghost-dark:focus, .btn-ghost-dark.focus { + box-shadow: 0 0 0 0.2rem rgba(99, 111, 131, 0.5); } -.btn-outline-success.disabled, .btn-outline-success:disabled { - color: #4dbd74; +.btn-ghost-dark.disabled, .btn-ghost-dark:disabled { + color: #636f83; background-color: transparent; + border-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, -.show > .btn-outline-success.dropdown-toggle { +.btn-ghost-dark:not(:disabled):not(.disabled):active, .btn-ghost-dark:not(:disabled):not(.disabled).active, +.show > .btn-ghost-dark.dropdown-toggle { color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; + background-color: #636f83; + border-color: #636f83; } -.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +.btn-ghost-dark:not(:disabled):not(.disabled):active:focus, .btn-ghost-dark:not(:disabled):not(.disabled).active:focus, +.show > .btn-ghost-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(99, 111, 131, 0.5); } -.btn-outline-info { - color: #63c2de; - border-color: #63c2de; +.btn-facebook { + color: #fff; + background-color: #3b5998; + border-color: #3b5998; } -.btn-outline-info:hover { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.btn-facebook:hover,.btn-facebook:focus, .btn-facebook.focus { + color: #fff; + background-color: #30497c; + border-color: #2d4373; } -.btn-outline-info:focus, .btn-outline-info.focus { - box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); +.btn-facebook:focus, .btn-facebook.focus { + box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); } -.btn-outline-info.disabled, .btn-outline-info:disabled { - color: #63c2de; - background-color: transparent; +.btn-facebook.disabled, .btn-facebook:disabled { + color: #fff; + background-color: #3b5998; + border-color: #3b5998; } -.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, -.show > .btn-outline-info.dropdown-toggle { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active, +.show > .btn-facebook.dropdown-toggle { + color: #fff; + background-color: #2d4373; + border-color: #293e6a; } -.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); +.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus, +.show > .btn-facebook.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); } -.btn-outline-warning { - color: #ffc107; - border-color: #ffc107; +.btn-twitter { + color: #fff; + background-color: #00aced; + border-color: #00aced; } -.btn-outline-warning:hover { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.btn-twitter:hover,.btn-twitter:focus, .btn-twitter.focus { + color: #fff; + background-color: #0090c7; + border-color: #0087ba; } -.btn-outline-warning:focus, .btn-outline-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.btn-twitter:focus, .btn-twitter.focus { + box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5); } -.btn-outline-warning.disabled, .btn-outline-warning:disabled { - color: #ffc107; - background-color: transparent; +.btn-twitter.disabled, .btn-twitter:disabled { + color: #fff; + background-color: #00aced; + border-color: #00aced; } -.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, -.show > .btn-outline-warning.dropdown-toggle { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active, +.show > .btn-twitter.dropdown-toggle { + color: #fff; + background-color: #0087ba; + border-color: #007ead; } -.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus, +.show > .btn-twitter.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5); } -.btn-outline-danger { - color: #f86c6b; - border-color: #f86c6b; +.btn-linkedin { + color: #fff; + background-color: #4875b4; + border-color: #4875b4; } -.btn-outline-danger:hover { +.btn-linkedin:hover,.btn-linkedin:focus, .btn-linkedin.focus { color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; + background-color: #3d6399; + border-color: #395d90; } -.btn-outline-danger:focus, .btn-outline-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +.btn-linkedin:focus, .btn-linkedin.focus { + box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5); } -.btn-outline-danger.disabled, .btn-outline-danger:disabled { - color: #f86c6b; - background-color: transparent; +.btn-linkedin.disabled, .btn-linkedin:disabled { + color: #fff; + background-color: #4875b4; + border-color: #4875b4; } -.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, -.show > .btn-outline-danger.dropdown-toggle { +.btn-linkedin:not(:disabled):not(.disabled):active, .btn-linkedin:not(:disabled):not(.disabled).active, +.show > .btn-linkedin.dropdown-toggle { color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; + background-color: #395d90; + border-color: #365786; } -.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +.btn-linkedin:not(:disabled):not(.disabled):active:focus, .btn-linkedin:not(:disabled):not(.disabled).active:focus, +.show > .btn-linkedin.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5); } -.btn-outline-light { - color: #f0f3f5; - border-color: #f0f3f5; +.btn-flickr { + color: #fff; + background-color: #ff0084; + border-color: #ff0084; } -.btn-outline-light:hover { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.btn-flickr:hover,.btn-flickr:focus, .btn-flickr.focus { + color: #fff; + background-color: #d90070; + border-color: #cc006a; } -.btn-outline-light:focus, .btn-outline-light.focus { - box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +.btn-flickr:focus, .btn-flickr.focus { + box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5); } -.btn-outline-light.disabled, .btn-outline-light:disabled { - color: #f0f3f5; - background-color: transparent; +.btn-flickr.disabled, .btn-flickr:disabled { + color: #fff; + background-color: #ff0084; + border-color: #ff0084; } -.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, -.show > .btn-outline-light.dropdown-toggle { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.btn-flickr:not(:disabled):not(.disabled):active, .btn-flickr:not(:disabled):not(.disabled).active, +.show > .btn-flickr.dropdown-toggle { + color: #fff; + background-color: #cc006a; + border-color: #bf0063; } -.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +.btn-flickr:not(:disabled):not(.disabled):active:focus, .btn-flickr:not(:disabled):not(.disabled).active:focus, +.show > .btn-flickr.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5); } -.btn-outline-dark { - color: #2f353a; - border-color: #2f353a; +.btn-tumblr { + color: #fff; + background-color: #32506d; + border-color: #32506d; } -.btn-outline-dark:hover { +.btn-tumblr:hover,.btn-tumblr:focus, .btn-tumblr.focus { color: #fff; - background-color: #2f353a; - border-color: #2f353a; + background-color: #263d53; + border-color: #22364a; } -.btn-outline-dark:focus, .btn-outline-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); +.btn-tumblr:focus, .btn-tumblr.focus { + box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5); } -.btn-outline-dark.disabled, .btn-outline-dark:disabled { - color: #2f353a; - background-color: transparent; +.btn-tumblr.disabled, .btn-tumblr:disabled { + color: #fff; + background-color: #32506d; + border-color: #32506d; } -.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, -.show > .btn-outline-dark.dropdown-toggle { +.btn-tumblr:not(:disabled):not(.disabled):active, .btn-tumblr:not(:disabled):not(.disabled).active, +.show > .btn-tumblr.dropdown-toggle { color: #fff; - background-color: #2f353a; - border-color: #2f353a; + background-color: #22364a; + border-color: #1e3041; } -.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); +.btn-tumblr:not(:disabled):not(.disabled):active:focus, .btn-tumblr:not(:disabled):not(.disabled).active:focus, +.show > .btn-tumblr.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5); } -.btn-link { - font-weight: 400; - color: #20a8d8; - text-decoration: none; +.btn-xing { + color: #fff; + background-color: #026466; + border-color: #026466; } -.btn-link:hover { - color: #167495; - text-decoration: underline; +.btn-xing:hover,.btn-xing:focus, .btn-xing.focus { + color: #fff; + background-color: #013f40; + border-color: #013334; } -.btn-link:focus, .btn-link.focus { - text-decoration: underline; - box-shadow: none; +.btn-xing:focus, .btn-xing.focus { + box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5); } -.btn-link:disabled, .btn-link.disabled { - color: #73818f; - pointer-events: none; +.btn-xing.disabled, .btn-xing:disabled { + color: #fff; + background-color: #026466; + border-color: #026466; } -.btn-lg, .btn-group-lg > .btn { - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.btn-xing:not(:disabled):not(.disabled):active, .btn-xing:not(:disabled):not(.disabled).active, +.show > .btn-xing.dropdown-toggle { + color: #fff; + background-color: #013334; + border-color: #012727; } -.btn-sm, .btn-group-sm > .btn { - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.btn-xing:not(:disabled):not(.disabled):active:focus, .btn-xing:not(:disabled):not(.disabled).active:focus, +.show > .btn-xing.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5); } -.btn-block { - display: block; - width: 100%; +.btn-github { + color: #fff; + background-color: #4183c4; + border-color: #4183c4; } -.btn-block + .btn-block { - margin-top: 0.5rem; +.btn-github:hover,.btn-github:focus, .btn-github.focus { + color: #fff; + background-color: #3570aa; + border-color: #3269a0; } -input[type="submit"].btn-block, -input[type="reset"].btn-block, -input[type="button"].btn-block { - width: 100%; +.btn-github:focus, .btn-github.focus { + box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5); } -.fade { - transition: opacity 0.15s linear; +.btn-github.disabled, .btn-github:disabled { + color: #fff; + background-color: #4183c4; + border-color: #4183c4; } -@media (prefers-reduced-motion: reduce) { - .fade { - transition: none; - } +.btn-github:not(:disabled):not(.disabled):active, .btn-github:not(:disabled):not(.disabled).active, +.show > .btn-github.dropdown-toggle { + color: #fff; + background-color: #3269a0; + border-color: #2f6397; } -.fade:not(.show) { - opacity: 0; +.btn-github:not(:disabled):not(.disabled):active:focus, .btn-github:not(:disabled):not(.disabled).active:focus, +.show > .btn-github.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5); } -.collapse:not(.show) { - display: none; +.btn-stack-overflow { + color: #fff; + background-color: #fe7a15; + border-color: #fe7a15; } -.collapsing { - position: relative; - height: 0; - overflow: hidden; - transition: height 0.35s ease; +.btn-stack-overflow:hover,.btn-stack-overflow:focus, .btn-stack-overflow.focus { + color: #fff; + background-color: #ec6701; + border-color: #df6101; } -@media (prefers-reduced-motion: reduce) { - .collapsing { - transition: none; - } +.btn-stack-overflow:focus, .btn-stack-overflow.focus { + box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5); } -.dropup, -.dropright, -.dropdown, -.dropleft { - position: relative; +.btn-stack-overflow.disabled, .btn-stack-overflow:disabled { + color: #fff; + background-color: #fe7a15; + border-color: #fe7a15; } -.dropdown-toggle { - white-space: nowrap; +.btn-stack-overflow:not(:disabled):not(.disabled):active, .btn-stack-overflow:not(:disabled):not(.disabled).active, +.show > .btn-stack-overflow.dropdown-toggle { + color: #fff; + background-color: #df6101; + border-color: #d25c01; } -.dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid; - border-right: 0.3em solid transparent; - border-bottom: 0; - border-left: 0.3em solid transparent; +.btn-stack-overflow:not(:disabled):not(.disabled):active:focus, .btn-stack-overflow:not(:disabled):not(.disabled).active:focus, +.show > .btn-stack-overflow.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5); } -.dropdown-toggle:empty::after { - margin-left: 0; +.btn-youtube { + color: #fff; + background-color: #b00; + border-color: #b00; } -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 10rem; - padding: 0 0; - margin: 0.125rem 0 0; - font-size: 0.875rem; - color: #23282c; - text-align: left; - list-style: none; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #c8ced3; - border-radius: 0.25rem; +.btn-youtube:hover,.btn-youtube:focus, .btn-youtube.focus { + color: #fff; + background-color: #950000; + border-color: #880000; } -.dropdown-menu-left { - right: auto; - left: 0; +.btn-youtube:focus, .btn-youtube.focus { + box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5); } -.dropdown-menu-right { - right: 0; - left: auto; +.btn-youtube.disabled, .btn-youtube:disabled { + color: #fff; + background-color: #b00; + border-color: #b00; } -@media (min-width: 576px) { - .dropdown-menu-sm-left { - right: auto; - left: 0; - } - .dropdown-menu-sm-right { - right: 0; - left: auto; - } +.btn-youtube:not(:disabled):not(.disabled):active, .btn-youtube:not(:disabled):not(.disabled).active, +.show > .btn-youtube.dropdown-toggle { + color: #fff; + background-color: #880000; + border-color: #7b0000; } -@media (min-width: 768px) { - .dropdown-menu-md-left { - right: auto; - left: 0; - } - .dropdown-menu-md-right { - right: 0; - left: auto; - } +.btn-youtube:not(:disabled):not(.disabled):active:focus, .btn-youtube:not(:disabled):not(.disabled).active:focus, +.show > .btn-youtube.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5); } -@media (min-width: 992px) { - .dropdown-menu-lg-left { - right: auto; - left: 0; - } - .dropdown-menu-lg-right { - right: 0; - left: auto; - } +.btn-dribbble { + color: #fff; + background-color: #ea4c89; + border-color: #ea4c89; } -@media (min-width: 1200px) { - .dropdown-menu-xl-left { - right: auto; - left: 0; - } - .dropdown-menu-xl-right { - right: 0; - left: auto; - } +.btn-dribbble:hover,.btn-dribbble:focus, .btn-dribbble.focus { + color: #fff; + background-color: #e62a72; + border-color: #e51e6b; } -.dropup .dropdown-menu { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: 0.125rem; +.btn-dribbble:focus, .btn-dribbble.focus { + box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5); } -.dropup .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0; - border-right: 0.3em solid transparent; - border-bottom: 0.3em solid; - border-left: 0.3em solid transparent; +.btn-dribbble.disabled, .btn-dribbble:disabled { + color: #fff; + background-color: #ea4c89; + border-color: #ea4c89; } -.dropup .dropdown-toggle:empty::after { - margin-left: 0; +.btn-dribbble:not(:disabled):not(.disabled):active, .btn-dribbble:not(:disabled):not(.disabled).active, +.show > .btn-dribbble.dropdown-toggle { + color: #fff; + background-color: #e51e6b; + border-color: #dc1a65; } -.dropright .dropdown-menu { - top: 0; - right: auto; - left: 100%; - margin-top: 0; - margin-left: 0.125rem; +.btn-dribbble:not(:disabled):not(.disabled):active:focus, .btn-dribbble:not(:disabled):not(.disabled).active:focus, +.show > .btn-dribbble.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5); } -.dropright .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-right: 0; - border-bottom: 0.3em solid transparent; - border-left: 0.3em solid; +.btn-instagram { + color: #fff; + background-color: #517fa4; + border-color: #517fa4; } -.dropright .dropdown-toggle:empty::after { - margin-left: 0; +.btn-instagram:hover,.btn-instagram:focus, .btn-instagram.focus { + color: #fff; + background-color: #446b8a; + border-color: #406582; } -.dropright .dropdown-toggle::after { - vertical-align: 0; +.btn-instagram:focus, .btn-instagram.focus { + box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5); } -.dropleft .dropdown-menu { - top: 0; - right: 100%; - left: auto; - margin-top: 0; - margin-right: 0.125rem; +.btn-instagram.disabled, .btn-instagram:disabled { + color: #fff; + background-color: #517fa4; + border-color: #517fa4; } -.dropleft .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; +.btn-instagram:not(:disabled):not(.disabled):active, .btn-instagram:not(:disabled):not(.disabled).active, +.show > .btn-instagram.dropdown-toggle { + color: #fff; + background-color: #406582; + border-color: #3c5e79; } -.dropleft .dropdown-toggle::after { - display: none; +.btn-instagram:not(:disabled):not(.disabled):active:focus, .btn-instagram:not(:disabled):not(.disabled).active:focus, +.show > .btn-instagram.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5); } -.dropleft .dropdown-toggle::before { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-right: 0.3em solid; - border-bottom: 0.3em solid transparent; +.btn-pinterest { + color: #fff; + background-color: #cb2027; + border-color: #cb2027; } -.dropleft .dropdown-toggle:empty::after { - margin-left: 0; +.btn-pinterest:hover,.btn-pinterest:focus, .btn-pinterest.focus { + color: #fff; + background-color: #aa1b21; + border-color: #9f191f; } -.dropleft .dropdown-toggle::before { - vertical-align: 0; +.btn-pinterest:focus, .btn-pinterest.focus { + box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5); } -.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] { - right: auto; - bottom: auto; +.btn-pinterest.disabled, .btn-pinterest:disabled { + color: #fff; + background-color: #cb2027; + border-color: #cb2027; } -.dropdown-divider { - height: 0; - margin: 0.5rem 0; - overflow: hidden; - border-top: 1px solid #e4e7ea; +.btn-pinterest:not(:disabled):not(.disabled):active, .btn-pinterest:not(:disabled):not(.disabled).active, +.show > .btn-pinterest.dropdown-toggle { + color: #fff; + background-color: #9f191f; + border-color: #94171c; } -.dropdown-item { - display: block; - width: 100%; - padding: 0.25rem 1.5rem; - clear: both; - font-weight: 400; - color: #23282c; - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; +.btn-pinterest:not(:disabled):not(.disabled):active:focus, .btn-pinterest:not(:disabled):not(.disabled).active:focus, +.show > .btn-pinterest.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5); } -.dropdown-item:first-child { - border-top-left-radius: calc(0.25rem - 1px); - border-top-right-radius: calc(0.25rem - 1px); +.btn-vk { + color: #fff; + background-color: #45668e; + border-color: #45668e; } -.dropdown-item:last-child { - border-bottom-right-radius: calc(0.25rem - 1px); - border-bottom-left-radius: calc(0.25rem - 1px); +.btn-vk:hover,.btn-vk:focus, .btn-vk.focus { + color: #fff; + background-color: #385474; + border-color: #344d6c; } -.dropdown-item:hover, .dropdown-item:focus { - color: #181b1e; - text-decoration: none; - background-color: #f0f3f5; -} +.btn-vk:focus, .btn-vk.focus { + box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5); +} -.dropdown-item.active, .dropdown-item:active { +.btn-vk.disabled, .btn-vk:disabled { color: #fff; - text-decoration: none; - background-color: #20a8d8; + background-color: #45668e; + border-color: #45668e; } -.dropdown-item.disabled, .dropdown-item:disabled { - color: #73818f; - pointer-events: none; - background-color: transparent; +.btn-vk:not(:disabled):not(.disabled):active, .btn-vk:not(:disabled):not(.disabled).active, +.show > .btn-vk.dropdown-toggle { + color: #fff; + background-color: #344d6c; + border-color: #304763; } -.dropdown-menu.show { - display: block; +.btn-vk:not(:disabled):not(.disabled):active:focus, .btn-vk:not(:disabled):not(.disabled).active:focus, +.show > .btn-vk.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5); } -.dropdown-header { - display: block; - padding: 0 1.5rem; - margin-bottom: 0; - font-size: 0.765625rem; - color: #73818f; - white-space: nowrap; +.btn-yahoo { + color: #fff; + background-color: #400191; + border-color: #400191; } -.dropdown-item-text { - display: block; - padding: 0.25rem 1.5rem; - color: #23282c; +.btn-yahoo:hover,.btn-yahoo:focus, .btn-yahoo.focus { + color: #fff; + background-color: #2f016b; + border-color: #2a015e; } -.btn-group, -.btn-group-vertical { - position: relative; - display: -ms-inline-flexbox; - display: inline-flex; - vertical-align: middle; +.btn-yahoo:focus, .btn-yahoo.focus { + box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5); } -.btn-group > .btn, -.btn-group-vertical > .btn { - position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; +.btn-yahoo.disabled, .btn-yahoo:disabled { + color: #fff; + background-color: #400191; + border-color: #400191; } -.btn-group > .btn:hover, -.btn-group-vertical > .btn:hover { - z-index: 1; +.btn-yahoo:not(:disabled):not(.disabled):active, .btn-yahoo:not(:disabled):not(.disabled).active, +.show > .btn-yahoo.dropdown-toggle { + color: #fff; + background-color: #2a015e; + border-color: #240152; } -.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, -.btn-group-vertical > .btn:focus, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn.active { - z-index: 1; +.btn-yahoo:not(:disabled):not(.disabled):active:focus, .btn-yahoo:not(:disabled):not(.disabled).active:focus, +.show > .btn-yahoo.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5); } -.btn-toolbar { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-pack: start; - justify-content: flex-start; +.btn-behance { + color: #fff; + background-color: #1769ff; + border-color: #1769ff; } -.btn-toolbar .input-group { - width: auto; +.btn-behance:hover,.btn-behance:focus, .btn-behance.focus { + color: #fff; + background-color: #0055f0; + border-color: #0050e3; } -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) { - margin-left: -1px; +.btn-behance:focus, .btn-behance.focus { + box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5); } -.btn-group > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group > .btn-group:not(:last-child) > .btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.btn-behance.disabled, .btn-behance:disabled { + color: #fff; + background-color: #1769ff; + border-color: #1769ff; } -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) > .btn { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.btn-behance:not(:disabled):not(.disabled):active, .btn-behance:not(:disabled):not(.disabled).active, +.show > .btn-behance.dropdown-toggle { + color: #fff; + background-color: #0050e3; + border-color: #004cd6; } -.dropdown-toggle-split { - padding-right: 0.5625rem; - padding-left: 0.5625rem; +.btn-behance:not(:disabled):not(.disabled):active:focus, .btn-behance:not(:disabled):not(.disabled).active:focus, +.show > .btn-behance.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5); } -.dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after { - margin-left: 0; +.btn-reddit { + color: #fff; + background-color: #ff4500; + border-color: #ff4500; } -.dropleft .dropdown-toggle-split::before { - margin-right: 0; +.btn-reddit:hover,.btn-reddit:focus, .btn-reddit.focus { + color: #fff; + background-color: #d93b00; + border-color: #cc3700; } -.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { - padding-right: 0.375rem; - padding-left: 0.375rem; +.btn-reddit:focus, .btn-reddit.focus { + box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5); } -.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { - padding-right: 0.75rem; - padding-left: 0.75rem; +.btn-reddit.disabled, .btn-reddit:disabled { + color: #fff; + background-color: #ff4500; + border-color: #ff4500; } -.btn-group-vertical { - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex-pack: center; - justify-content: center; +.btn-reddit:not(:disabled):not(.disabled):active, .btn-reddit:not(:disabled):not(.disabled).active, +.show > .btn-reddit.dropdown-toggle { + color: #fff; + background-color: #cc3700; + border-color: #bf3400; } -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group { - width: 100%; +.btn-reddit:not(:disabled):not(.disabled):active:focus, .btn-reddit:not(:disabled):not(.disabled).active:focus, +.show > .btn-reddit.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5); } -.btn-group-vertical > .btn:not(:first-child), -.btn-group-vertical > .btn-group:not(:first-child) { - margin-top: -1px; +.btn-vimeo { + color: #4f5d73; + background-color: #aad450; + border-color: #aad450; } -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group-vertical > .btn-group:not(:last-child) > .btn { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; +.btn-vimeo:hover,.btn-vimeo:focus, .btn-vimeo.focus { + color: #4f5d73; + background-color: #9bcc32; + border-color: #93c130; } -.btn-group-vertical > .btn:not(:first-child), -.btn-group-vertical > .btn-group:not(:first-child) > .btn { - border-top-left-radius: 0; - border-top-right-radius: 0; +.btn-vimeo:focus, .btn-vimeo.focus { + box-shadow: 0 0 0 0.2rem rgba(156, 194, 85, 0.5); } -.btn-group-toggle > .btn, -.btn-group-toggle > .btn-group > .btn { - margin-bottom: 0; +.btn-vimeo.disabled, .btn-vimeo:disabled { + color: #4f5d73; + background-color: #aad450; + border-color: #aad450; } -.btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; +.btn-vimeo:not(:disabled):not(.disabled):active, .btn-vimeo:not(:disabled):not(.disabled).active, +.show > .btn-vimeo.dropdown-toggle { + color: #4f5d73; + background-color: #93c130; + border-color: #8bb72d; } -.input-group { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: stretch; - align-items: stretch; - width: 100%; +.btn-vimeo:not(:disabled):not(.disabled):active:focus, .btn-vimeo:not(:disabled):not(.disabled).active:focus, +.show > .btn-vimeo.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgba(156, 194, 85, 0.5); } -.input-group > .form-control, -.input-group > .form-control-plaintext, -.input-group > .custom-select, -.input-group > .custom-file { +.c-callout { position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; + padding: 0 1rem; + margin: 1rem 0; + border-radius: 0.25rem; +} + +html:not([dir="rtl"]) .c-callout { + border-left: 4px solid #d8dbe0; +} + +*[dir="rtl"] .c-callout { + border-right: 4px solid #d8dbe0; +} + +.c-callout-bordered { + border: 1px solid #d8dbe0; + border-left-width: 4px; +} + +.c-callout code { + border-radius: 0.25rem; +} + +.c-callout h4 { + margin-top: 0; + margin-bottom: .25rem; +} + +.c-callout p:last-child { margin-bottom: 0; } -.input-group > .form-control + .form-control, -.input-group > .form-control + .custom-select, -.input-group > .form-control + .custom-file, -.input-group > .form-control-plaintext + .form-control, -.input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .custom-file, -.input-group > .custom-select + .form-control, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .custom-file, -.input-group > .custom-file + .form-control, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .custom-file { - margin-left: -1px; +.c-callout + .c-callout { + margin-top: -0.25rem; } -.input-group > .form-control:focus, -.input-group > .custom-select:focus, -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { - z-index: 3; +html:not([dir="rtl"]) .c-callout-primary { + border-left-color: #321fdb; } -.input-group > .custom-file .custom-file-input:focus { - z-index: 4; +*[dir="rtl"] .c-callout-primary { + border-right-color: #321fdb; } -.input-group > .form-control:not(:last-child), -.input-group > .custom-select:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.c-callout-primary h4 { + color: #321fdb; } -.input-group > .form-control:not(:first-child), -.input-group > .custom-select:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +html:not([dir="rtl"]) .c-callout-secondary { + border-left-color: #ced2d8; } -.input-group > .custom-file { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; +*[dir="rtl"] .c-callout-secondary { + border-right-color: #ced2d8; } -.input-group > .custom-file:not(:last-child) .custom-file-label, -.input-group > .custom-file:not(:last-child) .custom-file-label::after { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.c-callout-secondary h4 { + color: #ced2d8; } -.input-group > .custom-file:not(:first-child) .custom-file-label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +html:not([dir="rtl"]) .c-callout-success { + border-left-color: #2eb85c; } -.input-group-prepend, -.input-group-append { - display: -ms-flexbox; - display: flex; +*[dir="rtl"] .c-callout-success { + border-right-color: #2eb85c; } -.input-group-prepend .btn, -.input-group-append .btn { - position: relative; - z-index: 2; +.c-callout-success h4 { + color: #2eb85c; } -.input-group-prepend .btn:focus, -.input-group-append .btn:focus { - z-index: 3; +html:not([dir="rtl"]) .c-callout-info { + border-left-color: #39f; } -.input-group-prepend .btn + .btn, -.input-group-prepend .btn + .input-group-text, -.input-group-prepend .input-group-text + .input-group-text, -.input-group-prepend .input-group-text + .btn, -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .input-group-text, -.input-group-append .input-group-text + .btn { - margin-left: -1px; +*[dir="rtl"] .c-callout-info { + border-right-color: #39f; } -.input-group-prepend { - margin-right: -1px; +.c-callout-info h4 { + color: #39f; } -.input-group-append { - margin-left: -1px; +html:not([dir="rtl"]) .c-callout-warning { + border-left-color: #f9b115; } -.input-group-text { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - padding: 0.375rem 0.75rem; - margin-bottom: 0; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #5c6873; - text-align: center; - white-space: nowrap; - background-color: #f0f3f5; - border: 1px solid #e4e7ea; - border-radius: 0.25rem; +*[dir="rtl"] .c-callout-warning { + border-right-color: #f9b115; } -.input-group-text input[type="radio"], -.input-group-text input[type="checkbox"] { - margin-top: 0; +.c-callout-warning h4 { + color: #f9b115; } -.input-group-lg > .form-control:not(textarea), -.input-group-lg > .custom-select { - height: calc(1.5em + 1rem + 2px); +html:not([dir="rtl"]) .c-callout-danger { + border-left-color: #e55353; } -.input-group-lg > .form-control, -.input-group-lg > .custom-select, -.input-group-lg > .input-group-prepend > .input-group-text, -.input-group-lg > .input-group-append > .input-group-text, -.input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-append > .btn { - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +*[dir="rtl"] .c-callout-danger { + border-right-color: #e55353; } -.input-group-sm > .form-control:not(textarea), -.input-group-sm > .custom-select { - height: calc(1.5em + 0.5rem + 2px); +.c-callout-danger h4 { + color: #e55353; } -.input-group-sm > .form-control, -.input-group-sm > .custom-select, -.input-group-sm > .input-group-prepend > .input-group-text, -.input-group-sm > .input-group-append > .input-group-text, -.input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-append > .btn { - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +html:not([dir="rtl"]) .c-callout-light { + border-left-color: #ebedef; } -.input-group-lg > .custom-select, -.input-group-sm > .custom-select { - padding-right: 1.75rem; +*[dir="rtl"] .c-callout-light { + border-right-color: #ebedef; } -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text, -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.c-callout-light h4 { + color: #ebedef; } -.input-group > .input-group-append > .btn, -.input-group > .input-group-append > .input-group-text, -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text, -.input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +html:not([dir="rtl"]) .c-callout-dark { + border-left-color: #636f83; } -.custom-control { - position: relative; - display: block; - min-height: 1.3125rem; - padding-left: 1.5rem; +*[dir="rtl"] .c-callout-dark { + border-right-color: #636f83; } -.custom-control-inline { - display: -ms-inline-flexbox; - display: inline-flex; - margin-right: 1rem; +.c-callout-dark h4 { + color: #636f83; } -.custom-control-input { - position: absolute; - z-index: -1; - opacity: 0; +.card { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + min-width: 0; + margin-bottom: 1.5rem; + word-wrap: break-word; + background-clip: border-box; + border: 1px solid; + border-radius: 0.25rem; + background-color: #fff; + border-color: #d8dbe0; } -.custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #20a8d8; - background-color: #20a8d8; +.card > hr { + margin-right: 0; + margin-left: 0; } -.custom-control-input:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.card > .list-group:first-child .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } -.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { - border-color: #8ad4ee; +.card > .list-group:last-child .list-group-item:last-child { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } -.custom-control-input:not(:disabled):active ~ .custom-control-label::before { - color: #fff; - background-color: #b6e4f4; - border-color: #b6e4f4; +.card.drag, +.card .drag { + cursor: move; } -.custom-control-input:disabled ~ .custom-control-label { - color: #73818f; +.card.bg-primary { + border-color: #2517a3; } -.custom-control-input:disabled ~ .custom-control-label::before { - background-color: #e4e7ea; +.card.bg-primary .card-header { + background-color: #2f1dce; + border-color: #2517a3; } -.custom-control-label { - position: relative; - margin-bottom: 0; - vertical-align: top; +.card.bg-secondary { + border-color: #abb1bc; } -.custom-control-label::before { - position: absolute; - top: 0.15625rem; - left: -1.5rem; - display: block; - width: 1rem; - height: 1rem; - pointer-events: none; - content: ""; - background-color: #fff; - border: #8f9ba6 solid 1px; +.card.bg-secondary .card-header { + background-color: #c5cad1; + border-color: #abb1bc; } -.custom-control-label::after { - position: absolute; - top: 0.15625rem; - left: -1.5rem; - display: block; - width: 1rem; - height: 1rem; - content: ""; - background: no-repeat 50% / 50% 50%; +.card.bg-success { + border-color: #218543; } -.custom-checkbox .custom-control-label::before { - border-radius: 0.25rem; +.card.bg-success .card-header { + background-color: #2bac56; + border-color: #218543; } -.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); +.card.bg-info { + border-color: #0079f2; } -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { - border-color: #20a8d8; - background-color: #20a8d8; +.card.bg-info .card-header { + background-color: #2491ff; + border-color: #0079f2; } -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); +.card.bg-warning { + border-color: #c98b05; } -.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(32, 168, 216, 0.5); +.card.bg-warning .card-header { + background-color: #f8ac06; + border-color: #c98b05; } -.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { - background-color: rgba(32, 168, 216, 0.5); +.card.bg-danger { + border-color: #d82121; } -.custom-radio .custom-control-label::before { - border-radius: 50%; +.card.bg-danger .card-header { + background-color: #e34646; + border-color: #d82121; } -.custom-radio .custom-control-input:checked ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); +.card.bg-light { + border-color: #c8cdd3; } -.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(32, 168, 216, 0.5); +.card.bg-light .card-header { + background-color: #e3e5e8; + border-color: #c8cdd3; } -.custom-switch { - padding-left: 2.25rem; +.card.bg-dark { + border-color: #48505f; } -.custom-switch .custom-control-label::before { - left: -2.25rem; - width: 1.75rem; - pointer-events: all; - border-radius: 0.5rem; +.card.bg-dark .card-header { + background-color: #5c687a; + border-color: #48505f; } -.custom-switch .custom-control-label::after { - top: calc(0.15625rem + 2px); - left: calc(-2.25rem + 2px); - width: calc(1rem - 4px); - height: calc(1rem - 4px); - background-color: #8f9ba6; - border-radius: 0.5rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; - transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; +.card-body { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-height: 1px; + padding: 1.25rem; } -@media (prefers-reduced-motion: reduce) { - .custom-switch .custom-control-label::after { - transition: none; - } +.card-title { + margin-bottom: 0.75rem; } -.custom-switch .custom-control-input:checked ~ .custom-control-label::after { - background-color: #fff; - -webkit-transform: translateX(0.75rem); - transform: translateX(0.75rem); +.card-subtitle { + margin-top: -0.375rem; } -.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(32, 168, 216, 0.5); +.card-subtitle,.card-text:last-child { + margin-bottom: 0; } -.custom-select { - display: inline-block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 1.75rem 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #5c6873; - vertical-align: middle; - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; - background-color: #fff; - border: 1px solid #e4e7ea; - border-radius: 0.25rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; +.card-link:hover { + text-decoration: none; } -.custom-select:focus { - border-color: #8ad4ee; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +html:not([dir="rtl"]) .card-link + .card-link { + margin-left: 1.25rem; } -.custom-select:focus::-ms-value { - color: #5c6873; - background-color: #fff; +*[dir="rtl"] .card-link + .card-link { + margin-right: 1.25rem; } -.custom-select[multiple], .custom-select[size]:not([size="1"]) { - height: auto; - padding-right: 0.75rem; - background-image: none; +.card-header { + padding: 0.75rem 1.25rem; + margin-bottom: 0; + border-bottom: 1px solid; + background-color: #fff; + border-color: #d8dbe0; } -.custom-select:disabled { - color: #73818f; - background-color: #e4e7ea; +.card-header:first-child { + border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } -.custom-select::-ms-expand { - display: none; +.card-header + .list-group .list-group-item:first-child { + border-top: 0; } -.custom-select-sm { - height: calc(1.5em + 0.5rem + 2px); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - font-size: 0.765625rem; +.card-header .c-chart-wrapper { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; } -.custom-select-lg { - height: calc(1.5em + 1rem + 2px); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - font-size: 1.09375rem; +.card-footer { + padding: 0.75rem 1.25rem; + border-top: 1px solid; + background-color: #fff; + border-color: #d8dbe0; } -.custom-file { - position: relative; - display: inline-block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - margin-bottom: 0; +.card-footer:last-child { + border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } -.custom-file-input { - position: relative; - z-index: 2; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - margin: 0; - opacity: 0; +.card-header-tabs { + margin-bottom: -0.75rem; + border-bottom: 0; } -.custom-file-input:focus ~ .custom-file-label { - border-color: #8ad4ee; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.card-header-tabs,.card-header-pills { + margin-right: -0.625rem; + margin-left: -0.625rem; } -.custom-file-input:disabled ~ .custom-file-label { - background-color: #e4e7ea; -} - -.custom-file-input:lang(en) ~ .custom-file-label::after { - content: "Browse"; -} - -.custom-file-input ~ .custom-file-label[data-browse]::after { - content: attr(data-browse); -} - -.custom-file-label { +.card-img-overlay { position: absolute; top: 0; right: 0; + bottom: 0; left: 0; - z-index: 1; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 0.75rem; - font-weight: 400; - line-height: 1.5; - color: #5c6873; - background-color: #fff; - border: 1px solid #e4e7ea; - border-radius: 0.25rem; + padding: 1.25rem; } -.custom-file-label::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - z-index: 3; - display: block; - height: calc(1.5em + 0.75rem); - padding: 0.375rem 0.75rem; - line-height: 1.5; - color: #5c6873; - content: "Browse"; - background-color: #f0f3f5; - border-left: inherit; - border-radius: 0 0.25rem 0.25rem 0; +.card-img, +.card-img-top, +.card-img-bottom { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 100%; } -.custom-range { - width: 100%; - height: calc(1rem + 0.4rem); - padding: 0; - background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; +.card-img, +.card-img-top { + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } -.custom-range:focus { - outline: none; +.card-img, +.card-img-bottom { + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); } -.custom-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.card-deck .card { + margin-bottom: 15px; } -.custom-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +@media (min-width: 576px) { + .card-deck { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-right: -15px; + margin-left: -15px; + } + .card-deck .card { + -ms-flex: 1 0 0%; + flex: 1 0 0%; + margin-right: 15px; + margin-bottom: 0; + margin-left: 15px; + } } -.custom-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +.card-group > .card { + margin-bottom: 15px; } -.custom-range::-moz-focus-outer { - border: 0; +@media (min-width: 576px) { + .card-group { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + } + .card-group > .card { + -ms-flex: 1 0 0%; + flex: 1 0 0%; + margin-bottom: 0; + } + html:not([dir="rtl"]) .card-group > .card + .card { + margin-left: 0; + border-left: 0; + } + *[dir="rtl"] .card-group > .card + .card { + margin-right: 0; + border-right: 0; + } + .card-group > .card:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { + border-top-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { + border-bottom-right-radius: 0; + } + .card-group > .card:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { + border-top-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { + border-bottom-left-radius: 0; + } } -.custom-range::-webkit-slider-thumb { - width: 1rem; - height: 1rem; - margin-top: -0.25rem; - background-color: #20a8d8; - border: 0; - border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - -webkit-appearance: none; - appearance: none; +.card-columns .card { + margin-bottom: 0.75rem; } -@media (prefers-reduced-motion: reduce) { - .custom-range::-webkit-slider-thumb { - transition: none; +@media (min-width: 576px) { + .card-columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + -webkit-column-gap: 1.25rem; + -moz-column-gap: 1.25rem; + column-gap: 1.25rem; + orphans: 1; + widows: 1; + } + .card-columns .card { + display: inline-block; + width: 100%; } } -.custom-range::-webkit-slider-thumb:active { - background-color: #b6e4f4; +.accordion > .card { + overflow: hidden; } -.custom-range::-webkit-slider-runnable-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: #c8ced3; - border-color: transparent; - border-radius: 1rem; +.accordion > .card:not(:last-of-type) { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } -.custom-range::-moz-range-thumb { - width: 1rem; - height: 1rem; - background-color: #20a8d8; - border: 0; - border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - -moz-appearance: none; - appearance: none; +.accordion > .card:not(:first-of-type) { + border-top-left-radius: 0; + border-top-right-radius: 0; } -@media (prefers-reduced-motion: reduce) { - .custom-range::-moz-range-thumb { - transition: none; - } +.accordion > .card > .card-header { + border-radius: 0; + margin-bottom: -1px; } -.custom-range::-moz-range-thumb:active { - background-color: #b6e4f4; +.card-placeholder { + background: rgba(0, 0, 21, 0.025); + border: 1px dashed #c4c9d0; } -.custom-range::-moz-range-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: #c8ced3; - border-color: transparent; - border-radius: 1rem; +.card-header-icon-bg { + width: 2.8125rem; + padding: 0.75rem 0; + margin: -0.75rem 1.25rem -0.75rem -1.25rem; + line-height: inherit; + color: #4f5d73; + text-align: center; + background: transparent; + border-right: 1px solid; + border-right: #d8dbe0; } -.custom-range::-ms-thumb { - width: 1rem; - height: 1rem; - margin-top: 0; - margin-right: 0.2rem; - margin-left: 0.2rem; - background-color: #20a8d8; - border: 0; - border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - appearance: none; +.card-header-icon-bg,.card-header-actions { + display: inline-block; } -@media (prefers-reduced-motion: reduce) { - .custom-range::-ms-thumb { - transition: none; - } +html:not([dir="rtl"]) .card-header-actions { + float: right; + margin-right: -0.25rem; } -.custom-range::-ms-thumb:active { - background-color: #b6e4f4; +*[dir="rtl"] .card-header-actions { + float: left; + margin-left: -0.25rem; } -.custom-range::-ms-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: transparent; - border-color: transparent; - border-width: 0.5rem; +.card-header-action { + padding: 0 0.25rem; + color: #8a93a2; } -.custom-range::-ms-fill-lower { - background-color: #c8ced3; - border-radius: 1rem; +.card-header-action:hover { + color: #4f5d73; + text-decoration: none; } -.custom-range::-ms-fill-upper { - margin-right: 15px; - background-color: #c8ced3; - border-radius: 1rem; +.card-accent-primary { + border-top: 2px solid #321fdb !important; } -.custom-range:disabled::-webkit-slider-thumb { - background-color: #8f9ba6; +.card-accent-secondary { + border-top: 2px solid #ced2d8 !important; } -.custom-range:disabled::-webkit-slider-runnable-track { - cursor: default; +.card-accent-success { + border-top: 2px solid #2eb85c !important; } -.custom-range:disabled::-moz-range-thumb { - background-color: #8f9ba6; +.card-accent-info { + border-top: 2px solid #39f !important; } -.custom-range:disabled::-moz-range-track { - cursor: default; +.card-accent-warning { + border-top: 2px solid #f9b115 !important; } -.custom-range:disabled::-ms-thumb { - background-color: #8f9ba6; +.card-accent-danger { + border-top: 2px solid #e55353 !important; } -.custom-control-label::before, -.custom-file-label, -.custom-select { - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +.card-accent-light { + border-top: 2px solid #ebedef !important; } -@media (prefers-reduced-motion: reduce) { - .custom-control-label::before, - .custom-file-label, - .custom-select { - transition: none; - } +.card-accent-dark { + border-top: 2px solid #636f83 !important; } -.nav { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; +.card-full { + margin-top: -1rem; + margin-right: -15px; + margin-left: -15px; + border: 0; + border-bottom: 1px solid #d8dbe0; } -.nav-link { - display: block; - padding: 0.5rem 1rem; +@media (min-width: 576px) { + .card-columns.cols-2 { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } } -.nav-link:hover, .nav-link:focus { - text-decoration: none; +.carousel { + position: relative; } -.nav-link.disabled { - color: #73818f; - pointer-events: none; - cursor: default; +.carousel.pointer-event { + -ms-touch-action: pan-y; + touch-action: pan-y; } -.nav-tabs { - border-bottom: 1px solid #c8ced3; +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; } -.nav-tabs .nav-item { - margin-bottom: -1px; +.carousel-inner::after { + display: block; + clear: both; + content: ""; } -.nav-tabs .nav-link { - border: 1px solid transparent; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition: -webkit-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; } -.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { - border-color: #e4e7ea #e4e7ea #c8ced3; +@media (prefers-reduced-motion: reduce) { + .carousel-item { + transition: none; + } } -.nav-tabs .nav-link.disabled { - color: #73818f; - background-color: transparent; - border-color: transparent; +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; } -.nav-tabs .nav-link.active, -.nav-tabs .nav-item.show .nav-link { - color: #5c6873; - background-color: #e4e5e6; - border-color: #c8ced3 #c8ced3 #e4e5e6; +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + -webkit-transform: translateX(100%); + transform: translateX(100%); } -.nav-tabs .dropdown-menu { - margin-top: -1px; - border-top-left-radius: 0; - border-top-right-radius: 0; +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } -.nav-pills .nav-link { - border-radius: 0.25rem; +.carousel-fade .carousel-item { + opacity: 0; + transition-property: opacity; + -webkit-transform: none; + transform: none; } -.nav-pills .nav-link.active, -.nav-pills .show > .nav-link { - color: #fff; - background-color: #20a8d8; +.carousel-fade .carousel-item.active, +.carousel-fade .carousel-item-next.carousel-item-left, +.carousel-fade .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; } -.nav-fill .nav-item { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - text-align: center; +.carousel-fade .active.carousel-item-left, +.carousel-fade .active.carousel-item-right { + z-index: 0; + opacity: 0; + transition: opacity 0s 0.6s; } -.nav-justified .nav-item { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; +@media (prefers-reduced-motion: reduce) { + .carousel-fade .active.carousel-item-left, + .carousel-fade .active.carousel-item-right { + transition: none; + } +} + +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 15%; + color: #fff; text-align: center; + opacity: 0.5; + transition: opacity 0.15s ease; } -.tab-content > .tab-pane { - display: none; +@media (prefers-reduced-motion: reduce) { + .carousel-control-prev, + .carousel-control-next { + transition: none; + } } -.tab-content > .active { - display: block; +.carousel-control-prev:hover, .carousel-control-prev:focus, +.carousel-control-next:hover, +.carousel-control-next:focus { + color: #fff; + text-decoration: none; + outline: 0; + opacity: 0.9; } -.navbar { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0.5rem 1rem; +.carousel-control-prev { + left: 0; } -.navbar > .container, -.navbar > .container-fluid { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; +.carousel-control-next { + right: 0; } -.navbar-brand { +.carousel-control-prev-icon, +.carousel-control-next-icon { display: inline-block; - padding-top: 0.335938rem; - padding-bottom: 0.335938rem; - margin-right: 1rem; - font-size: 1.09375rem; - line-height: inherit; - white-space: nowrap; + width: 20px; + height: 20px; + background: no-repeat 50% / 100% 100%; } -.navbar-brand:hover, .navbar-brand:focus { - text-decoration: none; +.carousel-control-prev-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); } -.navbar-nav { +.carousel-control-next-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); +} + +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; + -ms-flex-pack: center; + justify-content: center; + margin-right: 15%; + margin-left: 15%; list-style: none; } -.navbar-nav .nav-link { - padding-right: 0; +html:not([dir="rtl"]) .carousel-indicators { padding-left: 0; } -.navbar-nav .dropdown-menu { - position: static; - float: none; -} - -.navbar-text { - display: inline-block; - padding-top: 0.5rem; - padding-bottom: 0.5rem; +*[dir="rtl"] .carousel-indicators { + padding-right: 0; } -.navbar-collapse { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-align: center; - align-items: center; +.carousel-indicators li { + box-sizing: content-box; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 30px; + height: 3px; + margin-right: 3px; + margin-left: 3px; + text-indent: -999px; + cursor: pointer; + background-color: #fff; + background-clip: padding-box; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + opacity: .5; + transition: opacity 0.6s ease; } -.navbar-toggler { - padding: 0.25rem 0.75rem; - font-size: 1.09375rem; - line-height: 1; - background-color: transparent; - border: 1px solid transparent; - border-radius: 0.25rem; +@media (prefers-reduced-motion: reduce) { + .carousel-indicators li { + transition: none; + } } -.navbar-toggler:hover, .navbar-toggler:focus { - text-decoration: none; +.carousel-indicators .active { + opacity: 1; } -.navbar-toggler-icon { - display: inline-block; - width: 1.5em; - height: 1.5em; - vertical-align: middle; - content: ""; - background: no-repeat center center; - background-size: 100% 100%; +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; } -@media (max-width: 575.98px) { - .navbar-expand-sm > .container, - .navbar-expand-sm > .container-fluid { - padding-right: 0; - padding-left: 0; - } +.c-chart-wrapper canvas { + width: 100%; } -@media (min-width: 576px) { - .navbar-expand-sm { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-sm .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-sm .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .navbar-expand-sm > .container, - .navbar-expand-sm > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - } - .navbar-expand-sm .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-sm .navbar-toggler { - display: none; - } +base-chart.chart { + display: block; } -@media (max-width: 767.98px) { - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid { - padding-right: 0; - padding-left: 0; - } +canvas { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -@media (min-width: 768px) { - .navbar-expand-md { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-md .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-md .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-md .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - } - .navbar-expand-md .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-md .navbar-toggler { - display: none; - } +.close { + float: right; + font-size: 1.3125rem; + font-weight: 700; + line-height: 1; + opacity: .5; + color: #000015; + text-shadow: 0 1px 0 #fff; } -@media (max-width: 991.98px) { - .navbar-expand-lg > .container, - .navbar-expand-lg > .container-fluid { - padding-right: 0; - padding-left: 0; - } +.close:hover { + text-decoration: none; + color: #000015; } -@media (min-width: 992px) { - .navbar-expand-lg { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-lg .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-lg .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-lg .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .navbar-expand-lg > .container, - .navbar-expand-lg > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - } - .navbar-expand-lg .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-lg .navbar-toggler { - display: none; - } +.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { + opacity: .75; } -@media (max-width: 1199.98px) { - .navbar-expand-xl > .container, - .navbar-expand-xl > .container-fluid { - padding-right: 0; - padding-left: 0; - } +button.close { + padding: 0; + background-color: transparent; + border: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } -@media (min-width: 1200px) { - .navbar-expand-xl { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-xl .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-xl .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-xl .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; - } - .navbar-expand-xl > .container, - .navbar-expand-xl > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - } - .navbar-expand-xl .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-xl .navbar-toggler { - display: none; - } +a.close.disabled { + pointer-events: none; } -.navbar-expand { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; +code { + font-size: 87.5%; + color: #e83e8c; + word-wrap: break-word; } -.navbar-expand > .container, -.navbar-expand > .container-fluid { - padding-right: 0; - padding-left: 0; +a > code { + color: inherit; } -.navbar-expand .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; +kbd { + padding: 0.2rem 0.4rem; + font-size: 87.5%; + color: #fff; + background-color: #4f5d73; + border-radius: 0.2rem; } -.navbar-expand .navbar-nav .dropdown-menu { - position: absolute; +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: 700; } -.navbar-expand .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; +pre code { + font-size: inherit; + color: inherit; + word-break: normal; } -.navbar-expand > .container, -.navbar-expand > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; } -.navbar-expand .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; +.custom-control { + position: relative; + display: block; + min-height: 1.3125rem; } -.navbar-expand .navbar-toggler { - display: none; +html:not([dir="rtl"]) .custom-control { + padding-left: 1.5rem; } -.navbar-light .navbar-brand { - color: rgba(0, 0, 0, 0.9); +*[dir="rtl"] .custom-control { + padding-right: 1.5rem; } -.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { - color: rgba(0, 0, 0, 0.9); +.custom-control-inline { + display: -ms-inline-flexbox; + display: inline-flex; + margin-right: 1rem; } -.navbar-light .navbar-nav .nav-link { - color: rgba(0, 0, 0, 0.5); +.custom-control-input { + position: absolute; + z-index: -1; + width: 1rem; + height: 1.15625rem; + opacity: 0; } -.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { - color: rgba(0, 0, 0, 0.7); +html:not([dir="rtl"]) .custom-control-input { + left: 0; } -.navbar-light .navbar-nav .nav-link.disabled { - color: rgba(0, 0, 0, 0.3); +*[dir="rtl"] .custom-control-input { + right: 0; } -.navbar-light .navbar-nav .show > .nav-link, -.navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .nav-link.active { - color: rgba(0, 0, 0, 0.9); +.custom-control-input:checked ~ .custom-control-label::before { + color: #fff; + border-color: #321fdb; + background-color: #321fdb; } -.navbar-light .navbar-toggler { - color: rgba(0, 0, 0, 0.5); - border-color: rgba(0, 0, 0, 0.1); +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.navbar-light .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: #958bef; } -.navbar-light .navbar-text { - color: rgba(0, 0, 0, 0.5); +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + color: #fff; + background-color: #beb8f5; + border-color: #beb8f5; } -.navbar-light .navbar-text a { - color: rgba(0, 0, 0, 0.9); +.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { + color: #8a93a2; } -.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { - color: rgba(0, 0, 0, 0.9); +.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { + background-color: #d8dbe0; } -.navbar-dark .navbar-brand { - color: #fff; -} - -.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { - color: #fff; +.custom-control-label { + position: relative; + margin-bottom: 0; + vertical-align: top; } -.navbar-dark .navbar-nav .nav-link { - color: rgba(255, 255, 255, 0.5); +.custom-control-label::before { + position: absolute; + top: 0.15625rem; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; + border: solid 1px; + background-color: #fff; + border-color: #9da5b1; } -.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { - color: rgba(255, 255, 255, 0.75); +html:not([dir="rtl"]) .custom-control-label::before { + left: -1.5rem; } -.navbar-dark .navbar-nav .nav-link.disabled { - color: rgba(255, 255, 255, 0.25); +*[dir="rtl"] .custom-control-label::before { + right: -1.5rem; } -.navbar-dark .navbar-nav .show > .nav-link, -.navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .nav-link.active { - color: #fff; +.custom-control-label::after { + position: absolute; + top: 0.15625rem; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background: no-repeat 50% / 50% 50%; } -.navbar-dark .navbar-toggler { - color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.1); +html:not([dir="rtl"]) .custom-control-label::after { + left: -1.5rem; } -.navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +*[dir="rtl"] .custom-control-label::after { + right: -1.5rem; } -.navbar-dark .navbar-text { - color: rgba(255, 255, 255, 0.5); +.custom-checkbox .custom-control-label::before { + border-radius: 0.25rem; } -.navbar-dark .navbar-text a { - color: #fff; +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } -.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { - color: #fff; +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { + border-color: #321fdb; + background-color: #321fdb; } -.card { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #fff; - background-clip: border-box; - border: 1px solid #c8ced3; - border-radius: 0.25rem; +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); } -.card > hr { - margin-right: 0; - margin-left: 0; +.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(50, 31, 219, 0.5); } -.card > .list-group:first-child .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { + background-color: rgba(50, 31, 219, 0.5); } -.card > .list-group:last-child .list-group-item:last-child { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; +.custom-radio .custom-control-label::before { + border-radius: 50%; } -.card-body { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: 1.25rem; +.custom-radio .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } -.card-title { - margin-bottom: 0.75rem; +.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(50, 31, 219, 0.5); } -.card-subtitle { - margin-top: -0.375rem; - margin-bottom: 0; +html:not([dir="rtl"]) .custom-switch { + padding-left: 2.25rem; } -.card-text:last-child { - margin-bottom: 0; +*[dir="rtl"] .custom-switch { + padding-right: 2.25rem; } -.card-link:hover { - text-decoration: none; +.custom-switch .custom-control-label::before { + width: 1.75rem; + pointer-events: all; + border-radius: 0.5rem; } -.card-link + .card-link { - margin-left: 1.25rem; +html:not([dir="rtl"]) .custom-switch .custom-control-label::before { + left: -2.25rem; } -.card-header { - padding: 0.75rem 1.25rem; - margin-bottom: 0; - background-color: #f0f3f5; - border-bottom: 1px solid #c8ced3; +*[dir="rtl"] .custom-switch .custom-control-label::before { + right: -2.25rem; } -.card-header:first-child { - border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; +.custom-switch .custom-control-label::after { + top: calc(0.15625rem + 2px); + width: calc(1rem - 4px); + height: calc(1rem - 4px); + background-color: #9da5b1; + border-radius: 0.5rem; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; + background-color: #9da5b1; } -.card-header + .list-group .list-group-item:first-child { - border-top: 0; +html:not([dir="rtl"]) .custom-switch .custom-control-label::after { + left: calc(-2.25rem + 2px); } -.card-footer { - padding: 0.75rem 1.25rem; - background-color: #f0f3f5; - border-top: 1px solid #c8ced3; +*[dir="rtl"] .custom-switch .custom-control-label::after { + right: calc(-2.25rem + 2px); } -.card-footer:last-child { - border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); +@media (prefers-reduced-motion: reduce) { + .custom-switch .custom-control-label::after { + transition: none; + } } -.card-header-tabs { - margin-right: -0.625rem; - margin-bottom: -0.75rem; - margin-left: -0.625rem; - border-bottom: 0; +.custom-switch .custom-control-input:checked ~ .custom-control-label::after { + background-color: #fff; + -webkit-transform: translateX(0.75rem); + transform: translateX(0.75rem); } -.card-header-pills { - margin-right: -0.625rem; - margin-left: -0.625rem; +.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(50, 31, 219, 0.5); } -.card-img-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: 1.25rem; +.custom-select { + display: inline-block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 1.75rem 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + vertical-align: middle; + border: 1px solid; + border-radius: 0.25rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + color: #768192; + background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23636f83' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; + border-color: #d8dbe0; } -.card-img { - width: 100%; - border-radius: calc(0.25rem - 1px); +.custom-select:focus { + border-color: #958bef; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.card-img-top { - width: 100%; - border-top-left-radius: calc(0.25rem - 1px); - border-top-right-radius: calc(0.25rem - 1px); +.custom-select:focus::-ms-value { + color: #768192; + background-color: #fff; } -.card-img-bottom { - width: 100%; - border-bottom-right-radius: calc(0.25rem - 1px); - border-bottom-left-radius: calc(0.25rem - 1px); +.custom-select[multiple], .custom-select[size]:not([size="1"]) { + height: auto; + background-image: none; } -.card-deck { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; +html:not([dir="rtl"]) .custom-select[multiple], html:not([dir="rtl"]) .custom-select[size]:not([size="1"]) { + padding-right: 0.75rem; } -.card-deck .card { - margin-bottom: 15px; +*[dir="rtl"] .custom-select[multiple], *[dir="rtl"] .custom-select[size]:not([size="1"]) { + padding-left: 0.75rem; } -@media (min-width: 576px) { - .card-deck { - -ms-flex-flow: row wrap; - flex-flow: row wrap; - margin-right: -15px; - margin-left: -15px; - } - .card-deck .card { - display: -ms-flexbox; - display: flex; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - -ms-flex-direction: column; - flex-direction: column; - margin-right: 15px; - margin-bottom: 0; - margin-left: 15px; - } +.custom-select:disabled { + color: #8a93a2; + background-color: #d8dbe0; } -.card-group { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; +.custom-select::-ms-expand { + display: none; } -.card-group > .card { - margin-bottom: 15px; +.custom-select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #768192; } -@media (min-width: 576px) { - .card-group { - -ms-flex-flow: row wrap; - flex-flow: row wrap; - } - .card-group > .card { - -ms-flex: 1 0 0%; - flex: 1 0 0%; - margin-bottom: 0; - } - .card-group > .card + .card { - margin-left: 0; - border-left: 0; - } - .card-group > .card:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .card-group > .card:not(:last-child) .card-img-top, - .card-group > .card:not(:last-child) .card-header { - border-top-right-radius: 0; - } - .card-group > .card:not(:last-child) .card-img-bottom, - .card-group > .card:not(:last-child) .card-footer { - border-bottom-right-radius: 0; - } - .card-group > .card:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .card-group > .card:not(:first-child) .card-img-top, - .card-group > .card:not(:first-child) .card-header { - border-top-left-radius: 0; - } - .card-group > .card:not(:first-child) .card-img-bottom, - .card-group > .card:not(:first-child) .card-footer { - border-bottom-left-radius: 0; - } +.custom-select-sm { + height: calc(1.5em + 0.5rem + 2px); + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.765625rem; } -.card-columns .card { - margin-bottom: 0.75rem; +html:not([dir="rtl"]) .custom-select-sm { + padding-left: 0.5rem; } -@media (min-width: 576px) { - .card-columns { - -webkit-column-count: 3; - -moz-column-count: 3; - column-count: 3; - -webkit-column-gap: 1.25rem; - -moz-column-gap: 1.25rem; - column-gap: 1.25rem; - orphans: 1; - widows: 1; - } - .card-columns .card { - display: inline-block; - width: 100%; - } +*[dir="rtl"] .custom-select-sm { + padding-right: 0.5rem; } -.accordion > .card { - overflow: hidden; -} - -.accordion > .card:not(:first-of-type) .card-header:first-child { - border-radius: 0; +.custom-select-lg { + height: calc(1.5em + 1rem + 2px); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1.09375rem; } -.accordion > .card:not(:first-of-type):not(:last-of-type) { - border-bottom: 0; - border-radius: 0; +html:not([dir="rtl"]) .custom-select-lg { + padding-left: 1rem; } -.accordion > .card:first-of-type { - border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; +*[dir="rtl"] .custom-select-lg { + padding-right: 1rem; } -.accordion > .card:last-of-type { - border-top-left-radius: 0; - border-top-right-radius: 0; +.custom-file { + display: inline-block; + margin-bottom: 0; } -.accordion > .card .card-header { - margin-bottom: -1px; +.custom-file,.custom-file-input { + position: relative; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); } -.breadcrumb { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 0.75rem 1rem; - margin-bottom: 1.5rem; - list-style: none; - background-color: #fff; - border-radius: 0; +.custom-file-input { + z-index: 2; + margin: 0; + opacity: 0; } -.breadcrumb-item + .breadcrumb-item { - padding-left: 0.5rem; +.custom-file-input:focus ~ .custom-file-label { + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); + border-color: #958bef; } -.breadcrumb-item + .breadcrumb-item::before { - display: inline-block; - padding-right: 0.5rem; - color: #73818f; - content: "/"; +.custom-file-input[disabled] ~ .custom-file-label, +.custom-file-input:disabled ~ .custom-file-label { + background-color: #d8dbe0; } -.breadcrumb-item + .breadcrumb-item:hover::before { - text-decoration: underline; +.custom-file-input:lang(en) ~ .custom-file-label::after { + content: "Browse"; } -.breadcrumb-item + .breadcrumb-item:hover::before { - text-decoration: none; +.custom-file-input ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); } -.breadcrumb-item.active { - color: #73818f; +.custom-file-label { + right: 0; + left: 0; + z-index: 1; + height: calc(1.5em + 0.75rem + 2px); + font-weight: 400; + border: 1px solid; + border-radius: 0.25rem; + background-color: #fff; + border-color: #d8dbe0; } -.pagination { - display: -ms-flexbox; - display: flex; - padding-left: 0; - list-style: none; - border-radius: 0.25rem; +.custom-file-label,.custom-file-label::after { + position: absolute; + top: 0; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: #768192; } -.page-link { - position: relative; +.custom-file-label::after { + bottom: 0; + z-index: 3; display: block; - padding: 0.5rem 0.75rem; - margin-left: -1px; - line-height: 1.25; - color: #20a8d8; - background-color: #fff; - border: 1px solid #c8ced3; + height: calc(1.5em + 0.75rem); + content: "Browse"; + border-left: inherit; + border-radius: 0 0.25rem 0.25rem 0; + background-color: #ebedef; } -.page-link:hover { - z-index: 2; - color: #167495; - text-decoration: none; - background-color: #e4e7ea; - border-color: #c8ced3; +html:not([dir="rtl"]) .custom-file-label::after { + right: 0; } -.page-link:focus { - z-index: 2; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); +*[dir="rtl"] .custom-file-label::after { + left: 0; } -.page-item:first-child .page-link { - margin-left: 0; - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; +.custom-range { + width: 100%; + height: 1.4rem; + padding: 0; + background-color: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } -.page-item:last-child .page-link { - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; +.custom-range:focus { + outline: none; } -.page-item.active .page-link { - z-index: 1; - color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; +.custom-range:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px #ebedef, 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.page-item.disabled .page-link { - color: #73818f; - pointer-events: none; - cursor: auto; - background-color: #fff; - border-color: #c8ced3; +.custom-range:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px #ebedef, 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.pagination-lg .page-link { - padding: 0.75rem 1.5rem; - font-size: 1.09375rem; - line-height: 1.5; +.custom-range:focus::-ms-thumb { + box-shadow: 0 0 0 1px #ebedef, 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.pagination-lg .page-item:first-child .page-link { - border-top-left-radius: 0.3rem; - border-bottom-left-radius: 0.3rem; +.custom-range::-moz-focus-outer { + border: 0; } -.pagination-lg .page-item:last-child .page-link { - border-top-right-radius: 0.3rem; - border-bottom-right-radius: 0.3rem; +.custom-range::-webkit-slider-thumb { + width: 1rem; + height: 1rem; + margin-top: -0.25rem; + background-color: #321fdb; + border: 0; + border-radius: 1rem; + -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + -webkit-appearance: none; + appearance: none; } -.pagination-sm .page-link { - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; +@media (prefers-reduced-motion: reduce) { + .custom-range::-webkit-slider-thumb { + -webkit-transition: none; + transition: none; + } } -.pagination-sm .page-item:first-child .page-link { - border-top-left-radius: 0.2rem; - border-bottom-left-radius: 0.2rem; +.custom-range::-webkit-slider-thumb:active { + background-color: ghten(#321fdb, 35%); } -.pagination-sm .page-item:last-child .page-link { - border-top-right-radius: 0.2rem; - border-bottom-right-radius: 0.2rem; +.custom-range::-webkit-slider-runnable-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + border-color: transparent; + border-radius: 1rem; + background-color: #c4c9d0; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 75%; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25rem; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +.custom-range::-moz-range-thumb { + width: 1rem; + height: 1rem; + background-color: #321fdb; + border: 0; + border-radius: 1rem; + -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + -moz-appearance: none; + appearance: none; } @media (prefers-reduced-motion: reduce) { - .badge { + .custom-range::-moz-range-thumb { + -moz-transition: none; transition: none; } } -a.badge:hover, a.badge:focus { - text-decoration: none; -} - -.badge:empty { - display: none; +.custom-range::-moz-range-thumb:active { + background-color: ghten(#321fdb, 35%); } -.btn .badge { - position: relative; - top: -1px; +.custom-range::-moz-range-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: #c4c9d0; + border-color: transparent; + border-radius: 1rem; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.custom-range::-ms-thumb { + width: 1rem; + height: 1rem; + margin-top: 0; + margin-right: 0.2rem; + margin-left: 0.2rem; + background-color: #321fdb; + border: 0; + border-radius: 1rem; + -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + appearance: none; } -.badge-primary { - color: #fff; - background-color: #20a8d8; +@media (prefers-reduced-motion: reduce) { + .custom-range::-ms-thumb { + -ms-transition: none; + transition: none; + } } -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #1985ac; +.custom-range::-ms-thumb:active { + background-color: ghten(#321fdb, 35%); } -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +.custom-range::-ms-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: transparent; + border-color: transparent; + border-width: 0.5rem; } -.badge-secondary { - color: #23282c; - background-color: #c8ced3; +.custom-range::-ms-fill-lower,.custom-range::-ms-fill-upper { + background-color: #c4c9d0; + border-radius: 1rem; } -a.badge-secondary:hover, a.badge-secondary:focus { - color: #23282c; - background-color: #acb5bc; +.custom-range::-ms-fill-upper { + margin-right: 15px; } -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +.custom-range:disabled::-webkit-slider-thumb { + background-color: #9da5b1; } -.badge-success { - color: #fff; - background-color: #4dbd74; +.custom-range:disabled::-webkit-slider-runnable-track { + cursor: default; } -a.badge-success:hover, a.badge-success:focus { - color: #fff; - background-color: #3a9d5d; +.custom-range:disabled::-moz-range-thumb { + background-color: #9da5b1; } -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +.custom-range:disabled::-moz-range-track { + cursor: default; } -.badge-info { - color: #23282c; - background-color: #63c2de; +.custom-range:disabled::-ms-thumb { + background-color: #9da5b1; } -a.badge-info:hover, a.badge-info:focus { - color: #23282c; - background-color: #39b2d5; +.custom-control-label::before, +.custom-file-label, +.custom-select { + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); -} +@media (prefers-reduced-motion: reduce) { + .custom-control-label::before, + .custom-file-label, + .custom-select { + transition: none; + } +} -.badge-warning { - color: #23282c; - background-color: #ffc107; +.dropup, +.dropright, +.dropdown, +.dropleft { + position: relative; } -a.badge-warning:hover, a.badge-warning:focus { - color: #23282c; - background-color: #d39e00; +.dropdown-toggle { + white-space: nowrap; } -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.dropdown-toggle::after { + display: inline-block; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; } -.badge-danger { - color: #fff; - background-color: #f86c6b; +html:not([dir="rtl"]) .dropdown-toggle::after { + margin-left: 0.255em; } -a.badge-danger:hover, a.badge-danger:focus { - color: #fff; - background-color: #f63c3a; +*[dir="rtl"] .dropdown-toggle::after { + margin-right: 0.255em; } -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +html:not([dir="rtl"]) .dropdown-toggle:empty::after { + margin-left: 0; } -.badge-light { - color: #23282c; - background-color: #f0f3f5; +*[dir="rtl"] .dropdown-toggle:empty::after { + margin-right: 0; } -a.badge-light:hover, a.badge-light:focus { - color: #23282c; - background-color: #d1dbe1; +.dropdown-menu { + position: absolute; + top: 100%; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 0.875rem; + text-align: left; + list-style: none; + background-clip: padding-box; + border: 1px solid; + border-radius: 0.25rem; + color: #4f5d73; + background-color: #fff; + border-color: #d8dbe0; } -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +html:not([dir="rtl"]) .dropdown-menu { + left: 0; } -.badge-dark { - color: #fff; - background-color: #2f353a; +*[dir="rtl"] .dropdown-menu { + right: 0; } -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #181b1e; +html:not([dir="rtl"]) .dropdown-menu-left { + right: auto; + left: 0; } -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); +*[dir="rtl"] .dropdown-menu-left,html:not([dir="rtl"]) .dropdown-menu-right { + right: 0; + left: auto; } -.jumbotron { - padding: 2rem 1rem; - margin-bottom: 2rem; - background-color: #e4e7ea; - border-radius: 0.3rem; +*[dir="rtl"] .dropdown-menu-right { + right: auto; + left: 0; } @media (min-width: 576px) { - .jumbotron { - padding: 4rem 2rem; + html:not([dir="rtl"]) .dropdown-menu-sm-left { + right: auto; + left: 0; + } + *[dir="rtl"] .dropdown-menu-sm-left,html:not([dir="rtl"]) .dropdown-menu-sm-right { + right: 0; + left: auto; + } + *[dir="rtl"] .dropdown-menu-sm-right { + right: auto; + left: 0; } } -.jumbotron-fluid { - padding-right: 0; - padding-left: 0; - border-radius: 0; +@media (min-width: 768px) { + html:not([dir="rtl"]) .dropdown-menu-md-left { + right: auto; + left: 0; + } + *[dir="rtl"] .dropdown-menu-md-left,html:not([dir="rtl"]) .dropdown-menu-md-right { + right: 0; + left: auto; + } + *[dir="rtl"] .dropdown-menu-md-right { + right: auto; + left: 0; + } } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; +@media (min-width: 992px) { + html:not([dir="rtl"]) .dropdown-menu-lg-left { + right: auto; + left: 0; + } + *[dir="rtl"] .dropdown-menu-lg-left,html:not([dir="rtl"]) .dropdown-menu-lg-right { + right: 0; + left: auto; + } + *[dir="rtl"] .dropdown-menu-lg-right { + right: auto; + left: 0; + } } -.alert-heading { - color: inherit; +@media (min-width: 1200px) { + html:not([dir="rtl"]) .dropdown-menu-xl-left { + right: auto; + left: 0; + } + *[dir="rtl"] .dropdown-menu-xl-left,html:not([dir="rtl"]) .dropdown-menu-xl-right { + right: 0; + left: auto; + } + *[dir="rtl"] .dropdown-menu-xl-right { + right: auto; + left: 0; + } } -.alert-link { - font-weight: 700; +.dropup .dropdown-menu { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 0.125rem; } -.alert-dismissible { - padding-right: 3.8125rem; +.dropup .dropdown-toggle::after { + display: inline-block; + vertical-align: 0.255em; + content: ""; + border-top: 0; + border-right: 0.3em solid transparent; + border-bottom: 0.3em solid; + border-left: 0.3em solid transparent; } -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +html:not([dir="rtl"]) .dropup .dropdown-toggle::after { + margin-left: 0.255em; } -.alert-primary { - color: #115770; - background-color: #d2eef7; - border-color: #c1e7f4; +*[dir="rtl"] .dropup .dropdown-toggle::after { + margin-right: 0.255em; } -.alert-primary hr { - border-top-color: #abdff0; +html:not([dir="rtl"]) .dropup .dropdown-toggle:empty::after { + margin-left: 0; } -.alert-primary .alert-link { - color: #0a3544; +*[dir="rtl"] .dropup .dropdown-toggle:empty::after { + margin-right: 0; } -.alert-secondary { - color: #686b6e; - background-color: #f4f5f6; - border-color: #f0f1f3; +.dropright .dropdown-menu { + top: 0; + margin-top: 0; } -.alert-secondary hr { - border-top-color: #e2e4e8; +html:not([dir="rtl"]) .dropright .dropdown-menu { + right: auto; + left: 100%; + margin-left: 0.125rem; } -.alert-secondary .alert-link { - color: #4f5254; +*[dir="rtl"] .dropright .dropdown-menu { + right: 100%; + left: auto; + margin-right: 0.125rem; } -.alert-success { - color: #28623c; - background-color: #dbf2e3; - border-color: #cdedd8; +.dropright .dropdown-toggle::after { + display: inline-block; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; + vertical-align: 0; } -.alert-success hr { - border-top-color: #bae6c9; +html:not([dir="rtl"]) .dropright .dropdown-toggle::after { + margin-left: 0.255em; } -.alert-success .alert-link { - color: #193e26; +*[dir="rtl"] .dropright .dropdown-toggle::after { + margin-right: 0.255em; } -.alert-info { - color: #336573; - background-color: #e0f3f8; - border-color: #d3eef6; +html:not([dir="rtl"]) .dropright .dropdown-toggle:empty::after { + margin-left: 0; } -.alert-info hr { - border-top-color: #bee6f2; +*[dir="rtl"] .dropright .dropdown-toggle:empty::after { + margin-right: 0; } -.alert-info .alert-link { - color: #234650; +.dropleft .dropdown-menu { + top: 0; + margin-top: 0; } -.alert-warning { - color: #856404; - background-color: #fff3cd; - border-color: #ffeeba; +html:not([dir="rtl"]) .dropleft .dropdown-menu { + right: 100%; + left: auto; + margin-right: 0.125rem; } -.alert-warning hr { - border-top-color: #ffe8a1; +*[dir="rtl"] .dropleft .dropdown-menu { + right: auto; + left: 100%; + margin-left: 0.125rem; } -.alert-warning .alert-link { - color: #533f03; +.dropleft .dropdown-toggle::after { + display: inline-block; + vertical-align: 0.255em; + content: ""; + display: none; } -.alert-danger { - color: #813838; - background-color: #fee2e1; - border-color: #fdd6d6; +html:not([dir="rtl"]) .dropleft .dropdown-toggle::after { + margin-left: 0.255em; } -.alert-danger hr { - border-top-color: #fcbebe; +*[dir="rtl"] .dropleft .dropdown-toggle::after { + margin-right: 0.255em; } -.alert-danger .alert-link { - color: #5d2929; +.dropleft .dropdown-toggle::before { + display: inline-block; + margin-right: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0.3em solid; + border-bottom: 0.3em solid transparent; + vertical-align: 0; } -.alert-light { - color: #7d7e7f; - background-color: #fcfdfd; - border-color: #fbfcfc; +html:not([dir="rtl"]) .dropleft .dropdown-toggle:empty::after { + margin-left: 0; } -.alert-light hr { - border-top-color: #ecf1f1; +*[dir="rtl"] .dropleft .dropdown-toggle:empty::after { + margin-right: 0; } -.alert-light .alert-link { - color: #646565; +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] { + right: auto; + bottom: auto; } -.alert-dark { - color: #181c1e; - background-color: #d5d7d8; - border-color: #c5c6c8; +.dropdown-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid #d8dbe0; } -.alert-dark hr { - border-top-color: #b8b9bc; +.dropdown-item { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + width: 100%; + padding: 0.5rem 1.25rem; + clear: both; + font-weight: 400; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; + color: #4f5d73; } -.alert-dark .alert-link { - color: #010202; +.dropdown-item:hover, .dropdown-item:focus { + text-decoration: none; + color: #455164; + background-color: #ebedef; } -@-webkit-keyframes progress-bar-stripes { - from { - background-position: 1rem 0; - } - to { - background-position: 0 0; - } +.dropdown-item.active, .dropdown-item:active { + text-decoration: none; + color: #fff; + background-color: #321fdb; } -@keyframes progress-bar-stripes { - from { - background-position: 1rem 0; - } - to { - background-position: 0 0; - } +.dropdown-item.disabled, .dropdown-item:disabled { + pointer-events: none; + background-color: transparent; + color: #8a93a2; } -.progress { - display: -ms-flexbox; - display: flex; - height: 1rem; - overflow: hidden; - font-size: 0.65625rem; - background-color: #f0f3f5; - border-radius: 0.25rem; +.dropdown-menu.show { + display: block; } -.progress-bar { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - color: #fff; - text-align: center; +.dropdown-header { + margin-bottom: 0; + font-size: 0.765625rem; white-space: nowrap; - background-color: #20a8d8; - transition: width 0.6s ease; -} - -@media (prefers-reduced-motion: reduce) { - .progress-bar { - transition: none; - } -} - -.progress-bar-striped { - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-size: 1rem 1rem; -} - -.progress-bar-animated { - -webkit-animation: progress-bar-stripes 1s linear infinite; - animation: progress-bar-stripes 1s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .progress-bar-animated { - -webkit-animation: none; - animation: none; - } + color: #8a93a2; } -.media { - display: -ms-flexbox; - display: flex; - -ms-flex-align: start; - align-items: flex-start; +.dropdown-header,.dropdown-item-text { + display: block; + padding: 0.5rem 1.25rem; } -.media-body { - -ms-flex: 1; - flex: 1; +.dropdown-item-text,.c-footer { + color: #4f5d73; } -.list-group { +.c-footer { display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; + -ms-flex: 0 0 50px; + flex: 0 0 50px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; + height: 50px; + padding: 0 1rem; + background: #ebedef; + border-top: 1px solid #d8dbe0; } -.list-group-item-action { - width: 100%; - color: #5c6873; - text-align: inherit; +.c-footer[class*="bg-"] { + border-color: rgba(0, 0, 21, 0.1); } -.list-group-item-action:hover, .list-group-item-action:focus { - z-index: 1; - color: #5c6873; - text-decoration: none; - background-color: #f0f3f5; +.c-footer.c-footer-fixed { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; } -.list-group-item-action:active { - color: #23282c; - background-color: #e4e7ea; +.c-footer.c-footer-dark { + color: #fff; + background: #636f83; } -.list-group-item { - position: relative; +.form-control { display: block; - padding: 0.75rem 1.25rem; - margin-bottom: -1px; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + background-clip: padding-box; + border: 1px solid; + color: #768192; background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.125); + border-color: #d8dbe0; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } -.list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +@media (prefers-reduced-motion: reduce) { + .form-control { + transition: none; + } } -.list-group-item:last-child { - margin-bottom: 0; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; +.form-control::-ms-expand { + background-color: transparent; + border: 0; } -.list-group-item.disabled, .list-group-item:disabled { - color: #73818f; - pointer-events: none; - background-color: #fff; +.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #768192; } -.list-group-item.active { - z-index: 2; - color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; +.form-control:focus { + color: #768192; + background-color: #fff; + border-color: #958bef; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.list-group-horizontal { - -ms-flex-direction: row; - flex-direction: row; +.form-control::-webkit-input-placeholder { + color: #8a93a2; + opacity: 1; } -.list-group-horizontal .list-group-item { - margin-right: -1px; - margin-bottom: 0; +.form-control::-moz-placeholder { + color: #8a93a2; + opacity: 1; } -.list-group-horizontal .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-top-right-radius: 0; +.form-control:-ms-input-placeholder { + color: #8a93a2; + opacity: 1; } -.list-group-horizontal .list-group-item:last-child { - margin-right: 0; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0; +.form-control::-ms-input-placeholder { + color: #8a93a2; + opacity: 1; } -@media (min-width: 576px) { - .list-group-horizontal-sm { - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-sm .list-group-item { - margin-right: -1px; - margin-bottom: 0; - } - .list-group-horizontal-sm .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-top-right-radius: 0; - } - .list-group-horizontal-sm .list-group-item:last-child { - margin-right: 0; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0; - } +.form-control::placeholder { + color: #8a93a2; + opacity: 1; } -@media (min-width: 768px) { - .list-group-horizontal-md { - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-md .list-group-item { - margin-right: -1px; - margin-bottom: 0; - } - .list-group-horizontal-md .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-top-right-radius: 0; - } - .list-group-horizontal-md .list-group-item:last-child { - margin-right: 0; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0; - } +.form-control:disabled, .form-control[readonly] { + background-color: #d8dbe0; + opacity: 1; } -@media (min-width: 992px) { - .list-group-horizontal-lg { - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-lg .list-group-item { - margin-right: -1px; - margin-bottom: 0; - } - .list-group-horizontal-lg .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-top-right-radius: 0; - } - .list-group-horizontal-lg .list-group-item:last-child { - margin-right: 0; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0; - } +select.form-control:focus::-ms-value { + color: #768192; + background-color: #fff; } -@media (min-width: 1200px) { - .list-group-horizontal-xl { - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-xl .list-group-item { - margin-right: -1px; - margin-bottom: 0; - } - .list-group-horizontal-xl .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-top-right-radius: 0; - } - .list-group-horizontal-xl .list-group-item:last-child { - margin-right: 0; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0; - } +.form-control-file, +.form-control-range { + display: block; + width: 100%; } -.list-group-flush .list-group-item { - border-right: 0; - border-left: 0; - border-radius: 0; +.col-form-label { + padding-top: calc(0.375rem + 1px); + padding-bottom: calc(0.375rem + 1px); + margin-bottom: 0; + font-size: inherit; + line-height: 1.5; } -.list-group-flush .list-group-item:last-child { - margin-bottom: -1px; +.col-form-label-lg { + padding-top: calc(0.5rem + 1px); + padding-bottom: calc(0.5rem + 1px); + font-size: 1.09375rem; + line-height: 1.5; } -.list-group-flush:first-child .list-group-item:first-child { - border-top: 0; +.col-form-label-sm { + padding-top: calc(0.25rem + 1px); + padding-bottom: calc(0.25rem + 1px); + font-size: 0.765625rem; + line-height: 1.5; } -.list-group-flush:last-child .list-group-item:last-child { +.form-control-plaintext { + display: block; + width: 100%; + padding: 0.375rem 0; margin-bottom: 0; - border-bottom: 0; + font-size: 0.875rem; + line-height: 1.5; + background-color: transparent; + border: solid transparent; + border-width: 1px 0; + color: #4f5d73; } -.list-group-item-primary { - color: #115770; - background-color: #c1e7f4; -} +.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { + padding-right: 0; + padding-left: 0; +} -.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { - color: #115770; - background-color: #abdff0; +.form-control-sm { + height: calc(1.5em + 0.5rem + 2px); + padding: 0.25rem 0.5rem; + font-size: 0.765625rem; + line-height: 1.5; + border-radius: 0.2rem; } -.list-group-item-primary.list-group-item-action.active { - color: #fff; - background-color: #115770; - border-color: #115770; +.form-control-lg { + height: calc(1.5em + 1rem + 2px); + padding: 0.5rem 1rem; + font-size: 1.09375rem; + line-height: 1.5; + border-radius: 0.3rem; } -.list-group-item-secondary { - color: #686b6e; - background-color: #f0f1f3; +select.form-control[size], select.form-control[multiple],textarea.form-control { + height: auto; } -.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #686b6e; - background-color: #e2e4e8; +.form-group { + margin-bottom: 1rem; } -.list-group-item-secondary.list-group-item-action.active { - color: #fff; - background-color: #686b6e; - border-color: #686b6e; +.form-text { + display: block; + margin-top: 0.25rem; } -.list-group-item-success { - color: #28623c; - background-color: #cdedd8; +.form-row { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -5px; + margin-left: -5px; } -.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { - color: #28623c; - background-color: #bae6c9; +.form-row > .col, +.form-row > [class*="col-"] { + padding-right: 5px; + padding-left: 5px; } -.list-group-item-success.list-group-item-action.active { - color: #fff; - background-color: #28623c; - border-color: #28623c; +.form-check { + position: relative; + display: block; } -.list-group-item-info { - color: #336573; - background-color: #d3eef6; +html:not([dir="rtl"]) .form-check { + padding-left: 1.25rem; } -.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { - color: #336573; - background-color: #bee6f2; +*[dir="rtl"] .form-check { + padding-right: 1.25rem; } -.list-group-item-info.list-group-item-action.active { - color: #fff; - background-color: #336573; - border-color: #336573; +.form-check-input { + position: absolute; + margin-top: 0.3rem; } -.list-group-item-warning { - color: #856404; - background-color: #ffeeba; +html:not([dir="rtl"]) .form-check-input { + margin-left: -1.25rem; } -.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { - color: #856404; - background-color: #ffe8a1; +*[dir="rtl"] .form-check-input { + margin-right: -1.25rem; } -.list-group-item-warning.list-group-item-action.active { - color: #fff; - background-color: #856404; - border-color: #856404; +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { + color: #768192; } -.list-group-item-danger { - color: #813838; - background-color: #fdd6d6; +.form-check-label { + margin-bottom: 0; } -.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { - color: #813838; - background-color: #fcbebe; +.form-check-inline { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; } -.list-group-item-danger.list-group-item-action.active { - color: #fff; - background-color: #813838; - border-color: #813838; +html:not([dir="rtl"]) .form-check-inline { + padding-left: 0; + margin-right: 0.75rem; } -.list-group-item-light { - color: #7d7e7f; - background-color: #fbfcfc; +*[dir="rtl"] .form-check-inline { + padding-right: 0; + margin-left: 0.75rem; } -.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { - color: #7d7e7f; - background-color: #ecf1f1; +.form-check-inline .form-check-input { + position: static; + margin-top: 0; } -.list-group-item-light.list-group-item-action.active { - color: #fff; - background-color: #7d7e7f; - border-color: #7d7e7f; +html:not([dir="rtl"]) .form-check-inline .form-check-input { + margin-right: 0.3125rem; + margin-left: 0; } -.list-group-item-dark { - color: #181c1e; - background-color: #c5c6c8; +*[dir="rtl"] .form-check-inline .form-check-input { + margin-right: 0; + margin-left: 0.3125rem; } -.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: #181c1e; - background-color: #b8b9bc; +.valid-feedback { + display: none; + width: 100%; + margin-top: 0.25rem; + font-size: 80%; + color: #2eb85c; } -.list-group-item-dark.list-group-item-action.active { +.valid-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + max-width: 100%; + padding: 0.25rem 0.5rem; + margin-top: .1rem; + font-size: 0.765625rem; + line-height: 1.5; color: #fff; - background-color: #181c1e; - border-color: #181c1e; + background-color: rgba(46, 184, 92, 0.9); + border-radius: 0.25rem; } -.close { - float: right; - font-size: 1.3125rem; - font-weight: 700; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - opacity: .5; +.was-validated :valid ~ .valid-feedback, +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { + display: block; } -.close:hover { - color: #000; - text-decoration: none; +.was-validated .form-control:valid, .form-control.is-valid { + border-color: #2eb85c; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%232eb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { - opacity: .75; +html:not([dir="rtl"]) .was-validated .form-control:valid, html:not([dir="rtl"]) .form-control.is-valid { + padding-right: calc(1.5em + 0.75rem); + background-position: right calc(0.375em + 0.1875rem) center; } -button.close { - padding: 0; - background-color: transparent; - border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; +*[dir="rtl"] .was-validated .form-control:valid, *[dir="rtl"] .form-control.is-valid { + padding-left: calc(1.5em + 0.75rem); + background-position: left calc(0.375em + 0.1875rem) center; } -a.close.disabled { - pointer-events: none; +.was-validated .form-control:valid:focus, .form-control.is-valid:focus { + border-color: #2eb85c; + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.25); } -.toast { - max-width: 350px; - overflow: hidden; - font-size: 0.875rem; - background-color: rgba(255, 255, 255, 0.85); - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - opacity: 0; - border-radius: 0.25rem; +html:not([dir="rtl"]) .was-validated textarea.form-control:valid, html:not([dir="rtl"]) textarea.form-control.is-valid { + padding-right: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.toast:not(:last-child) { - margin-bottom: 0.75rem; +*[dir="rtl"] .was-validated textarea.form-control:valid, *[dir="rtl"] textarea.form-control.is-valid { + padding-left: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) left calc(0.375em + 0.1875rem); } -.toast.showing { - opacity: 1; +.was-validated .custom-select:valid, .custom-select.is-valid { + border-color: #2eb85c; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23636f83' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%232eb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.toast.show { +html:not([dir="rtl"]) .was-validated .custom-select:valid, html:not([dir="rtl"]) .custom-select.is-valid { + padding-right: calc(0.75em + 2.3125rem); +} + +*[dir="rtl"] .was-validated .custom-select:valid, *[dir="rtl"] .custom-select.is-valid { + padding-left: calc(0.75em + 2.3125rem); +} + +.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { + border-color: #2eb85c; + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.25); +} + +.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { + color: #2eb85c; +} + +.was-validated .form-check-input:valid ~ .valid-feedback, +.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { display: block; - opacity: 1; } -.toast.hide { - display: none; +.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { + color: #2eb85c; } -.toast-header { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - padding: 0.25rem 0.75rem; - color: #73818f; - background-color: rgba(255, 255, 255, 0.85); - background-clip: padding-box; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); +.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { + border-color: #2eb85c; } -.toast-body { - padding: 0.75rem; +.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { + border-color: #48d176; + background-color: #48d176; } -.modal-open { - overflow: hidden; +.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.25); } -.modal-open .modal { - overflow-x: hidden; - overflow-y: auto; +.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { + border-color: #2eb85c; } -.modal { - position: fixed; - top: 0; - left: 0; - z-index: 1050; +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { + border-color: #2eb85c; + box-shadow: 0 0 0 0.2rem rgba(46, 184, 92, 0.25); +} + +.invalid-feedback { display: none; width: 100%; - height: 100%; - overflow: hidden; - outline: 0; + margin-top: 0.25rem; + font-size: 80%; + color: #e55353; } -.modal-dialog { - position: relative; - width: auto; - margin: 0.5rem; - pointer-events: none; +.invalid-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + max-width: 100%; + padding: 0.25rem 0.5rem; + margin-top: .1rem; + font-size: 0.765625rem; + line-height: 1.5; + color: #fff; + background-color: rgba(229, 83, 83, 0.9); + border-radius: 0.25rem; } -.modal.fade .modal-dialog { - transition: -webkit-transform 0.3s ease-out; - transition: transform 0.3s ease-out; - transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; - -webkit-transform: translate(0, -50px); - transform: translate(0, -50px); +.was-validated :invalid ~ .invalid-feedback, +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { + display: block; } -@media (prefers-reduced-motion: reduce) { - .modal.fade .modal-dialog { - transition: none; - } +.was-validated .form-control:invalid, .form-control.is-invalid { + border-color: #e55353; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e55353' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e55353' stroke='none'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.modal.show .modal-dialog { - -webkit-transform: none; - transform: none; +html:not([dir="rtl"]) .was-validated .form-control:invalid, html:not([dir="rtl"]) .form-control.is-invalid { + padding-right: calc(1.5em + 0.75rem); + background-position: right calc(0.375em + 0.1875rem) center; } -.modal-dialog-scrollable { - display: -ms-flexbox; - display: flex; - max-height: calc(100% - 1rem); +*[dir="rtl"] .was-validated .form-control:invalid, *[dir="rtl"] .form-control.is-invalid { + padding-left: calc(1.5em + 0.75rem); + background-position: left calc(0.375em + 0.1875rem) center; } -.modal-dialog-scrollable .modal-content { - max-height: calc(100vh - 1rem); - overflow: hidden; +.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + border-color: #e55353; + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.25); } -.modal-dialog-scrollable .modal-header, -.modal-dialog-scrollable .modal-footer { - -ms-flex-negative: 0; - flex-shrink: 0; +html:not([dir="rtl"]) .was-validated textarea.form-control:invalid, html:not([dir="rtl"]) textarea.form-control.is-invalid { + padding-right: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.modal-dialog-scrollable .modal-body { - overflow-y: auto; +*[dir="rtl"] .was-validated textarea.form-control:invalid, *[dir="rtl"] textarea.form-control.is-invalid { + padding-left: calc(1.5em + 0.75rem); + background-position: top calc(0.375em + 0.1875rem) left calc(0.375em + 0.1875rem); } -.modal-dialog-centered { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - min-height: calc(100% - 1rem); +.was-validated .custom-select:invalid, .custom-select.is-invalid { + border-color: #e55353; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23636f83' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e55353' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e55353' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.modal-dialog-centered::before { - display: block; - height: calc(100vh - 1rem); - content: ""; -} - -.modal-dialog-centered.modal-dialog-scrollable { - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - height: 100%; +html:not([dir="rtl"]) .was-validated .custom-select:invalid, html:not([dir="rtl"]) .custom-select.is-invalid { + padding-right: calc(0.75em + 2.3125rem); } -.modal-dialog-centered.modal-dialog-scrollable .modal-content { - max-height: none; +*[dir="rtl"] .was-validated .custom-select:invalid, *[dir="rtl"] .custom-select.is-invalid { + padding-left: calc(0.75em + 2.3125rem); } -.modal-dialog-centered.modal-dialog-scrollable::before { - content: none; +.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { + border-color: #e55353; + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.25); } -.modal-content { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - width: 100%; - pointer-events: auto; - background-color: #fff; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 0.3rem; - outline: 0; +.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { + color: #e55353; } -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - z-index: 1040; - width: 100vw; - height: 100vh; - background-color: #000; +.was-validated .form-check-input:invalid ~ .invalid-feedback, +.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { + display: block; } -.modal-backdrop.fade { - opacity: 0; +.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { + color: #e55353; } -.modal-backdrop.show { - opacity: 0.5; +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { + border-color: #e55353; } -.modal-header { - display: -ms-flexbox; - display: flex; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 1rem 1rem; - border-bottom: 1px solid #c8ced3; - border-top-left-radius: 0.3rem; - border-top-right-radius: 0.3rem; +.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { + border-color: #ec7f7f; + background-color: #ec7f7f; } -.modal-header .close { - padding: 1rem 1rem; - margin: -1rem -1rem -1rem auto; +.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.25); } -.modal-title { - margin-bottom: 0; - line-height: 1.5; +.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { + border-color: #e55353; } -.modal-body { - position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: 1rem; +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { + border-color: #e55353; + box-shadow: 0 0 0 0.2rem rgba(229, 83, 83, 0.25); } -.modal-footer { +.form-inline { display: -ms-flexbox; display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; -ms-flex-align: center; align-items: center; - -ms-flex-pack: end; - justify-content: flex-end; - padding: 1rem; - border-top: 1px solid #c8ced3; - border-bottom-right-radius: 0.3rem; - border-bottom-left-radius: 0.3rem; -} - -.modal-footer > :not(:first-child) { - margin-left: .25rem; -} - -.modal-footer > :not(:last-child) { - margin-right: .25rem; } -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; +.form-inline .form-check { + width: 100%; } @media (min-width: 576px) { - .modal-dialog { - max-width: 500px; - margin: 1.75rem auto; + .form-inline label { + -ms-flex-align: center; + -ms-flex-pack: center; + justify-content: center; } - .modal-dialog-scrollable { - max-height: calc(100% - 3.5rem); + .form-inline label,.form-inline .form-group { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + margin-bottom: 0; } - .modal-dialog-scrollable .modal-content { - max-height: calc(100vh - 3.5rem); + .form-inline .form-group { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-align: center; } - .modal-dialog-centered { - min-height: calc(100% - 3.5rem); + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; } - .modal-dialog-centered::before { - height: calc(100vh - 3.5rem); + .form-inline .form-control-plaintext { + display: inline-block; } - .modal-sm { - max-width: 300px; + .form-inline .input-group, + .form-inline .custom-select { + width: auto; + } + .form-inline .form-check { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; + } + html:not([dir="rtl"]) .form-inline .form-check { + padding-left: 0; + } + *[dir="rtl"] .form-inline .form-check { + padding-right: 0; + } + .form-inline .form-check-input { + position: relative; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-top: 0; + } + html:not([dir="rtl"]) .form-inline .form-check-input { + margin-right: 0.25rem; + margin-left: 0; + } + *[dir="rtl"] .form-inline .form-check-input { + margin-right: 0; + margin-left: 0.25rem; + } + .form-inline .custom-control { + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + } + .form-inline .custom-control-label { + margin-bottom: 0; + } +} + +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; } } @media (min-width: 992px) { - .modal-lg, - .modal-xl { - max-width: 800px; + .container { + max-width: 960px; } } @media (min-width: 1200px) { - .modal-xl { + .container { max-width: 1140px; } } -.tooltip { - position: absolute; - z-index: 1070; - display: block; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - word-spacing: normal; - white-space: normal; - line-break: auto; - font-size: 0.765625rem; - word-wrap: break-word; - opacity: 0; +.container-fluid, .container-sm, .container-md, .container-lg, .container-xl { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; } -.tooltip.show { - opacity: 0.9; +@media (min-width: 576px) { + .container, .container-sm { + max-width: 540px; + } } -.tooltip .arrow { - position: absolute; - display: block; - width: 0.8rem; - height: 0.4rem; +@media (min-width: 768px) { + .container, .container-sm, .container-md { + max-width: 720px; + } } -.tooltip .arrow::before { - position: absolute; - content: ""; - border-color: transparent; - border-style: solid; +@media (min-width: 992px) { + .container, .container-sm, .container-md, .container-lg { + max-width: 960px; + } } -.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { - padding: 0.4rem 0; +@media (min-width: 1200px) { + .container, .container-sm, .container-md, .container-lg, .container-xl { + max-width: 1140px; + } } -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { - bottom: 0; +.row { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; } -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { - top: 0; - border-width: 0.4rem 0.4rem 0; - border-top-color: #000; +.no-gutters { + margin-right: 0; + margin-left: 0; } -.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { - padding: 0 0.4rem; +.no-gutters > .col, +.no-gutters > [class*="col-"] { + padding-right: 0; + padding-left: 0; } -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { - left: 0; - width: 0.4rem; - height: 0.8rem; +.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, +.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, +.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, +.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, +.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; } -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { - right: 0; - border-width: 0.4rem 0.4rem 0.4rem 0; - border-right-color: #000; +.col { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; } -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { - padding: 0.4rem 0; +.row-cols-1 > * { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { - top: 0; +.row-cols-2 > * { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { - bottom: 0; - border-width: 0 0.4rem 0.4rem; - border-bottom-color: #000; +.row-cols-3 > * { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } -.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { - padding: 0 0.4rem; +.row-cols-4 > * { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { - right: 0; - width: 0.4rem; - height: 0.8rem; +.row-cols-5 > * { + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { - left: 0; - border-width: 0.4rem 0 0.4rem 0.4rem; - border-left-color: #000; +.row-cols-6 > * { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } -.tooltip-inner { - max-width: 200px; - padding: 0.25rem 0.5rem; - color: #fff; - text-align: center; - background-color: #000; - border-radius: 0.25rem; +.col-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; } -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1060; - display: block; - max-width: 276px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - word-spacing: normal; - white-space: normal; - line-break: auto; - font-size: 0.765625rem; - word-wrap: break-word; - background-color: #fff; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 0.3rem; +.col-1 { + -ms-flex: 0 0 8.33333333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } -.popover .arrow { - position: absolute; - display: block; - width: 1rem; - height: 0.5rem; - margin: 0 0.3rem; +.col-2 { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } -.popover .arrow::before, .popover .arrow::after { - position: absolute; - display: block; - content: ""; - border-color: transparent; - border-style: solid; +.col-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } -.bs-popover-top, .bs-popover-auto[x-placement^="top"] { - margin-bottom: 0.5rem; +.col-4 { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } -.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { - bottom: calc((0.5rem + 1px) * -1); +.col-5 { + -ms-flex: 0 0 41.66666667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } -.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { - bottom: 0; - border-width: 0.5rem 0.5rem 0; - border-top-color: rgba(0, 0, 0, 0.25); +.col-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } -.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { - bottom: 1px; - border-width: 0.5rem 0.5rem 0; - border-top-color: #fff; +.col-7 { + -ms-flex: 0 0 58.33333333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } -.bs-popover-right, .bs-popover-auto[x-placement^="right"] { - margin-left: 0.5rem; +.col-8 { + -ms-flex: 0 0 66.66666667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } -.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { - left: calc((0.5rem + 1px) * -1); - width: 0.5rem; - height: 1rem; - margin: 0.3rem 0; +.col-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } -.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { - left: 0; - border-width: 0.5rem 0.5rem 0.5rem 0; - border-right-color: rgba(0, 0, 0, 0.25); +.col-10 { + -ms-flex: 0 0 83.33333333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } -.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { - left: 1px; - border-width: 0.5rem 0.5rem 0.5rem 0; - border-right-color: #fff; +.col-11 { + -ms-flex: 0 0 91.66666667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } -.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { - margin-top: 0.5rem; +.col-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } -.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { - top: calc((0.5rem + 1px) * -1); +.order-first { + -ms-flex-order: -1; + order: -1; } -.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { - top: 0; - border-width: 0 0.5rem 0.5rem 0.5rem; - border-bottom-color: rgba(0, 0, 0, 0.25); +.order-last { + -ms-flex-order: 13; + order: 13; } -.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { - top: 1px; - border-width: 0 0.5rem 0.5rem 0.5rem; - border-bottom-color: #fff; +.order-0 { + -ms-flex-order: 0; + order: 0; } -.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { - position: absolute; - top: 0; - left: 50%; - display: block; - width: 1rem; - margin-left: -0.5rem; - content: ""; - border-bottom: 1px solid #f7f7f7; +.order-1 { + -ms-flex-order: 1; + order: 1; } -.bs-popover-left, .bs-popover-auto[x-placement^="left"] { - margin-right: 0.5rem; +.order-2 { + -ms-flex-order: 2; + order: 2; } -.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { - right: calc((0.5rem + 1px) * -1); - width: 0.5rem; - height: 1rem; - margin: 0.3rem 0; +.order-3 { + -ms-flex-order: 3; + order: 3; } -.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { - right: 0; - border-width: 0.5rem 0 0.5rem 0.5rem; - border-left-color: rgba(0, 0, 0, 0.25); +.order-4 { + -ms-flex-order: 4; + order: 4; } -.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { - right: 1px; - border-width: 0.5rem 0 0.5rem 0.5rem; - border-left-color: #fff; +.order-5 { + -ms-flex-order: 5; + order: 5; } -.popover-header { - padding: 0.5rem 0.75rem; - margin-bottom: 0; - font-size: 0.875rem; - background-color: #f7f7f7; - border-bottom: 1px solid #ebebeb; - border-top-left-radius: calc(0.3rem - 1px); - border-top-right-radius: calc(0.3rem - 1px); +.order-6 { + -ms-flex-order: 6; + order: 6; } -.popover-header:empty { - display: none; +.order-7 { + -ms-flex-order: 7; + order: 7; } -.popover-body { - padding: 0.5rem 0.75rem; - color: #23282c; +.order-8 { + -ms-flex-order: 8; + order: 8; } -.carousel { - position: relative; +.order-9 { + -ms-flex-order: 9; + order: 9; } -.carousel.pointer-event { - -ms-touch-action: pan-y; - touch-action: pan-y; +.order-10 { + -ms-flex-order: 10; + order: 10; } -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; +.order-11 { + -ms-flex-order: 11; + order: 11; } -.carousel-inner::after { - display: block; - clear: both; - content: ""; +.order-12 { + -ms-flex-order: 12; + order: 12; } -.carousel-item { - position: relative; - display: none; - float: left; - width: 100%; - margin-right: -100%; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transition: -webkit-transform 0.6s ease-in-out; - transition: transform 0.6s ease-in-out; - transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; -} - -@media (prefers-reduced-motion: reduce) { - .carousel-item { - transition: none; - } -} - -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; -} - -.carousel-item-next:not(.carousel-item-left), -.active.carousel-item-right { - -webkit-transform: translateX(100%); - transform: translateX(100%); -} - -.carousel-item-prev:not(.carousel-item-right), -.active.carousel-item-left { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); -} - -.carousel-fade .carousel-item { - opacity: 0; - transition-property: opacity; - -webkit-transform: none; - transform: none; -} - -.carousel-fade .carousel-item.active, -.carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right { - z-index: 1; - opacity: 1; -} - -.carousel-fade .active.carousel-item-left, -.carousel-fade .active.carousel-item-right { - z-index: 0; - opacity: 0; - transition: 0s 0.6s opacity; -} - -@media (prefers-reduced-motion: reduce) { - .carousel-fade .active.carousel-item-left, - .carousel-fade .active.carousel-item-right { - transition: none; - } +.offset-1 { + margin-left: 8.33333333%; } -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 15%; - color: #fff; - text-align: center; - opacity: 0.5; - transition: opacity 0.15s ease; +.offset-2 { + margin-left: 16.66666667%; } -@media (prefers-reduced-motion: reduce) { - .carousel-control-prev, - .carousel-control-next { - transition: none; - } +.offset-3 { + margin-left: 25%; } -.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-next:hover, -.carousel-control-next:focus { - color: #fff; - text-decoration: none; - outline: 0; - opacity: 0.9; +.offset-4 { + margin-left: 33.33333333%; } -.carousel-control-prev { - left: 0; +.offset-5 { + margin-left: 41.66666667%; } -.carousel-control-next { - right: 0; +.offset-6 { + margin-left: 50%; } -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: 20px; - height: 20px; - background: no-repeat 50% / 100% 100%; +.offset-7 { + margin-left: 58.33333333%; } -.carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); +.offset-8 { + margin-left: 66.66666667%; } -.carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); +.offset-9 { + margin-left: 75%; } -.carousel-indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 15; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - padding-left: 0; - margin-right: 15%; - margin-left: 15%; - list-style: none; +.offset-10 { + margin-left: 83.33333333%; } -.carousel-indicators li { - box-sizing: content-box; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - width: 30px; - height: 3px; - margin-right: 3px; - margin-left: 3px; - text-indent: -999px; - cursor: pointer; - background-color: #fff; - background-clip: padding-box; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - opacity: .5; - transition: opacity 0.6s ease; +.offset-11 { + margin-left: 91.66666667%; } -@media (prefers-reduced-motion: reduce) { - .carousel-indicators li { - transition: none; +@media (min-width: 576px) { + .col-sm { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; } -} - -.carousel-indicators .active { - opacity: 1; -} - -.carousel-caption { - position: absolute; - right: 15%; - bottom: 20px; - left: 15%; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: #fff; - text-align: center; -} - -@-webkit-keyframes spinner-border { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + .row-cols-sm-1 > * { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } -} - -@keyframes spinner-border { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + .row-cols-sm-2 > * { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } -} - -.spinner-border { - display: inline-block; - width: 2rem; - height: 2rem; - vertical-align: text-bottom; - border: 0.25em solid currentColor; - border-right-color: transparent; - border-radius: 50%; - -webkit-animation: spinner-border .75s linear infinite; - animation: spinner-border .75s linear infinite; -} - -.spinner-border-sm { - width: 1rem; - height: 1rem; - border-width: 0.2em; -} - -@-webkit-keyframes spinner-grow { - 0% { - -webkit-transform: scale(0); - transform: scale(0); + .row-cols-sm-3 > * { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - 50% { - opacity: 1; + .row-cols-sm-4 > * { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } -} - -@keyframes spinner-grow { - 0% { - -webkit-transform: scale(0); - transform: scale(0); + .row-cols-sm-5 > * { + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } - 50% { - opacity: 1; + .row-cols-sm-6 > * { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } -} - -.spinner-grow { - display: inline-block; - width: 2rem; - height: 2rem; - vertical-align: text-bottom; - background-color: currentColor; - border-radius: 50%; - opacity: 0; - -webkit-animation: spinner-grow .75s linear infinite; - animation: spinner-grow .75s linear infinite; -} - -.spinner-grow-sm { - width: 1rem; - height: 1rem; -} - -.align-baseline { - vertical-align: baseline !important; -} - -.align-top { - vertical-align: top !important; -} - -.align-middle { - vertical-align: middle !important; -} - -.align-bottom { - vertical-align: bottom !important; -} - -.align-text-bottom { - vertical-align: text-bottom !important; -} - -.align-text-top { - vertical-align: text-top !important; -} - -.bg-primary { - background-color: #20a8d8 !important; -} - -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #1985ac !important; -} - -.bg-secondary { - background-color: #c8ced3 !important; -} - -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #acb5bc !important; -} - -.bg-success { - background-color: #4dbd74 !important; -} - -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #3a9d5d !important; -} - -.bg-info { - background-color: #63c2de !important; -} - -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #39b2d5 !important; -} - -.bg-warning { - background-color: #ffc107 !important; -} - -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #d39e00 !important; -} - -.bg-danger { - background-color: #f86c6b !important; -} - -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #f63c3a !important; -} - -.bg-light { - background-color: #f0f3f5 !important; -} - -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #d1dbe1 !important; -} - -.bg-dark { - background-color: #2f353a !important; -} - -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #181b1e !important; -} - -.bg-white { - background-color: #fff !important; -} - -.bg-transparent { - background-color: transparent !important; -} - -.border { - border: 1px solid #c8ced3 !important; -} - -.border-top { - border-top: 1px solid #c8ced3 !important; -} - -.border-right { - border-right: 1px solid #c8ced3 !important; -} - -.border-bottom { - border-bottom: 1px solid #c8ced3 !important; -} - -.border-left { - border-left: 1px solid #c8ced3 !important; -} - -.border-0 { - border: 0 !important; -} - -.border-top-0 { - border-top: 0 !important; -} - -.border-right-0 { - border-right: 0 !important; -} - -.border-bottom-0 { - border-bottom: 0 !important; -} - -.border-left-0 { - border-left: 0 !important; -} - -.border-primary { - border-color: #20a8d8 !important; -} - -.border-secondary { - border-color: #c8ced3 !important; -} - -.border-success { - border-color: #4dbd74 !important; -} - -.border-info { - border-color: #63c2de !important; -} - -.border-warning { - border-color: #ffc107 !important; -} - -.border-danger { - border-color: #f86c6b !important; -} - -.border-light { - border-color: #f0f3f5 !important; -} - -.border-dark { - border-color: #2f353a !important; -} - -.border-white { - border-color: #fff !important; -} - -.rounded-sm { - border-radius: 0.2rem !important; -} - -.rounded { - border-radius: 0.25rem !important; -} - -.rounded-top { - border-top-left-radius: 0.25rem !important; - border-top-right-radius: 0.25rem !important; -} - -.rounded-right { - border-top-right-radius: 0.25rem !important; - border-bottom-right-radius: 0.25rem !important; -} - -.rounded-bottom { - border-bottom-right-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; -} - -.rounded-left { - border-top-left-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; -} - -.rounded-lg { - border-radius: 0.3rem !important; -} - -.rounded-circle { - border-radius: 50% !important; -} - -.rounded-pill { - border-radius: 50rem !important; -} - -.rounded-0 { - border-radius: 0 !important; -} - -.clearfix::after { - display: block; - clear: both; - content: ""; -} - -.d-none { - display: none !important; -} - -.d-inline { - display: inline !important; -} - -.d-inline-block { - display: inline-block !important; -} - -.d-block { - display: block !important; -} - -.d-table { - display: table !important; -} - -.d-table-row { - display: table-row !important; -} - -.d-table-cell { - display: table-cell !important; -} - -.d-flex { - display: -ms-flexbox !important; - display: flex !important; -} - -.d-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; -} - -@media (min-width: 576px) { - .d-sm-none { - display: none !important; + .col-sm-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; } - .d-sm-inline { - display: inline !important; + .col-sm-1 { + -ms-flex: 0 0 8.33333333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } - .d-sm-inline-block { - display: inline-block !important; + .col-sm-2 { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .d-sm-block { - display: block !important; + .col-sm-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .d-sm-table { - display: table !important; + .col-sm-4 { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .d-sm-table-row { - display: table-row !important; + .col-sm-5 { + -ms-flex: 0 0 41.66666667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } - .d-sm-table-cell { - display: table-cell !important; + .col-sm-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .d-sm-flex { - display: -ms-flexbox !important; - display: flex !important; + .col-sm-7 { + -ms-flex: 0 0 58.33333333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } - .d-sm-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; + .col-sm-8 { + -ms-flex: 0 0 66.66666667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } -} - -@media (min-width: 768px) { - .d-md-none { - display: none !important; + .col-sm-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } - .d-md-inline { - display: inline !important; + .col-sm-10 { + -ms-flex: 0 0 83.33333333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } - .d-md-inline-block { - display: inline-block !important; + .col-sm-11 { + -ms-flex: 0 0 91.66666667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } - .d-md-block { - display: block !important; + .col-sm-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .d-md-table { - display: table !important; + .order-sm-first { + -ms-flex-order: -1; + order: -1; } - .d-md-table-row { - display: table-row !important; + .order-sm-last { + -ms-flex-order: 13; + order: 13; } - .d-md-table-cell { - display: table-cell !important; + .order-sm-0 { + -ms-flex-order: 0; + order: 0; } - .d-md-flex { - display: -ms-flexbox !important; - display: flex !important; + .order-sm-1 { + -ms-flex-order: 1; + order: 1; } - .d-md-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; + .order-sm-2 { + -ms-flex-order: 2; + order: 2; } -} - -@media (min-width: 992px) { - .d-lg-none { - display: none !important; + .order-sm-3 { + -ms-flex-order: 3; + order: 3; } - .d-lg-inline { - display: inline !important; + .order-sm-4 { + -ms-flex-order: 4; + order: 4; } - .d-lg-inline-block { - display: inline-block !important; + .order-sm-5 { + -ms-flex-order: 5; + order: 5; } - .d-lg-block { - display: block !important; + .order-sm-6 { + -ms-flex-order: 6; + order: 6; } - .d-lg-table { - display: table !important; + .order-sm-7 { + -ms-flex-order: 7; + order: 7; } - .d-lg-table-row { - display: table-row !important; + .order-sm-8 { + -ms-flex-order: 8; + order: 8; } - .d-lg-table-cell { - display: table-cell !important; + .order-sm-9 { + -ms-flex-order: 9; + order: 9; } - .d-lg-flex { - display: -ms-flexbox !important; - display: flex !important; + .order-sm-10 { + -ms-flex-order: 10; + order: 10; } - .d-lg-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; + .order-sm-11 { + -ms-flex-order: 11; + order: 11; } -} - -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; + .order-sm-12 { + -ms-flex-order: 12; + order: 12; } - .d-xl-inline { - display: inline !important; + .offset-sm-0 { + margin-left: 0; } - .d-xl-inline-block { - display: inline-block !important; + .offset-sm-1 { + margin-left: 8.33333333%; } - .d-xl-block { - display: block !important; + .offset-sm-2 { + margin-left: 16.66666667%; } - .d-xl-table { - display: table !important; + .offset-sm-3 { + margin-left: 25%; } - .d-xl-table-row { - display: table-row !important; + .offset-sm-4 { + margin-left: 33.33333333%; } - .d-xl-table-cell { - display: table-cell !important; + .offset-sm-5 { + margin-left: 41.66666667%; } - .d-xl-flex { - display: -ms-flexbox !important; - display: flex !important; + .offset-sm-6 { + margin-left: 50%; } - .d-xl-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; + .offset-sm-7 { + margin-left: 58.33333333%; + } + .offset-sm-8 { + margin-left: 66.66666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.33333333%; + } + .offset-sm-11 { + margin-left: 91.66666667%; } } -@media print { - .d-print-none { - display: none !important; +@media (min-width: 768px) { + .col-md { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; } - .d-print-inline { - display: inline !important; + .row-cols-md-1 > * { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .d-print-inline-block { - display: inline-block !important; + .row-cols-md-2 > * { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .d-print-block { - display: block !important; + .row-cols-md-3 > * { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .d-print-table { - display: table !important; + .row-cols-md-4 > * { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .d-print-table-row { - display: table-row !important; + .row-cols-md-5 > * { + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } - .d-print-table-cell { - display: table-cell !important; + .row-cols-md-6 > * { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .d-print-flex { - display: -ms-flexbox !important; - display: flex !important; + .col-md-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; } - .d-print-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; + .col-md-1 { + -ms-flex: 0 0 8.33333333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } -} - -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; -} - -.embed-responsive::before { - display: block; - content: ""; -} - -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; -} - -.embed-responsive-21by9::before { - padding-top: 42.857143%; -} - -.embed-responsive-16by9::before { - padding-top: 56.25%; -} - -.embed-responsive-4by3::before { - padding-top: 75%; -} - -.embed-responsive-1by1::before { - padding-top: 100%; -} - -.embed-responsive-21by9::before { - padding-top: 42.857143%; -} - -.embed-responsive-16by9::before { - padding-top: 56.25%; -} - -.embed-responsive-4by3::before { - padding-top: 75%; -} - -.embed-responsive-1by1::before { - padding-top: 100%; -} - -.flex-row { - -ms-flex-direction: row !important; - flex-direction: row !important; -} - -.flex-column { - -ms-flex-direction: column !important; - flex-direction: column !important; -} - -.flex-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; -} - -.flex-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; -} - -.flex-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; -} - -.flex-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; -} - -.flex-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; -} - -.flex-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; -} - -.flex-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; -} - -.flex-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; -} - -.flex-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; -} - -.flex-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; -} - -.justify-content-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; -} - -.justify-content-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; -} - -.justify-content-center { - -ms-flex-pack: center !important; - justify-content: center !important; -} - -.justify-content-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; -} - -.justify-content-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; -} - -.align-items-start { - -ms-flex-align: start !important; - align-items: flex-start !important; -} - -.align-items-end { - -ms-flex-align: end !important; - align-items: flex-end !important; -} - -.align-items-center { - -ms-flex-align: center !important; - align-items: center !important; -} - -.align-items-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; -} - -.align-items-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; -} - -.align-content-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; -} - -.align-content-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; -} - -.align-content-center { - -ms-flex-line-pack: center !important; - align-content: center !important; -} - -.align-content-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; -} - -.align-content-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; -} - -.align-content-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; -} - -.align-self-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; -} - -.align-self-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; -} - -.align-self-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; -} - -.align-self-center { - -ms-flex-item-align: center !important; - align-self: center !important; -} - -.align-self-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; -} - -.align-self-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; -} - -@media (min-width: 576px) { - .flex-sm-row { - -ms-flex-direction: row !important; - flex-direction: row !important; + .col-md-2 { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .flex-sm-column { - -ms-flex-direction: column !important; - flex-direction: column !important; + .col-md-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .flex-sm-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + .col-md-4 { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .flex-sm-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + .col-md-5 { + -ms-flex: 0 0 41.66666667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } - .flex-sm-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + .col-md-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .flex-sm-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + .col-md-7 { + -ms-flex: 0 0 58.33333333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } - .flex-sm-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + .col-md-8 { + -ms-flex: 0 0 66.66666667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } - .flex-sm-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + .col-md-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } - .flex-sm-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + .col-md-10 { + -ms-flex: 0 0 83.33333333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } - .flex-sm-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + .col-md-11 { + -ms-flex: 0 0 91.66666667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } - .flex-sm-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + .col-md-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .flex-sm-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + .order-md-first { + -ms-flex-order: -1; + order: -1; } - .justify-content-sm-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; + .order-md-last { + -ms-flex-order: 13; + order: 13; } - .justify-content-sm-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; + .order-md-0 { + -ms-flex-order: 0; + order: 0; } - .justify-content-sm-center { - -ms-flex-pack: center !important; - justify-content: center !important; + .order-md-1 { + -ms-flex-order: 1; + order: 1; } - .justify-content-sm-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-sm-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + .order-md-2 { + -ms-flex-order: 2; + order: 2; } - .align-items-sm-start { - -ms-flex-align: start !important; - align-items: flex-start !important; + .order-md-3 { + -ms-flex-order: 3; + order: 3; } - .align-items-sm-end { - -ms-flex-align: end !important; - align-items: flex-end !important; + .order-md-4 { + -ms-flex-order: 4; + order: 4; } - .align-items-sm-center { - -ms-flex-align: center !important; - align-items: center !important; + .order-md-5 { + -ms-flex-order: 5; + order: 5; } - .align-items-sm-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; + .order-md-6 { + -ms-flex-order: 6; + order: 6; } - .align-items-sm-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; + .order-md-7 { + -ms-flex-order: 7; + order: 7; } - .align-content-sm-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + .order-md-8 { + -ms-flex-order: 8; + order: 8; } - .align-content-sm-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + .order-md-9 { + -ms-flex-order: 9; + order: 9; } - .align-content-sm-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + .order-md-10 { + -ms-flex-order: 10; + order: 10; } - .align-content-sm-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + .order-md-11 { + -ms-flex-order: 11; + order: 11; } - .align-content-sm-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + .order-md-12 { + -ms-flex-order: 12; + order: 12; } - .align-content-sm-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + .offset-md-0 { + margin-left: 0; } - .align-self-sm-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + .offset-md-1 { + margin-left: 8.33333333%; } - .align-self-sm-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + .offset-md-2 { + margin-left: 16.66666667%; } - .align-self-sm-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + .offset-md-3 { + margin-left: 25%; } - .align-self-sm-center { - -ms-flex-item-align: center !important; - align-self: center !important; + .offset-md-4 { + margin-left: 33.33333333%; } - .align-self-sm-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + .offset-md-5 { + margin-left: 41.66666667%; } - .align-self-sm-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + .offset-md-6 { + margin-left: 50%; } -} - -@media (min-width: 768px) { - .flex-md-row { - -ms-flex-direction: row !important; - flex-direction: row !important; + .offset-md-7 { + margin-left: 58.33333333%; } - .flex-md-column { - -ms-flex-direction: column !important; - flex-direction: column !important; + .offset-md-8 { + margin-left: 66.66666667%; } - .flex-md-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + .offset-md-9 { + margin-left: 75%; } - .flex-md-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + .offset-md-10 { + margin-left: 83.33333333%; } - .flex-md-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + .offset-md-11 { + margin-left: 91.66666667%; } - .flex-md-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; +} + +@media (min-width: 992px) { + .col-lg { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; } - .flex-md-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + .row-cols-lg-1 > * { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .flex-md-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + .row-cols-lg-2 > * { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .flex-md-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + .row-cols-lg-3 > * { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .flex-md-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + .row-cols-lg-4 > * { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .flex-md-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + .row-cols-lg-5 > * { + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } - .flex-md-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + .row-cols-lg-6 > * { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .justify-content-md-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; + .col-lg-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; } - .justify-content-md-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; + .col-lg-1 { + -ms-flex: 0 0 8.33333333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } - .justify-content-md-center { - -ms-flex-pack: center !important; - justify-content: center !important; + .col-lg-2 { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .justify-content-md-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; + .col-lg-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .justify-content-md-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + .col-lg-4 { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .align-items-md-start { - -ms-flex-align: start !important; - align-items: flex-start !important; + .col-lg-5 { + -ms-flex: 0 0 41.66666667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } - .align-items-md-end { - -ms-flex-align: end !important; - align-items: flex-end !important; + .col-lg-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .align-items-md-center { - -ms-flex-align: center !important; - align-items: center !important; + .col-lg-7 { + -ms-flex: 0 0 58.33333333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } - .align-items-md-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; + .col-lg-8 { + -ms-flex: 0 0 66.66666667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } - .align-items-md-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; + .col-lg-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } - .align-content-md-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + .col-lg-10 { + -ms-flex: 0 0 83.33333333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } - .align-content-md-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + .col-lg-11 { + -ms-flex: 0 0 91.66666667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } - .align-content-md-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + .col-lg-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .align-content-md-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + .order-lg-first { + -ms-flex-order: -1; + order: -1; } - .align-content-md-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + .order-lg-last { + -ms-flex-order: 13; + order: 13; } - .align-content-md-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + .order-lg-0 { + -ms-flex-order: 0; + order: 0; } - .align-self-md-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + .order-lg-1 { + -ms-flex-order: 1; + order: 1; } - .align-self-md-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + .order-lg-2 { + -ms-flex-order: 2; + order: 2; } - .align-self-md-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + .order-lg-3 { + -ms-flex-order: 3; + order: 3; } - .align-self-md-center { - -ms-flex-item-align: center !important; - align-self: center !important; + .order-lg-4 { + -ms-flex-order: 4; + order: 4; } - .align-self-md-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + .order-lg-5 { + -ms-flex-order: 5; + order: 5; } - .align-self-md-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + .order-lg-6 { + -ms-flex-order: 6; + order: 6; } -} - -@media (min-width: 992px) { - .flex-lg-row { - -ms-flex-direction: row !important; - flex-direction: row !important; + .order-lg-7 { + -ms-flex-order: 7; + order: 7; } - .flex-lg-column { - -ms-flex-direction: column !important; - flex-direction: column !important; + .order-lg-8 { + -ms-flex-order: 8; + order: 8; } - .flex-lg-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + .order-lg-9 { + -ms-flex-order: 9; + order: 9; } - .flex-lg-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + .order-lg-10 { + -ms-flex-order: 10; + order: 10; } - .flex-lg-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + .order-lg-11 { + -ms-flex-order: 11; + order: 11; } - .flex-lg-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + .order-lg-12 { + -ms-flex-order: 12; + order: 12; } - .flex-lg-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + .offset-lg-0 { + margin-left: 0; } - .flex-lg-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + .offset-lg-1 { + margin-left: 8.33333333%; } - .flex-lg-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + .offset-lg-2 { + margin-left: 16.66666667%; } - .flex-lg-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + .offset-lg-3 { + margin-left: 25%; } - .flex-lg-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + .offset-lg-4 { + margin-left: 33.33333333%; } - .flex-lg-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + .offset-lg-5 { + margin-left: 41.66666667%; } - .justify-content-lg-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; + .offset-lg-6 { + margin-left: 50%; } - .justify-content-lg-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; + .offset-lg-7 { + margin-left: 58.33333333%; } - .justify-content-lg-center { - -ms-flex-pack: center !important; - justify-content: center !important; + .offset-lg-8 { + margin-left: 66.66666667%; } - .justify-content-lg-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; + .offset-lg-9 { + margin-left: 75%; } - .justify-content-lg-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + .offset-lg-10 { + margin-left: 83.33333333%; } - .align-items-lg-start { - -ms-flex-align: start !important; - align-items: flex-start !important; + .offset-lg-11 { + margin-left: 91.66666667%; } - .align-items-lg-end { - -ms-flex-align: end !important; - align-items: flex-end !important; +} + +@media (min-width: 1200px) { + .col-xl { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; } - .align-items-lg-center { - -ms-flex-align: center !important; - align-items: center !important; + .row-cols-xl-1 > * { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .align-items-lg-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; + .row-cols-xl-2 > * { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .align-items-lg-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; + .row-cols-xl-3 > * { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .align-content-lg-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + .row-cols-xl-4 > * { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .align-content-lg-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + .row-cols-xl-5 > * { + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } - .align-content-lg-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + .row-cols-xl-6 > * { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .align-content-lg-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + .col-xl-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; } - .align-content-lg-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + .col-xl-1 { + -ms-flex: 0 0 8.33333333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } - .align-content-lg-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + .col-xl-2 { + -ms-flex: 0 0 16.66666667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } - .align-self-lg-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + .col-xl-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } - .align-self-lg-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + .col-xl-4 { + -ms-flex: 0 0 33.33333333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } - .align-self-lg-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + .col-xl-5 { + -ms-flex: 0 0 41.66666667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } - .align-self-lg-center { - -ms-flex-item-align: center !important; - align-self: center !important; + .col-xl-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } - .align-self-lg-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + .col-xl-7 { + -ms-flex: 0 0 58.33333333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } - .align-self-lg-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + .col-xl-8 { + -ms-flex: 0 0 66.66666667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } -} - -@media (min-width: 1200px) { - .flex-xl-row { - -ms-flex-direction: row !important; - flex-direction: row !important; + .col-xl-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } - .flex-xl-column { - -ms-flex-direction: column !important; - flex-direction: column !important; + .col-xl-10 { + -ms-flex: 0 0 83.33333333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } - .flex-xl-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + .col-xl-11 { + -ms-flex: 0 0 91.66666667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } - .flex-xl-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + .col-xl-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } - .flex-xl-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + .order-xl-first { + -ms-flex-order: -1; + order: -1; } - .flex-xl-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + .order-xl-last { + -ms-flex-order: 13; + order: 13; } - .flex-xl-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + .order-xl-0 { + -ms-flex-order: 0; + order: 0; } - .flex-xl-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + .order-xl-1 { + -ms-flex-order: 1; + order: 1; } - .flex-xl-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + .order-xl-2 { + -ms-flex-order: 2; + order: 2; } - .flex-xl-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + .order-xl-3 { + -ms-flex-order: 3; + order: 3; } - .flex-xl-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + .order-xl-4 { + -ms-flex-order: 4; + order: 4; } - .flex-xl-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + .order-xl-5 { + -ms-flex-order: 5; + order: 5; } - .justify-content-xl-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; + .order-xl-6 { + -ms-flex-order: 6; + order: 6; } - .justify-content-xl-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; + .order-xl-7 { + -ms-flex-order: 7; + order: 7; } - .justify-content-xl-center { - -ms-flex-pack: center !important; - justify-content: center !important; + .order-xl-8 { + -ms-flex-order: 8; + order: 8; } - .justify-content-xl-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; + .order-xl-9 { + -ms-flex-order: 9; + order: 9; } - .justify-content-xl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + .order-xl-10 { + -ms-flex-order: 10; + order: 10; } - .align-items-xl-start { - -ms-flex-align: start !important; - align-items: flex-start !important; + .order-xl-11 { + -ms-flex-order: 11; + order: 11; } - .align-items-xl-end { - -ms-flex-align: end !important; - align-items: flex-end !important; + .order-xl-12 { + -ms-flex-order: 12; + order: 12; } - .align-items-xl-center { - -ms-flex-align: center !important; - align-items: center !important; + .offset-xl-0 { + margin-left: 0; } - .align-items-xl-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; + .offset-xl-1 { + margin-left: 8.33333333%; } - .align-items-xl-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; + .offset-xl-2 { + margin-left: 16.66666667%; } - .align-content-xl-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + .offset-xl-3 { + margin-left: 25%; } - .align-content-xl-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + .offset-xl-4 { + margin-left: 33.33333333%; } - .align-content-xl-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + .offset-xl-5 { + margin-left: 41.66666667%; } - .align-content-xl-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + .offset-xl-6 { + margin-left: 50%; } - .align-content-xl-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + .offset-xl-7 { + margin-left: 58.33333333%; } - .align-content-xl-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + .offset-xl-8 { + margin-left: 66.66666667%; } - .align-self-xl-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + .offset-xl-9 { + margin-left: 75%; } - .align-self-xl-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + .offset-xl-10 { + margin-left: 83.33333333%; } - .align-self-xl-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + .offset-xl-11 { + margin-left: 91.66666667%; } - .align-self-xl-center { - -ms-flex-item-align: center !important; - align-self: center !important; +} + +.row.row-equal { + margin-right: -15px; + margin-left: -15px; +} + +.row.row-equal,.row.row-equal [class*="col-"] { + padding-right: 7.5px; + padding-left: 7.5px; +} + +.main .container-fluid, .main .container-sm, .main .container-md, .main .container-lg, .main .container-xl { + padding: 0 30px; +} + +.c-header { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-negative: 0; + flex-shrink: 0; + min-height: 56px; + background: #fff; + border-bottom: 1px solid #d8dbe0; +} + +.c-header[class*="bg-"] { + border-color: rgba(0, 0, 21, 0.1); +} + +.c-header.c-header-fixed { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} + +.c-header .c-subheader { + border-bottom: 0; + margin-top: -1px; + border-top: 1px solid #d8dbe0; +} + +.c-header-brand { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; + min-height: 56px; + transition: width 0.25s; +} + +.c-header-brand.c-header-brand-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); +} + +html:not([dir="rtl"]) .c-header-brand.c-header-brand-center { + left: 50%; +} + +*[dir="rtl"] .c-header-brand.c-header-brand-center { + right: 50%; +} + +@media (max-width: 575.98px) { + .c-header-brand.c-header-brand-xs-down-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } - .align-self-xl-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + html:not([dir="rtl"]) .c-header-brand.c-header-brand-xs-down-center { + left: 50%; } - .align-self-xl-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + *[dir="rtl"] .c-header-brand.c-header-brand-xs-down-center { + right: 50%; } } -.float-left { - float: left !important; +.c-header-brand.c-header-brand-xs-up-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } -.float-right { - float: right !important; +html:not([dir="rtl"]) .c-header-brand.c-header-brand-xs-up-center { + left: 50%; } -.float-none { - float: none !important; +*[dir="rtl"] .c-header-brand.c-header-brand-xs-up-center { + right: 50%; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; +@media (max-width: 767.98px) { + .c-header-brand.c-header-brand-sm-down-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } - .float-sm-right { - float: right !important; + html:not([dir="rtl"]) .c-header-brand.c-header-brand-sm-down-center { + left: 50%; } - .float-sm-none { - float: none !important; + *[dir="rtl"] .c-header-brand.c-header-brand-sm-down-center { + right: 50%; } } -@media (min-width: 768px) { - .float-md-left { - float: left !important; +@media (min-width: 576px) { + .c-header-brand.c-header-brand-sm-up-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } - .float-md-right { - float: right !important; + html:not([dir="rtl"]) .c-header-brand.c-header-brand-sm-up-center { + left: 50%; } - .float-md-none { - float: none !important; + *[dir="rtl"] .c-header-brand.c-header-brand-sm-up-center { + right: 50%; } } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; +@media (max-width: 991.98px) { + .c-header-brand.c-header-brand-md-down-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } - .float-lg-right { - float: right !important; + html:not([dir="rtl"]) .c-header-brand.c-header-brand-md-down-center { + left: 50%; } - .float-lg-none { - float: none !important; + *[dir="rtl"] .c-header-brand.c-header-brand-md-down-center { + right: 50%; } } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; +@media (min-width: 768px) { + .c-header-brand.c-header-brand-md-up-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } - .float-xl-right { - float: right !important; + html:not([dir="rtl"]) .c-header-brand.c-header-brand-md-up-center { + left: 50%; } - .float-xl-none { - float: none !important; + *[dir="rtl"] .c-header-brand.c-header-brand-md-up-center { + right: 50%; } } -.overflow-auto { - overflow: auto !important; +@media (max-width: 1199.98px) { + .c-header-brand.c-header-brand-lg-down-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); + } + html:not([dir="rtl"]) .c-header-brand.c-header-brand-lg-down-center { + left: 50%; + } + *[dir="rtl"] .c-header-brand.c-header-brand-lg-down-center { + right: 50%; + } } -.overflow-hidden { - overflow: hidden !important; +@media (min-width: 992px) { + .c-header-brand.c-header-brand-lg-up-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); + } + html:not([dir="rtl"]) .c-header-brand.c-header-brand-lg-up-center { + left: 50%; + } + *[dir="rtl"] .c-header-brand.c-header-brand-lg-up-center { + right: 50%; + } } -.position-static { - position: static !important; +.c-header-brand.c-header-brand-xl-down-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); } -.position-relative { - position: relative !important; +html:not([dir="rtl"]) .c-header-brand.c-header-brand-xl-down-center { + left: 50%; } -.position-absolute { - position: absolute !important; +*[dir="rtl"] .c-header-brand.c-header-brand-xl-down-center { + right: 50%; } -.position-fixed { - position: fixed !important; +@media (min-width: 1200px) { + .c-header-brand.c-header-brand-xl-up-center { + position: absolute; + top: 56px; + -webkit-transform: translate(-50%, -100%); + transform: translate(-50%, -100%); + } + html:not([dir="rtl"]) .c-header-brand.c-header-brand-xl-up-center { + left: 50%; + } + *[dir="rtl"] .c-header-brand.c-header-brand-xl-up-center { + right: 50%; + } } -.position-sticky { - position: -webkit-sticky !important; - position: sticky !important; +.c-header-toggler { + min-width: 50px; + font-size: 1.09375rem; + background-color: transparent; + border: 0; + border-radius: 0.25rem; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.c-header-toggler:hover, .c-header-toggler:focus { + text-decoration: none; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.c-header-toggler:not(:disabled):not(.c-disabled) { + cursor: pointer; } -@supports ((position: -webkit-sticky) or (position: sticky)) { - .sticky-top { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 1020; - } +.c-header-toggler-icon { + display: block; + height: 1.3671875rem; + background-repeat: no-repeat; + background-position: center center; + background-size: 100% 100%; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; +.c-header-nav { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + min-height: 56px; padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; + margin-bottom: 0; + list-style: none; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.c-header-nav .c-header-nav-item { + position: relative; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.c-header-nav .c-header-nav-btn { + background-color: transparent; + border: 1px solid transparent; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.c-header-nav .c-header-nav-link, +.c-header-nav .c-header-nav-btn { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding-right: 0.5rem; + padding-left: 0.5rem; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.c-header-nav .c-header-nav-link .badge, +.c-header-nav .c-header-nav-btn .badge { + position: absolute; + top: 50%; + margin-top: -16px; } -.shadow-none { - box-shadow: none !important; +html:not([dir="rtl"]) .c-header-nav .c-header-nav-link .badge, html:not([dir="rtl"]) +.c-header-nav .c-header-nav-btn .badge { + left: 50%; + margin-left: 0; } -.w-25 { - width: 25% !important; +*[dir="rtl"] .c-header-nav .c-header-nav-link .badge, *[dir="rtl"] +.c-header-nav .c-header-nav-btn .badge { + right: 50%; + margin-right: 0; } -.w-50 { - width: 50% !important; +.c-header-nav .c-header-nav-link:hover, +.c-header-nav .c-header-nav-btn:hover { + text-decoration: none; } -.w-75 { - width: 75% !important; +.c-header-nav .dropdown-item { + min-width: 180px; } -.w-100 { - width: 100% !important; +.c-header.c-header-dark { + background: #3c4b64; + border-bottom: 1px solid #636f83; } -.w-auto { - width: auto !important; +.c-header.c-header-dark .c-subheader { + margin-top: -1px; + border-top: 1px solid #636f83; } -.h-25 { - height: 25% !important; +.c-header.c-header-dark .c-header-brand { + color: #fff; + background-color: transparent; } -.h-50 { - height: 50% !important; +.c-header.c-header-dark .c-header-brand:hover, .c-header.c-header-dark .c-header-brand:focus { + color: #fff; } -.h-75 { - height: 75% !important; +.c-header.c-header-dark .c-header-nav .c-header-nav-link, +.c-header.c-header-dark .c-header-nav .c-header-nav-btn { + color: rgba(255, 255, 255, 0.75); } -.h-100 { - height: 100% !important; +.c-header.c-header-dark .c-header-nav .c-header-nav-link:hover, .c-header.c-header-dark .c-header-nav .c-header-nav-link:focus, +.c-header.c-header-dark .c-header-nav .c-header-nav-btn:hover, +.c-header.c-header-dark .c-header-nav .c-header-nav-btn:focus { + color: rgba(255, 255, 255, 0.9); } -.h-auto { - height: auto !important; +.c-header.c-header-dark .c-header-nav .c-header-nav-link.c-disabled, +.c-header.c-header-dark .c-header-nav .c-header-nav-btn.c-disabled { + color: rgba(255, 255, 255, 0.25); } -.mw-100 { - max-width: 100% !important; +.c-header.c-header-dark .c-header-nav .c-show > .c-header-nav-link, +.c-header.c-header-dark .c-header-nav .c-active > .c-header-nav-link, +.c-header.c-header-dark .c-header-nav .c-header-nav-link.c-show, +.c-header.c-header-dark .c-header-nav .c-header-nav-link.c-active { + color: #fff; } -.mh-100 { - max-height: 100% !important; +.c-header.c-header-dark .c-header-toggler { + color: rgba(255, 255, 255, 0.75); + border-color: rgba(255, 255, 255, 0.1); } -.min-vw-100 { - min-width: 100vw !important; +.c-header.c-header-dark .c-header-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } -.min-vh-100 { - min-height: 100vh !important; +.c-header.c-header-dark .c-header-toggler-icon:hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } -.vw-100 { - width: 100vw !important; +.c-header.c-header-dark .c-header-text { + color: rgba(255, 255, 255, 0.75); } -.vh-100 { - height: 100vh !important; +.c-header.c-header-dark .c-header-text a,.c-header.c-header-dark .c-header-text a:hover, .c-header.c-header-dark .c-header-text a:focus { + color: #fff; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); +.c-header .c-header-brand { + color: #4f5d73; + background-color: transparent; } -.m-0 { - margin: 0 !important; +.c-header .c-header-brand:hover, .c-header .c-header-brand:focus { + color: #3a4555; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.c-header .c-header-nav .c-header-nav-link, +.c-header .c-header-nav .c-header-nav-btn { + color: rgba(0, 0, 21, 0.5); } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.c-header .c-header-nav .c-header-nav-link:hover, .c-header .c-header-nav .c-header-nav-link:focus, +.c-header .c-header-nav .c-header-nav-btn:hover, +.c-header .c-header-nav .c-header-nav-btn:focus { + color: rgba(0, 0, 21, 0.7); } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.c-header .c-header-nav .c-header-nav-link.c-disabled, +.c-header .c-header-nav .c-header-nav-btn.c-disabled { + color: rgba(0, 0, 21, 0.3); } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.c-header .c-header-nav .c-show > .c-header-nav-link, +.c-header .c-header-nav .c-active > .c-header-nav-link, +.c-header .c-header-nav .c-header-nav-link.c-show, +.c-header .c-header-nav .c-header-nav-link.c-active { + color: rgba(0, 0, 21, 0.9); } -.m-1 { - margin: 0.25rem !important; +.c-header .c-header-toggler { + color: rgba(0, 0, 21, 0.5); + border-color: rgba(0, 0, 21, 0.1); } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.c-header .c-header-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 21, 0.5)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.c-header .c-header-toggler-icon:hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 21, 0.7)' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.c-header .c-header-text { + color: rgba(0, 0, 21, 0.5); } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.c-header .c-header-text a,.c-header .c-header-text a:hover, .c-header .c-header-text a:focus { + color: rgba(0, 0, 21, 0.9); } -.m-2 { - margin: 0.5rem !important; +.c-icon { + display: inline-block; + color: inherit; + text-align: center; + fill: currentColor; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size) { + width: 1rem; + height: 1rem; + font-size: 1rem; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-2xl { + width: 2rem; + height: 2rem; + font-size: 2rem; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-3xl { + width: 3rem; + height: 3rem; + font-size: 3rem; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-4xl { + width: 4rem; + height: 4rem; + font-size: 4rem; } -.m-3 { - margin: 1rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-5xl { + width: 5rem; + height: 5rem; + font-size: 5rem; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-6xl { + width: 6rem; + height: 6rem; + font-size: 6rem; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-7xl { + width: 7rem; + height: 7rem; + font-size: 7rem; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-8xl { + width: 8rem; + height: 8rem; + font-size: 8rem; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-9xl { + width: 9rem; + height: 9rem; + font-size: 9rem; } -.m-4 { - margin: 1.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-xl { + width: 1.5rem; + height: 1.5rem; + font-size: 1.5rem; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-lg { + width: 1.25rem; + height: 1.25rem; + font-size: 1.25rem; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-sm { + width: 0.875rem; + height: 0.875rem; + font-size: 0.875rem; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.input-group { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: stretch; + align-items: stretch; + width: 100%; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.input-group > .form-control, +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { + position: relative; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + min-width: 0; + margin-bottom: 0; } -.m-5 { - margin: 3rem !important; +html:not([dir="rtl"]) .input-group > .form-control + .form-control, html:not([dir="rtl"]) +.input-group > .form-control + .custom-select, html:not([dir="rtl"]) +.input-group > .form-control + .custom-file, html:not([dir="rtl"]) +.input-group > .form-control-plaintext + .form-control, html:not([dir="rtl"]) +.input-group > .form-control-plaintext + .custom-select, html:not([dir="rtl"]) +.input-group > .form-control-plaintext + .custom-file, html:not([dir="rtl"]) +.input-group > .custom-select + .form-control, html:not([dir="rtl"]) +.input-group > .custom-select + .custom-select, html:not([dir="rtl"]) +.input-group > .custom-select + .custom-file, html:not([dir="rtl"]) +.input-group > .custom-file + .form-control, html:not([dir="rtl"]) +.input-group > .custom-file + .custom-select, html:not([dir="rtl"]) +.input-group > .custom-file + .custom-file { + margin-left: -1px; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +*[dir="rtl"] .input-group > .form-control + .form-control, *[dir="rtl"] +.input-group > .form-control + .custom-select, *[dir="rtl"] +.input-group > .form-control + .custom-file, *[dir="rtl"] +.input-group > .form-control-plaintext + .form-control, *[dir="rtl"] +.input-group > .form-control-plaintext + .custom-select, *[dir="rtl"] +.input-group > .form-control-plaintext + .custom-file, *[dir="rtl"] +.input-group > .custom-select + .form-control, *[dir="rtl"] +.input-group > .custom-select + .custom-select, *[dir="rtl"] +.input-group > .custom-select + .custom-file, *[dir="rtl"] +.input-group > .custom-file + .form-control, *[dir="rtl"] +.input-group > .custom-file + .custom-select, *[dir="rtl"] +.input-group > .custom-file + .custom-file { + margin-right: -1px; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.input-group > .form-control:focus, +.input-group > .custom-select:focus, +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { + z-index: 3; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.input-group > .custom-file .custom-file-input:focus { + z-index: 4; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +html:not([dir="rtl"]) .input-group > .form-control:not(:last-child), html:not([dir="rtl"]) +.input-group > .custom-select:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.p-0 { - padding: 0 !important; +*[dir="rtl"] .input-group > .form-control:not(:last-child), *[dir="rtl"] +.input-group > .custom-select:not(:last-child),html:not([dir="rtl"]) .input-group > .form-control:not(:first-child), html:not([dir="rtl"]) +.input-group > .custom-select:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.pt-0, -.py-0 { - padding-top: 0 !important; +*[dir="rtl"] .input-group > .form-control:not(:first-child), *[dir="rtl"] +.input-group > .custom-select:not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.input-group > .custom-file { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +html:not([dir="rtl"]) .input-group > .custom-file:not(:last-child) .custom-file-label, html:not([dir="rtl"]) +.input-group > .custom-file:not(:last-child) .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.pl-0, -.px-0 { - padding-left: 0 !important; +*[dir="rtl"] .input-group > .custom-file:not(:last-child) .custom-file-label, *[dir="rtl"] +.input-group > .custom-file:not(:last-child) .custom-file-label::after,html:not([dir="rtl"]) .input-group > .custom-file:not(:first-child) .custom-file-label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.p-1 { - padding: 0.25rem !important; +*[dir="rtl"] .input-group > .custom-file:not(:first-child) .custom-file-label { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.input-group-prepend, +.input-group-append { + display: -ms-flexbox; + display: flex; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.input-group-prepend .btn, +.input-group-append .btn { + position: relative; + z-index: 2; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { + z-index: 3; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +html:not([dir="rtl"]) .input-group-prepend .btn + .btn, html:not([dir="rtl"]) +.input-group-prepend .btn + .input-group-text, html:not([dir="rtl"]) +.input-group-prepend .input-group-text + .input-group-text, html:not([dir="rtl"]) +.input-group-prepend .input-group-text + .btn, html:not([dir="rtl"]) +.input-group-append .btn + .btn, html:not([dir="rtl"]) +.input-group-append .btn + .input-group-text, html:not([dir="rtl"]) +.input-group-append .input-group-text + .input-group-text, html:not([dir="rtl"]) +.input-group-append .input-group-text + .btn { + margin-left: -1px; } -.p-2 { - padding: 0.5rem !important; +*[dir="rtl"] .input-group-prepend .btn + .btn, *[dir="rtl"] +.input-group-prepend .btn + .input-group-text, *[dir="rtl"] +.input-group-prepend .input-group-text + .input-group-text, *[dir="rtl"] +.input-group-prepend .input-group-text + .btn, *[dir="rtl"] +.input-group-append .btn + .btn, *[dir="rtl"] +.input-group-append .btn + .input-group-text, *[dir="rtl"] +.input-group-append .input-group-text + .input-group-text, *[dir="rtl"] +.input-group-append .input-group-text + .btn { + margin-right: -1px; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.input-group-prepend { + white-space: nowrap; + vertical-align: middle; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +html:not([dir="rtl"]) .input-group-prepend { + margin-right: -1px; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +*[dir="rtl"] .input-group-prepend { + margin-left: -1px; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.input-group-append { + white-space: nowrap; + vertical-align: middle; } -.p-3 { - padding: 1rem !important; +html:not([dir="rtl"]) .input-group-append { + margin-left: -1px; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +*[dir="rtl"] .input-group-append { + margin-right: -1px; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.input-group-text { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 0.375rem 0.75rem; + margin-bottom: 0; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + text-align: center; + white-space: nowrap; + border: 1px solid; + border-radius: 0.25rem; + color: #768192; + background-color: #ebedef; + border-color: #d8dbe0; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { + margin-top: 0; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { + height: calc(1.5em + 1rem + 2px); } -.p-4 { - padding: 1.5rem !important; +.input-group-lg > .form-control, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, +.input-group-lg > .input-group-append > .input-group-text, +.input-group-lg > .input-group-prepend > .btn, +.input-group-lg > .input-group-append > .btn { + padding: 0.5rem 1rem; + font-size: 1.09375rem; + line-height: 1.5; + border-radius: 0.3rem; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { + height: calc(1.5em + 0.5rem + 2px); } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.input-group-sm > .form-control, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, +.input-group-sm > .input-group-append > .input-group-text, +.input-group-sm > .input-group-prepend > .btn, +.input-group-sm > .input-group-append > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.765625rem; + line-height: 1.5; + border-radius: 0.2rem; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +html:not([dir="rtl"]) .input-group-lg > .custom-select, html:not([dir="rtl"]) +.input-group-sm > .custom-select { + padding-right: 1.75rem; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +*[dir="rtl"] .input-group-lg > .custom-select, *[dir="rtl"] +.input-group-sm > .custom-select { + padding-left: 1.75rem; } -.p-5 { - padding: 3rem !important; +html:not([dir="rtl"]) .input-group > .input-group-prepend > .btn, html:not([dir="rtl"]) +.input-group > .input-group-prepend > .input-group-text, html:not([dir="rtl"]) +.input-group > .input-group-append:not(:last-child) > .btn, html:not([dir="rtl"]) +.input-group > .input-group-append:not(:last-child) > .input-group-text, html:not([dir="rtl"]) +.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), html:not([dir="rtl"]) +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +*[dir="rtl"] .input-group > .input-group-prepend > .btn, *[dir="rtl"] +.input-group > .input-group-prepend > .input-group-text, *[dir="rtl"] +.input-group > .input-group-append:not(:last-child) > .btn, *[dir="rtl"] +.input-group > .input-group-append:not(:last-child) > .input-group-text, *[dir="rtl"] +.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), *[dir="rtl"] +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),html:not([dir="rtl"]) .input-group > .input-group-append > .btn, html:not([dir="rtl"]) +.input-group > .input-group-append > .input-group-text, html:not([dir="rtl"]) +.input-group > .input-group-prepend:not(:first-child) > .btn, html:not([dir="rtl"]) +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, html:not([dir="rtl"]) +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), html:not([dir="rtl"]) +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +*[dir="rtl"] .input-group > .input-group-append > .btn, *[dir="rtl"] +.input-group > .input-group-append > .input-group-text, *[dir="rtl"] +.input-group > .input-group-prepend:not(:first-child) > .btn, *[dir="rtl"] +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, *[dir="rtl"] +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), *[dir="rtl"] +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.img-fluid,.img-thumbnail { + max-width: 100%; + height: auto; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.img-thumbnail { + padding: 0.25rem; + background-color: #ebedef; + border: 1px solid #c4c9d0; + border-radius: 0.25rem; } -.m-n1 { - margin: -0.25rem !important; +.figure { + display: inline-block; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.figure-img { + margin-bottom: 0.5rem; + line-height: 1; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.figure-caption { + font-size: 90%; + color: #8a93a2; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.jumbotron { + padding: 2rem 1rem; + margin-bottom: 2rem; + border-radius: 0.3rem; + background-color: #d8dbe0; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +@media (min-width: 576px) { + .jumbotron { + padding: 4rem 2rem; + } } -.m-n2 { - margin: -0.5rem !important; +.jumbotron-fluid { + padding-right: 0; + padding-left: 0; + border-radius: 0; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.list-group { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 0; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +html:not([dir="rtl"]) .list-group { + padding-left: 0; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +*[dir="rtl"] .list-group { + padding-right: 0; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.list-group-item-action { + width: 100%; + text-align: inherit; + color: #768192; } -.m-n3 { - margin: -1rem !important; -} - -.mt-n3, -.my-n3 { - margin-top: -1rem !important; -} - -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; -} - -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; -} - -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; -} - -.m-n4 { - margin: -1.5rem !important; +.list-group-item-action:hover, .list-group-item-action:focus { + z-index: 1; + text-decoration: none; + color: #768192; + background-color: #ebedef; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.list-group-item-action:active { + color: #4f5d73; + background-color: #321fdb; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.list-group-item { + position: relative; + display: block; + padding: 0.75rem 1.25rem; + border: 1px solid; + background-color: inherit; + border-color: rgba(0, 0, 21, 0.125); } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.list-group-item:last-child { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } -.m-n5 { - margin: -3rem !important; +.list-group-item.disabled, .list-group-item:disabled { + pointer-events: none; + color: #8a93a2; + background-color: inherit; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.list-group-item.active { + z-index: 2; + color: #fff; + background-color: #321fdb; + border-color: #321fdb; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.list-group-item + .list-group-item { + border-top-width: 0; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.list-group-item + .list-group-item.active { + margin-top: -1px; + border-top-width: 1px; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.list-group-horizontal { + -ms-flex-direction: row; + flex-direction: row; } -.m-auto { - margin: auto !important; +.list-group-horizontal .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.list-group-horizontal .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.list-group-horizontal .list-group-item.active { + margin-top: 0; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.list-group-horizontal .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.list-group-horizontal .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; } @media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; + .list-group-horizontal-sm { + -ms-flex-direction: row; + flex-direction: row; } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; + .list-group-horizontal-sm .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; + .list-group-horizontal-sm .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; + .list-group-horizontal-sm .list-group-item.active { + margin-top: 0; } - .m-sm-3 { - margin: 1rem !important; + .list-group-horizontal-sm .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; + .list-group-horizontal-sm .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; +} + +@media (min-width: 768px) { + .list-group-horizontal-md { + -ms-flex-direction: row; + flex-direction: row; } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; + .list-group-horizontal-md .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; + .list-group-horizontal-md .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; } - .m-sm-4 { - margin: 1.5rem !important; + .list-group-horizontal-md .list-group-item.active { + margin-top: 0; } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; + .list-group-horizontal-md .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; + .list-group-horizontal-md .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; +} + +@media (min-width: 992px) { + .list-group-horizontal-lg { + -ms-flex-direction: row; + flex-direction: row; } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; + .list-group-horizontal-lg .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; } - .m-sm-5 { - margin: 3rem !important; + .list-group-horizontal-lg .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; + .list-group-horizontal-lg .list-group-item.active { + margin-top: 0; } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; + .list-group-horizontal-lg .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; + .list-group-horizontal-lg .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; +} + +@media (min-width: 1200px) { + .list-group-horizontal-xl { + -ms-flex-direction: row; + flex-direction: row; } - .p-sm-0 { - padding: 0 !important; + .list-group-horizontal-xl .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; + .list-group-horizontal-xl .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; + .list-group-horizontal-xl .list-group-item.active { + margin-top: 0; } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; + .list-group-horizontal-xl .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; + .list-group-horizontal-xl .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; } } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; +.list-group-flush .list-group-item { + border-right-width: 0; + border-left-width: 0; + border-radius: 0; +} + +.list-group-flush .list-group-item:first-child { + border-top-width: 0; +} + +.list-group-flush:last-child .list-group-item:last-child { + border-bottom-width: 0; +} + +.list-group-item-primary { + color: #1a107c; + background-color: #c6c0f5; +} + +.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { + color: #1a107c; + background-color: #b2aaf2; +} + +.list-group-item-primary.list-group-item-action.active { + color: #fff; + background-color: #1a107c; + border-color: #1a107c; +} + +.list-group-item-secondary { + color: #6b6d7a; + background-color: #f1f2f4; +} + +.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { + color: #6b6d7a; + background-color: #e3e5e9; +} + +.list-group-item-secondary.list-group-item-action.active { + color: #fff; + background-color: #6b6d7a; + border-color: #6b6d7a; +} + +.list-group-item-success { + color: #18603a; + background-color: #c4ebd1; +} + +.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { + color: #18603a; + background-color: #b1e5c2; +} + +.list-group-item-success.list-group-item-action.active { + color: #fff; + background-color: #18603a; + border-color: #18603a; +} + +.list-group-item-info { + color: #1b508f; + background-color: #c6e2ff; +} + +.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { + color: #1b508f; + background-color: #add5ff; +} + +.list-group-item-info.list-group-item-action.active { + color: #fff; + background-color: #1b508f; + border-color: #1b508f; +} + +.list-group-item-warning { + color: #815c15; + background-color: #fde9bd; +} + +.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { + color: #815c15; + background-color: #fce1a4; +} + +.list-group-item-warning.list-group-item-action.active { + color: #fff; + background-color: #815c15; + border-color: #815c15; +} + +.list-group-item-danger { + color: #772b35; + background-color: #f8cfcf; +} + +.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { + color: #772b35; + background-color: #f5b9b9; +} + +.list-group-item-danger.list-group-item-action.active { + color: #fff; + background-color: #772b35; + border-color: #772b35; +} + +.list-group-item-light { + color: #7a7b86; + background-color: #f9fafb; +} + +.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { + color: #7a7b86; + background-color: #eaedf1; +} + +.list-group-item-light.list-group-item-action.active { + color: #fff; + background-color: #7a7b86; + border-color: #7a7b86; +} + +.list-group-item-dark { + color: #333a4e; + background-color: #d3d7dc; +} + +.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { + color: #333a4e; + background-color: #c5cad1; +} + +.list-group-item-dark.list-group-item-action.active { + color: #fff; + background-color: #333a4e; + border-color: #333a4e; +} + +.list-group-accent .list-group-item { + margin-bottom: 1px; + border-top: 0; + border-right: 0; + border-bottom: 0; + border-radius: 0; +} + +.list-group-accent .list-group-item.list-group-item-divider { + position: relative; +} + +.list-group-accent .list-group-item.list-group-item-divider::before { + position: absolute; + bottom: -1px; + width: 90%; + height: 1px; + content: ""; + background-color: rgba(0, 0, 21, 0.125); +} + +html:not([dir="rtl"]) .list-group-accent .list-group-item.list-group-item-divider::before { + left: 5%; +} + +*[dir="rtl"] .list-group-accent .list-group-item.list-group-item-divider::before { + right: 5%; +} + +.list-group-accent .list-group-item-accent-primary { + border-left: 4px solid #321fdb; +} + +.list-group-accent .list-group-item-accent-secondary { + border-left: 4px solid #ced2d8; +} + +.list-group-accent .list-group-item-accent-success { + border-left: 4px solid #2eb85c; +} + +.list-group-accent .list-group-item-accent-info { + border-left: 4px solid #39f; +} + +.list-group-accent .list-group-item-accent-warning { + border-left: 4px solid #f9b115; +} + +.list-group-accent .list-group-item-accent-danger { + border-left: 4px solid #e55353; +} + +.list-group-accent .list-group-item-accent-light { + border-left: 4px solid #ebedef; +} + +.list-group-accent .list-group-item-accent-dark { + border-left: 4px solid #636f83; +} + +.media { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; +} + +.media-body { + -ms-flex: 1; + flex: 1; +} + +.modal-open { + overflow: hidden; +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + display: none; + width: 100%; + height: 100%; + overflow: hidden; + outline: 0; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +.modal.fade .modal-dialog { + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; + -webkit-transform: translate(0, -50px); + transform: translate(0, -50px); +} + +@media (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + transition: none; } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; +} + +.modal.show .modal-dialog { + -webkit-transform: none; + transform: none; +} + +.modal.modal-static .modal-dialog { + -webkit-transform: scale(1.02); + transform: scale(1.02); +} + +.modal-dialog-scrollable { + display: -ms-flexbox; + display: flex; + max-height: calc(100% - 1rem); +} + +.modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 1rem); + overflow: hidden; +} + +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} + +.modal-dialog-centered { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + min-height: calc(100% - 1rem); +} + +.modal-dialog-centered::before { + display: block; + height: calc(100vh - 1rem); + content: ""; +} + +.modal-dialog-centered.modal-dialog-scrollable { + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + height: 100%; +} + +.modal-dialog-centered.modal-dialog-scrollable .modal-content { + max-height: none; +} + +.modal-dialog-centered.modal-dialog-scrollable::before { + content: none; +} + +.modal-content { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-clip: padding-box; + border: 1px solid; + border-radius: 0.3rem; + outline: 0; + background-color: #fff; + border-color: rgba(0, 0, 21, 0.2); +} + +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1040; + width: 100vw; + height: 100vh; + background-color: #000015; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.5; +} + +.modal-header { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-pack: justify; + justify-content: space-between; + border-bottom: 1px solid; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); + border-color: #d8dbe0; +} + +.modal-header,.modal-header .close { + padding: 1rem 1rem; +} + +html:not([dir="rtl"]) .modal-header .close { + margin: -1rem -1rem -1rem auto; +} + +*[dir="rtl"] .modal-header .close { + margin: -1rem auto -1rem -1rem; +} + +.modal-title { + margin-bottom: 0; + line-height: 1.5; +} + +.modal-body { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1rem; +} + +.modal-footer { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 0.75rem; + border-top: 1px solid; + border-bottom-right-radius: calc(0.3rem - 1px); + border-bottom-left-radius: calc(0.3rem - 1px); + border-color: #d8dbe0; +} + +.modal-footer > * { + margin: 0.25rem; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; } - .p-md-4 { - padding: 1.5rem !important; + .modal-dialog-scrollable { + max-height: calc(100% - 3.5rem); } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; + .modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 3.5rem); } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; + .modal-dialog-centered { + min-height: calc(100% - 3.5rem); } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; + .modal-dialog-centered::before { + height: calc(100vh - 3.5rem); } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; + .modal-sm { + max-width: 300px; } - .p-md-5 { - padding: 3rem !important; +} + +@media (min-width: 992px) { + .modal-lg, + .modal-xl { + max-width: 800px; } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; +} + +@media (min-width: 1200px) { + .modal-xl { + max-width: 1140px; } } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } +.modal-primary .modal-content { + border-color: #321fdb; } -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; +.modal-primary .modal-header { + color: #fff; + background-color: #321fdb; +} + +.modal-secondary .modal-content { + border-color: #ced2d8; +} + +.modal-secondary .modal-header { + color: #fff; + background-color: #ced2d8; +} + +.modal-success .modal-content { + border-color: #2eb85c; +} + +.modal-success .modal-header { + color: #fff; + background-color: #2eb85c; +} + +.modal-info .modal-content { + border-color: #39f; +} + +.modal-info .modal-header { + color: #fff; + background-color: #39f; +} + +.modal-warning .modal-content { + border-color: #f9b115; +} + +.modal-warning .modal-header { + color: #fff; + background-color: #f9b115; +} + +.modal-danger .modal-content { + border-color: #e55353; +} + +.modal-danger .modal-header { + color: #fff; + background-color: #e55353; +} + +.modal-light .modal-content { + border-color: #ebedef; +} + +.modal-light .modal-header { + color: #fff; + background-color: #ebedef; +} + +.modal-dark .modal-content { + border-color: #636f83; +} + +.modal-dark .modal-header { + color: #fff; + background-color: #636f83; +} + +.nav { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 0; + list-style: none; +} + +html:not([dir="rtl"]) .nav { + padding-left: 0; +} + +*[dir="rtl"] .nav { + padding-right: 0; +} + +.nav-link { + display: block; + padding: 0.5rem 1rem; +} + +.nav-link:hover, .nav-link:focus { + text-decoration: none; +} + +.nav-link.disabled { + color: #8a93a2; + pointer-events: none; + cursor: default; + color: #8a93a2; +} + +.nav-tabs { + border-bottom: 1px solid; + border-color: #c4c9d0; +} + +.nav-tabs .nav-item { + margin-bottom: -1px; +} + +.nav-tabs .nav-link { + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + border-color: #d8dbe0 #d8dbe0 #c4c9d0; +} + +.nav-tabs .nav-link.disabled { + background-color: transparent; + border-color: transparent; + color: #8a93a2; +} + +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #768192; + background-color: #ebedef; + border-color: #c4c9d0 #c4c9d0 #ebedef; +} + +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.nav-tabs-boxed .nav-tabs { + border: 0; +} + +.nav-tabs-boxed .nav-tabs .nav-link.active { + background-color: #fff; + border-bottom-color: #fff; +} + +.nav-tabs-boxed .tab-content { + padding: 0.75rem 1.25rem; + border: 1px solid; + border-radius: 0 0.25rem 0.25rem 0.25rem; + color: #768192; + background-color: #fff; + border-color: #d8dbe0; +} + +.nav-tabs-boxed.nav-tabs-boxed-top-right .nav-tabs { + -ms-flex-pack: end; + justify-content: flex-end; +} + +.nav-tabs-boxed.nav-tabs-boxed-top-right .tab-content { + border-radius: 0.25rem 0 0.25rem 0.25rem; +} + +.nav-tabs-boxed.nav-tabs-boxed-left, .nav-tabs-boxed.nav-tabs-boxed-right { + display: -ms-flexbox; + display: flex; +} + +.nav-tabs-boxed.nav-tabs-boxed-left .nav-item, .nav-tabs-boxed.nav-tabs-boxed-right .nav-item { + z-index: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin-bottom: 0; +} + +*[dir="rtl"] .nav-tabs-boxed.nav-tabs-boxed-left { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.nav-tabs-boxed.nav-tabs-boxed-left .nav-item { + margin-right: -1px; +} + +.nav-tabs-boxed.nav-tabs-boxed-left .nav-link { + border-radius: 0.25rem 0 0 0.25rem; +} + +.nav-tabs-boxed.nav-tabs-boxed-left .nav-link.active { + border-color: #d8dbe0 #fff #d8dbe0 #d8dbe0; +} + +html:not([dir="rtl"]) .nav-tabs-boxed.nav-tabs-boxed-right { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +*[dir="rtl"] .nav-tabs-boxed.nav-tabs-boxed-right { + -ms-flex-direction: row; + flex-direction: row; +} + +html:not([dir="rtl"]) .nav-tabs-boxed.nav-tabs-boxed-right .nav-item { + margin-left: -1px; +} + +*[dir="rtl"] .nav-tabs-boxed.nav-tabs-boxed-right .nav-item { + margin-right: -1px; +} + +.nav-tabs-boxed.nav-tabs-boxed-right .nav-link { + border-radius: 0 0.25rem 0.25rem 0; +} + +.nav-tabs-boxed.nav-tabs-boxed-right .nav-link.active { + border-color: #d8dbe0 #d8dbe0 #d8dbe0 #fff; +} + +.nav-tabs-boxed.nav-tabs-boxed-right .tab-content { + border-radius: 0.25rem 0 0.25rem 0.25rem; +} + +.nav-pills .nav-link { + border-radius: 0.25rem; +} + +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: #fff; + background-color: #321fdb; +} + +.nav-underline { + border-bottom: 2px solid; + border-color: #c4c9d0; +} + +.nav-underline .nav-item { + margin-bottom: -2px; +} + +.nav-underline .nav-link { + border: 0; + border-bottom: 2px solid transparent; +} + +.nav-underline .nav-link.active, +.nav-underline .show > .nav-link { + background: transparent; +} + +.nav-underline.nav-underline-primary .nav-link.active, +.nav-underline.nav-underline-primary .show > .nav-link { + color: #321fdb; + border-color: #321fdb; +} + +.nav-underline.nav-underline-secondary .nav-link.active, +.nav-underline.nav-underline-secondary .show > .nav-link { + color: #ced2d8; + border-color: #ced2d8; +} + +.nav-underline.nav-underline-success .nav-link.active, +.nav-underline.nav-underline-success .show > .nav-link { + color: #2eb85c; + border-color: #2eb85c; +} + +.nav-underline.nav-underline-info .nav-link.active, +.nav-underline.nav-underline-info .show > .nav-link { + color: #39f; + border-color: #39f; +} + +.nav-underline.nav-underline-warning .nav-link.active, +.nav-underline.nav-underline-warning .show > .nav-link { + color: #f9b115; + border-color: #f9b115; +} + +.nav-underline.nav-underline-danger .nav-link.active, +.nav-underline.nav-underline-danger .show > .nav-link { + color: #e55353; + border-color: #e55353; +} + +.nav-underline.nav-underline-light .nav-link.active, +.nav-underline.nav-underline-light .show > .nav-link { + color: #ebedef; + border-color: #ebedef; +} + +.nav-underline.nav-underline-dark .nav-link.active, +.nav-underline.nav-underline-dark .show > .nav-link { + color: #636f83; + border-color: #636f83; +} + +.nav-fill .nav-item { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + text-align: center; +} + +.nav-justified .nav-item { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + text-align: center; +} + +.tab-content > .tab-pane { + display: none; +} + +.tab-content > .active { + display: block; +} + +.c-sidebar .nav-tabs:first-child .nav-link, +.c-sidebar .c-sidebar-close + .nav-tabs .nav-link { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + height: 56px; + padding-top: 0; + padding-bottom: 0; +} + +.navbar { + position: relative; + padding: 0.5rem 1rem; +} + +.navbar,.navbar .container, +.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.navbar-brand { + display: inline-block; + padding-top: 0.3359375rem; + padding-bottom: 0.3359375rem; + margin-right: 1rem; + font-size: 1.09375rem; + line-height: inherit; + white-space: nowrap; +} + +.navbar-brand:hover, .navbar-brand:focus { + text-decoration: none; +} + +.navbar-nav { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 0; + list-style: none; +} + +html:not([dir="rtl"]) .navbar-nav { + padding-left: 0; +} + +*[dir="rtl"] .navbar-nav { + padding-right: 0; +} + +.navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} + +.navbar-nav .dropdown-menu { + position: static; + float: none; +} + +.navbar-text { + display: inline-block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.navbar-collapse { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-align: center; + align-items: center; +} + +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.09375rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +.navbar-toggler:hover, .navbar-toggler:focus { + text-decoration: none; +} + +.navbar-toggler-icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + content: ""; + background: no-repeat center center; + background-size: 100% 100%; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { + padding-right: 0; + padding-left: 0; } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; +} + +@media (min-width: 576px) { + .navbar-expand-sm { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; + .navbar-expand-sm .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; } - .p-xl-5 { - padding: 3rem !important; + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; + .navbar-expand-sm .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; + .navbar-expand-sm .navbar-collapse { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-preferred-size: auto; + flex-basis: auto; } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; + .navbar-expand-sm .navbar-toggler { + display: none; } - .m-xl-n1 { - margin: -0.25rem !important; +} + +@media (max-width: 767.98px) { + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { + padding-right: 0; + padding-left: 0; } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; +} + +@media (min-width: 768px) { + .navbar-expand-md { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; + .navbar-expand-md .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; + .navbar-expand-md .navbar-nav .dropdown-menu { + position: absolute; } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; + .navbar-expand-md .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; } - .m-xl-n2 { - margin: -0.5rem !important; + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; + .navbar-expand-md .navbar-collapse { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-preferred-size: auto; + flex-basis: auto; } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; + .navbar-expand-md .navbar-toggler { + display: none; } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; +} + +@media (max-width: 991.98px) { + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { + padding-right: 0; + padding-left: 0; } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; +} + +@media (min-width: 992px) { + .navbar-expand-lg { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; } - .m-xl-n3 { - margin: -1rem !important; + .navbar-expand-lg .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; + .navbar-expand-lg .navbar-nav .dropdown-menu { + position: absolute; } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; + .navbar-expand-lg .navbar-collapse { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-preferred-size: auto; + flex-basis: auto; } - .m-xl-n4 { - margin: -1.5rem !important; + .navbar-expand-lg .navbar-toggler { + display: none; } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; +} + +@media (max-width: 1199.98px) { + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { + padding-right: 0; + padding-left: 0; } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; +} + +@media (min-width: 1200px) { + .navbar-expand-xl { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; + .navbar-expand-xl .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; + .navbar-expand-xl .navbar-nav .dropdown-menu { + position: absolute; } - .m-xl-n5 { - margin: -3rem !important; + .navbar-expand-xl .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; + .navbar-expand-xl .navbar-collapse { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-preferred-size: auto; + flex-basis: auto; } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; + .navbar-expand-xl .navbar-toggler { + display: none; } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; +} + +.navbar-expand { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.navbar-expand > .container, +.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl { + padding-right: 0; + padding-left: 0; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.navbar-expand .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; +} + +.navbar-expand .navbar-nav .dropdown-menu { + position: absolute; +} + +.navbar-expand .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.navbar-expand .navbar-collapse { + display: -ms-flexbox !important; + display: flex !important; + -ms-flex-preferred-size: auto; + flex-basis: auto; +} + +.navbar-expand .navbar-toggler { + display: none; +} + +.navbar.navbar-dark .navbar-brand,.navbar.navbar-dark .navbar-brand:hover, .navbar.navbar-dark .navbar-brand:focus { + color: #fff; +} + +.navbar.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.5); +} + +.navbar.navbar-dark .navbar-nav .nav-link:hover, .navbar.navbar-dark .navbar-nav .nav-link:focus { + color: rgba(255, 255, 255, 0.75); +} + +.navbar.navbar-dark .navbar-nav .nav-link.disabled { + color: rgba(255, 255, 255, 0.25); +} + +.navbar.navbar-dark .navbar-nav .show > .nav-link, +.navbar.navbar-dark .navbar-nav .active > .nav-link, +.navbar.navbar-dark .navbar-nav .nav-link.show, +.navbar.navbar-dark .navbar-nav .nav-link.active { + color: #fff; +} + +.navbar.navbar-dark .navbar-toggler { + color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, 0.1); +} + +.navbar.navbar-dark .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +.navbar.navbar-dark .navbar-text { + color: rgba(255, 255, 255, 0.5); +} + +.navbar.navbar-dark .navbar-text a,.navbar.navbar-dark .navbar-text a:hover, .navbar.navbar-dark .navbar-text a:focus { + color: #fff; +} + +.navbar.navbar-light .navbar-brand,.navbar.navbar-light .navbar-brand:hover, .navbar.navbar-light .navbar-brand:focus { + color: rgba(0, 0, 21, 0.9); +} + +.navbar.navbar-light .navbar-nav .nav-link { + color: rgba(0, 0, 21, 0.5); +} + +.navbar.navbar-light .navbar-nav .nav-link:hover, .navbar.navbar-light .navbar-nav .nav-link:focus { + color: rgba(0, 0, 21, 0.7); +} + +.navbar.navbar-light .navbar-nav .nav-link.disabled { + color: rgba(0, 0, 21, 0.3); +} + +.navbar.navbar-light .navbar-nav .show > .nav-link, +.navbar.navbar-light .navbar-nav .active > .nav-link, +.navbar.navbar-light .navbar-nav .nav-link.show, +.navbar.navbar-light .navbar-nav .nav-link.active { + color: rgba(0, 0, 21, 0.9); +} + +.navbar.navbar-light .navbar-toggler { + color: rgba(0, 0, 21, 0.5); + border-color: rgba(0, 0, 21, 0.1); +} + +.navbar.navbar-light .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 21, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +.navbar.navbar-light .navbar-text { + color: rgba(0, 0, 21, 0.5); +} + +.navbar.navbar-light .navbar-text a,.navbar.navbar-light .navbar-text a:hover, .navbar.navbar-light .navbar-text a:focus { + color: rgba(0, 0, 21, 0.9); +} + +.pagination { + display: -ms-flexbox; + display: flex; + list-style: none; + border-radius: 0.25rem; +} + +html:not([dir="rtl"]) .pagination { + padding-left: 0; +} + +*[dir="rtl"] .pagination { + padding-right: 0; +} + +.page-link { + position: relative; + display: block; + padding: 0.5rem 0.75rem; + line-height: 1.25; + border: 1px solid; + color: #321fdb; + background-color: #fff; + border-color: #d8dbe0; +} + +html:not([dir="rtl"]) .page-link { + margin-left: -1px; +} + +*[dir="rtl"] .page-link { + margin-right: -1px; +} + +.page-link:hover { + z-index: 2; + text-decoration: none; + color: #231698; + background-color: #d8dbe0; + border-color: #c4c9d0; +} + +.page-link:focus { + z-index: 3; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); +} + +html:not([dir="rtl"]) .page-item:first-child .page-link { + margin-left: 0; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +*[dir="rtl"] .page-item:first-child .page-link { + margin-right: 0; +} + +*[dir="rtl"] .page-item:first-child .page-link,html:not([dir="rtl"]) .page-item:last-child .page-link { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} + +*[dir="rtl"] .page-item:last-child .page-link { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.page-item.active .page-link { + z-index: 3; + color: #fff; + background-color: #321fdb; + border-color: #321fdb; +} + +.page-item.disabled .page-link { + pointer-events: none; + cursor: auto; + color: #8a93a2; + background-color: #fff; + border-color: #c4c9d0; +} + +.pagination-lg .page-link { + padding: 0.75rem 1.5rem; + font-size: 1.09375rem; + line-height: 1.5; +} + +html:not([dir="rtl"]) .pagination-lg .page-item:first-child .page-link { + border-top-left-radius: 0.3rem; + border-bottom-left-radius: 0.3rem; +} + +*[dir="rtl"] .pagination-lg .page-item:first-child .page-link,html:not([dir="rtl"]) .pagination-lg .page-item:last-child .page-link { + border-top-right-radius: 0.3rem; + border-bottom-right-radius: 0.3rem; +} + +*[dir="rtl"] .pagination-lg .page-item:last-child .page-link { + border-top-left-radius: 0.3rem; + border-bottom-left-radius: 0.3rem; +} + +.pagination-sm .page-link { + padding: 0.25rem 0.5rem; + font-size: 0.765625rem; + line-height: 1.5; +} + +html:not([dir="rtl"]) .pagination-sm .page-item:first-child .page-link { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; +} + +*[dir="rtl"] .pagination-sm .page-item:first-child .page-link,html:not([dir="rtl"]) .pagination-sm .page-item:last-child .page-link { + border-top-right-radius: 0.2rem; + border-bottom-right-radius: 0.2rem; +} + +*[dir="rtl"] .pagination-sm .page-item:last-child .page-link { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; +} + +.popover { + top: 0; + left: 0; + z-index: 1060; + max-width: 276px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.765625rem; + word-wrap: break-word; + background-clip: padding-box; + border: 1px solid; + border-radius: 0.3rem; + background-color: #fff; + border-color: rgba(0, 0, 21, 0.2); +} + +.popover,.popover .arrow { + position: absolute; + display: block; +} + +.popover .arrow { + width: 1rem; + height: 0.5rem; + margin: 0 0.3rem; +} + +.popover .arrow::before, .popover .arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; +} + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 0.5rem; +} + +.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { + bottom: calc(-0.5rem - 1px); +} + +.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { + bottom: 0; + border-width: 0.5rem 0.5rem 0; + border-top-color: rgba(0, 0, 21, 0.25); +} + +.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { + bottom: 1px; + border-width: 0.5rem 0.5rem 0; + border-top-color: #fff; +} + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 0.5rem; +} + +.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { + left: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; + margin: 0.3rem 0; +} + +.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { + left: 0; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: rgba(0, 0, 21, 0.25); +} + +.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { + left: 1px; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: #fff; +} + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 0.5rem; +} + +.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { + top: calc(-0.5rem - 1px); +} + +.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { + top: 0; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: rgba(0, 0, 21, 0.25); +} + +.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { + top: 1px; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: #fff; +} + +.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1rem; + margin-left: -0.5rem; + content: ""; + border-bottom: 1px solid; + border-bottom-color: #f7f7f7; +} + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 0.5rem; +} + +.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { + right: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; + margin: 0.3rem 0; +} + +.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { + right: 0; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: rgba(0, 0, 21, 0.25); +} + +.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { + right: 1px; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: #fff; +} + +.popover-header { + padding: 0.5rem 0.75rem; + margin-bottom: 0; + font-size: 0.875rem; + border-bottom: 1px solid; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); + background-color: #f7f7f7; + border-bottom-color: #ebebeb; +} + +.popover-header:empty { + display: none; +} + +.popover-body { + padding: 0.5rem 0.75rem; + color: #4f5d73; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 1rem 0; } - .m-xl-auto { - margin: auto !important; + to { + background-position: 0 0; } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; +} + +@keyframes progress-bar-stripes { + from { + background-position: 1rem 0; } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; + to { + background-position: 0 0; } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; +} + +.progress { + height: 1rem; + font-size: 0.65625rem; + border-radius: 0.25rem; + background-color: #ebedef; +} + +.progress,.progress-bar { + display: -ms-flexbox; + display: flex; + overflow: hidden; +} + +.progress-bar { + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + white-space: nowrap; + transition: width 0.6s ease; + color: #fff; + background-color: #321fdb; +} + +@media (prefers-reduced-motion: reduce) { + .progress-bar { + transition: none; } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; +} + +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 1rem 1rem; +} + +.progress-bar-animated { + -webkit-animation: progress-bar-stripes 1s linear infinite; + animation: progress-bar-stripes 1s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .progress-bar-animated { + -webkit-animation: none; + animation: none; } } -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +.progress-xs { + height: 4px; } -.text-justify { - text-align: justify !important; +.progress-sm { + height: 8px; } -.text-wrap { - white-space: normal !important; +.progress.progress-white { + background-color: rgba(255, 255, 255, 0.2); } -.text-nowrap { - white-space: nowrap !important; +.progress.progress-white .progress-bar { + background-color: #fff; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.progress-group { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-bottom: 1rem; } -.text-left { - text-align: left !important; +.progress-group-prepend { + -ms-flex: 0 0 100px; + flex: 0 0 100px; + -ms-flex-item-align: center; + align-self: center; } -.text-right { - text-align: right !important; +.progress-group-icon { + font-size: 1.09375rem; } -.text-center { - text-align: center !important; +html:not([dir="rtl"]) .progress-group-icon { + margin: 0 1rem 0 0.25rem; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; +*[dir="rtl"] .progress-group-icon { + margin: 0 0.25rem 0 1rem; +} + +.progress-group-text { + font-size: 0.765625rem; + color: #768192; +} + +.progress-group-header { + display: -ms-flexbox; + display: flex; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -ms-flex-align: end; + align-items: flex-end; + margin-bottom: 0.25rem; +} + +.progress-group-bars { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-item-align: center; + align-self: center; +} + +.progress-group-bars .progress:not(:last-child) { + margin-bottom: 2px; +} + +.progress-group-header + .progress-group-bars { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; +} + +.c-sidebar { + display: -ms-flexbox; + display: flex; + -ms-flex: 0 0 256px; + flex: 0 0 256px; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-order: -1; + order: -1; + width: 256px; + padding: 0; + box-shadow: none; + color: #fff; + background: #3c4b64; + will-change: auto; + transition: box-shadow 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0.25s, -webkit-transform 0.25s; + transition: box-shadow 0.25s, transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0.25s; + transition: box-shadow 0.25s, transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0.25s, -webkit-transform 0.25s; +} + +@media (max-width: 991.98px) { + .c-sidebar { + --is-mobile: true; + position: fixed; + top: 0; + bottom: 0; + z-index: 1031; } } -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } +html:not([dir="rtl"]) .c-sidebar:not(.c-sidebar-right) { + margin-left: -256px; +} + +html:not([dir="rtl"]) .c-sidebar.c-sidebar-right { + -ms-flex-order: 99; + order: 99; + margin-right: -256px; } -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } +*[dir="rtl"] .c-sidebar:not(.c-sidebar-right) { + margin-right: -256px; } -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } +*[dir="rtl"] .c-sidebar.c-sidebar-right { + margin-left: -256px; + border: 0; } -.text-lowercase { - text-transform: lowercase !important; +.c-sidebar[class*="bg-"] { + border-color: rgba(0, 0, 21, 0.1); } -.text-uppercase { - text-transform: uppercase !important; +.c-sidebar.c-sidebar-sm { + width: 192px; } -.text-capitalize { - text-transform: capitalize !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm:not(.c-sidebar-right) { + margin-left: -192px; } -.font-weight-light { - font-weight: 300 !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-sm:not(.c-sidebar-right) { + margin-right: -192px; } -.font-weight-lighter { - font-weight: lighter !important; +*[dir="rtl"] .c-sidebar.c-sidebar-sm.c-sidebar-right { + margin-left: -192px; } -.font-weight-normal { - font-weight: 400 !important; +.c-sidebar.c-sidebar-lg { + width: 320px; } -.font-weight-bold { - font-weight: 700 !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg:not(.c-sidebar-right) { + margin-left: -320px; } -.font-weight-bolder { - font-weight: bolder !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-lg:not(.c-sidebar-right) { + margin-right: -320px; } -.font-italic { - font-style: italic !important; +*[dir="rtl"] .c-sidebar.c-sidebar-lg.c-sidebar-right { + margin-left: -320px; } -.text-white { - color: #fff !important; +.c-sidebar.c-sidebar-xl { + width: 384px; } -.text-primary { - color: #20a8d8 !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl:not(.c-sidebar-right) { + margin-left: -384px; } -a.text-primary:hover, a.text-primary:focus { - color: #167495 !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-xl:not(.c-sidebar-right) { + margin-right: -384px; } -.text-secondary { - color: #c8ced3 !important; +*[dir="rtl"] .c-sidebar.c-sidebar-xl.c-sidebar-right { + margin-left: -384px; } -a.text-secondary:hover, a.text-secondary:focus { - color: #9ea8b1 !important; +@media (min-width: 992px) { + .c-sidebar.c-sidebar-fixed { + position: fixed; + top: 0; + bottom: 0; + z-index: 1030; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-fixed:not(.c-sidebar-right) { + left: 0; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-fixed.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-fixed:not(.c-sidebar-right) { + right: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-fixed.c-sidebar-right { + left: 0; + } } -.text-success { - color: #4dbd74 !important; +.c-sidebar.c-sidebar-overlaid { + position: fixed; + top: 0; + bottom: 0; + z-index: 1032; } -a.text-success:hover, a.text-success:focus { - color: #338a52 !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-overlaid:not(.c-sidebar-right) { + left: 0; } -.text-info { - color: #63c2de !important; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-overlaid.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-overlaid:not(.c-sidebar-right) { + right: 0; } -a.text-info:hover, a.text-info:focus { - color: #2ba6ca !important; +*[dir="rtl"] .c-sidebar.c-sidebar-overlaid.c-sidebar-right { + left: 0; } -.text-warning { - color: #ffc107 !important; +.c-sidebar-close { + position: absolute; + width: 56px; + height: 56px; + background: transparent; + border: 0; } -a.text-warning:hover, a.text-warning:focus { - color: #ba8b00 !important; +html:not([dir="rtl"]) .c-sidebar-close { + right: 0; } -.text-danger { - color: #f86c6b !important; +*[dir="rtl"] .c-sidebar-close { + left: 0; } -a.text-danger:hover, a.text-danger:focus { - color: #f52322 !important; +.c-sidebar-brand { + display: -ms-flexbox; + display: flex; + -ms-flex: 0 0 56px; + flex: 0 0 56px; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.text-light { - color: #f0f3f5 !important; +.c-sidebar-brand .c-sidebar-brand-minimized { + display: none; } -a.text-light:hover, a.text-light:focus { - color: #c2ced6 !important; +.c-sidebar-header { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0.75rem 1rem; + text-align: center; + transition: 0.25s; } -.text-dark { - color: #2f353a !important; +.c-sidebar-nav { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; + -ms-flex-direction: column; + flex-direction: column; + padding: 0; + margin-bottom: 0; + overflow-x: hidden; + overflow-y: auto; + list-style: none; } -a.text-dark:hover, a.text-dark:focus { - color: #0d0e10 !important; +.c-sidebar-nav-title { + padding: 0.75rem 1rem; + margin-top: 1rem; + font-size: 80%; + font-weight: 700; + text-transform: uppercase; + transition: 0.25s; } -.text-body { - color: #23282c !important; +.c-sidebar-nav-divider { + height: 10px; + transition: height 0.25s; } -.text-muted { - color: #73818f !important; +.c-sidebar-nav-item { + width: inherit; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.c-sidebar-nav-link, .c-sidebar-nav-dropdown-toggle { + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; + -ms-flex-align: center; + align-items: center; + padding: 0.8445rem 1rem; + text-decoration: none; + white-space: nowrap; + transition: background 0.25s, color 0.25s; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +html:not([dir="rtl"]) .c-sidebar-nav-link .badge, html:not([dir="rtl"]) .c-sidebar-nav-dropdown-toggle .badge { + margin-left: auto; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +*[dir="rtl"] .c-sidebar-nav-link .badge, *[dir="rtl"] .c-sidebar-nav-dropdown-toggle .badge { + margin-right: auto; } -.text-decoration-none { - text-decoration: none !important; +.c-sidebar-nav-link.c-disabled, .c-disabled.c-sidebar-nav-dropdown-toggle { + cursor: default; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.c-sidebar-nav-link:hover, .c-sidebar-nav-dropdown-toggle:hover { + text-decoration: none; } -.text-reset { - color: inherit !important; +.c-sidebar-nav-icon { + -ms-flex: 0 0 56px; + flex: 0 0 56px; + height: 1.09375rem; + font-size: 1.09375rem; + text-align: center; + transition: 0.25s; + fill: currentColor; } -.visible { - visibility: visible !important; +html:not([dir="rtl"]) .c-sidebar-nav-icon:first-child { + margin-left: -1rem; } -.invisible { - visibility: hidden !important; +*[dir="rtl"] .c-sidebar-nav-icon:first-child { + margin-right: -1rem; } -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #8f9ba6; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #c8ced3 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #c8ced3; - } - .table .thead-dark th { - color: inherit; - border-color: #c8ced3; - } +.c-sidebar-nav-dropdown { + position: relative; + transition: background 0.25s ease-in-out; } -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; +.c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-items { + max-height: 1500px; } -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; +html:not([dir="rtl"]) .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle::after { + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } -.animated.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; +*[dir="rtl"] .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle::after { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +.c-sidebar-nav-dropdown.c-show + .c-sidebar-nav-dropdown.c-show { + margin-top: 1px; +} + +.c-sidebar-nav-dropdown-toggle { + cursor: pointer; +} + +.c-sidebar-nav-dropdown-toggle::after { + display: block; + -ms-flex: 0 8px; + flex: 0 8px; + height: 8px; + content: ""; + background-repeat: no-repeat; + background-position: center; + transition: -webkit-transform 0.25s; + transition: transform 0.25s; + transition: transform 0.25s, -webkit-transform 0.25s; +} + +html:not([dir="rtl"]) .c-sidebar-nav-dropdown-toggle::after { + margin-left: auto; +} + +*[dir="rtl"] .c-sidebar-nav-dropdown-toggle::after { + margin-right: auto; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +html:not([dir="rtl"]) .c-sidebar-nav-dropdown-toggle .badge { + margin-right: 1rem; } -.fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; +*[dir="rtl"] .c-sidebar-nav-dropdown-toggle .badge { + margin-left: 1rem; } -.ps { - overflow: hidden !important; - -ms-touch-action: auto; - touch-action: auto; - -ms-overflow-style: none; - overflow-anchor: none; +.c-sidebar-nav-dropdown-items { + max-height: 0; + padding: 0; + overflow-y: hidden; + transition: max-height 0.25s ease-in-out; } -.ps__rail-x { - position: absolute; - bottom: 0; - display: none; - height: 15px; - opacity: 0; - transition: background-color .2s linear, opacity .2s linear; +html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-link, html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle { + padding-left: 56px; } -.ps__rail-y { - position: absolute; - right: 0; - display: none; - width: 15px; - opacity: 0; - transition: background-color .2s linear, opacity .2s linear; +*[dir="rtl"] .c-sidebar-nav-dropdown-items .c-sidebar-nav-link, *[dir="rtl"] .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle { + padding-right: 56px; } -.ps--active-x > .ps__rail-x, -.ps--active-y > .ps__rail-y { - display: block; - background-color: transparent; +html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-link .c-sidebar-nav-icon, html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + margin-left: -56px; } -.ps:hover > .ps__rail-x, -.ps:hover > .ps__rail-y, -.ps--focus > .ps__rail-x, -.ps--focus > .ps__rail-y, -.ps--scrolling-x > .ps__rail-x, -.ps--scrolling-y > .ps__rail-y { - opacity: .6; +*[dir="rtl"] .c-sidebar-nav-dropdown-items .c-sidebar-nav-link .c-sidebar-nav-icon, *[dir="rtl"] .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + margin-right: -56px; } -.ps__rail-x:hover, -.ps__rail-y:hover, -.ps__rail-x:focus, -.ps__rail-y:focus { - background-color: #eee; - opacity: .9; +.c-sidebar-nav-label { + display: -ms-flexbox; + display: flex; + padding: 0.211125rem 1rem; + transition: 0.25s; } -/* - * Scrollbar thumb styles - */ -.ps__thumb-x { - position: absolute; - bottom: 2px; - height: 6px; - background-color: #aaa; - border-radius: 6px; - transition: background-color .2s linear, height .2s ease-in-out; +.c-sidebar-nav-label:hover { + text-decoration: none; } -.ps__thumb-y { - position: absolute; - right: 2px; - width: 6px; - background-color: #aaa; - border-radius: 6px; - transition: background-color .2s linear, width .2s ease-in-out; +.c-sidebar-nav-label .c-sidebar-nav-icon { + margin-top: 1px; } -.ps__rail-x:hover > .ps__thumb-x, -.ps__rail-x:focus > .ps__thumb-x { - height: 11px; - background-color: #999; +.c-sidebar-footer { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0.75rem 1rem; + transition: 0.25s; } -.ps__rail-y:hover > .ps__thumb-y, -.ps__rail-y:focus > .ps__thumb-y { - width: 11px; - background-color: #999; +.c-sidebar-minimizer { + display: -ms-flexbox; + display: flex; + -ms-flex: 0 0 50px; + flex: 0 0 50px; + -ms-flex-pack: end; + justify-content: flex-end; + width: inherit; + padding: 0; + cursor: pointer; + border: 0; } -@supports (-ms-overflow-style: none) { - .ps { - overflow: auto !important; +@media (max-width: 991.98px) { + .c-sidebar-minimizer { + display: none; } } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .ps { - overflow: auto !important; - } +.c-sidebar-minimizer::before { + display: block; + width: 50px; + height: 50px; + content: ""; + background-repeat: no-repeat; + background-position: center; + background-size: 12.5px; + transition: 0.25s; } -.aside-menu { - z-index: 1019; - width: 250px; - color: #2f353a; - background: #fff; - border-left: 1px solid #c8ced3; +*[dir="rtl"] .c-sidebar-minimizer::before { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } -.aside-menu .nav-tabs { - border-color: #c8ced3; +.c-sidebar-minimizer:focus, .c-sidebar-minimizer.c-focus { + outline: 0; } -.aside-menu .nav-tabs .nav-link { - padding: 0.75rem 1rem; - color: #23282c; - border-top: 0; - border-radius: 0; +.c-sidebar-right .c-sidebar-minimizer { + -ms-flex-pack: start; + justify-content: flex-start; } -.aside-menu .nav-tabs .nav-link.active { - color: #20a8d8; - border-right-color: #c8ced3; - border-left-color: #c8ced3; +html:not([dir="rtl"]) .c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); } -.aside-menu .nav-tabs .nav-item:first-child .nav-link { - border-left: 0; +*[dir="rtl"] .c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } -.aside-menu .tab-content { - position: relative; - overflow-x: hidden; - overflow-y: auto; - border: 0; - border-top: 1px solid #c8ced3; - -ms-overflow-style: -ms-autohiding-scrollbar; +@media (max-width: 991.98px) { + .c-sidebar-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1030; + width: 100vw; + height: 100vh; + background-color: #000015; + transition: 0.25s; + } + .c-sidebar-backdrop.c-fade { + opacity: 0; + } + .c-sidebar-backdrop.c-show { + opacity: 0.5; + } } -.aside-menu .tab-content::-webkit-scrollbar { - width: 10px; - margin-left: -10px; - -webkit-appearance: none; - appearance: none; +@media (min-width: 992px) { + .c-sidebar-minimized { + z-index: 1031; + -ms-flex: 0 0 56px; + flex: 0 0 56px; + } + .c-sidebar-minimized.c-sidebar-fixed { + z-index: 1031; + width: 56px; + } + html:not([dir="rtl"]) .c-sidebar-minimized:not(.c-sidebar-right) { + margin-left: -56px; + } + *[dir="rtl"] .c-sidebar-minimized:not(.c-sidebar-right) { + margin-right: -56px; + } + html:not([dir="rtl"]) .c-sidebar-minimized.c-sidebar-right { + margin-right: -56px; + margin-left: -56px; + } + .c-sidebar-minimized .c-sidebar-brand-full { + display: none; + } + .c-sidebar-minimized .c-sidebar-brand-minimized { + display: block; + } + .c-sidebar-minimized .c-sidebar-nav { + padding-bottom: 50px; + overflow: visible; + } + .c-sidebar-minimized .c-d-minimized-none, + .c-sidebar-minimized .c-sidebar-nav-divider, + .c-sidebar-minimized .c-sidebar-nav-label, + .c-sidebar-minimized .c-sidebar-nav-title, + .c-sidebar-minimized .c-sidebar-footer, + .c-sidebar-minimized .c-sidebar-form, + .c-sidebar-minimized .c-sidebar-header { + height: 0; + padding: 0; + margin: 0; + visibility: hidden; + opacity: 0; + } + .c-sidebar-minimized .c-sidebar-minimizer { + position: fixed; + bottom: 0; + width: inherit; + } + html:not([dir="rtl"]) .c-sidebar-minimized .c-sidebar-minimizer::before { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); + } + *[dir="rtl"] .c-sidebar-minimized .c-sidebar-minimizer::before,html:not([dir="rtl"]) .c-sidebar-minimized.c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + *[dir="rtl"] .c-sidebar-minimized.c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + html:not([dir="rtl"]) .c-sidebar-minimized.c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-item:hover, html:not([dir="rtl"]) + .c-sidebar-minimized.c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + margin-left: -256px; + } + *[dir="rtl"] .c-sidebar-minimized.c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-item:hover, *[dir="rtl"] + .c-sidebar-minimized.c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + margin-right: -256px; + } + .c-sidebar-minimized .c-sidebar-nav-link, .c-sidebar-minimized .c-sidebar-nav-dropdown-toggle, + .c-sidebar-minimized .c-sidebar-nav-dropdown-toggle { + overflow: hidden; + white-space: nowrap; + border-left: 0; + } + .c-sidebar-minimized .c-sidebar-nav-link:hover, .c-sidebar-minimized .c-sidebar-nav-dropdown-toggle:hover, + .c-sidebar-minimized .c-sidebar-nav-dropdown-toggle:hover { + width: 312px; + } + .c-sidebar-minimized .c-sidebar-nav-dropdown-toggle::after { + display: none; + } + .c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link, .c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle { + width: 256px; + } + .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown { + position: relative; + } + .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items,.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown:not(.c-show) > .c-sidebar-nav-dropdown-items { + display: none; + } + .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown .c-sidebar-nav-dropdown-items { + max-height: 1500px; + } + .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + width: 312px; + overflow: visible; + } + .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items { + position: absolute; + display: inline; + } + html:not([dir="rtl"]) .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items { + left: 56px; + } + *[dir="rtl"] .c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items { + right: 56px; + } + html:not([dir="rtl"]) .c-sidebar-minimized.c-sidebar-right > .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items { + left: 0; + } + *[dir="rtl"] .c-sidebar-minimized.c-sidebar-right > .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items { + right: 0; + } +} + +@media (min-width: 992px) { + .c-sidebar-unfoldable:not(:hover) { + z-index: 1031; + -ms-flex: 0 0 56px; + flex: 0 0 56px; + } + .c-sidebar-unfoldable:not(:hover).c-sidebar-fixed { + z-index: 1031; + width: 56px; + } + html:not([dir="rtl"]) .c-sidebar-unfoldable:not(:hover):not(.c-sidebar-right) { + margin-left: -56px; + } + *[dir="rtl"] .c-sidebar-unfoldable:not(:hover):not(.c-sidebar-right) { + margin-right: -56px; + } + html:not([dir="rtl"]) .c-sidebar-unfoldable:not(:hover).c-sidebar-right { + margin-right: -56px; + margin-left: -56px; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-brand-full { + display: none; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-brand-minimized { + display: block; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav { + padding-bottom: 50px; + overflow: visible; + } + .c-sidebar-unfoldable:not(:hover) .c-d-minimized-none, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-divider, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-label, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-title, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-footer, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-form, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-header { + height: 0; + padding: 0; + margin: 0; + visibility: hidden; + opacity: 0; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-minimizer { + position: fixed; + bottom: 0; + width: inherit; + } + html:not([dir="rtl"]) .c-sidebar-unfoldable:not(:hover) .c-sidebar-minimizer::before { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); + } + *[dir="rtl"] .c-sidebar-unfoldable:not(:hover) .c-sidebar-minimizer::before,html:not([dir="rtl"]) .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + *[dir="rtl"] .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-minimizer::before { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + html:not([dir="rtl"]) .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-item:hover, html:not([dir="rtl"]) + .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + margin-left: -256px; + } + *[dir="rtl"] .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-item:hover, *[dir="rtl"] + .c-sidebar-unfoldable:not(:hover).c-sidebar-right .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + margin-right: -256px; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-link, .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-toggle, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-toggle { + overflow: hidden; + white-space: nowrap; + border-left: 0; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-link:hover, .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-toggle:hover, + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-toggle:hover { + width: 312px; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-toggle::after { + display: none; + } + .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-items .c-sidebar-nav-link, .c-sidebar-unfoldable:not(:hover) .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle { + width: 256px; + } } -.aside-menu .tab-content::-webkit-scrollbar-track { - background-color: white; - border-right: 1px solid #f2f2f2; - border-left: 1px solid #f2f2f2; +.c-sidebar-unfoldable:not(:hover) .ps { + overflow: initial !important; } -.aside-menu .tab-content::-webkit-scrollbar-thumb { - height: 50px; - background-color: #e6e6e6; - background-clip: content-box; - border-color: transparent; - border-style: solid; - border-width: 1px 2px; +@media (min-width: 992px) { + .c-sidebar-unfoldable { + z-index: 1031 !important; + } + html:not([dir="rtl"]) .c-sidebar-unfoldable:hover .c-sidebar-minimizer::before { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); + } + *[dir="rtl"] .c-sidebar-unfoldable:hover .c-sidebar-minimizer::before { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } } -.aside-menu .tab-content .tab-pane { - padding: 0; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right), html:not([dir="rtl"]) +.c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-left: 0; } -.avatar { - position: relative; - display: inline-block; - width: 36px; - height: 36px; +*[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right), *[dir="rtl"] +.c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-right: 0; +} + +@media (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } } -.avatar .avatar-status { - position: absolute; - right: 0; - bottom: 0; - display: block; - width: 10px; - height: 10px; - border: 1px solid #fff; - border-radius: 50em; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right, html:not([dir="rtl"]) +.c-sidebar.c-sidebar-show.c-sidebar-right { + margin-right: 0; } -.avatar > img { - vertical-align: initial; +*[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right, *[dir="rtl"] +.c-sidebar.c-sidebar-show.c-sidebar-right { + margin-left: 0; } -.avatar-lg { - position: relative; - display: inline-block; - width: 72px; - height: 72px; +@media (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } } -.avatar-lg .avatar-status { - position: absolute; - right: 0; - bottom: 0; - display: block; - width: 12px; - height: 12px; - border: 1px solid #fff; - border-radius: 50em; +@media (min-width: 576px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right), html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-left: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right), *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-right: 0; + } } -.avatar-sm { - position: relative; - display: inline-block; - width: 24px; - height: 24px; +@media (min-width: 576px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-sm-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } } -.avatar-sm .avatar-status { - position: absolute; - right: 0; - bottom: 0; - display: block; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-radius: 50em; +@media (min-width: 576px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-right: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-left: 0; + } } -.avatar-xs { - position: relative; - display: inline-block; - width: 20px; - height: 20px; +@media (min-width: 576px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-sm-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } } -.avatar-xs .avatar-status { - position: absolute; - right: 0; - bottom: 0; - display: block; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-radius: 50em; +@media (min-width: 768px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right), html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-left: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right), *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-right: 0; + } } -.avatars-stack .avatar { - margin-right: -18px; - transition: margin-right 0.25s; +@media (min-width: 768px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-md-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } } -.avatars-stack .avatar:hover { - margin-right: 0; +@media (min-width: 768px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-right: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-left: 0; + } } -.avatars-stack .avatar-lg { - margin-right: -36px; +@media (min-width: 768px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-md-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } } -.avatars-stack .avatar-sm { - margin-right: -12px; +@media (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right), html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-left: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right), *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-right: 0; + } } -.avatars-stack .avatar-xs { - margin-right: -10px; +@media (min-width: 992px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } } -.badge-pill { - border-radius: 10rem; +@media (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-right: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-left: 0; + } } -.breadcrumb-menu { - margin-left: auto; +@media (min-width: 992px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-lg-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } } -.breadcrumb-menu::before { - display: none; +@media (min-width: 1200px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right), html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-left: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right), *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right) { + margin-right: 0; + } } -.breadcrumb-menu .btn-group { - vertical-align: top; +@media (min-width: 1200px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-xl-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } } -.breadcrumb-menu .btn { - padding: 0 0.75rem; - color: #73818f; - vertical-align: top; - border: 0; +@media (min-width: 1200px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-right: 0; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right { + margin-left: 0; + } } -.breadcrumb-menu .btn:hover, .breadcrumb-menu .btn.active { - color: #23282c; - background: transparent; +@media (min-width: 1200px) and (min-width: 992px) { + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-right: 256px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed ~ .c-wrapper { + margin-left: 256px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-right: 192px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-sm ~ .c-wrapper { + margin-left: 192px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-right: 320px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-lg ~ .c-wrapper { + margin-left: 320px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-right: 384px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-xl ~ .c-wrapper { + margin-left: 384px; + } + html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, html:not([dir="rtl"]) + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-right: 56px; + } + *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] .c-sidebar.c-sidebar-xl-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper, *[dir="rtl"] + .c-sidebar.c-sidebar-show.c-sidebar-right.c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper { + margin-left: 56px; + } } -.breadcrumb-menu .open .btn { - color: #23282c; - background: transparent; +.c-sidebar .c-sidebar-close,.c-sidebar .c-sidebar-brand { + color: #fff; } -.breadcrumb-menu .dropdown-menu { - min-width: 180px; - line-height: 1.5; +.c-sidebar .c-sidebar-brand,.c-sidebar .c-sidebar-header { + background: rgba(0, 0, 21, 0.2); } -*[dir="rtl"] .breadcrumb-menu { - margin-right: auto; - margin-left: initial; +.c-sidebar .c-sidebar-form .c-form-control { + color: #fff; + background: rgba(0, 0, 21, 0.1); + border: 0; } -.breadcrumb { - position: relative; - border-radius: 0; - border-bottom: 1px solid #c8ced3; +.c-sidebar .c-sidebar-form .c-form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -*[dir="rtl"] .breadcrumb-item::before { - padding-right: 0; - padding-left: 0.5rem; +.c-sidebar .c-sidebar-form .c-form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.7); } -*[dir="rtl"] .breadcrumb-item { - padding-right: 0.5rem; - padding-left: 0; +.c-sidebar .c-sidebar-form .c-form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -.brand-card { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - min-width: 0; - margin-bottom: 1.5rem; - word-wrap: break-word; - background-color: #fff; - background-clip: border-box; - border: 1px solid #c8ced3; - border-radius: 0.25rem; +.c-sidebar .c-sidebar-form .c-form-control::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -.brand-card-header { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 6rem; - border-radius: 0.25rem 0.25rem 0 0; +.c-sidebar .c-sidebar-form .c-form-control::placeholder { + color: rgba(255, 255, 255, 0.7); } -.brand-card-header i { - font-size: 2rem; - color: #fff; +.c-sidebar .c-sidebar-nav-title { + color: rgba(255, 255, 255, 0.6); } -.brand-card-header .chart-wrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +.c-sidebar .c-sidebar-nav-link, .c-sidebar .c-sidebar-nav-dropdown-toggle { + color: rgba(255, 255, 255, 0.8); + background: transparent; } -.brand-card-body { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - padding: 0.75rem 0; - text-align: center; +.c-sidebar .c-sidebar-nav-link .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); +} + +.c-sidebar .c-sidebar-nav-link.c-active, .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle { + color: #fff; + background: rgba(255, 255, 255, 0.05); } -.brand-card-body > * { - -ms-flex: 1; - flex: 1; - padding: 0.1875rem 0; +.c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon, .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: #fff; } -.brand-card-body > *:not(:last-child) { - border-right: 1px solid #c8ced3; +.c-sidebar .c-sidebar-nav-link:hover, .c-sidebar .c-sidebar-nav-dropdown-toggle:hover { + color: #fff; + background: #321fdb; } -*[dir="rtl"] .brand-card-body > *:not(:last-child) { - border-right: 0; - border-left: 1px solid #c8ced3; +.c-sidebar .c-sidebar-nav-link:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: #fff; } -.btn-brand { - border: 0; +.c-sidebar .c-sidebar-nav-link:hover.c-sidebar-nav-dropdown-toggle::after, .c-sidebar :hover.c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-brand i { - display: inline-block; - width: 2.0625rem; - margin: -0.375rem -0.75rem; - line-height: 2.0625rem; - text-align: center; - background-color: rgba(0, 0, 0, 0.2); - border-radius: 0.25rem; +.c-sidebar .c-sidebar-nav-link.c-disabled, .c-sidebar .c-disabled.c-sidebar-nav-dropdown-toggle { + color: #b3b2b2; + background: transparent; } -.btn-brand i + span { - margin-left: 1.5rem; +.c-sidebar .c-sidebar-nav-link.c-disabled .c-sidebar-nav-icon, .c-sidebar .c-disabled.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); } -.btn-brand.btn-lg i, .btn-group-lg > .btn-brand.btn i { - width: 2.640625rem; - margin: -0.5rem -1rem; - line-height: 2.640625rem; - border-radius: 0.3rem; +.c-sidebar .c-sidebar-nav-link.c-disabled:hover, .c-sidebar .c-disabled.c-sidebar-nav-dropdown-toggle:hover { + color: #b3b2b2; } -.btn-brand.btn-lg i + span, .btn-group-lg > .btn-brand.btn i + span { - margin-left: 2rem; +.c-sidebar .c-sidebar-nav-link.c-disabled:hover .c-sidebar-nav-icon, .c-sidebar .c-disabled.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); } -.btn-brand.btn-sm i, .btn-group-sm > .btn-brand.btn i { - width: 1.648438rem; - margin: -0.25rem -0.5rem; - line-height: 1.648438rem; - border-radius: 0.2rem; +.c-sidebar .c-sidebar-nav-link.c-disabled:hover.c-sidebar-nav-dropdown-toggle::after, .c-sidebar .c-disabled:hover.c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-brand.btn-sm i + span, .btn-group-sm > .btn-brand.btn i + span { - margin-left: 1rem; +.c-sidebar .c-sidebar-nav-dropdown-toggle { + position: relative; } -.btn-brand.btn-square i { - border-radius: 0; +.c-sidebar .c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='rgba(255, 255, 255, 0.5)' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-facebook { - color: #fff; - background-color: #3b5998; - border-color: #3b5998; +.c-sidebar .c-sidebar-nav-dropdown.c-show { + background: rgba(0, 0, 0, 0.2); } -.btn-facebook:hover { +.c-sidebar .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link, .c-sidebar .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-dropdown-toggle { color: #fff; - background-color: #30497c; - border-color: #2d4373; } -.btn-facebook:focus, .btn-facebook.focus { - box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); +.c-sidebar .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled, .c-sidebar .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle { + color: #b3b2b2; + background: transparent; } -.btn-facebook.disabled, .btn-facebook:disabled { - color: #fff; - background-color: #3b5998; - border-color: #3b5998; +.c-sidebar .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled:hover, .c-sidebar .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle:hover { + color: #b3b2b2; } -.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active, -.show > .btn-facebook.dropdown-toggle { - color: #fff; - background-color: #2d4373; - border-color: #293e6a; +.c-sidebar .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); } -.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus, -.show > .btn-facebook.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); +.c-sidebar .c-sidebar-nav-label { + color: rgba(255, 255, 255, 0.6); } -.btn-twitter { +.c-sidebar .c-sidebar-nav-label:hover { color: #fff; - background-color: #00aced; - border-color: #00aced; } -.btn-twitter:hover { - color: #fff; - background-color: #0090c7; - border-color: #0087ba; +.c-sidebar .c-sidebar-nav-label .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); } -.btn-twitter:focus, .btn-twitter.focus { - box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5); +.c-sidebar .c-progress { + background-color: #596f94 !important; } -.btn-twitter.disabled, .btn-twitter:disabled { - color: #fff; - background-color: #00aced; - border-color: #00aced; +.c-sidebar .c-sidebar-footer { + background: rgba(0, 0, 21, 0.2); } -.btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active, -.show > .btn-twitter.dropdown-toggle { - color: #fff; - background-color: #0087ba; - border-color: #007ead; +.c-sidebar .c-sidebar-minimizer { + background-color: rgba(0, 0, 21, 0.2); } -.btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus, -.show > .btn-twitter.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5); +.c-sidebar .c-sidebar-minimizer::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%238a93a2' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-linkedin { - color: #fff; - background-color: #4875b4; - border-color: #4875b4; +.c-sidebar .c-sidebar-minimizer:focus, .c-sidebar .c-sidebar-minimizer.c-focus { + outline: 0; } -.btn-linkedin:hover { - color: #fff; - background-color: #3d6399; - border-color: #395d90; +.c-sidebar .c-sidebar-minimizer:hover { + background-color: rgba(0, 0, 0, 0.3); } -.btn-linkedin:focus, .btn-linkedin.focus { - box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5); +.c-sidebar .c-sidebar-minimizer:hover::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-linkedin.disabled, .btn-linkedin:disabled { - color: #fff; - background-color: #4875b4; - border-color: #4875b4; +.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle { + background: #321fdb; } -.btn-linkedin:not(:disabled):not(.disabled):active, .btn-linkedin:not(:disabled):not(.disabled).active, -.show > .btn-linkedin.dropdown-toggle { +.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link .c-sidebar-nav-icon, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { color: #fff; - background-color: #395d90; - border-color: #365786; } -.btn-linkedin:not(:disabled):not(.disabled):active:focus, .btn-linkedin:not(:disabled):not(.disabled).active:focus, -.show > .btn-linkedin.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5); +.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link.c-disabled, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-disabled.c-sidebar-nav-dropdown-toggle { + background: #3c4b64; } -.btn-google-plus { - color: #fff; - background-color: #d34836; - border-color: #d34836; +.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link.c-disabled .c-sidebar-nav-icon, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-disabled.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.5); } -.btn-google-plus:hover { - color: #fff; - background-color: #ba3929; - border-color: #b03626; +.c-sidebar.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items { + background: #3c4b64; } -.btn-google-plus:focus, .btn-google-plus.focus { - box-shadow: 0 0 0 0.2rem rgba(218, 99, 84, 0.5); +.c-sidebar.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover { + background: #321fdb; } -.btn-google-plus.disabled, .btn-google-plus:disabled { - color: #fff; - background-color: #d34836; - border-color: #d34836; +.c-sidebar.c-sidebar-light { + color: #4f5d73; + background: #fff; + border-right: 1px solid rgba(159, 167, 179, 0.5); } -.btn-google-plus:not(:disabled):not(.disabled):active, .btn-google-plus:not(:disabled):not(.disabled).active, -.show > .btn-google-plus.dropdown-toggle { - color: #fff; - background-color: #b03626; - border-color: #a53324; +html:not([dir="rtl"]) .c-sidebar.c-sidebar-light.c-sidebar-right,*[dir="rtl"] .c-sidebar.c-sidebar-light { + border-right: 0; + border-left: 1px solid rgba(159, 167, 179, 0.5); } -.btn-google-plus:not(:disabled):not(.disabled):active:focus, .btn-google-plus:not(:disabled):not(.disabled).active:focus, -.show > .btn-google-plus.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(218, 99, 84, 0.5); +*[dir="rtl"] .c-sidebar.c-sidebar-light.c-sidebar-right { + border: 0; + border-right: 1px solid rgba(159, 167, 179, 0.5); } -.btn-flickr { - color: #fff; - background-color: #ff0084; - border-color: #ff0084; +.c-sidebar.c-sidebar-light .c-sidebar-close { + color: #4f5d73; } -.btn-flickr:hover { +.c-sidebar.c-sidebar-light .c-sidebar-brand { color: #fff; - background-color: #d90070; - border-color: #cc006a; + background: #321fdb; } -.btn-flickr:focus, .btn-flickr.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-header { + background: rgba(0, 0, 21, 0.2); } -.btn-flickr.disabled, .btn-flickr:disabled { +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control { color: #fff; - background-color: #ff0084; - border-color: #ff0084; + background: rgba(0, 0, 21, 0.1); + border: 0; } -.btn-flickr:not(:disabled):not(.disabled):active, .btn-flickr:not(:disabled):not(.disabled).active, -.show > .btn-flickr.dropdown-toggle { - color: #fff; - background-color: #cc006a; - border-color: #bf0063; +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -.btn-flickr:not(:disabled):not(.disabled):active:focus, .btn-flickr:not(:disabled):not(.disabled).active:focus, -.show > .btn-flickr.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.7); } -.btn-tumblr { - color: #fff; - background-color: #32506d; - border-color: #32506d; +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -.btn-tumblr:hover { - color: #fff; - background-color: #263d53; - border-color: #22364a; +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.7); } -.btn-tumblr:focus, .btn-tumblr.focus { - box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-form .c-form-control::placeholder { + color: rgba(255, 255, 255, 0.7); } -.btn-tumblr.disabled, .btn-tumblr:disabled { - color: #fff; - background-color: #32506d; - border-color: #32506d; +.c-sidebar.c-sidebar-light .c-sidebar-nav-title { + color: rgba(0, 0, 21, 0.4); } -.btn-tumblr:not(:disabled):not(.disabled):active, .btn-tumblr:not(:disabled):not(.disabled).active, -.show > .btn-tumblr.dropdown-toggle { - color: #fff; - background-color: #22364a; - border-color: #1e3041; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle { + color: rgba(0, 0, 21, 0.8); + background: transparent; } -.btn-tumblr:not(:disabled):not(.disabled):active:focus, .btn-tumblr:not(:disabled):not(.disabled).active:focus, -.show > .btn-tumblr.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-link .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-xing { - color: #fff; - background-color: #026466; - border-color: #026466; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-active, .c-sidebar.c-sidebar-light .c-active.c-sidebar-nav-dropdown-toggle { + color: rgba(0, 0, 21, 0.8); + background: rgba(0, 0, 21, 0.05); } -.btn-xing:hover { - color: #fff; - background-color: #013f40; - border-color: #013334; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-active .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: #321fdb; } -.btn-xing:focus, .btn-xing.focus { - box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-link:hover, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle:hover { + color: #fff; + background: #321fdb; } -.btn-xing.disabled, .btn-xing:disabled { +.c-sidebar.c-sidebar-light .c-sidebar-nav-link:hover .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #026466; - border-color: #026466; } -.btn-xing:not(:disabled):not(.disabled):active, .btn-xing:not(:disabled):not(.disabled).active, -.show > .btn-xing.dropdown-toggle { - color: #fff; - background-color: #013334; - border-color: #012727; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link:hover.c-sidebar-nav-dropdown-toggle::after, .c-sidebar.c-sidebar-light :hover.c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-xing:not(:disabled):not(.disabled):active:focus, .btn-xing:not(:disabled):not(.disabled).active:focus, -.show > .btn-xing.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-disabled, .c-sidebar.c-sidebar-light .c-disabled.c-sidebar-nav-dropdown-toggle { + color: #b3b2b2; + background: transparent; } -.btn-github { - color: #fff; - background-color: #4183c4; - border-color: #4183c4; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-disabled .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-disabled.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-github:hover { - color: #fff; - background-color: #3570aa; - border-color: #3269a0; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-disabled:hover, .c-sidebar.c-sidebar-light .c-disabled.c-sidebar-nav-dropdown-toggle:hover { + color: #b3b2b2; } -.btn-github:focus, .btn-github.focus { - box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-disabled:hover .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-disabled.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-github.disabled, .btn-github:disabled { - color: #fff; - background-color: #4183c4; - border-color: #4183c4; +.c-sidebar.c-sidebar-light .c-sidebar-nav-link.c-disabled:hover.c-sidebar-nav-dropdown-toggle::after, .c-sidebar.c-sidebar-light .c-disabled:hover.c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-github:not(:disabled):not(.disabled):active, .btn-github:not(:disabled):not(.disabled).active, -.show > .btn-github.dropdown-toggle { - color: #fff; - background-color: #3269a0; - border-color: #2f6397; +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle { + position: relative; } -.btn-github:not(:disabled):not(.disabled):active:focus, .btn-github:not(:disabled):not(.disabled).active:focus, -.show > .btn-github.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown-toggle::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='rgba(0, 0, 21, 0.5)' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-html5 { - color: #fff; - background-color: #e34f26; - border-color: #e34f26; +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show { + background: rgba(0, 0, 0, 0.05); } -.btn-html5:hover { - color: #fff; - background-color: #c9401a; - border-color: #be3c18; +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-dropdown-toggle { + color: rgba(0, 0, 21, 0.8); } -.btn-html5:focus, .btn-html5.focus { - box-shadow: 0 0 0 0.2rem rgba(231, 105, 71, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle { + color: #b3b2b2; + background: transparent; } -.btn-html5.disabled, .btn-html5:disabled { - color: #fff; - background-color: #e34f26; - border-color: #e34f26; +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled:hover, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle:hover { + color: #b3b2b2; } -.btn-html5:not(:disabled):not(.disabled):active, .btn-html5:not(:disabled):not(.disabled).active, -.show > .btn-html5.dropdown-toggle { - color: #fff; - background-color: #be3c18; - border-color: #b23917; +.c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-sidebar-nav-link.c-disabled:hover .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light .c-sidebar-nav-dropdown.c-show .c-disabled.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-html5:not(:disabled):not(.disabled):active:focus, .btn-html5:not(:disabled):not(.disabled).active:focus, -.show > .btn-html5.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(231, 105, 71, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-nav-label { + color: rgba(0, 0, 21, 0.4); } -.btn-openid { - color: #23282c; - background-color: #f78c40; - border-color: #f78c40; +.c-sidebar.c-sidebar-light .c-sidebar-nav-label:hover { + color: #4f5d73; } -.btn-openid:hover { - color: #fff; - background-color: #f5761b; - border-color: #f56f0f; +.c-sidebar.c-sidebar-light .c-sidebar-nav-label .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-openid:focus, .btn-openid.focus { - box-shadow: 0 0 0 0.2rem rgba(215, 125, 61, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-footer { + background: rgba(0, 0, 21, 0.2); } -.btn-openid.disabled, .btn-openid:disabled { - color: #23282c; - background-color: #f78c40; - border-color: #f78c40; +.c-sidebar.c-sidebar-light .c-sidebar-minimizer { + background-color: rgba(0, 0, 0, 0.05); } -.btn-openid:not(:disabled):not(.disabled):active, .btn-openid:not(:disabled):not(.disabled).active, -.show > .btn-openid.dropdown-toggle { - color: #fff; - background-color: #f56f0f; - border-color: #ed680a; +.c-sidebar.c-sidebar-light .c-sidebar-minimizer::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%238a93a2' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-openid:not(:disabled):not(.disabled):active:focus, .btn-openid:not(:disabled):not(.disabled).active:focus, -.show > .btn-openid.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(215, 125, 61, 0.5); +.c-sidebar.c-sidebar-light .c-sidebar-minimizer:focus, .c-sidebar.c-sidebar-light .c-sidebar-minimizer.c-focus { + outline: 0; } -.btn-stack-overflow { - color: #fff; - background-color: #fe7a15; - border-color: #fe7a15; +.c-sidebar.c-sidebar-light .c-sidebar-minimizer:hover { + background-color: rgba(0, 0, 0, 0.1); } -.btn-stack-overflow:hover { - color: #fff; - background-color: #ec6701; - border-color: #df6101; +.c-sidebar.c-sidebar-light .c-sidebar-minimizer:hover::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23768192' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); } -.btn-stack-overflow:focus, .btn-stack-overflow.focus { - box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5); +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link, .c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle { + background: #321fdb; } -.btn-stack-overflow.disabled, .btn-stack-overflow:disabled { +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { color: #fff; - background-color: #fe7a15; - border-color: #fe7a15; } -.btn-stack-overflow:not(:disabled):not(.disabled):active, .btn-stack-overflow:not(:disabled):not(.disabled).active, -.show > .btn-stack-overflow.dropdown-toggle { - color: #fff; - background-color: #df6101; - border-color: #d25c01; +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link.c-disabled, .c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-disabled.c-sidebar-nav-dropdown-toggle { + background: #fff; } -.btn-stack-overflow:not(:disabled):not(.disabled):active:focus, .btn-stack-overflow:not(:disabled):not(.disabled).active:focus, -.show > .btn-stack-overflow.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5); +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link.c-disabled .c-sidebar-nav-icon, .c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-disabled.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(0, 0, 21, 0.5); } -.btn-youtube { - color: #fff; - background-color: #b00; - border-color: #b00; +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items { + background: #fff; } -.btn-youtube:hover { - color: #fff; - background-color: #950000; - border-color: #880000; +.c-sidebar.c-sidebar-light.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover,.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-primary, .c-sidebar .c-sidebar-nav-link-primary.c-sidebar-nav-dropdown-toggle { + background: #321fdb; } -.btn-youtube:focus, .btn-youtube.focus { - box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-primary .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-primary.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-youtube.disabled, .btn-youtube:disabled { - color: #fff; - background-color: #b00; - border-color: #b00; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-primary:hover, .c-sidebar .c-sidebar-nav-link-primary.c-sidebar-nav-dropdown-toggle:hover { + background: #2d1cc5; } -.btn-youtube:not(:disabled):not(.disabled):active, .btn-youtube:not(:disabled):not(.disabled).active, -.show > .btn-youtube.dropdown-toggle { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-primary:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-primary.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #880000; - border-color: #7b0000; } -.btn-youtube:not(:disabled):not(.disabled):active:focus, .btn-youtube:not(:disabled):not(.disabled).active:focus, -.show > .btn-youtube.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-secondary, .c-sidebar .c-sidebar-nav-link-secondary.c-sidebar-nav-dropdown-toggle { + background: #ced2d8; } -.btn-css3 { - color: #fff; - background-color: #0170ba; - border-color: #0170ba; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-secondary .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-secondary.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-css3:hover { - color: #fff; - background-color: #015994; - border-color: #015187; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-secondary:hover, .c-sidebar .c-sidebar-nav-link-secondary.c-sidebar-nav-dropdown-toggle:hover { + background: #c0c5cd; } -.btn-css3:focus, .btn-css3.focus { - box-shadow: 0 0 0 0.2rem rgba(39, 133, 196, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-secondary:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-secondary.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: #fff; } -.btn-css3.disabled, .btn-css3:disabled { - color: #fff; - background-color: #0170ba; - border-color: #0170ba; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-success, .c-sidebar .c-sidebar-nav-link-success.c-sidebar-nav-dropdown-toggle { + background: #2eb85c; } -.btn-css3:not(:disabled):not(.disabled):active, .btn-css3:not(:disabled):not(.disabled).active, -.show > .btn-css3.dropdown-toggle { - color: #fff; - background-color: #015187; - border-color: #014a7b; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-success .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-success.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-css3:not(:disabled):not(.disabled):active:focus, .btn-css3:not(:disabled):not(.disabled).active:focus, -.show > .btn-css3.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(39, 133, 196, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-success:hover, .c-sidebar .c-sidebar-nav-link-success.c-sidebar-nav-dropdown-toggle:hover { + background: #29a452; } -.btn-dribbble { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-success:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-success.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #ea4c89; - border-color: #ea4c89; } -.btn-dribbble:hover { - color: #fff; - background-color: #e62a72; - border-color: #e51e6b; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-info, .c-sidebar .c-sidebar-nav-link-info.c-sidebar-nav-dropdown-toggle { + background: #39f; +} + +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-info .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-info.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-dribbble:focus, .btn-dribbble.focus { - box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-info:hover, .c-sidebar .c-sidebar-nav-link-info.c-sidebar-nav-dropdown-toggle:hover { + background: #1a8cff; } -.btn-dribbble.disabled, .btn-dribbble:disabled { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-info:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-info.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #ea4c89; - border-color: #ea4c89; } -.btn-dribbble:not(:disabled):not(.disabled):active, .btn-dribbble:not(:disabled):not(.disabled).active, -.show > .btn-dribbble.dropdown-toggle { - color: #fff; - background-color: #e51e6b; - border-color: #dc1a65; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-warning, .c-sidebar .c-sidebar-nav-link-warning.c-sidebar-nav-dropdown-toggle { + background: #f9b115; } -.btn-dribbble:not(:disabled):not(.disabled):active:focus, .btn-dribbble:not(:disabled):not(.disabled).active:focus, -.show > .btn-dribbble.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-warning .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-warning.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-instagram { - color: #fff; - background-color: #517fa4; - border-color: #517fa4; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-warning:hover, .c-sidebar .c-sidebar-nav-link-warning.c-sidebar-nav-dropdown-toggle:hover { + background: #eea506; } -.btn-instagram:hover { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-warning:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-warning.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #446b8a; - border-color: #406582; } -.btn-instagram:focus, .btn-instagram.focus { - box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-danger, .c-sidebar .c-sidebar-nav-link-danger.c-sidebar-nav-dropdown-toggle { + background: #e55353; } -.btn-instagram.disabled, .btn-instagram:disabled { - color: #fff; - background-color: #517fa4; - border-color: #517fa4; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-danger .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-danger.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-instagram:not(:disabled):not(.disabled):active, .btn-instagram:not(:disabled):not(.disabled).active, -.show > .btn-instagram.dropdown-toggle { - color: #fff; - background-color: #406582; - border-color: #3c5e79; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-danger:hover, .c-sidebar .c-sidebar-nav-link-danger.c-sidebar-nav-dropdown-toggle:hover { + background: #e23d3d; } -.btn-instagram:not(:disabled):not(.disabled):active:focus, .btn-instagram:not(:disabled):not(.disabled).active:focus, -.show > .btn-instagram.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-danger:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-danger.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { + color: #fff; } -.btn-pinterest { - color: #fff; - background-color: #cb2027; - border-color: #cb2027; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-light, .c-sidebar .c-sidebar-nav-link-light.c-sidebar-nav-dropdown-toggle { + background: #ebedef; } -.btn-pinterest:hover { - color: #fff; - background-color: #aa1b21; - border-color: #9f191f; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-light .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-light.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-pinterest:focus, .btn-pinterest.focus { - box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-light:hover, .c-sidebar .c-sidebar-nav-link-light.c-sidebar-nav-dropdown-toggle:hover { + background: #dde0e4; } -.btn-pinterest.disabled, .btn-pinterest:disabled { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-light:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-light.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #cb2027; - border-color: #cb2027; } -.btn-pinterest:not(:disabled):not(.disabled):active, .btn-pinterest:not(:disabled):not(.disabled).active, -.show > .btn-pinterest.dropdown-toggle { - color: #fff; - background-color: #9f191f; - border-color: #94171c; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-dark, .c-sidebar .c-sidebar-nav-link-dark.c-sidebar-nav-dropdown-toggle { + background: #636f83; } -.btn-pinterest:not(:disabled):not(.disabled):active:focus, .btn-pinterest:not(:disabled):not(.disabled).active:focus, -.show > .btn-pinterest.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5); +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-dark .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-dark.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon { + color: rgba(255, 255, 255, 0.7); } -.btn-vk { - color: #fff; - background-color: #45668e; - border-color: #45668e; +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-dark:hover, .c-sidebar .c-sidebar-nav-link-dark.c-sidebar-nav-dropdown-toggle:hover { + background: #586374; } -.btn-vk:hover { +.c-sidebar .c-sidebar-nav-link.c-sidebar-nav-link-dark:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-link-dark.c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon { color: #fff; - background-color: #385474; - border-color: #344d6c; } -.btn-vk:focus, .btn-vk.focus { - box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5); +@-webkit-keyframes spinner-border { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } -.btn-vk.disabled, .btn-vk:disabled { - color: #fff; - background-color: #45668e; - border-color: #45668e; +@keyframes spinner-border { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } -.btn-vk:not(:disabled):not(.disabled):active, .btn-vk:not(:disabled):not(.disabled).active, -.show > .btn-vk.dropdown-toggle { - color: #fff; - background-color: #344d6c; - border-color: #304763; +.spinner-border { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-bottom; + border: 0.25em solid currentColor; + border-right-color: transparent; + border-radius: 50%; + -webkit-animation: spinner-border .75s linear infinite; + animation: spinner-border .75s linear infinite; } -.btn-vk:not(:disabled):not(.disabled):active:focus, .btn-vk:not(:disabled):not(.disabled).active:focus, -.show > .btn-vk.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5); +.spinner-border-sm { + width: 1rem; + height: 1rem; + border-width: 0.2em; } -.btn-yahoo { - color: #fff; - background-color: #400191; - border-color: #400191; +@-webkit-keyframes spinner-grow { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 50% { + opacity: 1; + } } -.btn-yahoo:hover { - color: #fff; - background-color: #2f016b; - border-color: #2a015e; +@keyframes spinner-grow { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 50% { + opacity: 1; + } } -.btn-yahoo:focus, .btn-yahoo.focus { - box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5); +.spinner-grow { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-bottom; + background-color: currentColor; + border-radius: 50%; + opacity: 0; + -webkit-animation: spinner-grow .75s linear infinite; + animation: spinner-grow .75s linear infinite; } -.btn-yahoo.disabled, .btn-yahoo:disabled { - color: #fff; - background-color: #400191; - border-color: #400191; +.spinner-grow-sm { + width: 1rem; + height: 1rem; } -.btn-yahoo:not(:disabled):not(.disabled):active, .btn-yahoo:not(:disabled):not(.disabled).active, -.show > .btn-yahoo.dropdown-toggle { - color: #fff; - background-color: #2a015e; - border-color: #240152; +.c-subheader { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; + min-height: 48px; + background: #fff; + border-bottom: 1px solid #d8dbe0; } -.btn-yahoo:not(:disabled):not(.disabled):active:focus, .btn-yahoo:not(:disabled):not(.disabled).active:focus, -.show > .btn-yahoo.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5); +.c-subheader[class*="bg-"] { + border-color: rgba(0, 0, 21, 0.1); } -.btn-behance { - color: #fff; - background-color: #1769ff; - border-color: #1769ff; +.c-subheader.c-subheader-fixed { + position: fixed; + right: 0; + left: 0; + z-index: 1030; } -.btn-behance:hover { - color: #fff; - background-color: #0055f0; - border-color: #0050e3; +.c-subheader-nav { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + min-height: 48px; + padding: 0; + margin-bottom: 0; + list-style: none; } -.btn-behance:focus, .btn-behance.focus { - box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5); +.c-subheader-nav .c-subheader-nav-item { + position: relative; } -.btn-behance.disabled, .btn-behance:disabled { - color: #fff; - background-color: #1769ff; - border-color: #1769ff; +.c-subheader-nav .c-subheader-nav-btn { + background-color: transparent; + border: 1px solid transparent; } -.btn-behance:not(:disabled):not(.disabled):active, .btn-behance:not(:disabled):not(.disabled).active, -.show > .btn-behance.dropdown-toggle { - color: #fff; - background-color: #0050e3; - border-color: #004cd6; +.c-subheader-nav .c-subheader-nav-link, +.c-subheader-nav .c-subheader-nav-btn { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding-right: 0.5rem; + padding-left: 0.5rem; } -.btn-behance:not(:disabled):not(.disabled):active:focus, .btn-behance:not(:disabled):not(.disabled).active:focus, -.show > .btn-behance.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5); +.c-subheader-nav .c-subheader-nav-link .badge, +.c-subheader-nav .c-subheader-nav-btn .badge { + position: absolute; + top: 50%; + margin-top: -16px; } -.btn-dropbox { - color: #fff; - background-color: #007ee5; - border-color: #007ee5; +html:not([dir="rtl"]) .c-subheader-nav .c-subheader-nav-link .badge, html:not([dir="rtl"]) +.c-subheader-nav .c-subheader-nav-btn .badge { + left: 50%; + margin-left: 0; } -.btn-dropbox:hover { - color: #fff; - background-color: #0069bf; - border-color: #0062b2; +*[dir="rtl"] .c-subheader-nav .c-subheader-nav-link .badge, *[dir="rtl"] +.c-subheader-nav .c-subheader-nav-btn .badge { + right: 50%; + margin-right: 0; } -.btn-dropbox:focus, .btn-dropbox.focus { - box-shadow: 0 0 0 0.2rem rgba(38, 145, 233, 0.5); +.c-subheader-nav .c-subheader-nav-link:hover, +.c-subheader-nav .c-subheader-nav-btn:hover { + text-decoration: none; } -.btn-dropbox.disabled, .btn-dropbox:disabled { - color: #fff; - background-color: #007ee5; - border-color: #007ee5; +.c-subheader.c-subheader-dark { + background: #3c4b64; + border-bottom: 1px solid #636f83; } -.btn-dropbox:not(:disabled):not(.disabled):active, .btn-dropbox:not(:disabled):not(.disabled).active, -.show > .btn-dropbox.dropdown-toggle { - color: #fff; - background-color: #0062b2; - border-color: #005ba5; +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-btn { + color: rgba(255, 255, 255, 0.75); } -.btn-dropbox:not(:disabled):not(.disabled):active:focus, .btn-dropbox:not(:disabled):not(.disabled).active:focus, -.show > .btn-dropbox.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(38, 145, 233, 0.5); +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link:hover, .c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link:focus, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-btn:hover, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-btn:focus { + color: rgba(255, 255, 255, 0.9); } -.btn-reddit { - color: #fff; - background-color: #ff4500; - border-color: #ff4500; +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link.c-disabled, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-btn.c-disabled { + color: rgba(255, 255, 255, 0.25); } -.btn-reddit:hover { +.c-subheader.c-subheader-dark .c-subheader-nav .c-show > .c-subheader-nav-link, +.c-subheader.c-subheader-dark .c-subheader-nav .c-active > .c-subheader-nav-link, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link.c-show, +.c-subheader.c-subheader-dark .c-subheader-nav .c-subheader-nav-link.c-active { color: #fff; - background-color: #d93b00; - border-color: #cc3700; } -.btn-reddit:focus, .btn-reddit.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5); +.c-subheader.c-subheader-dark .c-subheader-text { + color: rgba(255, 255, 255, 0.75); } -.btn-reddit.disabled, .btn-reddit:disabled { +.c-subheader.c-subheader-dark .c-subheader-text a,.c-subheader.c-subheader-dark .c-subheader-text a:hover, .c-subheader.c-subheader-dark .c-subheader-text a:focus { color: #fff; - background-color: #ff4500; - border-color: #ff4500; } -.btn-reddit:not(:disabled):not(.disabled):active, .btn-reddit:not(:disabled):not(.disabled).active, -.show > .btn-reddit.dropdown-toggle { - color: #fff; - background-color: #cc3700; - border-color: #bf3400; +.c-subheader .c-subheader-nav .c-subheader-nav-link, +.c-subheader .c-subheader-nav .c-subheader-nav-btn { + color: rgba(0, 0, 21, 0.5); } -.btn-reddit:not(:disabled):not(.disabled):active:focus, .btn-reddit:not(:disabled):not(.disabled).active:focus, -.show > .btn-reddit.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5); +.c-subheader .c-subheader-nav .c-subheader-nav-link:hover, .c-subheader .c-subheader-nav .c-subheader-nav-link:focus, +.c-subheader .c-subheader-nav .c-subheader-nav-btn:hover, +.c-subheader .c-subheader-nav .c-subheader-nav-btn:focus { + color: rgba(0, 0, 21, 0.7); } -.btn-spotify { - color: #fff; - background-color: #7ab800; - border-color: #7ab800; +.c-subheader .c-subheader-nav .c-subheader-nav-link.c-disabled, +.c-subheader .c-subheader-nav .c-subheader-nav-btn.c-disabled { + color: rgba(0, 0, 21, 0.3); } -.btn-spotify:hover { - color: #fff; - background-color: #619200; - border-color: #588500; +.c-subheader .c-subheader-nav .c-show > .c-subheader-nav-link, +.c-subheader .c-subheader-nav .c-active > .c-subheader-nav-link, +.c-subheader .c-subheader-nav .c-subheader-nav-link.c-show, +.c-subheader .c-subheader-nav .c-subheader-nav-link.c-active { + color: rgba(0, 0, 21, 0.9); } -.btn-spotify:focus, .btn-spotify.focus { - box-shadow: 0 0 0 0.2rem rgba(142, 195, 38, 0.5); +.c-subheader .c-subheader-text { + color: rgba(0, 0, 21, 0.5); } -.btn-spotify.disabled, .btn-spotify:disabled { - color: #fff; - background-color: #7ab800; - border-color: #7ab800; +.c-subheader .c-subheader-text a,.c-subheader .c-subheader-text a:hover, .c-subheader .c-subheader-text a:focus { + color: rgba(0, 0, 21, 0.9); } -.btn-spotify:not(:disabled):not(.disabled):active, .btn-spotify:not(:disabled):not(.disabled).active, -.show > .btn-spotify.dropdown-toggle { - color: #fff; - background-color: #588500; - border-color: #507800; +.c-switch { + display: inline-block; + width: 40px; + height: 26px; +} + +.c-switch-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.c-switch-slider { + position: relative; + display: block; + height: inherit; + cursor: pointer; + border: 1px solid #d8dbe0; + border-radius: 0.25rem; } -.btn-spotify:not(:disabled):not(.disabled):active:focus, .btn-spotify:not(:disabled):not(.disabled).active:focus, -.show > .btn-spotify.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(142, 195, 38, 0.5); +.c-switch-slider,.c-switch-slider::before { + background-color: #fff; + transition: .15s ease-out; } -.btn-vine { - color: #fff; - background-color: #00bf8f; - border-color: #00bf8f; +.c-switch-slider::before { + position: absolute; + top: 2px; + left: 2px; + box-sizing: border-box; + width: 20px; + height: 20px; + content: ""; + border: 1px solid #d8dbe0; + border-radius: 0.125rem; } -.btn-vine:hover { - color: #fff; - background-color: #009972; - border-color: #008c69; +.c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(14px); + transform: translateX(14px); } -.btn-vine:focus, .btn-vine.focus { - box-shadow: 0 0 0 0.2rem rgba(38, 201, 160, 0.5); +.c-switch-input:focus ~ .c-switch-slider { + color: #768192; + background-color: #fff; + border-color: #958bef; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25); } -.btn-vine.disabled, .btn-vine:disabled { - color: #fff; - background-color: #00bf8f; - border-color: #00bf8f; +.c-switch-input:disabled ~ .c-switch-slider { + cursor: not-allowed; + opacity: .5; } -.btn-vine:not(:disabled):not(.disabled):active, .btn-vine:not(:disabled):not(.disabled).active, -.show > .btn-vine.dropdown-toggle { - color: #fff; - background-color: #008c69; - border-color: #007f5f; +.c-switch-lg { + width: 48px; + height: 30px; } -.btn-vine:not(:disabled):not(.disabled):active:focus, .btn-vine:not(:disabled):not(.disabled).active:focus, -.show > .btn-vine.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(38, 201, 160, 0.5); +.c-switch-lg .c-switch-slider { + font-size: 12px; } -.btn-foursquare { - color: #fff; - background-color: #1073af; - border-color: #1073af; +.c-switch-lg .c-switch-slider::before { + width: 24px; + height: 24px; } -.btn-foursquare:hover { - color: #fff; - background-color: #0d5c8c; - border-color: #0c5480; +.c-switch-lg .c-switch-slider::after { + font-size: 12px; } -.btn-foursquare:focus, .btn-foursquare.focus { - box-shadow: 0 0 0 0.2rem rgba(52, 136, 187, 0.5); +.c-switch-lg .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(18px); + transform: translateX(18px); } -.btn-foursquare.disabled, .btn-foursquare:disabled { - color: #fff; - background-color: #1073af; - border-color: #1073af; +.c-switch-sm { + width: 32px; + height: 22px; } -.btn-foursquare:not(:disabled):not(.disabled):active, .btn-foursquare:not(:disabled):not(.disabled).active, -.show > .btn-foursquare.dropdown-toggle { - color: #fff; - background-color: #0c5480; - border-color: #0b4d75; +.c-switch-sm .c-switch-slider { + font-size: 8px; } -.btn-foursquare:not(:disabled):not(.disabled):active:focus, .btn-foursquare:not(:disabled):not(.disabled).active:focus, -.show > .btn-foursquare.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(52, 136, 187, 0.5); +.c-switch-sm .c-switch-slider::before { + width: 16px; + height: 16px; } -.btn-vimeo { - color: #23282c; - background-color: #aad450; - border-color: #aad450; +.c-switch-sm .c-switch-slider::after { + font-size: 8px; } -.btn-vimeo:hover { - color: #23282c; - background-color: #9bcc32; - border-color: #93c130; +.c-switch-sm .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(10px); + transform: translateX(10px); } -.btn-vimeo:focus, .btn-vimeo.focus { - box-shadow: 0 0 0 0.2rem rgba(150, 186, 75, 0.5); +.c-switch-label { + width: 48px; } -.btn-vimeo.disabled, .btn-vimeo:disabled { - color: #23282c; - background-color: #aad450; - border-color: #aad450; +.c-switch-label .c-switch-slider::before { + z-index: 2; } -.btn-vimeo:not(:disabled):not(.disabled):active, .btn-vimeo:not(:disabled):not(.disabled).active, -.show > .btn-vimeo.dropdown-toggle { - color: #23282c; - background-color: #93c130; - border-color: #8bb72d; +.c-switch-label .c-switch-slider::after { + position: absolute; + top: 50%; + z-index: 1; + width: 50%; + margin-top: -.5em; + font-size: 10px; + font-weight: 600; + line-height: 1; + color: #c4c9d0; + text-align: center; + text-transform: uppercase; + content: attr(data-unchecked); + transition: inherit; } -.btn-vimeo:not(:disabled):not(.disabled):active:focus, .btn-vimeo:not(:disabled):not(.disabled).active:focus, -.show > .btn-vimeo.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(150, 186, 75, 0.5); +html:not([dir="rtl"]) .c-switch-label .c-switch-slider::after { + right: 1px; } -*[dir="rtl"] .btn-group > .btn:not(:first-child), -*[dir="rtl"] .btn-group > .btn-group:not(:first-child) { - margin-right: -1px; +.c-switch-label .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(22px); + transform: translateX(22px); } -*[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle), -*[dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn { - border-radius: 0.25rem; - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.c-switch-label .c-switch-input:checked ~ .c-switch-slider::after { + left: 1px; + color: #fff; + content: attr(data-checked); } -*[dir="rtl"] .btn-group > .btn:not(:first-child), -*[dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn { - border-radius: 0.25rem; - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.c-switch-label.c-switch-lg { + width: 56px; + height: 30px; } -*[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.c-switch-label.c-switch-lg .c-switch-slider { + font-size: 12px; } -.btn-transparent { - color: #fff; - background-color: transparent; - border-color: transparent; +.c-switch-label.c-switch-lg .c-switch-slider::before { + width: 24px; + height: 24px; } -.btn [class^="icon-"], -.btn [class*=" icon-"] { - display: inline-block; - margin-top: -2px; - vertical-align: middle; +.c-switch-label.c-switch-lg .c-switch-slider::after { + font-size: 12px; } -.btn-pill { - border-radius: 50em; +.c-switch-label.c-switch-lg .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(26px); + transform: translateX(26px); } -.btn-square { - border-radius: 0; +.c-switch-label.c-switch-sm { + width: 40px; + height: 22px; } -.btn-ghost-primary { - color: #20a8d8; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-label.c-switch-sm .c-switch-slider { + font-size: 8px; } -.btn-ghost-primary:hover { - color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; +.c-switch-label.c-switch-sm .c-switch-slider::before { + width: 16px; + height: 16px; } -.btn-ghost-primary:focus, .btn-ghost-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +.c-switch-label.c-switch-sm .c-switch-slider::after { + font-size: 8px; } -.btn-ghost-primary.disabled, .btn-ghost-primary:disabled { - color: #20a8d8; - background-color: transparent; - border-color: transparent; +.c-switch-label.c-switch-sm .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(18px); + transform: translateX(18px); } -.btn-ghost-primary:not(:disabled):not(.disabled):active, .btn-ghost-primary:not(:disabled):not(.disabled).active, -.show > .btn-ghost-primary.dropdown-toggle { - color: #fff; - background-color: #20a8d8; - border-color: #20a8d8; +.c-switch[class*="-3d"] .c-switch-slider { + background-color: #ebedef; + border-radius: 50em; } -.btn-ghost-primary:not(:disabled):not(.disabled):active:focus, .btn-ghost-primary:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5); +.c-switch[class*="-3d"] .c-switch-slider::before { + top: -1px; + left: -1px; + width: 26px; + height: 26px; + border: 0; + border-radius: 50em; + box-shadow: 0 2px 5px rgba(0, 0, 21, 0.3); } -.btn-ghost-secondary { - color: #c8ced3; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch[class*="-3d"].c-switch-lg { + width: 48px; + height: 30px; } -.btn-ghost-secondary:hover { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.c-switch[class*="-3d"].c-switch-lg .c-switch-slider::before { + width: 30px; + height: 30px; } -.btn-ghost-secondary:focus, .btn-ghost-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +.c-switch[class*="-3d"].c-switch-lg .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(18px); + transform: translateX(18px); } -.btn-ghost-secondary.disabled, .btn-ghost-secondary:disabled { - color: #c8ced3; - background-color: transparent; - border-color: transparent; +.c-switch[class*="-3d"].c-switch-sm { + width: 32px; + height: 22px; } -.btn-ghost-secondary:not(:disabled):not(.disabled):active, .btn-ghost-secondary:not(:disabled):not(.disabled).active, -.show > .btn-ghost-secondary.dropdown-toggle { - color: #23282c; - background-color: #c8ced3; - border-color: #c8ced3; +.c-switch[class*="-3d"].c-switch-sm .c-switch-slider::before { + width: 22px; + height: 22px; } -.btn-ghost-secondary:not(:disabled):not(.disabled):active:focus, .btn-ghost-secondary:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5); +.c-switch[class*="-3d"].c-switch-sm .c-switch-input:checked ~ .c-switch-slider::before { + -webkit-transform: translateX(10px); + transform: translateX(10px); } -.btn-ghost-success { - color: #4dbd74; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-primary .c-switch-input:checked + .c-switch-slider { + background-color: #321fdb; + border-color: #2819ae; } -.btn-ghost-success:hover { - color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; +.c-switch-primary .c-switch-input:checked + .c-switch-slider::before { + border-color: #2819ae; } -.btn-ghost-success:focus, .btn-ghost-success.focus { - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +.c-switch-3d-primary .c-switch-input:checked + .c-switch-slider { + background-color: #321fdb; } -.btn-ghost-success.disabled, .btn-ghost-success:disabled { - color: #4dbd74; - background-color: transparent; - border-color: transparent; +.c-switch-outline-primary .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #321fdb; } -.btn-ghost-success:not(:disabled):not(.disabled):active, .btn-ghost-success:not(:disabled):not(.disabled).active, -.show > .btn-ghost-success.dropdown-toggle { - color: #fff; - background-color: #4dbd74; - border-color: #4dbd74; +.c-switch-outline-primary .c-switch-input:checked + .c-switch-slider::before { + border-color: #321fdb; } -.btn-ghost-success:not(:disabled):not(.disabled):active:focus, .btn-ghost-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5); +.c-switch-outline-primary .c-switch-input:checked + .c-switch-slider::after { + color: #321fdb; } -.btn-ghost-info { - color: #63c2de; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-opposite-primary .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #321fdb; } -.btn-ghost-info:hover { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.c-switch-opposite-primary .c-switch-input:checked + .c-switch-slider::before { + background-color: #321fdb; + border-color: #321fdb; } -.btn-ghost-info:focus, .btn-ghost-info.focus { - box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); +.c-switch-opposite-primary .c-switch-input:checked + .c-switch-slider::after { + color: #321fdb; } -.btn-ghost-info.disabled, .btn-ghost-info:disabled { - color: #63c2de; - background-color: transparent; - border-color: transparent; +.c-switch-secondary .c-switch-input:checked + .c-switch-slider { + background-color: #ced2d8; + border-color: #b2b8c1; } -.btn-ghost-info:not(:disabled):not(.disabled):active, .btn-ghost-info:not(:disabled):not(.disabled).active, -.show > .btn-ghost-info.dropdown-toggle { - color: #23282c; - background-color: #63c2de; - border-color: #63c2de; +.c-switch-secondary .c-switch-input:checked + .c-switch-slider::before { + border-color: #b2b8c1; } -.btn-ghost-info:not(:disabled):not(.disabled):active:focus, .btn-ghost-info:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5); +.c-switch-3d-secondary .c-switch-input:checked + .c-switch-slider { + background-color: #ced2d8; } -.btn-ghost-warning { - color: #ffc107; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-outline-secondary .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #ced2d8; } -.btn-ghost-warning:hover { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.c-switch-outline-secondary .c-switch-input:checked + .c-switch-slider::before { + border-color: #ced2d8; } -.btn-ghost-warning:focus, .btn-ghost-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.c-switch-outline-secondary .c-switch-input:checked + .c-switch-slider::after { + color: #ced2d8; } -.btn-ghost-warning.disabled, .btn-ghost-warning:disabled { - color: #ffc107; - background-color: transparent; - border-color: transparent; +.c-switch-opposite-secondary .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #ced2d8; } -.btn-ghost-warning:not(:disabled):not(.disabled):active, .btn-ghost-warning:not(:disabled):not(.disabled).active, -.show > .btn-ghost-warning.dropdown-toggle { - color: #23282c; - background-color: #ffc107; - border-color: #ffc107; +.c-switch-opposite-secondary .c-switch-input:checked + .c-switch-slider::before { + background-color: #ced2d8; + border-color: #ced2d8; } -.btn-ghost-warning:not(:disabled):not(.disabled):active:focus, .btn-ghost-warning:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.c-switch-opposite-secondary .c-switch-input:checked + .c-switch-slider::after { + color: #ced2d8; } -.btn-ghost-danger { - color: #f86c6b; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-success .c-switch-input:checked + .c-switch-slider { + background-color: #2eb85c; + border-color: #248f48; } -.btn-ghost-danger:hover { - color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; +.c-switch-success .c-switch-input:checked + .c-switch-slider::before { + border-color: #248f48; } -.btn-ghost-danger:focus, .btn-ghost-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +.c-switch-3d-success .c-switch-input:checked + .c-switch-slider { + background-color: #2eb85c; } -.btn-ghost-danger.disabled, .btn-ghost-danger:disabled { - color: #f86c6b; - background-color: transparent; - border-color: transparent; +.c-switch-outline-success .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #2eb85c; } -.btn-ghost-danger:not(:disabled):not(.disabled):active, .btn-ghost-danger:not(:disabled):not(.disabled).active, -.show > .btn-ghost-danger.dropdown-toggle { - color: #fff; - background-color: #f86c6b; - border-color: #f86c6b; +.c-switch-outline-success .c-switch-input:checked + .c-switch-slider::before { + border-color: #2eb85c; } -.btn-ghost-danger:not(:disabled):not(.disabled):active:focus, .btn-ghost-danger:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5); +.c-switch-outline-success .c-switch-input:checked + .c-switch-slider::after { + color: #2eb85c; } -.btn-ghost-light { - color: #f0f3f5; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-opposite-success .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #2eb85c; } -.btn-ghost-light:hover { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.c-switch-opposite-success .c-switch-input:checked + .c-switch-slider::before { + background-color: #2eb85c; + border-color: #2eb85c; } -.btn-ghost-light:focus, .btn-ghost-light.focus { - box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +.c-switch-opposite-success .c-switch-input:checked + .c-switch-slider::after { + color: #2eb85c; } -.btn-ghost-light.disabled, .btn-ghost-light:disabled { - color: #f0f3f5; - background-color: transparent; - border-color: transparent; +.c-switch-info .c-switch-input:checked + .c-switch-slider { + background-color: #39f; + border-color: #0080ff; } -.btn-ghost-light:not(:disabled):not(.disabled):active, .btn-ghost-light:not(:disabled):not(.disabled).active, -.show > .btn-ghost-light.dropdown-toggle { - color: #23282c; - background-color: #f0f3f5; - border-color: #f0f3f5; +.c-switch-info .c-switch-input:checked + .c-switch-slider::before { + border-color: #0080ff; } -.btn-ghost-light:not(:disabled):not(.disabled):active:focus, .btn-ghost-light:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5); +.c-switch-3d-info .c-switch-input:checked + .c-switch-slider { + background-color: #39f; } -.btn-ghost-dark { - color: #2f353a; - background-color: transparent; - background-image: none; - border-color: transparent; +.c-switch-outline-info .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #39f; } -.btn-ghost-dark:hover { - color: #fff; - background-color: #2f353a; - border-color: #2f353a; +.c-switch-outline-info .c-switch-input:checked + .c-switch-slider::before { + border-color: #39f; } -.btn-ghost-dark:focus, .btn-ghost-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); +.c-switch-outline-info .c-switch-input:checked + .c-switch-slider::after { + color: #39f; } -.btn-ghost-dark.disabled, .btn-ghost-dark:disabled { - color: #2f353a; - background-color: transparent; - border-color: transparent; +.c-switch-opposite-info .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #39f; } -.btn-ghost-dark:not(:disabled):not(.disabled):active, .btn-ghost-dark:not(:disabled):not(.disabled).active, -.show > .btn-ghost-dark.dropdown-toggle { - color: #fff; - background-color: #2f353a; - border-color: #2f353a; +.c-switch-opposite-info .c-switch-input:checked + .c-switch-slider::before { + background-color: #39f; + border-color: #39f; } - -.btn-ghost-dark:not(:disabled):not(.disabled):active:focus, .btn-ghost-dark:not(:disabled):not(.disabled).active:focus, -.show > .btn-ghost-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5); + +.c-switch-opposite-info .c-switch-input:checked + .c-switch-slider::after { + color: #39f; } -.callout { - position: relative; - padding: 0 1rem; - margin: 1rem 0; - border-left: 4px solid #c8ced3; - border-radius: 0.25rem; +.c-switch-warning .c-switch-input:checked + .c-switch-slider { + background-color: #f9b115; + border-color: #d69405; } -.callout .chart-wrapper { - position: absolute; - top: 10px; - left: 50%; - float: right; - width: 50%; +.c-switch-warning .c-switch-input:checked + .c-switch-slider::before { + border-color: #d69405; } -.callout-bordered { - border: 1px solid #c8ced3; - border-left-width: 4px; +.c-switch-3d-warning .c-switch-input:checked + .c-switch-slider { + background-color: #f9b115; } -.callout code { - border-radius: 0.25rem; +.c-switch-outline-warning .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #f9b115; } -.callout h4 { - margin-top: 0; - margin-bottom: .25rem; +.c-switch-outline-warning .c-switch-input:checked + .c-switch-slider::before { + border-color: #f9b115; } -.callout p:last-child { - margin-bottom: 0; +.c-switch-outline-warning .c-switch-input:checked + .c-switch-slider::after { + color: #f9b115; } -.callout + .callout { - margin-top: -0.25rem; +.c-switch-opposite-warning .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #f9b115; } -.callout-primary { - border-left-color: #20a8d8; +.c-switch-opposite-warning .c-switch-input:checked + .c-switch-slider::before { + background-color: #f9b115; + border-color: #f9b115; } -.callout-primary h4 { - color: #20a8d8; +.c-switch-opposite-warning .c-switch-input:checked + .c-switch-slider::after { + color: #f9b115; } -.callout-secondary { - border-left-color: #c8ced3; +.c-switch-danger .c-switch-input:checked + .c-switch-slider { + background-color: #e55353; + border-color: #de2727; } -.callout-secondary h4 { - color: #c8ced3; +.c-switch-danger .c-switch-input:checked + .c-switch-slider::before { + border-color: #de2727; } -.callout-success { - border-left-color: #4dbd74; +.c-switch-3d-danger .c-switch-input:checked + .c-switch-slider { + background-color: #e55353; } -.callout-success h4 { - color: #4dbd74; +.c-switch-outline-danger .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #e55353; } -.callout-info { - border-left-color: #63c2de; +.c-switch-outline-danger .c-switch-input:checked + .c-switch-slider::before { + border-color: #e55353; } -.callout-info h4 { - color: #63c2de; +.c-switch-outline-danger .c-switch-input:checked + .c-switch-slider::after { + color: #e55353; } -.callout-warning { - border-left-color: #ffc107; +.c-switch-opposite-danger .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #e55353; } -.callout-warning h4 { - color: #ffc107; +.c-switch-opposite-danger .c-switch-input:checked + .c-switch-slider::before { + background-color: #e55353; + border-color: #e55353; } -.callout-danger { - border-left-color: #f86c6b; +.c-switch-opposite-danger .c-switch-input:checked + .c-switch-slider::after { + color: #e55353; } -.callout-danger h4 { - color: #f86c6b; +.c-switch-light .c-switch-input:checked + .c-switch-slider { + background-color: #ebedef; + border-color: #cfd4d8; } -.callout-light { - border-left-color: #f0f3f5; +.c-switch-light .c-switch-input:checked + .c-switch-slider::before { + border-color: #cfd4d8; } -.callout-light h4 { - color: #f0f3f5; +.c-switch-3d-light .c-switch-input:checked + .c-switch-slider { + background-color: #ebedef; } -.callout-dark { - border-left-color: #2f353a; +.c-switch-outline-light .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #ebedef; } -.callout-dark h4 { - color: #2f353a; +.c-switch-outline-light .c-switch-input:checked + .c-switch-slider::before { + border-color: #ebedef; } -*[dir="rtl"] .callout { - border-right: 4px solid #c8ced3; - border-left: 0; +.c-switch-outline-light .c-switch-input:checked + .c-switch-slider::after { + color: #ebedef; } -*[dir="rtl"] .callout.callout-primary { - border-right-color: #20a8d8; +.c-switch-opposite-light .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #ebedef; } -*[dir="rtl"] .callout.callout-secondary { - border-right-color: #c8ced3; +.c-switch-opposite-light .c-switch-input:checked + .c-switch-slider::before { + background-color: #ebedef; + border-color: #ebedef; } -*[dir="rtl"] .callout.callout-success { - border-right-color: #4dbd74; +.c-switch-opposite-light .c-switch-input:checked + .c-switch-slider::after { + color: #ebedef; } -*[dir="rtl"] .callout.callout-info { - border-right-color: #63c2de; +.c-switch-dark .c-switch-input:checked + .c-switch-slider { + background-color: #636f83; + border-color: #4d5666; } -*[dir="rtl"] .callout.callout-warning { - border-right-color: #ffc107; +.c-switch-dark .c-switch-input:checked + .c-switch-slider::before { + border-color: #4d5666; } -*[dir="rtl"] .callout.callout-danger { - border-right-color: #f86c6b; +.c-switch-3d-dark .c-switch-input:checked + .c-switch-slider { + background-color: #636f83; } -*[dir="rtl"] .callout.callout-light { - border-right-color: #f0f3f5; +.c-switch-outline-dark .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #636f83; } -*[dir="rtl"] .callout.callout-dark { - border-right-color: #2f353a; +.c-switch-outline-dark .c-switch-input:checked + .c-switch-slider::before { + border-color: #636f83; } -*[dir="rtl"] .callout .chart-wrapper { - left: 0; - float: left; +.c-switch-outline-dark .c-switch-input:checked + .c-switch-slider::after { + color: #636f83; } -.card { - margin-bottom: 1.5rem; +.c-switch-opposite-dark .c-switch-input:checked + .c-switch-slider { + background-color: #fff; + border-color: #636f83; } -.card.bg-primary { - border-color: #187da0; +.c-switch-opposite-dark .c-switch-input:checked + .c-switch-slider::before { + background-color: #636f83; + border-color: #636f83; } -.card.bg-primary .card-header { - background-color: #1e9ecb; - border-color: #187da0; +.c-switch-opposite-dark .c-switch-input:checked + .c-switch-slider::after { + color: #636f83; } -.card.bg-secondary { - border-color: #a5aeb7; +.c-switch-pill .c-switch-slider,.c-switch-pill .c-switch-slider::before { + border-radius: 50em; } -.card.bg-secondary .card-header { - background-color: #c0c6cc; - border-color: #a5aeb7; +.c-switch-square .c-switch-slider,.c-switch-square .c-switch-slider::before { + border-radius: 0; } -.card.bg-success { - border-color: #379457; +.table { + width: 100%; + margin-bottom: 1rem; + color: #4f5d73; } -.card.bg-success .card-header { - background-color: #44b76c; - border-color: #379457; +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid; + border-top-color: #d8dbe0; } -.card.bg-info { - border-color: #2eadd3; +.table thead th { + vertical-align: bottom; + border-bottom: 2px solid; + border-bottom-color: #d8dbe0; } -.card.bg-info .card-header { - background-color: #56bddb; - border-color: #2eadd3; +.table tbody + tbody { + border-top: 2px solid; + border-top-color: #d8dbe0; } -.card.bg-warning { - border-color: #c69500; +.table-sm th, +.table-sm td { + padding: 0.3rem; } -.card.bg-warning .card-header { - background-color: #f7b900; - border-color: #c69500; +.table-bordered,.table-bordered th, +.table-bordered td { + border: 1px solid; + border-color: #d8dbe0; } -.card.bg-danger { - border-color: #f5302e; +.table-bordered thead th, +.table-bordered thead td { + border-bottom-width: 2px; } -.card.bg-danger .card-header { - background-color: #f75d5c; - border-color: #f5302e; +.table-borderless th, +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { + border: 0; } -.card.bg-light { - border-color: #cad4dc; +.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(0, 0, 21, 0.05); } -.card.bg-light .card-header { - background-color: #e7ecef; - border-color: #cad4dc; +.table-hover tbody tr:hover { + color: #4f5d73; + background-color: rgba(0, 0, 21, 0.075); } -.card.bg-dark { - border-color: #121517; +.table-primary, +.table-primary > th, +.table-primary > td { + color: #4f5d73; + background-color: #c6c0f5; } -.card.bg-dark .card-header { - background-color: #282d32; - border-color: #121517; +.table-primary th, +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { + border-color: #948bec; } -.card.drag, -.card .drag { - cursor: move; +.table-hover .table-primary:hover,.table-hover .table-primary:hover > td, +.table-hover .table-primary:hover > th { + background-color: #b2aaf2; } -.card-placeholder { - background: rgba(0, 0, 0, 0.025); - border: 1px dashed #c8ced3; +.table-secondary, +.table-secondary > th, +.table-secondary > td { + color: #4f5d73; + background-color: #f1f2f4; } -.card-header > i { - margin-right: 0.5rem; +.table-secondary th, +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { + border-color: #e6e8eb; } -.card-header .nav-tabs { - margin-top: -0.75rem; - margin-bottom: -0.75rem; - border-bottom: 0; +.table-hover .table-secondary:hover,.table-hover .table-secondary:hover > td, +.table-hover .table-secondary:hover > th { + background-color: #e3e5e9; } -.card-header .nav-tabs .nav-item { - border-top: 0; +.table-success, +.table-success > th, +.table-success > td { + color: #4f5d73; + background-color: #c4ebd1; } -.card-header .nav-tabs .nav-link { - padding: 0.75rem 0.625rem; - color: #73818f; - border-top: 0; +.table-success th, +.table-success td, +.table-success thead th, +.table-success tbody + tbody { + border-color: #92daaa; } -.card-header .nav-tabs .nav-link.active { - color: #23282c; - background: #fff; +.table-hover .table-success:hover,.table-hover .table-success:hover > td, +.table-hover .table-success:hover > th { + background-color: #b1e5c2; } -*[dir="rtl"] .card-header > i { - margin-right: 0; - margin-left: 0.5rem; +.table-info, +.table-info > th, +.table-info > td { + color: #4f5d73; + background-color: #c6e2ff; } -.card-header-icon-bg { - display: inline-block; - width: 2.8125rem; - padding: 0.75rem 0; - margin: -0.75rem 1.25rem -0.75rem -1.25rem; - line-height: inherit; - color: #23282c; - text-align: center; - background: transparent; - border-right: 1px solid #c8ced3; +.table-info th, +.table-info td, +.table-info thead th, +.table-info tbody + tbody { + border-color: #95caff; } -.card-header-actions { - display: inline-block; - float: right; - margin-right: -0.25rem; +.table-hover .table-info:hover,.table-hover .table-info:hover > td, +.table-hover .table-info:hover > th { + background-color: #add5ff; } -*[dir="rtl"] .card-header-actions { - float: left; - margin-right: auto; - margin-left: -0.25rem; +.table-warning, +.table-warning > th, +.table-warning > td { + color: #4f5d73; + background-color: #fde9bd; } -.card-header-action { - padding: 0 0.25rem; - color: #73818f; +.table-warning th, +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { + border-color: #fcd685; } -.card-header-action:hover { - color: #23282c; - text-decoration: none; +.table-hover .table-warning:hover,.table-hover .table-warning:hover > td, +.table-hover .table-warning:hover > th { + background-color: #fce1a4; } -.card-accent-primary { - border-top-color: #20a8d8; - border-top-width: 2px; +.table-danger, +.table-danger > th, +.table-danger > td { + color: #4f5d73; + background-color: #f8cfcf; } -.card-accent-secondary { - border-top-color: #c8ced3; - border-top-width: 2px; +.table-danger th, +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { + border-color: #f1a6a6; } -.card-accent-success { - border-top-color: #4dbd74; - border-top-width: 2px; +.table-hover .table-danger:hover,.table-hover .table-danger:hover > td, +.table-hover .table-danger:hover > th { + background-color: #f5b9b9; } -.card-accent-info { - border-top-color: #63c2de; - border-top-width: 2px; +.table-light, +.table-light > th, +.table-light > td { + color: #4f5d73; + background-color: #f9fafb; } -.card-accent-warning { - border-top-color: #ffc107; - border-top-width: 2px; +.table-light th, +.table-light td, +.table-light thead th, +.table-light tbody + tbody { + border-color: #f5f6f7; } -.card-accent-danger { - border-top-color: #f86c6b; - border-top-width: 2px; +.table-hover .table-light:hover,.table-hover .table-light:hover > td, +.table-hover .table-light:hover > th { + background-color: #eaedf1; } -.card-accent-light { - border-top-color: #f0f3f5; - border-top-width: 2px; +.table-dark, +.table-dark > th, +.table-dark > td { + color: #4f5d73; + background-color: #d3d7dc; } -.card-accent-dark { - border-top-color: #2f353a; - border-top-width: 2px; +.table-dark th, +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { + border-color: #aeb4bf; } -.card-full { - margin-top: -1rem; - margin-right: -15px; - margin-left: -15px; - border: 0; - border-bottom: 1px solid #c8ced3; +.table-hover .table-dark:hover,.table-hover .table-dark:hover > td, +.table-hover .table-dark:hover > th { + background-color: #c5cad1; } -@media (min-width: 576px) { - .card-columns.cols-2 { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - } +.table-active, +.table-active > th, +.table-active > td { + color: #fff; + background-color: rgba(0, 0, 21, 0.075); } -.chart-wrapper canvas { - width: 100%; +.table-hover .table-active:hover,.table-hover .table-active:hover > td, +.table-hover .table-active:hover > th { + background-color: rgba(0, 0, 0, 0.075); } -base-chart.chart { - display: block; +.table .thead-dark th { + color: #fff; + background-color: #636f83; + border-color: #758297; } -canvas { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.table .thead-light th { + color: #768192; + background-color: #d8dbe0; + border-color: #d8dbe0; } -.chartjs-tooltip { - position: absolute; - z-index: 1021; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - padding: 0.25rem 0.5rem; +.table-dark { color: #fff; - pointer-events: none; - background: rgba(0, 0, 0, 0.7); - opacity: 0; - transition: all 0.25s ease; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - border-radius: 0.25rem; + background-color: #636f83; } -.chartjs-tooltip .tooltip-header { - margin-bottom: 0.5rem; +.table-dark th, +.table-dark td, +.table-dark thead th { + border-color: #758297; } -.chartjs-tooltip .tooltip-header-item { - font-size: 0.765625rem; - font-weight: 700; +.table-dark.table-bordered { + border: 0; } -.chartjs-tooltip .tooltip-body-item { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - font-size: 0.765625rem; - white-space: nowrap; +.table-dark.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, 0.05); } -.chartjs-tooltip .tooltip-body-item-color { - display: inline-block; - width: 0.875rem; - height: 0.875rem; - margin-right: 0.875rem; +.table-dark.table-hover tbody tr:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.075); } -.chartjs-tooltip .tooltip-body-item-value { - padding-left: 1rem; - margin-left: auto; - font-weight: 700; +@media (max-width: 575.98px) { + .table-responsive-sm { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-sm > .table-bordered { + border: 0; + } } -.dropdown-item { - position: relative; - padding: 10px 20px; - border-bottom: 1px solid #c8ced3; +@media (max-width: 767.98px) { + .table-responsive-md { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-md > .table-bordered { + border: 0; + } } -.dropdown-item:last-child { - border-bottom: 0; +@media (max-width: 991.98px) { + .table-responsive-lg { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-lg > .table-bordered { + border: 0; + } } -.dropdown-item i { - display: inline-block; - width: 20px; - margin-right: 10px; - margin-left: -10px; - color: #c8ced3; - text-align: center; +@media (max-width: 1199.98px) { + .table-responsive-xl { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-xl > .table-bordered { + border: 0; + } } -.dropdown-item .badge { - position: absolute; - right: 10px; - margin-top: 2px; +.table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } -.dropdown-header { - padding: 8px 20px; - background: #e4e7ea; - border-bottom: 1px solid #c8ced3; +.table-responsive > .table-bordered { + border: 0; } -.dropdown-header .btn { - margin-top: -7px; - color: #73818f; +.table-outline { + border: 1px solid; + border-color: #d8dbe0; } -.dropdown-header .btn:hover { - color: #23282c; +.table-outline td,.table-align-middle td { + vertical-align: middle; } -.dropdown-header .btn.pull-right { - margin-right: -20px; +.table-clear td { + border: 0; } -.dropdown-menu-lg { - width: 250px; +.toast { + width: 350px; + max-width: 350px; + overflow: hidden; + font-size: 0.875rem; + background-clip: padding-box; + border: 1px solid; + box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 21, 0.1); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + opacity: 0; + border-radius: 0.25rem; + background-color: rgba(255, 255, 255, 0.85); + border-color: rgba(0, 0, 21, 0.1); } -.app-header .navbar-nav .dropdown-menu { - position: absolute; +.toast:not(:last-child) { + margin-bottom: 0.75rem; } -.app-header .navbar-nav .dropdown-menu-right { - right: 0; - left: auto; +.toast.showing,.toast.show { + opacity: 1; } -.app-header .navbar-nav .dropdown-menu-left { - right: auto; - left: 0; +.toast.show { + display: block; } -*[dir="rtl"] .dropdown-toggle::before { - margin-right: 0; - margin-left: 0.255em; +.toast.hide { + display: none; } -*[dir="rtl"] .dropdown-toggle::after { - margin-right: 0.255em; - margin-left: 0; +.toast-full { + width: 100%; + max-width: 100%; } -.app-footer { +.toast-header { display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -ms-flex-align: center; align-items: center; - padding: 0 1rem; - color: #23282c; - background: #f0f3f5; - border-top: 1px solid #c8ced3; -} - -.row.row-equal { - padding-right: 7.5px; - padding-left: 7.5px; - margin-right: -15px; - margin-left: -15px; -} - -.row.row-equal [class*="col-"] { - padding-right: 7.5px; - padding-left: 7.5px; -} - -.main .container-fluid { - padding: 0 30px; + padding: 0.25rem 0.75rem; + background-clip: padding-box; + border-bottom: 1px solid; + color: #8a93a2; + background-color: rgba(255, 255, 255, 0.85); + border-color: rgba(0, 0, 21, 0.05); } -.app-header { - position: relative; - -ms-flex-direction: row; - flex-direction: row; - height: 55px; - padding: 0; - margin: 0; - background-color: #fff; - border-bottom: 1px solid #c8ced3; +.toast-body { + padding: 0.75rem; } -.app-header .navbar-brand { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 155px; - height: 55px; - padding: 0; - margin-right: 0; - background-color: transparent; +.toaster { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + width: 100%; + padding: 0.25rem 0.5rem; } -.app-header .navbar-brand .navbar-brand-minimized { - display: none; +.toaster-top-full, .toaster-top-center, .toaster-top-right, .toaster-top-left, .toaster-bottom-full, .toaster-bottom-center, .toaster-bottom-right, .toaster-bottom-left { + position: fixed; + z-index: 1080; + width: 350px; } -.app-header .navbar-toggler { - min-width: 50px; - padding: 0.25rem 0; +.toaster-top-full, .toaster-top-center, .toaster-top-right, .toaster-top-left { + top: 0; } -.app-header .navbar-toggler:hover .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); +.toaster-bottom-full, .toaster-bottom-center, .toaster-bottom-right, .toaster-bottom-left { + bottom: 0; + -ms-flex-direction: column; + flex-direction: column; } -.app-header .navbar-toggler-icon { - height: 23px; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); +.toaster-top-full, .toaster-bottom-full { + width: auto; } -.app-header .navbar-nav { - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; +.toaster-top-center, .toaster-bottom-center { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } -.app-header .nav-item { - position: relative; - min-width: 50px; - margin: 0; - text-align: center; +.toaster-top-full, .toaster-bottom-full, .toaster-top-right, .toaster-bottom-right { + right: 0; } -.app-header .nav-item button { - margin: 0 auto; +.toaster-top-full, .toaster-bottom-full, .toaster-top-left, .toaster-bottom-left { + left: 0; } -.app-header .nav-item .nav-link { - padding-top: 0; - padding-bottom: 0; - background: 0; - border: 0; +.toaster .toast { + width: 100%; + max-width: 100%; + margin-top: 0.125rem; + margin-bottom: 0.125rem; } -.app-header .nav-item .nav-link .badge { +.tooltip { position: absolute; - top: 50%; - left: 50%; - margin-top: -16px; - margin-left: 0; -} - -.app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img { - height: 35px; - margin: 0 10px; -} - -.app-header .dropdown-menu { - padding-bottom: 0; + z-index: 1070; + display: block; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-style: normal; + font-weight: 400; line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.765625rem; + word-wrap: break-word; + opacity: 0; } -.app-header .dropdown-item { - min-width: 180px; -} - -.navbar-nav .nav-link { - color: #73818f; -} - -.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { - color: #2f353a; +.tooltip.show { + opacity: 0.9; } -.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus, -.navbar-nav .active > .nav-link, -.navbar-nav .active > .nav-link:hover, -.navbar-nav .active > .nav-link:focus, -.navbar-nav .nav-link.open, -.navbar-nav .nav-link.open:hover, -.navbar-nav .nav-link.open:focus, -.navbar-nav .nav-link.active, -.navbar-nav .nav-link.active:hover, -.navbar-nav .nav-link.active:focus { - color: #2f353a; +.tooltip .arrow { + position: absolute; + display: block; + width: 0.8rem; + height: 0.4rem; } -.navbar-divider { - background-color: rgba(0, 0, 0, 0.075); +.tooltip .arrow::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; } -@media (min-width: 992px) { - .brand-minimized .app-header .navbar-brand { - width: 50px; - background-color: transparent; - } - .brand-minimized .app-header .navbar-brand .navbar-brand-full { - display: none; - } - .brand-minimized .app-header .navbar-brand .navbar-brand-minimized { - display: block; - } +.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { + padding: 0.4rem 0; } -.input-group-prepend, -.input-group-append { - white-space: nowrap; - vertical-align: middle; +.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { + bottom: 0; } -*[dir="rtl"] .input-group > .form-control, -*[dir="rtl"] .input-group > .custom-select { - border-radius: 0.25rem; +.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { + top: 0; + border-width: 0.4rem 0.4rem 0; + border-top-color: #000015; } -*[dir="rtl"] .input-group > .form-control:not(:last-child), -*[dir="rtl"] .input-group > .custom-select:not(:last-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { + padding: 0 0.4rem; } -*[dir="rtl"] .input-group > .form-control:not(:first-child), -*[dir="rtl"] .input-group > .custom-select:not(:first-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { + left: 0; + width: 0.4rem; + height: 0.8rem; } -*[dir="rtl"] .input-group-prepend { - margin-left: -1px; +.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { + right: 0; + border-width: 0.4rem 0.4rem 0.4rem 0; + border-right-color: #000015; } -*[dir="rtl"] .input-group-append { - margin-right: -1px; +.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { + padding: 0.4rem 0; } -*[dir="rtl"] .input-group > .input-group-prepend > .btn, -*[dir="rtl"] .input-group > .input-group-prepend > .input-group-text, -*[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .btn, -*[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .input-group-text, -*[dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -*[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { - border-radius: 0.25rem; - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { + top: 0; } -*[dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -*[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { + bottom: 0; + border-width: 0 0.4rem 0.4rem; + border-bottom-color: #000015; } -*[dir="rtl"] .input-group > .input-group-append > .btn, -*[dir="rtl"] .input-group > .input-group-append > .input-group-text, -*[dir="rtl"] .input-group > .input-group-prepend:not(:first-child) > .btn, -*[dir="rtl"] .input-group > .input-group-prepend:not(:first-child) > .input-group-text, -*[dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:not(:first-child), -*[dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { - border-radius: 0.25rem; - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { + padding: 0 0.4rem; } -*[dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:not(:first-child), -*[dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { + right: 0; + width: 0.4rem; + height: 0.8rem; } -.img-avatar, .avatar > img, -.img-circle { - max-width: 100%; - height: auto; - border-radius: 50em; +.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { + left: 0; + border-width: 0.4rem 0 0.4rem 0.4rem; + border-left-color: #000015; } -.list-group-accent .list-group-item { - margin-bottom: 1px; - border-top: 0; - border-right: 0; - border-bottom: 0; - border-radius: 0; +.tooltip-inner { + max-width: 200px; + padding: 0.25rem 0.5rem; + color: #fff; + text-align: center; + background-color: #000015; + border-radius: 0.25rem; } -.list-group-accent .list-group-item.list-group-item-divider { - position: relative; +.fade { + transition: opacity 0.15s linear; } -.list-group-accent .list-group-item.list-group-item-divider::before { - position: absolute; - bottom: -1px; - left: 5%; - width: 90%; - height: 1px; - content: ""; - background-color: #e4e7ea; +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } } -.list-group-item-accent-primary { - border-left: 4px solid #20a8d8; +.fade:not(.show) { + opacity: 0; } -.list-group-item-accent-secondary { - border-left: 4px solid #c8ced3; +.collapse:not(.show) { + display: none; } -.list-group-item-accent-success { - border-left: 4px solid #4dbd74; +.collapsing { + position: relative; + height: 0; + overflow: hidden; + transition: height 0.35s ease; } -.list-group-item-accent-info { - border-left: 4px solid #63c2de; +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } } -.list-group-item-accent-warning { - border-left: 4px solid #ffc107; +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } -.list-group-item-accent-danger { - border-left: 4px solid #f86c6b; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } -.list-group-item-accent-light { - border-left: 4px solid #f0f3f5; +.fade-in { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-duration: 1s; + animation-duration: 1s; } -.list-group-item-accent-dark { - border-left: 4px solid #2f353a; +.c-wrapper { + will-change: auto; + transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s, -webkit-transform 0.25s; + transition: transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s; + transition: transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s, -webkit-transform 0.25s, -ms-flex 0.25s; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; } -.modal-primary .modal-content { - border-color: #20a8d8; +.c-sidebar.c-sidebar-unfoldable { + transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0s, -webkit-transform 0.25s; + transition: transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0s; + transition: transform 0.25s, margin-left 0.25s, margin-right 0.25s, width 0.25s, z-index 0s ease 0s, -webkit-transform 0.25s; } -.modal-primary .modal-header { - color: #fff; - background-color: #20a8d8; +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; } -.modal-secondary .modal-content { - border-color: #c8ced3; +h1, .h1 { + font-size: 2.1875rem; } -.modal-secondary .modal-header { - color: #fff; - background-color: #c8ced3; +h2, .h2 { + font-size: 1.75rem; } -.modal-success .modal-content { - border-color: #4dbd74; +h3, .h3 { + font-size: 1.53125rem; } -.modal-success .modal-header { - color: #fff; - background-color: #4dbd74; +h4, .h4 { + font-size: 1.3125rem; } -.modal-info .modal-content { - border-color: #63c2de; +h5, .h5 { + font-size: 1.09375rem; } -.modal-info .modal-header { - color: #fff; - background-color: #63c2de; +h6, .h6 { + font-size: 0.875rem; } -.modal-warning .modal-content { - border-color: #ffc107; +.lead { + font-size: 1.09375rem; + font-weight: 300; } -.modal-warning .modal-header { - color: #fff; - background-color: #ffc107; +.display-1 { + font-size: 6rem; } -.modal-danger .modal-content { - border-color: #f86c6b; +.display-1,.display-2 { + font-weight: 300; + line-height: 1.2; } -.modal-danger .modal-header { - color: #fff; - background-color: #f86c6b; +.display-2 { + font-size: 5.5rem; } -.modal-light .modal-content { - border-color: #f0f3f5; +.display-3 { + font-size: 4.5rem; } -.modal-light .modal-header { - color: #fff; - background-color: #f0f3f5; +.display-3,.display-4 { + font-weight: 300; + line-height: 1.2; } -.modal-dark .modal-content { - border-color: #2f353a; +.display-4 { + font-size: 3.5rem; } -.modal-dark .modal-header { - color: #fff; - background-color: #2f353a; +.c-vr { + width: 1px; + background-color: rgba(0, 0, 21, 0.2); } -.nav-tabs .nav-link { - color: #73818f; +small, +.small { + font-size: 80%; + font-weight: 400; } -.nav-tabs .nav-link:hover { - cursor: pointer; +mark, +.mark { + padding: 0.2em; + background-color: #fcf8e3; } -.nav-tabs .nav-link.active { - color: #2f353a; - background: #fff; - border-color: #c8ced3; - border-bottom-color: #fff; +.list-unstyled { + list-style: none; } -.nav-tabs .nav-link.active:focus { - background: #fff; - border-color: #c8ced3; - border-bottom-color: #fff; +html:not([dir="rtl"]) .list-unstyled { + padding-left: 0; } -.tab-content { - margin-top: -1px; - background: #fff; - border: 1px solid #c8ced3; +*[dir="rtl"] .list-unstyled { + padding-right: 0; } -.tab-content .tab-pane { - padding: 1rem; +.list-inline { + list-style: none; } -.card-block .tab-content { - margin-top: 0; - border: 0; +html:not([dir="rtl"]) .list-inline { + padding-left: 0; } -.nav-fill .nav-link { - background-color: #fff; - border-color: #c8ced3; +*[dir="rtl"] .list-inline { + padding-right: 0; } -.nav-fill .nav-link + .nav-link { - margin-left: -1px; +.list-inline-item { + display: inline-block; } -.nav-fill .nav-link.active { - margin-top: -1px; - border-top: 2px solid #20a8d8; +.list-inline-item:not(:last-child) { + margin-right: 0.5rem; } -*[dir="rtl"] .nav { - padding-right: 0; +.initialism { + font-size: 90%; + text-transform: uppercase; } -.progress-xs { - height: 4px; +.blockquote { + margin-bottom: 1rem; + font-size: 1.09375rem; } -.progress-sm { - height: 8px; +.blockquote-footer { + display: block; + font-size: 80%; + color: #8a93a2; } -.progress-white { - background-color: rgba(255, 255, 255, 0.2); +.blockquote-footer::before { + content: "\2014\00A0"; } -.progress-white .progress-bar { - background-color: #fff; +@media all and (-ms-high-contrast: none) { + html { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + } } -.progress-group { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - margin-bottom: 1rem; +.c-wrapper .c-header-fixed { + margin: inherit; } -.progress-group-prepend { - -ms-flex: 0 0 100px; - flex: 0 0 100px; - -ms-flex-item-align: center; - align-self: center; +.c-wrapper.c-fixed-components { + height: 100vh; } -.progress-group-icon { - margin: 0 1rem 0 0.25rem; - font-size: 1.09375rem; +.c-wrapper.c-fixed-components .c-header-fixed { + margin: 0; } -.progress-group-text { - font-size: 0.765625rem; - color: #73818f; +.c-wrapper.c-fixed-components .c-header-fixed, +.c-wrapper.c-fixed-components .c-subheader-fixed, +.c-wrapper.c-fixed-components .c-footer-fixed { + position: relative; } -.progress-group-header { - display: -ms-flexbox; - display: flex; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -ms-flex-align: end; - align-items: flex-end; - margin-bottom: 0.25rem; +.c-wrapper.c-fixed-components .c-body { + -ms-flex-direction: column; + flex-direction: column; + overflow-y: scroll; } -.progress-group-bars { +.c-body { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; -ms-flex-positive: 1; flex-grow: 1; - -ms-flex-item-align: center; - align-self: center; -} - -.progress-group-bars .progress:not(:last-child) { - margin-bottom: 2px; } -.progress-group-header + .progress-group-bars { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; +.c-main { + -ms-flex-preferred-size: auto; + flex-basis: auto; + -ms-flex-negative: 0; + flex-shrink: 0; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + padding-top: 2rem; } -.sidebar { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - padding: 0; - color: #fff; - background: #2f353a; +@media (min-width: 768px) { + .c-main > .container-fluid, .c-main > .container-sm, .c-main > .container-md, .c-main > .container-lg, .c-main > .container-xl { + padding-right: 30px; + padding-left: 30px; + } } -.sidebar .sidebar-close { - position: absolute; - right: 0; - display: none; - padding: 0 1rem; - font-size: 24px; - font-weight: 800; - line-height: 55px; - color: #fff; - background: 0; - border: 0; - opacity: .8; +.align-baseline { + vertical-align: baseline !important; } -.sidebar .sidebar-close:hover { - opacity: 1; +.align-top { + vertical-align: top !important; } -.sidebar .sidebar-header { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0.75rem 1rem; - text-align: center; - background: rgba(0, 0, 0, 0.2); +.align-middle { + vertical-align: middle !important; } -.sidebar .sidebar-form .form-control { - color: #fff; - background: #181b1e; - border: 0; +.align-bottom { + vertical-align: bottom !important; } -.sidebar .sidebar-form .form-control::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.7); +.align-text-bottom { + vertical-align: text-bottom !important; } -.sidebar .sidebar-form .form-control::-moz-placeholder { - color: rgba(255, 255, 255, 0.7); +.align-text-top { + vertical-align: text-top !important; } -.sidebar .sidebar-form .form-control:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.7); +.bg-primary { + background-color: #321fdb !important; } -.sidebar .sidebar-form .form-control::-ms-input-placeholder { - color: rgba(255, 255, 255, 0.7); +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #2819ae !important; } -.sidebar .sidebar-form .form-control::placeholder { - color: rgba(255, 255, 255, 0.7); +.bg-secondary { + background-color: #ced2d8 !important; } -.sidebar .sidebar-scroll { - position: relative; - -ms-flex: 1; - flex: 1; - overflow-x: hidden; - overflow-y: auto; - width: 200px; +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: #b2b8c1 !important; } -.sidebar .sidebar-nav { - position: relative; - -ms-flex: 1; - flex: 1; - width: 200px; +.bg-success { + background-color: #2eb85c !important; } -.sidebar > .sidebar-nav { - overflow-x: hidden; - overflow-y: auto; +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: #248f48 !important; } -.sidebar .nav { - width: 200px; - -ms-flex-direction: column; - flex-direction: column; - min-height: 100%; - padding: 0; +.bg-info { + background-color: #39f !important; } -.sidebar .nav-title { - padding: 0.75rem 1rem; - font-size: 80%; - font-weight: 700; - color: #e4e7ea; - text-transform: uppercase; +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: #0080ff !important; } -.sidebar .nav-divider { - height: 10px; +.bg-warning { + background-color: #f9b115 !important; } -.sidebar .nav-item { - position: relative; - margin: 0; - transition: background .3s ease-in-out; +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: #d69405 !important; } -.sidebar .nav-dropdown-items { - max-height: 0; - padding: 0; - margin: 0; - overflow-y: hidden; - transition: max-height .3s ease-in-out; +.bg-danger { + background-color: #e55353 !important; } -.sidebar .nav-dropdown-items .nav-item { - padding: 0; - list-style: none; +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #de2727 !important; } -.sidebar .nav-link { - display: block; - padding: 0.75rem 1rem; - color: #fff; - text-decoration: none; - background: transparent; +.bg-light { + background-color: #ebedef !important; } -.sidebar .nav-link .nav-icon { - display: inline-block; - width: 1.09375rem; - margin: 0 0.5rem 0 0; - font-size: 0.875rem; - color: #73818f; - text-align: center; +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: #cfd4d8 !important; } -.sidebar .nav-link .badge { - float: right; - margin-top: 2px; +.bg-dark { + background-color: #636f83 !important; } -.sidebar .nav-link.active { - color: #fff; - background: #3a4248; +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: #4d5666 !important; } -.sidebar .nav-link.active .nav-icon { - color: #20a8d8; +.bg-gradient-primary { + background: #1f1498 !important; + background: linear-gradient(45deg, #321fdb 0%, #1f1498 100%) !important; + border-color: #1f1498 !important; } -.sidebar .nav-link:hover { - color: #fff; - background: #20a8d8; +.c-dark-theme .bg-gradient-primary { + background: #2d2587 !important; + background: linear-gradient(45deg, #4638c2 0%, #2d2587 100%) !important; + border-color: #2d2587 !important; } -.sidebar .nav-link:hover .nav-icon { - color: #fff; +.bg-gradient-secondary { + background: #fff !important; + background: linear-gradient(45deg, #c8d2dc 0%, #fff 100%) !important; + border-color: #fff !important; } -.sidebar .nav-link:hover.nav-dropdown-toggle::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); +.c-dark-theme .bg-gradient-secondary { + background: white !important; + background: linear-gradient(45deg, #d1d2d3 0%, white 100%) !important; + border-color: white !important; } -.sidebar .nav-link.disabled { - color: #b3b3b3; - cursor: default; - background: transparent; +.bg-gradient-success { + background: #1b9e3e !important; + background: linear-gradient(45deg, #2eb85c 0%, #1b9e3e 100%) !important; + border-color: #1b9e3e !important; } -.sidebar .nav-link.disabled .nav-icon { - color: #73818f; +.c-dark-theme .bg-gradient-success { + background: #2e8c47 !important; + background: linear-gradient(45deg, #45a164 0%, #2e8c47 100%) !important; + border-color: #2e8c47 !important; } -.sidebar .nav-link.disabled:hover { - color: #b3b3b3; +.bg-gradient-info { + background: #2982cc !important; + background: linear-gradient(45deg, #39f 0%, #2982cc 100%) !important; + border-color: #2982cc !important; } -.sidebar .nav-link.disabled:hover .nav-icon { - color: #73818f; +.c-dark-theme .bg-gradient-info { + background: #4280b4 !important; + background: linear-gradient(45deg, #4799eb 0%, #4280b4 100%) !important; + border-color: #4280b4 !important; } -.sidebar .nav-link.disabled:hover.nav-dropdown-toggle::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); +.bg-gradient-warning { + background: #f6960b !important; + background: linear-gradient(45deg, #f9b115 0%, #f6960b 100%) !important; + border-color: #f6960b !important; } -.sidebar .nav-link.nav-link-primary { - background: #20a8d8; +.c-dark-theme .bg-gradient-warning { + background: #dd9124 !important; + background: linear-gradient(45deg, #e1a82d 0%, #dd9124 100%) !important; + border-color: #dd9124 !important; } -.sidebar .nav-link.nav-link-primary .nav-icon { - color: rgba(255, 255, 255, 0.7); +.bg-gradient-danger { + background: #d93737 !important; + background: linear-gradient(45deg, #e55353 0%, #d93737 100%) !important; + border-color: #d93737 !important; } -.sidebar .nav-link.nav-link-primary:hover { - background: #1d97c2; +.c-dark-theme .bg-gradient-danger { + background: #c14f4f !important; + background: linear-gradient(45deg, #d16767 0%, #c14f4f 100%) !important; + border-color: #c14f4f !important; } -.sidebar .nav-link.nav-link-primary:hover i { - color: #fff; +.bg-gradient-light { + background: #fff !important; + background: linear-gradient(45deg, #e3e8ed 0%, #fff 100%) !important; + border-color: #fff !important; } -.sidebar .nav-link.nav-link-secondary { - background: #c8ced3; +.c-dark-theme .bg-gradient-light { + background: white !important; + background: linear-gradient(45deg, #e8e8e8 0%, white 100%) !important; + border-color: white !important; } -.sidebar .nav-link.nav-link-secondary .nav-icon { - color: rgba(255, 255, 255, 0.7); +.bg-gradient-dark { + background: #212333 !important; + background: linear-gradient(45deg, #3c4b64 0%, #212333 100%) !important; + border-color: #212333 !important; } -.sidebar .nav-link.nav-link-secondary:hover { - background: #bac1c8; +.c-dark-theme .bg-gradient-dark { + background: #292a2b !important; + background: linear-gradient(45deg, #4c4f54 0%, #292a2b 100%) !important; + border-color: #292a2b !important; } -.sidebar .nav-link.nav-link-secondary:hover i { - color: #fff; +.bg-white { + background-color: #fff !important; } -.sidebar .nav-link.nav-link-success { - background: #4dbd74; +.bg-transparent { + background-color: transparent !important; } -.sidebar .nav-link.nav-link-success .nav-icon { - color: rgba(255, 255, 255, 0.7); +[class^="bg-"] { + color: #fff; } -.sidebar .nav-link.nav-link-success:hover { - background: #41af67; +.bg-facebook { + background-color: #3b5998 !important; } -.sidebar .nav-link.nav-link-success:hover i { - color: #fff; +a.bg-facebook:hover, a.bg-facebook:focus, +button.bg-facebook:hover, +button.bg-facebook:focus { + background-color: #2d4373 !important; } -.sidebar .nav-link.nav-link-info { - background: #63c2de; +.bg-twitter { + background-color: #00aced !important; } -.sidebar .nav-link.nav-link-info .nav-icon { - color: rgba(255, 255, 255, 0.7); +a.bg-twitter:hover, a.bg-twitter:focus, +button.bg-twitter:hover, +button.bg-twitter:focus { + background-color: #0087ba !important; } -.sidebar .nav-link.nav-link-info:hover { - background: #4ebada; +.bg-linkedin { + background-color: #4875b4 !important; } -.sidebar .nav-link.nav-link-info:hover i { - color: #fff; +a.bg-linkedin:hover, a.bg-linkedin:focus, +button.bg-linkedin:hover, +button.bg-linkedin:focus { + background-color: #395d90 !important; } -.sidebar .nav-link.nav-link-warning { - background: #ffc107; +.bg-flickr { + background-color: #ff0084 !important; } -.sidebar .nav-link.nav-link-warning .nav-icon { - color: rgba(255, 255, 255, 0.7); +a.bg-flickr:hover, a.bg-flickr:focus, +button.bg-flickr:hover, +button.bg-flickr:focus { + background-color: #cc006a !important; } -.sidebar .nav-link.nav-link-warning:hover { - background: #edb100; +.bg-tumblr { + background-color: #32506d !important; } -.sidebar .nav-link.nav-link-warning:hover i { - color: #fff; +a.bg-tumblr:hover, a.bg-tumblr:focus, +button.bg-tumblr:hover, +button.bg-tumblr:focus { + background-color: #22364a !important; } -.sidebar .nav-link.nav-link-danger { - background: #f86c6b; +.bg-xing { + background-color: #026466 !important; } -.sidebar .nav-link.nav-link-danger .nav-icon { - color: rgba(255, 255, 255, 0.7); +a.bg-xing:hover, a.bg-xing:focus, +button.bg-xing:hover, +button.bg-xing:focus { + background-color: #013334 !important; } -.sidebar .nav-link.nav-link-danger:hover { - background: #f75453; +.bg-github { + background-color: #4183c4 !important; } -.sidebar .nav-link.nav-link-danger:hover i { - color: #fff; +a.bg-github:hover, a.bg-github:focus, +button.bg-github:hover, +button.bg-github:focus { + background-color: #3269a0 !important; } -.sidebar .nav-link.nav-link-light { - background: #f0f3f5; +.bg-stack-overflow { + background-color: #fe7a15 !important; } -.sidebar .nav-link.nav-link-light .nav-icon { - color: rgba(255, 255, 255, 0.7); +a.bg-stack-overflow:hover, a.bg-stack-overflow:focus, +button.bg-stack-overflow:hover, +button.bg-stack-overflow:focus { + background-color: #df6101 !important; } -.sidebar .nav-link.nav-link-light:hover { - background: #e1e7eb; +.bg-youtube { + background-color: #b00 !important; } -.sidebar .nav-link.nav-link-light:hover i { - color: #fff; +a.bg-youtube:hover, a.bg-youtube:focus, +button.bg-youtube:hover, +button.bg-youtube:focus { + background-color: #880000 !important; } -.sidebar .nav-link.nav-link-dark { - background: #2f353a; +.bg-dribbble { + background-color: #ea4c89 !important; } -.sidebar .nav-link.nav-link-dark .nav-icon { - color: rgba(255, 255, 255, 0.7); +a.bg-dribbble:hover, a.bg-dribbble:focus, +button.bg-dribbble:hover, +button.bg-dribbble:focus { + background-color: #e51e6b !important; } -.sidebar .nav-link.nav-link-dark:hover { - background: #24282c; +.bg-instagram { + background-color: #517fa4 !important; } -.sidebar .nav-link.nav-link-dark:hover i { - color: #fff; +a.bg-instagram:hover, a.bg-instagram:focus, +button.bg-instagram:hover, +button.bg-instagram:focus { + background-color: #406582 !important; } -.sidebar .nav-dropdown-toggle { - position: relative; +.bg-pinterest { + background-color: #cb2027 !important; } -.sidebar .nav-dropdown-toggle::before { - position: absolute; - top: 50%; - right: 1rem; - display: block; - width: 8px; - height: 8px; - padding: 0; - margin-top: -4px; - content: ""; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - transition: -webkit-transform .3s; - transition: transform .3s; - transition: transform .3s, -webkit-transform .3s; +a.bg-pinterest:hover, a.bg-pinterest:focus, +button.bg-pinterest:hover, +button.bg-pinterest:focus { + background-color: #9f191f !important; } -.sidebar .nav-dropdown-toggle .badge { - margin-right: 16px; +.bg-vk { + background-color: #45668e !important; } -.sidebar .nav-dropdown.open { - background: rgba(0, 0, 0, 0.2); +a.bg-vk:hover, a.bg-vk:focus, +button.bg-vk:hover, +button.bg-vk:focus { + background-color: #344d6c !important; } -.sidebar .nav-dropdown.open > .nav-dropdown-items { - max-height: 1500px; +.bg-yahoo { + background-color: #400191 !important; } -.sidebar .nav-dropdown.open .nav-link { - color: #fff; - border-left: 0; +a.bg-yahoo:hover, a.bg-yahoo:focus, +button.bg-yahoo:hover, +button.bg-yahoo:focus { + background-color: #2a015e !important; } -.sidebar .nav-dropdown.open .nav-link.disabled { - color: #b3b3b3; - background: transparent; +.bg-behance { + background-color: #1769ff !important; } -.sidebar .nav-dropdown.open .nav-link.disabled:hover { - color: #b3b3b3; +a.bg-behance:hover, a.bg-behance:focus, +button.bg-behance:hover, +button.bg-behance:focus { + background-color: #0050e3 !important; } -.sidebar .nav-dropdown.open .nav-link.disabled:hover .nav-icon { - color: #73818f; +.bg-reddit { + background-color: #ff4500 !important; } -.sidebar .nav-dropdown.open > .nav-dropdown-toggle::before { - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); +a.bg-reddit:hover, a.bg-reddit:focus, +button.bg-reddit:hover, +button.bg-reddit:focus { + background-color: #cc3700 !important; } -.sidebar .nav-dropdown.open .nav-dropdown.open { - border-left: 0; +.bg-vimeo { + background-color: #aad450 !important; } -.sidebar .nav-label { - display: block; - padding: 0.09375rem 1rem; - color: #e4e7ea; +a.bg-vimeo:hover, a.bg-vimeo:focus, +button.bg-vimeo:hover, +button.bg-vimeo:focus { + background-color: #93c130 !important; } -.sidebar .nav-label:hover { - color: #fff; - text-decoration: none; +.bg-gray-100 { + background-color: #ebedef !important; } -.sidebar .nav-label .nav-icon { - width: 20px; - margin: -3px 0.5rem 0 0; - font-size: 10px; - color: #73818f; - text-align: center; - vertical-align: middle; +a.bg-gray-100:hover, a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: #cfd4d8 !important; } -.sidebar .progress { - background-color: #515c64 !important; +.bg-gray-200 { + background-color: #d8dbe0 !important; } -.sidebar .sidebar-footer { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: 0.75rem 1rem; - background: rgba(0, 0, 0, 0.2); +a.bg-gray-200:hover, a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: #bcc1c9 !important; } -.sidebar .sidebar-minimizer { - position: relative; - -ms-flex: 0 0 50px; - flex: 0 0 50px; - cursor: pointer; - background-color: rgba(0, 0, 0, 0.2); - border: 0; +.bg-gray-300 { + background-color: #c4c9d0 !important; } -.sidebar .sidebar-minimizer::before { - position: absolute; - top: 0; - right: 0; - width: 50px; - height: 50px; - content: ""; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - background-size: 12.5px; - transition: .3s; +a.bg-gray-300:hover, a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: #a8afb9 !important; } -.sidebar .sidebar-minimizer:focus, .sidebar .sidebar-minimizer.focus { - outline: 0; +.bg-gray-400 { + background-color: #b1b7c1 !important; } -.sidebar .sidebar-minimizer:hover { - background-color: rgba(0, 0, 0, 0.3); +a.bg-gray-400:hover, a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: #959daa !important; } -.sidebar .sidebar-minimizer:hover::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); +.bg-gray-500 { + background-color: #9da5b1 !important; } -@media (min-width: 992px) { - .sidebar-compact .sidebar .sidebar-nav { - width: 150px; - } - .sidebar-compact .sidebar .nav { - width: 150px; - } - .sidebar-compact .sidebar .d-compact-none { - display: none; - } - .sidebar-compact .sidebar .nav-title { - text-align: center; - } - .sidebar-compact .sidebar .nav-item { - width: 150px; - border-left: 0; - } - .sidebar-compact .sidebar .nav-link { - text-align: center; - } - .sidebar-compact .sidebar .nav-link .nav-icon { - display: block; - width: 100%; - margin: 0.25rem 0; - font-size: 24px; - } - .sidebar-compact .sidebar .nav-link .badge { - position: absolute; - top: 18px; - right: 10px; - } - .sidebar-compact .sidebar .nav-link.nav-dropdown-toggle::before { - top: 30px; - } - .sidebar-minimized .sidebar { - z-index: 1019; - } - .sidebar-minimized .sidebar .sidebar-scroll { - overflow: visible; - width: 50px; - } - .sidebar-minimized .sidebar .sidebar-nav { - overflow: visible; - width: 50px; - } - .sidebar-minimized .sidebar .nav { - width: 50px; - } - .sidebar-minimized .sidebar .d-minimized-none, - .sidebar-minimized .sidebar .nav-divider, - .sidebar-minimized .sidebar .nav-label, - .sidebar-minimized .sidebar .nav-title, - .sidebar-minimized .sidebar .sidebar-footer, - .sidebar-minimized .sidebar .sidebar-form, - .sidebar-minimized .sidebar .sidebar-header { - display: none; - } - .sidebar-minimized .sidebar .sidebar-minimizer { - position: fixed; - bottom: 0; - width: 50px; - height: 50px; - background-color: #24282c; - } - .sidebar-minimized .sidebar .sidebar-nav { - padding-bottom: 50px; - } - .sidebar-minimized .sidebar .sidebar-minimizer::before { - width: 100%; - -webkit-transform: rotate(-180deg); - transform: rotate(-180deg); - } - .sidebar-minimized .sidebar .nav-item { - width: 50px; - overflow: hidden; - } - .sidebar-minimized .sidebar .nav-item:hover { - width: 250px; - overflow: visible; - } - .sidebar-minimized .sidebar .nav-item:hover > .nav-link { - background: #20a8d8; - } - .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon { - color: #fff; - } - .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled, - .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled { - background: #2f353a; - } - .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled .nav-icon, - .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled .nav-icon { - color: #73818f; - } - .sidebar-minimized .sidebar section :not(.nav-dropdown-items) > .nav-item:last-child::after { - display: block; - margin-bottom: 50px; - content: ""; - } - .sidebar-minimized .sidebar .nav-link { - position: relative; - padding-left: 0; - margin: 0; - white-space: nowrap; - border-left: 0; - } - .sidebar-minimized .sidebar .nav-link .nav-icon { - display: block; - float: left; - width: 50px; - font-size: 18px; - } - .sidebar-minimized .sidebar .nav-link .badge { - position: absolute; - right: 15px; - display: none; - } - .sidebar-minimized .sidebar .nav-link:hover { - width: 250px; - background: #20a8d8; - } - .sidebar-minimized .sidebar .nav-link:hover .badge { - display: inline; - } - .sidebar-minimized .sidebar .nav-link.nav-dropdown-toggle::before { - display: none; - } - .sidebar-minimized .sidebar .nav-dropdown-items .nav-item { - width: 200px; - } - .sidebar-minimized .sidebar .nav-dropdown-items .nav-item .nav-link { - width: 200px; - } - .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items { - display: none; - max-height: 1000px; - background: #2f353a; - } - .sidebar-minimized .sidebar .nav > .nav-dropdown:hover { - background: #20a8d8; - } - .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items { - position: absolute; - left: 50px; - display: inline; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav { - list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav .divider { - height: 0; - } - *[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before { - width: 100%; - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav-link { - padding-right: 0; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon { - float: right; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge { - right: auto; - left: 15px; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav-link:hover .badge { - display: inline; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items { - display: none; - max-height: 1000px; - background: #2f353a; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover { - background: #20a8d8; - } - *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items { - position: absolute; - left: 0; - display: inline; - } +a.bg-gray-500:hover, a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: #818b9a !important; } -*[dir="rtl"] .sidebar .nav-dropdown-toggle::before { - position: absolute; - right: auto; - left: 1rem; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); +.bg-gray-600 { + background-color: #8a93a2 !important; } -*[dir="rtl"] .sidebar .nav-dropdown.open > .nav-dropdown-toggle::before { - -webkit-transform: rotate(270deg); - transform: rotate(270deg); +a.bg-gray-600:hover, a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: #6e798b !important; } -*[dir="rtl"] .sidebar .nav-link .nav-icon { - margin: 0 0 0 0.5rem; +.bg-gray-700 { + background-color: #768192 !important; } -*[dir="rtl"] .sidebar .nav-link .badge { - float: left; - margin-top: 2px; +a.bg-gray-700:hover, a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: #5e6877 !important; } -*[dir="rtl"] .sidebar .nav-link.nav-dropdown-toggle .badge { - margin-right: auto; - margin-left: 16px; +.bg-gray-800 { + background-color: #636f83 !important; } -*[dir="rtl"] .sidebar .sidebar-minimizer::before { - right: auto; - left: 0; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); +a.bg-gray-800:hover, a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: #4d5666 !important; } -*[dir="rtl"] .sidebar-toggler { - margin-right: 0 !important; +.bg-gray-900 { + background-color: #4f5d73 !important; } -.switch { - display: inline-block; - width: 40px; - height: 26px; +a.bg-gray-900:hover, a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: #3a4555 !important; } -.switch-input { - display: none; +.bg-box { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; } -.switch-slider { - position: relative; - display: block; - height: inherit; - cursor: pointer; - background-color: #fff; - border: 1px solid #c8ced3; - transition: .15s ease-out; - border-radius: 0.25rem; +.border { + border: 1px solid #d8dbe0 !important; } -.switch-slider::before { - position: absolute; - top: 2px; - left: 2px; - box-sizing: border-box; - width: 20px; - height: 20px; - content: ""; - background-color: #fff; - border: 1px solid #c8ced3; - transition: .15s ease-out; - border-radius: 0.125rem; +.border-top { + border-top: 1px solid #d8dbe0 !important; } -.switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(14px); - transform: translateX(14px); +.border-right { + border-right: 1px solid #d8dbe0 !important; } -.switch-input:disabled ~ .switch-slider { - cursor: not-allowed; - opacity: .5; +.border-bottom { + border-bottom: 1px solid #d8dbe0 !important; } -.switch-lg { - width: 48px; - height: 30px; +.border-left { + border-left: 1px solid #d8dbe0 !important; } -.switch-lg .switch-slider { - font-size: 12px; +.border-0 { + border: 0 !important; } -.switch-lg .switch-slider::before { - width: 24px; - height: 24px; +.border-top-0 { + border-top: 0 !important; } -.switch-lg .switch-slider::after { - font-size: 12px; +.border-right-0 { + border-right: 0 !important; } -.switch-lg .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(18px); - transform: translateX(18px); +.border-bottom-0 { + border-bottom: 0 !important; } -.switch-sm { - width: 32px; - height: 22px; +.border-left-0 { + border-left: 0 !important; } -.switch-sm .switch-slider { - font-size: 8px; +.border-primary { + border: 1px solid !important; + border-color: #321fdb !important; } -.switch-sm .switch-slider::before { - width: 16px; - height: 16px; +.border-secondary { + border: 1px solid !important; + border-color: #ced2d8 !important; } -.switch-sm .switch-slider::after { - font-size: 8px; +.border-success { + border: 1px solid !important; + border-color: #2eb85c !important; } -.switch-sm .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(10px); - transform: translateX(10px); +.border-info { + border: 1px solid !important; + border-color: #39f !important; } -.switch-label { - width: 48px; +.border-warning { + border: 1px solid !important; + border-color: #f9b115 !important; } -.switch-label .switch-slider::before { - z-index: 2; +.border-danger { + border: 1px solid !important; + border-color: #e55353 !important; } -.switch-label .switch-slider::after { - position: absolute; - top: 50%; - right: 1px; - z-index: 1; - width: 50%; - margin-top: -.5em; - font-size: 10px; - font-weight: 600; - line-height: 1; - color: #c8ced3; - text-align: center; - text-transform: uppercase; - content: attr(data-unchecked); - transition: inherit; +.border-light { + border: 1px solid !important; + border-color: #ebedef !important; } -.switch-label .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(22px); - transform: translateX(22px); +.border-dark { + border: 1px solid !important; + border-color: #636f83 !important; } -.switch-label .switch-input:checked ~ .switch-slider::after { - left: 1px; - color: #fff; - content: attr(data-checked); +.border-white { + border-color: #fff !important; } -.switch-label.switch-lg { - width: 56px; - height: 30px; +.rounded-sm { + border-radius: 0.2rem !important; } -.switch-label.switch-lg .switch-slider { - font-size: 12px; +.rounded { + border-radius: 0.25rem !important; } -.switch-label.switch-lg .switch-slider::before { - width: 24px; - height: 24px; +.rounded-top { + border-top-left-radius: 0.25rem !important; } -.switch-label.switch-lg .switch-slider::after { - font-size: 12px; +.rounded-top,.rounded-right { + border-top-right-radius: 0.25rem !important; } -.switch-label.switch-lg .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(26px); - transform: translateX(26px); +.rounded-right,.rounded-bottom { + border-bottom-right-radius: 0.25rem !important; } -.switch-label.switch-sm { - width: 40px; - height: 22px; +.rounded-bottom,.rounded-left { + border-bottom-left-radius: 0.25rem !important; } -.switch-label.switch-sm .switch-slider { - font-size: 8px; +.rounded-left { + border-top-left-radius: 0.25rem !important; } -.switch-label.switch-sm .switch-slider::before { - width: 16px; - height: 16px; +.rounded-lg { + border-radius: 0.3rem !important; } -.switch-label.switch-sm .switch-slider::after { - font-size: 8px; +.rounded-circle { + border-radius: 50% !important; +} + +.rounded-pill { + border-radius: 50rem !important; +} + +.rounded-0 { + border-radius: 0 !important; } -.switch-label.switch-sm .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(18px); - transform: translateX(18px); +.b-a-0 { + border: 0 !important; } -.switch-3d .switch-slider { - background-color: #f0f3f5; - border-radius: 50em; +.b-t-0 { + border-top: 0 !important; } -.switch-3d .switch-slider::before { - top: -1px; - left: -1px; - width: 26px; - height: 26px; - border: 0; - border-radius: 50em; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); +.b-r-0 { + border-right: 0 !important; } -.switch-3d.switch-lg { - width: 48px; - height: 30px; +.b-b-0 { + border-bottom: 0 !important; } -.switch-3d.switch-lg .switch-slider::before { - width: 30px; - height: 30px; +.b-l-0 { + border-left: 0 !important; } -.switch-3d.switch-lg .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(18px); - transform: translateX(18px); +.b-a-1 { + border: 1px solid #d8dbe0; } -.switch-3d.switch-sm { - width: 32px; - height: 22px; +.b-t-1 { + border-top: 1px solid #d8dbe0; } -.switch-3d.switch-sm .switch-slider::before { - width: 22px; - height: 22px; +.b-r-1 { + border-right: 1px solid #d8dbe0; } -.switch-3d.switch-sm .switch-input:checked ~ .switch-slider::before { - -webkit-transform: translateX(10px); - transform: translateX(10px); +.b-b-1 { + border-bottom: 1px solid #d8dbe0; } -.switch-primary .switch-input:checked + .switch-slider { - background-color: #20a8d8; - border-color: #1985ac; +.b-l-1 { + border-left: 1px solid #d8dbe0; } -.switch-primary .switch-input:checked + .switch-slider::before { - border-color: #1985ac; +.b-a-2 { + border: 2px solid #d8dbe0; } -.switch-outline-primary .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #20a8d8; +.b-t-2 { + border-top: 2px solid #d8dbe0; } -.switch-outline-primary .switch-input:checked + .switch-slider::before { - border-color: #20a8d8; +.b-r-2 { + border-right: 2px solid #d8dbe0; } -.switch-outline-primary .switch-input:checked + .switch-slider::after { - color: #20a8d8; +.b-b-2 { + border-bottom: 2px solid #d8dbe0; } -.switch-outline-primary-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #20a8d8; +.b-l-2 { + border-left: 2px solid #d8dbe0; } -.switch-outline-primary-alt .switch-input:checked + .switch-slider::before { - background-color: #20a8d8; - border-color: #20a8d8; +.content-center { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0; + text-align: center; } -.switch-outline-primary-alt .switch-input:checked + .switch-slider::after { - color: #20a8d8; +.clearfix::after { + display: block; + clear: both; + content: ""; } -.switch-secondary .switch-input:checked + .switch-slider { - background-color: #c8ced3; - border-color: #acb5bc; +.d-none { + display: none !important; } -.switch-secondary .switch-input:checked + .switch-slider::before { - border-color: #acb5bc; +.d-inline { + display: inline !important; } -.switch-outline-secondary .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #c8ced3; +.d-inline-block { + display: inline-block !important; } -.switch-outline-secondary .switch-input:checked + .switch-slider::before { - border-color: #c8ced3; +.d-block { + display: block !important; } -.switch-outline-secondary .switch-input:checked + .switch-slider::after { - color: #c8ced3; +.d-table { + display: table !important; } -.switch-outline-secondary-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #c8ced3; +.d-table-row { + display: table-row !important; } -.switch-outline-secondary-alt .switch-input:checked + .switch-slider::before { - background-color: #c8ced3; - border-color: #c8ced3; +.d-table-cell { + display: table-cell !important; } -.switch-outline-secondary-alt .switch-input:checked + .switch-slider::after { - color: #c8ced3; +.d-flex { + display: -ms-flexbox !important; + display: flex !important; } -.switch-success .switch-input:checked + .switch-slider { - background-color: #4dbd74; - border-color: #3a9d5d; +.d-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; } -.switch-success .switch-input:checked + .switch-slider::before { - border-color: #3a9d5d; +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-sm-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } } -.switch-outline-success .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #4dbd74; +@media (min-width: 768px) { + .d-md-none { + display: none !important; + } + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-md-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } } -.switch-outline-success .switch-input:checked + .switch-slider::before { - border-color: #4dbd74; +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-lg-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } } -.switch-outline-success .switch-input:checked + .switch-slider::after { - color: #4dbd74; +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; + } + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-xl-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } } -.switch-outline-success-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #4dbd74; +@media (max-width: 575.98px) { + .d-down-none { + display: none !important; + } } -.switch-outline-success-alt .switch-input:checked + .switch-slider::before { - background-color: #4dbd74; - border-color: #4dbd74; +@media (max-width: 767.98px) { + .d-sm-down-none { + display: none !important; + } } -.switch-outline-success-alt .switch-input:checked + .switch-slider::after { - color: #4dbd74; +@media (max-width: 991.98px) { + .d-md-down-none { + display: none !important; + } } -.switch-info .switch-input:checked + .switch-slider { - background-color: #63c2de; - border-color: #39b2d5; +@media (max-width: 1199.98px) { + .d-lg-down-none { + display: none !important; + } } -.switch-info .switch-input:checked + .switch-slider::before { - border-color: #39b2d5; +.d-xl-down-none,.c-default-theme .c-d-default-none { + display: none !important; } -.switch-outline-info .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #63c2de; +@media print { + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-print-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } } -.switch-outline-info .switch-input:checked + .switch-slider::before { - border-color: #63c2de; +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; } -.switch-outline-info .switch-input:checked + .switch-slider::after { - color: #63c2de; +.embed-responsive::before { + display: block; + content: ""; } -.switch-outline-info-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #63c2de; +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object, +.embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } -.switch-outline-info-alt .switch-input:checked + .switch-slider::before { - background-color: #63c2de; - border-color: #63c2de; +.embed-responsive-21by9::before { + padding-top: 42.85714286%; } -.switch-outline-info-alt .switch-input:checked + .switch-slider::after { - color: #63c2de; +.embed-responsive-16by9::before { + padding-top: 56.25%; } -.switch-warning .switch-input:checked + .switch-slider { - background-color: #ffc107; - border-color: #d39e00; +.embed-responsive-4by3::before { + padding-top: 75%; } -.switch-warning .switch-input:checked + .switch-slider::before { - border-color: #d39e00; +.embed-responsive-1by1::before { + padding-top: 100%; } -.switch-outline-warning .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #ffc107; +.flex-row { + -ms-flex-direction: row !important; + flex-direction: row !important; } -.switch-outline-warning .switch-input:checked + .switch-slider::before { - border-color: #ffc107; +.flex-column { + -ms-flex-direction: column !important; + flex-direction: column !important; } -.switch-outline-warning .switch-input:checked + .switch-slider::after { - color: #ffc107; +.flex-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } -.switch-outline-warning-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #ffc107; +.flex-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } -.switch-outline-warning-alt .switch-input:checked + .switch-slider::before { - background-color: #ffc107; - border-color: #ffc107; +.flex-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } -.switch-outline-warning-alt .switch-input:checked + .switch-slider::after { - color: #ffc107; +.flex-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } -.switch-danger .switch-input:checked + .switch-slider { - background-color: #f86c6b; - border-color: #f63c3a; +.flex-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } -.switch-danger .switch-input:checked + .switch-slider::before { - border-color: #f63c3a; +.flex-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } -.switch-outline-danger .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #f86c6b; +.flex-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } -.switch-outline-danger .switch-input:checked + .switch-slider::before { - border-color: #f86c6b; +.flex-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } -.switch-outline-danger .switch-input:checked + .switch-slider::after { - color: #f86c6b; +.flex-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } -.switch-outline-danger-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #f86c6b; +.flex-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } -.switch-outline-danger-alt .switch-input:checked + .switch-slider::before { - background-color: #f86c6b; - border-color: #f86c6b; +.justify-content-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; } -.switch-outline-danger-alt .switch-input:checked + .switch-slider::after { - color: #f86c6b; +.justify-content-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; } -.switch-light .switch-input:checked + .switch-slider { - background-color: #f0f3f5; - border-color: #d1dbe1; +.justify-content-center { + -ms-flex-pack: center !important; + justify-content: center !important; } -.switch-light .switch-input:checked + .switch-slider::before { - border-color: #d1dbe1; +.justify-content-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; } -.switch-outline-light .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #f0f3f5; +.justify-content-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } -.switch-outline-light .switch-input:checked + .switch-slider::before { - border-color: #f0f3f5; +.align-items-start { + -ms-flex-align: start !important; + align-items: flex-start !important; } -.switch-outline-light .switch-input:checked + .switch-slider::after { - color: #f0f3f5; +.align-items-end { + -ms-flex-align: end !important; + align-items: flex-end !important; } -.switch-outline-light-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #f0f3f5; +.align-items-center { + -ms-flex-align: center !important; + align-items: center !important; } -.switch-outline-light-alt .switch-input:checked + .switch-slider::before { - background-color: #f0f3f5; - border-color: #f0f3f5; +.align-items-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; } -.switch-outline-light-alt .switch-input:checked + .switch-slider::after { - color: #f0f3f5; +.align-items-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; } -.switch-dark .switch-input:checked + .switch-slider { - background-color: #2f353a; - border-color: #181b1e; +.align-content-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } -.switch-dark .switch-input:checked + .switch-slider::before { - border-color: #181b1e; +.align-content-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } -.switch-outline-dark .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #2f353a; +.align-content-center { + -ms-flex-line-pack: center !important; + align-content: center !important; } -.switch-outline-dark .switch-input:checked + .switch-slider::before { - border-color: #2f353a; +.align-content-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } -.switch-outline-dark .switch-input:checked + .switch-slider::after { - color: #2f353a; +.align-content-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } -.switch-outline-dark-alt .switch-input:checked + .switch-slider { - background-color: #fff; - border-color: #2f353a; +.align-content-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } -.switch-outline-dark-alt .switch-input:checked + .switch-slider::before { - background-color: #2f353a; - border-color: #2f353a; +.align-self-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; } -.switch-outline-dark-alt .switch-input:checked + .switch-slider::after { - color: #2f353a; +.align-self-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; } -.switch-pill .switch-slider { - border-radius: 50em; +.align-self-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; } -.switch-pill .switch-slider::before { - border-radius: 50em; +.align-self-center { + -ms-flex-item-align: center !important; + align-self: center !important; } -.table-outline { - border: 1px solid #c8ced3; +.align-self-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } -.table-outline td { - vertical-align: middle; +.align-self-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } -.table-align-middle td { - vertical-align: middle; +@media (min-width: 576px) { + .flex-sm-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-sm-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-sm-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-sm-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-sm-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-sm-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-sm-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-sm-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-sm-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-sm-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-sm-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-sm-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-sm-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-sm-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-sm-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-sm-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-sm-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-sm-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-sm-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-sm-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-sm-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-sm-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-sm-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-sm-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-sm-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-sm-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-sm-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-sm-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } } -.table-clear td { - border: 0; +@media (min-width: 768px) { + .flex-md-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-md-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-md-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-md-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-md-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-md-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-md-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-md-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-md-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-md-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-md-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-md-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-md-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-md-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-md-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-md-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-md-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-md-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-md-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-md-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-md-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-md-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-md-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-md-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-md-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-md-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-md-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-md-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-md-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-md-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } } -@media all and (-ms-high-contrast: none) { - html { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; +@media (min-width: 992px) { + .flex-lg-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-lg-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-lg-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-lg-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-lg-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-lg-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-lg-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-lg-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-lg-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-lg-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-lg-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-lg-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-lg-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-lg-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-lg-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-lg-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-lg-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-lg-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-lg-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-lg-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-lg-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-lg-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-lg-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-lg-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-lg-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-lg-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-lg-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-lg-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } } -.app, -app-dashboard, -app-root { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - min-height: 100vh; -} - -.app-header { - -ms-flex: 0 0 55px; - flex: 0 0 55px; -} - -.app-footer { - -ms-flex: 0 0 50px; - flex: 0 0 50px; -} - -.app-body { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-positive: 1; - flex-grow: 1; - overflow-x: hidden; -} - -.app-body .main { - -ms-flex: 1; - flex: 1; - min-width: 0; -} - -.app-body .sidebar { - -ms-flex: 0 0 200px; - flex: 0 0 200px; - -ms-flex-order: -1; - order: -1; -} - -.app-body .aside-menu { - -ms-flex: 0 0 250px; - flex: 0 0 250px; -} - -html:not([dir="rtl"]) .sidebar { - margin-left: -200px; -} - -html:not([dir="rtl"]) .aside-menu { - right: 0; - margin-right: -250px; -} - -html[dir="rtl"] .sidebar { - margin-right: -200px; -} - -html[dir="rtl"] .aside-menu { - left: 0; - margin-left: -250px; -} - -@media (min-width: 992px) { - .header-fixed .app-header { - position: fixed; - z-index: 1020; - width: 100%; +@media (min-width: 1200px) { + .flex-xl-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-xl-column { + -ms-flex-direction: column !important; + flex-direction: column !important; } - .header-fixed .app-body { - margin-top: 55px; + .flex-xl-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } - .sidebar-fixed .sidebar { - position: fixed; - z-index: 1019; - width: 200px; - height: 100vh; + .flex-xl-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } - .sidebar-fixed .app-header + .app-body .sidebar { - height: calc(100vh - 55px); + .flex-xl-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } - .sidebar-compact .sidebar { - -ms-flex: 0 0 150px; - flex: 0 0 150px; + .flex-xl-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } - .sidebar-compact.sidebar-fixed .sidebar { - width: 150px; + .flex-xl-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } - .sidebar-compact .sidebar-minimizer { - display: none; + .flex-xl-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } - .sidebar-minimized .sidebar { - -ms-flex: 0 0 50px; - flex: 0 0 50px; + .flex-xl-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } - .sidebar-minimized.sidebar-fixed .sidebar { - width: 50px; + .flex-xl-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } - .sidebar-off-canvas .sidebar { - position: fixed; - z-index: 1019; - height: 100%; + .flex-xl-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-xl-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-xl-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; } - .sidebar-off-canvas .app-header + .app-body .sidebar { - height: calc(100vh - 55px); + .justify-content-xl-center { + -ms-flex-pack: center !important; + justify-content: center !important; } - html:not([dir="rtl"]) .sidebar-compact .sidebar { - margin-left: -150px; + .justify-content-xl-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; } - html:not([dir="rtl"]) .sidebar-minimized .sidebar { - margin-left: -50px; + .justify-content-xl-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } - html[dir="rtl"] .sidebar-compact .sidebar { - margin-right: -150px; + .align-items-xl-start { + -ms-flex-align: start !important; + align-items: flex-start !important; } - html[dir="rtl"] .sidebar-minimized .sidebar { - margin-right: -50px; + .align-items-xl-end { + -ms-flex-align: end !important; + align-items: flex-end !important; } - .aside-menu-fixed .aside-menu { - position: fixed; - height: 100%; + .align-items-xl-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-xl-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-xl-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-xl-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-xl-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-xl-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-xl-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-xl-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-xl-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-xl-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-xl-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-xl-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-xl-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-xl-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-xl-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.float-none { + float: none !important; +} + +@media (min-width: 576px) { + .float-sm-left { + float: left !important; + } + .float-sm-right { + float: right !important; + } + .float-sm-none { + float: none !important; + } +} + +@media (min-width: 768px) { + .float-md-left { + float: left !important; + } + .float-md-right { + float: right !important; + } + .float-md-none { + float: none !important; } - .aside-menu-fixed .aside-menu .tab-content { - height: calc(100vh - 2.375rem - 55px); +} + +@media (min-width: 992px) { + .float-lg-left { + float: left !important; } - .aside-menu-fixed .app-header + .app-body .aside-menu { - height: calc(100vh - 55px); + .float-lg-right { + float: right !important; } - .aside-menu-off-canvas .aside-menu { - position: fixed; - z-index: 1019; - height: 100%; + .float-lg-none { + float: none !important; } - .aside-menu-off-canvas .app-header + .app-body .aside-menu { - height: calc(100vh - 55px); +} + +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; } - html:not([dir="rtl"]) .aside-menu-fixed .aside-menu, - html:not([dir="rtl"]) .aside-menu-off-canvas .aside-menu { - right: 0; + .float-xl-right { + float: right !important; } - html[dir="rtl"] .aside-menu-fixed .aside-menu, - html[dir="rtl"] .aside-menu-off-canvas .aside-menu { - left: 0; + .float-xl-none { + float: none !important; } } -.breadcrumb-fixed .main { - padding-top: 3.875rem; +.overflow-auto { + overflow: auto !important; } -.breadcrumb-fixed .breadcrumb { - position: fixed; - top: 55px; - right: 0; - left: 0; - z-index: 1017; +.overflow-hidden { + overflow: hidden !important; } -html:not([dir="rtl"]) .sidebar-show .sidebar, -html:not([dir="rtl"]) .sidebar-show .sidebar { - margin-left: 0; +.position-static { + position: static !important; } -html:not([dir="rtl"]) .aside-menu-show .aside-menu, -html:not([dir="rtl"]) .aside-menu-show .aside-menu { - margin-right: 0; +.position-relative { + position: relative !important; } -html[dir="rtl"] .sidebar-show .sidebar, -html[dir="rtl"] .sidebar-show .sidebar { - margin-right: 0; +.position-absolute { + position: absolute !important; } -html[dir="rtl"] .aside-menu-show .aside-menu, -html[dir="rtl"] .aside-menu-show .aside-menu { - margin-left: 0; +.position-fixed { + position: fixed !important; } -@-webkit-keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } +.position-sticky { + position: -webkit-sticky !important; + position: sticky !important; } -@keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } +.fixed-top { + top: 0; } -@media (max-width: 575.98px) { - .sidebar-show .main, - .aside-menu-show .main { - position: relative; - } - .sidebar-show .main::before, - .aside-menu-show .main::before { - position: absolute; +.fixed-top,.fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} + +.fixed-bottom { + bottom: 0; +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sticky-top { + position: -webkit-sticky; + position: sticky; top: 0; - left: 0; - z-index: 1018; - width: 100%; - height: 100%; - content: ""; - background: rgba(0, 0, 0, 0.7); - -webkit-animation: opacity 0.25s; - animation: opacity 0.25s; + z-index: 1020; } } -@media (min-width: 576px) { - html:not([dir="rtl"]) .sidebar-sm-show .sidebar, - html:not([dir="rtl"]) .sidebar-show .sidebar { - margin-left: 0; - } - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { - margin-left: 200px; - } - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-left: 150px; - } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } -@media (min-width: 576px) and (max-width: 991.98px) { - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 200px; - } +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; } -@media (min-width: 576px) and (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; - } +.shadow-sm { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 21, 0.075) !important; } -@media (min-width: 576px) { - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { - left: 200px; - } - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - left: 150px; - } - html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - left: 50px; - } - html:not([dir="rtl"]) .aside-menu-show .aside-menu, - html:not([dir="rtl"]) .aside-menu-sm-show .aside-menu { - margin-right: 0; - } - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, - html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .app-footer { - margin-right: 250px; - } - html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .aside-menu-sm-show.breadcrumb-fixed .breadcrumb { - right: 250px; - } - html[dir="rtl"] .sidebar-sm-show .sidebar, - html[dir="rtl"] .sidebar-show .sidebar { - margin-right: 0; - } - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { - margin-right: 200px; - } - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-right: 150px; - } +.shadow { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 21, 0.15) !important; } -@media (min-width: 576px) and (max-width: 991.98px) { - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 200px; - } +.shadow-lg { + box-shadow: 0 1rem 3rem rgba(0, 0, 21, 0.175) !important; } -@media (min-width: 576px) and (min-width: 992px) { - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; - } +.shadow-none { + box-shadow: none !important; } -@media (min-width: 576px) { - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { - right: 200px; - } - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - right: 150px; - } - html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - right: 50px; - } - html[dir="rtl"] .aside-menu-show .aside-menu, - html[dir="rtl"] .aside-menu-sm-show .aside-menu { - margin-left: 0; - } - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, - html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .app-footer { - margin-left: 250px; - } - html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .aside-menu-sm-show.breadcrumb-fixed .breadcrumb { - left: 250px; - } - @-webkit-keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - @keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } +.w-25 { + width: 25% !important; } -@media (min-width: 768px) { - html:not([dir="rtl"]) .sidebar-md-show .sidebar, - html:not([dir="rtl"]) .sidebar-show .sidebar { - margin-left: 0; - } - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { - margin-left: 200px; - } - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-left: 150px; - } +.w-50 { + width: 50% !important; } -@media (min-width: 768px) and (max-width: 991.98px) { - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 200px; - } +.w-75 { + width: 75% !important; } -@media (min-width: 768px) and (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; - } +.w-100 { + width: 100% !important; } -@media (min-width: 768px) { - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { - left: 200px; - } - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - left: 150px; - } - html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - left: 50px; - } - html:not([dir="rtl"]) .aside-menu-show .aside-menu, - html:not([dir="rtl"]) .aside-menu-md-show .aside-menu { - margin-right: 0; - } - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, - html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .app-footer { - margin-right: 250px; - } - html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .aside-menu-md-show.breadcrumb-fixed .breadcrumb { - right: 250px; - } - html[dir="rtl"] .sidebar-md-show .sidebar, - html[dir="rtl"] .sidebar-show .sidebar { - margin-right: 0; - } - html[dir="rtl"] .sidebar-md-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { - margin-right: 200px; - } - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-right: 150px; - } +.w-auto { + width: auto !important; } -@media (min-width: 768px) and (max-width: 991.98px) { - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 200px; - } +.h-25 { + height: 25% !important; } -@media (min-width: 768px) and (min-width: 992px) { - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; - } +.h-50 { + height: 50% !important; } -@media (min-width: 768px) { - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { - right: 200px; - } - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - right: 150px; - } - html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - right: 50px; - } - html[dir="rtl"] .aside-menu-show .aside-menu, - html[dir="rtl"] .aside-menu-md-show .aside-menu { - margin-left: 0; - } - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, - html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .app-footer { - margin-left: 250px; - } - html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .aside-menu-md-show.breadcrumb-fixed .breadcrumb { - left: 250px; - } - @-webkit-keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - @keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } +.h-75 { + height: 75% !important; } -@media (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-lg-show .sidebar, - html:not([dir="rtl"]) .sidebar-show .sidebar { - margin-left: 0; - } - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { - margin-left: 200px; - } - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-left: 150px; - } +.h-100 { + height: 100% !important; } -@media (min-width: 992px) and (max-width: 991.98px) { - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 200px; - } +.h-auto { + height: auto !important; } -@media (min-width: 992px) and (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; - } +.mw-100 { + max-width: 100% !important; } -@media (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { - left: 200px; - } - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - left: 150px; - } - html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - left: 50px; - } - html:not([dir="rtl"]) .aside-menu-show .aside-menu, - html:not([dir="rtl"]) .aside-menu-lg-show .aside-menu { - margin-right: 0; - } - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, - html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .app-footer { - margin-right: 250px; - } - html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .aside-menu-lg-show.breadcrumb-fixed .breadcrumb { - right: 250px; - } - html[dir="rtl"] .sidebar-lg-show .sidebar, - html[dir="rtl"] .sidebar-show .sidebar { - margin-right: 0; - } - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { - margin-right: 200px; - } - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-right: 150px; - } +.mh-100 { + max-height: 100% !important; } -@media (min-width: 992px) and (max-width: 991.98px) { - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 200px; - } +.min-vw-100 { + min-width: 100vw !important; } -@media (min-width: 992px) and (min-width: 992px) { - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; - } +.min-vh-100 { + min-height: 100vh !important; } -@media (min-width: 992px) { - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { - right: 200px; - } - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - right: 150px; - } - html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - right: 50px; - } - html[dir="rtl"] .aside-menu-show .aside-menu, - html[dir="rtl"] .aside-menu-lg-show .aside-menu { - margin-left: 0; - } - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, - html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .app-footer { - margin-left: 250px; - } - html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .aside-menu-lg-show.breadcrumb-fixed .breadcrumb { - left: 250px; - } - @-webkit-keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - @keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } +.vw-100 { + width: 100vw !important; } -@media (min-width: 1200px) { - html:not([dir="rtl"]) .sidebar-xl-show .sidebar, - html:not([dir="rtl"]) .sidebar-show .sidebar { - margin-left: 0; - } - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer { - margin-left: 200px; - } - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-left: 150px; - } +.vh-100 { + height: 100vh !important; } -@media (min-width: 1200px) and (max-width: 991.98px) { - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 200px; - } +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 21, 0); } -@media (min-width: 1200px) and (min-width: 992px) { - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-left: 50px; - } +.m-0 { + margin: 0 !important; +} + +.mt-0, +.my-0 { + margin-top: 0 !important; +} + +.mr-0, +.mx-0 { + margin-right: 0 !important; +} + +.mb-0, +.my-0 { + margin-bottom: 0 !important; } -@media (min-width: 1200px) { - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb { - left: 200px; - } - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - left: 150px; - } - html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - left: 50px; - } - html:not([dir="rtl"]) .aside-menu-show .aside-menu, - html:not([dir="rtl"]) .aside-menu-xl-show .aside-menu { - margin-right: 0; - } - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer, - html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .main, - html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .app-footer { - margin-right: 250px; - } - html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb, - html:not([dir="rtl"]) .aside-menu-xl-show.breadcrumb-fixed .breadcrumb { - right: 250px; - } - html[dir="rtl"] .sidebar-xl-show .sidebar, - html[dir="rtl"] .sidebar-show .sidebar { - margin-right: 0; - } - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer { - margin-right: 200px; - } - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer { - margin-right: 150px; - } +.ml-0, +.mx-0,html:not([dir="rtl"]) .mfs-0 { + margin-left: 0 !important; } -@media (min-width: 1200px) and (max-width: 991.98px) { - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 200px; - } +*[dir="rtl"] .mfs-0,html:not([dir="rtl"]) .mfe-0 { + margin-right: 0 !important; } -@media (min-width: 1200px) and (min-width: 992px) { - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main, - html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer { - margin-right: 50px; - } +*[dir="rtl"] .mfe-0 { + margin-left: 0 !important; } -@media (min-width: 1200px) { - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb { - right: 200px; - } - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb { - right: 150px; - } - html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb, - html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb { - right: 50px; - } - html[dir="rtl"] .aside-menu-show .aside-menu, - html[dir="rtl"] .aside-menu-xl-show .aside-menu { - margin-left: 0; - } - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer, - html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .main, - html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .app-footer { - margin-left: 250px; - } - html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb, - html[dir="rtl"] .aside-menu-xl-show.breadcrumb-fixed .breadcrumb { - left: 250px; - } - @-webkit-keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - @keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } +.m-1 { + margin: 0.25rem !important; } -.footer-fixed .app-footer { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1020; - height: 50px; +.mt-1, +.my-1 { + margin-top: 0.25rem !important; } -.footer-fixed .app-body { - margin-bottom: 50px; +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; } -.app-header, -.app-footer, -.sidebar, -.main, -.aside-menu { - transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s; - transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s, -ms-flex 0.25s; +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; } -.sidebar-nav { - transition: width 0.25s; +.ml-1, +.mx-1,html:not([dir="rtl"]) .mfs-1 { + margin-left: 0.25rem !important; } -.breadcrumb { - transition: left 0.25s, right 0.25s, width 0.25s; +*[dir="rtl"] .mfs-1,html:not([dir="rtl"]) .mfe-1 { + margin-right: 0.25rem !important; } -@media (max-width: 991.98px) { - .app-header { - position: fixed; - z-index: 1020; - width: 100%; - text-align: center; - background-color: #fff; - } - .app-header .navbar-toggler { - color: #fff; - } - .app-header .navbar-brand { - position: absolute; - top: 0; - left: 50%; - margin-left: -77.5px; - } - .app-body { - margin-top: 55px; - } - .sidebar { - position: fixed; - z-index: 1019; - width: 200px; - height: calc(100vh - 55px); - } - .sidebar-minimizer { - display: none; - } - .aside-menu { - position: fixed; - height: 100%; - } +*[dir="rtl"] .mfe-1 { + margin-left: 0.25rem !important; } -hr.transparent { - border-top: 1px solid transparent; +.m-2 { + margin: 0.5rem !important; } -.bg-primary, -.bg-success, -.bg-info, -.bg-warning, -.bg-danger, -.bg-dark { - color: #fff; +.mt-2, +.my-2 { + margin-top: 0.5rem !important; } -.bg-facebook { - background-color: #3b5998 !important; +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; } -a.bg-facebook:hover, a.bg-facebook:focus, -button.bg-facebook:hover, -button.bg-facebook:focus { - background-color: #2d4373 !important; +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; } -.bg-twitter { - background-color: #00aced !important; +.ml-2, +.mx-2,html:not([dir="rtl"]) .mfs-2 { + margin-left: 0.5rem !important; } -a.bg-twitter:hover, a.bg-twitter:focus, -button.bg-twitter:hover, -button.bg-twitter:focus { - background-color: #0087ba !important; +*[dir="rtl"] .mfs-2,html:not([dir="rtl"]) .mfe-2 { + margin-right: 0.5rem !important; } -.bg-linkedin { - background-color: #4875b4 !important; +*[dir="rtl"] .mfe-2 { + margin-left: 0.5rem !important; } -a.bg-linkedin:hover, a.bg-linkedin:focus, -button.bg-linkedin:hover, -button.bg-linkedin:focus { - background-color: #395d90 !important; +.m-3 { + margin: 1rem !important; } -.bg-google-plus { - background-color: #d34836 !important; +.mt-3, +.my-3 { + margin-top: 1rem !important; } -a.bg-google-plus:hover, a.bg-google-plus:focus, -button.bg-google-plus:hover, -button.bg-google-plus:focus { - background-color: #b03626 !important; +.mr-3, +.mx-3 { + margin-right: 1rem !important; } -.bg-flickr { - background-color: #ff0084 !important; +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } -a.bg-flickr:hover, a.bg-flickr:focus, -button.bg-flickr:hover, -button.bg-flickr:focus { - background-color: #cc006a !important; +.ml-3, +.mx-3,html:not([dir="rtl"]) .mfs-3 { + margin-left: 1rem !important; } -.bg-tumblr { - background-color: #32506d !important; +*[dir="rtl"] .mfs-3,html:not([dir="rtl"]) .mfe-3 { + margin-right: 1rem !important; } -a.bg-tumblr:hover, a.bg-tumblr:focus, -button.bg-tumblr:hover, -button.bg-tumblr:focus { - background-color: #22364a !important; +*[dir="rtl"] .mfe-3 { + margin-left: 1rem !important; } -.bg-xing { - background-color: #026466 !important; +.m-4 { + margin: 1.5rem !important; } -a.bg-xing:hover, a.bg-xing:focus, -button.bg-xing:hover, -button.bg-xing:focus { - background-color: #013334 !important; +.mt-4, +.my-4 { + margin-top: 1.5rem !important; } -.bg-github { - background-color: #4183c4 !important; +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; } -a.bg-github:hover, a.bg-github:focus, -button.bg-github:hover, -button.bg-github:focus { - background-color: #3269a0 !important; +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; } -.bg-html5 { - background-color: #e34f26 !important; +.ml-4, +.mx-4,html:not([dir="rtl"]) .mfs-4 { + margin-left: 1.5rem !important; } -a.bg-html5:hover, a.bg-html5:focus, -button.bg-html5:hover, -button.bg-html5:focus { - background-color: #be3c18 !important; +*[dir="rtl"] .mfs-4,html:not([dir="rtl"]) .mfe-4 { + margin-right: 1.5rem !important; } -.bg-openid { - background-color: #f78c40 !important; +*[dir="rtl"] .mfe-4 { + margin-left: 1.5rem !important; } -a.bg-openid:hover, a.bg-openid:focus, -button.bg-openid:hover, -button.bg-openid:focus { - background-color: #f56f0f !important; +.m-5 { + margin: 3rem !important; } -.bg-stack-overflow { - background-color: #fe7a15 !important; +.mt-5, +.my-5 { + margin-top: 3rem !important; } -a.bg-stack-overflow:hover, a.bg-stack-overflow:focus, -button.bg-stack-overflow:hover, -button.bg-stack-overflow:focus { - background-color: #df6101 !important; +.mr-5, +.mx-5 { + margin-right: 3rem !important; } -.bg-youtube { - background-color: #b00 !important; +.mb-5, +.my-5 { + margin-bottom: 3rem !important; } -a.bg-youtube:hover, a.bg-youtube:focus, -button.bg-youtube:hover, -button.bg-youtube:focus { - background-color: #880000 !important; +.ml-5, +.mx-5,html:not([dir="rtl"]) .mfs-5 { + margin-left: 3rem !important; } -.bg-css3 { - background-color: #0170ba !important; +*[dir="rtl"] .mfs-5,html:not([dir="rtl"]) .mfe-5 { + margin-right: 3rem !important; } -a.bg-css3:hover, a.bg-css3:focus, -button.bg-css3:hover, -button.bg-css3:focus { - background-color: #015187 !important; +*[dir="rtl"] .mfe-5 { + margin-left: 3rem !important; } -.bg-dribbble { - background-color: #ea4c89 !important; +.p-0 { + padding: 0 !important; } -a.bg-dribbble:hover, a.bg-dribbble:focus, -button.bg-dribbble:hover, -button.bg-dribbble:focus { - background-color: #e51e6b !important; +.pt-0, +.py-0 { + padding-top: 0 !important; } -.bg-instagram { - background-color: #517fa4 !important; +.pr-0, +.px-0 { + padding-right: 0 !important; } -a.bg-instagram:hover, a.bg-instagram:focus, -button.bg-instagram:hover, -button.bg-instagram:focus { - background-color: #406582 !important; +.pb-0, +.py-0 { + padding-bottom: 0 !important; } -.bg-pinterest { - background-color: #cb2027 !important; +.pl-0, +.px-0,html:not([dir="rtl"]) .pfs-0 { + padding-left: 0 !important; } -a.bg-pinterest:hover, a.bg-pinterest:focus, -button.bg-pinterest:hover, -button.bg-pinterest:focus { - background-color: #9f191f !important; +*[dir="rtl"] .pfs-0,html:not([dir="rtl"]) .pfe-0 { + padding-right: 0 !important; } -.bg-vk { - background-color: #45668e !important; +*[dir="rtl"] .pfe-0 { + padding-left: 0 !important; } -a.bg-vk:hover, a.bg-vk:focus, -button.bg-vk:hover, -button.bg-vk:focus { - background-color: #344d6c !important; +.p-1 { + padding: 0.25rem !important; } -.bg-yahoo { - background-color: #400191 !important; +.pt-1, +.py-1 { + padding-top: 0.25rem !important; } -a.bg-yahoo:hover, a.bg-yahoo:focus, -button.bg-yahoo:hover, -button.bg-yahoo:focus { - background-color: #2a015e !important; +.pr-1, +.px-1 { + padding-right: 0.25rem !important; } -.bg-behance { - background-color: #1769ff !important; +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; } -a.bg-behance:hover, a.bg-behance:focus, -button.bg-behance:hover, -button.bg-behance:focus { - background-color: #0050e3 !important; +.pl-1, +.px-1,html:not([dir="rtl"]) .pfs-1 { + padding-left: 0.25rem !important; } -.bg-dropbox { - background-color: #007ee5 !important; +*[dir="rtl"] .pfs-1,html:not([dir="rtl"]) .pfe-1 { + padding-right: 0.25rem !important; } -a.bg-dropbox:hover, a.bg-dropbox:focus, -button.bg-dropbox:hover, -button.bg-dropbox:focus { - background-color: #0062b2 !important; +*[dir="rtl"] .pfe-1 { + padding-left: 0.25rem !important; } -.bg-reddit { - background-color: #ff4500 !important; +.p-2 { + padding: 0.5rem !important; } -a.bg-reddit:hover, a.bg-reddit:focus, -button.bg-reddit:hover, -button.bg-reddit:focus { - background-color: #cc3700 !important; +.pt-2, +.py-2 { + padding-top: 0.5rem !important; } -.bg-spotify { - background-color: #7ab800 !important; +.pr-2, +.px-2 { + padding-right: 0.5rem !important; } -a.bg-spotify:hover, a.bg-spotify:focus, -button.bg-spotify:hover, -button.bg-spotify:focus { - background-color: #588500 !important; +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; } -.bg-vine { - background-color: #00bf8f !important; +.pl-2, +.px-2,html:not([dir="rtl"]) .pfs-2 { + padding-left: 0.5rem !important; } -a.bg-vine:hover, a.bg-vine:focus, -button.bg-vine:hover, -button.bg-vine:focus { - background-color: #008c69 !important; +*[dir="rtl"] .pfs-2,html:not([dir="rtl"]) .pfe-2 { + padding-right: 0.5rem !important; } -.bg-foursquare { - background-color: #1073af !important; +*[dir="rtl"] .pfe-2 { + padding-left: 0.5rem !important; } -a.bg-foursquare:hover, a.bg-foursquare:focus, -button.bg-foursquare:hover, -button.bg-foursquare:focus { - background-color: #0c5480 !important; +.p-3 { + padding: 1rem !important; } -.bg-vimeo { - background-color: #aad450 !important; +.pt-3, +.py-3 { + padding-top: 1rem !important; } -a.bg-vimeo:hover, a.bg-vimeo:focus, -button.bg-vimeo:hover, -button.bg-vimeo:focus { - background-color: #93c130 !important; +.pr-3, +.px-3 { + padding-right: 1rem !important; } -.bg-blue { - background-color: #20a8d8 !important; +.pb-3, +.py-3 { + padding-bottom: 1rem !important; } -a.bg-blue:hover, a.bg-blue:focus, -button.bg-blue:hover, -button.bg-blue:focus { - background-color: #1985ac !important; +.pl-3, +.px-3,html:not([dir="rtl"]) .pfs-3 { + padding-left: 1rem !important; } -.bg-indigo { - background-color: #6610f2 !important; +*[dir="rtl"] .pfs-3,html:not([dir="rtl"]) .pfe-3 { + padding-right: 1rem !important; } -a.bg-indigo:hover, a.bg-indigo:focus, -button.bg-indigo:hover, -button.bg-indigo:focus { - background-color: #510bc4 !important; +*[dir="rtl"] .pfe-3 { + padding-left: 1rem !important; } -.bg-purple { - background-color: #6f42c1 !important; +.p-4 { + padding: 1.5rem !important; } -a.bg-purple:hover, a.bg-purple:focus, -button.bg-purple:hover, -button.bg-purple:focus { - background-color: #59339d !important; +.pt-4, +.py-4 { + padding-top: 1.5rem !important; } -.bg-pink { - background-color: #e83e8c !important; +.pr-4, +.px-4 { + padding-right: 1.5rem !important; } -a.bg-pink:hover, a.bg-pink:focus, -button.bg-pink:hover, -button.bg-pink:focus { - background-color: #d91a72 !important; +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; } -.bg-red { - background-color: #f86c6b !important; +.pl-4, +.px-4,html:not([dir="rtl"]) .pfs-4 { + padding-left: 1.5rem !important; } -a.bg-red:hover, a.bg-red:focus, -button.bg-red:hover, -button.bg-red:focus { - background-color: #f63c3a !important; +*[dir="rtl"] .pfs-4,html:not([dir="rtl"]) .pfe-4 { + padding-right: 1.5rem !important; } -.bg-orange { - background-color: #f8cb00 !important; +*[dir="rtl"] .pfe-4 { + padding-left: 1.5rem !important; } -a.bg-orange:hover, a.bg-orange:focus, -button.bg-orange:hover, -button.bg-orange:focus { - background-color: #c5a100 !important; +.p-5 { + padding: 3rem !important; } -.bg-yellow { - background-color: #ffc107 !important; +.pt-5, +.py-5 { + padding-top: 3rem !important; } -a.bg-yellow:hover, a.bg-yellow:focus, -button.bg-yellow:hover, -button.bg-yellow:focus { - background-color: #d39e00 !important; +.pr-5, +.px-5 { + padding-right: 3rem !important; } -.bg-green { - background-color: #4dbd74 !important; +.pb-5, +.py-5 { + padding-bottom: 3rem !important; } -a.bg-green:hover, a.bg-green:focus, -button.bg-green:hover, -button.bg-green:focus { - background-color: #3a9d5d !important; +.pl-5, +.px-5,html:not([dir="rtl"]) .pfs-5 { + padding-left: 3rem !important; } -.bg-teal { - background-color: #20c997 !important; +*[dir="rtl"] .pfs-5,html:not([dir="rtl"]) .pfe-5 { + padding-right: 3rem !important; } -a.bg-teal:hover, a.bg-teal:focus, -button.bg-teal:hover, -button.bg-teal:focus { - background-color: #199d76 !important; +*[dir="rtl"] .pfe-5 { + padding-left: 3rem !important; } -.bg-cyan { - background-color: #17a2b8 !important; +.m-n1 { + margin: -0.25rem !important; } -a.bg-cyan:hover, a.bg-cyan:focus, -button.bg-cyan:hover, -button.bg-cyan:focus { - background-color: #117a8b !important; +.mt-n1, +.my-n1 { + margin-top: -0.25rem !important; } -.bg-white { - background-color: #fff !important; +.mr-n1, +.mx-n1 { + margin-right: -0.25rem !important; } -a.bg-white:hover, a.bg-white:focus, -button.bg-white:hover, -button.bg-white:focus { - background-color: #e6e6e6 !important; +.mb-n1, +.my-n1 { + margin-bottom: -0.25rem !important; } -.bg-gray { - background-color: #73818f !important; +.ml-n1, +.mx-n1,html:not([dir="rtl"]) .mfs-n1 { + margin-left: -0.25rem !important; } -a.bg-gray:hover, a.bg-gray:focus, -button.bg-gray:hover, -button.bg-gray:focus { - background-color: #5c6873 !important; +*[dir="rtl"] .mfs-n1,html:not([dir="rtl"]) .mfe-n1 { + margin-right: -0.25rem !important; } -.bg-gray-dark { - background-color: #2f353a !important; +*[dir="rtl"] .mfe-n1 { + margin-left: -0.25rem !important; } -a.bg-gray-dark:hover, a.bg-gray-dark:focus, -button.bg-gray-dark:hover, -button.bg-gray-dark:focus { - background-color: #181b1e !important; +.m-n2 { + margin: -0.5rem !important; } -.bg-light-blue { - background-color: #63c2de !important; +.mt-n2, +.my-n2 { + margin-top: -0.5rem !important; } -a.bg-light-blue:hover, a.bg-light-blue:focus, -button.bg-light-blue:hover, -button.bg-light-blue:focus { - background-color: #39b2d5 !important; +.mr-n2, +.mx-n2 { + margin-right: -0.5rem !important; } -.bg-gray-100 { - background-color: #f0f3f5 !important; +.mb-n2, +.my-n2 { + margin-bottom: -0.5rem !important; } -a.bg-gray-100:hover, a.bg-gray-100:focus, -button.bg-gray-100:hover, -button.bg-gray-100:focus { - background-color: #d1dbe1 !important; +.ml-n2, +.mx-n2,html:not([dir="rtl"]) .mfs-n2 { + margin-left: -0.5rem !important; } -.bg-gray-200 { - background-color: #e4e7ea !important; +*[dir="rtl"] .mfs-n2,html:not([dir="rtl"]) .mfe-n2 { + margin-right: -0.5rem !important; } -a.bg-gray-200:hover, a.bg-gray-200:focus, -button.bg-gray-200:hover, -button.bg-gray-200:focus { - background-color: #c7ced4 !important; +*[dir="rtl"] .mfe-n2 { + margin-left: -0.5rem !important; } -.bg-gray-300 { - background-color: #c8ced3 !important; +.m-n3 { + margin: -1rem !important; } -a.bg-gray-300:hover, a.bg-gray-300:focus, -button.bg-gray-300:hover, -button.bg-gray-300:focus { - background-color: #acb5bc !important; +.mt-n3, +.my-n3 { + margin-top: -1rem !important; } -.bg-gray-400 { - background-color: #acb4bc !important; +.mr-n3, +.mx-n3 { + margin-right: -1rem !important; } -a.bg-gray-400:hover, a.bg-gray-400:focus, -button.bg-gray-400:hover, -button.bg-gray-400:focus { - background-color: #909ba5 !important; +.mb-n3, +.my-n3 { + margin-bottom: -1rem !important; } -.bg-gray-500 { - background-color: #8f9ba6 !important; +.ml-n3, +.mx-n3,html:not([dir="rtl"]) .mfs-n3 { + margin-left: -1rem !important; } -a.bg-gray-500:hover, a.bg-gray-500:focus, -button.bg-gray-500:hover, -button.bg-gray-500:focus { - background-color: #73828f !important; +*[dir="rtl"] .mfs-n3,html:not([dir="rtl"]) .mfe-n3 { + margin-right: -1rem !important; } -.bg-gray-600 { - background-color: #73818f !important; +*[dir="rtl"] .mfe-n3 { + margin-left: -1rem !important; } -a.bg-gray-600:hover, a.bg-gray-600:focus, -button.bg-gray-600:hover, -button.bg-gray-600:focus { - background-color: #5c6873 !important; +.m-n4 { + margin: -1.5rem !important; } -.bg-gray-700 { - background-color: #5c6873 !important; +.mt-n4, +.my-n4 { + margin-top: -1.5rem !important; } -a.bg-gray-700:hover, a.bg-gray-700:focus, -button.bg-gray-700:hover, -button.bg-gray-700:focus { - background-color: #454e57 !important; +.mr-n4, +.mx-n4 { + margin-right: -1.5rem !important; } -.bg-gray-800 { - background-color: #2f353a !important; +.mb-n4, +.my-n4 { + margin-bottom: -1.5rem !important; } -a.bg-gray-800:hover, a.bg-gray-800:focus, -button.bg-gray-800:hover, -button.bg-gray-800:focus { - background-color: #181b1e !important; +.ml-n4, +.mx-n4,html:not([dir="rtl"]) .mfs-n4 { + margin-left: -1.5rem !important; } -.bg-gray-900 { - background-color: #23282c !important; +*[dir="rtl"] .mfs-n4,html:not([dir="rtl"]) .mfe-n4 { + margin-right: -1.5rem !important; } -a.bg-gray-900:hover, a.bg-gray-900:focus, -button.bg-gray-900:hover, -button.bg-gray-900:focus { - background-color: #0c0e10 !important; +*[dir="rtl"] .mfe-n4 { + margin-left: -1.5rem !important; } -.bg-box { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 2.5rem; - height: 2.5rem; +.m-n5 { + margin: -3rem !important; } -.b-a-0 { - border: 0 !important; +.mt-n5, +.my-n5 { + margin-top: -3rem !important; } -.b-t-0 { - border-top: 0 !important; +.mr-n5, +.mx-n5 { + margin-right: -3rem !important; } -.b-r-0 { - border-right: 0 !important; +.mb-n5, +.my-n5 { + margin-bottom: -3rem !important; } -.b-b-0 { - border-bottom: 0 !important; +.ml-n5, +.mx-n5,html:not([dir="rtl"]) .mfs-n5 { + margin-left: -3rem !important; } -.b-l-0 { - border-left: 0 !important; +*[dir="rtl"] .mfs-n5,html:not([dir="rtl"]) .mfe-n5 { + margin-right: -3rem !important; } -.b-a-1 { - border: 1px solid #c8ced3; +*[dir="rtl"] .mfe-n5 { + margin-left: -3rem !important; } -.b-t-1 { - border-top: 1px solid #c8ced3; +.m-auto { + margin: auto !important; } -.b-r-1 { - border-right: 1px solid #c8ced3; +.mt-auto, +.my-auto { + margin-top: auto !important; } -.b-b-1 { - border-bottom: 1px solid #c8ced3; +.mr-auto, +.mx-auto { + margin-right: auto !important; } -.b-l-1 { - border-left: 1px solid #c8ced3; +.mb-auto, +.my-auto { + margin-bottom: auto !important; } -.b-a-2 { - border: 2px solid #c8ced3; +.ml-auto, +.mx-auto,html:not([dir="rtl"]) .mfs-auto { + margin-left: auto !important; } -.b-t-2 { - border-top: 2px solid #c8ced3; +*[dir="rtl"] .mfs-auto,html:not([dir="rtl"]) .mfe-auto { + margin-right: auto !important; } -.b-r-2 { - border-right: 2px solid #c8ced3; +*[dir="rtl"] .mfe-auto { + margin-left: auto !important; } -.b-b-2 { - border-bottom: 2px solid #c8ced3; +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; + } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; + } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; + } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; + } + .ml-sm-0, + .mx-sm-0,html:not([dir="rtl"]) .mfs-sm-0 { + margin-left: 0 !important; + } + *[dir="rtl"] .mfs-sm-0,html:not([dir="rtl"]) .mfe-sm-0 { + margin-right: 0 !important; + } + *[dir="rtl"] .mfe-sm-0 { + margin-left: 0 !important; + } + .m-sm-1 { + margin: 0.25rem !important; + } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; + } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; + } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; + } + .ml-sm-1, + .mx-sm-1,html:not([dir="rtl"]) .mfs-sm-1 { + margin-left: 0.25rem !important; + } + *[dir="rtl"] .mfs-sm-1,html:not([dir="rtl"]) .mfe-sm-1 { + margin-right: 0.25rem !important; + } + *[dir="rtl"] .mfe-sm-1 { + margin-left: 0.25rem !important; + } + .m-sm-2 { + margin: 0.5rem !important; + } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; + } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; + } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; + } + .ml-sm-2, + .mx-sm-2,html:not([dir="rtl"]) .mfs-sm-2 { + margin-left: 0.5rem !important; + } + *[dir="rtl"] .mfs-sm-2,html:not([dir="rtl"]) .mfe-sm-2 { + margin-right: 0.5rem !important; + } + *[dir="rtl"] .mfe-sm-2 { + margin-left: 0.5rem !important; + } + .m-sm-3 { + margin: 1rem !important; + } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; + } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; + } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; + } + .ml-sm-3, + .mx-sm-3,html:not([dir="rtl"]) .mfs-sm-3 { + margin-left: 1rem !important; + } + *[dir="rtl"] .mfs-sm-3,html:not([dir="rtl"]) .mfe-sm-3 { + margin-right: 1rem !important; + } + *[dir="rtl"] .mfe-sm-3 { + margin-left: 1rem !important; + } + .m-sm-4 { + margin: 1.5rem !important; + } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; + } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; + } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; + } + .ml-sm-4, + .mx-sm-4,html:not([dir="rtl"]) .mfs-sm-4 { + margin-left: 1.5rem !important; + } + *[dir="rtl"] .mfs-sm-4,html:not([dir="rtl"]) .mfe-sm-4 { + margin-right: 1.5rem !important; + } + *[dir="rtl"] .mfe-sm-4 { + margin-left: 1.5rem !important; + } + .m-sm-5 { + margin: 3rem !important; + } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; + } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; + } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; + } + .ml-sm-5, + .mx-sm-5,html:not([dir="rtl"]) .mfs-sm-5 { + margin-left: 3rem !important; + } + *[dir="rtl"] .mfs-sm-5,html:not([dir="rtl"]) .mfe-sm-5 { + margin-right: 3rem !important; + } + *[dir="rtl"] .mfe-sm-5 { + margin-left: 3rem !important; + } + .p-sm-0 { + padding: 0 !important; + } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; + } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; + } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; + } + .pl-sm-0, + .px-sm-0,html:not([dir="rtl"]) .pfs-sm-0 { + padding-left: 0 !important; + } + *[dir="rtl"] .pfs-sm-0,html:not([dir="rtl"]) .pfe-sm-0 { + padding-right: 0 !important; + } + *[dir="rtl"] .pfe-sm-0 { + padding-left: 0 !important; + } + .p-sm-1 { + padding: 0.25rem !important; + } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; + } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; + } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; + } + .pl-sm-1, + .px-sm-1,html:not([dir="rtl"]) .pfs-sm-1 { + padding-left: 0.25rem !important; + } + *[dir="rtl"] .pfs-sm-1,html:not([dir="rtl"]) .pfe-sm-1 { + padding-right: 0.25rem !important; + } + *[dir="rtl"] .pfe-sm-1 { + padding-left: 0.25rem !important; + } + .p-sm-2 { + padding: 0.5rem !important; + } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; + } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; + } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; + } + .pl-sm-2, + .px-sm-2,html:not([dir="rtl"]) .pfs-sm-2 { + padding-left: 0.5rem !important; + } + *[dir="rtl"] .pfs-sm-2,html:not([dir="rtl"]) .pfe-sm-2 { + padding-right: 0.5rem !important; + } + *[dir="rtl"] .pfe-sm-2 { + padding-left: 0.5rem !important; + } + .p-sm-3 { + padding: 1rem !important; + } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; + } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; + } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; + } + .pl-sm-3, + .px-sm-3,html:not([dir="rtl"]) .pfs-sm-3 { + padding-left: 1rem !important; + } + *[dir="rtl"] .pfs-sm-3,html:not([dir="rtl"]) .pfe-sm-3 { + padding-right: 1rem !important; + } + *[dir="rtl"] .pfe-sm-3 { + padding-left: 1rem !important; + } + .p-sm-4 { + padding: 1.5rem !important; + } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; + } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; + } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; + } + .pl-sm-4, + .px-sm-4,html:not([dir="rtl"]) .pfs-sm-4 { + padding-left: 1.5rem !important; + } + *[dir="rtl"] .pfs-sm-4,html:not([dir="rtl"]) .pfe-sm-4 { + padding-right: 1.5rem !important; + } + *[dir="rtl"] .pfe-sm-4 { + padding-left: 1.5rem !important; + } + .p-sm-5 { + padding: 3rem !important; + } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; + } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; + } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; + } + .pl-sm-5, + .px-sm-5,html:not([dir="rtl"]) .pfs-sm-5 { + padding-left: 3rem !important; + } + *[dir="rtl"] .pfs-sm-5,html:not([dir="rtl"]) .pfe-sm-5 { + padding-right: 3rem !important; + } + *[dir="rtl"] .pfe-sm-5 { + padding-left: 3rem !important; + } + .m-sm-n1 { + margin: -0.25rem !important; + } + .mt-sm-n1, + .my-sm-n1 { + margin-top: -0.25rem !important; + } + .mr-sm-n1, + .mx-sm-n1 { + margin-right: -0.25rem !important; + } + .mb-sm-n1, + .my-sm-n1 { + margin-bottom: -0.25rem !important; + } + .ml-sm-n1, + .mx-sm-n1,html:not([dir="rtl"]) .mfs-sm-n1 { + margin-left: -0.25rem !important; + } + *[dir="rtl"] .mfs-sm-n1,html:not([dir="rtl"]) .mfe-sm-n1 { + margin-right: -0.25rem !important; + } + *[dir="rtl"] .mfe-sm-n1 { + margin-left: -0.25rem !important; + } + .m-sm-n2 { + margin: -0.5rem !important; + } + .mt-sm-n2, + .my-sm-n2 { + margin-top: -0.5rem !important; + } + .mr-sm-n2, + .mx-sm-n2 { + margin-right: -0.5rem !important; + } + .mb-sm-n2, + .my-sm-n2 { + margin-bottom: -0.5rem !important; + } + .ml-sm-n2, + .mx-sm-n2,html:not([dir="rtl"]) .mfs-sm-n2 { + margin-left: -0.5rem !important; + } + *[dir="rtl"] .mfs-sm-n2,html:not([dir="rtl"]) .mfe-sm-n2 { + margin-right: -0.5rem !important; + } + *[dir="rtl"] .mfe-sm-n2 { + margin-left: -0.5rem !important; + } + .m-sm-n3 { + margin: -1rem !important; + } + .mt-sm-n3, + .my-sm-n3 { + margin-top: -1rem !important; + } + .mr-sm-n3, + .mx-sm-n3 { + margin-right: -1rem !important; + } + .mb-sm-n3, + .my-sm-n3 { + margin-bottom: -1rem !important; + } + .ml-sm-n3, + .mx-sm-n3,html:not([dir="rtl"]) .mfs-sm-n3 { + margin-left: -1rem !important; + } + *[dir="rtl"] .mfs-sm-n3,html:not([dir="rtl"]) .mfe-sm-n3 { + margin-right: -1rem !important; + } + *[dir="rtl"] .mfe-sm-n3 { + margin-left: -1rem !important; + } + .m-sm-n4 { + margin: -1.5rem !important; + } + .mt-sm-n4, + .my-sm-n4 { + margin-top: -1.5rem !important; + } + .mr-sm-n4, + .mx-sm-n4 { + margin-right: -1.5rem !important; + } + .mb-sm-n4, + .my-sm-n4 { + margin-bottom: -1.5rem !important; + } + .ml-sm-n4, + .mx-sm-n4,html:not([dir="rtl"]) .mfs-sm-n4 { + margin-left: -1.5rem !important; + } + *[dir="rtl"] .mfs-sm-n4,html:not([dir="rtl"]) .mfe-sm-n4 { + margin-right: -1.5rem !important; + } + *[dir="rtl"] .mfe-sm-n4 { + margin-left: -1.5rem !important; + } + .m-sm-n5 { + margin: -3rem !important; + } + .mt-sm-n5, + .my-sm-n5 { + margin-top: -3rem !important; + } + .mr-sm-n5, + .mx-sm-n5 { + margin-right: -3rem !important; + } + .mb-sm-n5, + .my-sm-n5 { + margin-bottom: -3rem !important; + } + .ml-sm-n5, + .mx-sm-n5,html:not([dir="rtl"]) .mfs-sm-n5 { + margin-left: -3rem !important; + } + *[dir="rtl"] .mfs-sm-n5,html:not([dir="rtl"]) .mfe-sm-n5 { + margin-right: -3rem !important; + } + *[dir="rtl"] .mfe-sm-n5 { + margin-left: -3rem !important; + } + .m-sm-auto { + margin: auto !important; + } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; + } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; + } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; + } + .ml-sm-auto, + .mx-sm-auto,html:not([dir="rtl"]) .mfs-sm-auto { + margin-left: auto !important; + } + *[dir="rtl"] .mfs-sm-auto,html:not([dir="rtl"]) .mfe-sm-auto { + margin-right: auto !important; + } + *[dir="rtl"] .mfe-sm-auto { + margin-left: auto !important; + } } -.b-l-2 { - border-left: 2px solid #c8ced3; +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; + } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; + } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; + } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; + } + .ml-md-0, + .mx-md-0,html:not([dir="rtl"]) .mfs-md-0 { + margin-left: 0 !important; + } + *[dir="rtl"] .mfs-md-0,html:not([dir="rtl"]) .mfe-md-0 { + margin-right: 0 !important; + } + *[dir="rtl"] .mfe-md-0 { + margin-left: 0 !important; + } + .m-md-1 { + margin: 0.25rem !important; + } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; + } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; + } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; + } + .ml-md-1, + .mx-md-1,html:not([dir="rtl"]) .mfs-md-1 { + margin-left: 0.25rem !important; + } + *[dir="rtl"] .mfs-md-1,html:not([dir="rtl"]) .mfe-md-1 { + margin-right: 0.25rem !important; + } + *[dir="rtl"] .mfe-md-1 { + margin-left: 0.25rem !important; + } + .m-md-2 { + margin: 0.5rem !important; + } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; + } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; + } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; + } + .ml-md-2, + .mx-md-2,html:not([dir="rtl"]) .mfs-md-2 { + margin-left: 0.5rem !important; + } + *[dir="rtl"] .mfs-md-2,html:not([dir="rtl"]) .mfe-md-2 { + margin-right: 0.5rem !important; + } + *[dir="rtl"] .mfe-md-2 { + margin-left: 0.5rem !important; + } + .m-md-3 { + margin: 1rem !important; + } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; + } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; + } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; + } + .ml-md-3, + .mx-md-3,html:not([dir="rtl"]) .mfs-md-3 { + margin-left: 1rem !important; + } + *[dir="rtl"] .mfs-md-3,html:not([dir="rtl"]) .mfe-md-3 { + margin-right: 1rem !important; + } + *[dir="rtl"] .mfe-md-3 { + margin-left: 1rem !important; + } + .m-md-4 { + margin: 1.5rem !important; + } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; + } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; + } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; + } + .ml-md-4, + .mx-md-4,html:not([dir="rtl"]) .mfs-md-4 { + margin-left: 1.5rem !important; + } + *[dir="rtl"] .mfs-md-4,html:not([dir="rtl"]) .mfe-md-4 { + margin-right: 1.5rem !important; + } + *[dir="rtl"] .mfe-md-4 { + margin-left: 1.5rem !important; + } + .m-md-5 { + margin: 3rem !important; + } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; + } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; + } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; + } + .ml-md-5, + .mx-md-5,html:not([dir="rtl"]) .mfs-md-5 { + margin-left: 3rem !important; + } + *[dir="rtl"] .mfs-md-5,html:not([dir="rtl"]) .mfe-md-5 { + margin-right: 3rem !important; + } + *[dir="rtl"] .mfe-md-5 { + margin-left: 3rem !important; + } + .p-md-0 { + padding: 0 !important; + } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; + } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; + } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; + } + .pl-md-0, + .px-md-0,html:not([dir="rtl"]) .pfs-md-0 { + padding-left: 0 !important; + } + *[dir="rtl"] .pfs-md-0,html:not([dir="rtl"]) .pfe-md-0 { + padding-right: 0 !important; + } + *[dir="rtl"] .pfe-md-0 { + padding-left: 0 !important; + } + .p-md-1 { + padding: 0.25rem !important; + } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; + } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; + } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; + } + .pl-md-1, + .px-md-1,html:not([dir="rtl"]) .pfs-md-1 { + padding-left: 0.25rem !important; + } + *[dir="rtl"] .pfs-md-1,html:not([dir="rtl"]) .pfe-md-1 { + padding-right: 0.25rem !important; + } + *[dir="rtl"] .pfe-md-1 { + padding-left: 0.25rem !important; + } + .p-md-2 { + padding: 0.5rem !important; + } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; + } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; + } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; + } + .pl-md-2, + .px-md-2,html:not([dir="rtl"]) .pfs-md-2 { + padding-left: 0.5rem !important; + } + *[dir="rtl"] .pfs-md-2,html:not([dir="rtl"]) .pfe-md-2 { + padding-right: 0.5rem !important; + } + *[dir="rtl"] .pfe-md-2 { + padding-left: 0.5rem !important; + } + .p-md-3 { + padding: 1rem !important; + } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; + } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; + } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; + } + .pl-md-3, + .px-md-3,html:not([dir="rtl"]) .pfs-md-3 { + padding-left: 1rem !important; + } + *[dir="rtl"] .pfs-md-3,html:not([dir="rtl"]) .pfe-md-3 { + padding-right: 1rem !important; + } + *[dir="rtl"] .pfe-md-3 { + padding-left: 1rem !important; + } + .p-md-4 { + padding: 1.5rem !important; + } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; + } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; + } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; + } + .pl-md-4, + .px-md-4,html:not([dir="rtl"]) .pfs-md-4 { + padding-left: 1.5rem !important; + } + *[dir="rtl"] .pfs-md-4,html:not([dir="rtl"]) .pfe-md-4 { + padding-right: 1.5rem !important; + } + *[dir="rtl"] .pfe-md-4 { + padding-left: 1.5rem !important; + } + .p-md-5 { + padding: 3rem !important; + } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; + } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; + } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; + } + .pl-md-5, + .px-md-5,html:not([dir="rtl"]) .pfs-md-5 { + padding-left: 3rem !important; + } + *[dir="rtl"] .pfs-md-5,html:not([dir="rtl"]) .pfe-md-5 { + padding-right: 3rem !important; + } + *[dir="rtl"] .pfe-md-5 { + padding-left: 3rem !important; + } + .m-md-n1 { + margin: -0.25rem !important; + } + .mt-md-n1, + .my-md-n1 { + margin-top: -0.25rem !important; + } + .mr-md-n1, + .mx-md-n1 { + margin-right: -0.25rem !important; + } + .mb-md-n1, + .my-md-n1 { + margin-bottom: -0.25rem !important; + } + .ml-md-n1, + .mx-md-n1,html:not([dir="rtl"]) .mfs-md-n1 { + margin-left: -0.25rem !important; + } + *[dir="rtl"] .mfs-md-n1,html:not([dir="rtl"]) .mfe-md-n1 { + margin-right: -0.25rem !important; + } + *[dir="rtl"] .mfe-md-n1 { + margin-left: -0.25rem !important; + } + .m-md-n2 { + margin: -0.5rem !important; + } + .mt-md-n2, + .my-md-n2 { + margin-top: -0.5rem !important; + } + .mr-md-n2, + .mx-md-n2 { + margin-right: -0.5rem !important; + } + .mb-md-n2, + .my-md-n2 { + margin-bottom: -0.5rem !important; + } + .ml-md-n2, + .mx-md-n2,html:not([dir="rtl"]) .mfs-md-n2 { + margin-left: -0.5rem !important; + } + *[dir="rtl"] .mfs-md-n2,html:not([dir="rtl"]) .mfe-md-n2 { + margin-right: -0.5rem !important; + } + *[dir="rtl"] .mfe-md-n2 { + margin-left: -0.5rem !important; + } + .m-md-n3 { + margin: -1rem !important; + } + .mt-md-n3, + .my-md-n3 { + margin-top: -1rem !important; + } + .mr-md-n3, + .mx-md-n3 { + margin-right: -1rem !important; + } + .mb-md-n3, + .my-md-n3 { + margin-bottom: -1rem !important; + } + .ml-md-n3, + .mx-md-n3,html:not([dir="rtl"]) .mfs-md-n3 { + margin-left: -1rem !important; + } + *[dir="rtl"] .mfs-md-n3,html:not([dir="rtl"]) .mfe-md-n3 { + margin-right: -1rem !important; + } + *[dir="rtl"] .mfe-md-n3 { + margin-left: -1rem !important; + } + .m-md-n4 { + margin: -1.5rem !important; + } + .mt-md-n4, + .my-md-n4 { + margin-top: -1.5rem !important; + } + .mr-md-n4, + .mx-md-n4 { + margin-right: -1.5rem !important; + } + .mb-md-n4, + .my-md-n4 { + margin-bottom: -1.5rem !important; + } + .ml-md-n4, + .mx-md-n4,html:not([dir="rtl"]) .mfs-md-n4 { + margin-left: -1.5rem !important; + } + *[dir="rtl"] .mfs-md-n4,html:not([dir="rtl"]) .mfe-md-n4 { + margin-right: -1.5rem !important; + } + *[dir="rtl"] .mfe-md-n4 { + margin-left: -1.5rem !important; + } + .m-md-n5 { + margin: -3rem !important; + } + .mt-md-n5, + .my-md-n5 { + margin-top: -3rem !important; + } + .mr-md-n5, + .mx-md-n5 { + margin-right: -3rem !important; + } + .mb-md-n5, + .my-md-n5 { + margin-bottom: -3rem !important; + } + .ml-md-n5, + .mx-md-n5,html:not([dir="rtl"]) .mfs-md-n5 { + margin-left: -3rem !important; + } + *[dir="rtl"] .mfs-md-n5,html:not([dir="rtl"]) .mfe-md-n5 { + margin-right: -3rem !important; + } + *[dir="rtl"] .mfe-md-n5 { + margin-left: -3rem !important; + } + .m-md-auto { + margin: auto !important; + } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; + } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; + } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; + } + .ml-md-auto, + .mx-md-auto,html:not([dir="rtl"]) .mfs-md-auto { + margin-left: auto !important; + } + *[dir="rtl"] .mfs-md-auto,html:not([dir="rtl"]) .mfe-md-auto { + margin-right: auto !important; + } + *[dir="rtl"] .mfe-md-auto { + margin-left: auto !important; + } } - -@media (max-width: 575.98px) { - .d-down-none { - display: none !important; + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; + } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; + } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; + } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; + } + .ml-lg-0, + .mx-lg-0,html:not([dir="rtl"]) .mfs-lg-0 { + margin-left: 0 !important; + } + *[dir="rtl"] .mfs-lg-0,html:not([dir="rtl"]) .mfe-lg-0 { + margin-right: 0 !important; + } + *[dir="rtl"] .mfe-lg-0 { + margin-left: 0 !important; + } + .m-lg-1 { + margin: 0.25rem !important; + } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; + } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; + } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; + } + .ml-lg-1, + .mx-lg-1,html:not([dir="rtl"]) .mfs-lg-1 { + margin-left: 0.25rem !important; + } + *[dir="rtl"] .mfs-lg-1,html:not([dir="rtl"]) .mfe-lg-1 { + margin-right: 0.25rem !important; + } + *[dir="rtl"] .mfe-lg-1 { + margin-left: 0.25rem !important; + } + .m-lg-2 { + margin: 0.5rem !important; + } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; + } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; + } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; + } + .ml-lg-2, + .mx-lg-2,html:not([dir="rtl"]) .mfs-lg-2 { + margin-left: 0.5rem !important; + } + *[dir="rtl"] .mfs-lg-2,html:not([dir="rtl"]) .mfe-lg-2 { + margin-right: 0.5rem !important; + } + *[dir="rtl"] .mfe-lg-2 { + margin-left: 0.5rem !important; + } + .m-lg-3 { + margin: 1rem !important; + } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; + } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; + } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; + } + .ml-lg-3, + .mx-lg-3,html:not([dir="rtl"]) .mfs-lg-3 { + margin-left: 1rem !important; + } + *[dir="rtl"] .mfs-lg-3,html:not([dir="rtl"]) .mfe-lg-3 { + margin-right: 1rem !important; + } + *[dir="rtl"] .mfe-lg-3 { + margin-left: 1rem !important; + } + .m-lg-4 { + margin: 1.5rem !important; + } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; + } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; + } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; + } + .ml-lg-4, + .mx-lg-4,html:not([dir="rtl"]) .mfs-lg-4 { + margin-left: 1.5rem !important; + } + *[dir="rtl"] .mfs-lg-4,html:not([dir="rtl"]) .mfe-lg-4 { + margin-right: 1.5rem !important; + } + *[dir="rtl"] .mfe-lg-4 { + margin-left: 1.5rem !important; + } + .m-lg-5 { + margin: 3rem !important; + } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; + } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; + } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; + } + .ml-lg-5, + .mx-lg-5,html:not([dir="rtl"]) .mfs-lg-5 { + margin-left: 3rem !important; + } + *[dir="rtl"] .mfs-lg-5,html:not([dir="rtl"]) .mfe-lg-5 { + margin-right: 3rem !important; + } + *[dir="rtl"] .mfe-lg-5 { + margin-left: 3rem !important; + } + .p-lg-0 { + padding: 0 !important; + } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; + } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; + } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; + } + .pl-lg-0, + .px-lg-0,html:not([dir="rtl"]) .pfs-lg-0 { + padding-left: 0 !important; + } + *[dir="rtl"] .pfs-lg-0,html:not([dir="rtl"]) .pfe-lg-0 { + padding-right: 0 !important; + } + *[dir="rtl"] .pfe-lg-0 { + padding-left: 0 !important; + } + .p-lg-1 { + padding: 0.25rem !important; + } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; + } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; + } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; + } + .pl-lg-1, + .px-lg-1,html:not([dir="rtl"]) .pfs-lg-1 { + padding-left: 0.25rem !important; + } + *[dir="rtl"] .pfs-lg-1,html:not([dir="rtl"]) .pfe-lg-1 { + padding-right: 0.25rem !important; + } + *[dir="rtl"] .pfe-lg-1 { + padding-left: 0.25rem !important; + } + .p-lg-2 { + padding: 0.5rem !important; + } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; + } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; + } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; + } + .pl-lg-2, + .px-lg-2,html:not([dir="rtl"]) .pfs-lg-2 { + padding-left: 0.5rem !important; + } + *[dir="rtl"] .pfs-lg-2,html:not([dir="rtl"]) .pfe-lg-2 { + padding-right: 0.5rem !important; + } + *[dir="rtl"] .pfe-lg-2 { + padding-left: 0.5rem !important; + } + .p-lg-3 { + padding: 1rem !important; + } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; + } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; + } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; + } + .pl-lg-3, + .px-lg-3,html:not([dir="rtl"]) .pfs-lg-3 { + padding-left: 1rem !important; + } + *[dir="rtl"] .pfs-lg-3,html:not([dir="rtl"]) .pfe-lg-3 { + padding-right: 1rem !important; + } + *[dir="rtl"] .pfe-lg-3 { + padding-left: 1rem !important; + } + .p-lg-4 { + padding: 1.5rem !important; + } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; + } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; + } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; + } + .pl-lg-4, + .px-lg-4,html:not([dir="rtl"]) .pfs-lg-4 { + padding-left: 1.5rem !important; + } + *[dir="rtl"] .pfs-lg-4,html:not([dir="rtl"]) .pfe-lg-4 { + padding-right: 1.5rem !important; + } + *[dir="rtl"] .pfe-lg-4 { + padding-left: 1.5rem !important; + } + .p-lg-5 { + padding: 3rem !important; + } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; + } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; + } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; } -} - -@media (max-width: 767.98px) { - .d-sm-down-none { - display: none !important; + .pl-lg-5, + .px-lg-5,html:not([dir="rtl"]) .pfs-lg-5 { + padding-left: 3rem !important; } -} - -@media (max-width: 991.98px) { - .d-md-down-none { - display: none !important; + *[dir="rtl"] .pfs-lg-5,html:not([dir="rtl"]) .pfe-lg-5 { + padding-right: 3rem !important; } -} - -@media (max-width: 1199.98px) { - .d-lg-down-none { - display: none !important; + *[dir="rtl"] .pfe-lg-5 { + padding-left: 3rem !important; + } + .m-lg-n1 { + margin: -0.25rem !important; + } + .mt-lg-n1, + .my-lg-n1 { + margin-top: -0.25rem !important; + } + .mr-lg-n1, + .mx-lg-n1 { + margin-right: -0.25rem !important; + } + .mb-lg-n1, + .my-lg-n1 { + margin-bottom: -0.25rem !important; + } + .ml-lg-n1, + .mx-lg-n1,html:not([dir="rtl"]) .mfs-lg-n1 { + margin-left: -0.25rem !important; + } + *[dir="rtl"] .mfs-lg-n1,html:not([dir="rtl"]) .mfe-lg-n1 { + margin-right: -0.25rem !important; + } + *[dir="rtl"] .mfe-lg-n1 { + margin-left: -0.25rem !important; + } + .m-lg-n2 { + margin: -0.5rem !important; + } + .mt-lg-n2, + .my-lg-n2 { + margin-top: -0.5rem !important; + } + .mr-lg-n2, + .mx-lg-n2 { + margin-right: -0.5rem !important; + } + .mb-lg-n2, + .my-lg-n2 { + margin-bottom: -0.5rem !important; + } + .ml-lg-n2, + .mx-lg-n2,html:not([dir="rtl"]) .mfs-lg-n2 { + margin-left: -0.5rem !important; + } + *[dir="rtl"] .mfs-lg-n2,html:not([dir="rtl"]) .mfe-lg-n2 { + margin-right: -0.5rem !important; + } + *[dir="rtl"] .mfe-lg-n2 { + margin-left: -0.5rem !important; + } + .m-lg-n3 { + margin: -1rem !important; + } + .mt-lg-n3, + .my-lg-n3 { + margin-top: -1rem !important; + } + .mr-lg-n3, + .mx-lg-n3 { + margin-right: -1rem !important; + } + .mb-lg-n3, + .my-lg-n3 { + margin-bottom: -1rem !important; + } + .ml-lg-n3, + .mx-lg-n3,html:not([dir="rtl"]) .mfs-lg-n3 { + margin-left: -1rem !important; + } + *[dir="rtl"] .mfs-lg-n3,html:not([dir="rtl"]) .mfe-lg-n3 { + margin-right: -1rem !important; + } + *[dir="rtl"] .mfe-lg-n3 { + margin-left: -1rem !important; + } + .m-lg-n4 { + margin: -1.5rem !important; + } + .mt-lg-n4, + .my-lg-n4 { + margin-top: -1.5rem !important; + } + .mr-lg-n4, + .mx-lg-n4 { + margin-right: -1.5rem !important; + } + .mb-lg-n4, + .my-lg-n4 { + margin-bottom: -1.5rem !important; + } + .ml-lg-n4, + .mx-lg-n4,html:not([dir="rtl"]) .mfs-lg-n4 { + margin-left: -1.5rem !important; + } + *[dir="rtl"] .mfs-lg-n4,html:not([dir="rtl"]) .mfe-lg-n4 { + margin-right: -1.5rem !important; + } + *[dir="rtl"] .mfe-lg-n4 { + margin-left: -1.5rem !important; + } + .m-lg-n5 { + margin: -3rem !important; + } + .mt-lg-n5, + .my-lg-n5 { + margin-top: -3rem !important; + } + .mr-lg-n5, + .mx-lg-n5 { + margin-right: -3rem !important; + } + .mb-lg-n5, + .my-lg-n5 { + margin-bottom: -3rem !important; + } + .ml-lg-n5, + .mx-lg-n5,html:not([dir="rtl"]) .mfs-lg-n5 { + margin-left: -3rem !important; + } + *[dir="rtl"] .mfs-lg-n5,html:not([dir="rtl"]) .mfe-lg-n5 { + margin-right: -3rem !important; + } + *[dir="rtl"] .mfe-lg-n5 { + margin-left: -3rem !important; + } + .m-lg-auto { + margin: auto !important; + } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; + } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; + } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; + } + .ml-lg-auto, + .mx-lg-auto,html:not([dir="rtl"]) .mfs-lg-auto { + margin-left: auto !important; + } + *[dir="rtl"] .mfs-lg-auto,html:not([dir="rtl"]) .mfe-lg-auto { + margin-right: auto !important; + } + *[dir="rtl"] .mfe-lg-auto { + margin-left: auto !important; } } -.d-xl-down-none { - display: none !important; -} - -body { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} - -.font-xs { - font-size: .75rem !important; -} - -.font-sm { - font-size: .85rem !important; -} - -.font-lg { - font-size: 1rem !important; -} - -.font-xl { - font-size: 1.25rem !important; -} - -.font-2xl { - font-size: 1.5rem !important; -} - -.font-3xl { - font-size: 1.75rem !important; -} - -.font-4xl { - font-size: 2rem !important; -} - -.font-5xl { - font-size: 2.5rem !important; -} - -.text-value { - font-size: 1.3125rem; - font-weight: 600; -} - -.text-value-sm { - font-size: 1.09375rem; - font-weight: 600; -} - -.text-value-lg { - font-size: 1.53125rem; - font-weight: 600; -} - -.text-white .text-muted { - color: rgba(255, 255, 255, 0.6) !important; -} - -*[dir="rtl"] { - direction: rtl; - unicode-bidi: embed; -} - -*[dir="rtl"] body { - text-align: right; -} - -*[dir="rtl"] .dropdown-item { - text-align: right; -} - -*[dir="rtl"] .dropdown-item i { - margin-right: -10px; - margin-left: 10px; -} - -*[dir="rtl"] .dropdown-item .badge { - right: auto; - left: 10px; -} - -*[dir="rtl"] .float-left { - float: right !important; -} - -*[dir="rtl"] .float-right { - float: left !important; -} - -*[dir="rtl"] .mr-0, -*[dir="rtl"] .mx-0 { - margin-right: 0 !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .ml-0, -*[dir="rtl"] .mx-0 { - margin-right: 0 !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-1, -*[dir="rtl"] .mx-1 { - margin-right: 0 !important; - margin-left: 0.25rem !important; -} - -*[dir="rtl"] .ml-1, -*[dir="rtl"] .mx-1 { - margin-right: 0.25rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-2, -*[dir="rtl"] .mx-2 { - margin-right: 0 !important; - margin-left: 0.5rem !important; -} - -*[dir="rtl"] .ml-2, -*[dir="rtl"] .mx-2 { - margin-right: 0.5rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-3, -*[dir="rtl"] .mx-3 { - margin-right: 0 !important; - margin-left: 1rem !important; -} - -*[dir="rtl"] .ml-3, -*[dir="rtl"] .mx-3 { - margin-right: 1rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-4, -*[dir="rtl"] .mx-4 { - margin-right: 0 !important; - margin-left: 1.5rem !important; -} - -*[dir="rtl"] .ml-4, -*[dir="rtl"] .mx-4 { - margin-right: 1.5rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-5, -*[dir="rtl"] .mx-5 { - margin-right: 0 !important; - margin-left: 3rem !important; -} - -*[dir="rtl"] .ml-5, -*[dir="rtl"] .mx-5 { - margin-right: 3rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .pr-0, -*[dir="rtl"] .px-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pl-0, -*[dir="rtl"] .px-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pr-1, -*[dir="rtl"] .px-1 { - padding-right: 0 !important; - padding-left: 0.25rem !important; -} - -*[dir="rtl"] .pl-1, -*[dir="rtl"] .px-1 { - padding-right: 0.25rem !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pr-2, -*[dir="rtl"] .px-2 { - padding-right: 0 !important; - padding-left: 0.5rem !important; -} - -*[dir="rtl"] .pl-2, -*[dir="rtl"] .px-2 { - padding-right: 0.5rem !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pr-3, -*[dir="rtl"] .px-3 { - padding-right: 0 !important; - padding-left: 1rem !important; -} - -*[dir="rtl"] .pl-3, -*[dir="rtl"] .px-3 { - padding-right: 1rem !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pr-4, -*[dir="rtl"] .px-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; -} - -*[dir="rtl"] .pl-4, -*[dir="rtl"] .px-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .pr-5, -*[dir="rtl"] .px-5 { - padding-right: 0 !important; - padding-left: 3rem !important; -} - -*[dir="rtl"] .pl-5, -*[dir="rtl"] .px-5 { - padding-right: 3rem !important; - padding-left: 0 !important; -} - -*[dir="rtl"] .mr-n1, -*[dir="rtl"] .mx-n1 { - margin-right: 0 !important; - margin-left: -0.25rem !important; -} - -*[dir="rtl"] .ml-n1, -*[dir="rtl"] .mx-n1 { - margin-right: -0.25rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-n2, -*[dir="rtl"] .mx-n2 { - margin-right: 0 !important; - margin-left: -0.5rem !important; -} - -*[dir="rtl"] .ml-n2, -*[dir="rtl"] .mx-n2 { - margin-right: -0.5rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-n3, -*[dir="rtl"] .mx-n3 { - margin-right: 0 !important; - margin-left: -1rem !important; -} - -*[dir="rtl"] .ml-n3, -*[dir="rtl"] .mx-n3 { - margin-right: -1rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-n4, -*[dir="rtl"] .mx-n4 { - margin-right: 0 !important; - margin-left: -1.5rem !important; -} - -*[dir="rtl"] .ml-n4, -*[dir="rtl"] .mx-n4 { - margin-right: -1.5rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-n5, -*[dir="rtl"] .mx-n5 { - margin-right: 0 !important; - margin-left: -3rem !important; -} - -*[dir="rtl"] .ml-n5, -*[dir="rtl"] .mx-n5 { - margin-right: -3rem !important; - margin-left: 0 !important; -} - -*[dir="rtl"] .mr-auto, -*[dir="rtl"] .mx-auto { - margin-left: auto !important; -} - -*[dir="rtl"] .ml-auto, -*[dir="rtl"] .mx-auto { - margin-right: auto !important; -} - -@media (min-width: 576px) { - *[dir="rtl"] .mr-sm-0, - *[dir="rtl"] .mx-sm-0 { +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; + } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; + } + .mr-xl-0, + .mx-xl-0 { margin-right: 0 !important; + } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; + } + .ml-xl-0, + .mx-xl-0,html:not([dir="rtl"]) .mfs-xl-0 { margin-left: 0 !important; } - *[dir="rtl"] .ml-sm-0, - *[dir="rtl"] .mx-sm-0 { + *[dir="rtl"] .mfs-xl-0,html:not([dir="rtl"]) .mfe-xl-0 { margin-right: 0 !important; + } + *[dir="rtl"] .mfe-xl-0 { margin-left: 0 !important; } - *[dir="rtl"] .mr-sm-1, - *[dir="rtl"] .mx-sm-1 { - margin-right: 0 !important; + .m-xl-1 { + margin: 0.25rem !important; + } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; + } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; + } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; + } + .ml-xl-1, + .mx-xl-1,html:not([dir="rtl"]) .mfs-xl-1 { margin-left: 0.25rem !important; } - *[dir="rtl"] .ml-sm-1, - *[dir="rtl"] .mx-sm-1 { + *[dir="rtl"] .mfs-xl-1,html:not([dir="rtl"]) .mfe-xl-1 { margin-right: 0.25rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-sm-2, - *[dir="rtl"] .mx-sm-2 { - margin-right: 0 !important; + *[dir="rtl"] .mfe-xl-1 { + margin-left: 0.25rem !important; + } + .m-xl-2 { + margin: 0.5rem !important; + } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; + } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; + } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; + } + .ml-xl-2, + .mx-xl-2,html:not([dir="rtl"]) .mfs-xl-2 { margin-left: 0.5rem !important; } - *[dir="rtl"] .ml-sm-2, - *[dir="rtl"] .mx-sm-2 { + *[dir="rtl"] .mfs-xl-2,html:not([dir="rtl"]) .mfe-xl-2 { margin-right: 0.5rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-sm-3, - *[dir="rtl"] .mx-sm-3 { - margin-right: 0 !important; + *[dir="rtl"] .mfe-xl-2 { + margin-left: 0.5rem !important; + } + .m-xl-3 { + margin: 1rem !important; + } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; + } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; + } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; + } + .ml-xl-3, + .mx-xl-3,html:not([dir="rtl"]) .mfs-xl-3 { margin-left: 1rem !important; } - *[dir="rtl"] .ml-sm-3, - *[dir="rtl"] .mx-sm-3 { + *[dir="rtl"] .mfs-xl-3,html:not([dir="rtl"]) .mfe-xl-3 { margin-right: 1rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-sm-4, - *[dir="rtl"] .mx-sm-4 { - margin-right: 0 !important; + *[dir="rtl"] .mfe-xl-3 { + margin-left: 1rem !important; + } + .m-xl-4 { + margin: 1.5rem !important; + } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; + } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; + } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; + } + .ml-xl-4, + .mx-xl-4,html:not([dir="rtl"]) .mfs-xl-4 { margin-left: 1.5rem !important; } - *[dir="rtl"] .ml-sm-4, - *[dir="rtl"] .mx-sm-4 { + *[dir="rtl"] .mfs-xl-4,html:not([dir="rtl"]) .mfe-xl-4 { margin-right: 1.5rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-sm-5, - *[dir="rtl"] .mx-sm-5 { - margin-right: 0 !important; - margin-left: 3rem !important; + *[dir="rtl"] .mfe-xl-4 { + margin-left: 1.5rem !important; } - *[dir="rtl"] .ml-sm-5, - *[dir="rtl"] .mx-sm-5 { - margin-right: 3rem !important; - margin-left: 0 !important; + .m-xl-5 { + margin: 3rem !important; } - *[dir="rtl"] .pr-sm-0, - *[dir="rtl"] .px-sm-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; } - *[dir="rtl"] .pl-sm-0, - *[dir="rtl"] .px-sm-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; } - *[dir="rtl"] .pr-sm-1, - *[dir="rtl"] .px-sm-1 { - padding-right: 0 !important; - padding-left: 0.25rem !important; + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; } - *[dir="rtl"] .pl-sm-1, - *[dir="rtl"] .px-sm-1 { - padding-right: 0.25rem !important; - padding-left: 0 !important; + .ml-xl-5, + .mx-xl-5,html:not([dir="rtl"]) .mfs-xl-5 { + margin-left: 3rem !important; } - *[dir="rtl"] .pr-sm-2, - *[dir="rtl"] .px-sm-2 { - padding-right: 0 !important; - padding-left: 0.5rem !important; + *[dir="rtl"] .mfs-xl-5,html:not([dir="rtl"]) .mfe-xl-5 { + margin-right: 3rem !important; } - *[dir="rtl"] .pl-sm-2, - *[dir="rtl"] .px-sm-2 { - padding-right: 0.5rem !important; - padding-left: 0 !important; + *[dir="rtl"] .mfe-xl-5 { + margin-left: 3rem !important; } - *[dir="rtl"] .pr-sm-3, - *[dir="rtl"] .px-sm-3 { - padding-right: 0 !important; - padding-left: 1rem !important; + .p-xl-0 { + padding: 0 !important; } - *[dir="rtl"] .pl-sm-3, - *[dir="rtl"] .px-sm-3 { - padding-right: 1rem !important; - padding-left: 0 !important; + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; } - *[dir="rtl"] .pr-sm-4, - *[dir="rtl"] .px-sm-4 { + .pr-xl-0, + .px-xl-0 { padding-right: 0 !important; - padding-left: 1.5rem !important; } - *[dir="rtl"] .pl-sm-4, - *[dir="rtl"] .px-sm-4 { - padding-right: 1.5rem !important; + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; + } + .pl-xl-0, + .px-xl-0,html:not([dir="rtl"]) .pfs-xl-0 { padding-left: 0 !important; } - *[dir="rtl"] .pr-sm-5, - *[dir="rtl"] .px-sm-5 { + *[dir="rtl"] .pfs-xl-0,html:not([dir="rtl"]) .pfe-xl-0 { padding-right: 0 !important; - padding-left: 3rem !important; } - *[dir="rtl"] .pl-sm-5, - *[dir="rtl"] .px-sm-5 { - padding-right: 3rem !important; + *[dir="rtl"] .pfe-xl-0 { padding-left: 0 !important; } - *[dir="rtl"] .mr-sm-n1, - *[dir="rtl"] .mx-sm-n1 { - margin-right: 0 !important; - margin-left: -0.25rem !important; + .p-xl-1 { + padding: 0.25rem !important; } - *[dir="rtl"] .ml-sm-n1, - *[dir="rtl"] .mx-sm-n1 { - margin-right: -0.25rem !important; - margin-left: 0 !important; + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; } - *[dir="rtl"] .mr-sm-n2, - *[dir="rtl"] .mx-sm-n2 { - margin-right: 0 !important; - margin-left: -0.5rem !important; + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; } - *[dir="rtl"] .ml-sm-n2, - *[dir="rtl"] .mx-sm-n2 { - margin-right: -0.5rem !important; - margin-left: 0 !important; + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; } - *[dir="rtl"] .mr-sm-n3, - *[dir="rtl"] .mx-sm-n3 { - margin-right: 0 !important; - margin-left: -1rem !important; + .pl-xl-1, + .px-xl-1,html:not([dir="rtl"]) .pfs-xl-1 { + padding-left: 0.25rem !important; } - *[dir="rtl"] .ml-sm-n3, - *[dir="rtl"] .mx-sm-n3 { - margin-right: -1rem !important; - margin-left: 0 !important; + *[dir="rtl"] .pfs-xl-1,html:not([dir="rtl"]) .pfe-xl-1 { + padding-right: 0.25rem !important; } - *[dir="rtl"] .mr-sm-n4, - *[dir="rtl"] .mx-sm-n4 { - margin-right: 0 !important; - margin-left: -1.5rem !important; + *[dir="rtl"] .pfe-xl-1 { + padding-left: 0.25rem !important; } - *[dir="rtl"] .ml-sm-n4, - *[dir="rtl"] .mx-sm-n4 { - margin-right: -1.5rem !important; - margin-left: 0 !important; + .p-xl-2 { + padding: 0.5rem !important; } - *[dir="rtl"] .mr-sm-n5, - *[dir="rtl"] .mx-sm-n5 { - margin-right: 0 !important; - margin-left: -3rem !important; + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; } - *[dir="rtl"] .ml-sm-n5, - *[dir="rtl"] .mx-sm-n5 { - margin-right: -3rem !important; - margin-left: 0 !important; + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; } - *[dir="rtl"] .mr-sm-auto, - *[dir="rtl"] .mx-sm-auto { - margin-left: auto !important; + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; } - *[dir="rtl"] .ml-sm-auto, - *[dir="rtl"] .mx-sm-auto { - margin-right: auto !important; + .pl-xl-2, + .px-xl-2,html:not([dir="rtl"]) .pfs-xl-2 { + padding-left: 0.5rem !important; } -} - -@media (min-width: 768px) { - *[dir="rtl"] .mr-md-0, - *[dir="rtl"] .mx-md-0 { - margin-right: 0 !important; - margin-left: 0 !important; + *[dir="rtl"] .pfs-xl-2,html:not([dir="rtl"]) .pfe-xl-2 { + padding-right: 0.5rem !important; } - *[dir="rtl"] .ml-md-0, - *[dir="rtl"] .mx-md-0 { - margin-right: 0 !important; - margin-left: 0 !important; + *[dir="rtl"] .pfe-xl-2 { + padding-left: 0.5rem !important; } - *[dir="rtl"] .mr-md-1, - *[dir="rtl"] .mx-md-1 { - margin-right: 0 !important; - margin-left: 0.25rem !important; + .p-xl-3 { + padding: 1rem !important; } - *[dir="rtl"] .ml-md-1, - *[dir="rtl"] .mx-md-1 { - margin-right: 0.25rem !important; - margin-left: 0 !important; + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; } - *[dir="rtl"] .mr-md-2, - *[dir="rtl"] .mx-md-2 { - margin-right: 0 !important; - margin-left: 0.5rem !important; + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; } - *[dir="rtl"] .ml-md-2, - *[dir="rtl"] .mx-md-2 { - margin-right: 0.5rem !important; - margin-left: 0 !important; + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; } - *[dir="rtl"] .mr-md-3, - *[dir="rtl"] .mx-md-3 { - margin-right: 0 !important; - margin-left: 1rem !important; + .pl-xl-3, + .px-xl-3,html:not([dir="rtl"]) .pfs-xl-3 { + padding-left: 1rem !important; } - *[dir="rtl"] .ml-md-3, - *[dir="rtl"] .mx-md-3 { - margin-right: 1rem !important; - margin-left: 0 !important; + *[dir="rtl"] .pfs-xl-3,html:not([dir="rtl"]) .pfe-xl-3 { + padding-right: 1rem !important; } - *[dir="rtl"] .mr-md-4, - *[dir="rtl"] .mx-md-4 { - margin-right: 0 !important; - margin-left: 1.5rem !important; + *[dir="rtl"] .pfe-xl-3 { + padding-left: 1rem !important; } - *[dir="rtl"] .ml-md-4, - *[dir="rtl"] .mx-md-4 { - margin-right: 1.5rem !important; - margin-left: 0 !important; + .p-xl-4 { + padding: 1.5rem !important; } - *[dir="rtl"] .mr-md-5, - *[dir="rtl"] .mx-md-5 { - margin-right: 0 !important; - margin-left: 3rem !important; + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; } - *[dir="rtl"] .ml-md-5, - *[dir="rtl"] .mx-md-5 { - margin-right: 3rem !important; - margin-left: 0 !important; + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; } - *[dir="rtl"] .pr-md-0, - *[dir="rtl"] .px-md-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; } - *[dir="rtl"] .pl-md-0, - *[dir="rtl"] .px-md-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .pl-xl-4, + .px-xl-4,html:not([dir="rtl"]) .pfs-xl-4 { + padding-left: 1.5rem !important; } - *[dir="rtl"] .pr-md-1, - *[dir="rtl"] .px-md-1 { - padding-right: 0 !important; - padding-left: 0.25rem !important; + *[dir="rtl"] .pfs-xl-4,html:not([dir="rtl"]) .pfe-xl-4 { + padding-right: 1.5rem !important; } - *[dir="rtl"] .pl-md-1, - *[dir="rtl"] .px-md-1 { - padding-right: 0.25rem !important; - padding-left: 0 !important; + *[dir="rtl"] .pfe-xl-4 { + padding-left: 1.5rem !important; } - *[dir="rtl"] .pr-md-2, - *[dir="rtl"] .px-md-2 { - padding-right: 0 !important; - padding-left: 0.5rem !important; + .p-xl-5 { + padding: 3rem !important; } - *[dir="rtl"] .pl-md-2, - *[dir="rtl"] .px-md-2 { - padding-right: 0.5rem !important; - padding-left: 0 !important; + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; } - *[dir="rtl"] .pr-md-3, - *[dir="rtl"] .px-md-3 { - padding-right: 0 !important; - padding-left: 1rem !important; + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; } - *[dir="rtl"] .pl-md-3, - *[dir="rtl"] .px-md-3 { - padding-right: 1rem !important; - padding-left: 0 !important; + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; } - *[dir="rtl"] .pr-md-4, - *[dir="rtl"] .px-md-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; + .pl-xl-5, + .px-xl-5,html:not([dir="rtl"]) .pfs-xl-5 { + padding-left: 3rem !important; } - *[dir="rtl"] .pl-md-4, - *[dir="rtl"] .px-md-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; + *[dir="rtl"] .pfs-xl-5,html:not([dir="rtl"]) .pfe-xl-5 { + padding-right: 3rem !important; } - *[dir="rtl"] .pr-md-5, - *[dir="rtl"] .px-md-5 { - padding-right: 0 !important; + *[dir="rtl"] .pfe-xl-5 { padding-left: 3rem !important; } - *[dir="rtl"] .pl-md-5, - *[dir="rtl"] .px-md-5 { - padding-right: 3rem !important; - padding-left: 0 !important; + .m-xl-n1 { + margin: -0.25rem !important; } - *[dir="rtl"] .mr-md-n1, - *[dir="rtl"] .mx-md-n1 { - margin-right: 0 !important; + .mt-xl-n1, + .my-xl-n1 { + margin-top: -0.25rem !important; + } + .mr-xl-n1, + .mx-xl-n1 { + margin-right: -0.25rem !important; + } + .mb-xl-n1, + .my-xl-n1 { + margin-bottom: -0.25rem !important; + } + .ml-xl-n1, + .mx-xl-n1,html:not([dir="rtl"]) .mfs-xl-n1 { margin-left: -0.25rem !important; } - *[dir="rtl"] .ml-md-n1, - *[dir="rtl"] .mx-md-n1 { + *[dir="rtl"] .mfs-xl-n1,html:not([dir="rtl"]) .mfe-xl-n1 { margin-right: -0.25rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-md-n2, - *[dir="rtl"] .mx-md-n2 { - margin-right: 0 !important; - margin-left: -0.5rem !important; + *[dir="rtl"] .mfe-xl-n1 { + margin-left: -0.25rem !important; + } + .m-xl-n2 { + margin: -0.5rem !important; + } + .mt-xl-n2, + .my-xl-n2 { + margin-top: -0.5rem !important; } - *[dir="rtl"] .ml-md-n2, - *[dir="rtl"] .mx-md-n2 { + .mr-xl-n2, + .mx-xl-n2 { margin-right: -0.5rem !important; - margin-left: 0 !important; } - *[dir="rtl"] .mr-md-n3, - *[dir="rtl"] .mx-md-n3 { - margin-right: 0 !important; - margin-left: -1rem !important; + .mb-xl-n2, + .my-xl-n2 { + margin-bottom: -0.5rem !important; } - *[dir="rtl"] .ml-md-n3, - *[dir="rtl"] .mx-md-n3 { - margin-right: -1rem !important; - margin-left: 0 !important; + .ml-xl-n2, + .mx-xl-n2,html:not([dir="rtl"]) .mfs-xl-n2 { + margin-left: -0.5rem !important; } - *[dir="rtl"] .mr-md-n4, - *[dir="rtl"] .mx-md-n4 { - margin-right: 0 !important; - margin-left: -1.5rem !important; + *[dir="rtl"] .mfs-xl-n2,html:not([dir="rtl"]) .mfe-xl-n2 { + margin-right: -0.5rem !important; } - *[dir="rtl"] .ml-md-n4, - *[dir="rtl"] .mx-md-n4 { - margin-right: -1.5rem !important; - margin-left: 0 !important; + *[dir="rtl"] .mfe-xl-n2 { + margin-left: -0.5rem !important; } - *[dir="rtl"] .mr-md-n5, - *[dir="rtl"] .mx-md-n5 { - margin-right: 0 !important; - margin-left: -3rem !important; + .m-xl-n3 { + margin: -1rem !important; } - *[dir="rtl"] .ml-md-n5, - *[dir="rtl"] .mx-md-n5 { - margin-right: -3rem !important; - margin-left: 0 !important; + .mt-xl-n3, + .my-xl-n3 { + margin-top: -1rem !important; } - *[dir="rtl"] .mr-md-auto, - *[dir="rtl"] .mx-md-auto { - margin-left: auto !important; + .mr-xl-n3, + .mx-xl-n3 { + margin-right: -1rem !important; } - *[dir="rtl"] .ml-md-auto, - *[dir="rtl"] .mx-md-auto { - margin-right: auto !important; + .mb-xl-n3, + .my-xl-n3 { + margin-bottom: -1rem !important; } -} - -@media (min-width: 992px) { - *[dir="rtl"] .mr-lg-0, - *[dir="rtl"] .mx-lg-0 { - margin-right: 0 !important; - margin-left: 0 !important; + .ml-xl-n3, + .mx-xl-n3,html:not([dir="rtl"]) .mfs-xl-n3 { + margin-left: -1rem !important; } - *[dir="rtl"] .ml-lg-0, - *[dir="rtl"] .mx-lg-0 { - margin-right: 0 !important; - margin-left: 0 !important; + *[dir="rtl"] .mfs-xl-n3,html:not([dir="rtl"]) .mfe-xl-n3 { + margin-right: -1rem !important; } - *[dir="rtl"] .mr-lg-1, - *[dir="rtl"] .mx-lg-1 { - margin-right: 0 !important; - margin-left: 0.25rem !important; + *[dir="rtl"] .mfe-xl-n3 { + margin-left: -1rem !important; } - *[dir="rtl"] .ml-lg-1, - *[dir="rtl"] .mx-lg-1 { - margin-right: 0.25rem !important; - margin-left: 0 !important; + .m-xl-n4 { + margin: -1.5rem !important; } - *[dir="rtl"] .mr-lg-2, - *[dir="rtl"] .mx-lg-2 { - margin-right: 0 !important; - margin-left: 0.5rem !important; + .mt-xl-n4, + .my-xl-n4 { + margin-top: -1.5rem !important; } - *[dir="rtl"] .ml-lg-2, - *[dir="rtl"] .mx-lg-2 { - margin-right: 0.5rem !important; - margin-left: 0 !important; + .mr-xl-n4, + .mx-xl-n4 { + margin-right: -1.5rem !important; } - *[dir="rtl"] .mr-lg-3, - *[dir="rtl"] .mx-lg-3 { - margin-right: 0 !important; - margin-left: 1rem !important; + .mb-xl-n4, + .my-xl-n4 { + margin-bottom: -1.5rem !important; } - *[dir="rtl"] .ml-lg-3, - *[dir="rtl"] .mx-lg-3 { - margin-right: 1rem !important; - margin-left: 0 !important; + .ml-xl-n4, + .mx-xl-n4,html:not([dir="rtl"]) .mfs-xl-n4 { + margin-left: -1.5rem !important; } - *[dir="rtl"] .mr-lg-4, - *[dir="rtl"] .mx-lg-4 { - margin-right: 0 !important; - margin-left: 1.5rem !important; + *[dir="rtl"] .mfs-xl-n4,html:not([dir="rtl"]) .mfe-xl-n4 { + margin-right: -1.5rem !important; } - *[dir="rtl"] .ml-lg-4, - *[dir="rtl"] .mx-lg-4 { - margin-right: 1.5rem !important; - margin-left: 0 !important; + *[dir="rtl"] .mfe-xl-n4 { + margin-left: -1.5rem !important; } - *[dir="rtl"] .mr-lg-5, - *[dir="rtl"] .mx-lg-5 { - margin-right: 0 !important; - margin-left: 3rem !important; + .m-xl-n5 { + margin: -3rem !important; } - *[dir="rtl"] .ml-lg-5, - *[dir="rtl"] .mx-lg-5 { - margin-right: 3rem !important; - margin-left: 0 !important; + .mt-xl-n5, + .my-xl-n5 { + margin-top: -3rem !important; } - *[dir="rtl"] .pr-lg-0, - *[dir="rtl"] .px-lg-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .mr-xl-n5, + .mx-xl-n5 { + margin-right: -3rem !important; } - *[dir="rtl"] .pl-lg-0, - *[dir="rtl"] .px-lg-0 { - padding-right: 0 !important; - padding-left: 0 !important; + .mb-xl-n5, + .my-xl-n5 { + margin-bottom: -3rem !important; } - *[dir="rtl"] .pr-lg-1, - *[dir="rtl"] .px-lg-1 { - padding-right: 0 !important; - padding-left: 0.25rem !important; + .ml-xl-n5, + .mx-xl-n5,html:not([dir="rtl"]) .mfs-xl-n5 { + margin-left: -3rem !important; } - *[dir="rtl"] .pl-lg-1, - *[dir="rtl"] .px-lg-1 { - padding-right: 0.25rem !important; - padding-left: 0 !important; + *[dir="rtl"] .mfs-xl-n5,html:not([dir="rtl"]) .mfe-xl-n5 { + margin-right: -3rem !important; } - *[dir="rtl"] .pr-lg-2, - *[dir="rtl"] .px-lg-2 { - padding-right: 0 !important; - padding-left: 0.5rem !important; + *[dir="rtl"] .mfe-xl-n5 { + margin-left: -3rem !important; } - *[dir="rtl"] .pl-lg-2, - *[dir="rtl"] .px-lg-2 { - padding-right: 0.5rem !important; - padding-left: 0 !important; + .m-xl-auto { + margin: auto !important; } - *[dir="rtl"] .pr-lg-3, - *[dir="rtl"] .px-lg-3 { - padding-right: 0 !important; - padding-left: 1rem !important; + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; } - *[dir="rtl"] .pl-lg-3, - *[dir="rtl"] .px-lg-3 { - padding-right: 1rem !important; - padding-left: 0 !important; + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; } - *[dir="rtl"] .pr-lg-4, - *[dir="rtl"] .px-lg-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; } - *[dir="rtl"] .pl-lg-4, - *[dir="rtl"] .px-lg-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; + .ml-xl-auto, + .mx-xl-auto,html:not([dir="rtl"]) .mfs-xl-auto { + margin-left: auto !important; } - *[dir="rtl"] .pr-lg-5, - *[dir="rtl"] .px-lg-5 { - padding-right: 0 !important; - padding-left: 3rem !important; + *[dir="rtl"] .mfs-xl-auto,html:not([dir="rtl"]) .mfe-xl-auto { + margin-right: auto !important; } - *[dir="rtl"] .pl-lg-5, - *[dir="rtl"] .px-lg-5 { - padding-right: 3rem !important; - padding-left: 0 !important; + *[dir="rtl"] .mfe-xl-auto { + margin-left: auto !important; } - *[dir="rtl"] .mr-lg-n1, - *[dir="rtl"] .mx-lg-n1 { - margin-right: 0 !important; - margin-left: -0.25rem !important; +} + +.text-monospace { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +} + +.text-justify { + text-align: justify !important; +} + +.text-wrap { + white-space: normal !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-left { + text-align: left !important; +} + +.text-right { + text-align: right !important; +} + +.text-center { + text-align: center !important; +} + +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; } - *[dir="rtl"] .ml-lg-n1, - *[dir="rtl"] .mx-lg-n1 { - margin-right: -0.25rem !important; - margin-left: 0 !important; + .text-sm-right { + text-align: right !important; } - *[dir="rtl"] .mr-lg-n2, - *[dir="rtl"] .mx-lg-n2 { - margin-right: 0 !important; - margin-left: -0.5rem !important; + .text-sm-center { + text-align: center !important; } - *[dir="rtl"] .ml-lg-n2, - *[dir="rtl"] .mx-lg-n2 { - margin-right: -0.5rem !important; - margin-left: 0 !important; +} + +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; } - *[dir="rtl"] .mr-lg-n3, - *[dir="rtl"] .mx-lg-n3 { - margin-right: 0 !important; - margin-left: -1rem !important; + .text-md-right { + text-align: right !important; } - *[dir="rtl"] .ml-lg-n3, - *[dir="rtl"] .mx-lg-n3 { - margin-right: -1rem !important; - margin-left: 0 !important; + .text-md-center { + text-align: center !important; } - *[dir="rtl"] .mr-lg-n4, - *[dir="rtl"] .mx-lg-n4 { - margin-right: 0 !important; - margin-left: -1.5rem !important; +} + +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; } - *[dir="rtl"] .ml-lg-n4, - *[dir="rtl"] .mx-lg-n4 { - margin-right: -1.5rem !important; - margin-left: 0 !important; + .text-lg-right { + text-align: right !important; } - *[dir="rtl"] .mr-lg-n5, - *[dir="rtl"] .mx-lg-n5 { - margin-right: 0 !important; - margin-left: -3rem !important; + .text-lg-center { + text-align: center !important; } - *[dir="rtl"] .ml-lg-n5, - *[dir="rtl"] .mx-lg-n5 { - margin-right: -3rem !important; - margin-left: 0 !important; +} + +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; } - *[dir="rtl"] .mr-lg-auto, - *[dir="rtl"] .mx-lg-auto { - margin-left: auto !important; + .text-xl-right { + text-align: right !important; } - *[dir="rtl"] .ml-lg-auto, - *[dir="rtl"] .mx-lg-auto { - margin-right: auto !important; + .text-xl-center { + text-align: center !important; } } -@media (min-width: 1200px) { - *[dir="rtl"] .mr-xl-0, - *[dir="rtl"] .mx-xl-0 { - margin-right: 0 !important; - margin-left: 0 !important; - } - *[dir="rtl"] .ml-xl-0, - *[dir="rtl"] .mx-xl-0 { - margin-right: 0 !important; - margin-left: 0 !important; - } - *[dir="rtl"] .mr-xl-1, - *[dir="rtl"] .mx-xl-1 { - margin-right: 0 !important; - margin-left: 0.25rem !important; - } - *[dir="rtl"] .ml-xl-1, - *[dir="rtl"] .mx-xl-1 { - margin-right: 0.25rem !important; - margin-left: 0 !important; - } - *[dir="rtl"] .mr-xl-2, - *[dir="rtl"] .mx-xl-2 { - margin-right: 0 !important; - margin-left: 0.5rem !important; - } - *[dir="rtl"] .ml-xl-2, - *[dir="rtl"] .mx-xl-2 { - margin-right: 0.5rem !important; - margin-left: 0 !important; - } - *[dir="rtl"] .mr-xl-3, - *[dir="rtl"] .mx-xl-3 { - margin-right: 0 !important; - margin-left: 1rem !important; - } - *[dir="rtl"] .ml-xl-3, - *[dir="rtl"] .mx-xl-3 { - margin-right: 1rem !important; - margin-left: 0 !important; - } - *[dir="rtl"] .mr-xl-4, - *[dir="rtl"] .mx-xl-4 { - margin-right: 0 !important; - margin-left: 1.5rem !important; - } - *[dir="rtl"] .ml-xl-4, - *[dir="rtl"] .mx-xl-4 { - margin-right: 1.5rem !important; - margin-left: 0 !important; - } - *[dir="rtl"] .mr-xl-5, - *[dir="rtl"] .mx-xl-5 { - margin-right: 0 !important; - margin-left: 3rem !important; - } - *[dir="rtl"] .ml-xl-5, - *[dir="rtl"] .mx-xl-5 { - margin-right: 3rem !important; - margin-left: 0 !important; - } - *[dir="rtl"] .pr-xl-0, - *[dir="rtl"] .px-xl-0 { - padding-right: 0 !important; - padding-left: 0 !important; - } - *[dir="rtl"] .pl-xl-0, - *[dir="rtl"] .px-xl-0 { - padding-right: 0 !important; - padding-left: 0 !important; - } - *[dir="rtl"] .pr-xl-1, - *[dir="rtl"] .px-xl-1 { - padding-right: 0 !important; - padding-left: 0.25rem !important; - } - *[dir="rtl"] .pl-xl-1, - *[dir="rtl"] .px-xl-1 { - padding-right: 0.25rem !important; - padding-left: 0 !important; - } - *[dir="rtl"] .pr-xl-2, - *[dir="rtl"] .px-xl-2 { - padding-right: 0 !important; - padding-left: 0.5rem !important; - } - *[dir="rtl"] .pl-xl-2, - *[dir="rtl"] .px-xl-2 { - padding-right: 0.5rem !important; - padding-left: 0 !important; +.text-lowercase { + text-transform: lowercase !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.text-capitalize { + text-transform: capitalize !important; +} + +.font-weight-light { + font-weight: 300 !important; +} + +.font-weight-lighter { + font-weight: lighter !important; +} + +.font-weight-normal { + font-weight: 400 !important; +} + +.font-weight-bold { + font-weight: 700 !important; +} + +.font-weight-bolder { + font-weight: bolder !important; +} + +.font-italic { + font-style: italic !important; +} + +.text-white { + color: #fff !important; +} + +.text-primary { + color: #321fdb !important; +} + +a.text-primary:hover, a.text-primary:focus { + color: #231698 !important; +} + +.text-secondary { + color: #ced2d8 !important; +} + +a.text-secondary:hover, a.text-secondary:focus { + color: #a3abb6 !important; +} + +.text-success { + color: #2eb85c !important; +} + +a.text-success:hover, a.text-success:focus { + color: #1f7b3d !important; +} + +.text-info { + color: #39f !important; +} + +a.text-info:hover, a.text-info:focus { + color: #0073e6 !important; +} + +.text-warning { + color: #f9b115 !important; +} + +a.text-warning:hover, a.text-warning:focus { + color: #bd8305 !important; +} + +.text-danger { + color: #e55353 !important; +} + +a.text-danger:hover, a.text-danger:focus { + color: #cd1f1f !important; +} + +.text-light { + color: #ebedef !important; +} + +a.text-light:hover, a.text-light:focus { + color: #c1c7cd !important; +} + +.text-dark { + color: #636f83 !important; +} + +a.text-dark:hover, a.text-dark:focus { + color: #424a57 !important; +} + +.text-body { + color: #4f5d73 !important; +} + +.text-muted { + color: #768192 !important; +} + +.text-black-50 { + color: rgba(0, 0, 21, 0.5) !important; +} + +.text-white-50 { + color: rgba(255, 255, 255, 0.5) !important; +} + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.text-decoration-none { + text-decoration: none !important; +} + +.text-break { + word-break: break-word !important; + overflow-wrap: break-word !important; +} + +.text-reset { + color: inherit !important; +} + +.font-xs { + font-size: .75rem !important; +} + +.font-sm { + font-size: .85rem !important; +} + +.font-lg { + font-size: 1rem !important; +} + +.font-xl { + font-size: 1.25rem !important; +} + +.font-2xl { + font-size: 1.5rem !important; +} + +.font-3xl { + font-size: 1.75rem !important; +} + +.font-4xl { + font-size: 2rem !important; +} + +.font-5xl { + font-size: 2.5rem !important; +} + +[class^="text-value"] { + font-weight: 600; +} + +.text-value-xs { + font-size: 0.65625rem; +} + +.text-value-sm { + font-size: 0.74375rem; +} + +.text-value { + font-size: 0.875rem; +} + +.text-value-lg { + font-size: 1.3125rem; +} + +.text-value-xl { + font-size: 1.53125rem; +} + +.text-white .text-muted { + color: rgba(255, 255, 255, 0.6) !important; +} + +.visible { + visibility: visible !important; +} + +.invisible { + visibility: hidden !important; +} + +*[dir="rtl"] { + direction: rtl; + unicode-bidi: embed; +} + +*[dir="rtl"] body { + text-align: right; +} + +.ie-custom-properties { + primary: #321fdb; + secondary: #ced2d8; + success: #2eb85c; + info: #39f; + warning: #f9b115; + danger: #e55353; + light: #ebedef; + dark: #636f83; + breakpoint-xs: 0; + breakpoint-sm: 576px; + breakpoint-md: 768px; + breakpoint-lg: 992px; + breakpoint-xl: 1200px; +} + +@media print { + *, + *::before, + *::after { + text-shadow: none !important; + box-shadow: none !important; } - *[dir="rtl"] .pr-xl-3, - *[dir="rtl"] .px-xl-3 { - padding-right: 0 !important; - padding-left: 1rem !important; + a:not(.btn) { + text-decoration: underline; } - *[dir="rtl"] .pl-xl-3, - *[dir="rtl"] .px-xl-3 { - padding-right: 1rem !important; - padding-left: 0 !important; + abbr[title]::after { + content: " (" attr(title) ")"; } - *[dir="rtl"] .pr-xl-4, - *[dir="rtl"] .px-xl-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; + pre { + white-space: pre-wrap !important; } - *[dir="rtl"] .pl-xl-4, - *[dir="rtl"] .px-xl-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; + pre, + blockquote { + border: 1px solid #9da5b1; + page-break-inside: avoid; } - *[dir="rtl"] .pr-xl-5, - *[dir="rtl"] .px-xl-5 { - padding-right: 0 !important; - padding-left: 3rem !important; + thead { + display: table-header-group; } - *[dir="rtl"] .pl-xl-5, - *[dir="rtl"] .px-xl-5 { - padding-right: 3rem !important; - padding-left: 0 !important; + tr, + img { + page-break-inside: avoid; } - *[dir="rtl"] .mr-xl-n1, - *[dir="rtl"] .mx-xl-n1 { - margin-right: 0 !important; - margin-left: -0.25rem !important; + p, + h2, + h3 { + orphans: 3; + widows: 3; } - *[dir="rtl"] .ml-xl-n1, - *[dir="rtl"] .mx-xl-n1 { - margin-right: -0.25rem !important; - margin-left: 0 !important; + h2, + h3 { + page-break-after: avoid; } - *[dir="rtl"] .mr-xl-n2, - *[dir="rtl"] .mx-xl-n2 { - margin-right: 0 !important; - margin-left: -0.5rem !important; + @page { + size: a3; } - *[dir="rtl"] .ml-xl-n2, - *[dir="rtl"] .mx-xl-n2 { - margin-right: -0.5rem !important; - margin-left: 0 !important; + body,.container { + min-width: 992px !important; } - *[dir="rtl"] .mr-xl-n3, - *[dir="rtl"] .mx-xl-n3 { - margin-right: 0 !important; - margin-left: -1rem !important; + .navbar { + display: none; } - *[dir="rtl"] .ml-xl-n3, - *[dir="rtl"] .mx-xl-n3 { - margin-right: -1rem !important; - margin-left: 0 !important; + .badge { + border: 1px solid #000015; } - *[dir="rtl"] .mr-xl-n4, - *[dir="rtl"] .mx-xl-n4 { - margin-right: 0 !important; - margin-left: -1.5rem !important; + .table { + border-collapse: collapse !important; } - *[dir="rtl"] .ml-xl-n4, - *[dir="rtl"] .mx-xl-n4 { - margin-right: -1.5rem !important; - margin-left: 0 !important; + .table td, + .table th { + background-color: #fff !important; } - *[dir="rtl"] .mr-xl-n5, - *[dir="rtl"] .mx-xl-n5 { - margin-right: 0 !important; - margin-left: -3rem !important; + .table-bordered th, + .table-bordered td { + border: 1px solid #c4c9d0 !important; } - *[dir="rtl"] .ml-xl-n5, - *[dir="rtl"] .mx-xl-n5 { - margin-right: -3rem !important; - margin-left: 0 !important; + .table-dark { + color: inherit; } - *[dir="rtl"] .mr-xl-auto, - *[dir="rtl"] .mx-xl-auto { - margin-left: auto !important; + .table-dark th, + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody,.table .thead-dark th { + border-color: #d8dbe0; } - *[dir="rtl"] .ml-xl-auto, - *[dir="rtl"] .mx-xl-auto { - margin-right: auto !important; + .table .thead-dark th { + color: inherit; } } - -.ie-custom-properties { - blue: #20a8d8; - indigo: #6610f2; - purple: #6f42c1; - pink: #e83e8c; - red: #f86c6b; - orange: #f8cb00; - yellow: #ffc107; - green: #4dbd74; - teal: #20c997; - cyan: #17a2b8; - white: #fff; - gray: #73818f; - gray-dark: #2f353a; - light-blue: #63c2de; - primary: #20a8d8; - secondary: #c8ced3; - success: #4dbd74; - info: #63c2de; - warning: #ffc107; - danger: #f86c6b; - light: #f0f3f5; - dark: #2f353a; - breakpoint-xs: 0; - breakpoint-sm: 576px; - breakpoint-md: 768px; - breakpoint-lg: 992px; - breakpoint-xl: 1200px; -} - -.was-validated .form-control:valid, .form-control.is-valid { - background-position: right calc(0.375em + 0.1875rem) center; -} - -.was-validated .form-control:invalid, .form-control.is-invalid { - background-position: right calc(0.375em + 0.1875rem) center; -} /*# sourceMappingURL=coreui.css.map */ From f25cf590c24452e620b2e51c94164ea92c0fa1f6 Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 17 Feb 2020 12:26:45 +0100 Subject: [PATCH 003/198] fix: components cleanup --- src/CAlert.js | 3 +- src/CButton.js | 2 +- src/CButtonGroup.js | 2 +- src/CButtonToolbar.js | 2 +- src/CCard.js | 2 +- src/CCardLink.js | 5 +- src/CCarousel.js | 1 + src/CCollapse.js | 5 +- src/CCustomInput.js | 10 ++-- src/CDataTable.js | 6 +-- src/CDropdownCustom.js | 16 ++++--- src/CDropdownMenu.js | 1 - src/CFooter.js | 2 +- src/CHeaderNavLink.js | 3 +- src/CIconRaw.js | 6 ++- src/CInput.js | 4 +- src/CModal.js | 88 +++++++++++++++++------------------ src/CNavLink.js | 2 +- src/CPopover.js | 2 +- src/CPopperContent.js | 11 +++-- src/CSidebar.js | 16 +++++-- src/CSidebarClose.js | 4 +- src/CSidebarNav.js | 23 +++------ src/CSidebarNavLink.js | 5 +- src/CToast.js | 2 +- src/CTooltip.js | 5 +- src/CTooltipPopoverWrapper.js | 68 ++++++++++++--------------- src/CWidgetBrand.js | 5 +- src/CWidgetDropdown.js | 5 +- src/CWidgetIcon.js | 3 +- src/CWidgetProgress.js | 3 +- src/CWidgetProgressIcon.js | 5 +- src/CWidgetSimple.js | 3 +- 33 files changed, 158 insertions(+), 162 deletions(-) diff --git a/src/CAlert.js b/src/CAlert.js index cd3c5d74..f464eae9 100644 --- a/src/CAlert.js +++ b/src/CAlert.js @@ -15,7 +15,6 @@ const CAlert = props=>{ cssModule, custom, // - innerRef, toggle, transition, closeAriaLabel, @@ -61,7 +60,7 @@ const CAlert = props=>{ return ( {!custom ? - : null} diff --git a/src/CButton.js b/src/CButton.js index d5c3f9f8..5f01d092 100644 --- a/src/CButton.js +++ b/src/CButton.js @@ -68,9 +68,9 @@ const CButton = props=>{ type={(Tag === 'button' && attributes.onClick) ? 'button' : undefined} {...attributes} className={classes} - ref={innerRef} onClick={onClick} aria-label={ariaLabel || defaultAriaLabel} + ref={innerRef} children={textHtml ? textHtml : children} />; diff --git a/src/CButtonGroup.js b/src/CButtonGroup.js index fe4f1605..2cb95ca7 100644 --- a/src/CButtonGroup.js +++ b/src/CButtonGroup.js @@ -27,7 +27,7 @@ const CButtonGroup = props=>{ ), cssModule); return ( - + ); } diff --git a/src/CButtonToolbar.js b/src/CButtonToolbar.js index 2960dcdc..7073381b 100644 --- a/src/CButtonToolbar.js +++ b/src/CButtonToolbar.js @@ -26,7 +26,7 @@ const CButtonToolbar = props=>{ ), cssModule); return ( - + ); } diff --git a/src/CCard.js b/src/CCard.js index 302fc7fb..1d1373b1 100644 --- a/src/CCard.js +++ b/src/CCard.js @@ -84,6 +84,7 @@ CCard.propTypes = { cssModule: PropTypes.object, custom: PropTypes.bool, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), align: PropTypes.string, color: PropTypes.string, borderColor: PropTypes.string, @@ -91,7 +92,6 @@ CCard.propTypes = { accentColor: PropTypes.string, bodyClassName: PropTypes.string, bodyProps: PropTypes.object, - innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), headerSlot: PropTypes.node, footerSlot: PropTypes.node } diff --git a/src/CCardLink.js b/src/CCardLink.js index 3b8e749e..cd51e197 100644 --- a/src/CCardLink.js +++ b/src/CCardLink.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import {tagPropType, mapToCssModules} from './Shared/helper.js'; +import CLink from './CLink'; //component - CoreUI / CCardLink @@ -12,7 +13,6 @@ const CCardLink = props=>{ className, cssModule, // - innerRef, ...attributes } = props; @@ -24,7 +24,7 @@ const CCardLink = props=>{ ), cssModule); return ( - + ); } @@ -38,7 +38,6 @@ CCardLink.propTypes = { }; CCardLink.defaultProps = { - tag: 'a' }; export default CCardLink; diff --git a/src/CCarousel.js b/src/CCarousel.js index efe236bf..1dca46f1 100644 --- a/src/CCarousel.js +++ b/src/CCarousel.js @@ -11,6 +11,7 @@ import CCarouselCaption from './CCarouselCaption'; const CCarousel = props=>{ const { + // custom, autoPlay, indicators, diff --git a/src/CCollapse.js b/src/CCollapse.js index 021ce5bd..f2296c12 100644 --- a/src/CCollapse.js +++ b/src/CCollapse.js @@ -13,7 +13,8 @@ const CCollapse = props=>{ custom, // toggle, - show + show, + ...attributes } = props; const [isOpen, setIsOpen] = useState(props.defaultOpen || false); @@ -56,7 +57,7 @@ const CCollapse = props=>{ //render - return ; + return ; } diff --git a/src/CCustomInput.js b/src/CCustomInput.js index 03af34dd..f2eeac05 100644 --- a/src/CCustomInput.js +++ b/src/CCustomInput.js @@ -38,20 +38,20 @@ const CCustomInput = props=>{ ), cssModule); if (type === 'select') { - return ; + return ; } if (type === 'file') { return ( -
    - +
    +
    ); } if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') { - return ; + return ; } const wrapperClasses = classNames( @@ -67,8 +67,8 @@ const CCustomInput = props=>{ {children} diff --git a/src/CDataTable.js b/src/CDataTable.js index c999707b..78616451 100644 --- a/src/CDataTable.js +++ b/src/CDataTable.js @@ -604,11 +604,7 @@ CDataTable.propTypes = { cssModule: PropTypes.object, //custom: PropTypes.bool, // - innerRef: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string, - PropTypes.func, - ]), + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), overTableSlot: PropTypes.node, colNameSlot: PropTypes.node, columnHeaderSlot: PropTypes.array, diff --git a/src/CDropdownCustom.js b/src/CDropdownCustom.js index 97c15453..2480122e 100644 --- a/src/CDropdownCustom.js +++ b/src/CDropdownCustom.js @@ -10,15 +10,12 @@ export const Context = React.createContext({}); //component - CoreUI / CPopperContentWrapper class CPopperContentWrapper extends React.Component { - getChildContext(){ return this.context; } - render(){ return this.props.children; } - } CPopperContentWrapper.contextType = Context; @@ -38,6 +35,7 @@ const CDropdownCustom = props=>{ className, cssModule, // + innerRef, dropup, show, group, @@ -50,14 +48,18 @@ const CDropdownCustom = props=>{ } = omit(props, ['toggle', 'disabled', 'inNavbar', 'direction']); const fields = useRef({ - firstRender: true + firstRender: true, + ref: {current: null} }).current; - const ref = useRef(null); + const reference = (r)=>{ + fields.ref.current = r; + innerRef && innerRef(r); + } const getContainer = ()=>{ if (fields._$container) return fields._$container; - fields._$container = ReactDOM.findDOMNode(ref.current); + fields._$container = ReactDOM.findDOMNode(fields.ref.current); return fields._$container; } @@ -224,7 +226,7 @@ const CDropdownCustom = props=>{ inNavbar: props.inNavbar, }}> - + ); diff --git a/src/CDropdownMenu.js b/src/CDropdownMenu.js index c99803b9..436a7162 100644 --- a/src/CDropdownMenu.js +++ b/src/CDropdownMenu.js @@ -42,7 +42,6 @@ const CDropdownMenu = props=>{ 'show': context.isOpen, } ), cssModule); - //dash let Tag = tag; diff --git a/src/CFooter.js b/src/CFooter.js index 20fb3ebf..ab794142 100644 --- a/src/CFooter.js +++ b/src/CFooter.js @@ -43,7 +43,7 @@ CFooter.propTypes = { CFooter.defaultProps = { tag: 'footer', - fixed: true + fixed: false }; export default CFooter; diff --git a/src/CHeaderNavLink.js b/src/CHeaderNavLink.js index 13c4a066..479d0035 100644 --- a/src/CHeaderNavLink.js +++ b/src/CHeaderNavLink.js @@ -12,7 +12,6 @@ const CHeaderNavLink = props=>{ className, cssModule, // - innerRef, ...attributes } = props; @@ -24,7 +23,7 @@ const CHeaderNavLink = props=>{ ), cssModule); return ( - + ); } diff --git a/src/CIconRaw.js b/src/CIconRaw.js index 4c96b36c..43f9f8f8 100644 --- a/src/CIconRaw.js +++ b/src/CIconRaw.js @@ -42,7 +42,11 @@ const CIconRaw = props=>{ if (content) { return content } else if (React.icons) { - return React.icons[iconName] ? React.icons[iconName] : console.log(iconName) + return React.icons[iconName] ? + React.icons[iconName] : + React.icons['cil'+iconName] ? + React.icons['cil'+iconName] : + console.log('Not existing icon: '+iconName) } return content; })(); diff --git a/src/CInput.js b/src/CInput.js index 667162f4..4fef8300 100644 --- a/src/CInput.js +++ b/src/CInput.js @@ -27,10 +27,8 @@ const CInput = props=>{ let fields = useRef({}).current; const getRef = (ref)=>{ - if (props.innerRef) { - props.innerRef(ref); - } fields.ref = ref; + innerRef && innerRef(ref); } const focus = ()=>{ diff --git a/src/CModal.js b/src/CModal.js index dad471ba..16011bd1 100644 --- a/src/CModal.js +++ b/src/CModal.js @@ -15,49 +15,11 @@ function noop() { } const FadePropTypes = PropTypes.shape(CFade.propTypes); -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, - // - innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), - isOpen: PropTypes.bool, - autoFocus: PropTypes.bool, - centered: PropTypes.bool, - size: PropTypes.string, - toggle: PropTypes.func, - keyboard: PropTypes.bool, - role: PropTypes.string, - labelledBy: PropTypes.string, - backdrop: PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.oneOf(['static']) - ]), - onEnter: PropTypes.func, - onExit: PropTypes.func, - onOpened: PropTypes.func, - onClosed: PropTypes.func, - wrapClassName: PropTypes.string, - modalClassName: PropTypes.string, - backdropClassName: PropTypes.string, - contentClassName: PropTypes.string, - external: PropTypes.node, - fade: PropTypes.bool, - zIndex: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - ]), - backdropTransition: FadePropTypes, - modalTransition: FadePropTypes -}; - -const propsToOmit = Object.keys(propTypes); - //component - CoreUI / CModal const CModal = props=>{ - const [isOpen, setIsOpen] = useState(props.isOpen); + const [isOpen, setIsOpen] = useState(props.show); const fields = useRef({ _element: null, @@ -137,7 +99,7 @@ const CModal = props=>{ } const handleEscape = e=>{ - if (props.isOpen && props.keyboard && e.keyCode === 27 && props.toggle) { + if (props.show && props.keyboard && e.keyCode === 27 && props.toggle) { e.preventDefault(); e.stopPropagation(); props.toggle(e); @@ -233,7 +195,7 @@ const CModal = props=>{ // render const renderModalDialog = ()=>{ - const attributes = omit(props, propsToOmit); + const attributes = omit(props, Object.keys(CModal.propTypes)); const dialogBaseClass = 'modal-dialog'; return (
    { } - if (props.isOpen && !fields.lastProps.isOpen){ - setState(isOpen, props.isOpen, setIsOpen); + if (props.show && !fields.lastProps.show){ + setState(isOpen, props.show, setIsOpen); } if (!fields.firstRender){ if (isOpen && !fields.lastIsOpen){ @@ -277,7 +239,7 @@ const CModal = props=>{ wrapClassName, modalClassName, backdropClassName, - isOpen, + show: isOpen, backdrop, role, labelledBy, @@ -348,10 +310,44 @@ const CModal = props=>{ } -CModal.propTypes = propTypes; +CModal.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + show: PropTypes.bool, + autoFocus: PropTypes.bool, + centered: PropTypes.bool, + size: PropTypes.string, + toggle: PropTypes.func, + keyboard: PropTypes.bool, + role: PropTypes.string, + labelledBy: PropTypes.string, + backdrop: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.oneOf(['static']) + ]), + onEnter: PropTypes.func, + onExit: PropTypes.func, + onOpened: PropTypes.func, + onClosed: PropTypes.func, + wrapClassName: PropTypes.string, + modalClassName: PropTypes.string, + backdropClassName: PropTypes.string, + contentClassName: PropTypes.string, + external: PropTypes.node, + fade: PropTypes.bool, + zIndex: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + ]), + backdropTransition: FadePropTypes, + modalTransition: FadePropTypes +}; CModal.defaultProps = { - isOpen: false, + show: false, autoFocus: true, centered: false, role: 'dialog', diff --git a/src/CNavLink.js b/src/CNavLink.js index 9e0dfd27..222dffc5 100644 --- a/src/CNavLink.js +++ b/src/CNavLink.js @@ -24,7 +24,7 @@ const CNavLink = props=>{ ), cssModule); return ( - + ); } diff --git a/src/CPopover.js b/src/CPopover.js index 66f9ace9..94f45b3a 100644 --- a/src/CPopover.js +++ b/src/CPopover.js @@ -45,7 +45,7 @@ const CPopover = props=>{ diff --git a/src/CPopperContent.js b/src/CPopperContent.js index 32a1165b..da90868b 100644 --- a/src/CPopperContent.js +++ b/src/CPopperContent.js @@ -49,6 +49,7 @@ const CPopperContent = props=>{ const getRef = ref=>{ fields._element = ref; + props.innerRef && props.innerRef(); } const handlePlacementChange = data=>{ @@ -82,7 +83,8 @@ const CPopperContent = props=>{ className, cssModule, // - isOpen, + innerRef, + show, flip, target, offset, @@ -138,7 +140,7 @@ const CPopperContent = props=>{ setTargetNode(getTarget(props.target)); - if (props.isOpen) { + if (props.show) { return props.container === 'inline' ? renderChildren() : ReactDOM.createPortal((
    {renderChildren()}
    ), getContainerNode()); @@ -154,11 +156,12 @@ CPopperContent.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), placement: PropTypes.string, placementPrefix: PropTypes.string, arrowClassName: PropTypes.string, hideArrow: PropTypes.bool, - isOpen: PropTypes.bool.isRequired, + show: PropTypes.bool.isRequired, offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), fallbackPlacement: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), flip: PropTypes.bool, @@ -172,7 +175,7 @@ CPopperContent.defaultProps = { boundariesElement: 'scrollParent', placement: 'auto', hideArrow: false, - isOpen: false, + show: false, offset: 0, fallbackPlacement: 'flip', flip: true, diff --git a/src/CSidebar.js b/src/CSidebar.js index 71c40f66..166bb943 100644 --- a/src/CSidebar.js +++ b/src/CSidebar.js @@ -15,6 +15,7 @@ const CSidebar = props=>{ tag: Tag, children, className, + // innerRef, breakpoint, show, @@ -32,8 +33,13 @@ const CSidebar = props=>{ } = props; const [isOpen, setIsOpen] = useState(show); - const compData = useRef({reRender:false}).current; - const ref = useRef(); + const compData = useRef({reRender:false, ref: {}}).current; + + //let ref={}; + const reference = (r)=>{ + compData.ref.current = r; + innerRef && innerRef(r); + } //methods @@ -42,7 +48,7 @@ const CSidebar = props=>{ onChange && onChange('close'); } const isOnMobile = ()=>{ - return Boolean(getComputedStyle(ref.current).getPropertyValue('--is-mobile')) + return Boolean(getComputedStyle(compData.ref.current).getPropertyValue('--is-mobile')) } const onSidebarClick = (e)=>{ const hiddingElementClicked = e.target.className.includes && e.target.className.includes('c-sidebar-nav-link') @@ -113,7 +119,7 @@ const CSidebar = props=>{ dropdownMode: dropdownMode, state }}> - + {children} @@ -125,7 +131,7 @@ const CSidebar = props=>{ dropdownMode: dropdownMode, state }}> - + {children} diff --git a/src/CSidebarClose.js b/src/CSidebarClose.js index d5744e8f..1aa02498 100644 --- a/src/CSidebarClose.js +++ b/src/CSidebarClose.js @@ -32,7 +32,9 @@ const CSidebarClose = props=>{ CSidebarClose.propTypes = { children: PropTypes.node, - className: PropTypes.string + className: PropTypes.string, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]) }; CSidebarClose.defaultProps = { diff --git a/src/CSidebarNav.js b/src/CSidebarNav.js index 0612570c..62eaaf84 100644 --- a/src/CSidebarNav.js +++ b/src/CSidebarNav.js @@ -68,7 +68,7 @@ const CSidebarNav = props=>{ icon = {item.icon} to = {item.url} badge = {badgeProps} - linkClassName={props.location.pathname.indexOf(item.url)>-1 ? 'c-active' : null} + linkClassName={props.location&&props.location.pathname.indexOf(item.url)>-1 ? 'c-active' : null} linkProps={{disabled}} > {item.name} @@ -115,8 +115,8 @@ const CSidebarNav = props=>{ // select nav type const navType = (item, idx)=>{ return ( - item.title ? navTitle(item, idx) //+ - : item.divider ? navDivider(item, idx) //+ + item.title ? navTitle(item, idx) + : item.divider ? navDivider(item, idx) : item.label ? navLabel(item, idx) : item.children ? navDropdown(item, idx) : navItem(item, idx) @@ -145,14 +145,11 @@ const CSidebarNav = props=>{ // sidebar-nav root return ( - - + {navConfig.items ? navList(navConfig.items) : null} {children} - - + ); - } CSidebarNav.propTypes = { @@ -166,15 +163,7 @@ CSidebarNav.propTypes = { CSidebarNav.defaultProps = { tag: 'ul', - navConfig: { - items: [ - { - name: 'Dashboard', - url: '/dashboard', - icon: 'icon-speedometer', - badge: { variant: 'info', text: 'NEW' } - }] - } + navConfig: {} }; export default CSidebarNav; diff --git a/src/CSidebarNavLink.js b/src/CSidebarNavLink.js index 47e4a2bb..a2f0b446 100644 --- a/src/CSidebarNavLink.js +++ b/src/CSidebarNavLink.js @@ -44,7 +44,7 @@ const CSidebarNavLink = props=>{ badgeClassName ); return ( - + {icon?:''} {fontIcon?:''} {children} @@ -54,7 +54,7 @@ const CSidebarNavLink = props=>{ } return ( - + ); } @@ -64,6 +64,7 @@ CSidebarNavLink.propTypes = { className: PropTypes.string, custom: PropTypes.bool, // + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]), icon: PropTypes.oneOfType(['string', 'object']), label: PropTypes.bool, fontIcon: PropTypes.string, diff --git a/src/CToast.js b/src/CToast.js index a9652286..32db467e 100644 --- a/src/CToast.js +++ b/src/CToast.js @@ -112,7 +112,7 @@ const CToast = props=>{ ); return ( - + ); } diff --git a/src/CTooltip.js b/src/CTooltip.js index 7c840d1c..2651f0f9 100644 --- a/src/CTooltip.js +++ b/src/CTooltip.js @@ -43,9 +43,9 @@ const CTooltip = props=>{ return ( @@ -57,6 +57,7 @@ CTooltip.propTypes = { ...CTooltipPopoverWrapper.propTypes, custom: PropTypes.bool, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), defaultOpen: PropTypes.bool } diff --git a/src/CTooltipPopoverWrapper.js b/src/CTooltipPopoverWrapper.js index f825f886..a1440daf 100644 --- a/src/CTooltipPopoverWrapper.js +++ b/src/CTooltipPopoverWrapper.js @@ -12,36 +12,6 @@ import { // global -export const propTypes = { - className: PropTypes.string, - cssModule: PropTypes.object, - // - innerRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.string, - PropTypes.object - ]), - placement: PropTypes.oneOf(PopperPlacements), - target: targetPropType.isRequired, - container: targetPropType, - isOpen: PropTypes.bool, - disabled: PropTypes.bool, - hideArrow: PropTypes.bool, - boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), - innerClassName: PropTypes.string, - arrowClassName: PropTypes.string, - toggle: PropTypes.func, - autohide: PropTypes.bool, - placementPrefix: PropTypes.string, - delay: PropTypes.oneOfType([ - PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }), - PropTypes.number - ]), - modifiers: PropTypes.object, - offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - trigger: PropTypes.string, -}; - const DEFAULT_DELAYS = { show: 0, hide: 250 @@ -62,7 +32,7 @@ const CTooltipPopoverWrapper = props=>{ innerRef, innerClassName, target, - isOpen, + show: isOpen, hideArrow, boundariesElement, placement, @@ -281,20 +251,20 @@ const CTooltipPopoverWrapper = props=>{ //render - fields.isOpen = props.isOpen; + fields.isOpen = props.show; fields.autohide = props.autohide; fields.trigger = props.trigger; fields.delay = props.delay; fields.toggle = props.toggle; fields.disabled = props.disabled; - if (!props.isOpen) { + if (!props.show) { return null; } updateTarget(); - const attributes = omit(props, Object.keys(propTypes)); + const attributes = omit(props, Object.keys(CTooltipPopoverWrapper.propTypes)); const popperClasses = mapToCssModules(className, cssModule); const classes = mapToCssModules(innerClassName, cssModule); @@ -302,7 +272,7 @@ const CTooltipPopoverWrapper = props=>{ { } -CTooltipPopoverWrapper.propTypes = propTypes; +CTooltipPopoverWrapper.propTypes = { + className: PropTypes.string, + cssModule: PropTypes.object, + // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), + placement: PropTypes.oneOf(PopperPlacements), + target: targetPropType.isRequired, + container: targetPropType, + show: PropTypes.bool, + disabled: PropTypes.bool, + hideArrow: PropTypes.bool, + boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), + innerClassName: PropTypes.string, + arrowClassName: PropTypes.string, + toggle: PropTypes.func, + autohide: PropTypes.bool, + placementPrefix: PropTypes.string, + delay: PropTypes.oneOfType([ + PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }), + PropTypes.number + ]), + modifiers: PropTypes.object, + offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + trigger: PropTypes.string, +}; CTooltipPopoverWrapper.defaultProps = { - isOpen: false, + show: false, hideArrow: false, autohide: false, delay: DEFAULT_DELAYS, diff --git a/src/CWidgetBrand.js b/src/CWidgetBrand.js index e68de122..fcc9384e 100644 --- a/src/CWidgetBrand.js +++ b/src/CWidgetBrand.js @@ -107,7 +107,7 @@ const CWidgetBrand = props=>{ //const classes = mapToCssModules(classNames(classCard, className), cssModule); return ( - + {children} @@ -133,8 +133,9 @@ CWidgetBrand.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), dataBox: PropTypes.func, - + //old color: PropTypes.string, rightHeader: PropTypes.string, rightFooter: PropTypes.string, diff --git a/src/CWidgetDropdown.js b/src/CWidgetDropdown.js index c6233989..c5f3108d 100644 --- a/src/CWidgetDropdown.js +++ b/src/CWidgetDropdown.js @@ -76,7 +76,7 @@ const CWidgetDropdown = props=>{ progress.style = classNames('progress-xs my-3', progress.style); return ( - + @@ -102,12 +102,13 @@ CWidgetDropdown.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), header: PropTypes.string, text: PropTypes.string, color: PropTypes.string, toggle: PropTypes.func, dropdownSlot: PropTypes.node, - + //old mainText: PropTypes.string, smallText: PropTypes.string, value: PropTypes.string, diff --git a/src/CWidgetIcon.js b/src/CWidgetIcon.js index 1cb951d2..9941f275 100644 --- a/src/CWidgetIcon.js +++ b/src/CWidgetIcon.js @@ -60,7 +60,7 @@ const CWidgetIcon = props=>{ }; return ( - +
    {blockIcon(card.icon)} @@ -81,6 +81,7 @@ CWidgetIcon.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), header: PropTypes.string, mainText: PropTypes.string, icon: PropTypes.string, diff --git a/src/CWidgetProgress.js b/src/CWidgetProgress.js index 31eea7f1..c4a1c9fa 100644 --- a/src/CWidgetProgress.js +++ b/src/CWidgetProgress.js @@ -42,7 +42,7 @@ const CWidgetProgress = props=>{ progress.style = classNames('progress-xs my-3', progress.style); return ( - +
    {header}
    {mainText}
    @@ -58,6 +58,7 @@ CWidgetProgress.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), header: PropTypes.string, mainText: PropTypes.string, smallText: PropTypes.string, diff --git a/src/CWidgetProgressIcon.js b/src/CWidgetProgressIcon.js index 9360cadb..2b68ba36 100644 --- a/src/CWidgetProgressIcon.js +++ b/src/CWidgetProgressIcon.js @@ -41,7 +41,7 @@ const CWidgetProgressIcon = props=>{ progress.style = classNames('progress-xs mt-3 mb-0', progress.style); return ( - +
    @@ -58,6 +58,7 @@ CWidgetProgressIcon.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), header: PropTypes.string, icon: PropTypes.string, color: PropTypes.string, @@ -67,7 +68,7 @@ CWidgetProgressIcon.propTypes = { CWidgetProgressIcon.defaultProps = { header: '87.500', - icon: 'icon-people', + icon: 'cil-people', color: 'info', value: '25', children: 'Visitors', diff --git a/src/CWidgetSimple.js b/src/CWidgetSimple.js index bd5483ba..88cb0b3c 100644 --- a/src/CWidgetSimple.js +++ b/src/CWidgetSimple.js @@ -36,7 +36,7 @@ const CWidgetSimple = props=>{ const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); return ( - + {/* @@ -66,6 +66,7 @@ CWidgetSimple.propTypes = { className: PropTypes.string, cssModule: PropTypes.object, // + innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]), header: PropTypes.string, mainText: PropTypes.string, color: PropTypes.string, From 7bd82c8587f96d1ca81a69835311dda7885e06db Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 17 Feb 2020 13:10:56 +0100 Subject: [PATCH 004/198] fix: demo cleanup --- demo/src/containers/DefaultLayout/DefaultFooter.js | 7 ++++--- demo/src/containers/DefaultLayout/DefaultLayout.js | 12 ++++++------ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/demo/src/containers/DefaultLayout/DefaultFooter.js b/demo/src/containers/DefaultLayout/DefaultFooter.js index 4c68e460..9ecd3da2 100644 --- a/demo/src/containers/DefaultLayout/DefaultFooter.js +++ b/demo/src/containers/DefaultLayout/DefaultFooter.js @@ -1,17 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import {CLink} from '../../../../src'; class DefaultFooter extends Component { render() { return (
    - CoreUI - © 2019 creativeLabs. + CoreUI + © 2020 creativeLabs.
    Powered by - CoreUI for React + CoreUI for React
    ); diff --git a/demo/src/containers/DefaultLayout/DefaultLayout.js b/demo/src/containers/DefaultLayout/DefaultLayout.js index dd458407..bbbffdf0 100644 --- a/demo/src/containers/DefaultLayout/DefaultLayout.js +++ b/demo/src/containers/DefaultLayout/DefaultLayout.js @@ -155,7 +155,7 @@ this.$root.$on('toggle-sidebar', () => { sidebarShow={this.state.isAsideOpen} toggleAside={this.toggleAside} /> -
    +
    {
    + + + + +
    - - - - -
    ); } From 71088829915be675fc66ea99345f47a44bfdb899 Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 17 Feb 2020 14:05:26 +0100 Subject: [PATCH 005/198] fix: components cleanup --- src/CCarouselItem.js | 1 - src/{CChartsOld.js => CCharts2.js} | 0 src/CDropdownCustom.js | 6 +-- src/CIcon.js | 2 - src/CIconRaw.js | 4 +- src/CModal.js | 2 - src/CSidebar.js | 2 - src/CWidgetBrand.js | 38 --------------- src/CWidgetBrandOld.js | 77 ------------------------------ src/CWidgetDropdown.js | 44 ----------------- src/README.md | 21 -------- src/Shared/Slot.js | 13 +---- src/Shared/helper.js | 5 ++ 13 files changed, 10 insertions(+), 205 deletions(-) rename src/{CChartsOld.js => CCharts2.js} (100%) delete mode 100644 src/CWidgetBrandOld.js diff --git a/src/CCarouselItem.js b/src/CCarouselItem.js index ae32e6cc..de40a2e8 100644 --- a/src/CCarouselItem.js +++ b/src/CCarouselItem.js @@ -32,7 +32,6 @@ const CCarouselItem = props=>{ } const onEntering = (node, isAppearing)=>{ - // getting this variable triggers a reflow const offsetHeight = node.offsetHeight; setStartAnimation(true); props.onEntering(node, isAppearing); diff --git a/src/CChartsOld.js b/src/CCharts2.js similarity index 100% rename from src/CChartsOld.js rename to src/CCharts2.js diff --git a/src/CDropdownCustom.js b/src/CDropdownCustom.js index 2480122e..ce9a09da 100644 --- a/src/CDropdownCustom.js +++ b/src/CDropdownCustom.js @@ -36,7 +36,6 @@ const CDropdownCustom = props=>{ cssModule, // innerRef, - dropup, show, group, size, @@ -189,7 +188,7 @@ const CDropdownCustom = props=>{ fields.disabled = props.disabled; fields.isOpen = props.show; - const direction = (props.direction === 'down' && dropup) ? 'up' : props.direction; + const direction = (props.direction === 'down') ? 'up' : props.direction; attributes.tag = attributes.tag || (inNav ? 'li' : 'div'); @@ -222,7 +221,7 @@ const CDropdownCustom = props=>{ @@ -251,7 +250,6 @@ CDropdownCustom.propTypes = { inNav: PropTypes.bool, inNavbar: PropTypes.bool, setActiveFromChild: PropTypes.bool, - dropup: deprecated(PropTypes.bool, 'Please use the prop "direction" with the value "up".')// }; CDropdownCustom.defaultProps = { diff --git a/src/CIcon.js b/src/CIcon.js index 9c18af66..379401c4 100644 --- a/src/CIcon.js +++ b/src/CIcon.js @@ -32,8 +32,6 @@ const CIcon = props=>{ } } - //gdy modulowo sa zdefiniowane np Button - musialbyby miec wszystkie bo zostana przetlumaczone - if (type=='svg'){ return ( diff --git a/src/CIconRaw.js b/src/CIconRaw.js index 43f9f8f8..eb07393b 100644 --- a/src/CIconRaw.js +++ b/src/CIconRaw.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import {mapToCssModules} from './Shared/helper.js'; +import {mapToCssModules, colog} from './Shared/helper.js'; import style from './CIcon.module.css'; //component - CoreUI / CIconRaw @@ -46,7 +46,7 @@ const CIconRaw = props=>{ React.icons[iconName] : React.icons['cil'+iconName] ? React.icons['cil'+iconName] : - console.log('Not existing icon: '+iconName) + colog('Not existing icon: '+iconName) } return content; })(); diff --git a/src/CModal.js b/src/CModal.js index 16011bd1..0adeeb47 100644 --- a/src/CModal.js +++ b/src/CModal.js @@ -139,7 +139,6 @@ const CModal = props=>{ } if (CModal.openCount <= 1) { const modalOpenClassName = mapToCssModules('modal-open', props.cssModule); - // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened` const modalOpenClassNameRegex = new RegExp(`(^| )${modalOpenClassName}( |$)`); document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim(); } @@ -156,7 +155,6 @@ const CModal = props=>{ // effect useEffect(() => { - //did mount if (props.onEnter) { props.onEnter(); } diff --git a/src/CSidebar.js b/src/CSidebar.js index 166bb943..8cbe7892 100644 --- a/src/CSidebar.js +++ b/src/CSidebar.js @@ -81,8 +81,6 @@ const CSidebar = props=>{ compData.nextRender = true; - //console.log(isOpen); - // render const haveResponsiveClass = breakpoint && isOpen === 'responsive' diff --git a/src/CWidgetBrand.js b/src/CWidgetBrand.js index fcc9384e..2344f512 100644 --- a/src/CWidgetBrand.js +++ b/src/CWidgetBrand.js @@ -88,44 +88,6 @@ const CWidgetBrand = props=>{     ) - - const data = dataBox(); - const variant = data.variant; - - if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) { - return (null); - } - - const back = 'bg-' + variant; - const icon = 'my-4 icon text-white fa fa-' + variant; - const keys = Object.keys(data); - const vals = Object.values(data); - - const classCard = 'card'; - const classCardHeader = classNames(`${classCard}-header`, back, 'content-center'); - const classCardBody = classNames(`${classCard}-body`, 'row text-center'); - //const classes = mapToCssModules(classNames(classCard, className), cssModule); - - return ( - - - - {children} - - -
    -
    {vals[1]}
    -
    {keys[1]}
    -
    -
    -
    -
    {vals[2]}
    -
    {keys[2]}
    -
    -     -     - ); - } CWidgetBrand.propTypes = { diff --git a/src/CWidgetBrandOld.js b/src/CWidgetBrandOld.js deleted file mode 100644 index 7d9c750e..00000000 --- a/src/CWidgetBrandOld.js +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import {mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js'; -// -import CCard from './CCard'; -//import CProgress from './CProgress'; -import CCardBody from './CCardBody'; -import CCardHeader from './CCardHeader'; -//import CCardFooter from './CCardFooter'; - -//component - CoreUI / CWidget3 - -const CWidget3 = props=>{ - - const { - children, - className, - cssModule, - // - dataBox, - ...attributes - } = props; - - const data = dataBox(); - const variant = data.variant; - - if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) { - return (null); - } - - const back = 'bg-' + variant; - const icon = 'my-4 icon text-white fa fa-' + variant; - const keys = Object.keys(data); - const vals = Object.values(data); - - const classCard = 'card'; - const classCardHeader = classNames(`${classCard}-header`, back, 'content-center'); - const classCardBody = classNames(`${classCard}-body`, 'row text-center'); - const classes = mapToCssModules(classNames(classCard, className), cssModule); - - return ( - - - - {children} - - -
    -
    {vals[1]}
    -
    {keys[1]}
    -
    -
    -
    -
    {vals[2]}
    -
    {keys[2]}
    -
    -     -     - ); - -} - -CWidget3.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, - // - dataBox: PropTypes.func -}; - -CWidget3.defaultProps = { - dataBox: () => ({ variant: 'facebook', friends: '-', feeds: '-' }), -}; - -export default CWidget3; diff --git a/src/CWidgetDropdown.js b/src/CWidgetDropdown.js index c5f3108d..8a75a89a 100644 --- a/src/CWidgetDropdown.js +++ b/src/CWidgetDropdown.js @@ -51,50 +51,6 @@ const CWidgetDropdown = props=>{     ) - // - - const onToggle = ()=>{ - setIsOpen(!isOpen); - toggle && toggle(isOpen); - } - - const progress = { style: '', color: color, value: value }; - const card = { style: '', bgColor: '' }; - - if (variant === 'inverse') { - progress.style = 'progress-white'; - progress.color = ''; - card.style = 'text-white'; - card.bgColor = 'bg-' + color; - } - - const classes = mapToCssModules(classNames( - className, - card.style, - card.bgColor - ), cssModule); - progress.style = classNames('progress-xs my-3', progress.style); - - return ( - - - - - - - Action - Another action - Something else here - - - -
    {header}
    -
    {mainText}
    -     -
    {children}
    -     - ); - } CWidgetDropdown.propTypes = { diff --git a/src/README.md b/src/README.md index f2761aa5..e69de29b 100644 --- a/src/README.md +++ b/src/README.md @@ -1,21 +0,0 @@ -### [CoreUI for React](https://coreui.io/react) base components - -##### Layout components - -- [Breadcrumb](./Breadcrumb.md) -- [Footer](./Footer.md) -- [Header](./Header.md) -- [HeaderDropdown](./HeaderDropdown.md) -- [NavbarBrand](./NavbarBrand.md) -- [Sidebar](./Sidebar.md) -- [SidebarFooter](./SidebarFooter.md) -- [SidebarForm](./SidebarForm.md) -- [SidebarHeader](./SidebarHeader.md) -- [SidebarMinimizer](./SidebarMinimizer.md) -- [SidebarNav](./SidebarNav.md) -- [SidebarToggler](./SidebarToggler.md) -- [Switch](./Switch.md) - - -##### Installation: -`npm install @coreui/react` diff --git a/src/Shared/Slot.js b/src/Shared/Slot.js index ccdfbc80..74fe598c 100644 --- a/src/Shared/Slot.js +++ b/src/Shared/Slot.js @@ -10,19 +10,8 @@ const Slot = (props)=>{ ...attributes } = props; - //Context.slotData = attributes; - - //console.log(attributes); - - //alert(attributes.length); - /* - var clonedElementWithMoreProps = React.cloneElement( - children, - attributes - ); - */ - return content?content:children?children:''; + } export default Slot; diff --git a/src/Shared/helper.js b/src/Shared/helper.js index 9b5bf3b0..e444cc80 100644 --- a/src/Shared/helper.js +++ b/src/Shared/helper.js @@ -214,6 +214,11 @@ const mapToCssModules = (className = '', cssModule = globalCssModule)=>{ .join(' '); } +export function colog() { + if (process.env.NODE_ENV === 'development') + console.log.apply(this, arguments); +} + let warned = {}; export function warnOnce(message) { if (!warned[message]) { From 4bbe3d3ac426902dc345e63c629a30470953c0c6 Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 17 Feb 2020 15:55:57 +0100 Subject: [PATCH 006/198] chore: cleanup --- {demo => demo--}/src/App.css | 0 {demo => demo--}/src/App.js | 0 {demo => demo--}/src/App.test.js | 0 {demo => demo--}/src/_nav.js | 0 {demo => demo--}/src/assets/.gitkeep | 0 {demo => demo--}/src/assets/img/avatars/1.jpg | Bin {demo => demo--}/src/assets/img/avatars/2.jpg | Bin {demo => demo--}/src/assets/img/avatars/3.jpg | Bin {demo => demo--}/src/assets/img/avatars/4.jpg | Bin {demo => demo--}/src/assets/img/avatars/5.jpg | Bin {demo => demo--}/src/assets/img/avatars/6.jpg | Bin {demo => demo--}/src/assets/img/avatars/7.jpg | Bin {demo => demo--}/src/assets/img/avatars/8.jpg | Bin .../assets/img/brand/coreui-base-white.svg | 0 .../src/assets/img/brand/coreui-base.svg | 0 .../img/brand/coreui-pro-base-white.svg | 0 .../src/assets/img/brand/coreui-pro-base.svg | 0 .../assets/img/brand/coreui-signet-white.svg | 0 .../src/assets/img/brand/coreui-signet.svg | 0 .../src/assets/img/brand/logo.svg | 0 .../src/assets/img/brand/sygnet.svg | 0 {demo => demo--}/src/assets/img/favicon.png | Bin .../containers/DefaultLayout/DefaultAside.js | 0 .../containers/DefaultLayout/DefaultFooter.js | 0 .../containers/DefaultLayout/DefaultHeader.js | 0 .../DefaultLayout/DefaultHeaderDropdown.js | 0 .../containers/DefaultLayout/DefaultLayout.js | 0 .../DefaultLayout/DefaultSidebar.js | 0 {demo => demo--}/src/index.css | 0 {demo => demo--}/src/index.js | 0 {demo => demo--}/src/polyfill.js | 0 {demo => demo--}/src/registerServiceWorker.js | 0 {demo => demo--}/src/routes.js | 0 {demo => demo--}/src/scss/style.css | 0 .../src/views/Dashboard/Dashboard.js | 0 .../src/views/Dashboard/package.json | 0 link.sh | 3 + nwb.config.js | 4 +- package.json | 14 +++-- tests/Aside.test.js | 29 ---------- tests/AsideToggler.test.js | 34 ----------- tests/Footer.test.js | 20 +++---- tests/Header.test.js | 21 ++++--- tests/HeaderDropdown.test.js | 26 --------- tests/NavbarBrand.test.js | 27 --------- tests/Sidebar.test.js | 20 +++---- tests/SidebarFooter.test.js | 16 ------ tests/SidebarForm.test.js | 16 ------ tests/SidebarHeader.test.js | 16 ------ tests/SidebarMinimizer.test.js | 26 --------- tests/SidebarToggler.test.js | 34 ----------- tests/Switch.test.js | 54 +++++++++--------- 52 files changed, 71 insertions(+), 289 deletions(-) rename {demo => demo--}/src/App.css (100%) rename {demo => demo--}/src/App.js (100%) rename {demo => demo--}/src/App.test.js (100%) rename {demo => demo--}/src/_nav.js (100%) rename {demo => demo--}/src/assets/.gitkeep (100%) rename {demo => demo--}/src/assets/img/avatars/1.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/2.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/3.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/4.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/5.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/6.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/7.jpg (100%) rename {demo => demo--}/src/assets/img/avatars/8.jpg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-base-white.svg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-base.svg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-pro-base-white.svg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-pro-base.svg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-signet-white.svg (100%) rename {demo => demo--}/src/assets/img/brand/coreui-signet.svg (100%) rename {demo => demo--}/src/assets/img/brand/logo.svg (100%) rename {demo => demo--}/src/assets/img/brand/sygnet.svg (100%) rename {demo => demo--}/src/assets/img/favicon.png (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultAside.js (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultFooter.js (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultHeader.js (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultHeaderDropdown.js (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultLayout.js (100%) rename {demo => demo--}/src/containers/DefaultLayout/DefaultSidebar.js (100%) rename {demo => demo--}/src/index.css (100%) rename {demo => demo--}/src/index.js (100%) rename {demo => demo--}/src/polyfill.js (100%) rename {demo => demo--}/src/registerServiceWorker.js (100%) rename {demo => demo--}/src/routes.js (100%) rename {demo => demo--}/src/scss/style.css (100%) rename {demo => demo--}/src/views/Dashboard/Dashboard.js (100%) rename {demo => demo--}/src/views/Dashboard/package.json (100%) create mode 100644 link.sh delete mode 100644 tests/Aside.test.js delete mode 100644 tests/AsideToggler.test.js delete mode 100644 tests/HeaderDropdown.test.js delete mode 100644 tests/NavbarBrand.test.js delete mode 100644 tests/SidebarFooter.test.js delete mode 100644 tests/SidebarForm.test.js delete mode 100644 tests/SidebarHeader.test.js delete mode 100644 tests/SidebarMinimizer.test.js delete mode 100644 tests/SidebarToggler.test.js diff --git a/demo/src/App.css b/demo--/src/App.css similarity index 100% rename from demo/src/App.css rename to demo--/src/App.css diff --git a/demo/src/App.js b/demo--/src/App.js similarity index 100% rename from demo/src/App.js rename to demo--/src/App.js diff --git a/demo/src/App.test.js b/demo--/src/App.test.js similarity index 100% rename from demo/src/App.test.js rename to demo--/src/App.test.js diff --git a/demo/src/_nav.js b/demo--/src/_nav.js similarity index 100% rename from demo/src/_nav.js rename to demo--/src/_nav.js diff --git a/demo/src/assets/.gitkeep b/demo--/src/assets/.gitkeep similarity index 100% rename from demo/src/assets/.gitkeep rename to demo--/src/assets/.gitkeep diff --git a/demo/src/assets/img/avatars/1.jpg b/demo--/src/assets/img/avatars/1.jpg similarity index 100% rename from demo/src/assets/img/avatars/1.jpg rename to demo--/src/assets/img/avatars/1.jpg diff --git a/demo/src/assets/img/avatars/2.jpg b/demo--/src/assets/img/avatars/2.jpg similarity index 100% rename from demo/src/assets/img/avatars/2.jpg rename to demo--/src/assets/img/avatars/2.jpg diff --git a/demo/src/assets/img/avatars/3.jpg b/demo--/src/assets/img/avatars/3.jpg similarity index 100% rename from demo/src/assets/img/avatars/3.jpg rename to demo--/src/assets/img/avatars/3.jpg diff --git a/demo/src/assets/img/avatars/4.jpg b/demo--/src/assets/img/avatars/4.jpg similarity index 100% rename from demo/src/assets/img/avatars/4.jpg rename to demo--/src/assets/img/avatars/4.jpg diff --git a/demo/src/assets/img/avatars/5.jpg b/demo--/src/assets/img/avatars/5.jpg similarity index 100% rename from demo/src/assets/img/avatars/5.jpg rename to demo--/src/assets/img/avatars/5.jpg diff --git a/demo/src/assets/img/avatars/6.jpg b/demo--/src/assets/img/avatars/6.jpg similarity index 100% rename from demo/src/assets/img/avatars/6.jpg rename to demo--/src/assets/img/avatars/6.jpg diff --git a/demo/src/assets/img/avatars/7.jpg b/demo--/src/assets/img/avatars/7.jpg similarity index 100% rename from demo/src/assets/img/avatars/7.jpg rename to demo--/src/assets/img/avatars/7.jpg diff --git a/demo/src/assets/img/avatars/8.jpg b/demo--/src/assets/img/avatars/8.jpg similarity index 100% rename from demo/src/assets/img/avatars/8.jpg rename to demo--/src/assets/img/avatars/8.jpg diff --git a/demo/src/assets/img/brand/coreui-base-white.svg b/demo--/src/assets/img/brand/coreui-base-white.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-base-white.svg rename to demo--/src/assets/img/brand/coreui-base-white.svg diff --git a/demo/src/assets/img/brand/coreui-base.svg b/demo--/src/assets/img/brand/coreui-base.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-base.svg rename to demo--/src/assets/img/brand/coreui-base.svg diff --git a/demo/src/assets/img/brand/coreui-pro-base-white.svg b/demo--/src/assets/img/brand/coreui-pro-base-white.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-pro-base-white.svg rename to demo--/src/assets/img/brand/coreui-pro-base-white.svg diff --git a/demo/src/assets/img/brand/coreui-pro-base.svg b/demo--/src/assets/img/brand/coreui-pro-base.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-pro-base.svg rename to demo--/src/assets/img/brand/coreui-pro-base.svg diff --git a/demo/src/assets/img/brand/coreui-signet-white.svg b/demo--/src/assets/img/brand/coreui-signet-white.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-signet-white.svg rename to demo--/src/assets/img/brand/coreui-signet-white.svg diff --git a/demo/src/assets/img/brand/coreui-signet.svg b/demo--/src/assets/img/brand/coreui-signet.svg similarity index 100% rename from demo/src/assets/img/brand/coreui-signet.svg rename to demo--/src/assets/img/brand/coreui-signet.svg diff --git a/demo/src/assets/img/brand/logo.svg b/demo--/src/assets/img/brand/logo.svg similarity index 100% rename from demo/src/assets/img/brand/logo.svg rename to demo--/src/assets/img/brand/logo.svg diff --git a/demo/src/assets/img/brand/sygnet.svg b/demo--/src/assets/img/brand/sygnet.svg similarity index 100% rename from demo/src/assets/img/brand/sygnet.svg rename to demo--/src/assets/img/brand/sygnet.svg diff --git a/demo/src/assets/img/favicon.png b/demo--/src/assets/img/favicon.png similarity index 100% rename from demo/src/assets/img/favicon.png rename to demo--/src/assets/img/favicon.png diff --git a/demo/src/containers/DefaultLayout/DefaultAside.js b/demo--/src/containers/DefaultLayout/DefaultAside.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultAside.js rename to demo--/src/containers/DefaultLayout/DefaultAside.js diff --git a/demo/src/containers/DefaultLayout/DefaultFooter.js b/demo--/src/containers/DefaultLayout/DefaultFooter.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultFooter.js rename to demo--/src/containers/DefaultLayout/DefaultFooter.js diff --git a/demo/src/containers/DefaultLayout/DefaultHeader.js b/demo--/src/containers/DefaultLayout/DefaultHeader.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultHeader.js rename to demo--/src/containers/DefaultLayout/DefaultHeader.js diff --git a/demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js b/demo--/src/containers/DefaultLayout/DefaultHeaderDropdown.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultHeaderDropdown.js rename to demo--/src/containers/DefaultLayout/DefaultHeaderDropdown.js diff --git a/demo/src/containers/DefaultLayout/DefaultLayout.js b/demo--/src/containers/DefaultLayout/DefaultLayout.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultLayout.js rename to demo--/src/containers/DefaultLayout/DefaultLayout.js diff --git a/demo/src/containers/DefaultLayout/DefaultSidebar.js b/demo--/src/containers/DefaultLayout/DefaultSidebar.js similarity index 100% rename from demo/src/containers/DefaultLayout/DefaultSidebar.js rename to demo--/src/containers/DefaultLayout/DefaultSidebar.js diff --git a/demo/src/index.css b/demo--/src/index.css similarity index 100% rename from demo/src/index.css rename to demo--/src/index.css diff --git a/demo/src/index.js b/demo--/src/index.js similarity index 100% rename from demo/src/index.js rename to demo--/src/index.js diff --git a/demo/src/polyfill.js b/demo--/src/polyfill.js similarity index 100% rename from demo/src/polyfill.js rename to demo--/src/polyfill.js diff --git a/demo/src/registerServiceWorker.js b/demo--/src/registerServiceWorker.js similarity index 100% rename from demo/src/registerServiceWorker.js rename to demo--/src/registerServiceWorker.js diff --git a/demo/src/routes.js b/demo--/src/routes.js similarity index 100% rename from demo/src/routes.js rename to demo--/src/routes.js diff --git a/demo/src/scss/style.css b/demo--/src/scss/style.css similarity index 100% rename from demo/src/scss/style.css rename to demo--/src/scss/style.css diff --git a/demo/src/views/Dashboard/Dashboard.js b/demo--/src/views/Dashboard/Dashboard.js similarity index 100% rename from demo/src/views/Dashboard/Dashboard.js rename to demo--/src/views/Dashboard/Dashboard.js diff --git a/demo/src/views/Dashboard/package.json b/demo--/src/views/Dashboard/package.json similarity index 100% rename from demo/src/views/Dashboard/package.json rename to demo--/src/views/Dashboard/package.json diff --git a/link.sh b/link.sh new file mode 100644 index 00000000..f23d5c29 --- /dev/null +++ b/link.sh @@ -0,0 +1,3 @@ +npm link ../coreui-pro-react-admin-template/node_modules/react +npm link ../coreui-pro-react-admin-template/node_modules/react-dom +npm link ../coreui-pro-react-admin-template/node_modules/react-router-dom diff --git a/nwb.config.js b/nwb.config.js index daf1fac2..9e8526d4 100644 --- a/nwb.config.js +++ b/nwb.config.js @@ -6,7 +6,9 @@ module.exports = { global: 'CoreUIReact', externals: { react: 'React', - 'react-router': 'ReactRouter' + 'react-dom': 'ReactDom', + 'react-router': 'ReactRouter', + 'react-router-dom': 'ReactRouterDom', } } } diff --git a/package.json b/package.json index b6a8d44a..10bf1541 100644 --- a/package.json +++ b/package.json @@ -30,13 +30,14 @@ "README.md" ], "scripts": { - "build": "nwb build-react-component", + "build": "nwb build-react-component --copy-files --no-demo", "clean": "nwb clean-module && nwb clean-demo", "start": "nwb serve-react-demo", "test": "nwb test-react", "test:coverage": "nwb test-react --coverage", "test:watch": "nwb test-react --server", - "lint": "eslint src" + "lint": "eslint src", + "link": "npm link && link.sh" }, "dependencies": { "classnames": "^2.2.6", @@ -49,6 +50,7 @@ "peerDependencies": { "@coreui/coreui": "3.0.0-rc.0", "react": "^16.12.0", + "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "mutationobserver-shim": "^0.3.3" }, @@ -65,12 +67,12 @@ "lodash.isobject": "^3.0.2", "lodash.tonumber": "^4.0.3", "nwb": "^0.23.0", - "react": "^16.12.0", "react-app-polyfill": "^1.0.6", - "react-dom": "^16.12.0", "react-popper": "^0.10.4", - "react-router-dom": "^5.1.2", - "sinon": "^5.1.1" + "sinon": "^5.1.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-router-dom": "^5.1.2" }, "repository": { "type": "git", diff --git a/tests/Aside.test.js b/tests/Aside.test.js deleted file mode 100644 index b7f3d226..00000000 --- a/tests/Aside.test.js +++ /dev/null @@ -1,29 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import { configure, mount, shallow } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import { spy } from 'sinon' - -import AppAside from 'src/Aside' - -configure({ adapter: new Adapter() }); - -describe('AppAside', () => { - it('renders aside with class="aside-menu"', () => { - expect(render(aside)) - .toContain('') - }); - it('calls componentDidMount', () => { - spy(AppAside.prototype, 'componentDidMount'); - - const wrapper = mount(); - expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true); - }); - it('should call isOffCanvas()', () => { - const isOffCanvas = spy(AppAside.prototype, 'isOffCanvas'); - shallow(); - expect(isOffCanvas.called).toBe(true); - }); -}) diff --git a/tests/AsideToggler.test.js b/tests/AsideToggler.test.js deleted file mode 100644 index 016a6887..00000000 --- a/tests/AsideToggler.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import { configure, mount } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import sinon from 'sinon'; - -import AppAsideToggler from 'src/AsideToggler' - -configure({ adapter: new Adapter() }); - -describe('AppAsideToggler', () => { - it('renders button with class="navbar-toggler"', () => { - expect(render()) - .toContain('') - }) - it('should call asideToggle', () => { - let component = mount(); - const instance = component.instance(); - const handleClickSpy = sinon.spy(instance, 'asideToggle'); - component.find('button').simulate('click'); - - expect(handleClickSpy.called).toBe(true); - }) - it('should call asideToggle mobile', () => { - let component = mount(); - const instance = component.instance(); - const handleClickSpy = sinon.spy(instance, 'asideToggle'); - component.find('button').simulate('click'); - - expect(handleClickSpy.called).toBe(true); - }) -}) diff --git a/tests/Footer.test.js b/tests/Footer.test.js index 62d8c1ee..ef7aef28 100644 --- a/tests/Footer.test.js +++ b/tests/Footer.test.js @@ -6,24 +6,24 @@ import { configure, mount, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import { spy } from 'sinon' -import AppFooter from 'src/Footer' +import CFooter from 'src/CFooter' configure({ adapter: new Adapter() }); -describe('AppFooter', () => { - it('renders footer with class="app-footer"', () => { - expect(render()) - .toContain('
    ') +describe('CFooter', () => { + it('renders footer with class="c-footer"', () => { + expect(render()) + .toContain('
    ') }); it('calls componentDidMount', () => { - spy(AppFooter.prototype, 'componentDidMount'); + spy(CFooter.prototype, 'componentDidMount'); - const wrapper = mount(); - expect(AppFooter.prototype.componentDidMount.calledOnce).toEqual(true); + const wrapper = mount(); + expect(CFooter.prototype.componentDidMount.calledOnce).toEqual(true); }); it('should call isFixed()', () => { - const isFixed = spy(AppFooter.prototype, 'isFixed'); - shallow(); + const isFixed = spy(CFooter.prototype, 'isFixed'); + shallow(); expect(isFixed.called).toBe(true); }); diff --git a/tests/Header.test.js b/tests/Header.test.js index 63e5a041..1a2b04e8 100644 --- a/tests/Header.test.js +++ b/tests/Header.test.js @@ -6,25 +6,24 @@ import { configure, mount, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import { spy } from 'sinon' -import AppHeader from 'src/Header' -import AppFooter from '../src/Footer'; +import CHeader from 'src/CHeader' configure({ adapter: new Adapter() }); -describe('AppHeader', () => { - it('renders header with class="app-header"', () => { - expect(render()) - .toContain('
    ') +describe('CHeader', () => { + it('renders header with class="c-header"', () => { + expect(render()) + .toContain('
    ') }); it('calls componentDidMount', () => { - spy(AppHeader.prototype, 'componentDidMount'); + spy(CHeader.prototype, 'componentDidMount'); - const wrapper = mount(); - expect(AppHeader.prototype.componentDidMount.calledOnce).toEqual(true); + const wrapper = mount(); + expect(CHeader.prototype.componentDidMount.calledOnce).toEqual(true); }); it('should call isFixed()', () => { - const isFixed = spy(AppHeader.prototype, 'isFixed'); - shallow(); + const isFixed = spy(CHeader.prototype, 'isFixed'); + shallow(); expect(isFixed.called).toBe(true); }); }) diff --git a/tests/HeaderDropdown.test.js b/tests/HeaderDropdown.test.js deleted file mode 100644 index dd596e40..00000000 --- a/tests/HeaderDropdown.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import { configure, mount } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' - -import AppHeaderDropdown from 'src/HeaderDropdown' -import sinon from 'sinon'; - -configure({ adapter: new Adapter() }); - -describe('AppHeaderDropdown', () => { - it('renders li with class="dropdown nav-item"', () => { - expect(render()).toContain('
  • ') - }) - it('dropdownOpen changed on toggle', () => { - - let component = mount(); - const instance = component.instance(); - - expect(instance.state.dropdownOpen).toBe(false); - instance.toggle(); - expect(instance.state.dropdownOpen).toBe(true); - }) -}) diff --git a/tests/NavbarBrand.test.js b/tests/NavbarBrand.test.js deleted file mode 100644 index 738f1021..00000000 --- a/tests/NavbarBrand.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import expect from 'expect'; -import React from 'react'; -import { renderToStaticMarkup as render } from 'react-dom/server'; - -import logo from '../demo/src/assets/img/brand/logo.svg' -import sygnet from '../demo/src/assets/img/brand/sygnet.svg' - -import AppNavbarBrand from 'src/NavbarBrand'; - -describe('AppNavbarBrand', () => { - it('renders anchor with class="navbar-brand"', () => { - expect(render()).toContain('class="navbar-brand"'); - }); - it('renders anchor with class="navbar-brand"', () => { - expect(render()).toContain('class="navbar-brand"'); - }); - it('renders anchor with class="navbar-brand"', () => { - expect(render()).toContain('class="navbar-brand"'); - }); - -}); diff --git a/tests/Sidebar.test.js b/tests/Sidebar.test.js index 082d1b01..cadbe3a1 100644 --- a/tests/Sidebar.test.js +++ b/tests/Sidebar.test.js @@ -6,24 +6,24 @@ import { configure, mount, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import { spy } from 'sinon' -import AppSidebar from 'src/Sidebar' +import CSidebar from 'src/CSidebar' configure({ adapter: new Adapter() }); -describe('AppSidebar', () => { - it('renders sidebar with class="sidebar"', () => { - expect(render()) - .toContain('
    ') +describe('CSidebar', () => { + it('renders sidebar with class="c-sidebar"', () => { + expect(render()) + .toContain('
    ') }); it('calls componentDidMount', () => { - spy(AppSidebar.prototype, 'componentDidMount'); + spy(CSidebar.prototype, 'componentDidMount'); - const wrapper = mount(); - expect(AppSidebar.prototype.componentDidMount.calledOnce).toBe(true); + const wrapper = mount(); + expect(CSidebar.prototype.componentDidMount.calledOnce).toBe(true); }); it('should call isFixed()', () => { - const isFixed = spy(AppSidebar.prototype, 'isFixed'); - shallow(); + const isFixed = spy(CSidebar.prototype, 'isFixed'); + shallow(); expect(isFixed.called).toBe(true); }); }) diff --git a/tests/SidebarFooter.test.js b/tests/SidebarFooter.test.js deleted file mode 100644 index 95805f6c..00000000 --- a/tests/SidebarFooter.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import SidebarFooter from 'src/SidebarFooter' - -describe('SidebarFooter', () => { - it('renders div with class="sidebar-footer"', () => { - expect(render(test)) - .toContain('
    test
    ') - }) - it('renders no div with class="sidebar-footer"', () => { - expect(render()) - .toNotContain('
    ') - }) -}) diff --git a/tests/SidebarForm.test.js b/tests/SidebarForm.test.js deleted file mode 100644 index 08f88115..00000000 --- a/tests/SidebarForm.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import AppSidebarForm from 'src/SidebarForm' - -describe('AppSidebarForm', () => { - it('renders div with class="sidebar-form"', () => { - expect(render(test)) - .toContain('
    test
    ') - }) - it('renders no div with class="sidebar-form"', () => { - expect(render()) - .toNotContain('
    ') - }) -}) diff --git a/tests/SidebarHeader.test.js b/tests/SidebarHeader.test.js deleted file mode 100644 index 42843b60..00000000 --- a/tests/SidebarHeader.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import AppSidebarHeader from 'src/SidebarHeader' - -describe('AppSidebarHeader', () => { - it('renders div with class="sidebar-header"', () => { - expect(render(test)) - .toContain('
    test
    ') - }) - it('renders no div with class="sidebar-header"', () => { - expect(render()) - .toNotContain('
    ') - }) -}) diff --git a/tests/SidebarMinimizer.test.js b/tests/SidebarMinimizer.test.js deleted file mode 100644 index cfa813e1..00000000 --- a/tests/SidebarMinimizer.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import { configure, mount } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import sinon from 'sinon'; - -import AppSidebarMinimizer from 'src/SidebarMinimizer' - -configure({ adapter: new Adapter() }); - -describe('AppSidebarMinimizer', () => { - it('renders button with class="sidebar-minimizer"', () => { - expect(render()) - .toContain('') - }) - it('should call handleClick', () => { - let component = mount(); - const instance = component.instance(); - const handleClickSpy = sinon.spy(instance, 'handleClick'); - component.find('button').simulate('click'); - - expect(handleClickSpy.called).toBe(true); - }) -}) diff --git a/tests/SidebarToggler.test.js b/tests/SidebarToggler.test.js deleted file mode 100644 index 8d673f9f..00000000 --- a/tests/SidebarToggler.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import expect from 'expect' -import React from 'react' -import {renderToStaticMarkup as render} from 'react-dom/server' - -import { configure, mount } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import sinon from 'sinon'; - -import AppSidebarToggler from 'src/SidebarToggler'; - -configure({ adapter: new Adapter() }); - -describe('AppSidebarToggler', () => { - it('renders button with class="navbar-toggler"', () => { - expect(render()) - .toContain('') - }) - it('should call sidebarToggle', () => { - let component = mount(); - const instance = component.instance(); - const handleClickSpy = sinon.spy(instance, 'sidebarToggle'); - component.find('button').simulate('click'); - - expect(handleClickSpy.called).toBe(true); - }) - it('should call sidebarToggle mobile', () => { - let component = mount(); - const instance = component.instance(); - const handleClickSpy = sinon.spy(instance, 'sidebarToggle'); - component.find('button').simulate('click'); - - expect(handleClickSpy.called).toBe(true); - }) -}) diff --git a/tests/Switch.test.js b/tests/Switch.test.js index 1e6a0e11..4fae69ec 100644 --- a/tests/Switch.test.js +++ b/tests/Switch.test.js @@ -6,64 +6,64 @@ import { configure, mount, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import { spy, mock } from 'sinon' -import AppSwitch from 'src/Switch' +import CSwitch from 'src/CSwitch' configure({ adapter: new Adapter() }); -describe('AppSwitch', () => { - it('renders label with class="switch"', () => { - expect(render()) - .toContain('