gab-social/app/javascript/gabsocial/components/dropdown_menu/index.scss
mgabdev 42917806e9 Updated all basic components
removed unnecessary components, combined where necessary
added each component to a folder, added individual css style modules
optimized some component rendering flows
removed functional components in favor of pure components
linted and formatted all of the files
2019-08-03 02:00:45 -04:00

93 lines
1.7 KiB
SCSS

.dropdown-menu {
z-index: 9999;
position: absolute;
background: $gab-background-container;
border-radius: 4px;
border: 1px solid $gab-placeholder-accent;
padding: 4px 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
&.left {
transform-origin: 100% 50%;
}
&.top {
transform-origin: 50% 100%;
}
&.bottom {
transform-origin: 50% 0;
}
&.right {
transform-origin: 0 50%;
}
&__arrow {
position: absolute;
border: 0 solid transparent;
@include size(0);
&.left {
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: $gab-placeholder-accent;
}
&.top {
bottom: -5px;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: $gab-placeholder-accent;
}
&.bottom {
top: -5px;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: $gab-placeholder-accent;
}
&.right {
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: $gab-placeholder-accent;
}
}
ul {
overflow: hidden;
padding: 6px 0;
}
&__item a {
display: block;
box-sizing: border-box;
padding: 3px 10px 1px;
text-decoration: none;
text-transform: capitalize;
color: $gab-secondary-text;
@include text-overflow(nowrap);
@include text-sizing(13px, 400, 26px);
&:focus,
&:hover,
&:active {
outline: 0;
color: $gab-text-highlight;
background: $gab-background-base !important;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
}
&__separator {
display: block;
margin: 10px !important;
height: 1px;
background: $gab-background-base;
}
}