mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
different way to do block buttons
This commit is contained in:
Adam Bradley
@ -9,8 +9,6 @@
|
||||
// Base
|
||||
"../ionic/reset",
|
||||
"../ionic/scaffolding",
|
||||
"../ionic/platform",
|
||||
"../ionic/util",
|
||||
"../ionic/type",
|
||||
|
||||
// Nav
|
||||
@ -38,3 +36,6 @@
|
||||
|
||||
// Animations
|
||||
"../ionic/animations";
|
||||
|
||||
// Util
|
||||
"../ionic/util";
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
.button {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
|
||||
//margin: $button-block-margin;
|
||||
margin: 0;
|
||||
|
||||
padding: $button-padding;
|
||||
width: 100%;
|
||||
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
@ -22,8 +21,6 @@
|
||||
cursor: pointer;
|
||||
|
||||
&.button-icon {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $button-clear-padding;
|
||||
width: auto;
|
||||
border: none;
|
||||
@ -32,10 +29,7 @@
|
||||
|
||||
&.button-clear {
|
||||
@include transition(opacity .1s);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $button-clear-padding;
|
||||
width: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@ -88,9 +82,6 @@
|
||||
|
||||
&.button-outline {
|
||||
@include transition(opacity .1s);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
background: 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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.margin.button,
|
||||
.margin .button,
|
||||
.padding .button {
|
||||
border-right-width: $button-border-width;
|
||||
border-left-width: $button-border-width;
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,25 @@
|
||||
.hide {
|
||||
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
|
||||
// -------------------------------
|
||||
@ -11,29 +29,23 @@
|
||||
padding: $content-padding;
|
||||
}
|
||||
|
||||
.padding-top,
|
||||
.padding-vertical {
|
||||
padding-top: $content-padding;
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padding-right,
|
||||
.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,
|
||||
.padding-vertical {
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
.padding-left,
|
||||
.padding-horizontal {
|
||||
padding-left: $content-padding;
|
||||
}
|
||||
|
||||
@ -45,29 +57,23 @@
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: $inset-margin;
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-left: $inset-margin;
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-left {
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: $inset-margin;
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
// Base
|
||||
"reset",
|
||||
"scaffolding",
|
||||
"util",
|
||||
"type",
|
||||
|
||||
// Action Sheet
|
||||
@ -45,6 +44,8 @@
|
||||
// Animations
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
}
|
||||
@ -10,7 +10,6 @@
|
||||
// Base
|
||||
"reset",
|
||||
"scaffolding",
|
||||
"util",
|
||||
"type",
|
||||
|
||||
// Action Sheet
|
||||
@ -45,4 +44,6 @@
|
||||
// Animations
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
@ -18,19 +18,7 @@
|
||||
|
||||
<div class="padding">
|
||||
|
||||
<h3>Default (Block w/ parent .padding)</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>
|
||||
<h3>Default (Inline)</h3>
|
||||
<p>
|
||||
<a class="button button-default button-inline">Default</a>
|
||||
<a class="button button-secondary button-inline">Secondary</a>
|
||||
@ -42,14 +30,26 @@
|
||||
<a class="button button-dark button-inline">Dark</a>
|
||||
</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>
|
||||
<p>
|
||||
<a class="button button-icon"><i class="icon-home"></i></a>
|
||||
</p>
|
||||
|
||||
<h3>Icon (.button-block override)</h3>
|
||||
<h3>Icon (.block override)</h3>
|
||||
<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>
|
||||
|
||||
<h3>Outline (Inline Default)</h3>
|
||||
@ -64,16 +64,16 @@
|
||||
<a class="button button-dark button-outline">Dark</a>
|
||||
</p>
|
||||
|
||||
<h3>Outline (.button-block override)</h3>
|
||||
<h3>Outline (.block override)</h3>
|
||||
<p>
|
||||
<a class="button button-default button-outline button-block">Default</a>
|
||||
<a class="button button-secondary button-outline button-block">Secondary</a>
|
||||
<a class="button button-primary button-outline button-block">Primary</a>
|
||||
<a class="button button-info button-outline button-block">Info</a>
|
||||
<a class="button button-success button-outline button-block">Success</a>
|
||||
<a class="button button-warning button-outline button-block">Warning</a>
|
||||
<a class="button button-danger button-outline button-block">Danger</a>
|
||||
<a class="button button-dark button-outline button-block">Dark</a>
|
||||
<a class="button button-default button-outline block">Default</a>
|
||||
<a class="button button-secondary button-outline block">Secondary</a>
|
||||
<a class="button button-primary button-outline block">Primary</a>
|
||||
<a class="button button-info button-outline block">Info</a>
|
||||
<a class="button button-success button-outline block">Success</a>
|
||||
<a class="button button-warning button-outline block">Warning</a>
|
||||
<a class="button button-danger button-outline block">Danger</a>
|
||||
<a class="button button-dark button-outline block">Dark</a>
|
||||
</p>
|
||||
|
||||
<h3>Clear (Inline Default)</h3>
|
||||
@ -88,46 +88,69 @@
|
||||
<a class="button button-dark button-clear">Dark</a>
|
||||
</p>
|
||||
|
||||
<h3>Clear (.button-block override)</h3>
|
||||
<h3>Clear (.block override)</h3>
|
||||
<p>
|
||||
<a class="button button-default button-clear button-block">Default</a>
|
||||
<a class="button button-secondary button-clear button-block">Secondary</a>
|
||||
<a class="button button-primary button-clear button-block">Primary</a>
|
||||
<a class="button button-info button-clear button-block">Info</a>
|
||||
<a class="button button-success button-clear button-block">Success</a>
|
||||
<a class="button button-warning button-clear button-block">Warning</a>
|
||||
<a class="button button-danger button-clear button-block">Danger</a>
|
||||
<a class="button button-dark button-clear button-block">Dark</a>
|
||||
<a class="button button-default button-clear block">Default</a>
|
||||
<a class="button button-secondary button-clear block">Secondary</a>
|
||||
<a class="button button-primary button-clear block">Primary</a>
|
||||
<a class="button button-info button-clear block">Info</a>
|
||||
<a class="button button-success button-clear block">Success</a>
|
||||
<a class="button button-warning button-clear block">Warning</a>
|
||||
<a class="button button-danger button-clear block">Danger</a>
|
||||
<a class="button button-dark button-clear block">Dark</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Default (Block w/out padding)</h3>
|
||||
<h3>Block w/out padding</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>
|
||||
<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>Default (Block w/out padding and parent .margin)</h3>
|
||||
<h3>Block w/out parent padding but 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>
|
||||
<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>
|
||||
<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><a> .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><button> .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>
|
||||
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user