mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
rename padded/padding, inset/margin
This commit is contained in:
64
dist/css/ionic-ios7.css
vendored
64
dist/css/ionic-ios7.css
vendored
@ -390,41 +390,51 @@ body, .ionic-body {
|
||||
.hide {
|
||||
display: none !important; }
|
||||
|
||||
.padded {
|
||||
.padding {
|
||||
padding: 10px; }
|
||||
|
||||
.padded-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padded-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padded-bottom {
|
||||
.padding-vertical {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padded-left {
|
||||
.padding-horizontal {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
|
||||
.padding-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padding-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padding-left {
|
||||
padding-left: 10px; }
|
||||
|
||||
.padded-2 {
|
||||
padding: 20px; }
|
||||
|
||||
.inset {
|
||||
.margin {
|
||||
margin: 10px; }
|
||||
|
||||
.inset-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.inset-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-bottom {
|
||||
.margin-vertical {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.inset-left {
|
||||
margin-left: 10px; }
|
||||
.margin-horizontal {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-2 {
|
||||
margin: 20px; }
|
||||
.margin-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.margin-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.margin-left {
|
||||
margin-left: 10px; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px; }
|
||||
@ -1284,7 +1294,7 @@ textarea {
|
||||
background-color: white; }
|
||||
|
||||
.padded > .input-group,
|
||||
.input-group.inset {
|
||||
.input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
@ -1810,8 +1820,8 @@ input[type="checkbox"][readonly] {
|
||||
a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
.margin .button,
|
||||
.padding .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
|
||||
50
dist/css/ionic-scoped.css
vendored
50
dist/css/ionic-scoped.css
vendored
@ -1115,30 +1115,38 @@
|
||||
.ionic .hidden,
|
||||
.ionic .hide {
|
||||
display: none !important; }
|
||||
.ionic .padded {
|
||||
.ionic .padding {
|
||||
padding: 10px; }
|
||||
.ionic .padded-top {
|
||||
padding-top: 10px; }
|
||||
.ionic .padded-right {
|
||||
padding-right: 10px; }
|
||||
.ionic .padded-bottom {
|
||||
.ionic .padding-vertical {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px; }
|
||||
.ionic .padded-left {
|
||||
.ionic .padding-horizontal {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
.ionic .padding-top {
|
||||
padding-top: 10px; }
|
||||
.ionic .padding-right {
|
||||
padding-right: 10px; }
|
||||
.ionic .padding-bottom {
|
||||
padding-bottom: 10px; }
|
||||
.ionic .padding-left {
|
||||
padding-left: 10px; }
|
||||
.ionic .padded-2 {
|
||||
padding: 20px; }
|
||||
.ionic .inset {
|
||||
.ionic .margin {
|
||||
margin: 10px; }
|
||||
.ionic .inset-top {
|
||||
margin-top: 10px; }
|
||||
.ionic .inset-right {
|
||||
margin-right: 10px; }
|
||||
.ionic .inset-bottom {
|
||||
.ionic .margin-vertical {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
.ionic .inset-left {
|
||||
.ionic .margin-horizontal {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
.ionic .margin-top {
|
||||
margin-top: 10px; }
|
||||
.ionic .margin-right {
|
||||
margin-right: 10px; }
|
||||
.ionic .margin-bottom {
|
||||
margin-bottom: 10px; }
|
||||
.ionic .margin-left {
|
||||
margin-left: 10px; }
|
||||
.ionic .inset-2 {
|
||||
margin: 20px; }
|
||||
.ionic .rounded {
|
||||
border-radius: 4px; }
|
||||
.ionic p {
|
||||
@ -1918,7 +1926,7 @@
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
.ionic .padded > .input-group,
|
||||
.ionic .input-group.inset {
|
||||
.ionic .input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
@ -2435,8 +2443,8 @@
|
||||
margin: 10px 0 10px 0; }
|
||||
.ionic a.button {
|
||||
text-decoration: none; }
|
||||
.ionic .inset .button,
|
||||
.ionic .padded .button {
|
||||
.ionic .margin .button,
|
||||
.ionic .padding .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
|
||||
64
dist/css/ionic.css
vendored
64
dist/css/ionic.css
vendored
@ -1447,41 +1447,51 @@ body, .ionic-body {
|
||||
.hide {
|
||||
display: none !important; }
|
||||
|
||||
.padded {
|
||||
.padding {
|
||||
padding: 10px; }
|
||||
|
||||
.padded-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padded-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padded-bottom {
|
||||
.padding-vertical {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padded-left {
|
||||
.padding-horizontal {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px; }
|
||||
|
||||
.padding-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padding-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padding-left {
|
||||
padding-left: 10px; }
|
||||
|
||||
.padded-2 {
|
||||
padding: 20px; }
|
||||
|
||||
.inset {
|
||||
.margin {
|
||||
margin: 10px; }
|
||||
|
||||
.inset-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.inset-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-bottom {
|
||||
.margin-vertical {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.inset-left {
|
||||
margin-left: 10px; }
|
||||
.margin-horizontal {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-2 {
|
||||
margin: 20px; }
|
||||
.margin-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.margin-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.margin-left {
|
||||
margin-left: 10px; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px; }
|
||||
@ -2371,7 +2381,7 @@ textarea {
|
||||
background-color: white; }
|
||||
|
||||
.padded > .input-group,
|
||||
.input-group.inset {
|
||||
.input-group.margin {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
@ -2928,8 +2938,8 @@ input[type="checkbox"][readonly] {
|
||||
a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
.margin .button,
|
||||
.padding .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
<h3>Finish your Top Three Tasks Today</h3>
|
||||
</div>
|
||||
<form class="form-horizontal" ng-submit="tryLogin(loginForm)">
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="email" placeholder="" ng-model="loginForm.email">
|
||||
@ -47,7 +47,7 @@
|
||||
<input class="col-xs-8" type="password" placeholder="" ng-model="loginForm.password">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<button class="button button-info button-block">Log in</button>
|
||||
<div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div>
|
||||
</div>
|
||||
@ -63,7 +63,7 @@
|
||||
</header>
|
||||
<main class="content padded has-header">
|
||||
<form class="form-horizontal" ng-submit="trySignup(signupForm)">
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email">
|
||||
@ -73,7 +73,7 @@
|
||||
<input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<button class="button button-info button-block">Sign up</button>
|
||||
<div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
|
||||
</div>
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
<input type="password" placeholder="" ng-model="signupForm.password" required>
|
||||
</label>
|
||||
</div>
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<button type="submit" class="button button-primary button-block">Get derp'n</button>
|
||||
<div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
|
||||
</div>
|
||||
@ -84,9 +84,9 @@
|
||||
<h1 class="title">Log in</h1>
|
||||
<button class="button button-clear button-primary" ng-click="close()">Cancel</button>
|
||||
</header>
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<form class="form-horizontal" ng-submit="tryLogin(loginForm)">
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input type="email" placeholder="" ng-model="loginForm.email">
|
||||
@ -96,7 +96,7 @@
|
||||
<input type="password" placeholder="" ng-model="loginForm.password">
|
||||
</label>
|
||||
</div>
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<button class="button button-primary button-block">Log in</button>
|
||||
<div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div>
|
||||
</div>
|
||||
@ -158,7 +158,7 @@
|
||||
<h1 class="title">Settings</h1>
|
||||
<button class="button button-clear button-primary" ng-click="close()">Done</button>
|
||||
</header>
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<list header="GENERAL">
|
||||
<list-item>Account details <i class="icon-chevron-right"></i></list-item>
|
||||
<list-item>Account details <toggle ng-model="settings.isSmallText"></toggle></i></list-item>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<h1 class="title">New Task</h1>
|
||||
<button class="button button-clear button-primary" ng-click="close()">Done</button>
|
||||
</header>
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<input type="text" placeholder="I need to do this...">
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -122,8 +122,8 @@ a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
.margin .button,
|
||||
.padding .button {
|
||||
border-right-width: $button-border-width;
|
||||
border-left-width: $button-border-width;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
@ -53,7 +53,7 @@ textarea {
|
||||
background-color: $input-bg;
|
||||
}
|
||||
.padded > .input-group,
|
||||
.input-group.inset {
|
||||
.input-group.margin {
|
||||
@include border-radius($input-border-radius);
|
||||
border-right: $input-border-width solid $input-border-color;
|
||||
border-left: $input-border-width solid $input-border-color;
|
||||
|
||||
@ -4,59 +4,71 @@
|
||||
}
|
||||
|
||||
|
||||
// Padded
|
||||
// Content Padding
|
||||
// -------------------------------
|
||||
|
||||
.padded {
|
||||
.padding {
|
||||
padding: $content-padding;
|
||||
}
|
||||
|
||||
.padded-top {
|
||||
.padding-vertical {
|
||||
padding-top: $content-padding;
|
||||
}
|
||||
|
||||
.padded-right {
|
||||
padding-right: $content-padding;
|
||||
}
|
||||
|
||||
.padded-bottom {
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padded-left {
|
||||
.padding-horizontal {
|
||||
padding-left: $content-padding;
|
||||
padding-right: $content-padding;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: $content-padding;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
padding-right: $content-padding;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: $content-padding;
|
||||
}
|
||||
|
||||
.padded-2 {
|
||||
padding: $content-padding * 2;
|
||||
}
|
||||
|
||||
|
||||
// Inset
|
||||
// Inset Margin
|
||||
// -------------------------------
|
||||
|
||||
.inset {
|
||||
.margin {
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-top {
|
||||
.margin-vertical {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-right {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-bottom {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-left {
|
||||
.margin-horizontal {
|
||||
margin-left: $inset-margin;
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-2 {
|
||||
margin: $inset-margin * 2;
|
||||
.margin-top {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-left {
|
||||
margin-left: $inset-margin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
</header>
|
||||
|
||||
<main class="content has-header">
|
||||
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padded">
|
||||
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padding">
|
||||
<a href="#" class="button button-warning" id="modal-opener">Open Sheet</a>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Alerts</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
|
||||
<p class="alert">
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<p>
|
||||
<div class="button-bar">
|
||||
<a class="button button-primary">Success</a>
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
<div class="content-wrapper">
|
||||
<main class="content has-header">
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Default (Block w/ parent .padded)</h3>
|
||||
<h3>Default (Block w/ parent .padding)</h3>
|
||||
<p>
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Default (Block w/out padded)</h3>
|
||||
<h3>Default (Block w/out padding)</h3>
|
||||
<p>
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
@ -118,8 +118,8 @@
|
||||
<a class="button button-dark">Dark</a>
|
||||
</p>
|
||||
|
||||
<h3>Default (Block w/out padded and parent .inset)</h3>
|
||||
<p class="inset">
|
||||
<h3>Default (Block w/out padding and parent .margin)</h3>
|
||||
<p class="margin">
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
<a class="button button-primary">Primary</a>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Cards</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
todo
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content padded">
|
||||
<main class="has-header content padding">
|
||||
<h1>Swipe me, side to side</h1>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header has-footer">
|
||||
<main class="content padding has-header has-footer">
|
||||
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
|
||||
<p>Content element must have "has-footer" as a classname.</p>
|
||||
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<p>Content element must have "has-header" as a classname.</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<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="buttons.html"><i class="icon-star"></i> Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</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>
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
@ -48,7 +48,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Default Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
@ -67,7 +67,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
@ -113,14 +113,14 @@
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
@ -135,13 +135,13 @@
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="Enter keywords">
|
||||
@ -176,14 +176,14 @@
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
@ -194,7 +194,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
@ -212,7 +212,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-row">
|
||||
<i class="icon-star placeholder-icon"></i>
|
||||
<input type="text" placeholder="Favorites">
|
||||
@ -229,7 +229,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
@ -241,7 +241,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-row">
|
||||
<i class="icon-headphone"></i>
|
||||
<span class="input-label">Favorite Music</span>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Default Text Area, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-wrapper">
|
||||
<textarea rows="3" placeholder="Summary"></textarea>
|
||||
</label>
|
||||
@ -39,7 +39,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
<div class="padding">
|
||||
|
||||
<h3>Default Text Area, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Default Text Area, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<div class="input-group margin">
|
||||
<label class="input-wrapper">
|
||||
<textarea rows="3" placeholder="3 Rows"></textarea>
|
||||
</label>
|
||||
@ -80,7 +80,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Summary</span>
|
||||
<textarea rows="3" placeholder="3 Rows"></textarea>
|
||||
@ -98,7 +98,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<div class="input-group stacked-label margin">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Summary</span>
|
||||
<textarea rows="3" placeholder="3 Rows"></textarea>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<p>
|
||||
<button id="btnTest1">Toggle Airplane Mode</button>
|
||||
</p>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="inset">
|
||||
<div class="margin">
|
||||
<p>
|
||||
<button id="btnTest1">Toggle Airplane Mode</button>
|
||||
</p>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<p><button class="button button-primary" data-panel-toggle="my-other-left-panel">Other Left Side Panel</button></p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Modals</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<a href="#" class="button button-warning" id="modal-opener">Open Modal</a>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
@ -29,7 +29,7 @@
|
||||
<a href="#" class="button" id="modal-closer">Close</a>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<h2>I'm a thing</h2>
|
||||
<div style="background-color: blue; width: 100%; height: 1000px"></div>
|
||||
</main>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Popovers</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
todo
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Pull To Refresh</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
todo
|
||||
<p>Pull the content down to refresh.</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content has-header has-footer">
|
||||
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padded">
|
||||
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padding">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-secondary">
|
||||
Your update
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Swipe</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
todo
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
content
|
||||
</main>
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<h1 class="title">Type</h1>
|
||||
</header>
|
||||
|
||||
<main class="content padded has-header">
|
||||
<main class="content padding has-header">
|
||||
<h1>I'm an H1 Element</h1>
|
||||
<h2>I'm an H2 Element</h2>
|
||||
<h3>I'm an H3 Element</h3>
|
||||
|
||||
Reference in New Issue
Block a user