X-Git-Url: http://git.cascardo.eti.br/?p=cascardo%2Fipsilon.git;a=blobdiff_plain;f=less%2Fbootstrap%2Fbutton-groups.less;h=6a0c5a865cb00296be27434c65b69d3e6d961e38;hp=58fd906752140670f5fb9a2ebefa64770ba200f4;hb=0afc14ecf1c3d94bc59d2dd7f1cee6420a0b98dd;hpb=6487bce2a3acaa9bd24cdf280680662085db8472 diff --git a/less/bootstrap/button-groups.less b/less/bootstrap/button-groups.less index 58fd906..6a0c5a8 100644 --- a/less/bootstrap/button-groups.less +++ b/less/bootstrap/button-groups.less @@ -18,10 +18,6 @@ &.active { z-index: 2; } - &:focus { - // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; - } } } @@ -40,6 +36,7 @@ margin-left: -5px; // Offset the first child's margin &:extend(.clearfix all); + .btn, .btn-group, .input-group { float: left; @@ -75,13 +72,13 @@ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:first-child { +.btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { .border-right-radius(0); } } -.btn-group > .btn-group:last-child > .btn:first-child { +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { .border-left-radius(0); } @@ -96,9 +93,9 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-xs > .btn { .btn-xs(); } -.btn-group-sm > .btn { .btn-sm(); } -.btn-group-lg > .btn { .btn-lg(); } +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } // Split button dropdowns @@ -176,11 +173,11 @@ border-radius: 0; } &:first-child:not(:last-child) { - border-top-right-radius: @border-radius-base; + border-top-right-radius: @btn-border-radius-base; .border-bottom-radius(0); } &:last-child:not(:first-child) { - border-bottom-left-radius: @border-radius-base; + border-bottom-left-radius: @btn-border-radius-base; .border-top-radius(0); } } @@ -198,7 +195,6 @@ } - // Justified button groups // ---------------------- @@ -216,11 +212,33 @@ > .btn-group .btn { width: 100%; } + + > .btn-group .dropdown-menu { + left: auto; + } } // Checkbox and radio options -[data-toggle="buttons"] > .btn > input[type="radio"], -[data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } }