1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/notifications/index.scss
2022-11-17 12:53:51 -08:00

115 lines
2.0 KiB
SCSS

.notifications {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-background-default);
&__header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 65px 24px 15px 24px;
border-bottom: 1px solid var(--color-border-muted);
@include screen-sm-max {
padding: 10px 20px;
}
&__title-container {
display: flex;
flex-flow: row;
align-items: center;
flex: 0 0 auto;
&__title {
@include H3;
margin-left: 26px;
@include screen-sm-max {
@include H6;
margin-left: 16px;
font-weight: bold;
}
}
}
&_button {
width: auto;
@include screen-sm-max {
font-size: 0.75rem;
padding: 3.5px 1rem;
}
}
}
&__container {
display: flex;
overflow: auto;
flex-direction: column;
flex: 1 1 auto;
@include screen-sm-max {
height: 100%;
}
&__text {
@include H3;
color: var(--color-text-muted);
text-align: center;
@include screen-sm-max {
@include H6;
}
}
}
.empty {
justify-content: center;
align-items: center;
}
&__item {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--color-border-muted);
padding: 16px;
cursor: pointer;
&:hover {
background-color: var(--color-background-default-hover);
}
&__unread-dot {
content: ' ';
align-self: flex-start;
margin-top: 6px;
width: 8px;
height: 8px;
background-color: transparent;
border-radius: 50%;
}
.unread {
background-color: var(--color-primary-default);
}
&__details {
display: flex;
flex-direction: column;
margin-left: 12px;
&__infos {
color: var(--color-text-muted);
font-size: 12px;
margin-top: 6px;
}
}
}
}