lbry-desktop/ui/scss/component/_swipeable-drawer.scss

104 lines
1.8 KiB
SCSS
Raw Normal View History

2022-04-14 23:27:16 +02:00
.swipeable-drawer__header {
position: absolute;
visibility: visible;
right: 0;
left: 0;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: var(--mui-background);
border-top: 1px solid var(--color-border);
.button--close {
top: 2px !important;
right: 2px !important;
}
span,
svg {
color: var(--color-text);
}
}
.swipeable-drawer__puller {
width: 30px;
height: 6px;
border-radius: 3px;
position: absolute;
top: 8px;
left: calc(50% - 15px);
}
.swipeable-drawer__header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-s) var(--spacing-xxs);
padding-bottom: var(--spacing-xxxs);
//padding-top:var(--spacing-xxxs);
font-size: var(--font-small);
}
.swipeable-drawer__header--with-subtitle {
padding: var(--spacing-xxs);
padding-top: 4px;
}
.swipeable-drawer__menu {
display: flex;
align-items: center;
svg {
margin-left: var(--spacing-xxs);
}
}
.swipeable-drawer__title-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
.swipeable-drawer__title {
font-size: var(--font-xsmall);
}
.swipeable-drawer__subtitle {
font-size: var(--font-xxsmall);
color: var(--color-text-subtitle);
}
}
.swipeable-drawer__header-actions {
display: flex;
button {
padding: 0.3rem;
}
button:not(:last-child) {
margin-right: var(--spacing-xxs);
}
.menu__button {
opacity: 1;
}
}
.swipeable-drawer__expand-button {
width: 100%;
margin: var(--spacing-xxs) 0;
border-radius: 0 !important;
}
.swipeable-drawer__expand {
border-top: 1px solid var(--color-border);
position: fixed;
background-color: var(--color-card-background);
visibility: visible;
right: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
}