javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Nice login style

Browse Source
This commit is contained in:
Max Lynch
2013-09-09 19:56:12 -05:00
parent 78ab65c2b7
commit 30718279a5
7 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
dist/ionic.css vendored
View File

@ -374,7 +374,8 @@ body {
position: fixed; position: fixed;
overflow: auto; overflow: auto;
right: 0; right: 0;
left: 0; } left: 0;
bottom: 0; }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling /* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
@ -508,8 +509,9 @@ a {
cursor: pointer; cursor: pointer;
margin: 0; } margin: 0; }
.button.button-block { .button.button-block {
margin: 0 0 10px 0; margin: 10px 0 10px 0;
display: block; } display: block;
width: 100%; }
.button-group { .button-group {
position: relative; position: relative;
@ -1977,7 +1979,8 @@ main {
border-radius: 2px; border-radius: 2px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
padding: 4px 12px; } padding: 12px 12px;
font-size: 16px; }
.button.button-default { .button.button-default {
color: #333333; color: #333333;
background-color: white; background-color: white;

BIN
example/login/bg-ex.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

57
example/login/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../dist/ionic.css">
<style>
body {
background: url('bg-ex.jpg') no-repeat transparent;
background-size: cover;
}
.content {
background-color: transparent;
}
label {
background-color: rgba(255, 255, 255, 0.6);
}
input {
background-color: transparent !important;
}
#login {
position: fixed;
bottom: 10px;
z-index: 4;
width: auto;
left: 10px;
right: 10px;
}
</style>
</head>
<body>
<section>
<header class="bar bar-header bar-danger">
<h1 class="title">Sign up for your account</h1>
</header>
<main class="content content-padded has-header">
<form class="form-horizontal">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Full name</span>
<input class="span9" type="text" placeholder="">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="email" placeholder="">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Password</span>
<input class="span9" type="password" placeholder="">
</label>
<button class="button button-info button-block">Sign up</button>
</form>
<button id="login" class="button button-default button-block">Log in</button>
</main>
</section>
</body>
</html>

5
scss/ionic/_theme-variables.scss
View File

@ -65,13 +65,14 @@ $darkColor: #333;
// Buttons // Buttons
// ------------------------------- // -------------------------------
$buttonColor: #222; $buttonColor: #222;
$buttonPadding: 4px 12px; $buttonPadding: 12px 12px;
$buttonClearPadding: 10px 0px; $buttonClearPadding: 10px 0px;
$buttonBorderRadius: 2px; $buttonBorderRadius: 2px;
$buttonBorderWidth: 1px; $buttonBorderWidth: 1px;
$buttonFontSize: 16px;
// Button block that has spacing // Button block that has spacing
$buttonBlockMargin: 0 0 10px 0; $buttonBlockMargin: 10px 0 10px 0;
$buttonDefaultBackground: #fff; $buttonDefaultBackground: #fff;
$buttonDefaultBackgroundActive: #eee; $buttonDefaultBackgroundActive: #eee;

1
scss/ionic/structure/_base.scss
View File

@ -36,6 +36,7 @@ body {
overflow: auto; overflow: auto;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0;
} }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling /* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */

1
scss/ionic/structure/_button.scss
View File

@ -9,5 +9,6 @@
&.button-block { &.button-block {
margin: $buttonBlockMargin; margin: $buttonBlockMargin;
display: block; display: block;
width: 100%;
} }
} }

1
scss/ionic/theme/_button.scss
View File

@ -4,6 +4,7 @@
border-width: $buttonBorderWidth; border-width: $buttonBorderWidth;
border-style: solid; border-style: solid;
padding: $buttonPadding; padding: $buttonPadding;
font-size: $buttonFontSize;
&.button-default { &.button-default {
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor); @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);