1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
lens/src/renderer/components/menu/menu-actions.scss
Sebastian Malton 17291a1709 Remove custom <Icon /> component
- Move to using Material-UI's <Icon /> and <SvgIcon />

- Move to using Material-UI's <Tooltip />

- Move to using Material-UI's <IconButton />

- Switch *.svg webpack importer so we can import then as React
  components

- Export the above to the extension API

- Move to using the Material-UI's component names for menuItem.icon's.
  This means that they are now in PascalCase instead of snake_case

- Remove the Material-UI font

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2021-04-15 16:23:52 -04:00

62 lines
1013 B
SCSS

.MenuActions {
&.toolbar {
--flex-gap: #{$padding / 2};
position: static;
padding: 0;
background: none;
border: none;
flex-direction: row;
.Icon {
color: $textColorAccent;
padding-right: 0;
}
.title, .arrow {
display: none;
}
> .MenuItem {
background: none !important;
padding: 0;
> .SubMenu {
$offset: $margin;
margin-top: $offset;
top: 100%;
right: $padding;
&:before {
position: absolute;
width: 100%;
top: -$offset;
height: $offset;
content: "";
}
}
}
}
.MenuItem {
position: relative;
&:hover > .SubMenu {
opacity: 1;
visibility: visible;
}
> .SubMenu {
margin: 0;
transition: visibility, opacity 150ms ease-in-out;
transition-delay: 150ms;
opacity: 0;
visibility: hidden;
right: 100%;
top: -1px;
margin-right: 2px;
}
}
}