bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
2019-12-04 19:48:06 +00:00

96 lines
1.4 KiB
SCSS
Executable File

@import "../../stylesheets/variables/_all";
:root {
--mobile-nav-height: 5rem;
--mobile-margin-top: .25rem;
}
.navbar {
display: flex;
flex-direction: column;
height:var(--mobile-nav-height);
}
.top,
.bottom {
display: flex;
flex-direction: row;
}
.bottom {
@include mq($phone-landscape) {
margin-top: var(--mobile-margin-top);
}
}
.left,
.right,
.center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.right {
flex: 0;
}
.center {
width: 70%;
flex: 1;
}
.presentationTitle {
font-weight: 200;
color: var(--color-white);
font-size: var(--font-size-base);
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 30vw;
> [class^="icon-bbb-"] {
font-size: 75%;
}
}
.btnWithNotificationDot {
position: relative;
&:after {
content: '';
position: absolute;
border-radius: 50%;
width: 12px;
height: 12px;
bottom: var(--border-size);
right: 3px;
background-color: var(--color-danger);
border: var(--border-size) solid var(--color-gray-dark);
}
}
.btn {
margin: 0;
span {
border: none;
box-shadow: none;
}
&:hover,
&:focus {
span {
background-color: transparent !important;
color: var(--color-white) !important;
opacity: .75;
}
}
}
.btnSettings {
}