mirror of
https://github.com/grafana/grafana.git
synced 2025-08-02 23:23:10 +08:00
Chore: Clean up some more old SCSS (#89404)
* remove/migrate normalize.scss * fix typo * migrate _add_data_source styles * migrate panel-header styles * migrate slate styles to emotion globals * put back a couple of classes used by external plugins
This commit is contained in:
Ashley Harrison
@ -17,6 +17,7 @@ import { getMarkdownStyles } from './markdownStyles';
|
||||
import { getPageStyles } from './page';
|
||||
import { getRcTimePickerStyles } from './rcTimePicker';
|
||||
import { getSkeletonStyles } from './skeletonStyles';
|
||||
import { getSlateStyles } from './slate';
|
||||
import { getUplotStyles } from './uPlot';
|
||||
|
||||
/** @internal */
|
||||
@ -38,6 +39,7 @@ export function GlobalStyles() {
|
||||
getAgularPanelStyles(theme),
|
||||
getMarkdownStyles(theme),
|
||||
getSkeletonStyles(theme),
|
||||
getSlateStyles(theme),
|
||||
getRcTimePickerStyles(theme),
|
||||
getUplotStyles(theme),
|
||||
getLegacySelectStyles(theme),
|
||||
|
||||
145
packages/grafana-ui/src/themes/GlobalStyles/slate.ts
Normal file
145
packages/grafana-ui/src/themes/GlobalStyles/slate.ts
Normal file
@ -0,0 +1,145 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export function getSlateStyles(theme: GrafanaTheme2) {
|
||||
return css({
|
||||
'.slate-query-field': {
|
||||
fontSize: theme.typography.fontSize,
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
height: 'auto',
|
||||
wordBreak: 'break-word',
|
||||
// Affects only placeholder in query field. Adds scrollbar only if content is cropped.
|
||||
overflow: 'auto',
|
||||
},
|
||||
|
||||
'.slate-query-field__wrapper': {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
padding: '6px 8px',
|
||||
minHeight: '32px',
|
||||
width: '100%',
|
||||
color: theme.colors.text.primary,
|
||||
backgroundColor: theme.components.input.background,
|
||||
backgroundImage: 'none',
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
transition: 'all 0.3s',
|
||||
lineHeight: '18px',
|
||||
},
|
||||
|
||||
'.slate-query-field__wrapper--disabled': {
|
||||
backgroundColor: 'inherit',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
'.slate-typeahead': {
|
||||
'.typeahead': {
|
||||
position: 'relative',
|
||||
zIndex: theme.zIndex.typeahead,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
border: `1px solid ${theme.components.panel.borderColor}`,
|
||||
maxHeight: '66vh',
|
||||
overflowY: 'scroll',
|
||||
overflowX: 'hidden',
|
||||
outline: 'none',
|
||||
listStyle: 'none',
|
||||
background: theme.components.panel.background,
|
||||
color: theme.colors.text.primary,
|
||||
boxShadow: theme.shadows.z2,
|
||||
},
|
||||
|
||||
'.typeahead-group__title': {
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
lineHeight: theme.typography.body.lineHeight,
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
|
||||
'.typeahead-item': {
|
||||
height: 'auto',
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
padding: theme.spacing(1, 1, 1, 2),
|
||||
fontSize: theme.typography.size.sm,
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
zIndex: 1,
|
||||
display: 'block',
|
||||
whiteSpace: 'nowrap',
|
||||
cursor: 'pointer',
|
||||
transition:
|
||||
'color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)',
|
||||
},
|
||||
|
||||
'.typeahead-item__selected': {
|
||||
backgroundColor: theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6,
|
||||
|
||||
'.typeahead-item-hint': {
|
||||
fontSize: theme.typography.size.xs,
|
||||
color: theme.colors.text.primary,
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
},
|
||||
|
||||
'.typeahead-match': {
|
||||
color: theme.v1.palette.yellow,
|
||||
borderBottom: `1px solid ${theme.v1.palette.yellow}`,
|
||||
// Undoing mark styling
|
||||
padding: 'inherit',
|
||||
background: 'inherit',
|
||||
},
|
||||
},
|
||||
|
||||
/* SYNTAX */
|
||||
|
||||
'.slate-query-field, .prism-syntax-highlight': {
|
||||
'.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
|
||||
'.token.variable, .token.entity': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
|
||||
'.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted': {
|
||||
color: theme.colors.error.text,
|
||||
},
|
||||
|
||||
'.token.attr-value, .token.selector, .token.string, .token.char, .token.builtin, .token.inserted': {
|
||||
color: theme.colors.success.text,
|
||||
},
|
||||
|
||||
'.token.boolean, .token.number, .token.operator, .token.url': {
|
||||
color: '#fe85fc',
|
||||
},
|
||||
|
||||
'.token.function, .token.attr-name, .token.function-name, .token.atrule, .token.keyword, .token.class-name': {
|
||||
color: theme.colors.primary.text,
|
||||
},
|
||||
|
||||
'.token.punctuation, .token.regex, .token.important': {
|
||||
color: theme.v1.palette.orange,
|
||||
},
|
||||
|
||||
'.token.important': {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
'.token.bold': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
'.token.italic': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
'.token.entity': {
|
||||
cursor: 'help',
|
||||
},
|
||||
|
||||
'.namespace': {
|
||||
opacity: 0.7,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -1,16 +1,18 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { createTheme } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
|
||||
import { PanelModel } from '../../state';
|
||||
|
||||
import PanelHeaderCorner, { Props } from './PanelHeaderCorner';
|
||||
import { PanelHeaderCorner, Props } from './PanelHeaderCorner';
|
||||
|
||||
const setup = () => {
|
||||
const testPanel = new PanelModel({ title: 'test', description: 'test panel' });
|
||||
const props: Props = {
|
||||
panel: testPanel,
|
||||
theme: createTheme(),
|
||||
};
|
||||
return render(<PanelHeaderCorner {...props} />);
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@ import { renderMarkdown, LinkModelSupplier, ScopedVars, IconName } from '@grafan
|
||||
import { GrafanaTheme2 } from '@grafana/data/';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { locationService, getTemplateSrv } from '@grafana/runtime';
|
||||
import { Tooltip, PopoverContent, Icon } from '@grafana/ui';
|
||||
import { Tooltip, PopoverContent, Icon, Themeable2, withTheme2 } from '@grafana/ui';
|
||||
import { useStyles2 } from '@grafana/ui/';
|
||||
import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
|
||||
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
|
||||
@ -17,7 +17,7 @@ enum InfoMode {
|
||||
Links = 'Links',
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
export interface Props extends Themeable2 {
|
||||
panel: PanelModel;
|
||||
title?: string;
|
||||
description?: string;
|
||||
@ -45,22 +45,23 @@ export class PanelHeaderCorner extends Component<Props> {
|
||||
};
|
||||
|
||||
getInfoContent = (): JSX.Element => {
|
||||
const { panel } = this.props;
|
||||
const { panel, theme } = this.props;
|
||||
const markdown = panel.description || '';
|
||||
const interpolatedMarkdown = getTemplateSrv().replace(markdown, panel.scopedVars);
|
||||
const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown);
|
||||
const links = this.props.links && this.props.links.getLinks(panel.replaceVariables);
|
||||
const styles = getContentStyles(theme);
|
||||
|
||||
return (
|
||||
<div className="panel-info-content markdown-html">
|
||||
<div className={styles.content}>
|
||||
<div dangerouslySetInnerHTML={{ __html: markedInterpolatedMarkdown }} />
|
||||
|
||||
{links && links.length > 0 && (
|
||||
<ul className="panel-info-corner-links">
|
||||
<ul className={styles.cornerLinks}>
|
||||
{links.map((link, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<a className="panel-info-corner-links__item" href={link.href} target={link.target}>
|
||||
<a href={link.href} target={link.target}>
|
||||
{link.title}
|
||||
</a>
|
||||
</li>
|
||||
@ -102,7 +103,7 @@ export class PanelHeaderCorner extends Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
export default PanelHeaderCorner;
|
||||
export default withTheme2(PanelHeaderCorner);
|
||||
|
||||
interface PanelInfoCornerProps {
|
||||
infoMode: InfoMode;
|
||||
@ -135,6 +136,25 @@ const iconMap: Record<InfoMode, IconName> = {
|
||||
[InfoMode.Links]: 'external-link-alt',
|
||||
};
|
||||
|
||||
const getContentStyles = (theme: GrafanaTheme2) => ({
|
||||
content: css({
|
||||
overflow: 'auto',
|
||||
|
||||
code: {
|
||||
whiteSpace: 'normal',
|
||||
wordWrap: 'break-word',
|
||||
},
|
||||
|
||||
'pre > code': {
|
||||
display: 'block',
|
||||
},
|
||||
}),
|
||||
cornerLinks: css({
|
||||
listStyle: 'none',
|
||||
paddingLeft: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
icon: css({
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { DataSourcePluginMeta } from '@grafana/data';
|
||||
import { LinkButton } from '@grafana/ui';
|
||||
import { DataSourcePluginMeta, GrafanaTheme2 } from '@grafana/data';
|
||||
import { LinkButton, useStyles2 } from '@grafana/ui';
|
||||
import { DataSourcePluginCategory } from 'app/types';
|
||||
|
||||
import { ROUTES } from '../../connections/constants';
|
||||
@ -18,13 +19,14 @@ export type Props = {
|
||||
|
||||
export function DataSourceCategories({ categories, onClickDataSourceType }: Props) {
|
||||
const moreDataSourcesLink = `${ROUTES.AddNewConnection}?cat=data-source`;
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Categories */}
|
||||
{categories.map(({ id, title, plugins }) => (
|
||||
<div className="add-data-source-category" key={id}>
|
||||
<div className="add-data-source-category__header" id={id}>
|
||||
<div className={styles.category} key={id}>
|
||||
<div className={styles.header} id={id}>
|
||||
{title}
|
||||
</div>
|
||||
<DataSourceTypeCardList dataSourcePlugins={plugins} onClickDataSourceType={onClickDataSourceType} />
|
||||
@ -32,7 +34,7 @@ export function DataSourceCategories({ categories, onClickDataSourceType }: Prop
|
||||
))}
|
||||
|
||||
{/* Find more */}
|
||||
<div className="add-data-source-more">
|
||||
<div className={styles.more}>
|
||||
<LinkButton variant="secondary" href={moreDataSourcesLink} target="_self" rel="noopener">
|
||||
Find more data source plugins
|
||||
</LinkButton>
|
||||
@ -40,3 +42,17 @@ export function DataSourceCategories({ categories, onClickDataSourceType }: Prop
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
category: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
header: css({
|
||||
fontSize: theme.typography.h5.fontSize,
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
more: css({
|
||||
margin: theme.spacing(4),
|
||||
textAlign: 'center',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -1864,3 +1864,74 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-data-source-item {
|
||||
padding: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: $card-background;
|
||||
border-radius: 3px;
|
||||
margin-bottom: $space-xxs;
|
||||
|
||||
&:hover {
|
||||
background: $card-background-hover;
|
||||
|
||||
.add-data-source-item-actions {
|
||||
opacity: 1;
|
||||
transition: 0.15s opacity ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-data-source-item-text-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-data-source-item-logo {
|
||||
margin-right: $space-lg;
|
||||
margin-left: $space-sm;
|
||||
width: 55px;
|
||||
max-height: 55px;
|
||||
}
|
||||
|
||||
.add-data-source-item-desc {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.add-data-source-item-actions {
|
||||
opacity: 0;
|
||||
padding-left: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> button {
|
||||
margin-left: $space-md;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.add-data-source-item-badge {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.add-data-source-item-text {
|
||||
font-size: $font-size-h5;
|
||||
}
|
||||
|
||||
.panel-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: $text-muted;
|
||||
font-size: $font-size-lg;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,15 +24,12 @@
|
||||
@import 'components/tags';
|
||||
@import 'components/gf-form';
|
||||
@import 'components/filter-table';
|
||||
@import 'components/slate_editor';
|
||||
@import 'components/modals';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/infobox';
|
||||
@import 'components/query_editor';
|
||||
@import 'components/query_part';
|
||||
@import 'components/dashboard_grid';
|
||||
@import 'components/add_data_source';
|
||||
@import 'components/panel_header';
|
||||
|
||||
// PAGES
|
||||
@import 'pages/dashboard';
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
.add-data-source-header {
|
||||
margin-bottom: $space-xl;
|
||||
padding-top: $spacer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-data-source-search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.add-data-source-category {
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.add-data-source-category__header {
|
||||
font-size: $font-size-h5;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.add-data-source-item {
|
||||
padding: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: $card-background;
|
||||
border-radius: 3px;
|
||||
margin-bottom: $space-xxs;
|
||||
|
||||
&:hover {
|
||||
background: $card-background-hover;
|
||||
|
||||
.add-data-source-item-actions {
|
||||
opacity: 1;
|
||||
transition: 0.15s opacity ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-data-source-item-text-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-data-source-item-desc {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.add-data-source-item-badge {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.add-data-source-item-text {
|
||||
font-size: $font-size-h5;
|
||||
}
|
||||
|
||||
.add-data-source-item-logo {
|
||||
margin-right: $space-lg;
|
||||
margin-left: $space-sm;
|
||||
width: 55px;
|
||||
max-height: 55px;
|
||||
}
|
||||
|
||||
.add-data-source-item-actions {
|
||||
opacity: 0;
|
||||
padding-left: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> button {
|
||||
margin-left: $space-md;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.add-datasource-item-actions__btn-icon {
|
||||
margin-left: $space-sm;
|
||||
}
|
||||
|
||||
.add-data-source-more {
|
||||
text-align: center;
|
||||
margin: $space-xl;
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
.panel-header {
|
||||
&:hover {
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
background-color: $panel-header-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-container--no-title {
|
||||
.panel-header {
|
||||
position: absolute;
|
||||
left: min(50px, 10%); // allows space for interaction in the corders
|
||||
right: min(50px, 10%);
|
||||
z-index: $panel-header-z-index;
|
||||
|
||||
&:hover {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.panel-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-title-container {
|
||||
cursor: move;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
border: 0px;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
height: $panel-header-height;
|
||||
line-height: $panel-header-height;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-menu-container {
|
||||
width: 0px;
|
||||
height: 19px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.panel-menu-toggle {
|
||||
position: absolute;
|
||||
top: calc(50% - 9px);
|
||||
color: $text-color-weak;
|
||||
cursor: pointer;
|
||||
margin: 2px 0 0 2px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
z-index: $panel-header-z-index + 1;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-color-weak;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: $text-muted;
|
||||
font-size: $font-size-lg;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-menu {
|
||||
top: 25px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.panel-info-content {
|
||||
overflow: auto;
|
||||
|
||||
code {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-info-corner-links {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-time-info {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
color: $blue;
|
||||
font-size: 85%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
@ -1,165 +0,0 @@
|
||||
.slate-query-field {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-monospace;
|
||||
height: auto;
|
||||
word-break: break-word;
|
||||
// Affects only placeholder in query field. Adds scrollbar only if content is cropped.
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.slate-query-field__wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
min-height: $input-height;
|
||||
width: 100%;
|
||||
color: $text-color;
|
||||
background-color: $input-bg;
|
||||
background-image: none;
|
||||
border: $input-border;
|
||||
border-radius: $border-radius;
|
||||
transition: all 0.3s;
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
|
||||
.slate-query-field__wrapper--disabled {
|
||||
background-color: inherit;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slate-typeahead {
|
||||
.typeahead {
|
||||
position: relative;
|
||||
z-index: $zindex-typeahead;
|
||||
border-radius: $border-radius;
|
||||
border: $panel-border;
|
||||
max-height: calc(66vh);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
outline: none;
|
||||
list-style: none;
|
||||
background: $panel-bg;
|
||||
color: $text-color;
|
||||
box-shadow: $typeahead-shadow;
|
||||
}
|
||||
|
||||
.typeahead-group__title {
|
||||
color: $text-color-weak;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-base;
|
||||
padding: $space-sm;
|
||||
}
|
||||
|
||||
.typeahead-item {
|
||||
height: auto;
|
||||
font-family: $font-family-monospace;
|
||||
padding: $space-sm $space-sm $space-sm $space-md;
|
||||
font-size: $font-size-sm;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.typeahead-item__selected {
|
||||
background-color: $typeahead-selected-bg;
|
||||
|
||||
.typeahead-item-hint {
|
||||
font-size: $font-size-xs;
|
||||
color: $text-color;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.typeahead-match {
|
||||
color: $typeahead-selected-color;
|
||||
border-bottom: 1px solid $typeahead-selected-color;
|
||||
// Undoing mark styling
|
||||
padding: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* SYNTAX */
|
||||
|
||||
.slate-query-field,
|
||||
.prism-syntax-highlight {
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.token.variable,
|
||||
.token.entity {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: $query-red;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.selector,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: $query-green;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.operator,
|
||||
.token.url {
|
||||
color: $query-purple;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.attr-name,
|
||||
.token.function-name,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.class-name {
|
||||
color: $text-blue;
|
||||
}
|
||||
|
||||
.token.punctuation,
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: $query-orange;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user