Discource-C
/
discourse-data-explorer
mirror of https://github.com/discourse/discourse-data-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Use CSS custom properties for colors in SCSS 

Prepares the plugin for an upcoming change in core while maintaining
backwards compatiblity.
This commit is contained in:
Penar Musaraj 2020-08-03 21:20:48 -04:00
parent dcfb92d7f8
commit 5a99501d88
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
assets/stylesheets/explorer.scss
View File

@ -35,7 +35,7 @@ table.group-reports {
} }
.https-warning { .https-warning {
color: $danger; color: var(--danger, $danger);
} }
.query-editor { .query-editor {
@ -44,7 +44,7 @@ table.group-reports {
.panels-flex { .panels-flex {
display: flex; display: flex;
height: 400px; height: 400px;
border: 1px solid $primary-very-low; border: 1px solid var(--primary-very-low, $primary-very-low);
} }
&.no-schema { &.no-schema {
.editor-panel { .editor-panel {
@ -83,11 +83,11 @@ table.group-reports {
flex-grow: 0; flex-grow: 0;
width: 345px; width: 345px;
.schema { .schema {
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low, $primary-low);
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
color: $primary-high; color: var(--primary-high, $primary-high);
font-size: $font-down-2; font-size: $font-down-2;
input { input {
@ -98,7 +98,7 @@ table.group-reports {
} }
.schema-table-name { .schema-table-name {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low, $primary-low);
padding-left: 5px; padding-left: 5px;
.fa { .fa {
width: 6px; width: 6px;
@ -125,24 +125,24 @@ table.group-reports {
width: 110px; width: 110px;
margin-left: 5px; margin-left: 5px;
&.sensitive { &.sensitive {
color: $danger; color: var(--danger, $danger);
} }
} }
dd { dd {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 110px; width: 110px;
color: $tertiary; color: var(--tertiary, $tertiary);
margin: 0; margin: 0;
padding-left: 7px; padding-left: 7px;
border-left: 1px dotted $primary-low-mid; border-left: 1px dotted var(--primary-low-mid, $primary-low-mid);
.schema-typenotes { .schema-typenotes {
color: $primary-medium; color: var(--primary-medium, $primary-medium);
font-style: italic; font-style: italic;
} }
.popup-info { .popup-info {
color: $primary-medium; color: var(--primary-medium, $primary-medium);
.popup { .popup {
display: none; display: none;
@ -159,7 +159,7 @@ table.group-reports {
padding: 4px; padding: 4px;
position: relative; position: relative;
border: 1px solid; border: 1px solid;
background: $secondary; background: var(--secondary, $secondary);
padding-right: calc(5px + 0.5em); padding-right: calc(5px + 0.5em);
} }
@ -180,10 +180,10 @@ table.group-reports {
clear: both; clear: both;
font-size: $font-down-2; font-size: $font-down-2;
-webkit-user-select: none; -webkit-user-select: none;
color: $primary; color: var(--primary, $primary);
text-align: right; text-align: right;
background: $primary-very-low; background: var(--primary-very-low, $primary-very-low);
border: 1px solid $primary-very-low; border: 1px solid var(--primary-very-low, $primary-very-low);
.d-icon { .d-icon {
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -198,7 +198,7 @@ table.group-reports {
h1 { h1 {
display: inline-block; display: inline-block;
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
color: $primary; color: var(--primary, $primary);
a { a {
color: currentColor; color: currentColor;
} }
@ -226,7 +226,7 @@ table.group-reports {
margin-bottom: 10px; margin-bottom: 10px;
.label { .label {
margin-right: 10px; margin-right: 10px;
color: $primary-high; color: var(--primary-high, $primary-high);
} }
.name { .name {
display: inline; display: inline;
@ -252,15 +252,15 @@ table.group-reports {
} }
.query-params { .query-params {
border: 1px solid $header_primary-medium; border: 1px solid var(--header_primary-medium, $header_primary-medium);
.param > input { .param > input {
margin: 9px; margin: 9px;
} }
.invalid > input { .invalid > input {
background-color: $danger-low; background-color: var(--danger-low, $danger-low);
} }
.invalid .ac-wrap { .invalid .ac-wrap {
background-color: $danger-low; background-color: var(--danger-low, $danger-low);
} }
.param { .param {
width: 300px; width: 300px;
@ -334,7 +334,7 @@ table.group-reports {
} }
.heading { .heading {
position: relative; position: relative;
color: $primary-medium; color: var(--primary-medium, $primary-medium);
padding: 50px 0px 0px 0px; padding: 50px 0px 0px 0px;
th.sortable { th.sortable {
font-weight: normal; font-weight: normal;
@ -351,23 +351,23 @@ table.group-reports {
width: 100%; width: 100%;
} }
.query-name { .query-name {
color: $primary; color: var(--primary, $primary);
} }
.query-desc { .query-desc {
display: block; display: block;
color: $primary-high; color: var(--primary-high, $primary-high);
} }
.query-created-by { .query-created-by {
color: $primary-high; color: var(--primary-high, $primary-high);
} }
.query-group-names { .query-group-names {
color: $tertiary; color: var(--tertiary, $tertiary);
a { a {
display: inline; display: inline;
} }
} }
.query-created-at { .query-created-at {
color: $primary-medium; color: var(--primary-medium, $primary-medium);
} }
} }
.query-row:hover { .query-row:hover {
@ -379,7 +379,7 @@ table.group-reports {
display: inline-block; display: inline-block;
} }
.no-search-results { .no-search-results {
color: $primary-medium; color: var(--primary-medium, $primary-medium);
} }
} }
@ -387,7 +387,7 @@ table.group-reports {
float: left; float: left;
} }
.result-about { .result-about {
color: $primary-high; color: var(--primary-high, $primary-high);
float: right; float: right;
} }
.result-explain { .result-explain {
@ -407,13 +407,13 @@ table.group-reports {
cursor: pointer; cursor: pointer;
label { label {
color: $primary-high; color: var(--primary-high, $primary-high);
} }
input { input {
margin-right: 4px; margin-right: 4px;
} }
.popup { .popup {
background-color: $secondary; background-color: var(--secondary, $secondary);
position: absolute; position: absolute;
box-shadow: shadow("card"); box-shadow: shadow("card");
padding: 12px; padding: 12px;