maxkadushkin
GitHub
commit
f91d785ced
|
|
@ -71,8 +71,13 @@ define([
|
|||
disabled : false,
|
||||
rendered : false,
|
||||
|
||||
template : _.template('<label class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
|
||||
'<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'),
|
||||
template : _.template('<div class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
|
||||
'<input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
|
||||
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<circle class="rb-circle" cx="8" cy="8" r="6.5" />' +
|
||||
'<circle class="rb-check-mark" cx="8" cy="8" r="4" />' +
|
||||
'</svg>' +
|
||||
'<span></span></div>'),
|
||||
|
||||
initialize : function(options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
|
|
@ -96,7 +101,6 @@ define([
|
|||
this.setCaption(this.options.labelText);
|
||||
|
||||
// handle events
|
||||
this.$radio.on('click', _.bind(this.onItemCheck, this));
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
|
@ -111,9 +115,15 @@ define([
|
|||
}));
|
||||
|
||||
this.$radio = el.find('input[type=radio]');
|
||||
this.$label = el.find('label.radiobox');
|
||||
this.$label = el.find('div.radiobox');
|
||||
this.$span = this.$label.find('span');
|
||||
this.$label.on('keydown', this.onKeyDown.bind(this));
|
||||
this.$label.on({
|
||||
'keydown': this.onKeyDown.bind(this),
|
||||
'click': function(e){
|
||||
if ( !this.disabled )
|
||||
this.setValue(true);
|
||||
}.bind(this),});
|
||||
|
||||
this.rendered = true;
|
||||
|
||||
return this;
|
||||
|
|
|
|||
|
|
@ -1,72 +1,53 @@
|
|||
.radiobox {
|
||||
padding-left: 22px;
|
||||
margin-bottom: 0;
|
||||
.font-size-normal();
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
|
||||
input[type=radio] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
.rb-circle {
|
||||
fill: @background-normal;
|
||||
stroke: @border-regular-control;
|
||||
}
|
||||
|
||||
.rb-check-mark {
|
||||
fill: @text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
|
||||
+ label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: auto;
|
||||
padding-bottom: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
background: @background-normal-ie;
|
||||
background: @background-normal;
|
||||
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
||||
border: @scaled-one-px-value solid @border-regular-control;
|
||||
border-radius: 50%;
|
||||
|
||||
+ span {
|
||||
outline: @scaled-one-px-value-ie dotted transparent;
|
||||
outline: @scaled-one-px-value dotted transparent;
|
||||
display: inline-block;
|
||||
&:not(:checked) + svg {
|
||||
.rb-check-mark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: @text-normal-ie;
|
||||
background: @text-normal;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &:disabled {
|
||||
|
||||
+ label {
|
||||
&::before {
|
||||
}
|
||||
}
|
||||
&.disabled, &:disabled {
|
||||
svg, span {
|
||||
opacity: @component-disabled-opacity;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(.disabled) {
|
||||
input[type=radio] {
|
||||
+ label {
|
||||
border-color: @border-control-focus-ie;
|
||||
border-color: @border-control-focus;
|
||||
|
||||
+ span {
|
||||
outline-color: @border-control-focus-ie;
|
||||
outline-color: @border-control-focus;
|
||||
}
|
||||
svg {
|
||||
.rb-circle {
|
||||
stroke: @border-control-focus-ie;
|
||||
stroke: @border-control-focus;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
outline: @scaled-one-px-value-ie dotted @border-control-focus-ie;
|
||||
outline: @scaled-one-px-value dotted @border-control-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,8 +79,8 @@ define([
|
|||
'<tr>',
|
||||
'<td class="padding-extra-small">',
|
||||
'<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
|
||||
'<div id="bookmarks-radio-name" style="display: inline-block; margin-right: 10px;"></div>',
|
||||
'<div id="bookmarks-radio-location" style="display: inline-block;"></div>',
|
||||
'<div id="bookmarks-radio-name"></div>',
|
||||
'<div id="bookmarks-radio-location"></div>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
|
|
|
|||
|
|
@ -91,8 +91,8 @@ define([
|
|||
'</tr>',
|
||||
'<tr>',
|
||||
'<td style="padding-bottom: 5px;">',
|
||||
'<div id="id-text-table-radio-fixed" style="display: inline-block;margin-right: 10px;"></div>',
|
||||
'<div id="id-text-table-spn-fixed" style="display: inline-block;"></div>',
|
||||
'<div id="id-text-table-radio-fixed"></div>',
|
||||
'<div id="id-text-table-spn-fixed"></div>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
|
|
|
|||
|
|
@ -73,4 +73,25 @@
|
|||
#page-margins-preview {
|
||||
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
||||
border: @scaled-one-px-value solid @border-regular-control;
|
||||
}
|
||||
|
||||
#id-text-table-radio-fixed {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
.pixel-ratio__1_75 &, .pixel-ratio__2 & {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#bookmarks-radio-name {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#id-text-table-spn-fixed, #bookmarks-radio-location {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
Loading…
Reference in a new issue