feat(checkbox): Eva style 💅

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();

package.json

@@ -176,4 +176,4 @@
     "uglifyjs-webpack-plugin": "1.1.5"
   },
   "schematics": "./schematics/dist/collection.json"
-}
+}

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',
+      },
     ],
   },
   {

src/framework/eva-icons/package.json

@@ -29,4 +29,4 @@
     "@nebular/theme": "4.0.0-beta.0",
     "eva-icons": "^1.1.1"
   }
-}
+}

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);
+      }
     }
   }
 }

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);
   }
 }