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

117 lines
2 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;
background-color: $lbry-white;
border: 1px solid $lbry-gray-1;
border-top: none;
[data-mode='dark'] & {
2019-07-11 22:43:42 +02:00
background-color: var(--dm-color-05);
2019-06-17 22:32:38 +02:00
color: $lbry-white;
2019-08-21 22:54:44 +02:00
border-color: var(--dm-color-03);
2019-06-17 22:32:38 +02:00
}
}
[data-reach-menu-item] {
display: block;
2019-07-01 03:52:38 +02:00
z-index: 2;
2019-06-17 22:32:38 +02:00
}
[data-reach-menu-item] {
cursor: pointer;
display: block;
color: inherit;
font: inherit;
text-decoration: initial;
}
[data-reach-menu-item][data-selected] {
background: lighten($lbry-teal-5, 55%);
color: darken($lbry-teal-5, 15%);
outline: none;
&:active {
background-color: $lbry-teal-4;
color: $lbry-white;
.icon {
stroke: $lbry-white;
}
}
[data-mode='dark'] & {
background-color: $lbry-teal-5;
color: $lbry-white;
&:hover,
&:focus {
.icon {
stroke: $lbry-white;
}
}
}
}
2019-08-21 22:54:44 +02:00
.menu__list--header {
margin-top: -1px;
margin-left: calc(var(--spacing-medium) * -1);
box-shadow: var(--card-box-shadow--attached) $lbry-gray-1;
animation: menu-animate-in var(--animation-duration) var(--animation-style);
2019-06-17 22:32:38 +02:00
2019-08-21 22:54:44 +02:00
[data-mode='dark'] & {
box-shadow: var(--card-box-shadow) $lbry-black;
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
}
.menu__title,
.menu__link {
2019-06-19 07:05:43 +02:00
color: lighten($lbry-black, 20%);
2019-09-26 18:07:11 +02:00
color: $lbry-gray-5;
2019-06-17 22:32:38 +02:00
.icon {
stroke: $lbry-gray-5;
}
[data-mode='dark'] & {
color: $lbry-gray-2;
.icon {
stroke: $lbry-gray-2;
}
}
2019-06-17 22:32:38 +02:00
}
2019-08-27 16:43:42 +02:00
.menu__link {
.icon {
margin-right: var(--spacing-small);
2019-09-26 18:07:11 +02:00
stroke: $lbry-gray-4;
2019-08-27 16:43:42 +02:00
}
}
.menu__title {
span {
margin-left: var(--spacing-miniscule);
}
}