upstream/upstream-espocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details
Test / Test on PHP 8.4 (push) Failing after 4s
Details
Test / Test on PHP 8.5 (push) Failing after 3s
Details
TypeScript static analysis / TypeScript check (push) Failing after 14s
Details
Test Integration on MySQL / Test on PHP 8.3 (push) Failing after 2s
Details
Test Integration on MySQL / Test on PHP 8.5 (push) Failing after 0s
Details
Test Integration on PostgreSQL / Test on PHP 8.4 fix (push) Failing after 1s
Details
Test Integration on PostgreSQL / Test on PHP 8.4 master (push) Failing after 1s
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-18 04:19:15 +05:00
commit 7cc7e6b4f3
10077 changed files with 900756 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
frontend/less/espo/bootstrap/.csscomb.json Normal file
View File

@@ -0,0 +1,304 @@
{
"always-semicolon": true,
"block-indent": 2,
"color-case": "lower",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"remove-empty-rulesets": true,
"space-after-colon": 1,
"space-after-combinator": 1,
"space-before-selector-delimiter": 0,
"space-between-declarations": "\n",
"space-after-opening-brace": "\n",
"space-before-closing-brace": "\n",
"space-before-colon": 0,
"space-before-combinator": 1,
"space-before-opening-brace": 1,
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"sort-order": [
[
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"float",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"-webkit-appearance",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"-ms-overflow-x",
"-ms-overflow-y",
"-ms-overflow-style",
"clip",
"clear",
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"line-height",
"color",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-decoration",
"text-indent",
"text-justify",
"text-outline",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"text-transform",
"text-wrap",
"-webkit-text-size-adjust",
"-ms-text-size-adjust",
"letter-spacing",
"-ms-word-break",
"word-break",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"white-space",
"vertical-align",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"pointer-events",
"-ms-touch-action",
"touch-action",
"cursor",
"visibility",
"zoom",
"flex-direction",
"flex-order",
"flex-pack",
"flex-align",
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"-o-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"background-color",
"background-image",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"filter",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size",
"border",
"border-color",
"border-style",
"border-width",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"opacity",
"-ms-interpolation-mode",
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
]
]
}

19
frontend/less/espo/bootstrap/.csslintrc Normal file
View File

@@ -0,0 +1,19 @@
{
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}

25
frontend/less/espo/bootstrap/alerts.less Normal file
View File

@@ -0,0 +1,25 @@
//
// Alerts
// --------------------------------------------------
.alert {
margin-bottom: var(--line-height-computed);
border: 1px solid transparent;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}

62
frontend/less/espo/bootstrap/badges.less Normal file
View File

@@ -0,0 +1,62 @@
// Badges
.badge {
display: inline-block;
min-width: var(--10px);
padding: var(--3px) var(--7px);
font-size: var(--font-size-small);
font-weight: 600;
color: var(--white-color);
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: var(--gray-light);
border-radius: var(--badge-border-radius-value);
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for badges in buttons
.btn & {
position: relative;
top: var(--minus-1px);
}
.btn-xs &,
.btn-group-xs > .btn & {
top: 0;
padding: var(--1px) var(--5px);
}
// Hover state, but only for links
a& {
&:hover,
&:focus {
color: var(--white-color);
text-decoration: none;
cursor: pointer;
}
}
// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: var(--link-color);
background-color: var(--white-color);
}
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: var(--5px);
}
.nav-pills > li > a > & {
margin-left: var(--3px);
}
}

47
frontend/less/espo/bootstrap/bootstrap.less vendored Normal file
View File

@@ -0,0 +1,47 @@
/*!
* Bootstrap (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "labels.less";
@import "badges.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "utilities.less";
@import "responsive-utilities.less";

213
frontend/less/espo/bootstrap/button-groups.less Normal file
View File

@@ -0,0 +1,213 @@
// Button groups
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: var(--minus-1px);
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: var(--minus-5px); // Offset the first child's margin
&:extend(.clearfix all);
.btn,
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: var(--5px);
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); }
.btn-group-sm > .btn { &:extend(.btn-sm); }
.btn-group-lg > .btn { &:extend(.btn-lg); }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: var(--8px);
padding-right: var(--8px);
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: var(--12px);
padding-right: var(--12px);
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
.box-shadow(none);
}
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
//noinspection CssOverwrittenProperties
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: var(--minus-1px);
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
> .btn-group .dropdown-menu {
left: auto;
}
}

106
frontend/less/espo/bootstrap/buttons.less Normal file
View File

@@ -0,0 +1,106 @@
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: var(--1px) solid transparent;
white-space: nowrap;
.button-size(var(--padding-base-vertical); var(--padding-base-horizontal); var(--font-size-base); var(--line-height-base));
user-select: none;
&,
&:active:hover, // Espo-fix
&.active {
&:focus,
&.focus {
.tab-focus();
}
}
&:hover,
&:focus,
&.focus {
color: var(--btn-default-color);
text-decoration: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
opacity: 0.65;
box-shadow: none;
}
a& {
&.disabled,
fieldset[disabled] & {
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
}
}
}
.btn-link {
color: @link-color;
font-weight: normal;
border-radius: 0;
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover {
color: @link-hover-color;
text-decoration: @link-hover-decoration;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
text-decoration: none;
}
}
}
.btn-lg {
.button-size(var(--padding-large-vertical); var(--padding-large-horizontal); var(--font-size-large); var(--line-height-large));
}
.btn-sm {
.button-size(var(--padding-small-vertical); var(--padding-small-horizontal); var(--font-size-small); var(--line-height-small));
}
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: var(--5px);
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

13
frontend/less/espo/bootstrap/close.less Normal file
View File

@@ -0,0 +1,13 @@
// Close
.close {
float: right;
font-size: calc(var(--font-size-base) * 1.5);
font-weight: bold;
line-height: 1;
&:hover {
text-decoration: none;
cursor: pointer;
}
}

58
frontend/less/espo/bootstrap/code.less Normal file
View File

@@ -0,0 +1,58 @@
// Code (inline and block)
code,
kbd,
pre,
samp {
font-family: var(--font-family-monospace);
font-variant-ligatures: none;
}
// Inline code
code {
padding: var(--2px) var(--4px);
font-size: 90%;
color:var(--code-color);
background-color: var(--code-bg);
}
// User input typically entered via keyboard
kbd {
padding: var(--2px) var(--4px);
font-size: 90%;
color: var(--code-color);
background-color: var(--code-bg);
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
}
// Blocks of code
pre {
display: block;
padding: calc((var(--line-height-computed) - var(--1px)) / 2);
margin: 0 0 var(--line-height-computed-half);
font-size: calc(var(--font-size-base) - var(--1px));
line-height: var(--line-height-base);
word-break: break-all;
word-wrap: break-word;
color: var(--code-color);
background-color: var(--code-bg);
border: var(--1px) solid var(--code-border-color);
border-radius: var(--border-radius-small);
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}

26
frontend/less/espo/bootstrap/component-animations.less Normal file
View File

@@ -0,0 +1,26 @@
// Component animations
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in { display: block; }
tr&.in { display: table-row; }
tbody&.in { display: table-row-group; }
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition-property(~"height, visibility");
.transition-duration(.35s);
.transition-timing-function(ease);
}

199
frontend/less/espo/bootstrap/dropdowns.less Normal file
View File

@@ -0,0 +1,199 @@
// Dropdown menus
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: var(--2px);
vertical-align: middle;
border-top: @caret-width-base dashed;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// The dropdown wrapper (div)
.dropup,
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: calc(var(--16px) * 10);
padding: var(--5px) 0;
margin: var(--2px) 0 0;
list-style: none;
font-size: var(--font-size-base);
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: var(--dropdown-bg);
border: var(--1px) solid var(--dropdown-border);
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(var(--dropdown-divider-bg));
}
// Links within the dropdown menu
> li > a {
display: block;
padding: var(--3px) var(--20px);
clear: both;
font-weight: normal;
line-height: var(--line-height-base);
color: var(--dropdown-link-color);
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: var(--dropdown-link-hover-color);
background-color: var(--dropdown-link-hover-bg);
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
text-decoration: none;
outline: 0;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: var(--gray-light);
}
// Nuke hover/focus effects
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
cursor: @cursor-disabled;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: var(--3px) var(--20px);
font-size: calc(var(--font-size-small) + var(--1px));
line-height: var(--line-height-base);
color: var(--gray-light);
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup {
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: var(--2px);
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}

572
frontend/less/espo/bootstrap/forms.less Normal file
View File

@@ -0,0 +1,572 @@
// Forms
fieldset {
padding: 0;
margin: 0;
border: 0;
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: var(--line-height-computed);
font-size: calc(var(--font-size-base) * 1.5);
line-height: inherit;
color: @legend-color;
border: 0;
border-bottom: var(--1px) solid var(--default-border-color);
}
label {
display: inline-block;
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: var(--5px);
font-weight: bold;
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: var(--4px) 0 0;
margin-top: var(--1px) \9; // IE8-9
line-height: normal;
}
input[type="file"] {
display: block;
}
// Make range inputs behave like textual form controls
input[type="range"] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Adjust output element
output {
display: block;
padding-top: var(--padding-base-vertical);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: @input-color;
}
.form-control {
display: block;
width: 100%;
//height: var(--input-height-base); // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: var(--padding-base-vertical) var(--padding-base-horizontal);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--input-color);
background-color: var(--input-bg);
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
// Placeholder
.placeholder();
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: var(--input-bg-disabled);
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
-webkit-appearance: none;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 9.3, iOS doesn't support `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: var(--input-height-base);
}
&.input-sm,
.input-group-sm & {
line-height: var(--input-height-small);
}
&.input-lg,
.input-group-lg & {
line-height: var(--input-height-large);
}
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: var(--form-group-margin-bottom);
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
position: relative;
display: block;
margin-top: var(--10px);
margin-bottom: var(--10px);
label {
min-height: var(--line-height-computed); // Ensure the input doesn't jump when there is no text
padding-left: var(--20px);
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: calc(var(--20px) * -1);
margin-top: var(--4px) \9;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: var(--20px);
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: var(--10px); // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
.input-size(var(--input-height-small); var(--padding-small-vertical); var(--padding-small-horizontal); var(--font-size-small); var(--line-height-small));
}
.form-group-sm {
.form-control {
//height: var(--input-height-small);
padding: var(--padding-small-vertical) var(--padding-small-horizontal);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
select.form-control {
height: var(--input-height-small);
line-height: var(--input-height-small);
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: var(--input-height-small);
min-height: calc(var(--line-height-computed) + var(--font-size-small));
padding: calc(var(--padding-small-vertical) + var(--1px)) var(--padding-small-horizontal);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
}
.input-lg {
.input-size(var(--input-height-large); var(--padding-large-vertical); var(--padding-large-horizontal); var(--font-size-large); var(--line-height-large));
}
.form-group-lg {
.form-control {
//height: var(--input-height-large);
padding: var(--padding-large-vertical) var(--padding-large-horizontal);
font-size: var(--font-size-large);
line-height: var(--line-height-large);
}
select.form-control {
height: var(--input-height-large);
line-height: var(--input-height-large);
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: var(--input-height-large);
min-height: calc(var(--line-height-computed) + var(--font-size-large));
padding: calc(var(--padding-large-vertical) + var(--1px)) var(--padding-large-horizontal);
font-size: var(--font-size-large);
line-height: var(--line-height-large);
}
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.has-feedback {
// Enable absolute positioning
position: relative;
// Ensure icons don't overlap text
.form-control {
padding-right: calc(var(--input-height-base) * 1.25);
}
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
width: var(--input-height-base);
height: var(--input-height-base);
line-height: var(--input-height-base);
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
width: var(--input-height-large);
height: var(--input-height-large);
line-height: var(--input-height-large);
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
width: var(--input-height-small);
height: var(--input-height-small);
line-height: var(--input-height-small);
}
// Feedback states
.has-success {
.form-control-validation-espo(
@state-success-text;
@state-success-text;
@state-success-bg;
@state-success-text-10;
var(--state-success-text-10l)
);
}
.has-warning {
.form-control-validation-espo(
@state-warning-text;
@state-warning-text;
@state-warning-bg;
var(--state-warning-text-10);
var(--state-warning-text-10l)
);
}
.has-error {
.form-control-validation-espo(
@state-danger-text;
@state-danger-text;
@state-danger-bg;
var(--state-danger-text-10);
var(--state-danger-text-10l)
);
}
// Reposition feedback icon if input has visible label above
.has-feedback label {
& ~ .form-control-feedback {
top: calc(var(--line-height-computed) + 5px); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0;
}
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-top: var(--5px);
margin-bottom: var(--10px);
//color: lighten(@text-color, 25%); // lighten the text some for contrast
color: var(--gray-dark-25l);
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
.control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
label {
padding-left: 0;
}
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: var(--padding-base-vertical);
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: calc(var(--line-height-computed) + var(--padding-base-vertical))
}
// Make form groups behave like rows
.form-group {
.make-row();
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: var(--padding-base-vertical);
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
right: var(--grid-gutter-width-half);
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: calc(var(--padding-large-vertical) + var(--1px));
font-size: var(--font-size-large);
}
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: calc(var(--padding-small-vertical) + var(--1px));
font-size: var(--font-size-small);
}
}
}
}

306
frontend/less/espo/bootstrap/glyphicons.less Normal file
View File

@@ -0,0 +1,306 @@
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}
// Catchall baseclass
.glyphicon {
position: relative;
top: var(--1px);
display: inline-block;
//noinspection CssNoGenericFontName
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\002a"; } }
.glyphicon-plus { &:before { content: "\002b"; } }
.glyphicon-euro,
.glyphicon-eur { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-cd { &:before { content: "\e201"; } }
.glyphicon-save-file { &:before { content: "\e202"; } }
.glyphicon-open-file { &:before { content: "\e203"; } }
.glyphicon-level-up { &:before { content: "\e204"; } }
.glyphicon-copy { &:before { content: "\e205"; } }
.glyphicon-paste { &:before { content: "\e206"; } }
// The following 2 Glyphicons are omitted for the time being because
// they currently use Unicode codepoints that are outside the
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
// Notably, the bug affects some older versions of the Android Browser.
// More info: https://github.com/twbs/bootstrap/issues/10106
// .glyphicon-door { &:before { content: "\1f6aa"; } }
// .glyphicon-key { &:before { content: "\1f511"; } }
.glyphicon-alert { &:before { content: "\e209"; } }
.glyphicon-equalizer { &:before { content: "\e210"; } }
.glyphicon-king { &:before { content: "\e211"; } }
.glyphicon-queen { &:before { content: "\e212"; } }
.glyphicon-pawn { &:before { content: "\e213"; } }
.glyphicon-bishop { &:before { content: "\e214"; } }
.glyphicon-knight { &:before { content: "\e215"; } }
.glyphicon-baby-formula { &:before { content: "\e216"; } }
.glyphicon-tent { &:before { content: "\26fa"; } }
.glyphicon-blackboard { &:before { content: "\e218"; } }
.glyphicon-bed { &:before { content: "\e219"; } }
.glyphicon-apple { &:before { content: "\f8ff"; } }
.glyphicon-erase { &:before { content: "\e221"; } }
.glyphicon-hourglass { &:before { content: "\231b"; } }
.glyphicon-lamp { &:before { content: "\e223"; } }
.glyphicon-duplicate { &:before { content: "\e224"; } }
.glyphicon-piggy-bank { &:before { content: "\e225"; } }
.glyphicon-scissors { &:before { content: "\e226"; } }
.glyphicon-bitcoin { &:before { content: "\e227"; } }
.glyphicon-btc { &:before { content: "\e227"; } }
.glyphicon-xbt { &:before { content: "\e227"; } }
.glyphicon-yen { &:before { content: "\00a5"; } }
.glyphicon-jpy { &:before { content: "\00a5"; } }
.glyphicon-ruble { &:before { content: "\20bd"; } }
.glyphicon-rub { &:before { content: "\20bd"; } }
.glyphicon-scale { &:before { content: "\e230"; } }
.glyphicon-ice-lolly { &:before { content: "\e231"; } }
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
.glyphicon-education { &:before { content: "\e233"; } }
.glyphicon-option-horizontal { &:before { content: "\e234"; } }
.glyphicon-option-vertical { &:before { content: "\e235"; } }
.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
.glyphicon-modal-window { &:before { content: "\e237"; } }
.glyphicon-oil { &:before { content: "\e238"; } }
.glyphicon-grain { &:before { content: "\e239"; } }
.glyphicon-sunglasses { &:before { content: "\e240"; } }
.glyphicon-text-size { &:before { content: "\e241"; } }
.glyphicon-text-color { &:before { content: "\e242"; } }
.glyphicon-text-background { &:before { content: "\e243"; } }
.glyphicon-object-align-top { &:before { content: "\e244"; } }
.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
.glyphicon-object-align-left { &:before { content: "\e247"; } }
.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
.glyphicon-object-align-right { &:before { content: "\e249"; } }
.glyphicon-triangle-right { &:before { content: "\e250"; } }
.glyphicon-triangle-left { &:before { content: "\e251"; } }
.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
.glyphicon-triangle-top { &:before { content: "\e253"; } }
.glyphicon-console { &:before { content: "\e254"; } }
.glyphicon-superscript { &:before { content: "\e255"; } }
.glyphicon-subscript { &:before { content: "\e256"; } }
.glyphicon-menu-left { &:before { content: "\e257"; } }
.glyphicon-menu-right { &:before { content: "\e258"; } }
.glyphicon-menu-down { &:before { content: "\e259"; } }
.glyphicon-menu-up { &:before { content: "\e260"; } }

29
frontend/less/espo/bootstrap/grid.less Normal file
View File

@@ -0,0 +1,29 @@
// Grid
.container {
.container-fixed();
}
.container-fluid {
.container-fixed();
}
.row {
.make-row();
}
.make-grid-columns();
.make-grid(xs);
@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
@media (min-width: @screen-md-min) {
.make-grid(md);
}
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}

167
frontend/less/espo/bootstrap/input-groups.less Normal file
View File

@@ -0,0 +1,167 @@
// Input groups
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
&:focus {
z-index: 3;
}
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
}
.input-group-btn {
vertical-align: middle; // Match the inputs
}
.input-group-addon {
padding: var(--padding-base-vertical) var(--padding-base-horizontal);
font-size: var(--font-size-base);
font-weight: normal;
line-height: 1;
color: var(--input-color);
text-align: center;
background-color: var(--gray-lighter);
border: var(--1px) solid var(--input-border);
// Sizing
&.input-sm {
padding: var(--padding-small-vertical) var(--padding-small-horizontal);
font-size: var(--font-size-small);
}
&.input-lg {
padding: var(--padding-large-vertical) var(--padding-large-horizontal);
font-size: var(--font-size-large);
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: var(--minus-1px);
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: var(--minus-1px);
}
}
&:last-child {
> .btn,
> .btn-group {
z-index: 2;
margin-left: var(--minus-1px);
}
}
}

51
frontend/less/espo/bootstrap/labels.less Normal file
View File

@@ -0,0 +1,51 @@
.label {
display: inline;
font-size: var(--font-size-small);
line-height: 1;
color: var(--label-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
a& {
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
}
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: var(--minus-1px);
}
}
.label-default {
.label-variant-espo(var(--label-default-bg); var(--gray-light-10));
}
.label-primary {
.label-variant-espo(var(--brand-primary); var(--brand-primary-10));
}
.label-success {
.label-variant-espo(var(--brand-success); var(--brand-success-10));
}
.label-info {
.label-variant-espo(var(--brand-info); var(--brand-info-10));
}
.label-warning {
.label-variant-espo(var(--brand-warning); var(--brand-warning-10));
}
.label-danger {
.label-variant-espo(var(--brand-danger); var(--brand-danger-10));
}

110
frontend/less/espo/bootstrap/list-group.less Normal file
View File

@@ -0,0 +1,110 @@
// List groups
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: var(--20px);
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: var(--10px) var(--15px);
// Place the border on the list items and negative margin up for better styling
margin-bottom: var(--minus-1px);
border: var(--1px) solid var(--default-border-color);
// Round the first and last items
&:first-child {
}
&:last-child {
margin-bottom: 0;
}
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item,
button.list-group-item {
// Hover state
&:hover,
&:focus {
text-decoration: none;
background-color: @list-group-hover-bg;
}
}
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item {
// Disabled state
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
cursor: @cursor-disabled;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
}
}
}
.list-group-item-variant-espo(success; @state-success-bg; @state-success-text; @state-success-bg-5);
.list-group-item-variant-espo(info; @state-info-bg; @state-info-text; @state-info-bg-5);
.list-group-item-variant-espo(warning; @state-warning-bg; @state-warning-text; var(--state-warning-bg-5));
.list-group-item-variant-espo(danger; @state-danger-bg; @state-danger-text; var(--state-danger-bg-5));
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
margin-bottom: var(--5px);
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

61
frontend/less/espo/bootstrap/media.less Normal file
View File

@@ -0,0 +1,61 @@
.media {
// Proper spacing between instances of .media
margin-top: var(--15px);
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
zoom: 1;
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
}
.media-right,
.media > .pull-right {
padding-left: var(--10px);
}
.media-left,
.media > .pull-left {
padding-right: var(--10px);
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-top: 0;
margin-bottom: var(--5px);
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}

25
frontend/less/espo/bootstrap/mixins.less Normal file
View File

@@ -0,0 +1,25 @@
// Mixins
// --------------------------------------------------
// Utilities
@import "mixins/responsive-visibility.less";
@import "mixins/tab-focus.less";
@import "mixins/reset-text.less";
@import "mixins/text-overflow.less";
@import "mixins/vendor-prefixes.less";
// Components
@import "mixins/buttons.less";
@import "mixins/panels.less";
@import "mixins/nav-divider.less";
@import "mixins/forms.less";
@import "mixins/progress-bar.less";
// Skins
@import "mixins/border-radius.less";
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

16
frontend/less/espo/bootstrap/mixins/border-radius.less Normal file
View File

@@ -0,0 +1,16 @@
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}

6
frontend/less/espo/bootstrap/mixins/buttons.less Normal file
View File

@@ -0,0 +1,6 @@
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
}

5
frontend/less/espo/bootstrap/mixins/center-block.less Normal file
View File

@@ -0,0 +1,5 @@
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

20
frontend/less/espo/bootstrap/mixins/clearfix.less Normal file
View File

@@ -0,0 +1,20 @@
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

15
frontend/less/espo/bootstrap/mixins/forms.less Normal file
View File

@@ -0,0 +1,15 @@
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
select& {
height: @input-height;
line-height: @input-height;
}
textarea&,
select[multiple]& {
height: auto;
}
}

97
frontend/less/espo/bootstrap/mixins/grid-framework.less Normal file
View File

@@ -0,0 +1,97 @@
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}

120
frontend/less/espo/bootstrap/mixins/grid.less Normal file
View File

@@ -0,0 +1,120 @@
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
&:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row() {
margin-left: calc(var(--grid-gutter-width-half) * -1);
margin-right: calc(var(--grid-gutter-width-half) * -1);
&:extend(.clearfix all);
}
// Generate the extra small columns
.make-xs-column(@columns) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
}
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate the small columns
.make-sm-column(@columns) {
position: relative;
min-height: 1px;
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns) {
position: relative;
min-height: 1px;
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns) {
position: relative;
min-height: 1px;
padding-left: var(--grid-gutter-width-half);
padding-right: var(--grid-gutter-width-half);
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}

6
frontend/less/espo/bootstrap/mixins/nav-divider.less Normal file
View File

@@ -0,0 +1,6 @@
.nav-divider(@color: #e5e5e5) {
height: var(--1px);
margin: calc(var(--line-height-computed-half) - var(--1px)) 0;
overflow: hidden;
background-color: @color;
}

22
frontend/less/espo/bootstrap/mixins/panels.less Normal file
View File

@@ -0,0 +1,22 @@
.panel-variant(@border; @heading-text-color; @heading-border) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;
border-color: @heading-border;
+ .panel-collapse > .panel-body {
border-top-color: @border;
}
.badge {
background-color: @heading-text-color;
}
}
& > .panel-footer {
+ .panel-collapse > .panel-body {
border-bottom-color: @border;
}
}
}

3
frontend/less/espo/bootstrap/mixins/progress-bar.less Normal file
View File

@@ -0,0 +1,3 @@
.progress-bar-variant(@color) {
background-color: @color;
}

17
frontend/less/espo/bootstrap/mixins/reset-text.less Normal file
View File

@@ -0,0 +1,17 @@
.reset-text() {
font-family: @font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: var(--line-height-base);
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}

20
frontend/less/espo/bootstrap/mixins/responsive-visibility.less Normal file
View File

@@ -0,0 +1,20 @@
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& {
display: table !important;
}
tr& {
display: table-row !important;
}
th&, td& {
display: table-cell !important;
}
}
.responsive-invisibility() {
display: none !important;
}

4
frontend/less/espo/bootstrap/mixins/tab-focus.less Normal file
View File

@@ -0,0 +1,4 @@
.tab-focus() {
outline: var(--5px) auto -webkit-focus-ring-color;
outline-offset: var(--minus-2px);
}

7
frontend/less/espo/bootstrap/mixins/text-overflow.less Normal file
View File

@@ -0,0 +1,7 @@
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

35
frontend/less/espo/bootstrap/mixins/vendor-prefixes.less Normal file
View File

@@ -0,0 +1,35 @@
// Animations
.animation(@animation) {
animation: @animation;
}
.box-shadow(@shadow) {
box-shadow: @shadow;
}
.box-sizing(@boxmodel) {
box-sizing: @boxmodel;
}
.placeholder(@color: @input-color-placeholder) {
&::placeholder {
color: @color;
}
}
.transition(@transition) {
transition: @transition;
}
.transition-property(@transition-property) {
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
transition-timing-function: @timing-function;
}

104
frontend/less/espo/bootstrap/modals.less Normal file
View File

@@ -0,0 +1,104 @@
// Modals
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: var(--10px);
}
.modal-content {
position: relative;
background-color: var(--modal-content-bg);
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: var(--modal-backdrop-bg);
&.fade {
opacity: 0;
}
&.in {
opacity: @modal-backdrop-opacity;
}
}
.modal-header {
padding: var(--modal-title-padding);
border-bottom: var(--1px) solid var(--modal-header-border-color);
&:extend(.clearfix all);
}
// Close icon
.modal-header .close {
margin-top: var(--minus-2px);
}
.modal-title {
margin: 0;
line-height: var(--modal-title-line-height);
}
.modal-body {
position: relative;
padding: var(--modal-inner-padding);
}
.modal-footer {
padding: var(--modal-inner-padding);
text-align: right; // right align buttons
border-top: var(--1px) solid var(--modal-header-border-color);
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
.btn + .btn {
margin-left: var(--5px);
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
.btn-group .btn + .btn {
margin-left: var(--minus-1px);
}
.btn-block + .btn-block {
margin-left: 0;
}
}
@media (min-width: @screen-sm-min) {
.modal-dialog {
width: var(--600px);
margin: var(--30px) auto;
}
}

292
frontend/less/espo/bootstrap/navbar.less Normal file
View File

@@ -0,0 +1,292 @@
// Navbars
.navbar {
position: relative;
min-height: var(--navbar-height);
margin-bottom: var(--line-height-computed);
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
}
.navbar-header {
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
.navbar-collapse {
overflow-x: visible;
border-top: var(--1px) solid transparent;
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
}
}
.navbar-brand {
float: left;
line-height: var(--line-height-computed);
height: var(--navbar-height);
&:hover,
&:focus {
text-decoration: none;
}
> img {
display: block;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: var(--9px) var(--10px);
background-color: transparent;
background-image: none;
border: var(--1px) solid transparent;
// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: 0;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
.navbar-nav {
> li > a {
padding-top: var(--10px);
padding-bottom: var(--10px);
line-height: var(--line-height-computed);
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
box-shadow: none;
> li > a,
.dropdown-header {
padding: var(--5px) var(--15px) var(--5px) var(--25px);
}
> li > a {
line-height: var(--line-height-computed);
&:hover,
&:focus {
background-image: none;
}
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: var(--navbar-padding-vertical);
padding-bottom: var(--navbar-padding-vertical);
}
}
}
}
.navbar-form {
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: var(--5px);
&:last-child {
margin-bottom: 0;
}
}
}
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
~ .navbar-right {
margin-right: 0;
}
}
}
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: var(--navbar-inverse-bg-7);
}
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
.divider {
background-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}

205
frontend/less/espo/bootstrap/navs.less Normal file
View File

@@ -0,0 +1,205 @@
// Navs
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
&:extend(.clearfix all);
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @nav-link-padding; // Applied on small screen.
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: @cursor-disabled;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
}
}
// Nav dividers (deprecated with v3.0.1)
//
// This should have been removed in v3 with the dropping of `.nav-list`, but
// we missed it. We don't currently support this anywhere, but in the interest
// of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: var(--1px) solid @nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: var(--minus-1px);
// Actual tabs (as links)
> a {
margin-right: var(--2px);
line-height: var(--line-height-base);
border: var(--1px) solid transparent;
&:hover {
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
// Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border: var(--1px) solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified();
.nav-tabs-justified();
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: var(--2px);
margin-left: 0; // no need for this gap between nav items
}
}
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
> a {
text-align: center;
margin-bottom: var(--5px);
}
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
border-bottom: 0;
> li > a {
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: var(--1px)solid @nav-tabs-justified-link-border-color;
}
@media (min-width: @screen-sm-min) {
> li > a {
border-bottom: var(--1px) solid @nav-tabs-justified-link-border-color;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
}
// Tabbable tabs
// -------------------------
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
// Dropdowns
// -------------------------
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: var(--minus-1px);
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}

424
frontend/less/espo/bootstrap/normalize.less vendored Normal file
View File

@@ -0,0 +1,424 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
// without disabling user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
//
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//
audio,
canvas,
progress,
video {
display: inline-block; // 1
vertical-align: baseline; // 2
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
//
[hidden],
template {
display: none;
}
// Links
// ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background-color: transparent;
}
//
// Improve readability of focused elements when they are also in an
// active/hover state.
//
a:active,
a:hover {
outline: 0;
}
// Text-level semantics
// ==========================================================================
//
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari and Chrome.
//
dfn {
font-style: italic;
}
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9/10.
//
img {
border: 0;
}
//
// Correct overflow not hidden in IE 9/10/11.
//
svg:not(:root) {
overflow: hidden;
}
// Grouping content
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari.
//
figure {
margin: 1em var(--40px);
}
//
// Address differences between Firefox and other browsers.
//
hr {
box-sizing: content-box;
height: 0;
}
//
// Contain overflow in all browsers.
//
pre {
overflow: auto;
}
//
// Address odd `em`-unit font size rendering in all browsers.
//
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
// Forms
// ==========================================================================
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
//
//
// 1. Correct color not being inherited.
// Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
//
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//
// Address `overflow` set to `hidden` in IE 8/9/10/11.
//
button {
overflow: visible;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
input {
line-height: normal;
}
//
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
box-sizing: content-box; //2
}
//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Define consistent border, margin, and padding.
//
fieldset {
border: var(--10px) solid var(--gray-light);
margin: 0 var(--2px);
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// Remove default vertical scrollbar in IE 8/9/10/11.
//
textarea {
overflow: auto;
}
//
// Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
//
optgroup {
font-weight: bold;
}
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

198
frontend/less/espo/bootstrap/panels.less Normal file
View File

@@ -0,0 +1,198 @@
// Panels
.panel {
margin-bottom: var(--line-height-computed);
background-color: @panel-bg;
border: var(--1px) solid transparent;
}
// Panel contents
.panel-body {
&:extend(.clearfix all);
}
// Optional heading
.panel-heading {
padding: var(--6px) var(--10px);
border-bottom: var(--1px) solid transparent;
> .dropdown .dropdown-toggle {
color: inherit;
}
}
// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
color: inherit;
> a,
> small,
> .small,
> small > a,
> .small > a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: var(--6px) var(--10px);
background-color: @panel-footer-bg;
border-top: var(--1px) solid @panel-inner-border;
}
// List groups in panels
.panel {
> .list-group,
> .panel-collapse > .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
border-radius: 0;
}
// Add border top radius for first one
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
// Add border bottom radius for last one
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
}
}
}
> .panel-heading + .panel-collapse > .list-group {
.list-group-item:first-child {
.border-top-radius(0);
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
.list-group + .panel-footer {
border-top-width: 0;
}
// Tables in panels
.panel {
> .table,
> .table-responsive > .table,
> .panel-collapse > .table {
margin-bottom: 0;
}
> .panel-body + .table,
> .panel-body + .table-responsive,
> .table + .panel-body,
> .table-responsive + .panel-body {
border-top: var(--1px) solid @table-border-color;
}
> .table > tbody:first-child > tr:first-child th,
> .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
> thead,
> tbody {
> tr:first-child {
> td,
> th {
border-bottom: 0;
}
}
}
> tbody,
> tfoot {
> tr:last-child {
> td,
> th {
border-bottom: 0;
}
}
}
}
> .table-responsive {
border: 0;
margin-bottom: 0;
}
}
// Accordion
.panel-group {
margin-bottom: var(--line-height-computed);
.panel {
margin-bottom: 0;
+ .panel {
margin-top: var(--5px);
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse > .panel-body,
+ .panel-collapse > .list-group {
border-top: var(--1px) solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: var(--1px) solid @panel-inner-border;
}
}
}
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-border);
}
.panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-border);
}
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-border);
}

113
frontend/less/espo/bootstrap/popovers.less Normal file
View File

@@ -0,0 +1,113 @@
// Popovers
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
padding: var(--1px);
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: var(--font-size-base);
background-color: var(--popover-bg);
background-clip: padding-box;
&.top { margin-top: var(--popover-arrow-width-negative); }
&.right { margin-left: var(--popover-arrow-width); }
&.bottom { margin-top: var(--popover-arrow-width); }
&.left { margin-left: var(--popover-arrow-width-negative); }
transition: none;
}
.popover-title {
margin: 0;
padding: var(--9px) var(--14px);
font-size: var(--font-size-base);
}
.popover-content {
padding: var(--9px) var(--14px);
}
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: var(--popover-arrow-outer-width);
}
.popover > .arrow:after {
border-width: var(--popover-arrow-width);
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: var(--popover-arrow-outer-width-negative);
border-bottom-width: 0;
border-top-color: var(--dropdown-border);
bottom: var(--popover-arrow-outer-width-negative);
&:after {
content: " ";
bottom: var(--1px);
margin-left: var(--popover-arrow-width-negative);
border-bottom-width: 0;
border-top-color: var(--dropdown-bg);
}
}
&.right > .arrow {
top: 50%;
left: var(--popover-arrow-outer-width-negative);
margin-top: var(--popover-arrow-outer-width-negative);
border-left-width: 0;
border-right-color: var(--dropdown-border);
&:after {
content: " ";
left: var(--1px);
bottom: var(--popover-arrow-width-negative);
border-left-width: 0;
border-right-color: var(--dropdown-bg);
}
}
&.bottom > .arrow {
left: 50%;
margin-left: var(--popover-arrow-outer-width-negative);
border-top-width: 0;
border-bottom-color: var(--dropdown-border);
top: var(--popover-arrow-outer-width-negative);
&:after {
content: " ";
top: var(--1px);
margin-left: var(--popover-arrow-width-negative);
border-top-width: 0;
border-bottom-color: var(--dropdown-bg);
}
}
&.left > .arrow {
top: 50%;
right: var(--popover-arrow-outer-width-negative);
margin-top: var(--popover-arrow-outer-width-negative);
border-right-width: 0;
border-left-color: var(--dropdown-border);
&:after {
content: " ";
right: var(--1px);
border-right-width: 0;
border-left-color: var(--dropdown-bg);
bottom: var(--popover-arrow-width-negative);
}
}
}

101
frontend/less/espo/bootstrap/print.less Normal file
View File

@@ -0,0 +1,101 @@
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Bootstrap components
.navbar {
display: none;
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
// Bootstrap specific changes end
}

45
frontend/less/espo/bootstrap/progress-bars.less Normal file
View File

@@ -0,0 +1,45 @@
@keyframes progress-bar-stripes {
from { background-position: var(--40px) 0; }
to { background-position: 0 0; }
}
.progress {
overflow: hidden;
height: var(--line-height-computed);
margin-bottom: var(--line-height-computed);
background-color: var(--default-heading-bg-color);
}
// Bar of progress
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: var(--font-size-small);
line-height: var(--line-height-computed);
color: var(--white-color);
text-align: center;
background-color: var(--brand-primary);
.transition(width .6s ease);
}
.progress.active .progress-bar,
.progress-bar.active {
.animation(progress-bar-stripes 2s linear infinite);
}
.progress-bar-success {
.progress-bar-variant(var(--brand-success));
}
.progress-bar-info {
.progress-bar-variant(var(--brand-info));
}
.progress-bar-warning {
.progress-bar-variant(var(--brand-warning));
}
.progress-bar-danger {
.progress-bar-variant(var(--brand-danger));
}

35
frontend/less/espo/bootstrap/responsive-embed.less Normal file
View File

@@ -0,0 +1,35 @@
// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
}
// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
padding-bottom: 75%;
}

194
frontend/less/espo/bootstrap/responsive-utilities.less Normal file
View File

@@ -0,0 +1,194 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
.responsive-invisibility();
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
.visible-xs-block {
@media (max-width: @screen-xs-max) {
display: block !important;
}
}
.visible-xs-inline {
@media (max-width: @screen-xs-max) {
display: inline !important;
}
}
.visible-xs-inline-block {
@media (max-width: @screen-xs-max) {
display: inline-block !important;
}
}
.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
.visible-sm-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: block !important;
}
}
.visible-sm-inline {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline !important;
}
}
.visible-sm-inline-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline-block !important;
}
}
.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
.visible-md-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: block !important;
}
}
.visible-md-inline {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline !important;
}
}
.visible-md-inline-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline-block !important;
}
}
.visible-lg {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
.visible-lg-block {
@media (min-width: @screen-lg-min) {
display: block !important;
}
}
.visible-lg-inline {
@media (min-width: @screen-lg-min) {
display: inline !important;
}
}
.visible-lg-inline-block {
@media (min-width: @screen-lg-min) {
display: inline-block !important;
}
}
.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
.hidden-lg {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
// Note: Deprecated .visible-print as of v3.2.0
.visible-print {
.responsive-invisibility();
@media print {
.responsive-visibility();
}
}
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print {
@media print {
.responsive-invisibility();
}
}

136
frontend/less/espo/bootstrap/scaffolding.less Normal file
View File

@@ -0,0 +1,136 @@
//
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}
// Body reset
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: @text-color;
background-color: @body-bg;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
a {
color: @link-color;
text-decoration: none;
// Espo-fix
&:hover/*,
&:focus */{
color: @link-hover-color;
text-decoration: @link-hover-decoration;
}
/*&:focus {
.tab-focus();
}*/
}
// Figures
//
// We reset this here because previously Normalize had no `figure` margins. This
// ensures we don't break anyone's use of the element.
figure {
margin: 0;
}
// Images
img {
vertical-align: middle;
}
// Perfect circle
.img-circle {
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
margin-top: var(--line-height-computed);
margin-bottom: var(--line-height-computed);
border: 0;
border-top: var(--1px) solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
}

194
frontend/less/espo/bootstrap/tables.less Normal file
View File

@@ -0,0 +1,194 @@
// Tables
caption {
padding-top: var(--table-cell-padding);
padding-bottom: var(--table-cell-padding);
color: @text-muted;
text-align: left;
}
th {
text-align: left;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: var(--line-height-computed);
// Cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: var(--table-cell-padding);
line-height: var(--line-height-base);
vertical-align: top;
border-top: var(--1px) solid @table-border-color;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: var(--2px) solid @table-border-color;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: var(--2px) solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
}
.table-bordered {
border: var(--1px) solid @table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: var(--1px) solid @table-border-color;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: var(--2px);
}
}
}
.table-striped {
> tbody > tr:nth-of-type(odd) {
background-color: var(--table-bg-accent);
}
}
.table-hover {
> tbody > tr:hover {
background-color: @table-bg-hover;
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
table {
td,
th {
&[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-row-variant-espo(active; @table-bg-active; @table-bg-active-5);
.table-row-variant-espo(success; @state-success-bg; @state-success-bg-5);
.table-row-variant-espo(info; @state-info-bg; @state-info-bg-5);
.table-row-variant-espo(warning; @state-warning-bg; var(--state-warning-bg-5));
.table-row-variant-espo(danger; @state-danger-bg; var(--state-danger-bg-5));
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
.table-responsive {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) {
width: 100%;
margin-bottom: calc(var(--line-height-computed) * 0.75);
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: var(--1px) solid @table-border-color;
// Tighten up spacing
> .table {
margin-bottom: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot {
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}

103
frontend/less/espo/bootstrap/tooltip.less Normal file
View File

@@ -0,0 +1,103 @@
// Tooltips
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
.reset-text();
font-size: var(--font-size-small);
opacity: 0;
&.in {
opacity: @tooltip-opacity;
}
&.top { margin-top: var(--minus-3px); padding: @tooltip-arrow-width 0; }
&.right { margin-left: var(--3px); padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: var(--3px); padding: @tooltip-arrow-width 0; }
&.left { margin-left: var(--minus-3px); padding: 0 @tooltip-arrow-width; }
transition: none;
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: var(--200px);
padding: var(--3px) var(--8px);
color: var(--tooltip-color);
text-align: center;
background-color: var(--tooltip-bg);
border-radius: var(--border-radius-small);
line-height: var(--line-height-small);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: @tooltip-arrow-width-negative;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: var(--tooltip-bg);
}
&.top-left .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
margin-bottom: @tooltip-arrow-width-negative;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: var(--tooltip-bg);
}
&.top-right .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
margin-bottom: @tooltip-arrow-width-negative;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: var(--tooltip-bg);
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: @tooltip-arrow-width-negative;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: var(--tooltip-bg);
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: @tooltip-arrow-width-negative;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: var(--tooltip-bg);
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: @tooltip-arrow-width-negative;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: var(--tooltip-bg);
}
&.bottom-left .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
margin-top: @tooltip-arrow-width-negative;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: var(--tooltip-bg);
}
&.bottom-right .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
margin-top: @tooltip-arrow-width-negative;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: var(--tooltip-bg);
}
}

180
frontend/less/espo/bootstrap/type.less Normal file
View File

@@ -0,0 +1,180 @@
// Typography
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
small,
.small {
font-weight: normal;
line-height: 1;
color: @headings-small-color;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: var(--line-height-computed);
margin-bottom: calc(var(--line-height-computed) / 2);
small,
.small {
font-size: 65%;
}
}
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: calc(var(--line-height-computed) / 2);
margin-bottom: calc(var(--line-height-computed) / 2);
small,
.small {
font-size: 75%;
}
}
p {
margin: 0 0 var(--line-height-computed-half);
}
mark,
.mark {
background-color: @state-warning-bg;
padding: .2em;
}
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-muted {
color: @text-muted;
}
.page-header {
padding-bottom: calc(var(--line-height-computed-half) - var(--1px));
margin: calc(var(--line-height-computed) * 2) 0 var(--line-height-computed);
border-bottom: var(--1px) solid @page-header-border-color;
}
ul,
ol {
margin-top: 0;
margin-bottom: var(--line-height-computed-half);
ul,
ol {
margin-bottom: 0;
}
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
.list-unstyled();
margin-left: var(--minus-5px);
> li {
display: inline-block;
padding-left: var(--5px);
padding-right: var(--5px);
}
}
// Description Lists
dl {
margin-top: 0; // Remove browser default
margin-bottom: var(--line-height-computed);
}
dt,
dd {
line-height: var(--line-height-base);
}
dt {
font-weight: bold;
}
dd {
margin-left: 0; // Undo browser default
}
// Abbreviations and acronyms
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: var(--1px) dotted @abbr-border-color;
}
.initialism {
font-size: 90%;
.text-uppercase();
}
// Blockquotes
blockquote {
padding: var(--line-height-computed-half) var(--line-height-computed);
margin: 0 0 var(--line-height-computed);
font-size: calc(var(--font-size-base) * 1.25);
border-left: var(--5px) solid @blockquote-border-color;
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
footer {
display: block;
font-size: 80%; // back to default font-size
line-height: var(--line-height-base);
color: @blockquote-small-color;
&:before {
content: '\2014 \00A0'; // em dash, nbsp
}
}
}
.blockquote-reverse {
padding-right: var(--15px);
padding-left: 0;
border-right: var(--5px) solid @blockquote-border-color;
border-left: 0;
text-align: right;
// Account for citation
footer,
small,
.small {
&:before { content: ''; }
&:after {
content: '\00A0 \2014'; // nbsp, em dash
}
}
}
// Addresses
address {
margin-bottom: var(--line-height-computed);
font-style: normal;
line-height: var(--line-height-base);
}

58
frontend/less/espo/bootstrap/utilities.less Normal file
View File

@@ -0,0 +1,58 @@
//
// Utility classes
// --------------------------------------------------
// Floats
// -------------------------
.clearfix {
.clearfix();
}
.center-block {
.center-block();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.pull-start {
float: inline-start !important;
}
.pull-end {
float: inline-end !important;
}
// Toggling content
// -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
}
// For Affix plugin
// -------------------------
.affix {
position: fixed;
}

75
frontend/less/espo/bootstrap/variables.less Normal file
View File

@@ -0,0 +1,75 @@
// Variables
@link-hover-decoration: underline;
@headings-font-weight: 500;
@headings-color: inherit;
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
@caret-width-base: var(--4px);
@caret-width-large: var(--5px);
@btn-link-disabled-color: @gray-light;
@input-color-placeholder: var(--gray-light);
@legend-color: @gray-dark;
@cursor-disabled: not-allowed;
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@grid-columns: 12;
@grid-float-breakpoint: @screen-sm-min;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-bg: transparent;
@nav-link-padding: var(--10px) var(--15px);
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-justified-active-link-border-color: @body-bg;
@tooltip-opacity: .7;
@tooltip-arrow-width: var(--5px);
@tooltip-arrow-width-negative: var(--minus-5px);
@modal-backdrop-opacity: .5;
@list-group-disabled-color: @gray-light;
@list-group-disabled-bg: @gray-lighter;
@list-group-disabled-text-color: @list-group-disabled-color;
@abbr-border-color: @gray-light;
@headings-small-color: @gray-light;
@blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter;
@hr-border: @gray-lighter;

21
frontend/less/espo/bootstrap/wells.less Normal file
View File

@@ -0,0 +1,21 @@
// Wells
.well {
min-height: var(--20px);
padding: var(--19px);
margin-bottom: var(--20px);
background-color: @well-bg;
border: var(--1px) solid @well-border;
code {
word-wrap: break-word;
}
}
.well-lg {
padding: var(--24px);
}
.well-sm {
padding: var(--9px);
}

4464
frontend/less/espo/custom.less Normal file
View File

File diff suppressed because it is too large Load Diff

71
frontend/less/espo/elements/alert.less Normal file
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

116
frontend/less/espo/elements/grid.less Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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));
}

13
frontend/less/espo/fonts.less Normal file
View File

@@ -0,0 +1,13 @@
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("@{font-path}/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("@{font-path}/inter/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("@{font-path}/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("@{font-path}/inter/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("@{font-path}/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("@{font-path}/inter/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("@{font-path}/inter/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("@{font-path}/inter/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "JetBrainsMono"; font-style: normal; font-weight: 400; font-display: swap; src: url("@{font-path}/jet-brains-mono/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrainsMono"; font-style: italic; font-weight: 400; font-display: swap; src: url("@{font-path}/jet-brains-mono/JetBrainsMono-Italic.woff2") format("woff2"); }
@font-path: "../../fonts";

104
frontend/less/espo/iframe/iframe.less Normal file
View File

@@ -0,0 +1,104 @@
@import "../elements/scrollbar.less";
body, table {
font-size: var(--font-size-base);
font-family: @font-family-base;
color: @text-color;
}
body {
> p:last-child,
> ul:last-child,
> ol:last-child,
> pre:last-child,
> blockquote:last-child {
margin-bottom: 0;
}
background-color: var(--panel-bg);
line-height: var(--line-height-base);
}
body {
margin: 0;
}
a {
color: var(--text-link-color);
&:hover,
&:focus:hover {
color: var(--text-link-hover-color);
}
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
table {
display: table;
border-collapse: separate;
border-color: #e8eced;
border-spacing: 0;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table-bordered {
border: var(--1px) solid @default-border-color;
}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
border: var(--1px) solid @default-border-color;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
padding: var(--table-cell-padding);
line-height: var(--line-height-base);
vertical-align: top;
border-top: var(--1px) solid @default-border-color;
}
pre {
display: block;
padding: calc((var(--line-height-computed) - var(--1px)) / 2);
margin: 0 0 var(--line-height-computed-half);
font-size: calc(var(--font-size-base) - var(--1px));
line-height: var(--line-height-base);
word-break: break-all;
word-wrap: break-word;
color: var(--code-color);
background-color: var(--code-bg);
border: var(--1px) solid var(--code-border-color);
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
blockquote {
padding-left: var(--padding-base-horizontal);
margin-left: var(--padding-base-horizontal);
border-left: var(--3px) solid var(--blockquote-border-color);
}

6
frontend/less/espo/iframe/main.less Normal file
View File

@@ -0,0 +1,6 @@
@import "../bootstrap/variables.less";
@import "../value-variables.less";
@import "../variables.less";
@import "../root-variables.less";
@import "../fonts.less";
@import "iframe.less";

1
frontend/less/espo/init.less Normal file
View File

@@ -0,0 +1 @@
@import "bootstrap/bootstrap.less";

965
frontend/less/espo/layout-side.less Normal file
View File

@@ -0,0 +1,965 @@
body[data-navbar="side"] {
#navbar .navbar {
.navbar-right-container {
input.global-search-input {
width: var(--260px);
padding-bottom: var(--4px);
padding-top: var(--4px);
max-width: 50vw;
}
}
}
@media (min-width: @grid-float-breakpoint) {
#header .navbar-body {
.navbar & {
padding-left: 0;
padding-right: 0;
}
}
}
@media screen and (min-width: @screen-sm-min) {
#navbar > .navbar {
.navbar-logo-container {
display: flex;
width: 100%;
}
border-right: var(--navbar-border-width) solid var(--navbar-inverse-border);
> .navbar-body {
> ul {
> li.tab,
> li.more {
> a {
margin-right: var(--navbar-border-width);
}
}
}
}
.navbar-left-container {
&::after {
content: '';
position: absolute;
z-index: 1;
box-shadow: var(--navbar-box-shadow);
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
#content {
margin-left: auto;
margin-right: auto;
}
&,
&.minimized.side-menu-opened {
#header {
width: var(--navbar-width);
}
#navbar .navbar {
.navbar-body {
padding-left: 0;
padding-right: 0;
}
.nav > li.more > .dropdown-menu > li > ul.dropdown-menu {
margin-top: 0;
}
.nav > li.more > .dropdown-menu,
.nav > li.more > .dropdown-menu > li.tab-group > ul.dropdown-menu,
.nav > li.tab-group > .dropdown-menu {
top: 0;
left: var(--navbar-width);
padding-top: 0;
padding-bottom: 0;
position: fixed;
overflow-y: hidden;
}
.nav > li.more > .dropdown-menu,
.nav > li.tab-group > .dropdown-menu {
border-left-width: 0;
min-width: var(--180px);
}
.nav > li.tab-group > .dropdown-menu {
border-bottom-left-radius: 0;
border-top-right-radius: var(--dropdown-border-radius);
}
.nav > li.more > .dropdown-menu {
border-top-width: 0;
border-bottom-left-radius: 0;
}
.nav li.tab-group {
span.full-label {
padding-right: var(--8px);
}
.group-caret {
position: absolute;
}
}
ul.tabs {
width: var(--navbar-width);
margin-left: 0;
overflow-y: hidden;
> li.tab-group .group-caret {
right: var(--13px);
}
> li.tab-divider {
> div {
padding-top: calc(var(--navbar-tab-vertical-padding) + var(--4px));
padding-bottom: var(--navbar-tab-vertical-padding);
padding-left: var(--navbar-tab-left-padding);
padding-right: var(--navbar-tab-right-padding);
display: block;
> .label-text {
color: var(--navbar-inverse-color);
&:empty {
&:before {
content: "\200b";
}
}
}
}
}
> li.more {
> ul {
> li.tab-divider {
min-height: var(--10px);
margin-top: var(--9px);
&:not(:first-child):before {
height: var(--1px);
margin: calc(var(--19px) / 2) 0;
overflow: hidden;
background-color: var(--dropdown-divider-bg);
display: block;
content: ' ';
}
&:first-child {
> div {
padding-top: var(--navbar-tab-vertical-padding);
}
}
> div {
&.no-text {
display: none;
}
padding-top: calc(var(--navbar-tab-vertical-padding) - var(--3px));
padding-bottom: var(--navbar-tab-vertical-padding);
padding-left: var(--navbar-tab-left-padding);
padding-right: var(--navbar-tab-right-padding);
> .label-text {
color: var(--gray-light);
white-space: nowrap;
}
}
}
}
}
}
a.minimizer {
color: @navbar-inverse-link-color;
text-decoration: none;
margin-top: var(--5px);
display: inline-block;
margin-left: calc(var(--navbar-tab-left-padding) + var(--3px));
}
a.minimizer > span.left {
display: inline;
}
a.minimizer > span.right {
display: none;
}
a.side-menu-button {
width: var(--navbar-minimized-width);
padding-top: var(--navbar-tab-vertical-padding);
padding-bottom: var(--navbar-tab-vertical-padding);
text-align: center;
display: none;
> span {
width: var(--16px);
text-align: center;
}
height: var(--navbar-height);
}
.side-menu-backdrop {
z-index: 1200;
position: fixed;
bottom: var(--20px);
top: 0;
left: 0;
height: var(--top-bar-height);
width: 100%;
margin-left: var(--navbar-width);
}
}
#navbar {
.navbar {
top: 0;
border-width: 0 var(--navbar-border-width) 0 0;
position: fixed;
z-index: @zindex-navbar-fixed;
width: var(--navbar-width);
margin-bottom: 0;
height: 100%;
}
.navbar-brand img {
max-width: calc(var(--navbar-width) - var(--navbar-minimized-width));
height: var(--navbar-height);
}
a.navbar-brand {
max-width: calc(var(--navbar-width) - var(--navbar-minimized-width));
height: var(--navbar-height);
margin-left: 0;
}
.navbar-header {
width: var(--navbar-width);
height: var(--navbar-header-height);
display: block;
padding-bottom: calc((var(--navbar-header-height) - var(--navbar-height)) / 2);
padding-top: calc((var(--navbar-header-height) - var(--navbar-height)) / 2);
}
.navbar-header > a.minimizer {
width: var(--30px);
height: var(--30px);
float: right;
}
@supports selector(::-webkit-scrollbar) {
.navbar-right-container > .navbar-right {
width: calc(100vw - var(--scroll-width));
}
}
.navbar-right {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
position: fixed;
bottom: var(--20px);
top: 0;
left: 0;
height: var(--top-bar-height);
width: calc(100vw - var(--18px));
background-color: var(--navbar-bg);
margin-left: var(--navbar-width);
padding-right: var(--navbar-width);
> li {
float: none;
display: flex;
flex-direction: row;
> a {
width: var(--34px);
&:focus {
background-color: transparent;
}
}
}
.global-search-container a.global-search-button {
color: var(--navbar-link-color);
height: var(--top-bar-height);
&:hover {
color: var(--navbar-link-hover-color);
}
}
.quick-create-container {
width: var(--34px);
}
.menu-container {
width: var(--34px);
}
> li > a {
color: var(--navbar-link-color);
&:hover {
color: var(--navbar-link-hover-color);
background-color: transparent;
}
padding: var(--5px) var(--10px);
}
> li.open > a {
background-color: var(--navbar-link-active-bg);
&,
&:hover,
&:active {
color: var(--navbar-link-hover-color);
}
}
.notifications-badge-container {
width: var(--34px);
}
}
ul.tabs {
margin-top: 0;
li {
float: none;
}
li > a {
padding-top: var(--navbar-tab-vertical-padding);
padding-bottom: var(--navbar-tab-vertical-padding);
padding-left: var(--navbar-tab-left-padding);
padding-right: var(--navbar-tab-right-padding);
height: var(--navbar-height);
}
li.tab > a {
padding-left: var(--navbar-tab-left-padding);
padding-right: var(--navbar-tab-right-padding);
}
}
.navbar-form {
margin-top: 0;
margin-bottom: 0;
}
}
}
&.minimized:not(.side-menu-opened) {
#navbar > .navbar {
.navbar-header {
a.side-menu-button {
border-right: var(--navbar-border-width) solid var(--navbar-inverse-border)
}
}
}
}
&.minimized.side-menu-opened {
#navbar > .navbar {
.navbar-logo-container {
width: ~"calc(100% - var(--navbar-minimized-width))";
float: right;
display: flex;
}
box-shadow: var(--modal-box-shadow);
.navbar-right {
display: none;
}
.side-menu-backdrop {
display: none;
}
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-block;
}
}
a.navbar-brand {
float: right;
img {
display: inline;
}
}
a.side-menu-button {
display: inline-block;
}
.dropdown-menu {
z-index: 2000;
}
}
.stick-sub,
.sticked-bar,
.list-sticky-bar {
visibility: hidden;
}
}
}
@media screen and (max-width: @screen-xs-max) {
#navbar {
a.minimizer {
display: none;
}
.navbar ul.nav > li.global-search-container {
display: block;
}
.side-menu-button {
display: none;
}
.navbar-logo-container {
display: block;
}
}
#global-search-input {
width: 100% !important;
max-width: unset;
}
}
#navbar {
ul.tabs {
> li > a {
height: var(--navbar-height);
}
> li.more > ul > li > a > span.full-label {
padding-left: var(--navbar-tab-text-left-padding);
position: static;
}
> li a > span.full-label {
position: static;
padding-left: var(--navbar-tab-text-left-padding);
}
> li a > span.short-label {
position: absolute;
}
> 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: var(--16px);
text-align: center;
}
> li > a > span.full-label {
display: inline-block;
text-overflow: ellipsis;
max-width: ~"calc(100%)";
overflow: hidden;
white-space: nowrap;
}
}
.navbar-header {
> a.minimizer span {
margin-top: var(--7px);
margin-left: var(--8px);
}
}
.navbar-header > a.navbar-brand {
&,
&:active {
color: @navbar-inverse-link-color;
}
}
.more-icon {
display: inline;
}
.navbar li.tab > a {
border-left-width: 0;
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) {
&.minimized {
#header {
width: var(--navbar-minimized-width);
}
#navbar {
.nav > li.more > ul.dropdown-menu,
.nav > li.tab-group > .dropdown-menu {
left: var(--navbar-minimized-width);
}
.navbar-logo-container {
display: none;
}
.navbar-brand {
img {
display: none;
}
}
a.side-menu-button {
display: inline-block;
}
.navbar-header {
width: var(--navbar-minimized-width);
height: var(--navbar-header-height);
}
a.minimizer > span.left {
display: none;
}
a.minimizer > span.right {
display: inline;
}
.navbar {
width: var(--navbar-minimized-width);
}
ul.tabs {
width: var(--navbar-minimized-width);
> li > a {
padding-left: var(--navbar-tab-left-padding);
}
> li.tab > a {
padding-left: var(--navbar-tab-left-padding);
}
> 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: calc(var(--1px) * -1);
visibility: visible;
}
> li.tab-group .group-caret {
right: var(--5px);
}
}
.navbar-right {
margin-left: var(--navbar-minimized-width);
padding-right: var(--navbar-minimized-width);
}
}
#content {
padding-left: calc(var(--navbar-minimized-width) + var(--container-padding));
max-width: calc(var(--container-max-width) + var(--navbar-minimized-width));
}
#footer {
margin-left: var(--navbar-minimized-width);
}
> .side-menu-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2140;
height: 100%;
margin-left: var(--navbar-width);
}
}
&.minimized:not(.side-menu-opened) {
#navbar {
ul.tabs {
> li.tab-divider {
> div {
> .label-text {
display: none;
}
&:before {
content: "\200b";
}
}
}
}
}
}
&:not(.minimized) {
#navbar {
ul.tabs.navbar-nav {
> li {
> a {
.short-label {
//color: var(--navbar-inverse-color);
}
}
}
}
}
}
&.has-navbar > .content {
padding-left: calc(var(--navbar-width) + var(--container-padding));
max-width: calc(var(--container-max-width) + var(--navbar-width));
}
padding-top: var(--top-bar-height);
height: 100%;
> .content {
height: auto;
min-height: 100%;
padding-bottom: calc(var(--16px) + var(--footer-height));
}
> footer {
clear: both;
position: relative;
height: var(--footer-height);
max-height: var(--footer-height);
margin-top: calc(var(--footer-height) * -1);
margin-left: var(--navbar-width);
> p {
padding: 0 var(--panel-padding);
line-height: var(--footer-height);
}
}
input.global-search-input {
min-height: var(--top-bar-height);
max-height: var(--top-bar-height);
margin-top: 0 !important;
}
}
@media (min-width: @screen-lg-min) {
.container {
max-width: var(--container-max-width);
}
}
@media (min-width: @screen-sm-min) {
.stick-sub.button-container {
width: ~"calc(100% - var(--navbar-width))";
}
&.minimized .stick-sub.button-container {
width: ~"calc(100% - var(--navbar-minimized-width))";
}
}
.stick-sub {
left: var(--navbar-width);
}
&.minimized .stick-sub {
left: var(--navbar-minimized-width);
}
.list-sticky-bar {
width: ~"calc(100% - var(--navbar-width))";
left: var(--navbar-width);
top: var(--top-bar-height);
padding-left: var(--container-padding);
}
&.minimized .list-sticky-bar {
width: ~"calc(100% - var(--navbar-minimized-width))";
left: var(--navbar-minimized-width);
}
@media screen and (max-width: @screen-xs-max) {
.stick-sub,
&.minimized .stick-sub {
left: 0;
}
.list-sticky-bar,
&.minimized .list-sticky-bar {
width: 100%;
top: 0;
left: 0;
}
#navbar .navbar {
.navbar-right-container {
input.global-search-input {
width: 100%;
max-width: unset;
}
}
}
> .content {
margin-top: calc(var(--21px) * -2);
padding-top: calc(var(--21px) * 2);
}
> header + .content {
margin-top: calc(var(--95px) * -1);
padding-top: var(--95px);
margin-bottom: calc(var(--20px) * -1);
padding-bottom: var(--20px);
}
> footer {
margin-top: var(--19px);
height: unset;
p {
padding: var(--2px) var(--panel-padding) var(--2px);
}
}
height: 100%;
> .content {
height: auto;
min-height: 100%;
}
}
@media screen and (min-width: (@container-max-width + @navbar-width)) {
#content {
#main {
.nested-categories-container + .list-container > .list,
> .list-container > .list {
margin-left: 0;
margin-right: 0;
> 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-with-border-radius();
}
> .row > .left-container + .list-container > .list {
margin-right: 0;
.list-with-border-radius();
}
}
.list-categories-column + .list-main-column .list-container,
.folders-container + .list-container {
.list {
margin-right: 0
}
}
}
}
@media screen and (min-width: (@container-max-width + @navbar-minimized-width)) {
&.minimized {
#content {
#main {
> .list-container > .list,
.nested-categories-container + .list-container > .list {
margin-left: 0;
margin-right: 0;
> 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-with-border-radius();
}
> .row > .left-container + .list-container > .list {
margin-right: 0;
.list-with-border-radius();
}
}
}
.list-categories-column + .list-main-column .list-container,
.folders-container + .list-container {
.list {
margin-right: 0
}
}
}
}
.list-kanban {
.kanban-head-container.sticked {
margin-top: var(--top-bar-height);
}
}
.stick-sub {
margin-top: var(--top-bar-height);
@media screen and (max-width: @screen-xs-max) {
margin-top: 0;
}
}
@media screen and (min-width: @screen-sm-min) {
.folders-container.sticked {
// @todo Use variable instead of 46px. It's a sticky bar height.
top: calc(var(--top-bar-height) + var(--46px));
}
}
&.minimized {
@media screen and (min-width: @screen-sm-min) {
.folders-container.sticked {}
}
}
.alert {
min-height: var(--top-bar-height);
}
#navbar {
.navbar-header {
> a {
color: var(--navbar-inverse-link-icon-color);
&:hover,
&:focus {
color: var(--navbar-inverse-link-icon-hover-color);
background-color: @navbar-inverse-link-hover-bg;
}
}
a.navbar-brand {
margin-left: auto;
margin-right: auto;
}
}
}
.side-menu-backdrop {
background-color: var(--modal-backdrop-bg);
backdrop-filter: var(--modal-backdrop-filter);
opacity: 1;
}
input.global-search-input {
border: var(--1px) solid var(--navbar-bg);
&:focus {
border-color: var(--navbar-bg);
}
}
@media screen and (min-width: @screen-sm-min) {
input.global-search-input {
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}
#global-search-panel,
#last-viewed-panel,
#notifications-panel {
margin-top: var(--top-bar-height);
}
.notifications-badge-container {
> .notifications-button > .number-badge {
top: var(--3px);
left: var(--22px);
}
}
.navbar-nav.navbar-right > .open {
> a,
> a:hover,
> a:active,
> a:focus {
background-color: var(--gray-lighter-10);
}
}
}
}

417
frontend/less/espo/layout-top.less Normal file
View File

@@ -0,0 +1,417 @@
body:not([data-navbar="side"]) {
padding-top: calc(var(--10px) * 5 + var(--2px));
height: 100%;
> .content {
height: auto;
min-height: 100%;
padding-bottom: calc(var(--16px) + var(--footer-height));
}
> footer {
margin-top: calc(var(--footer-height) * -1);
clear: both;
position: relative;
height: var(--footer-height);
max-height: var(--footer-height);
p {
padding: 0 var(--panel-padding);
line-height: var(--footer-height);
}
}
@media screen and (max-width: @screen-xs-max) {
padding-top: 0;
> .content {
margin-top: calc(var(--42px) * -1);
padding-top: var(--42px);
}
> header + .content {
margin-top: calc(var(--95px) * -1);
padding-top: var(--95px);
margin-bottom: calc(var(--20px) * -1);
padding-bottom: var(--20px);
}
> footer {
margin-top: var(--19px);
height: unset;
p {
padding: var(--2px) var(--panel-padding) var(--2px);
}
}
}
#navbar .navbar {
.navbar-body {
@media (min-width: @grid-float-breakpoint) {
.navbar & {
padding-left: 0;
padding-right: 0;
}
}
}
box-shadow: var(--navbar-box-shadow);
@media screen and (min-width: @screen-sm-min) {
border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
display: flex;
flex-wrap: nowrap;
width: ~"calc(100vw)";
> .navbar-header {
display: flex;
float: none;
}
> .navbar-body {
display: flex;
float: none;
flex-grow: 1;
> .tabs {
display: flex;
float: none;
}
> .navbar-right-container {
display: flex;
float: none;
flex-grow: 1;
justify-content: end;
padding-right: var(--18px);
}
@supports selector(::-webkit-scrollbar) {
> .navbar-right-container {
padding-right: var(--scroll-width);
}
}
}
}
input.global-search-input {
border-radius: var(--border-radius) !important;
}
.navbar-brand {
padding: 0;
width: var(--logo-width);
height: var(--navbar-height);
img.logo {
max-width: var(--logo-width);
}
}
.side-menu-button {
display: none;
}
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
top: 0;
border-width: 0 0 var(--1px);
a.minimizer {
display: none;
}
ul.tabs {
span.full-label {
display: inline;
}
span.short-label > span {
display: inline-block;
width: var(--16px);
text-align: center;
}
.more-icon {
display: inline;
}
> li.more,
> li.tab-group {
> ul,
> ul > li > ul {
padding-top: 0;
padding-bottom: 0;
}
> ul > li > ul > li > a,
> ul > li > a {
padding-top: var(--navbar-tab-vertical-padding);
padding-bottom: var(--navbar-tab-vertical-padding);
height: var(--38px);
> span.full-label {
padding-inline-start: var(--30px);
position: static;
}
> span.short-label {
position: absolute;
}
}
}
> li span.short-label {
> span.short-label-text {
display: none;
}
}
li.tab-group .group-caret {
position: absolute;
}
}
.navbar-right {
> li > a {
width: calc(var(--4px) * 10 + var(--4px));
}
}
@media screen and (min-width: @screen-sm-min) {
input.global-search-input {
width: calc(var(--190px));
max-height: var(--30px);
padding-bottom: var(--4px);
padding-top: var(--4px);
}
#global-search-panel,
#last-viewed-panel {
margin-top: var(--1px);
}
.global-search-button {
margin-top: calc(var(--1px) * -1);
> span.icon {
line-height: var(--24px);
}
}
.navbar-right {
a.global-search-button,
> li > a {
color: var(--navbar-inverse-link-icon-color);
&:hover {
color: var(--navbar-inverse-link-icon-hover-color);
}
}
> li.dropdown .open > a {
color: var(--navbar-inverse-link-icon-hover-color);
}
}
}
}
@media screen and (max-width: @screen-xs-max) {
#navbar .navbar {
position: static;
ul.nav > li.global-search-container {
display: block;
}
li.tab > a {
border-right-width: 0;
border-right-style: solid;
border-color: transparent;
}
ul.tabs {
> li a > span.full-label {
position: static;
padding-left: var(--30px);
}
> li a > span.short-label {
position: absolute;
}
}
.navbar-right-container {
input.global-search-input {
width: 100%;
}
}
.global-search-button {
height: var(--33px);
}
}
}
@media screen and (min-width: @screen-sm-min) {
#navbar .navbar {
max-height: var(--navbar-height);
overflow: hidden;
ul.tabs {
> li > a > span.short-label {
display: block;
float: inline-start;
position: relative;
inset-inline-start: calc(var(--4px) * -1);
margin-inline-end: var(--4px);
}
li.more > li > a {
padding-left: var(--10px);
}
}
ul.nav > li.tab > a {
border-bottom-width: 0;
border-bottom-style: solid;
border-color: transparent;
padding-bottom: var(--navbar-padding-vertical);
}
ul.dropdown-menu > li.tab > a {
border-inline-start-width: 0;
border-inline-start-style: solid;
border-color: transparent;
padding-inline-start: calc(1rem - var(--1px));
}
.nav > li.more > .dropdown-menu > li.tab-group > ul.dropdown-menu,
.nav > li.tab-group > .dropdown-menu {
overflow-y: hidden;
}
.nav > li.more > .dropdown-menu > li.tab-group > ul.dropdown-menu {
position: fixed;
}
.nav li.tab-group {
span.full-label {
padding-inline-end: var(--8px);
}
}
ul.nav > li.tab-group > a {
> span.full-label {
padding-inline-end: var(--10px);
}
> span.group-caret {
top: var(--17px);
transform: rotate(90deg);
}
}
.navbar-form {
padding-top: var(--2px);
margin-top: 0;
margin-bottom: 0;
}
}
}
@media (min-width: @screen-lg-min) {
.container {
max-width: var(--container-max-width);
}
}
.stick-sub {
left: 0;
}
.list-sticky-bar {
width: 100%;
left: 0;
top: var(--navbar-height);
padding-left: var(--container-padding);
}
@media screen and (max-width: @screen-xs-max) {
.list-sticky-bar,
&.minimized .list-sticky-bar {
width: 100%;
top: 0;
left: 0;
}
}
@media screen and (min-width: @container-max-width) {
#content {
#main {
> .list-container > .list,
> .row > .left-container + .list-container > .list {
margin-left: 0;
margin-right: 0;
> 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-with-border-radius();
}
.nested-categories-container + .list-container > .list {
margin-left: 0;
margin-right: 0;
.list-with-border-radius();
}
}
.list-categories-column + .list-main-column .list-container,
.folders-container + .list-container {
.list {
margin-right: 0
}
}
}
}
.list-kanban {
.kanban-head-container.sticked {
margin-top: var(--navbar-height);
}
}
&:has(> #header > #navbar) {
.stick-sub {
margin-top: var(--navbar-height);
@media screen and (max-width: @screen-xs-max) {
margin-top: 0;
}
}
}
@media screen and (min-width: @screen-sm-min) {
.folders-container.sticked {
//top: calc(var(--8px) * 10 + var(--7px));
// @todo Use variable instead of 46px. It's a sticky bar height.
top: calc(var(--navbar-height) + var(--46px));
}
}
}

15
frontend/less/espo/main.less Normal file
View File

@@ -0,0 +1,15 @@
@import "init.less";
@import "value-variables.less";
@import "variables.less";
@import "mixins.less";
@import "root-variables.less";
@import "misc.less";
@import "layout-top.less";
@import "layout-side.less";
@import "custom.less";
@import "utilities.less";
@import "rtl/main.less";
body {
--theme-name: Espo;
}

15
frontend/less/espo/misc.less Normal file
View File

@@ -0,0 +1,15 @@
@import "misc/selectize/selectize.less";
@import "misc/selectize/custom.less";
@import "misc/selectize/selectize.bootstrap3.less";
@import "misc/summernote/summernote.less";
@import "misc/summernote/icons.less";
@import "misc/datepicker/datepicker.less";
@import "misc/timepicker/timepicker.less";
@import "misc/timeline/timeline.less";
@import "misc/fullcalendar/fullcalendar.less";
@import "misc/colorpicker/colorpicker.less";
@import "misc/fontawesome/fontawesome.less";
@import "misc/gridstack/gridstack.less";
@import "misc/intl-tel-input/intlTelInput.less";
@import "fonts.less";

261
frontend/less/espo/misc/colorpicker/colorpicker.less Normal file
View File

File diff suppressed because one or more lines are too long

332
frontend/less/espo/misc/datepicker/datepicker.less Normal file
View File

@@ -0,0 +1,332 @@
.datepicker.datepicker-dropdown {
&:before,
&:after {
display: none;
}
&.datepicker-orient-bottom {
margin-top: 0;
}
.next,
.prev {
color: var(--gray-soft);
}
}
.datepicker {
&-inline {
width: var(--220px);
}
direction: ltr;
&-rtl {
direction: rtl;
&.dropdown-menu { left: auto; }
table tr td span {
float: right;
}
}
&-dropdown {
top: 0;
left: 0;
padding: var(--4px);
&:before {
content: '';
display: inline-block;
border-left: var(--7px) solid transparent;
border-right: var(--7px) solid transparent;
border-bottom: var(--7px) solid var(--dropdown-border);
border-top: 0;
border-bottom-color: rgba(0,0,0,.2);
position: absolute;
}
&:after {
content: '';
display: inline-block;
border-left: var(--6px) solid transparent;
border-right: var(--6px)solid transparent;
border-bottom: var(--6px) solid var(--dropdown-bg);
border-top: 0;
position: absolute;
}
&.datepicker-orient-left:before { left: var(--6px); }
&.datepicker-orient-left:after { left: var(--7px); }
&.datepicker-orient-right:before { right: var(--6px); }
&.datepicker-orient-right:after { right: var(--7px); }
&.datepicker-orient-bottom:before { top: var(--minus-7px); }
&.datepicker-orient-bottom:after { top: var(--minus-6px); }
&.datepicker-orient-top:before {
bottom: var(--minus-7px);
border-bottom: 0;
border-top: var(--7px) solid var(--dropdown-border);
}
&.datepicker-orient-top:after {
bottom: var(--minus-6px);
border-bottom: 0;
border-top: var(--6px) solid var(--dropdown-bg);
}
}
table {
margin: 0;
user-select: none;
tr {
td, th {
text-align: center;
width: var(--30px);
height: var(--30px);
border-radius: var(--border-radius-small);
border: none;
}
}
}
// Inline display inside a table presents some problems with
// border and background colors.
.table-striped & table tr {
td, th {
background-color: transparent;
}
}
table tr td {
&.old,
&.new {
color: @btn-link-disabled-color;
}
&.day:hover,
&.focused {
background: var(--dropdown-link-hover-bg);
cursor: pointer;
}
&.disabled,
&.disabled:hover {
background: none;
color: @btn-link-disabled-color;
cursor: default;
}
&.highlighted {
@highlighted-bg: @state-info-bg;
.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)
);
border-radius: var(--border-radius);
&.focused {
background: var(--state-info-bg-10);
}
&.disabled,
&.disabled:active {
background: @highlighted-bg;
color: @btn-link-disabled-color;
}
}
&.today {
@today-bg: var(--state-warning-bg);
.button-variant-espo(
var(--state-warning-text);
var(--state-warning-bg);
var(--state-warning-bg-5);
var(--state-warning-bg-5);
var(--state-warning-bg-5);
var(--state-warning-bg-5);
var(--state-warning-bg-5)
);
&.focused {
background: var(--state-warning-bg-10);
}
&.disabled,
&.disabled:active {
background: @today-bg;
color: @btn-link-disabled-color;
}
}
&.range {
@range-bg: @gray-lighter;
.button-variant-espo(
#000;
@range-bg;
var(--gray-lighter-5);
var(--gray-lighter-10);
var(--gray-lighter-17);
var(--gray-lighter-12);
var(--gray-lighter-25)
);
border-radius: 0;
&.focused {
background: var(--gray-lighter-10);
}
&.disabled,
&.disabled:active {
background: @range-bg;
color: @btn-link-disabled-color;
}
}
&.range.highlighted {
@range-highlighted-bg: var(--btn-success-bg);
.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)
);
&.focused {
background: var(--btn-success-active-bg);
}
&.disabled,
&.disabled:active {
background: @range-highlighted-bg;
color: @btn-link-disabled-color;
}
}
&.range.today {
@range-today-bg: var(--gray-lighter-orange-mix);
.button-variant-espo(
#000;
@range-today-bg;
var(--gray-lighter-orange-mix-5);
var(--gray-lighter-orange-mix-10);
var(--gray-lighter-orange-mix-12);
var(--gray-lighter-orange-mix-17);
var(--gray-lighter-orange-mix-25)
);
&.disabled,
&.disabled:active {
background: @range-today-bg;
color: @btn-link-disabled-color;
}
}
&.selected,
&.selected.highlighted {
.button-variant-espo(
#fff;
@gray-light;
var(--gray-light-5);
var(--gray-light-10);
var(--gray-light-17);
var(--gray-light-12);
var(--gray-light-25)
);
text-shadow: 0 var(--minus-1px) 0 rgba(0,0,0,.25);
}
&.active,
&.active.highlighted {
.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)
);
text-shadow: 0 var(--minus-1px) 0 rgba(0,0,0,.25);
}
span {
display: block;
width: 23%;
height: calc(var(--32px) + var(--22px));
line-height: calc(var(--32px) + var(--22px));
float: left;
margin: 1%;
cursor: pointer;
border-radius: var(--border-radius-small);
&:hover,
&.focused {
background: var(--dropdown-link-hover-bg);
}
&.disabled,
&.disabled:hover {
background: none;
color: @btn-link-disabled-color;
cursor: default;
}
&.active,
&.active:hover,
&.active.disabled,
&.active.disabled:hover {
.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)
);
text-shadow: 0 var(--minus-1px) 0 rgba(0,0,0,.25);
}
&.old,
&.new {
color: @btn-link-disabled-color;
}
}
}
.datepicker-switch {
width: calc(var(--100px) + var(--40px) + var(--5px));
}
.datepicker-switch,
.prev,
.next,
tfoot tr th {
cursor: pointer;
&:hover {
background: var(--dropdown-link-hover-bg);
}
}
.prev, .next {
&.disabled {
visibility: hidden;
}
}
// Basic styling for calendar-week cells
.cw {
font-size: var(--10px);
width: var(--12px);
padding: 0 var(--2px) 0 var(--5px);
vertical-align: middle;
}
}
.input-group.date .input-group-addon {
cursor: pointer;
}
.input-daterange {
width: 100%;
input {
text-align: center;
}
input:first-child {
border-radius: var(--3px) 0 0 var(--3px);
}
input:last-child {
border-radius: 0 var(--3px) var(--3px) 0;
}
.input-group-addon {
width: auto;
min-width: var(--16px);
padding: var(--4px) var(--5px);
line-height: var(--line-height-base);
border-width: var(--1px) 0;
margin-left: calc(var(--5px) * -1);
margin-right: calc(var(--5px) * -1);
}
}

7
frontend/less/espo/misc/fontawesome/fontawesome.less vendored Normal file
View File

@@ -0,0 +1,7 @@
@import "fontawesome/fontawesome.less";
@import "fontawesome/regular.less";
@import "fontawesome/solid.less";
@fa-font-path: "../../fonts";

152
frontend/less/espo/misc/fontawesome/fontawesome/_animated.less vendored Normal file
View File

@@ -0,0 +1,152 @@
// animating icons
// --------------------------
.@{fa-css-prefix}-beat {
animation-name: ~'@{fa-css-prefix}-beat';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)';
}
.@{fa-css-prefix}-bounce {
animation-name: ~'@{fa-css-prefix}-bounce';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1))';
}
.@{fa-css-prefix}-fade {
animation-name: ~'@{fa-css-prefix}-fade';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))';
}
.@{fa-css-prefix}-beat-fade {
animation-name: ~'@{fa-css-prefix}-beat-fade';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))';
}
.@{fa-css-prefix}-flip {
animation-name: ~'@{fa-css-prefix}-flip';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)';
}
.@{fa-css-prefix}-shake {
animation-name: ~'@{fa-css-prefix}-shake';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, linear)';
}
.@{fa-css-prefix}-spin {
animation-name: ~'@{fa-css-prefix}-spin';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0s)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 2s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, linear)';
}
.@{fa-css-prefix}-spin-reverse {
--@{fa-css-prefix}-animation-direction: reverse;
}
.@{fa-css-prefix}-pulse,
.@{fa-css-prefix}-spin-pulse {
animation-name: ~'@{fa-css-prefix}-spin';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, steps(8));';
}
// if agent or operating system prefers reduced motion, disable animations
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.@{fa-css-prefix}-beat,
.@{fa-css-prefix}-bounce,
.@{fa-css-prefix}-fade,
.@{fa-css-prefix}-beat-fade,
.@{fa-css-prefix}-flip,
.@{fa-css-prefix}-pulse,
.@{fa-css-prefix}-shake,
.@{fa-css-prefix}-spin,
.@{fa-css-prefix}-spin-pulse {
animation-delay: -1ms;
animation-duration: 1ms;
animation-iteration-count: 1;
transition-delay: 0s;
transition-duration: 0s;
}
}
@keyframes ~'@{fa-css-prefix}-beat' {
0%, 90% { transform: scale(1); }
45% { transform: ~'scale(var(--@{fa-css-prefix}-beat-scale, 1.25))'; }
}
@keyframes ~'@{fa-css-prefix}-bounce' {
0% { transform: scale(1,1) translateY(0); }
10% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-start-scale-x, 1.1),var(--@{fa-css-prefix}-bounce-start-scale-y, 0.9))' translateY(0); }
30% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--@{fa-css-prefix}-bounce-jump-scale-y, 1.1))' ~'translateY(var(--@{fa-css-prefix}-bounce-height, -0.5em))'; }
50% { transform: ~'scale(var(--@{fa-css-prefix}-bounce-land-scale-x, 1.05),var(--@{fa-css-prefix}-bounce-land-scale-y, 0.95))' translateY(0); }
57% { transform: ~'scale(1,1) translateY(var(--@{fa-css-prefix}-bounce-rebound, -0.125em))'; }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes ~'@{fa-css-prefix}-fade' {
50% { opacity: ~'var(--@{fa-css-prefix}-fade-opacity, 0.4)'; }
}
@keyframes ~'@{fa-css-prefix}-beat-fade' {
0%, 100% {
opacity: ~'var(--@{fa-css-prefix}-beat-fade-opacity, 0.4)';
transform: scale(1);
}
50% {
opacity: 1;
transform: ~'scale(var(--@{fa-css-prefix}-beat-fade-scale, 1.125))';
}
}
@keyframes ~'@{fa-css-prefix}-flip' {
50% {
transform: ~'rotate3d(var(--@{fa-css-prefix}-flip-x, 0), var(--@{fa-css-prefix}-flip-y, 1), var(--@{fa-css-prefix}-flip-z, 0), var(--@{fa-css-prefix}-flip-angle, -180deg))';
}
}
@keyframes ~'@{fa-css-prefix}-shake' {
0% { transform: rotate(-15deg); }
4% { transform: rotate(15deg); }
8%, 24% { transform: rotate(-18deg); }
12%, 28% { transform: rotate(18deg); }
16% { transform: rotate(-22deg); }
20% { transform: rotate(22deg); }
32% { transform: rotate(-12deg); }
36% { transform: rotate(12deg); }
40%, 100% { transform: rotate(0deg); }
}
@keyframes ~'@{fa-css-prefix}-spin' {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

20
frontend/less/espo/misc/fontawesome/fontawesome/_bordered-pulled.less vendored Normal file
View File

@@ -0,0 +1,20 @@
// bordered + pulled icons
// -------------------------
.@{fa-css-prefix}-border {
border-color: ~'var(--@{fa-css-prefix}-border-color, @{fa-border-color})';
border-radius: ~'var(--@{fa-css-prefix}-border-radius, @{fa-border-radius})';
border-style: ~'var(--@{fa-css-prefix}-border-style, @{fa-border-style})';
border-width: ~'var(--@{fa-css-prefix}-border-width, @{fa-border-width})';
padding: ~'var(--@{fa-css-prefix}-border-padding, @{fa-border-padding})';
}
.@{fa-css-prefix}-pull-left {
float: left;
margin-right: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})';
}
.@{fa-css-prefix}-pull-right {
float: right;
margin-left: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})';
}

48
frontend/less/espo/misc/fontawesome/fontawesome/_core.less vendored Normal file
View File

@@ -0,0 +1,48 @@
// base icon class definition
// -------------------------
.@{fa-css-prefix} {
font-family: ~"var(--@{fa-css-prefix}-style-family, '@{fa-style-family}')";
font-weight: ~'var(--@{fa-css-prefix}-style, @{fa-style})';
}
.fas,
.far,
.fab,
.@{fa-css-prefix}-solid,
.@{fa-css-prefix}-regular,
.@{fa-css-prefix}-brands,
.@{fa-css-prefix}-sharp-solid,
.@{fa-css-prefix}-classic,
.@{fa-css-prefix} {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: ~'var(--@{fa-css-prefix}-display, @{fa-display})';
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
.fas::before,
.far::before,
.fab::before,
.@{fa-css-prefix}-solid::before,
.@{fa-css-prefix}-regular::before,
.@{fa-css-prefix}-brands::before,
.@{fa-css-prefix}::before {
content: ~'var(@{fa-icon-property})';
}
.@{fa-css-prefix}-classic,
.fas,
.@{fa-css-prefix}-solid,
.far,
.@{fa-css-prefix}-regular {
font-family: 'Font Awesome 6 Free';
}
.@{fa-css-prefix}-brands,
.fab {
font-family: 'Font Awesome 6 Brands';
}

7
frontend/less/espo/misc/fontawesome/fontawesome/_fixed-width.less vendored Normal file
View File

@@ -0,0 +1,7 @@
// fixed-width icons
// -------------------------
.@{fa-css-prefix}-fw {
text-align: center;
width: @fa-fw-width;
}

11
frontend/less/espo/misc/fontawesome/fontawesome/_icons.less vendored Normal file
View File

@@ -0,0 +1,11 @@
// specific icon class definition
// -------------------------
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
each(.fa-icons(), {
.@{fa-css-prefix}-@{key} {
@{fa-icon-property}: @value;
}
});

18
frontend/less/espo/misc/fontawesome/fontawesome/_list.less vendored Normal file
View File

@@ -0,0 +1,18 @@
// icons in a list
// -------------------------
.@{fa-css-prefix}-ul {
list-style-type: none;
margin-left: ~'var(--@{fa-css-prefix}-li-margin, @{fa-li-margin})';
padding-left: 0;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
left: calc(~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})' * -1);
position: absolute;
text-align: center;
width: ~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})';
line-height: inherit;
}

68
frontend/less/espo/misc/fontawesome/fontawesome/_mixins.less vendored Normal file
View File

@@ -0,0 +1,68 @@
// mixins
// --------------------------
// base rendering for an icon
.fa-icon() {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
// sets relative font-sizing and alignment (in _sizing)
.fa-size(@font-size) {
font-size: (@font-size / @fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
line-height: (1 / @font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: ((6 / @font-size) - (3 / 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
}
// only display content to screen readers
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
.fa-sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
// use in conjunction with .sr-only to only display content when it's focused
.fa-sr-only-focusable() {
&:not(:focus) {
.fa-sr-only();
}
}
// sets a specific icon family to use alongside style + icon mixins
.fa-family-classic() {
&:extend(.fa-classic all);
}
// convenience mixins for declaring pseudo-elements by CSS variable,
// including all style-specific font properties
.fa-icon-solid(@fa-var) {
&:extend(.fa-solid all);
& { @{fa-icon-property}: @fa-var; @{fa-duotone-icon-property}: %("%s%s", @fa-var, @fa-var); }
}
.fa-icon-regular(@fa-var) {
&:extend(.fa-regular all);
& { @{fa-icon-property}: @fa-var; @{fa-duotone-icon-property}: %("%s%s", @fa-var, @fa-var); }
}
.fa-icon-brands(@fa-var) {
&:extend(.fa-brands all);
& { @{fa-icon-property}: @fa-var; @{fa-duotone-icon-property}: %("%s%s", @fa-var, @fa-var); }
}

31
frontend/less/espo/misc/fontawesome/fontawesome/_rotated-flipped.less vendored Normal file
View File

@@ -0,0 +1,31 @@
// rotating + flipping icons
// -------------------------
.@{fa-css-prefix}-rotate-90 {
transform: rotate(90deg);
}
.@{fa-css-prefix}-rotate-180 {
transform: rotate(180deg);
}
.@{fa-css-prefix}-rotate-270 {
transform: rotate(270deg);
}
.@{fa-css-prefix}-flip-horizontal {
transform: scale(-1, 1);
}
.@{fa-css-prefix}-flip-vertical {
transform: scale(1, -1);
}
.@{fa-css-prefix}-flip-both,
.@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical {
transform: scale(-1, -1);
}
.@{fa-css-prefix}-rotate-by {
transform: rotate(~'var(--@{fa-css-prefix}-rotate-angle, 0)');
}

14
frontend/less/espo/misc/fontawesome/fontawesome/_screen-reader.less vendored Normal file
View File

@@ -0,0 +1,14 @@
// screen-reader utilities
// -------------------------
// only display content to screen readers
.sr-only,
.@{fa-css-prefix}-sr-only {
.fa-sr-only();
}
// use in conjunction with .sr-only to only display content when it's focused
.sr-only-focusable,
.@{fa-css-prefix}-sr-only-focusable {
.fa-sr-only-focusable();
}

2042
frontend/less/espo/misc/fontawesome/fontawesome/_shims.less vendored Normal file
View File

File diff suppressed because it is too large Load Diff

19
frontend/less/espo/misc/fontawesome/fontawesome/_sizing.less vendored Normal file
View File

@@ -0,0 +1,19 @@
// sizing icons
// -------------------------
// literal magnification scale
.sizes-literal(@factor) when (@factor > 0) {
.sizes-literal((@factor - 1));
.@{fa-css-prefix}-@{factor}x {
font-size: (@factor * 1em);
}
}
.sizes-literal(10);
// step-based scale (with alignment)
each(.fa-sizes(), {
.@{fa-css-prefix}-@{key} {
.fa-size(@value);
}
});

31
frontend/less/espo/misc/fontawesome/fontawesome/_stacked.less vendored Normal file
View File

@@ -0,0 +1,31 @@
// stacking icons
// -------------------------
.@{fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: @fa-stack-vertical-align;
width: @fa-stack-width;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: ~'var(--@{fa-css-prefix}-stack-z-index, @{fa-stack-z-index})';
}
.@{fa-css-prefix}-stack-1x {
line-height: inherit;
}
.@{fa-css-prefix}-stack-2x {
font-size: 2em;
}
.@{fa-css-prefix}-inverse {
color: ~'var(--@{fa-css-prefix}-inverse, @{fa-inverse})';
}

29
frontend/less/espo/misc/fontawesome/fontawesome/brands.less vendored Normal file
View File

@@ -0,0 +1,29 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
--@{fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}
@font-face {
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-brands-400.ttf') format('truetype');
}
.fab,
.@{fa-css-prefix}-brands {
font-weight: 400;
}
each(.fa-brand-icons(), {
.@{fa-css-prefix}-@{key} { @{fa-icon-property}: @value; }
});

20
frontend/less/espo/misc/fontawesome/fontawesome/fontawesome.less vendored Normal file
View File

@@ -0,0 +1,20 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
// Font Awesome core compile (Web Fonts-based)
// -------------------------
@import "_variables.less";
@import "_mixins.less";
@import "_core.less";
@import "_sizing.less";
@import "_fixed-width.less";
@import "_list.less";
@import "_bordered-pulled.less";
@import "_animated.less";
@import "_rotated-flipped.less";
@import "_stacked.less";
@import "_icons.less";
@import "_screen-reader.less";

25
frontend/less/espo/misc/fontawesome/fontawesome/regular.less vendored Normal file
View File

@@ -0,0 +1,25 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-style-family-classic: '@{fa-style-family}';
--@{fa-css-prefix}-font-regular: normal 400 1em/1 '@{fa-style-family}';
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-regular-400.ttf') format('truetype');
}
.far,
.@{fa-css-prefix}-regular {
font-weight: 400;
}

25
frontend/less/espo/misc/fontawesome/fontawesome/solid.less vendored Normal file
View File

@@ -0,0 +1,25 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-style-family-classic: '@{fa-style-family}';
--@{fa-css-prefix}-font-solid: normal 900 1em/1 '@{fa-style-family}';
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('@{fa-font-path}/fa-solid-900.ttf') format('truetype');
}
.fas,
.@{fa-css-prefix}-solid {
font-weight: 900;
}

10
frontend/less/espo/misc/fontawesome/fontawesome/v4-shims.less vendored Normal file
View File

@@ -0,0 +1,10 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
// V4 shims compile (Web Fonts-based)
// -------------------------
@import '_variables.less';
@import '_shims.less';

218
frontend/less/espo/misc/fullcalendar/fullcalendar.less Normal file
View File

@@ -0,0 +1,218 @@
:root {
--fc-neutral-bg-color: none;
--fc-now-indicator-color: var(--brand-danger);
--fc-border-color: var(--calendar-border);
--fc-today-bg-color: var(--calendar-today-bg);
--fc-page-bg-color: var(--body-bg);
}
.date-title {
text-align: center !important;
user-select: none;
}
.date-title h4 {
margin: var(--10px) 0 0;
}
.dashlet-body div.calendar-container {
height: 100% !important;
}
.calendar.fc {
user-select: none;
}
//-----
@media screen and (max-width: @screen-xs-max) {
.fc {
font-size: 85%;
}
}
.fc {
overflow: hidden;
@supports not selector(::-webkit-scrollbar) {
.fc-scroller {
scrollbar-width: thin;
}
.fc-timegrid {
table.fc-col-header th:last-child,
table.fc-scrollgrid-sync-table td:last-child {
.fc-scrollgrid-sync-inner {
border-right: var(--1px) solid var(--calendar-border);
}
}
table[role="presentation"] td.fc-day:last-child > div.fc-timegrid-col-frame {
border-right: var(--1px) solid var(--calendar-border);
}
}
}
th {
font-weight: normal;
}
.fc-daygrid-event-harness {
.fc-event-main-frame > .fc-event-time {
overflow: unset;
}
}
.fc-daygrid-block-event .fc-event-time {
font-weight: 400;
}
.fc-event-main > .user > .avatar {
position: relative;
top: -1px;
}
.fc-col-header {
user-select: none;
.fc-event {
border-radius: var(--border-radius) !important;
min-height: var(--19px) !important; // ?
}
a.fc-col-header-cell-cushion,
a.fc-timegrid-axis-cushion {
&,
&:hover {
text-decoration: none;
color: var(--text-color);
}
}
}
.fc-timegrid-now-indicator-container {
overflow: visible; // ?
}
.fc-bg-event {
opacity: 0.5;
}
.fc-event-selected,
.fc-event:focus {
box-shadow: none;
&::after {
background: transparent;
}
}
.fc-event.event-canceled {
&,
.fc-event-title,
.fc-event-main {
text-decoration: line-through !important;
}
}
.fc-daygrid-event,
.fc-timegrid-event,
.fc-timegrid-more-link {
border-radius: var(--border-radius);
}
.fc-day-today.fc-timegrid-col {
background-color: transparent;
}
.fc-day-today {
.fc-col-header-cell-cushion,
.fc-daygrid-day-number {
&,
&:hover {
color: var(--state-warning-text);
}
}
}
.fc-timegrid-now-indicator-line {
opacity: 0.9;
height: var(--2px);
border-top: var(--1px) solid var(--brand-danger);
border-bottom-width: 0;
background-color: var(--brand-danger);
&:before {
content: "";
position: inherit;
left: var(--minus-4px);
border-radius: 50%;
height: var(--8px);
width: var(--8px);
background-color: var(--brand-danger);
display: inline-block;
top: var(--minus-4px);
opacity: 0.9;
}
}
.fc-timegrid-now-indicator-arrow {
display: none;
}
.fc-timegrid-slot-minor {
border-top-style: none;
}
.fc-timegrid-slot-label-cushion,
a.fc-daygrid-day-number {
&,
&:hover {
color: var(--text-color);
text-decoration: none;
cursor: default;
}
}
a.fc-daygrid-week-number {
&,
&:hover {
color: var(--gray-soft);
text-decoration: none;
cursor: default;
}
padding-left: var(--4px);
}
border-style: none;
.fc-scrollgrid {
border: 0;
td:last-of-type {
border-right-color: transparent;
border-right-width: 0;
}
}
th[role='presentation'] {
border-right-color: transparent !important;
border-right-width: 0;
}
.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent;
border-bottom-width: 0;
}
tr[role="presentation"]:first-child:not(:last-child) > td {
border-bottom: var(--1px) solid var(--calendar-border);
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
border-bottom-width: 0;
}
}

300
frontend/less/espo/misc/gridstack/gridstack.less Normal file
View File

@@ -0,0 +1,300 @@
/**
* gridstack SASS styles 5.1.1
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/
:root .grid-stack-item > .ui-resizable-handle {
filter: none;
}
.grid-stack {
position: relative;
}
.grid-stack.grid-stack-rtl {
direction: ltr;
}
.grid-stack.grid-stack-rtl > .grid-stack-item {
direction: rtl;
}
.grid-stack .grid-stack-placeholder > .placeholder-content {
border: 1px dashed lightgray;
margin: 0;
position: absolute;
width: auto;
z-index: 0 !important;
text-align: center;
}
.grid-stack > .grid-stack-item {
min-width: 8.3333333333%;
position: absolute;
padding: 0;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
margin: 0;
position: absolute;
width: auto;
overflow-x: hidden;
overflow-y: auto;
}
.grid-stack > .grid-stack-item > .ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
display: none;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
z-index: 100;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
opacity: 0.8;
}
.grid-stack > .grid-stack-item > .ui-resizable-se,
.grid-stack > .grid-stack-item > .ui-resizable-sw {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
background-repeat: no-repeat;
background-position: center;
transform: rotate(45deg);
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
transform: rotate(-45deg);
}
.grid-stack > .grid-stack-item > .ui-resizable-nw {
cursor: nw-resize;
width: 20px;
height: 20px;
top: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-n {
cursor: n-resize;
height: 10px;
top: 0;
left: 25px;
right: 25px;
}
.grid-stack > .grid-stack-item > .ui-resizable-ne {
cursor: ne-resize;
width: 20px;
height: 20px;
top: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-e {
cursor: e-resize;
width: 10px;
top: 15px;
bottom: 15px;
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
cursor: se-resize;
width: 20px;
height: 20px;
}
.grid-stack > .grid-stack-item > .ui-resizable-s {
cursor: s-resize;
height: 10px;
left: 25px;
bottom: 0;
right: 25px;
}
.grid-stack > .grid-stack-item > .ui-resizable-sw {
cursor: sw-resize;
width: 20px;
height: 20px;
}
.grid-stack > .grid-stack-item > .ui-resizable-w {
cursor: w-resize;
width: 10px;
top: 15px;
bottom: 15px;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
display: none !important;
}
.grid-stack > .grid-stack-item[gs-w="0"] {
width: 0;
}
.grid-stack > .grid-stack-item[gs-x="0"] {
left: 0;
}
.grid-stack > .grid-stack-item[gs-min-w="0"] {
min-width: 0;
}
.grid-stack > .grid-stack-item[gs-max-w="0"] {
max-width: 0;
}
.grid-stack > .grid-stack-item[gs-w="1"] {
width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="1"] {
left: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="1"] {
min-width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="1"] {
max-width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="2"] {
width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="2"] {
left: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="2"] {
min-width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="2"] {
max-width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="3"] {
width: 25%;
}
.grid-stack > .grid-stack-item[gs-x="3"] {
left: 25%;
}
.grid-stack > .grid-stack-item[gs-min-w="3"] {
min-width: 25%;
}
.grid-stack > .grid-stack-item[gs-max-w="3"] {
max-width: 25%;
}
.grid-stack > .grid-stack-item[gs-w="4"] {
width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="4"] {
left: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="4"] {
min-width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="4"] {
max-width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="5"] {
width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="5"] {
left: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="5"] {
min-width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="5"] {
max-width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="6"] {
width: 50%;
}
.grid-stack > .grid-stack-item[gs-x="6"] {
left: 50%;
}
.grid-stack > .grid-stack-item[gs-min-w="6"] {
min-width: 50%;
}
.grid-stack > .grid-stack-item[gs-max-w="6"] {
max-width: 50%;
}
.grid-stack > .grid-stack-item[gs-w="7"] {
width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="7"] {
left: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="7"] {
min-width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="7"] {
max-width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="8"] {
width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="8"] {
left: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="8"] {
min-width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="8"] {
max-width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="9"] {
width: 75%;
}
.grid-stack > .grid-stack-item[gs-x="9"] {
left: 75%;
}
.grid-stack > .grid-stack-item[gs-min-w="9"] {
min-width: 75%;
}
.grid-stack > .grid-stack-item[gs-max-w="9"] {
max-width: 75%;
}
.grid-stack > .grid-stack-item[gs-w="10"] {
width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="10"] {
left: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="10"] {
min-width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="10"] {
max-width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="11"] {
width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="11"] {
left: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="11"] {
min-width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="11"] {
max-width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="12"] {
width: 100%;
}
.grid-stack > .grid-stack-item[gs-x="12"] {
left: 100%;
}
.grid-stack > .grid-stack-item[gs-min-w="12"] {
min-width: 100%;
}
.grid-stack > .grid-stack-item[gs-max-w="12"] {
max-width: 100%;
}
.grid-stack.grid-stack-1 > .grid-stack-item {
min-width: 100%;
}
.grid-stack.grid-stack-1 > .grid-stack-item[gs-w="1"] {
width: 100%;
}
.grid-stack.grid-stack-1 > .grid-stack-item[gs-x="1"] {
left: 100%;
}
.grid-stack.grid-stack-1 > .grid-stack-item[gs-min-w="1"] {
min-width: 100%;
}
.grid-stack.grid-stack-1 > .grid-stack-item[gs-max-w="1"] {
max-width: 100%;
}
.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
-webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
}
.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging, .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing, .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
-webkit-transition: left 0s, top 0s, height 0s, width 0s;
-moz-transition: left 0s, top 0s, height 0s, width 0s;
-ms-transition: left 0s, top 0s, height 0s, width 0s;
-o-transition: left 0s, top 0s, height 0s, width 0s;
transition: left 0s, top 0s, height 0s, width 0s;
}

184
frontend/less/espo/misc/intl-tel-input/intlTelInput.less Normal file
View File

@@ -0,0 +1,184 @@
.iti {
position: relative;
display: inline-block;
}
.iti * {
box-sizing: border-box;
}
.iti__hide {
display: none;
}
.iti__v-hide {
visibility: hidden;
}
.iti input,
.iti input[type=text],
.iti input[type=tel] {
position: relative;
z-index: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-right: var(--36px);
margin-right: 0;
}
.iti__flag-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 1px;
}
.iti__selected-flag {
z-index: 1;
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--6px) 0 var(--8px);
font-variant-numeric: tabular-nums; // Espo
}
.iti__arrow {
margin-left: var(--6px);
width: 0;
height: 0;
border-left: var(--3px) solid transparent;
border-right: var(--3px) solid transparent;
border-top: var(--4px) solid #555;
}
[dir=rtl] .iti__arrow {
margin-right: var(--6px);
margin-left: 0;
}
.iti__arrow--up {
border-top: none;
border-bottom: var(--4px) solid #555;
}
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
padding: 0;
margin: 0 0 0 var(--minus-1px);
box-shadow: var(--1px) var(--1px) var(--4px) rgba(0, 0, 0, 0.2);
background-color: white;
border: 1px solid #ccc;
white-space: nowrap;
max-height: var(--200px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
font-variant-numeric: tabular-nums; // Espo
}
.iti__country-list--dropup {
bottom: 100%;
margin-bottom: var(--minus-1px);
}
@media (max-width: 500px) {
.iti__country-list {
white-space: normal;
}
}
.iti__flag-box {
display: inline-block;
width: var(--20px);
}
.iti__divider {
padding-bottom: var(--5px);
margin-bottom: var(--5px);
border-bottom: var(--1px) solid #ccc;
}
.iti__country {
display: flex;
align-items: center;
padding: var(--5px) var(--10px);
outline: none;
}
.iti__dial-code {
color: #999;
}
.iti__country.iti__highlight {
background-color: rgba(0, 0, 0, 0.05);
}
.iti__flag-box, .iti__country-name {
margin-right: var(--6px);
}
[dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
margin-right: 0;
margin-left: var(--6px);
}
.iti--allow-dropdown input,
.iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
padding-right: var(--6px);
padding-left: var(--50px);
margin-left: 0;
}
[dir=rtl] .iti--allow-dropdown input,
[dir=rtl] .iti--allow-dropdown input[type=text],
[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
[dir=rtl] .iti--separate-dial-code input[type=text],
[dir=rtl] .iti--separate-dial-code input[type=tel] {
padding-right: var(--50px);
padding-left: var(--6px);
margin-right: 0;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
right: auto;
left: 0;
}
[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
right: 0;
left: auto;
}
.iti--allow-dropdown .iti__flag-container:hover {
cursor: pointer;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
background-color: rgba(0, 0, 0, 0.05);
}
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
cursor: default;
}
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
background-color: transparent;
}
.iti--separate-dial-code .iti__selected-flag {
background-color: rgba(0, 0, 0, 0.05);
}
.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
margin-left: var(--6px);
}
[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
margin-left: 0;
margin-right: var(--6px);
}
.iti--container {
position: absolute;
top: -1000px;
left: -1000px;
z-index: 1060;
padding: 1px;
}
.iti--container:hover {
cursor: pointer;
}
.iti-mobile .iti--container {
top: var(--30px);
bottom: var(--30px);
left: var(--30px);
right: var(--30px);
position: fixed;
}
.iti-mobile .iti__country-list {
max-height: 100%;
width: 100%;
}
.iti-mobile .iti__country {
padding: 10px 10px;
line-height: 1.5em;
}

Some files were not shown because too many files have changed in this diff Show More