mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-10 23:07:47 +00:00
2013750732
This naming scheme removes some duplication which is nice, but it's a little strange and results in a longer name overall. I don't like it very much because: - filenames don't include the component's actual name. This makes it slightly harder to find them in my text editor (but I'd probably get used to that) - the namespace and class naming isn't exactly right. This is _the_ vertical_ellipsis_menu, not a subcomponent. - the stimulus controller name is now longer, adding more cruft to the HTML. Lots of discussion here: https://github.com/ViewComponent/view_component/discussions/67 People tried to come up with a better way (and I was tempted to try myself). It seems this approach won. I guess it's not so bad if your component names are shorter.
63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
.vertical-ellipsis-menu {
|
|
position: relative;
|
|
width: $btn-relaxed-height;
|
|
|
|
i.fa-ellipsis-v {
|
|
cursor: pointer;
|
|
display: block;
|
|
height: $btn-relaxed-height;
|
|
width: $btn-relaxed-height;
|
|
line-height: $btn-relaxed-height;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
background-color: white;
|
|
}
|
|
|
|
.vertical-ellipsis-menu-content {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
background-color: white;
|
|
@include defaultBoxShadow;
|
|
border-radius: 3px;
|
|
min-width: 80px;
|
|
display: none;
|
|
z-index: 100;
|
|
|
|
&.show {
|
|
display: block;
|
|
}
|
|
|
|
& > a {
|
|
display: block;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
border-left: 3px solid white;
|
|
color: $near-black;
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
|
|
&:hover {
|
|
background-color: $light-grey;
|
|
border-left: 3px solid $spree-blue;
|
|
}
|
|
|
|
&.delete {
|
|
color: $red;
|
|
|
|
&:hover {
|
|
border-left: 3px solid $red;
|
|
background-color: $fair-pink;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
table.products td .vertical-ellipsis-menu {
|
|
float: right;
|
|
}
|