mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(padding): changed padding to attributes
Updated demos. Closes #266
This commit is contained in:
@ -2,7 +2,7 @@
|
||||
<ion-title>Action Sheet</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<button block (click)="openMenu()">
|
||||
Show Actionsheet
|
||||
</button>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<ion-title>Block Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button block>Default</button>
|
||||
</p>
|
||||
@ -23,4 +23,3 @@
|
||||
<button dark block>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<ion-title>Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button>Default</button>
|
||||
</p>
|
||||
@ -23,5 +23,3 @@
|
||||
<button dark>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<ion-title>Icon Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button>
|
||||
<icon home></icon>
|
||||
@ -38,7 +38,3 @@
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<ion-title>Outline Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button outline>Default</button>
|
||||
</p>
|
||||
@ -23,7 +23,3 @@
|
||||
<button dark outline>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<ion-title>Round Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button round>Default</button>
|
||||
</p>
|
||||
@ -23,7 +23,3 @@
|
||||
<button dark round>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<ion-title>Button Sizes</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo padding">
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button small>Default</button>
|
||||
</p>
|
||||
@ -23,7 +23,3 @@
|
||||
<button dark large>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -12,12 +12,8 @@
|
||||
<input ng-control="lastName" type="text" placeholder="Last Name">
|
||||
</ion-input>
|
||||
</ion-list>
|
||||
<div class="padding">
|
||||
<div padding>
|
||||
<button block type="submit">Create Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<ion-title>Icons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header padding components-icons">
|
||||
<ion-content class="has-header components-icons">
|
||||
|
||||
<ion-row>
|
||||
<ion-col><icon ionic></icon></ion-col>
|
||||
@ -72,7 +72,3 @@
|
||||
</ion-row>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -476,7 +476,7 @@
|
||||
<input ng-control="lastName" type="text" placeholder="Last Name">
|
||||
</ion-input>
|
||||
</ion-list>
|
||||
<div class="padding">
|
||||
<div padding>
|
||||
<button block type="submit">Create Account</button>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -3,10 +3,6 @@
|
||||
<ion-title>Menus</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header padding">
|
||||
<ion-content padding class="has-header">
|
||||
TODO
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -3,12 +3,8 @@
|
||||
<ion-title>Modals</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header padding">
|
||||
<ion-content padding class="has-header">
|
||||
<button block (click)="openModal()">
|
||||
Show Modal
|
||||
</button>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<ion-title>Popups</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header padding">
|
||||
<ion-content padding class="has-header">
|
||||
<button block (click)="showPopup()">
|
||||
Show Popup
|
||||
</button>
|
||||
|
@ -121,8 +121,8 @@ a[button] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.padding > button[block]:first-child,
|
||||
.padding > [button][block]:first-child {
|
||||
[padding] > button[block]:first-child,
|
||||
[padding] > [button][block]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
@ -33,35 +33,33 @@ scroll-content {
|
||||
$content-padding: 16px !default;
|
||||
|
||||
|
||||
.padding,
|
||||
[padding],
|
||||
.padding > scroll-content,
|
||||
[padding] > scroll-content {
|
||||
padding: $content-padding;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
[padding-top] {
|
||||
padding-top: $content-padding;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
[padding-right] {
|
||||
padding-right: $content-padding;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
[padding-bottom] {
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
[padding-left] {
|
||||
padding-left: $content-padding;
|
||||
}
|
||||
|
||||
.padding-vertical {
|
||||
[padding-vertical] {
|
||||
padding-top: $content-padding;
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padding-horizontal {
|
||||
[padding-horizontal] {
|
||||
padding-right: $content-padding;
|
||||
padding-left: $content-padding;
|
||||
}
|
||||
|
@ -5,35 +5,33 @@
|
||||
$content-padding-md: 16px !default;
|
||||
|
||||
|
||||
.padding,
|
||||
[padding],
|
||||
.padding > scroll-content,
|
||||
[padding] > scroll-content {
|
||||
padding: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
[padding-top] {
|
||||
padding-top: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
[padding-right] {
|
||||
padding-right: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
[padding-bottom] {
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
[padding-left] {
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-vertical {
|
||||
[padding-vertical] {
|
||||
padding-top: $content-padding-md;
|
||||
padding-bottom: $content-padding-md;
|
||||
}
|
||||
|
||||
.padding-horizontal {
|
||||
[padding-horizontal] {
|
||||
padding-right: $content-padding-md;
|
||||
padding-left: $content-padding-md;
|
||||
}
|
||||
|
Reference in New Issue
Block a user