c9b54845d9
The goal is to reduce usage on atlassian/aui. New components have been created to display the settings panel. Language selection will reach into i18n for state whereas moderator options will keep state in redux.
134 lines
2.6 KiB
SCSS
134 lines
2.6 KiB
SCSS
/**
|
|
* Toolbar side panel main container element.
|
|
*/
|
|
#sideToolbarContainer {
|
|
background-color: $sideToolbarContainerBg;
|
|
height: 100%;
|
|
left: $defaultToolbarSize;
|
|
max-width: $sidebarWidth;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 0;
|
|
z-index: $sideToolbarContainerZ;
|
|
|
|
/**
|
|
* Labels inside the side panel.
|
|
*/
|
|
label {
|
|
color: $baseLight;
|
|
}
|
|
|
|
/**
|
|
* Form elements and blocks.
|
|
*/
|
|
input,
|
|
a,
|
|
.sideToolbarBlock,
|
|
.form-control {
|
|
display: block;
|
|
margin-top: 15px;
|
|
margin-left: 10%;
|
|
width: 80%;
|
|
}
|
|
|
|
/**
|
|
* Specify styling of elements inside a block.
|
|
*/
|
|
.sideToolbarBlock {
|
|
input, a {
|
|
margin-left: 0;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Inner container, for example contact list, settings or profile.
|
|
*/
|
|
.sideToolbarContainer__inner {
|
|
display: none;
|
|
height: 100%;
|
|
width: $sidebarWidth;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
color: #FFF;
|
|
|
|
.input-control {
|
|
border: 0;
|
|
}
|
|
|
|
/**
|
|
* Titles and subtitles of inner containers.
|
|
*/
|
|
div.title, div.subTitle {
|
|
margin: 24px 0 11px;
|
|
}
|
|
|
|
/**
|
|
* Main title size.
|
|
*/
|
|
div.title {
|
|
color: $toolbarTitleColor;
|
|
text-align: center;
|
|
font-size: $toolbarTitleFontSize;
|
|
}
|
|
|
|
/**
|
|
* First element after a title.
|
|
*/
|
|
.first {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
.settings-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 10%;
|
|
padding-right: 10%;
|
|
|
|
.moderator-checkbox {
|
|
display: inline-block;
|
|
margin: 0 5px 0;
|
|
width: auto;
|
|
}
|
|
|
|
.moderator-option {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.subTitle {
|
|
color: $defaultSideBarFontColor;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Profile
|
|
*/
|
|
.auth_container {
|
|
ul {
|
|
padding: 0;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
|
|
a.authButton {
|
|
width: 160px;
|
|
margin: 10px 20px;
|
|
padding: 3px 29px;
|
|
box-sizing: border-box;
|
|
background-color: #06a5df;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: $defaultColor;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|