mirror of
https://github.com/discourse/discourse.git
synced 2024-11-26 05:33:40 +08:00
6e4648a2c4
This commit makes a few improvements to the JSON Schema editor when using dark mode for the UI and fixes a small alignment issue with checkboxes.
268 lines
5.6 KiB
SCSS
268 lines
5.6 KiB
SCSS
// styles used for JSON schema settings
|
|
|
|
.d-modal.json-schema-editor-modal {
|
|
--modal-max-width: 95vw;
|
|
--modal-width: unset;
|
|
--space-1: 0.25em;
|
|
--space-2: calc(0.25em * 2);
|
|
--space-3: calc(0.25em * 3);
|
|
--space-4: calc(0.25em * 4);
|
|
--space-5: calc(0.25em * 5);
|
|
--space-6: calc(0.25em * 6);
|
|
|
|
.d-modal__container {
|
|
width: unset;
|
|
}
|
|
|
|
.je-ready {
|
|
.je-object__container {
|
|
padding: 0;
|
|
border: none;
|
|
margin-bottom: var(--space-4);
|
|
|
|
> span:not(.je-object__controls) {
|
|
display: flex;
|
|
padding: var(--space-1) 0 var(--space-4) var(--space-6);
|
|
|
|
.json-editor-btn-delete {
|
|
order: 2;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.je-object__controls {
|
|
margin: 0;
|
|
}
|
|
|
|
.json-editor-btn-delete {
|
|
@extend .btn-danger;
|
|
@extend .no-text;
|
|
}
|
|
|
|
.json-editor-btn-add {
|
|
@extend .btn, .ok;
|
|
gap: var(--space-1);
|
|
span {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
button {
|
|
@extend .btn;
|
|
@extend .no-text;
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.json-editor-btn-collapse {
|
|
@extend .btn-flat;
|
|
}
|
|
|
|
[class*="json-editor-btn"] {
|
|
margin-right: var(--space-2);
|
|
}
|
|
|
|
select {
|
|
@include appearance-none;
|
|
@include form-item-sizing;
|
|
display: inline-block;
|
|
margin-bottom: var(--space-2);
|
|
color: var(--primary);
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-400);
|
|
border-radius: var(--d-input-border-radius);
|
|
background: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" fill="#999" height=".75em" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>'
|
|
); // down chevron
|
|
background-repeat: no-repeat;
|
|
background-position: 98%;
|
|
&:focus {
|
|
@include default-focus;
|
|
}
|
|
}
|
|
|
|
select,
|
|
input {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.row:not(:first-child) {
|
|
.form-control {
|
|
margin: var(--space-4) 0;
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
p {
|
|
// description
|
|
color: var(--primary-medium);
|
|
margin-top: var(--space-1);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
button.json-editor-btn-collapse.json-editor-btntype-toggle {
|
|
// needs the specificity
|
|
background: transparent;
|
|
margin: 0 0 0 calc(var(--space-2) * -1);
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--font-down-2);
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
label {
|
|
margin: 0 0 0 0.1em; // minor visual alignment
|
|
font-weight: normal;
|
|
font-size: var(--font-up-1);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.je-indented-panel {
|
|
margin: 0;
|
|
padding: var(--space-4) 0 0 var(--space-6);
|
|
border-left: none;
|
|
}
|
|
|
|
[data-schemaid="root"] {
|
|
position: relative;
|
|
> .je-header {
|
|
label,
|
|
.json-editor-btn-collapse {
|
|
display: none;
|
|
}
|
|
button {
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 0;
|
|
font-size: var(--font-down-1);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
> .je-indented-panel {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// for "format":"tabs-top"
|
|
|
|
.je-tabholder--top {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 80%;
|
|
gap: 0 var(--space-3);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
padding-bottom: var(--space-1);
|
|
|
|
.je-tab--top {
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--primary);
|
|
background: var(
|
|
--secondary
|
|
) !important; // important is needed here to override inline styling on the element
|
|
}
|
|
}
|
|
|
|
.je-tabholder--clear {
|
|
padding-top: var(--space-3);
|
|
|
|
.je-object__title {
|
|
display: none;
|
|
}
|
|
|
|
.je-object__container > span:not(.je-object__controls) {
|
|
padding: 0;
|
|
}
|
|
|
|
h3 label {
|
|
margin: 0;
|
|
}
|
|
|
|
.je-indented-panel--top {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.json-editor-btn-collapse {
|
|
display: none;
|
|
}
|
|
|
|
.je-indented-panel {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
// for "format":"table"
|
|
|
|
table {
|
|
width: 100%;
|
|
margin-bottom: 1em;
|
|
|
|
td,
|
|
th {
|
|
&:not(:first-child):not(:last-child) {
|
|
padding: var(--space-2);
|
|
}
|
|
&:first-child,
|
|
&:last-child {
|
|
padding: var(--space-2) 0;
|
|
}
|
|
}
|
|
|
|
td {
|
|
vertical-align: top;
|
|
|
|
select {
|
|
background-position: center right var(--space-2);
|
|
padding-right: var(--space-6);
|
|
}
|
|
|
|
&:last-child {
|
|
span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
button {
|
|
margin: 0;
|
|
}
|
|
.delete {
|
|
order: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div[data-schematype="boolean"] {
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
input[type="checkbox"] {
|
|
margin-right: var(--space-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
select option {
|
|
color: var(--primary);
|
|
background: var(--secondary);
|
|
}
|
|
}
|
|
}
|