61 lines
1.1 KiB
SCSS
61 lines
1.1 KiB
SCSS
$header-height: 52px;
|
|
$navbar-width: 250px;
|
|
|
|
.Layout {
|
|
&__header {
|
|
box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),
|
|
0 0.9375rem 1.40625rem rgba(4,9,20,0.03),
|
|
0 0.25rem 0.53125rem rgba(4,9,20,0.05),
|
|
0 0.125rem 0.1875rem rgba(4,9,20,0.03);
|
|
z-index: 31;
|
|
}
|
|
|
|
&__container {
|
|
margin-top: $header-height;
|
|
margin-left: $navbar-width;
|
|
}
|
|
|
|
&__navbar {
|
|
width: $navbar-width;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 7px 0 60px rgba(0,0,0,0.05);
|
|
position: fixed;
|
|
top: $header-height;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 20px 20px;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.react-datepicker-wrapper {
|
|
display: flex !important;
|
|
}
|
|
|
|
.react-datepicker-popper {
|
|
z-index: 30 !important;
|
|
}
|
|
|
|
.topic-message-button {
|
|
&::after {
|
|
content: attr(data-title);
|
|
position: absolute;
|
|
top: -140%;
|
|
z-index: 1;
|
|
background: #F5F5F5;
|
|
color: rgb(89, 89, 89);
|
|
border-radius: 5px;
|
|
font-size: 15px;
|
|
padding: 5px 10px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: .2s opacity;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
&:hover::after {
|
|
opacity: 1;
|
|
transition-delay: .5s;
|
|
}
|
|
}
|