87 lines
1.7 KiB
SCSS
87 lines
1.7 KiB
SCSS
@import "variables";
|
|
@import "commons";
|
|
|
|
$selector-height: 30px;
|
|
|
|
.notifications {
|
|
height: calc(100%);
|
|
width: calc(100%);
|
|
position: relative;
|
|
|
|
&__selector {
|
|
position: relative;
|
|
height: $selector-height;
|
|
width: calc(100%);
|
|
background-color: $notification-column-selector-background;
|
|
|
|
&--wrapper {
|
|
position: absolute;
|
|
width: calc(50%);
|
|
display: inline-block;
|
|
|
|
&:nth-child(odd) {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
text-decoration: none;
|
|
display: block;
|
|
height: 100%;
|
|
height: $selector-height;
|
|
text-align: center;
|
|
padding-top: 3px;
|
|
color: $notification-column-selector-color;
|
|
|
|
&--selected {
|
|
color: $notification-column-selector-color-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__elements {
|
|
height: calc(100% - #{$selector-height});
|
|
width: calc(100%);
|
|
position: relative;
|
|
|
|
&__wrapper {
|
|
transition: all .15s;
|
|
position: absolute;
|
|
height: calc(100%);
|
|
width: calc(100%);
|
|
|
|
// right: 0;
|
|
// left: 0;
|
|
// bottom: 0;
|
|
|
|
z-index: 1;
|
|
opacity: 0;
|
|
|
|
overflow: auto;
|
|
outline: none;
|
|
|
|
&--selected {
|
|
z-index: 10;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
position: relative;
|
|
} |