Skip to content

N
nuxtjschat
Commit 0d7b7b70 by Nguyễn Đức Huy
Options

Change to scss

parent 202af87d
Pipeline #1136 failed with stages
in 0 seconds
Showing with 335 additions and 12 deletions
assets/css/custom.scss 0 → 100644
/* TABS */
@-webkit-keyframes "fadeindown" {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes "fadeindown" {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes "faden" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes "fadein" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes "fadein" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html {
background-color: #fffb027a;
}
body {
font-family: 'Poppins', sans-serif;
height: 100vh;
}
a {
color: #92badd;
display: inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
margin: 40px 8px 10px 8px;
color: #ccc;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
width: 90%;
max-width: 450px;
position: relative;
padding: 1px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
h2.inactive {
color: #ccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
input[type='button'] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&:hover {
background-color: #39ace7;
}
&:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
}
input[type='submit'] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&:hover {
background-color: #39ace7;
}
&:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
}
input[type='reset'] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&:hover {
background-color: #39ace7;
}
&:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
}
input[type='text'] {
background-color: #f6f6f6;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
&:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
&:placeholder {
color: #ccc;
}
}
input[type='password'] {
background-color: #f6f6f6;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
&:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
&:placeholder {
color: #ccc;
}
}
.fadeindown {
-webkit-animation-name: fadeindown;
animation-name: fadeindown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadein {
opacity: 0;
-webkit-animation: fadein ease-in 1;
-moz-animation: fadein ease-in 1;
animation: fadein ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.fadein.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadein.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadein.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadein.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.underlineHover {
&:hover {
color: #0d0d0d;
}
}
* {
&:focus {
outline: none;
}
}
#icon {
width: 60%;
}
button {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
pages/index.vue
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
} }
</script> </script>
<style> <style lang="scss">
@import '@/assets/css/custom.css'; @import '@/assets/css/custom.css';
.container { .container {
margin: 0 auto; margin: 0 auto;
......
pages/login.vue
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
</script> </script>
<style scope> <style scope>
@import '@/assets/css/custom.css'; @import '@/assets/css/custom.scss';
.container { .container {
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
......
pages/register/index.vue
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
</script> </script>
<style scope> <style scope>
@import '@/assets/css/custom.css'; @import '@/assets/css/custom.scss';
.container { .container {
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
......
store/index.js
// export const getters = {
// isAuthenticated(state) {
// return state.auth.loggedIn
// },
// loggedInUser(state) {
// return state.auth.user
// },
// }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment