0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-29 02:32:37 +00:00

Resize dropdown button

This commit is contained in:
Trevor Buckner
2023-01-27 14:45:31 -05:00
parent 6d40e63e96
commit a457058041
2 changed files with 32 additions and 34 deletions

View File

@@ -202,14 +202,14 @@ const MetadataEditor = createClass({
if(this.props.metadata.renderer == 'legacy') {
dropdown =
<Nav.dropdown className='disabled' trigger='disabled'>
<Nav.dropdown className='disabled value' trigger='disabled'>
<div>
{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
</div>
</Nav.dropdown>;
} else {
dropdown =
<Nav.dropdown trigger='click'>
<Nav.dropdown className='value' trigger='click'>
<div>
{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
</div>

View File

@@ -35,7 +35,6 @@
flex-direction: column;
flex: 5 0 200px;
gap: 10px;
}
.field{
display : flex;
@@ -159,7 +158,6 @@
font-size : 13.33px;
.navDropdownContainer {
background-color : white;
width : 100%;
position : relative;
z-index : 500;
&.disabled {
@@ -182,51 +180,51 @@
}
.navDropdown {
box-shadow : 0px 5px 10px rgba(0, 0, 0, 0.3);
position : absolute;
width : 100%;
position : absolute;
width : 100%;
.item {
padding : 3px 3px;
border-top : 1px solid rgb(118, 118, 118);
position : relative;
overflow : visible;
padding : 3px 3px;
border-top : 1px solid rgb(118, 118, 118);
position : relative;
overflow : visible;
background-color : white;
.preview {
display: flex;
flex-direction: column;
background: #ccc;
border-radius: 5px;
box-shadow: 0 0 5px black;
width: 200px;
color:black;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: opacity 250ms ease;
z-index: 1;
overflow:hidden;
display : flex;
flex-direction: column;
background : #ccc;
border-radius : 5px;
box-shadow : 0 0 5px black;
width : 200px;
color :black;
position : absolute;
top : 0;
right : 0;
opacity : 0;
transition : opacity 250ms ease;
z-index : 1;
overflow :hidden;
h6 {
font-weight: 900;
font-weight : 900;
padding-inline:1em;
padding-block:.5em;
border-bottom:2px solid hsl(0,0%,40%);
padding-block :.5em;
border-bottom :2px solid hsl(0,0%,40%);
}
}
&:hover {
background-color : @blue;
color : white;
color : white;
}
&:hover > .preview {
opacity: 1;
}
>img {
mask-image : linear-gradient(90deg, transparent, black 20%);
mask-image : linear-gradient(90deg, transparent, black 20%);
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
position : absolute;
right : 0;
top : 0px;
width : 50%;
height : 100%;
position : absolute;
right : 0;
top : 0px;
width : 50%;
height : 100%;
}
}
}