Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-01-06 11:16:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Move interactive-editor styles into own stylesheet

Browse Source
This commit is contained in:
Alicia Sykes 2021-10-23 19:26:34 +01:00
parent 8147f40e9c
commit b1a7fce05d
3 changed files with 101 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/InteractiveEditor/EditPageInfo.vue
View File

@ -75,6 +75,7 @@ export default {
<style lang="scss"> <style lang="scss">
@import '@/styles/style-helpers.scss'; @import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss'; @import '@/styles/media-queries.scss';
@import '@/styles/schema-editor.scss';
.edit-page-info-inner { .edit-page-info-inner {
padding: 1rem; padding: 1rem;

100
src/styles/schema-editor.scss Normal file
View File

@ -0,0 +1,100 @@
/* Form elements in the auto-schema form */
.schema-form {
fieldset {
border: none;
display: flex;
flex-direction: column;
> div {
border-bottom: 1px dashed var(--interactive-editor-color);
margin: 0.5rem 0;
label {
font-size: 1rem;
text-decoration: underline;
}
}
div[data-fs-wrapper] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
justify-content: space-between;
padding: 0.5rem 0;
@include tablet-down {
flex-direction: column-reverse;
}
span {
font-style: italic;
margin-right: 0.5rem;
max-width: 20rem;
}
input {
min-width: 15rem;
padding: 0.5rem 0.75rem;
margin: 0.5rem auto;
font-size: 1rem;
box-sizing: border-box;
color: var(--interactive-editor-color);
background: var(--interactive-editor-background);
border: 1px solid var(--interactive-editor-color);
border-radius: var(--curve-factor);
&[type=text]:focus, &[type=number]:focus {
box-shadow: 1px 1px 6px var(--interactive-editor-color);
outline: none;
}
}
input[type=checkbox] {
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
}
input[type=radio] {
width: 1rem;
height: 1rem;
cursor: pointer;
}
div[data-fs-input=object], div[data-fs-input=array] {
width: 100%;
padding-left: 0.5rem;
border-left: 1px dashed var(--interactive-editor-color);
}
div[data-fs-kind="radio"] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
label {
text-decoration: none;
text-transform: capitalize;
}
}
select {
width: 10rem;
height: 2rem;
padding: 0.2rem;
font-size: 1rem;
color: var(--interactive-editor-color);
background: var(--interactive-editor-background);
border: 1px solid var(--interactive-editor-color);
border-radius: var(--curve-factor);
&:focus {
box-shadow: 1px 1px 6px var(--interactive-editor-color);
}
}
div[data-fs-input=array] button {
font-size: 1rem;
margin: 0.25rem;
border-radius: var(--curve-factor);
color: var(--interactive-editor-color);
background: var(--interactive-editor-background);
border: 1px solid var(--interactive-editor-color);
&:hover {
color: var(--interactive-editor-background);
background: var(--interactive-editor-color);
}
&:focus {
box-shadow: 1px 1px 6px var(--interactive-editor-color);
}
}
}
}
}

47
src/styles/style-helpers.scss
View File

@ -59,53 +59,6 @@
} }
} }
/* Form elements in the auto-schema form */
.schema-form {
fieldset {
border: none;
display: flex;
flex-direction: column;
> div {
border-bottom: 1px dashed var(--primary);
margin: 0.5rem 0;
label {
font-size: 1rem;
text-decoration: underline;
}
}
div[data-fs-wrapper] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
justify-content: space-between;
padding: 0.5rem 0;
@include tablet-down {
flex-direction: column-reverse;
}
span {
font-style: italic;
margin-right: 0.5rem;
}
input {
min-width: 15rem;
padding: 0.5rem 0.75rem;
margin: 0.5rem auto;
font-size: 1rem;
box-sizing: border-box;
color: var(--primary);
background: var(--background);;
border: 1px solid var(--primary);
border-radius: var(--curve-factor);
&:focus {
box-shadow: 1px 1px 6px var(--config-settings-color);
outline: none;
}
}
}
}
}
/* Single-style helpers */ /* Single-style helpers */
.bold { font-weight: bold; } .bold { font-weight: bold; }
.light { font-weight: lighter; } .light { font-weight: lighter; }