wip

src/client/app/common/views/components/ui/button.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="ui-button">
-	<button :type="type">
+<div class="ui-button" :class="[styl]">
+	<button :type="type" @click="$emit('click')">
 		<slot></slot>
 	</button>
 </div>
@@ -20,7 +20,9 @@ export default Vue.extend({
 			styl: 'fill'
 		};
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';

src/client/app/common/views/components/ui/card.vue

@@ -25,9 +25,13 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	padding 16px
+	color isDark ? #fff : #000
 	background isDark ? #282C37 : #fff
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
+	@media (min-width 500px)
+		padding 32px
+
 	> header
 		font-weight normal
 		font-size 24px

src/client/app/common/views/components/ui/form.vue

@@ -11,7 +11,7 @@ import Vue from 'vue';
 export default Vue.extend({
 	props: {
 		disabled: {
-			type: String,
+			type: Boolean,
 			required: false
 		}
 	}

src/client/app/common/views/components/ui/input.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ui-input" :class="[{ focused, filled }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input" @click="focus">
+	<div class="input" @click="focus" @mousedown="focus">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
 			<div class="value" ref="passwordMetar"></div>
 		</div>
@@ -62,7 +62,6 @@ export default Vue.extend({
 			required: false
 		},
 		autocomplete: {
-			type: String,
 			required: false
 		},
 		withPasswordMeter: {
@@ -113,7 +112,9 @@ export default Vue.extend({
 			}
 		}
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';
@@ -160,6 +161,7 @@ root(isDark, fill)
 
 	> .input
 		display flex
+		cursor text
 
 		if fill
 			padding 6px 12px

src/client/app/common/views/components/ui/radio.vue

@@ -87,7 +87,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px rgba(#000, 0.54)
+		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 		border-radius 100%
 		transition inherit
 

src/client/app/common/views/components/ui/select.vue

@@ -48,7 +48,9 @@ export default Vue.extend({
 			this.v = v;
 		}
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';
@@ -101,7 +103,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background rgba(#000, 0.42)
+				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
 
 			&:after
 				content ''
@@ -141,14 +143,15 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
+			color isDark ? #fff : #000
 			background transparent
 			border none
 			border-radius 0
 			outline none
 			box-shadow none
 
-			&[type='file']
-				display none
+			*
+				color #000
 
 		> .prefix
 		> .suffix

src/client/app/common/views/components/ui/switch.vue

@@ -92,7 +92,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
+		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
 		outline none
 		border-radius 14px
 		transition inherit