0bfca75f45
The first step in the dynamic theme effort requires that the context selection picker inherit properly from a dropdown menu, so that the styles can be shared and the experience is matched. Dynamic themes will use the 'select' experience of the context menu but from within the user menu, so it was necessary to match the experiences to minimize duplicated code. The style of the context menu was extremely dependant on DOM structure and therefore difficult to customize. This has been simplified by using classes and attempting to keep specificity as low as possible. Change-Id: Idb9e8f5c1d246688418f68e12fb53f094c01ea34 Partially-implements: blueprint horizon-dynamic-theme Partially-Implements: blueprint bootstrap-html-standards
53 lines
1.3 KiB
SCSS
53 lines
1.3 KiB
SCSS
// FYI Note (hurgleburgler)
|
|
// The Selection Menu is not a normal drop down element
|
|
// This menu can contain other dropdown menus, and will
|
|
// treat them as a selection group element.
|
|
// The context menu shows this functionality.
|
|
// This drop down is composed of other <ul> drop down lists.
|
|
// Because of this fact, it is necessary to inherit
|
|
// class="dropdown" for the children elements to obtain
|
|
// their necessary styles, but we must remove the default
|
|
// styles for .dropdown on the inner <ul> itself.
|
|
|
|
.selection-menu {
|
|
|
|
// Pass along the style of a disabled anchor
|
|
.disabled {
|
|
cursor: not-allowed;
|
|
color: $dropdown-link-disabled-color;
|
|
}
|
|
|
|
// Remove all styles from an inside dropdown
|
|
.dropdown-menu {
|
|
border: medium none;
|
|
box-shadow: none;
|
|
display: block;
|
|
position: relative;
|
|
float: none;
|
|
|
|
// Remove any possible arrows on the dropdown box
|
|
&:before,
|
|
&:after {
|
|
border: none;
|
|
position: relative;
|
|
}
|
|
|
|
// Pad the icon with 2 * icon size
|
|
& > li > a {
|
|
padding-left: 2em;
|
|
}
|
|
}
|
|
|
|
// Hide the icon by default if its not selected
|
|
.dropdown-selected-icon {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-selected .dropdown-selected-icon {
|
|
display: inline;
|
|
position: absolute;
|
|
left: .5em;
|
|
line-height: $line-height-computed;
|
|
}
|
|
}
|