diff --git a/dist/ionic.css b/dist/ionic.css
index 0effcc7940..a801e03ab1 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -465,15 +465,18 @@ a {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
+ background-color: transparent;
line-height: 23px;
- font-size: 12px; }
+ font-size: 12px;
+ padding: 4px 12px; }
.bar .button-bar {
line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar {
margin-left: 5px; }
.bar .title + .button:last-child,
.bar > .button + .button:last-child,
- .bar > .button.pull-right {
+ .bar > .button.pull-right,
+ .bar .title + .buttons {
position: absolute;
top: 5px;
right: 5px; }
@@ -508,6 +511,9 @@ a {
text-align: center;
cursor: pointer;
margin: 0; }
+ .button.button-icon {
+ background: none;
+ border: none; }
.button.button-block {
margin: 10px 0 10px 0;
display: block;
@@ -601,6 +607,16 @@ a {
.button-bar > .button:last-child {
border-right-width: 1px; }
+.buttons {
+ display: -webkit-box;
+ display: box;
+ box-flex: 1;
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-orient: horizontal;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal; }
+
form {
margin: 0 0 1.42857; }
@@ -1974,6 +1990,10 @@ main {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: black; }
+.bar .button-icon {
+ background-color: transparent;
+ border: 1px solid transparent; }
+
.button {
color: #222222;
border-radius: 2px;
@@ -2069,10 +2089,6 @@ main {
background-color: #303030;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: black; }
- .button.button-clear {
- background: none;
- border: none;
- padding: 10px 0px; }
a.button {
text-decoration: none; }
diff --git a/example/twitter/index.html b/example/twitter/index.html
new file mode 100644
index 0000000000..f495a142e1
--- /dev/null
+++ b/example/twitter/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss
index ff5d88ae53..3662bb9fd0 100644
--- a/scss/ionic/structure/_bar.scss
+++ b/scss/ionic/structure/_bar.scss
@@ -49,8 +49,10 @@
.button {
@include box-flex(0);
+ background-color: transparent;
line-height: $barButtonLineHeight;
font-size: 12px;
+ padding: 4px 12px;
}
.button-bar {
@@ -64,7 +66,8 @@
// Place the last button in a bar on the right of the bar
.title + .button:last-child,
> .button + .button:last-child,
- > .button.pull-right {
+ > .button.pull-right,
+ .title + .buttons {
position: absolute;
top: 5px;
right: 5px;
diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss
index 38e4bfcff0..8df19e00e3 100644
--- a/scss/ionic/structure/_button-group.scss
+++ b/scss/ionic/structure/_button-group.scss
@@ -93,3 +93,13 @@
border-right-width: 1px;
}
}
+
+// Buttons are used to group a set of buttons, useful
+// to pull a set of buttons to the right side of a header
+// bar, for example.
+.buttons {
+ display: -webkit-box;
+ display: box;
+ @include box-flex(1);
+ @include box-orient(horizontal);
+}
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index 8a4f90bac7..2950cc55c2 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -6,6 +6,11 @@
cursor: pointer;
margin: 0;
+ &.button-icon {
+ background: none;
+ border: none;
+ }
+
&.button-block {
margin: $buttonBlockMargin;
display: block;
diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/theme/_bar.scss
index 5077f4d41b..510ecba1c6 100644
--- a/scss/ionic/theme/_bar.scss
+++ b/scss/ionic/theme/_bar.scss
@@ -131,3 +131,7 @@
}
}
+.bar .button-icon {
+ background-color: transparent;
+ border: 1px solid transparent;
+}
\ No newline at end of file
diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss
index 33317d68ec..998f200f57 100644
--- a/scss/ionic/theme/_button.scss
+++ b/scss/ionic/theme/_button.scss
@@ -30,11 +30,6 @@
&.button-dark {
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
}
- &.button-clear {
- background: none;
- border: none;
- padding: $buttonClearPadding;
- }
}
a.button {