diff --git a/docs/output.json b/docs/output.json
index da52253bc5..530b0ca150 100644
--- a/docs/output.json
+++ b/docs/output.json
@@ -1438,15 +1438,47 @@
"description": ""
},
{
- "name": "checkbox-selected-border-color",
+ "name": "checkbox-checkmark",
"description": ""
},
{
- "name": "checkbox-fg",
+ "name": "checkbox-checked-bg",
"description": ""
},
{
- "name": "radio-fg",
+ "name": "checkbox-checked-size",
+ "description": ""
+ },
+ {
+ "name": "checkbox-checked-border-size",
+ "description": ""
+ },
+ {
+ "name": "checkbox-checked-border-color",
+ "description": ""
+ },
+ {
+ "name": "checkbox-checked-checkmark",
+ "description": ""
+ },
+ {
+ "name": "checkbox-disabled-bg",
+ "description": ""
+ },
+ {
+ "name": "checkbox-disabled-size",
+ "description": ""
+ },
+ {
+ "name": "checkbox-disabled-border-size",
+ "description": ""
+ },
+ {
+ "name": "checkbox-disabled-border-color",
+ "description": ""
+ },
+ {
+ "name": "checkbox-disabled-checkmark",
"description": ""
}
]
@@ -5272,7 +5304,15 @@
},
{
"theme": "default",
- "prop": "checkbox-fg"
+ "prop": "checkbox-checked-checkmark"
+ },
+ {
+ "theme": "default",
+ "prop": "checkbox-disabled-border-color"
+ },
+ {
+ "theme": "default",
+ "prop": "checkbox-disabled-checkmark"
},
{
"theme": "default",
@@ -5499,7 +5539,7 @@
},
{
"theme": "default",
- "prop": "checkbox-selected-border-color"
+ "prop": "checkbox-checked-border-color"
},
{
"theme": "default",
@@ -8522,6 +8562,10 @@
{
"theme": "default",
"prop": "checkbox-border-color"
+ },
+ {
+ "theme": "default",
+ "prop": "checkbox-checkmark"
}
]
},
@@ -8732,8 +8776,52 @@
],
"childs": []
},
- "checkbox-selected-border-color": {
- "name": "checkbox-selected-border-color",
+ "checkbox-checkmark": {
+ "name": "checkbox-checkmark",
+ "value": "#dadfe6",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "form-control-border-color"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-checked-bg": {
+ "name": "checkbox-checked-bg",
+ "value": "rgba(0, 0, 0, 0)",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-checked-bg"
+ }
+ ]
+ },
+ "checkbox-checked-size": {
+ "name": "checkbox-checked-size",
+ "value": "1.25rem",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-checked-size"
+ }
+ ]
+ },
+ "checkbox-checked-border-size": {
+ "name": "checkbox-checked-border-size",
+ "value": "2px",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-checked-border-size"
+ }
+ ]
+ },
+ "checkbox-checked-border-color": {
+ "name": "checkbox-checked-border-color",
"value": "#40dc7e",
"parents": [
{
@@ -8743,8 +8831,63 @@
],
"childs": []
},
- "checkbox-fg": {
- "name": "checkbox-fg",
+ "checkbox-checked-checkmark": {
+ "name": "checkbox-checked-checkmark",
+ "value": "#2a2a2a",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "color-fg-heading"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-disabled-bg": {
+ "name": "checkbox-disabled-bg",
+ "value": "rgba(0, 0, 0, 0)",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-disabled-bg"
+ }
+ ]
+ },
+ "checkbox-disabled-size": {
+ "name": "checkbox-disabled-size",
+ "value": "1.25rem",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-disabled-size"
+ }
+ ]
+ },
+ "checkbox-disabled-border-size": {
+ "name": "checkbox-disabled-border-size",
+ "value": "2px",
+ "parents": [],
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-disabled-border-size"
+ }
+ ]
+ },
+ "checkbox-disabled-border-color": {
+ "name": "checkbox-disabled-border-color",
+ "value": "#2a2a2a",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "color-fg-heading"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-disabled-checkmark": {
+ "name": "checkbox-disabled-checkmark",
"value": "#2a2a2a",
"parents": [
{
@@ -9659,10 +9802,6 @@
{
"theme": "cosmic",
"prop": "form-control-placeholder-color"
- },
- {
- "theme": "cosmic",
- "prop": "checkbox-border-color"
}
]
},
@@ -9733,11 +9872,15 @@
},
{
"theme": "cosmic",
- "prop": "checkbox-fg"
+ "prop": "checkbox-checked-checkmark"
},
{
"theme": "cosmic",
- "prop": "radio-fg"
+ "prop": "checkbox-disabled-border-color"
+ },
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-disabled-checkmark"
},
{
"theme": "cosmic",
@@ -9983,7 +10126,11 @@
},
{
"theme": "cosmic",
- "prop": "checkbox-selected-border-color"
+ "prop": "checkbox-checked-border-color"
+ },
+ {
+ "theme": "cosmic",
+ "prop": "radio-fg"
},
{
"theme": "cosmic",
@@ -13275,7 +13422,16 @@
"prop": "separator"
}
],
- "childs": []
+ "childs": [
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-border-color"
+ },
+ {
+ "theme": "cosmic",
+ "prop": "checkbox-checkmark"
+ }
+ ]
},
"form-control-selected-border-color": {
"name": "form-control-selected-border-color",
@@ -13491,17 +13647,69 @@
},
"checkbox-border-color": {
"name": "checkbox-border-color",
- "value": "#a1a1e5",
+ "value": "#342e73",
"parents": [
{
"theme": "cosmic",
- "prop": "color-fg"
+ "prop": "form-control-border-color"
+ },
+ {
+ "theme": "cosmic",
+ "prop": "separator"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-checkmark": {
+ "name": "checkbox-checkmark",
+ "value": "#342e73",
+ "parents": [
+ {
+ "theme": "cosmic",
+ "prop": "form-control-border-color"
+ },
+ {
+ "theme": "cosmic",
+ "prop": "separator"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-checked-bg": {
+ "name": "checkbox-checked-bg",
+ "value": "rgba(0, 0, 0, 0)",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-checked-bg"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-checked-size": {
+ "name": "checkbox-checked-size",
+ "value": "1.25rem",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-checked-size"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-checked-border-size": {
+ "name": "checkbox-checked-border-size",
+ "value": "2px",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-checked-border-size"
}
],
"childs": []
},
- "checkbox-selected-border-color": {
- "name": "checkbox-selected-border-color",
+ "checkbox-checked-border-color": {
+ "name": "checkbox-checked-border-color",
"value": "#00d977",
"parents": [
{
@@ -13511,8 +13719,8 @@
],
"childs": []
},
- "checkbox-fg": {
- "name": "checkbox-fg",
+ "checkbox-checked-checkmark": {
+ "name": "checkbox-checked-checkmark",
"value": "#ffffff",
"parents": [
{
@@ -13522,8 +13730,41 @@
],
"childs": []
},
- "radio-fg": {
- "name": "radio-fg",
+ "checkbox-disabled-bg": {
+ "name": "checkbox-disabled-bg",
+ "value": "rgba(0, 0, 0, 0)",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-disabled-bg"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-disabled-size": {
+ "name": "checkbox-disabled-size",
+ "value": "1.25rem",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-disabled-size"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-disabled-border-size": {
+ "name": "checkbox-disabled-border-size",
+ "value": "2px",
+ "parents": [
+ {
+ "theme": "default",
+ "prop": "checkbox-disabled-border-size"
+ }
+ ],
+ "childs": []
+ },
+ "checkbox-disabled-border-color": {
+ "name": "checkbox-disabled-border-color",
"value": "#ffffff",
"parents": [
{
@@ -13533,6 +13774,28 @@
],
"childs": []
},
+ "checkbox-disabled-checkmark": {
+ "name": "checkbox-disabled-checkmark",
+ "value": "#ffffff",
+ "parents": [
+ {
+ "theme": "cosmic",
+ "prop": "color-fg-heading"
+ }
+ ],
+ "childs": []
+ },
+ "radio-fg": {
+ "name": "radio-fg",
+ "value": "#00d977",
+ "parents": [
+ {
+ "theme": "cosmic",
+ "prop": "color-success"
+ }
+ ],
+ "childs": []
+ },
"modal-font-size": {
"name": "modal-font-size",
"value": "1rem",
diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts
new file mode 100644
index 0000000000..2de1fefe16
--- /dev/null
+++ b/e2e/checkbox.e2e-spec.ts
@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { browser, by, element } from 'protractor';
+
+describe('nb-search', () => {
+ const transparent = 'rgba(0, 0, 0, 0)';
+
+ const border_color = 'rgb(218, 223, 230)';
+ const checked_color = 'rgb(64, 220, 126)';
+ const hover_color = 'rgb(107, 228, 155)';
+
+ const warning_color = 'rgb(255, 161, 0)';
+ const warning_hover = 'rgb(255, 180, 51)';
+
+ const danger_color = 'rgb(255, 76, 106)';
+ const danger_hover = 'rgb(255, 127, 148)';
+
+
+ beforeEach((done) => {
+ browser.get('#/checkbox').then(() => done());
+ });
+
+ it('should apply check on click', () => {
+ const input = element(by.css('#first input'));
+ const indicator = element(by.css('#first .customised-control-indicator'));
+
+ expect(input.getAttribute('checked')).toBeFalsy();
+ indicator.click();
+ expect(input.getAttribute('checked')).toBeTruthy();
+ indicator.click();
+ expect(input.getAttribute('checked')).toBeFalsy();
+ });
+
+ it('should ignore click if disable', () => {
+ const input = element(by.css('#disabled input'));
+ const indicator = element(by.css('#disabled .customised-control-indicator'));
+
+ expect(input.getAttribute('disabled')).toBeTruthy();
+ expect(input.getAttribute('checked')).toBeFalsy();
+ indicator.click();
+ expect(input.getAttribute('checked')).toBeFalsy();
+ expect(input.getAttribute('disabled')).toBeTruthy();
+ });
+
+ it('should apply style if checked/unchecked', () => {
+ const input = element(by.css('#first input'));
+ const indicator = element(by.css('#first .customised-control-indicator'));
+ const otherElement = element(by.css('#danger'));
+
+ // unchecked
+ expect(input.getAttribute('checked')).toBeFalsy();
+ expect(indicator.getCssValue('background-color')).toEqual(transparent);
+ expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color);
+
+ // check ::before styles
+ browser.executeScript(
+ 'return ' +
+ 'window.getComputedStyle(document.querySelector(' +
+ '"#first .customised-control-indicator"' +
+ '), ":before").content')
+ .then(data => expect(data).toBe('""'));
+
+ browser.executeScript(
+ 'return ' +
+ 'window.getComputedStyle(document.querySelector(' +
+ '"#first .customised-control-indicator"' +
+ '), ":before").borderTopColor')
+ .then(data => expect(data).toBe(transparent));
+
+ indicator.click();
+ browser.actions().mouseMove(otherElement).perform();
+
+ // checked
+ expect(input.getAttribute('checked')).toBeTruthy();
+ expect(indicator.getCssValue('background-color')).toEqual(transparent);
+ expect(indicator.getCssValue('border')).toEqual('2px solid ' + checked_color);
+
+ // check ::before styles
+ browser.executeScript(
+ 'return ' +
+ 'window.getComputedStyle(document.querySelector(' +
+ '"#first .customised-control-indicator"' +
+ '), ":before").content')
+ .then(data => expect(data).toBe('""'));
+
+ browser.executeScript(
+ 'return ' +
+ 'window.getComputedStyle(document.querySelector(' +
+ '"#first .customised-control-indicator"' +
+ '), ":before").borderTopColor')
+ .then(data => {
+ expect(data).toBe('rgb(42, 42, 42)');
+ });
+ });
+
+ it('should apply style if hover', () => {
+ const indicator = element(by.css('#first .customised-control-indicator'));
+
+ // without hover
+ expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color);
+
+ browser.actions().mouseMove(indicator).perform();
+
+ // hover
+ expect(indicator.getCssValue('border')).toEqual('2px solid ' + hover_color);
+ });
+
+ it('should apply style if status success', () => {
+ const success = element(by.css('#success .customised-control-indicator'));
+ const other = element(by.css('#first .customised-control-indicator'));
+
+ // without hover
+ expect(success.getCssValue('border-color')).toEqual(border_color);
+
+ success.click();
+
+ // hover
+ expect(success.getCssValue('border-color')).toEqual(hover_color);
+
+ // checked
+ browser.actions().mouseMove(other).perform();
+ expect(success.getCssValue('border-color')).toEqual(checked_color);
+
+ });
+
+ it('should apply style if status warning', () => {
+ const warning = element(by.css('#warning .customised-control-indicator'));
+ const other = element(by.css('#first .customised-control-indicator'));
+
+ // without hover
+ expect(warning.getCssValue('border-color')).toEqual(border_color);
+
+ warning.click();
+
+ // hover
+ expect(warning.getCssValue('border-color')).toEqual(warning_hover);
+
+ // checked
+ browser.actions().mouseMove(other).perform();
+ expect(warning.getCssValue('border-color')).toEqual(warning_color);
+ });
+
+ it('should apply style if status danger', () => {
+ const danger = element(by.css('#danger .customised-control-indicator'));
+ const other = element(by.css('#first .customised-control-indicator'));
+
+ // without hover
+ expect(danger.getCssValue('border-color')).toEqual(border_color);
+
+ danger.click();
+
+ // hover
+ expect(danger.getCssValue('border-color')).toEqual(danger_hover);
+
+ // checked
+ browser.actions().mouseMove(other).perform();
+
+ expect(danger.getCssValue('border-color')).toEqual(danger_color);
+
+ });
+});
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 255a73a154..76aee7a3b5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { RouterModule } from '@angular/router';
import {
NbActionsModule,
NbCardModule,
+ NbCheckboxModule,
NbLayoutModule,
NbMenuModule,
NbRouteTabsetModule,
@@ -63,13 +64,13 @@ import { NbUserTestComponent } from './user-test/user-test.component';
import { NbDynamicToAddComponent, NbThemeDynamicTestComponent } from './layout-test/theme-dynamic-test.component';
import { NbActionsTestComponent } from './actions-test/actions-test.component';
import { NbBootstrapTestComponent } from './bootstrap-test/bootstrap-test.component';
-
-import { routes } from './app.routes';
-
+import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
import { NbSearchTestComponent } from './search-test/search-test.component';
import { NbSearchTestCustomizedComponent } from './search-test/search-test-customized.component';
import { NbFormsTestComponent } from './forms-test/forms-test.component';
+import { routes } from './app.routes';
+
import { NbCardTestComponent } from './card-test/card-test.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthGuard } from './auth-guard.service';
@@ -108,6 +109,7 @@ const NB_TEST_COMPONENTS = [
NbThemeBreakpointTestComponent,
NbActionsTestComponent,
NbFormsTestComponent,
+ NbCheckboxTestComponent,
];
@NgModule({
@@ -126,6 +128,7 @@ const NB_TEST_COMPONENTS = [
NbUserModule,
NbSearchModule,
NbActionsModule,
+ NbCheckboxModule,
NbAuthModule.forRoot({
forms: {
login: {
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 38121be3d5..dfe9b071fb 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -50,6 +50,7 @@ import {
NbResetPasswordComponent,
} from '@nebular/auth';
import { AuthGuard } from './auth-guard.service';
+import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
export const routes: Routes = [
{
@@ -231,6 +232,10 @@ export const routes: Routes = [
path: 'search-2',
component: NbSearchTestCustomizedComponent,
},
+ {
+ path: 'checkbox',
+ component: NbCheckboxTestComponent,
+ },
{
path: 'bootstrap',
component: NbBootstrapTestComponent,
diff --git a/src/app/checkbox-test/checkbox-test.component.ts b/src/app/checkbox-test/checkbox-test.component.ts
new file mode 100644
index 0000000000..bc6cd39df3
--- /dev/null
+++ b/src/app/checkbox-test/checkbox-test.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nb-app-checkbox-test',
+ template: `
+
+
+
+
+
+
+ Checked
+
+
+ Disabled
+
+
+ Disabled, checked
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+
+ `,
+})
+export class NbCheckboxTestComponent {
+}
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
index 2d8e1dda58..b3ac3be7a9 100644
--- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
+++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -5,88 +5,161 @@
*/
@mixin nb-checkbox-theme() {
- @mixin hover-checked-border($color) {
- .custom-control-input:hover ~ .custom-control-indicator,
- .custom-control-input:checked ~ .custom-control-indicator,
- .custom-control-input:hover:checked ~ .custom-control-indicator {
+ @mixin hover-border($color) {
+ .customised-control-input:checked ~ .customised-control-indicator {
border-color: $color;
}
+ .customised-control-input:hover:enabled ~ .customised-control-indicator {
+ border-color: lighten($color, 10%);
+ }
}
- nb-checkbox {
+ @mixin checkmark($size, $color, $border-size) {
+ &::before {
+ content: '';
+ position: absolute;
+ height: calc(#{$size} * 0.6);
+ width: calc(#{$size} * 0.4);
+ border: solid $color;
+ border-width: 0 $border-size $border-size 0;
+ transform: rotate(45deg);
+ }
+ }
+
+ @mixin set-style($bg, $size, $border-size, $border-color) {
+ background-color: $bg;
+ width: $size;
+ height: $size;
+ border: $border-size solid $border-color;
+ }
+
+ @mixin description-style {
+ color: nb-theme(color-fg-heading);
+ opacity: 0.5;
+ flex-shrink: 0;
+ padding-left: 0.25rem;
+ }
- .custom-control {
+ nb-checkbox {
+ .customised-control {
+ position: relative;
+ display: inline-flex;
margin: 0;
min-height: inherit;
padding: 0.375rem 1.5rem;
}
- .custom-control-indicator {
+ .customised-control-indicator {
+ @include set-style(
+ nb-theme(checkbox-bg),
+ nb-theme(checkbox-size),
+ nb-theme(checkbox-border-size),
+ nb-theme(checkbox-border-color)
+ );
+
+ border-radius: 0.25rem;
position: absolute;
- 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);
top: 50%;
transform: translateY(-50%);
+ left: 0;
+ flex: none;
+ display: flex;
+ justify-content: center;
+
+ @include checkmark(
+ nb-theme(checkbox-size),
+ nb-theme(checkbox-checkmark),
+ nb-theme(checkbox-border-size)
+ );
}
- .custom-control-input {
- background-color: transparent;
+ .customised-control-input {
+ position: absolute;
+ opacity: 0;
+ z-index: -1;
+ }
- &:focus ~ .custom-control-indicator {
- box-shadow: none;
- }
+ .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)
+ );
- &:checked ~ .custom-control-indicator {
- background-image: none;
display: flex;
justify-content: center;
- &::before {
- content: '';
- width: 0.5rem;
- height: 0.75rem;
- border: solid nb-theme(checkbox-fg);
- border-width: 0 2px 2px 0;
- transform: rotate(45deg);
- }
+ @include checkmark(
+ nb-theme(checkbox-checked-size),
+ nb-theme(checkbox-checked-checkmark),
+ nb-theme(checkbox-checked-border-size)
+ );
}
- &:disabled ~,
- &:disabled:hover ~ {
- .custom-control-indicator {
- background-color: transparent;
- border-color: nb-theme(checkbox-border-color);
+ &: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 checkmark(
+ nb-theme(checkbox-disabled-size),
+ nb-theme(checkbox-border-color),
+ nb-theme(checkbox-disabled-border-size)
+ );
}
- .custom-control-description {
- color: nb-theme(checkbox-fg);
- opacity: 0.5;
+ .customised-control-description {
+ @include description-style;
}
}
- &:checked ~ .custom-control-indicator,
- &:active ~ .custom-control-indicator {
- background-color: nb-theme(checkbox-bg);
+ &: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 checkmark(
+ nb-theme(checkbox-disabled-size),
+ nb-theme(checkbox-disabled-checkmark),
+ nb-theme(checkbox-disabled-border-size)
+ );
+ }
+
+ .customised-control-description {
+ @include description-style;
+ }
}
}
- @include hover-checked-border(nb-theme(checkbox-selected-border-color));
+ @include hover-border(nb-theme(checkbox-checked-border-color));
&.success {
- @include hover-checked-border(nb-theme(color-success));
+ @include hover-border(nb-theme(color-success));
}
&.warning {
- @include hover-checked-border(nb-theme(color-warning));
+ @include hover-border(nb-theme(color-warning));
}
&.danger {
- @include hover-checked-border(nb-theme(color-danger));
+ @include hover-border(nb-theme(color-danger));
}
- .custom-control-description {
- padding-left: 0.25rem;
- color: nb-theme(color-fg-heading);
+ .customised-control-description {
+ @include description-style;
}
}
}
diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts
index 66b2b76741..9258ea57c8 100644
--- a/src/framework/theme/components/checkbox/checkbox.component.ts
+++ b/src/framework/theme/components/checkbox/checkbox.component.ts
@@ -29,20 +29,28 @@ import { convertToBoolProperty } from '../helpers';
* checkbox-size:
* checkbox-border-size:
* checkbox-border-color:
- * checkbox-selected-border-color:
- * checkbox-fg:
- * radio-fg:
+ * checkbox-checkmark:
+ * checkbox-checked-bg:
+ * checkbox-checked-size:
+ * checkbox-checked-border-size:
+ * checkbox-checked-border-color:
+ * checkbox-checked-checkmark:
+ * checkbox-disabled-bg:
+ * checkbox-disabled-size:
+ * checkbox-disabled-border-size:
+ * checkbox-disabled-border-color:
+ * checkbox-disabled-checkmark:
*/
@Component({
selector: 'nb-checkbox',
template: `
-
diff --git a/src/framework/theme/components/checkbox/checkbox.spec.ts b/src/framework/theme/components/checkbox/checkbox.spec.ts
new file mode 100644
index 0000000000..395b4da799
--- /dev/null
+++ b/src/framework/theme/components/checkbox/checkbox.spec.ts
@@ -0,0 +1,72 @@
+import { NbCheckboxComponent } from './checkbox.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('Component: NbCheckbox', () => {
+
+ let checkbox: NbCheckboxComponent;
+ let fixture: ComponentFixture;
+ let checkboxLabel: DebugElement;
+ let checkboxInput: DebugElement;
+ let checkboxIndicator: DebugElement;
+ let checkboxDescription: DebugElement;
+ let testContainerEl: HTMLElement;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [NbCheckboxComponent],
+ });
+
+ fixture = TestBed.createComponent(NbCheckboxComponent);
+ checkbox = fixture.componentInstance;
+ testContainerEl = fixture.elementRef.nativeElement;
+
+ checkboxLabel = fixture.debugElement.query(By.css('label'));
+ checkboxInput = fixture.debugElement.query(By.css('input'));
+ checkboxIndicator = fixture.debugElement.query(By.css('customised-control-indicator'));
+ checkboxDescription = fixture.debugElement.query(By.css('customised-control-description'));
+ });
+
+ it('Setting disabled to true disables checkbox input', () => {
+ checkbox.disabled = true;
+ fixture.detectChanges();
+ expect(checkboxInput.nativeElement.disabled).toBeTruthy();
+ });
+
+ it('Setting disabled to false enables checkbox input', () => {
+ checkbox.disabled = false;
+ fixture.detectChanges();
+ expect(checkboxInput.nativeElement.disabled).toBeFalsy();
+ });
+
+ it('Setting value to true makes checkbox input checked', () => {
+ checkbox.value = true;
+ fixture.detectChanges();
+ expect(checkboxInput.nativeElement.checked).toBeTruthy();
+ });
+
+ it('Setting value to false makes checkbox input unchecked', () => {
+ checkbox.value = false;
+ fixture.detectChanges();
+ expect(checkboxInput.nativeElement.checked).toBeFalsy();
+ });
+
+ it('Setting status to success apply corresponding class to host element', () => {
+ checkbox.status = 'success';
+ fixture.detectChanges();
+ expect(testContainerEl.classList.contains('success')).toBeTruthy();
+ });
+
+ it('Setting status to warning apply corresponding class to host element', () => {
+ checkbox.status = 'warning';
+ fixture.detectChanges();
+ expect(testContainerEl.classList.contains('warning')).toBeTruthy();
+ });
+
+ it('Setting status to danger apply corresponding class to host element', () => {
+ checkbox.status = 'danger';
+ fixture.detectChanges();
+ expect(testContainerEl.classList.contains('danger')).toBeTruthy();
+ });
+});
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index e0293c2838..cd89c39b9c 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -99,9 +99,23 @@ $theme: (
form-control-border-color: separator,
form-control-selected-border-color: color-primary,
+ checkbox-bg: transparent,
+ checkbox-size: 1.25rem,
+ checkbox-border-size: 2px,
checkbox-border-color: color-fg,
- checkbox-selected-border-color: color-success,
- radio-fg: color-fg-heading,
+ checkbox-checkmark: transparent,
+
+ checkbox-checked-bg: transparent,
+ checkbox-checked-size: 1.25rem,
+ checkbox-checked-border-size: 2px,
+ checkbox-checked-border-color: color-success,
+ checkbox-checked-checkmark: color-fg-heading,
+
+ checkbox-disabled-bg: transparent,
+ checkbox-disabled-size: 1.25rem,
+ checkbox-disabled-border-size: 2px,
+ checkbox-disabled-border-color: color-fg-heading,
+ checkbox-disabled-checkmark: color-fg-heading,
search-bg: linear-gradient(to right, #171749, #413789),
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 7ea515b2ca..714ab54dd9 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -378,8 +378,20 @@ $theme: (
checkbox-size: 1.25rem,
checkbox-border-size: 2px,
checkbox-border-color: form-control-border-color,
- checkbox-selected-border-color: color-success,
- checkbox-fg: color-fg-heading,
+ checkbox-checkmark: transparent,
+
+ checkbox-checked-bg: transparent,
+ checkbox-checked-size: 1.25rem,
+ checkbox-checked-border-size: 2px,
+ checkbox-checked-border-color: color-success,
+ checkbox-checked-checkmark: color-fg-heading,
+
+ checkbox-disabled-bg: transparent,
+ checkbox-disabled-size: 1.25rem,
+ checkbox-disabled-border-size: 2px,
+ checkbox-disabled-border-color: color-fg-heading,
+ checkbox-disabled-checkmark: color-fg-heading,
+
radio-fg: color-success,
modal-font-size: font-size,