FEAT Toasts
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 239 B |
126
src/Test.vue
|
@ -1,68 +1,96 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="test">
|
<BaseContainer>
|
||||||
<h1>Buttons</h1>
|
<ContentContainer title="Content Container" buttons="true">
|
||||||
<div>
|
<template #buttons>
|
||||||
<button>Default</button>
|
<button>Button Bar</button>
|
||||||
<button disabled>Default</button>
|
<button class="action">Button Bar</button>
|
||||||
|
</template>
|
||||||
<button class="generic">Generic</button>
|
<template #content>
|
||||||
<button class="generic" disabled>Generic</button>
|
<h1>Buttons</h1>
|
||||||
|
<div>
|
||||||
<button class="action">Action</button>
|
<button>Default</button>
|
||||||
<button class="action" disabled>Action</button>
|
<button disabled>Default</button>
|
||||||
|
|
||||||
|
<button class="generic">Generic</button>
|
||||||
|
<button class="generic" disabled>Generic</button>
|
||||||
|
|
||||||
|
<button class="action">Action</button>
|
||||||
|
<button class="action" disabled>Action</button>
|
||||||
|
|
||||||
|
|
||||||
<button class="outlined">Default</button>
|
<button class="outlined">Default</button>
|
||||||
<button class="outlined" disabled>Default</button>
|
<button class="outlined" disabled>Default</button>
|
||||||
|
|
||||||
<button class="generic outlined">Generic</button>
|
<button class="generic outlined">Generic</button>
|
||||||
<button class="generic outlined" disabled>Generic</button>
|
<button class="generic outlined" disabled>Generic</button>
|
||||||
|
|
||||||
<button class="action outlined">Action</button>
|
<button class="action outlined">Action</button>
|
||||||
<button class="action outlined" disabled>Action</button>
|
<button class="action outlined" disabled>Action</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Form Elements</h1>
|
||||||
|
<div>
|
||||||
|
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
|
||||||
|
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
|
||||||
|
<FormText placeholder="Input Text" label="Field Label" off="true"/>
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" />
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
|
||||||
|
<FormSelect placeholder="Placeholder" label="Select">
|
||||||
|
<option value="optionA">Option A</option>
|
||||||
|
<option value="optionB">Option B</option>
|
||||||
|
<option value="optionC">Option C</option>
|
||||||
|
<option value="optionD">Option D</option>
|
||||||
|
</FormSelect>
|
||||||
|
<FormSelect placeholder="Placeholder" label="Select" off="true">
|
||||||
|
<option value="optionA">Option A</option>
|
||||||
|
<option value="optionB">Option B</option>
|
||||||
|
<option value="optionC">Option C</option>
|
||||||
|
<option value="optionD">Option D</option>
|
||||||
|
</FormSelect>
|
||||||
|
<FormCheckbox label="Checkbox"/>
|
||||||
|
<FormCheckbox label="Checkbox" error="An Error Message"/>
|
||||||
|
<FormCheckbox label="Checkbox" off="true"/>
|
||||||
|
</div>
|
||||||
|
<h2>Toasts</h2>
|
||||||
|
<div>
|
||||||
|
<Toast type="info">An Information!</Toast>
|
||||||
|
<Toast type="warn">A Warning!</Toast>
|
||||||
|
<Toast type="error">An Error!</Toast>
|
||||||
|
<Toast type="success">Success!</Toast>
|
||||||
|
<Toast auto_close="5000">Autoclose</Toast>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ContentContainer>
|
||||||
|
</BaseContainer>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1>Form Elements</h1>
|
|
||||||
<div>
|
|
||||||
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
|
|
||||||
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
|
|
||||||
<FormText placeholder="Input Text" label="Field Label" off="true"/>
|
|
||||||
<FormNumber placeholder="A Number" label="Field Label" />
|
|
||||||
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
|
|
||||||
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
|
|
||||||
<FormSelect placeholder="Placeholder" label="Select">
|
|
||||||
<option value="optionA">Option A</option>
|
|
||||||
<option value="optionB">Option B</option>
|
|
||||||
<option value="optionC">Option C</option>
|
|
||||||
<option value="optionD">Option D</option>
|
|
||||||
</FormSelect>
|
|
||||||
<FormSelect placeholder="Placeholder" label="Select" off="true">
|
|
||||||
<option value="optionA">Option A</option>
|
|
||||||
<option value="optionB">Option B</option>
|
|
||||||
<option value="optionC">Option C</option>
|
|
||||||
<option value="optionD">Option D</option>
|
|
||||||
</FormSelect>
|
|
||||||
<FormCheckbox label="Checkbox"/>
|
|
||||||
<FormCheckbox label="Checkbox" error="An Error Message"/>
|
|
||||||
<FormCheckbox label="Checkbox" off="true"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import BaseContainer from './components/layout/BaseContainer';
|
||||||
|
import ContentContainer from './components/layout/ContentContainer';
|
||||||
|
|
||||||
import FormText from './components/form/FormText';
|
import FormText from './components/form/FormText';
|
||||||
import FormNumber from './components/form/FormNumber';
|
import FormNumber from './components/form/FormNumber';
|
||||||
import FormSelect from './components/form/FormSelect';
|
import FormSelect from './components/form/FormSelect';
|
||||||
import FormCheckbox from './components/form/FormCheckbox';
|
import FormCheckbox from './components/form/FormCheckbox';
|
||||||
|
|
||||||
|
import Toast from './components/Toast'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
BaseContainer,
|
||||||
|
ContentContainer,
|
||||||
|
|
||||||
FormText,
|
FormText,
|
||||||
FormNumber,
|
FormNumber,
|
||||||
FormSelect,
|
FormSelect,
|
||||||
FormCheckbox
|
FormCheckbox,
|
||||||
|
|
||||||
|
Toast
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
|
@ -78,9 +106,7 @@ export default {
|
||||||
@import './assets/styles/main.css';
|
@import './assets/styles/main.css';
|
||||||
@import './assets/styles/buttons.css';
|
@import './assets/styles/buttons.css';
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--white-washed);
|
|
||||||
}
|
|
||||||
|
|
||||||
#test {
|
#test {
|
||||||
margin: 40px;
|
margin: 40px;
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
|
After Width: | Height: | Size: 324 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 239 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
|
After Width: | Height: | Size: 307 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
|
After Width: | Height: | Size: 381 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
After Width: | Height: | Size: 234 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
|
After Width: | Height: | Size: 188 B |
|
@ -4,7 +4,7 @@ button {
|
||||||
--color-default-disabled: #AFDA9A;
|
--color-default-disabled: #AFDA9A;
|
||||||
|
|
||||||
padding: 4px 36px;
|
padding: 4px 36px;
|
||||||
margin: 4px;
|
margin: 8px 4px;
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|
|
@ -76,6 +76,11 @@
|
||||||
color: var(--grey-dark);
|
color: var(--grey-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
|
h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
|
||||||
h2 { font-size: 2.0rem; padding: 24px 4px; }
|
h2 { font-size: 2.0rem; padding: 24px 4px; }
|
||||||
h3 { font-size: 1.5rem; padding: 24px 4px; }
|
h3 { font-size: 1.5rem; padding: 24px 4px; }
|
||||||
|
|
|
@ -0,0 +1,119 @@
|
||||||
|
<template>
|
||||||
|
<div class="toast" :class="type">
|
||||||
|
<div class="icon"></div>
|
||||||
|
<p><slot></slot></p>
|
||||||
|
<div class="close" v-if="!auto_close" @click="close()"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
'type',
|
||||||
|
'auto_close'
|
||||||
|
],
|
||||||
|
data(){
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close(){
|
||||||
|
this.$destroy();
|
||||||
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
if(this.auto_close){
|
||||||
|
setTimeout(this.close, this.auto_close);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
div.toast {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
align-content: space-between;
|
||||||
|
justify-items: stretch;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
margin: 8px;
|
||||||
|
color: var(--info);
|
||||||
|
background-color: var(--info-light);
|
||||||
|
border-left: 8px solid var(--info);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toast p {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 24px;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: left;
|
||||||
|
justify-self: flex-start;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.icon {
|
||||||
|
flex: 0 0 24px;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask: url('../assets/icons/info-24px.svg');
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
transform: scale(1.2);
|
||||||
|
background: var(--info);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
div.close {
|
||||||
|
background: black;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask: url('../assets/icons/close-24px.svg');
|
||||||
|
float: right;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
transform: scale(0.6);
|
||||||
|
background: var(--grey);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.close:hover{
|
||||||
|
background: var(--primary-blue-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toast.warn {
|
||||||
|
color: var(--warn);
|
||||||
|
background-color: var(--warn-light);
|
||||||
|
border-color: var(--warn);
|
||||||
|
}
|
||||||
|
div.toast.warn .icon {
|
||||||
|
mask: url('../assets/icons/warning-24px.svg');
|
||||||
|
background: var(--warn);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toast.error {
|
||||||
|
color: var(--error);
|
||||||
|
background-color: var(--error-light);
|
||||||
|
border-color: var(--error);
|
||||||
|
}
|
||||||
|
div.toast.error .icon {
|
||||||
|
mask: url('../assets/icons/error_outline-24px.svg');
|
||||||
|
background: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toast.success {
|
||||||
|
color: var(--success);
|
||||||
|
background-color: var(--success-light);
|
||||||
|
border-color: var(--success);
|
||||||
|
}
|
||||||
|
div.toast.success .icon {
|
||||||
|
mask: url('../assets/icons/check_circle_outline-24px.svg');
|
||||||
|
background: var(--success);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -92,6 +92,10 @@ export default {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-base.disabled > label {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
|
.form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
|
||||||
color: #00000077;
|
color: #00000077;
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,16 +52,14 @@ export default {
|
||||||
label.disabled::after {
|
label.disabled::after {
|
||||||
background-color: var(--grey-lightest);
|
background-color: var(--grey-lightest);
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
border-color: var(--grey-lightest);
|
border-color: var(--grey-light);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:focus + label::after {
|
|
||||||
box-shadow: 0 0 4px var(--success);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked + label::after {
|
input[type="checkbox"]:checked + label::after {
|
||||||
box-shadow: 0 0 4px var(--success);
|
background-color: var(--primary-blue-dark);
|
||||||
|
box-shadow: inset 0px 0px 0px 3px #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div class="module-container">
|
||||||
|
<!-- <RouteDisplay/> -->
|
||||||
|
<slot>
|
||||||
|
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// import RouteDisplay from '../RouteDisplay';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
// RouteDisplay
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.module-container {
|
||||||
|
flex: 1;
|
||||||
|
background-color: var(--white-washed);
|
||||||
|
padding: 48px 24px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,56 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h2>{{title}}</h2>
|
||||||
|
</div>
|
||||||
|
<div v-if="buttons" class="header">
|
||||||
|
<slot name="buttons"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
'title',
|
||||||
|
'buttons'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
color: var(--grey-dark);
|
||||||
|
background-color: var(--white-normal);
|
||||||
|
border: 1px solid var(--grey-light);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 8px 8px 20px #00000022;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header, .footer {
|
||||||
|
padding: 0px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h2 {
|
||||||
|
padding: 8px 0;
|
||||||
|
color: var(--primary-blue-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header { border-bottom: 1px solid var(--grey-light); }
|
||||||
|
.footer { border-top: 1px solid var(--grey-light); }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|