Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[component] changed stylesheet for radiobutton and checkbox

Browse source
This commit is contained in:
Maxim Kadushkin 2019-12-03 18:44:40 +03:00
parent 9e892a5ee2
commit 980ab56b1f
4 changed files with 61 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/CheckBox.js
View file

@ -94,7 +94,7 @@ define([
checked : false, checked : false,
value : 'unchecked', value : 'unchecked',
template : _.template('<label class="checkbox-indeterminate"><input type="button" class="img-commonctrl"><span><%= labelText %></span></label>'), template : _.template('<label class="checkbox-indeterminate"><input type="button" class="button__checkbox"><span><%= labelText %></span></label>'),
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);

2
apps/common/main/lib/component/RadioBox.js
View file

@ -71,7 +71,7 @@ define([
disabled : false, disabled : false,
rendered : false, rendered : false,
template : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="img-commonctrl"><span><%= labelText %></span></label>'), template : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="button__radiobox"><span><%= labelText %></span></label>'),
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);

49
apps/common/main/resources/less/checkbox.less
View file

@ -3,37 +3,58 @@
margin-bottom: 0; margin-bottom: 0;
.font-size-normal(); .font-size-normal();
font-weight: normal; font-weight: normal;
position: relative;
input[type=button] { input[type=button] {
background-color: transparent;
background-position: @checkbox-offset-x @checkbox-offset-y; background-position: @checkbox-offset-x @checkbox-offset-y;
border: none;
margin-left: -22px; margin-left: -22px;
margin-right: 6px; margin-right: 6px;
padding-bottom: 4px; width: 14px;
width: 16px; height: 14px;
height: 16px;
cursor: default; cursor: default;
vertical-align: top; vertical-align: top;
margin-top: -1px; margin-top: -1px;
background: #fff;
border: 1px solid @gray;
&.checked { &.checked {
background-position: @checkbox-offset-x @checkbox-offset-y - 16px; + span {
&::before {
content: '';
position: absolute;
border: solid @gray-deep;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
width: 6px;
height: 10px;
left: 4px;
top: -1px;
}
}
} }
&.indeterminate { &.indeterminate {
background-position: @checkbox-offset-x @checkbox-offset-y - 48px; + span {
&::before {
content: '';
position: absolute;
border: 1px solid @gray-deep;
background: @gray-soft;
width: 10px;
height: 10px;
left: 3px;
top: 2px;
}
}
} }
&.disabled { &.disabled {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y; opacity: .4;
&.checked { + span {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 16px; &::before {
} opacity: .4;
}
&.indeterminate {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 48px;
} }
} }
} }

33
apps/common/main/resources/less/radiobox.less
View file

@ -3,28 +3,43 @@
margin-bottom: 0; margin-bottom: 0;
.font-size-normal(); .font-size-normal();
font-weight: normal; font-weight: normal;
position: relative;
input[type=button] { input[type=button] {
background-position: @radio-offset-x @radio-offset-y;
background-color: transparent;
border: none;
margin-left: -22px; margin-left: -22px;
margin-right: 6px; margin-right: 6px;
padding-bottom: 4px; padding-bottom: 4px;
width: 16px; width: 14px;
height: 16px; height: 14px;
cursor: default; cursor: default;
vertical-align: top; vertical-align: top;
background: #fff;
border: 1px solid @gray;
border-radius: 50%;
&.checked { &.checked {
background-position: @radio-offset-x @radio-offset-y - 16px; + span {
&::before {
content: '';
position: absolute;
background: @gray-deep;
border-radius: 50%;
width: 8px;
height: 8px;
left: 3px;
top: 3px;
}
}
} }
&.disabled { &.disabled {
background-position: @radio-offset-x - 48px @radio-offset-y; opacity: .4;
&.checked { + span {
background-position: @radio-offset-x - 48px @radio-offset-y - 16px; &::before {
opacity: .4;
}
} }
} }
} }