Skip to content

Commit

Permalink
feat(radio): Eva style (#1344)
Browse files Browse the repository at this point in the history 
BREAKING CHANGES:

Following theme variables were renamed:
radio-bg -> radio-border-color, radio-inner-circle-color, radio-[status]-border-color, radio-[status]-inner-circle-color
radio-fg -> radio-text-color
radio-size -> radio-width, radio-height
radio-border-size -> radio-border-width
radio-checkmark -> radio-inner-circle-color
radio-disabled-checkmark -> radio-disabled-inner-circle
radio-indicator -> radio-circle
radio-description -> text

Following theme variables were removed:
radio-checked-bg
radio-checked-size
radio-checked-border-size
radio-checked-border-color
radio-checked-checkmark
radio-disabled-bg
radio-disabled-size
radio-disabled-border-size

'radio-bg', 'radio-checkmark' theme variables were removed.
Use radio-[status]-border-color and radio-[status]-inner-circle-color
instead.

NbRadioGroupComponent setters 'setValue', 'setName', 'setDisabled',
'setStatus' were removed. Use 'value', 'name', 'disabled', 'status'.

NbRadioComponent setter 'setDisabled' removed. Use 'disabled' instead.

BREAKING CHANGES:
Following map keys were removed:
  - border-color
  - color-gray
  - color-neutral
  - color-disabled
Mapping for borders, disabled and similar styles would controlled
by design system and configured for each component individually.

Properties 'checkbox-bg', 'checkbox-checked-bg' and 'checkbox-disabled-bg'
replaced with:
  - checkbox-disabled-background-color
  - checkbox-[status]-background-color
  - checkbox-[status]-checked-background-color
  - checkbox-[status]-indeterminate-background-color
  - checkbox-[status]-focus-background-color
  - checkbox-[status]-hover-background-color
  - checkbox-[status]-active-background-color

Property 'checkbox-size' splited into 'checkbox-height', 'checkbox-width'.

Following properties were removed (along with ability to change appearance of checkbox
based on checked or disabled state):
  - checkbox-checked-size
  - checkbox-checked-border-size
  - checkbox-disabled-size
  - checkbox-disabled-border-size

Property 'checkbox-border-size' replaced with 'checkbox-border-width'.

Properties 'checkbox-border-color', 'checkbox-checked-border-color', 'checkbox-disabled-border-color'
replaced with:
  - checkbox-disabled-border-color
  - checkbox-[status]-border-color
  - checkbox-[status]-checked-border-color
  - checkbox-[status]-indeterminate-border-color
  - checkbox-[status]-hover-border-color
  - checkbox-[status]-active-border-color

Properties 'checkbox-checkmark', 'checkbox-checked-checkmark', 'checkbox-disabled-checkmark'
replaced with:
  - checkbox-disabled-checkmark-color
  - checkbox-[status]-checked-checkmark-color
  - checkbox-[status]-indeterminate-checkmark-color

Check mark pseudo element replaced with nb-icon.

Checkbox classes were changed.
Class 'customised-control' replaced with 'label'.
Class 'customised-control-input' replaced with 'native-input'.
Class 'customised-control-indicator' replaced with 'custom-checkbox'.
Class 'customised-control-description' replaced with 'text'.

NbCheckboxComponent's '_value' property now private. Use 'value' instead.

Following theme properties were renamed:
form-control-border-width -> input-border-width
form-control-border-radius -> input-rectangle-border-radius
form-control-semi-round-border-radius -> input-semi-round-border-radius
form-control-round-border-radius -> input-round-border-radius
form-control-text-primary-color -> input-text-color
form-control-border-color -> input-border-color
form-control-selected-border-color -> input-focus-border-color, input-[status]-focus-color
form-control-bg -> input-background-color
form-control-focus-bg -> input-focus-border-color
form-control-placeholder-color -> input-placeholder-text-color
form-control-placeholder-font-size -> input-placeholder-font-size
form-control-font-size -> input-medium-text-font-size
form-control-font-size-sm -> input-small-text-font-size
form-control-font-size-lg -> input-large-text-font-size
form-control-padding -> input-medium-padding
form-control-padding-sm -> input-small-padding
form-control-padding-lg -> input-large-padding
form-control-info-border-color -> input-info-border-color
form-control-success-border-color -> input-success-border-color
form-control-danger-border-color -> input-danger-border-color
form-control-warning-border-color -> input-warning-border-color
form-control-border-type -> input-border-style

Removed:
form-control-label-font-weight
form-control-feedback-font-size
form-control-feedback-font-weight

Input status classes were renamed from input-[status-name] to status-[status-name].
Input size classes were renamed from input-[size-name] to size-[size-name].
Input shape classes were renamed from input-[shape-name] to shape-[shape-name].

All NbInputDirective static fields removed. Removed fields:
SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS,
STATUS_WARNING, STATUS_DANGER, SHAPE_SEMI_ROUND, SHAPE_RECTANGLE, SHAPE_ROUND.
Use NbComponentStatus, NbComponentShape, NbComponentSize instead.

NbInputDirective 'size' property and 'setSize' getter removed.
Use unified 'fieldSize' property instead.

NbInputDirective 'setFullWidth' replaced with read/write 'fullWidth' property.

Remove bootstrap theme support until it's refactored to use updated
theme properties
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent c9c288b commit 3c9eaa2
Show file tree
Hide file tree
Showing 12 changed files with 706 additions and 189 deletions.
12 changes: 12 additions & 0 deletions src/app/playground-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -794,6 +794,18 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
component: 'RadioShowcaseComponent',
name: 'Radio Showcase',
},
{
path: 'radio-statuses.component',
link: '/radio/radio-statuses.component',
component: 'RadioStatusesComponent',
name: 'Radio Statuses',
},
{
path: 'radio-disabled-group.component',
link: '/radio/radio-disabled-group.component',
component: 'RadioDisabledGroupComponent',
name: 'Radio Disabled Group',
},
],
},
{
Expand Down
116 changes: 51 additions & 65 deletions src/framework/theme/components/radio/_radio.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,66 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

@mixin input-border-color($color) {
input:checked + .radio-indicator,
input:hover:not(:disabled) + .radio-indicator {
border-color: $color;
}
}

@mixin nb-input-status-color($origin-border-color) {
@include input-border-color($origin-border-color);
&.success {
@include input-border-color(nb-theme(color-success));
}
&.warning {
@include input-border-color(nb-theme(color-warning));
}
&.danger {
@include input-border-color(nb-theme(color-danger));
}
}

@mixin nb-radio-check-mark($size, $color) {
&::before {
background-color: $color;
height: calc(#{$size} * 0.6);
width: calc(#{$size} * 0.6);
border: solid $color;
}
}

@mixin set-box-style($bg, $size, $border-size, $border-color) {
background-color: $bg;
width: $size;
height: $size;
border: $border-size solid $border-color;
}

@mixin nb-radio-theme() {
nb-radio {
.radio-indicator {
@include set-box-style(
nb-theme(radio-bg),
nb-theme(radio-size),
nb-theme(radio-border-size),
nb-theme(radio-border-color)
);

@include nb-radio-check-mark(nb-theme(radio-size), nb-theme(radio-checkmark));
.radio-circle {
height: nb-theme(radio-height);
width: nb-theme(radio-width);
background-color: nb-theme(radio-background-color);
border-style: nb-theme(radio-border-style);
border-width: nb-theme(radio-border-width);
}

input:checked + .radio-indicator,
input:disabled:checked + .radio-indicator {
@include set-box-style(
nb-theme(radio-checked-bg),
nb-theme(radio-checked-size),
nb-theme(radio-checked-border-size),
nb-theme(radio-checked-border-color)
);
@include nb-radio-check-mark(nb-theme(radio-checked-size), nb-theme(radio-checked-checkmark));
.native-input:focus + .radio-circle {
box-shadow: 0 0 0 nb-theme(radio-outline-width) nb-theme(radio-outline-color);
}

input:disabled + .radio-indicator {
@include set-box-style(
nb-theme(radio-disabled-bg),
nb-theme(radio-disabled-size),
nb-theme(radio-disabled-border-size),
nb-theme(radio-disabled-border-color)
);
@include nb-radio-check-mark(nb-theme(radio-disabled-size), nb-theme(radio-disabled-checkmark));
.native-input:disabled + .radio-circle {
border-color: nb-theme(radio-disabled-border-color);
}
.native-input:disabled:checked + .radio-circle::before {
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 {
border-color: nb-theme(radio-#{$status}-border-color);
}
&.status-#{$status} .native-input:enabled:checked + .radio-circle::before {
background-color: nb-theme(radio-#{$status}-inner-circle-color);;
}

&.status-#{$status} .native-input:enabled:focus + .radio-circle {
border-color: nb-theme(radio-#{$status}-focus-border-color);
}
&.status-#{$status} .native-input:enabled:checked:focus + .radio-circle::before {
background-color: nb-theme(radio-#{$status}-focus-inner-circle-color);
}

@include nb-input-status-color(nb-theme(radio-checked-border-color));
&.status-#{$status} label:hover .native-input:enabled + .radio-circle {
border-color: nb-theme(radio-#{$status}-hover-border-color);
}
&.status-#{$status} label:hover .native-input:checked:enabled + .radio-circle::before {
background-color: nb-theme(radio-#{$status}-hover-inner-circle-color);
}

&.status-#{$status} .native-input:enabled:active + .radio-circle {
border-color: nb-theme(radio-#{$status}-active-border-color);
}
&.status-#{$status} .native-input:enabled:checked:active + .radio-circle::before {
background-color: nb-theme(radio-#{$status}-active-inner-circle-color);
}
}

.radio-description {
color: nb-theme(radio-fg);
.text {
color: nb-theme(radio-text-color);
font-family: nb-theme(radio-text-font-family);
font-size: nb-theme(radio-text-font-size);
font-weight: nb-theme(radio-text-font-weight);
line-height: nb-theme(radio-text-line-height);
}
}
}
Loading

0 comments on commit 3c9eaa2

Please sign in to comment.