horizon/openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss
Diana Whitten 00b842e989 Horizon selects are now themable: Table Actions
Horizon was using a standard select input.  Unfortunately,
this type of input is only customizable to a small extent.

Also, a bug was noted.  Things were being marked as btn-groups
that were not button groups.  This was fixed.

Co-Authored-By: Ryan Peters <rjpeter2@gmail.com>
Co-Authored-By: Matthew Wood <woodm1979@gmail.com>
Co-Authored-By: Brian Tully <brian.tully@hp.com>

Change-Id: I048f001bf71c5d9a8d13451b7e5a892122f481c8
Partially-implements: blueprint horizon-theme-css-reorg
2016-05-05 15:42:08 +00:00

84 lines
2.0 KiB
SCSS

/* Dropdown Actions */
/* Unfortunately, we want to style a button in a dropdown
the same way that we style an anchor. This isn't possible
in the current Bootstrap:
https://github.com/twbs/bootstrap/issues/10248
*/
/* Specificity required */
.dropdown-menu > li > .btn {
border: none;
box-shadow: none;
border-radius: 0;
margin: 0; // prevent the form-inline styles from messing with margin
padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
white-space: nowrap; // prevent links from breaking onto new lines
min-width: 100%;
text-align: left;
background: transparent;
display: block;
clear: both;
font-weight: normal;
line-height: $line-height-base;
&:hover,
&:focus {
text-decoration: none;
}
&.disabled,
&[disabled] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
@include opacity(.65);
@include box-shadow(none);
}
&.btn-primary {
color: $brand-primary;
}
&.btn-danger {
color: $brand-danger;
}
&.btn-warning {
color: $brand-warning;
}
&.btn-info {
color: $brand-info;
}
@include dropdown-button('default', $dropdown-link-color, $dropdown-link-hover-bg);
@include dropdown-button('primary', $btn-primary-bg, $btn-primary-bg, $btn-primary-color);
@include dropdown-button('info', $btn-info-bg, $btn-info-bg, $btn-info-color);
@include dropdown-button('warning', $btn-warning-bg, $btn-warning-bg, $btn-warning-color);
@include dropdown-button('danger', $btn-danger-bg, $btn-danger-bg, $btn-danger-color);
}
.table_search .themable-select,
.table_actions_menu {
display: inline-block;
position: relative;
}
.table_actions {
float: right;
@extend .form-inline;
}
.table_search,
.table_filter {
display: inline-block;
}
// Push the table filter padding over to compensate for that little magnifying glass icon
.table_search {
input[type="text"] {
padding-right: $input-height-base;
}
}
td.actions_column {
width: 1px; // Slight hack to make sure the column shrinks to the button width
}