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

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

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