DEV: Separate styles into partials
This commit is contained in:
Keegan George
parent
f76ae6dcd8
commit
9b241aaead
|
|
@ -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";
|
||||||
@import "vendor/jspreadsheet-datatables";
|
@import "vendor/jspreadsheet-datatables";
|
||||||
@import "vendor/jspreadsheet-theme";
|
@import "vendor/jspreadsheet-theme";
|
||||||
@import "vendor/jsuites";
|
@import "vendor/jsuites";
|
||||||
|
|
||||||
|
@import "table-builder";
|
||||||
|
@import "table-editor";
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue