mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
progress stars
This commit is contained in:
Adam Bradley
@ -156,7 +156,7 @@ $toggle-on-border-color: $toggle-on-bg-color;
|
||||
$toggle-switch-off-bg-color: $white;
|
||||
$toggle-switch-on-bg-color: $toggle-switch-off-bg-color;
|
||||
|
||||
$toggle-transition-duration: .3s;
|
||||
$toggle-transition-duration: .25s;
|
||||
|
||||
|
||||
// Range
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Grids</title>
|
||||
<title>Cards</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
@ -13,7 +13,7 @@
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Grids</h1>
|
||||
<h1 class="title">Cards</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
@ -1,7 +1,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test</title>
|
||||
<title>Ionic Tests</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
@ -17,27 +17,26 @@
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<p><a class="button button-block button-default" href="alerts.html">Alerts</a></p>
|
||||
<p><a class="button button-block button-default" href="buttons.html">Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-groups.html">Button Groups</a></p>
|
||||
<p><a class="button button-block button-default" href="footers.html">Footers</a></p>
|
||||
<p><a class="button button-block button-default" href="grids.html">Grids</a></p>
|
||||
<p><a class="button button-block button-default" href="headers.html">Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html">Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html">Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html">Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html">Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html">Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html">Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="panels.html">Panels</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html">Popovers</a></p>
|
||||
<p><a class="button button-block button-default" href="pull-to-refresh.html">Pull To Refresh</a></p>
|
||||
<p><a class="button button-block button-default" href="swipe.html">Swipe</a></p>
|
||||
<p><a class="button button-block button-default" href="tab-bars.html">Tab Bars</a></p>
|
||||
<p><a class="button button-block button-default" href="type.html">Type</a></p>
|
||||
<p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
|
||||
<p><a class="button button-block button-default" href="buttons.html"><i class="icon-star-half-empty"></i> Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-groups.html"><i class="icon-star"></i> Button Groups</a></p>
|
||||
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
|
||||
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
|
||||
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
|
||||
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>
|
||||
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon-star-empty"></i> Side Menus</a></p>
|
||||
<p><a class="button button-block button-default" href="swipe.html"><i class="icon-star-empty"></i> Swipe</a></p>
|
||||
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon-star-half-empty"></i> Tab Bars</a></p>
|
||||
<p><a class="button button-block button-default" href="type.html"><i class="icon-star"></i> Type</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
@ -188,6 +188,69 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-search placeholder-icon">
|
||||
<input type="search" placeholder="Search">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-star placeholder-icon">
|
||||
<input type="text" placeholder="Favorites">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<div class="icon-envelope placeholder-icon">
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Send Money</span>
|
||||
<div class="icon-money placeholder-icon">
|
||||
<input type="text" placeholder="Dollar Greens">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">SaaS</span>
|
||||
<div class="icon-cloud placeholder-icon">
|
||||
<input type="text" placeholder="Codiqa">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Favorite Music</span>
|
||||
<div class="icon-headphones placeholder-icon">
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inputs With Icons</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="view">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Inputs With Icons</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<div class="content has-header has-footer">
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-search placeholder-icon">
|
||||
<input type="search" placeholder="Search">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-star placeholder-icon">
|
||||
<input type="text" placeholder="Favorites">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<div class="icon-envelope placeholder-icon">
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Send Money</span>
|
||||
<div class="icon-money placeholder-icon">
|
||||
<input type="text" placeholder="Dollar Greens">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">SaaS</span>
|
||||
<div class="icon-cloud placeholder-icon">
|
||||
<input type="text" placeholder="Codiqa">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Favorite Music</span>
|
||||
<div class="icon-headphones placeholder-icon">
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Panels</title>
|
||||
<title>Side Menus</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
Reference in New Issue
Block a user