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

Merge pull request #15963 from grafana/sass-variable-cleanout

Browse Source 
Cleaned out some sass variables
pull/15970/head
Torkel Ödegaard 6 years ago committed by GitHub
parent 78b2978846 e632309ab9
commit 6445d6cb64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 42 additions and 69 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. 4
      packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
  2. 29
      packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
  3. 8
      packages/grafana-ui/src/themes/default.ts
  4. 4
      packages/grafana-ui/src/types/theme.ts
  5. 22
      public/sass/_variables.generated.scss
  6. 2
      public/sass/base/_forms.scss
  7. 4
      public/sass/base/_reboot.scss
  8. 4
      public/sass/base/_type.scss
  9. 10
      public/sass/components/_buttons.scss
  10. 2
      public/sass/components/_code_editor.scss
  11. 10
      public/sass/components/_gf-form.scss
  12. 2
      public/sass/components/_panel_gettingstarted.scss
  13. 2
      public/sass/components/_slate_editor.scss
  14. 2
      public/sass/components/_submenu.scss
  15. 4
      public/sass/components/_switch.scss
  16. 2
      public/sass/components/_toolbar.scss

4
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
Unescape View File

@ -68,7 +68,7 @@
}
.thresholds-row-input-inner-value > input {
height: $gf-form-input-height;
height: $input-height;
padding: $input-padding-y $input-padding-x;
width: 150px;
border-top: 1px solid $input-label-border-color;
@ -96,7 +96,7 @@
display: flex;
align-items: center;
justify-content: center;
height: $gf-form-input-height;
height: $input-height;
padding: $input-padding-y $input-padding-x;
width: 42px;
background-color: $input-label-bg;

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

@ -52,7 +52,6 @@ $spacers: (
),
),
) !default;
$border-width: ${theme.border.width.sm} !default;
// Grid breakpoints
//
@ -83,16 +82,13 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$enable-flex: true;
$grid-gutter-width: ${theme.spacing.gutter} !default;
// Typography
// -------------------------
$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif};
$font-family-monospace: ${theme.typography.fontFamily.monospace};
$font-family-base: $font-family-sans-serif !default;
$font-size-root: ${theme.typography.size.root} !default;
$font-size-base: ${theme.typography.size.base} !default;
@ -103,7 +99,9 @@ $font-size-sm: ${theme.typography.size.sm} !default;
$font-size-xs: ${theme.typography.size.xs} !default;
$line-height-base: ${theme.typography.lineHeight.lg} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold};
$font-weight-regular: ${theme.typography.weight.regular} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold} !default;
$font-size-h1: ${theme.typography.heading.h1} !default;
$font-size-h2: ${theme.typography.heading.h2} !default;
@ -113,22 +111,17 @@ $font-size-h5: ${theme.typography.heading.h5} !default;
$font-size-h6: ${theme.typography.heading.h6} !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-weight: ${theme.typography.weight.normal} !default;
$headings-line-height: ${theme.typography.lineHeight.sm} !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-width: ${theme.border.width.sm} !default;
$border-radius: 3px !default;
$border-radius-lg: 5px !default;
$border-radius-sm: 2px !default;
$border-radius: ${theme.border.radius.md} !default;
$border-radius-lg: ${theme.border.radius.lg}!default;
$border-radius-sm: ${theme.border.radius.sm} !default;
// Page
@ -151,22 +144,17 @@ $input-padding-x: 10px !default;
$input-padding-y: 8px !default;
$input-line-height: 18px !default;
$input-btn-border-width: 1px;
$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-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
// Form validation icons
@ -203,7 +191,6 @@ $btn-padding-y-lg: 11px !default;
$btn-padding-x-xl: 21px !default;
$btn-padding-y-xl: 11px !default;
$btn-border-radius: 2px;
$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;

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

@ -25,7 +25,7 @@ const theme: GrafanaThemeCommons = {
},
weight: {
light: 300,
normal: 400,
regular: 400,
semibold: 500,
},
lineHeight: {
@ -54,9 +54,9 @@ const theme: GrafanaThemeCommons = {
},
border: {
radius: {
xs: '2px',
sm: '3px',
md: '5px',
sm: '2px',
md: '3px',
lg: '5px',
},
width: {
sm: '1px',

4
packages/grafana-ui/src/types/theme.ts
Unescape View File

@ -28,7 +28,7 @@ export interface GrafanaThemeCommons {
};
weight: {
light: number;
normal: number;
regular: number;
semibold: number;
};
lineHeight: {
@ -59,9 +59,9 @@ export interface GrafanaThemeCommons {
};
border: {
radius: {
xs: string;
sm: string;
md: string;
lg: string;
};
width: {
sm: string;

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

@ -55,7 +55,6 @@ $spacers: (
),
),
) !default;
$border-width: 1px !default;
// Grid breakpoints
//
@ -88,14 +87,11 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$enable-flex: true;
// Typography
// -------------------------
$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default;
$font-size-base: 13px !default;
@ -106,7 +102,9 @@ $font-size-sm: 12px !default;
$font-size-xs: 10px !default;
$line-height-base: 1.5 !default;
$font-weight-semi-bold: 500;
$font-weight-regular: 400 !default;
$font-weight-semi-bold: 500 !default;
$font-size-h1: 28px !default;
$font-size-h2: 24px !default;
@ -116,18 +114,13 @@ $font-size-h5: 16px !default;
$font-size-h6: 14px !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-width: 1px !default;
$border-radius: 3px !default;
$border-radius-lg: 5px !default;
@ -154,22 +147,17 @@ $input-padding-x: 10px !default;
$input-padding-y: 8px !default;
$input-line-height: 18px !default;
$input-btn-border-width: 1px;
$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-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
// Form validation icons
@ -206,8 +194,6 @@ $btn-padding-y-lg: 11px !default;
$btn-padding-x-xl: 21px !default;
$btn-padding-y-xl: 11px !default;
$btn-border-radius: 2px;
$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
// sidemenu

2
public/sass/base/_forms.scss
Unescape View File

@ -37,7 +37,7 @@ input,
button,
select,
textarea {
font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
font-family: $font-family-sans-serif; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels

4
public/sass/base/_reboot.scss
Unescape View File

@ -70,7 +70,7 @@ html {
body {
// Make the `body` use the `font-size-root`
font-family: $font-family-base;
font-family: $font-family-sans-serif;
font-size: $font-size-base;
line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
@ -145,7 +145,7 @@ ul ol {
}
dt {
font-weight: $dt-font-weight;
font-weight: $font-weight-semi-bold;
}
dd {

4
public/sass/base/_type.scss
Unescape View File

@ -111,7 +111,7 @@ h6,
.h6 {
margin-bottom: $space-sm;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
font-weight: $font-weight-regular;
line-height: $headings-line-height;
color: $headings-color;
}
@ -149,7 +149,7 @@ hr {
margin-top: $spacer-y;
margin-bottom: $spacer-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
border-top: $border-width solid $hr-border-color;
}
//

10
public/sass/components/_buttons.scss
Unescape View File

@ -16,7 +16,7 @@
cursor: pointer;
border: none;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $border-radius-sm);
&,
&:active,
@ -53,7 +53,7 @@
// --------------------------------------------------
// XLarge
.btn-xlarge {
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $btn-border-radius);
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $border-radius-sm);
font-weight: normal;
padding-bottom: $btn-padding-y-xl - 3;
.gicon {
@ -64,16 +64,16 @@
// Large
.btn-large {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius);
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $border-radius-sm);
font-weight: normal;
}
.btn-small {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
}
.btn-mini {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $border-radius-sm);
}
.btn-link {

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

@ -10,7 +10,7 @@
min-height: 3.6rem; // Include space for horizontal scrollbar
@include border-radius($input-border-radius-sm);
border: $input-btn-border-width solid $input-border-color;
border: $border-width solid $input-border-color;
}
.ace_content {

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

@ -105,9 +105,9 @@ $input-border: 1px solid $input-border-color;
background-color: $input-label-bg;
display: block;
height: $gf-form-input-height;
height: $input-height;
border: $input-btn-border-width solid $input-label-border-color;
border: $border-width solid $input-label-border-color;
border-right: none;
border-radius: $label-border-radius;
@ -127,7 +127,7 @@ $input-border: 1px solid $input-border-color;
}
&--btn {
border-right: $input-btn-border-width solid $input-label-border-color;
border-right: $border-width solid $input-label-border-color;
border-radius: $border-radius;
&:hover {
@ -154,7 +154,7 @@ $input-border: 1px solid $input-border-color;
flex-grow: 1;
margin: 0;
margin-right: $space-xs;
border: $input-btn-border-width solid transparent;
border: $border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm);
}
@ -166,7 +166,7 @@ $input-border: 1px solid $input-border-color;
.gf-form-input {
display: block;
width: 100%;
height: $gf-form-input-height;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-md;
line-height: $input-line-height;

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

@ -117,7 +117,7 @@ $path-position: $marker-size-half - ($path-height / 2);
}
.progress-step-cta {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
display: none;
}

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

@ -9,7 +9,7 @@
position: relative;
display: inline-block;
padding: $input-padding-y $input-padding-x;
min-height: $gf-form-input-height;
min-height: $input-height;
width: 100%;
cursor: text;
line-height: $line-height-base;

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

@ -42,7 +42,7 @@
border-radius: $input-border-radius;
display: inline-block;
color: $text-color;
height: $gf-form-input-height;
height: $input-height;
.label-tag {
margin: 0 5px;

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

@ -26,7 +26,7 @@ gf-form-switch[disabled] {
display: flex;
position: relative;
width: 60px;
height: $gf-form-input-height;
height: $input-height;
background: $switch-bg;
border: 1px solid $input-border-color;
border-left: none;
@ -82,7 +82,7 @@ input:checked + .gf-form-switch__slider::before {
position: relative;
display: flex;
width: 50px;
height: $gf-form-input-height;
height: $input-height;
background: $switch-bg;
border: 1px solid $input-border-color;
border-left: none;

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

@ -27,7 +27,7 @@
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
height: $gf-form-input-height;
height: $input-height;
border: $input-border;
border-radius: $input-border-radius;
display: flex;

Write Preview
Loading…
Cancel
Save