apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Styles & Theme: Inline form styles polish & tweaks (#23521)

Browse Source 
* 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
pull/23527/head
Torkel Ödegaard 6 years ago committed by GitHub
parent d4516439ec
commit 8b7decf57b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 133 additions and 218 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      packages/grafana-data/src/types/theme.ts
  2. 1
      packages/grafana-ui/src/components/Button/Button.tsx
  3. 17
      packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
  4. 3
      packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
  5. 6
      packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
  6. 2
      packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
  7. 2
      packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
  8. 6
      packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
  9. 6
      packages/grafana-ui/src/components/IconButton/IconButton.tsx
  10. 3
      packages/grafana-ui/src/components/Modal/getModalStyles.ts
  11. 2
      packages/grafana-ui/src/components/Select/SelectBase.tsx
  12. 12
      packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
  13. 10
      packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
  14. 10
      packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
  15. 3
      packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
  16. 31
      packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
  17. 15
      packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
  18. 8
      packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
  19. 3
      packages/grafana-ui/src/themes/dark.ts
  20. 2
      packages/grafana-ui/src/themes/default.ts
  21. 5
      packages/grafana-ui/src/themes/light.ts
  22. 44
      public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
  23. 2
      public/app/core/components/Select/FolderPicker.tsx
  24. 1
      public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
  25. 2
      public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
  26. 6
      public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
  27. 42
      public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
  28. 6
      public/app/plugins/datasource/testdata/partials/query.editor.html
  29. 29
      public/sass/_variables.dark.generated.scss
  30. 8
      public/sass/_variables.generated.scss
  31. 15
      public/sass/_variables.light.generated.scss
  32. 2
      public/sass/components/_code_editor.scss
  33. 2
      public/sass/components/_dropdown.scss
  34. 26
      public/sass/components/_gf-form.scss
  35. 1
      public/sass/components/_navbar.scss
  36. 2
      public/sass/components/_query_editor.scss
  37. 7
      public/sass/components/_sidemenu.scss
  38. 2
      public/sass/components/_slate_editor.scss
  39. 2
      public/sass/components/_switch.scss

5
packages/grafana-data/src/types/theme.ts
Unescape View File

@ -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;

1
packages/grafana-ui/src/components/Button/Button.tsx
Unescape View File

@ -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};

17
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
Unescape View File

@ -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>
);

3
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
Unescape View File

@ -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;

6
packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
Unescape View File

@ -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"

2
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
Unescape View File

@ -38,7 +38,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
color: ${theme.palette.queryGreen};
}
.token.variable {
color: ${theme.palette.queryKeyword};
color: ${theme.colors.textBlue};
}
`,
}));

2
packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
Unescape View File

@ -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;
}

6
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
Unescape View File

@ -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;

6
packages/grafana-ui/src/components/IconButton/IconButton.tsx
Unescape View File

@ -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;
}
}

3
packages/grafana-ui/src/components/Modal/getModalStyles.ts
Unescape View File

@ -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;

2
packages/grafana-ui/src/components/Select/SelectBase.tsx
Unescape View File

@ -277,7 +277,7 @@ export function SelectBase<T>({
width: inputSizesPixels(size),
}),
}}
className={widthClass}
className={cx('select-container', widthClass)}
{...commonSelectProps}
{...creatableProps}
{...asyncSelectProps}

12
packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
Unescape View File

@ -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={

10
packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
Unescape View File

@ -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(
{

10
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
Unescape View File

@ -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",

3
packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
Unescape View File

@ -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%;

31
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Unescape View File

@ -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;

15
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
Unescape View File

@ -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

8
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
Unescape View File

@ -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;

3
packages/grafana-ui/src/themes/dark.ts
Unescape View File

@ -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,

2
packages/grafana-ui/src/themes/default.ts
Unescape View File

@ -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

5
packages/grafana-ui/src/themes/light.ts
Unescape View File

@ -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,

44
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
Unescape View File

@ -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};
`,
};
});

2
public/app/core/components/Select/FolderPicker.tsx
Unescape View File

@ -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>

1
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
Unescape View File

@ -21,7 +21,6 @@ exports[`FolderPicker should render 1`] = `
loadingMessage="Loading folders..."
onChange={[Function]}
onCreateOption={[Function]}
size="sm"
value={Object {}}
/>
</div>

2
public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
Unescape View File

@ -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;

6
public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
Unescape View File

@ -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} />

42
public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
Unescape View File

@ -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",

6
public/app/plugins/datasource/testdata/partials/query.editor.html vendored
Unescape View File

@ -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"

29
public/sass/_variables.dark.generated.scss
Unescape View File

@ -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;

8
public/sass/_variables.generated.scss
Unescape View File

@ -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;

15
public/sass/_variables.light.generated.scss
Unescape View File

@ -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

2
public/sass/components/_code_editor.scss
Unescape View File

@ -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;
}

2
public/sass/components/_dropdown.scss
Unescape View File

@ -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;

26
public/sass/components/_gf-form.scss
Unescape View File

@ -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;

1
public/sass/components/_navbar.scss
Unescape View File

@ -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;

2
public/sass/components/_query_editor.scss
Unescape View File

@ -1,6 +1,6 @@
.query-keyword {
font-weight: $font-weight-semi-bold;
color: $blue;
color: $text-blue;
}
.query-segment-operator {

7
public/sass/components/_sidemenu.scss
Unescape View File

@ -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;
}

2
public/sass/components/_slate_editor.scss
Unescape View File

@ -130,7 +130,7 @@
.token.atrule,
.token.keyword,
.token.class-name {
color: $query-keyword;
color: $text-blue;
}
.token.punctuation,

2
public/sass/components/_switch.scss
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save