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,
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) {
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,
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) {
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;
.font-size-normal();
font-weight: normal;
position: relative;
input[type=button] {
background-color: transparent;
background-position: @checkbox-offset-x @checkbox-offset-y;
border: none;
margin-left: -22px;
margin-right: 6px;
padding-bottom: 4px;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
cursor: default;
vertical-align: top;
margin-top: -1px;
background: #fff;
border: 1px solid @gray;
&.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 {
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 {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y;
opacity: .4;
&.checked {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 16px;
}
&.indeterminate {
background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 48px;
+ span {
&::before {
opacity: .4;
}
}
}
}

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

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