$chekRadioColors: #d7d7d7; $checkRadioBg:$Main-bg; $checkTextColor: $main-color; .label-fix {margin-top: 1px;} .sidebar_checks, .radio_custom { width: 100%; float: left; $LabelWidth: 18; $LabelHeight: 18; margin-top: 12px; label { margin-top: 0; font-weight: normal; font-size: 13px; } input { display: none; + label { font-size: 13px; color: $checkTextColor; position: relative; padding-left: 25px; cursor: pointer; line-height: 18px; &: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; } } p { color: $main-color; display: inline-block; &.disabled { @include Opacity(0.5); } } } &:hover { + label { &:before { border-color:$orange-color-hover; } a { color: $orange-color-hover; } } } &:active { + label { &:before { border-color:$orange-color-active; } a { color: $orange-color-active; } } } &:checked { + label { &:before { background: $orange-color; border: 1px solid $orange-color; @include svgIcon; content: "\e91e"; color: #fff; font-size: 10px; text-align: center; line-height: $LabelHeight + px; } } a { } } &[disabled="disabled"]{ + label { &:before { cursor: default; border-color: #ddd !important; background: #ddd !important; color: $main-color !important; } } } } a { line-height: 18px; font-size: 14px; 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 { color: $main-color; display: inline-block; &.disabled { @include Opacity(0.5); } } &:hover { } } } .radio_custom { input { + label { &:before { 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: $link-color; 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: 8px; height: 8px; top: 5px; left: 4px; background: #fff; border-radius: 100%; } } } } } .checked { a { &:before { background: $orange-color; border: 1px solid $orange-color; @include svgIcon; content: "\e901"; color: #fff; font-size: 8px; text-align: center; line-height: 18px; } } } #login_modal { .sidebar_checks { input { + label { &:before { top: 0; } } } } } @media (max-width: 992px) { } @media (max-width: 767px) { }