Skip to content

Commit 33297d3

Browse files
woothuwoothu
committed
feat: change styles of pages views to version 3
1 parent 29360a3 commit 33297d3

File tree

4 files changed

+84
-79
lines changed

4 files changed

+84
-79
lines changed

‎src/views/pages/Login.vue

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,56 @@
11
<template>
2-
<div class="app flex-row align-items-center">
3-
<div class="container">
4-
<CRow class="justify-content-center">
5-
<CCol md="8">
6-
<CCardGroup>
7-
<CCard class="p-4">
8-
<CCardBody>
9-
<CForm>
10-
<h1>Login</h1>
11-
<p class="text-muted">Sign In to your account</p>
12-
<CFormInput
13-
prepend="<i class='icon-user'></i>"
14-
placeholder="Username"
15-
autocomplete="username email"
16-
/>
17-
<CFormInput
18-
prepend="<i class='icon-lock'></i>"
19-
placeholder="Password"
20-
type="password"
21-
autocomplete="curent-password"
22-
/>
23-
<CRow>
24-
<CCol col="6">
25-
<CButton variant="primary" class="px-4">Login</CButton>
26-
</CCol>
27-
<CCol col="6" class="text-right">
28-
<CButton variant="link" class="px-0">Forgot password?</CButton>
29-
</CCol>
30-
</CRow>
31-
</CForm>
32-
</CCardBody>
33-
</CCard>
34-
<CCard
35-
class="text-white text-center bg-primary py-5 d-md-down-none"
36-
style="width:44%"
37-
bodyWrapper
2+
<CContainer
3+
class="c-d-flex c-align-items-center"
4+
style="min-height:100vh;"
5+
>
6+
<CRow class="c-justify-content-center" >
7+
<CCol md="8">
8+
<CCardGroup>
9+
<CCard class="c-p-4">
10+
<CCardBody>
11+
<CForm>
12+
<h1>Login</h1>
13+
<p class="text-muted">Sign In to your account</p>
14+
<CFormInput
15+
prepend="<i class='icon-user'></i>"
16+
placeholder="Username"
17+
autocomplete="username email"
18+
/>
19+
<CFormInput
20+
prepend="<i class='icon-lock'></i>"
21+
placeholder="Password"
22+
type="password"
23+
autocomplete="curent-password"
24+
/>
25+
<CRow>
26+
<CCol col="6">
27+
<CButton variant="primary" class="c-px-4">Login</CButton>
28+
</CCol>
29+
<CCol col="6" class="c-text-right">
30+
<CButton variant="link" class="c-px-0">Forgot password?</CButton>
31+
</CCol>
32+
</CRow>
33+
</CForm>
34+
</CCardBody>
35+
</CCard>
36+
<CCard
37+
class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
38+
style="width:44%"
39+
bodyWrapper
40+
>
41+
<h2>Sign up</h2>
42+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
43+
<CButton
44+
variant="primary"
45+
class="active c-mt-3"
3846
>
39-
<h2>Sign up</h2>
40-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
41-
<CButton
42-
variant="primary"
43-
class="active mt-3"
44-
>
45-
Register Now!
46-
</CButton>
47-
</CCard>
48-
</CCardGroup>
49-
</CCol>
50-
</CRow>
51-
</div>
52-
</div>
47+
Register Now!
48+
</CButton>
49+
</CCard>
50+
</CCardGroup>
51+
</CCol>
52+
</CRow>
53+
</CContainer>
5354
</template>
5455

5556
<script>

‎src/views/pages/Page404.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<div class="app flex-row align-items-center">
3-
<div class="container">
4-
<CRow class="justify-content-center">
2+
<div class="app c-flex-row c-align-items-center">
3+
<CContainer>
4+
<CRow class="c-justify-content-center">
55
<CCol md="6">
6-
<div class="clearfix">
7-
<h1 class="float-left display-3 mr-4">404</h1>
8-
<h4 class="pt-3">Oops! You're lost.</h4>
9-
<p class="text-muted">The page you are looking for was not found.</p>
6+
<div class="c-clearfix">
7+
<h1 class="c-float-left c-display-3 c-mr-4">404</h1>
8+
<h4 class="c-pt-3">Oops! You're lost.</h4>
9+
<p class="c-text-muted">The page you are looking for was not found.</p>
1010
</div>
1111
<CFormInput
12-
class="mb-0"
12+
class="c-mb-0"
1313
prepend="<i class='fa fa-search'></i>"
1414
placeholder="What are you looking for?"
1515
>
@@ -19,7 +19,7 @@
1919
</CFormInput>
2020
</CCol>
2121
</CRow>
22-
</div>
22+
</CContainer>
2323
</div>
2424
</template>
2525

‎src/views/pages/Page500.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<div class="app flex-row align-items-center">
3-
<div class="container">
4-
<CRow class="justify-content-center">
2+
<div class="c-app c-flex-row c-align-items-center">
3+
<CContainer>
4+
<CRow class="c-justify-content-center">
55
<CCol md="6">
6-
<div class="clearfix">
7-
<h1 class="float-left display-3 mr-4">500</h1>
8-
<h4 class="pt-3">Houston, we have a problem!</h4>
9-
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
6+
<div class="c-clearfix">
7+
<h1 class="c-float-left c-display-3 c-mr-4">500</h1>
8+
<h4 class="c-pt-3">Houston, we have a problem!</h4>
9+
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
1010
</div>
1111
<CFormInput
12-
class="mb-0"
12+
class="c-mb-0"
1313
prepend="<i class='fa fa-search'></i>"
1414
placeholder="What are you looking for?"
1515
>
@@ -19,7 +19,7 @@
1919
</CFormInput>
2020
</CCol>
2121
</CRow>
22-
</div>
22+
</CContainer>
2323
</div>
2424
</template>
2525

‎src/views/pages/Register.vue

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div class="app flex-row align-items-center">
3-
<div class="container">
4-
<CRow class="justify-content-center">
2+
<div class="c-app c-flex-row c-align-items-center">
3+
<CContainer>
4+
<CRow class="c-justify-content-center">
55
<CCol md="6" sm="8">
6-
<CCard class="mx-4">
7-
<CCardBody class="p-4">
6+
<CCard class="c-mx-4">
7+
<CCardBody class="c-p-4">
88
<CForm>
99
<h1>Register</h1>
10-
<p class="text-muted">Create your account</p>
10+
<p class="c-text-muted">Create your account</p>
1111
<CFormInput
1212
placeholder="Username"
1313
prepend="<i class='icon-user'></i>"
@@ -29,25 +29,29 @@
2929
type="password"
3030
prepend="<i class='icon-lock'></i>"
3131
autocomplete="new-password"
32-
class="mb-4"
32+
class="c-mb-4"
3333
/>
3434
<CButton variant="success" block>Create Account</CButton>
3535
</CForm>
3636
</CCardBody>
37-
<CCardFooter class="p-4">
37+
<CCardFooter class="c-p-4">
3838
<CRow>
3939
<CCol col="6">
40-
<CButton block class="btn btn-facebook"><span>facebook</span></CButton>
40+
<CButton block class="btn btn-facebook">
41+
<span>facebook</span>
42+
</CButton>
4143
</CCol>
4244
<CCol col="6">
43-
<CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
45+
<CButton block class="btn btn-twitter" type="button">
46+
<span>twitter</span>
47+
</CButton>
4448
</CCol>
4549
</CRow>
4650
</CCardFooter>
4751
</CCard>
4852
</CCol>
4953
</CRow>
50-
</div>
54+
</CContainer>
5155
</div>
5256
</template>
5357

0 commit comments

Comments
 (0)