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

View file

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

View file

@ -10,7 +10,8 @@
width: @combo-dataview-width; width: @combo-dataview-width;
height: 100%; height: 100%;
.border-radius(@border-radius-small); .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; background-color: @input-bg;
.dataview { .dataview {
@ -24,7 +25,8 @@
button { button {
border-radius:0 @border-radius-small @border-radius-small 0; 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; background-color: @input-bg;
&.dropdown-toggle { &.dropdown-toggle {
@ -84,17 +86,20 @@
.item { .item {
padding: 3px; padding: 3px;
border: 1px solid @gray; //border: 1px solid @gray;
.adaptive-solid-border(1px, @gray);
.box-shadow(none); .box-shadow(none);
margin: 0 -1px -1px 0; margin: 0 -1px -1px 0;
&:hover { &: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 { &.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; width: auto;
position: relative; position: relative;
border: none; 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 { > div {
background-repeat: no-repeat; background-repeat: no-repeat;
@ -188,7 +194,8 @@
&.disabled { &.disabled {
.item { .item {
&:hover:not(.selected) { &: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 { .item {
&:hover { &: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 { .item {
margin-left: 4px; 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 { &.disabled {
.item { .item {
&:hover:not(.selected) { &: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 { .listview {
border: 1px solid @input-border; //border: 1px solid @input-border;
.adaptive-solid-border(1px, @input-border);
.border-radius(@border-radius-small); .border-radius(@border-radius-small);
line-height: 15px; line-height: 15px;

View file

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

View file

@ -192,7 +192,8 @@
} }
background-color: @gray-light; 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 { .group {
position: relative; position: relative;

View file

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

View file

@ -147,7 +147,7 @@
<div id="paragraphadv-spin-position"></div> <div id="paragraphadv-spin-position"></div>
</div> </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 id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative; margin: 0 auto;"></div>
</div> </div>
</div> </div>

View file

@ -7,7 +7,8 @@
.panel-menu { .panel-menu {
width: 260px; width: 260px;
float: left; 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; background-color: @gray-light;
li { li {

View file

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

View file

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

View file

@ -3,7 +3,8 @@
padding: 2px; padding: 2px;
height: 25px; height: 25px;
background-color: @gray-light; 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 { .status-label {
font-weight: bold; font-weight: bold;