diff --git a/common/common.scss b/common/common.scss index 62ff851..e170146 100644 --- a/common/common.scss +++ b/common/common.scss @@ -1,108 +1,7 @@ -.table-builder-modal-modal { - .modal-inner-container { - --modal-max-width: 90vw; - } -} - -.table-header-fields { - display: flex; - gap: 0.5rem; - margin-bottom: 2rem; - - .table-builder-input { - font-weight: bold; - } - - .header-column { - border: 1px solid var(--primary-low-mid); - padding: 1rem; - display: flex; - flex-direction: column; - } - - .column-action-buttons { - display: flex; - width: 100%; - gap: 0.5rem; - margin-top: auto; - border-top: 1px solid var(--primary-low-mid); - padding-top: 1rem; - - .btn { - flex: 1; - } - - &.column-aligned { - &-right .btn-align-right { - background: var(--primary-high); - .d-icon { - color: var(--primary-very-low); - } - } - &-left .btn-align-left { - background: var(--primary-high); - .d-icon { - color: var(--primary-very-low); - } - } - &-center .btn-align-center { - background: var(--primary-high); - .d-icon { - color: var(--primary-very-low); - } - } - } - } - - .body-inputs { - display: flex; - flex-direction: column; - - .table-builder-input { - font-weight: normal; - } - } - - .body-row { - display: flex; - align-items: center; - justify-content: flex-start; - margin-bottom: 1rem; - gap: 0.5rem; - - input { - margin-bottom: 0; - } - } -} - -// EDIT BUTTON RELATED (TODO move to partials) -.open-popup-link { - display: inline; - margin-inline: 0.25em; -} - -.btn-edit-table { - background: var(--tertiary); - color: var(--secondary); - - .d-icon { - color: var(--secondary); - } - - .discourse-no-touch & { - &:hover { - background-color: var(--tertiary-hover); - color: var(--secondary); - - .d-icon { - color: var(--secondary); - } - } - } -} - @import "vendor/jspreadsheet"; @import "vendor/jspreadsheet-datatables"; @import "vendor/jspreadsheet-theme"; @import "vendor/jsuites"; + +@import "table-builder"; +@import "table-editor"; diff --git a/scss/table-builder.scss b/scss/table-builder.scss new file mode 100644 index 0000000..d8bd9d3 --- /dev/null +++ b/scss/table-builder.scss @@ -0,0 +1,77 @@ +.table-builder-modal-modal { + .modal-inner-container { + --modal-max-width: 90vw; + } +} + +.table-header-fields { + display: flex; + gap: 0.5rem; + margin-bottom: 2rem; + + .table-builder-input { + font-weight: bold; + } + + .header-column { + border: 1px solid var(--primary-low-mid); + padding: 1rem; + display: flex; + flex-direction: column; + } + + .column-action-buttons { + display: flex; + width: 100%; + gap: 0.5rem; + margin-top: auto; + border-top: 1px solid var(--primary-low-mid); + padding-top: 1rem; + + .btn { + flex: 1; + } + + &.column-aligned { + &-right .btn-align-right { + background: var(--primary-high); + .d-icon { + color: var(--primary-very-low); + } + } + &-left .btn-align-left { + background: var(--primary-high); + .d-icon { + color: var(--primary-very-low); + } + } + &-center .btn-align-center { + background: var(--primary-high); + .d-icon { + color: var(--primary-very-low); + } + } + } + } + + .body-inputs { + display: flex; + flex-direction: column; + + .table-builder-input { + font-weight: normal; + } + } + + .body-row { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 1rem; + gap: 0.5rem; + + input { + margin-bottom: 0; + } + } +} diff --git a/scss/table-editor.scss b/scss/table-editor.scss new file mode 100644 index 0000000..5510b4d --- /dev/null +++ b/scss/table-editor.scss @@ -0,0 +1,24 @@ +.open-popup-link { + display: inline; + margin-inline: 0.25em; +} + +.btn-edit-table { + background: var(--tertiary); + color: var(--secondary); + + .d-icon { + color: var(--secondary); + } + + .discourse-no-touch & { + &:hover { + background-color: var(--tertiary-hover); + color: var(--secondary); + + .d-icon { + color: var(--secondary); + } + } + } +}