mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Styles & Theme: Inline form styles polish & tweaks (#23521)
* Styles: Refactoring and tweaks to inline form styles * Minor change * Minor fix * Updated snapshot * tweaks * minor tweak * Updated modal style * Updated snapshot * Updated more snapshots
This commit is contained in:
Torkel Ödegaard
GitHub
parent
d4516439ec
commit
8b7decf57b
@ -153,8 +153,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
// New reds palette used by next-gen form elements
|
||||
red88: string;
|
||||
|
||||
grayBlue: string;
|
||||
|
||||
// Accent colors
|
||||
blue: string;
|
||||
blueBase: string;
|
||||
@ -168,13 +166,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
red: string;
|
||||
yellow: string;
|
||||
purple: string;
|
||||
variable: string;
|
||||
orange: string;
|
||||
orangeDark: string;
|
||||
queryRed: string;
|
||||
queryGreen: string;
|
||||
queryPurple: string;
|
||||
queryKeyword: string;
|
||||
queryOrange: string;
|
||||
brandPrimary: string;
|
||||
brandSuccess: string;
|
||||
@ -217,6 +213,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
textFaint: string;
|
||||
textEmphasis: string;
|
||||
headingColor: string;
|
||||
textBlue: string;
|
||||
|
||||
// Next-gen forms functional colors
|
||||
formLabel: string;
|
||||
|
||||
@ -87,7 +87,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, icon }: St
|
||||
font-size: ${fontSize};
|
||||
padding: ${padding};
|
||||
height: ${height};
|
||||
line-height: ${height};
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${borderColor};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { css } from 'emotion';
|
||||
import { css, cx } from 'emotion';
|
||||
|
||||
// @ts-ignore
|
||||
import RCCascader from 'rc-cascader';
|
||||
@ -14,10 +14,10 @@ export interface ButtonCascaderProps {
|
||||
disabled?: boolean;
|
||||
value?: string[];
|
||||
fieldNames?: { label: string; value: string; children: string };
|
||||
|
||||
loadData?: (selectedOptions: CascaderOption[]) => void;
|
||||
onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
|
||||
onPopupVisibleChange?: (visible: boolean) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory(() => {
|
||||
@ -26,21 +26,26 @@ const getStyles = stylesFactory(() => {
|
||||
label: popup;
|
||||
z-index: 100;
|
||||
`,
|
||||
icon: css`
|
||||
margin-left: 4px;
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
|
||||
const { onChange, loadData, ...rest } = props;
|
||||
const { onChange, className, loadData, ...rest } = props;
|
||||
const styles = getStyles();
|
||||
|
||||
return (
|
||||
<RCCascader
|
||||
onChange={onChangeCascader(onChange)}
|
||||
loadData={onLoadDataCascader(loadData)}
|
||||
popupClassName={getStyles().popup}
|
||||
popupClassName={styles.popup}
|
||||
{...rest}
|
||||
expandIcon={null}
|
||||
>
|
||||
<button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
|
||||
{props.children} <Icon name="angle-down" style={{ marginBottom: 0, marginLeft: '4px' }} />
|
||||
<button className={cx('gf-form-label', className)} disabled={props.disabled}>
|
||||
{props.children} <Icon name="angle-down" className={styles.icon} />
|
||||
</button>
|
||||
</RCCascader>
|
||||
);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Themeable } from '../../types/theme';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { selectThemeVariant } from '../../themes/selectThemeVariant';
|
||||
import { css, cx } from 'emotion';
|
||||
import { stylesFactory } from '../../themes';
|
||||
|
||||
@ -16,7 +15,7 @@ const getCallToActionCardStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
wrapper: css`
|
||||
label: call-to-action-card;
|
||||
padding: ${theme.spacing.lg};
|
||||
background: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.grayBlue }, theme.type)};
|
||||
background: ${theme.colors.bg2};
|
||||
border-radius: ${theme.border.radius.md};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`CallToActionCard rendering when message and footer provided 1`] = `
|
||||
<div
|
||||
class="css-1ud9puf-call-to-action-card"
|
||||
class="css-ujo8b3-call-to-action-card"
|
||||
>
|
||||
<div
|
||||
class="css-m2iibx"
|
||||
@ -24,7 +24,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
|
||||
|
||||
exports[`CallToActionCard rendering when message and no footer provided 1`] = `
|
||||
<div
|
||||
class="css-1ud9puf-call-to-action-card"
|
||||
class="css-ujo8b3-call-to-action-card"
|
||||
>
|
||||
<div
|
||||
class="css-m2iibx"
|
||||
@ -41,7 +41,7 @@ exports[`CallToActionCard rendering when message and no footer provided 1`] = `
|
||||
|
||||
exports[`CallToActionCard rendering when no message and footer provided 1`] = `
|
||||
<div
|
||||
class="css-1ud9puf-call-to-action-card"
|
||||
class="css-ujo8b3-call-to-action-card"
|
||||
>
|
||||
<a
|
||||
href="http://dummy.link"
|
||||
|
||||
@ -38,7 +38,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
color: ${theme.palette.queryGreen};
|
||||
}
|
||||
.token.variable {
|
||||
color: ${theme.palette.queryKeyword};
|
||||
color: ${theme.colors.textBlue};
|
||||
}
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -4,7 +4,7 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
@mixin select-control() {
|
||||
width: 100%;
|
||||
margin-right: $space-xs;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@include border-radius($input-border-radius);
|
||||
background-color: $input-bg;
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
|
||||
const border = `1px solid ${borderColor}`;
|
||||
const borderActive = `1px solid ${borderColorActive}`;
|
||||
const borderHover = `1px solid ${borderColorHover}`;
|
||||
const fakeBold = `0 0 0.65px ${textColorHover}, 0 0 0.65px ${textColorHover}`;
|
||||
|
||||
return {
|
||||
radio: css`
|
||||
@ -47,7 +46,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
|
||||
&:checked + label {
|
||||
border: ${borderActive};
|
||||
color: ${textColorActive};
|
||||
text-shadow: ${fakeBold};
|
||||
background: ${bgActive};
|
||||
z-index: 3;
|
||||
}
|
||||
@ -62,10 +60,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
|
||||
background: ${bgDisabled};
|
||||
color: ${textColor};
|
||||
}
|
||||
|
||||
&:enabled + label:hover {
|
||||
text-shadow: ${fakeBold};
|
||||
}
|
||||
`,
|
||||
radioLabel: css`
|
||||
display: inline-block;
|
||||
|
||||
@ -46,11 +46,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
|
||||
function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
|
||||
switch (surface) {
|
||||
case 'body':
|
||||
return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
|
||||
return theme.isLight ? theme.palette.gray95 : theme.palette.gray10;
|
||||
case 'panel':
|
||||
return theme.isLight ? theme.palette.gray6 : theme.palette.gray25;
|
||||
return theme.isLight ? theme.palette.gray6 : theme.palette.gray15;
|
||||
case 'header':
|
||||
return theme.isLight ? theme.palette.gray85 : theme.palette.gray25;
|
||||
return theme.isLight ? theme.colors.bg3 : theme.palette.gray25;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
position: fixed;
|
||||
z-index: ${theme.zIndex.modal};
|
||||
background: ${theme.colors.bodyBg};
|
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
|
||||
background-clip: padding-box;
|
||||
outline: none;
|
||||
width: 750px;
|
||||
@ -33,7 +33,6 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
`,
|
||||
modalHeader: css`
|
||||
background: ${theme.colors.bg1};
|
||||
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
|
||||
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
|
||||
display: flex;
|
||||
height: 42px;
|
||||
|
||||
@ -277,7 +277,7 @@ export function SelectBase<T>({
|
||||
width: inputSizesPixels(size),
|
||||
}),
|
||||
}}
|
||||
className={widthClass}
|
||||
className={cx('select-container', widthClass)}
|
||||
{...commonSelectProps}
|
||||
{...creatableProps}
|
||||
{...asyncSelectProps}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`TimePickerContent renders correctly in full screen 1`] = `
|
||||
<div
|
||||
className="css-1l5oyux"
|
||||
className="css-1eellmz"
|
||||
>
|
||||
<div
|
||||
className="css-13dsoi7"
|
||||
className="css-dlnzj7"
|
||||
>
|
||||
<FullScreenForm
|
||||
historyOptions={Array []}
|
||||
@ -93,10 +93,10 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
|
||||
|
||||
exports[`TimePickerContent renders correctly in narrow screen 1`] = `
|
||||
<div
|
||||
className="css-1l5oyux"
|
||||
className="css-1eellmz"
|
||||
>
|
||||
<div
|
||||
className="css-13dsoi7"
|
||||
className="css-dlnzj7"
|
||||
>
|
||||
<FullScreenForm
|
||||
historyOptions={Array []}
|
||||
@ -184,10 +184,10 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
|
||||
|
||||
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
|
||||
<div
|
||||
className="css-1l5oyux"
|
||||
className="css-1eellmz"
|
||||
>
|
||||
<div
|
||||
className="css-13dsoi7"
|
||||
className="css-dlnzj7"
|
||||
>
|
||||
<FullScreenForm
|
||||
history={
|
||||
|
||||
@ -3,14 +3,8 @@ import { selectThemeVariant } from '../../../themes/selectThemeVariant';
|
||||
|
||||
export const getThemeColors = (theme: GrafanaTheme) => {
|
||||
return {
|
||||
border: selectThemeVariant(
|
||||
{
|
||||
light: theme.palette.gray4,
|
||||
dark: theme.palette.gray25,
|
||||
},
|
||||
theme.type
|
||||
),
|
||||
background: theme.colors.dropdownBg,
|
||||
border: theme.colors.border1,
|
||||
background: theme.colors.bodyBg,
|
||||
shadow: theme.colors.dropdownShadow,
|
||||
formBackground: selectThemeVariant(
|
||||
{
|
||||
|
||||
@ -115,6 +115,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"text": "#c7d0d9",
|
||||
"textBlue": "#339ae5",
|
||||
"textEmphasis": "#ececec",
|
||||
"textFaint": "#222426",
|
||||
"textStrong": "#ffffff",
|
||||
@ -132,7 +133,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"black": "#000000",
|
||||
"blue": "#33b5e5",
|
||||
"blue77": "#1f60c4",
|
||||
"blue85": "#3274d9",
|
||||
"blue85": "#339ae5",
|
||||
"blue95": "#5794f2",
|
||||
"blueBase": "#3274d9",
|
||||
"blueFaint": "#041126",
|
||||
@ -170,7 +171,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"gray85": "#c7d0d9",
|
||||
"gray95": "#e9edf2",
|
||||
"gray98": "#f7f8fa",
|
||||
"grayBlue": "#212327",
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"online": "#299c46",
|
||||
@ -178,7 +178,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"orangeDark": "#ff780a",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryKeyword": "#66d9ef",
|
||||
"queryOrange": "#eb7b18",
|
||||
"queryPurple": "#fe85fc",
|
||||
"queryRed": "#e02f44",
|
||||
@ -430,6 +429,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"text": "#c7d0d9",
|
||||
"textBlue": "#339ae5",
|
||||
"textEmphasis": "#ececec",
|
||||
"textFaint": "#222426",
|
||||
"textStrong": "#ffffff",
|
||||
@ -447,7 +447,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"black": "#000000",
|
||||
"blue": "#33b5e5",
|
||||
"blue77": "#1f60c4",
|
||||
"blue85": "#3274d9",
|
||||
"blue85": "#339ae5",
|
||||
"blue95": "#5794f2",
|
||||
"blueBase": "#3274d9",
|
||||
"blueFaint": "#041126",
|
||||
@ -485,7 +485,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"gray85": "#c7d0d9",
|
||||
"gray95": "#e9edf2",
|
||||
"gray98": "#f7f8fa",
|
||||
"grayBlue": "#212327",
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"online": "#299c46",
|
||||
@ -493,7 +492,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"orangeDark": "#ff780a",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryKeyword": "#66d9ef",
|
||||
"queryOrange": "#eb7b18",
|
||||
"queryPurple": "#fe85fc",
|
||||
"queryRed": "#e02f44",
|
||||
|
||||
@ -159,8 +159,7 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
width: 35%;
|
||||
padding: 0 8px;
|
||||
border-radius: 3px;
|
||||
background-color: ${theme.isDark ? theme.palette.grayBlue : theme.palette.gray6};
|
||||
border: 1px solid ${theme.isDark ? theme.palette.dark6 : theme.palette.gray5};
|
||||
background-color: ${theme.colors.bg2};
|
||||
`,
|
||||
right: css`
|
||||
width: 65%;
|
||||
|
||||
@ -53,7 +53,6 @@ $gray-4: ${theme.palette.gray4};
|
||||
$gray-5: ${theme.palette.gray5};
|
||||
$gray-6: ${theme.palette.gray6};
|
||||
|
||||
$gray-blue: ${theme.palette.grayBlue};
|
||||
$input-black: ${theme.colors.formInputBg};
|
||||
|
||||
$white: ${theme.palette.white};
|
||||
@ -65,7 +64,7 @@ $red: $red-base;
|
||||
$yellow: ${theme.palette.yellow};
|
||||
$orange: ${theme.palette.orange};
|
||||
$purple: ${theme.palette.purple};
|
||||
$variable: ${theme.palette.variable};
|
||||
$variable: ${theme.colors.textBlue};
|
||||
|
||||
$brand-primary: ${theme.palette.brandPrimary};
|
||||
$brand-success: ${theme.palette.brandSuccess};
|
||||
@ -76,10 +75,9 @@ $query-red: ${theme.palette.queryRed};
|
||||
$query-green: ${theme.palette.queryGreen};
|
||||
$query-purple: ${theme.palette.queryPurple};
|
||||
$query-orange: ${theme.palette.orange};
|
||||
$query-keyword: ${theme.palette.queryKeyword};
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
// -------------------------¨
|
||||
$online: ${theme.palette.online};
|
||||
$warn: ${theme.palette.warn};
|
||||
$critical: ${theme.palette.critical};
|
||||
@ -95,6 +93,7 @@ $text-color-strong: ${theme.colors.textStrong};
|
||||
$text-color-weak: ${theme.colors.textWeak};
|
||||
$text-color-faint: ${theme.colors.textFaint};
|
||||
$text-color-emphasis: ${theme.colors.textEmphasis};
|
||||
$text-blue: ${theme.colors.textBlue};
|
||||
|
||||
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
||||
$textShadow: none;
|
||||
@ -122,7 +121,7 @@ $hr-border-color: $dark-9;
|
||||
// -------------------------
|
||||
$panel-bg: ${theme.colors.panelBg};
|
||||
$panel-border: 1px solid ${theme.colors.panelBorder};
|
||||
$panel-header-hover-bg: ${theme.colors.bg3};
|
||||
$panel-header-hover-bg: ${theme.colors.bg2};
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// page header
|
||||
@ -150,7 +149,7 @@ $list-item-bg: $card-background;
|
||||
$list-item-hover-bg: $card-background-hover;
|
||||
$list-item-shadow: $card-shadow;
|
||||
|
||||
$empty-list-cta-bg: $gray-blue;
|
||||
$empty-list-cta-bg: ${theme.colors.bg2};
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: #404357;
|
||||
@ -203,13 +202,12 @@ $input-bg: $input-black;
|
||||
$input-bg-disabled: $dark-6;
|
||||
|
||||
$input-color: ${theme.colors.formInputText};
|
||||
$input-border-color: ${theme.palette.gray15};
|
||||
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
|
||||
$input-border-color: ${theme.colors.formInputBorder};
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: ${theme.palette.blue95};
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
|
||||
$input-label-bg: ${theme.palette.gray15};
|
||||
$input-label-border-color: ${theme.palette.gray15};
|
||||
$input-label-bg: ${theme.colors.bg2};
|
||||
$input-color-select-arrow: $white;
|
||||
|
||||
// Search
|
||||
@ -249,14 +247,15 @@ $navbar-button-border: #2f2f32;
|
||||
$side-menu-bg: $panel-bg;
|
||||
$side-menu-bg-mobile: $panel-bg;
|
||||
$side-menu-border: none;
|
||||
$side-menu-item-hover-bg: $dark-3;
|
||||
$side-menu-item-hover-bg: ${theme.colors.bg2};
|
||||
$side-menu-shadow: 0 0 20px black;
|
||||
$side-menu-link-color: ${theme.palette.gray70};
|
||||
$side-menu-icon-color: ${theme.palette.gray70};
|
||||
$side-menu-header-color: ${theme.colors.text};
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $dark-3;
|
||||
$menu-dropdown-bg: ${theme.colors.bg1};
|
||||
$menu-dropdown-hover-bg: ${theme.colors.bg2};
|
||||
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
|
||||
// Tabs
|
||||
@ -354,7 +353,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
|
||||
$switch-bg: $input-bg;
|
||||
$switch-slider-color: $dark-3;
|
||||
$switch-slider-off-bg: $gray-1;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
|
||||
$switch-slider-on-bg: ${theme.palette.blueLight};
|
||||
$switch-slider-shadow: 0 0 3px black;
|
||||
|
||||
//Checkbox
|
||||
@ -378,7 +377,7 @@ $panel-editor-tabs-line-color: #e3e3e3;
|
||||
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-blue;
|
||||
$panel-options-group-header-bg: ${theme.colors.bg2};
|
||||
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
|
||||
|
||||
@ -58,7 +58,7 @@ $red: $red-base;
|
||||
$yellow: ${theme.palette.yellow};
|
||||
$orange: ${theme.palette.orange};
|
||||
$purple: ${theme.palette.purple};
|
||||
$variable: ${theme.palette.variable};
|
||||
$variable: ${theme.colors.textBlue};
|
||||
|
||||
$brand-primary: ${theme.palette.brandPrimary};
|
||||
$brand-success: ${theme.palette.brandSuccess};
|
||||
@ -69,7 +69,6 @@ $query-red: ${theme.palette.queryRed};
|
||||
$query-green: ${theme.palette.queryGreen};
|
||||
$query-purple: ${theme.palette.queryPurple};
|
||||
$query-orange: ${theme.palette.orange};
|
||||
$query-keyword: ${theme.palette.queryKeyword};
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
@ -88,6 +87,7 @@ $text-color-strong: ${theme.colors.textStrong};
|
||||
$text-color-weak: ${theme.colors.textWeak};
|
||||
$text-color-faint: ${theme.colors.textFaint};
|
||||
$text-color-emphasis: ${theme.colors.textEmphasis};
|
||||
$text-blue: ${theme.colors.textBlue};
|
||||
|
||||
$text-shadow-faint: none;
|
||||
|
||||
@ -114,7 +114,7 @@ $hr-border-color: $gray-4 !default;
|
||||
// -------------------------
|
||||
$panel-bg: ${theme.colors.panelBg};
|
||||
$panel-border: 1px solid ${theme.colors.panelBorder};
|
||||
$panel-header-hover-bg: $gray-6;
|
||||
$panel-header-hover-bg: ${theme.colors.bg2};
|
||||
$panel-corner: $gray-4;
|
||||
|
||||
// Page header
|
||||
@ -195,13 +195,12 @@ $input-bg: $white;
|
||||
$input-bg-disabled: $gray-5;
|
||||
|
||||
$input-color: ${theme.colors.formInputText};
|
||||
$input-border-color: ${theme.palette.gray95};
|
||||
$input-border-color: ${theme.colors.formInputBorder};
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: ${theme.palette.blue95};
|
||||
$input-box-shadow-focus: ${theme.palette.blue95};
|
||||
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
|
||||
$input-label-bg: ${theme.palette.gray95};
|
||||
$input-label-border-color: ${theme.palette.gray95};
|
||||
$input-label-bg: ${theme.colors.bg2};
|
||||
$input-color-select-arrow: ${theme.palette.gray60};
|
||||
|
||||
// search
|
||||
@ -245,6 +244,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: ${theme.palette.gray25};
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
$side-menu-link-color: $gray-4;
|
||||
$side-menu-icon-color: ${theme.palette.gray70};
|
||||
$side-menu-header-color: ${theme.palette.gray95};
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
@ -345,7 +346,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
|
||||
$switch-bg: $white;
|
||||
$switch-slider-color: $gray-7;
|
||||
$switch-slider-off-bg: $gray-5;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
|
||||
$switch-slider-on-bg: ${theme.palette.blueShade};
|
||||
$switch-slider-shadow: 0 0 3px $dark-2;
|
||||
|
||||
//Checkbox
|
||||
|
||||
@ -142,13 +142,7 @@ $link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
|
||||
|
||||
// Forms
|
||||
$input-line-height: 18px !default;
|
||||
|
||||
$input-border-radius: 0 $border-radius $border-radius 0 !default;
|
||||
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
|
||||
|
||||
$label-border-radius: $border-radius 0 0 $border-radius !default;
|
||||
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
|
||||
|
||||
$input-border-radius: $border-radius;
|
||||
$input-padding: 0 ${theme.spacing.sm};
|
||||
$input-height: 32px !default;
|
||||
|
||||
|
||||
@ -22,7 +22,6 @@ const basicColors = {
|
||||
gray5: '#ececec',
|
||||
gray6: '#f4f5f8', // not used in dark theme
|
||||
gray7: '#fbfbfb', // not used in dark theme
|
||||
grayBlue: '#212327',
|
||||
blueBase: '#3274d9',
|
||||
blueShade: '#1f60c4',
|
||||
blueLight: '#5794f2',
|
||||
@ -98,7 +97,6 @@ const darkTheme: GrafanaTheme = {
|
||||
queryRed: basicColors.redBase,
|
||||
queryGreen: '#74e680',
|
||||
queryPurple: '#fe85fc',
|
||||
queryKeyword: '#66d9ef',
|
||||
queryOrange: basicColors.orange,
|
||||
online: basicColors.greenBase,
|
||||
warn: '#f79520',
|
||||
@ -126,6 +124,7 @@ const darkTheme: GrafanaTheme = {
|
||||
textWeak: basicColors.gray2,
|
||||
textEmphasis: basicColors.gray5,
|
||||
textFaint: basicColors.dark5,
|
||||
textBlue: basicColors.blue85,
|
||||
|
||||
link: basicColors.gray4,
|
||||
linkDisabled: basicColors.gray2,
|
||||
|
||||
@ -15,7 +15,7 @@ export const commonColorsPalette = {
|
||||
|
||||
// New blues palette used by next-gen form elements
|
||||
blue95: '#5794f2',
|
||||
blue85: '#3274d9',
|
||||
blue85: '#339ae5',
|
||||
blue77: '#1f60c4',
|
||||
|
||||
// New reds palette used by next-gen form elements
|
||||
|
||||
@ -22,7 +22,6 @@ const basicColors = {
|
||||
gray5: '#dde4ed',
|
||||
gray6: '#e9edf2', // same as gray95
|
||||
gray7: '#f7f8fa', // same as gray98
|
||||
grayBlue: '#212327', // not used in light theme
|
||||
blueBase: '#3274d9',
|
||||
blueShade: '#1f60c4',
|
||||
blueLight: '#5794f2',
|
||||
@ -35,7 +34,6 @@ const basicColors = {
|
||||
red: '#d44939',
|
||||
yellow: '#ff851b',
|
||||
purple: '#9954bb',
|
||||
variable: '#007580',
|
||||
orange: '#ff7941',
|
||||
orangeDark: '#ed5700',
|
||||
};
|
||||
@ -90,7 +88,6 @@ const lightTheme: GrafanaTheme = {
|
||||
name: 'Grafana Light',
|
||||
palette: {
|
||||
...basicColors,
|
||||
variable: basicColors.blue,
|
||||
brandPrimary: basicColors.orange,
|
||||
brandSuccess: basicColors.greenBase,
|
||||
brandWarning: basicColors.orange,
|
||||
@ -98,7 +95,6 @@ const lightTheme: GrafanaTheme = {
|
||||
queryRed: basicColors.redBase,
|
||||
queryGreen: basicColors.greenBase,
|
||||
queryPurple: basicColors.purple,
|
||||
queryKeyword: basicColors.blueBase,
|
||||
queryOrange: basicColors.orange,
|
||||
online: basicColors.greenShade,
|
||||
warn: '#f79520',
|
||||
@ -124,6 +120,7 @@ const lightTheme: GrafanaTheme = {
|
||||
textWeak: basicColors.gray2,
|
||||
textEmphasis: basicColors.dark5,
|
||||
textFaint: basicColors.dark4,
|
||||
textBlue: basicColors.blue85,
|
||||
|
||||
// Link colors
|
||||
link: basicColors.gray1,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { renderOrCallToRender, HorizontalGroup, Icon, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { css } from 'emotion';
|
||||
import { useUpdateEffect } from 'react-use';
|
||||
@ -54,19 +54,17 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.header}>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<div
|
||||
className={styles.titleWrapper}
|
||||
onClick={() => {
|
||||
setIsContentVisible(!isContentVisible);
|
||||
}}
|
||||
aria-label="Query operation row title"
|
||||
>
|
||||
<Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
|
||||
{title && <span className={styles.title}>{titleElement}</span>}
|
||||
</div>
|
||||
{actions && <div>{actionsElement}</div>}
|
||||
</HorizontalGroup>
|
||||
<div
|
||||
className={styles.titleWrapper}
|
||||
onClick={() => {
|
||||
setIsContentVisible(!isContentVisible);
|
||||
}}
|
||||
aria-label="Query operation row title"
|
||||
>
|
||||
<Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
|
||||
{title && <span className={styles.title}>{titleElement}</span>}
|
||||
</div>
|
||||
{actions && actionsElement}
|
||||
</div>
|
||||
{isContentVisible && <div className={styles.content}>{children}</div>}
|
||||
</div>
|
||||
@ -74,8 +72,6 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
|
||||
};
|
||||
|
||||
const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const borderColor = theme.colors.border2;
|
||||
|
||||
return {
|
||||
wrapper: css`
|
||||
margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
|
||||
@ -83,8 +79,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
header: css`
|
||||
padding: ${theme.spacing.sm};
|
||||
border-radius: ${theme.border.radius.sm};
|
||||
border: 1px solid ${borderColor};
|
||||
background: ${theme.colors.bodyBg};
|
||||
background: ${theme.colors.bg2};
|
||||
height: ${theme.spacing.formInputHeight};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`,
|
||||
collapseIcon: css`
|
||||
color: ${theme.colors.textWeak};
|
||||
@ -97,17 +96,12 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
|
||||
title: css`
|
||||
font-weight: ${theme.typography.weight.semibold};
|
||||
color: ${theme.palette.blue95};
|
||||
color: ${theme.colors.textBlue};
|
||||
margin-left: ${theme.spacing.sm};
|
||||
`,
|
||||
content: css`
|
||||
border: 1px solid ${borderColor};
|
||||
margin-top: -1px;
|
||||
background: ${theme.colors.bodyBg};
|
||||
margin-top: ${theme.spacing.xs};
|
||||
margin-left: ${theme.spacing.xl};
|
||||
border-top: 1px solid ${theme.colors.bodyBg};
|
||||
border-radis: 0 ${theme.border.radius.sm};
|
||||
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
@ -159,7 +159,6 @@ export class FolderPicker extends PureComponent<Props, State> {
|
||||
loadOptions={this.debouncedSearch}
|
||||
onChange={this.onFolderChange}
|
||||
onCreateOption={this.createNewFolder}
|
||||
size="sm"
|
||||
menuPosition="fixed"
|
||||
/>
|
||||
)}
|
||||
@ -176,7 +175,6 @@ export class FolderPicker extends PureComponent<Props, State> {
|
||||
loadOptions={this.debouncedSearch}
|
||||
onChange={this.onFolderChange}
|
||||
onCreateOption={this.createNewFolder}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,6 @@ exports[`FolderPicker should render 1`] = `
|
||||
loadingMessage="Loading folders..."
|
||||
onChange={[Function]}
|
||||
onCreateOption={[Function]}
|
||||
size="sm"
|
||||
value={Object {}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return {
|
||||
refId: css`
|
||||
font-weight: ${theme.typography.weight.semibold};
|
||||
color: ${theme.palette.blue95};
|
||||
color: ${theme.colors.textBlue};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -2,10 +2,10 @@ import _ from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Types
|
||||
import { FormLabel, LegacyForms } from '@grafana/ui';
|
||||
import { FormLabel, LegacyForms, Select } from '@grafana/ui';
|
||||
import { SelectableValue, QueryEditorProps } from '@grafana/data';
|
||||
|
||||
const { Select, Switch } = LegacyForms;
|
||||
const { Switch } = LegacyForms;
|
||||
|
||||
import { PrometheusDatasource } from '../datasource';
|
||||
import { PromQuery, PromOptions } from '../types';
|
||||
@ -162,7 +162,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
|
||||
</div>
|
||||
|
||||
<div className="gf-form">
|
||||
<div className="gf-form-label">Format</div>
|
||||
<div className="gf-form-label width-7">Format</div>
|
||||
<Select isSearchable={false} options={FORMAT_OPTIONS} onChange={this.onFormatChange} value={formatOption} />
|
||||
<Switch label="Instant" checked={instant} onChange={this.onInstantChange} />
|
||||
|
||||
|
||||
@ -77,27 +77,8 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
|
||||
Resolution
|
||||
</div>
|
||||
<Select
|
||||
allowCustomValue={false}
|
||||
autoFocus={false}
|
||||
backspaceRemovesValue={true}
|
||||
className=""
|
||||
components={
|
||||
Object {
|
||||
"Group": [Function],
|
||||
"IndicatorsContainer": [Function],
|
||||
"MenuList": [Function],
|
||||
"Option": [Function],
|
||||
"SingleValue": [Function],
|
||||
}
|
||||
}
|
||||
isClearable={false}
|
||||
isDisabled={false}
|
||||
isLoading={false}
|
||||
isMulti={false}
|
||||
isSearchable={false}
|
||||
maxMenuHeight={300}
|
||||
onChange={[Function]}
|
||||
openMenuOnFocus={false}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
@ -126,7 +107,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
|
||||
},
|
||||
]
|
||||
}
|
||||
tabSelectsValue={true}
|
||||
value={
|
||||
Object {
|
||||
"label": "1/1",
|
||||
@ -139,32 +119,13 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
|
||||
className="gf-form"
|
||||
>
|
||||
<div
|
||||
className="gf-form-label"
|
||||
className="gf-form-label width-7"
|
||||
>
|
||||
Format
|
||||
</div>
|
||||
<Select
|
||||
allowCustomValue={false}
|
||||
autoFocus={false}
|
||||
backspaceRemovesValue={true}
|
||||
className=""
|
||||
components={
|
||||
Object {
|
||||
"Group": [Function],
|
||||
"IndicatorsContainer": [Function],
|
||||
"MenuList": [Function],
|
||||
"Option": [Function],
|
||||
"SingleValue": [Function],
|
||||
}
|
||||
}
|
||||
isClearable={false}
|
||||
isDisabled={false}
|
||||
isLoading={false}
|
||||
isMulti={false}
|
||||
isSearchable={false}
|
||||
maxMenuHeight={300}
|
||||
onChange={[Function]}
|
||||
openMenuOnFocus={false}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
@ -181,7 +142,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
|
||||
},
|
||||
]
|
||||
}
|
||||
tabSelectsValue={true}
|
||||
value={
|
||||
Object {
|
||||
"label": "Time series",
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword width-7">Series count</label>
|
||||
<input type="number"
|
||||
class="gf-form-input width-7"
|
||||
class="gf-form-input width-15"
|
||||
placeholder="1"
|
||||
ng-model="ctrl.target.seriesCount"
|
||||
min="1"
|
||||
@ -91,7 +91,7 @@
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword width-7">Min</label>
|
||||
<input type="number"
|
||||
class="gf-form-input width-6"
|
||||
class="gf-form-input width-15"
|
||||
placeholder="none"
|
||||
ng-model="ctrl.target.min"
|
||||
step="0.1"
|
||||
@ -100,7 +100,7 @@
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword width-7">Max</label>
|
||||
<input type="number"
|
||||
class="gf-form-input width-6"
|
||||
class="gf-form-input width-15"
|
||||
placeholder="none"
|
||||
ng-model="ctrl.target.max"
|
||||
step="0.1"
|
||||
|
||||
@ -56,7 +56,6 @@ $gray-4: #d8d9da;
|
||||
$gray-5: #ececec;
|
||||
$gray-6: #f4f5f8;
|
||||
|
||||
$gray-blue: #212327;
|
||||
$input-black: #0b0c0e;
|
||||
|
||||
$white: #ffffff;
|
||||
@ -68,7 +67,7 @@ $red: $red-base;
|
||||
$yellow: #ecbb13;
|
||||
$orange: #eb7b18;
|
||||
$purple: #9933cc;
|
||||
$variable: #32d1df;
|
||||
$variable: #339ae5;
|
||||
|
||||
$brand-primary: #eb7b18;
|
||||
$brand-success: #299c46;
|
||||
@ -79,10 +78,9 @@ $query-red: #e02f44;
|
||||
$query-green: #74e680;
|
||||
$query-purple: #fe85fc;
|
||||
$query-orange: #eb7b18;
|
||||
$query-keyword: #66d9ef;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
// -------------------------¨
|
||||
$online: #299c46;
|
||||
$warn: #f79520;
|
||||
$critical: #e02f44;
|
||||
@ -98,6 +96,7 @@ $text-color-strong: #ffffff;
|
||||
$text-color-weak: #8e8e8e;
|
||||
$text-color-faint: #222426;
|
||||
$text-color-emphasis: #ececec;
|
||||
$text-blue: #339ae5;
|
||||
|
||||
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
||||
$textShadow: none;
|
||||
@ -125,7 +124,7 @@ $hr-border-color: $dark-9;
|
||||
// -------------------------
|
||||
$panel-bg: #141619;
|
||||
$panel-border: 1px solid #202226;
|
||||
$panel-header-hover-bg: #343b40;
|
||||
$panel-header-hover-bg: #202226;
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// page header
|
||||
@ -153,7 +152,7 @@ $list-item-bg: $card-background;
|
||||
$list-item-hover-bg: $card-background-hover;
|
||||
$list-item-shadow: $card-shadow;
|
||||
|
||||
$empty-list-cta-bg: $gray-blue;
|
||||
$empty-list-cta-bg: #202226;
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: #404357;
|
||||
@ -206,13 +205,12 @@ $input-bg: $input-black;
|
||||
$input-bg-disabled: $dark-6;
|
||||
|
||||
$input-color: #c7d0d9;
|
||||
$input-border-color: #202226;
|
||||
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
|
||||
$input-border-color: #343b40;
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: #5794f2;
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: #555555;
|
||||
$input-label-bg: #202226;
|
||||
$input-label-border-color: #202226;
|
||||
$input-color-select-arrow: $white;
|
||||
|
||||
// Search
|
||||
@ -252,14 +250,15 @@ $navbar-button-border: #2f2f32;
|
||||
$side-menu-bg: $panel-bg;
|
||||
$side-menu-bg-mobile: $panel-bg;
|
||||
$side-menu-border: none;
|
||||
$side-menu-item-hover-bg: $dark-3;
|
||||
$side-menu-item-hover-bg: #202226;
|
||||
$side-menu-shadow: 0 0 20px black;
|
||||
$side-menu-link-color: #9fa7b3;
|
||||
$side-menu-icon-color: #9fa7b3;
|
||||
$side-menu-header-color: #c7d0d9;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $dark-3;
|
||||
$menu-dropdown-bg: #141619;
|
||||
$menu-dropdown-hover-bg: #202226;
|
||||
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
|
||||
// Tabs
|
||||
@ -357,7 +356,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
|
||||
$switch-bg: $input-bg;
|
||||
$switch-slider-color: $dark-3;
|
||||
$switch-slider-off-bg: $gray-1;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
|
||||
$switch-slider-on-bg: #5794f2;
|
||||
$switch-slider-shadow: 0 0 3px black;
|
||||
|
||||
//Checkbox
|
||||
@ -381,7 +380,7 @@ $panel-editor-tabs-line-color: #e3e3e3;
|
||||
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-blue;
|
||||
$panel-options-group-header-bg: #202226;
|
||||
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
|
||||
|
||||
@ -145,13 +145,7 @@ $link-hover-decoration: none !default;
|
||||
|
||||
// Forms
|
||||
$input-line-height: 18px !default;
|
||||
|
||||
$input-border-radius: 0 $border-radius $border-radius 0 !default;
|
||||
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
|
||||
|
||||
$label-border-radius: $border-radius 0 0 $border-radius !default;
|
||||
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
|
||||
|
||||
$input-border-radius: $border-radius;
|
||||
$input-padding: 0 8px;
|
||||
$input-height: 32px !default;
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ $red: $red-base;
|
||||
$yellow: #ff851b;
|
||||
$orange: #ff7941;
|
||||
$purple: #9954bb;
|
||||
$variable: #0083b3;
|
||||
$variable: #339ae5;
|
||||
|
||||
$brand-primary: #ff7941;
|
||||
$brand-success: #3eb15b;
|
||||
@ -72,7 +72,6 @@ $query-red: #e02f44;
|
||||
$query-green: #3eb15b;
|
||||
$query-purple: #9954bb;
|
||||
$query-orange: #ff7941;
|
||||
$query-keyword: #3274d9;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
@ -91,6 +90,7 @@ $text-color-strong: #41444b;
|
||||
$text-color-weak: #767980;
|
||||
$text-color-faint: #35373f;
|
||||
$text-color-emphasis: #41444b;
|
||||
$text-blue: #339ae5;
|
||||
|
||||
$text-shadow-faint: none;
|
||||
|
||||
@ -117,7 +117,7 @@ $hr-border-color: $gray-4 !default;
|
||||
// -------------------------
|
||||
$panel-bg: #ffffff;
|
||||
$panel-border: 1px solid #e9edf2;
|
||||
$panel-header-hover-bg: $gray-6;
|
||||
$panel-header-hover-bg: #f7f8fa;
|
||||
$panel-corner: $gray-4;
|
||||
|
||||
// Page header
|
||||
@ -198,13 +198,12 @@ $input-bg: $white;
|
||||
$input-bg-disabled: $gray-5;
|
||||
|
||||
$input-color: #343b40;
|
||||
$input-border-color: #e9edf2;
|
||||
$input-border-color: #c7d0d9;
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: #5794f2;
|
||||
$input-box-shadow-focus: #5794f2;
|
||||
$input-color-placeholder: #9fa7b3;
|
||||
$input-label-bg: #e9edf2;
|
||||
$input-label-border-color: #e9edf2;
|
||||
$input-label-bg: #f7f8fa;
|
||||
$input-color-select-arrow: #7b8087;
|
||||
|
||||
// search
|
||||
@ -248,6 +247,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: #343b40;
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
$side-menu-link-color: $gray-4;
|
||||
$side-menu-icon-color: #9fa7b3;
|
||||
$side-menu-header-color: #e9edf2;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
@ -348,7 +349,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
|
||||
$switch-bg: $white;
|
||||
$switch-slider-color: $gray-7;
|
||||
$switch-slider-off-bg: $gray-5;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
|
||||
$switch-slider-on-bg: #1f60c4;
|
||||
$switch-slider-shadow: 0 0 3px $dark-2;
|
||||
|
||||
//Checkbox
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
font-size: $font-size-md;
|
||||
min-height: 50px; // Include space for horizontal scrollbar
|
||||
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@include border-radius($input-border-radius);
|
||||
border: $border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
@ -55,7 +55,6 @@
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
background-color: $dropdownBackground;
|
||||
border: 1px solid #ccc; // Fallback for IE7-8
|
||||
border: 1px solid $dropdownBorder;
|
||||
text-align: left;
|
||||
|
||||
@ -111,7 +110,6 @@
|
||||
background: $menu-dropdown-bg;
|
||||
box-shadow: $menu-dropdown-shadow;
|
||||
margin-top: 0px;
|
||||
border: none;
|
||||
|
||||
> li > a {
|
||||
display: flex;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
$input-border: 1px solid $input-border-color;
|
||||
|
||||
.gf-form {
|
||||
margin-bottom: $space-xxs;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
margin-bottom: $space-xs;
|
||||
|
||||
&--offset-1 {
|
||||
margin-left: $spacer;
|
||||
@ -83,13 +83,13 @@ $input-border: 1px solid $input-border-color;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
.gf-form + .gf-form {
|
||||
margin-left: $space-xs;
|
||||
}
|
||||
|
||||
&--nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-button-row {
|
||||
@ -107,13 +107,11 @@ $input-border: 1px solid $input-border-color;
|
||||
flex-shrink: 0;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
background-color: $input-label-bg;
|
||||
height: $input-height;
|
||||
|
||||
border: $border-width solid $input-label-border-color;
|
||||
border-right: none;
|
||||
border-radius: $label-border-radius;
|
||||
margin-right: $space-xs;
|
||||
border-radius: $input-border-radius;
|
||||
justify-content: space-between;
|
||||
|
||||
&--grow {
|
||||
flex-grow: 1;
|
||||
@ -134,11 +132,10 @@ $input-border: 1px solid $input-border-color;
|
||||
color: $variable;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&--btn {
|
||||
border-right: $border-width solid $input-label-border-color;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
@ -167,7 +164,7 @@ $input-border: 1px solid $input-border-color;
|
||||
margin-right: $space-xs;
|
||||
border: $border-width solid transparent;
|
||||
border-left: none;
|
||||
@include border-radius($label-border-radius-sm);
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
.gf-form-textarea {
|
||||
@ -187,7 +184,7 @@ $input-border: 1px solid $input-border-color;
|
||||
background-clip: padding-box;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
@include box-shadow($input-box-shadow);
|
||||
margin-right: $space-xs;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -274,6 +271,7 @@ $input-border: 1px solid $input-border-color;
|
||||
.gf-form-select-wrapper {
|
||||
position: relative;
|
||||
background-color: $input-bg;
|
||||
margin-right: $space-xs;
|
||||
|
||||
.gf-form-select-icon {
|
||||
position: absolute;
|
||||
|
||||
@ -124,7 +124,6 @@ i.navbar-page-btn__search {
|
||||
align-items: center;
|
||||
font-weight: $btn-font-weight;
|
||||
padding: 0 $space-sm;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
color: $text-muted;
|
||||
border: 1px solid $navbar-button-border;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.query-keyword {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $blue;
|
||||
color: $text-blue;
|
||||
}
|
||||
|
||||
.query-segment-operator {
|
||||
|
||||
@ -65,6 +65,7 @@ $mobile-menu-breakpoint: md;
|
||||
@include left-brand-border-gradient();
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
@ -84,7 +85,7 @@ $mobile-menu-breakpoint: md;
|
||||
}
|
||||
|
||||
.sidemenu-link {
|
||||
color: $side-menu-link-color !important;
|
||||
color: $side-menu-icon-color !important;
|
||||
line-height: 42px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
display: block;
|
||||
@ -128,11 +129,11 @@ $mobile-menu-breakpoint: md;
|
||||
white-space: nowrap;
|
||||
background-color: $side-menu-item-hover-bg;
|
||||
font-size: 17px;
|
||||
color: $side-menu-link-color;
|
||||
color: $side-menu-header-color;
|
||||
}
|
||||
|
||||
.side-menu-header-link {
|
||||
color: $side-menu-link-color !important;
|
||||
color: $side-menu-header-color !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.class-name {
|
||||
color: $query-keyword;
|
||||
color: $text-blue;
|
||||
}
|
||||
|
||||
.token.punctuation,
|
||||
|
||||
@ -21,6 +21,7 @@ gf-form-switch[disabled] {
|
||||
.gf-form-switch-container {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.gf-form-switch {
|
||||
@ -30,7 +31,6 @@ gf-form-switch[disabled] {
|
||||
height: $input-height;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
border-left: none;
|
||||
border-radius: $input-border-radius;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user