[stylesheets] repaired components according to colors table

This commit is contained in:
Maxim Kadushkin 2021-01-18 23:27:47 +03:00
parent 29951e266e
commit d7a2a47979
20 changed files with 58 additions and 31 deletions

View file

@ -87,7 +87,9 @@ define([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control">', '<input type="text" class="form-control">',
'<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>', '<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret" />',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">', '<li id="<%= item.id %>" data-value="<%= item.value %>">',

View file

@ -10,9 +10,7 @@
} }
.menu__icon { .menu__icon {
.no-checkmark.checked & { .no-checkmark.checked & {
@btn-active-icon-offset: -20px; background-position-x: @menu-icon-item-checked-offset-x;
background-position-x: @btn-active-icon-offset;
--bgX: @btn-active-icon-offset;
} }
} }
.toolbar__icon, .menu__icon { .toolbar__icon, .menu__icon {

View file

@ -75,5 +75,7 @@
--image-border-types-filter: invert(100%) brightness(4); --image-border-types-filter: invert(100%) brightness(4);
--image-border-types-filter-selected: invert(100%) brightness(4); --image-border-types-filter-selected: invert(100%) brightness(4);
--component-normal-icon-filter: invert(100%); --component-normal-icon-filter: invert(100%);
--menu-icon-item-checked-offset-x: -20px;
} }
} }

View file

@ -81,6 +81,7 @@
//--button-huge-active-icon-offset-x: 0; //--button-huge-active-icon-offset-x: 0;
--button-header-normal-icon-offset-x: -20px; --button-header-normal-icon-offset-x: -20px;
--button-header-active-icon-offset-x: -20px; --button-header-active-icon-offset-x: -20px;
//--menu-icon-item-checked-offset-x: 0;
--modal-window-mask-opacity: 0.2; --modal-window-mask-opacity: 0.2;
--image-border-types-filter: none; --image-border-types-filter: none;
@ -155,3 +156,5 @@
@component-normal-icon-filer: var(--component-normal-icon-filter); @component-normal-icon-filer: var(--component-normal-icon-filter);
@comment-resolved-icon-color: var(--comment-resolved-icon-color); @comment-resolved-icon-color: var(--comment-resolved-icon-color);
@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);

View file

@ -35,8 +35,9 @@
.caret { .caret {
// width: 7px; // width: 7px;
// height: 7px; // height: 7px;
border: 0; // border: 0;
background-position: @arrow-small-offset-x @arrow-small-offset-y; // background-position: @arrow-small-offset-x @arrow-small-offset-y;
margin-left: 1px;
} }
} }
} }

View file

@ -65,7 +65,7 @@
&.input-group-nr.open:not(.no-highlighted) { &.input-group-nr.open:not(.no-highlighted) {
& > .form-control, & > .form-control,
& > .btn { & > .btn {
border-color: @border-preview-select; border-color: @border-control-focus;
.caret { .caret {
transform: rotate(45deg); transform: rotate(45deg);
@ -76,7 +76,7 @@
&.input-group-nr:not(.no-highlighted) > .form-control { &.input-group-nr:not(.no-highlighted) > .form-control {
&:focus, &:focus,
&:focus ~ button.dropdown-toggle { &:focus ~ button.dropdown-toggle {
border-color: @border-preview-select; border-color: @border-control-focus;
} }
} }
@ -145,7 +145,7 @@
&.input-group-nr:not(.no-highlighted) { &.input-group-nr:not(.no-highlighted) {
& > .form-control, & > .form-control,
& > .btn { & > .btn {
border-color: @border-preview-select; border-color: @border-control-focus;
} }
} }
} }

View file

@ -10,7 +10,7 @@
padding-right: @trigger-width + 2px; padding-right: @trigger-width + 2px;
&:focus { &:focus {
border-color: @border-preview-select; // border-color: @border-preview-select;
} }
} }
@ -18,7 +18,7 @@
display: block; display: block;
position: relative; position: relative;
width: @trigger-width; width: @trigger-width;
height: @spin-height/2; height: @spin-height/2 - 1;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
@ -39,6 +39,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 1px; right: 1px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
i { i {
display: inline-block; display: inline-block;
@ -54,18 +56,22 @@
&.disabled { &.disabled {
opacity: .35; opacity: .35;
} }
&:hover {
background-color: @highlight-button-hover;
}
} }
} }
.spinner-up { .spinner-up {
i { i {
transform: rotate(45deg) translate(1px,-2px); transform: rotate(45deg) translate(-1px,-1px);
} }
} }
.spinner-down { .spinner-down {
i { i {
transform: rotate(-135deg) translate(1px,4px); transform: rotate(-135deg) translate(2px,2px);
} }
} }
} }

View file

@ -83,7 +83,7 @@
transition: transform .3s; transition: transform .3s;
&:hover { &:hover {
transform: rotate(180deg); transform: scale(1.1);
opacity: 1; opacity: 1;
} }

View file

@ -1642,7 +1642,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret"></span>',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -1518,7 +1518,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret"></span>',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -976,7 +976,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret"></span>',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -1435,7 +1435,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret"></span>',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -161,7 +161,7 @@
.panel-context { .panel-context {
width: 100%; width: 100%;
padding-left: 260px; padding-left: 260px;
background-color: #fff; background-color: @background-normal;
.content-box { .content-box {
height: 100%; height: 100%;

View file

@ -4,7 +4,7 @@
<button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button> <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
</div> </div>
<div class="ce-group-expand"> <div class="ce-group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret img-commonctrl">&nbsp;</span></button> <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
</div> </div>
<div class="ce-group-content"> <div class="ce-group-content">
<textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea> <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>

View file

@ -904,7 +904,9 @@ define([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" style="padding-left: 25px !important;">', '<input type="text" class="form-control" style="padding-left: 25px !important;">',
'<span class="icon input-icon lang-flag"></span>', '<span class="icon input-icon lang-flag"></span>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret" />',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">', '<li id="<%= item.id %>" data-value="<%= item.value %>">',

View file

@ -1544,7 +1544,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret" />',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -1440,7 +1440,9 @@ define([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default">',
'<span class="caret" />',
'</button>',
'</div>' '</div>'
].join('')) ].join(''))
}); });

View file

@ -2,7 +2,7 @@
border-bottom: solid 1px @border-toolbar; border-bottom: solid 1px @border-toolbar;
border-left: solid 1px @border-toolbar; border-left: solid 1px @border-toolbar;
min-height: 20px; min-height: 20px;
background-color: #fff; background-color: @background-normal;
.ce-group-name { .ce-group-name {
float: left; float: left;
@ -34,7 +34,7 @@
background-color: @background-toolbar; background-color: @background-toolbar;
button { button {
background-color: #fff; background-color: @background-normal;
height: 19px; height: 19px;
&.disabled { &.disabled {
@ -123,7 +123,7 @@
&.btn-collapse { &.btn-collapse {
.caret { .caret {
transform: rotate(180deg); transform: rotate(45deg);
} }
} }
} }

View file

@ -151,7 +151,7 @@
.panel-context { .panel-context {
width: 100%; width: 100%;
padding-left: 260px; padding-left: 260px;
background-color: #fff; background-color: @background-normal;
.content-box { .content-box {
height: 100%; height: 100%;

View file

@ -193,8 +193,8 @@
&.active { &.active {
> span { > span {
border-bottom-color: @body-bg; border-bottom-color: @background-toolbar;
background-color: @body-bg; background-color: @background-toolbar;
outline: none; outline: none;
box-shadow: 0px 4px 0 #49795d inset; box-shadow: 0px 4px 0 #49795d inset;
@ -206,9 +206,10 @@
&.selected { &.selected {
> span { > span {
border-bottom-color: @body-bg; border-bottom-color: @highlight-header-button-hover;
background-color: @body-bg; background-color: @highlight-header-button-hover;
box-shadow: 0px 4px 0 #49795d inset; box-shadow: 0px 4px 0 #49795d inset;
color: @text-normal-pressed;
} }
} }