Add buttons to project entry form
This commit is contained in:
parent
34bab79c4a
commit
b4f11fa29b
|
|
@ -1,3 +1,5 @@
|
|||
import {PROJECT_ENTRY_TEMPLATE} from '../../../../src/consts/strings.consts';
|
||||
|
||||
describe('Project Entry', () => {
|
||||
const operations = {
|
||||
MeQuery: {
|
||||
|
|
@ -106,7 +108,7 @@ describe('Project Entry', () => {
|
|||
// cy.get('[data-cy=text-form-input]').type('Stay with Rocket\nMeet Quill');
|
||||
// });
|
||||
cy.getByDataCy('modal-title').should('contain', 'Beitrag erfassen');
|
||||
cy.getByDataCy('text-form-input').should('exist');
|
||||
cy.getByDataCy('project-entry-textarea').should('exist');
|
||||
cy.getByDataCy('use-template-button').should('exist').click();
|
||||
cy.getByDataCy('upload-document-button').should('exist');
|
||||
cy.getByDataCy('modal-save-button').click();
|
||||
|
|
@ -125,7 +127,7 @@ describe('Project Entry', () => {
|
|||
});
|
||||
cy.getByDataCy('activity-input').should('not.exist');
|
||||
|
||||
cy.getByDataCy('text-form-input').clear().type('Defeat Thanos');
|
||||
cy.getByDataCy('project-entry-textarea').clear().type('Defeat Thanos');
|
||||
cy.get('[data-cy=modal-save-button]').click();
|
||||
cy.get('.project-entry__paragraph:first-of-type').contains('Defeat Thanos');
|
||||
});
|
||||
|
|
@ -142,4 +144,11 @@ describe('Project Entry', () => {
|
|||
|
||||
cy.get('.project-entry').should('have.length', 0);
|
||||
});
|
||||
|
||||
it('should use the template', () => {
|
||||
cy.visit('/portfolio/groot');
|
||||
cy.get('[data-cy=add-project-entry]:first-of-type').click();
|
||||
cy.getByDataCy('use-template-button').click();
|
||||
cy.getByDataCy('project-entry-textarea').should('have.value', PROJECT_ENTRY_TEMPLATE);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -42,9 +42,7 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_functions.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
@import "~styles/helpers";
|
||||
|
||||
.document-block {
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -26,20 +26,10 @@
|
|||
@click="$emit('spellcheck')"
|
||||
>{{ spellcheckText }}
|
||||
</button>
|
||||
<div v-if="userInput.document">
|
||||
<document-block
|
||||
:value="{url: userInput.document}"
|
||||
show-trash-icon
|
||||
@trash="changeDocumentUrl('')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<simple-file-upload
|
||||
:value="userInput.document"
|
||||
class="submission-form-container__document"
|
||||
<file-upload
|
||||
:document="userInput.document"
|
||||
v-if="allowsDocuments"
|
||||
@link-change-url="changeDocumentUrl"
|
||||
/>
|
||||
@change-document-url="changeDocumentUrl"/>
|
||||
<slot/>
|
||||
</div>
|
||||
|
||||
|
|
@ -55,8 +45,8 @@
|
|||
<script>
|
||||
import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
|
||||
import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
|
||||
import SimpleFileUpload from '@/components/SimpleFileUpload';
|
||||
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
|
||||
import FileUpload from '@/components/ui/file-upload/FileUpload';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -68,24 +58,24 @@
|
|||
document: String,
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
spellcheck: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
spellcheckLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
sharedMsg: String
|
||||
sharedMsg: String,
|
||||
},
|
||||
|
||||
components: {
|
||||
FileUpload,
|
||||
SubmissionInput,
|
||||
FinalSubmission,
|
||||
SimpleFileUpload,
|
||||
DocumentBlock
|
||||
DocumentBlock,
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -107,7 +97,7 @@
|
|||
} else {
|
||||
return 'Wird geprüft...';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -119,7 +109,7 @@
|
|||
},
|
||||
changeDocumentUrl(documentUrl) {
|
||||
this.$emit('changeDocumentUrl', documentUrl);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 100 100"
|
||||
id="shape">
|
||||
viewBox="0 0 100 100">
|
||||
<path
|
||||
d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"/>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<svg
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
width="51"
|
||||
height="51"
|
||||
fill="white"/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.185 4C9.87483 4.00276 8.00276 5.87483 8 8.185V44.515C8.00276 46.8252 9.87483 48.6972 12.185 48.7H39.545C41.8552 48.6972 43.7272 46.8252 43.73 44.515V16.015L31.56 4H12.185ZM40.45 45.39C40.1848 45.6945 39.7987 45.8665 39.395 45.86H12.035C11.2066 45.86 10.535 45.1884 10.535 44.36V8.035C10.535 7.20657 11.2066 6.535 12.035 6.535H27.865V15.51C27.8678 17.6545 29.6055 19.3922 31.75 19.395H40.74V44.215C40.8227 44.6303 40.7164 45.0609 40.45 45.39ZM31.0674 16.5076C31.293 16.7332 31.601 16.8569 31.92 16.85H40.655L30.725 6.925V15.655C30.7181 15.974 30.8418 16.282 31.0674 16.5076Z"
|
||||
fill="#333333"/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15 26.25C15 25.5596 15.5596 25 16.25 25H35.75C36.4404 25 37 25.5596 37 26.25C37 26.9404 36.4404 27.5 35.75 27.5H16.25C15.5596 27.5 15 26.9404 15 26.25Z"
|
||||
fill="#333333"/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15 33.25C15 32.5596 15.5596 32 16.25 32H35.75C36.4404 32 37 32.5596 37 33.25C37 33.9404 36.4404 34.5 35.75 34.5H16.25C15.5596 34.5 15 33.9404 15 33.25Z"
|
||||
fill="#333333"/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15 40.25C15 39.5596 15.5596 39 16.25 39H35.75C36.4404 39 37 39.5596 37 40.25C37 40.9404 36.4404 41.5 35.75 41.5H16.25C15.5596 41.5 15 40.9404 15 40.25Z"
|
||||
fill="#333333"/>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
data() {
|
||||
return {
|
||||
projectEntry: {
|
||||
content: '',
|
||||
description: '',
|
||||
documentUrl: ''
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,13 +7,28 @@
|
|||
Beitrag erfassen
|
||||
</h2>
|
||||
<div class="project-entry-modal">
|
||||
<text-form
|
||||
:value="content"
|
||||
@change="localProjectEntry.content = $event"/>
|
||||
<document-form
|
||||
:value="document"
|
||||
:index="0"
|
||||
@link-change-url="setDocumentUrl"/>
|
||||
<div class="project-entry-modal__form-field">
|
||||
<textarea
|
||||
:value="localProjectEntry.description"
|
||||
class="project-entry-modal__textarea"
|
||||
data-cy="project-entry-textarea"
|
||||
@input="localProjectEntry.description = $event.target.value"
|
||||
/>
|
||||
|
||||
<div class="project-entry-modal__buttons">
|
||||
<button-with-icon-and-text
|
||||
icon="document-with-lines-icon"
|
||||
data-cy="use-template-button"
|
||||
text="Vorlage nutzen"
|
||||
@click.native="useTemplate" />
|
||||
|
||||
<file-upload
|
||||
:with-text="true"
|
||||
:document="localProjectEntry.documentUrl"
|
||||
data-cy="upload-document-button"
|
||||
@change-document-url="setDocumentUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a
|
||||
|
|
@ -32,6 +47,12 @@
|
|||
import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
|
||||
import DocumentForm from '@/components/content-forms/DocumentForm';
|
||||
import TextForm from '@/components/content-forms/TextForm';
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
import NoteIcon from '@/components/icons/NoteIcon';
|
||||
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
|
||||
import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
|
||||
import FileUpload from '@/components/ui/file-upload/FileUpload';
|
||||
import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -42,6 +63,11 @@
|
|||
},
|
||||
|
||||
components: {
|
||||
FileUpload,
|
||||
SimpleFileUpload,
|
||||
ButtonWithIconAndText,
|
||||
NoteIcon,
|
||||
DocumentIcon,
|
||||
TextForm,
|
||||
DocumentForm,
|
||||
Modal,
|
||||
|
|
@ -56,23 +82,13 @@
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
document() {
|
||||
return this.localProjectEntry.documentUrl > '' ? {
|
||||
url: this.localProjectEntry.documentUrl,
|
||||
} : {};
|
||||
},
|
||||
content() {
|
||||
return {
|
||||
text: this.localProjectEntry.content,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
setDocumentUrl(url) {
|
||||
this.localProjectEntry.documentUrl = url;
|
||||
},
|
||||
useTemplate() {
|
||||
this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -82,10 +98,46 @@
|
|||
|
||||
.project-entry-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__form-field {
|
||||
@include inputstyle;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-rows: auto 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
@include auto-grow;
|
||||
border: 0;
|
||||
min-height: 400px;
|
||||
padding: $medium-spacing;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: $medium-spacing;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include regular-text;
|
||||
|
||||
&--template {
|
||||
}
|
||||
|
||||
&--document {
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@include heading-3;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<a class="button-with-icon-and-text">
|
||||
<component
|
||||
:is="icon"
|
||||
class="button-with-icon-and-text__icon"/>
|
||||
<span class="button-with-icon-and-text__text">{{ text }}</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
import DocumentWithLinesIcon from '@/components/icons/DocumentWithLinesIcon';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
DocumentIcon,
|
||||
DocumentWithLinesIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
|
||||
.button-with-icon-and-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: $small-spacing;
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include small-text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div class="file-upload">
|
||||
<template v-if="document">
|
||||
<document-block
|
||||
:value="{url: document}"
|
||||
show-trash-icon
|
||||
@trash="$emit('change-document-url', '')"
|
||||
/>
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<simple-file-upload
|
||||
:with-text="withText"
|
||||
:value="document"
|
||||
@link-change-url="$emit('change-document-url', $event)"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocumentBlock from '@/components/content-blocks/DocumentBlock';
|
||||
import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
document: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
withText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {SimpleFileUpload, DocumentBlock},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="simple-file-upload">
|
||||
<component
|
||||
:is="button"
|
||||
@click.native="clickUploadCare" />
|
||||
<simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
|
||||
import SimpleFileUploadIcon from '@/components/ui/file-upload/SimpleFileUploadIcon';
|
||||
import SimpleFileUploadIconAndText from '@/components/ui/file-upload/SimpleFileUploadIconAndText';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
withText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
SimpleFileUploadHiddenInput,
|
||||
DocumentIcon,
|
||||
SimpleFileUploadIcon,
|
||||
SimpleFileUploadIconAndText
|
||||
},
|
||||
|
||||
computed: {
|
||||
button() {
|
||||
return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
clickUploadCare() {
|
||||
// workaround for styling the uploadcare widget
|
||||
let button = this.$el.querySelector('.uploadcare--widget__button');
|
||||
button.click();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~styles/_helpers";
|
||||
|
||||
.simple-file-upload {
|
||||
height: 25px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uploadcare--widget {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<input
|
||||
type="hidden"
|
||||
class="simple-file-upload-hidden-input"
|
||||
role="uploadcare-uploader"
|
||||
name="file-upload"
|
||||
data-system-dialog
|
||||
ref="uploadcare-filedialog">
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadcareWidget from 'uploadcare-widget';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
|
||||
|
||||
widget.onChange(result => {
|
||||
result.done(fileInfo => {
|
||||
let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
|
||||
this.$emit('link-change-url', urlWithFilename);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<a class="simple-file-upload-icon">
|
||||
<document-icon class="simple-file-upload-icon__icon"/>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
|
||||
export default {
|
||||
components: {DocumentIcon},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
|
||||
.simple-file-upload-icon {
|
||||
&__icon {
|
||||
width: 25px;
|
||||
fill: $color-silver-dark;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<button-with-icon-and-text
|
||||
icon="document-icon"
|
||||
text="Dokument hochladen"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
|
||||
export default {
|
||||
components: {ButtonWithIconAndText}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,41 +1,27 @@
|
|||
<template>
|
||||
<div class="simple-file-upload">
|
||||
<a
|
||||
class="simple-file-upload__link"
|
||||
<button-with-icon-and-text
|
||||
icon="document-icon"
|
||||
text="Dokument hochladen"
|
||||
v-if="!value"
|
||||
@click="clickUploadCare">
|
||||
<document-icon class="simple-file-upload__icon"/>
|
||||
</a>
|
||||
<input
|
||||
type="hidden"
|
||||
role="uploadcare-uploader"
|
||||
name="file-upload"
|
||||
data-system-dialog
|
||||
ref="uploadcare-filedialog">
|
||||
@click.native="clickUploadCare"/>
|
||||
|
||||
<simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadcareWidget from 'uploadcare-widget';
|
||||
|
||||
import DocumentIcon from '@/components/icons/DocumentIcon';
|
||||
import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
|
||||
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
|
||||
components: {
|
||||
DocumentIcon
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
|
||||
|
||||
widget.onChange(result => {
|
||||
result.done(fileInfo => {
|
||||
let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
|
||||
this.$emit('link-change-url', urlWithFilename);
|
||||
});
|
||||
});
|
||||
ButtonWithIconAndText,
|
||||
SimpleFileUploadHiddenInput,
|
||||
DocumentIcon,
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -43,13 +29,13 @@
|
|||
// workaround for styling the uploadcare widget
|
||||
let button = this.$el.querySelector('.uploadcare--widget__button');
|
||||
button.click();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "~styles/_helpers";
|
||||
|
||||
.simple-file-upload {
|
||||
width: 25px;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export const PROJECT_ENTRY_TEMPLATE = `Tätigkeit:
|
||||
Was? Wie? Welche Mittel?
|
||||
|
||||
|
||||
Reflexion:
|
||||
Was ging gut? Was hatte ich für Schweirigkeiten? Was habe ich gelernt?
|
||||
|
||||
|
||||
Nächste Schritte:
|
||||
Wie geht es weiter? Wer macht was?`;
|
||||
|
|
@ -1,13 +1,3 @@
|
|||
@mixin inputstyle {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $color-silver-light;
|
||||
max-width: 100%;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
$icon-size: 20px;
|
||||
|
||||
|
|
@ -39,9 +29,7 @@ $icon-size: 20px;
|
|||
}
|
||||
|
||||
.skillbox-auto-grow {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
@include auto-grow;
|
||||
}
|
||||
|
||||
.base-input-container {
|
||||
|
|
|
|||
|
|
@ -214,3 +214,20 @@
|
|||
max-width: 500px;
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
@mixin inputstyle {
|
||||
display: flex;
|
||||
padding: $medium-spacing;
|
||||
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $color-silver-light;
|
||||
max-width: 100%;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
@mixin auto-grow {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue