Daesang 로그인 디자인 수정
This commit is contained in:
khk
parent
83e29c172b
commit
4e44407f9b
|
|
@ -1,5 +1,84 @@
|
||||||
<div class="login" fxLayout="column">
|
<div class="login" fxLayout="column">
|
||||||
<div class="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
<div class="login-wrapper">
|
||||||
|
<div class="slider">
|
||||||
|
<div class="slider_slide slider_slide-active" data-slide="1">
|
||||||
|
<div class="slider_wrap slider_wrap-hacked">
|
||||||
|
<div class="slider_back"></div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_inner">
|
||||||
|
<div class="slider_header">
|
||||||
|
<span class="company-name">DAESANG Messenger</span>
|
||||||
|
<span class="h-line"></span>
|
||||||
|
</div>
|
||||||
|
<div class="slider_content">
|
||||||
|
<h1>
|
||||||
|
“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”
|
||||||
|
</h1>
|
||||||
|
<p class="info">
|
||||||
|
늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과
|
||||||
|
정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해,
|
||||||
|
건강한 식생활 문화를 다양한 곳으로 전달합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_slide" data-slide="2">
|
||||||
|
<div class="slider_wrap slider_wrap-hacked">
|
||||||
|
<div class="slider_back"></div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_inner">
|
||||||
|
<div class="slider_header">
|
||||||
|
<span class="company-name">DAESANG Messenger</span>
|
||||||
|
<span class="h-line"></span>
|
||||||
|
</div>
|
||||||
|
<div class="slider_content">
|
||||||
|
<h1>
|
||||||
|
세계시장에 깊고 온화한 한국의 맛을 전파합니다!
|
||||||
|
</h1>
|
||||||
|
<p class="info">
|
||||||
|
대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출
|
||||||
|
성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의
|
||||||
|
새로운 장을 열었습니다. 사람과 자연을 존중하는 대상의 기업정신에
|
||||||
|
한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를
|
||||||
|
내리고 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_slide" data-slide="3">
|
||||||
|
<div class="slider_wrap slider_wrap-hacked">
|
||||||
|
<div class="slider_back"></div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_inner">
|
||||||
|
<div class="slider_header">
|
||||||
|
<span class="company-name">DAESANG Messenger</span>
|
||||||
|
<span class="h-line"></span>
|
||||||
|
</div>
|
||||||
|
<div class="slider_content">
|
||||||
|
<h1>
|
||||||
|
“ 나눌수록 맛있는 행복을 전합니다 ”
|
||||||
|
</h1>
|
||||||
|
<p class="info">
|
||||||
|
다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을
|
||||||
|
다합니다. 대상은 고객감동경영을 실천하고자 건강한 기업문화를
|
||||||
|
확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다. 뿐만
|
||||||
|
아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한
|
||||||
|
사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록
|
||||||
|
맛있는 행복을 실천하고 있습니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slider_indicators">
|
||||||
|
<div class="slider_indicator" data-slide="1"></div>
|
||||||
|
<div class="slider_indicator" data-slide="2"></div>
|
||||||
|
<div class="slider_indicator" data-slide="3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ucap-account-login
|
<ucap-account-login
|
||||||
[companyList]="companyList$ | async"
|
[companyList]="companyList$ | async"
|
||||||
[curCompanyCode]="fixedCompany"
|
[curCompanyCode]="fixedCompany"
|
||||||
|
|
@ -14,17 +93,8 @@
|
||||||
[useAutoLogin]="useAutoLogin"
|
[useAutoLogin]="useAutoLogin"
|
||||||
(login)="onLogin($event)"
|
(login)="onLogin($event)"
|
||||||
(notiClick)="onClickNoti($event)"
|
(notiClick)="onClickNoti($event)"
|
||||||
|
class="login-form-box"
|
||||||
>
|
>
|
||||||
</ucap-account-login>
|
</ucap-account-login>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--<button
|
|
||||||
mat-raised-button
|
|
||||||
color="accent"
|
|
||||||
class="submit-button"
|
|
||||||
aria-label="Template"
|
|
||||||
(click)="onClickTemplate()"
|
|
||||||
>
|
|
||||||
Template
|
|
||||||
</button>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,302 @@
|
||||||
.login {
|
.login {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 100%;
|
height: calc(100% - 50px);
|
||||||
background: #eaeff1;
|
background: #eaeff1;
|
||||||
background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
margin-top: 50px;
|
||||||
background: linear-gradient(to top, #93a3af, #eaeff1);
|
overflow: hidden;
|
||||||
|
/*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
||||||
|
background: linear-gradient(to top, #93a3af, #eaeff1);*/
|
||||||
|
|
||||||
.login-wrapper {
|
.login-wrapper {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
//background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$main: #777;
|
||||||
|
$back: #aaa;
|
||||||
|
$accent: hsl(220, 50%, 40%);
|
||||||
|
|
||||||
|
$sans: 'Open Sans', sans-serif;
|
||||||
|
$heebo: 'Heebo', sans-serif;
|
||||||
|
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
|
||||||
|
|
||||||
|
$base: 3vh;
|
||||||
|
|
||||||
|
$time: 1800ms;
|
||||||
|
|
||||||
|
$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
|
||||||
|
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||||
|
|
||||||
|
@mixin word-break-keep {
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
background: $main;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&_wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
transform: translateX(100vw);
|
||||||
|
top: 0%;
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform $time/4 $ease-in-out;
|
||||||
|
transform-origin: 0% 50%;
|
||||||
|
transition-delay: $time/4;
|
||||||
|
opacity: 0;
|
||||||
|
&-hacked {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_back {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: auto 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: none;
|
||||||
|
transition: filter $time/4 $ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0%;
|
||||||
|
background-size: auto 133.3333%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: none;
|
||||||
|
transform: scale(0.75);
|
||||||
|
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
|
||||||
|
opacity $time/4 step-end;
|
||||||
|
opacity: 0;
|
||||||
|
box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
|
||||||
|
padding: $base * 3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
&_header {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
width: 40%;
|
||||||
|
height: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: $base * 0.6;
|
||||||
|
color: #ffffff;
|
||||||
|
.company-name {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.h-line {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: center;
|
||||||
|
height: 2px;
|
||||||
|
border-bottom: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_content {
|
||||||
|
position: relative;
|
||||||
|
top: 64%;
|
||||||
|
width: 40%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: white;
|
||||||
|
font-family: $hangul;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $time/4;
|
||||||
|
h1 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: $base * 1.24;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: $base/2;
|
||||||
|
pointer-events: none;
|
||||||
|
text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
|
||||||
|
@include word-break-keep();
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: $base * 0.64;
|
||||||
|
line-height: $base * 0.9;
|
||||||
|
margin-bottom: $base/2;
|
||||||
|
@include word-break-keep();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_link {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
font-family: $heebo;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
letter-spacing: $base * 0.1;
|
||||||
|
font-weight: 100;
|
||||||
|
display: block;
|
||||||
|
bottom: 10%;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 10px 60px 10px 30px;
|
||||||
|
border-radius: 100px;
|
||||||
|
color: #00dbed;
|
||||||
|
width: $base * 5;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
border-top: 1px solid white;
|
||||||
|
border-right: 1px solid white;
|
||||||
|
display: block;
|
||||||
|
width: $base/3;
|
||||||
|
height: $base/3;
|
||||||
|
transform: translateX(0) translateY(-50%) rotate(45deg);
|
||||||
|
position: absolute;
|
||||||
|
font-family: $heebo;
|
||||||
|
font-weight: 100;
|
||||||
|
top: 50%;
|
||||||
|
left: $base * 4;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: #134a67;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_slide {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
transition: transform $time/3 $ease-in-out;
|
||||||
|
transition-delay: $time/3;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
transform: translatex(0%);
|
||||||
|
z-index: 2;
|
||||||
|
.slider_wrap {
|
||||||
|
transform: translateX(0);
|
||||||
|
transform-origin: 100% 50%;
|
||||||
|
opacity: 1;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.slider_back {
|
||||||
|
filter: blur(#{$base * 0.2});
|
||||||
|
transition: filter $time/2 $ease-in-out;
|
||||||
|
transition-delay: $time/2 !important;
|
||||||
|
}
|
||||||
|
.slider_inner {
|
||||||
|
transform: scale(0.7);
|
||||||
|
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
|
||||||
|
pointer-events: auto;
|
||||||
|
opacity: 1;
|
||||||
|
transition: transform $time/2 $ease-in-out,
|
||||||
|
box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
|
||||||
|
transition-delay: $time/2;
|
||||||
|
}
|
||||||
|
.slider_content {
|
||||||
|
opacity: 1;
|
||||||
|
transition-delay: $time * 3/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.slider_slide--active) .slider_wrap {
|
||||||
|
@keyframes hack {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-100vw);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
transform: translateX(-100vw);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
52% {
|
||||||
|
transform: translateX(100vw);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(100vw);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
animation-name: hack;
|
||||||
|
animation-duration: $time/2;
|
||||||
|
animation-delay: $time/4;
|
||||||
|
animation-timing-function: $ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1) .slider_back,
|
||||||
|
&:nth-child(1) .slider_inner {
|
||||||
|
background-image: url(/assets/images/login/bg_login01.png);
|
||||||
|
//background: #eee;
|
||||||
|
}
|
||||||
|
&:nth-child(2) .slider_back,
|
||||||
|
&:nth-child(2) .slider_inner {
|
||||||
|
background-image: url(/assets/images/login/bg_login02.png);
|
||||||
|
//background: #aaa;
|
||||||
|
}
|
||||||
|
&:nth-child(3) .slider_back,
|
||||||
|
&:nth-child(3) .slider_inner {
|
||||||
|
background-image: url(/assets/images/login/bg_login03.png);
|
||||||
|
//background: #888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.sig {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 8px;
|
||||||
|
right: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 100;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
z-index: 9999;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
.login-form-box {
|
||||||
|
position: absolute;
|
||||||
|
height: 70vh;
|
||||||
|
top: 15%;
|
||||||
|
right: 15%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||||
|
.slider {
|
||||||
|
&_content {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: white;
|
||||||
|
font-family: $heebo;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $time/4;
|
||||||
|
h1 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: $base * 1.2;
|
||||||
|
margin-bottom: $base;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-active {
|
||||||
|
.slider_inner {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 998 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -35,6 +35,16 @@
|
||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-raised-button
|
||||||
|
class="submit-button bg-accent-dark"
|
||||||
|
aria-label="LOG IN"
|
||||||
|
[disabled]="loginForm.invalid || !loginBtnEnable"
|
||||||
|
(click)="onClickLogin()"
|
||||||
|
>
|
||||||
|
{{ loginBtnText }}
|
||||||
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="remember-forgot-password"
|
class="remember-forgot-password"
|
||||||
fxLayout="row"
|
fxLayout="row"
|
||||||
|
|
@ -59,16 +69,6 @@
|
||||||
자동 로그인
|
자동 로그인
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
mat-raised-button
|
|
||||||
class="submit-button bg-accent-dark"
|
|
||||||
aria-label="LOG IN"
|
|
||||||
[disabled]="loginForm.invalid || !loginBtnEnable"
|
|
||||||
(click)="onClickLogin()"
|
|
||||||
>
|
|
||||||
{{ loginBtnText }}
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="register" fxLayout="column" fxLayoutAlign="center center">
|
<div class="register" fxLayout="column" fxLayoutAlign="center center">
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="policy">
|
<div class="policy bg-accent-light">
|
||||||
<a class="link" (click)="onClickNoti()">{{
|
<a class="link" (click)="onClickNoti()">{{
|
||||||
!!notiText ? notiText : '개인정보 처리방침'
|
!!notiText ? notiText : '개인정보 처리방침'
|
||||||
}}</a>
|
}}</a>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,34 @@
|
||||||
.login-form {
|
.login-form {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 384px;
|
transform: scale(1);
|
||||||
max-width: 384px;
|
width: 540px;
|
||||||
padding: 50px;
|
min-width: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 16%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: rgba(255, 255, 255, 1);
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
|
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||||
|
width: 420px;
|
||||||
|
min-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
.mat-title {
|
.mat-title {
|
||||||
margin: 16px 0 32px 0;
|
margin: 10px 0 50px 0;
|
||||||
|
text-indent: -10000000px;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
background-image: url(/assets/images/logo/bg_login_w160.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-flex;
|
||||||
|
background-size: 100% auto;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||||
|
width: 140px;
|
||||||
|
min-width: 140px;
|
||||||
|
margin: 10px 0 10px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
|
@ -26,22 +45,21 @@
|
||||||
|
|
||||||
.remember-forgot-password {
|
.remember-forgot-password {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-top: 8px;
|
|
||||||
|
|
||||||
.remember-me {
|
.remember-me {
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.auto-login {
|
.auto-login {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 2vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit-button {
|
.submit-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
margin: 2vh 0 1.6vh;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -90,13 +108,18 @@
|
||||||
}
|
}
|
||||||
.policy {
|
.policy {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 5vh;
|
||||||
width: 100%;
|
display: block;
|
||||||
padding: 10px;
|
text-align: center;
|
||||||
left: 0;
|
opacity: 0.7;
|
||||||
color: #ffffff;
|
padding: 6px;
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 68%;
|
||||||
|
color: #2d3a4a;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&.google,
|
&.google,
|
||||||
&.facebook {
|
&.facebook {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user