discourse-data-explorer/assets/stylesheets/explorer.scss

216 lines
4.1 KiB
SCSS
Raw Normal View History

2015-07-01 00:21:14 -04:00
.https-warning {
color: $danger;
}
2015-07-08 19:46:36 -04:00
.query-editor {
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
margin-bottom: 15px;
.editor-panel {
width: 65%;
}
.right-panel {
width: 35%;
}
&.no-schema {
.editor-panel {
width: 100%;
}
.right-panel {
width: 0;
button.unhide {
position: absolute;
margin-left: -31px;
z-index: 1;
}
}
}
.editor-panel {
float: left;
.ace-wrapper {
position: relative;
height: 400px;
2015-07-08 19:46:36 -04:00
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
2015-07-08 19:46:36 -04:00
}
}
.right-panel {
float: right;
.schema {
border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
color: dark-light-diff($primary, $secondary, 20%, -20%);
font-size: 11px;
input {
padding: 4px;
margin: 3px;
// 100% - padding + margin * 2 - border - button - buttonborder
width: calc(100% - 14px - 1px - 22px - 2px);
}
2015-07-08 19:46:36 -04:00
.schema-table-name {
font-weight: bold;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
padding-left: 5px;
.fa {
width: 6px;
}
}
ul {
list-style-type: none;
margin: 0;
}
dl {
margin: 0;
}
dl > div > * {
padding-top: 2px;
padding-bottom: 2px;
}
dl > div {
clear:both;
}
dt {
display: inline-block;
vertical-align: text-top;
overflow-wrap: break-word;
width: 110px;
margin-left: 5px;
&.sensitive {
color: $danger;
}
}
dd {
display: inline-block;
vertical-align: text-top;
2015-07-28 14:18:22 -04:00
width: 110px;
2015-07-08 19:46:36 -04:00
color: $tertiary;
margin: 0;
padding-left: 7px;
border-left: 1px dotted dark-light-diff($primary, $secondary, 80%, -20%);
.schema-typenotes {
color: dark-light-diff($primary, $secondary, 50%, -20%);
font-style: italic;
}
.popup-info {
color: dark-light-diff($primary, $secondary, 50%, -20%);
2015-07-09 18:46:19 -04:00
.popup { display: none; }
&:hover .popup { display: block; }
&:focus .popup { display: block; }
.popup {
position: absolute;
padding: 5px;
padding-right: calc(5px + 2em);
border: 1px solid;
background: white;
left: -120px;
width: 180px;
top: 6px;
z-index: 10;
}
2015-07-09 18:46:19 -04:00
.popup ol {
margin: 0;
list-style: none;
> li:before {
content: attr(value) ": ";
2015-07-09 18:46:19 -04:00
}
}
2015-07-08 19:46:36 -04:00
}
}
}
}
.grippie {
clear: both;
2015-07-09 16:20:21 -04:00
-webkit-user-select: none;
2015-07-08 19:46:36 -04:00
}
}
2015-06-30 13:20:22 -04:00
.query-edit {
.name h2 {
display: inline-block;
}
.name input, .desc textarea {
width: calc(100% - 10px);
2015-06-30 13:20:22 -04:00
}
2015-07-01 15:31:55 -04:00
&:not(.editing) .desc {
margin: 10px 0;
}
2015-07-08 16:45:13 -04:00
}
2015-08-03 18:14:23 -04:00
.query-run {
2015-08-03 18:15:04 -04:00
margin-top: 25px;
2015-08-03 18:14:23 -04:00
.query-plan {
display: inline-block;
margin-left: 15px;
}
}
2015-07-08 19:46:36 -04:00
.clear { clear: both; }
2015-07-08 16:45:13 -04:00
.schema-title {
display: block;
margin: auto;
}
.query-params {
border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);
2015-07-14 19:01:38 -04:00
.param > input {
margin: 9px;
}
2015-07-14 19:01:38 -04:00
.invalid > input {
background-color: mix($danger, $secondary, 20%);
}
.invalid .ac-wrap {
background-color: mix($danger, $secondary, 20%);
}
2015-06-30 22:51:38 -04:00
.param {
width: 300px;
2015-06-30 22:51:38 -04:00
display: inline-block;
overflow-x: visible;
2015-07-14 19:01:38 -04:00
.ac-wrap {
display: inline-block;
2015-07-15 14:00:31 -04:00
input {
width: 100px !important; // override an inline style
}
2015-07-14 19:01:38 -04:00
}
input {
width: 190px;
}
2015-06-30 22:51:38 -04:00
}
.param-name {
display: inline-block;
width: 70px;
}
}
2015-07-01 15:31:55 -04:00
.query-list, .query-create, .query-edit, .query-results, .query-params, .https-warning {
2015-06-29 15:10:24 -04:00
margin: 10px 0;
}
2015-07-09 16:58:22 -04:00
2018-05-09 14:04:14 -04:00
.query-list {
display: flex;
.combo-box, button {
margin-right: .5em;
}
li.none {
2018-05-09 15:49:43 -04:00
display: none;
2018-05-09 14:04:14 -04:00
}
}
2015-07-09 16:58:22 -04:00
.explorer-pad-bottom {
margin-bottom: 200px;
}