generated from alphane/template
making the sign in page simple
This commit is contained in:
@@ -12,24 +12,24 @@
|
|||||||
class="px-8"
|
class="px-8"
|
||||||
style="max-width: 500px"
|
style="max-width: 500px"
|
||||||
>
|
>
|
||||||
<img
|
<!-- <img
|
||||||
class="d-inline-block d-lg-none"
|
class="d-inline-block d-lg-none"
|
||||||
src="@/assets/app_logo_small.png"
|
src="@/assets/app_logo_small.png"
|
||||||
style="height: 66px; transform: rotate(-12deg)"
|
style="height: 66px; transform: rotate(-12deg)"
|
||||||
/>
|
/> -->
|
||||||
<h2
|
<h2
|
||||||
class="text-h1 textPrimary font-weight-semibold mb-0"
|
class="text-h1 textPrimary font-weight-semibold mb-0"
|
||||||
style="font-size: 2.5rem !important"
|
style="font-size: 2.5rem !important"
|
||||||
>
|
>
|
||||||
CALEBBURKEDEV
|
{{ APPLICATION_NAME }}
|
||||||
</h2>
|
</h2>
|
||||||
<h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
|
<h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
|
||||||
<v-btn
|
<v-btn
|
||||||
block
|
block
|
||||||
color="primary"
|
color="primary"
|
||||||
|
text="Sign in"
|
||||||
@click="doLogin"
|
@click="doLogin"
|
||||||
>Sign in</v-btn
|
/>
|
||||||
>
|
|
||||||
</h6>
|
</h6>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col
|
<!-- <v-col
|
||||||
cols="12"
|
cols="12"
|
||||||
lg="7"
|
lg="7"
|
||||||
xl="8"
|
xl="8"
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
style="opacity: 0.15; width: 80%"
|
style="opacity: 0.15; width: 80%"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</v-col>
|
</v-col> -->
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -81,6 +81,7 @@
|
|||||||
import { onMounted } from "vue"
|
import { onMounted } from "vue"
|
||||||
import { useAuth0 } from "@auth0/auth0-vue"
|
import { useAuth0 } from "@auth0/auth0-vue"
|
||||||
|
|
||||||
|
import { APPLICATION_NAME } from "@/config"
|
||||||
import useCurrentUser from "@/use/use-current-user"
|
import useCurrentUser from "@/use/use-current-user"
|
||||||
|
|
||||||
const { reset: resetCurrentUser } = useCurrentUser()
|
const { reset: resetCurrentUser } = useCurrentUser()
|
||||||
|
|||||||
@@ -1,90 +1,90 @@
|
|||||||
.authentication{
|
.authentication {
|
||||||
&::before{
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
opacity: 0.3;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% / 400% 400%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width:1280px){
|
|
||||||
.auth-header{
|
|
||||||
position: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mw-450{
|
|
||||||
max-width: 450px;
|
|
||||||
width: 100%;;
|
|
||||||
}
|
|
||||||
.auth-header{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
opacity: 0.3;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% /
|
||||||
|
400% 400%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.auth-header {
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.verification{
|
.mw-450 {
|
||||||
.v-field__input{
|
max-width: 450px;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.auth-divider{
|
.auth-header {
|
||||||
span{
|
position: absolute;
|
||||||
z-index: 1;
|
top: 0;
|
||||||
}
|
left: 0;
|
||||||
&::before{
|
}
|
||||||
position: absolute;
|
.verification {
|
||||||
width: 100%;
|
.v-field__input {
|
||||||
border-top: thin solid rgb(var(--v-theme-borderColor));
|
text-align: center;
|
||||||
top: 50%;
|
}
|
||||||
content: "";
|
}
|
||||||
transform: translateY(50%);
|
.auth-divider {
|
||||||
left: 0;
|
span {
|
||||||
}
|
z-index: 1;
|
||||||
&::after
|
}
|
||||||
{
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: thin solid rgb(var(--v-theme-borderColor));
|
border-top: thin solid rgb(var(--v-theme-borderColor));
|
||||||
top: 50%;
|
top: 50%;
|
||||||
content: "";
|
content: "";
|
||||||
transform: translateY(50%);
|
transform: translateY(50%);
|
||||||
right: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
border-top: thin solid rgb(var(--v-theme-borderColor));
|
||||||
|
top: 50%;
|
||||||
|
content: "";
|
||||||
|
transform: translateY(50%);
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1536px){
|
@media (min-width: 1536px) {
|
||||||
.auth{
|
.auth {
|
||||||
.v-col-lg-7{
|
.v-col-lg-7 {
|
||||||
flex: 0 0 66.66%;
|
flex: 0 0 66.66%;
|
||||||
max-width: 66.66%;
|
max-width: 66.66%;
|
||||||
}
|
|
||||||
.v-col-lg-5{
|
|
||||||
flex: 0 0 33.33%;
|
|
||||||
max-width: 33.33%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.v-col-lg-5 {
|
||||||
|
flex: 0 0 33.33%;
|
||||||
|
max-width: 33.33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width:1280px){
|
@media screen and (max-width: 1280px) {
|
||||||
.mh-100{
|
.mh-100 {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:600px){
|
@media screen and (max-width: 600px) {
|
||||||
.mw-100{
|
.mw-100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth{
|
.auth {
|
||||||
.v-switch .v-label, .v-checkbox .v-label {
|
.v-switch .v-label,
|
||||||
opacity: 0.7;
|
.v-checkbox .v-label {
|
||||||
font-weight: 400 !important;
|
opacity: 0.7;
|
||||||
}
|
font-weight: 400 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user