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

different way to do block buttons

Browse Source
This commit is contained in:
Adam Bradley
2013-10-16 00:46:31 -05:00
parent 246fee2436
commit 18ad1f651d
6 changed files with 120 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scss/ionic-ios7/ionic-ios7.scss
View File

@ -9,8 +9,6 @@
// Base // Base
"../ionic/reset", "../ionic/reset",
"../ionic/scaffolding", "../ionic/scaffolding",
"../ionic/platform",
"../ionic/util",
"../ionic/type", "../ionic/type",
// Nav // Nav
@ -38,3 +36,6 @@
// Animations // Animations
"../ionic/animations"; "../ionic/animations";
// Util
"../ionic/util";

26
scss/ionic/_button.scss
View File

@ -1,11 +1,10 @@
.button { .button {
position: relative; position: relative;
display: block; display: inline-block;
//margin: $button-block-margin; margin: 0;
padding: $button-padding; padding: $button-padding;
width: 100%;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
@ -22,8 +21,6 @@
cursor: pointer; cursor: pointer;
&.button-icon { &.button-icon {
display: inline-block;
margin: 0;
padding: $button-clear-padding; padding: $button-clear-padding;
width: auto; width: auto;
border: none; border: none;
@ -32,10 +29,7 @@
&.button-clear { &.button-clear {
@include transition(opacity .1s); @include transition(opacity .1s);
display: inline-block;
margin: 0;
padding: $button-clear-padding; padding: $button-clear-padding;
width: auto;
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
@ -88,9 +82,6 @@
&.button-outline { &.button-outline {
@include transition(opacity .1s); @include transition(opacity .1s);
display: inline-block;
margin: 0;
width: auto;
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
@ -105,26 +96,17 @@
} }
} }
&.button-inline {
display: inline-block;
margin: 0;
width: auto;
}
&.button-block {
display: block;
margin: $button-block-margin;
}
} }
a.button { a.button {
text-decoration: none; text-decoration: none;
} }
.margin.button,
.margin .button, .margin .button,
.padding .button { .padding .button {
border-right-width: $button-border-width; border-right-width: $button-border-width;
border-left-width: $button-border-width; border-left-width: $button-border-width;
border-radius: $button-border-radius; border-radius: $button-border-radius;
} }

54
scss/ionic/_util.scss
View File

@ -2,7 +2,25 @@
.hide { .hide {
display: none !important; display: none !important;
} }
.show {
display: block !important;
}
.inline {
display: inline-block;
}
.block {
display: block;
clear: both;
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}
}
// Content Padding // Content Padding
// ------------------------------- // -------------------------------
@ -11,29 +29,23 @@
padding: $content-padding; padding: $content-padding;
} }
.padding-top,
.padding-vertical { .padding-vertical {
padding-top: $content-padding; padding-top: $content-padding;
padding-bottom: $content-padding;
} }
.padding-right,
.padding-horizontal { .padding-horizontal {
padding-left: $content-padding;
padding-right: $content-padding; padding-right: $content-padding;
} }
.padding-top { .padding-bottom,
padding-top: $content-padding; .padding-vertical {
}
.padding-right {
padding-right: $content-padding;
}
.padding-bottom {
padding-bottom: $content-padding; padding-bottom: $content-padding;
} }
.padding-left { .padding-left,
.padding-horizontal {
padding-left: $content-padding; padding-left: $content-padding;
} }
@ -45,29 +57,23 @@
margin: $inset-margin; margin: $inset-margin;
} }
.margin-top,
.margin-vertical { .margin-vertical {
margin-top: $inset-margin; margin-top: $inset-margin;
margin-bottom: $inset-margin;
} }
.margin-right,
.margin-horizontal { .margin-horizontal {
margin-left: $inset-margin;
margin-right: $inset-margin; margin-right: $inset-margin;
} }
.margin-top { .margin-bottom,
margin-top: $inset-margin; .margin-vertical {
}
.margin-right {
margin-right: $inset-margin;
}
.margin-bottom {
margin-bottom: $inset-margin; margin-bottom: $inset-margin;
} }
.margin-left { .margin-left,
.margin-horizontal {
margin-left: $inset-margin; margin-left: $inset-margin;
} }

3
scss/ionic/ionic-scoped.scss
View File

@ -12,7 +12,6 @@
// Base // Base
"reset", "reset",
"scaffolding", "scaffolding",
"util",
"type", "type",
// Action Sheet // Action Sheet
@ -45,6 +44,8 @@
// Animations // Animations
"animations", "animations",
// Util
"util",
"platform"; "platform";
} }

3
scss/ionic/ionic.scss
View File

@ -10,7 +10,6 @@
// Base // Base
"reset", "reset",
"scaffolding", "scaffolding",
"util",
"type", "type",
// Action Sheet // Action Sheet
@ -45,4 +44,6 @@
// Animations // Animations
"animations", "animations",
// Util
"util",
"platform"; "platform";

135
test/buttons.html
View File

@ -18,19 +18,7 @@
<div class="padding"> <div class="padding">
<h3>Default (Block w/ parent .padding)</h3> <h3>Default (Inline)</h3>
<p>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
</p>
<h3>Inline (.button-inline override)</h3>
<p> <p>
<a class="button button-default button-inline">Default</a> <a class="button button-default button-inline">Default</a>
<a class="button button-secondary button-inline">Secondary</a> <a class="button button-secondary button-inline">Secondary</a>
@ -42,14 +30,26 @@
<a class="button button-dark button-inline">Dark</a> <a class="button button-dark button-inline">Dark</a>
</p> </p>
<h3>Block (.block w/ parent .padding)</h3>
<p>
<a class="button block button-default">Default</a>
<a class="button block button-secondary">Secondary</a>
<a class="button block button-primary">Primary</a>
<a class="button block button-info">Info</a>
<a class="button block button-success">Success</a>
<a class="button block button-warning">Warning</a>
<a class="button block button-danger">Danger</a>
<a class="button block button-dark">Dark</a>
</p>
<h3>Icon (Inline Default)</h3> <h3>Icon (Inline Default)</h3>
<p> <p>
<a class="button button-icon"><i class="icon-home"></i></a> <a class="button button-icon"><i class="icon-home"></i></a>
</p> </p>
<h3>Icon (.button-block override)</h3> <h3>Icon (.block override)</h3>
<p> <p>
<a class="button button-icon button-block"><i class="icon-home"></i></a> <a class="button button-icon block"><i class="icon-home"></i></a>
</p> </p>
<h3>Outline (Inline Default)</h3> <h3>Outline (Inline Default)</h3>
@ -64,16 +64,16 @@
<a class="button button-dark button-outline">Dark</a> <a class="button button-dark button-outline">Dark</a>
</p> </p>
<h3>Outline (.button-block override)</h3> <h3>Outline (.block override)</h3>
<p> <p>
<a class="button button-default button-outline button-block">Default</a> <a class="button button-default button-outline block">Default</a>
<a class="button button-secondary button-outline button-block">Secondary</a> <a class="button button-secondary button-outline block">Secondary</a>
<a class="button button-primary button-outline button-block">Primary</a> <a class="button button-primary button-outline block">Primary</a>
<a class="button button-info button-outline button-block">Info</a> <a class="button button-info button-outline block">Info</a>
<a class="button button-success button-outline button-block">Success</a> <a class="button button-success button-outline block">Success</a>
<a class="button button-warning button-outline button-block">Warning</a> <a class="button button-warning button-outline block">Warning</a>
<a class="button button-danger button-outline button-block">Danger</a> <a class="button button-danger button-outline block">Danger</a>
<a class="button button-dark button-outline button-block">Dark</a> <a class="button button-dark button-outline block">Dark</a>
</p> </p>
<h3>Clear (Inline Default)</h3> <h3>Clear (Inline Default)</h3>
@ -88,46 +88,69 @@
<a class="button button-dark button-clear">Dark</a> <a class="button button-dark button-clear">Dark</a>
</p> </p>
<h3>Clear (.button-block override)</h3> <h3>Clear (.block override)</h3>
<p> <p>
<a class="button button-default button-clear button-block">Default</a> <a class="button button-default button-clear block">Default</a>
<a class="button button-secondary button-clear button-block">Secondary</a> <a class="button button-secondary button-clear block">Secondary</a>
<a class="button button-primary button-clear button-block">Primary</a> <a class="button button-primary button-clear block">Primary</a>
<a class="button button-info button-clear button-block">Info</a> <a class="button button-info button-clear block">Info</a>
<a class="button button-success button-clear button-block">Success</a> <a class="button button-success button-clear block">Success</a>
<a class="button button-warning button-clear button-block">Warning</a> <a class="button button-warning button-clear block">Warning</a>
<a class="button button-danger button-clear button-block">Danger</a> <a class="button button-danger button-clear block">Danger</a>
<a class="button button-dark button-clear button-block">Dark</a> <a class="button button-dark button-clear block">Dark</a>
</p> </p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p>
</div> </div>
<h3>Default (Block w/out padding)</h3> <h3>Block w/out padding</h3>
<p> <p>
<a class="button button-default">Default</a> <a class="button block button-default">Default</a>
<a class="button button-secondary">Secondary</a> <a class="button block button-secondary">Secondary</a>
<a class="button button-primary">Primary</a> <a class="button block button-primary">Primary</a>
<a class="button button-info">Info</a> <a class="button block button-info">Info</a>
<a class="button button-success">Success</a> <a class="button block button-success">Success</a>
<a class="button button-warning">Warning</a> <a class="button block button-warning">Warning</a>
<a class="button button-danger">Danger</a> <a class="button block button-danger">Danger</a>
<a class="button button-dark">Dark</a> <a class="button block button-dark">Dark</a>
</p> </p>
<h3>Default (Block w/out padding and parent .margin)</h3> <h3>Block w/out parent padding but parent .margin</h3>
<p class="margin"> <p class="margin">
<a class="button button-default">Default</a> <a class="button block button-default">Default</a>
<a class="button button-secondary">Secondary</a> <a class="button block button-secondary">Secondary</a>
<a class="button button-primary">Primary</a> <a class="button block button-primary">Primary</a>
<a class="button button-info">Info</a> <a class="button block button-info">Info</a>
<a class="button button-success">Success</a> <a class="button block button-success">Success</a>
<a class="button button-warning">Warning</a> <a class="button block button-warning">Warning</a>
<a class="button button-danger">Danger</a> <a class="button block button-danger">Danger</a>
<a class="button button-dark">Dark</a> <a class="button block button-dark">Dark</a>
</p>
<h3>&lt;a&gt; .block .margin set on each button and nothing on the parent</h3>
<p>
<a class="button block margin button-default">Default</a>
<a class="button block margin button-secondary">Secondary</a>
<a class="button block margin button-primary">Primary</a>
<a class="button block margin button-info">Info</a>
<a class="button block margin button-success">Success</a>
<a class="button block margin button-warning">Warning</a>
<a class="button block margin button-danger">Danger</a>
<a class="button block margin button-dark">Dark</a>
</p>
<h3>&lt;button&gt; .block .margin set on each button and nothing on the parent</h3>
<p>
<button class="button block margin button-default">Default</button>
<button class="button block margin button-secondary">Secondary</button>
<button class="button block margin button-primary">Primary</button>
<button class="button block margin button-info">Info</button>
<button class="button block margin button-success">Success</button>
<button class="button block margin button-warning">Warning</button>
<button class="button block margin button-danger">Danger</button>
<button class="button block margin button-dark">Dark</button>
</p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p> </p>
</main> </main>