$chekRadioColors: #dddddd; $checkRadioBg:#fff; $checkTextColor: red; .sidebar_checks, .radio_custom { width: 100%; float: left; $LabelWidth: 12; $LabelHeight: 12; margin-top: 0px; label { } input { display: none; + label { margin: 0; font-size: 17px; text-transform: none; //color: $checkTextColor !important; position: relative; padding-left: 21px; cursor: pointer; line-height: 19px; &:before { position: absolute; content: ''; width: $LabelWidth + px; height: $LabelHeight + px; top: -1px; left: 0; background: $checkRadioBg; border: 1px solid $chekRadioColors; cursor: pointer; } a { text-decoration: none !important; padding-left: 0; float: none; &:before { display: none; } } } &:hover { + label { &:before { //border-color:$primary-color-hover; } a { //color: $primary-color-hover; } } } &:active { + label { &:before { //border-color:$primary-color-active; } a { //color: $primary-color-active; } } } &:checked { + label { &:before { //background: $primary-color; //border: 1px solid $primary-color; //@include svgIcon; content: "\e909"; color: red; font-size: 6px; text-align: center; line-height: 15px; font-weight: 700; padding-left: 1px; } } a { } } &[disabled="disabled"]{ + label { &:before { cursor: default; border-color: #ddd !important; background: #ddd !important; //color: $main-color !important; } } } } a { line-height: 16px; font-size: 15px; color: $checkTextColor; position: relative; padding-left: 30px; cursor: pointer; text-decoration: none !important; float: left; &:before { position: absolute; content: ''; width: $LabelWidth + px; height: $LabelHeight + px; top: -1px; left: 0; background: $checkRadioBg; border: 1px solid $chekRadioColors; cursor: pointer; } p { display: inline-block; font-size: 13px; color: #858585; margin-left: 5px; &.disabled { @include Opacity(0.5); } } &:hover { } } } .radio_custom { input { + label { color: #777777; padding-left: 21px; &:before { top: 3px; border-radius: 100%; border-top: 1px solid $chekRadioColors !important; border-bottom: 1px solid $chekRadioColors !important; border-right: 1px solid $chekRadioColors !important; border-left: 1px solid $chekRadioColors !important; } } &:checked { + label { &:before { background: none; //border-top: 1px solid $link-color !important; //border-bottom: 1px solid $link-color !important; //border-right: 1px solid $link-color !important; //border-left: 1px solid $link-color !important; content: ''; } &:after { position: absolute; content: ''; width: 6px; height: 6px; top: 6px; left: 3px; background: #467fbf; border-radius: 100%; } } } } } .checked { a { &:before { //background: $primary-color; //border: 1px solid $primary-color; //@include svgIcon; content: "\e909"; color: red; font-size: 6px; text-align: center; line-height: 15px; font-weight: 700; padding-left: 1px; } } } @media (max-width: 992px) { } @media (max-width: 767px) { .sidebar_checks, .radio_custom { input { + label { font-size: 16px; } } } }