2679c3864a
The default theme assumes ALL dropdowns are drop'down' menus, however Bootstrap supports dropup menus as well. This simplies the logic in the theme's dropdown.scss file in order to support all Bootstrap types. Also, added the dropup to the theme preview page for ease of testing. Closes-bug: #1583754 Change-Id: Ib05bc59c35371dc8b2291d4a0522cf4c52047813
57 lines
1.6 KiB
SCSS
57 lines
1.6 KiB
SCSS
@mixin dropdown_arrow($size, $offset, $location, $direction) {
|
|
|
|
$opposite_location: 'top';
|
|
@if $location == 'top' {
|
|
$opposite_location: 'bottom';
|
|
}
|
|
|
|
$opposite_direction: 'left';
|
|
@if $direction == 'left' {
|
|
$opposite_direction: 'right';
|
|
}
|
|
|
|
&:before, &:after {
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
// Defaults the arrow to the left side
|
|
&:before {
|
|
#{$location}: ($size + 1) * -1;
|
|
#{$direction}: $offset - 1;
|
|
#{$opposite_location}: auto;
|
|
#{$opposite_direction}: auto;
|
|
border-#{$opposite_direction}: ($size + 1) solid transparent;
|
|
border-#{$opposite_location}: ($size + 1) solid $dropdown-border;
|
|
border-#{$direction}: ($size + 1) solid transparent;
|
|
border-#{$location}: 0;
|
|
border-#{$opposite_location}-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
&:after {
|
|
#{$location}: -$size;
|
|
#{$direction}: $offset;
|
|
#{$opposite_location}: auto;
|
|
#{$opposite_direction}: auto;
|
|
border-#{$opposite_direction}: $size solid transparent;
|
|
border-#{$opposite_location}: $size solid $body-bg;
|
|
border-#{$direction}: $size solid transparent;
|
|
border-#{$location}: 0;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'left');
|
|
}
|
|
|
|
.dropdown-menu-right {
|
|
@include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'right');
|
|
}
|
|
|
|
.dropup > .dropdown-menu {
|
|
@include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'left');
|
|
}
|
|
|
|
.dropup > .dropdown-menu-right {
|
|
@include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'right');
|
|
}
|