javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

moved button-group to button-bar

Browse Source
This commit is contained in:
Adam Bradley
2013-10-15 13:46:34 -05:00
parent e3984cdf1e
commit bb2ec72053
10 changed files with 49 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
dist/css/ionic-ios7.css vendored
View File

@ -1816,70 +1816,6 @@ a.button {
border-left-width: 1px;
border-radius: 2px; }
.button-group {
position: relative;
display: inline-block;
vertical-align: middle; }
.button-group > .button {
position: relative;
display: inline-block;
float: left;
width: auto; }
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
z-index: 2; }
.button-group > .button:focus {
outline: none; }
.button-group .button + .button,
.button-group .button + .button-group,
.button-group .button-group + .button,
.button-group .button-group + .button-group {
margin-left: -1px; }
.button-group > .button:not(:first-child):not(:last-child) {
border-radius: 0; }
.button-group > .button:first-child {
margin-left: 0; }
.button-group > .button:first-child:not(:last-child) {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.button-group > .button:last-child:not(:first-child) {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.button-group > .button-group {
float: left; }
.button-group > .button-group:not(:first-child):not(:last-child) > .button {
border-radius: 0; }
.button-group > .button-group:first-child > .button:last-child,
.button-group > .button-group:first-child > .dropdown-toggle {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.button-group > .button-group:last-child > .button:first-child {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.button-bar {
box-flex: 1;
-webkit-box-flex: 1;

55
dist/css/ionic-scoped.css vendored
View File

@ -2440,61 +2440,6 @@
border-right-width: 1px;
border-left-width: 1px;
border-radius: 2px; }
.ionic .button-group {
position: relative;
display: inline-block;
vertical-align: middle; }
.ionic .button-group > .button {
position: relative;
display: inline-block;
float: left;
width: auto; }
.ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active {
z-index: 2; }
.ionic .button-group > .button:focus {
outline: none; }
.ionic .button-group .button + .button,
.ionic .button-group .button + .button-group,
.ionic .button-group .button-group + .button,
.ionic .button-group .button-group + .button-group {
margin-left: -1px; }
.ionic .button-group > .button:not(:first-child):not(:last-child) {
border-radius: 0; }
.ionic .button-group > .button:first-child {
margin-left: 0; }
.ionic .button-group > .button:first-child:not(:last-child) {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.ionic .button-group > .button:last-child:not(:first-child) {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.ionic .button-group > .button-group {
float: left; }
.ionic .button-group > .button-group:not(:first-child):not(:last-child) > .button {
border-radius: 0; }
.ionic .button-group > .button-group:first-child > .button:last-child,
.ionic .button-group > .button-group:first-child > .dropdown-toggle {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.ionic .button-group > .button-group:last-child > .button:first-child {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.ionic .button-bar {
box-flex: 1;
-webkit-box-flex: 1;

64
dist/css/ionic.css vendored
View File

@ -2934,70 +2934,6 @@ a.button {
border-left-width: 1px;
border-radius: 2px; }
.button-group {
position: relative;
display: inline-block;
vertical-align: middle; }
.button-group > .button {
position: relative;
display: inline-block;
float: left;
width: auto; }
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
z-index: 2; }
.button-group > .button:focus {
outline: none; }
.button-group .button + .button,
.button-group .button + .button-group,
.button-group .button-group + .button,
.button-group .button-group + .button-group {
margin-left: -1px; }
.button-group > .button:not(:first-child):not(:last-child) {
border-radius: 0; }
.button-group > .button:first-child {
margin-left: 0; }
.button-group > .button:first-child:not(:last-child) {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.button-group > .button:last-child:not(:first-child) {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.button-group > .button-group {
float: left; }
.button-group > .button-group:not(:first-child):not(:last-child) > .button {
border-radius: 0; }
.button-group > .button-group:first-child > .button:last-child,
.button-group > .button-group:first-child > .dropdown-toggle {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0; }
.button-group > .button-group:last-child > .button:first-child {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0; }
.button-bar {
box-flex: 1;
-webkit-box-flex: 1;

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

@ -27,7 +27,7 @@
// Buttons
"../ionic/button",
"../ionic/button-group",
"../ionic/button-bar",
// Badges
"../ionic/badge",

42
scss/ionic/_button-bar.scss Normal file
View File

@ -0,0 +1,42 @@
.button-bar {
@include box-flex(1);
@include box-orient(horizontal);
display: -webkit-box;
display: box;
}
.button-bar > .button {
@include box-flex(1);
display: block;
overflow: hidden;
padding: 8px 16px;
// Fix for unequal widths of buttons
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
// Fix for box-flex width issue
line-height: $button-bar-button-line-height;
&:last-child {
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 {
@include box-flex(1);
@include box-orient(horizontal);
display: -webkit-box;
display: box;
}

107
scss/ionic/_button-group.scss
View File

@ -1,107 +0,0 @@
.button-group {
position: relative;
display: inline-block;
vertical-align: middle; // match .button alignment given font-size hack above
> .button {
position: relative;
display: inline-block;
float: left;
width: auto;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
.button-group {
.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group {
margin-left: -1px;
}
}
.button-group > .button:not(:first-child):not(:last-child) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
.button-group > .button:first-child {
margin-left: 0;
&:not(:last-child) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.button-group > .button:last-child:not(:first-child) {
@include border-left-radius(0);
}
// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group)
.button-group > .button-group {
float: left;
}
.button-group > .button-group:not(:first-child):not(:last-child) > .button {
border-radius: 0;
}
.button-group > .button-group:first-child {
> .button:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
.button-group > .button-group:last-child > .button:first-child {
@include border-left-radius(0);
}
.button-bar {
@include box-flex(1);
@include box-orient(horizontal);
display: -webkit-box;
display: box;
}
.button-bar > .button {
@include box-flex(1);
display: block;
overflow: hidden;
padding: 8px 16px;
// Fix for unequal widths of buttons
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
// Fix for box-flex width issue
line-height: $button-bar-button-line-height;
&:last-child {
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 {
@include box-flex(1);
@include box-orient(horizontal);
display: -webkit-box;
display: box;
}

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

@ -33,7 +33,7 @@
// Buttons
"button",
"button-group",
"button-bar",
// Badges
"badge",

2
scss/ionic/ionic.scss
View File

@ -31,7 +31,7 @@
// Buttons
"button",
"button-group",
"button-bar",
// Badges
"badge",

6
test/button-groups.html → test/button-bar.html
View File

@ -1,7 +1,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Button Group</title>
<title>Button Bar</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@ -10,13 +10,13 @@
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Button Group</h1>
<h1 class="title">Button Bar</h1>
</header>
<div class="content-wrapper">
<main class="content padded has-header">
<p>
<div class="button-group">
<div class="button-bar">
<a class="button button-primary">Success</a>
<a class="button button-primary">Warning</a>
<a class="button button-primary">Danger</a>

2
test/index.html
View File

@ -19,7 +19,7 @@
<main class="content padded has-header">
<p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
<p><a class="button button-block button-default" href="buttons.html"><i class="icon-star-half-empty"></i> Buttons</a></p>
<p><a class="button button-block button-default" href="button-groups.html"><i class="icon-star"></i> Button Groups</a></p>
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>