[DE] correct elements border

This commit is contained in:
Maxim Kadushkin 2020-12-11 21:26:40 +03:00
parent c67a7b088d
commit 5202ba939c
13 changed files with 83 additions and 33 deletions

View file

@ -311,3 +311,22 @@
}
}
}
.adaptive-box-shadow(@arguments, @value, @regexp: "%1") {
@shadowargs: replace(@arguments, @regexp, @value);
-webkit-box-shadow: @shadowargs;
box-shadow: @shadowargs;
@media only screen {
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
(min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
(min-resolution: 144dpi) and (max-resolution: 191dpi)
{
@shadowargs: replace(@arguments, @regexp, @value / 1.5);
-webkit-box-shadow: @shadowargs;
box-shadow: @shadowargs;
}
}
}

View file

@ -556,7 +556,8 @@
float: left;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
//border: 1px solid rgba(0, 0, 0, 0.2);
.adaptive-solid-border(1px, rgba(0, 0, 0, 0.2));
background-color: transparent;
}
@ -582,7 +583,8 @@
.color-transparent {
&:before {
border-right: 1px solid red;
//border-right: 1px solid red;
.adaptive-solid-border(1px, red);
height: 34px;
transform: translate(16px, -9px) rotate(62deg);
left: 0;
@ -601,7 +603,7 @@
padding: 0;
margin:0;
border: 0 none;
.box-shadow(none);
//.box-shadow(none);
background-color: transparent;
&.bg-white {
@ -619,7 +621,8 @@
background-repeat: no-repeat;
}
box-shadow: inset 0 0 0 1px @gray;
//box-shadow: inset 0 0 0 1px @gray;
.adaptive-box-shadow(~'inset 0 0 0 %1 @{gray}', 1px);
.border-radius(@border-radius-small);
&:hover,
@ -637,7 +640,8 @@
width: 75px;
height: 22px;
background: @input-bg;
border: 1px solid @input-border;
//border: 1px solid @input-border;
.adaptive-solid-border(1px, @input-border);
.border-radius(@border-radius-small);
&.auto {

View file

@ -13,7 +13,8 @@
width: 14px;
height: 14px;
background: #fff;
border: 1px solid @gray;
//border: 1px solid @gray;
.adaptive-solid-border(1px, @gray);
border-radius: 2px;
position: absolute;
left: 0;
@ -25,8 +26,10 @@
&::before {
content: '';
position: absolute;
border: solid @gray-deep;
border-width: 0 2px 2px 0;
//border: solid @gray-deep;
.adaptive-solid-border(2px, @gray-deep);
border-top: 0 none;
border-left: 0 none;
transform: rotate(45deg);
width: 5px;
height: 9px;
@ -40,7 +43,8 @@
&::before {
content: '';
position: absolute;
border: 1px solid @gray-deep;
//border: 1px solid @gray-deep;
.adaptive-solid-border(1px, @gray-deep);
background: @gray-soft;
width: 8px;
height: 8px;

View file

@ -10,7 +10,8 @@
width: @combo-dataview-width;
height: 100%;
.border-radius(@border-radius-small);
border: 1px solid @input-border;
//border: 1px solid @input-border;
.adaptive-solid-border(1px, @input-border);
background-color: @input-bg;
.dataview {
@ -24,7 +25,8 @@
button {
border-radius:0 @border-radius-small @border-radius-small 0;
border: 1px solid @input-border;
//border: 1px solid @input-border;
.adaptive-solid-border(1px, @input-border);
background-color: @input-bg;
&.dropdown-toggle {
@ -84,17 +86,20 @@
.item {
padding: 3px;
border: 1px solid @gray;
//border: 1px solid @gray;
.adaptive-solid-border(1px, @gray);
.box-shadow(none);
margin: 0 -1px -1px 0;
&:hover {
.box-inner-shadow(0 0 0 2px @gray);
//.box-inner-shadow(0 0 0 2px @gray);
.adaptive-box-shadow(~"inset 0 0 0 %1 @{gray}", 2px);
}
&.selected {
.box-inner-shadow(0 0 0 2px @gray-darker);
//.box-inner-shadow(0 0 0 2px @gray-darker);
.adaptive-box-shadow(~"inset 0 0 0 %1 @{gray-darker}", 2px);
}
}
@ -125,7 +130,8 @@
width: auto;
position: relative;
border: none;
.box-shadow(0 0 0 1px @body-bg);
//.box-shadow(0 0 0 1px @body-bg);
.adaptive-box-shadow(~"0 0 0 %1 @{body-bg}", 1px);
> div {
background-repeat: no-repeat;
@ -188,7 +194,8 @@
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(0 0 0 1px @gray);
//.box-shadow(0 0 0 1px @gray);
.adaptive-box-shadow(~"0 0 0 %1 @{gray}", 1px);
}
}
}
@ -238,7 +245,8 @@
.item {
&:hover {
.box-shadow(0 0 0 1px @gray);
//.box-shadow(0 0 0 1px @gray);
.adaptive-box-shadow(~"0 0 0 %1 @{gray}", 1px);
}
}
@ -265,13 +273,15 @@
.item {
margin-left: 4px;
.box-shadow(0 0 0 1px @gray);
//.box-shadow(0 0 0 1px @gray);
.adaptive-box-shadow(~"0 0 0 %1 @{gray}", 1px);
}
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(0 0 0 1px @gray);
//.box-shadow(0 0 0 1px @gray);
.adaptive-box-shadow(~"0 0 0 %1 @{gray}", 1px);
}
}
}

View file

@ -1,5 +1,6 @@
.listview {
border: 1px solid @input-border;
//border: 1px solid @input-border;
.adaptive-solid-border(1px, @input-border);
.border-radius(@border-radius-small);
line-height: 15px;

View file

@ -31,7 +31,8 @@
background-position: center 0;
.border-radius(2px);
border: 1px solid @gray;
//border: 1px solid @gray;
.adaptive-solid-border(1px, @gray);
-o-transition: background-color .5s 0 linear;
-webkit-transition: background-color .5s 0 linear;
-moz-transition: background-color .5s 0 linear;
@ -85,7 +86,8 @@
background-repeat: no-repeat;
background-position: 0 center;
.border-radius(2px);
border: 1px solid @gray;
//border: 1px solid @gray;
.adaptive-solid-border(1px, @gray);
-o-transition: background-color .5s 0 linear;
-webkit-transition: background-color .5s 0 linear;
-moz-transition: background-color .5s 0 linear;

View file

@ -192,7 +192,8 @@
}
background-color: @gray-light;
.box-inner-shadow(0 -1px 0 @gray-dark);
//.box-inner-shadow(0 -1px 0 @gray-dark);
.adaptive-box-shadow(~'inset 0 %1 0 @{gray-dark}', -1px);
.group {
position: relative;

View file

@ -27,7 +27,8 @@
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border-radius: 5px;
background-color: @body-bg;
border: solid 1px @gray-dark;
//border: solid 1px @gray-dark;
.adaptive-solid-border(1px, @gray-dark);
left: 0;
top: 0;
@ -55,7 +56,8 @@
line-height: 26px;
background: @gray-lighter;
border-bottom: solid 1px @gray-dark;
//border-bottom: solid 1px @gray-dark;
.adaptive-solid-border(1px, @gray-dark, bottom);
cursor: move;
@ -242,7 +244,8 @@
height: 5px;
z-index: 1;
background: @gray-lighter;
border: 1px none @gray-dark;
//border: 1px none @gray-dark;
.adaptive-solid-border(1px, @gray-dark);
&.left {
left: 0;

View file

@ -147,7 +147,7 @@
<div id="paragraphadv-spin-position"></div>
</div>
</div>
<div style="border: 1px solid #cbcbcb;">
<div style="outline: 1px solid #cbcbcb;">
<div id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative; margin: 0 auto;"></div>
</div>
</div>

View file

@ -7,7 +7,8 @@
.panel-menu {
width: 260px;
float: left;
border-right: 1px solid @gray-dark;
//border-right: 1px solid @gray-dark;
.adaptive-solid-border(1px, @gray-dark, right);
background-color: @gray-light;
li {

View file

@ -6,7 +6,8 @@
overflow: hidden;
.tool-menu-btns {
border-right: 1px solid @gray-dark;
//border-right: 1px solid @gray-dark;
.adaptive-solid-border(1px, @gray-dark, right);
}
}
}
@ -26,7 +27,8 @@
.left-panel {
padding-left: 40px;
height: 100%;
border-right: 1px solid @gray-dark;
//border-right: 1px solid @gray-dark;
.adaptive-solid-border(1px, @gray-dark, right);
#left-panel-chat {
height: 100%;

View file

@ -2,7 +2,8 @@
.tool-menu.right {
.tool-menu-btns {
position: absolute;
border-left: 1px solid @gray-dark;
//border-left: 1px solid @gray-dark;
.adaptive-solid-border(1px, @gray-dark, left);
background-color: @gray-light;
right: 0;
overflow: hidden;
@ -16,7 +17,8 @@
padding: 0 10px 0 15px;
position: relative;
overflow: hidden;
border-left: 1px solid @gray-dark;
//border-left: 1px solid @gray-dark;
.adaptive-solid-border(1px, @gray-dark, left);
line-height: 15px;
}

View file

@ -3,7 +3,8 @@
padding: 2px;
height: 25px;
background-color: @gray-light;
.box-inner-shadow(0 1px 0 @gray-dark);
//.box-inner-shadow(0 1px 0 @gray-dark);
.adaptive-box-shadow(~'inset 0 %1 0 @{gray-dark}', 1px);
.status-label {
font-weight: bold;