From e62b170a149be1b1935030b331cd128f0e47d53c Mon Sep 17 00:00:00 2001 From: Xiaofan Wu Date: Wed, 15 Jun 2022 10:41:14 +1000 Subject: [PATCH] fix: add direct compiled css & change imports --- src/components/ActionPanel/index.jsx | 2 +- src/components/ActionPanel/styles.css | 140 + src/components/Alert/index.jsx | 2 +- src/components/Alert/styles.css | 18 + src/components/AlertInput/index.jsx | 2 +- src/components/AlertInput/styles.css | 64 + src/components/Avatar/index.jsx | 2 +- src/components/Avatar/styles.css | 45 + src/components/BorderedWell/index.jsx | 2 +- src/components/BorderedWell/styles.css | 4 + src/components/Breadcrumb/Node/index.jsx | 2 +- src/components/Breadcrumb/Node/styles.css | 8 + src/components/Breadcrumb/index.jsx | 2 +- src/components/Breadcrumb/styles.css | 16 + src/components/Button/index.jsx | 2 +- src/components/Button/styles.css | 521 ++ src/components/ButtonGroup/index.jsx | 2 +- src/components/ButtonGroup/styles.css | 39 + src/components/Card/index.jsx | 2 +- src/components/Card/styles.css | 48 + src/components/Carousel/index.jsx | 6 +- src/components/Carousel/styles.css | 52 + src/components/Checkbox/index.jsx | 2 +- src/components/Checkbox/styles.css | 61 + src/components/CountBadge/index.jsx | 2 +- src/components/CountBadge/styles.css | 31 + src/components/DatePicker/index.jsx | 2 +- src/components/DatePicker/styles.css | 5338 +++++++++++++++++ src/components/Empty/index.jsx | 2 +- src/components/Empty/styles.css | 14 + src/components/FilePicker/index.jsx | 2 +- src/components/FilePicker/styles.css | 29 + src/components/FlexibleSpacer/index.jsx | 2 +- src/components/FlexibleSpacer/styles.css | 16 + src/components/Grid/Cell/index.jsx | 2 +- src/components/Grid/Cell/styles.css | 22 + src/components/Grid/Row/index.jsx | 2 +- src/components/Grid/Row/styles.css | 25 + src/components/Grid/index.jsx | 2 +- src/components/Grid/styles.css | 21 + src/components/HelpIconPopover/index.jsx | 2 +- src/components/HelpIconPopover/styles.css | 11 + .../PopoverLinkItem/index.jsx | 2 +- .../PopoverLinkItem/styles.css | 6 + src/components/HoverDropdownMenu/index.jsx | 2 +- src/components/HoverDropdownMenu/styles.css | 18 + src/components/ImageCropper/index.jsx | 2 +- src/components/ImageCropper/styles.css | 4 + src/components/InformationBox/index.jsx | 2 +- src/components/InformationBox/styles.css | 39 + src/components/ListPicker/index.jsx | 2 +- src/components/ListPicker/styles.css | 31 + src/components/ListPickerPure/index.jsx | 2 +- src/components/ListPickerPure/styles.css | 26 + src/components/Navigation/index.jsx | 2 +- src/components/Navigation/styles.css | 66 + src/components/OverlayLoader/index.jsx | 2 +- src/components/OverlayLoader/styles.css | 47 + src/components/PageTitle/index.jsx | 2 +- src/components/PageTitle/styles.css | 17 + src/components/PagedGrid/index.jsx | 2 +- src/components/PagedGrid/styles.css | 16 + src/components/Pagination/index.jsx | 2 +- src/components/Pagination/styles.css | 39 + src/components/Panel/index.jsx | 2 +- src/components/Panel/styles.css | 61 + src/components/Paragraph/index.jsx | 2 +- src/components/Paragraph/styles.css | 29 + src/components/Pill/index.jsx | 2 +- src/components/Pill/styles.css | 40 + src/components/Popover/WithRef.jsx | 2 +- src/components/Popover/index.jsx | 2 +- src/components/Popover/popover-theme.css | 0 src/components/Popover/styles.css | 336 ++ src/components/PrettyDiff/index.jsx | 2 +- src/components/PrettyDiff/styles.css | 13 + src/components/Radio/index.jsx | 2 +- src/components/Radio/styles.css | 33 + src/components/RichTextEditor/index.jsx | 2 +- src/components/RichTextEditor/styles.css | 177 + src/components/Search/index.jsx | 2 +- src/components/Search/styles.css | 94 + src/components/SearchableCheckList/index.jsx | 2 +- src/components/SearchableCheckList/styles.css | 21 + src/components/Select/index.jsx | 2 +- src/components/Select/styles.css | 11 + src/components/Skeleton/index.jsx | 2 +- src/components/Skeleton/styles.css | 33 + src/components/Slicey/Arc/index.jsx | 2 +- src/components/Slicey/Arc/styles.css | 13 + src/components/Slicey/Donut/index.jsx | 2 +- src/components/Slicey/Donut/styles.css | 3 + src/components/Slicey/Marker/index.jsx | 2 +- src/components/Slicey/Marker/styles.css | 4 + src/components/Slicey/index.jsx | 2 +- src/components/Slicey/styles.css | 9 + src/components/Spinner/index.jsx | 2 +- src/components/Spinner/styles.css | 33 + src/components/SplitPane/index.jsx | 2 +- src/components/SplitPane/styles.css | 14 + src/components/Statistic/index.jsx | 2 +- src/components/Statistic/styles.css | 20 + src/components/StatusPill/index.jsx | 2 +- src/components/StatusPill/styles.css | 49 + src/components/SvgSymbol/index.jsx | 2 +- src/components/SvgSymbol/styles.css | 84 + src/components/Switch/index.jsx | 2 +- src/components/Switch/styles.css | 58 + src/components/Tag/index.jsx | 2 +- src/components/Tag/styles.css | 49 + src/components/TextEllipsis/index.jsx | 2 +- src/components/TextEllipsis/styles.css | 8 + src/components/Tile/index.jsx | 2 +- src/components/Tile/styles.css | 60 + src/components/TileGrid/index.jsx | 2 +- src/components/TileGrid/styles.css | 82 + src/components/Toast/index.jsx | 2 +- src/components/Toast/styles.css | 39 + src/components/TreePicker/Grid/index.jsx | 2 +- src/components/TreePicker/Grid/styles.css | 5 + src/components/TreePicker/Nav/index.jsx | 2 +- src/components/TreePicker/Nav/styles.css | 11 + src/components/TreePicker/Node/index.jsx | 2 +- src/components/TreePicker/Node/styles.css | 46 + src/components/TreePicker/index.jsx | 2 +- src/components/TreePicker/styles.css | 27 + src/components/UserListPicker/index.jsx | 2 +- src/components/UserListPicker/styles.css | 6 + src/components/VerticalNavigation/index.jsx | 2 +- src/components/VerticalNavigation/styles.css | 72 + src/index.js | 4 +- src/styles/animation.css | 8 + src/styles/bootstrap-custom.css | 5181 ++++++++++++++++ src/styles/bootstrapOverrides/Checkbox.css | 48 + src/styles/bootstrapOverrides/Form.css | 72 + src/styles/bootstrapOverrides/Modal.css | 58 + src/styles/bootstrapOverrides/Nav.css | 60 + src/styles/border.css | 0 src/styles/color.css | 0 src/styles/font-size.css | 0 src/styles/font-weight.css | 0 src/styles/function.css | 0 src/styles/icheck-custom.css | 62 + src/styles/icon.css | 0 src/styles/mixin.css | 0 src/styles/mixins/dataUriEncoder.css | 0 src/styles/mixins/inputStyles.css | 0 src/styles/variable.css | 0 www/containers/App.jsx | 2 +- www/containers/Documentation.jsx | 2 +- www/containers/components/Header/index.jsx | 2 +- www/containers/components/Header/styles.css | 35 + .../components/PropTypeTable/index.jsx | 2 +- .../components/PropTypeTable/styles.css | 28 + www/containers/components/SearchBar/index.jsx | 2 +- .../components/SearchBar/styles.css | 3 + www/containers/styles.css | 193 + www/examples/styles.css | 246 + www/examples/styles.scss | 4 +- 159 files changed, 14442 insertions(+), 76 deletions(-) create mode 100644 src/components/ActionPanel/styles.css create mode 100644 src/components/Alert/styles.css create mode 100644 src/components/AlertInput/styles.css create mode 100644 src/components/Avatar/styles.css create mode 100644 src/components/BorderedWell/styles.css create mode 100644 src/components/Breadcrumb/Node/styles.css create mode 100644 src/components/Breadcrumb/styles.css create mode 100644 src/components/Button/styles.css create mode 100644 src/components/ButtonGroup/styles.css create mode 100644 src/components/Card/styles.css create mode 100644 src/components/Carousel/styles.css create mode 100644 src/components/Checkbox/styles.css create mode 100644 src/components/CountBadge/styles.css create mode 100644 src/components/DatePicker/styles.css create mode 100644 src/components/Empty/styles.css create mode 100644 src/components/FilePicker/styles.css create mode 100644 src/components/FlexibleSpacer/styles.css create mode 100644 src/components/Grid/Cell/styles.css create mode 100644 src/components/Grid/Row/styles.css create mode 100644 src/components/Grid/styles.css create mode 100644 src/components/HelpIconPopover/styles.css create mode 100644 src/components/HoverDropdownMenu/PopoverLinkItem/styles.css create mode 100644 src/components/HoverDropdownMenu/styles.css create mode 100644 src/components/ImageCropper/styles.css create mode 100644 src/components/InformationBox/styles.css create mode 100644 src/components/ListPicker/styles.css create mode 100644 src/components/ListPickerPure/styles.css create mode 100644 src/components/Navigation/styles.css create mode 100644 src/components/OverlayLoader/styles.css create mode 100644 src/components/PageTitle/styles.css create mode 100644 src/components/PagedGrid/styles.css create mode 100644 src/components/Pagination/styles.css create mode 100644 src/components/Panel/styles.css create mode 100644 src/components/Paragraph/styles.css create mode 100644 src/components/Pill/styles.css create mode 100644 src/components/Popover/popover-theme.css create mode 100644 src/components/Popover/styles.css create mode 100644 src/components/PrettyDiff/styles.css create mode 100644 src/components/Radio/styles.css create mode 100644 src/components/RichTextEditor/styles.css create mode 100644 src/components/Search/styles.css create mode 100644 src/components/SearchableCheckList/styles.css create mode 100644 src/components/Select/styles.css create mode 100644 src/components/Skeleton/styles.css create mode 100644 src/components/Slicey/Arc/styles.css create mode 100644 src/components/Slicey/Donut/styles.css create mode 100644 src/components/Slicey/Marker/styles.css create mode 100644 src/components/Slicey/styles.css create mode 100644 src/components/Spinner/styles.css create mode 100644 src/components/SplitPane/styles.css create mode 100644 src/components/Statistic/styles.css create mode 100644 src/components/StatusPill/styles.css create mode 100644 src/components/SvgSymbol/styles.css create mode 100644 src/components/Switch/styles.css create mode 100644 src/components/Tag/styles.css create mode 100644 src/components/TextEllipsis/styles.css create mode 100644 src/components/Tile/styles.css create mode 100644 src/components/TileGrid/styles.css create mode 100644 src/components/Toast/styles.css create mode 100644 src/components/TreePicker/Grid/styles.css create mode 100644 src/components/TreePicker/Nav/styles.css create mode 100644 src/components/TreePicker/Node/styles.css create mode 100644 src/components/TreePicker/styles.css create mode 100644 src/components/UserListPicker/styles.css create mode 100644 src/components/VerticalNavigation/styles.css create mode 100644 src/styles/animation.css create mode 100644 src/styles/bootstrap-custom.css create mode 100644 src/styles/bootstrapOverrides/Checkbox.css create mode 100644 src/styles/bootstrapOverrides/Form.css create mode 100644 src/styles/bootstrapOverrides/Modal.css create mode 100644 src/styles/bootstrapOverrides/Nav.css create mode 100644 src/styles/border.css create mode 100644 src/styles/color.css create mode 100644 src/styles/font-size.css create mode 100644 src/styles/font-weight.css create mode 100644 src/styles/function.css create mode 100644 src/styles/icheck-custom.css create mode 100644 src/styles/icon.css create mode 100644 src/styles/mixin.css create mode 100644 src/styles/mixins/dataUriEncoder.css create mode 100644 src/styles/mixins/inputStyles.css create mode 100644 src/styles/variable.css create mode 100644 www/containers/components/Header/styles.css create mode 100644 www/containers/components/PropTypeTable/styles.css create mode 100644 www/containers/components/SearchBar/styles.css create mode 100644 www/containers/styles.css create mode 100644 www/examples/styles.css diff --git a/src/components/ActionPanel/index.jsx b/src/components/ActionPanel/index.jsx index 1fdba7da1..3d7b41f80 100644 --- a/src/components/ActionPanel/index.jsx +++ b/src/components/ActionPanel/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import Button from '../Button'; -import './styles.scss'; +import './styles.css'; const ActionPanel = React.forwardRef((props, ref) => { const { title, className, size, onClose, children, actionButton, isModal, closeIcon, cancelText } = props; diff --git a/src/components/ActionPanel/styles.css b/src/components/ActionPanel/styles.css new file mode 100644 index 000000000..ffb8f28fe --- /dev/null +++ b/src/components/ActionPanel/styles.css @@ -0,0 +1,140 @@ +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 0.8; + } +} +.aui--action-panel { + min-width: 300px; + min-height: 100px; + z-index: 1060; + border-radius: 2px; + background-color: #fff; +} +.aui--action-panel.action-modal { + top: 30px; + background-color: #fff; + margin: 30px auto; + border: 0; +} +.aui--action-panel.action-modal .aui--action-panel-body { + max-height: calc(100vh - 60px - 48px); + overflow: auto; +} +.aui--action-panel.is-small { + width: 500px; +} +.aui--action-panel.is-medium { + width: 700px; +} +.aui--action-panel.is-large { + width: 1000px; +} +.aui--action-panel-header { + height: 48px; + color: #333; + padding: 12px; + padding-left: 18px; + border-bottom: 1px solid #e8e8e8; + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid #e8e8e8; +} +.aui--action-panel-header .title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 18px; + font-weight: 700; + color: #5a5a5a; +} +.aui--action-panel-header svg { + fill: #5a5a5a; +} +.aui--action-panel-header .close-button:not(.close-svg-icon).aui--button { + background-color: transparent; + color: #fff; +} +.aui--action-panel-header .close-button:not(.close-svg-icon).aui--button > div { + display: inline-flex; +} +.aui--action-panel-header .close-icon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/close.svg'); +} +.aui--action-panel-header .aui--button { + border: 0; + outline: 0; + margin: 0 0 0 6px; + box-shadow: none; + border-radius: 2px; + background-color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + color: #006dcc; +} +.aui--action-panel-header.has-actions { + background-color: #006dcc; + color: #fff; + border: 0; +} +.aui--action-panel-header.has-actions .title { + color: #fff; +} +.aui--action-panel-header.has-actions .actions .aui--button.close-button:hover { + color: #838383; + background-color: #fff; +} +.aui--action-panel-header.has-actions .actions .aui--button:not(.close-button) { + color: #006dcc; + background-color: #fff; +} +.aui--action-panel-header.has-actions .actions .aui--button:active, +.aui--action-panel-header.has-actions .actions .aui--button:active:hover { + background-color: #e8e8e8; +} +.aui--action-panel-header.has-actions .actions .aui--button svg { + fill: #fff; +} +.aui--action-panel-header.has-actions .actions .aui--button:hover { + background-color: #fff; +} +.aui--action-panel-header.has-actions .actions .aui--button:hover svg { + fill: #006dcc; +} +.aui--action-panel-body { + padding: 30px; + border: 1px solid #e8e8e8; + border-top: 0; +} + +.aui--action-panel-backdrop { + position: fixed; + display: flex; + z-index: 1040; + top: 0; + bottom: 0; + left: 0; + background-color: #838383; + width: 100%; + opacity: 0.8; + animation: fadein 0.2s; +} + +.aui--action-panel-modal-wrapper { + position: fixed; + width: 100%; + z-index: 1040; + display: flex; + align-content: center; + top: 0; + left: 0; + animation: fadein 0.2s; +} diff --git a/src/components/Alert/index.jsx b/src/components/Alert/index.jsx index 651a0bb5f..18ff30cc5 100644 --- a/src/components/Alert/index.jsx +++ b/src/components/Alert/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const Alert = ({ type, children, dts }) => (
diff --git a/src/components/Alert/styles.css b/src/components/Alert/styles.css new file mode 100644 index 000000000..a9f50bfea --- /dev/null +++ b/src/components/Alert/styles.css @@ -0,0 +1,18 @@ +.alert-component { + color: #fff; + font-size: 12px; + line-height: 20px; + padding: 10px; +} +.alert-component-success { + background-color: #5bb75b; +} +.alert-component-info { + background-color: #49afcd; +} +.alert-component-warning { + background-color: #faa732; +} +.alert-component-danger { + background-color: #da4f49; +} diff --git a/src/components/AlertInput/index.jsx b/src/components/AlertInput/index.jsx index bfe87d4b7..6176e552f 100644 --- a/src/components/AlertInput/index.jsx +++ b/src/components/AlertInput/index.jsx @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Popover from '../Popover'; import { popoverPlacements } from '../Popover/constants'; -import './styles.scss'; +import './styles.css'; export const baseClass = 'aui--alert-input'; diff --git a/src/components/AlertInput/styles.css b/src/components/AlertInput/styles.css new file mode 100644 index 000000000..6a5720584 --- /dev/null +++ b/src/components/AlertInput/styles.css @@ -0,0 +1,64 @@ +.aui--alert-input { + display: flex; + align-items: center; + background-color: #fff; + border: 1px solid #e8e8e8; + border-radius: 2px; + padding: 4px 5px; + position: relative; +} +.aui--alert-input.aui--alert-input--focused { + border-color: #ababab; +} +.aui--alert-input .aui--alert-input__input { + flex-grow: 1; + background-color: #fff; + border: 0; + width: 100%; + padding: 0; +} +.aui--alert-input .aui--alert-input__input:focus { + outline: none; +} +.aui--alert-input.success { + border-color: #5bb75b; +} +.aui--alert-input.info { + border-color: #49afcd; +} +.aui--alert-input.warning { + border-color: #faa732; +} +.aui--alert-input.error { + border-color: #da4f49; +} +.aui--alert-input .aui--alert-input__addon { + color: #d3d3d3; +} +.aui--alert-input .aui--alert-input__addon:first-child { + margin-right: 2px; +} +.aui--alert-input .aui--alert-input__addon:last-child { + margin-left: 2px; +} +.aui--alert-input.aui--alert-input--disabled { + background-color: #e8e8e8; +} +.aui--alert-input.aui--alert-input--disabled .aui--alert-input__input:disabled { + background-color: #e8e8e8; +} +.aui--alert-input.aui--alert-input--disabled .aui--alert-input__addon { + color: #ababab; +} + +.aui--alert-input__popover { + border-radius: 4px; + box-shadow: none; + font-size: 11px; +} +.aui--alert-input__popover .popover-content { + color: inherit; + padding: 5px 10px; + width: auto; + font-weight: 700; +} diff --git a/src/components/Avatar/index.jsx b/src/components/Avatar/index.jsx index 5b529a2e3..c321d0f0a 100644 --- a/src/components/Avatar/index.jsx +++ b/src/components/Avatar/index.jsx @@ -2,7 +2,7 @@ import _ from 'lodash'; import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const baseClass = 'avatar-component'; const Avatar = ({ color, givenName, tooltip, image, surname }) => ( diff --git a/src/components/Avatar/styles.css b/src/components/Avatar/styles.css new file mode 100644 index 000000000..fdd0023bc --- /dev/null +++ b/src/components/Avatar/styles.css @@ -0,0 +1,45 @@ +.avatar-component { + background-color: #ababab; + border-radius: 50%; + color: #fff; + cursor: default; + display: inline-block; + font-size: 15px; + font-weight: 700; + height: 35px; + line-height: 36px; + position: relative; + text-align: center; + text-transform: uppercase; + vertical-align: middle; + width: 35px; +} +.avatar-component-image-placeholder { + background-color: transparent; +} +.avatar-component-image { + border-radius: 50%; + height: 100%; + width: 100%; + left: 0; + position: absolute; + top: 0; +} +.avatar-component-blue { + background-color: #006dcc; +} +.avatar-component-green { + background-color: #5bb75b; +} +.avatar-component-red { + background-color: #da4f49; +} +.avatar-component-orange { + background-color: #faa732; +} +.avatar-component-cyan { + background-color: #49afcd; +} +.avatar-component-black { + background-color: #5a5a5a; +} diff --git a/src/components/BorderedWell/index.jsx b/src/components/BorderedWell/index.jsx index 252279c07..9ef19caf3 100644 --- a/src/components/BorderedWell/index.jsx +++ b/src/components/BorderedWell/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const BorderedWell = ({ children }) => (
diff --git a/src/components/BorderedWell/styles.css b/src/components/BorderedWell/styles.css new file mode 100644 index 000000000..f01f57226 --- /dev/null +++ b/src/components/BorderedWell/styles.css @@ -0,0 +1,4 @@ +.borderedwell-component { + background-color: #fff; + border: 1px solid #e8e8e8; +} diff --git a/src/components/Breadcrumb/Node/index.jsx b/src/components/Breadcrumb/Node/index.jsx index 02056c1e5..18dc6e0b9 100644 --- a/src/components/Breadcrumb/Node/index.jsx +++ b/src/components/Breadcrumb/Node/index.jsx @@ -1,7 +1,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const BreadcrumbNode = ({ isLast, node, onClick }) => { const className = classnames('aui--breadcrumb-node', { 'aui--breadcrumb-node-link': !isLast }); diff --git a/src/components/Breadcrumb/Node/styles.css b/src/components/Breadcrumb/Node/styles.css new file mode 100644 index 000000000..8fffc1f57 --- /dev/null +++ b/src/components/Breadcrumb/Node/styles.css @@ -0,0 +1,8 @@ +.aui--breadcrumb-node-link { + cursor: pointer; +} +.aui--breadcrumb-node-link:hover, +.aui--breadcrumb-node-link:active { + color: #0492ba; + text-decoration: underline; +} diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx index d73663b65..02c037b9e 100644 --- a/src/components/Breadcrumb/index.jsx +++ b/src/components/Breadcrumb/index.jsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import BreadcrumbNode from './Node'; -import './styles.scss'; +import './styles.css'; const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => { const baseClass = 'aui--breadcrumb'; diff --git a/src/components/Breadcrumb/styles.css b/src/components/Breadcrumb/styles.css new file mode 100644 index 000000000..372f768f8 --- /dev/null +++ b/src/components/Breadcrumb/styles.css @@ -0,0 +1,16 @@ +.aui--breadcrumb { + color: #49afcd; + cursor: default; + font-size: 12px; + height: 10px; + line-height: 10px; + display: flex; +} +.aui--breadcrumb .aui--breadcrumb-node-divider { + margin-left: 2px; + margin-right: 2px; +} +.aui--breadcrumb.aui--breadcrumb--disabled { + color: #ababab; + pointer-events: none; +} diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index cdd6f066c..dace0ecb2 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Spinner from '../Spinner'; import { expandDts, invariant } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; export const buttonSharedClasses = ({ size, inverse, variant, fullWidth, round, icon, children, disabled, color }) => ({ [`aui-${size}`]: sizes.includes(size) && variant !== 'link', diff --git a/src/components/Button/styles.css b/src/components/Button/styles.css new file mode 100644 index 000000000..2b31c211d --- /dev/null +++ b/src/components/Button/styles.css @@ -0,0 +1,521 @@ +.aui--button, +.aui--anchor, +.btn { + display: inline-flex; + grid-gap: 6px; + align-items: center; + justify-content: center; + margin-bottom: 0; + font-weight: 700; + text-align: center; + white-space: nowrap; + text-decoration: none; + min-height: 30px; + height: 0%; + position: relative; + vertical-align: middle; + background-image: none; + border: 1px solid transparent; + padding: 5px 12px; + font-size: 12px; + line-height: 1.5; + border-radius: 2px; + transition-timing-function: ease; + transition-property: background-color, border-color, box-shadow, transform; + transition-duration: 0.1s; + margin-right: 5px; + color: #5a5a5a; + background-color: #fff; + border-color: #d3d3d3; +} +.aui--button:last-child, +.aui--anchor:last-child, +.btn:last-child { + margin-right: 0; +} +.aui--button:focus, +.aui--button:hover, +.aui--anchor:focus, +.aui--anchor:hover, +.btn:focus, +.btn:hover { + text-decoration: none; +} +.aui--button:focus-visible, +.aui--anchor:focus-visible, +.btn:focus-visible { + outline: none; + border-color: #fff; + box-shadow: 0 0 0 2px #5a5a5a; +} +.aui--button[class*='aui-']:focus-visible, +.aui--anchor[class*='aui-']:focus-visible, +.btn[class*='aui-']:focus-visible { + border-color: #fff; +} +.aui--button:hover, +.aui--anchor:hover, +.btn:hover { + color: #5a5a5a; + background-color: #e8e8e8; + border-color: #bababa; +} +.aui--button.aui-primary, +.aui--anchor.aui-primary, +.btn.aui-primary { + color: #fff; + background-color: #006dcc; + border-color: #006dcc; +} +.aui--button.aui-primary:hover, +.aui--anchor.aui-primary:hover, +.btn.aui-primary:hover { + color: #fff; + background-color: #005299; + border-color: #005299; +} +.aui--button.aui-primary:active, +.aui--anchor.aui-primary:active, +.btn.aui-primary:active { + color: #fff; + background-color: #004480; + border-color: #004480; +} +.aui--button.aui-secondary, +.aui--anchor.aui-secondary, +.btn.aui-secondary { + color: #fff; + background-color: #00b8a5; + border-color: #00b8a5; +} +.aui--button.aui-secondary:hover, +.aui--anchor.aui-secondary:hover, +.btn.aui-secondary:hover { + color: #fff; + background-color: #008577; + border-color: #008577; +} +.aui--button.aui-secondary:active, +.aui--anchor.aui-secondary:active, +.btn.aui-secondary:active { + color: #fff; + background-color: #006c60; + border-color: #006c60; +} +.aui--button.aui-success, +.aui--anchor.aui-success, +.btn.aui-success { + color: #fff; + background-color: #5bb75b; + border-color: #5bb75b; +} +.aui--button.aui-success:hover, +.aui--anchor.aui-success:hover, +.btn.aui-success:hover { + color: #fff; + background-color: #449b44; + border-color: #449b44; +} +.aui--button.aui-success:active, +.aui--anchor.aui-success:active, +.btn.aui-success:active { + color: #fff; + background-color: #3c893c; + border-color: #3c893c; +} +.aui--button.aui-info, +.aui--anchor.aui-info, +.btn.aui-info { + color: #fff; + background-color: #49afcd; + border-color: #49afcd; +} +.aui--button.aui-info:hover, +.aui--anchor.aui-info:hover, +.btn.aui-info:hover { + color: #fff; + background-color: #3195b2; + border-color: #3195b2; +} +.aui--button.aui-info:active, +.aui--anchor.aui-info:active, +.btn.aui-info:active { + color: #fff; + background-color: #2b849e; + border-color: #2b849e; +} +.aui--button.aui-warning, +.aui--anchor.aui-warning, +.btn.aui-warning { + color: #fff; + background-color: #faa732; + border-color: #faa732; +} +.aui--button.aui-warning:hover, +.aui--anchor.aui-warning:hover, +.btn.aui-warning:hover { + color: #fff; + background-color: #f39106; + border-color: #f39106; +} +.aui--button.aui-warning:active, +.aui--anchor.aui-warning:active, +.btn.aui-warning:active { + color: #fff; + background-color: #da8205; + border-color: #da8205; +} +.aui--button.aui-danger, +.aui--anchor.aui-danger, +.btn.aui-danger { + color: #fff; + background-color: #da4f49; + border-color: #da4f49; +} +.aui--button.aui-danger:hover, +.aui--anchor.aui-danger:hover, +.btn.aui-danger:hover { + color: #fff; + background-color: #c72f29; + border-color: #c72f29; +} +.aui--button.aui-danger:active, +.aui--anchor.aui-danger:active, +.btn.aui-danger:active { + color: #fff; + background-color: #b22a24; + border-color: #b22a24; +} +.aui--button.aui-inverse, +.aui--anchor.aui-inverse, +.btn.aui-inverse { + background-color: #fff; + border-color: #d3d3d3; +} +.aui--button.aui-inverse:focus-visible, +.aui--anchor.aui-inverse:focus-visible, +.btn.aui-inverse:focus-visible { + border-color: #fff; + box-shadow: 0 0 0 2px #5a5a5a; +} +.aui--button.aui-inverse:hover, +.aui--anchor.aui-inverse:hover, +.btn.aui-inverse:hover { + background-color: #e8e8e8; + border-color: #bababa; +} +.aui--button.aui-inverse:active, +.aui--anchor.aui-inverse:active, +.btn.aui-inverse:active { + color: #fff; + background-color: #dbdbdb; + border-color: #bababa; +} +.aui--button.aui-borderless, +.aui--anchor.aui-borderless, +.btn.aui-borderless { + background-color: transparent; + border-color: transparent; +} +.aui--button.aui-borderless:focus-visible, +.aui--anchor.aui-borderless:focus-visible, +.btn.aui-borderless:focus-visible { + border-color: #fff; + box-shadow: 0 0 0 2px #5a5a5a; +} +.aui--button.aui-borderless:hover, +.aui--anchor.aui-borderless:hover, +.btn.aui-borderless:hover { + background-color: #fff; + border-color: #d3d3d3; +} +.aui--button.aui-borderless:active, +.aui--anchor.aui-borderless:active, +.btn.aui-borderless:active { + background-color: #e8e8e8; + border-color: #adadad; +} +.aui--button.aui-borderless.aui-primary, +.aui--button.aui-inverse.aui-primary, +.aui--anchor.aui-borderless.aui-primary, +.aui--anchor.aui-inverse.aui-primary, +.btn.aui-borderless.aui-primary, +.btn.aui-inverse.aui-primary { + color: #006dcc; +} +.aui--button.aui-borderless.aui-primary:hover, +.aui--button.aui-inverse.aui-primary:hover, +.aui--anchor.aui-borderless.aui-primary:hover, +.aui--anchor.aui-inverse.aui-primary:hover, +.btn.aui-borderless.aui-primary:hover, +.btn.aui-inverse.aui-primary:hover { + color: #006dcc; +} +.aui--button.aui-borderless.aui-default, +.aui--button.aui-inverse.aui-default, +.aui--anchor.aui-borderless.aui-default, +.aui--anchor.aui-inverse.aui-default, +.btn.aui-borderless.aui-default, +.btn.aui-inverse.aui-default { + color: #5a5a5a; +} +.aui--button.aui-borderless.aui-default:hover, +.aui--button.aui-inverse.aui-default:hover, +.aui--anchor.aui-borderless.aui-default:hover, +.aui--anchor.aui-inverse.aui-default:hover, +.btn.aui-borderless.aui-default:hover, +.btn.aui-inverse.aui-default:hover { + color: #5a5a5a; +} +.aui--button.aui-borderless.aui-secondary, +.aui--button.aui-inverse.aui-secondary, +.aui--anchor.aui-borderless.aui-secondary, +.aui--anchor.aui-inverse.aui-secondary, +.btn.aui-borderless.aui-secondary, +.btn.aui-inverse.aui-secondary { + color: #00b8a5; +} +.aui--button.aui-borderless.aui-secondary:hover, +.aui--button.aui-inverse.aui-secondary:hover, +.aui--anchor.aui-borderless.aui-secondary:hover, +.aui--anchor.aui-inverse.aui-secondary:hover, +.btn.aui-borderless.aui-secondary:hover, +.btn.aui-inverse.aui-secondary:hover { + color: #00b8a5; +} +.aui--button.aui-borderless.aui-success, +.aui--button.aui-inverse.aui-success, +.aui--anchor.aui-borderless.aui-success, +.aui--anchor.aui-inverse.aui-success, +.btn.aui-borderless.aui-success, +.btn.aui-inverse.aui-success { + color: #5bb75b; +} +.aui--button.aui-borderless.aui-success:hover, +.aui--button.aui-inverse.aui-success:hover, +.aui--anchor.aui-borderless.aui-success:hover, +.aui--anchor.aui-inverse.aui-success:hover, +.btn.aui-borderless.aui-success:hover, +.btn.aui-inverse.aui-success:hover { + color: #5bb75b; +} +.aui--button.aui-borderless.aui-info, +.aui--button.aui-inverse.aui-info, +.aui--anchor.aui-borderless.aui-info, +.aui--anchor.aui-inverse.aui-info, +.btn.aui-borderless.aui-info, +.btn.aui-inverse.aui-info { + color: #49afcd; +} +.aui--button.aui-borderless.aui-info:hover, +.aui--button.aui-inverse.aui-info:hover, +.aui--anchor.aui-borderless.aui-info:hover, +.aui--anchor.aui-inverse.aui-info:hover, +.btn.aui-borderless.aui-info:hover, +.btn.aui-inverse.aui-info:hover { + color: #49afcd; +} +.aui--button.aui-borderless.aui-warning, +.aui--button.aui-inverse.aui-warning, +.aui--anchor.aui-borderless.aui-warning, +.aui--anchor.aui-inverse.aui-warning, +.btn.aui-borderless.aui-warning, +.btn.aui-inverse.aui-warning { + color: #faa732; +} +.aui--button.aui-borderless.aui-warning:hover, +.aui--button.aui-inverse.aui-warning:hover, +.aui--anchor.aui-borderless.aui-warning:hover, +.aui--anchor.aui-inverse.aui-warning:hover, +.btn.aui-borderless.aui-warning:hover, +.btn.aui-inverse.aui-warning:hover { + color: #faa732; +} +.aui--button.aui-borderless.aui-danger, +.aui--button.aui-inverse.aui-danger, +.aui--anchor.aui-borderless.aui-danger, +.aui--anchor.aui-inverse.aui-danger, +.btn.aui-borderless.aui-danger, +.btn.aui-inverse.aui-danger { + color: #da4f49; +} +.aui--button.aui-borderless.aui-danger:hover, +.aui--button.aui-inverse.aui-danger:hover, +.aui--anchor.aui-borderless.aui-danger:hover, +.aui--anchor.aui-inverse.aui-danger:hover, +.btn.aui-borderless.aui-danger:hover, +.btn.aui-inverse.aui-danger:hover { + color: #da4f49; +} +.aui--button.aui-link, +.aui--anchor.aui-link, +.btn.aui-link { + all: unset; + border-radius: 2px; + color: #006dcc; + text-decoration: none; + cursor: pointer; +} +.aui--button.aui-link:hover, +.aui--anchor.aui-link:hover, +.btn.aui-link:hover { + color: #004c8f; +} +.aui--button.aui-link:focus-visible, +.aui--anchor.aui-link:focus-visible, +.btn.aui-link:focus-visible { + box-shadow: 0 0 0 2px #5a5a5a; +} +.aui--button.aui-large, +.aui--anchor.aui-large, +.btn.aui-large { + line-height: 1.467; + min-height: 42px; + padding: 9px 24px; + font-size: 15px; + grid-gap: 9px; +} +.aui--button.aui-large.aui-icon, +.aui--anchor.aui-large.aui-icon, +.btn.aui-large.aui-icon { + padding: 10px; + height: 42px; + width: 42px; +} +.aui--button.aui-round, +.aui--anchor.aui-round, +.btn.aui-round { + border-radius: 999px; +} +.aui--button.aui-full-width, +.aui--anchor.aui-full-width, +.btn.aui-full-width { + width: 100%; + margin-right: 0; +} +.aui--button.aui-icon, +.aui--anchor.aui-icon, +.btn.aui-icon { + padding: 6px; + height: 30px; + width: 30px; +} +.aui--button.aui-icon.aui-round .spinner-component .spinner.spinner-small, +.aui--anchor.aui-icon.aui-round .spinner-component .spinner.spinner-small, +.btn.aui-icon.aui-round .spinner-component .spinner.spinner-small { + height: 30px; + width: 30px; +} +.aui--button.aui-icon.aui-round .spinner-component .spinner.spinner-medium, +.aui--anchor.aui-icon.aui-round .spinner-component .spinner.spinner-medium, +.btn.aui-icon.aui-round .spinner-component .spinner.spinner-medium { + border-width: 3px; + height: 42px; + width: 42px; +} +.aui--button .aui-icon-container, +.aui--anchor .aui-icon-container, +.btn .aui-icon-container { + display: inline-flex; +} +.aui--button .aui-icon-container svg, +.aui--anchor .aui-icon-container svg, +.btn .aui-icon-container svg { + fill: currentColor; +} +.aui--button[class*='aui-'].disabled, +.aui--button[class*='aui-'][disabled], +.aui--anchor[class*='aui-'].disabled, +.aui--anchor[class*='aui-'][disabled], +.btn[class*='aui-'].disabled, +.btn[class*='aui-'][disabled] { + background-color: #e8e8e8; + border-color: #e8e8e8; + color: #838383; + opacity: 0.65; + box-shadow: none; + cursor: not-allowed; +} +.aui--button[class*='aui-'].disabled.aui-link, +.aui--button[class*='aui-'][disabled].aui-link, +.aui--anchor[class*='aui-'].disabled.aui-link, +.aui--anchor[class*='aui-'][disabled].aui-link, +.btn[class*='aui-'].disabled.aui-link, +.btn[class*='aui-'][disabled].aui-link { + background-color: transparent; +} +.aui--button[class*='aui-'].disabled:hover, +.aui--button[class*='aui-'].disabled:focus, +.aui--button[class*='aui-'][disabled]:hover, +.aui--button[class*='aui-'][disabled]:focus, +.aui--anchor[class*='aui-'].disabled:hover, +.aui--anchor[class*='aui-'].disabled:focus, +.aui--anchor[class*='aui-'][disabled]:hover, +.aui--anchor[class*='aui-'][disabled]:focus, +.btn[class*='aui-'].disabled:hover, +.btn[class*='aui-'].disabled:focus, +.btn[class*='aui-'][disabled]:hover, +.btn[class*='aui-'][disabled]:focus { + background-color: #e8e8e8; + border-color: #e8e8e8; + color: #838383; + opacity: 0.65; + box-shadow: none; + cursor: not-allowed; +} +.aui--button[class*='aui-'].disabled:hover.aui-link, +.aui--button[class*='aui-'].disabled:focus.aui-link, +.aui--button[class*='aui-'][disabled]:hover.aui-link, +.aui--button[class*='aui-'][disabled]:focus.aui-link, +.aui--anchor[class*='aui-'].disabled:hover.aui-link, +.aui--anchor[class*='aui-'].disabled:focus.aui-link, +.aui--anchor[class*='aui-'][disabled]:hover.aui-link, +.aui--anchor[class*='aui-'][disabled]:focus.aui-link, +.btn[class*='aui-'].disabled:hover.aui-link, +.btn[class*='aui-'].disabled:focus.aui-link, +.btn[class*='aui-'][disabled]:hover.aui-link, +.btn[class*='aui-'][disabled]:focus.aui-link { + background-color: transparent; +} +.aui--button[class*='aui-'].disabled:focus, +.aui--button[class*='aui-'][disabled]:focus, +.aui--anchor[class*='aui-'].disabled:focus, +.aui--anchor[class*='aui-'][disabled]:focus, +.btn[class*='aui-'].disabled:focus, +.btn[class*='aui-'][disabled]:focus { + box-shadow: none; +} +.aui--button:not(.aui-round) .aui-children-container.is-loading, +.aui--button:not(.aui-round) .aui-icon-container.is-loading, +.aui--anchor:not(.aui-round) .aui-children-container.is-loading, +.aui--anchor:not(.aui-round) .aui-icon-container.is-loading, +.btn:not(.aui-round) .aui-children-container.is-loading, +.btn:not(.aui-round) .aui-icon-container.is-loading { + visibility: hidden; +} +.aui--button:not(.aui-round) .aui-children-container > .aui--svg-symbol-component, +.aui--button:not(.aui-round) .aui-icon-container > .aui--svg-symbol-component, +.aui--anchor:not(.aui-round) .aui-children-container > .aui--svg-symbol-component, +.aui--anchor:not(.aui-round) .aui-icon-container > .aui--svg-symbol-component, +.btn:not(.aui-round) .aui-children-container > .aui--svg-symbol-component, +.btn:not(.aui-round) .aui-icon-container > .aui--svg-symbol-component { + display: block; + margin: auto; +} +.aui--button .spinner-container, +.aui--anchor .spinner-container, +.btn .spinner-container { + position: absolute; +} +.aui--button .spinner-container .spinner-component, +.aui--anchor .spinner-container .spinner-component, +.btn .spinner-container .spinner-component { + display: flex; + align-items: center; + justify-content: center; +} +.aui--button > .flexible-wrapper-inline > .flexible-spacer-component, +.aui--anchor > .flexible-wrapper-inline > .flexible-spacer-component, +.btn > .flexible-wrapper-inline > .flexible-spacer-component { + min-width: 8px; +} diff --git a/src/components/ButtonGroup/index.jsx b/src/components/ButtonGroup/index.jsx index 5fa50f696..c7da7e09a 100644 --- a/src/components/ButtonGroup/index.jsx +++ b/src/components/ButtonGroup/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '../Button'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; class ButtonGroup extends React.PureComponent { injectProps(children) { diff --git a/src/components/ButtonGroup/styles.css b/src/components/ButtonGroup/styles.css new file mode 100644 index 000000000..0510239eb --- /dev/null +++ b/src/components/ButtonGroup/styles.css @@ -0,0 +1,39 @@ +.aui--button-group { + display: flex; +} +.aui--button-group > .aui--button { + margin-right: 0; +} +.aui--button-group > .aui--button:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.aui--button-group > .aui--button:last-child, +.aui--button-group > .aui--button:last-child:hover, +.aui--button-group > .aui--button:last-child:active, +.aui--button-group > .aui--button * .aui--button, +.aui--button-group > .aui--button * .aui--button:hover, +.aui--button-group > .aui--button * .aui--button:active { + border-left-width: 0; + border-right-width: 1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.aui--button-group * .aui--button, +.aui--button-group * .aui--button:hover, +.aui--button-group * .aui--button:active { + border-left-width: 0; + border-right-width: 1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.aui--button-group + .aui--button-group { + margin-left: 20px; +} +.aui--button-group + button { + margin-right: 20px; +} + +button + .aui--button-group { + margin-left: 20px; +} diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx index 0e855c0dd..e43de0e0e 100644 --- a/src/components/Card/index.jsx +++ b/src/components/Card/index.jsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const CardContent = ({ children, className, stretch, fill, append, dts }) => { const contentClassNames = classnames('card-component-content', { stretch, fill, append }, className); diff --git a/src/components/Card/styles.css b/src/components/Card/styles.css new file mode 100644 index 000000000..4a22cd00e --- /dev/null +++ b/src/components/Card/styles.css @@ -0,0 +1,48 @@ +.card-component { + font-size: 12px; + margin-bottom: 28px; + min-height: 40px; + min-width: 205px; +} +.card-component-grid-container { + align-items: stretch; + display: flex; + flex-flow: row wrap; + margin-right: -28px; +} +.card-component-grid-container .card-component { + margin-right: 28px; +} +.card-component .flexible-spacer-component { + border: 0; +} +.card-component-content-container { + background-color: #fff; + border: 1px solid #e8e8e8; + border-radius: 5px; + box-shadow: 0 2px 0 #d3d3d3; + display: flex; + flex-basis: 100%; + flex-direction: column; + height: 100%; +} +.card-component-content-container .card-component-content:not(.fill):last-child { + padding-bottom: 20px; +} +.card-component.accent .card-component-content-container { + border-bottom-width: 5px; +} +.card-component-content { + padding: 20px 20px 0; +} +.card-component-content.append { + color: #ababab; + padding: 5px 1px 0; +} +.card-component-content.stretch { + padding-left: 0; + padding-right: 0; +} +.card-component-content.fill { + padding: 0; +} diff --git a/src/components/Carousel/index.jsx b/src/components/Carousel/index.jsx index 4715c432d..c60297ca7 100644 --- a/src/components/Carousel/index.jsx +++ b/src/components/Carousel/index.jsx @@ -2,9 +2,9 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Slider from 'react-slick'; -import 'slick-carousel/slick/slick.scss'; -import 'slick-carousel/slick/slick-theme.scss'; -import './styles.scss'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import './styles.css'; const baseClass = 'aui--carousel-component'; diff --git a/src/components/Carousel/styles.css b/src/components/Carousel/styles.css new file mode 100644 index 000000000..fadd0d9c3 --- /dev/null +++ b/src/components/Carousel/styles.css @@ -0,0 +1,52 @@ +.slick-dots { + position: relative; + top: -35px; +} +.slick-dots li { + margin: 0; +} + +.slick-track { + display: flex; + align-items: center; +} +.slick-track div, +.slick-track span { + outline: none; +} + +.slick-next { + right: 2%; + transform: rotate(-90deg); +} + +.slick-prev { + left: 2%; + transform: rotate(90deg); +} + +.slick-prev, +.slick-next { + height: 50px; + width: 50px; + z-index: 1; + top: 40%; + background: #fff; + border-radius: 30px; + font-size: 20px; + padding: 15px 13px; + opacity: 0.6; +} +.slick-prev:hover, +.slick-next:hover { + opacity: 1; + background: #fff; +} +.slick-prev:focus, +.slick-next:focus { + background: #fff; +} +.slick-prev::before, +.slick-next::before { + content: url('../../styles/icons/chevron-down.svg'); +} diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx index d24fa4976..e0a08ac38 100644 --- a/src/components/Checkbox/index.jsx +++ b/src/components/Checkbox/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const getNextState = (checked) => { if (checked === 'partial') return false; diff --git a/src/components/Checkbox/styles.css b/src/components/Checkbox/styles.css new file mode 100644 index 000000000..0ea6e7da5 --- /dev/null +++ b/src/components/Checkbox/styles.css @@ -0,0 +1,61 @@ +.checkbox-component { + cursor: pointer; + display: block; +} +.checkbox-component label { + cursor: pointer; + font-weight: 400; + margin-bottom: 0; + display: flex; +} +.checkbox-component input { + display: none; +} +.checkbox-component + .checkbox-component { + margin-top: 5px; +} +.checkbox-component.checkbox-component-inline { + display: inline-block; +} +.checkbox-component.checkbox-component-inline + .checkbox-component.checkbox-component-inline { + margin-top: 0; + margin-left: 10px; +} +.checkbox-component .checkbox-component-icon { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/checkbox/empty.svg'); + flex-shrink: 0; +} +.checkbox-component:hover:not(.disabled):not(.checked):not(.partial-checked) .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/hover.svg'); +} +.checkbox-component.checked .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/checked.svg'); +} +.checkbox-component.partial-checked .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/partial.svg'); +} +.checkbox-component.partial-checked .checkbox-component-icon:hover { + background-image: url('../../styles/icons/checkbox/partial-hover.svg'); +} +.checkbox-component.disabled { + cursor: not-allowed; +} +.checkbox-component.disabled label { + cursor: not-allowed; +} +.checkbox-component.disabled .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/empty-disabled.svg'); +} +.checkbox-component.disabled.checked .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/checked-disabled.svg'); +} +.checkbox-component.disabled.partial-checked .checkbox-component-icon { + background-image: url('../../styles/icons/checkbox/partial-disabled.svg'); +} +.checkbox-component .checkbox-component-label { + margin-left: 5px; + line-height: 16px; +} diff --git a/src/components/CountBadge/index.jsx b/src/components/CountBadge/index.jsx index 543ffb9d8..cb4de7c5d 100644 --- a/src/components/CountBadge/index.jsx +++ b/src/components/CountBadge/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const CountBadge = ({ value, status, dts }) => { const fontSize = value > 99 ? 'small' : 'normal'; diff --git a/src/components/CountBadge/styles.css b/src/components/CountBadge/styles.css new file mode 100644 index 000000000..828bd5ac8 --- /dev/null +++ b/src/components/CountBadge/styles.css @@ -0,0 +1,31 @@ +.count-badge { + display: inline-block; + width: 16px; + height: 16px; + border-radius: 50%; + border-width: 1px; + border-color: #fff; + border-style: solid; + background-color: #838383; + color: #fff; + text-align: center; + font-size: 9px; + font-weight: 700; + box-sizing: content-box; + line-height: 17px; +} +.count-badge.status-info { + background-color: #006dcc; +} +.count-badge.status-warning { + background-color: #faa732; +} +.count-badge.status-danger { + background-color: #da4f49; +} +.count-badge.status-light { + background-color: #ababab; +} +.count-badge.count-badge-font-size-small { + font-size: 8px; +} diff --git a/src/components/DatePicker/index.jsx b/src/components/DatePicker/index.jsx index 6f6aba627..c825573fe 100644 --- a/src/components/DatePicker/index.jsx +++ b/src/components/DatePicker/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDatePicker from 'react-datepicker'; import moment from 'moment'; -import './styles.scss'; +import './styles.css'; import { transform } from './transformFormat'; const momentToDate = (date) => (!date || date instanceof Date ? date : date.toDate()); diff --git a/src/components/DatePicker/styles.css b/src/components/DatePicker/styles.css new file mode 100644 index 000000000..d771764e6 --- /dev/null +++ b/src/components/DatePicker/styles.css @@ -0,0 +1,5338 @@ +@charset "UTF-8"; +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +@import '../../../node_modules/react-datepicker/dist/react-datepicker.css'; +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background-color: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type='button'], +input[type='reset'], +input[type='submit'] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + height: auto; +} + +input[type='search'] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: bold; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + font-family: Roboto, Helvetica, sans-serif; + font-size: 12px; + line-height: 1.5; + color: #333; + background-color: #fff; +} + +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +a { + color: #006dcc; + text-decoration: none; +} +a:hover, +a:focus { + color: #1950a3; + text-decoration: underline; +} +a:focus { + outline: none; +} + +figure { + margin: 0; +} + +img { + vertical-align: middle; +} + +.img-responsive { + display: block; + max-width: 100%; + height: auto; +} + +.img-rounded { + border-radius: 2px; +} + +.img-thumbnail { + padding: 4px; + line-height: 1.5; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 2px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + max-width: 100%; + height: auto; +} + +.img-circle { + border-radius: 50%; +} + +hr { + margin-top: 18px; + margin-bottom: 18px; + border: 0; + border-top: 1px solid #e8e8e8; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +[role='button'] { + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h1 .small, +h2 small, +h2 .small, +h3 small, +h3 .small, +h4 small, +h4 .small, +h5 small, +h5 .small, +h6 small, +h6 .small, +.h1 small, +.h1 .small, +.h2 small, +.h2 .small, +.h3 small, +.h3 .small, +.h4 small, +.h4 .small, +.h5 small, +.h5 .small, +.h6 small, +.h6 .small { + font-weight: 400; + line-height: 1; + color: #838383; +} + +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 18px; + margin-bottom: 9px; +} +h1 small, +h1 .small, +.h1 small, +.h1 .small, +h2 small, +h2 .small, +.h2 small, +.h2 .small, +h3 small, +h3 .small, +.h3 small, +.h3 .small { + font-size: 65%; +} + +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 9px; + margin-bottom: 9px; +} +h4 small, +h4 .small, +.h4 small, +.h4 .small, +h5 small, +h5 .small, +.h5 small, +.h5 .small, +h6 small, +h6 .small, +.h6 small, +.h6 .small { + font-size: 75%; +} + +h1, +.h1 { + font-size: 31px; +} + +h2, +.h2 { + font-size: 25px; +} + +h3, +.h3 { + font-size: 21px; +} + +h4, +.h4 { + font-size: 15px; +} + +h5, +.h5 { + font-size: 12px; +} + +h6, +.h6 { + font-size: 11px; +} + +p { + margin: 0 0 9px; +} + +.lead { + margin-bottom: 18px; + font-size: 13px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 18px; + } +} + +small, +.small { + font-size: 91%; +} + +mark, +.mark { + padding: 0.2em; + background-color: #faa732; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.text-justify { + text-align: justify; +} + +.text-nowrap { + white-space: nowrap; +} + +.text-lowercase { + text-transform: lowercase; +} + +.text-uppercase, +.initialism { + text-transform: uppercase; +} + +.text-capitalize { + text-transform: capitalize; +} + +.text-muted { + color: #838383; +} + +.text-primary { + color: #006dcc; +} + +a.text-primary:hover, +a.text-primary:focus { + color: #005299; +} + +.text-success { + color: #5bb75b; +} + +a.text-success:hover, +a.text-success:focus { + color: #449b44; +} + +.text-info { + color: #49afcd; +} + +a.text-info:hover, +a.text-info:focus { + color: #3195b2; +} + +.text-warning { + color: #faa732; +} + +a.text-warning:hover, +a.text-warning:focus { + color: #f39106; +} + +.text-danger { + color: #da4f49; +} + +a.text-danger:hover, +a.text-danger:focus { + color: #c72f29; +} + +.bg-primary { + color: #fff; +} + +.bg-primary { + background-color: #006dcc; +} + +a.bg-primary:hover, +a.bg-primary:focus { + background-color: #005299; +} + +.bg-success { + background-color: #5bb75b; +} + +a.bg-success:hover, +a.bg-success:focus { + background-color: #449b44; +} + +.bg-info { + background-color: #49afcd; +} + +a.bg-info:hover, +a.bg-info:focus { + background-color: #3195b2; +} + +.bg-warning { + background-color: #faa732; +} + +a.bg-warning:hover, +a.bg-warning:focus { + background-color: #f39106; +} + +.bg-danger { + background-color: #da4f49; +} + +a.bg-danger:hover, +a.bg-danger:focus { + background-color: #c72f29; +} + +.page-header { + padding-bottom: 8px; + margin: 36px 0 18px; + border-bottom: 1px solid #e8e8e8; +} + +ul, +ol { + margin-top: 0; + margin-bottom: 9px; +} +ul ul, +ul ol, +ol ul, +ol ol { + margin-bottom: 0; +} + +.list-unstyled { + padding-left: 0; + list-style: none; +} + +.list-inline { + padding-left: 0; + list-style: none; + margin-left: -5px; +} +.list-inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} + +dl { + margin-top: 0; + margin-bottom: 18px; +} + +dt, +dd { + line-height: 1.5; +} + +dt { + font-weight: 700; +} + +dd { + margin-left: 0; +} + +.dl-horizontal dd:before, +.dl-horizontal dd:after { + display: table; + content: ' '; +} +.dl-horizontal dd:after { + clear: both; +} +@media (min-width: 0) { + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} + +abbr[title], +abbr[data-original-title] { + cursor: help; +} + +.initialism { + font-size: 90%; +} + +blockquote { + padding: 9px 18px; + margin: 0 0 18px; + font-size: 15px; + border-left: 5px solid #e8e8e8; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.5; + color: #838383; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '— '; +} + +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + text-align: right; + border-right: 5px solid #e8e8e8; + border-left: 0; +} +.blockquote-reverse footer:before, +.blockquote-reverse small:before, +.blockquote-reverse .small:before, +blockquote.pull-right footer:before, +blockquote.pull-right small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +.blockquote-reverse small:after, +.blockquote-reverse .small:after, +blockquote.pull-right footer:after, +blockquote.pull-right small:after, +blockquote.pull-right .small:after { + content: ' —'; +} + +address { + margin-bottom: 18px; + font-style: normal; + line-height: 1.5; +} + +.container { + padding-right: 10px; + padding-left: 10px; + margin-right: auto; + margin-left: auto; +} +.container:before, +.container:after { + display: table; + content: ' '; +} +.container:after { + clear: both; +} +@media (min-width: 768px) { + .container { + width: 740px; + } +} +@media (min-width: 992px) { + .container { + width: 960px; + } +} +@media (min-width: 1200px) { + .container { + width: 1160px; + } +} + +.container-fluid { + padding-right: 10px; + padding-left: 10px; + margin-right: auto; + margin-left: auto; +} +.container-fluid:before, +.container-fluid:after { + display: table; + content: ' '; +} +.container-fluid:after { + clear: both; +} + +.row { + margin-right: -10px; + margin-left: -10px; +} +.row:before, +.row:after { + display: table; + content: ' '; +} +.row:after { + clear: both; +} + +.row-no-gutters { + margin-right: 0; + margin-left: 0; +} +.row-no-gutters [class*='col-'] { + padding-right: 0; + padding-left: 0; +} + +.col-xs-1, +.col-sm-1, +.col-md-1, +.col-lg-1, +.col-xs-2, +.col-sm-2, +.col-md-2, +.col-lg-2, +.col-xs-3, +.col-sm-3, +.col-md-3, +.col-lg-3, +.col-xs-4, +.col-sm-4, +.col-md-4, +.col-lg-4, +.col-xs-5, +.col-sm-5, +.col-md-5, +.col-lg-5, +.col-xs-6, +.col-sm-6, +.col-md-6, +.col-lg-6, +.col-xs-7, +.col-sm-7, +.col-md-7, +.col-lg-7, +.col-xs-8, +.col-sm-8, +.col-md-8, +.col-lg-8, +.col-xs-9, +.col-sm-9, +.col-md-9, +.col-lg-9, +.col-xs-10, +.col-sm-10, +.col-md-10, +.col-lg-10, +.col-xs-11, +.col-sm-11, +.col-md-11, +.col-lg-11, +.col-xs-12, +.col-sm-12, +.col-md-12, +.col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 10px; + padding-left: 10px; +} + +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + float: left; +} + +.col-xs-1 { + width: 8.3333333333%; +} + +.col-xs-2 { + width: 16.6666666667%; +} + +.col-xs-3 { + width: 25%; +} + +.col-xs-4 { + width: 33.3333333333%; +} + +.col-xs-5 { + width: 41.6666666667%; +} + +.col-xs-6 { + width: 50%; +} + +.col-xs-7 { + width: 58.3333333333%; +} + +.col-xs-8 { + width: 66.6666666667%; +} + +.col-xs-9 { + width: 75%; +} + +.col-xs-10 { + width: 83.3333333333%; +} + +.col-xs-11 { + width: 91.6666666667%; +} + +.col-xs-12 { + width: 100%; +} + +.col-xs-pull-0 { + right: auto; +} + +.col-xs-pull-1 { + right: 8.3333333333%; +} + +.col-xs-pull-2 { + right: 16.6666666667%; +} + +.col-xs-pull-3 { + right: 25%; +} + +.col-xs-pull-4 { + right: 33.3333333333%; +} + +.col-xs-pull-5 { + right: 41.6666666667%; +} + +.col-xs-pull-6 { + right: 50%; +} + +.col-xs-pull-7 { + right: 58.3333333333%; +} + +.col-xs-pull-8 { + right: 66.6666666667%; +} + +.col-xs-pull-9 { + right: 75%; +} + +.col-xs-pull-10 { + right: 83.3333333333%; +} + +.col-xs-pull-11 { + right: 91.6666666667%; +} + +.col-xs-pull-12 { + right: 100%; +} + +.col-xs-push-0 { + left: auto; +} + +.col-xs-push-1 { + left: 8.3333333333%; +} + +.col-xs-push-2 { + left: 16.6666666667%; +} + +.col-xs-push-3 { + left: 25%; +} + +.col-xs-push-4 { + left: 33.3333333333%; +} + +.col-xs-push-5 { + left: 41.6666666667%; +} + +.col-xs-push-6 { + left: 50%; +} + +.col-xs-push-7 { + left: 58.3333333333%; +} + +.col-xs-push-8 { + left: 66.6666666667%; +} + +.col-xs-push-9 { + left: 75%; +} + +.col-xs-push-10 { + left: 83.3333333333%; +} + +.col-xs-push-11 { + left: 91.6666666667%; +} + +.col-xs-push-12 { + left: 100%; +} + +.col-xs-offset-0 { + margin-left: 0%; +} + +.col-xs-offset-1 { + margin-left: 8.3333333333%; +} + +.col-xs-offset-2 { + margin-left: 16.6666666667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.3333333333%; +} + +.col-xs-offset-5 { + margin-left: 41.6666666667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.3333333333%; +} + +.col-xs-offset-8 { + margin-left: 66.6666666667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.3333333333%; +} + +.col-xs-offset-11 { + margin-left: 91.6666666667%; +} + +.col-xs-offset-12 { + margin-left: 100%; +} + +@media (min-width: 768px) { + .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 { + float: left; + } + + .col-sm-1 { + width: 8.3333333333%; + } + + .col-sm-2 { + width: 16.6666666667%; + } + + .col-sm-3 { + width: 25%; + } + + .col-sm-4 { + width: 33.3333333333%; + } + + .col-sm-5 { + width: 41.6666666667%; + } + + .col-sm-6 { + width: 50%; + } + + .col-sm-7 { + width: 58.3333333333%; + } + + .col-sm-8 { + width: 66.6666666667%; + } + + .col-sm-9 { + width: 75%; + } + + .col-sm-10 { + width: 83.3333333333%; + } + + .col-sm-11 { + width: 91.6666666667%; + } + + .col-sm-12 { + width: 100%; + } + + .col-sm-pull-0 { + right: auto; + } + + .col-sm-pull-1 { + right: 8.3333333333%; + } + + .col-sm-pull-2 { + right: 16.6666666667%; + } + + .col-sm-pull-3 { + right: 25%; + } + + .col-sm-pull-4 { + right: 33.3333333333%; + } + + .col-sm-pull-5 { + right: 41.6666666667%; + } + + .col-sm-pull-6 { + right: 50%; + } + + .col-sm-pull-7 { + right: 58.3333333333%; + } + + .col-sm-pull-8 { + right: 66.6666666667%; + } + + .col-sm-pull-9 { + right: 75%; + } + + .col-sm-pull-10 { + right: 83.3333333333%; + } + + .col-sm-pull-11 { + right: 91.6666666667%; + } + + .col-sm-pull-12 { + right: 100%; + } + + .col-sm-push-0 { + left: auto; + } + + .col-sm-push-1 { + left: 8.3333333333%; + } + + .col-sm-push-2 { + left: 16.6666666667%; + } + + .col-sm-push-3 { + left: 25%; + } + + .col-sm-push-4 { + left: 33.3333333333%; + } + + .col-sm-push-5 { + left: 41.6666666667%; + } + + .col-sm-push-6 { + left: 50%; + } + + .col-sm-push-7 { + left: 58.3333333333%; + } + + .col-sm-push-8 { + left: 66.6666666667%; + } + + .col-sm-push-9 { + left: 75%; + } + + .col-sm-push-10 { + left: 83.3333333333%; + } + + .col-sm-push-11 { + left: 91.6666666667%; + } + + .col-sm-push-12 { + left: 100%; + } + + .col-sm-offset-0 { + margin-left: 0%; + } + + .col-sm-offset-1 { + margin-left: 8.3333333333%; + } + + .col-sm-offset-2 { + margin-left: 16.6666666667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.3333333333%; + } + + .col-sm-offset-5 { + margin-left: 41.6666666667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.3333333333%; + } + + .col-sm-offset-8 { + margin-left: 66.6666666667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.3333333333%; + } + + .col-sm-offset-11 { + margin-left: 91.6666666667%; + } + + .col-sm-offset-12 { + margin-left: 100%; + } +} +@media (min-width: 992px) { + .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 { + float: left; + } + + .col-md-1 { + width: 8.3333333333%; + } + + .col-md-2 { + width: 16.6666666667%; + } + + .col-md-3 { + width: 25%; + } + + .col-md-4 { + width: 33.3333333333%; + } + + .col-md-5 { + width: 41.6666666667%; + } + + .col-md-6 { + width: 50%; + } + + .col-md-7 { + width: 58.3333333333%; + } + + .col-md-8 { + width: 66.6666666667%; + } + + .col-md-9 { + width: 75%; + } + + .col-md-10 { + width: 83.3333333333%; + } + + .col-md-11 { + width: 91.6666666667%; + } + + .col-md-12 { + width: 100%; + } + + .col-md-pull-0 { + right: auto; + } + + .col-md-pull-1 { + right: 8.3333333333%; + } + + .col-md-pull-2 { + right: 16.6666666667%; + } + + .col-md-pull-3 { + right: 25%; + } + + .col-md-pull-4 { + right: 33.3333333333%; + } + + .col-md-pull-5 { + right: 41.6666666667%; + } + + .col-md-pull-6 { + right: 50%; + } + + .col-md-pull-7 { + right: 58.3333333333%; + } + + .col-md-pull-8 { + right: 66.6666666667%; + } + + .col-md-pull-9 { + right: 75%; + } + + .col-md-pull-10 { + right: 83.3333333333%; + } + + .col-md-pull-11 { + right: 91.6666666667%; + } + + .col-md-pull-12 { + right: 100%; + } + + .col-md-push-0 { + left: auto; + } + + .col-md-push-1 { + left: 8.3333333333%; + } + + .col-md-push-2 { + left: 16.6666666667%; + } + + .col-md-push-3 { + left: 25%; + } + + .col-md-push-4 { + left: 33.3333333333%; + } + + .col-md-push-5 { + left: 41.6666666667%; + } + + .col-md-push-6 { + left: 50%; + } + + .col-md-push-7 { + left: 58.3333333333%; + } + + .col-md-push-8 { + left: 66.6666666667%; + } + + .col-md-push-9 { + left: 75%; + } + + .col-md-push-10 { + left: 83.3333333333%; + } + + .col-md-push-11 { + left: 91.6666666667%; + } + + .col-md-push-12 { + left: 100%; + } + + .col-md-offset-0 { + margin-left: 0%; + } + + .col-md-offset-1 { + margin-left: 8.3333333333%; + } + + .col-md-offset-2 { + margin-left: 16.6666666667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.3333333333%; + } + + .col-md-offset-5 { + margin-left: 41.6666666667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.3333333333%; + } + + .col-md-offset-8 { + margin-left: 66.6666666667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.3333333333%; + } + + .col-md-offset-11 { + margin-left: 91.6666666667%; + } + + .col-md-offset-12 { + margin-left: 100%; + } +} +@media (min-width: 1200px) { + .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 { + float: left; + } + + .col-lg-1 { + width: 8.3333333333%; + } + + .col-lg-2 { + width: 16.6666666667%; + } + + .col-lg-3 { + width: 25%; + } + + .col-lg-4 { + width: 33.3333333333%; + } + + .col-lg-5 { + width: 41.6666666667%; + } + + .col-lg-6 { + width: 50%; + } + + .col-lg-7 { + width: 58.3333333333%; + } + + .col-lg-8 { + width: 66.6666666667%; + } + + .col-lg-9 { + width: 75%; + } + + .col-lg-10 { + width: 83.3333333333%; + } + + .col-lg-11 { + width: 91.6666666667%; + } + + .col-lg-12 { + width: 100%; + } + + .col-lg-pull-0 { + right: auto; + } + + .col-lg-pull-1 { + right: 8.3333333333%; + } + + .col-lg-pull-2 { + right: 16.6666666667%; + } + + .col-lg-pull-3 { + right: 25%; + } + + .col-lg-pull-4 { + right: 33.3333333333%; + } + + .col-lg-pull-5 { + right: 41.6666666667%; + } + + .col-lg-pull-6 { + right: 50%; + } + + .col-lg-pull-7 { + right: 58.3333333333%; + } + + .col-lg-pull-8 { + right: 66.6666666667%; + } + + .col-lg-pull-9 { + right: 75%; + } + + .col-lg-pull-10 { + right: 83.3333333333%; + } + + .col-lg-pull-11 { + right: 91.6666666667%; + } + + .col-lg-pull-12 { + right: 100%; + } + + .col-lg-push-0 { + left: auto; + } + + .col-lg-push-1 { + left: 8.3333333333%; + } + + .col-lg-push-2 { + left: 16.6666666667%; + } + + .col-lg-push-3 { + left: 25%; + } + + .col-lg-push-4 { + left: 33.3333333333%; + } + + .col-lg-push-5 { + left: 41.6666666667%; + } + + .col-lg-push-6 { + left: 50%; + } + + .col-lg-push-7 { + left: 58.3333333333%; + } + + .col-lg-push-8 { + left: 66.6666666667%; + } + + .col-lg-push-9 { + left: 75%; + } + + .col-lg-push-10 { + left: 83.3333333333%; + } + + .col-lg-push-11 { + left: 91.6666666667%; + } + + .col-lg-push-12 { + left: 100%; + } + + .col-lg-offset-0 { + margin-left: 0%; + } + + .col-lg-offset-1 { + margin-left: 8.3333333333%; + } + + .col-lg-offset-2 { + margin-left: 16.6666666667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.3333333333%; + } + + .col-lg-offset-5 { + margin-left: 41.6666666667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.3333333333%; + } + + .col-lg-offset-8 { + margin-left: 66.6666666667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.3333333333%; + } + + .col-lg-offset-11 { + margin-left: 91.6666666667%; + } + + .col-lg-offset-12 { + margin-left: 100%; + } +} +table { + background-color: transparent; +} +table col[class*='col-'] { + position: static; + display: table-column; + float: none; +} +table td[class*='col-'], +table th[class*='col-'] { + position: static; + display: table-cell; + float: none; +} + +caption { + padding-top: 8px; + padding-bottom: 8px; + color: #838383; + text-align: left; +} + +th { + text-align: left; +} + +.table { + width: 100%; + max-width: 100%; + margin-bottom: 18px; +} +.table > thead > tr > th, +.table > thead > tr > td, +.table > tbody > tr > th, +.table > tbody > tr > td, +.table > tfoot > tr > th, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.5; + vertical-align: top; + border-top: 1px solid #d3d3d3; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #d3d3d3; +} +.table > caption + thead > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > th, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #d3d3d3; +} +.table .table { + background-color: #fff; +} + +.table-condensed > thead > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > th, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > th, +.table-condensed > tfoot > tr > td { + padding: 5px; +} + +.table-bordered { + border: 1px solid #d3d3d3; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > th, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > th, +.table-bordered > tfoot > tr > td { + border: 1px solid #d3d3d3; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} + +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #f9f9f9; +} + +.table-hover > tbody > tr:hover { + background-color: #f9f9f9; +} + +.table > thead > tr > td.active, +.table > thead > tr > th.active, +.table > thead > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr > td.active, +.table > tbody > tr > th.active, +.table > tbody > tr.active > td, +.table > tbody > tr.active > th, +.table > tfoot > tr > td.active, +.table > tfoot > tr > th.active, +.table > tfoot > tr.active > td, +.table > tfoot > tr.active > th { + background-color: #f9f9f9; +} + +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #ececec; +} + +.table > thead > tr > td.success, +.table > thead > tr > th.success, +.table > thead > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr > td.success, +.table > tbody > tr > th.success, +.table > tbody > tr.success > td, +.table > tbody > tr.success > th, +.table > tfoot > tr > td.success, +.table > tfoot > tr > th.success, +.table > tfoot > tr.success > td, +.table > tfoot > tr.success > th { + background-color: #5bb75b; +} + +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #4cad4c; +} + +.table > thead > tr > td.info, +.table > thead > tr > th.info, +.table > thead > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr > td.info, +.table > tbody > tr > th.info, +.table > tbody > tr.info > td, +.table > tbody > tr.info > th, +.table > tfoot > tr > td.info, +.table > tfoot > tr > th.info, +.table > tfoot > tr.info > td, +.table > tfoot > tr.info > th { + background-color: #49afcd; +} + +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #36a5c6; +} + +.table > thead > tr > td.warning, +.table > thead > tr > th.warning, +.table > thead > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr > td.warning, +.table > tbody > tr > th.warning, +.table > tbody > tr.warning > td, +.table > tbody > tr.warning > th, +.table > tfoot > tr > td.warning, +.table > tfoot > tr > th.warning, +.table > tfoot > tr.warning > td, +.table > tfoot > tr.warning > th { + background-color: #faa732; +} + +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #f99c19; +} + +.table > thead > tr > td.danger, +.table > thead > tr > th.danger, +.table > thead > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr > td.danger, +.table > tbody > tr > th.danger, +.table > tbody > tr.danger > td, +.table > tbody > tr.danger > th, +.table > tfoot > tr > td.danger, +.table > tfoot > tr > th.danger, +.table > tfoot > tr.danger > td, +.table > tfoot > tr.danger > th { + background-color: #da4f49; +} + +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #d63b34; +} + +.table-responsive { + min-height: 0.01%; + overflow-x: auto; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 13.5px; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #d3d3d3; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} + +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 18px; + font-size: 18px; + line-height: inherit; + color: #333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: 700; +} + +input[type='search'] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: none; + appearance: none; +} + +input[type='radio'], +input[type='checkbox'] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type='radio'][disabled], +input[type='radio'].disabled, +fieldset[disabled] input[type='radio'], +input[type='checkbox'][disabled], +input[type='checkbox'].disabled, +fieldset[disabled] input[type='checkbox'] { + cursor: not-allowed; +} + +input[type='file'] { + display: block; +} + +input[type='range'] { + display: block; + width: 100%; +} + +select[multiple], +select[size] { + height: auto; +} + +input[type='file']:focus, +input[type='radio']:focus, +input[type='checkbox']:focus { + outline: none; +} + +output { + display: block; + padding-top: 5px; + font-size: 12px; + line-height: 1.5; + color: #5a5a5a; +} + +.form-control { + display: block; + width: 100%; + height: 28px; + padding: 4px 8px; + font-size: 12px; + line-height: 1.5; + color: #5a5a5a; + background-color: #fff; + background-image: none; + border: 1px solid #e8e8e8; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} +.form-control:focus { + border-color: #d3d3d3; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 211, 211, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 211, 211, 0.6); +} +.form-control::-moz-placeholder { + color: #ababab; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #ababab; +} +.form-control::-webkit-input-placeholder { + color: #ababab; +} +.form-control::-ms-expand { + background-color: transparent; + border: 0; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #e8e8e8; + opacity: 1; +} +.form-control[disabled], +fieldset[disabled] .form-control { + cursor: not-allowed; +} + +textarea.form-control { + height: auto; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type='date'].form-control, + input[type='time'].form-control, + input[type='datetime-local'].form-control, + input[type='month'].form-control { + line-height: 28px; + } + input[type='date'].input-sm, + .input-group-sm > .input-group-btn > input[type='date'].btn, + .input-group-sm input[type='date'], + input[type='time'].input-sm, + .input-group-sm > .input-group-btn > input[type='time'].btn, + .input-group-sm input[type='time'], + input[type='datetime-local'].input-sm, + .input-group-sm > .input-group-btn > input[type='datetime-local'].btn, + .input-group-sm input[type='datetime-local'], + input[type='month'].input-sm, + .input-group-sm > .input-group-btn > input[type='month'].btn, + .input-group-sm input[type='month'] { + line-height: 26px; + } + input[type='date'].input-lg, + .input-group-lg > .input-group-btn > input[type='date'].btn, + .input-group-lg input[type='date'], + input[type='time'].input-lg, + .input-group-lg > .input-group-btn > input[type='time'].btn, + .input-group-lg input[type='time'], + input[type='datetime-local'].input-lg, + .input-group-lg > .input-group-btn > input[type='datetime-local'].btn, + .input-group-lg input[type='datetime-local'], + input[type='month'].input-lg, + .input-group-lg > .input-group-btn > input[type='month'].btn, + .input-group-lg input[type='month'] { + line-height: 34px; + } +} +.form-group { + margin-bottom: 30px; +} + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio.disabled label, +fieldset[disabled] .radio label, +.checkbox.disabled label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.radio label, +.checkbox label { + min-height: 18px; + padding-left: 20px; + margin-bottom: 0; + font-weight: 400; + cursor: pointer; +} + +.radio input[type='radio'], +.radio-inline input[type='radio'], +.checkbox input[type='checkbox'], +.checkbox-inline input[type='checkbox'] { + position: absolute; + margin-top: 4px \9; + margin-left: -20px; +} + +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} + +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + font-weight: 400; + vertical-align: middle; + cursor: pointer; +} +.radio-inline.disabled, +fieldset[disabled] .radio-inline, +.checkbox-inline.disabled, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} + +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} + +.form-control-static { + min-height: 30px; + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 0; +} +.form-control-static.input-lg, +.input-group-lg > .form-control-static.form-control, +.input-group-lg > .form-control-static.input-group-addon, +.input-group-lg > .input-group-btn > .form-control-static.btn, +.form-control-static.input-sm, +.input-group-sm > .form-control-static.form-control, +.input-group-sm > .form-control-static.input-group-addon, +.input-group-sm > .input-group-btn > .form-control-static.btn { + padding-right: 0; + padding-left: 0; +} + +.input-sm, +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 26px; + padding: 4px 15px; + font-size: 11px; + line-height: 1.5; + border-radius: 2px; +} + +select.input-sm, +.input-group-sm > select.form-control, +.input-group-sm > select.input-group-addon, +.input-group-sm > .input-group-btn > select.btn { + height: 26px; + line-height: 26px; +} + +textarea.input-sm, +.input-group-sm > textarea.form-control, +.input-group-sm > textarea.input-group-addon, +.input-group-sm > .input-group-btn > textarea.btn, +select[multiple].input-sm, +.input-group-sm > select[multiple].form-control, +.input-group-sm > select[multiple].input-group-addon, +.input-group-sm > .input-group-btn > select[multiple].btn { + height: auto; +} + +.form-group-sm .form-control { + height: 26px; + padding: 4px 15px; + font-size: 11px; + line-height: 1.5; + border-radius: 2px; +} +.form-group-sm select.form-control { + height: 26px; + line-height: 26px; +} +.form-group-sm textarea.form-control, +.form-group-sm select[multiple].form-control { + height: auto; +} +.form-group-sm .form-control-static { + height: 26px; + min-height: 29px; + padding: 5px 15px; + font-size: 11px; + line-height: 1.5; +} + +.input-lg, +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 34px; + padding: 6px 29px; + font-size: 15px; + line-height: 1.3333333; + border-radius: 2px; +} + +select.input-lg, +.input-group-lg > select.form-control, +.input-group-lg > select.input-group-addon, +.input-group-lg > .input-group-btn > select.btn { + height: 34px; + line-height: 34px; +} + +textarea.input-lg, +.input-group-lg > textarea.form-control, +.input-group-lg > textarea.input-group-addon, +.input-group-lg > .input-group-btn > textarea.btn, +select[multiple].input-lg, +.input-group-lg > select[multiple].form-control, +.input-group-lg > select[multiple].input-group-addon, +.input-group-lg > .input-group-btn > select[multiple].btn { + height: auto; +} + +.form-group-lg .form-control { + height: 34px; + padding: 6px 29px; + font-size: 15px; + line-height: 1.3333333; + border-radius: 2px; +} +.form-group-lg select.form-control { + height: 34px; + line-height: 34px; +} +.form-group-lg textarea.form-control, +.form-group-lg select[multiple].form-control { + height: auto; +} +.form-group-lg .form-control-static { + height: 34px; + min-height: 33px; + padding: 7px 29px; + font-size: 15px; + line-height: 1.3333333; +} + +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 35px; +} + +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + pointer-events: none; +} + +.input-lg + .form-control-feedback, +.input-group-lg > .form-control + .form-control-feedback, +.input-group-lg > .input-group-addon + .form-control-feedback, +.input-group-lg > .input-group-btn > .btn + .form-control-feedback, +.input-group-lg + .form-control-feedback, +.form-group-lg .form-control + .form-control-feedback { + width: 34px; + height: 34px; + line-height: 34px; +} + +.input-sm + .form-control-feedback, +.input-group-sm > .form-control + .form-control-feedback, +.input-group-sm > .input-group-addon + .form-control-feedback, +.input-group-sm > .input-group-btn > .btn + .form-control-feedback, +.input-group-sm + .form-control-feedback, +.form-group-sm .form-control + .form-control-feedback { + width: 26px; + height: 26px; + line-height: 26px; +} + +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline, +.has-success.radio label, +.has-success.checkbox label, +.has-success.radio-inline label, +.has-success.checkbox-inline label { + color: #5bb75b; +} +.has-success .form-control { + border-color: #5bb75b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-success .form-control:focus { + border-color: #449b44; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #a2d6a2; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #a2d6a2; +} +.has-success .input-group-addon { + color: #5bb75b; + background-color: #5bb75b; + border-color: #5bb75b; +} +.has-success .form-control-feedback { + color: #5bb75b; +} + +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline, +.has-warning.radio label, +.has-warning.checkbox label, +.has-warning.radio-inline label, +.has-warning.checkbox-inline label { + color: #faa732; +} +.has-warning .form-control { + border-color: #faa732; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-warning .form-control:focus { + border-color: #f39106; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fcd296; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fcd296; +} +.has-warning .input-group-addon { + color: #faa732; + background-color: #faa732; + border-color: #faa732; +} +.has-warning .form-control-feedback { + color: #faa732; +} + +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline, +.has-error.radio label, +.has-error.checkbox label, +.has-error.radio-inline label, +.has-error.checkbox-inline label { + color: #da4f49; +} +.has-error .form-control { + border-color: #da4f49; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-error .form-control:focus { + border-color: #c72f29; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba19e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba19e; +} +.has-error .input-group-addon { + color: #da4f49; + background-color: #da4f49; + border-color: #da4f49; +} +.has-error .form-control-feedback { + color: #da4f49; +} + +.has-feedback label ~ .form-control-feedback { + top: 23px; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} + +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; +} + +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-static { + display: inline-block; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type='radio'], + .form-inline .checkbox input[type='checkbox'] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} + +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + padding-top: 5px; + margin-top: 0; + margin-bottom: 0; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 23px; +} +.form-horizontal .form-group { + margin-right: -10px; + margin-left: -10px; +} +.form-horizontal .form-group:before, +.form-horizontal .form-group:after { + display: table; + content: ' '; +} +.form-horizontal .form-group:after { + clear: both; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + padding-top: 5px; + margin-bottom: 0; + text-align: right; + } +} +.form-horizontal .has-feedback .form-control-feedback { + right: 10px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 7px; + font-size: 15px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 5px; + font-size: 11px; + } +} + +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} +.fade.in { + opacity: 1; +} + +.collapse { + display: none; +} +.collapse.in { + display: block; +} + +tr.collapse.in { + display: table-row; +} + +tbody.collapse.in { + display: table-row-group; +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition-property: height, visibility; + transition-property: height, visibility; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; +} + +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid \9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} + +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle:focus { + outline: 0; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 12px; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid #d3d3d3; + border-radius: 2px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 8px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.5; + color: #333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + color: #fff; + text-decoration: none; + background-color: #f5f5f5; +} + +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #333; + text-decoration: none; + background-color: #f9f9f9; + outline: 0; +} + +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #838383; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: not-allowed; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} + +.dropdown-menu-right { + right: 0; + left: auto; +} + +.dropdown-menu-left { + right: auto; + left: 0; +} + +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 11px; + line-height: 1.5; + color: #838383; + white-space: nowrap; +} + +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} + +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + content: ''; + border-top: 0; + border-bottom: 4px dashed; + border-bottom: 4px solid \9; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} + +@media (min-width: 0) { + .navbar-right .dropdown-menu { + right: 0; + left: auto; + } + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn:hover, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 2; +} + +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} + +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar:before, +.btn-toolbar:after { + display: table; + content: ' '; +} +.btn-toolbar:after { + clear: both; +} +.btn-toolbar .btn, +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group > .btn-group { + float: left; +} + +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + +.btn-group > .btn + .dropdown-toggle { + padding-right: 8px; + padding-left: 8px; +} + +.btn-group > .btn-lg + .dropdown-toggle, +.btn-group-lg.btn-group > .btn + .dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} + +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} + +.btn .caret { + margin-left: 0; +} + +.btn-lg .caret, +.btn-group-lg > .btn .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} + +.dropup .btn-lg .caret, +.dropup .btn-group-lg > .btn .caret { + border-width: 0 5px 5px; +} + +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after { + display: table; + content: ' '; +} +.btn-group-vertical > .btn-group:after { + clear: both; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} + +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} + +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + display: table-cell; + float: none; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} + +[data-toggle='buttons'] > .btn input[type='radio'], +[data-toggle='buttons'] > .btn input[type='checkbox'], +[data-toggle='buttons'] > .btn-group > .btn input[type='radio'], +[data-toggle='buttons'] > .btn-group > .btn input[type='checkbox'] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} + +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*='col-'] { + float: none; + padding-right: 0; + padding-left: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group .form-control:focus { + z-index: 3; +} + +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} + +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +.input-group-addon { + padding: 4px 8px; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: #5a5a5a; + text-align: center; + background-color: #fff; + border: 1px solid #fff; + border-radius: 2px; +} +.input-group-addon.input-sm, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .input-group-addon.btn { + padding: 4px 15px; + font-size: 11px; + border-radius: 2px; +} +.input-group-addon.input-lg, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .input-group-addon.btn { + padding: 6px 29px; + font-size: 15px; + border-radius: 2px; +} +.input-group-addon input[type='radio'], +.input-group-addon input[type='checkbox'] { + margin-top: 0; +} + +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-addon:first-child { + border-right: 0; +} + +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group-addon:last-child { + border-left: 0; +} + +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + z-index: 2; + margin-left: -1px; +} + +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav:before, +.nav:after { + display: table; + content: ' '; +} +.nav:after { + clear: both; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #e8e8e8; +} +.nav > li.disabled > a { + color: #838383; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #838383; + text-decoration: none; + cursor: not-allowed; + background-color: transparent; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #e8e8e8; + border-color: #006dcc; +} +.nav .nav-divider { + height: 1px; + margin: 8px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} + +.nav-tabs { + border-bottom: 1px solid #ddd; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.5; + border: 1px solid transparent; + border-radius: 2px 2px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #e8e8e8 #e8e8e8 #ddd; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #5a5a5a; + cursor: default; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 2px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #fff; + background-color: #006dcc; +} + +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} + +.nav-justified, +.nav-tabs.nav-justified { + width: 100%; +} +.nav-justified > li, +.nav-tabs.nav-justified > li { + float: none; +} +.nav-justified > li > a, +.nav-tabs.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li, + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a, + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} + +.nav-tabs-justified, +.nav-tabs.nav-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a, +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 2px; +} +.nav-tabs-justified > .active > a, +.nav-tabs.nav-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a, + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 2px 2px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs.nav-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #fff; + } +} + +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} + +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.navbar { + position: relative; + min-height: 35px; + margin-bottom: 18px; + border: 1px solid transparent; +} +.navbar:before, +.navbar:after { + display: table; + content: ' '; +} +.navbar:after { + clear: both; +} +@media (min-width: 0) { + .navbar { + border-radius: 2px; + } +} + +.navbar-header:before, +.navbar-header:after { + display: table; + content: ' '; +} +.navbar-header:after { + clear: both; +} +@media (min-width: 0) { + .navbar-header { + float: left; + } +} + +.navbar-collapse { + padding-right: 10px; + padding-left: 10px; + overflow-x: visible; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-overflow-scrolling: touch; +} +.navbar-collapse:before, +.navbar-collapse:after { + display: table; + content: ' '; +} +.navbar-collapse:after { + clear: both; +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 0) { + .navbar-collapse { + width: auto; + border-top: 0; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-right: 0; + padding-left: 0; + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-device-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +@media (min-width: 0) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} + +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} + +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} + +.container > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-header, +.container-fluid > .navbar-collapse { + margin-right: -10px; + margin-left: -10px; +} +@media (min-width: 0) { + .container > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-header, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} + +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 0) { + .navbar-static-top { + border-radius: 0; + } +} + +.navbar-brand { + float: left; + height: 35px; + padding: 8.5px 10px; + font-size: 15px; + line-height: 18px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +.navbar-brand > img { + display: block; +} +@media (min-width: 0) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -10px; + } +} + +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-right: 10px; + margin-top: 0.5px; + margin-bottom: 0.5px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 2px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 0) { + .navbar-toggle { + display: none; + } +} + +.navbar-nav { + margin: 4.25px -10px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 18px; +} +@media (max-width: -1) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 18px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 0) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 8.5px; + padding-bottom: 8.5px; + } +} + +.navbar-form { + padding: 10px 10px; + margin-right: -10px; + margin-left: -10px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + margin-top: 3.5px; + margin-bottom: 3.5px; +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .form-control-static { + display: inline-block; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type='radio'], + .navbar-form .checkbox input[type='checkbox'] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: -1) { + .navbar-form .form-group { + margin-bottom: 5px; + } + .navbar-form .form-group:last-child { + margin-bottom: 0; + } +} +@media (min-width: 0) { + .navbar-form { + width: auto; + padding-top: 0; + padding-bottom: 0; + margin-right: 0; + margin-left: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } +} + +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.navbar-btn { + margin-top: 3.5px; + margin-bottom: 3.5px; +} +.navbar-btn.btn-sm, +.btn-group-sm > .navbar-btn.btn { + margin-top: 4.5px; + margin-bottom: 4.5px; +} +.navbar-btn.btn-xs, +.btn-group-xs > .navbar-btn.btn { + margin-top: 6.5px; + margin-bottom: 6.5px; +} + +.navbar-text { + margin-top: 8.5px; + margin-bottom: 8.5px; +} +@media (min-width: 0) { + .navbar-text { + float: left; + margin-right: 10px; + margin-left: 10px; + } +} + +@media (min-width: 0) { + .navbar-left { + float: left !important; + } + + .navbar-right { + float: right !important; + margin-right: -10px; + } + .navbar-right ~ .navbar-right { + margin-right: 0; + } +} +.navbar-default { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navbar-default .navbar-brand { + color: #777; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #777; +} +.navbar-default .navbar-nav > li > a { + color: #777; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #333; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #555; + background-color: #e7e7e7; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #ccc; + background-color: transparent; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + color: #555; + background-color: #e7e7e7; +} +@media (max-width: -1) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #333; + background-color: transparent; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #555; + background-color: #e7e7e7; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #ccc; + background-color: transparent; + } +} +.navbar-default .navbar-toggle { + border-color: #ddd; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #ddd; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #888; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #e7e7e7; +} +.navbar-default .navbar-link { + color: #777; +} +.navbar-default .navbar-link:hover { + color: #333; +} +.navbar-default .btn-link { + color: #777; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #333; +} +.navbar-default .btn-link[disabled]:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:hover, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #ccc; +} + +.navbar-inverse { + background-color: #222; + border-color: #090909; +} +.navbar-inverse .navbar-brand { + color: darkgray; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-text { + color: darkgray; +} +.navbar-inverse .navbar-nav > li > a { + color: darkgray; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #fff; + background-color: #090909; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #444; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: #fff; + background-color: #090909; +} +@media (max-width: -1) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: darkgray; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #fff; + background-color: transparent; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #444; + background-color: transparent; + } +} +.navbar-inverse .navbar-toggle { + border-color: #333; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #fff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} +.navbar-inverse .navbar-link { + color: darkgray; +} +.navbar-inverse .navbar-link:hover { + color: #fff; +} +.navbar-inverse .btn-link { + color: darkgray; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #fff; +} +.navbar-inverse .btn-link[disabled]:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:hover, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #444; +} + +.label { + display: inline; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} + +a.label:hover, +a.label:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} + +.label-default { + background-color: #838383; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #6a6a6a; +} + +.label-primary { + background-color: #006dcc; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #005299; +} + +.label-success { + background-color: #5bb75b; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449b44; +} + +.label-info { + background-color: #49afcd; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #3195b2; +} + +.label-warning { + background-color: #faa732; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #f39106; +} + +.label-danger { + background-color: #da4f49; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c72f29; +} + +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 11px; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background-color: #838383; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge, +.btn-group-xs > .btn .badge { + top: 0; + padding: 1px 5px; +} +.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #006dcc; + background-color: #fff; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} + +a.badge:hover, +a.badge:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} + +.alert { + padding: 15px; + margin-bottom: 18px; + border: 1px solid transparent; + border-radius: 2px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} + +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} + +.alert-success { + color: #5bb75b; + background-color: #5bb75b; + border-color: #31a549; +} +.alert-success hr { + border-top-color: #2b9140; +} +.alert-success .alert-link { + color: #449b44; +} + +.alert-info { + color: #49afcd; + background-color: #49afcd; + border-color: #0492ba; +} +.alert-info hr { + border-top-color: #037ea1; +} +.alert-info .alert-link { + color: #3195b2; +} + +.alert-warning { + color: #faa732; + background-color: #faa732; + border-color: #f8951d; +} +.alert-warning hr { + border-top-color: #f48908; +} +.alert-warning .alert-link { + color: #f39106; +} + +.alert-danger { + color: #da4f49; + background-color: #da4f49; + border-color: #d5382e; +} +.alert-danger hr { + border-top-color: #c23027; +} +.alert-danger .alert-link { + color: #c72f29; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + height: 18px; + margin-bottom: 18px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 11px; + line-height: 18px; + color: #fff; + text-align: center; + background-color: #006dcc; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-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-image: -o-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-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: 40px 40px; +} + +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +.progress-bar-success { + background-color: #5bb75b; +} +.progress-striped .progress-bar-success { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-info { + background-color: #49afcd; +} +.progress-striped .progress-bar-info { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-warning { + background-color: #faa732; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-danger { + background-color: #da4f49; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} + +.well-lg { + padding: 24px; + border-radius: 2px; +} + +.well-sm { + padding: 9px; + border-radius: 2px; +} + +.close { + float: right; + font-size: 18px; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; +} +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; +} + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + appearance: none; +} + +.modal-open { + overflow: hidden; +} + +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); + transform: translate(0, -25%); + -webkit-transition: -webkit-transform 0.3s ease-out; + -moz-transition: -moz-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + transition: transform 0.3s ease-out; +} +.modal.in .modal-dialog { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +.modal-content { + position: relative; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid transparent; + border-radius: 2px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + outline: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #5a5a5a; +} +.modal-backdrop.fade { + filter: alpha(opacity=0); + opacity: 0; +} +.modal-backdrop.in { + filter: alpha(opacity=80); + opacity: 0.8; +} + +.modal-header { + padding: 15px; + border-bottom: 1px solid #e8e8e8; +} +.modal-header:before, +.modal-header:after { + display: table; + content: ' '; +} +.modal-header:after { + clear: both; +} + +.modal-header .close { + margin-top: -2px; +} + +.modal-title { + margin: 0; + line-height: 1.5; +} + +.modal-body { + position: relative; + padding: 30px; +} + +.modal-footer { + padding: 30px; + text-align: right; + border-top: 1px solid #e8e8e8; +} +.modal-footer:before, +.modal-footer:after { + display: table; + content: ' '; +} +.modal-footer:after { + clear: both; +} +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 768px) { + .modal-dialog { + width: 700px; + margin: 30px auto; + } + + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + } + + .modal-sm { + width: 525px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 940px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: Roboto, Helvetica, sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + line-break: auto; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + white-space: normal; + font-size: 11px; + filter: alpha(opacity=0); + opacity: 0; +} +.tooltip.in { + filter: alpha(opacity=90); + opacity: 0.9; +} +.tooltip.top { + padding: 5px 0; + margin-top: -3px; +} +.tooltip.right { + padding: 0 5px; + margin-left: 3px; +} +.tooltip.bottom { + padding: 5px 0; + margin-top: 3px; +} +.tooltip.left { + padding: 0 5px; + margin-left: -3px; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-left .tooltip-arrow { + right: 5px; + bottom: 0; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} + +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #fff; + text-align: center; + background-color: #000; + border-radius: 2px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner > .item { + position: relative; + display: none; + -webkit-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + max-width: 100%; + height: auto; + line-height: 1; +} +@media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .item { + -webkit-transition: -webkit-transform 0.6s ease-in-out; + -moz-transition: -moz-transform 0.6s ease-in-out; + -o-transition: -o-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + } + .carousel-inner > .item.next, + .carousel-inner > .item.active.right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + left: 0; + } + .carousel-inner > .item.prev, + .carousel-inner > .item.active.left { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + left: 0; + } + .carousel-inner > .item.next.left, + .carousel-inner > .item.prev.right, + .carousel-inner > .item.active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + left: 0; + } +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0); + filter: alpha(opacity=50); + opacity: 0.5; +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#80000000", endColorstr="#00000000", GradientType=1); + background-repeat: repeat-x; +} +.carousel-control.right { + right: 0; + left: auto; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#80000000", GradientType=1); + background-repeat: repeat-x; +} +.carousel-control:hover, +.carousel-control:focus { + color: #fff; + text-decoration: none; + outline: 0; + filter: alpha(opacity=90); + opacity: 0.9; +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + margin-top: -10px; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + font-family: serif; + line-height: 1; +} +.carousel-control .icon-prev:before { + content: '‹'; +} +.carousel-control .icon-next:before { + content: '›'; +} + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); + border: 1px solid #fff; + border-radius: 10px; +} +.carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; +} + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); +} +.carousel-caption .btn { + text-shadow: none; +} + +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -10px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -10px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -10px; + } + + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; + } + + .carousel-indicators { + bottom: 20px; + } +} +.clearfix:before, +.clearfix:after { + display: table; + content: ' '; +} +.clearfix:after { + clear: both; +} + +.center-block { + display: block; + margin-right: auto; + margin-left: auto; +} + +.pull-right { + float: right !important; +} + +.pull-left { + float: left !important; +} + +.hide { + display: none !important; +} + +.show { + display: block !important; +} + +.invisible { + visibility: hidden; +} + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.hidden { + display: none !important; +} + +.affix { + position: fixed; +} + +.checkbox label, +.radio label, +.radiogroup-stacked label { + font-weight: 400; + padding-top: 1px; +} +.checkbox .icheckbox, +.radio .icheckbox, +.radiogroup-stacked .icheckbox { + margin-left: -20px; +} +.checkbox .icheckbox > input, +.radio .icheckbox > input, +.radiogroup-stacked .icheckbox > input { + margin-left: 0; +} +.checkbox > .icheckbox, +.checkbox > .iradio, +.radio > .icheckbox, +.radio > .iradio, +.radiogroup-stacked > .icheckbox, +.radiogroup-stacked > .iradio { + margin-left: 0; +} +.checkbox > input[type='checkbox'], +.checkbox > input[type='radio'], +.radio > input[type='checkbox'], +.radio > input[type='radio'], +.radiogroup-stacked > input[type='checkbox'], +.radiogroup-stacked > input[type='radio'] { + margin-left: 0; +} + +input[type='checkbox'], +input[type='radio'] { + width: 16px; + height: 16px; + margin-top: 0; +} + +.icheckbox + span, +.iradio + span { + font-weight: 400; +} +.icheckbox:not(.disabled) + span, +.iradio:not(.disabled) + span { + cursor: pointer; +} + +.form-horizontal .control-label { + text-align: left; +} +.form-horizontal .checkbox { + padding-top: 3px; + min-height: 16px; +} +.form-group .help-block { + margin-bottom: 0; +} +.form-group label { + font-weight: 700; +} +.form-group .checkbox label { + font-weight: 400; +} +.form-control, +.form-control:focus { + box-shadow: none; +} +.form-control:focus { + outline: 0; +} +.form-control, +.form-control-static { + font-weight: 400; +} +.form-btn-footer { + text-align: right; +} + +fieldset { + border-bottom: 1px solid #f3f3f3; + margin-bottom: 30px; +} +fieldset.borderless { + border-bottom: 0; + margin-bottom: 0; +} + +label { + color: #5a5a5a; +} + +.input-group { + display: flex; +} + +.input-group-addon { + font-weight: 400; + padding: 4px 5px; +} +.input-group-addon:first-child { + padding-left: 0; +} +.input-group-addon:last-child { + padding-right: 0; +} + +.help-block { + color: #ababab; + font-weight: 400; + margin-top: 8px; +} + +.form-horizontal .control-label .help-block { + margin-top: 1px; +} + +.borderedwell-component .form-horizontal { + padding: 30px 30px 0; +} + +.modal { + font-weight: 400; +} +.modal-title { + font-weight: 700; +} +.modal-content { + border-radius: 0; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); +} +.modal-body { + overflow: auto; +} +.modal-header, +.modal-footer { + height: 40px; +} +.modal-header { + background-color: #f3f3f3; + padding: 10px 15px; +} +.modal-header > .close { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 11.3L7.3 8 4.1 4.7l.8-.7L8 7.2 11.1 4l.7.7-3.1 3.2 3.3 3.3-.7.8L8 8.7 4.7 12l-.7-.7z'/%3E%3C/svg%3E"); + background-position: center; + background-size: 20px; + height: 20px; + margin-right: -5px; + margin-top: 0; + width: 20px; +} +.modal-header > .close > span { + display: none; +} +.modal-footer { + padding: 6px; +} +.modal-footer > .pull-left { + float: left; +} +.modal-footer > label { + font-weight: 400; + color: #838383; + margin-bottom: 0; + line-height: 28px; +} +.modal-footer > label.pull-left { + padding: 0 9px; +} +.modal-footer > label.pull-left > input { + margin-right: 6px; +} +.modal-instruction > p { + margin-bottom: 25px; +} +.modal-instruction > strong { + display: block; + margin-bottom: 5px; +} + +.nav-tabs { + margin-bottom: 0; + min-height: 35px; +} +.nav-tabs > li { + background-color: #f9f9f9; + border-left: 1px solid #e8e8e8; + border-top: 1px solid #e8e8e8; + display: inline-block; + font-size: 12px; + margin-bottom: -1px; + margin-right: 0; + padding: 0; + text-align: center; +} +.nav-tabs > li > a { + color: #838383; + cursor: pointer; + display: inline-block; + font-weight: 400; + margin-right: 0; + padding: 8px 15px 7px; + text-shadow: none; + user-select: none; + white-space: nowrap; +} +.nav-tabs > li > a, +.nav-tabs > li > a:hover, +.nav-tabs > li > a:focus { + border: 0; + outline: 0; +} +.nav-tabs > li > a .aui--svg-symbol-component { + vertical-align: top; +} +.nav-tabs > li > a .icon { + float: left; + height: 16px; + width: 16px; +} +.nav-tabs > li.active, +.nav-tabs > li.active:hover, +.nav-tabs > li.active:focus { + background-color: #fff; + border: 0; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border-right: 0; + cursor: default; +} +.nav-tabs > li:last-child, +.nav-tabs > li:last-child:hover, +.nav-tabs > li:last-child:focus { + border-right: 1px solid #e8e8e8; +} +.nav-tabs .flexible-wrapper-inline > .flexible-spacer-component { + min-width: 8px; +} + +body { + color: #5a5a5a; +} + +b, +strong { + font-weight: 700; +} + +.aui--date-picker { + display: inline-block; +} + +.react-datepicker { + border-color: #d3d3d3; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); + font-family: Roboto, Helvetica, sans-serif; + font-size: 12px; +} +.react-datepicker__header { + background-color: #f9f9f9; + border-bottom: 0; +} +.react-datepicker, +.react-datepicker__day, +.react-datepicker__day-name { + color: #5a5a5a; +} +.react-datepicker:hover, +.react-datepicker__day:hover, +.react-datepicker__day-name:hover { + border-radius: 2px; +} +.react-datepicker--outside-month, +.react-datepicker--disabled, +.react-datepicker__day--outside-month, +.react-datepicker__day--disabled, +.react-datepicker__day-name--outside-month, +.react-datepicker__day-name--disabled { + color: #e8e8e8; +} +.react-datepicker--selected, +.react-datepicker--keyboard-selected, +.react-datepicker__day--selected, +.react-datepicker__day--keyboard-selected, +.react-datepicker__day-name--selected, +.react-datepicker__day-name--keyboard-selected { + background-color: #006dcc; + color: #fff; +} +.react-datepicker--selected, +.react-datepicker--selected:hover, +.react-datepicker--keyboard-selected, +.react-datepicker--keyboard-selected:hover, +.react-datepicker__day--selected, +.react-datepicker__day--selected:hover, +.react-datepicker__day--keyboard-selected, +.react-datepicker__day--keyboard-selected:hover, +.react-datepicker__day-name--selected, +.react-datepicker__day-name--selected:hover, +.react-datepicker__day-name--keyboard-selected, +.react-datepicker__day-name--keyboard-selected:hover { + border-radius: 2px; +} +.react-datepicker__day--in-range, +.react-datepicker__day__day--in-range, +.react-datepicker__day-name__day--in-range { + color: #fff; +} +.react-datepicker__day, +.react-datepicker__day-name { + width: 22.8px; + line-height: 22.8px; + margin: 1.992px; +} +.react-datepicker__month { + margin: 8.4px; +} +.react-datepicker__current-month { + color: #5a5a5a; + font-size: 12px; +} +.react-datepicker__navigation { + width: 24px; + height: 24px; + top: 4.8px; +} +.react-datepicker__navigation--next { + border: 0; + right: 7px; +} +.react-datepicker__navigation--next:hover { + background-color: #e8e8e8; + border-radius: 2px; +} +.react-datepicker__navigation--next::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23006dcc' d='M11 3L8.1 8l2.9 5H8.4L5 8.1v-.2L8.4 3H11z'/%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + content: ''; + display: block; + height: 24px; + transform: scaleX(-1); + width: 24px; +} +.react-datepicker__navigation-icon--previous::before { + content: none; +} +.react-datepicker__navigation-icon--next::before { + content: none; +} +.react-datepicker__navigation--previous { + border: 0; + left: 7px; +} +.react-datepicker__navigation--previous:hover { + background-color: #e8e8e8; + border-radius: 2px; +} +.react-datepicker__navigation--previous::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23006dcc' d='M11 3L8.1 8l2.9 5H8.4L5 8.1v-.2L8.4 3H11z'/%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + content: ''; + display: block; + height: 24px; + width: 24px; +} +.react-datepicker__tether-element-attached-top.react-datepicker__tether-element { + margin-top: -5px; +} +.react-datepicker__tether-element-attached-top .react-datepicker__triangle, +.react-datepicker__tether-element-attached-top .react-datepicker__triangle::before, +.react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, +.react-datepicker__tether-element-attached-bottom .react-datepicker__triangle::before { + border: 0; +} +.react-datepicker__tether-element-attached-bottom.react-datepicker__tether-element { + margin-top: -15px; +} +.react-datepicker__input-container { + display: block; +} +.react-datepicker__input-container input { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 50 50'%3E%3Cpath d='M40.5 4h-3.7v3.3c0 1.3-1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3V4H17.8v3.3c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3V4H9.5C7 4 5 6 5 8.5v35.9c0 2.5 2 4.4 4.5 4.4h31c2.5 0 4.5-2 4.5-4.4V8.5C45 6 43 4 40.5 4zm1.6 40.3c0 .9-.7 1.6-1.6 1.6h-31c-.9 0-1.6-.7-1.6-1.6V15.1H42v29.2z' fill='%235a5a5a'/%3E%3Cpath d='M15.5 8.2c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c.1.5.4.9.9.9zm19 0c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c0 .5.4.9.9.9zM37 20h3v3h-3zm-4.5 0h3v3h-3zM28 20h3v3h-3zm-4.5 0h3v3h-3zM19 20h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM28 26h3v3h-3zm-4.5 0h3v3h-3zM19 26h3v3h-3zm-4.5 0h3v3h-3zM10 26h3v3h-3zm27 6h3v3h-3zm-4.5 0h3v3h-3zM28 32h3v3h-3zm-4.5 0h3v3h-3zM19 32h3v3h-3zm-4.5 0h3v3h-3zM10 32h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM19 38h3v3h-3zm-4.5 0h3v3h-3zM10 38h3v3h-3z' fill='%235a5a5a'/%3E%3C/svg%3E"); + background-origin: content-box; + background-position: center right; + background-repeat: no-repeat; + cursor: pointer; + padding-right: 4px; +} +.react-datepicker__close-icon::after { + box-shadow: 0 0 0 3px #fff; + background-color: #5a5a5a; + right: 15px; +} + +.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle, +.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before { + border-bottom-color: #d3d3d3; +} +.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after { + border-bottom-color: #f9f9f9; +} diff --git a/src/components/Empty/index.jsx b/src/components/Empty/index.jsx index 303731a00..2fb0bbbb8 100644 --- a/src/components/Empty/index.jsx +++ b/src/components/Empty/index.jsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const Empty = ({ collection, text, icon }) => { if (_.isEmpty(collection)) { diff --git a/src/components/Empty/styles.css b/src/components/Empty/styles.css new file mode 100644 index 000000000..73bcfca72 --- /dev/null +++ b/src/components/Empty/styles.css @@ -0,0 +1,14 @@ +.empty-component { + cursor: default; + margin: 0 auto; + padding: 60px; + text-align: center; + user-select: none; +} +.empty-component-text { + color: #ababab; + font-size: 12px; + line-height: 1.5; + margin-top: 10px; + white-space: pre-wrap; +} diff --git a/src/components/FilePicker/index.jsx b/src/components/FilePicker/index.jsx index 0302a5922..78acdc8b1 100644 --- a/src/components/FilePicker/index.jsx +++ b/src/components/FilePicker/index.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Button from '../Button'; -import './styles.scss'; +import './styles.css'; const baseClass = 'filepicker-component'; diff --git a/src/components/FilePicker/styles.css b/src/components/FilePicker/styles.css new file mode 100644 index 000000000..65bdf7c6a --- /dev/null +++ b/src/components/FilePicker/styles.css @@ -0,0 +1,29 @@ +.filepicker-component-highlight { + border: 1px solid #d5382e; + border-radius: 2px; + padding: 1px; +} +.filepicker-component .aui--button.remove-file { + background-color: #e8e8e8; + border: 0; + margin-right: 0; +} +.filepicker-component .file-input { + display: none; +} +.filepicker-component .aui--button:focus { + background-color: inherit; +} +.filepicker-component .input-group-btn { + display: inline-flex; + width: auto; +} +.filepicker-component .input-group-btn > .aui--button { + min-height: 100%; + padding-top: 0; + padding-bottom: 0; +} + +.has-error .filepicker-component .form-control { + border: 0; +} diff --git a/src/components/FlexibleSpacer/index.jsx b/src/components/FlexibleSpacer/index.jsx index 47c71c74e..346e80ccc 100644 --- a/src/components/FlexibleSpacer/index.jsx +++ b/src/components/FlexibleSpacer/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import './styles.scss'; +import './styles.css'; const FlexibleSpacer = () =>
; diff --git a/src/components/FlexibleSpacer/styles.css b/src/components/FlexibleSpacer/styles.css new file mode 100644 index 000000000..19166547d --- /dev/null +++ b/src/components/FlexibleSpacer/styles.css @@ -0,0 +1,16 @@ +.flexible-spacer-component { + border: 1px solid #e8e8e8; + flex-grow: 1; +} + +.flexible-wrapper-inline { + display: flex; + flex-direction: row; + height: inherit; +} +.flexible-wrapper-inline .flexible-spacer-component { + border: 0; +} +.flexible-wrapper-inline > .aui--svg-symbol-component { + margin: auto; +} diff --git a/src/components/Grid/Cell/index.jsx b/src/components/Grid/Cell/index.jsx index 7f5ea6476..9523c46ba 100644 --- a/src/components/Grid/Cell/index.jsx +++ b/src/components/Grid/Cell/index.jsx @@ -2,7 +2,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { expandDts, classSuffixHelper } from '../../../lib/utils'; -import './styles.scss'; +import './styles.css'; const GridCell = ({ children, classSuffixes, onClick, stretch, dts, addonClassNames }) => { const componentClass = 'grid-component-cell'; diff --git a/src/components/Grid/Cell/styles.css b/src/components/Grid/Cell/styles.css new file mode 100644 index 000000000..9084e0fb5 --- /dev/null +++ b/src/components/Grid/Cell/styles.css @@ -0,0 +1,22 @@ +.grid-component-cell { + flex-grow: 1; + flex-shrink: 0; + padding: 8px 0 8px 10px; +} +.grid-component-cell:last-child { + padding-right: 10px; +} +.grid-component-cell-stretch { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-basis: 100%; + flex-shrink: 1; +} +.grid-component-cell-clickable { + cursor: pointer; +} + +.grid-component-row-vertical-cell-border .grid-component-cell { + padding-right: 10px; +} diff --git a/src/components/Grid/Row/index.jsx b/src/components/Grid/Row/index.jsx index 48493722f..b5e85309c 100644 --- a/src/components/Grid/Row/index.jsx +++ b/src/components/Grid/Row/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { classSuffixHelper, expandDts } from '../../../lib/utils'; -import './styles.scss'; +import './styles.css'; const GridRow = ({ horizontalBorder, short, type, verticalCellBorder, children, dts }) => { const componentClass = 'grid-component-row'; diff --git a/src/components/Grid/Row/styles.css b/src/components/Grid/Row/styles.css new file mode 100644 index 000000000..e5b768970 --- /dev/null +++ b/src/components/Grid/Row/styles.css @@ -0,0 +1,25 @@ +.grid-component-row { + border-bottom: 1px solid transparent; + display: flex; +} +.grid-component-row-header { + color: #838383; +} +.grid-component-row-subfooter { + background-color: #f9f9f9; + color: #838383; +} +.grid-component-row-subfooter .grid-component-cell:last-child { + color: #333; +} +.grid-component-row-footer { + font-weight: 700; +} +.grid-component-row-short .grid-component-cell { + padding-bottom: 3px; + padding-top: 3px; +} +.grid-component-row-horizontal-border, +.grid-component-row:last-child { + border-bottom-color: #e8e8e8; +} diff --git a/src/components/Grid/index.jsx b/src/components/Grid/index.jsx index 3fd5a4118..df37d31c4 100644 --- a/src/components/Grid/index.jsx +++ b/src/components/Grid/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const Grid = ({ children, dts }) => (
diff --git a/src/components/Grid/styles.css b/src/components/Grid/styles.css new file mode 100644 index 000000000..dc82dc282 --- /dev/null +++ b/src/components/Grid/styles.css @@ -0,0 +1,21 @@ +.grid-component { + border-left: 1px solid #e8e8e8; + border-right: 1px solid #e8e8e8; + border-top: 1px solid #e8e8e8; + box-sizing: border-box; + display: inline-block; + flex-shrink: 0; + font-size: 12px; + line-height: 1.5; + vertical-align: top; + width: 100%; +} +.grid-component-row-vertical-cell-border .grid-component-cell { + border-right: 1px solid #e8e8e8; +} +.grid-component-row-vertical-cell-border .grid-component-cell:last-child { + border-right: 0; +} +.grid-component + .grid-component { + border-top: 0; +} diff --git a/src/components/HelpIconPopover/index.jsx b/src/components/HelpIconPopover/index.jsx index f34bf69bd..d5d71f48a 100644 --- a/src/components/HelpIconPopover/index.jsx +++ b/src/components/HelpIconPopover/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { expandDts } from '../../lib/utils'; import Popover from '../Popover'; -import './styles.scss'; +import './styles.css'; const HelpIconPopover = ({ children, id, placement }) => (
diff --git a/src/components/HelpIconPopover/styles.css b/src/components/HelpIconPopover/styles.css new file mode 100644 index 000000000..68cd68226 --- /dev/null +++ b/src/components/HelpIconPopover/styles.css @@ -0,0 +1,11 @@ +.help-icon-popover-component { + display: inline-block; + padding-left: 3px; +} +.help-icon-popover-component-trigger { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ababab' d='M5 .6c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4C2.6 9.4.6 7.4.6 5 .6 2.6 2.6.6 5 .6M5 0C2.2 0 0 2.2 0 5c0 2.7 2.3 5 5 5s5-2.3 5-5-2.3-5-5-5z'/%3E%3Cpath fill='%23ababab' d='M4.5 6.2c0-1 .7-1.3 1.1-2 .3-.3.2-.7 0-1-.4-.2-.7-.2-1.1 0-.1.1-.1.3-.1.4h-.9c0-2.7 5.2-1.1 2.7 1.3l-.5.5c-.1.2-.3.5-.3.8h-.9zm0 1.2c0-.8 1.2-.7 1.1 0 0 .6-1.1.7-1.1 0z'/%3E%3C/svg%3E"); + width: 10px; + height: 10px; + background-size: 10px; + margin-bottom: -1px; +} diff --git a/src/components/HoverDropdownMenu/PopoverLinkItem/index.jsx b/src/components/HoverDropdownMenu/PopoverLinkItem/index.jsx index 7e8fcf58e..8f08a68a9 100644 --- a/src/components/HoverDropdownMenu/PopoverLinkItem/index.jsx +++ b/src/components/HoverDropdownMenu/PopoverLinkItem/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Anchor from '../../Anchor'; import Button from '../../Button'; -import './styles.scss'; +import './styles.css'; class PopoverLinkItem extends React.PureComponent { render() { diff --git a/src/components/HoverDropdownMenu/PopoverLinkItem/styles.css b/src/components/HoverDropdownMenu/PopoverLinkItem/styles.css new file mode 100644 index 000000000..48ab0765e --- /dev/null +++ b/src/components/HoverDropdownMenu/PopoverLinkItem/styles.css @@ -0,0 +1,6 @@ +.popover-link-item { + padding: 4px 2px 4px 6px; +} +.popover-link-item:hover { + background-color: #f9f9f9; +} diff --git a/src/components/HoverDropdownMenu/index.jsx b/src/components/HoverDropdownMenu/index.jsx index 623c274d3..7bff4f1a3 100644 --- a/src/components/HoverDropdownMenu/index.jsx +++ b/src/components/HoverDropdownMenu/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Popover from '../Popover'; import PopoverLinkItem from './PopoverLinkItem'; -import './styles.scss'; +import './styles.css'; const HoverDropdownMenu = ({ arrowPosition, headerText, hoverComponent, children }) => { const [popperNode, setPopperNode] = React.useState(null); diff --git a/src/components/HoverDropdownMenu/styles.css b/src/components/HoverDropdownMenu/styles.css new file mode 100644 index 000000000..8f15c4640 --- /dev/null +++ b/src/components/HoverDropdownMenu/styles.css @@ -0,0 +1,18 @@ +.hover-dropdown { + display: inline-block; +} +.hover-dropdown-popover .popover-title { + font-weight: 700; + padding: 8px 2px 8px 6px; + background-color: #fff; +} +.hover-dropdown-popover .popover-content { + width: 160px; + padding: 4px 0; +} +.hover-dropdown-popover .popover-content ul { + margin: 0; +} +.hover-dropdown-popover .popover-content .aui--button { + padding: 0; +} diff --git a/src/components/ImageCropper/index.jsx b/src/components/ImageCropper/index.jsx index 6891eed4c..d667a7244 100644 --- a/src/components/ImageCropper/index.jsx +++ b/src/components/ImageCropper/index.jsx @@ -4,7 +4,7 @@ import Cropper from 'cropperjs'; import 'cropperjs/dist/cropper.css'; import Button from '../Button'; import ActionPanel from '../ActionPanel'; -import './styles.scss'; +import './styles.css'; // https://github.com/fengyuanchen/cropperjs/blob/v2/README.md const defaultOptions = { diff --git a/src/components/ImageCropper/styles.css b/src/components/ImageCropper/styles.css new file mode 100644 index 000000000..d178e1b76 --- /dev/null +++ b/src/components/ImageCropper/styles.css @@ -0,0 +1,4 @@ +.image-cropper img { + width: 100%; + display: block; +} diff --git a/src/components/InformationBox/index.jsx b/src/components/InformationBox/index.jsx index 32d7997eb..7d1ff56b9 100644 --- a/src/components/InformationBox/index.jsx +++ b/src/components/InformationBox/index.jsx @@ -1,7 +1,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const styles = ['primary', 'success', 'warning', 'error', 'light']; diff --git a/src/components/InformationBox/styles.css b/src/components/InformationBox/styles.css new file mode 100644 index 000000000..e9f9a6e6e --- /dev/null +++ b/src/components/InformationBox/styles.css @@ -0,0 +1,39 @@ +.aui--information-box { + padding: 30px; + color: #838383; + display: inline-flex; + align-items: center; + width: 100%; +} +.aui--information-box.aui--information-box-primary { + background-color: #e0f0ff; +} +.aui--information-box.aui--information-box-success { + background-color: #eaf8ea; +} +.aui--information-box.aui--information-box-warning { + background-color: #fef6ea; +} +.aui--information-box.aui--information-box-error { + background-color: #fbedec; +} +.aui--information-box.aui--information-box-light { + background-color: #f3f3f3; +} +.aui--information-box-text { + padding-left: 20px; + flex-grow: 1; +} +.aui--information-box-title { + font-size: 15px; + font-weight: 700; + color: #5a5a5a; +} +.aui--information-box-icon { + background-color: transparent; + width: 70px; + height: 70px; + border-radius: 50%; + text-align: center; + overflow: hidden; +} diff --git a/src/components/ListPicker/index.jsx b/src/components/ListPicker/index.jsx index 357d28d4d..d6a463b0b 100644 --- a/src/components/ListPicker/index.jsx +++ b/src/components/ListPicker/index.jsx @@ -9,7 +9,7 @@ import FlexibleSpacer from '../FlexibleSpacer'; import Grid from '../Grid'; import GridRow from '../Grid/Row'; import GridCell from '../Grid/Cell'; -import './styles.scss'; +import './styles.css'; import Anchor from '../Anchor'; const isSubset = (array, subArray) => _(subArray).difference(array).isEmpty(); diff --git a/src/components/ListPicker/styles.css b/src/components/ListPicker/styles.css new file mode 100644 index 000000000..243f93a61 --- /dev/null +++ b/src/components/ListPicker/styles.css @@ -0,0 +1,31 @@ +.listpicker-component-body-split { + display: flex; + height: 400px; +} +.listpicker-component-body-split .listpickerpure-component .grid-component .grid-component-row-header { + border-bottom: 1px solid #e8e8e8; +} +.listpicker-component-body-split .listpickerpure-component-items { + max-height: 363px; + overflow: auto; + overflow-x: hidden; +} +.listpicker-component-body-split .listpickerpure-component-items .grid-component { + border-top: 0; +} +.listpicker-component-footnote { + margin-top: 10px; +} +.listpicker-component .grid-component-row:last-child { + border-bottom: 0; +} +.listpicker-component .grid-component-cell-label { + color: #ababab; + width: 120px; +} +.listpicker-component .flexible-spacer-component { + border-top: 0; +} +.listpicker-component .empty-component { + border-bottom: 0; +} diff --git a/src/components/ListPickerPure/index.jsx b/src/components/ListPickerPure/index.jsx index c37e7dbae..8f2a741ff 100644 --- a/src/components/ListPickerPure/index.jsx +++ b/src/components/ListPickerPure/index.jsx @@ -7,7 +7,7 @@ import Empty from '../Empty'; import Grid from '../Grid'; import GridRow from '../Grid/Row'; import GridCell from '../Grid/Cell'; -import './styles.scss'; +import './styles.css'; class ListPickerPure extends React.PureComponent { constructor(props) { diff --git a/src/components/ListPickerPure/styles.css b/src/components/ListPickerPure/styles.css new file mode 100644 index 000000000..b53bce421 --- /dev/null +++ b/src/components/ListPickerPure/styles.css @@ -0,0 +1,26 @@ +.listpickerpure-component { + display: flex; + flex-direction: column; +} +.listpickerpure-component .grid-component-cell-toggle, +.listpickerpure-component .grid-component-cell-addon, +.listpickerpure-component .grid-component-cell-header-toggle, +.listpickerpure-component .grid-component-cell-header-addon { + flex-basis: 10%; + justify-content: center; +} +.listpickerpure-component .grid-component-cell-toggle, +.listpickerpure-component .grid-component-cell-addon { + align-items: center; + display: flex; +} +.listpickerpure-component .grid-component-cell-header-toggle, +.listpickerpure-component .grid-component-cell-header-addon { + text-align: center; +} +.listpickerpure-component .empty-component { + border-bottom: 1px solid #e8e8e8; +} +.listpickerpure-component .grid-component-row:last-child { + border-bottom: 0; +} diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx index 3ae2b7bef..5801e11d9 100644 --- a/src/components/Navigation/index.jsx +++ b/src/components/Navigation/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const Nav = ({ stacked, className, onSelect, activeKey, barPosition, children, dts }) => { let navItems = []; diff --git a/src/components/Navigation/styles.css b/src/components/Navigation/styles.css new file mode 100644 index 000000000..ab00f0f74 --- /dev/null +++ b/src/components/Navigation/styles.css @@ -0,0 +1,66 @@ +.nav-borderless { + display: flex; + flex-direction: row; + font-size: 12px; + padding: 0; + height: 50px; +} +.nav-borderless > li { + list-style-type: none; + display: flex; + flex-basis: 100px; + text-align: left; + cursor: pointer; + user-select: none; + box-sizing: border-box; + outline: none; + border-style: solid; + border-color: #fff; + border-width: 0; + justify-content: center; + align-items: center; +} +.nav-borderless > li:hover, +.nav-borderless > li.active { + border-color: #1950a3; +} +.nav-borderless > li > a { + color: #5a5a5a; + text-decoration: none; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.nav-borderless > li.disabled { + cursor: not-allowed; + color: #ababab; +} +.nav-borderless > li.disabled a { + cursor: not-allowed; + color: #ababab; +} +.nav-borderless.stacked { + flex-direction: column; +} +.nav-borderless.top-bar > li { + margin-top: 3px; +} +.nav-borderless.top-bar > li:hover, +.nav-borderless.top-bar > li.active { + margin: 0; + border-top-width: 3px; +} +.nav-borderless.bottom-bar > li { + margin-bottom: 3px; +} +.nav-borderless.bottom-bar > li:hover, +.nav-borderless.bottom-bar > li.active { + margin: 0; + border-bottom-width: 3px; +} +.nav-borderless.bottom-bar > li.disabled:hover, +.nav-borderless.bottom-bar > li.disabled.active { + border-bottom-color: transparent; +} diff --git a/src/components/OverlayLoader/index.jsx b/src/components/OverlayLoader/index.jsx index 6e21c4e6e..14452e27d 100644 --- a/src/components/OverlayLoader/index.jsx +++ b/src/components/OverlayLoader/index.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Spinner from '../Spinner'; -import './styles.scss'; +import './styles.css'; const OverlayLoader = ({ text, top, heading, disableBackground }) => (
(
diff --git a/src/components/Pagination/styles.css b/src/components/Pagination/styles.css new file mode 100644 index 000000000..00835d4c3 --- /dev/null +++ b/src/components/Pagination/styles.css @@ -0,0 +1,39 @@ +.aui--pagination { + padding: 20px 0; + display: flex; + justify-content: center; + align-items: center; +} +.aui--pagination-separator { + width: 12.5px; + height: 24px; + margin: 0 5px; +} +.aui--pagination-sides .previous-icon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/point-left.svg'); +} +.aui--pagination-sides .next-icon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/point-right.svg'); +} +.aui--pagination-item { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; +} +.aui--pagination-item.btn-borderless:not([disabled]):hover, +.aui--pagination-item.btn-borderless:not([disabled]):active { + box-shadow: none; +} +.aui--pagination-item.btn-inverse:not([disabled]):focus { + background-color: #fff; +} diff --git a/src/components/Panel/index.jsx b/src/components/Panel/index.jsx index f4cdcf028..e45a6d01d 100644 --- a/src/components/Panel/index.jsx +++ b/src/components/Panel/index.jsx @@ -1,7 +1,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import './styles.scss'; +import './styles.css'; class Panel extends React.PureComponent { onHeaderClick = () => this.props.onClick(this.props.id); diff --git a/src/components/Panel/styles.css b/src/components/Panel/styles.css new file mode 100644 index 000000000..d1a744811 --- /dev/null +++ b/src/components/Panel/styles.css @@ -0,0 +1,61 @@ +.panel-component { + background-color: #fff; + transition: background-color 250ms ease-out; +} +.panel-component ~ .panel-component { + border-top: 1px solid #e8e8e8; +} +.panel-component-header { + cursor: pointer; + font-weight: 700; + border-bottom: 1px solid #e8e8e8; + line-height: 22px; +} +.panel-component-header::before { + background: url('../../styles/icons/chevron-down.svg'); + transform: rotate(180deg); + content: ' '; + float: right; + height: 16px; + transition: transform 250ms ease-out; + width: 16px; + fill: #333; + margin-top: 3px; +} +.panel-component-header .aui--svg-symbol-component { + float: left; + height: 22px; + margin-right: 10px; + position: relative; + width: 22px; + fill: #333; +} +.panel-component-header, +.panel-component-content { + padding: 20px; +} +.panel-component.collapsed { + background-color: #f9f9f9; +} +.panel-component.collapsed .panel-component-header { + border-bottom: 0; +} +.panel-component.collapsed .panel-component-header::before { + transform: rotate(0); +} +.panel-component.collapsed .panel-component-content { + display: none; +} +.panel-component hr { + margin-left: -20px; + margin-right: -20px; +} + +.card-component-content .panel-component:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.card-component-content .panel-component:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} diff --git a/src/components/Paragraph/index.jsx b/src/components/Paragraph/index.jsx index 83749f01e..85de3beb0 100644 --- a/src/components/Paragraph/index.jsx +++ b/src/components/Paragraph/index.jsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; import Button from '../Button'; -import './styles.scss'; +import './styles.css'; const Paragraph = ({ briefWordCount, content, className, dts, isHtml }) => { const [readMore, setReadMore] = React.useState(false); diff --git a/src/components/Paragraph/styles.css b/src/components/Paragraph/styles.css new file mode 100644 index 000000000..ad284fc3f --- /dev/null +++ b/src/components/Paragraph/styles.css @@ -0,0 +1,29 @@ +.aui--paragraph { + margin: 0; + font-size: 14px; + white-space: pre-line; +} +.aui--paragraph .expandable-content { + overflow: hidden; +} +.aui--paragraph .expandable-content.expanded { + max-height: 800px; + opacity: 1; + transition: 1s ease; +} +.aui--paragraph .expandable-content.collapsed { + max-height: 0; + opacity: 0; + transition: 0.4s ease; +} +.aui--paragraph-read-more { + padding: 4px 0; +} +.aui--paragraph-read-more.aui--button.aui-link:focus { + color: #337ab7; + text-decoration: none; +} +.aui--paragraph-read-more.aui--button.aui-link:hover, +.aui--paragraph-read-more.aui--button.aui-link :hover:focus { + text-decoration: underline; +} diff --git a/src/components/Pill/index.jsx b/src/components/Pill/index.jsx index cbfef02c7..c8f81ddbd 100644 --- a/src/components/Pill/index.jsx +++ b/src/components/Pill/index.jsx @@ -2,7 +2,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const sizes = ['large', 'medium', 'small']; diff --git a/src/components/Pill/styles.css b/src/components/Pill/styles.css new file mode 100644 index 000000000..0c460f0da --- /dev/null +++ b/src/components/Pill/styles.css @@ -0,0 +1,40 @@ +.aui--pill { + display: inline-flex; + align-items: center; + border: 1px solid #e8e8e8; + user-select: none; + font-weight: 700; + line-height: 1; + color: #5a5a5a; + background-color: #fff; +} +.aui--pill-children { + display: flex; + align-items: center; + justify-content: center; +} +.aui--pill-clickable:hover, +.aui--pill-clickable:focus { + background-color: #f3f3f3; + cursor: pointer; +} +.aui--pill-small { + padding: 2px 5px; + font-size: 11px; + border-radius: 4px; + line-height: 1; +} +.aui--pill-small .aui--svg-symbol-component { + width: 12px; + height: 12px; +} +.aui--pill-medium { + padding: 5px 12px; + font-size: 12px; + border-radius: 12px; +} +.aui--pill-large { + padding: 6px 20px; + font-size: 15px; + border-radius: 999px; +} diff --git a/src/components/Popover/WithRef.jsx b/src/components/Popover/WithRef.jsx index cc55ba03f..8c7ea75c8 100644 --- a/src/components/Popover/WithRef.jsx +++ b/src/components/Popover/WithRef.jsx @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import Popper from './Popper'; import { themes, popoverPlacements, popoverStrategies } from './constants'; -import './styles.scss'; +import './styles.css'; const WithRefM = ({ theme, diff --git a/src/components/Popover/index.jsx b/src/components/Popover/index.jsx index 6cf61cbfb..8057921e9 100644 --- a/src/components/Popover/index.jsx +++ b/src/components/Popover/index.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import React, { useState } from 'react'; import { themes, popoverPlacements, popoverStrategies } from './constants'; import WithRef from './WithRef'; -import './styles.scss'; +import './styles.css'; const triggerPropTypes = PropTypes.oneOf(['click', 'hover', 'focus', 'disabled']); diff --git a/src/components/Popover/popover-theme.css b/src/components/Popover/popover-theme.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Popover/styles.css b/src/components/Popover/styles.css new file mode 100644 index 000000000..88d6b859f --- /dev/null +++ b/src/components/Popover/styles.css @@ -0,0 +1,336 @@ +.aui--popover-element { + cursor: pointer; + display: inline-flex; +} + +.aui--popover-wrapper { + z-index: 1060; + max-width: 276px; + font-size: 12px; + border: 1px solid #e8e8e8; + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + padding: 0; + background-color: #fff; +} +.aui--popover-wrapper[data-placement*='bottom'] { + margin-top: 6px; +} +.aui--popover-wrapper[data-placement*='top'] { + margin-bottom: 6px; +} +.aui--popover-wrapper[data-placement*='left'] { + margin-right: 6px; +} +.aui--popover-wrapper[data-placement*='right'] { + margin-left: 6px; +} +.aui--popover-wrapper .aui--popover-arrow { + position: absolute; + border: 0 solid #e8e8e8; +} +.aui--popover-wrapper .aui--popover-arrow::after { + content: ''; + display: block; + position: relative; + border: 0 solid #fff; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement='right-start'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='right-end'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='left-start'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='left-end'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='top-start'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='top-end'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='bottom-start'], +.aui--popover-wrapper .aui--popover-arrow[data-placement='bottom-end'] { + transform: none !important; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='top'], +.aui--popover-wrapper .aui--popover-arrow[data-placement*='bottom'] { + width: 12px; + height: 6px; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='top']::after, +.aui--popover-wrapper .aui--popover-arrow[data-placement*='bottom']::after { + width: 12px; + height: 6px; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='top'] { + margin-bottom: -6px; + bottom: -1px; + border-top-width: 6px; + border-right-width: 6px; + border-left-width: 6px; + border-bottom-color: transparent; + border-right-color: transparent; + border-left-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='top']::after { + top: -7px; + right: 6px; + border-top-width: 6px; + border-right-width: 6px; + border-left-width: 6px; + border-bottom-color: transparent; + border-right-color: transparent; + border-left-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='left'], +.aui--popover-wrapper .aui--popover-arrow[data-placement*='right'] { + width: 6px; + height: 12px; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='left']::after, +.aui--popover-wrapper .aui--popover-arrow[data-placement*='right']::after { + width: 6px; + height: 12px; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='left'] { + right: -1px; + margin-right: -6px; + border-left-width: 6px; + border-top-width: 6px; + border-bottom-width: 6px; + border-right-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='left']::after { + top: -6px; + left: -7px; + border-left-width: 6px; + border-top-width: 6px; + border-bottom-width: 6px; + border-right-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='bottom'] { + top: -7px; + margin-bottom: -6px; + border-bottom-width: 6px; + border-right-width: 6px; + border-left-width: 6px; + border-top-color: transparent; + border-right-color: transparent; + border-left-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='bottom']::after { + top: 1px; + right: 6px; + border-bottom-width: 6px; + border-right-width: 6px; + border-left-width: 6px; + border-top-color: transparent; + border-right-color: transparent; + border-left-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='right'] { + margin-left: -7px; + left: 0; + border-right-width: 6px; + border-top-width: 6px; + border-bottom-width: 6px; + border-left-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; +} +.aui--popover-wrapper .aui--popover-arrow[data-placement*='right']::after { + top: -6px; + left: 1px; + border-right-width: 6px; + border-top-width: 6px; + border-bottom-width: 6px; + border-left-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; +} +.aui--popover-wrapper.popover-light { + color: #333; +} +.aui--popover-wrapper.popover-light .popover-title { + background-color: #f3f3f3; + border-bottom-color: #e8e8e8; +} +.aui--popover-wrapper.popover-dark { + background-color: #5a5a5a; + border-color: #5a5a5a; + color: #fff; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='top'] { + border-top-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='top']::after { + border-top-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='right'] { + border-right-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='right']::after { + border-right-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='bottom'] { + border-bottom-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='bottom']::after { + border-bottom-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='left'] { + border-left-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .aui--popover-arrow[data-placement*='left']::after { + border-left-color: #5a5a5a; +} +.aui--popover-wrapper.popover-dark .popover-title { + background-color: #747474; + border-bottom-color: #fff; +} +.aui--popover-wrapper.popover-warn { + background-color: #faa732; + border-color: #faa732; + color: #fff; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='top'] { + border-top-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='top']::after { + border-top-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='right'] { + border-right-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='right']::after { + border-right-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='bottom'] { + border-bottom-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='bottom']::after { + border-bottom-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='left'] { + border-left-color: #faa732; +} +.aui--popover-wrapper.popover-warn .aui--popover-arrow[data-placement*='left']::after { + border-left-color: #faa732; +} +.aui--popover-wrapper.popover-warn .popover-title { + background-color: #fbbc64; + border-bottom-color: #fff; +} +.aui--popover-wrapper.popover-error { + background-color: #da4f49; + border-color: #da4f49; + color: #fff; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='top'] { + border-top-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='top']::after { + border-top-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='right'] { + border-right-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='right']::after { + border-right-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='bottom'] { + border-bottom-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='bottom']::after { + border-bottom-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='left'] { + border-left-color: #da4f49; +} +.aui--popover-wrapper.popover-error .aui--popover-arrow[data-placement*='left']::after { + border-left-color: #da4f49; +} +.aui--popover-wrapper.popover-error .popover-title { + background-color: #e37873; + border-bottom-color: #fff; +} +.aui--popover-wrapper.popover-info { + background-color: #49afcd; + border-color: #49afcd; + color: #fff; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='top'] { + border-top-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='top']::after { + border-top-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='right'] { + border-right-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='right']::after { + border-right-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='bottom'] { + border-bottom-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='bottom']::after { + border-bottom-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='left'] { + border-left-color: #49afcd; +} +.aui--popover-wrapper.popover-info .aui--popover-arrow[data-placement*='left']::after { + border-left-color: #49afcd; +} +.aui--popover-wrapper.popover-info .popover-title { + background-color: #71c1d8; + border-bottom-color: #fff; +} +.aui--popover-wrapper.popover-success { + background-color: #5bb75b; + border-color: #5bb75b; + color: #fff; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='top'] { + border-top-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='top']::after { + border-top-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='right'] { + border-right-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='right']::after { + border-right-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='bottom'] { + border-bottom-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='bottom']::after { + border-bottom-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='left'] { + border-left-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .aui--popover-arrow[data-placement*='left']::after { + border-left-color: #5bb75b; +} +.aui--popover-wrapper.popover-success .popover-title { + background-color: #7ec77e; + border-bottom-color: #fff; +} +.aui--popover-wrapper .popover-title { + padding: 8px 14px; + margin: 0; + font-size: 12px; + border-bottom: 1px solid; + border-radius: 3px 3px 0 0; +} +.aui--popover-wrapper .popover-content { + padding: 5px 10px; + line-height: 1.5; +} +.aui--popover-wrapper .popover-content p { + margin-bottom: 5px; +} +.aui--popover-wrapper .popover-content p:last-child { + margin-bottom: 0; +} diff --git a/src/components/PrettyDiff/index.jsx b/src/components/PrettyDiff/index.jsx index f8565b3e5..17964a024 100644 --- a/src/components/PrettyDiff/index.jsx +++ b/src/components/PrettyDiff/index.jsx @@ -2,7 +2,7 @@ import _ from 'lodash'; import DiffMatchPatch from 'diff-match-patch'; import PropTypes from 'prop-types'; import React from 'react'; -import './styles.scss'; +import './styles.css'; const PrettyDiff = ({ newText, oldText }) => { const dmp = new DiffMatchPatch(); diff --git a/src/components/PrettyDiff/styles.css b/src/components/PrettyDiff/styles.css new file mode 100644 index 000000000..ebe3f3e4d --- /dev/null +++ b/src/components/PrettyDiff/styles.css @@ -0,0 +1,13 @@ +.pretty-diff-component { + border: 1px solid #e8e8e8; + font-size: 12px; + padding: 10px; + white-space: pre-wrap; +} +.pretty-diff-component-delete { + color: #da4f49; + text-decoration: line-through; +} +.pretty-diff-component-insert { + color: #5bb75b; +} diff --git a/src/components/Radio/index.jsx b/src/components/Radio/index.jsx index fa7d6cc59..7274cc5d8 100644 --- a/src/components/Radio/index.jsx +++ b/src/components/Radio/index.jsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const RadioButton = ({ id, value, name, className, label, disabled, checked, onChange, inline, dts }) => { const componentClassName = classnames(['radio-component', { 'radio-component-inline': inline }]); diff --git a/src/components/Radio/styles.css b/src/components/Radio/styles.css new file mode 100644 index 000000000..4597866e4 --- /dev/null +++ b/src/components/Radio/styles.css @@ -0,0 +1,33 @@ +.radio-component.disabled label { + cursor: not-allowed; +} +.radio-component.radio-component-inline { + display: inline-block; +} +.radio-component + .radio-component { + margin-top: 5px; +} +.radio-component.radio-component-inline + .radio-component.radio-component-inline { + margin-top: 0; + margin-left: 10px; +} +.radio-component label { + line-height: 16px; + font-weight: 400; + cursor: pointer; + margin-bottom: 0; + display: flex; +} +.radio-component .radio-component-label { + margin-left: 5px; +} +.radio-component .radio-component-input-container { + width: 16px; + height: 16px; +} +.radio-component .radio-component-input-container span { + vertical-align: baseline; +} +.radio-component .radio-component-input-container input { + display: none; +} diff --git a/src/components/RichTextEditor/index.jsx b/src/components/RichTextEditor/index.jsx index 240b3560a..03f9e3ae1 100644 --- a/src/components/RichTextEditor/index.jsx +++ b/src/components/RichTextEditor/index.jsx @@ -14,7 +14,7 @@ import FileUploadAction from './FileUploadAction'; import MentionEntry from './MentionEntry'; import FilePreviewList from './FilePreviewList'; import Popover from '../Popover'; -import './styles.scss'; +import './styles.css'; const { EditorState, Modifier, convertToRaw, RichUtils } = draftJs; diff --git a/src/components/RichTextEditor/styles.css b/src/components/RichTextEditor/styles.css new file mode 100644 index 000000000..db575fa23 --- /dev/null +++ b/src/components/RichTextEditor/styles.css @@ -0,0 +1,177 @@ +.aui--editor-root { + border: 1px solid #e8e8e8; + min-height: 245px; + border-radius: 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; +} +.aui--editor-root .aui--editor-container { + padding: 20px; + flex-grow: 1; +} +.aui--editor-root .aui--editor-container .public-DraftEditorPlaceholder-hasFocus { + display: none; +} +.aui--editor-root .aui--editor-container .public-DraftEditorPlaceholder-inner { + color: #ababab; +} +.aui--editor-root .aui--editor-container .mention { + color: #006dcc; + text-decoration: none; +} +.aui--editor-root .aui--editor-container .DraftEditor-root + div { + height: 150px; + padding: 5px 0; + overflow-y: auto; + z-index: 10; +} +.aui--editor-root .file-download-input { + display: none; +} +.aui--editor-root .aui--editor-toolbar { + padding: 10px 20px; + background-color: #f9f9f9; + display: flex; + align-items: center; + justify-content: space-between; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button { + box-shadow: none; + background-color: transparent; + border: 1px solid transparent; + padding: 6px; + font-size: 12px; + align-items: center; + line-height: 0; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button:last-of-type { + margin-right: 0; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button .file-download-button { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.2 40.2'%3E%3Cpath d='M35.6,5.6c-1.1-1.1-2.6-1.8-4.2-1.8c-1.6,0-3,0.6-4.2,1.8l-15.7,16c-1.6,1.6-1.6,4.3,0,6c1.6,1.6,4.3,1.6,5.9,0L29,15.9c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.8-0.3-1,0L16.4,26.6c-1,1-2.8,1-3.8,0c-1.1-1.1-1.1-2.8,0-3.9l15.7-16C30,5,32.9,5,34.6,6.7c1.7,1.8,1.7,4.6,0,6.4L14.9,33c-1.2,1.2-2.7,1.8-4.3,1.8S7.4,34.2,6.3,33c-2.4-2.4-2.4-6.4,0-8.8L21.7,8.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.8-0.3-1,0L5.3,23.2c-2.9,3-2.9,7.9,0,10.9c1.4,1.5,3.3,2.3,5.4,2.3c2,0,3.9-0.8,5.4-2.3l19.6-20C37.9,11.7,37.9,7.9,35.6,5.6z'%3E%3C/path%3E%3C/svg%3E"); + width: 18px; + height: 18px; + background-size: 18px; + background-repeat: no-repeat; + background-position: center; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button:focus { + outline: none; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button:hover, +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button.active { + background-color: #e8e8e8; + border-color: #e8e8e8; +} +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button img, +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button div, +.aui--editor-root .aui--editor-toolbar .aui--toolbar-button svg { + height: 20px; + width: 20px; +} + +.aui--mention .popover-content { + padding: 0; + overflow-y: auto; + max-height: 250px; +} + +.aui--mention-entry { + background-color: #fff; + width: auto; + min-width: 250px; +} +.aui--mention-entry__is-focused { + background: #e0f0ff; + cursor: pointer; +} +.aui--mention-entry .mention-entry--container { + display: flex; + align-items: center; +} +.aui--mention-entry .mention-entry--container__left { + margin: 5px 10px 5px 20px; +} +.aui--mention-entry .mention-entry--container__right { + margin: 0 10px; +} +.aui--mention-entry .mention-entry--container .mention-entry--title, +.aui--mention-entry .mention-entry--container .mention-entry--name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.aui--mention-entry .mention-entry--container .mention-entry--title { + font-size: 10px; + color: #ababab; +} +.aui--mention-entry .mention-entry--container .mention-entry--avatar { + display: block; + width: 30px; + height: 30px; + border-radius: 50%; +} + +.aui--file-preview-list { + margin-top: 10px; + display: flex; + align-items: flex-end; + flex-wrap: wrap; +} +.aui--file-preview-list .aui--file-sticker { + position: relative; +} +.aui--file-preview-list .aui--file-sticker-image { + width: 60px; + margin: 0 0 10px 10px; +} +.aui--file-preview-list .aui--file-sticker-file { + margin: 0 0 10px 10px; + width: 200px; + height: 60px; + border: 1px solid #d3d3d3; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: space-between; +} +.aui--file-preview-list .aui--file-sticker-file-name { + width: 140px; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 10px; +} +.aui--file-preview-list .aui--file-sticker-file-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%234794ae'%3E%3Cpath d='M20 14.8c0-2.7 2.1-4.8 4.8-4.8H60l20 16.8v58.4c0 2.7-2.1 4.8-4.8 4.8H24.8c-2.7 0-4.8-2.1-4.8-4.8V14.8z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M60 10.1v12c0 2.7 2.1 4.8 4.8 4.8H80L60'%3E%3C/path%3E%3C/svg%3E"); + width: 50px; + height: 50px; + background-size: 50px; + background-repeat: no-repeat; + background-position: center; +} +.aui--file-preview-list .aui--file-sticker-close-button { + position: absolute; + top: -8px; + right: -8px; + border-radius: 50%; + background-color: #5a5a5a; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M4 11.3L7.3 8 4.1 4.7l.8-.7L8 7.2 11.1 4l.7.7-3.1 3.2 3.3 3.3-.7.8L8 8.7 4.7 12l-.7-.7z'/%3E%3C/svg%3E"); + width: 22px; + height: 22px; + background-repeat: no-repeat; + background-position: center; + border: #fff 2px solid; + z-index: 10; +} +.aui--file-preview-list .aui--file-sticker-spinner { + position: absolute; + top: -8px; + right: -8px; + border-radius: 50%; + width: 22px; + height: 22px; + border: #fff 2px solid; + background-color: #fff; +} diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx index e401ec05f..4b695b915 100644 --- a/src/components/Search/index.jsx +++ b/src/components/Search/index.jsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import Button from '../Button'; import Spinner from '../Spinner'; -import './styles.scss'; +import './styles.css'; const Search = React.forwardRef( ( diff --git a/src/components/Search/styles.css b/src/components/Search/styles.css new file mode 100644 index 000000000..d79e12041 --- /dev/null +++ b/src/components/Search/styles.css @@ -0,0 +1,94 @@ +.aui--search-component { + height: 26px; + width: 100%; + position: relative; + display: flex; +} +.aui--search-component .aui--search-component-input { + flex: 1; + padding: 0 10px; + border: 1px solid #e8e8e8; + border-radius: 2px; + width: inherit; +} +.aui--search-component .aui--search-component-input::placeholder { + color: #ababab; +} +.aui--search-component .aui--search-component-input:active, +.aui--search-component .aui--search-component-input:focus { + border-color: #ababab; + outline: 0; +} +.aui--search-component .aui--search-component-input:active ~ .aui--search-component-button, +.aui--search-component .aui--search-component-input:focus ~ .aui--search-component-button { + border-color: #ababab; +} +.aui--search-component .aui--search-component-icon { + height: 100%; + padding: 5px; + position: absolute; + right: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; +} +.aui--search-component .aui--search-component-icon.with-button { + right: 40px; +} +.aui--search-component .aui--search-component-icon .search-icon, +.aui--search-component .aui--search-component-icon .cancel-icon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; +} +.aui--search-component .aui--search-component-icon .search-icon { + background-image: url('../../styles/icons/search/search-gray.svg'); +} +.aui--search-component .aui--search-component-icon .cancel-icon { + background-image: url('../../styles/icons/search/cancel-gray.svg'); +} +.aui--search-component .aui--search-component-icon .cancel-icon:hover { + background-image: url('../../styles/icons/search/cancel.svg'); +} +.aui--search-component .aui--button.aui--search-component-button { + height: 100%; + min-height: 100%; + margin-left: -2px; + margin-right: 0; + border: 1px solid #e8e8e8; + display: flex; + justify-content: center; + align-items: center; + padding: 4px 7px; + border-radius: 0 2px 2px 0; +} +.aui--search-component .aui--button.aui--search-component-button:hover { + background-color: #f9f9f9; +} +.aui--search-component .aui--button.aui--search-component-button span { + width: 16px; + height: 16px; +} +.aui--search-component .aui--button.aui--search-component-button .search-icon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/search/search-primary.svg'); + flex-shrink: 0; +} +.aui--search-component .aui--search-component-spinner { + height: 100%; + padding: 5px; + position: absolute; + right: 20px; + top: 0; + display: flex; +} +.aui--search-component .aui--search-component-spinner .spinner-component { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/SearchableCheckList/index.jsx b/src/components/SearchableCheckList/index.jsx index 74ff542f1..bf9650a17 100644 --- a/src/components/SearchableCheckList/index.jsx +++ b/src/components/SearchableCheckList/index.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import Search from '../Search'; import Checkbox from '../Checkbox'; import CheckboxGroup from '../CheckboxGroup'; -import './styles.scss'; +import './styles.css'; const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount, placeholder, onChange }) => { const [searchText, setSearchText] = React.useState(''); diff --git a/src/components/SearchableCheckList/styles.css b/src/components/SearchableCheckList/styles.css new file mode 100644 index 000000000..a176fd4d4 --- /dev/null +++ b/src/components/SearchableCheckList/styles.css @@ -0,0 +1,21 @@ +.aui--searchable-checklist .aui--searchable-list-container { + display: inline-block; +} +.aui--searchable-checklist .aui--searchable-list-container .title { + font-weight: 700; + margin-bottom: 10px; +} +.aui--searchable-checklist .aui--searchable-list-container .search-box { + margin-bottom: 10px; +} +.aui--searchable-checklist .aui--searchable-list-container .main-checkbox { + margin-bottom: 6px; +} +.aui--searchable-checklist .aui--searchable-list-container .items-container { + max-height: 125px; + overflow-y: auto; + margin-bottom: 10px; +} +.aui--searchable-checklist .aui--searchable-list-container .footer { + color: #ababab; +} diff --git a/src/components/Select/index.jsx b/src/components/Select/index.jsx index 8131ef664..dd6e2fd23 100644 --- a/src/components/Select/index.jsx +++ b/src/components/Select/index.jsx @@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable'; import AsyncSelect from 'react-select/async'; import AsyncCreatableSelect from 'react-select/async-creatable'; import defaultStyle from './styles'; -import './styles.scss'; +import './styles.css'; const componentBaseClass = 'select-component'; diff --git a/src/components/Select/styles.css b/src/components/Select/styles.css new file mode 100644 index 000000000..8725c8729 --- /dev/null +++ b/src/components/Select/styles.css @@ -0,0 +1,11 @@ +.select-component .caret-icon { + width: 8px; + height: 8px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/caret.svg'); +} +.select-component .css-oeuhkd-control { + border-color: #e8e8e8; + border-radius: 2px; +} diff --git a/src/components/Skeleton/index.jsx b/src/components/Skeleton/index.jsx index cdf275541..11ba98dc5 100644 --- a/src/components/Skeleton/index.jsx +++ b/src/components/Skeleton/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const Skeleton = ({ animated, className, dts, height, variant, width }) => { const baseClass = 'aui--skeleton'; diff --git a/src/components/Skeleton/styles.css b/src/components/Skeleton/styles.css new file mode 100644 index 000000000..ae306dbd7 --- /dev/null +++ b/src/components/Skeleton/styles.css @@ -0,0 +1,33 @@ +@keyframes loading { + 0% { + background-position: -220px 0; + } + 100% { + background-position: calc(220px + 100%) 0; + } +} +.aui--skeleton { + display: block; + margin: 0 0 4px; + background-size: 220px 100%; + background-repeat: no-repeat; + border-radius: 4px; + line-height: 1.5; + min-height: 16px; + height: 100%; + width: 100%; + opacity: 1; + background-color: #eee; + background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee); +} +.aui--skeleton.aui--skeleton-animated { + animation: loading 1.5s ease-in-out infinite; +} +.aui--skeleton.aui--skeleton-circle { + border-radius: 50%; + height: 35px; + width: 35px; +} +.aui--skeleton.aui--skeleton-rect { + border-radius: 0; +} diff --git a/src/components/Slicey/Arc/index.jsx b/src/components/Slicey/Arc/index.jsx index b24b7dec7..ba974e81c 100644 --- a/src/components/Slicey/Arc/index.jsx +++ b/src/components/Slicey/Arc/index.jsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const Arc = ({ data }) => { if (!data) { diff --git a/src/components/Slicey/Arc/styles.css b/src/components/Slicey/Arc/styles.css new file mode 100644 index 000000000..76fd0c506 --- /dev/null +++ b/src/components/Slicey/Arc/styles.css @@ -0,0 +1,13 @@ +.arc-component.positive { + fill: #5bb75b; +} +.arc-component.negative { + fill: #da4f49; +} +.arc-component.info { + fill: #49afcd; +} +.arc-component.warning, +.arc-component.pending { + fill: #faa732; +} diff --git a/src/components/Slicey/Donut/index.jsx b/src/components/Slicey/Donut/index.jsx index 881f3f2f9..f269bb1a4 100644 --- a/src/components/Slicey/Donut/index.jsx +++ b/src/components/Slicey/Donut/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import './styles.scss'; +import './styles.css'; const Donut = () => ; diff --git a/src/components/Slicey/Donut/styles.css b/src/components/Slicey/Donut/styles.css new file mode 100644 index 000000000..02f033048 --- /dev/null +++ b/src/components/Slicey/Donut/styles.css @@ -0,0 +1,3 @@ +.donut-component { + fill: #fff; +} diff --git a/src/components/Slicey/Marker/index.jsx b/src/components/Slicey/Marker/index.jsx index e23a491aa..3857eddea 100644 --- a/src/components/Slicey/Marker/index.jsx +++ b/src/components/Slicey/Marker/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ROUND, QUARTER, getPointX, getPointY } from '../dataProcessor'; -import './styles.scss'; +import './styles.css'; const Marker = ({ fraction }) => { const getMarkerPoints = (markerValue) => { diff --git a/src/components/Slicey/Marker/styles.css b/src/components/Slicey/Marker/styles.css new file mode 100644 index 000000000..4b11e3f4c --- /dev/null +++ b/src/components/Slicey/Marker/styles.css @@ -0,0 +1,4 @@ +.marker-component { + stroke: #da4f49; + stroke-width: 0.02; +} diff --git a/src/components/Slicey/index.jsx b/src/components/Slicey/index.jsx index 17863c114..c9120971d 100644 --- a/src/components/Slicey/index.jsx +++ b/src/components/Slicey/index.jsx @@ -5,7 +5,7 @@ import Arc from './Arc'; import Donut from './Donut'; import Marker from './Marker'; import { ROUND, HALF, QUARTER, getPointX, getPointY } from './dataProcessor'; -import './styles.scss'; +import './styles.css'; const filterDataset = (dataset) => _.filter(dataset, ({ value }) => value > 0); diff --git a/src/components/Slicey/styles.css b/src/components/Slicey/styles.css new file mode 100644 index 000000000..dc76305b0 --- /dev/null +++ b/src/components/Slicey/styles.css @@ -0,0 +1,9 @@ +.slicey-component { + vertical-align: top; +} +.slicey-background { + fill: #5a5a5a; +} +.slicey-empty { + fill: #f9f9f9; +} diff --git a/src/components/Spinner/index.jsx b/src/components/Spinner/index.jsx index dff89542f..cf92a27f7 100644 --- a/src/components/Spinner/index.jsx +++ b/src/components/Spinner/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const Spinner = ({ className, size }) => (
diff --git a/src/components/Spinner/styles.css b/src/components/Spinner/styles.css new file mode 100644 index 000000000..5c94a8093 --- /dev/null +++ b/src/components/Spinner/styles.css @@ -0,0 +1,33 @@ +.spinner-component .spinner { + animation: rotation 1.1s infinite linear; + border-radius: 100%; + border-style: solid; + border-bottom-color: #838383; + border-left-color: #838383; + border-right-color: #838383; + border-top-color: #d3d3d3; + display: inline-block; +} +.spinner-component .spinner-small { + border-width: 2px; + height: 16px; + width: 16px; +} +.spinner-component .spinner-medium { + border-width: 3px; + height: 30px; + width: 30px; +} +.spinner-component .spinner-large { + border-width: 3px; + height: 40px; + width: 40px; +} +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} diff --git a/src/components/SplitPane/index.jsx b/src/components/SplitPane/index.jsx index 047ea03c7..412c41d62 100644 --- a/src/components/SplitPane/index.jsx +++ b/src/components/SplitPane/index.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const SplitPane = ({ children, dts, additionalClassNames }) => { const splitPaneClass = classNames('splitpane-component', ...additionalClassNames); diff --git a/src/components/SplitPane/styles.css b/src/components/SplitPane/styles.css new file mode 100644 index 000000000..a011974e4 --- /dev/null +++ b/src/components/SplitPane/styles.css @@ -0,0 +1,14 @@ +.splitpane-component { + display: flex; + flex-basis: 50%; + flex-flow: column nowrap; + overflow: hidden; +} +.splitpane-component + .splitpane-component { + margin-left: 30px; +} +.splitpane-component > .grid-component { + flex-grow: 0; + flex-shrink: 1; + overflow: auto; +} diff --git a/src/components/Statistic/index.jsx b/src/components/Statistic/index.jsx index d588e851f..1340b1a71 100644 --- a/src/components/Statistic/index.jsx +++ b/src/components/Statistic/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const Statistic = ({ label, value, inline }) => { const baseClass = 'statistic-component'; diff --git a/src/components/Statistic/styles.css b/src/components/Statistic/styles.css new file mode 100644 index 000000000..ec36ce0d4 --- /dev/null +++ b/src/components/Statistic/styles.css @@ -0,0 +1,20 @@ +.statistic-component { + font-size: 15px; +} +.statistic-component-value { + font-weight: 700; +} +.statistic-component-label { + color: #838383; + font-weight: 400; +} +.statistic-component + .statistic-component { + margin-top: 5px; +} +.statistic-component.inline .statistic-component-label, +.statistic-component.inline .statistic-component-value { + display: inline-block; +} +.statistic-component.inline .statistic-component-label { + margin-left: 5px; +} diff --git a/src/components/StatusPill/index.jsx b/src/components/StatusPill/index.jsx index c17598581..de99566cd 100644 --- a/src/components/StatusPill/index.jsx +++ b/src/components/StatusPill/index.jsx @@ -2,7 +2,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Pill from '../Pill'; -import './styles.scss'; +import './styles.css'; const styles = ['primary', 'success', 'warning', 'error', 'light']; const sizes = ['large', 'medium', 'small']; diff --git a/src/components/StatusPill/styles.css b/src/components/StatusPill/styles.css new file mode 100644 index 000000000..f50fdbdd0 --- /dev/null +++ b/src/components/StatusPill/styles.css @@ -0,0 +1,49 @@ +.aui--status-pill { + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid transparent; + user-select: none; + font-weight: 700; + line-height: 1; + color: #5a5a5a; +} +.aui--status-pill-primary { + background-color: #c1e1ec; +} +.aui--status-pill-primary.aui--status-pill-inverse { + background-color: #fff; + border-color: #e8e8e8; + color: #00adee; +} +.aui--status-pill-success { + background-color: #c5e6dc; +} +.aui--status-pill-success.aui--status-pill-inverse { + background-color: #fff; + border-color: #e8e8e8; + color: #95c83d; +} +.aui--status-pill-warning { + background-color: #fec985; +} +.aui--status-pill-warning.aui--status-pill-inverse { + background-color: #fff; + border-color: #e8e8e8; + color: #f93; +} +.aui--status-pill-error { + background-color: #f9b7b0; +} +.aui--status-pill-error.aui--status-pill-inverse { + background-color: #fff; + border-color: #e8e8e8; + color: #da4f49; +} +.aui--status-pill-light { + background-color: #e8e8e8; +} +.aui--status-pill-light.aui--status-pill-inverse { + background-color: #fff; + border-color: #e8e8e8; +} diff --git a/src/components/SvgSymbol/index.jsx b/src/components/SvgSymbol/index.jsx index 31880f493..c08435f6d 100644 --- a/src/components/SvgSymbol/index.jsx +++ b/src/components/SvgSymbol/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { classSuffixHelper } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const base64UrlPrefix = 'data:image/svg+xml;base64,'; diff --git a/src/components/SvgSymbol/styles.css b/src/components/SvgSymbol/styles.css new file mode 100644 index 000000000..1c30f1b24 --- /dev/null +++ b/src/components/SvgSymbol/styles.css @@ -0,0 +1,84 @@ +.aui--svg-symbol-component { + display: inline-block; + height: 16px; + pointer-events: none; + width: 16px; +} +.aui--svg-symbol-component-16 { + height: 16px; + width: 16px; +} +.aui--svg-symbol-component-70 { + height: 70px; + width: 70px; +} +.aui--svg-symbol-component-200 { + height: 200px; + width: 200px; +} +.aui--svg-symbol-component-250 { + height: 250px; + width: 250px; +} +.aui--svg-symbol-component-color-disabled { + fill: #d3d3d3; +} +.aui--svg-symbol-component-cyan-dark { + fill: #0492ba; +} +.aui--svg-symbol-component-gray { + fill: #ababab; +} +.aui--svg-symbol-component-gray-darker { + fill: #5a5a5a; +} +.aui--svg-symbol-component-gray-light { + fill: #d3d3d3; +} +.aui--svg-symbol-component-green-dark { + fill: #31a549; +} +.aui--svg-symbol-component-orange-dark { + fill: #f8951d; +} +.aui--svg-symbol-component-red { + fill: #da4f49; +} +.aui--svg-symbol-component-clickable { + cursor: pointer; + pointer-events: auto; +} + +.aui--svg-symbol-component-circle { + background-color: #f3f3f3; + border-radius: 50%; + display: inline-block; + height: 16px; + width: 16px; +} +.aui--svg-symbol-component-circle-inverse { + background-color: #fff; +} +.aui--svg-symbol-component-circle .aui--svg-symbol-component { + height: 12px; + margin: 2px; + width: 12px; +} +.aui--svg-symbol-component-circle-70 { + height: 70px; + width: 70px; +} +.aui--svg-symbol-component-circle .aui--svg-symbol-component-70 { + height: 50px; + margin: 10px; + width: 50px; +} +.aui--svg-symbol-component-circle-50 { + height: 50px; + width: 50px; +} +.aui--svg-symbol-component-circle .aui--svg-symbol-component-50 { + height: 36px; + margin: 7px; + width: 36px; +} diff --git a/src/components/Switch/index.jsx b/src/components/Switch/index.jsx index ff8d3d0a9..49115641a 100644 --- a/src/components/Switch/index.jsx +++ b/src/components/Switch/index.jsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; -import './styles.scss'; +import './styles.css'; class Switch extends React.PureComponent { state = { checked: this.props.defaultChecked || false }; diff --git a/src/components/Switch/styles.css b/src/components/Switch/styles.css new file mode 100644 index 000000000..ad68181bc --- /dev/null +++ b/src/components/Switch/styles.css @@ -0,0 +1,58 @@ +.aui--switch-label { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.aui--switch-label input { + opacity: 0; + width: 0; + height: 0; +} + +.aui--switch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + transition: 0.4s; + border-style: solid; + border-color: #ababab; + border-width: thin; +} + +.aui--switch-slider::before { + position: absolute; + content: ''; + height: 12px; + width: 12px; + margin-left: 3px; + margin-top: 3px; + background-color: #006dcc; + transition: 0.4s; +} + +input:checked + .aui--switch-slider { + background-color: #e0f0ff; +} +input:checked + .aui--switch-slider::before { + transform: translateX(20px); +} +input:disabled + .aui--switch-slider { + background-color: #d3d3d3; +} +input:disabled + .aui--switch-slider::before { + background-color: #838383; +} + +.aui--switch-slider.round { + border-radius: 34px; +} + +.aui--switch-slider.round::before { + border-radius: 50%; +} diff --git a/src/components/Tag/index.jsx b/src/components/Tag/index.jsx index 8371cb935..b62590bdc 100644 --- a/src/components/Tag/index.jsx +++ b/src/components/Tag/index.jsx @@ -1,7 +1,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const defaultComponentClass = 'tag-component'; diff --git a/src/components/Tag/styles.css b/src/components/Tag/styles.css new file mode 100644 index 000000000..b68eec124 --- /dev/null +++ b/src/components/Tag/styles.css @@ -0,0 +1,49 @@ +.tag-component { + align-items: center; + background-color: #838383; + border-radius: 2px; + box-sizing: border-box; + color: #fff; + display: inline-flex; + font-size: 12px; + margin-right: 6px; + min-height: 24px; + padding: 0 6px; + line-height: 0; +} +.tag-component.tag-component-inverse { + background-color: #f3f3f3; + border-left: 4px solid; + color: #838383; +} +.tag-component.tag-component-inverse .action-button { + fill: #ababab; +} +.tag-component-actionable { + padding-right: 0; +} +.tag-component-accent label { + font-weight: 700; +} +.tag-component .action-button { + box-sizing: border-box; + cursor: pointer; + fill: #fff; + fill-opacity: 0.6; + height: 24px; + text-align: center; + width: 24px; + align-items: center; + display: flex; + justify-content: center; +} +.tag-component .action-button:hover { + fill-opacity: 1; +} +.tag-component label { + margin-bottom: 0; + max-width: 105px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/components/TextEllipsis/index.jsx b/src/components/TextEllipsis/index.jsx index 4c4c8ea48..2666c121b 100644 --- a/src/components/TextEllipsis/index.jsx +++ b/src/components/TextEllipsis/index.jsx @@ -2,7 +2,7 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; import Popover from '../Popover'; -import './styles.scss'; +import './styles.css'; const TextEllipsis = ({ popoverProps, children }) => { const containerRef = React.useRef(); diff --git a/src/components/TextEllipsis/styles.css b/src/components/TextEllipsis/styles.css new file mode 100644 index 000000000..16e4af4e7 --- /dev/null +++ b/src/components/TextEllipsis/styles.css @@ -0,0 +1,8 @@ +.aui--text-ellipsis-wrapper { + display: flex; +} +.aui--text-ellipsis-wrapper .text-ellipsis-component { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} diff --git a/src/components/Tile/index.jsx b/src/components/Tile/index.jsx index eb602e6ac..446e47642 100644 --- a/src/components/Tile/index.jsx +++ b/src/components/Tile/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; -import './styles.scss'; +import './styles.css'; const Tile = ({ className, title, imgLink, onClick, dts }) => { const baseClass = 'aui--tile'; diff --git a/src/components/Tile/styles.css b/src/components/Tile/styles.css new file mode 100644 index 000000000..6a70de615 --- /dev/null +++ b/src/components/Tile/styles.css @@ -0,0 +1,60 @@ +.aui--tile { + width: 200px; + height: 120px; + position: relative; + border: 1px solid #e8e8e8; + background-color: #fff; + padding: 15px 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; +} +.aui--tile-logo { + padding: 0; + overflow: hidden; + max-width: 140px; + max-height: 88px; +} +.aui--tile-logo img { + max-width: 140px; + max-height: 88px; +} +.aui--tile-title { + width: 100%; + height: 100%; + box-sizing: border-box; + color: #5a5a5a; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; + font-weight: 700; + line-height: 1; + padding: 18px; + position: absolute; + top: 0; + left: 0; + text-transform: uppercase; + text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); +} +.aui--tile-title:hover, +.aui--tile-title:focus { + color: #5a5a5a; + text-decoration: none; +} +.aui--tile-title:hover::after, +.aui--tile-title:focus::after { + background-color: #838383; + border-radius: 5px; + bottom: 0; + content: ''; + display: block; + left: 0; + opacity: 0.2; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} diff --git a/src/components/TileGrid/index.jsx b/src/components/TileGrid/index.jsx index 31bcf51a6..8e962c0c9 100644 --- a/src/components/TileGrid/index.jsx +++ b/src/components/TileGrid/index.jsx @@ -3,7 +3,7 @@ import _ from 'lodash'; import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import './styles.scss'; +import './styles.css'; const defaultWidth = 204; // 204px const defaultMaxWidth = 295; // 295px diff --git a/src/components/TileGrid/styles.css b/src/components/TileGrid/styles.css new file mode 100644 index 000000000..104e77045 --- /dev/null +++ b/src/components/TileGrid/styles.css @@ -0,0 +1,82 @@ +.tile-grid-component-title { + color: #333; + display: block; + font-size: 18px; + font-weight: 700; + margin-bottom: 10px; +} +.tile-grid-component-list { + display: flex; + justify-content: space-between; + list-style: none; + margin: 0; + padding: 0; +} +.tile-grid-component-item { + background: #e8e8e8 50%; + border-radius: 5px; + box-shadow: inset 0 -4px 0 #d3d3d3; + height: 124px; + position: relative; +} +.tile-grid-component-item-img-wrapper { + border-radius: inherit; + overflow: hidden; + display: flex; +} +.tile-grid-component-item-img-wrapper img { + width: auto; + height: 120px; +} +.tile-grid-component-item-img-wrapper-left { + justify-content: flex-start; +} +.tile-grid-component-item-img-wrapper-right { + justify-content: flex-end; +} +.tile-grid-component-item-img-wrapper-center { + justify-content: center; +} +.tile-grid-component-item-link { + width: 100%; + height: 100%; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: block; + font-size: 18px; + font-weight: 700; + line-height: 1; + padding: 20px; + position: absolute; + top: 0; + left: 0; + text-transform: uppercase; + text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); +} +.tile-grid-component-item-link:hover, +.tile-grid-component-item-link:focus { + color: #fff; + text-decoration: none; +} +.tile-grid-component-item-link:hover::after, +.tile-grid-component-item-link:focus::after { + background-color: #838383; + border-radius: 5px; + bottom: 0; + content: ''; + display: block; + left: 0; + opacity: 0.2; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} +.tile-grid-component-item-distributed { + flex: 1; + width: 0; +} +.tile-grid-component-item-distributed:not(:last-child) { + margin-right: 10px; +} diff --git a/src/components/Toast/index.jsx b/src/components/Toast/index.jsx index 6eaaa25c0..4b7c9b6cc 100644 --- a/src/components/Toast/index.jsx +++ b/src/components/Toast/index.jsx @@ -4,7 +4,7 @@ import { toast, ToastContainer as ReactToastContainer } from 'react-toastify'; import PropTypes from 'prop-types'; import { toastPlacements } from './constants'; import 'react-toastify/dist/ReactToastify.css'; -import './styles.scss'; +import './styles.css'; const ToastContainer = (props) => ; diff --git a/src/components/Toast/styles.css b/src/components/Toast/styles.css new file mode 100644 index 000000000..f92c17499 --- /dev/null +++ b/src/components/Toast/styles.css @@ -0,0 +1,39 @@ +.aui--toast-container { + min-width: 252px; + max-width: 504px; +} +.aui--toast-container .aui--toast-notification-body { + background-color: #202124; + border-radius: 4px; + margin: 0; + margin-top: 18px; + padding: 0; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message { + font-size: 14px; + color: #fff; + margin: 18px; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message .aui--toast-title { + font-weight: 700; + font-size: 15px; + margin-right: 12px; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message .aui--toast-title-info { + color: #49afcd; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message .aui--toast-title-success { + color: #95c83d; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message .aui--toast-title-alert { + color: #faa732; +} +.aui--toast-container .aui--toast-notification-body .aui--toast-body-message .aui--toast-title-attention { + color: #da4f49; +} +.aui--toast-container .aui--toast-notification-body .Toastify__close-button { + color: #fff; + padding-top: 22.5px; + padding-right: 18px; + opacity: 1; +} diff --git a/src/components/TreePicker/Grid/index.jsx b/src/components/TreePicker/Grid/index.jsx index 8c6b1260a..b17e5a083 100644 --- a/src/components/TreePicker/Grid/index.jsx +++ b/src/components/TreePicker/Grid/index.jsx @@ -7,7 +7,7 @@ import Grid from '../../Grid'; import GridRow from '../../Grid/Row'; import Spinner from '../../Spinner'; import { TreePickerPropTypesNode } from '../../../prop-types/TreePickerPropTypes'; -import './styles.scss'; +import './styles.css'; const TreePickerGrid = ({ disabled, diff --git a/src/components/TreePicker/Grid/styles.css b/src/components/TreePicker/Grid/styles.css new file mode 100644 index 000000000..444f3793f --- /dev/null +++ b/src/components/TreePicker/Grid/styles.css @@ -0,0 +1,5 @@ +.treepickergrid-component-group-label .grid-component-row { + background-color: #f9f9f9; + font-weight: 700; + padding: 7px 10px; +} diff --git a/src/components/TreePicker/Nav/index.jsx b/src/components/TreePicker/Nav/index.jsx index d49fccb8b..b456dbac0 100644 --- a/src/components/TreePicker/Nav/index.jsx +++ b/src/components/TreePicker/Nav/index.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import Search from '../../Search'; import Breadcrumb from '../../Breadcrumb'; import { TreePickerPropTypesBreadCrumbNode } from '../../../prop-types/TreePickerPropTypes'; -import './styles.scss'; +import './styles.css'; const TreePickerNav = ({ breadcrumbRootNode, diff --git a/src/components/TreePicker/Nav/styles.css b/src/components/TreePicker/Nav/styles.css new file mode 100644 index 000000000..15e72b919 --- /dev/null +++ b/src/components/TreePicker/Nav/styles.css @@ -0,0 +1,11 @@ +.treepickernav-component { + border-left: 1px solid #e8e8e8; + border-right: 1px solid #e8e8e8; + padding: 10px; +} +.treepickernav-component > div + div { + margin-top: 10px; +} +.treepickernav-component > .aui--breadcrumb { + padding-left: 2px; +} diff --git a/src/components/TreePicker/Node/index.jsx b/src/components/TreePicker/Node/index.jsx index d40a6f5b3..6b3beae12 100644 --- a/src/components/TreePicker/Node/index.jsx +++ b/src/components/TreePicker/Node/index.jsx @@ -8,7 +8,7 @@ import GridRow from '../../Grid/Row'; import TextEllipsis from '../../TextEllipsis'; import TreePickerNodeExpander from './Expander'; import { TreePickerPropTypesNode } from '../../../prop-types/TreePickerPropTypes'; -import './styles.scss'; +import './styles.css'; const baseClass = 'treepickernode-component'; diff --git a/src/components/TreePicker/Node/styles.css b/src/components/TreePicker/Node/styles.css new file mode 100644 index 000000000..2904373aa --- /dev/null +++ b/src/components/TreePicker/Node/styles.css @@ -0,0 +1,46 @@ +.treepickernode-component:hover { + background-color: #f9f9f9; +} +.treepickernode-component:hover .treepickernode-component-expander { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235a5a5a' d='M12.5 4c.3 0 .5.2.5.5v4h2.3c.4 0 .6.4.4.7l-2.3 4.1c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z'/%3E%3Cpath fill='%23fff' d='M3 5v6.3l1.4-2.6c.1-.2.3-.2.4-.2H12V5H3z'/%3E%3C/svg%3E"); +} +.treepickernode-component-expander { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ababab' d='M12.5 4c.3 0 .5.2.5.5V6h1.8c.4.1.5.5.4.8l-1.8 6.4c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z'/%3E%3Cpath fill='%23fff' d='M3 5v5.6l1.4-4.2c.1-.1.2-.4.6-.4h7V5H3z'/%3E%3C/svg%3E"); + height: 16px; + width: 16px; +} +.treepickernode-component.is-error { + background-color: #fbedec; +} +.treepickernode-component.is-warning { + background-color: #fef6ea; +} +.treepickernode-component.is-info { + background-color: #e0f0ff; +} +.treepickernode-component.is-success { + background-color: #eaf8ea; +} +.treepickernode-component-metadata { + color: #838383; +} +.treepickernode-component-metadata::before { + content: ' '; +} +.treepickernode-component .grid-component-cell-button { + padding-bottom: 7px; + padding-top: 7px; +} +.treepickernode-component .grid-component-cell-button .button-xs { + font-size: 15px; + min-height: 20px; + line-height: 14px; + width: 20px; + padding: 2px 4px; +} +.treepickernode-component label { + margin-bottom: 0; +} +.treepickernode-component .spinner-component > .spinner { + margin-bottom: -4px; +} diff --git a/src/components/TreePicker/index.jsx b/src/components/TreePicker/index.jsx index 2f02ae588..e74766ffc 100644 --- a/src/components/TreePicker/index.jsx +++ b/src/components/TreePicker/index.jsx @@ -7,7 +7,7 @@ import TreePickerGrid from './Grid'; import TreePickerNav from './Nav'; import FlexibleSpacer from '../FlexibleSpacer'; import { TreePickerPropTypesNode, TreePickerPropTypesBreadCrumbNode } from '../../prop-types/TreePickerPropTypes'; -import './styles.scss'; +import './styles.css'; export const removeSelected = ({ subtree, selectedNodes }) => { if (!subtree) return subtree; diff --git a/src/components/TreePicker/styles.css b/src/components/TreePicker/styles.css new file mode 100644 index 000000000..23d5374d0 --- /dev/null +++ b/src/components/TreePicker/styles.css @@ -0,0 +1,27 @@ +.treepickersimplepure-component { + display: flex; + height: 500px; +} +.treepickersimplepure-component .loading-nodes-container { + text-align: center; + padding: 60px; +} +.treepickersimplepure-component .flexible-spacer-component { + border-top: 0; +} +.treepickersimplepure-component .treepickernav-component { + background-color: #fff; + border-top: 1px solid #e8e8e8; +} +.treepickersimplepure-component .splitpane-component + .splitpane-component .empty-component { + margin-top: 71px; +} +.treepickersimplepure-component.disabled { + pointer-events: none; + cursor: default; + opacity: 0.65; +} + +.background-highlighted { + background-color: #f3f3f3; +} diff --git a/src/components/UserListPicker/index.jsx b/src/components/UserListPicker/index.jsx index 009b31b8a..9258465bc 100644 --- a/src/components/UserListPicker/index.jsx +++ b/src/components/UserListPicker/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ListPicker from '../ListPicker'; import Avatar from '../Avatar'; -import './styles.scss'; +import './styles.css'; const UserListPicker = ({ allowEmptySelection, diff --git a/src/components/UserListPicker/styles.css b/src/components/UserListPicker/styles.css new file mode 100644 index 000000000..cce2a6c7e --- /dev/null +++ b/src/components/UserListPicker/styles.css @@ -0,0 +1,6 @@ +.userlistpicker-component-user-label .avatar-component { + margin-right: 10px; +} +.userlistpicker-component .grid-component-cell-toggle { + line-height: 35px; +} diff --git a/src/components/VerticalNavigation/index.jsx b/src/components/VerticalNavigation/index.jsx index 82dfa6f53..da5f89c98 100644 --- a/src/components/VerticalNavigation/index.jsx +++ b/src/components/VerticalNavigation/index.jsx @@ -2,7 +2,7 @@ import _ from 'lodash'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import './styles.scss'; +import './styles.css'; const MenuItem = ({ children }) => children; diff --git a/src/components/VerticalNavigation/styles.css b/src/components/VerticalNavigation/styles.css new file mode 100644 index 000000000..914ec6b0f --- /dev/null +++ b/src/components/VerticalNavigation/styles.css @@ -0,0 +1,72 @@ +.aui--vertical-navigation-component { + display: flex; + flex-direction: row; +} +.aui--vertical-navigation-component .aui--vertical-navigation-component__menu { + width: 260px; + font-size: 15px; + font-family: Roboto, Helvetica, sans-serif; + font-weight: 700; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu.aui--vertical-navigation-component__menu-is-collapsed { + width: 60px; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu.aui--vertical-navigation-component__menu-is-animated { + transition: width 1s ease-in-out; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu + .aui--vertical-navigation-component__menu-item { + height: 60px; + padding: 10px; + margin-right: 6px; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + white-space: nowrap; + overflow: hidden; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu + .aui--vertical-navigation-component__menu-item + .aui--vertical-navigation-component__menu-item-collapse { + display: flex; + width: 40px; + height: 40px; + flex-direction: column; + justify-content: center; + padding: 8px; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu + .aui--vertical-navigation-component__menu-item + .aui--vertical-navigation-component__menu-item-collapse:hover { + border-radius: 50%; + background-color: #e8e8e8; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__menu + .aui--vertical-navigation-component__menu-item + .aui--vertical-navigation-component__menu-item-collapse-icon { + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../styles/icons/burger.svg'); +} +.aui--vertical-navigation-component .aui--vertical-navigation-component__content { + flex-grow: 1; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__content + .aui--vertical-navigation-component__content-item { + display: none; +} +.aui--vertical-navigation-component + .aui--vertical-navigation-component__content + .aui--vertical-navigation-component__content-item.aui--vertical-navigation-component__content-item-is-active { + display: block; +} diff --git a/src/index.js b/src/index.js index 63138692b..a40de3f3d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -import './styles/bootstrap-custom.scss'; -import './styles/icheck-custom.scss'; +import './styles/bootstrap-custom.css'; +import './styles/icheck-custom.css'; import { registerLocale } from 'react-datepicker'; diff --git a/src/styles/animation.css b/src/styles/animation.css new file mode 100644 index 000000000..f77cf8005 --- /dev/null +++ b/src/styles/animation.css @@ -0,0 +1,8 @@ +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 0.8; + } +} diff --git a/src/styles/bootstrap-custom.css b/src/styles/bootstrap-custom.css new file mode 100644 index 000000000..8be926f82 --- /dev/null +++ b/src/styles/bootstrap-custom.css @@ -0,0 +1,5181 @@ +@charset "UTF-8"; +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background-color: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type='button'], +input[type='reset'], +input[type='submit'] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + height: auto; +} + +input[type='search'] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: bold; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + font-family: Roboto, Helvetica, sans-serif; + font-size: 12px; + line-height: 1.5; + color: #333; + background-color: #fff; +} + +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +a { + color: #006dcc; + text-decoration: none; +} +a:hover, +a:focus { + color: #1950a3; + text-decoration: underline; +} +a:focus { + outline: none; +} + +figure { + margin: 0; +} + +img { + vertical-align: middle; +} + +.img-responsive { + display: block; + max-width: 100%; + height: auto; +} + +.img-rounded { + border-radius: 2px; +} + +.img-thumbnail { + padding: 4px; + line-height: 1.5; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 2px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + max-width: 100%; + height: auto; +} + +.img-circle { + border-radius: 50%; +} + +hr { + margin-top: 18px; + margin-bottom: 18px; + border: 0; + border-top: 1px solid #e8e8e8; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +[role='button'] { + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h1 .small, +h2 small, +h2 .small, +h3 small, +h3 .small, +h4 small, +h4 .small, +h5 small, +h5 .small, +h6 small, +h6 .small, +.h1 small, +.h1 .small, +.h2 small, +.h2 .small, +.h3 small, +.h3 .small, +.h4 small, +.h4 .small, +.h5 small, +.h5 .small, +.h6 small, +.h6 .small { + font-weight: 400; + line-height: 1; + color: #838383; +} + +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 18px; + margin-bottom: 9px; +} +h1 small, +h1 .small, +.h1 small, +.h1 .small, +h2 small, +h2 .small, +.h2 small, +.h2 .small, +h3 small, +h3 .small, +.h3 small, +.h3 .small { + font-size: 65%; +} + +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 9px; + margin-bottom: 9px; +} +h4 small, +h4 .small, +.h4 small, +.h4 .small, +h5 small, +h5 .small, +.h5 small, +.h5 .small, +h6 small, +h6 .small, +.h6 small, +.h6 .small { + font-size: 75%; +} + +h1, +.h1 { + font-size: 31px; +} + +h2, +.h2 { + font-size: 25px; +} + +h3, +.h3 { + font-size: 21px; +} + +h4, +.h4 { + font-size: 15px; +} + +h5, +.h5 { + font-size: 12px; +} + +h6, +.h6 { + font-size: 11px; +} + +p { + margin: 0 0 9px; +} + +.lead { + margin-bottom: 18px; + font-size: 13px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 18px; + } +} + +small, +.small { + font-size: 91%; +} + +mark, +.mark { + padding: 0.2em; + background-color: #faa732; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.text-justify { + text-align: justify; +} + +.text-nowrap { + white-space: nowrap; +} + +.text-lowercase { + text-transform: lowercase; +} + +.text-uppercase, +.initialism { + text-transform: uppercase; +} + +.text-capitalize { + text-transform: capitalize; +} + +.text-muted { + color: #838383; +} + +.text-primary { + color: #006dcc; +} + +a.text-primary:hover, +a.text-primary:focus { + color: #005299; +} + +.text-success { + color: #5bb75b; +} + +a.text-success:hover, +a.text-success:focus { + color: #449b44; +} + +.text-info { + color: #49afcd; +} + +a.text-info:hover, +a.text-info:focus { + color: #3195b2; +} + +.text-warning { + color: #faa732; +} + +a.text-warning:hover, +a.text-warning:focus { + color: #f39106; +} + +.text-danger { + color: #da4f49; +} + +a.text-danger:hover, +a.text-danger:focus { + color: #c72f29; +} + +.bg-primary { + color: #fff; +} + +.bg-primary { + background-color: #006dcc; +} + +a.bg-primary:hover, +a.bg-primary:focus { + background-color: #005299; +} + +.bg-success { + background-color: #5bb75b; +} + +a.bg-success:hover, +a.bg-success:focus { + background-color: #449b44; +} + +.bg-info { + background-color: #49afcd; +} + +a.bg-info:hover, +a.bg-info:focus { + background-color: #3195b2; +} + +.bg-warning { + background-color: #faa732; +} + +a.bg-warning:hover, +a.bg-warning:focus { + background-color: #f39106; +} + +.bg-danger { + background-color: #da4f49; +} + +a.bg-danger:hover, +a.bg-danger:focus { + background-color: #c72f29; +} + +.page-header { + padding-bottom: 8px; + margin: 36px 0 18px; + border-bottom: 1px solid #e8e8e8; +} + +ul, +ol { + margin-top: 0; + margin-bottom: 9px; +} +ul ul, +ul ol, +ol ul, +ol ol { + margin-bottom: 0; +} + +.list-unstyled { + padding-left: 0; + list-style: none; +} + +.list-inline { + padding-left: 0; + list-style: none; + margin-left: -5px; +} +.list-inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} + +dl { + margin-top: 0; + margin-bottom: 18px; +} + +dt, +dd { + line-height: 1.5; +} + +dt { + font-weight: 700; +} + +dd { + margin-left: 0; +} + +.dl-horizontal dd:before, +.dl-horizontal dd:after { + display: table; + content: ' '; +} +.dl-horizontal dd:after { + clear: both; +} +@media (min-width: 0) { + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} + +abbr[title], +abbr[data-original-title] { + cursor: help; +} + +.initialism { + font-size: 90%; +} + +blockquote { + padding: 9px 18px; + margin: 0 0 18px; + font-size: 15px; + border-left: 5px solid #e8e8e8; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.5; + color: #838383; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '— '; +} + +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + text-align: right; + border-right: 5px solid #e8e8e8; + border-left: 0; +} +.blockquote-reverse footer:before, +.blockquote-reverse small:before, +.blockquote-reverse .small:before, +blockquote.pull-right footer:before, +blockquote.pull-right small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +.blockquote-reverse small:after, +.blockquote-reverse .small:after, +blockquote.pull-right footer:after, +blockquote.pull-right small:after, +blockquote.pull-right .small:after { + content: ' —'; +} + +address { + margin-bottom: 18px; + font-style: normal; + line-height: 1.5; +} + +.container { + padding-right: 10px; + padding-left: 10px; + margin-right: auto; + margin-left: auto; +} +.container:before, +.container:after { + display: table; + content: ' '; +} +.container:after { + clear: both; +} +@media (min-width: 768px) { + .container { + width: 740px; + } +} +@media (min-width: 992px) { + .container { + width: 960px; + } +} +@media (min-width: 1200px) { + .container { + width: 1160px; + } +} + +.container-fluid { + padding-right: 10px; + padding-left: 10px; + margin-right: auto; + margin-left: auto; +} +.container-fluid:before, +.container-fluid:after { + display: table; + content: ' '; +} +.container-fluid:after { + clear: both; +} + +.row { + margin-right: -10px; + margin-left: -10px; +} +.row:before, +.row:after { + display: table; + content: ' '; +} +.row:after { + clear: both; +} + +.row-no-gutters { + margin-right: 0; + margin-left: 0; +} +.row-no-gutters [class*='col-'] { + padding-right: 0; + padding-left: 0; +} + +.col-xs-1, +.col-sm-1, +.col-md-1, +.col-lg-1, +.col-xs-2, +.col-sm-2, +.col-md-2, +.col-lg-2, +.col-xs-3, +.col-sm-3, +.col-md-3, +.col-lg-3, +.col-xs-4, +.col-sm-4, +.col-md-4, +.col-lg-4, +.col-xs-5, +.col-sm-5, +.col-md-5, +.col-lg-5, +.col-xs-6, +.col-sm-6, +.col-md-6, +.col-lg-6, +.col-xs-7, +.col-sm-7, +.col-md-7, +.col-lg-7, +.col-xs-8, +.col-sm-8, +.col-md-8, +.col-lg-8, +.col-xs-9, +.col-sm-9, +.col-md-9, +.col-lg-9, +.col-xs-10, +.col-sm-10, +.col-md-10, +.col-lg-10, +.col-xs-11, +.col-sm-11, +.col-md-11, +.col-lg-11, +.col-xs-12, +.col-sm-12, +.col-md-12, +.col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 10px; + padding-left: 10px; +} + +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + float: left; +} + +.col-xs-1 { + width: 8.3333333333%; +} + +.col-xs-2 { + width: 16.6666666667%; +} + +.col-xs-3 { + width: 25%; +} + +.col-xs-4 { + width: 33.3333333333%; +} + +.col-xs-5 { + width: 41.6666666667%; +} + +.col-xs-6 { + width: 50%; +} + +.col-xs-7 { + width: 58.3333333333%; +} + +.col-xs-8 { + width: 66.6666666667%; +} + +.col-xs-9 { + width: 75%; +} + +.col-xs-10 { + width: 83.3333333333%; +} + +.col-xs-11 { + width: 91.6666666667%; +} + +.col-xs-12 { + width: 100%; +} + +.col-xs-pull-0 { + right: auto; +} + +.col-xs-pull-1 { + right: 8.3333333333%; +} + +.col-xs-pull-2 { + right: 16.6666666667%; +} + +.col-xs-pull-3 { + right: 25%; +} + +.col-xs-pull-4 { + right: 33.3333333333%; +} + +.col-xs-pull-5 { + right: 41.6666666667%; +} + +.col-xs-pull-6 { + right: 50%; +} + +.col-xs-pull-7 { + right: 58.3333333333%; +} + +.col-xs-pull-8 { + right: 66.6666666667%; +} + +.col-xs-pull-9 { + right: 75%; +} + +.col-xs-pull-10 { + right: 83.3333333333%; +} + +.col-xs-pull-11 { + right: 91.6666666667%; +} + +.col-xs-pull-12 { + right: 100%; +} + +.col-xs-push-0 { + left: auto; +} + +.col-xs-push-1 { + left: 8.3333333333%; +} + +.col-xs-push-2 { + left: 16.6666666667%; +} + +.col-xs-push-3 { + left: 25%; +} + +.col-xs-push-4 { + left: 33.3333333333%; +} + +.col-xs-push-5 { + left: 41.6666666667%; +} + +.col-xs-push-6 { + left: 50%; +} + +.col-xs-push-7 { + left: 58.3333333333%; +} + +.col-xs-push-8 { + left: 66.6666666667%; +} + +.col-xs-push-9 { + left: 75%; +} + +.col-xs-push-10 { + left: 83.3333333333%; +} + +.col-xs-push-11 { + left: 91.6666666667%; +} + +.col-xs-push-12 { + left: 100%; +} + +.col-xs-offset-0 { + margin-left: 0%; +} + +.col-xs-offset-1 { + margin-left: 8.3333333333%; +} + +.col-xs-offset-2 { + margin-left: 16.6666666667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.3333333333%; +} + +.col-xs-offset-5 { + margin-left: 41.6666666667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.3333333333%; +} + +.col-xs-offset-8 { + margin-left: 66.6666666667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.3333333333%; +} + +.col-xs-offset-11 { + margin-left: 91.6666666667%; +} + +.col-xs-offset-12 { + margin-left: 100%; +} + +@media (min-width: 768px) { + .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 { + float: left; + } + + .col-sm-1 { + width: 8.3333333333%; + } + + .col-sm-2 { + width: 16.6666666667%; + } + + .col-sm-3 { + width: 25%; + } + + .col-sm-4 { + width: 33.3333333333%; + } + + .col-sm-5 { + width: 41.6666666667%; + } + + .col-sm-6 { + width: 50%; + } + + .col-sm-7 { + width: 58.3333333333%; + } + + .col-sm-8 { + width: 66.6666666667%; + } + + .col-sm-9 { + width: 75%; + } + + .col-sm-10 { + width: 83.3333333333%; + } + + .col-sm-11 { + width: 91.6666666667%; + } + + .col-sm-12 { + width: 100%; + } + + .col-sm-pull-0 { + right: auto; + } + + .col-sm-pull-1 { + right: 8.3333333333%; + } + + .col-sm-pull-2 { + right: 16.6666666667%; + } + + .col-sm-pull-3 { + right: 25%; + } + + .col-sm-pull-4 { + right: 33.3333333333%; + } + + .col-sm-pull-5 { + right: 41.6666666667%; + } + + .col-sm-pull-6 { + right: 50%; + } + + .col-sm-pull-7 { + right: 58.3333333333%; + } + + .col-sm-pull-8 { + right: 66.6666666667%; + } + + .col-sm-pull-9 { + right: 75%; + } + + .col-sm-pull-10 { + right: 83.3333333333%; + } + + .col-sm-pull-11 { + right: 91.6666666667%; + } + + .col-sm-pull-12 { + right: 100%; + } + + .col-sm-push-0 { + left: auto; + } + + .col-sm-push-1 { + left: 8.3333333333%; + } + + .col-sm-push-2 { + left: 16.6666666667%; + } + + .col-sm-push-3 { + left: 25%; + } + + .col-sm-push-4 { + left: 33.3333333333%; + } + + .col-sm-push-5 { + left: 41.6666666667%; + } + + .col-sm-push-6 { + left: 50%; + } + + .col-sm-push-7 { + left: 58.3333333333%; + } + + .col-sm-push-8 { + left: 66.6666666667%; + } + + .col-sm-push-9 { + left: 75%; + } + + .col-sm-push-10 { + left: 83.3333333333%; + } + + .col-sm-push-11 { + left: 91.6666666667%; + } + + .col-sm-push-12 { + left: 100%; + } + + .col-sm-offset-0 { + margin-left: 0%; + } + + .col-sm-offset-1 { + margin-left: 8.3333333333%; + } + + .col-sm-offset-2 { + margin-left: 16.6666666667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.3333333333%; + } + + .col-sm-offset-5 { + margin-left: 41.6666666667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.3333333333%; + } + + .col-sm-offset-8 { + margin-left: 66.6666666667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.3333333333%; + } + + .col-sm-offset-11 { + margin-left: 91.6666666667%; + } + + .col-sm-offset-12 { + margin-left: 100%; + } +} +@media (min-width: 992px) { + .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 { + float: left; + } + + .col-md-1 { + width: 8.3333333333%; + } + + .col-md-2 { + width: 16.6666666667%; + } + + .col-md-3 { + width: 25%; + } + + .col-md-4 { + width: 33.3333333333%; + } + + .col-md-5 { + width: 41.6666666667%; + } + + .col-md-6 { + width: 50%; + } + + .col-md-7 { + width: 58.3333333333%; + } + + .col-md-8 { + width: 66.6666666667%; + } + + .col-md-9 { + width: 75%; + } + + .col-md-10 { + width: 83.3333333333%; + } + + .col-md-11 { + width: 91.6666666667%; + } + + .col-md-12 { + width: 100%; + } + + .col-md-pull-0 { + right: auto; + } + + .col-md-pull-1 { + right: 8.3333333333%; + } + + .col-md-pull-2 { + right: 16.6666666667%; + } + + .col-md-pull-3 { + right: 25%; + } + + .col-md-pull-4 { + right: 33.3333333333%; + } + + .col-md-pull-5 { + right: 41.6666666667%; + } + + .col-md-pull-6 { + right: 50%; + } + + .col-md-pull-7 { + right: 58.3333333333%; + } + + .col-md-pull-8 { + right: 66.6666666667%; + } + + .col-md-pull-9 { + right: 75%; + } + + .col-md-pull-10 { + right: 83.3333333333%; + } + + .col-md-pull-11 { + right: 91.6666666667%; + } + + .col-md-pull-12 { + right: 100%; + } + + .col-md-push-0 { + left: auto; + } + + .col-md-push-1 { + left: 8.3333333333%; + } + + .col-md-push-2 { + left: 16.6666666667%; + } + + .col-md-push-3 { + left: 25%; + } + + .col-md-push-4 { + left: 33.3333333333%; + } + + .col-md-push-5 { + left: 41.6666666667%; + } + + .col-md-push-6 { + left: 50%; + } + + .col-md-push-7 { + left: 58.3333333333%; + } + + .col-md-push-8 { + left: 66.6666666667%; + } + + .col-md-push-9 { + left: 75%; + } + + .col-md-push-10 { + left: 83.3333333333%; + } + + .col-md-push-11 { + left: 91.6666666667%; + } + + .col-md-push-12 { + left: 100%; + } + + .col-md-offset-0 { + margin-left: 0%; + } + + .col-md-offset-1 { + margin-left: 8.3333333333%; + } + + .col-md-offset-2 { + margin-left: 16.6666666667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.3333333333%; + } + + .col-md-offset-5 { + margin-left: 41.6666666667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.3333333333%; + } + + .col-md-offset-8 { + margin-left: 66.6666666667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.3333333333%; + } + + .col-md-offset-11 { + margin-left: 91.6666666667%; + } + + .col-md-offset-12 { + margin-left: 100%; + } +} +@media (min-width: 1200px) { + .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 { + float: left; + } + + .col-lg-1 { + width: 8.3333333333%; + } + + .col-lg-2 { + width: 16.6666666667%; + } + + .col-lg-3 { + width: 25%; + } + + .col-lg-4 { + width: 33.3333333333%; + } + + .col-lg-5 { + width: 41.6666666667%; + } + + .col-lg-6 { + width: 50%; + } + + .col-lg-7 { + width: 58.3333333333%; + } + + .col-lg-8 { + width: 66.6666666667%; + } + + .col-lg-9 { + width: 75%; + } + + .col-lg-10 { + width: 83.3333333333%; + } + + .col-lg-11 { + width: 91.6666666667%; + } + + .col-lg-12 { + width: 100%; + } + + .col-lg-pull-0 { + right: auto; + } + + .col-lg-pull-1 { + right: 8.3333333333%; + } + + .col-lg-pull-2 { + right: 16.6666666667%; + } + + .col-lg-pull-3 { + right: 25%; + } + + .col-lg-pull-4 { + right: 33.3333333333%; + } + + .col-lg-pull-5 { + right: 41.6666666667%; + } + + .col-lg-pull-6 { + right: 50%; + } + + .col-lg-pull-7 { + right: 58.3333333333%; + } + + .col-lg-pull-8 { + right: 66.6666666667%; + } + + .col-lg-pull-9 { + right: 75%; + } + + .col-lg-pull-10 { + right: 83.3333333333%; + } + + .col-lg-pull-11 { + right: 91.6666666667%; + } + + .col-lg-pull-12 { + right: 100%; + } + + .col-lg-push-0 { + left: auto; + } + + .col-lg-push-1 { + left: 8.3333333333%; + } + + .col-lg-push-2 { + left: 16.6666666667%; + } + + .col-lg-push-3 { + left: 25%; + } + + .col-lg-push-4 { + left: 33.3333333333%; + } + + .col-lg-push-5 { + left: 41.6666666667%; + } + + .col-lg-push-6 { + left: 50%; + } + + .col-lg-push-7 { + left: 58.3333333333%; + } + + .col-lg-push-8 { + left: 66.6666666667%; + } + + .col-lg-push-9 { + left: 75%; + } + + .col-lg-push-10 { + left: 83.3333333333%; + } + + .col-lg-push-11 { + left: 91.6666666667%; + } + + .col-lg-push-12 { + left: 100%; + } + + .col-lg-offset-0 { + margin-left: 0%; + } + + .col-lg-offset-1 { + margin-left: 8.3333333333%; + } + + .col-lg-offset-2 { + margin-left: 16.6666666667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.3333333333%; + } + + .col-lg-offset-5 { + margin-left: 41.6666666667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.3333333333%; + } + + .col-lg-offset-8 { + margin-left: 66.6666666667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.3333333333%; + } + + .col-lg-offset-11 { + margin-left: 91.6666666667%; + } + + .col-lg-offset-12 { + margin-left: 100%; + } +} +table { + background-color: transparent; +} +table col[class*='col-'] { + position: static; + display: table-column; + float: none; +} +table td[class*='col-'], +table th[class*='col-'] { + position: static; + display: table-cell; + float: none; +} + +caption { + padding-top: 8px; + padding-bottom: 8px; + color: #838383; + text-align: left; +} + +th { + text-align: left; +} + +.table { + width: 100%; + max-width: 100%; + margin-bottom: 18px; +} +.table > thead > tr > th, +.table > thead > tr > td, +.table > tbody > tr > th, +.table > tbody > tr > td, +.table > tfoot > tr > th, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.5; + vertical-align: top; + border-top: 1px solid #d3d3d3; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #d3d3d3; +} +.table > caption + thead > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > th, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #d3d3d3; +} +.table .table { + background-color: #fff; +} + +.table-condensed > thead > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > th, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > th, +.table-condensed > tfoot > tr > td { + padding: 5px; +} + +.table-bordered { + border: 1px solid #d3d3d3; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > th, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > th, +.table-bordered > tfoot > tr > td { + border: 1px solid #d3d3d3; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} + +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #f9f9f9; +} + +.table-hover > tbody > tr:hover { + background-color: #f9f9f9; +} + +.table > thead > tr > td.active, +.table > thead > tr > th.active, +.table > thead > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr > td.active, +.table > tbody > tr > th.active, +.table > tbody > tr.active > td, +.table > tbody > tr.active > th, +.table > tfoot > tr > td.active, +.table > tfoot > tr > th.active, +.table > tfoot > tr.active > td, +.table > tfoot > tr.active > th { + background-color: #f9f9f9; +} + +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #ececec; +} + +.table > thead > tr > td.success, +.table > thead > tr > th.success, +.table > thead > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr > td.success, +.table > tbody > tr > th.success, +.table > tbody > tr.success > td, +.table > tbody > tr.success > th, +.table > tfoot > tr > td.success, +.table > tfoot > tr > th.success, +.table > tfoot > tr.success > td, +.table > tfoot > tr.success > th { + background-color: #5bb75b; +} + +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #4cad4c; +} + +.table > thead > tr > td.info, +.table > thead > tr > th.info, +.table > thead > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr > td.info, +.table > tbody > tr > th.info, +.table > tbody > tr.info > td, +.table > tbody > tr.info > th, +.table > tfoot > tr > td.info, +.table > tfoot > tr > th.info, +.table > tfoot > tr.info > td, +.table > tfoot > tr.info > th { + background-color: #49afcd; +} + +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #36a5c6; +} + +.table > thead > tr > td.warning, +.table > thead > tr > th.warning, +.table > thead > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr > td.warning, +.table > tbody > tr > th.warning, +.table > tbody > tr.warning > td, +.table > tbody > tr.warning > th, +.table > tfoot > tr > td.warning, +.table > tfoot > tr > th.warning, +.table > tfoot > tr.warning > td, +.table > tfoot > tr.warning > th { + background-color: #faa732; +} + +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #f99c19; +} + +.table > thead > tr > td.danger, +.table > thead > tr > th.danger, +.table > thead > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr > td.danger, +.table > tbody > tr > th.danger, +.table > tbody > tr.danger > td, +.table > tbody > tr.danger > th, +.table > tfoot > tr > td.danger, +.table > tfoot > tr > th.danger, +.table > tfoot > tr.danger > td, +.table > tfoot > tr.danger > th { + background-color: #da4f49; +} + +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #d63b34; +} + +.table-responsive { + min-height: 0.01%; + overflow-x: auto; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 13.5px; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #d3d3d3; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} + +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 18px; + font-size: 18px; + line-height: inherit; + color: #333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: 700; +} + +input[type='search'] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: none; + appearance: none; +} + +input[type='radio'], +input[type='checkbox'] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type='radio'][disabled], +input[type='radio'].disabled, +fieldset[disabled] input[type='radio'], +input[type='checkbox'][disabled], +input[type='checkbox'].disabled, +fieldset[disabled] input[type='checkbox'] { + cursor: not-allowed; +} + +input[type='file'] { + display: block; +} + +input[type='range'] { + display: block; + width: 100%; +} + +select[multiple], +select[size] { + height: auto; +} + +input[type='file']:focus, +input[type='radio']:focus, +input[type='checkbox']:focus { + outline: none; +} + +output { + display: block; + padding-top: 5px; + font-size: 12px; + line-height: 1.5; + color: #5a5a5a; +} + +.form-control { + display: block; + width: 100%; + height: 28px; + padding: 4px 8px; + font-size: 12px; + line-height: 1.5; + color: #5a5a5a; + background-color: #fff; + background-image: none; + border: 1px solid #e8e8e8; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} +.form-control:focus { + border-color: #d3d3d3; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 211, 211, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 211, 211, 0.6); +} +.form-control::-moz-placeholder { + color: #ababab; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #ababab; +} +.form-control::-webkit-input-placeholder { + color: #ababab; +} +.form-control::-ms-expand { + background-color: transparent; + border: 0; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #e8e8e8; + opacity: 1; +} +.form-control[disabled], +fieldset[disabled] .form-control { + cursor: not-allowed; +} + +textarea.form-control { + height: auto; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type='date'].form-control, + input[type='time'].form-control, + input[type='datetime-local'].form-control, + input[type='month'].form-control { + line-height: 28px; + } + input[type='date'].input-sm, + .input-group-sm > .input-group-btn > input[type='date'].btn, + .input-group-sm input[type='date'], + input[type='time'].input-sm, + .input-group-sm > .input-group-btn > input[type='time'].btn, + .input-group-sm input[type='time'], + input[type='datetime-local'].input-sm, + .input-group-sm > .input-group-btn > input[type='datetime-local'].btn, + .input-group-sm input[type='datetime-local'], + input[type='month'].input-sm, + .input-group-sm > .input-group-btn > input[type='month'].btn, + .input-group-sm input[type='month'] { + line-height: 26px; + } + input[type='date'].input-lg, + .input-group-lg > .input-group-btn > input[type='date'].btn, + .input-group-lg input[type='date'], + input[type='time'].input-lg, + .input-group-lg > .input-group-btn > input[type='time'].btn, + .input-group-lg input[type='time'], + input[type='datetime-local'].input-lg, + .input-group-lg > .input-group-btn > input[type='datetime-local'].btn, + .input-group-lg input[type='datetime-local'], + input[type='month'].input-lg, + .input-group-lg > .input-group-btn > input[type='month'].btn, + .input-group-lg input[type='month'] { + line-height: 34px; + } +} +.form-group { + margin-bottom: 30px; +} + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio.disabled label, +fieldset[disabled] .radio label, +.checkbox.disabled label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.radio label, +.checkbox label { + min-height: 18px; + padding-left: 20px; + margin-bottom: 0; + font-weight: 400; + cursor: pointer; +} + +.radio input[type='radio'], +.radio-inline input[type='radio'], +.checkbox input[type='checkbox'], +.checkbox-inline input[type='checkbox'] { + position: absolute; + margin-top: 4px \9; + margin-left: -20px; +} + +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} + +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + font-weight: 400; + vertical-align: middle; + cursor: pointer; +} +.radio-inline.disabled, +fieldset[disabled] .radio-inline, +.checkbox-inline.disabled, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} + +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} + +.form-control-static { + min-height: 30px; + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 0; +} +.form-control-static.input-lg, +.input-group-lg > .form-control-static.form-control, +.input-group-lg > .form-control-static.input-group-addon, +.input-group-lg > .input-group-btn > .form-control-static.btn, +.form-control-static.input-sm, +.input-group-sm > .form-control-static.form-control, +.input-group-sm > .form-control-static.input-group-addon, +.input-group-sm > .input-group-btn > .form-control-static.btn { + padding-right: 0; + padding-left: 0; +} + +.input-sm, +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 26px; + padding: 4px 15px; + font-size: 11px; + line-height: 1.5; + border-radius: 2px; +} + +select.input-sm, +.input-group-sm > select.form-control, +.input-group-sm > select.input-group-addon, +.input-group-sm > .input-group-btn > select.btn { + height: 26px; + line-height: 26px; +} + +textarea.input-sm, +.input-group-sm > textarea.form-control, +.input-group-sm > textarea.input-group-addon, +.input-group-sm > .input-group-btn > textarea.btn, +select[multiple].input-sm, +.input-group-sm > select[multiple].form-control, +.input-group-sm > select[multiple].input-group-addon, +.input-group-sm > .input-group-btn > select[multiple].btn { + height: auto; +} + +.form-group-sm .form-control { + height: 26px; + padding: 4px 15px; + font-size: 11px; + line-height: 1.5; + border-radius: 2px; +} +.form-group-sm select.form-control { + height: 26px; + line-height: 26px; +} +.form-group-sm textarea.form-control, +.form-group-sm select[multiple].form-control { + height: auto; +} +.form-group-sm .form-control-static { + height: 26px; + min-height: 29px; + padding: 5px 15px; + font-size: 11px; + line-height: 1.5; +} + +.input-lg, +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 34px; + padding: 6px 29px; + font-size: 15px; + line-height: 1.3333333; + border-radius: 2px; +} + +select.input-lg, +.input-group-lg > select.form-control, +.input-group-lg > select.input-group-addon, +.input-group-lg > .input-group-btn > select.btn { + height: 34px; + line-height: 34px; +} + +textarea.input-lg, +.input-group-lg > textarea.form-control, +.input-group-lg > textarea.input-group-addon, +.input-group-lg > .input-group-btn > textarea.btn, +select[multiple].input-lg, +.input-group-lg > select[multiple].form-control, +.input-group-lg > select[multiple].input-group-addon, +.input-group-lg > .input-group-btn > select[multiple].btn { + height: auto; +} + +.form-group-lg .form-control { + height: 34px; + padding: 6px 29px; + font-size: 15px; + line-height: 1.3333333; + border-radius: 2px; +} +.form-group-lg select.form-control { + height: 34px; + line-height: 34px; +} +.form-group-lg textarea.form-control, +.form-group-lg select[multiple].form-control { + height: auto; +} +.form-group-lg .form-control-static { + height: 34px; + min-height: 33px; + padding: 7px 29px; + font-size: 15px; + line-height: 1.3333333; +} + +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 35px; +} + +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + pointer-events: none; +} + +.input-lg + .form-control-feedback, +.input-group-lg > .form-control + .form-control-feedback, +.input-group-lg > .input-group-addon + .form-control-feedback, +.input-group-lg > .input-group-btn > .btn + .form-control-feedback, +.input-group-lg + .form-control-feedback, +.form-group-lg .form-control + .form-control-feedback { + width: 34px; + height: 34px; + line-height: 34px; +} + +.input-sm + .form-control-feedback, +.input-group-sm > .form-control + .form-control-feedback, +.input-group-sm > .input-group-addon + .form-control-feedback, +.input-group-sm > .input-group-btn > .btn + .form-control-feedback, +.input-group-sm + .form-control-feedback, +.form-group-sm .form-control + .form-control-feedback { + width: 26px; + height: 26px; + line-height: 26px; +} + +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline, +.has-success.radio label, +.has-success.checkbox label, +.has-success.radio-inline label, +.has-success.checkbox-inline label { + color: #5bb75b; +} +.has-success .form-control { + border-color: #5bb75b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-success .form-control:focus { + border-color: #449b44; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #a2d6a2; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #a2d6a2; +} +.has-success .input-group-addon { + color: #5bb75b; + background-color: #5bb75b; + border-color: #5bb75b; +} +.has-success .form-control-feedback { + color: #5bb75b; +} + +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline, +.has-warning.radio label, +.has-warning.checkbox label, +.has-warning.radio-inline label, +.has-warning.checkbox-inline label { + color: #faa732; +} +.has-warning .form-control { + border-color: #faa732; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-warning .form-control:focus { + border-color: #f39106; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fcd296; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fcd296; +} +.has-warning .input-group-addon { + color: #faa732; + background-color: #faa732; + border-color: #faa732; +} +.has-warning .form-control-feedback { + color: #faa732; +} + +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline, +.has-error.radio label, +.has-error.checkbox label, +.has-error.radio-inline label, +.has-error.checkbox-inline label { + color: #da4f49; +} +.has-error .form-control { + border-color: #da4f49; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-error .form-control:focus { + border-color: #c72f29; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba19e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba19e; +} +.has-error .input-group-addon { + color: #da4f49; + background-color: #da4f49; + border-color: #da4f49; +} +.has-error .form-control-feedback { + color: #da4f49; +} + +.has-feedback label ~ .form-control-feedback { + top: 23px; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} + +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; +} + +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-static { + display: inline-block; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type='radio'], + .form-inline .checkbox input[type='checkbox'] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} + +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + padding-top: 5px; + margin-top: 0; + margin-bottom: 0; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 23px; +} +.form-horizontal .form-group { + margin-right: -10px; + margin-left: -10px; +} +.form-horizontal .form-group:before, +.form-horizontal .form-group:after { + display: table; + content: ' '; +} +.form-horizontal .form-group:after { + clear: both; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + padding-top: 5px; + margin-bottom: 0; + text-align: right; + } +} +.form-horizontal .has-feedback .form-control-feedback { + right: 10px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 7px; + font-size: 15px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 5px; + font-size: 11px; + } +} + +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} +.fade.in { + opacity: 1; +} + +.collapse { + display: none; +} +.collapse.in { + display: block; +} + +tr.collapse.in { + display: table-row; +} + +tbody.collapse.in { + display: table-row-group; +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition-property: height, visibility; + transition-property: height, visibility; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; +} + +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid \9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} + +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle:focus { + outline: 0; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 12px; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid #d3d3d3; + border-radius: 2px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 8px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.5; + color: #333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + color: #fff; + text-decoration: none; + background-color: #f5f5f5; +} + +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #333; + text-decoration: none; + background-color: #f9f9f9; + outline: 0; +} + +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #838383; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: not-allowed; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} + +.dropdown-menu-right { + right: 0; + left: auto; +} + +.dropdown-menu-left { + right: auto; + left: 0; +} + +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 11px; + line-height: 1.5; + color: #838383; + white-space: nowrap; +} + +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} + +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + content: ''; + border-top: 0; + border-bottom: 4px dashed; + border-bottom: 4px solid \9; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} + +@media (min-width: 0) { + .navbar-right .dropdown-menu { + right: 0; + left: auto; + } + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn:hover, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 2; +} + +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} + +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar:before, +.btn-toolbar:after { + display: table; + content: ' '; +} +.btn-toolbar:after { + clear: both; +} +.btn-toolbar .btn, +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group > .btn-group { + float: left; +} + +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + +.btn-group > .btn + .dropdown-toggle { + padding-right: 8px; + padding-left: 8px; +} + +.btn-group > .btn-lg + .dropdown-toggle, +.btn-group-lg.btn-group > .btn + .dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} + +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} + +.btn .caret { + margin-left: 0; +} + +.btn-lg .caret, +.btn-group-lg > .btn .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} + +.dropup .btn-lg .caret, +.dropup .btn-group-lg > .btn .caret { + border-width: 0 5px 5px; +} + +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after { + display: table; + content: ' '; +} +.btn-group-vertical > .btn-group:after { + clear: both; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} + +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} + +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + display: table-cell; + float: none; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} + +[data-toggle='buttons'] > .btn input[type='radio'], +[data-toggle='buttons'] > .btn input[type='checkbox'], +[data-toggle='buttons'] > .btn-group > .btn input[type='radio'], +[data-toggle='buttons'] > .btn-group > .btn input[type='checkbox'] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} + +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*='col-'] { + float: none; + padding-right: 0; + padding-left: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group .form-control:focus { + z-index: 3; +} + +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} + +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +.input-group-addon { + padding: 4px 8px; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: #5a5a5a; + text-align: center; + background-color: #fff; + border: 1px solid #fff; + border-radius: 2px; +} +.input-group-addon.input-sm, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .input-group-addon.btn { + padding: 4px 15px; + font-size: 11px; + border-radius: 2px; +} +.input-group-addon.input-lg, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .input-group-addon.btn { + padding: 6px 29px; + font-size: 15px; + border-radius: 2px; +} +.input-group-addon input[type='radio'], +.input-group-addon input[type='checkbox'] { + margin-top: 0; +} + +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-addon:first-child { + border-right: 0; +} + +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group-addon:last-child { + border-left: 0; +} + +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + z-index: 2; + margin-left: -1px; +} + +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav:before, +.nav:after { + display: table; + content: ' '; +} +.nav:after { + clear: both; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #e8e8e8; +} +.nav > li.disabled > a { + color: #838383; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #838383; + text-decoration: none; + cursor: not-allowed; + background-color: transparent; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #e8e8e8; + border-color: #006dcc; +} +.nav .nav-divider { + height: 1px; + margin: 8px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} + +.nav-tabs { + border-bottom: 1px solid #ddd; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.5; + border: 1px solid transparent; + border-radius: 2px 2px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #e8e8e8 #e8e8e8 #ddd; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #5a5a5a; + cursor: default; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 2px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #fff; + background-color: #006dcc; +} + +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} + +.nav-justified, +.nav-tabs.nav-justified { + width: 100%; +} +.nav-justified > li, +.nav-tabs.nav-justified > li { + float: none; +} +.nav-justified > li > a, +.nav-tabs.nav-justified > li > a { + margin-bottom: 5px; + text-align: center; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li, + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a, + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} + +.nav-tabs-justified, +.nav-tabs.nav-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a, +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 2px; +} +.nav-tabs-justified > .active > a, +.nav-tabs.nav-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a, + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 2px 2px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs.nav-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #fff; + } +} + +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} + +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.navbar { + position: relative; + min-height: 35px; + margin-bottom: 18px; + border: 1px solid transparent; +} +.navbar:before, +.navbar:after { + display: table; + content: ' '; +} +.navbar:after { + clear: both; +} +@media (min-width: 0) { + .navbar { + border-radius: 2px; + } +} + +.navbar-header:before, +.navbar-header:after { + display: table; + content: ' '; +} +.navbar-header:after { + clear: both; +} +@media (min-width: 0) { + .navbar-header { + float: left; + } +} + +.navbar-collapse { + padding-right: 10px; + padding-left: 10px; + overflow-x: visible; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-overflow-scrolling: touch; +} +.navbar-collapse:before, +.navbar-collapse:after { + display: table; + content: ' '; +} +.navbar-collapse:after { + clear: both; +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 0) { + .navbar-collapse { + width: auto; + border-top: 0; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-right: 0; + padding-left: 0; + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-device-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +@media (min-width: 0) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} + +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} + +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} + +.container > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-header, +.container-fluid > .navbar-collapse { + margin-right: -10px; + margin-left: -10px; +} +@media (min-width: 0) { + .container > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-header, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} + +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 0) { + .navbar-static-top { + border-radius: 0; + } +} + +.navbar-brand { + float: left; + height: 35px; + padding: 8.5px 10px; + font-size: 15px; + line-height: 18px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +.navbar-brand > img { + display: block; +} +@media (min-width: 0) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -10px; + } +} + +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-right: 10px; + margin-top: 0.5px; + margin-bottom: 0.5px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 2px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 0) { + .navbar-toggle { + display: none; + } +} + +.navbar-nav { + margin: 4.25px -10px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 18px; +} +@media (max-width: -1) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 18px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 0) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 8.5px; + padding-bottom: 8.5px; + } +} + +.navbar-form { + padding: 10px 10px; + margin-right: -10px; + margin-left: -10px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + margin-top: 3.5px; + margin-bottom: 3.5px; +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .form-control-static { + display: inline-block; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type='radio'], + .navbar-form .checkbox input[type='checkbox'] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: -1) { + .navbar-form .form-group { + margin-bottom: 5px; + } + .navbar-form .form-group:last-child { + margin-bottom: 0; + } +} +@media (min-width: 0) { + .navbar-form { + width: auto; + padding-top: 0; + padding-bottom: 0; + margin-right: 0; + margin-left: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } +} + +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.navbar-btn { + margin-top: 3.5px; + margin-bottom: 3.5px; +} +.navbar-btn.btn-sm, +.btn-group-sm > .navbar-btn.btn { + margin-top: 4.5px; + margin-bottom: 4.5px; +} +.navbar-btn.btn-xs, +.btn-group-xs > .navbar-btn.btn { + margin-top: 6.5px; + margin-bottom: 6.5px; +} + +.navbar-text { + margin-top: 8.5px; + margin-bottom: 8.5px; +} +@media (min-width: 0) { + .navbar-text { + float: left; + margin-right: 10px; + margin-left: 10px; + } +} + +@media (min-width: 0) { + .navbar-left { + float: left !important; + } + + .navbar-right { + float: right !important; + margin-right: -10px; + } + .navbar-right ~ .navbar-right { + margin-right: 0; + } +} +.navbar-default { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navbar-default .navbar-brand { + color: #777; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #777; +} +.navbar-default .navbar-nav > li > a { + color: #777; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #333; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #555; + background-color: #e7e7e7; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #ccc; + background-color: transparent; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + color: #555; + background-color: #e7e7e7; +} +@media (max-width: -1) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #777; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #333; + background-color: transparent; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #555; + background-color: #e7e7e7; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #ccc; + background-color: transparent; + } +} +.navbar-default .navbar-toggle { + border-color: #ddd; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #ddd; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #888; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #e7e7e7; +} +.navbar-default .navbar-link { + color: #777; +} +.navbar-default .navbar-link:hover { + color: #333; +} +.navbar-default .btn-link { + color: #777; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #333; +} +.navbar-default .btn-link[disabled]:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:hover, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #ccc; +} + +.navbar-inverse { + background-color: #222; + border-color: #090909; +} +.navbar-inverse .navbar-brand { + color: darkgray; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-text { + color: darkgray; +} +.navbar-inverse .navbar-nav > li > a { + color: darkgray; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #fff; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #fff; + background-color: #090909; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #444; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: #fff; + background-color: #090909; +} +@media (max-width: -1) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: darkgray; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #fff; + background-color: transparent; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #fff; + background-color: #090909; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #444; + background-color: transparent; + } +} +.navbar-inverse .navbar-toggle { + border-color: #333; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #fff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} +.navbar-inverse .navbar-link { + color: darkgray; +} +.navbar-inverse .navbar-link:hover { + color: #fff; +} +.navbar-inverse .btn-link { + color: darkgray; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #fff; +} +.navbar-inverse .btn-link[disabled]:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:hover, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #444; +} + +.label { + display: inline; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} + +a.label:hover, +a.label:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} + +.label-default { + background-color: #838383; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #6a6a6a; +} + +.label-primary { + background-color: #006dcc; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #005299; +} + +.label-success { + background-color: #5bb75b; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449b44; +} + +.label-info { + background-color: #49afcd; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #3195b2; +} + +.label-warning { + background-color: #faa732; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #f39106; +} + +.label-danger { + background-color: #da4f49; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c72f29; +} + +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 11px; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background-color: #838383; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge, +.btn-group-xs > .btn .badge { + top: 0; + padding: 1px 5px; +} +.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #006dcc; + background-color: #fff; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} + +a.badge:hover, +a.badge:focus { + color: #fff; + text-decoration: none; + cursor: pointer; +} + +.alert { + padding: 15px; + margin-bottom: 18px; + border: 1px solid transparent; + border-radius: 2px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} + +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} + +.alert-success { + color: #5bb75b; + background-color: #5bb75b; + border-color: #31a549; +} +.alert-success hr { + border-top-color: #2b9140; +} +.alert-success .alert-link { + color: #449b44; +} + +.alert-info { + color: #49afcd; + background-color: #49afcd; + border-color: #0492ba; +} +.alert-info hr { + border-top-color: #037ea1; +} +.alert-info .alert-link { + color: #3195b2; +} + +.alert-warning { + color: #faa732; + background-color: #faa732; + border-color: #f8951d; +} +.alert-warning hr { + border-top-color: #f48908; +} +.alert-warning .alert-link { + color: #f39106; +} + +.alert-danger { + color: #da4f49; + background-color: #da4f49; + border-color: #d5382e; +} +.alert-danger hr { + border-top-color: #c23027; +} +.alert-danger .alert-link { + color: #c72f29; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + height: 18px; + margin-bottom: 18px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 11px; + line-height: 18px; + color: #fff; + text-align: center; + background-color: #006dcc; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-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-image: -o-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-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: 40px 40px; +} + +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +.progress-bar-success { + background-color: #5bb75b; +} +.progress-striped .progress-bar-success { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-info { + background-color: #49afcd; +} +.progress-striped .progress-bar-info { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-warning { + background-color: #faa732; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.progress-bar-danger { + background-color: #da4f49; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-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-image: -o-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-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 + ); +} + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} + +.well-lg { + padding: 24px; + border-radius: 2px; +} + +.well-sm { + padding: 9px; + border-radius: 2px; +} + +.close { + float: right; + font-size: 18px; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; +} +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; +} + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + appearance: none; +} + +.modal-open { + overflow: hidden; +} + +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); + transform: translate(0, -25%); + -webkit-transition: -webkit-transform 0.3s ease-out; + -moz-transition: -moz-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + transition: transform 0.3s ease-out; +} +.modal.in .modal-dialog { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +.modal-content { + position: relative; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid transparent; + border-radius: 2px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + outline: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #5a5a5a; +} +.modal-backdrop.fade { + filter: alpha(opacity=0); + opacity: 0; +} +.modal-backdrop.in { + filter: alpha(opacity=80); + opacity: 0.8; +} + +.modal-header { + padding: 15px; + border-bottom: 1px solid #e8e8e8; +} +.modal-header:before, +.modal-header:after { + display: table; + content: ' '; +} +.modal-header:after { + clear: both; +} + +.modal-header .close { + margin-top: -2px; +} + +.modal-title { + margin: 0; + line-height: 1.5; +} + +.modal-body { + position: relative; + padding: 30px; +} + +.modal-footer { + padding: 30px; + text-align: right; + border-top: 1px solid #e8e8e8; +} +.modal-footer:before, +.modal-footer:after { + display: table; + content: ' '; +} +.modal-footer:after { + clear: both; +} +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 768px) { + .modal-dialog { + width: 700px; + margin: 30px auto; + } + + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + } + + .modal-sm { + width: 525px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 940px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: Roboto, Helvetica, sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + line-break: auto; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + white-space: normal; + font-size: 11px; + filter: alpha(opacity=0); + opacity: 0; +} +.tooltip.in { + filter: alpha(opacity=90); + opacity: 0.9; +} +.tooltip.top { + padding: 5px 0; + margin-top: -3px; +} +.tooltip.right { + padding: 0 5px; + margin-left: 3px; +} +.tooltip.bottom { + padding: 5px 0; + margin-top: 3px; +} +.tooltip.left { + padding: 0 5px; + margin-left: -3px; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-left .tooltip-arrow { + right: 5px; + bottom: 0; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000; +} + +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #fff; + text-align: center; + background-color: #000; + border-radius: 2px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner > .item { + position: relative; + display: none; + -webkit-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + max-width: 100%; + height: auto; + line-height: 1; +} +@media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .item { + -webkit-transition: -webkit-transform 0.6s ease-in-out; + -moz-transition: -moz-transform 0.6s ease-in-out; + -o-transition: -o-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + } + .carousel-inner > .item.next, + .carousel-inner > .item.active.right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + left: 0; + } + .carousel-inner > .item.prev, + .carousel-inner > .item.active.left { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + left: 0; + } + .carousel-inner > .item.next.left, + .carousel-inner > .item.prev.right, + .carousel-inner > .item.active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + left: 0; + } +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15%; + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0); + filter: alpha(opacity=50); + opacity: 0.5; +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#80000000", endColorstr="#00000000", GradientType=1); + background-repeat: repeat-x; +} +.carousel-control.right { + right: 0; + left: auto; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#80000000", GradientType=1); + background-repeat: repeat-x; +} +.carousel-control:hover, +.carousel-control:focus { + color: #fff; + text-decoration: none; + outline: 0; + filter: alpha(opacity=90); + opacity: 0.9; +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + margin-top: -10px; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + font-family: serif; + line-height: 1; +} +.carousel-control .icon-prev:before { + content: '‹'; +} +.carousel-control .icon-next:before { + content: '›'; +} + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); + border: 1px solid #fff; + border-radius: 10px; +} +.carousel-indicators .active { + width: 12px; + height: 12px; + margin: 0; + background-color: #fff; +} + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); +} +.carousel-caption .btn { + text-shadow: none; +} + +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -10px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -10px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -10px; + } + + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; + } + + .carousel-indicators { + bottom: 20px; + } +} +.clearfix:before, +.clearfix:after { + display: table; + content: ' '; +} +.clearfix:after { + clear: both; +} + +.center-block { + display: block; + margin-right: auto; + margin-left: auto; +} + +.pull-right { + float: right !important; +} + +.pull-left { + float: left !important; +} + +.hide { + display: none !important; +} + +.show { + display: block !important; +} + +.invisible { + visibility: hidden; +} + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.hidden { + display: none !important; +} + +.affix { + position: fixed; +} + +.checkbox label, +.radio label, +.radiogroup-stacked label { + font-weight: 400; + padding-top: 1px; +} +.checkbox .icheckbox, +.radio .icheckbox, +.radiogroup-stacked .icheckbox { + margin-left: -20px; +} +.checkbox .icheckbox > input, +.radio .icheckbox > input, +.radiogroup-stacked .icheckbox > input { + margin-left: 0; +} +.checkbox > .icheckbox, +.checkbox > .iradio, +.radio > .icheckbox, +.radio > .iradio, +.radiogroup-stacked > .icheckbox, +.radiogroup-stacked > .iradio { + margin-left: 0; +} +.checkbox > input[type='checkbox'], +.checkbox > input[type='radio'], +.radio > input[type='checkbox'], +.radio > input[type='radio'], +.radiogroup-stacked > input[type='checkbox'], +.radiogroup-stacked > input[type='radio'] { + margin-left: 0; +} + +input[type='checkbox'], +input[type='radio'] { + width: 16px; + height: 16px; + margin-top: 0; +} + +.icheckbox + span, +.iradio + span { + font-weight: 400; +} +.icheckbox:not(.disabled) + span, +.iradio:not(.disabled) + span { + cursor: pointer; +} + +.form-horizontal .control-label { + text-align: left; +} +.form-horizontal .checkbox { + padding-top: 3px; + min-height: 16px; +} +.form-group .help-block { + margin-bottom: 0; +} +.form-group label { + font-weight: 700; +} +.form-group .checkbox label { + font-weight: 400; +} +.form-control, +.form-control:focus { + box-shadow: none; +} +.form-control:focus { + outline: 0; +} +.form-control, +.form-control-static { + font-weight: 400; +} +.form-btn-footer { + text-align: right; +} + +fieldset { + border-bottom: 1px solid #f3f3f3; + margin-bottom: 30px; +} +fieldset.borderless { + border-bottom: 0; + margin-bottom: 0; +} + +label { + color: #5a5a5a; +} + +.input-group { + display: flex; +} + +.input-group-addon { + font-weight: 400; + padding: 4px 5px; +} +.input-group-addon:first-child { + padding-left: 0; +} +.input-group-addon:last-child { + padding-right: 0; +} + +.help-block { + color: #ababab; + font-weight: 400; + margin-top: 8px; +} + +.form-horizontal .control-label .help-block { + margin-top: 1px; +} + +.borderedwell-component .form-horizontal { + padding: 30px 30px 0; +} + +.modal { + font-weight: 400; +} +.modal-title { + font-weight: 700; +} +.modal-content { + border-radius: 0; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); +} +.modal-body { + overflow: auto; +} +.modal-header, +.modal-footer { + height: 40px; +} +.modal-header { + background-color: #f3f3f3; + padding: 10px 15px; +} +.modal-header > .close { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 11.3L7.3 8 4.1 4.7l.8-.7L8 7.2 11.1 4l.7.7-3.1 3.2 3.3 3.3-.7.8L8 8.7 4.7 12l-.7-.7z'/%3E%3C/svg%3E"); + background-position: center; + background-size: 20px; + height: 20px; + margin-right: -5px; + margin-top: 0; + width: 20px; +} +.modal-header > .close > span { + display: none; +} +.modal-footer { + padding: 6px; +} +.modal-footer > .pull-left { + float: left; +} +.modal-footer > label { + font-weight: 400; + color: #838383; + margin-bottom: 0; + line-height: 28px; +} +.modal-footer > label.pull-left { + padding: 0 9px; +} +.modal-footer > label.pull-left > input { + margin-right: 6px; +} +.modal-instruction > p { + margin-bottom: 25px; +} +.modal-instruction > strong { + display: block; + margin-bottom: 5px; +} + +.nav-tabs { + margin-bottom: 0; + min-height: 35px; +} +.nav-tabs > li { + background-color: #f9f9f9; + border-left: 1px solid #e8e8e8; + border-top: 1px solid #e8e8e8; + display: inline-block; + font-size: 12px; + margin-bottom: -1px; + margin-right: 0; + padding: 0; + text-align: center; +} +.nav-tabs > li > a { + color: #838383; + cursor: pointer; + display: inline-block; + font-weight: 400; + margin-right: 0; + padding: 8px 15px 7px; + text-shadow: none; + user-select: none; + white-space: nowrap; +} +.nav-tabs > li > a, +.nav-tabs > li > a:hover, +.nav-tabs > li > a:focus { + border: 0; + outline: 0; +} +.nav-tabs > li > a .aui--svg-symbol-component { + vertical-align: top; +} +.nav-tabs > li > a .icon { + float: left; + height: 16px; + width: 16px; +} +.nav-tabs > li.active, +.nav-tabs > li.active:hover, +.nav-tabs > li.active:focus { + background-color: #fff; + border: 0; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border-right: 0; + cursor: default; +} +.nav-tabs > li:last-child, +.nav-tabs > li:last-child:hover, +.nav-tabs > li:last-child:focus { + border-right: 1px solid #e8e8e8; +} +.nav-tabs .flexible-wrapper-inline > .flexible-spacer-component { + min-width: 8px; +} + +body { + color: #5a5a5a; +} + +b, +strong { + font-weight: 700; +} diff --git a/src/styles/bootstrapOverrides/Checkbox.css b/src/styles/bootstrapOverrides/Checkbox.css new file mode 100644 index 000000000..6ab269b81 --- /dev/null +++ b/src/styles/bootstrapOverrides/Checkbox.css @@ -0,0 +1,48 @@ +.checkbox label, +.radio label, +.radiogroup-stacked label { + font-weight: 400; + padding-top: 1px; +} +.checkbox .icheckbox, +.radio .icheckbox, +.radiogroup-stacked .icheckbox { + margin-left: -20px; +} +.checkbox .icheckbox > input, +.radio .icheckbox > input, +.radiogroup-stacked .icheckbox > input { + margin-left: 0; +} +.checkbox > .icheckbox, +.checkbox > .iradio, +.radio > .icheckbox, +.radio > .iradio, +.radiogroup-stacked > .icheckbox, +.radiogroup-stacked > .iradio { + margin-left: 0; +} +.checkbox > input[type='checkbox'], +.checkbox > input[type='radio'], +.radio > input[type='checkbox'], +.radio > input[type='radio'], +.radiogroup-stacked > input[type='checkbox'], +.radiogroup-stacked > input[type='radio'] { + margin-left: 0; +} + +input[type='checkbox'], +input[type='radio'] { + width: 16px; + height: 16px; + margin-top: 0; +} + +.icheckbox + span, +.iradio + span { + font-weight: 400; +} +.icheckbox:not(.disabled) + span, +.iradio:not(.disabled) + span { + cursor: pointer; +} diff --git a/src/styles/bootstrapOverrides/Form.css b/src/styles/bootstrapOverrides/Form.css new file mode 100644 index 000000000..73c91c5ac --- /dev/null +++ b/src/styles/bootstrapOverrides/Form.css @@ -0,0 +1,72 @@ +.form-horizontal .control-label { + text-align: left; +} +.form-horizontal .checkbox { + padding-top: 3px; + min-height: 16px; +} +.form-group .help-block { + margin-bottom: 0; +} +.form-group label { + font-weight: 700; +} +.form-group .checkbox label { + font-weight: 400; +} +.form-control, +.form-control:focus { + box-shadow: none; +} +.form-control:focus { + outline: 0; +} +.form-control, +.form-control-static { + font-weight: 400; +} +.form-btn-footer { + text-align: right; +} + +fieldset { + border-bottom: 1px solid #f3f3f3; + margin-bottom: 30px; +} +fieldset.borderless { + border-bottom: 0; + margin-bottom: 0; +} + +label { + color: #5a5a5a; +} + +.input-group { + display: flex; +} + +.input-group-addon { + font-weight: 400; + padding: 4px 5px; +} +.input-group-addon:first-child { + padding-left: 0; +} +.input-group-addon:last-child { + padding-right: 0; +} + +.help-block { + color: #ababab; + font-weight: 400; + margin-top: 8px; +} + +.form-horizontal .control-label .help-block { + margin-top: 1px; +} + +.borderedwell-component .form-horizontal { + padding: 30px 30px 0; +} diff --git a/src/styles/bootstrapOverrides/Modal.css b/src/styles/bootstrapOverrides/Modal.css new file mode 100644 index 000000000..3960d208f --- /dev/null +++ b/src/styles/bootstrapOverrides/Modal.css @@ -0,0 +1,58 @@ +.modal { + font-weight: 400; +} +.modal-title { + font-weight: 700; +} +.modal-content { + border-radius: 0; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); +} +.modal-body { + overflow: auto; +} +.modal-header, +.modal-footer { + height: 40px; +} +.modal-header { + background-color: #f3f3f3; + padding: 10px 15px; +} +.modal-header > .close { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 11.3L7.3 8 4.1 4.7l.8-.7L8 7.2 11.1 4l.7.7-3.1 3.2 3.3 3.3-.7.8L8 8.7 4.7 12l-.7-.7z'/%3E%3C/svg%3E"); + background-position: center; + background-size: 20px; + height: 20px; + margin-right: -5px; + margin-top: 0; + width: 20px; +} +.modal-header > .close > span { + display: none; +} +.modal-footer { + padding: 6px; +} +.modal-footer > .pull-left { + float: left; +} +.modal-footer > label { + font-weight: 400; + color: #838383; + margin-bottom: 0; + line-height: 28px; +} +.modal-footer > label.pull-left { + padding: 0 9px; +} +.modal-footer > label.pull-left > input { + margin-right: 6px; +} +.modal-instruction > p { + margin-bottom: 25px; +} +.modal-instruction > strong { + display: block; + margin-bottom: 5px; +} diff --git a/src/styles/bootstrapOverrides/Nav.css b/src/styles/bootstrapOverrides/Nav.css new file mode 100644 index 000000000..62a578312 --- /dev/null +++ b/src/styles/bootstrapOverrides/Nav.css @@ -0,0 +1,60 @@ +.nav-tabs { + margin-bottom: 0; + min-height: 35px; +} +.nav-tabs > li { + background-color: #f9f9f9; + border-left: 1px solid #e8e8e8; + border-top: 1px solid #e8e8e8; + display: inline-block; + font-size: 12px; + margin-bottom: -1px; + margin-right: 0; + padding: 0; + text-align: center; +} +.nav-tabs > li > a { + color: #838383; + cursor: pointer; + display: inline-block; + font-weight: 400; + margin-right: 0; + padding: 8px 15px 7px; + text-shadow: none; + user-select: none; + white-space: nowrap; +} +.nav-tabs > li > a, +.nav-tabs > li > a:hover, +.nav-tabs > li > a:focus { + border: 0; + outline: 0; +} +.nav-tabs > li > a .aui--svg-symbol-component { + vertical-align: top; +} +.nav-tabs > li > a .icon { + float: left; + height: 16px; + width: 16px; +} +.nav-tabs > li.active, +.nav-tabs > li.active:hover, +.nav-tabs > li.active:focus { + background-color: #fff; + border: 0; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border-right: 0; + cursor: default; +} +.nav-tabs > li:last-child, +.nav-tabs > li:last-child:hover, +.nav-tabs > li:last-child:focus { + border-right: 1px solid #e8e8e8; +} +.nav-tabs .flexible-wrapper-inline > .flexible-spacer-component { + min-width: 8px; +} diff --git a/src/styles/border.css b/src/styles/border.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/color.css b/src/styles/color.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/font-size.css b/src/styles/font-size.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/font-weight.css b/src/styles/font-weight.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/function.css b/src/styles/function.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/icheck-custom.css b/src/styles/icheck-custom.css new file mode 100644 index 000000000..6e7c2ac08 --- /dev/null +++ b/src/styles/icheck-custom.css @@ -0,0 +1,62 @@ +.radiogroup-stacked > label { + display: block; +} + +.form-group .radiogroup-stacked { + padding-top: 3px; +} + +.icheckbox, +.iradio { + background-repeat: no-repeat; + border: 0; + cursor: pointer; + display: inline-block; + height: 16px; + position: relative; + vertical-align: middle; + width: 16px; +} +.icheckbox + span, +.iradio + span { + margin: 0 5px; + vertical-align: middle; +} + +.icheckbox { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect y='0' fill='none' width='16' height='16'/%3E%3Cpath fill='%23FFFFFF' d='M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z'/%3E%3Cpath fill='%23D3D3D3' d='M12 2c1.1 0 2 0.9 2 2v8c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H12M12 1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4C15 2.3 13.7 1 12 1L12 1z'/%3E%3C/svg%3E"); +} +.icheckbox.hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M0 0h16v16H0z'/%3E%3Cpath fill='%234AAFCD' d='M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z'/%3E%3C/svg%3E"); +} +.icheckbox.checked { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M0 0h16v16H0z'/%3E%3Cpath fill='%234AAFCD' d='M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z'/%3E%3Cpath fill='%23FFF' d='M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z'/%3E%3C/svg%3E"); +} +.icheckbox.disabled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M0 0h16v16H0z'/%3E%3Cpath fill='%23FFF' d='M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z'/%3E%3Cpath fill='%23F1F2F2' d='M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z'/%3E%3C/svg%3E"); +} +.icheckbox.disabled, +.icheckbox.disabled.checked { + cursor: default; +} +.icheckbox.disabled.checked { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F1F2F2' d='M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z'/%3E%3Cpath fill='%23E6E7E8' d='M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z'/%3E%3C/svg%3E"); +} + +.iradio, +.iradio.hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z'/%3E%3Cpath fill='%23D3D3D3' d='M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z'/%3E%3C/svg%3E"); +} +.iradio.checked { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z'/%3E%3Cpath fill='%234AAFCD' d='M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z'/%3E%3Cpath fill='%234AAFCD' d='M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z'/%3E%3C/svg%3E"); +} +.iradio.disabled { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M0 0h16v16'/%3E%3Ccircle fill='%23D3D3D3' cx='8' cy='8' r='6.6'/%3E%3C/svg%3E"); +} +.iradio.disabled, +.iradio.disabled.checked { + cursor: default; +} +.iradio.disabled.checked { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z'/%3E%3Cpath fill='%23D3D3D3' d='M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z'/%3E%3Cpath fill='%23D3D3D3' d='M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z'/%3E%3C/svg%3E"); +} diff --git a/src/styles/icon.css b/src/styles/icon.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/mixin.css b/src/styles/mixin.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/mixins/dataUriEncoder.css b/src/styles/mixins/dataUriEncoder.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/mixins/inputStyles.css b/src/styles/mixins/inputStyles.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/variable.css b/src/styles/variable.css new file mode 100644 index 000000000..e69de29bb diff --git a/www/containers/App.jsx b/www/containers/App.jsx index bf8e5e09c..951d418cf 100644 --- a/www/containers/App.jsx +++ b/www/containers/App.jsx @@ -7,7 +7,7 @@ import CodeBlock from './CodeBlock'; import Props from './Props.jsx'; import DesignNotes from './DesignNotes.jsx'; -import './styles.scss'; +import './styles.css'; const components = { pre: (props) =>
, diff --git a/www/containers/Documentation.jsx b/www/containers/Documentation.jsx index cf794b24e..d0c4ceb06 100644 --- a/www/containers/Documentation.jsx +++ b/www/containers/Documentation.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import PropTypeTable from './components/PropTypeTable'; import { InformationBox } from '../../src'; -import './styles.scss'; +import './styles.css'; import CodeBlock from './CodeBlock'; class Documentation extends React.PureComponent { diff --git a/www/containers/components/Header/index.jsx b/www/containers/components/Header/index.jsx index 55be2f7ce..c2e969ebb 100644 --- a/www/containers/components/Header/index.jsx +++ b/www/containers/components/Header/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { PageTitle, Popover } from '../../../../src'; -import './styles.scss'; +import './styles.css'; import Contributors from './Contributors'; diff --git a/www/containers/components/Header/styles.css b/www/containers/components/Header/styles.css new file mode 100644 index 000000000..2a92e0f66 --- /dev/null +++ b/www/containers/components/Header/styles.css @@ -0,0 +1,35 @@ +.adslot-ui-header > .pagetitle-component { + background: #fff; +} +.adslot-ui-header > .pagetitle-component .header-link { + color: #000; + font-size: 24px; + font-weight: 900; + text-decoration: none; + cursor: pointer; + margin-right: 15px; +} +.adslot-ui-header > .pagetitle-component .header-right-pane { + display: flex; + width: 300px; + justify-content: space-between; + align-items: center; +} +.adslot-ui-header > .pagetitle-component .adslot-icon { + height: 32px; + width: 32px; +} +.adslot-ui-header > .pagetitle-component .aui--svg-symbol-component-contributors { + width: 32px; + height: 32px; +} + +.adslot-ui-contributors-panel .aui--action-panel-body { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +.adslot-ui-contributors-panel .aui--action-panel-body .aui--popover-element { + margin: 10px; +} diff --git a/www/containers/components/PropTypeTable/index.jsx b/www/containers/components/PropTypeTable/index.jsx index bae2e4793..4f9dba944 100644 --- a/www/containers/components/PropTypeTable/index.jsx +++ b/www/containers/components/PropTypeTable/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Empty } from '../../../../src'; -import './styles.scss'; +import './styles.css'; class PropTypeTable extends React.PureComponent { render() { diff --git a/www/containers/components/PropTypeTable/styles.css b/www/containers/components/PropTypeTable/styles.css new file mode 100644 index 000000000..accb27b97 --- /dev/null +++ b/www/containers/components/PropTypeTable/styles.css @@ -0,0 +1,28 @@ +@charset "UTF-8"; +.adslot-ui-proptype-table { + max-width: 1100px; +} +.adslot-ui-proptype-table + .adslot-ui-proptype-table { + margin-top: 30px; +} +.adslot-ui-proptype-table table + .empty-component { + padding: 0; +} +.adslot-ui-proptype-table table tr th.col-prop-type { + width: 10%; +} +.adslot-ui-proptype-table table tr th.col-type { + width: 15%; +} +.adslot-ui-proptype-table table tr th.col-default-value { + width: 25%; +} +.adslot-ui-proptype-table table tr th.col-notes { + width: 50%; +} +.adslot-ui-proptype-table table tr td:empty::before { + content: '—'; +} +.adslot-ui-proptype-table table tr td pre { + white-space: pre-wrap; +} diff --git a/www/containers/components/SearchBar/index.jsx b/www/containers/components/SearchBar/index.jsx index 1bb538aea..d1316bee4 100644 --- a/www/containers/components/SearchBar/index.jsx +++ b/www/containers/components/SearchBar/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Search } from '../../../../src'; -import './styles.scss'; +import './styles.css'; const SearchBarComponent = ({ onSearch }) => ( onSearch(value.trim())} /> diff --git a/www/containers/components/SearchBar/styles.css b/www/containers/components/SearchBar/styles.css new file mode 100644 index 000000000..1b5274db8 --- /dev/null +++ b/www/containers/components/SearchBar/styles.css @@ -0,0 +1,3 @@ +.adslot-ui-searchbar { + margin-bottom: 30px; +} diff --git a/www/containers/styles.css b/www/containers/styles.css new file mode 100644 index 000000000..e2086a414 --- /dev/null +++ b/www/containers/styles.css @@ -0,0 +1,193 @@ +body { + font-family: Roboto, Helvetica, sans-serif; + margin: 0; +} + +.tag-component-accent.accent-positive { + border-color: #5bb75b; +} +.tag-component-accent.accent-positive:not(.tag-component-inverse) { + background-color: #5bb75b; +} +.tag-component-accent.accent-positive.tag-component-inverse { + color: #5bb75b; + fill: #5bb75b; +} + +.tag-component-accent.accent-pending { + border-color: #faa732; +} +.tag-component-accent.accent-pending:not(.tag-component-inverse) { + background-color: #faa732; +} +.tag-component-accent.accent-pending.tag-component-inverse { + color: #faa732; + fill: #faa732; +} + +.tag-component-accent.accent-negative { + border-color: #da4f49; +} +.tag-component-accent.accent-negative:not(.tag-component-inverse) { + background-color: #da4f49; +} +.tag-component-accent.accent-negative.tag-component-inverse { + color: #da4f49; + fill: #da4f49; +} + +.adslot-ui-layout .adslot-ui-header { + position: fixed; + width: 100%; + z-index: 1020; +} +.adslot-ui-layout .adslot-ui-body { + display: flex; + flex-direction: row; + padding: 72px 12px 0; +} +.adslot-ui-layout .grid { + display: flex; + flex-direction: row; +} +.adslot-ui-layout .grid-small { + grid-gap: 6px; +} +.adslot-ui-layout .grid-medium { + grid-gap: 12px; +} +.adslot-ui-layout .grid-large { + grid-gap: 18px; +} + +.adslot-ui-sidebar-area { + margin-right: 30px; + flex: 0 1 1; + border-right: 1px solid #e8e8e8; + width: 240px; + padding: 12px; + z-index: 1020; + height: calc(100% - 72px); + position: fixed; + overflow: scroll; +} +.adslot-ui-sidebar-area .panel-component-content { + padding: 10px 0; +} +.adslot-ui-sidebar-area .panel-component-content .aui--docs-panel-list { + color: unset; + display: block; + padding: 10px 20px; + cursor: pointer; + text-decoration: none; +} +.adslot-ui-sidebar-area .panel-component-content .aui--docs-panel-list.is-active { + background-color: #e8e8e8; +} + +.adslot-ui-content-area { + margin-left: 270px; + padding-top: 30px; + max-width: 1200px; + padding-bottom: 100px; +} +.adslot-ui-content-area .svg-icon .aui--popover-element.btn-popover-reason { + display: flex; +} +.adslot-ui-content-area .svg-icon .aui--popover-element.btn-popover-reason > div { + display: flex; +} +.adslot-ui-content-area .aui--docs-code-error { + border: 1px solid; + padding: 10px; + background: #f9b7b0; + color: #da4f49; +} +.adslot-ui-content-area .aui--docs-note-panel, +.adslot-ui-content-area .aui--docs-ui-proptype-table { + margin-top: 10px; +} +.adslot-ui-content-area .aui--docs-method-block { + border: 1px solid #e8e8e8; + margin-bottom: 20px; +} +.adslot-ui-content-area .aui--docs-method-block .aui--docs-method-details { + padding: 10px; +} +.adslot-ui-content-area .aui--docs-method-block .table { + margin-bottom: 0; +} +.adslot-ui-content-area .aui--docs-note-panel .text-blue { + color: #006dcc; +} +.adslot-ui-content-area .aui--docs-note-panel .text-cyan { + color: #49afcd; +} +.adslot-ui-content-area .aui--docs-note-panel .text-green { + color: #5bb75b; +} +.adslot-ui-content-area .aui--docs-note-panel .text-gray-light { + color: #d3d3d3; +} +.adslot-ui-content-area .aui--docs-note-panel .text-gray-dark { + color: #838383; +} +.adslot-ui-content-area .aui--docs-note-panel .text-red { + color: #da4f49; +} +.adslot-ui-content-area .aui--docs-note-panel .text-orange { + color: #faa732; +} +.adslot-ui-content-area .aui--docs-note-panel .text-bold { + font-weight: 700; +} +.adslot-ui-content-area .aui--docs-static-markup { + display: flex; + margin-bottom: 50px; + width: 300px; +} +.adslot-ui-content-area .aui--docs-static-markup .aui--overlay-loader { + z-index: 1; + position: inherit; +} +.adslot-ui-content-area .aui--docs-static-markup .aui--overlay-loader .loader { + position: inherit; +} +.adslot-ui-content-area .aui--docs-static-markup .aui--overlay-loader + .aui--overlay-loader { + margin-right: 10px; +} +.adslot-ui-content-area .intro-page-box { + height: 150px; + border-radius: 5%; + width: 350px; + display: flex; + align-items: center; + text-align: center; +} +.adslot-ui-content-area .intro-page-box .information-box-text { + padding-left: 0; +} +.adslot-ui-content-area .intro-page-box .aui--svg-symbol-component-box-icon { + height: 100px; + width: 100px; +} +.adslot-ui-content-area .intro-page-box-heading { + padding-top: 15px; + padding-bottom: 15px; + font-size: 18px; + font-weight: 700; +} +.adslot-ui-content-area .intro-page-box-description { + width: 350px; + margin-bottom: 15px; +} +.adslot-ui-content-area .page-not-found { + width: 70vw; + display: flex; + flex-direction: column; + align-items: center; +} +.adslot-ui-content-area .page-not-found .aui--svg-symbol-component-not-found-icon { + height: 160px; + width: 160px; +} diff --git a/www/examples/styles.css b/www/examples/styles.css new file mode 100644 index 000000000..a6c68cee7 --- /dev/null +++ b/www/examples/styles.css @@ -0,0 +1,246 @@ +.tag-component-accent.accent-positive { + border-color: #5bb75b; +} +.tag-component-accent.accent-positive:not(.tag-component-inverse) { + background-color: #5bb75b; +} +.tag-component-accent.accent-positive.tag-component-inverse { + color: #5bb75b; + fill: #5bb75b; +} + +.tag-component-accent.accent-pending { + border-color: #faa732; +} +.tag-component-accent.accent-pending:not(.tag-component-inverse) { + background-color: #faa732; +} +.tag-component-accent.accent-pending.tag-component-inverse { + color: #faa732; + fill: #faa732; +} + +.tag-component-accent.accent-negative { + border-color: #da4f49; +} +.tag-component-accent.accent-negative:not(.tag-component-inverse) { + background-color: #da4f49; +} +.tag-component-accent.accent-negative.tag-component-inverse { + color: #da4f49; + fill: #da4f49; +} + +.adslot-ui-example-container.alert-input-example .adslot-ui-example { + display: flex; + flex-direction: column; + width: 270px; +} +.adslot-ui-example-container.alert-input-example .adslot-ui-example .flexible-spacer-component { + height: 12px; + border: 0; +} +.adslot-ui-example-container.alert-input-example .adslot-ui-example .adslot-ui-example__options { + display: flex; + margin-bottom: 6px; +} +.adslot-ui-example-container.button-example .adslot-ui-example { + display: flex; +} +.adslot-ui-example-container.button-example .adslot-ui-example .aui--popover-element { + margin-right: 12px; +} +.adslot-ui-example-container.accordion-panel-example .adslot-ui-example, +.adslot-ui-example-container.card-example .adslot-ui-example { + width: 240px; +} +.adslot-ui-example-container.file-picker-example .adslot-ui-example, +.adslot-ui-example-container.text-ellipsis-example .adslot-ui-example, +.adslot-ui-example-container.textarea-example .adslot-ui-example, +.adslot-ui-example-container.select-example .adslot-ui-example, +.adslot-ui-example-container.panel-example .adslot-ui-example { + width: 380px; +} +.adslot-ui-example-container.totals-example .adslot-ui-example, +.adslot-ui-example-container.empty-example .adslot-ui-example, +.adslot-ui-example-container.search-example .adslot-ui-example, +.adslot-ui-example-container.search-bar-example .adslot-ui-example, +.adslot-ui-example-container.pretty-diff-example .adslot-ui-example { + width: 560px; +} +.adslot-ui-example-container.switch-example .component-heading { + padding-top: 20px; +} +.adslot-ui-example-container.switch-example .component-container { + padding-top: 10px; +} +.adslot-ui-example-container.navigation-tabs-example .adslot-ui-example .dashboard-tab { + border-color: #d5382e; +} +.adslot-ui-example-container.popover-example .adslot-ui-example .button-example-container { + display: flex; + flex-direction: column; + height: 400px; + justify-content: space-between; +} +.adslot-ui-example-container.popover-example + .adslot-ui-example + .button-example-container + .checkbox-component + + .checkbox-component { + margin-top: 0; + margin-left: 5px; +} +.adslot-ui-example-container.popover-example .adslot-ui-example .button-example-container .disabled-popover { + display: flex; + height: 28px; +} +.adslot-ui-example-container.popover-example + .adslot-ui-example + .button-example-container + .disabled-popover + .checkbox-component { + margin-top: 1px; +} +.adslot-ui-example-container.popover-example + .adslot-ui-example + .button-example-container + .disabled-popover + .aui--button { + position: relative; + left: 5px; + top: -5px; +} +.adslot-ui-example-container.popover-example .adslot-ui-example .popover { + position: relative; + margin: 20px; +} +.adslot-ui-example-container.popover-example .adslot-ui-example .auto-flip-container { + width: 500px; + height: 250px; + border: 1px solid #d3d3d3; + overflow: hidden; + overflow-x: scroll; +} +.adslot-ui-example-container.popover-example .adslot-ui-example .auto-flip-container .popover-example-container { + width: 600px; + position: relative; + top: 50px; + left: 250px; +} +.adslot-ui-example-container.popover-example + .adslot-ui-example + .auto-flip-container + .popover-example-container + > .aui--popover-element { + top: 10px; + left: 10px; + position: relative; +} +.adslot-ui-example-container.popover-with-ref-example .external-anchor { + margin-top: 100px; + width: 100px; + height: 100px; + border: 1px solid #e8e8e8; + display: flex; + justify-content: center; + align-items: center; +} +.adslot-ui-example-container.checkbox-example h4 { + margin-top: 20px; + font-weight: bold; +} +.adslot-ui-example-container.checkbox-example .fix-size { + width: 200px; +} +.adslot-ui-example-container.status-pill-example .aui--status-pill + .aui--status-pill { + margin-left: 20px; +} +.adslot-ui-example-container.button-group-example .adslot-ui-example { + display: flex; +} +.adslot-ui-example-container.button-group-example .adslot-ui-example .aui--button-group .aui--svg-symbol-component { + position: relative; + top: 3px; + fill: #fff; +} +.adslot-ui-example-container.button-group-example + .adslot-ui-example + .aui--button-group + .btn-inverse + .aui--svg-symbol-component { + fill: #000; +} +.adslot-ui-example-container.overlay-loader-example .static-markup { + display: flex; + margin-bottom: 50px; + width: 300px; +} +.adslot-ui-example-container.overlay-loader-example .static-markup .aui--overlay-loader { + position: inherit; +} +.adslot-ui-example-container.overlay-loader-example .static-markup .aui--overlay-loader .loader { + position: inherit; +} +.adslot-ui-example-container.overlay-loader-example .static-markup .aui--overlay-loader + .aui--overlay-loader { + margin-right: 10px; +} +.adslot-ui-example-container.vertical-navigation-tabs-example + .aui--vertical-navigation-component__menu-item.aui--vertical-navigation-component__menu-item-is-active + .menu-icon { + border-radius: 50%; + background-color: #e8e8e8; +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content { + display: flex; + flex-direction: row; +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content:hover .menu-icon { + border-radius: 50%; + background-color: #e8e8e8; +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content .menu-icon { + width: 40px; + height: 40px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 8px; +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content .menu-icon .product-details-icon { + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../src/styles/icons/details.svg'); +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content .menu-icon .burger-icon { + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../../src/styles/icons/burger.svg'); +} +.adslot-ui-example-container.vertical-navigation-tabs-example .menu-content .menu-label { + display: flex; + flex-direction: column; + justify-content: center; + padding: 8px; +} +.adslot-ui-example-container.tree-picker-example .selected-search { + padding: 10px 10px 30px; + border: 1px solid #e8e8e8; + border-bottom: 0; +} + +.full-width { + width: 100%; +} + +.horizontal-separator { + width: 12px; +} + +.vertical-separator { + height: 12px; +} diff --git a/www/examples/styles.scss b/www/examples/styles.scss index 57aec0bd2..58a5271e5 100644 --- a/www/examples/styles.scss +++ b/www/examples/styles.scss @@ -252,11 +252,11 @@ padding: 8px; .product-details-icon { - @include svg-icon('../../src/styles/variable.scssstyles/icons/details.svg', 24px, 24px); + @include svg-icon('../../src/styles/icons/details.svg', 24px, 24px); } .burger-icon { - @include svg-icon('../../src/styles/variable.scssstyles/icons/burger.svg', 24px, 24px); + @include svg-icon('../../src/styles/icons/burger.svg', 24px, 24px); } }