Support CSS Variables #46
Comments
|
From what I see it has nothing to do with css variables in your proect itself. The only thing it does is this: So only if it Is set to true it does run that function. From what I see the function would convert scss variables to css variables. --var(X) |
|
I think it converts theme variables into CSS variables but some postcss processing configuration in webpack gives an error. |
|
What kind of error ? Anyway, there is nothing that stops you from using css variables. Your able to use them :) Without setting it to true. |
|
Hey @Morente5, the support to be able to use the theme vars as css vars is experimental, when we have better steps on how to try it I will update this issue. |
nnixaa
added a commit
that referenced
this issue
Mar 21, 2019
yggg
pushed a commit
that referenced
this issue
Mar 28, 2019
nnixaa
added a commit
that referenced
this issue
Apr 1, 2019
brannon-darby
pushed a commit
to brannon-darby/nebular
that referenced
this issue
Apr 5, 2019
brannon-darby
pushed a commit
to brannon-darby/nebular
that referenced
this issue
Apr 5, 2019
brannon-darby
pushed a commit
to brannon-darby/nebular
that referenced
this issue
Apr 5, 2019
yggg
pushed a commit
that referenced
this issue
Apr 17, 2019
yggg
added a commit
that referenced
this issue
Apr 29, 2019
BREAKING CHANGE: - calendar - use primary button in cosmic theme - checkbox - `opacity` instead of `lightning` - context-menu, popover, datepicker - `calc` instead of `round` and scss calculations - input - `opacity` for placeholder instead of `lightning` - tabs - remove gradient for tab bottom separator in cosmic theme - toastr - use `background-color` instead of the gradient in cosmic theme - text colors are now used from success/primary/warning/etc colors - add color palette instead of generating colors using scss-functions, an example for `primary` `color-primary-200` `color-primary-300` `color-primary-400` `color-primary-600` `color-primary-700` `create-colors-palette()` scss function that can be used during the theme installation process to generate palette automatically Closes #1228 Closes #46 Starting from version 4.0, Nebular introduces new `nb-icon` component and `NbIconLibraries` service to host SVG and Font icon packs. As a breaking change, Nebular moves from `nebular-icons` package to much more popular [Eva Icons pack](akveo.github.io/eva-icons) consisting of 480+ beautiful SVG icons. We believe this will bring more quality and variety to interfaces based on Nebular. Now all Nebular components internally use `<nb-icon></nb-icon>` component utilizing Eva Icons SVG icons. More details on [nb-icon](akveo.github.io/nebular/docs/components/icon) component. There are two ways to upgrade: **Migrate to Eva Icons** (recommended): 1) install Eva Icons Nebular package `npm i @nebular/eva-icons` 2) register `NbEvaIconsModule` in the `app.module.ts` ``` import { NbEvaIconsModule } form '@nebular/eva-icons'; @NgModule({ imports: [ // ... NbEvaIconsModule, ], }) ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"``and replace with `<nb-icon icon="icon-name"></nb-icon>`. Full icons list akveo.github.io/eva-icons. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'`. Please note, there is no need to specify any icon prefix (such as `eva-` or `nb-`) since prefix is specified when the icon package is registered in Nebular. 4) Update styles if necessary. 5) if you have `nebular-icons` installed, remove the package and all references. **Continue using nebular-icons** This option is also possible, but please note, Nebular Component will still use Eva Icons pack for internal component icons, such as `close`, `arrow-down`, `arrow-up`, etc. 1) Register nebular-icons as a pack for Nebular in your `app.component.ts` ``` import { NbIconLibraries } from '@nebular/theme'; constructor(private iconLibraries: NbIconLibraries) { this.iconLibraries.registerFontPack('nebular', { iconClassPrefix: 'nb' }); this.iconLibraries.setDefaultPack('nebular'); } ``` 3) Search for all usages of `<span icon="nb-*"` or ``<i icon="nb-*"`` and replace with `<nb-icon icon="icon-name"></nb-icon>` without the `nb-` prefix since prefix is specified when the icon package is registered in Nebular. 4) Search for `icon: 'nb-*'` references in properties for such components as Menu, Actions, Tabs, etc. Replace those with `icon: 'icon-name'` without `nb-` prefix since it is unnecessary and covered under the hood. Please open an issue if you have any questions or having difficulties to migrate. d0e528b 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. 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. Following tooltip theme properties were renamed: tooltip-bg -> tooltip-background-color tooltip-fg -> tooltip-text-color tooltip-font-size -> tooltip-text-font-size tooltip-status-fg -> tooltip-[status]-text-color tooltip-primary-bg -> tooltip-primary-background-color tooltip-info-bg -> tooltip-info-background-color tooltip-success-bg -> tooltip-success-background-color tooltip-warning-bg -> tooltip-warning-background-color tooltip-danger-bg -> tooltip-danger-background-color Tooltip status class renamed from [status-name]-tooltip to status-[status-name]. Following properties where renamed: popover-fg -> popover-text-color popover-bg -> popover-background-color popover-border -> popover-border-color 'isMenuShown' property removed from NbUserComponent. 'inverse' input removed from NbUserComponent. 'background' class renamed to 'initials'. NbUserComponent SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE size static properties were removed. Use NbComponentSize instead. Size class names were prefixed with 'size-'. small -> size-small medium -> size-medium large -> size-large xlarge -> size-giant Following properties were renamed: user-font-size -> user-[size]-initials-text-font-size, user-[size]-name-text-font-size, user-[size]-title-text-font-size user-line-height -> user-[size]-initials-text-line-height, user-[size]-name-text-line-height, user-[size]-title-text-line-height user-bg -> user-picture-box-background-color user-fg -> user-initials-text-color user-fg-highlight -> user-picture-box-border-color user-font-family-secondary -> user-name-text-font-family user-size-small -> user-small-height, user-small-width user-size-medium -> user-medium-height, user-medium-width user-size-large -> user-large-height, user-large-width user-size-xlarge -> user-giant-height, user-giant-width NbUserComponent 'showNameValue', 'showTitleValue', 'showInitialsValue' properties removed. Use 'showName', 'showTitle', 'showInitials' instead. NbTabset theme properties prefix changed to 'tabset'. Following properties were renamed: tabs-font-family -> tabset-tab-text-font-family tabs-font-size -> tabset-tab-text-font-size tabs-content-font-family -> tabset-content-text-font-family tabs-content-font-size -> tabset-content-text-font-size tabs-active-bg -> tabset-tab-selected-background-color tabs-padding -> tabset-tab-padding tabs-content-padding -> tabset-content-padding tabs-header-bg -> tabset-tab-background-color tabs-separator -> tabset-divider-color tabs-fg -> tabset-tab-text-color tabs-fg-disabled -> tabset-tab-disabled-text-color tabs-fg-text -> tabset-content-text-color tabs-fg-heading -> tabset-tab-selected-text-color, tabset-tab-focus-text-color, tabset-tab-hover-text-color tabs-bg -> tabset-content-background-color tabs-selected -> tabset-tab-underline-color tabs-icon-only-max-width -> tabset-tab-text-hide-breakpoint Following properties were removed: tabs-active-font-weight tabs-selected-second-color tabs-selected-degrees NbRouteTabset theme properties prefix changed to 'route-tabset'. Following properties were renamed: route-tabs-font-family -> route-tabset-tab-text-font-family route-tabs-font-size -> route-tabset-tab-text-font-size route-tabs-active-bg -> route-tabset-tab-selected-background-color route-tabs-active-font-weight -> route-tabs-padding -> route-tabset-tab-padding route-tabs-header-bg -> route-tabset-tab-background-color route-tabs-separator -> route-tabset-divider-color route-tabs-fg -> route-tabset-tab-text-color route-tabs-fg-disabled -> route-tabset-tab-disabled-text-color route-tabs-fg-heading -> route-tabset-tab-selected-text-color, route-tabset-tab-focus-text-color, route-tabset-tab-hover-text-color route-tabs-selected -> route-tabset-tab-underline-color route-tabs-icon-only-max-width -> route-tabset-tab-text-hide-breakpoint 'route-tabs-bg' property was unused and removed. Following properties were renamed: card-font-size -> card-text-font-size card-font-weight -> card-text-font-weight card-line-height -> card-text-line-height card-bg -> card-background-color card-border-type -> card-border-style card-separator -> card-divider-color card-header-fg -> card-header-text-color card-header-primary-bg -> card-header-primary-background-color card-header-info-bg -> card-header-info-background-color card-header-success-bg -> card-header-success-background-color card-header-warning-bg -> card-header-warning-background-color card-header-danger-bg -> card-header-danger-background-color card-header-disabled-bg -> card-header-disabled-background-color card-margin -> card-margin-bottom card-height-xxsmall -> card-height-tiny card-height-small -> card-height-small card-height-medium -> card-height-medium card-height-large -> card-height-large card-height-xlarge -> card-height-giant Following properties were removed: card-fg card-fg-text card-fg-heading card-header-fg-heading card-header-active-bg card-header-active-fg card-header-border-width card-header-border-type card-header-border-color card-height-xsmall card-height-xxlarge All NbCardComponent static fields were removed. Removed fields: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, ACCENT_PRIMARY, ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER. Use NbComponentStatus, NbComponentSize instead. 'disabled' status replaced with disabled input. 'active' status removed. Card size class renamed from 'card-[size-name]' to 'size-[size-name]'. Card status classes were renamed from '[status-name]-card' to 'status-[status-name]'. NbCardComponent 'xsmall' and 'xxlarge' getters along with 'size-xsmall' and 'size-xxlarge' removed. NbCardComponent 'xxsmall', 'small', 'medium', 'large', 'xlarge' getters renamed to 'tiny', 'small', 'medium', 'large', 'giant' accordingly. Following spinner theme properties were renamed: spinner-bg -> spinner-background-color spinner-circle-bg -> spinner-circle-filled-color spinner-fg -> spinner-text-color spinner-primary-bg -> spinner-primary-circle-filled-color spinner-info-bg -> spinner-info-circle-filled-color spinner-success-bg -> spinner-success-circle-filled-color spinner-warning-bg -> spinner-warning-circle-filled-color spinner-danger-bg -> spinner-danger-circle-filled-color spinner-xsmall -> spinner-height-tiny spinner-small -> spinner-height-small spinner-medium -> spinner-height-medium spinner-large -> spinner-height-large spinner-xlarge -> spinner-height-giant Following properties were removed: spinner-xxsmall spinner-xxlarge spinner-disabled-bg spinner-disabled-fg spinner-active-bg 'active' and 'disabled' along with NbSpinnerComponent STATUS_ACTIVE, STATUS_DISABLED static properties statuses were removed. Following NbSpinnerComponent static properties were removed: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. Classes '[size-name]-spinner' changed to 'size-[size-name]'. Classes '[status-name]-spinner' changed to 'status-[status-name]'. NbSpinnerComponent 'xxsmall' and 'xxlarge' getters removed. Button 'accent' property removed. Static properties removed. Removed properties: SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, SHAPE_RECTANGLE, SHAPE_ROUND, SHAPE_SEMI_ROUND. Use NbComponentSize, NbComponentStatus, NbComponentShape. Size classes were renamed: btn-xsmall -> size-tiny btn-small -> size-small btn-medium -> size-medium btn-large -> size-large Size getter 'xsmall' renamed to tiny. Status classes were renamed: btn-primary -> status-primary btn-info -> status-info btn-success -> status-success btn-warning -> status-warning btn-danger -> status-danger Shape classes were renamed: btn-rectangle -> shape-rectangle btn-round -> shape-round btn-semi-round -> shape-semi-round 'btn-outline' class renamed to 'appearance-outline'. 'btn-hero' class renamed to 'appearance-hero'. Button theme properties prefix changed to 'button' (was 'btn'). Following theme properties were renamed: btn-fg -> button-filled-[status]-text-color, button-outline-[status]-[state?]-text-color, button-ghost-[status]-[state?]-text-color, button-hero-[status]-text-color btn-font-family -> button-text-font-family btn-line-height -> button-[size]-text-line-height btn-cursor -> button-cursor btn-[status]-bg -> button-filled-[status]-background-color btn-[status]-hover-bg -> button-filled-[status]-hover-background-color btn-[status]-active-bg -> button-filled-[status]-active-background-color btn-padding-y-[size], btn-padding-x-[size] -> button-[appearance]-[size]-padding btn-font-size-[size] -> button-[size]-text-font-size btn-rectangle-border-radius -> button-rectangle-border-radius btn-semi-round-border-radius -> button-semi-round-border-radius btn-round-border-radius -> button-round-border-radius btn-hero-shadow -> button-hero-shadow btn-hero-text-shadow -> button-hero-text-shadow btn-hero-bevel-size -> button-hero-bevel-size btn-hero-glow-size -> button-hero-glow-size btn-hero-[status]-bevel-color -> button-hero-[status]-bevel-color btn-hero-[status]-glow-color -> button-hero-[status]-glow-color btn-hero-[status]-left-bg -> button-hero-[status]-left-background-color btn-hero-[status]-right-bg -> button-hero-[status]-right-background-color btn-hero-[status]-left-hover-bg -> button-hero-[status]-hover-left-background-color btn-hero-[status]-right-hover-bg -> button-hero-[status]-hover-right-background-color btn-hero-[status]-left-active-bg -> button-hero-[status]-active-left-background-color btn-hero-[status]-right-active-bg -> button-hero-[status]-active-right-background-color btn-outline-fg -> button-outline-[status]-border-color btn-outline-hover-fg -> button-outline-[status]-hover-border-color btn-outline-focus-fg -> button-outline-[status]-focus-border-color Following theme properties were removed: btn-group-bg btn-group-fg btn-group-separator btn-disabled-opacity btn-secondary-bg btn-secondary-hover-bg btn-secondary-active-bg btn-secondary-border btn-secondary-border-width btn-hero-secondary-bevel-color btn-hero-secondary-glow-color btn-hero-border-radius 'btn-pulse' status renamed to 'button-pulse'. 'btn-full-width' renamed to 'full-width'. Progress Following progress theme variables were renamed: progress-bar-height-xlg -> progress-bar-giant-height progress-bar-height-lg -> progress-bar-large-height progress-bar-height -> progress-bar-medium-height progress-bar-height-sm -> progress-bar-small-height progress-bar-height-xs -> progress-bar-tiny-height progress-bar-font-size-xlg -> progress-bar-giant-text-font-size progress-bar-font-size-lg -> progress-bar-large-text-font-size progress-bar-font-size -> progress-bar-medium-text-font-size progress-bar-font-size-sm -> progress-bar-small-text-font-size progress-bar-font-size-xs -> progress-bar-tiny-text-font-size progress-bar-radius -> progress-bar-border-radius progress-bar-bg -> progress-bar-[status]-background-color progress-bar-font-color -> progress-bar-[status]-background-color progress-bar-font-weight -> progress-bar-[size]-text-font-weight progress-bar-primary-bg -> progress-bar-[status]-background-color progress-bar-success-bg -> progress-bar-[status]-background-color progress-bar-info-bg -> progress-bar-[status]-background-color progress-bar-warning-bg -> progress-bar-[status]-background-color progress-bar-danger-bg -> progress-bar-[status]-background-color 'progress-bar-default-bg' removed. Size values changed from 'xs', 'sm', 'lg', 'xlg' changed to 'tiny', 'small', 'medium', 'large', 'giant'. Size classes now set on nb-progress-bar element. Also class naming changed to 'size-[size-name]', 'status-[status-name]'. Accordion NbAccordionComponent static properties were unused and removed. STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,STATUS_DANGER. Following theme properties were renamed: accordion-header-font-family -> accordion-header-text-font-family accordion-header-font-size -> accordion-header-text-font-size accordion-header-font-weight -> accordion-header-text-font-weight accordion-header-fg-heading -> accordion-header-text-color accordion-header-disabled-fg -> accordion-header-disabled-text-color accordion-header-border-type -> accordion-header-border-style accordion-item-bg -> accordion-item-background-color accordion-item-font-size -> accordion-item-text-font-size accordion-item-font-weight -> accordion-item-text-font-weight accordion-item-font-family -> accordion-item-text-font-family accordion-item-fg-text -> accordion-item-text-color accordion-item-shadow -> accordion-shadow 'accordion-separator' removed. Calendar Following theme properties were renamed: calendar-header-title-font-size -> calendar-header-title-text-font-size calendar-header-title-font-weight -> calendar-header-title-text-font-weight calendar-header-sub-title-font-size -> calendar-header-sub-title-text-font-size calendar-header-sub-title-font-weight -> calendar-header-sub-title-text-font-weight calendar-selected-item-bg -> calendar-cell-selected-background-color calendar-hover-item-bg -> calendar-cell-hover-background-color calendar-today-item-bg -> calendar-cell-today-background-color calendar-active-item-bg -> calendar-cell-active-background-color calendar-fg -> calendar-text-color calendar-selected-fg -> calendar-cell-selected-text-color calendar-today-fg -> calendar-cell-today-text-color calendar-weekday-font-size -> calendar-weekday-text-font-size calendar-weekday-font-weight -> calendar-weekday-text-font-weight calendar-weekday-fg -> calendar-weekday-text-color calendar-weekday-holiday-fg -> calendar-weekday-holiday-text-color calendar-range-bg-in-range -> calendar-in-range-background-color 'calendar-inactive-opacity' and 'calendar-disabled-opacity' removed. Sidebar Following theme properties were renamed: sidebar-fg -> sidebar-text-color sidebar-bg -> sidebar-background-color Datepicker Following theme properties were renamed: datepicker-fg -> datepicker-text-color datepicker-bg -> datepicker-background-color datepicker-border -> datepicker-border-color datepicker-border-radius -> datepicker-border-radius Layout Following theme properties were renamed: header-font-family -> header-text-font-family header-font-size -> header-text-font-size header-line-height -> header-text-line-height header-fg -> header-text-color header-bg -> header-background-color layout-font-family -> layout-text-font-family layout-font-size -> layout-text-font-size layout-line-height -> layout-text-line-height layout-fg -> layout-text-color layout-bg -> layout-background-color layout-window-mode-bg -> layout-window-mode-background-color footer-fg -> footer-text-color footer-fg-highlight -> footer-text-highlight-color footer-bg -> footer-background-color footer-separator -> footer-divider-color Select Only 'null' and 'undefined' option values now considered as reset. false and falsy values such as 0, '', NaN don't reset select value anymore. Menu Collapsed menu icon changes direction based on current layout direction. Overlay Theme property 'overlay-backdrop-bg' renamed to 'overlay-backdrop-background-color'. Icon NbIconComponent status static fields removed. STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. 'status' field now uses common NbComponentStatus type. NbIconComponent static class names renamed to 'status-[status-name]'. Following theme properties were renamed: icon-primary-fg -> icon-primary-color icon-info-fg -> icon-info-color icon-success-fg -> icon-success-color icon-warning-fg -> icon-warning-color icon-danger-fg -> icon-danger-color Actions NbActionsComponent 'inverseValue' field and 'inverse' setter removed. NbActionsComponent 'fullWidthValue' field replaced with 'fullWidth'. NbActionsComponent size class named renamed to 'size-[size-name]'. NbActionsComponent static fields SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE removed. NbActionComponent 'disabledValue' field replaced with 'disabled'. Following theme variables name were renamed: actions-font-size -> actions-[size]-text-font-size actions-font-family -> actions-text-font-family actions-line-height -> actions-text-line-height actions-fg -> actions-text-color actions-bg -> actions-background-color actions-separator -> actions-divider-color actions-padding -> actions-[size]-padding actions-size-small -> actions-small-height actions-size-medium -> actions-medium-height actions-size-large -> actions-large-height Stepper Following theme properties were renamed: stepper-index-size -> stepper-step-index-width stepper-label-font-size -> stepper-step-text-font-size stepper-label-font-weight -> stepper-step-text-font-weight stepper-completed-fg -> stepper-step-completed-text-color stepper-fg -> stepper-step-text-color stepper-step-padding -> stepper-step-content-padding Following theme properties were removed: stepper-accent-color stepper-completed-icon-size stepper-completed-icon-weight NbStepperOrientation changed to type. NbStepperComponent 'disableStepNavigationValue' property removed. Use 'disableStepNavigation' instead. Alert NbAlertComponent 'closableValue' replaced with 'closable'. All NbAlertComponent static fields removed. SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER, ACCENT_ACTIVE, ACCENT_DISABLED, ACCENT_PRIMARY, ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER, OUTLINE_ACTIVE, OUTLINE_DISABLED, OUTLINE_PRIMARY, OUTLINE_INFO, OUTLINE_SUCCESS, OUTLINE_WARNING, OUTLINE_DANGE. Active status removed. Disabled become input instead of status value. Disabled class renamed to 'disabled'. NbAlertComponent 'hasAccent', 'hasStatus', 'hasOutline' getters removed. Status class names changed to 'status-[status-name]'. Outline class names changed to 'outline-[status-name]'. Accent class names changed to 'accent-[status-name]'. Following theme properties were renamed: alert-font-size -> alert-text-font-size alert-line-height -> alert-text-line-height alert-font-weight -> alert-text-font-weight alert-fg -> alert-text-color alert-bg -> alert-background-color alert-disabled-bg -> alert-disabled-background-color alert-disabled-fg -> alert-disabled-text-color alert-primary-bg -> alert-primary-background-color alert-info-bg -> alert-info-background-color alert-success-bg -> alert-success-background-color alert-warning-bg -> alert-warning-background-color alert-danger-bg -> alert-danger-background-color alert-height-xsmall -> alert-tiny-height alert-height-small -> alert-small-height alert-height-medium -> alert-medium-height alert-height-large -> alert-medium-padding alert-height-xlarge -> alert-large-height alert-closable-padding -> alert-closable-start-padding alert-margin -> alert-bottom-margin Following theme properties removed: alert-outline-fg alert-active-bg alert-height-xxsmall alert-height-xxlarge alert-button-padding Badge NbBadgeComponent status static fields removed. STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. NbBadgeComponent position static fields replaced with NbBadgePosition type. Removed properties: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, TOP_START, TOP_END, BOTTOM_START, BOTTOM_END. Badge status class now set on host element NbBadgeComponent 'positionClass' getter removed. Badge position class set on host element. Position class names prefixed with 'position-'. Following theme properties were renamed: badge-fg-text -> badge-[status]-text-color badge-primary-bg-color -> badge-primary-background-color badge-success-bg-color -> badge-success-background-color badge-info-bg-color -> badge-info-background-color badge-warning-bg-color -> badge-warning-background-color badge-danger-bg-color -> badge-danger-background-color Tree-grid Following theme properties were renamed: tree-grid-header-bg -> tree-grid-header-background tree-grid-footer-bg -> tree-grid-footer-background tree-grid-row-bg -> tree-grid-row-background tree-grid-row-bg-even -> tree-grid-row-even-background tree-grid-row-hover-bg -> tree-grid-row-hover-background Following theme properties were removed: tree-grid-sort-header-button-font-weight tree-grid-sort-header-button-color tree-grid-icon-color Select Arrow selector and element changed to svg icon. NbSelectComponent 'isOpened' getter renamed to 'isOpen'. NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter renamed to 'disabledAttribute'. Following theme properties were renamed: select-border-width -> select-[appearance]-border-width select-max-height -> select-options-list-max-height select-bg -> select-[appearance]-background-color select-option-disabled-bg -> select-option-[appearance]-disabled-background-color select-option-padding -> select-option-[appearance]-[size]-padding Following theme properties removed: select-checkmark-color select-checkbox-color select-option-disabled-opacity Chat NbChatComponent 'accent' field removed. NbChatComponent sizes 'xxsmall' and 'xxlarge' removed. 'xsmall' size changed to 'tiny', 'xlarge' changed to 'giant'. Size class changed to 'size-[size-name]'. All size static fields removed (SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE). NbChatComponent 'active' status removed. Disabled status removed. Use disabled input instead. Status class names changed to 'status-[status-name]'. NbChatMessageComponent 'replyValue' changed to 'reply'. Following theme properties removed: chat-font-size -> chat-text-font-size chat-fg -> chat-text-color chat-bg -> chat-background-color chat-height-xsmall -> chat-tiny-height chat-height-small -> chat-small-height chat-height-medium -> chat-medium-height chat-height-large -> chat-large-height chat-height-xlarge -> chat-giant-height chat-separator -> chat-divider-color chat-message-fg -> chat-message-text-color chat-message-bg -> chat-message-background chat-message-reply-bg -> chat-message-reply-background-color chat-message-reply-fg -> chat-message-reply-text-color chat-message-avatar-bg -> chat-message-avatar-background-color chat-message-sender-fg -> chat-message-sender-text-color chat-message-quote-fg -> chat-message-quote-background-color chat-message-quote-bg -> chat-message-quote-text-color chat-message-file-fg -> chat-message-file-text-color chat-message-file-bg -> chat-message-file-background-color chat-primary-bg -> chat-primary-background-color chat-success-bg -> chat-success-background-color chat-info-bg -> chat-info-background-color chat-warning-bg -> chat-warning-background-color chat-danger-bg -> chat-danger-background-color Following theme properties removed: chat-fg-text chat-height-xxsmall chat-height-xxlarge chat-form-bg chat-form-fg chat-form-border chat-form-placeholder-fg chat-form-active-border chat-disabled-bg chat-disabled-fg chat-active-bg Toastr NbToastStatus enum removed. Toastr now uses common NbComponentstatus type. NbToastComponent status class names changed to 'status-[status-name]'. 'default' class removed. Following theme properties were renamed: toastr-bg -> toastr-background toastr-fg -> toastr-text-color toastr-border -> toastr-border-style, toastr-border-width 'toastr-icon-radius' removed. Search Following theme properties renamed: search-bg -> search-background-color search-bg-secondary -> search-extra-background-color search-text -> search-text-color search-info -> search-info-text-color search-dash -> search-divider-color search-placeholder -> search-placeholder-text-color Following theme properties removed: search-btn-open-fg search-btn-close-fg Menu Removed inverse mode. NbMenuComponent 'autoCollapseValue' property changed to 'autoCollapse'. Following theme variables were removed: menu-font-family -> menu-text-font-family menu-font-size -> menu-text-font-size menu-font-weight -> menu-text-font-weight menu-fg -> menu-text-color menu-bg -> menu-background-color menu-active-fg -> menu-item-active-text-color menu-active-bg -> menu-item-active-background-color menu-submenu-bg -> menu-submenu-background-color menu-submenu-fg -> menu-submenu-text-color menu-submenu-active-fg -> menu-submenu-item-active-text-color menu-submenu-active-bg -> menu-submenu-item-active-background-color menu-submenu-active-border-color -> menu-submenu-item-active-border-color menu-submenu-hover-fg -> menu-item-hover-text-color menu-submenu-hover-bg -> menu-item-hover-background-color menu-group-fg -> menu-group-text-color menu-item-separator -> menu-item-divider-color menu-icon-font-size -> menu-item-icon-width menu-icon-margin -> menu-item-icon-margin menu-icon-color -> menu-item-icon-color menu-icon-active-color -> menu-item-icon-active-color Following theme properties were removed: menu-submenu-active-shadow menu-active-font-weight menu-submenu-item-container-padding menu-group-font-weight menu-group-font-size menu-group-padding Context menu 'context-menu-border' split into 'context-menu-border-color', 'context-menu-border-style' and 'context-menu-border-width'. Following theme properties were removed: context-menu-fg context-menu-bg context-menu-active-fg context-menu-active-bg context-menu-arrow-size Typography 'alert', 'alert-success', 'alert-info', 'alert-warning', 'alert-danger', 'alert-primary', 'alert-hint', 'font-secondary', 'font-main', 'font-w-light', 'font-w-regular', 'font-w-bold', 'text-primary', 'text-warning', 'text-success', 'text-info', 'text-danger', 'text-heading', 'text-body', 'text-hint', 'text-white', 'bg-primary', 'bg-warning', 'bg-success', 'bg-info', 'bg-danger', 'bg-heading', 'bg-body', 'bg-hint', 'bg-white', 'text-indent', 'blockquote', 'blockquote-reverse', 'blockquote-footer', 'small', 'mark'.
yggg
pushed a commit
that referenced
this issue
May 27, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I know this is on
theme/styles/_theming.scssbut setting it to true doesn't make@angular/cli's webpack happy.$nb-enable-css-variables: false !global;I would like to be able to use CSS variables in my projects!!
Thank you!
The text was updated successfully, but these errors were encountered: