lbry-desktop/ui/scss/component/menu-button.scss

80 lines
1.5 KiB
SCSS
Raw Normal View History

2019-06-17 22:32:38 +02:00
// Extends reach-ui menu button base stylesheet
/* Used to detect in JavaScript if apps have loaded styles or not. */
:root {
--reach-menu-button: 1;
}
[data-reach-menu] {
font-family: sans-serif;
display: block;
position: absolute;
z-index: 2;
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2019-06-17 22:32:38 +02:00
}
[data-reach-menu-list] {
display: block;
white-space: nowrap;
outline: none;
2019-11-22 22:13:00 +01:00
background-color: var(--color-menu-background);
2019-06-17 22:32:38 +02:00
border-top: none;
}
[data-reach-menu-item] {
display: block;
2019-07-01 03:52:38 +02:00
z-index: 2;
2019-12-06 21:57:07 +01:00
&:focus {
box-shadow: none;
}
2019-06-17 22:32:38 +02:00
}
[data-reach-menu-item] {
cursor: pointer;
display: block;
color: inherit;
font: inherit;
text-decoration: initial;
2019-11-22 22:13:00 +01:00
.icon {
stroke: var(--color-menu-icon);
2019-06-17 22:32:38 +02:00
}
2019-11-22 22:13:00 +01:00
}
2019-06-17 22:32:38 +02:00
2019-11-22 22:13:00 +01:00
[data-reach-menu-item][data-selected] {
background-color: var(--color-menu-background--active);
box-shadow: none;
2019-06-17 22:32:38 +02:00
2019-11-22 22:13:00 +01:00
.icon {
stroke: var(--color-menu-icon-active);
2019-06-17 22:32:38 +02:00
}
}
2019-08-21 22:54:44 +02:00
.menu__list--header {
2019-11-22 22:13:00 +01:00
margin-top: 19px;
2019-08-21 22:54:44 +02:00
margin-left: calc(var(--spacing-medium) * -1);
2020-01-22 15:26:39 +01:00
box-shadow: var(--card-box-shadow);
2019-08-21 22:54:44 +02:00
animation: menu-animate-in var(--animation-duration) var(--animation-style);
2020-02-13 02:48:28 +01:00
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
2019-06-17 22:32:38 +02:00
}
.menu__link {
display: flex;
align-items: center;
padding: var(--spacing-medium);
2019-08-21 22:54:44 +02:00
padding-right: var(--spacing-large);
2019-06-17 22:32:38 +02:00
2019-08-27 16:43:42 +02:00
.icon {
2019-11-22 22:13:00 +01:00
stroke: var(--color-menu-icon);
2019-08-27 16:43:42 +02:00
margin-right: var(--spacing-small);
}
}
.menu__link-help {
@extend .menu__link;
color: var(--color-text-help);
font-size: var(--font-small);
padding-top: 0;
}