mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: SCSS cleanup (#90366)
* migrate _type styles * migrate queryEditor styles
This commit is contained in:
Ashley Harrison
GitHub
@@ -20,7 +20,7 @@ export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, o
|
||||
<tr>
|
||||
<td>{getAvatar(item)}</td>
|
||||
<td>{getDescription(item)}</td>
|
||||
<td>{item.isInherited && <em className="muted no-wrap">Inherited from folder</em>}</td>
|
||||
<td>{item.isInherited && <em className={styles.inherited}>Inherited from folder</em>}</td>
|
||||
<td>
|
||||
<Select
|
||||
disabled={!canSet || !item.isManaged}
|
||||
@@ -103,4 +103,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
||||
warning: css({
|
||||
color: theme.colors.warning.main,
|
||||
}),
|
||||
inherited: css({
|
||||
color: theme.colors.text.secondary,
|
||||
flexWrap: 'nowrap',
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -2142,3 +2142,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.grafana-metric-options {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.drop-element.drop-popover.drop-function-def .drop-content {
|
||||
max-width: 416px;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
|
||||
// BASE
|
||||
@import 'base/reboot';
|
||||
@import 'base/type';
|
||||
@import 'base/forms';
|
||||
@import 'base/grid';
|
||||
@import 'base/font_awesome';
|
||||
@@ -17,7 +16,6 @@
|
||||
@import 'components/gf-form';
|
||||
@import 'components/modals';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/query_editor';
|
||||
@import 'components/dashboard_grid';
|
||||
|
||||
// PAGES
|
||||
|
||||
@@ -1,275 +0,0 @@
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
border: 0;
|
||||
border-top: $border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.small-xs {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
background: $alert-warning-bg;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
// Remove default list styles
|
||||
ul.unstyled,
|
||||
ol.unstyled {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Single-line list items
|
||||
ul.inline,
|
||||
ol.inline {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-bottom: $line-height-base;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: calc($line-height-base / 2);
|
||||
}
|
||||
// Horizontal layout (like forms)
|
||||
.dl-horizontal {
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
dt {
|
||||
float: left;
|
||||
width: $horizontalComponentOffset - 20;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
dd {
|
||||
margin-left: $horizontalComponentOffset;
|
||||
}
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $abbr-border-color;
|
||||
}
|
||||
|
||||
abbr.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0 0 $line-height-base;
|
||||
border-left: 5px solid $gray-3;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base * 1.25;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
line-height: $line-height-base;
|
||||
color: $gray-2;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
// Float right with text-align: right
|
||||
&.pull-right {
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid $gray-3;
|
||||
border-left: 0;
|
||||
p,
|
||||
small {
|
||||
text-align: right;
|
||||
}
|
||||
small {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
&:after {
|
||||
content: '\00A0 \2014';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quotes
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: $line-height-base;
|
||||
font-style: normal;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
color: $external-link-color;
|
||||
text-decoration: normal;
|
||||
|
||||
&:hover {
|
||||
color: $external-link-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $link-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-html {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
padding: $space-xs $space-sm;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
background: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid $table-border;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $external-link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $external-link-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table:last-child,
|
||||
ul:last-child,
|
||||
ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
.query-keyword {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $text-blue !important;
|
||||
}
|
||||
|
||||
.query-segment-operator {
|
||||
color: $orange !important;
|
||||
}
|
||||
|
||||
.query-placeholder {
|
||||
color: $gray-2;
|
||||
}
|
||||
|
||||
.tight-form-func {
|
||||
background: $tight-form-func-bg;
|
||||
}
|
||||
|
||||
input[type='text'].tight-form-func-param {
|
||||
font-size: $font-size-sm;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tight-form-func-controls {
|
||||
text-align: center;
|
||||
|
||||
.fa-arrow-left {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-remove {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-metric-options {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.tight-form-func {
|
||||
background: $tight-form-func-bg;
|
||||
}
|
||||
|
||||
.rst-text::before {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.rst-unknown.rst-directive {
|
||||
font-family: monospace;
|
||||
margin-bottom: $space-md;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.rst-interpreted_text {
|
||||
font-family: monospace;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.rst-bullet-list {
|
||||
padding-left: $space-lg;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.rst-paragraph:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.drop-element.drop-popover.drop-function-def .drop-content {
|
||||
max-width: 416px;
|
||||
}
|
||||
|
||||
.rst-literal-block .rst-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.query-editor-row {
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
.query-editor-row__actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.query-keyword {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-editor-row__action {
|
||||
margin-left: 3px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.query-editor-row__body {
|
||||
margin: 2px 0 10px 40px;
|
||||
background: $page-bg;
|
||||
|
||||
&--collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user