This repository has been archived on 2026-07-19. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
espocrm-base/frontend/less/espo-vertical/layout.less
T
2018-11-12 16:51:23 +02:00

475 lines
11 KiB
Plaintext

@media (min-width: @grid-float-breakpoint) {
#header .navbar-collapse {
.navbar & {
padding-left: 0;
padding-right: 0;
}
}
}
@media screen and (min-width: @screen-sm-min) {
body,
body.minimized.side-menu-opened {
#header {
width: @navbar-width;
}
#navbar .navbar {
.nav > li.more > .dropdown-menu {
top: 0;
left: @navbar-width;
padding-top: 0;
padding-bottom: 0;
position: fixed;
border-left-width: 0;
border-top-width: 0;
overflow-y: hidden;
}
ul.tabs {
width: @navbar-width;
margin-left: -8px;
overflow-y: hidden;
}
a.minimizer {
color: @navbar-inverse-link-color;
text-decoration: none;
margin-top: 5px;
display: inline-block;
margin-left: 4px;
}
a.minimizer > span.left {
display: inline;
}
a.minimizer > span.right {
display: none;
}
a.side-menu-button {
width: 38px;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
display: none;
> span {
width: 16px;
text-align: center;
}
}
.side-menu-backdrop {
z-index: 1200;
position: fixed;
bottom: 20px;
top: 0;
left: 0;
height: @tob-bar-height;
width: 100%;
margin-left: @navbar-width;
}
}
#navbar {
.navbar {
top: 0;
border-width: 0 0 0 0;
position: fixed;
z-index: @zindex-navbar-fixed;
width: @navbar-width;
margin-bottom: 0px;
height: 100%;
}
.navbar-brand img {
max-width: @navbar-width - 38px;
height: 35px;
}
a.navbar-brand {
max-width: @navbar-width - 38px;
height: 35px;
float: right;
}
.navbar-header {
width: @navbar-width;
}
.navbar-header > a.minimizer {
width: 30px;
height: 30px;
float: right;
}
.navbar-right {
position: fixed;
bottom: 20px;
position: fixed;
top: 0;
left: 0;
height: @tob-bar-height;
width: 100%;
background-color: @top-navbar-bg-color;
margin-left: @navbar-width;
padding-right: @navbar-width;
.global-search-container {
position: fixed;
top: 0;
right: 102px;
}
.global-search-container a.global-searcy-button {
padding: 5px 10px;
color: @gray-light;
}
.quick-create-container {
position: fixed;
top: 0;
right: 34px;
width: 34px;
}
.menu-container {
position: fixed;
top: 0;
right: 0;
width: 34px;
}
> li > a {
color: @gray-light;
padding: 5px 10px;
}
.notifications-badge-container {
position: fixed;
top: 0;
right: 68px;
width: 34px;
}
}
ul.tabs {
li {
float: none;
}
li > a {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
}
li.tab > a {
padding-left: 10px - @navbar-color-border-width;
}
}
.navbar-form {
margin-top: 0px;
margin-bottom: 0px;
}
}
}
body.minimized.side-menu-opened {
#navbar > .navbar {
z-index: 2150 !important;
a.minimizer > span.left {
display: none;
}
a.minimizer > span.right {
display: inline;
}
ul.tabs {
> li > a > span.full-label {
display: inline;
}
}
.navbar-brand img {
display: inline;
}
a.side-menu-button {
display: inline-block;
}
.dropdown-menu {
z-index: 2000;
}
}
}
}
@media screen and (max-width: (@screen-sm-min - 1px)) {
#navbar {
a.minimizer {
display: none;
}
.navbar ul.nav > li.global-search-container {
display: block;
}
.side-menu-button {
display: none;
}
}
#global-search-input {
width: 100% !important;
}
}
body {
#navbar {
ul.tabs {
> li > a > span.full-label {
position: absolute;
margin-left: 28px;
}
> li.more > ul > li > a > span.full-label {
padding-left: 28px;
position: static;
}
> li.more > ul > li > a > span.short-label, {
position: absolute;
}
> li > a > span.short-label > .short-label-text {
font-weight: bold;
visibility: hidden;
}
> li span.short-label > span {
display: inline-block;
width: 16px;
text-align: center;
}
> li > a > span.full-label {
display: inline;
text-overflow: ellipsis;
max-width: ~"calc(100% - 50px)";
overflow: hidden;
white-space: nowrap;
}
}
.navbar-header {
> a.minimizer span {
margin-top: 7px;
margin-left: 8px;
}
}
.navbar-header > a.navbar-brand {
&,
&:active {
color: @navbar-inverse-link-color;
}
}
.more-icon {
display: inline;
}
.navbar li.tab > a {
border-left-width: @navbar-color-border-width;
border-left-style: solid;
border-color: transparent;
> span.full-label {
overflow-wrap: break-word;
word-wrap: break-word;
}
}
}
}
@media screen and (min-width: @screen-sm-min) {
body.minimized {
#header {
width: @navbar-minimized-width;
}
#navbar {
.nav > li.more > ul.dropdown-menu {
left: @navbar-minimized-width;
}
.navbar-brand {
img {
display: none;
}
}
a.side-menu-button {
display: inline-block;
}
.navbar-header {
width: @navbar-minimized-width;
height: 35px;
}
a.minimizer > span.left {
display: none;
}
a.minimizer > span.right {
display: inline;
}
.navbar {
width: @navbar-minimized-width;
}
ul.tabs {
width: @navbar-minimized-width;
> li > a {
padding-left: 10px;
}
> li.tab > a {
padding-left: 10px - @navbar-color-border-width;
}
> li > a > span.short-label {
display: inline;
}
> li > a > span.short-label > .color-icon {
display: none;
}
> li > a > span.full-label {
display: none;
}
> li > a > span.short-label > .short-label-text {
position: relative;
left: -1px;
visibility: visible;
}
}
.navbar-right {
margin-left: @navbar-minimized-width;
padding-right: @navbar-minimized-width;
}
}
#content {
margin-left: @navbar-minimized-width;
}
#footer {
margin-left: @navbar-minimized-width;
}
> .side-menu-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2140;
height: 100%;
margin-left: @navbar-width;
}
}
body > .content {
margin-left: @navbar-width;
}
body {
padding-top: @tob-bar-height;
}
html, body {
height: 100%;
}
body > footer {
margin-top: -26x;
}
body > .content {
height: auto;
min-height: 100%;
padding-bottom: 42px;
}
body > footer {
clear: both;
position: relative;
height: 26px;
margin-top: -28px;
}
body > footer {
margin-left: @navbar-width;
}
#global-search-input {
height: @tob-bar-height !important;
margin-top: 0 !important;
}
#login {
margin-left: -@navbar-width;
}
}
@media (min-width: @screen-lg-min) {
.container {
max-width: @container-max-width;
}
}
body .stick-sub.button-container {
width: calc(~"100% - "@navbar-width);
}
body.minimized .stick-sub.button-container {
width: calc(~"100% - "@navbar-minimized-width);
}
body .list-buttons-container .sticked-bar {
width: calc(~"100% - "@navbar-width);
left: @navbar-width;
top: @tob-bar-height;
padding-left: @container-padding;
}
body.minimized .list-buttons-container .sticked-bar {
width: calc(~"100% - "@navbar-minimized-width);
left: @navbar-minimized-width;
}
@media screen and (max-width: (@screen-sm-min - 1px)) {
body .list-buttons-container .sticked-bar,
body.minimized .list-buttons-container .sticked-bar {
width: 100%;
top: 0;
left: 0;
}
}