feat(checkbox): Eva style 💅 (#1311)

akveo · May 27, 2019 · 75498aa · 75498aa
1 parent e0d9f26
commit 75498aa
Show file tree

Hide file tree

Showing 27 changed files with 727 additions and 249 deletions.
diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts
@@ -14,7 +14,7 @@ describe('nb-checkbox', () => {
 
  it('should apply check on click', () => {
  const input = element(by.css('#first input'));
- const indicator = element(by.css('#first .customised-control-indicator'));
+ const indicator = element(by.css('#first .custom-checkbox'));
 
  expect(input.getAttribute('checked')).toBeFalsy();
  indicator.click();

diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
@@ -373,6 +373,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
  component: 'CheckboxTestComponent',
  name: 'Checkbox Test',
  },
+ {
+ path: 'checkbox-indeterminate.component',
+ link: '/checkbox/checkbox-indeterminate.component',
+ component: 'CheckboxIndeterminateComponent',
+ name: 'Checkbox Indeterminate',
+ },
  ],
  },
  {

diff --git a/src/framework/eva-icons/package.json b/src/framework/eva-icons/package.json
@@ -29,4 +29,4 @@
  "@nebular/theme": "4.0.0-beta.0",
  "eva-icons": "^1.1.1"
  }
-}
+}
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -4,91 +4,98 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin checkbox-border($color) {
- .customised-control-input:checked + .customised-control-indicator {
- border-color: $color;
- }
+@mixin nb-checkbox-theme() {
+ nb-checkbox {
+ .custom-checkbox {
+ width: nb-theme(checkbox-width);
+ height: nb-theme(checkbox-height);
+ border-style: nb-theme(checkbox-border-style);
+ border-width: nb-theme(checkbox-border-width);
+ border-radius: nb-theme(checkbox-border-radius);
+ }
 
- &:hover .customised-control-input:enabled + .customised-control-indicator,
- .customised-control-input:focus:enabled + .customised-control-indicator {
- border-color: $color;
- opacity: 0.6;
+ .native-input:focus + .custom-checkbox {
+ box-shadow: 0 0 0 nb-theme(checkbox-outline-width) nb-theme(checkbox-outline-color);
+ }
+
+ .text {
+ color: nb-theme(checkbox-text-color);
+ font-family: nb-theme(checkbox-text-font-family);
+ font-size: nb-theme(checkbox-text-font-size);
+ font-weight: nb-theme(checkbox-text-font-weight);
+ line-height: nb-theme(checkbox-text-line-height);
+ }
  }
-}
 
-@mixin check-mark-style($size, $color, $border-size) {
- &::before {
- height: calc(#{$size} * 0.6);
- width: calc(#{$size} * 0.4);
- border-color: $color;
- border-width: 0 $border-size $border-size 0;
+ @each $status in nb-get-statuses() {
+ @include nb-checkbox-status($status);
  }
 }
 
-@mixin nb-checkbox-theme() {
- nb-checkbox {
- .customised-control-indicator {
- 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)
- );
+@mixin nb-checkbox-status($status: '') {
+ nb-checkbox.status-#{$status} {
+ .custom-checkbox {
+ background-color: nb-theme(checkbox-#{$status}-background-color);
+ border-color: nb-theme(checkbox-#{$status}-border-color);
  }
 
- .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);
+ .custom-checkbox.checked {
+ background-color: nb-theme(checkbox-#{$status}-checked-background-color);
+ border-color: nb-theme(checkbox-#{$status}-checked-border-color);
+ position: relative;
 
- @include check-mark-style(
- nb-theme(checkbox-checked-size),
- nb-theme(checkbox-checked-checkmark),
- nb-theme(checkbox-checked-border-size)
- );
+ nb-icon {
+ color: nb-theme(checkbox-#{$status}-checked-checkmark-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);
+ .custom-checkbox.indeterminate {
+ background-color: nb-theme(checkbox-#{$status}-indeterminate-background-color);
+ border-color: nb-theme(checkbox-#{$status}-indeterminate-border-color);
+ position: relative;
 
- @include check-mark-style(
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-checkmark),
- nb-theme(checkbox-disabled-border-size)
- );
+ nb-icon {
+ color: nb-theme(checkbox-#{$status}-indeterminate-checkmark-color);
+ }
  }
 
- .customised-control-input:disabled:checked + .customised-control-indicator {
- border-color: nb-theme(checkbox-checked-border-color);
-
- @include check-mark-style(
- nb-theme(checkbox-disabled-size),
- nb-theme(checkbox-disabled-checkmark),
- nb-theme(checkbox-disabled-border-size)
- );
+ .custom-checkbox.checked,
+ .custom-checkbox.indeterminate {
+ nb-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 50%;
+ }
  }
 
- @include checkbox-border(nb-theme(checkbox-checked-border-color));
- &.success {
- @include checkbox-border(nb-theme(color-success));
+ .native-input:focus + .custom-checkbox {
+ border-color: nb-theme(checkbox-#{$status}-focus-background-color);
  }
- &.warning {
- @include checkbox-border(nb-theme(color-warning));
+
+ .custom-checkbox:hover {
+ background-color: nb-theme(checkbox-#{$status}-hover-background-color);
+ border-color: nb-theme(checkbox-#{$status}-hover-border-color);
  }
- &.danger {
- @include checkbox-border(nb-theme(color-danger));
+
+ .native-input:active + .custom-checkbox {
+ background-color: nb-theme(checkbox-#{$status}-hover-background-color);
+ border-color: nb-theme(checkbox-#{$status}-hover-border-color);
  }
 
- .customised-control-description {
- color: nb-theme(color-fg-heading);
+ .native-input:disabled {
+ & + .custom-checkbox {
+ background-color: nb-theme(checkbox-disabled-background-color);
+ border-color: nb-theme(checkbox-disabled-border-color);
+
+ nb-icon {
+ color: nb-theme(checkbox-disabled-checkmark-color);
+ }
+ }
+ & ~ .text {
+ color: nb-theme(checkbox-disabled-text-color);
+ }
  }
  }
 }
diff --git a/src/framework/theme/components/checkbox/checkbox.component.scss b/src/framework/theme/components/checkbox/checkbox.component.scss
@@ -1,41 +1,23 @@
 @import '../../styles/core/mixins';
 
 :host {
- .customised-control {
+ .label {
  position: relative;
  display: inline-flex;
+ align-items: center;
  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;
+ .custom-checkbox {
  flex-shrink: 0;
-
- &::before {
- content: '';
- border-style: solid;
- display: block;
- margin: 0 auto;
- transform: rotate(45deg);
- }
+ @include nb-component-animation(background-color, border, box-shadow);
  }
 
- .customised-control-description {
- @include nb-ltr(padding-left, 0.5rem);
- @include nb-rtl(padding-right, 0.5rem);
+ .text {
+ transition: color 0.15s ease-in;
+ @include nb-ltr(padding-left, 0.6875rem);
+ @include nb-rtl(padding-right, 0.6875rem);
  }
 }