Skip to content

N
nexpie-grafana-theme
Commit 4d9d3270 by Torkel Ödegaard Committed by GitHub
Options

CSS: Various css bug fixes (Safari fix for graph panels and more) (#23704) 

* CSS: Various css bug fixes

* Updated
parent 4a134673
Showing with 54 additions and 44 deletions
packages/grafana-data/package.json
......@@ -42,6 +42,7 @@
"@types/react": "16.8.16",
"@types/sinon": "^7.5.2",
"@types/rollup-plugin-visualizer": "2.6.0",
"@types/braintree__sanitize-url": "4.0.0",
"pretty-format": "25.1.0",
"rollup": "2.0.6",
"rollup-plugin-sourcemaps": "0.5.0",
......
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
......@@ -6,7 +6,8 @@ import { css, cx } from 'emotion';
import RCCascader from 'rc-cascader';
import { CascaderOption } from '../Cascader/Cascader';
import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
import { stylesFactory } from '../../themes';
import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '@grafana/data';
export interface ButtonCascaderProps {
options: CascaderOption[];
......@@ -20,11 +21,11 @@ export interface ButtonCascaderProps {
className?: string;
}
const getStyles = stylesFactory(() => {
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
popup: css`
label: popup;
z-index: 100;
z-index: ${theme.zIndex.dropdown};
`,
icon: css`
margin: 1px 0 0 4px;
......@@ -34,7 +35,8 @@ const getStyles = stylesFactory(() => {
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
const { onChange, className, loadData, ...rest } = props;
const styles = getStyles();
const theme = useTheme();
const styles = getStyles(theme);
return (
<RCCascader
......
packages/grafana-ui/src/components/Modal/getModalStyles.ts
......@@ -39,7 +39,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
height: 42px;
`,
modalHeaderTitle: css`
font-size: ${theme.typography.heading.h3};
font-size: ${theme.typography.size.lg};
margin: 0 ${theme.spacing.md};
display: flex;
align-items: center;
......
packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
......@@ -2,7 +2,7 @@
exports[`TimePickerContent renders correctly in full screen 1`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
className="css-dlnzj7"
......@@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
exports[`TimePickerContent renders correctly in narrow screen 1`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
className="css-dlnzj7"
......@@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
className="css-dlnzj7"
......
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
......@@ -257,13 +257,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
},
},
"zIndex": Object {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
"dropdown": "1030",
"modal": "1060",
"modalBackdrop": "1050",
"navbarFixed": "1000",
"sidemenu": "1020",
"tooltip": "1040",
"typeahead": "1030",
},
}
}
......@@ -573,13 +573,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
},
},
"zIndex": Object {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
"dropdown": "1030",
"modal": "1060",
"modalBackdrop": "1050",
"navbarFixed": "1000",
"sidemenu": "1020",
"tooltip": "1040",
"typeahead": "1030",
},
}
}
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
......@@ -135,7 +135,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40;
$modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
......@@ -128,7 +128,7 @@ $divider-border-color: $gray-2;
$tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg;
$modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;
......
packages/grafana-ui/src/themes/default.ts
......@@ -122,13 +122,13 @@ const theme: GrafanaThemeCommons = {
panelPadding: 8,
panelHeaderHeight: 28,
zIndex: {
dropdown: '1000',
navbarFixed: '1020',
sidemenu: '1025',
tooltip: '1030',
modalBackdrop: '1040',
modal: '1050',
typeahead: '1060',
navbarFixed: '1000',
sidemenu: '1020',
dropdown: '1030',
typeahead: '1030',
tooltip: '1040',
modalBackdrop: '1050',
modal: '1060',
},
};
......
public/app/features/dashboard/utils/panel.ts
......@@ -32,7 +32,7 @@ export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: b
title: 'Remove Panel',
text: 'Are you sure you want to remove this panel?',
text2: text2,
icon: 'fa-trash',
icon: 'trash-alt',
confirmText: confirmText,
yesText: 'Remove',
onConfirm: () => removePanel(dashboard, panel, false),
......
public/sass/_variables.dark.generated.scss
......@@ -138,7 +138,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40;
$modal-backdrop-bg: #141619;
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
......
public/sass/_variables.generated.scss
......@@ -160,13 +160,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-navbar-fixed: 1020;
$zindex-sidemenu: 1025;
$zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-typeahead: 1060;
$zindex-dropdown: 1030;
$zindex-navbar-fixed: 1000;
$zindex-sidemenu: 1020;
$zindex-tooltip: 1040;
$zindex-modal-backdrop: 1050;
$zindex-modal: 1060;
$zindex-typeahead: 1030;
// Buttons
//
......
public/sass/_variables.light.generated.scss
......@@ -131,7 +131,7 @@ $divider-border-color: $gray-2;
$tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg;
$modal-backdrop-bg: #ffffff;
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;
......
public/sass/components/_modals.scss
......@@ -40,11 +40,13 @@
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
@include clearfix();
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header-title {
font-size: $font-size-h3;
font-size: $font-size-lg;
float: left;
padding-top: $space-sm;
margin: 0 $space-md;
......
public/sass/pages/_dashboard.scss
......@@ -84,7 +84,7 @@ div.flot-text {
padding: $panel-padding;
width: 100%;
flex-grow: 1;
max-height: calc(100% - #{$panel-header-height});
height: calc(100% - #{$panel-header-height});
&--no-padding {
padding: 0;
......
yarn.lock
......@@ -5060,6 +5060,11 @@
"@types/connect" "*"
"@types/node" "*"
"@types/braintree__sanitize-url@4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/braintree__sanitize-url/-/braintree__sanitize-url-4.0.0.tgz#0e8a834501f8c375d4b3fb8dcf9398a08ebe068d"
integrity sha512-69eGJ8808/WfTJGsvMi1pxQ9UG5Z+llD1x9ash5QX+qvxElDD+eYNAn19cTEVTq6WwUqrqlaTWVCKaTRFTuGmA==
"@types/cheerio@*":
version "0.22.13"
resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.13.tgz#5eecda091a24514185dcba99eda77e62bf6523e6"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment