refactor(padding): changed padding to attributes

Updated demos. Closes #266
This commit is contained in:
Brandy Carney
2015-10-08 15:15:20 -04:00
parent b07a3760e5
commit c2d56d8623
16 changed files with 30 additions and 69 deletions

View File

@ -2,7 +2,7 @@
<ion-title>Action Sheet</ion-title> <ion-title>Action Sheet</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<button block (click)="openMenu()"> <button block (click)="openMenu()">
Show Actionsheet Show Actionsheet
</button> </button>

View File

@ -2,7 +2,7 @@
<ion-title>Block Buttons</ion-title> <ion-title>Block Buttons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button block>Default</button> <button block>Default</button>
</p> </p>
@ -23,4 +23,3 @@
<button dark block>Dark</button> <button dark block>Dark</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -2,7 +2,7 @@
<ion-title>Buttons</ion-title> <ion-title>Buttons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button>Default</button> <button>Default</button>
</p> </p>
@ -23,5 +23,3 @@
<button dark>Dark</button> <button dark>Dark</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -3,7 +3,7 @@
<ion-title>Icon Buttons</ion-title> <ion-title>Icon Buttons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button> <button>
<icon home></icon> <icon home></icon>
@ -38,7 +38,3 @@
</p> </p>
</ion-content> </ion-content>

View File

@ -2,7 +2,7 @@
<ion-title>Outline Buttons</ion-title> <ion-title>Outline Buttons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button outline>Default</button> <button outline>Default</button>
</p> </p>
@ -23,7 +23,3 @@
<button dark outline>Dark</button> <button dark outline>Dark</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -2,7 +2,7 @@
<ion-title>Round Buttons</ion-title> <ion-title>Round Buttons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button round>Default</button> <button round>Default</button>
</p> </p>
@ -23,7 +23,3 @@
<button dark round>Dark</button> <button dark round>Dark</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -2,7 +2,7 @@
<ion-title>Button Sizes</ion-title> <ion-title>Button Sizes</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header components-demo padding"> <ion-content padding class="has-header components-demo">
<p> <p>
<button small>Default</button> <button small>Default</button>
</p> </p>
@ -23,7 +23,3 @@
<button dark large>Dark</button> <button dark large>Dark</button>
</p> </p>
</ion-content> </ion-content>

View File

@ -12,12 +12,8 @@
<input ng-control="lastName" type="text" placeholder="Last Name"> <input ng-control="lastName" type="text" placeholder="Last Name">
</ion-input> </ion-input>
</ion-list> </ion-list>
<div class="padding"> <div padding>
<button block type="submit">Create Account</button> <button block type="submit">Create Account</button>
</div> </div>
</form> </form>
</ion-content> </ion-content>

View File

@ -3,7 +3,7 @@
<ion-title>Icons</ion-title> <ion-title>Icons</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header padding components-icons"> <ion-content class="has-header components-icons">
<ion-row> <ion-row>
<ion-col><icon ionic></icon></ion-col> <ion-col><icon ionic></icon></ion-col>
@ -72,7 +72,3 @@
</ion-row> </ion-row>
</ion-content> </ion-content>

View File

@ -123,7 +123,7 @@
<button dark outline>Dark</button> <button dark outline>Dark</button>
</p> </p>
</section> </section>
<section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding"> <section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding">
@ -158,7 +158,7 @@
</p> </p>
</section> </section>
<section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding"> <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
@ -220,7 +220,7 @@
</p> </p>
</section> </section>
<section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }"> <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
@ -476,7 +476,7 @@
<input ng-control="lastName" type="text" placeholder="Last Name"> <input ng-control="lastName" type="text" placeholder="Last Name">
</ion-input> </ion-input>
</ion-list> </ion-list>
<div class="padding"> <div padding>
<button block type="submit">Create Account</button> <button block type="submit">Create Account</button>
</div> </div>
</form> </form>

View File

@ -3,10 +3,6 @@
<ion-title>Menus</ion-title> <ion-title>Menus</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header padding"> <ion-content padding class="has-header">
TODO TODO
</ion-content> </ion-content>

View File

@ -3,12 +3,8 @@
<ion-title>Modals</ion-title> <ion-title>Modals</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header padding"> <ion-content padding class="has-header">
<button block (click)="openModal()"> <button block (click)="openModal()">
Show Modal Show Modal
</button> </button>
</ion-content> </ion-content>

View File

@ -3,7 +3,7 @@
<ion-title>Popups</ion-title> <ion-title>Popups</ion-title>
</ion-navbar> </ion-navbar>
<ion-content class="has-header padding"> <ion-content padding class="has-header">
<button block (click)="showPopup()"> <button block (click)="showPopup()">
Show Popup Show Popup
</button> </button>

View File

@ -121,8 +121,8 @@ a[button] {
text-decoration: none; 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; margin-top: 0;
} }

View File

@ -33,35 +33,33 @@ scroll-content {
$content-padding: 16px !default; $content-padding: 16px !default;
.padding,
[padding], [padding],
.padding > scroll-content,
[padding] > scroll-content { [padding] > scroll-content {
padding: $content-padding; padding: $content-padding;
} }
.padding-top { [padding-top] {
padding-top: $content-padding; padding-top: $content-padding;
} }
.padding-right { [padding-right] {
padding-right: $content-padding; padding-right: $content-padding;
} }
.padding-bottom { [padding-bottom] {
padding-bottom: $content-padding; padding-bottom: $content-padding;
} }
.padding-left { [padding-left] {
padding-left: $content-padding; padding-left: $content-padding;
} }
.padding-vertical { [padding-vertical] {
padding-top: $content-padding; padding-top: $content-padding;
padding-bottom: $content-padding; padding-bottom: $content-padding;
} }
.padding-horizontal { [padding-horizontal] {
padding-right: $content-padding; padding-right: $content-padding;
padding-left: $content-padding; padding-left: $content-padding;
} }

View File

@ -5,35 +5,33 @@
$content-padding-md: 16px !default; $content-padding-md: 16px !default;
.padding,
[padding], [padding],
.padding > scroll-content,
[padding] > scroll-content { [padding] > scroll-content {
padding: $content-padding-md; padding: $content-padding-md;
} }
.padding-top { [padding-top] {
padding-top: $content-padding-md; padding-top: $content-padding-md;
} }
.padding-right { [padding-right] {
padding-right: $content-padding-md; padding-right: $content-padding-md;
} }
.padding-bottom { [padding-bottom] {
padding-bottom: $content-padding-md; padding-bottom: $content-padding-md;
} }
.padding-left { [padding-left] {
padding-left: $content-padding-md; padding-left: $content-padding-md;
} }
.padding-vertical { [padding-vertical] {
padding-top: $content-padding-md; padding-top: $content-padding-md;
padding-bottom: $content-padding-md; padding-bottom: $content-padding-md;
} }
.padding-horizontal { [padding-horizontal] {
padding-right: $content-padding-md; padding-right: $content-padding-md;
padding-left: $content-padding-md; padding-left: $content-padding-md;
} }