liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: updated nav buttons look

Browse Source
This commit is contained in:
NGPixel
2017-05-26 23:01:32 -04:00
parent 6f59ee4d52
commit 6faf058c21
2 changed files with 46 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
client/js/components/modal-create-user.vue
View File

@@ -1,37 +1,40 @@
<template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }')
.modal-background
.modal-container
.modal-content
header.is-blue
span Create / Authorize User
p.modal-notify(v-bind:class='{ "is-active": loading }'): i
section
label.label Email address:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus)
section
label.label Provider:
p.control.is-fullwidth
select(v-model='provider')
option(value='local') Local Database
option(value='windowslive') Microsoft Account
option(value='google') Google ID
option(value='facebook') Facebook
option(value='github') GitHub
option(value='slack') Slack
section(v-if='provider=="local"')
label.label Password:
p.control.is-fullwidth
input.input(type='password', placeholder='', v-model='password')
section(v-if='provider=="local"')
label.label Full Name:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. John Doe', v-model='name')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-blue
span Create / Authorize User
p.modal-notify(v-bind:class='{ "is-active": loading }'): i
section
label.label Email address:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus)
section
label.label Provider:
p.control.is-fullwidth
select(v-model='provider')
option(value='local') Local Database
option(value='windowslive') Microsoft Account
option(value='google') Google ID
option(value='facebook') Facebook
option(value='github') GitHub
option(value='slack') Slack
section(v-if='provider=="local"')
label.label Password:
p.control.is-fullwidth
input.input(type='password', placeholder='', v-model='password')
section(v-if='provider=="local"')
label.label Full Name:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. John Doe', v-model='name')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User
</template>
<script>

30
client/scss/components/nav.scss
View File

@@ -68,6 +68,11 @@
flex-grow: 1;
justify-content: flex-end;
}
.nav-item {
align-items: stretch;
padding: 0 0 0 10px;
}
}
.nav-item {
@@ -123,40 +128,25 @@
// BUTTONS
.button {
border: 1px solid mc($primary, '900');
background-color: mc($primary, '800');
border: none;
background-color: mc($primary, '600');
transition: all .4s ease;
color: #FFF;
border-radius: 0;
&:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
height: auto;
&.is-outlined {
background-color: mc($primary, '600');
border-color: mc($primary, '800');
background-color: mc($primary, '500');
color: mc($primary, '100');
}
&:hover {
border-color: mc($primary, '900');
background-color: mc($primary, '900');
background-color: mc($primary, '700');
color: #FFF;
}
}
.button + .button {
margin-left: 1px;
}
// INPUTS
.control {