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

less ref

Browse Source
This commit is contained in:
Yuri Kuznetsov
2024-10-30 14:00:21 +02:00
parent 16c4945e80
commit b72b9e258e
4 changed files with 37 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less
+4 -10
View File
@@ -1,8 +1,3 @@
//
// Popovers
// --------------------------------------------------
.popover {
left: auto;
text-align: right;
@@ -12,22 +7,21 @@
&.top > .arrow {
right: 50%;
left: auto;
margin-right: -@popover-arrow-outer-width;
margin-right: var(--popover-arrow-outer-width-negative);
margin-left: auto;
&:after {
margin-right: -@popover-arrow-width;
margin-right: var(--popover-arrow-width-negative);
margin-left: auto;
}
}
&.bottom > .arrow {
right: 50%;
left: auto;
margin-right: -@popover-arrow-outer-width;
margin-right: var(--popover-arrow-outer-width-negative);
margin-left: auto;
&:after {
margin-right: -@popover-arrow-width;
margin-right: var(--popover-arrow-width-negative);
margin-left: auto;
}
}
}
frontend/less/espo/bootstrap/popovers.less
+28 -31
View File
@@ -6,22 +6,19 @@
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
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: @popover-bg;
background-color: var(--popover-bg);
background-clip: padding-box;
border: var(--1px) solid @popover-border-color;
// Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
&.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); }
}
.popover-title {
@@ -46,69 +43,69 @@
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
border-width: var(--popover-arrow-outer-width);
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
border-width: var(--popover-arrow-width);
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
margin-left: var(--popover-arrow-outer-width-negative);
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
border-top-color: var(--dropdown-border);
bottom: var(--popover-arrow-outer-width-negative);
&:after {
content: " ";
bottom: var(--1px);
margin-left: -@popover-arrow-width;
margin-left: var(--popover-arrow-width-negative);
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
border-top-color: var(--dropdown-bg);
}
}
&.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
left: var(--popover-arrow-outer-width-negative);
margin-top: var(--popover-arrow-outer-width-negative);
border-left-width: 0;
border-right-color: @popover-arrow-outer-color;
border-right-color: var(--dropdown-border);
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
left: var(--1px);
bottom: var(--popover-arrow-width-negative);
border-left-width: 0;
border-right-color: @popover-arrow-color;
border-right-color: var(--dropdown-bg);
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
margin-left: var(--popover-arrow-outer-width-negative);
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
border-bottom-color: var(--dropdown-border);
top: var(--popover-arrow-outer-width-negative);
&:after {
content: " ";
top: var(--1px);
margin-left: -@popover-arrow-width;
margin-left: var(--popover-arrow-width-negative);
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
border-bottom-color: var(--dropdown-bg);
}
}
&.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
right: var(--popover-arrow-outer-width-negative);
margin-top: var(--popover-arrow-outer-width-negative);
border-right-width: 0;
border-left-color: @popover-arrow-outer-color;
border-left-color: var(--dropdown-border);
&:after {
content: " ";
right: var(--1px);
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
border-left-color: var(--dropdown-bg);
bottom: var(--popover-arrow-width-negative);
}
}
}
frontend/less/espo/bootstrap/variables.less
-28
View File
@@ -162,34 +162,6 @@
@tooltip-arrow-width-negative: var(--minus-5px);
@tooltip-arrow-color: var(--dropdown-bg);
// Popovers
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
//@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
frontend/less/espo/root-variables.less
+5
View File
@@ -127,6 +127,8 @@
--modal-title-padding: var(--padding-base-horizontal);
--modal-title-line-height: var(--27px);
--popover-arrow-width: var(--10px);
// @todo Compute by adding font-size, two vertical paddings and two borders?
--input-height-base: var(--35px);
--input-height-small: var(--29px);
@@ -140,6 +142,9 @@
--record-grid-max-width: var(--1300px);
// computed
--popover-arrow-width-negative: calc(var(--popover-arrow-width) * -1);
--popover-arrow-outer-width: calc(var(--popover-arrow-width) + var(--1px));
--popover-arrow-outer-width-negative: calc(var(--popover-arrow-outer-width) * -1);
--navbar-padding-vertical: calc((var(--navbar-height) - var(--line-height-computed)) / 2);
--line-height-computed-half: calc(var(--line-height-computed) / 2);