Add Status Bar nayarahilton#1

lucasjs · Nov 8, 2017 · a4bfbdd · a4bfbdd
1 parent e20e7c2
commit a4bfbdd
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -40,4 +40,7 @@ export default {
 	svg
 		width 20px
 		height 20px
+
+	main
+		padding 20px
 </style>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
@@ -0,0 +1,52 @@
+<template>
+	<header class="status-bar">
+		<a
+			:href="link"
+			class="status-bar__link"
+		>
+			<
+		</a>
+		<h1
+			class="status-bar__title"
+		>
+			{{ title }}
+		</h1>
+	</header>
+</template>
+
+<script>
+export default {
+	props: {
+		link: {
+			type: String,
+		},
+		title: {
+			required: true,
+			type: String,
+		},
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+	@import '../assets/styles/_mixins'
+	@import '../assets/styles/_colors'
+
+	.status-bar
+		height 60px
+		linear_gradient(left, lightness($dark-pink, 40%), lightness($blue, 50%))
+		padding 0 20px
+
+		&__link
+			color #fff
+			display inline
+			line-height 60px
+			margin-right 10px
+
+		&__title
+			color #fff
+			font-size 18pt
+			font-weight 300
+			line-height 60px
+			display inline
+</style>
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
@@ -1,39 +1,46 @@
 <template>
 	<div class="register">
-		<div class="presentation-holder">
-			<h2 class="title">Seus Dados</h2>
-			<p>{{ msg }}</p>
-		</div>
+		<status-bar
+			link="/home"
+			title="Cadastro"
+		/>
+		<main class="register-main">
+			<div class="presentation-holder">
+				<h2 class="title">Seus Dados</h2>
+				<p>{{ msg }}</p>
+			</div>
 
-		<div class="btn-holder">
-			<social-button text-inner="Completar com o Linkedin" />
-			<main-input
-				type="text"
-				placeholder="Nome"
-				:required="true"
-			/>
-			<main-input
-				type="email"
-				placeholder="Email"
-				:required="true"
-			/>
-			<main-input
-				type="password"
-				placeholder="Senha"
-				:required="true"
-			/>
-			<div class="login-holder">
-				<main-button
-					button-type="router"
-					text-inner="Próximo"
-					linkto="/Home"
+			<div class="btn-holder">
+				<social-button text-inner="Completar com o Linkedin" />
+				<main-input
+					type="text"
+					placeholder="Nome"
+					:required="true"
+				/>
+				<main-input
+					type="email"
+					placeholder="Email"
+					:required="true"
+				/>
+				<main-input
+					type="password"
+					placeholder="Senha"
+					:required="true"
 				/>
+				<div class="login-holder">
+					<main-button
+						button-type="router"
+						text-inner="Próximo"
+						linkto="/Home"
+					/>
+				</div>
 			</div>
-		</div>
+		</main>
 	</div>
 </template>
 
 <script>
+import StatusBar from '../components/StatusBar';
 import SocialButton from '../components/SocialButton';
 import MainButton from '../components/MainButton';
 import MainInput from '../components/MainInput';
@@ -46,6 +53,7 @@ export default {
 		};
 	},
 	components: {
+		'status-bar': StatusBar,
 		'social-button': SocialButton,
 		'main-button': MainButton,
 		'main-input': MainInput,
@@ -54,6 +62,5 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-	.register
-		padding 20px
+	
 </style>