f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-16 06:02:41 +00:00
Code Wiki Activity

Resize dropdown button

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

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

62
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

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