fix(checkbox, radio): check mark positioning in IE (#830)

Fixes #743 and ![image](https://user-images.githubusercontent.com/6151971/46225230-49129a00-c361-11e8-9b7d-b5a9bc069fca.png)
akveo · Oct 1, 2018 · ac52315 · ac52315
1 parent 28d56fb
commit ac52315
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 262 deletions.
diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts
@@ -152,12 +152,4 @@ describe('nb-checkbox', () => {
  expect(danger.getCssValue('border-color')).toEqual(danger_color);
 
  });
-
- it('should apply focus class when receive focus', () => {
- const firstCheckbox = element(by.css('nb-checkbox#first'));
- const firstCheckboxInput = element(by.css('#first .customised-control-indicator'));
-
- firstCheckboxInput.click();
- expect(firstCheckbox.getAttribute('class')).toContain('focus');
- });
 });
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -4,170 +4,84 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-// locally used mixin
-@mixin outline-border($color) {
- .customised-control-input:checked ~ .customised-control-indicator {
+@mixin checkbox-border($color) {
+ .customised-control-input:checked + .customised-control-indicator {
  border-color: $color;
  }
 
- &.focus .customised-control-input:enabled,
- .customised-control-input:hover:enabled {
- & ~ .customised-control-indicator {
- border-color: lighten($color, 10%);
- }
+ &:hover .customised-control-input:enabled + .customised-control-indicator,
+ .customised-control-input:focus:enabled + .customised-control-indicator {
+ border-color: lighten($color, 10%);
  }
 }
-// locally used mixin
-@mixin checkbox-checkmark($size, $color, $border-size) {
+
+@mixin check-mark-style($size, $color, $border-size) {
  &::before {
- content: '';
- position: absolute;
  height: calc(#{$size} * 0.6);
  width: calc(#{$size} * 0.4);
- border: solid $color;
+ border-color: $color;
  border-width: 0 $border-size $border-size 0;
- transform: rotate(45deg);
  }
 }
-// locally used mixin
-@mixin set-style($bg, $size, $border-size, $border-color) {
- background-color: $bg;
- width: $size;
- height: $size;
- border: $border-size solid $border-color;
-}
-// locally used mixin
-@mixin description-style {
- color: nb-theme(color-fg-heading);
- @include nb-ltr(padding-left, 0.25rem);
- @include nb-rtl(padding-right, 0.25rem);
-}
 
 @mixin nb-checkbox-theme() {
  nb-checkbox {
- .customised-control {
- position: relative;
- display: inline-flex;
- margin: 0;
- min-height: inherit;
- padding: 0.375rem 1.5rem;
- }
-
  .customised-control-indicator {
- @include set-style(
- nb-theme(checkbox-bg),
- nb-theme(checkbox-size),
- nb-theme(checkbox-border-size),
- nb-theme(checkbox-border-color)
+ background-color: nb-theme(checkbox-bg);
+ width: nb-theme(checkbox-size);
+ height: nb-theme(checkbox-size);
+ border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
+
+ @include check-mark-style(
+ nb-theme(checkbox-size),
+ nb-theme(checkbox-checkmark),
+ nb-theme(checkbox-border-size)
  );
+ }
 
- border-radius: 0.25rem;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- @include nb-ltr(left, 0);
- @include nb-rtl(right, 0);
- flex: none;
- display: flex;
- justify-content: center;
+ .customised-control-input:checked + .customised-control-indicator {
+ background-color: nb-theme(checkbox-checked-bg);
+ width: nb-theme(checkbox-checked-size);
+ height: nb-theme(checkbox-checked-size);
+ border: nb-theme(checkbox-checked-border-size) solid nb-theme(checkbox-checked-border-color);
 
- @include checkbox-checkmark(
-  nb-theme(checkbox-size),
-  nb-theme(checkbox-checkmark),
-  nb-theme(checkbox-border-size)
+ @include check-mark-style(
+ nb-theme(checkbox-checked-size),
+ nb-theme(checkbox-checked-checkmark),
+ nb-theme(checkbox-checked-border-size)
  );
  }
 
- .customised-control-input {
- position: absolute;
- opacity: 0;
- z-index: -1;
- }
-
- .customised-control-input {
- &:checked ~ .customised-control-indicator {
- @include set-style(
- nb-theme(checkbox-checked-bg),
- nb-theme(checkbox-checked-size),
- nb-theme(checkbox-checked-border-size),
- nb-theme(checkbox-checked-border-color)
- );
+ .customised-control-input:disabled + .customised-control-indicator {
+ background-color: nb-theme(checkbox-disabled-bg);
+ width: nb-theme(checkbox-disabled-size);
+ height: nb-theme(checkbox-disabled-size);
+ border: nb-theme(checkbox-disabled-border-size) solid nb-theme(checkbox-border-color);
 
- display: flex;
- justify-content: center;
-
- @include checkbox-checkmark(
- nb-theme(checkbox-checked-size),
- nb-theme(checkbox-checked-checkmark),
- nb-theme(checkbox-checked-border-size)
- );
- }
-
- &:disabled ~ {
- .customised-control-indicator {
- @include set-style(
- nb-theme(checkbox-disabled-bg),
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-disabled-border-size),
- nb-theme(checkbox-border-color)
- );
- opacity: 0.5;
- display: flex;
- justify-content: center;
-
- @include checkbox-checkmark(
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-checkmark),
- nb-theme(checkbox-disabled-border-size)
- );
- }
-
- .customised-control-description {
- opacity: 0.5;
- @include description-style;
- }
- }
-
- &:disabled:checked ~ {
- .customised-control-indicator {
- @include set-style(
- nb-theme(checkbox-disabled-bg),
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-disabled-border-size),
- nb-theme(checkbox-checked-border-color)
- );
- opacity: 0.5;
- display: flex;
- justify-content: center;
-
- @include checkbox-checkmark(
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-disabled-checkmark),
- nb-theme(checkbox-disabled-border-size)
- );
- }
+ @include check-mark-style(
+ nb-theme(checkbox-disabled-size),
+ nb-theme(checkbox-disabled-checkmark),
+ nb-theme(checkbox-disabled-border-size)
+ );
+ }
 
- .customised-control-description {
- opacity: 0.5;
- @include description-style;
- }
- }
+ .customised-control-input:disabled:checked + .customised-control-indicator {
+ border-color: nb-theme(checkbox-checked-border-color);
  }
 
- @include outline-border(nb-theme(checkbox-checked-border-color));
+ @include checkbox-border(nb-theme(checkbox-checked-border-color));
  &.success {
- @include outline-border(nb-theme(color-success));
+ @include checkbox-border(nb-theme(color-success));
  }
  &.warning {
- @include outline-border(nb-theme(color-warning));
+ @include checkbox-border(nb-theme(color-warning));
  }
  &.danger {
- @include outline-border(nb-theme(color-danger));
+ @include checkbox-border(nb-theme(color-danger));
  }
 
  .customised-control-description {
- @include description-style;
+ color: nb-theme(color-fg-heading);
  }
  }
 }
-
diff --git a/src/framework/theme/components/checkbox/checkbox.component.scss b/src/framework/theme/components/checkbox/checkbox.component.scss
@@ -0,0 +1,41 @@
+@import '../../styles/core/mixins';
+
+:host {
+ .customised-control {
+ position: relative;
+ display: inline-flex;
+ margin: 0;
+ min-height: inherit;
+ padding: 0.375rem 1.5rem 0.375rem 0;
+ }
+
+ .customised-control-input {
+ position: absolute;
+ opacity: 0;
+ }
+
+ .customised-control-input:disabled {
+ & ~ .customised-control-indicator,
+ & ~ .customised-control-description {
+ opacity: 0.5;
+ }
+ }
+
+ .customised-control-indicator {
+ border-radius: 0.25rem;
+ flex-shrink: 0;
+
+ &::before {
+ content: '';
+ border-style: solid;
+ display: block;
+ margin: 0 auto;
+ transform: rotate(45deg);
+ }
+ }
+
+ .customised-control-description {
+ @include nb-ltr(padding-left, 0.5rem);
+ @include nb-rtl(padding-right, 0.5rem);
+ }
+}
diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts
@@ -54,19 +54,18 @@ import { convertToBoolProperty } from '../helpers';
 @Component({
  selector: 'nb-checkbox',
  template: `
- <label class="customised-control customised-checkbox">
+ <label class="customised-control">
  <input type="checkbox" class="customised-control-input"
  [disabled]="disabled"
  [checked]="value"
- (change)="value = !value"
- (focus)="setFocus()"
- (blur)="removeFocus()">
+ (change)="value = !value">
  <span class="customised-control-indicator"></span>
  <span class="customised-control-description">
  <ng-content></ng-content>
  </span>
  </label>
  `,
+ styleUrls: [ `./checkbox.component.scss` ],
  providers: [{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NbCheckboxComponent),
@@ -114,9 +113,6 @@ export class NbCheckboxComponent implements ControlValueAccessor {
  return this.status === 'danger';
  }
 
- @HostBinding('class.focus')
- focus: boolean = false;
-
  onChange: any = () => { };
  onTouched: any = () => { };
 
@@ -145,12 +141,4 @@ export class NbCheckboxComponent implements ControlValueAccessor {
  setDisabledState(val: boolean) {
  this.disabled = convertToBoolProperty(val);
  }
-
- setFocus() {
- this.focus = true;
- }
-
- removeFocus() {
- this.focus = false;
- }
 }