mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
108 lines
2.4 KiB
SCSS
108 lines
2.4 KiB
SCSS
.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;
|
|
}
|