Skip to content

N
nexpie-grafana-theme
Commit 52851a38 by Patrick O'Carroll Committed by Torkel Ödegaard
Options

Refactor: Theme input padding variables (#16048) 

* removed input padding variables and replaced with new inset variables, also removed unused class in _gf-form

* removed last input padding variable

* removed table-cell-padding variable

* added input padding variable to template file

* fixed input-padding variable

* removed regualt inset variable(for now), added input-padding to a class

* removed empty line
parent 0112bdeb
Showing with 36 additions and 54 deletions
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
.thresholds-row-input-inner-value > input { .thresholds-row-input-inner-value > input {
height: $input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding;
width: 150px; width: 150px;
border-top: 1px solid $input-label-border-color; border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color; border-bottom: 1px solid $input-label-border-color;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding;
width: 42px; width: 42px;
background-color: $input-label-bg; background-color: $input-label-bg;
border: 1px solid $input-label-border-color; border: 1px solid $input-label-border-color;
......
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
...@@ -17,12 +17,15 @@ $enable-hover-media-query: false !default; ...@@ -17,12 +17,15 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these // Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-inset-squish-md: ${theme.spacing.insetSquishMd} !default;
$space-xxs: ${theme.spacing.xxs} !default; $space-xxs: ${theme.spacing.xxs} !default;
$space-xs: ${theme.spacing.xs} !default; $space-xs: ${theme.spacing.xs} !default;
$space-sm: ${theme.spacing.sm} !default; $space-sm: ${theme.spacing.sm} !default;
$space-md: ${theme.spacing.md} !default; $space-md: ${theme.spacing.md} !default;
$space-lg: ${theme.spacing.lg} !default; $space-lg: ${theme.spacing.lg} !default;
$space-xl: ${theme.spacing.xl} !default; $space-xl: ${theme.spacing.xl} !default;
$spacer: ${theme.spacing.d} !default; $spacer: ${theme.spacing.d} !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
...@@ -132,15 +135,7 @@ $page-sidebar-margin: 56px; ...@@ -132,15 +135,7 @@ $page-sidebar-margin: 56px;
$link-decoration: ${theme.typography.link.decoration} !default; $link-decoration: ${theme.typography.link.decoration} !default;
$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default; $link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
// Tables
//
// Customizes the \`.table\` component with basic values, each used across all table variations.
$table-cell-padding: 4px 10px !default;
// Forms // Forms
$input-padding-x: 10px !default;
$input-padding-y: 8px !default;
$input-line-height: 18px !default; $input-line-height: 18px !default;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
...@@ -149,9 +144,7 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; ...@@ -149,9 +144,7 @@ $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: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding-x-lg: 20px !default; $input-padding: ${theme.spacing.sm};
$input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
......
packages/grafana-ui/src/themes/default.ts
...@@ -47,6 +47,7 @@ const theme: GrafanaThemeCommons = { ...@@ -47,6 +47,7 @@ const theme: GrafanaThemeCommons = {
xl: '1200px', xl: '1200px',
}, },
spacing: { spacing: {
insetSquishMd: '4px 8px',
d: '14px', d: '14px',
xxs: '2px', xxs: '2px',
xs: '4px', xs: '4px',
......
packages/grafana-ui/src/types/theme.ts
...@@ -52,6 +52,7 @@ export interface GrafanaThemeCommons { ...@@ -52,6 +52,7 @@ export interface GrafanaThemeCommons {
}; };
}; };
spacing: { spacing: {
insetSquishMd: string;
d: string; d: string;
xxs: string; xxs: string;
xs: string; xs: string;
......
public/sass/_variables.generated.scss
...@@ -20,12 +20,15 @@ $enable-hover-media-query: false !default; ...@@ -20,12 +20,15 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these // Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-inset-squish-md: 4px 8px !default;
$space-xxs: 2px !default; $space-xxs: 2px !default;
$space-xs: 4px !default; $space-xs: 4px !default;
$space-sm: 8px !default; $space-sm: 8px !default;
$space-md: 16px !default; $space-md: 16px !default;
$space-lg: 24px !default; $space-lg: 24px !default;
$space-xl: 32px !default; $space-xl: 32px !default;
$spacer: 14px !default; $spacer: 14px !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
...@@ -135,15 +138,7 @@ $page-sidebar-margin: 56px; ...@@ -135,15 +138,7 @@ $page-sidebar-margin: 56px;
$link-decoration: none !default; $link-decoration: none !default;
$link-hover-decoration: none !default; $link-hover-decoration: none !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: 4px 10px !default;
// Forms // Forms
$input-padding-x: 10px !default;
$input-padding-y: 8px !default;
$input-line-height: 18px !default; $input-line-height: 18px !default;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
...@@ -152,9 +147,7 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; ...@@ -152,9 +147,7 @@ $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: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding-x-lg: 20px !default; $input-padding: 8px;
$input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
......
public/sass/base/_forms.scss
...@@ -224,7 +224,7 @@ input[type='checkbox'].cr1:checked + label { ...@@ -224,7 +224,7 @@ input[type='checkbox'].cr1:checked + label {
.form-control-success, .form-control-success,
.form-control-warning, .form-control-warning,
.form-control-danger { .form-control-danger {
padding-right: ($input-padding-x * 3); padding-right: $space-xl;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right ($input-height / 4); background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2); background-size: ($input-height / 2) ($input-height / 2);
......
public/sass/base/_reboot.scss
...@@ -250,8 +250,8 @@ table { ...@@ -250,8 +250,8 @@ table {
} }
caption { caption {
padding-top: $table-cell-padding; padding-top: $space-inset-squish-md;
padding-bottom: $table-cell-padding; padding-bottom: $space-inset-squish-md;
color: $text-muted; color: $text-muted;
text-align: left; text-align: left;
caption-side: bottom; caption-side: bottom;
......
public/sass/components/_dropdown.scss
...@@ -265,7 +265,7 @@ ...@@ -265,7 +265,7 @@
.dropdown-submenu > a::after { .dropdown-submenu > a::after {
position: absolute; position: absolute;
top: 35%; top: 35%;
right: $input-padding-x; right: $space-sm;
background-color: transparent; background-color: transparent;
color: $text-color-weak; color: $text-color-weak;
font: normal normal normal $font-size-sm/1 FontAwesome; font: normal normal normal $font-size-sm/1 FontAwesome;
......
public/sass/components/_filter-table.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
th { th {
width: auto; width: auto;
padding: $table-cell-padding; padding: $space-inset-squish-md;
text-align: left; text-align: left;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
} }
td { td {
padding: $table-cell-padding; padding: $space-inset-squish-md;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
white-space: nowrap; white-space: nowrap;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
a { a {
display: block; display: block;
padding: $table-cell-padding; padding: $space-inset-squish-md;
} }
} }
......
public/sass/components/_gf-form.scss
...@@ -98,7 +98,7 @@ $input-border: 1px solid $input-border-color; ...@@ -98,7 +98,7 @@ $input-border: 1px solid $input-border-color;
} }
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x; padding: $input-padding;
flex-shrink: 0; flex-shrink: 0;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
font-size: $font-size-sm; font-size: $font-size-sm;
...@@ -167,7 +167,7 @@ $input-border: 1px solid $input-border-color; ...@@ -167,7 +167,7 @@ $input-border: 1px solid $input-border-color;
display: block; display: block;
width: 100%; width: 100%;
height: $input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding;
font-size: $font-size-md; font-size: $font-size-md;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
...@@ -195,11 +195,6 @@ $input-border: 1px solid $input-border-color; ...@@ -195,11 +195,6 @@ $input-border: 1px solid $input-border-color;
display: none; display: none;
} }
&.gf-input-small {
padding: $input-padding-y/3 $input-padding-x/3;
font-size: $font-size-xs;
}
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus(); @include form-control-focus();
...@@ -225,7 +220,7 @@ $input-border: 1px solid $input-border-color; ...@@ -225,7 +220,7 @@ $input-border: 1px solid $input-border-color;
} }
&--dropdown { &--dropdown {
padding-right: $input-padding-x * 2; padding-right: $space-lg;
&::after { &::after {
position: absolute; position: absolute;
...@@ -251,7 +246,7 @@ $input-border: 1px solid $input-border-color; ...@@ -251,7 +246,7 @@ $input-border: 1px solid $input-border-color;
} }
&--has-help-icon { &--has-help-icon {
padding-right: $input-padding-x * 3; padding-right: $space-xl;
} }
} }
...@@ -272,14 +267,14 @@ $input-border: 1px solid $input-border-color; ...@@ -272,14 +267,14 @@ $input-border: 1px solid $input-border-color;
.gf-form-select-icon { .gf-form-select-icon {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: $input-padding-x; left: $input-padding;
top: 50%; top: 50%;
margin-top: -7px; margin-top: -7px;
& + .gf-form-input { & + .gf-form-input {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-left: $input-padding-x * 3; padding-left: $space-xl;
background-color: transparent; background-color: transparent;
option { option {
...@@ -296,7 +291,7 @@ $input-border: 1px solid $input-border-color; ...@@ -296,7 +291,7 @@ $input-border: 1px solid $input-border-color;
select.gf-form-input { select.gf-form-input {
text-indent: 0.01px; text-indent: 0.01px;
text-overflow: ''; text-overflow: '';
padding-right: $input-padding-x * 3; padding-right: $space-xl;
appearance: none; appearance: none;
&:-moz-focusring { &:-moz-focusring {
...@@ -324,7 +319,7 @@ $input-border: 1px solid $input-border-color; ...@@ -324,7 +319,7 @@ $input-border: 1px solid $input-border-color;
&--has-help-icon { &--has-help-icon {
&::after { &::after {
right: $input-padding-x * 3; right: $space-xl;
} }
} }
} }
...@@ -334,7 +329,7 @@ $input-border: 1px solid $input-border-color; ...@@ -334,7 +329,7 @@ $input-border: 1px solid $input-border-color;
} }
.gf-form-btn { .gf-form-btn {
padding: $input-padding-y $input-padding-x; padding: $input-padding;
margin-right: $space-xs; margin-right: $space-xs;
line-height: $input-line-height; line-height: $input-line-height;
font-size: $font-size-sm; font-size: $font-size-sm;
...@@ -348,7 +343,7 @@ $input-border: 1px solid $input-border-color; ...@@ -348,7 +343,7 @@ $input-border: 1px solid $input-border-color;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height; line-height: $input-line-height;
margin: -6px -5px 0 5px; margin: -6px -5px 0 5px;
padding: $input-padding-y/2 $input-padding-x/2; padding: $space-xs;
} }
} }
...@@ -359,7 +354,7 @@ $input-border: 1px solid $input-border-color; ...@@ -359,7 +354,7 @@ $input-border: 1px solid $input-border-color;
&::after { &::after {
position: absolute; position: absolute;
top: 35%; top: 35%;
right: $input-padding-x; right: $space-sm;
background-color: transparent; background-color: transparent;
color: $input-color; color: $input-color;
font: normal normal normal $font-size-sm/1 FontAwesome; font: normal normal normal $font-size-sm/1 FontAwesome;
......
public/sass/components/_slate_editor.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.slate-query-field__wrapper { .slate-query-field__wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: $input-padding-y $input-padding-x; padding: $input-padding;
min-height: $input-height; min-height: $input-height;
width: 100%; width: 100%;
cursor: text; cursor: text;
...@@ -51,14 +51,13 @@ ...@@ -51,14 +51,13 @@
color: $text-color-weak; color: $text-color-weak;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $line-height-base; line-height: $line-height-base;
padding: $input-padding-y $input-padding-x; padding: $space-sm;
} }
.typeahead-item { .typeahead-item {
height: auto; height: auto;
font-family: $font-family-monospace; font-family: $font-family-monospace;
padding: $input-padding-y $input-padding-x; padding: $space-sm $space-sm $space-sm $space-md;
padding-left: $input-padding-x-lg;
font-size: $font-size-sm; font-size: $font-size-sm;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
......
public/sass/components/_submenu.scss
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
.variable-value-link { .variable-value-link {
padding-right: 10px; padding-right: 10px;
padding: $input-padding-y $input-padding-x; padding: $space-sm;
background-color: $input-bg; background-color: $input-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-radius: $input-border-radius; border-radius: $input-border-radius;
......
public/sass/components/_tagsinput.scss
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
box-sizing: border-box; box-sizing: border-box;
&.gf-form-input--has-help-icon { &.gf-form-input--has-help-icon {
padding-right: $input-padding-x * 3; padding-right: $space-xl;
} }
} }
......
public/sass/components/_toolbar.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
} }
.toolbar__main { .toolbar__main {
padding: 0 $input-padding-x; padding: 0 $space-sm;
font-size: $font-size-md; font-size: $font-size-md;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
......
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