From 22714718262a1c3cf322e82e5f913360c1e79055 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 27 Mar 2019 09:14:02 +0100 Subject: [PATCH] Chore: Theme consistency, rems => pixels or variables (#16235) * repalced rems with pixels and variables * replaced rems with pixels and variables --- public/sass/components/_alerts.scss | 10 +++++----- public/sass/components/_buttons.scss | 6 +++--- public/sass/components/_drop.scss | 2 +- public/sass/components/_page_header.scss | 6 +++--- public/sass/components/_tagsinput.scss | 2 +- public/sass/mixins/_drop_element.scss | 6 +++--- public/sass/pages/_dashboard.scss | 2 +- public/sass/pages/_explore.scss | 6 +++--- public/sass/pages/_history.scss | 6 +++--- public/sass/pages/_plugins.scss | 2 +- 10 files changed, 24 insertions(+), 24 deletions(-) diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index da3ebf7fa7b..56e7c8e3444 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -49,14 +49,14 @@ } .alert-close { - padding: 0 0 0 1rem; + padding: 0 0 0 $space-md; border: none; background: none; display: flex; align-items: center; .fa { align-self: flex-end; - font-size: 1.5rem; + font-size: 21px; color: rgba(255, 255, 255, 0.75); } } @@ -66,13 +66,13 @@ } .alert-icon { - padding: 0 1rem 0 0; + padding: 0 $space-md 0 0; display: flex; align-items: center; justify-content: center; - width: 2.5rem; + width: 35px; .fa { - font-size: 1.5rem; + font-size: 21px; } } diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index f85fecec50c..4bb4aca2ea7 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -58,7 +58,7 @@ padding-bottom: $btn-padding-y-xl - 3; .gicon { font-size: 31px; - margin-right: 1rem; + margin-right: $space-md; } } @@ -182,8 +182,8 @@ $btn-service-icon-width: 35px; left: 0; height: 100%; top: 0; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: $space-sm; + padding-right: $space-sm; width: $btn-service-icon-width; text-align: center; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 8d9d4fc6b7d..752b951d6ed 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -1,4 +1,4 @@ -$popover-arrow-size: 0.7rem; +$popover-arrow-size: 10px; $color: inherit; $color: $text-color; $useDropShadow: false; diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index a7380327bd0..8312cdc3e11 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -5,11 +5,11 @@ } .page-header { - padding: 2.5rem 0 0 0; + padding: $space-xl 0 0 0; .btn { float: right; - margin-left: 1rem; + margin-left: $space-md; // better align icons .fa { @@ -22,7 +22,7 @@ .page-header__inner { flex-grow: 1; display: flex; - margin-bottom: 2.5rem; + margin-bottom: $space-xl; } .page-header__title { diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss index 5c511d44e71..a1b5c3c8818 100644 --- a/public/sass/components/_tagsinput.scss +++ b/public/sass/components/_tagsinput.scss @@ -13,7 +13,7 @@ border-radius: 0; padding: 8px 6px; height: 100%; - width: 5rem; + width: 70px; box-sizing: border-box; &.gf-form-input--has-help-icon { diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index 1e3f743f654..b0399aced72 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -9,9 +9,9 @@ font-family: inherit; background: $theme-bg; color: $theme-color; - padding: 0.65rem; + padding: $space-sm; word-wrap: break-word; - max-width: 20rem; + max-width: 280px; border: 1px solid $border-color; &:before { @@ -29,7 +29,7 @@ &.drop-wide { .drop-content { - max-width: 40rem; + max-width: 560px; } } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index df3a34e1d06..c795f3f2dcb 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -268,7 +268,7 @@ div.flot-text { span { display: inline-block; @include brand-bottom-border(); - padding: 0.5rem 0.5rem 0.2rem 0.5rem; + padding: $space-sm $space-sm $space-xxs $space-sm; } } diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 9784f8c89e4..c7bea01df4c 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -219,9 +219,9 @@ position: absolute; left: 0; right: 0; - top: 3.5rem; + top: 48px; text-align: center; - font-size: 0.8rem; + font-size: 11px; } .graph-legend { @@ -267,7 +267,7 @@ align-items: flex-start; & + & { - margin-top: 0.5rem; + margin-top: $space-sm; } } diff --git a/public/sass/pages/_history.scss b/public/sass/pages/_history.scss index 42aa58f0bb7..2eb7d2d2aec 100644 --- a/public/sass/pages/_history.scss +++ b/public/sass/pages/_history.scss @@ -6,7 +6,7 @@ // JSON @for $i from 0 through 16 { .diff-indent-#{$i} { - padding-left: $i * 1.5rem; + padding-left: $i * 21px; margin-left: 10px; } } @@ -108,7 +108,7 @@ font-size: 16px; font-style: normal; padding: 10px 15px; - margin: 1rem 0; + margin: $space-md 0; & .diff-group { padding: 0 5px; @@ -153,7 +153,7 @@ border-radius: 3px; color: $diff-label-fg; display: inline; - font-size: 0.95rem; + font-size: $font-size-base; margin: 0 5px; padding: 3px 8px; } diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index 2570eb6c791..fb93d5a33f3 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -2,7 +2,7 @@ color: $gray-3; font-size: $font-size-sm; position: relative; - top: 1.2rem; + top: $space-md; &:hover { color: $link-hover-color;