jiti-meet/css/_side_toolbar_container.scss

106 lines
2.1 KiB
SCSS
Raw Normal View History

2016-09-11 21:54:32 +00:00
/**
* Toolbar side panel main container element.
*/
#sideToolbarContainer {
background-color: $newToolbarBackgroundColor;
/**
* Make the sidebar flush with the top of the toolbar. Take the size of
* the toolbar and subtract from 100%.
*/
height: calc(100% - #{$newToolbarSizeWithPadding});
left: 0;
max-width: $sidebarWidth;
2016-09-11 21:54:32 +00:00
overflow: hidden;
position: absolute;
top: 0;
width: 0;
z-index: $sideToolbarContainerZ;
2016-09-11 21:54:32 +00:00
/**
* Labels inside the side panel.
*/
label {
2016-10-19 17:34:20 +00:00
color: $baseLight;
2016-09-11 21:54:32 +00:00
}
/**
* Form elements and blocks.
*/
input,
a,
.sideToolbarBlock,
.form-control {
2016-10-07 21:47:43 +00:00
display: block;
2016-09-11 21:54:32 +00:00
margin-top: 15px;
margin-left: 10%;
width: 80%;
}
/**
* Specify styling of elements inside a block.
*/
.sideToolbarBlock {
input, a {
2016-09-11 21:54:32 +00:00
margin-left: 0;
margin-top: 5px;
2016-09-11 21:54:32 +00:00
width: 100%;
}
}
/**
2018-04-10 03:16:43 +00:00
* Inner container, for example settings or profile.
2016-09-11 21:54:32 +00:00
*/
.sideToolbarContainer__inner {
display: none;
height: 100%;
width: $sidebarWidth;
position: absolute;
box-sizing: border-box;
2016-09-11 21:54:32 +00:00
color: #FFF;
2016-11-15 14:37:09 +00:00
.input-control {
border: 0;
}
2016-09-11 21:54:32 +00:00
/**
* Titles and subtitles of inner containers.
*/
div.title {
2016-11-10 16:48:34 +00:00
margin: 24px 0 11px;
2016-09-11 21:54:32 +00:00
}
/**
* Main title size.
*/
2016-09-20 07:59:12 +00:00
div.title {
2016-11-10 16:48:34 +00:00
color: $toolbarTitleColor;
text-align: center;
2016-10-19 17:34:20 +00:00
font-size: $toolbarTitleFontSize;
2016-09-11 21:54:32 +00:00
}
/**
* First element after a title.
*/
.first {
2016-09-20 07:59:12 +00:00
margin-top: 0 !important;
2016-09-11 21:54:32 +00:00
}
}
.side-toolbar-close {
background: gray;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 100%;
color: white;
cursor:pointer;
height: 10px;
line-height: 10px;
padding: 4px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;
width: 10px;
z-index: 1;
}
}