github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix specificity issue with dark theme and vis legends (#34199)

Browse source
This commit is contained in:
Caroline Horn 2019-04-01 12:56:13 -04:00 • committed by GitHub
parent d0ba1e720f
commit eca0827c9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

134
src/ui/public/vis/vis_types/_vislib_vis_legend.scss
View file

@ -19,60 +19,60 @@ $visLegendLineHeight: $euiSize;
padding: $euiSizeXS 0;
min-height: 0;
height: 100%;
}
// flex-direction re-aligns toggle button
.visLib--legend-left & {
flex-direction: row-reverse;
// flex-direction re-aligns toggle button
.visLib--legend-left .visLegend {
flex-direction: row-reverse;
}
.visLib--legend-right .visLegend {
flex-direction: row;
}
.visLib--legend-top .visLegend {
flex-direction: column-reverse;
width: 100%;
padding-left: $euiSizeL;
}
.visLib--legend-bottom .visLegend {
flex-direction: column;
width: 100%;
padding-left: $euiSizeL;
}
/**
* 1. Position the .visLegend__valueDetails absolutely against the legend item
* 2. Make sure the .visLegend__valueDetails is visible outside the list bounds
* 3. Make sure the currently selected item is top most in z level
*/
.visLegend__list {
display: flex;
line-height: $visLegendLineHeight;
width: $visLegendWidth; // Must be a hard-coded width for the chart to get its correct dimensions
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
&.hidden {
visibility: hidden;
}
}
.visLib--legend-right & {
flex-direction: row;
}
.visLib--legend-top .visLegend__list,
.visLib--legend-bottom .visLegend__list {
width: auto;
flex-direction: row;
flex-wrap: wrap;
overflow: visible; /* 2 */
.visLib--legend-top & {
flex-direction: column-reverse;
width: 100%;
padding-left: $euiSizeL;
}
.visLib--legend-bottom & {
flex-direction: column;
width: 100%;
padding-left: $euiSizeL;
}
/**
* 1. Position the .visLegend__valueDetails absolutely against the legend item
* 2. Make sure the .visLegend__valueDetails is visible outside the list bounds
* 3. Make sure the currently selected item is top most in z level
*/
.visLegend__list {
display: flex;
line-height: $visLegendLineHeight;
width: $visLegendWidth; // Must be a hard-coded width for the chart to get its correct dimensions
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
.visLib--legend-top &,
.visLib--legend-bottom & {
width: auto;
flex-direction: row;
flex-wrap: wrap;
overflow: visible; /* 2 */
.visLegend__value {
flex-grow: 0;
max-width: $visLegendWidth;
}
}
&.hidden {
visibility: hidden;
}
.visLegend__value {
flex-grow: 0;
max-width: $visLegendWidth;
}
}
@ -107,27 +107,27 @@ $visLegendLineHeight: $euiSize;
.visLegend__valueDetails {
background-color: $euiColorEmptyShade;
}
.visLib--legend-left &,
.visLib--legend-right & {
margin-top: $euiSizeXS;
border-bottom: $euiBorderThin;
}
.visLib--legend-left .visLegend__valueDetails,
.visLib--legend-right .visLegend__valueDetails {
margin-top: $euiSizeXS;
border-bottom: $euiBorderThin;
}
.visLib--legend-top &,
.visLib--legend-bottom & {
@include euiBottomShadowMedium;
position: absolute; /* 1 */
border-radius: $euiBorderRadius;
}
.visLib--legend-top .visLegend__valueDetails,
.visLib--legend-bottom .visLegend__valueDetails {
@include euiBottomShadowMedium;
position: absolute; /* 1 */
border-radius: $euiBorderRadius;
}
.visLib--legend-bottom & {
bottom: $visLegendLineHeight + 2 * $euiSizeXS;
}
.visLib--legend-bottom .visLegend__valueDetails {
bottom: $visLegendLineHeight + 2 * $euiSizeXS;
}
.visLib--legend-top & {
margin-top: $euiSizeXS;
}
.visLib--legend-top .visLegend__valueDetails {
margin-top: $euiSizeXS;
}
.visLegend__valueColorPicker {