diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index cf7e1844a..e8cb6b260 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -92,15 +92,16 @@ .ui.checkbox .box:after, .ui.checkbox label:after { position: absolute; - top: @checkboxCheckOffset; - left: 0px; - line-height: 1; + top: @checkboxCheckTop; + left: @checkboxCheckLeft; + line-height: @checkboxSize; width: @checkboxSize; + height: @checkboxSize; text-align: center; opacity: 0; color: @checkboxColor; - transition: opacity 0.1s ease; + transition: all 0.1s ease; } /*-------------- @@ -199,9 +200,15 @@ Radio ---------------*/ +.ui.radio.checkbox { + height: @checkboxRadioSize; +} + /* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { + width: @checkboxRadioSize; + height: @checkboxRadioSize; border-radius: @circularRadius; transform: none; } @@ -210,8 +217,11 @@ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: none; - top: @checkboxRadioOffset; - left: 0em; + width: @checkboxRadioSize; + height: @checkboxRadioSize; + line-height: @checkboxRadioSize; + top: @checkboxRadioTop; + left: @checkboxRadioLeft; font-size: @checkboxRadioCircleSize; } @@ -270,6 +280,7 @@ height: @sliderHandleSize; top: @sliderHandleOffset; left: 0em; + transform: none; border-radius: @circularRadius; transition: diff --git a/src/themes/packages/default/modules/checkbox.overrides b/src/themes/packages/default/modules/checkbox.overrides index ba3cf3de5..9e7beda3f 100755 --- a/src/themes/packages/default/modules/checkbox.overrides +++ b/src/themes/packages/default/modules/checkbox.overrides @@ -21,13 +21,12 @@ /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { - content: '\e801'; /* '' */ -} -@media screen and (-webkit-min-device-pixel-ratio:0) { - .ui.radio.checkbox .box:after, - .ui.radio.checkbox label:after { - top: @checkboxRadioOffset + 1px; - } + content: ''; /* '' */ + transform: scale(0.5); + width: @checkboxRadioSize; + height: @checkboxRadioSize; + border-radius: @circularRadius; + background-color: @checkboxColor; } .icon-check:before { content: '\e800'; } diff --git a/src/themes/packages/default/modules/checkbox.variables b/src/themes/packages/default/modules/checkbox.variables index 4be777c9f..0c2f02c0e 100755 --- a/src/themes/packages/default/modules/checkbox.variables +++ b/src/themes/packages/default/modules/checkbox.variables @@ -14,7 +14,7 @@ @negativeCheckbox: @negativeColor; /* Checkbox */ -@checkboxSize: 16px; +@checkboxSize: 17px; @checkboxBackground: @white; @checkboxBorder: 1px solid @borderColor; @checkboxBorderRadius: 0.25em; @@ -25,7 +25,9 @@ ; /* Checkmark */ -@checkboxCheckOffset: 2px; +@checkboxCheckTop: 0px; +@checkboxCheckLeft: 0px; + /*------------------- Coupling @@ -58,8 +60,10 @@ --------------------*/ /* Radio */ -@checkboxRadioOffset: 3px; +@checkboxRadioSize: 16px; @checkboxRadioCircleSize: 9px; +@checkboxRadioTop: 0px; +@checkboxRadioLeft: 0px; /* Slider & Toggle Handle */ @handleBackground: @white @subtleGradient;