Last active
October 31, 2020 09:55
-
-
Save takuya-nakayasu/15e6892676066a4f67ab3df8a8c354a8 to your computer and use it in GitHub Desktop.
「SpeedWeight」のログイン画面
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ion-header> | |
<ion-toolbar> | |
<ion-title></ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content> | |
<ion-card> | |
<ion-card-header> | |
<ion-card-title class="card-title">ログイン</ion-card-title> | |
</ion-card-header> | |
<ion-card-content> | |
<ion-button (click)="signInWithTwitter()" color="twitter" class="login-button"> | |
<ion-icon class="sns-icon" name="logo-twitter"></ion-icon>Twitterでログイン | |
</ion-button> | |
<ion-button (click)="signInWithGoogle()" color="google" class="login-button border"> | |
<img class="g-icon" src="assets/icon/google-logo.png">Googleでログイン | |
</ion-button> | |
<ion-button (click)="signInWithFacebook()" color="facebook" class="login-button"> | |
<ion-icon class="sns-icon" name="logo-facebook"></ion-icon>Facebookでログイン | |
</ion-button> | |
<ion-button (click)="signInWithGitHub()" color="github" class="login-button border"> | |
<ion-icon class="sns-icon" name="logo-github"></ion-icon>GitHubでログイン | |
</ion-button> | |
<div class="notes">新規登録、ログインのどちらも上記のリンクから行うことができます。 | |
<a routerLink="/terms-of-service"> | |
利用規約 | |
</a>、 | |
<a routerLink="/privacy-policy"> | |
プライバシーポリシー | |
</a>に同意したうえでログインしてください。 | |
</div> | |
</ion-card-content> | |
</ion-card> | |
</ion-content> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.card-title { | |
font-size: 22px; | |
font-weight: bold; | |
text-align: center; | |
} | |
.sns-icon { | |
position: absolute; | |
left: 15px; | |
top: 25%; | |
} | |
.login-button { | |
font-weight: bold; | |
margin-bottom: 18px; | |
width: 100%; | |
&.border { | |
--border-style: solid; | |
--border-width: 1px; | |
} | |
.g-icon { | |
position: absolute; | |
left: 15px; | |
top: 25%; | |
width: 1.4em; | |
} | |
} | |
.notes { | |
margin-top: 15px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment