fix(radio): prevent circles distraction (#1549)

akveo · Jun 2, 2019 · abb50df · abb50df
1 parent ae73257
commit abb50df
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 34 deletions.
diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss
@@ -6,81 +6,84 @@
 
 @mixin nb-radio-theme() {
  nb-radio {
- .radio-circle {
+ .outer-circle,
+ .inner-circle {
  height: nb-theme(radio-height);
  width: nb-theme(radio-width);
+ }
+
+ .outer-circle {
  background-color: nb-theme(radio-background-color);
  border-color: nb-theme(radio-border-color);
  border-style: nb-theme(radio-border-style);
  border-width: nb-theme(radio-border-width);
  }
 
- .native-input:enabled:checked + .radio-circle {
+ .native-input:enabled:checked + .outer-circle {
  border-color: nb-theme(radio-primary-border-color);
-
- &::before {
- background-color: nb-theme(radio-primary-inner-circle-color);;
- }
+ }
+ .native-input:enabled:checked ~ .inner-circle {
+ background-color: nb-theme(radio-primary-inner-circle-color);;
  }
 
- .native-input:enabled:focus + .radio-circle {
+ .native-input:enabled:focus + .outer-circle {
  border-color: nb-theme(radio-primary-focus-border-color);
  box-shadow: 0 0 0 nb-theme(radio-outline-width) nb-theme(radio-outline-color);
  }
- .native-input:enabled:checked:focus + .radio-circle::before {
+ .native-input:enabled:checked:focus ~ .inner-circle {
  background-color: nb-theme(radio-primary-focus-inner-circle-color);
  }
 
- label:hover .native-input:enabled + .radio-circle {
+ label:hover .native-input:enabled + .outer-circle {
  border-color: nb-theme(radio-primary-hover-border-color);
  }
- label:hover .native-input:checked:enabled + .radio-circle::before {
+ label:hover .native-input:checked:enabled ~ .inner-circle {
  background-color: nb-theme(radio-primary-hover-inner-circle-color);
  }
 
- label .native-input:enabled:active + .radio-circle {
+ label .native-input:enabled:active + .outer-circle {
  border-color: nb-theme(radio-primary-active-border-color);
  }
- label .native-input:enabled:checked:active + .radio-circle::before {
+ label .native-input:enabled:checked:active ~ .inner-circle {
  background-color: nb-theme(radio-primary-active-inner-circle-color);
  }
 
- .native-input:disabled + .radio-circle {
+ .native-input:disabled + .outer-circle {
  border-color: nb-theme(radio-disabled-border-color);
  }
- .native-input:disabled:checked + .radio-circle::before {
+ .native-input:disabled:checked ~ .inner-circle {
  background-color: nb-theme(radio-disabled-inner-circle-color);
  }
  .native-input:disabled ~ .text {
  color: nb-theme(radio-disabled-text-color);
  }
 
  @each $status in nb-get-statuses() {
- &.status-#{$status} .native-input:enabled + .radio-circle {
+ &.status-#{$status} .native-input:enabled + .outer-circle {
  border-color: nb-theme(radio-#{$status}-border-color);
  }
- &.status-#{$status} .native-input:enabled:checked + .radio-circle::before {
+ &.status-#{$status} .native-input:enabled:checked ~ .inner-circle {
  background-color: nb-theme(radio-#{$status}-inner-circle-color);;
  }
 
- &.status-#{$status} .native-input:enabled:focus + .radio-circle {
+ &.status-#{$status} .native-input:enabled:focus + .outer-circle {
  border-color: nb-theme(radio-#{$status}-focus-border-color);
  }
- &.status-#{$status} .native-input:enabled:checked:focus + .radio-circle::before {
+ &.status-#{$status} .native-input:enabled:checked:focus ~ .inner-circle {
  background-color: nb-theme(radio-#{$status}-focus-inner-circle-color);
  }
 
- &.status-#{$status} label:hover .native-input:enabled + .radio-circle {
+ &.status-#{$status} label:hover .native-input:enabled + .outer-circle {
  border-color: nb-theme(radio-#{$status}-hover-border-color);
  }
- &.status-#{$status} label:hover .native-input:checked:enabled + .radio-circle::before {
+ &.status-#{$status} label:hover .native-input:checked:enabled ~ .inner-circle {
  background-color: nb-theme(radio-#{$status}-hover-inner-circle-color);
  }
 
- &.status-#{$status} label .native-input:enabled:active + .radio-circle {
+ &.status-#{$status} label .native-input:enabled:active + .outer-circle {
  border-color: nb-theme(radio-#{$status}-active-border-color);
  }
- &.status-#{$status} label .native-input:enabled:checked:active + .radio-circle::before {
+ &.status-#{$status} label .native-input:enabled:checked:active ~ .inner-circle {
  background-color: nb-theme(radio-#{$status}-active-inner-circle-color);
  }
  }
@@ -91,6 +94,7 @@
  font-size: nb-theme(radio-text-font-size);
  font-weight: nb-theme(radio-text-font-weight);
  line-height: nb-theme(radio-text-line-height);
+ margin-left: nb-theme(radio-width);
  }
  }
 }
diff --git a/src/framework/theme/components/radio/radio.component.scss b/src/framework/theme/components/radio/radio.component.scss
@@ -8,6 +8,7 @@
 
 :host {
  display: block;
+ position: relative;
 
  label {
  display: inline-flex;
@@ -17,20 +18,17 @@
  align-items: center;
  }
 
- .radio-circle {
+ .outer-circle,
+ .inner-circle {
  border-radius: 50%;
- border-style: solid;
- flex-shrink: 0;
- display: flex;
- justify-content: center;
- align-items: center;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
  }
 
- .radio-circle::before {
- content: '';
- border-radius: 50%;
- height: 75%;
- width: 75%;
+ .inner-circle {
+ transform: translateY(-50%) scale(0.65);
  }
 
  .text {

diff --git a/src/framework/theme/components/radio/radio.component.ts b/src/framework/theme/components/radio/radio.component.ts
@@ -126,7 +126,8 @@ import { NbComponentStatus } from '../component-status';
  [disabled]="disabled"
  (change)="onChange($event)"
  (click)="onClick($event)">
- <span class="radio-circle"></span>
+ <span class="outer-circle"></span>
+ <span class="inner-circle"></span>
  <span class="text">
  <ng-content></ng-content>
  </span>