seitime-frappe/frappe/public/less/sidebar.less

487 lines
No EOL
6.7 KiB
Text

@import "variables.less";
@import "mixins.less";
html {
min-height: 100%;
}
body {
height: 100%;
// The html and body elements cannot have any padding or margin.
margin: 0px;
padding: 0px !important;
}
html,
body {
overflow-x: hidden; //Prevent scroll on narrow devices
}
.hide-form-sidebar {
.form-sidebar {
display: none !important;
}
}
.sidebar-padding {
padding: 12px 14px;
}
body[data-route=""] .main-menu,
body[data-route="desk"] .main-menu {
.desk-sidebar {
display: block !important;
}
.hide-form-sidebar;
}
body[data-route^="List"] .main-menu {
.list-sidebar {
display: block !important;
}
.hide-form-sidebar;
}
body[data-route^="Module"] .main-menu {
.module-sidebar {
display: block !important;
}
.hide-form-sidebar;
}
.layout-side-section {
font-size: @text-medium;
padding-right: 0px;
> .divider {
display: none !important;
}
.sidebar-menu > li > a {
display: inline-block;
}
.sidebar-menu {
padding: 15px 0px 5px 0px;
margin: 0px;
}
}
.layout-side-section .sidebar-menu > li > a& {
&:hover,
&:focus,
&:active {
.underline-hover;
}
}
.sidebar-menu {
.badge {
position: absolute;
font-weight: normal;
right: 0px;
top: 0px;
padding-bottom: 4px;
}
.octicon {
font-size: 12px;
}
h6, .h6 {
margin-top: 0px;
margin-bottom: 7px;
}
> li {
position: relative;
}
.list-link {
margin: 7px 0px;
}
}
// form sidebar
.form-sidebar {
.form-tags {
.tag-area {
margin-top: -3px;
margin-left: -4px;
}
input {
color: @text-color !important;
font-style: italic;
}
.tagit-new {
clear: both;
margin-top: 2px;
margin-bottom: -1px;
}
}
a.close {
position: absolute;
right: 5px;
}
.form-shared, .form-viewers {
.share-doc-btn {
cursor: pointer;
}
.octicon {
position: relative;
left: 4.5px;
}
.avatar {
margin-top: 5px;
}
.shared-with-everyone {
border-style: solid;
border-color: @btn-bg;
background-color: @btn-bg;
.octicon {
color: @text-color !important;
}
}
}
.liked-by {
margin-left: -4px;
}
.liked-by .octicon-heart {
font-size: 16px;
cursor: pointer;
}
.sidebar-image-section {
cursor: pointer;
.sidebar-image {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 6px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.standard-image {
font-size: 72px;
border-radius: 6px;
}
.sidebar-image-wrapper {
position: relative;
}
.sidebar-image, .sidebar-standard-image {
transition: opacity 0.3s;
}
.sidebar-image-wrapper:hover {
.sidebar-image, .sidebar-standard-image {
opacity: 0.5;
}
.sidebar-image-actions {
display: block;
}
}
.sidebar-image-actions {
display: none;
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
text-align: center;
z-index: 1;
}
}
}
.form-sidebar .form-shared .share-doc-btn, .btn-add-review {
&:hover,
&:focus,
&:active {
background-color: @btn-bg;
.octicon-plus {
color: @text-color !important;
}
}
}
.sidebar-left .form-sidebar {
.form-tags,
.assignment-row,
.form-shared,
.liked-by,
.modified-by,
.created-by,
.tags-label,
.shared-with-label,
.form-viewers,
.viewers-label {
.sidebar-padding;
}
.assigned-to-label,
.attachments-label,
.tags-label,
.shared-with-label,
.viewers-label {
.sidebar-padding;
margin-bottom: 0px;
}
.assigned-to-label,
.tags-label,
.attachments-label.has-attachments,
.shared-with-label,
.viewers-label {
padding-bottom: 0px;
}
a.close {
right: 5px;
}
.assignment-row a.close {
margin-top: -12px;
}
.attachment-row {
margin-bottom: 4px;
}
}
.layout-side-section .form-sidebar {
.modified-by,
.pageview-count {
margin-bottom: 15px;
}
}
.layout-side-section {
.overlay-sidebar {
@media (max-width: 991px) {
margin-top: 0 !important;
position: fixed;
background: white;
top: 0;
left: 0;
transform: translateX(-110%);
z-index: 9999;
box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
height: 100%;
width: 40%;
display: block !important;
transition: transform 200ms ease-in-out;
&.opened {
transform: translateX(0);
overflow-y: auto;
}
.divider {
height: 1px;
background-color: #d8dfe5;
opacity: 0.7;
}
li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
padding: 10px 15px;
}
.modified-by, .created-by {
margin: 0;
}
.badge {
top: 9px;
right: 15px;
}
.reports-dropdown {
margin-top: 10px;
margin-bottom: -10px;
li:not(.divider) {
padding: 12.5px 0 !important;
}
li.divider {
height: 0;
}
}
.sidebar-menu {
padding: 2px 0px 5px 0px;
}
}
@media (max-width: 767px) {
width: 70%;
}
}
div.close-sidebar {
position: fixed;
top: 0;
right: 0;
opacity: 0.3;
background: #000;
z-index: 1041;
height: 100%;
width: 100%;
}
.sidebar-menu {
@media (max-width: 991px) {
margin: 0;
}
}
.module-sidebar-nav {
@media (max-width: 991px) {
padding-left: 0;
padding-right: 0;
.module-link {
padding: 15px 15px 15px 25px;
}
}
}
}
.overlay-sidebar {
ul.dropdown-menu {
li {
padding:0 !important;
}
.badge {
top: 0;
right: 0;
}
}
}
.list-sidebar {
.list-sidebar-label {
color: @text-muted;
text-transform: uppercase;
margin-bottom: 0;
font-size: @text-small;
}
.group-by-count {
position:relative
}
.group-by-dropdown, .list-stats-dropdown {
max-height: 300px;
overflow-y: auto;
max-width: 250px;
z-index: 100;
}
.dropdown-search {
padding: 8px;
}
.stat-no-records {
margin: 5px 10px;
}
}
.filters-search {
margin-bottom: 10px;
}
// module sidebar
.layout-side-section .module-sidebar-nav {
margin-top: 15px;
}
.assignment-row {
margin-bottom: 5px;
}
.review-list {
display: flex;
flex-wrap: wrap;
.btn-add-review {
cursor: pointer;
.octicon {
position: relative;
left: 4.5px;
}
}
.review-pill {
width: 50px;
border: 1px solid @border-color;
border-radius: 4px;
display: flex;
margin: 0 10px 10px 0;
.avatar {
padding: 0px;
margin: 0px;
.avatar-frame {
border-radius: 3px 0 0 3px;
}
}
.standard-image {
border-left: 0;
}
span:nth-child(2) {
flex-basis: 50%;
text-align: center;
align-self: center;
font-size: 9px;
}
cursor: pointer;
}
}
.review-popover {
max-width: 150px;
.popover-content {
padding: 0;
}
.subject {
border-bottom: 1px solid @border-color;
}
.subject, .body {
padding: 12px;
overflow-wrap: break-word;
}
}
@media screen and (min-width: @screen-md) {
.reports-dropdown {
max-height: 300px;
overflow-y: auto;
}
}