snapshot of https://github.com/espocrm/espocrm.git (master, 2026-09-18; blobs > 131072B omitted)
Some checks failed
Test / Test on PHP 8.3 (push) Failing after 5s
Test / Test on PHP 8.4 (push) Failing after 4s
Test / Test on PHP 8.5 (push) Failing after 3s
TypeScript static analysis / TypeScript check (push) Failing after 14s
Test Integration on MySQL / Test on PHP 8.3 (push) Failing after 2s
Test Integration on MySQL / Test on PHP 8.5 (push) Failing after 0s
Test Integration on PostgreSQL / Test on PHP 8.4 fix (push) Failing after 1s
Test Integration on PostgreSQL / Test on PHP 8.4 master (push) Failing after 1s
Some checks failed
Test / Test on PHP 8.3 (push) Failing after 5s
Test / Test on PHP 8.4 (push) Failing after 4s
Test / Test on PHP 8.5 (push) Failing after 3s
TypeScript static analysis / TypeScript check (push) Failing after 14s
Test Integration on MySQL / Test on PHP 8.3 (push) Failing after 2s
Test Integration on MySQL / Test on PHP 8.5 (push) Failing after 0s
Test Integration on PostgreSQL / Test on PHP 8.4 fix (push) Failing after 1s
Test Integration on PostgreSQL / Test on PHP 8.4 master (push) Failing after 1s
This commit is contained in:
upstream-mirror
71
frontend/less/espo/elements/alert.less
Normal file
71
frontend/less/espo/elements/alert.less
Normal file
@@ -0,0 +1,71 @@
|
||||
body .alert {
|
||||
padding: var(--10px) var(--15px);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.message {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
body > .alert {
|
||||
padding: var(--5px) var(--18px);
|
||||
min-height: var(--30px);
|
||||
max-width: var(--400px);
|
||||
height: auto;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
box-shadow: var(--dropdown-box-shadow);
|
||||
|
||||
&.alert-closable {
|
||||
.message {
|
||||
width: calc(100% - var(--16px));
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.close-container {
|
||||
width: var(--16px);
|
||||
height: var(--16px);
|
||||
float: right;
|
||||
|
||||
.close {
|
||||
right: var(--minus-11px);
|
||||
top: var(--minus-1px);
|
||||
position: relative;
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
float: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> span {
|
||||
line-height: var(--16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
.alert-variant-espo(var(--state-success-bg); var(--state-success-border); var(--state-success-text));
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
.alert-variant-espo(var(--state-info-bg); var(--state-info-border); var(--state-info-text));
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
.alert-variant-espo(var(--state-warning-bg); var(--state-warning-border); var(--state-warning-text));
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
.alert-variant-espo(var(--state-danger-bg); var(--state-danger-border); var(--state-danger-text));
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
.alert-variant-espo(var(--state-primary-bg); var(--state-primary-border); var(--state-primary-text));
|
||||
}
|
||||
21
frontend/less/espo/elements/animation.less
Normal file
21
frontend/less/espo/elements/animation.less
Normal file
@@ -0,0 +1,21 @@
|
||||
.animation-spin-fast {
|
||||
animation: fa-spin 0.5s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes animation-spin-fast {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.fa-spin {
|
||||
animation-name: fa-spin;
|
||||
animation-delay: 0s;
|
||||
animation-direction: normal;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
546
frontend/less/espo/elements/buttons.less
Normal file
546
frontend/less/espo/elements/buttons.less
Normal file
@@ -0,0 +1,546 @@
|
||||
.btn {
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&.radius-right {
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
&.radius-left {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-bottom-left-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
&.margin-right {
|
||||
margin-right: var(--padding-base-horizontal);
|
||||
}
|
||||
|
||||
&.margin-left {
|
||||
margin-left: var(--padding-base-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
+ .btn {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-bottom-left-radius: var(--border-radius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&:has(+ .btn-text) {
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: var(--input-height-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: var(--input-height-large);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
height: var(--input-height-small);
|
||||
}
|
||||
|
||||
.btn.btn-link {
|
||||
height: auto;
|
||||
|
||||
&:focus {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
a.btn {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.btn.btn-default, .btn.btn-link {
|
||||
> .caret {
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.input-group-btn > {
|
||||
.btn {
|
||||
height: var(--input-height-base);
|
||||
}
|
||||
}
|
||||
|
||||
&.input-group-sm {
|
||||
.input-group-btn > {
|
||||
.btn {
|
||||
height: var(--input-height-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.input-group-lg {
|
||||
.input-group-btn > {
|
||||
.btn {
|
||||
height: var(--input-height-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn .btn.btn-sm {
|
||||
height: var(--input-height-small);
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(.btn-link):not(.btn-text) {
|
||||
&:active:hover {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
box-shadow: var(--btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.disabled {
|
||||
&:active:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: var(--btn-icon-width);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.fa, .fas {
|
||||
position: relative;
|
||||
width: var(--16px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm {
|
||||
.fa-sm {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm {
|
||||
width: var(--btn-icon-width-small);
|
||||
|
||||
.fa, .fas {
|
||||
font-size: var(--12px);
|
||||
width: var(--12px);
|
||||
line-height: var(--18px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-xs-wide {
|
||||
min-width: var(--btn-xs-wide-width);
|
||||
}
|
||||
|
||||
.btn.btn-s-wide {
|
||||
min-width: var(--btn-s-wide-width);
|
||||
}
|
||||
|
||||
.btn.btn-wide {
|
||||
min-width: var(--btn-wide-width);
|
||||
}
|
||||
|
||||
.btn.btn-x-wide {
|
||||
min-width: var(--btn-x-wide-width);
|
||||
}
|
||||
|
||||
.btn.btn-xx-wide {
|
||||
min-width: var(--btn-xx-wide-width);
|
||||
}
|
||||
|
||||
.btn.btn-icon-wide {
|
||||
width: var(--54px);
|
||||
}
|
||||
|
||||
.btn.btn-icon-x-wide {
|
||||
width: var(--76px);
|
||||
}
|
||||
|
||||
.btn.btn-icon-xx-wide {
|
||||
width: var(--100px);
|
||||
}
|
||||
|
||||
.btn.btn-full-wide {
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.btn-default.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
> .fa,
|
||||
> .far,
|
||||
> .fas {
|
||||
color: var(--btn-default-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default > .fa,
|
||||
.btn-default > .far,
|
||||
.btn-default > .fas {
|
||||
color: @gray-soft;
|
||||
}
|
||||
|
||||
.btn-default > .fa.text-muted,
|
||||
.btn-default > .far.text-muted,
|
||||
.btn-default > .fas.text-muted {
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.btn-default,
|
||||
.btn-text {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
> .fas,
|
||||
> .far {
|
||||
&.text-success {
|
||||
color: var(--state-success-text);
|
||||
}
|
||||
&.text-danger {
|
||||
color: var(--state-danger-text);
|
||||
}
|
||||
&.text-warning {
|
||||
color: var(--state-warning-text);
|
||||
}
|
||||
&.text-info {
|
||||
color: var(--state-info-text);
|
||||
}
|
||||
&.text-primary {
|
||||
color: var(--state-primary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default.disabled > .fa,
|
||||
.btn-default.disabled > .far,
|
||||
.btn-default.disabled > .fas {
|
||||
color: @gray-light;
|
||||
}
|
||||
|
||||
.btn-group.open,
|
||||
.open > {
|
||||
.btn.dropdown-toggle:not(.btn-text):not(.btn-link) {
|
||||
box-shadow: var(--btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn-text {
|
||||
&.active {
|
||||
border-bottom-color: transparent;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: var(--minus-2px);
|
||||
right: calc(50%);
|
||||
width: calc(100%);
|
||||
content: "";
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(50%, -50%);
|
||||
background-color: var(--gray-light);
|
||||
height: var(--1px);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(.btn-icon) {
|
||||
> .fas,
|
||||
> .far {
|
||||
&:first-child + span {
|
||||
padding-left: var(--2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
color: var(--btn-text-color);
|
||||
|
||||
&.btn-default {
|
||||
color: var(--btn-text-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:hover:active,
|
||||
&:focus:active {
|
||||
background-color: transparent;
|
||||
color: var(--btn-text-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.btn-success,
|
||||
&.text-success {
|
||||
color: var(--state-success-text);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:hover:active,
|
||||
&:focus:active {
|
||||
background-color: transparent;
|
||||
color: var(--state-success-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.btn-danger,
|
||||
&.text-danger {
|
||||
color: var(--state-danger-text);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:hover:active,
|
||||
&:focus:active {
|
||||
background-color: transparent;
|
||||
color: var(--state-danger-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.btn-warning,
|
||||
&.text-warning {
|
||||
color: var(--state-warning-text);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:hover:active,
|
||||
&:focus:active {
|
||||
background-color: transparent;
|
||||
color: var(--state-warning-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.btn-info,
|
||||
&.text-ingo {
|
||||
color: var(--state-info-text);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:hover:active,
|
||||
&:focus:active {
|
||||
background-color: transparent;
|
||||
color: var(--state-info-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
}
|
||||
|
||||
.far,
|
||||
.fas {
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:hover,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--btn-text-color);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.dropdown-toggle[aria-expanded="true"],
|
||||
&:hover {
|
||||
.far,
|
||||
.fas {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @gray-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
color: @gray-light;
|
||||
.far,
|
||||
.fas {
|
||||
color: @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: var(--1px) solid @gray-light;
|
||||
}
|
||||
|
||||
&.btn-text-hoverable {
|
||||
&:hover,
|
||||
&:focus:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--btn-text-color)
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus:hover {
|
||||
color: var(--btn-text-color)
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-link, .btn-default, .btn-text {
|
||||
.caret {
|
||||
border-top-color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.caret {
|
||||
border-top-color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.btn-link, .btn-default, .btn-text {
|
||||
.caret {
|
||||
border-top-color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.button-variant-espo(
|
||||
var(--btn-default-color);
|
||||
var(--btn-default-bg);
|
||||
var(--btn-default-border);
|
||||
var(--btn-default-hover-bg);
|
||||
var(--btn-default-active-bg);
|
||||
var(--btn-default-hover-border);
|
||||
var(--btn-default-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.button-variant-espo(
|
||||
var(--btn-primary-color);
|
||||
var(--btn-primary-bg);
|
||||
var(--btn-primary-border);
|
||||
var(--btn-primary-hover-bg);
|
||||
var(--btn-primary-active-bg);
|
||||
var(--btn-primary-hover-border);
|
||||
var(--btn-primary-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.button-variant-espo(
|
||||
var(--btn-success-color);
|
||||
var(--btn-success-bg);
|
||||
var(--btn-success-border);
|
||||
var(--btn-success-hover-bg);
|
||||
var(--btn-success-active-bg);
|
||||
var(--btn-success-hover-border);
|
||||
var(--btn-success-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
.button-variant-espo(
|
||||
var(--btn-warning-color);
|
||||
var(--btn-warning-bg);
|
||||
var(--btn-warning-border);
|
||||
var(--btn-warning-hover-bg);
|
||||
var(--btn-warning-active-bg);
|
||||
var(--btn-warning-hover-border);
|
||||
var(--btn-warning-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
.button-variant-espo(
|
||||
var(--btn-danger-color);
|
||||
var(--btn-danger-bg);
|
||||
var(--btn-danger-border);
|
||||
var(--btn-danger-hover-bg);
|
||||
var(--btn-danger-active-bg);
|
||||
var(--btn-danger-hover-border);
|
||||
var(--btn-danger-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
.button-variant-espo(
|
||||
var(--btn-info-color);
|
||||
var(--btn-info-bg);
|
||||
var(--btn-info-border);
|
||||
var(--btn-info-hover-bg);
|
||||
var(--btn-info-active-bg);
|
||||
var(--btn-info-hover-border);
|
||||
var(--btn-info-active-border)
|
||||
);
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-default,
|
||||
&.btn-text {
|
||||
&.text-success {
|
||||
color: var(--state-success-text);
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
color: var(--state-danger-text);
|
||||
}
|
||||
|
||||
&.text-warning {
|
||||
color: var(--state-warning-text);
|
||||
}
|
||||
|
||||
&.text-primary {
|
||||
color: var(--state-primary-text);
|
||||
}
|
||||
|
||||
&.text-info {
|
||||
color: var(--state-info-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
379
frontend/less/espo/elements/dropdown.less
Normal file
379
frontend/less/espo/elements/dropdown.less
Normal file
@@ -0,0 +1,379 @@
|
||||
|
||||
.autocomplete-suggestions {
|
||||
border: var(--dropdown-border-width) solid var(--dropdown-border);
|
||||
background-color: var(--dropdown-bg);
|
||||
color: var(--dropdown-link-color);
|
||||
cursor: default;
|
||||
overflow: auto;
|
||||
padding: var(--5px) 0;
|
||||
user-select: none;
|
||||
|
||||
min-width: calc(var(--50px) + var(--10px));
|
||||
|
||||
.autocomplete-suggestion.autocomplete-selected {
|
||||
background-color: var(--dropdown-link-hover-bg) !important;
|
||||
color: var(--dropdown-link-hover-color) !important;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.autocomplete-suggestion {
|
||||
padding: var(--4px) var(--10px);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu,
|
||||
.selectize-dropdown,
|
||||
.selectize-dropdown.form-control,
|
||||
.autocomplete-suggestions,
|
||||
.ui-timepicker-wrapper {
|
||||
.dropdown-border();
|
||||
}
|
||||
|
||||
// Separately intentionally as this one is not supported in FF.
|
||||
select.form-control::picker(select) {
|
||||
.dropdown-border();
|
||||
}
|
||||
|
||||
.popover {
|
||||
background-color: var(--dropdown-bg);
|
||||
|
||||
&.bottom > .arrow {
|
||||
border-bottom-color: var(--dropdown-border);
|
||||
}
|
||||
&.top > .arrow {
|
||||
border-top-color: var(--dropdown-border);
|
||||
}
|
||||
&.left > .arrow {
|
||||
border-left-color: var(--dropdown-border);
|
||||
}
|
||||
&.right > .arrow {
|
||||
border-right-color: var(--dropdown-border);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
ul.dropdown-menu > li.checkbox {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: var(--4px) 0 var(--4px) var(--14px);
|
||||
|
||||
.checkbox-text {
|
||||
padding-left: var(--2px);
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
|
||||
label {
|
||||
padding-left: var(--23px);
|
||||
|
||||
input[type="checkbox"].form-checkbox {
|
||||
margin-left: calc(var(--23px) * -1);
|
||||
|
||||
&.form-checkbox-small {
|
||||
margin-top: var(--3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
> li > a {
|
||||
padding-top: var(--4px);
|
||||
padding-bottom: var(--4px);
|
||||
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
line-height: var(--line-height-computed);
|
||||
|
||||
&.active {
|
||||
background-color: var(--dropdown-link-active-bg);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
> .check-icon + div {
|
||||
padding-right: var(--26px);
|
||||
}
|
||||
|
||||
span.fa-check {
|
||||
position: relative;
|
||||
top: var(--1px);
|
||||
|
||||
+ div {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
&:not(:has(.check-icon)) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
> li.checkbox:last-child {
|
||||
margin-bottom: var(--3px);
|
||||
}
|
||||
|
||||
> .dropdown-header {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.dropdown-menu-with-icons,
|
||||
&:has(> li:not(.hidden) > a span.item-icon) {
|
||||
> li {
|
||||
&:not(:has(.item-icon-grid)) {
|
||||
a {
|
||||
padding-left: var(--12px);
|
||||
}
|
||||
|
||||
.fas,
|
||||
.far,
|
||||
.glyphicon,
|
||||
.empty-icon {
|
||||
width: var(--16px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: var(--12px);
|
||||
}
|
||||
|
||||
.item-text {
|
||||
padding-left: var(--10px);
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> li:not(.hidden) > a span.item-icon) {
|
||||
> li {
|
||||
> a:not(:has(span.item-icon)):not(:has(span.item-icon)) {
|
||||
padding-left: var(--28px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
> li {
|
||||
a {
|
||||
.item-icon + .item-text {
|
||||
padding-left: var(--10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
.item-icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--34px), 1fr));
|
||||
|
||||
> a {
|
||||
padding: var(--4px) var(--4px);
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-link-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
> a {
|
||||
&,
|
||||
> div {
|
||||
> .reaction-icon {
|
||||
font-size: var(--16px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
&.btn-text {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.dropdown-toggle > span.caret.wide {
|
||||
margin-left: var(--2px);
|
||||
margin-right: var(--2px);
|
||||
}
|
||||
|
||||
/*.fix-position {
|
||||
.btn-group {
|
||||
position: unset;
|
||||
}
|
||||
}*/
|
||||
|
||||
.dropdown-menu {
|
||||
.quick-search-list-item {
|
||||
input {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
ul.dropdown-menu {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
> li.divider:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:not(.hidden) + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden + li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden + li.hidden + li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.textcomplete-dropdown {
|
||||
.textcomplete-item {
|
||||
> span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: var(--4px) var(--20px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
img.avatar {
|
||||
margin-right: var(--5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> span {
|
||||
background-color: var(--dropdown-link-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:has(> li:hover)) {
|
||||
.textcomplete-item {
|
||||
&.active {
|
||||
background-color: var(--gray-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1007
frontend/less/espo/elements/form.less
Normal file
1007
frontend/less/espo/elements/form.less
Normal file
File diff suppressed because it is too large
Load Diff
116
frontend/less/espo/elements/grid.less
Normal file
116
frontend/less/espo/elements/grid.less
Normal file
@@ -0,0 +1,116 @@
|
||||
.grid-auto-fill-xs,
|
||||
.grid-auto-fill-sm,
|
||||
.grid-auto-fill-md {
|
||||
margin-left: calc(var(--grid-gutter-width-half) * -1);
|
||||
margin-right: calc(var(--grid-gutter-width-half) * -1);
|
||||
&:extend(.clearfix all);
|
||||
> div {
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: var(--1px);
|
||||
padding-left: var(--grid-gutter-width-half);
|
||||
padding-right: var(--grid-gutter-width-half);
|
||||
}
|
||||
}
|
||||
|
||||
.grid-auto-fill-xs {
|
||||
> div {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.grid-auto-fill-sm {
|
||||
> div {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.grid-auto-fill-md {
|
||||
> div {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-sm-max) {
|
||||
.grid-auto-fill-xs {
|
||||
> div {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.grid-auto-fill-sm {
|
||||
> div {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
.grid-auto-fill-md {
|
||||
> div {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
.grid-auto-fill-xs {
|
||||
> div {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.grid-auto-fill-sm,
|
||||
.grid-auto-fill-md {
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.grid-auto-fill-xxs,
|
||||
.grid-auto-fill-xs,
|
||||
.grid-auto-fill-sm,
|
||||
.grid-auto-fill-md {
|
||||
display: grid;
|
||||
grid-column-gap: var(--grid-gutter-width);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
> div {
|
||||
width: unset !important;
|
||||
padding-left: unset !important;
|
||||
padding-right: unset !important;
|
||||
min-height: unset !important;
|
||||
position: unset !important;
|
||||
float: unset !important;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-auto-fill-xxs {
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-xxsmall), 1fr));
|
||||
}
|
||||
.grid-auto-fill-xs {
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-xsmall), 1fr));
|
||||
}
|
||||
.grid-auto-fill-sm {
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-small), 1fr));
|
||||
}
|
||||
.grid-auto-fill-md {
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-medium), 1fr));
|
||||
}
|
||||
|
||||
.grid-auto-fit-xxs,
|
||||
.grid-auto-fit-xs,
|
||||
.grid-auto-fit-sm {
|
||||
display: grid;
|
||||
grid-column-gap: var(--grid-gutter-width);
|
||||
}
|
||||
|
||||
.grid-auto-fit-xxs {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-xxsmall), 1fr));
|
||||
}
|
||||
.grid-auto-fit-xs {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-xsmall), 1fr));
|
||||
}
|
||||
.grid-auto-fit-sm {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-small), 1fr));
|
||||
}
|
||||
}
|
||||
51
frontend/less/espo/elements/icons.less
Normal file
51
frontend/less/espo/elements/icons.less
Normal file
@@ -0,0 +1,51 @@
|
||||
.fas,
|
||||
.far,
|
||||
.fa {
|
||||
font-size: var(--icon-size-base);
|
||||
line-height: var(--icon-line-height-base);
|
||||
}
|
||||
|
||||
.btn {
|
||||
.fas,
|
||||
.far {
|
||||
line-height: var(--line-height-computed);
|
||||
|
||||
&.fa-sm {
|
||||
line-height: var(--icon-line-height-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fas.fa-sm,
|
||||
.far.fa-sm,
|
||||
.btn-sm .fas,
|
||||
.btn-sm .far,
|
||||
.small .far,
|
||||
.small .fas,
|
||||
.fas.small,
|
||||
.far.small {
|
||||
font-size: var(--icon-size-small);
|
||||
line-height: var(--icon-line-height-small);
|
||||
}
|
||||
|
||||
.btn:not(.btn-sm),
|
||||
ul.nav.tabs > li > a {
|
||||
> .fas.fa-ellipsis-h {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
> .fa-ellipsis-h,
|
||||
> .fa-plus {
|
||||
font-size: var(--14px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-is-replied {
|
||||
transform: scaleX(-1);
|
||||
|
||||
&::before {
|
||||
content: "\f064";
|
||||
}
|
||||
}
|
||||
365
frontend/less/espo/elements/modal.less
Normal file
365
frontend/less/espo/elements/modal.less
Normal file
@@ -0,0 +1,365 @@
|
||||
.modal-container.overlaid .modal-content {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: @modal-header-bg;
|
||||
padding: var(--modal-title-padding) var(--panel-padding);
|
||||
border-bottom: 0 solid var(--modal-header-border-color);
|
||||
min-height: calc(var(--modal-title-line-height) + var(--modal-title-padding));
|
||||
|
||||
&.fixed-height {
|
||||
height: var(--43px);
|
||||
max-height: var(--43px);
|
||||
overflow: hidden;
|
||||
|
||||
.modal-title {
|
||||
width: calc(100% - var(--21px));
|
||||
> .modal-title-text {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.overlapped {
|
||||
> .modal-title-text {
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
right: var(--34px);
|
||||
background: linear-gradient(to right, transparent, @modal-header-bg);
|
||||
height: var(--30px);
|
||||
width: calc(var(--30px) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
> .modal-title-text {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: var(--31px);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--6px) * -1);
|
||||
max-height: var(--24px);
|
||||
> span {
|
||||
position: relative;
|
||||
max-height: var(--24px);
|
||||
height: var(--24px);
|
||||
display: inline-block;
|
||||
}
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
|
||||
&,
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
&,
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-button,
|
||||
.maximize-button,
|
||||
.minimize-button {
|
||||
position: relative;
|
||||
|
||||
padding-right: var(--17px);
|
||||
padding-left: var(--17px);
|
||||
float: right;
|
||||
|
||||
&,
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&,
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.maximize-button,
|
||||
.minimize-button {
|
||||
top: var(--2px);
|
||||
left: var(--minus-3px);
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
top: var(--3px);
|
||||
left: var(--minus-3px);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: var(--modal-title-padding);
|
||||
padding: var(--panel-padding) var(--panel-padding) var(--panel-padding);
|
||||
background-color: @modal-footer-bg;
|
||||
|
||||
&.shadowed:not(.has-sticked-bar) {
|
||||
box-shadow: var(--top-bar-box-shadow);
|
||||
}
|
||||
|
||||
> .main-btn-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
> .additional-btn-group {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.in {
|
||||
background-color: var(--modal-backdrop-bg);
|
||||
backdrop-filter: var(--modal-backdrop-filter);
|
||||
opacity: 1;
|
||||
|
||||
&.backdrop-confirm {
|
||||
z-index: 1051;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog > .modal-content {
|
||||
background-clip: border-box;
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
box-shadow: var(--modal-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: 0;
|
||||
padding-top: var(--modal-title-padding);
|
||||
padding-bottom: var(--modal-title-padding);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-top: var(--8px);
|
||||
padding-bottom: var(--8px);
|
||||
}
|
||||
|
||||
.modal-header + .modal-footer {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
.dialog-confirm {
|
||||
.modal-footer > .main-btn-group {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-footer > .additional-btn-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.modal {
|
||||
z-index: 1052;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
> .modal {
|
||||
> .modal-dialog {
|
||||
> .modal-content {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
border-left: var(--modal-border-width) solid var(--modal-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.modal-dialog {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.modal-content .note-editor > .modal > .modal-dialog {
|
||||
margin: 0 0 0 calc(var(--container-padding) * -1);
|
||||
}
|
||||
|
||||
.dialog-confirm > .modal-dialog,
|
||||
.dialog-centered > .modal-dialog {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm-min) {
|
||||
.modal-dialog {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
|
||||
.modal-body {
|
||||
.list-sticky-bar {
|
||||
top: var(--94px) !important;
|
||||
width: 100% !important;
|
||||
right: 0 !important;
|
||||
left: unset !important;
|
||||
padding-left: calc(var(--container-padding) - var(--1px));
|
||||
padding-right: calc(var(--container-padding) - var(--1px) + var(--scroll-width));
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:has(footer.modal-footer)) {
|
||||
.modal-body {
|
||||
.list-sticky-bar {
|
||||
top: var(--43px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
.modal-dialog {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.image-container {
|
||||
margin-left: calc(0rem - var(--modal-padding));
|
||||
margin-right: calc(0rem - var(--panel-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
&.maximized {
|
||||
.image-container {
|
||||
> img {
|
||||
max-height: calc(100vh - (var(--43px) + var(--modal-inner-padding) * 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-confirm > .modal-dialog > .modal-content {
|
||||
text-align: center;
|
||||
|
||||
.confirm-message {
|
||||
> ul {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
.modal-dialog {
|
||||
width: ~"min(var(--740px), 94vw)";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
.modal-dialog {
|
||||
width: ~"min(calc(var(--900px) + var(--30px)), 90vw)";
|
||||
}
|
||||
|
||||
.dialog-confirm > .modal-dialog,
|
||||
.dialog-centered > .modal-dialog {
|
||||
width: ~"min(var(--550px), 90vw)";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
.modal-dialog.maximized {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-confirm,
|
||||
.dialog-centered {
|
||||
> .modal-dialog > .modal-content {
|
||||
border-radius: var(--panel-border-radius);
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
// Already applied for wider screens.
|
||||
box-shadow: var(--modal-box-shadow);
|
||||
}
|
||||
|
||||
> .modal-header {
|
||||
//border-top-left-radius: var(--panel-border-radius);
|
||||
//border-top-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> .modal-footer {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> .modal-body {
|
||||
.panel.no-side-margin {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
border: var(--modal-border-width) solid var(--modal-border-color);
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body > .no-side-margin {
|
||||
margin-left: calc(0rem - var(--panel-padding));
|
||||
margin-right: calc(0rem - var(--panel-padding));
|
||||
|
||||
> .negate-no-side-margin {
|
||||
margin-left: var(--panel-padding);
|
||||
margin-right: var(--panel-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.modal.in .modal.in {
|
||||
overflow: visible !important;
|
||||
//noinspection CssOverwrittenProperties
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.modal.in {
|
||||
.modal-dialog {
|
||||
// Important. Prevents overflow of sticky bars.
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body > .list-group {
|
||||
background-color: var(--panel-bg);
|
||||
}
|
||||
|
||||
|
||||
.modal {
|
||||
&.dialog-record,
|
||||
&:has(> .modal-dialog > .modal-content > .modal-body > .record.no-side-margin),
|
||||
&:has(> .modal-dialog > .modal-content > .modal-body > .record-container.no-side-margin) {
|
||||
.modal-body {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
}
|
||||
}
|
||||
419
frontend/less/espo/elements/navbar.less
Normal file
419
frontend/less/espo/elements/navbar.less
Normal file
@@ -0,0 +1,419 @@
|
||||
#navbar .navbar {
|
||||
border-bottom-width: 0;
|
||||
|
||||
img.logo {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
margin-right: var(--minus-2px);
|
||||
}
|
||||
|
||||
> li > a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.shadowed:not(.has-sticked-bar) {
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
box-shadow: var(--top-bar-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-form.global-search-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 38px;
|
||||
margin: 0;
|
||||
color: @navbar-inverse-link-color;
|
||||
}
|
||||
|
||||
.tab span.color-icon {
|
||||
left: calc(var(--1px) * -1);
|
||||
font-size: 86%;
|
||||
top: calc(var(--1px) * -1);
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
user-select: none;
|
||||
|
||||
> li:not(.active) > a:focus:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
li > a > .group-caret {
|
||||
position: absolute;
|
||||
top: var(--9px);
|
||||
inset-inline-end: var(--13px);
|
||||
font-size: var(--12px);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
li.more {
|
||||
li.open > a {
|
||||
background-color: var(--dropdown-link-hover-bg);
|
||||
color: var(--dropdown-link-hover-color);
|
||||
}
|
||||
|
||||
&.open {
|
||||
> a#nav-more-tabs-dropdown {
|
||||
background-color: var(--navbar-inverse-link-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
li.tab.active {
|
||||
> a {
|
||||
background-color: var(--dropdown-link-hover-bg);
|
||||
color: var(--dropdown-link-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.in-more.dropdown {
|
||||
ul.dropdown-menu {
|
||||
//border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
> ul.dropdown-menu {
|
||||
> li {
|
||||
> a:has(> .item-user-profile) {
|
||||
padding-left: var(--10px);
|
||||
|
||||
.avatar {
|
||||
margin-right: var(--8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
.tabs > .more {
|
||||
li.show-more a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.after-show-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-expanded {
|
||||
.show-more {
|
||||
display: none;
|
||||
}
|
||||
.after-show-more {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
li.show-more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
#navbar .navbar {
|
||||
.navbar-body {
|
||||
-webkit-overflow-scrolling: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
#navbar .navbar {
|
||||
min-height: var(--navbar-height);
|
||||
border-width: 0;
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: var(--navbar-tab-vertical-padding);
|
||||
padding-bottom: var(--navbar-tab-vertical-padding);
|
||||
height: var(--navbar-height);
|
||||
}
|
||||
|
||||
.navbar-form.global-search-container {
|
||||
padding-left: var(--8px);
|
||||
padding-right: var(--8px);
|
||||
}
|
||||
|
||||
.navbar-form.global-search-container > .input-group {
|
||||
margin-left: var(--14px);
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
> li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> li.notifications-badge-container {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
> li.menu-container {
|
||||
float: right;
|
||||
|
||||
> a {
|
||||
float: right;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-badge-container > .notifications-button > .number-badge {
|
||||
left: unset;
|
||||
right: var(--4px);
|
||||
}
|
||||
|
||||
.navbar-body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: var(--navbar-height) !important;
|
||||
|
||||
> img.logo {
|
||||
height: var(--navbar-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
li > a {
|
||||
padding-top: var(--navbar-tab-vertical-padding);
|
||||
padding-bottom: var(--navbar-tab-vertical-padding);
|
||||
}
|
||||
|
||||
> li.more {
|
||||
&.open {
|
||||
> ul {
|
||||
li > a {
|
||||
padding-top: var(--navbar-tab-vertical-padding);
|
||||
padding-bottom: var(--navbar-tab-vertical-padding);
|
||||
padding-left: var(--15px);
|
||||
padding-right: var(--15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li > a > span.full-label,
|
||||
li > a > span.full-label {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
li > a > .group-caret {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
li > a {
|
||||
height: var(--navbar-height);
|
||||
}
|
||||
|
||||
li.tab-group {
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
background-color: @navbar-inverse-bg;
|
||||
}
|
||||
|
||||
> a > .full-label {
|
||||
padding-right: var(--8px);
|
||||
}
|
||||
}
|
||||
|
||||
li.tab-group.open > a {
|
||||
background-color: var(--navbar-inverse-link-active-bg) !important;
|
||||
color: var(--navbar-inverse-link-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
ul.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--200px), 1fr));
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.more {
|
||||
grid-column: ~"1 / -1";
|
||||
|
||||
&.open {
|
||||
> ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--200px), 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
padding-top: var(--navbar-tab-vertical-padding);
|
||||
padding-bottom: var(--navbar-tab-vertical-padding);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
#navbar .navbar {
|
||||
.navbar-body:not(.in) {
|
||||
border-top-width: 0;
|
||||
box-shadow: none;
|
||||
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-right-container {
|
||||
li.notifications-badge-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
> li.tab-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li.more {
|
||||
ul {
|
||||
> li.tab-divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar > .navbar {
|
||||
|
||||
.tabs {
|
||||
> li {
|
||||
> a {
|
||||
.short-label,
|
||||
.more-icon {
|
||||
color: var(--navbar-inverse-link-icon-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.short-label,
|
||||
.more-icon {
|
||||
color: var(--navbar-inverse-link-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
.short-label,
|
||||
.more-icon {
|
||||
color: var(--navbar-inverse-link-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-dropdown-menu {
|
||||
.short-label,
|
||||
.more-icon {
|
||||
color: var(--navbar-link-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs,
|
||||
.navbar-right {
|
||||
> li {
|
||||
> a {
|
||||
.fas,
|
||||
.far {
|
||||
line-height: var(--21px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-navbar="side"] {
|
||||
#navbar > .navbar {
|
||||
.minimizer {
|
||||
color: var(--navbar-inverse-link-icon-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
#navbar {
|
||||
.navbar-inverse .navbar-nav {
|
||||
> li > a {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--navbar-inverse-link-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.more-dropdown-menu {
|
||||
.short-label,
|
||||
.more-icon {
|
||||
color: var(--navbar-inverse-link-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
body[data-navbar="top"] {
|
||||
#navbar {
|
||||
.navbar-inverse .navbar-nav {
|
||||
> li > a {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--navbar-inverse-link-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
649
frontend/less/espo/elements/panel.less
Normal file
649
frontend/less/espo/elements/panel.less
Normal file
@@ -0,0 +1,649 @@
|
||||
.panel,
|
||||
.well {
|
||||
border-radius: var(--panel-border-radius);
|
||||
border-width: var(--panel-border-width);
|
||||
border-color: var(--panel-default-border);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: var(--panel-padding);
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.panel-group {
|
||||
> .panel:first-child {
|
||||
border-top-left-radius: var(--panel-border-radius);
|
||||
border-top-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> .panel:last-child {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
.panel + .panel {
|
||||
margin-top: var(--4px);
|
||||
}
|
||||
}
|
||||
|
||||
.panel > .panel-body.panel-body-form {
|
||||
padding-bottom: calc(var(--panel-padding) - var(--form-group-margin-bottom));
|
||||
|
||||
> .alert {
|
||||
margin-bottom: var(--form-group-margin-bottom);
|
||||
}
|
||||
|
||||
> .button-container {
|
||||
padding-bottom: var(--12px);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body > .no-margin {
|
||||
margin: calc(0rem - var(--panel-padding));
|
||||
}
|
||||
|
||||
.panel-body > .no-side-margin .revert-margin {
|
||||
margin-left: var(--panel-padding);
|
||||
margin-right: var(--panel-padding);
|
||||
}
|
||||
|
||||
.panel-body > .no-margin .revert-margin {
|
||||
margin: var(--panel-padding);
|
||||
}
|
||||
|
||||
.panel-body.no-padding {
|
||||
padding-left: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
.panel.no-side-margin,
|
||||
.no-side-margin > .panel {
|
||||
border-left: 0;
|
||||
//border-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.record.no-side-margin,
|
||||
.record-container.no-side-margin {
|
||||
> .panel {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.left > .middle > .panel,
|
||||
.left > .bottom > .panel {
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&.first::before {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.last::before {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
&,
|
||||
&.first::before,
|
||||
&.last::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side > .panel {
|
||||
//border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&.first::before {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.last::before {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
&,
|
||||
&.first::before,
|
||||
&.last::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-side-margin {
|
||||
.record-grid-wide {
|
||||
.left > .middle > .panel,
|
||||
.left > .bottom > .panel {
|
||||
//border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&.first::before {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&.last::before {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body .no-side-margin {
|
||||
margin-left: calc(0rem - var(--panel-padding));
|
||||
margin-right: calc(0rem - var(--panel-padding));
|
||||
|
||||
> table td:first-child,
|
||||
> table th:first-child {
|
||||
padding-left: var(--panel-padding);
|
||||
}
|
||||
|
||||
> table td:last-child,
|
||||
> table th:last-child {
|
||||
padding-right: var(--panel-padding);
|
||||
}
|
||||
|
||||
> .list-group-item {
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
> .table-bordered {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body .no-bottom-margin {
|
||||
margin-bottom: calc(0rem - var(--panel-padding)) !important;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: var(--vertical-gap);
|
||||
|
||||
> .panel-heading {
|
||||
min-height: var(--panel-heading-height);
|
||||
user-select: none;
|
||||
|
||||
&.panel-heading-no-title {
|
||||
padding-top: var(--6px);
|
||||
padding-bottom: var(--6px);
|
||||
}
|
||||
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
> .panel-title {
|
||||
font-size: var(--panel-heading-font-size);
|
||||
|
||||
line-height: 1.4;
|
||||
padding-top: calc((var(--panel-heading-height) - var(--panel-heading-font-size) * 1.4) / 2);
|
||||
padding-bottom: calc((var(--panel-heading-height) - var(--panel-heading-font-size) * 1.4) / 2);
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> .btn-group {
|
||||
margin-top: calc((var(--panel-heading-height) - var(--30px)) / 2);
|
||||
right: var(--minus-10px);
|
||||
}
|
||||
|
||||
.btn:not(.btn-link) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: @gray-soft;
|
||||
}
|
||||
|
||||
.open .btn {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-default {
|
||||
&:active,
|
||||
&.active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
// Prevents the issue that buttons can be visible through a dropdown opened nearby.
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .dropdown-toggle,
|
||||
.btn-group.open .dropdown-toggle
|
||||
{
|
||||
&,
|
||||
&:active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
> .link-group {
|
||||
> a {
|
||||
padding-left: var(--20px);
|
||||
}
|
||||
float: right;
|
||||
}
|
||||
|
||||
> .btn-group > .btn + .dropdown-toggle {
|
||||
padding-left: var(--padding-small-horizontal);
|
||||
padding-right: var(--padding-small-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
.panel {
|
||||
> .panel-heading {
|
||||
.btn-group.open {
|
||||
> .btn[aria-expanded="true"] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
&:hover:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-danger,
|
||||
.panel-success,
|
||||
.panel-primary,
|
||||
.panel-warning,
|
||||
.panel-info {
|
||||
> .panel-heading {
|
||||
.btn-group.open {
|
||||
> .btn[aria-expanded="true"] {
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.panel-styled(
|
||||
default;
|
||||
var(--panel-default-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-default-border);
|
||||
var(--gray-soft);
|
||||
var(--btn-text-color);
|
||||
var(--text-solid-color)
|
||||
);
|
||||
|
||||
.panel-styled(
|
||||
warning;
|
||||
var(--panel-warning-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-warning-border);
|
||||
var(--panel-warning-text);
|
||||
var(--state-warning-text-10);
|
||||
var(--panel-warning-text);
|
||||
);
|
||||
|
||||
.panel-styled(
|
||||
danger;
|
||||
var(--panel-danger-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-danger-border);
|
||||
var(--panel-danger-text);
|
||||
var(--state-danger-text-10);
|
||||
var(--panel-danger-text);
|
||||
);
|
||||
|
||||
.panel-styled(
|
||||
success;
|
||||
var(--panel-success-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-success-border);
|
||||
var(--panel-success-text);
|
||||
var(--state-success-text-10);
|
||||
var(--panel-success-text)
|
||||
);
|
||||
|
||||
.panel-styled(
|
||||
info;
|
||||
var(--panel-info-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-info-border);
|
||||
var(--panel-info-text);
|
||||
var(--state-info-text-10);
|
||||
var(--panel-info-text);
|
||||
);
|
||||
|
||||
.panel-styled(
|
||||
primary;
|
||||
var(--panel-primary-bg);
|
||||
var(--panel-bg);
|
||||
var(--panel-primary-border);
|
||||
var(--panel-primary-text);
|
||||
var(--gray-lighter);
|
||||
var(--panel-primary-text);
|
||||
);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-width: var(--panel-border-width);
|
||||
|
||||
.panel-heading {
|
||||
h4.panel-title span.color-icon {
|
||||
font-size: 61%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: var(--minus-2px);
|
||||
margin-right: var(--2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel.sticked {
|
||||
margin-top: calc(-1 * var(--vertical-gap));
|
||||
border-top-width: max(var(--panel-border-width), var(--1px));
|
||||
}
|
||||
|
||||
.panel {
|
||||
> .panel-heading {
|
||||
.btn:hover:not(.btn-link),
|
||||
.btn:focus:not(.btn-link) {
|
||||
color: var(--btn-text-color);
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
> .panel-heading {
|
||||
border-top-left-radius: var(--panel-border-radius);
|
||||
border-top-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> .panel-body {
|
||||
.list.bottom-border-radius,
|
||||
> .list-container:last-child > .list {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
|
||||
> table:not(:has(+ .show-more)),
|
||||
> table:has(+ .show-more.hidden),
|
||||
> .list-group,
|
||||
> .list-group:last-child > .list-group-item:last-child,
|
||||
> .show-more > a {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> table:not(:has(+ .show-more)) tr:last-child,
|
||||
> table:has(+ .show-more.hidden) tr:last-child {
|
||||
> td:first-child {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> td:last-child {
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .no-margin > table {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.first,
|
||||
&.in-middle {
|
||||
> .panel-body > .list-container:last-child > .list {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
> table,
|
||||
> table tr:last-child td,
|
||||
> .list-group,
|
||||
> .list-group:last-child > .list-group-item:last-child,
|
||||
> .show-more > a {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-styled(@style; @panel-style-bg; @panel-bg; @panel-style-border; @panel-style-text; @hover-color; @heading-text-color) {
|
||||
.panel-@{style} {
|
||||
&.headered {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
@panel-style-bg 0,
|
||||
@panel-style-bg var(--29px),
|
||||
@panel-bg var(--29px),
|
||||
@panel-bg 100%
|
||||
);
|
||||
}
|
||||
|
||||
border-color: @panel-style-border;
|
||||
> .panel-heading {
|
||||
color: @heading-text-color;
|
||||
background-color: @panel-style-bg;
|
||||
border-color: transparent;
|
||||
.btn:not(.btn-link),
|
||||
.btn-@{style}:not(.btn-link) {
|
||||
&,
|
||||
&:focus:not(:hover),
|
||||
&:active:not(:hover) {
|
||||
color: @panel-style-text;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
> .fas,
|
||||
> .far {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: @hover-color;
|
||||
> .fas,
|
||||
> .far {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group.open {
|
||||
.dropdown-toggle.btn {
|
||||
&,
|
||||
&:focus {
|
||||
color: @panel-style-text;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-group.open {
|
||||
.dropdown-toggle.btn {
|
||||
color: @hover-color;
|
||||
> .fas,
|
||||
> .far {
|
||||
color: @hover-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
> .table:first-child,
|
||||
> .table-responsive:first-child > .table:first-child {
|
||||
.border-top-radius(var(--panel-border-radius));
|
||||
|
||||
> thead:first-child,
|
||||
> tbody:first-child {
|
||||
> tr:first-child {
|
||||
border-top-left-radius: var(--panel-border-radius);
|
||||
border-top-right-radius: var(--panel-border-radius);
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-top-left-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-top-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .table:last-child,
|
||||
> .table-responsive:last-child > .table:last-child {
|
||||
.border-bottom-radius(var(--panel-border-radius));
|
||||
|
||||
> tbody:last-child,
|
||||
> tfoot:last-child {
|
||||
> tr:last-child {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-group-accordion > .panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel > .panel-body > .list-container > {
|
||||
> .list > .list-group {
|
||||
> .list-group-item {
|
||||
border-width: 0;
|
||||
border-bottom-width: var(--1px);
|
||||
}
|
||||
|
||||
> li.list-group-item:first-child {
|
||||
border-top-width: var(--1px);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
> li.list-group-item:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(+ .list-container) {
|
||||
> .list > .list-group {
|
||||
> li.list-group-item:last-child {
|
||||
border-bottom-width: var(--1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel > .panel-heading {
|
||||
.panel-actions-container-left {
|
||||
margin-left: calc(var(--10px) * -1);
|
||||
}
|
||||
|
||||
.panel-actions-container {
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding: var(--4px) var(--10px);
|
||||
font-size: var(--14px);
|
||||
line-height: 1.5;
|
||||
float: left;
|
||||
}
|
||||
|
||||
> .btn-sm {
|
||||
.fas, .far {
|
||||
font-size: var(--14px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading .btn-sm {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.panel.highlighted {
|
||||
outline: var(--2px) solid var(--brand-info);
|
||||
outline-offset: var(--minus-1px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-footer {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
&:has(> .panel-heading) {
|
||||
> .panel-body:has(> .list-container.hidden:only-child) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
frontend/less/espo/elements/placement.less
Normal file
59
frontend/less/espo/elements/placement.less
Normal file
@@ -0,0 +1,59 @@
|
||||
.margin {
|
||||
margin: var(--table-cell-padding) 0;
|
||||
}
|
||||
|
||||
.margin-left {
|
||||
margin-left: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
.margin-left-sm {
|
||||
margin-left: var(--table-cell-padding-half);
|
||||
}
|
||||
|
||||
.margin-right-sm {
|
||||
margin-right: var(--table-cell-padding-half);
|
||||
}
|
||||
|
||||
.margin-top-sm {
|
||||
margin-top: var(--table-cell-padding-half);
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
.margin-top-2x {
|
||||
margin-top: calc(var(--table-cell-padding) * 2);
|
||||
}
|
||||
|
||||
.margin-bottom-sm {
|
||||
margin-bottom: var(--table-cell-padding-half);
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
.margin-bottom-2x {
|
||||
margin-bottom: calc(var(--table-cell-padding) * 2);
|
||||
}
|
||||
|
||||
.margin-bottom-3x {
|
||||
margin-bottom: calc(var(--table-cell-padding) * 3);
|
||||
}
|
||||
|
||||
.margin-bottom-4x {
|
||||
margin-bottom: calc(var(--table-cell-padding) * 4);
|
||||
}
|
||||
|
||||
.margin-bottom.margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.center-align {
|
||||
text-align: center;
|
||||
}
|
||||
97
frontend/less/espo/elements/popup-notification.less
Normal file
97
frontend/less/espo/elements/popup-notification.less
Normal file
@@ -0,0 +1,97 @@
|
||||
#popup-notifications-container {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
// Some space to fix the scrollbar gutter issue https://github.com/w3c/csswg-drafts/issues/9904.
|
||||
right: var(--12px);
|
||||
bottom: var(--24px);
|
||||
position: fixed;
|
||||
height: auto;
|
||||
z-index: 1051;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.popup-notification {
|
||||
width: var(--400px);
|
||||
padding: var(--panel-padding);
|
||||
background-color: @panel-bg;
|
||||
border: var(--2px) solid @main-gray;
|
||||
margin-top: var(--10px);
|
||||
margin-right: var(--5px);
|
||||
border-radius: var(--panel-border-radius);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: var(--5px);
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-bottom: var(--5px);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a.close {
|
||||
margin-top: var(--minus-8px);
|
||||
margin-right: var(--minus-3px);
|
||||
}
|
||||
|
||||
a[data-action="collapse"] {
|
||||
margin-top: var(--minus-6px);
|
||||
margin-right: var(--12px);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-default {
|
||||
border-color: @gray-light;
|
||||
h4 {
|
||||
color: @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-danger {
|
||||
border-color: @brand-danger;
|
||||
h4 {
|
||||
color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-warning {
|
||||
border-color: @brand-warning;
|
||||
h4 {
|
||||
color: @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-primary {
|
||||
border-color: @brand-primary;
|
||||
h4 {
|
||||
color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-success {
|
||||
border-color: @brand-success;
|
||||
h4 {
|
||||
color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-notification-info {
|
||||
border-color: @brand-info;
|
||||
h4 {
|
||||
color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
#popup-notifications-container {
|
||||
width: 100%;
|
||||
}
|
||||
.popup-notification {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
262
frontend/less/espo/elements/record.less
Normal file
262
frontend/less/espo/elements/record.less
Normal file
@@ -0,0 +1,262 @@
|
||||
.record .record-grid {
|
||||
display: grid;
|
||||
grid-column-gap: var(--container-padding);
|
||||
|
||||
grid-template-columns: minmax(auto, 66.6%) minmax(auto, 33.4%);
|
||||
|
||||
&.record-grid-wide {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
&.record-grid-wide.record-grid-wide {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
&.record-grid-small {
|
||||
grid-template-columns: minmax(auto, 61%) minmax(auto, 39%);
|
||||
}
|
||||
|
||||
max-width: var(--record-grid-max-width);
|
||||
|
||||
> div {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.record > div[tabindex="-1"]:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.record .cell[tabindex="-1"]:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
.record .record-grid {
|
||||
grid-column-gap: var(--padding-base-horizontal);
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
.record,
|
||||
.record-container,
|
||||
.edit-container {
|
||||
&.no-side-margin {
|
||||
> div {
|
||||
> .record-grid-wide {
|
||||
margin-right: var(--panel-padding);
|
||||
|
||||
> .left {
|
||||
> .middle {
|
||||
> .panel {
|
||||
|
||||
&:not(.middle):not(.last),
|
||||
&.first {
|
||||
border-top-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
&:not(.middle):not(.first),
|
||||
&.last {
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-sm-max) {
|
||||
.record .record-grid {
|
||||
grid-template-columns: 100%;
|
||||
|
||||
&.record-grid-small {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
.tabs {
|
||||
> button.btn {
|
||||
font-size: var(--15px);
|
||||
height: var(--40px);
|
||||
|
||||
&.invalid {
|
||||
color: var(--state-danger-text);
|
||||
transition: color 100ms linear;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: var(--2px);
|
||||
}
|
||||
|
||||
padding-left: var(--16px);
|
||||
padding-right: var(--16px);
|
||||
}
|
||||
|
||||
margin-left: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
.panel.tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side.tabs-margin {
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
margin-top: var(--40px);
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
&.first {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&.in-middle {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
> .panel-heading {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&.last {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
> .panel-heading {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
.panel.sticked:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-bottom: var(--12px);
|
||||
}
|
||||
}
|
||||
|
||||
.record-grid {
|
||||
> .left:has(> .tabs) {
|
||||
.bottom:not(:has(> .tabs)) {
|
||||
margin-top: calc(2 * var(--vertical-gap));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record .middle {
|
||||
margin-bottom: var(--vertical-gap);
|
||||
|
||||
> .panel:first-child {
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
> .panel.hidden + .panel {
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
.panel + .panel.panels-show-more-delimiter {
|
||||
padding: var(--padding-large-vertical) var(--panel-padding);
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
> .panel {
|
||||
border-top-width: max(var(--panel-border-width), var(--1px));
|
||||
|
||||
> .panel-heading {
|
||||
.btn-group {
|
||||
top: var(--minus-6px);
|
||||
.btn {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child:not(.first):not(.in-middle) {
|
||||
border-bottom-width: var(--panel-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record .middle {
|
||||
> .panel:first-child {
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
> .panel:last-child:not(.first):not(.in-middle) {
|
||||
border-bottom-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
> .panel.tab-hidden + .panel {
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
> .panel.hidden + .panel {
|
||||
border-top-width: max(var(--panel-border-width), var(--1px));
|
||||
}
|
||||
|
||||
.panel + .panel.panels-show-more-delimiter {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.record .side {
|
||||
> .panel.sticked:first-child {
|
||||
margin-top: 0;
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
.panel.hidden + .panel.sticked {
|
||||
margin-top: 0;
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
.record .bottom {
|
||||
.panel.hidden + .panel.sticked {
|
||||
border-top-width: var(--panel-border-width);
|
||||
}
|
||||
|
||||
.btn-group + .panel.sticked {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
.panel {
|
||||
.panel-heading .panel-title {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panels-show-more-delimiter {
|
||||
text-align: center;
|
||||
|
||||
a > span {
|
||||
color: @gray-soft;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active:hover {
|
||||
> span {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
26
frontend/less/espo/elements/scrollbar.less
Normal file
26
frontend/less/espo/elements/scrollbar.less
Normal file
@@ -0,0 +1,26 @@
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
.dashlet > .dashlet-body,
|
||||
.list-kanban-container {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
|
||||
}
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: var(--scroll-width);
|
||||
width: var(--scroll-width);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scroll-bg);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scroll-thumb-bg);
|
||||
border-radius: 0;
|
||||
border: var(--scroll-border-width) solid var(--scroll-bg);
|
||||
}
|
||||
36
frontend/less/espo/elements/site.less
Normal file
36
frontend/less/espo/elements/site.less
Normal file
@@ -0,0 +1,36 @@
|
||||
body > footer {
|
||||
background-color: var(--site-footer-bg);
|
||||
}
|
||||
|
||||
body > footer > p.credit {
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body > footer > p,
|
||||
body > footer > p a,
|
||||
body > footer > p a:hover,
|
||||
body > footer > p a:active,
|
||||
body > footer > p a:visited {
|
||||
color: var(--site-footer-color);
|
||||
}
|
||||
|
||||
#content > #main[tabindex="-1"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body[data-content-width="Wide"] {
|
||||
--container-max-width: var(--container-max-width-wide);
|
||||
}
|
||||
|
||||
body[data-content-width="Full"] {
|
||||
--container-max-width: 100%;
|
||||
}
|
||||
|
||||
body[data-record-content-width="Wide"] {
|
||||
--record-grid-max-width: var(--container-max-width-normal);
|
||||
}
|
||||
|
||||
body[data-record-content-width="Full"] {
|
||||
--record-grid-max-width: 100%;
|
||||
}
|
||||
188
frontend/less/espo/elements/table.less
Normal file
188
frontend/less/espo/elements/table.less
Normal file
@@ -0,0 +1,188 @@
|
||||
table.table,
|
||||
.list-container > .list,
|
||||
.calendar-container > .calendar,
|
||||
.calendar-container > .timeline {
|
||||
background-color: var(--table-bg);
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: var(--10px);
|
||||
|
||||
> thead,
|
||||
> tbody {
|
||||
> tr {
|
||||
> th:first-child,
|
||||
> td:first-child {
|
||||
padding-left: var(--padding-base-horizontal);
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
padding-left: var(--table-cell-padding);
|
||||
}
|
||||
}
|
||||
|
||||
> th:last-child,
|
||||
> td:last-child {
|
||||
padding-right: var(--padding-base-horizontal);
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
padding-right: var(--table-cell-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> tbody > tr.border-top-highlighted:first-child) {
|
||||
> thead > tr:last-child {
|
||||
> th {
|
||||
border-bottom: var(--3px) solid var(--brand-info) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody {
|
||||
> tr {
|
||||
&.border-bottom-highlighted {
|
||||
> td {
|
||||
border-bottom: var(--3px) solid var(--brand-info) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.border-top-highlighted {
|
||||
> td {
|
||||
border-top: var(--3px) solid var(--brand-info) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.table > thead th > a {
|
||||
color: var(--text-muted-color);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
table.table > thead th {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table thead > tr > th {
|
||||
border-bottom: var(--1px) solid @table-border-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.table tr > th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.table tr.accented {
|
||||
background-color: var(--table-bg-accent);
|
||||
}
|
||||
|
||||
.table td.accented {
|
||||
background-color: var(--table-bg-accent);
|
||||
}
|
||||
|
||||
table.table-bordered-inside {
|
||||
border-collapse: collapse;
|
||||
border-style: hidden;
|
||||
|
||||
td, th {
|
||||
border: var(--1px) solid var(--default-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
table.table-bottom-bordered {
|
||||
border-bottom: var(--1px) solid var(--default-border-color);
|
||||
}
|
||||
|
||||
table.table > tbody td > .list-row-buttons button {
|
||||
position: relative;
|
||||
margin-top: var(--3px);
|
||||
padding-left: var(--table-cell-padding);
|
||||
padding-right: var(--table-cell-padding);
|
||||
}
|
||||
|
||||
.table.table-no-overflow {
|
||||
> tbody > tr > td,
|
||||
> tbody > tr > th,
|
||||
> thead > tr > th {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
table.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table.less-padding > thead > tr > th,
|
||||
.table.less-padding > tbody > tr > th,
|
||||
.table.less-padding > tfoot > tr > th,
|
||||
.table.less-padding > thead > tr > td,
|
||||
.table.less-padding > tbody > tr > td,
|
||||
.table.less-padding > tfoot > tr > td {
|
||||
padding: var(--table-cell-padding) var(--table-cell-less-padding) var(--table-cell-padding) var(--table-cell-less-padding);
|
||||
}
|
||||
|
||||
table.no-margin {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table.table-panel {
|
||||
border-collapse: separate;
|
||||
border-radius: var(--panel-border-radius);
|
||||
border: var(--panel-border-width) solid var(--panel-default-border);
|
||||
|
||||
thead > tr > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
> tr:nth-last-child(1 of :not(.hidden)) {
|
||||
> td:first-child {
|
||||
border-bottom-left-radius: var(--panel-border-radius);
|
||||
}
|
||||
|
||||
> td:last-child {
|
||||
border-bottom-right-radius: var(--panel-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.table-striped {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
table td.cell-nowrap,
|
||||
table th.cell-nowrap {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table td {
|
||||
> .btn-group.row-dropdown-group {
|
||||
> .btn.dropdown-toggle {
|
||||
margin-top: var(--minus-6px);
|
||||
margin-bottom: var(--minus-6px);
|
||||
|
||||
> .caret {
|
||||
top: var(--minus-1px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
td.cell {
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
346
frontend/less/espo/elements/type.less
Normal file
346
frontend/less/espo/elements/type.less
Normal file
@@ -0,0 +1,346 @@
|
||||
.center-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--30px);
|
||||
margin-top: var(--20px);
|
||||
margin-bottom: var(--20px);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--26px);
|
||||
margin-top: var(--19px);
|
||||
margin-bottom: var(--16px);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--22px);
|
||||
margin-bottom: var(--12px);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--18px);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
margin-top: var(--10px);
|
||||
margin-bottom: var(--10px);
|
||||
font-size: var(--15px);
|
||||
color: @gray-soft;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
color: @gray-soft;
|
||||
font-size: var(--14px);
|
||||
}
|
||||
|
||||
code {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-soft {
|
||||
color: @gray-soft;
|
||||
}
|
||||
|
||||
.text-solid {
|
||||
color: var(--text-solid-color);
|
||||
}
|
||||
|
||||
.text-smaller {
|
||||
font-size: calc(var(--font-size-small) + var(--1px));
|
||||
}
|
||||
|
||||
.text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text-large {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.text-2em {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.text-3em {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.text-4em {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.text-5em {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.text-6em {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: var(--1px) solid var(--panel-default-border);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-base);
|
||||
border-left: var(--3px) solid var(--blockquote-border-color);
|
||||
}
|
||||
|
||||
.well > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.well {
|
||||
padding: var(--panel-padding);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-circle {
|
||||
width: var(--8px);
|
||||
height: var(--8px);
|
||||
border-radius: var(--4px);
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
font-size: var(--5px);
|
||||
line-height: var(--8px);
|
||||
background-color: @main-gray;
|
||||
}
|
||||
|
||||
.badge-circle.badge-circle-danger {
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
|
||||
.badge-circle.badge-circle-warning {
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
margin-bottom: var(--3px);
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: @label-padding-small;
|
||||
position: relative;
|
||||
top: var(--minus-1px);
|
||||
font-weight: 600;
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.label-md {
|
||||
font-weight: normal;
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--1px) var(--7px) var(--2px);
|
||||
top: 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.label-sm {
|
||||
font-weight: normal;
|
||||
font-size: 75%;
|
||||
padding: @label-padding-small;
|
||||
}
|
||||
|
||||
.label.label-state {
|
||||
font-weight: 400;
|
||||
|
||||
&.label-default {
|
||||
color: var(--state-default-text);
|
||||
background-color: var(--state-default-bg);
|
||||
}
|
||||
|
||||
&.label-primary {
|
||||
color: var(--state-primary-text);
|
||||
background-color: var(--state-primary-bg);
|
||||
}
|
||||
|
||||
&.label-info {
|
||||
color: var(--state-info-text);
|
||||
background-color: var(--state-info-bg);
|
||||
}
|
||||
|
||||
&.label-danger {
|
||||
color: var(--state-danger-text);
|
||||
background-color: var(--state-danger-bg);
|
||||
}
|
||||
|
||||
&.label-warning {
|
||||
color: var(--state-warning-text);
|
||||
background-color: var(--state-warning-bg);
|
||||
}
|
||||
|
||||
&.label-success {
|
||||
color: var(--state-success-text);
|
||||
background-color: var(--state-success-bg);
|
||||
}
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.small .label-md,
|
||||
.label-lg.small {
|
||||
padding: @label-padding-small;
|
||||
}
|
||||
|
||||
.label-lg.small {
|
||||
font-size: 75%;
|
||||
top: var(--minus-1px);
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a[role="button"],
|
||||
a[href="javascript:"] {
|
||||
&:not(.selectable) {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.text-muted {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-describedby]{
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.text-soft {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--gray-soft);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--text-gray-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.text-solid {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--text-solid-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--text-gray-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.text-record {
|
||||
.link-content-color();
|
||||
}
|
||||
|
||||
a.text-default {
|
||||
color: var(--btn-text-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .fas,
|
||||
> .far {
|
||||
color: var(--text-gray-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.no-underline {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
.text-emphasis-variant-espo(var(--state-primary-text), var(--brand-primary-10));
|
||||
}
|
||||
.text-success {
|
||||
.text-emphasis-variant-espo(var(--state-success-text), var(--state-success-text-10));
|
||||
}
|
||||
.text-info {
|
||||
.text-emphasis-variant-espo(var(--state-info-text), var(--state-info-text-10));
|
||||
}
|
||||
.text-warning,
|
||||
a.text-warning {
|
||||
.text-emphasis-variant-espo(var(--state-warning-text); var(--state-warning-text-10));
|
||||
}
|
||||
.text-danger {
|
||||
.text-emphasis-variant-espo(var(--state-danger-text); var(--state-danger-text-10));
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
color: var(--text-white-color);
|
||||
.bg-variant-espo(var(--brand-primary), var(--brand-primary-5));
|
||||
}
|
||||
.bg-success {
|
||||
.bg-variant-espo(var(--state-success-bg), var(--state-success-bg-5));
|
||||
}
|
||||
.bg-info {
|
||||
.bg-variant-espo(var(--state-info-bg), var(--state-info-bg-5));
|
||||
}
|
||||
.bg-warning {
|
||||
.bg-variant-espo(var(--state-warning-bg); var(--state-warning-bg-5));
|
||||
}
|
||||
.bg-danger {
|
||||
.bg-variant-espo(var(--state-danger-bg); var(--state-danger-bg-5));
|
||||
}
|
||||
Reference in New Issue
Block a user