WIP moar
Alex P
parent
ee587e528b
commit
2fb429e99d
|
|
@ -1,7 +1,7 @@
|
|||
import React, {SFC, ReactChildren} from 'react'
|
||||
|
||||
import Nav from 'src/page_layout'
|
||||
import Notifications from 'src/shared/components/Notifications'
|
||||
import Notifications from 'src/shared/components/notifications/Notifications'
|
||||
|
||||
interface Props {
|
||||
children: ReactChildren
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
|
|||
import DropdownDivider from 'src/clockface/components/dropdowns/DropdownDivider'
|
||||
import DropdownItem from 'src/clockface/components/dropdowns/DropdownItem'
|
||||
import DropdownButton from 'src/clockface/components/dropdowns/DropdownButton'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
// Types
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
|
|||
import DropdownDivider from 'src/clockface/components/dropdowns/DropdownDivider'
|
||||
import DropdownItem from 'src/clockface/components/dropdowns/DropdownItem'
|
||||
import DropdownButton from 'src/clockface/components/dropdowns/DropdownButton'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
// Types
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, {Component} from 'react'
|
|||
import classnames from 'classnames'
|
||||
|
||||
// Components
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {connect} from 'react-redux'
|
|||
import OptIn from 'src/shared/components/OptIn'
|
||||
import Input from 'src/dashboards/components/DisplayOptionsInput'
|
||||
import {Tabber, Tab} from 'src/dashboards/components/Tabber'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import LineGraphColorSelector from 'src/shared/components/LineGraphColorSelector'
|
||||
import GraphOptionsDecimalPlaces from 'src/dashboards/components/GraphOptionsDecimalPlaces'
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react'
|
|||
import classnames from 'classnames'
|
||||
|
||||
import Cells from 'src/shared/components/cells/Cells'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import DashboardEmpty from 'src/dashboards/components/DashboardEmpty'
|
||||
|
||||
import {Dashboard, Cell} from 'src/types/v2'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import _ from 'lodash'
|
|||
import classnames from 'classnames'
|
||||
|
||||
import OnClickOutside from 'src/shared/components/OnClickOutside'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {connect} from 'react-redux'
|
|||
import _ from 'lodash'
|
||||
import uuid from 'uuid'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import Threshold from 'src/dashboards/components/Threshold'
|
||||
import GraphOptionsDecimalPlaces from 'src/dashboards/components/GraphOptionsDecimalPlaces'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {connect} from 'react-redux'
|
|||
import {bindActionCreators} from 'redux'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import FancyScrollbar from 'shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import {connect} from 'react-redux'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import ThresholdsList from 'src/shared/components/ThresholdsList'
|
||||
import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
|
||||
import GraphOptionsDecimalPlaces from 'src/dashboards/components/GraphOptionsDecimalPlaces'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
|
|||
import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
|
||||
import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
|
||||
import {TableOptions} from 'src/dashboards/components/TableOptions'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import ThresholdsList from 'src/shared/components/ThresholdsList'
|
||||
import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
|
|||
import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
|
||||
import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat'
|
||||
import GraphOptionsDecimalPlaces from 'src/dashboards/components/GraphOptionsDecimalPlaces'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import _ from 'lodash'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import _ from 'lodash'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import ExpressionNode from 'src/flux/components/ExpressionNode'
|
||||
import VariableNode from 'src/flux/components/VariableNode'
|
||||
import FuncSelector from 'src/flux/components/FuncSelector'
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {argTypes} from 'src/flux/constants'
|
|||
|
||||
import FuncArgTextArea from 'src/flux/components/FuncArgTextArea'
|
||||
import FilterTagListItem from 'src/flux/components/FilterTagListItem'
|
||||
import FancyScrollbar from '../../shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {getDeep} from 'src/utils/wrappers'
|
||||
|
||||
import {SchemaFilter} from 'src/types'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, {SFC, ChangeEvent, KeyboardEvent} from 'react'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import FuncSelectorInput from 'src/shared/components/FuncSelectorInput'
|
||||
import FuncListItem from 'src/flux/components/FuncListItem'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {connect} from 'react-redux'
|
|||
|
||||
// Components
|
||||
import DatabaseList from 'src/flux/components/DatabaseList'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
// Actions
|
||||
import {notify as notifyAction} from 'src/shared/actions/notifications'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import _ from 'lodash'
|
|||
|
||||
import {FluxTable} from 'src/types'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import TableSidebarItem from 'src/flux/components/TableSidebarItem'
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import TableSidebar from 'src/flux/components/TableSidebar'
|
|||
import TimeMachineTable from 'src/flux/components/TimeMachineTable'
|
||||
import FluxGraph from 'src/flux/components/FluxGraph'
|
||||
import NoResults from 'src/flux/components/NoResults'
|
||||
import RadioButtons from 'src/clockface/components/radio_buttons/RadioButtons'
|
||||
import {Radio} from 'src/clockface'
|
||||
|
||||
interface Props {
|
||||
data: FluxTable[]
|
||||
|
|
@ -48,11 +48,26 @@ class TimeMachineVis extends PureComponent<Props, State> {
|
|||
return (
|
||||
<>
|
||||
<div className="yield-node--controls">
|
||||
<RadioButtons
|
||||
buttons={[VisType.Table, VisType.Line]}
|
||||
activeButton={visType}
|
||||
onChange={this.selectVisType}
|
||||
/>
|
||||
<Radio>
|
||||
<Radio.Button
|
||||
id="vis-type--table"
|
||||
active={visType === VisType.Table}
|
||||
value={VisType.Table}
|
||||
onClick={this.selectVisType}
|
||||
titleText="View results in a Table"
|
||||
>
|
||||
Table
|
||||
</Radio.Button>
|
||||
<Radio.Button
|
||||
id="vis-type--line"
|
||||
active={visType === VisType.Line}
|
||||
value={VisType.Line}
|
||||
onClick={this.selectVisType}
|
||||
titleText="View results on a Line Graph"
|
||||
>
|
||||
Line
|
||||
</Radio.Button>
|
||||
</Radio>
|
||||
<div className="yield-node--name">{`"${yieldName}"`}</div>
|
||||
</div>
|
||||
<div className="yield-node--visualization">{this.vis}</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import React, {Component} from 'react'
|
||||
|
||||
// Components
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
// Decorators
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, {Component} from 'react'
|
|||
|
||||
import classnames from 'classnames'
|
||||
import {ClickOutside} from 'src/shared/components/ClickOutside'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import {ColorNumber, ThresholdColor} from 'src/types/colors'
|
||||
import {DROPDOWN_MENU_MAX_HEIGHT} from 'src/shared/constants/index'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import uuid from 'uuid'
|
|||
import classnames from 'classnames'
|
||||
|
||||
import {ClickOutside} from 'src/shared/components/ClickOutside'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import {ColorNumber} from 'src/types/colors'
|
||||
import {LINE_COLOR_SCALES} from 'src/shared/constants/graphColorPalettes'
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
import React, {Component} from 'react'
|
||||
import Dropdown from 'src/shared/components/Dropdown'
|
||||
|
||||
import {showDatabases} from 'src/shared/apis/metaQuery'
|
||||
import parsers from 'src/shared/parsing'
|
||||
import {Source} from 'src/types/sources'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
const {databases: showDatabasesParser} = parsers
|
||||
|
||||
interface Database {
|
||||
text: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
database: string
|
||||
onSelectDatabase: (database: Database) => void
|
||||
onStartEdit?: () => void
|
||||
onErrorThrown: (error: string) => void
|
||||
source: Source
|
||||
}
|
||||
|
||||
interface State {
|
||||
databases: Database[]
|
||||
}
|
||||
|
||||
@ErrorHandling
|
||||
class DatabaseDropdown extends Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
databases: [],
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.getDatabasesAsync()
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {databases} = this.state
|
||||
const {database, onSelectDatabase, onStartEdit} = this.props
|
||||
|
||||
if (!database) {
|
||||
this.componentDidMount()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
items={databases.map(text => ({
|
||||
text,
|
||||
}))}
|
||||
selected={database || 'Loading...'}
|
||||
onChoose={onSelectDatabase}
|
||||
onClick={onStartEdit ? onStartEdit : null}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
private getDatabasesAsync = async (): Promise<void> => {
|
||||
const {source, database, onSelectDatabase, onErrorThrown} = this.props
|
||||
const proxy = source.links.proxy
|
||||
try {
|
||||
const {data} = await showDatabases(proxy)
|
||||
const {databases, errors} = showDatabasesParser(data)
|
||||
if (errors.length > 0) {
|
||||
throw errors[0] // only one error can come back from this, but it's returned as an array
|
||||
}
|
||||
|
||||
const nonSystemDatabases = databases.filter(name => name !== '_internal')
|
||||
|
||||
this.setState({
|
||||
databases: nonSystemDatabases,
|
||||
})
|
||||
const selectedDatabaseText = nonSystemDatabases.includes(database)
|
||||
? database
|
||||
: nonSystemDatabases[0] || 'No databases'
|
||||
onSelectDatabase({
|
||||
text: selectedDatabaseText,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
onErrorThrown(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DatabaseDropdown
|
||||
|
|
@ -6,7 +6,7 @@ import {QueryConfig, Source} from 'src/types'
|
|||
import {Namespace} from 'src/types/queries'
|
||||
|
||||
import DatabaseListItem from 'src/shared/components/DatabaseListItem'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
import {getDatabasesWithRetentionPolicies} from 'src/shared/apis/databases'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {Link} from 'react-router'
|
|||
|
||||
import classnames from 'classnames'
|
||||
import {DROPDOWN_MENU_MAX_HEIGHT} from 'src/shared/constants/index'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import DropdownMenuItem from 'src/shared/components/DropdownMenuItem'
|
||||
import {
|
||||
OnActionHandler,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
|
||||
import QueryOptions from 'src/shared/components/QueryOptions'
|
||||
import FieldListItem from 'src/shared/components/FieldListItem'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
|
||||
import {showFieldKeys} from 'src/shared/apis/metaQuery'
|
||||
import showFieldKeysParser from 'src/shared/parsing/showFieldKeys'
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import showMeasurementsParser from 'src/shared/parsing/showMeasurements'
|
|||
|
||||
import {QueryConfig, Source, Tag} from 'src/types'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import MeasurementListFilter from 'src/shared/components/MeasurementListFilter'
|
||||
import MeasurementListItem from 'src/shared/components/MeasurementListItem'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react'
|
||||
import CellMeasurerCacheDecorator from './CellMeasurerCacheDecorator'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {Grid} from 'react-virtualized'
|
||||
|
||||
const SCROLLBAR_SIZE_BUFFER = 20
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
import React, {Component} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery'
|
||||
import showDatabasesParser from 'shared/parsing/showDatabases'
|
||||
import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies'
|
||||
import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
@ErrorHandling
|
||||
class MultiSelectDBDropdown extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
dbrps: [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._getDbRps()
|
||||
}
|
||||
|
||||
render() {
|
||||
const {dbrps} = this.state
|
||||
const {onApply, selectedItems} = this.props
|
||||
const label = 'Select databases'
|
||||
|
||||
return (
|
||||
<MultiSelectDropdown
|
||||
label={label}
|
||||
items={dbrps}
|
||||
onApply={onApply}
|
||||
isApplyShown={false}
|
||||
selectedItems={selectedItems}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
_getDbRps = async () => {
|
||||
const {
|
||||
source: {
|
||||
links: {proxy},
|
||||
},
|
||||
} = this.context
|
||||
const {onErrorThrown} = this.props
|
||||
|
||||
try {
|
||||
const {data} = await showDatabases(proxy)
|
||||
const {databases, errors} = showDatabasesParser(data)
|
||||
if (errors.length > 0) {
|
||||
throw errors[0] // only one error can come back from this, but it's returned as an array
|
||||
}
|
||||
|
||||
const response = await showRetentionPolicies(proxy, databases)
|
||||
const dbrps = response.data.results.reduce((acc, result, i) => {
|
||||
const {retentionPolicies} = showRetentionPoliciesParser(result)
|
||||
const db = databases[i]
|
||||
|
||||
const rps = retentionPolicies.map(({name: rp}) => ({
|
||||
db,
|
||||
rp,
|
||||
name: `${db}.${rp}`,
|
||||
}))
|
||||
|
||||
return [...acc, ...rps]
|
||||
}, [])
|
||||
|
||||
this.setState({dbrps})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
onErrorThrown(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const {arrayOf, func, shape, string} = PropTypes
|
||||
|
||||
MultiSelectDBDropdown.contextTypes = {
|
||||
source: shape({
|
||||
links: shape({
|
||||
proxy: string.isRequired,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
}
|
||||
|
||||
MultiSelectDBDropdown.propTypes = {
|
||||
onErrorThrown: func,
|
||||
onApply: func.isRequired,
|
||||
selectedItems: arrayOf(shape()),
|
||||
}
|
||||
|
||||
export default MultiSelectDBDropdown
|
||||
|
|
@ -4,7 +4,7 @@ import classnames from 'classnames'
|
|||
import moment from 'moment'
|
||||
|
||||
import OnClickOutside from 'shared/components/OnClickOutside'
|
||||
import FancyScrollbar from 'shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import CustomTimeRangeOverlay from 'shared/components/CustomTimeRangeOverlay'
|
||||
|
||||
import {timeRanges} from 'shared/data/timeRanges'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import _ from 'lodash'
|
||||
// Libraries
|
||||
import React, {Component} from 'react'
|
||||
import _ from 'lodash'
|
||||
import classnames from 'classnames'
|
||||
import {Scrollbars} from 'react-custom-scrollbars'
|
||||
|
||||
// Decorators
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
interface DefaultProps {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import {connect} from 'react-redux'
|
||||
import {Notification as NotificationType} from 'src/types/notifications'
|
||||
import Notification from 'src/shared/components/Notification'
|
||||
import Notification from 'src/shared/components/notifications/Notification'
|
||||
|
||||
interface Props {
|
||||
inPresentationMode?: boolean
|
||||
|
|
@ -12,10 +12,9 @@ import {
|
|||
} from 'src/shared/actions/sources'
|
||||
import {notify as notifyAction} from 'src/shared/actions/notifications'
|
||||
|
||||
import Notifications from 'src/shared/components/Notifications'
|
||||
import Notifications from 'src/shared/components/notifications/Notifications'
|
||||
import SourceForm from 'src/sources/components/SourceForm'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import PageHeader from 'src/clockface/components/page_layout/PageHeader'
|
||||
import {Page, PageHeader, PageContents} from 'src/page_layout'
|
||||
import {DEFAULT_SOURCE} from 'src/shared/constants'
|
||||
|
||||
const INITIAL_PATH = '/sources/new'
|
||||
|
|
@ -69,28 +68,29 @@ class SourcePage extends PureComponent<Props, State> {
|
|||
const {source, editMode, isInitialSource} = this.state
|
||||
|
||||
return (
|
||||
<div className={`${isInitialSource ? '' : 'page'}`}>
|
||||
<Page>
|
||||
<Notifications />
|
||||
<PageHeader titleText={this.pageTitle} />
|
||||
<FancyScrollbar className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel">
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={editMode}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
isInitialSource={isInitialSource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader fullWidth={false}>
|
||||
<PageHeader.Left>
|
||||
<h1 className="page--title">{this.pageTitle}</h1>
|
||||
</PageHeader.Left>
|
||||
<PageHeader.Right />
|
||||
</PageHeader>
|
||||
<PageContents fullWidth={false} scrollable={true}>
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel">
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={editMode}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
isInitialSource={isInitialSource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FancyScrollbar>
|
||||
</div>
|
||||
</PageContents>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Component} from 'react'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
@ErrorHandling
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {connect} from 'react-redux'
|
|||
|
||||
import {fetchJSONFeedAsync} from 'src/status/actions'
|
||||
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import JSONFeedReader from 'src/status/components/JSONFeedReader'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
# Sass Organization
|
||||
|
||||
After spending some time with it, the general idea is that there are A LOT of opinions on how to structure sass files.
|
||||
[This](https://blog.evernote.com/tech/2014/12/17/evernote-handles-sass-architecture/) seemed like a reasonable option.
|
||||
Straightforward, lean, but with enough separation of concerns to make it worth the trouble in the first place.
|
||||
|
||||
* `/components` -- this is where most of our code will go. Generally I think we'll have two types of components:
|
||||
1) more generic components like `_button.scss` and `_form-input.scss`, and 2) partials that map to React components, e.g. `_Explorer.scss` and `_QueryEditor.scss`.
|
||||
Most of the styles we'll end up writing will go in `/components`.
|
||||
We've toyed around with the idea of putting React component styles directly next to the component itself, so that's something to try out potentially as well.
|
||||
|
||||
* `/base` -- global styles like resets/typography and things you'd depend on in the rest of the codebase like mixins, variables, colors, etc.
|
||||
|
||||
* `/layout` -- larger page-level styles
|
||||
|
||||
* `/themes` -- anything that might need to override styles, like a light/dark theme
|
||||
|
||||
Keep in mind this is a work in progress, and it will take some time trying things out to find a good balance.
|
||||
|
|
@ -8,6 +8,9 @@
|
|||
@import 'modules/variables';
|
||||
@import 'modules/mixins';
|
||||
@import 'modules/helpers';
|
||||
@import 'modules/reset';
|
||||
@import 'modules/grid';
|
||||
@import 'modules/typography';
|
||||
|
||||
// Fonts
|
||||
@import 'fonts/fonts';
|
||||
|
|
@ -16,9 +19,6 @@
|
|||
// Clockface UI Kit
|
||||
@import '../clockface/styles';
|
||||
|
||||
// Theme
|
||||
@import 'theme/chronograf-theme';
|
||||
|
||||
// Vendor
|
||||
@import 'external/codemirror';
|
||||
@import 'external/react-grid-layout';
|
||||
|
|
@ -27,14 +27,16 @@
|
|||
// Layout
|
||||
@import '../page_layout/PageLayout';
|
||||
|
||||
@import 'layout/page';
|
||||
@import 'layout/page-subsections';
|
||||
@import 'layout/overlay-technology';
|
||||
|
||||
// Components
|
||||
@import 'components/fancy-scrollbars';
|
||||
// TODO: Import these styles into their respective components instead of this stylesheet
|
||||
@import '../shared/components/fancy_scrollbar/FancyScrollbar';
|
||||
@import '../shared/components/notifications/Notifications.scss';
|
||||
@import '../dashboards/components/rename_dashboard/RenameDashboard.scss';
|
||||
@import 'components/crosshairs';
|
||||
@import 'components/threesizer';
|
||||
@import 'components/graph-tips';
|
||||
@import 'components/graph';
|
||||
@import 'components/page-spinner';
|
||||
|
||||
|
||||
@import 'components/ceo-display-options';
|
||||
|
|
@ -44,17 +46,13 @@
|
|||
@import 'components/fill-query';
|
||||
@import 'components/flip-toggle';
|
||||
@import 'components/function-selector';
|
||||
@import 'components/graph-tips';
|
||||
@import 'components/graph';
|
||||
@import 'components/input-click-to-edit';
|
||||
@import 'components/input-tag-list';
|
||||
@import 'components/page-spinner';
|
||||
@import 'components/single-stat';
|
||||
@import 'components/static-legend';
|
||||
@import 'components/query-maker';
|
||||
@import 'components/react-tooltips';
|
||||
@import 'components/table-graph';
|
||||
@import 'components/threesizer';
|
||||
@import 'components/threshold-controls';
|
||||
@import 'components/histogram-chart';
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
display: block !important;
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
z-index: $dygraph-legend-z;
|
||||
z-index: $z--dygraph-legend;
|
||||
border-radius: 3px;
|
||||
user-select: text;
|
||||
transform: translateX(-50%);
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
/*
|
||||
Overlay Technology Styles
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
%overlay-styles {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.overlay--mask {
|
||||
@extend %overlay-styles;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
@include gradient-diag-down($c-pool,$c-comet);
|
||||
}
|
||||
|
||||
.overlay--dialog {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transform: translateY(72px);
|
||||
opacity: 0;
|
||||
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.overlay-tech {
|
||||
@extend %overlay-styles;
|
||||
visibility: hidden;
|
||||
transition: all 0.25s ease;
|
||||
z-index: 9999;;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Open State
|
||||
.overlay-tech.show {
|
||||
.overlay--mask {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.overlay--dialog {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/*
|
||||
Page Sub-Sections
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$subsection-font: 17px;
|
||||
|
||||
.subsection {
|
||||
.panel {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.panel-heading {
|
||||
height: 60px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.panel-heading + .panel-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.panel-body {
|
||||
min-height: 500px;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: $subsection-font;
|
||||
}
|
||||
}
|
||||
|
||||
.subsection--tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.subsection--tab {
|
||||
border-radius: $radius 0 0 $radius;
|
||||
padding: 0 8px 0 16px;
|
||||
height: $chronograf-page-header-height;
|
||||
white-space: nowrap;
|
||||
line-height: $chronograf-page-header-height;
|
||||
text-align: left;
|
||||
font-size: $subsection-font;
|
||||
font-weight: 500;
|
||||
color: $g11-sidewalk;
|
||||
@include no-user-select();
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
cursor: pointer;
|
||||
color: $g18-cloud;
|
||||
background-color: $g3-castle;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $grid--breakpoint-md) {
|
||||
.subsection {
|
||||
.subsection--nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
.subsection--content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/*
|
||||
Page Layout
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$dygraph-legend-z: 500;
|
||||
$dash-ceo-z: $dygraph-legend-z + 10;
|
||||
|
||||
/* Presentation Mode */
|
||||
.page-contents.presentation-mode {
|
||||
top: 0;
|
||||
height: 100% !important;
|
||||
|
||||
.container-fluid {padding: 8px !important;}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
$z--notifications: 9999;
|
||||
$z--overlays: 9990;
|
||||
$z--drag-n-drop: 5000;
|
||||
$z--dygraph-legend: 4000;
|
||||
|
||||
/* Motifs */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
/*
|
||||
Alerts
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.alert {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-radius: $ix-radius;
|
||||
padding: 16px 16px 16px 44px;
|
||||
@extend %no-user-select;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
|
||||
> span.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: $ix-text-base-2;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
// Mixin for Alert Themes
|
||||
// ----------------------------------------------------------------------------
|
||||
@mixin alert-styles(
|
||||
$bg-color,
|
||||
$bg-color-2,
|
||||
$text-color,
|
||||
$link-color,
|
||||
$link-hover
|
||||
) {
|
||||
font-size: 16px;
|
||||
|
||||
@include gradient-h($bg-color, $bg-color-2);
|
||||
color: $text-color;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $link-color;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
a:hover {
|
||||
color: $link-hover;
|
||||
border-color: $link-hover;
|
||||
}
|
||||
span.icon {
|
||||
color: $text-color;
|
||||
}
|
||||
.alert-close:before,
|
||||
.alert-close:after {
|
||||
background-color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Themes
|
||||
// ----------------------------------------------------------------------------
|
||||
.alert-success {
|
||||
@include alert-styles(
|
||||
$c-rainforest,
|
||||
$c-pool,
|
||||
$g20-white,
|
||||
$c-wasabi,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
.alert-primary {
|
||||
@include alert-styles($c-pool, $c-ocean, $g20-white, $c-neutrino, $g20-white);
|
||||
}
|
||||
.alert-warning {
|
||||
@include alert-styles($c-star, $c-pool, $g20-white, $c-neutrino, $g20-white);
|
||||
}
|
||||
.alert-error {
|
||||
@include alert-styles(
|
||||
$c-curacao,
|
||||
$c-star,
|
||||
$g20-white,
|
||||
$c-marmelade,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
.alert-info {
|
||||
@include alert-styles(
|
||||
$g20-white,
|
||||
$g16-pearl,
|
||||
$g8-storm,
|
||||
$ix-link-default,
|
||||
$ix-link-default-hover
|
||||
);
|
||||
}
|
||||
.alert-dark {
|
||||
@include alert-styles(
|
||||
$c-sapphire,
|
||||
$c-shadow,
|
||||
$c-moonstone,
|
||||
$ix-link-default,
|
||||
$ix-link-default-hover
|
||||
);
|
||||
}
|
||||
|
|
@ -1,464 +0,0 @@
|
|||
/*
|
||||
Buttons
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.btn,
|
||||
button.btn,
|
||||
input.btn {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
font-family: $ix-text-font;
|
||||
border-style: solid;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transition: background-color 0.25s ease, color 0.25s ease,
|
||||
border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
|
||||
outline: none !important;
|
||||
border-radius: 4px;
|
||||
padding: 0 $form-md-padding;
|
||||
height: $form-md-height;
|
||||
line-height: $form-md-height;
|
||||
font-size: $form-md-font;
|
||||
@extend %no-user-select;
|
||||
|
||||
// Icons
|
||||
> .icon {
|
||||
margin: 0 4px 0 0;
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
// Square Modifier
|
||||
&-square {
|
||||
padding: 0 !important;
|
||||
width: $form-md-height;
|
||||
|
||||
.icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
// Size Modifiers
|
||||
&-xs {
|
||||
border-radius: 3px;
|
||||
padding: 0 $form-xs-padding;
|
||||
height: $form-xs-height;
|
||||
line-height: $form-xs-height;
|
||||
font-size: $form-xs-font;
|
||||
// Icons
|
||||
> .icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
&.btn-square {
|
||||
width: $form-xs-height;
|
||||
}
|
||||
}
|
||||
&-sm {
|
||||
border-radius: 4px;
|
||||
padding: 0 $form-sm-padding;
|
||||
height: $form-sm-height;
|
||||
line-height: $form-sm-height;
|
||||
font-size: $form-sm-font;
|
||||
// Icons
|
||||
> .icon {
|
||||
top: 0;
|
||||
font-size: 1.125em;
|
||||
margin-right: 6px;
|
||||
}
|
||||
&.btn-square {
|
||||
width: $form-sm-height;
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
border-radius: 4px;
|
||||
padding: 0 $form-md-padding;
|
||||
height: $form-md-height;
|
||||
line-height: $form-md-height;
|
||||
font-size: $form-md-font;
|
||||
// Icons
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
&.btn-square {
|
||||
width: $form-md-height;
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
border-radius: 4px;
|
||||
padding: 0 $form-lg-padding;
|
||||
height: $form-lg-height;
|
||||
line-height: $form-lg-height;
|
||||
font-size: $form-lg-font;
|
||||
// Icons
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&.btn-square {
|
||||
width: $form-lg-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
a.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
// Button Size Modifiers
|
||||
.btn-group-xs > .btn,
|
||||
.btn.btn-xs {
|
||||
padding: 0 $form-xs-padding;
|
||||
height: $form-xs-height;
|
||||
line-height: $form-xs-height;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
.btn-group-sm > .btn,
|
||||
.btn.btn-sm {
|
||||
padding: 0 $form-sm-padding;
|
||||
height: $form-sm-height;
|
||||
line-height: $form-sm-height;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
.btn-group-lg > .btn,
|
||||
.btn.btn-lg {
|
||||
padding: 0 $form-lg-padding;
|
||||
height: $form-lg-height;
|
||||
line-height: $form-lg-height;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
|
||||
.btn.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Solid Button styles mixin
|
||||
// -----------------------------------------------------------------------------
|
||||
@mixin btn-base-styles(
|
||||
$bg-color,
|
||||
$bg-color-hover,
|
||||
$bg-color-press,
|
||||
$text-color,
|
||||
$text-color-hover
|
||||
) {
|
||||
// Default State
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
text-shadow: none;
|
||||
border-width: 0;
|
||||
|
||||
// Focus State
|
||||
&:focus {
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Hover State
|
||||
&:hover,
|
||||
&:focus:hover {
|
||||
background-color: $bg-color-hover;
|
||||
color: $text-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// MouseDown State
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:focus:active,
|
||||
&:focus:active:hover,
|
||||
.dropdown.open &.dropdown-toggle {
|
||||
background-color: $bg-color-press;
|
||||
color: $text-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
// Disabled State
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
opacity: 1;
|
||||
font-style: italic;
|
||||
background-color: $g5-pepper;
|
||||
color: $g7-graphite;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.active,
|
||||
&:active:focus {
|
||||
opacity: 1;
|
||||
background-color: $g5-pepper;
|
||||
color: $g7-graphite;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-default,
|
||||
div.btn-default,
|
||||
button.btn-default,
|
||||
input.btn-default {
|
||||
@include btn-base-styles(
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$g7-graphite,
|
||||
$g14-chromium,
|
||||
$g18-cloud
|
||||
);
|
||||
}
|
||||
a.btn-primary,
|
||||
div.btn-primary,
|
||||
button.btn-primary,
|
||||
input.btn-primary {
|
||||
@include btn-base-styles(
|
||||
$c-pool,
|
||||
$c-laser,
|
||||
$c-hydrogen,
|
||||
$g20-white,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
a.btn-success,
|
||||
div.btn-success,
|
||||
button.btn-success,
|
||||
input.btn-success {
|
||||
@include btn-base-styles(
|
||||
$c-rainforest,
|
||||
$c-honeydew,
|
||||
$c-krypton,
|
||||
$g20-white,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
a.btn-info,
|
||||
div.btn-info,
|
||||
button.btn-info,
|
||||
input.btn-info {
|
||||
@include btn-base-styles(
|
||||
$g7-graphite,
|
||||
$g8-storm,
|
||||
$g9-mountain,
|
||||
$g16-pearl,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
a.btn-warning,
|
||||
div.btn-warning,
|
||||
button.btn-warning,
|
||||
input.btn-warning {
|
||||
@include btn-base-styles(
|
||||
$c-star,
|
||||
$c-comet,
|
||||
$c-potassium,
|
||||
$g20-white,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
a.btn-danger,
|
||||
div.btn-danger,
|
||||
button.btn-danger,
|
||||
input.btn-danger {
|
||||
@include btn-base-styles(
|
||||
$c-curacao,
|
||||
$c-dreamsicle,
|
||||
$c-tungsten,
|
||||
$g20-white,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
a.btn-alert,
|
||||
div.btn-alert,
|
||||
button.btn-alert,
|
||||
input.btn-alert {
|
||||
@include btn-base-styles(
|
||||
$c-pineapple,
|
||||
$c-thunder,
|
||||
$c-sulfur,
|
||||
$g20-white,
|
||||
$g20-white
|
||||
);
|
||||
}
|
||||
|
||||
// Outline Button styles mixin
|
||||
// -----------------------------------------------------------------------------
|
||||
@mixin btn-outline-styles(
|
||||
$text-color,
|
||||
$text-color-hover,
|
||||
$border-color,
|
||||
$border-color-hover,
|
||||
$border-color-press
|
||||
) {
|
||||
// Adjusting line height in response to more borders
|
||||
line-height: $form-md-height - 4px;
|
||||
&.btn-xs {
|
||||
line-height: $form-xs-height - 4px;
|
||||
}
|
||||
&.btn-sm {
|
||||
line-height: $form-sm-height - 4px;
|
||||
}
|
||||
&.btn-md {
|
||||
line-height: $form-md-height - 4px;
|
||||
}
|
||||
&.btn-lg {
|
||||
line-height: $form-lg-height - 4px;
|
||||
}
|
||||
|
||||
// Default State
|
||||
border-width: 2px;
|
||||
background-color: transparent;
|
||||
border-color: $border-color;
|
||||
color: $text-color;
|
||||
&:focus {
|
||||
border-width: 2px;
|
||||
background-color: transparent;
|
||||
border-color: $border-color;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Hover State
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-color: $border-color-hover;
|
||||
color: $text-color-hover;
|
||||
}
|
||||
|
||||
// MouseDown State
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
.open &.dropdown-toggle {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border-color: $border-color-press;
|
||||
color: $text-color-hover;
|
||||
}
|
||||
|
||||
// Disabled State
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
border-color: $g5-pepper;
|
||||
color: $g7-graphite;
|
||||
box-shadow: none;
|
||||
font-style: italic;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.active,
|
||||
&:active:focus {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
border-color: $g5-pepper;
|
||||
color: $g7-graphite;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-link,
|
||||
div.btn-link,
|
||||
button.btn-link {
|
||||
@include btn-outline-styles(
|
||||
$c-pool,
|
||||
$c-laser,
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$c-laser
|
||||
);
|
||||
}
|
||||
a.btn-link-success,
|
||||
div.btn-link-success,
|
||||
button.btn-link-success {
|
||||
@include btn-outline-styles(
|
||||
$c-rainforest,
|
||||
$c-honeydew,
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$c-honeydew
|
||||
);
|
||||
}
|
||||
a.btn-link-warning,
|
||||
div.btn-link-warning,
|
||||
button.btn-link-warning {
|
||||
@include btn-outline-styles(
|
||||
$c-star,
|
||||
$c-comet,
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$c-comet
|
||||
);
|
||||
}
|
||||
a.btn-link-danger,
|
||||
div.btn-link-danger,
|
||||
button.btn-link-danger {
|
||||
@include btn-outline-styles(
|
||||
$c-curacao,
|
||||
$c-dreamsicle,
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$c-dreamsicle
|
||||
);
|
||||
}
|
||||
a.btn-link-alert,
|
||||
div.btn-link-alert,
|
||||
button.btn-link-alert {
|
||||
@include btn-outline-styles(
|
||||
$c-pineapple,
|
||||
$c-thunder,
|
||||
$g5-pepper,
|
||||
$g6-smoke,
|
||||
$c-thunder
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons Groups
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.btn-group--left,
|
||||
.btn-group--center,
|
||||
.btn-group--right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-group--left > .btn {
|
||||
margin-right: 4px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group--center > .btn {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group--right > .btn {
|
||||
margin-left: 4px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
/*
|
||||
Code Styles
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
$code-bg-color: $g2-kevlar;
|
||||
$code-scrollbar: $c-pool;
|
||||
$code-font-color: $c-pool;
|
||||
$code-font-size: 11px;
|
||||
$code-font-weight: 500;
|
||||
|
||||
code {
|
||||
font-weight: $code-font-weight;
|
||||
background-color: $code-bg-color;
|
||||
border: 0;
|
||||
color: $code-font-color;
|
||||
font-family: $code-font;
|
||||
font-size: $code-font-size;
|
||||
line-height: $code-font-size;
|
||||
letter-spacing: 0.02em;
|
||||
border-radius: 2px;
|
||||
padding: 2.5px 5px;
|
||||
margin: 0 1px 0 2px;
|
||||
|
||||
/* Reset default tag styles */
|
||||
b,strong,i,em,mark,small,del,ins,sub,sup,u {
|
||||
font-size: $code-font-size;
|
||||
font-weight: $code-font-weight;
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
background-color: inherit;
|
||||
color: $code-font-color;
|
||||
position: static;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
position: relative;
|
||||
font-size: 85%;
|
||||
margin-left: 2px;
|
||||
color: inherit;
|
||||
}
|
||||
sup {
|
||||
top: -4px;
|
||||
}
|
||||
sub {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
b { color: $c-dreamsicle;}
|
||||
i { color: $c-pool;}
|
||||
u { color: $c-rainforest;}
|
||||
|
||||
&.rainbow-highlighter {
|
||||
text-shadow: none;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
font-size: $code-font-size;
|
||||
line-height: 17px;
|
||||
background-color: $code-bg-color;
|
||||
border: 0;
|
||||
color: $code-font-color;
|
||||
white-space: normal;
|
||||
border-radius: $ix-radius;
|
||||
position: relative;
|
||||
font-family: $code-font;
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
@include custom-scrollbar($code-bg-color,$code-scrollbar);
|
||||
|
||||
&.rainbow-highlighter {
|
||||
background-image: none;
|
||||
@include custom-scrollbar($g2-kevlar,$c-pool);
|
||||
|
||||
code {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Code Highlighting */
|
||||
$code-highlight-a: $g10-wolf;
|
||||
$code-highlight-b: $c-hydrogen;
|
||||
$code-highlight-c: $c-pool;
|
||||
$code-highlight-d: $c-viridian;
|
||||
$code-highlight-e: $c-honeydew;
|
||||
$code-highlight-f: $g20-white;
|
||||
$code-highlight-g: $c-curacao;
|
||||
$code-highlight-h: $c-tungsten;
|
||||
$code-highlight-i: $c-honeydew;
|
||||
$code-highlight-j: $c-comet;
|
||||
$code-highlight-k: $g6-smoke;
|
||||
|
||||
code, pre {
|
||||
&.rainbow-highlighter {
|
||||
color: $c-potassium;
|
||||
border-color: $c-shadow;
|
||||
|
||||
|
||||
|
||||
b { color: $code-highlight-a; }
|
||||
strong { color: $code-highlight-b; }
|
||||
i { color: $code-highlight-c; }
|
||||
em { color: $code-highlight-d; }
|
||||
mark { color: $code-highlight-e; }
|
||||
small { color: $code-highlight-f; }
|
||||
del { color: $code-highlight-g; }
|
||||
ins { color: $code-highlight-h; }
|
||||
sub { color: $code-highlight-i; }
|
||||
sup { color: $code-highlight-j; }
|
||||
|
||||
/* Literal highlighting */
|
||||
u {
|
||||
color: $c-potassium;
|
||||
background-color: $code-highlight-k;
|
||||
padding: 2px 4px;
|
||||
text-indent: -4px;
|
||||
}
|
||||
|
||||
sup,sub {
|
||||
position: initial;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Language Labels */
|
||||
pre:before {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: $g7-graphite;
|
||||
font-weight: 700;
|
||||
margin-bottom: $ix-marg-a;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
pre[data-lang="html"]:before {
|
||||
content: 'HTML';
|
||||
}
|
||||
pre[data-lang="css"]:before {
|
||||
content: 'CSS';
|
||||
}
|
||||
pre[data-lang="js"]:before {
|
||||
content: 'Javascript';
|
||||
}
|
||||
|
|
@ -1,482 +0,0 @@
|
|||
/*
|
||||
Dropdowns
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// Default Theme Colors
|
||||
$dropdown-default-bg: $c-pool;
|
||||
$dropdown-default-dark: $c-ocean;
|
||||
$dropdown-default-press: $c-sapphire;
|
||||
$dropdown-default-hover: $c-laser;
|
||||
$dropdown-default-text: $c-yeti;
|
||||
$dropdown-default-text-hover: $g20-white;
|
||||
$dropdown-default-header: $c-sapphire;
|
||||
|
||||
// Green Theme Colors
|
||||
$dropdown-green-bg: $c-pool;
|
||||
$dropdown-green-dark: $c-viridian;
|
||||
$dropdown-green-press: $c-emerald;
|
||||
$dropdown-green-hover: $c-honeydew;
|
||||
$dropdown-green-text: $c-mint;
|
||||
$dropdown-green-text-hover: $g20-white;
|
||||
$dropdown-green-header: $c-wasabi;
|
||||
|
||||
// Purple Theme Colors
|
||||
$dropdown-purple-bg: $c-pool;
|
||||
$dropdown-purple-dark: $c-star;
|
||||
$dropdown-purple-press: $c-amethyst;
|
||||
$dropdown-purple-hover: $c-comet;
|
||||
$dropdown-purple-text: $c-twilight;
|
||||
$dropdown-purple-text-hover: $g20-white;
|
||||
$dropdown-purple-header: $c-potassium;
|
||||
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
||||
// Default Size
|
||||
.dropdown-toggle {
|
||||
width: 120px;
|
||||
}
|
||||
// Size Modifiers
|
||||
&-80 .dropdown-toggle {width: 80px;}
|
||||
&-90 .dropdown-toggle {width: 90px;}
|
||||
&-100 .dropdown-toggle {width: 100px;}
|
||||
&-110 .dropdown-toggle {width: 110px;}
|
||||
&-120 .dropdown-toggle {width: 120px;}
|
||||
&-130 .dropdown-toggle {width: 130px;}
|
||||
&-140 .dropdown-toggle {width: 140px;}
|
||||
&-150 .dropdown-toggle {width: 150px;}
|
||||
&-160 .dropdown-toggle {width: 160px;}
|
||||
&-170 .dropdown-toggle {width: 170px;}
|
||||
&-180 .dropdown-toggle {width: 180px;}
|
||||
&-190 .dropdown-toggle {width: 190px;}
|
||||
&-200 .dropdown-toggle {width: 200px;}
|
||||
&-210 .dropdown-toggle {width: 210px;}
|
||||
&-220 .dropdown-toggle {width: 220px;}
|
||||
&-230 .dropdown-toggle {width: 230px;}
|
||||
&-240 .dropdown-toggle {width: 240px;}
|
||||
&-250 .dropdown-toggle {width: 250px;}
|
||||
&-260 .dropdown-toggle {width: 260px;}
|
||||
&-270 .dropdown-toggle {width: 270px;}
|
||||
&-280 .dropdown-toggle {width: 280px;}
|
||||
&-290 .dropdown-toggle {width: 290px;}
|
||||
&-300 .dropdown-toggle {width: 300px;}
|
||||
&-310 .dropdown-toggle {width: 310px;}
|
||||
&-320 .dropdown-toggle {width: 320px;}
|
||||
&-330 .dropdown-toggle {width: 330px;}
|
||||
&-340 .dropdown-toggle {width: 340px;}
|
||||
}
|
||||
|
||||
.dropdown:focus,
|
||||
.dropdown.open,
|
||||
.dropdown.open:focus {
|
||||
outline: none;
|
||||
|
||||
> .btn.dropdown-toggle,
|
||||
> .btn.dropdown-toggle:hover,
|
||||
> .btn.dropdown-toggle:hover:active,
|
||||
> .btn.dropdown-toggle.active,
|
||||
> .btn.dropdown-toggle.active:active,
|
||||
> .btn.dropdown-toggle.active:active:hover {
|
||||
box-shadow: 0 0 5px 3px $c-pool;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements inside a Dropdown Toggle
|
||||
// ----------------------------------------------------------------------------
|
||||
.dropdown > .dropdown-toggle {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.caret {
|
||||
right: $form-md-padding;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.dropdown-selected {
|
||||
display: inline-block;
|
||||
flex: 1 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: $form-md-padding;
|
||||
}
|
||||
|
||||
// Size Modifiers
|
||||
&.btn-xs {
|
||||
.caret {right: $form-xs-padding;}
|
||||
.dropdown-selected {padding-right: $form-xs-padding;}
|
||||
}
|
||||
&.btn-sm {
|
||||
.caret {right: $form-sm-padding;}
|
||||
.dropdown-selected {padding-right: $form-sm-padding;}
|
||||
}
|
||||
&.btn-md {
|
||||
.caret {right: $form-md-padding;}
|
||||
.dropdown-selected {padding-right: $form-md-padding;}
|
||||
}
|
||||
&.btn-lg {
|
||||
.caret {right: $form-lg-padding;}
|
||||
.dropdown-selected {padding-right: $form-lg-padding;}
|
||||
}
|
||||
}
|
||||
|
||||
// AutoComplete Field
|
||||
// ----------------------------------------------------------------------------
|
||||
.dropdown-autocomplete {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
|
||||
&.btn-xs {height: $form-xs-height;}
|
||||
&.btn-sm {height: $form-sm-height;}
|
||||
&.btn-md {height: $form-md-height;}
|
||||
&.btn-lg {height: $form-lg-height;}
|
||||
}
|
||||
.dropdown-autocomplete--input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: $g20-white;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
|
||||
.btn-xs & {padding: 0 ($form-xs-padding * 2) 0 $form-xs-padding; font-size: $form-xs-font;}
|
||||
.btn-sm & {padding: 0 ($form-sm-padding * 2) 0 $form-sm-padding; font-size: $form-sm-font;}
|
||||
.btn-md & {padding: 0 ($form-md-padding * 2) 0 $form-md-padding; font-size: $form-md-font;}
|
||||
.btn-lg & {padding: 0 ($form-lg-padding * 2) 0 $form-lg-padding; font-size: $form-lg-font;}
|
||||
|
||||
&::-webkit-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&::-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&:-ms-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&:-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
|
||||
&:focus {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
.dropdown-empty {
|
||||
padding: 7px 9px;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
font-weight: 500;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
|
||||
// Dropdown Menu
|
||||
// ----------------------------------------------------------------------------
|
||||
.dropdown .dropdown-menu {
|
||||
min-width: 100%;
|
||||
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
@include gradient-h($dropdown-default-dark,$dropdown-default-bg);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
.dropdown.open {
|
||||
z-index: 9999;
|
||||
}
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
// Dropdown Menu Item
|
||||
.dropdown-menu li.dropdown-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@extend %no-user-select;
|
||||
|
||||
&:hover,
|
||||
&.highlight,
|
||||
&.highlight:hover {
|
||||
@include gradient-h($dropdown-default-hover,$dropdown-default-bg);
|
||||
}
|
||||
> a {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
transition: color 0.25s ease;
|
||||
color: $dropdown-default-text;
|
||||
font-weight: 500;
|
||||
padding: 7px 9px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&, &:hover, &:focus {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $dropdown-default-text-hover;
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:focus:active,
|
||||
&:focus:active:hover {
|
||||
@include gradient-h($dropdown-default-press,$dropdown-default-bg);
|
||||
color: $dropdown-default-text-hover;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
@include gradient-h($dropdown-default-press,$dropdown-default-bg);
|
||||
color: $dropdown-default-text-hover;
|
||||
}
|
||||
}
|
||||
// Dropown Menu Sub-Item
|
||||
.dropdown-menu .dropdown-sub-item {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
opacity: 0.66;
|
||||
margin-top: 4px;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.dropdown-sub-item--success {
|
||||
opacity: 1;
|
||||
color: $c-krypton;
|
||||
}
|
||||
span.icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
// Dropdown Item Actions
|
||||
.dropdown .dropdown-menu .dropdown-actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
.dropdown .dropdown-menu li.dropdown-item:hover .dropdown-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
.dropdown .dropdown-menu .dropdown-action {
|
||||
width: 20px;
|
||||
height: 27px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: $dropdown-default-header;
|
||||
transition: color 0.25s ease;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 27px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $dropdown-default-text-hover;
|
||||
}
|
||||
}
|
||||
// Dropdown Menu Header
|
||||
.dropdown .dropdown-menu li.dropdown-header {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
background-color: $dropdown-default-bg;
|
||||
color: $dropdown-default-header;
|
||||
font-weight: 600;
|
||||
padding: 7px 9px;
|
||||
margin: 0;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
// Dropdown Menu Divider
|
||||
.dropdown .dropdown-menu li.dropdown-divider {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: $dropdown-default-bg;
|
||||
height: $ix-border;
|
||||
}
|
||||
/*
|
||||
Dropdown Menu (only js highlighting, works with autocomplete feature)
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-menu--no-highlight {
|
||||
li.dropdown-item:hover {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
li.dropdown-item.highlight,
|
||||
li.dropdown-item.highlight:hover {
|
||||
@include gradient-h($dropdown-default-hover,$dropdown-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Multi-Select Dropdowns
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
.multi-select--item,
|
||||
.multi-select--apply {
|
||||
@extend %no-user-select;
|
||||
padding: 7px 9px;
|
||||
margin: 0;
|
||||
}
|
||||
.multi-select--checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
margin-right: 7px;
|
||||
background-color: $c-sapphire;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: $g20-white;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
.multi-select--item {
|
||||
color: $c-neutrino;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
transition:
|
||||
color 0.25s ease;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
width: calc(100% - 21px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include gradient-h($c-laser,$c-pool);
|
||||
color: $g20-white;
|
||||
cursor: pointer;;
|
||||
}
|
||||
&.checked {
|
||||
color: $g20-white;
|
||||
|
||||
.multi-select--checkbox:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.multi-select--apply {
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Kapacitor Theme Dropdowns
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-malachite {
|
||||
@include gradient-h($dropdown-green-dark,$dropdown-green-bg);
|
||||
li.dropdown-item {
|
||||
&:hover,
|
||||
&.highlight,
|
||||
&.highlight:hover {@include gradient-h($dropdown-green-hover,$dropdown-green-bg);}
|
||||
> a {
|
||||
color: $dropdown-green-text;
|
||||
|
||||
&:hover {
|
||||
color: $dropdown-green-text-hover;
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:focus:active,
|
||||
&:focus:active:hover {
|
||||
@include gradient-h($dropdown-green-press,$dropdown-green-bg);
|
||||
color: $dropdown-green-text-hover;
|
||||
}
|
||||
}
|
||||
.dropdown-action {color: $c-sapphire;}
|
||||
.dropdown-action:hover {color: $dropdown-green-text-hover;}
|
||||
&.active {@include gradient-h($dropdown-green-press,$dropdown-green-bg);}
|
||||
}
|
||||
li.dropdown-divider {@include gradient-h($dropdown-green-press,$c-ocean)}
|
||||
li.dropdown-header {
|
||||
@include gradient-h($dropdown-green-press,$c-ocean);
|
||||
color: $dropdown-green-header;
|
||||
}
|
||||
&.dropdown-menu--no-highlight {
|
||||
li.dropdown-item.highlight,
|
||||
li.dropdown-item.highlight:hover {
|
||||
@include gradient-h($dropdown-green-hover,$dropdown-green-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Purple Theme Dropdowns
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-astronaut {
|
||||
@include gradient-h($dropdown-purple-dark,$dropdown-purple-bg);
|
||||
li.dropdown-item {
|
||||
&:hover,
|
||||
&.highlight,
|
||||
&.highlight:hover {@include gradient-h($dropdown-purple-hover,$dropdown-purple-bg);}
|
||||
> a {
|
||||
color: $dropdown-purple-text;
|
||||
|
||||
&:hover {
|
||||
color: $dropdown-purple-text-hover;
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&:active,
|
||||
&:active:hover,
|
||||
&:focus:active,
|
||||
&:focus:active:hover {
|
||||
@include gradient-h($dropdown-purple-press,$dropdown-purple-bg);
|
||||
color: $dropdown-purple-text-hover;
|
||||
}
|
||||
}
|
||||
&.active {@include gradient-h($dropdown-purple-press,$dropdown-purple-bg);}
|
||||
.dropdown-action {color: $dropdown-purple-press;}
|
||||
.dropdown-action:hover {color: $dropdown-purple-text-hover;}
|
||||
}
|
||||
li.dropdown-divider {@include gradient-h($dropdown-purple-press,$c-ocean);}
|
||||
li.dropdown-header {
|
||||
@include gradient-h($dropdown-purple-press,$c-ocean);
|
||||
color: $dropdown-purple-header;
|
||||
}
|
||||
&.dropdown-menu--no-highlight {
|
||||
li.dropdown-item.highlight,
|
||||
li.dropdown-item.highlight:hover {
|
||||
@include gradient-h($dropdown-purple-hover,$dropdown-purple-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,522 +0,0 @@
|
|||
/*
|
||||
Form Elements
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
border: 2px solid $g5-pepper;
|
||||
border-radius: $radius;
|
||||
color: $g15-platinum;
|
||||
letter-spacing: 0px;
|
||||
background-color: $g2-kevlar;
|
||||
font-family: $ix-text-font;
|
||||
font-weight: 600;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
border-color 0.4s ease,
|
||||
box-shadow 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $c-pool;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 6px 0 $c-pool;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
|
||||
// Disabled State
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] &,
|
||||
&.disabled {
|
||||
&, &:hover {
|
||||
border-color: $g5-pepper;
|
||||
background-color: $g3-castle !important;
|
||||
color: $g9-mountain !important;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error &,
|
||||
.has-success &,
|
||||
.has-warning & {
|
||||
box-shadow: none;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
border-color 0.4s ease,
|
||||
box-shadow 0.4s ease;
|
||||
|
||||
&:focus {
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
}
|
||||
|
||||
// Success State
|
||||
.has-success & {
|
||||
border-color: $c-rainforest;
|
||||
&:focus {
|
||||
border-color: $c-honeydew;
|
||||
box-shadow: 0 0 8px $c-rainforest;
|
||||
}
|
||||
&::selection {background-color: $c-rainforest;}
|
||||
&::-moz-selection {background-color: $c-rainforest;}
|
||||
}
|
||||
|
||||
// Error State
|
||||
.has-error & {
|
||||
background-color: $g2-kevlar;
|
||||
border-color: $c-curacao;
|
||||
&:focus {
|
||||
background-color: $c-basalt;
|
||||
border-color: $c-dreamsicle;
|
||||
box-shadow: 0 0 8px $c-fire;
|
||||
}
|
||||
&::selection {background-color: $c-dreamsicle;}
|
||||
&::-moz-selection {background-color: $c-dreamsicle;}
|
||||
}
|
||||
|
||||
// Warning State
|
||||
.has-warning & {
|
||||
border-color: $c-star;
|
||||
&:focus {
|
||||
border-color: $c-comet;
|
||||
box-shadow: 0 0 8px $c-star;
|
||||
}
|
||||
&::selection {background-color: $c-comet;}
|
||||
&::-moz-selection {background-color: $c-comet;}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder Text
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control,
|
||||
textarea,
|
||||
input {
|
||||
&::-webkit-input-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;}
|
||||
&::-moz-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;}
|
||||
&:-ms-input-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;}
|
||||
&:-moz-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;}
|
||||
}
|
||||
|
||||
// Size Modifiers
|
||||
// ----------------------------------------------------------------------------
|
||||
input.form-control {
|
||||
&.input-xs {
|
||||
height: $form-xs-height;
|
||||
padding: 0 $form-xs-padding;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
&.input-sm {
|
||||
height: $form-sm-height;
|
||||
padding: 0 $form-sm-padding;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
&, &.input-md {
|
||||
height: $form-md-height;
|
||||
padding: 0 $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
}
|
||||
&.input-lg {
|
||||
height: $form-lg-height;
|
||||
padding: 0 $form-lg-padding;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
&.input-xs {
|
||||
padding: $form-xs-padding;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
&.input-sm {
|
||||
padding: $form-sm-padding;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
&, &.input-md {
|
||||
padding: $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
}
|
||||
&.input-lg {
|
||||
padding: $form-lg-padding;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Add-Ons
|
||||
// ----------------------------------------------------------------------------
|
||||
.input-group-addon {
|
||||
border: 2px solid $g5-pepper;
|
||||
background-color: $g4-onyx;
|
||||
color: $g10-wolf;
|
||||
font-weight: 600;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
@extend %no-user-select;
|
||||
|
||||
// Error State
|
||||
.has-error & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-dreamsicle;
|
||||
border-color: $c-curacao;
|
||||
}
|
||||
|
||||
// Success State
|
||||
.has-success & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-rainforest;
|
||||
border-color: $c-rainforest;
|
||||
}
|
||||
|
||||
// Warning State
|
||||
.has-warning & {
|
||||
background-color: $g4-onyx;
|
||||
color: $c-comet;
|
||||
border-color: $c-star;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Groups
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-group > .btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.form-group > label,
|
||||
label.form-label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $g11-sidewalk;
|
||||
margin: 0 0 4px 0;
|
||||
padding: 0 ($form-sm-padding + $ix-border);
|
||||
@extend %no-user-select;
|
||||
}
|
||||
label.form-helper {
|
||||
font-style: italic;
|
||||
line-height: 16px;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
|
||||
// Static Elements
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control-static {
|
||||
min-height: $form-md-height;
|
||||
padding: ($ix-marg-b - 1px) ($ix-marg-b + 1px);
|
||||
border: $ix-border solid $g5-pepper;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
// ----------------------------------------------------------------------------
|
||||
$form-control-checkbox: 20px;
|
||||
$form-control-checkdot: 8px;
|
||||
$form-control-checkbox-gap: 30px;
|
||||
|
||||
.form-control-static {
|
||||
input[type="checkbox"] {
|
||||
position: relative;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="checkbox"] + label {
|
||||
transition: color 0.25s ease;
|
||||
padding-left: $form-control-checkbox-gap;
|
||||
position: relative;
|
||||
color: $g11-sidewalk;
|
||||
|
||||
// Checkbox
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: $form-control-checkbox;
|
||||
height: $form-control-checkbox;
|
||||
border-radius: 3px;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
// Check Dot
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: ($form-control-checkbox / 2);
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
width: $form-control-checkdot;
|
||||
height: $form-control-checkdot;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
// Hover State
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {border-color: $g6-smoke;}
|
||||
}
|
||||
}
|
||||
// Animate checked state
|
||||
input[type="checkbox"]:checked + label {
|
||||
color: $g18-cloud;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
// Radio Buttons
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control-static {
|
||||
> .radio-item {
|
||||
width: 100%;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
position: relative;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="radio"] + label {
|
||||
transition: color 0.25s ease;
|
||||
padding-left: $form-control-checkbox-gap;
|
||||
position: relative;
|
||||
color: $g11-sidewalk;
|
||||
|
||||
// Radio Circle
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: $form-control-checkbox;
|
||||
height: $form-control-checkbox;
|
||||
border-radius: 50%;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g2-kevlar;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
// Radio Dot
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: ($form-control-checkbox / 2);
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
width: $form-control-checkdot;
|
||||
height: $form-control-checkdot;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
// Hover State
|
||||
&:hover {
|
||||
color: $g18-cloud;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {border-color: $g6-smoke;}
|
||||
}
|
||||
}
|
||||
// Animate checked state
|
||||
input[type="radio"]:checked + label {
|
||||
color: $g18-cloud;
|
||||
}
|
||||
input[type="radio"]:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Themed Text Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
input.form-control,
|
||||
textarea.form-control {
|
||||
// Blue
|
||||
&.form-plutonium {
|
||||
color: $c-pool;
|
||||
&:focus {color: $g20-white;}
|
||||
}
|
||||
// Green
|
||||
&.form-malachite {
|
||||
color: $c-rainforest;
|
||||
&:focus {
|
||||
border-color: $c-rainforest;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 8px $c-rainforest;
|
||||
}
|
||||
&::selection {background-color: $c-rainforest;}
|
||||
&::-moz-selection {background-color: $c-rainforest;}
|
||||
}
|
||||
// Purple
|
||||
&.form-astronaut {
|
||||
color: $c-comet;
|
||||
&:focus {
|
||||
border-color: $c-star;
|
||||
color: $g20-white;
|
||||
box-shadow: 0 0 8px $c-star;
|
||||
}
|
||||
&::selection {background-color: $c-comet;}
|
||||
&::-moz-selection {background-color: $c-comet;}
|
||||
}
|
||||
// Red
|
||||
&.form-volcano {
|
||||
color: $c-dreamsicle;
|
||||
&:focus {
|
||||
background-color: $c-basalt;
|
||||
border-color: $c-dreamsicle;
|
||||
color: $c-flan;
|
||||
box-shadow: 0 0 8px $c-curacao;
|
||||
}
|
||||
&::selection {background-color: $c-curacao;}
|
||||
&::-moz-selection {background-color: $c-curacao;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Monospace Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
.form-control.monotype {
|
||||
font-family: $code-font;
|
||||
}
|
||||
|
||||
// Generic Checkboxes
|
||||
// ----------------------------------------------------------------------------
|
||||
.dark-checkbox {
|
||||
input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g1-raven;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
}
|
||||
input:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
||||
// Generic Radio Inputs
|
||||
// ----------------------------------------------------------------------------
|
||||
.dark-radio {
|
||||
input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $g1-raven;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%) scale(2,2);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
}
|
||||
input:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
/*
|
||||
Miscellaneous
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: calc(50% + 1px);
|
||||
right: $form-md-padding;
|
||||
transform: translateY(-50%);
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
|
||||
&:after {
|
||||
content: "\e902";
|
||||
font-family: 'icomoon' !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: inherit;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-55%);
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
/*
|
||||
Panels
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$panel-gutter: 30px;
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-bottom: $panel-gutter;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $panel-gutter 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: $g12-forge;
|
||||
letter-spacing: 0.015em;
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
@extend %no-user-select;
|
||||
}
|
||||
|
||||
.panel-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(1) {
|
||||
justify-content: flex-start;
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
justify-content: flex-end;
|
||||
> * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background-color: $g3-castle;
|
||||
padding: $panel-gutter;
|
||||
|
||||
.panel-heading + &,
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
padding: 14px $panel-gutter;
|
||||
border-radius: 0 0 4px 4px;
|
||||
@include gradient-v($g2-kevlar, $g3-castle);
|
||||
color: $g9-mountain;
|
||||
}
|
||||
|
||||
// Tables directly inside Panels
|
||||
// ----------------------------------------------------------------------------
|
||||
.panel > .table {
|
||||
border-top: $ix-border;
|
||||
* {
|
||||
border-color: $g19-ghost;
|
||||
}
|
||||
}
|
||||
.panel-heading + .table {
|
||||
border: none;
|
||||
}
|
||||
.panel > .table td:first-child,
|
||||
.panel > .table th:first-child {
|
||||
padding-left: $panel-gutter;
|
||||
}
|
||||
.panel > .table td:last-child,
|
||||
.panel > .table th:last-child {
|
||||
padding-right: $panel-gutter;
|
||||
}
|
||||
|
||||
// Solid Panels
|
||||
// ----------------------------------------------------------------------------
|
||||
.panel.panel-solid {
|
||||
background-color: $g3-castle;
|
||||
border-radius: 4px;
|
||||
|
||||
.panel-heading {
|
||||
padding: $panel-gutter;
|
||||
}
|
||||
.panel-body {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Rules directly inside Panels
|
||||
// ----------------------------------------------------------------------------
|
||||
.panel-body hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
|
@ -1,289 +0,0 @@
|
|||
/*
|
||||
Radio Buttons
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.radio-buttons {
|
||||
@include no-user-select();
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g5-pepper;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
font-weight: 600;
|
||||
margin-right: 2px;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
background-color: $g2-kevlar;
|
||||
color: $g11-sidewalk;
|
||||
text-transform: capitalize;
|
||||
outline: none;
|
||||
border: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
color: $g15-platinum;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
}
|
||||
|
||||
/* Size Modifiers */
|
||||
.radio-buttons {
|
||||
&.radio-buttons-xs {
|
||||
height: $form-xs-height;
|
||||
|
||||
.radio-button {
|
||||
line-height: $form-xs-height - 4px;
|
||||
padding: 0 $form-xs-padding;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-buttons-sm {
|
||||
height: $form-sm-height;
|
||||
|
||||
.radio-button {
|
||||
line-height: $form-sm-height - 4px;
|
||||
padding: 0 $form-sm-padding;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-buttons-md {
|
||||
height: $form-md-height;
|
||||
|
||||
.radio-button {
|
||||
line-height: $form-sm-height - 4px;
|
||||
padding: 0 $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-buttons-lg {
|
||||
height: $form-lg-height;
|
||||
|
||||
.radio-button {
|
||||
line-height: $form-lg-height - 4px;
|
||||
padding: 0 $form-lg-padding;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Modifiers */
|
||||
.radio-buttons {
|
||||
&.radio-buttons-default {
|
||||
.radio-button.active {
|
||||
color: $g18-cloud;
|
||||
}
|
||||
}
|
||||
&.radio-buttons-primary {
|
||||
.radio-button.active {
|
||||
color: $c-pool;
|
||||
}
|
||||
}
|
||||
&.radio-buttons-success {
|
||||
.radio-button.active {
|
||||
color: $c-rainforest;
|
||||
}
|
||||
}
|
||||
&.radio-buttons-warning {
|
||||
.radio-button.active {
|
||||
color: $c-comet;
|
||||
}
|
||||
}
|
||||
&.radio-buttons-danger {
|
||||
.radio-button.active {
|
||||
color: $c-dreamsicle;
|
||||
}
|
||||
}
|
||||
&.radio-buttons-alert {
|
||||
.radio-button.active {
|
||||
color: $c-pineapple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Shape Modifiers */
|
||||
.radio-buttons.radio-buttons-square {
|
||||
&.radio-buttons-xs .radio-button {
|
||||
width: $form-xs-height - 4px;
|
||||
}
|
||||
|
||||
&.radio-buttons-sm .radio-button {
|
||||
width: $form-sm-height - 4px;
|
||||
}
|
||||
|
||||
&.radio-buttons-md .radio-button {
|
||||
width: $form-md-height - 4px;
|
||||
}
|
||||
|
||||
&.radio-buttons-lg .radio-button {
|
||||
width: $form-lg-height - 4px;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-buttons.radio-buttons-stretch {
|
||||
width: 100%;
|
||||
|
||||
.radio-button {
|
||||
flex: 1 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled State */
|
||||
.radio-buttons.disabled {
|
||||
.radio-button,
|
||||
.radio-button:hover {
|
||||
background-color: $g2-kevlar;
|
||||
font-style: italic;
|
||||
color: $g7-graphite;
|
||||
}
|
||||
.radio-button.active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g10-wolf;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Todo: Replace all instances of these styles with new pattern then
|
||||
delete these styles
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
.nav-tablist {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
border: $ix-border solid $g5-pepper;
|
||||
background-color: $g5-pepper;
|
||||
height: $form-md-height;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
> li {
|
||||
@extend %no-user-select;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
font-weight: 600;
|
||||
margin: 0 2px 0 0;
|
||||
background-color: $g2-kevlar;
|
||||
color: $g11-sidewalk;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
color: $g15-platinum;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g18-cloud;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled="true"] {
|
||||
&, &:hover {
|
||||
background-color: $g2-kevlar;
|
||||
font-style: italic;
|
||||
color: $g7-graphite;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&.disabled.active,
|
||||
&[disabled="true"].active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g10-wolf;
|
||||
}
|
||||
|
||||
&:last-child {margin-right: 0;}
|
||||
}
|
||||
}
|
||||
|
||||
// Size Modifiers
|
||||
// ----------------------------------------------------------------------------
|
||||
.nav-tablist.nav-tablist-lg {
|
||||
height: $form-lg-height;
|
||||
> li {
|
||||
padding: 0 $form-lg-padding;
|
||||
font-size: $form-lg-font;
|
||||
}
|
||||
}
|
||||
.nav-tablist.nav-tablist-md {
|
||||
height: $form-md-height;
|
||||
> li {
|
||||
padding: 0 $form-md-padding;
|
||||
font-size: $form-md-font;
|
||||
}
|
||||
}
|
||||
.nav-tablist.nav-tablist-sm {
|
||||
height: $form-sm-height;
|
||||
> li {
|
||||
padding: 0 $form-sm-padding;
|
||||
font-size: $form-sm-font;
|
||||
}
|
||||
}
|
||||
.nav-tablist.nav-tablist-xs {
|
||||
height: $form-xs-height;
|
||||
> li {
|
||||
padding: 0 $form-xs-padding;
|
||||
font-size: $form-xs-font;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme Modifiers
|
||||
// ----------------------------------------------------------------------------
|
||||
.nav-tablist.nav-tablist-malachite {
|
||||
> li {
|
||||
background-color: $g3-castle;
|
||||
|
||||
&:hover {background-color: $g4-onyx;}
|
||||
&.active {
|
||||
background-color: $g5-pepper;
|
||||
color: $c-rainforest;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled="true"] {
|
||||
&, &:hover {
|
||||
background-color: $g3-castle;
|
||||
color: $g7-graphite;
|
||||
}
|
||||
}
|
||||
&.disabled.active,
|
||||
&[disabled="true"].active {
|
||||
background-color: $g5-pepper;
|
||||
color: $g10-wolf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch to Fit
|
||||
// ----------------------------------------------------------------------------
|
||||
.nav-tablist.stretch {
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
flex: 1 0 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
/*
|
||||
Tables
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$table--border-color: $g5-pepper;
|
||||
$table--highlight-color: $g4-onyx;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
|
||||
th,
|
||||
td {
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
|
||||
&.monotype {
|
||||
font-family: $code-font;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
& > .text-ellipsis {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
> thead > tr > th,
|
||||
> thead > tr > td {
|
||||
color: $g17-whisper;
|
||||
font-weight: 600;
|
||||
padding: 8px;
|
||||
@extend %no-user-select;
|
||||
border: 0;
|
||||
border-bottom: $ix-border solid $table--border-color;
|
||||
}
|
||||
|
||||
// Body
|
||||
> tbody > tr > td {
|
||||
text-align: left;
|
||||
color: $g13-mist;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table.v-center {
|
||||
td,
|
||||
td > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table.table-bordered {
|
||||
border: $ix-border solid $table--border-color;
|
||||
|
||||
> thead,
|
||||
> tbody {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border: $ix-border solid $table--border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.table-striped {
|
||||
> tbody > tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: $table--highlight-color;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.table-highlight > tbody > tr:hover {
|
||||
background-color: $table--highlight-color;
|
||||
}
|
||||
|
||||
.table > tbody > tr .table--show-on-row-hover {
|
||||
visibility: hidden;
|
||||
}
|
||||
.table > tbody > tr:hover .table--show-on-row-hover,
|
||||
.table > tbody > tr .table--show-on-row-hover.active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// For use in a Status column
|
||||
.table-dot {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: $g17-whisper;
|
||||
|
||||
&.dot-success {
|
||||
background-color: $c-rainforest;
|
||||
}
|
||||
&.dot-primary {
|
||||
background-color: $c-pool;
|
||||
}
|
||||
&.dot-warning {
|
||||
background-color: $c-pineapple;
|
||||
}
|
||||
&.dot-danger {
|
||||
background-color: $c-dreamsicle;
|
||||
}
|
||||
&.dot-critical {
|
||||
background-color: $c-fire;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensuring buttons inside tables don't get huge
|
||||
.table th .btn,
|
||||
.table td .btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/*
|
||||
Chronograf Theme
|
||||
-----------------------------------------------------------------------------
|
||||
The theme covers app-wide styles and is intended to be overwritten on
|
||||
a component basis
|
||||
*/
|
||||
|
||||
@import 'reset';
|
||||
@import 'grid';
|
||||
@import 'typography';
|
||||
@import 'buttons';
|
||||
@import 'tables';
|
||||
@import 'dropdowns';
|
||||
@import 'form-elements';
|
||||
@import 'notifications';
|
||||
@import 'alerts';
|
||||
@import 'panels';
|
||||
@import 'radio-buttons';
|
||||
@import 'misc';
|
||||
@import 'code-styles';
|
||||
|
|
@ -2,7 +2,7 @@ import React, {PureComponent} from 'react'
|
|||
import uuid from 'uuid'
|
||||
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
|
||||
import TemplatePreviewListItem from 'src/tempVars/components/TemplatePreviewListItem'
|
||||
import {TEMPLATE_PREVIEW_LIST_DIMENSIONS as DIMENSIONS} from 'src/tempVars/constants'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue