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