Skip to content

Commit

Permalink
feat(card): Eva style (#1346)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:

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.
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent 25f30c5 commit cd4972c
Show file tree
Hide file tree
Showing 8 changed files with 225 additions and 301 deletions.
147 changes: 44 additions & 103 deletions src/framework/theme/components/card/_card.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,135 +6,76 @@

@mixin nb-card-header() {
padding: nb-theme(card-padding);
border-bottom-width: nb-theme(card-header-border-width);
border-bottom-style: nb-theme(card-header-border-type);
border-bottom-color: nb-theme(card-header-border-color);
border-bottom: nb-theme(card-divider-width) nb-theme(card-divider-style) nb-theme(card-divider-color);
border-top-left-radius: nb-theme(card-border-radius);
border-top-right-radius: nb-theme(card-border-radius);
color: nb-theme(card-header-fg-heading);

font-family: nb-theme(card-header-font-family);
font-size: nb-theme(card-header-font-size);
font-weight: nb-theme(card-header-font-weight);
color: nb-theme(card-header-text-color);
font-family: nb-theme(card-header-text-font-family);
font-size: nb-theme(card-header-text-font-size);
font-weight: nb-theme(card-header-text-font-weight);
line-height: nb-theme(card-header-text-line-height);

@include nb-headings();
}

@mixin nb-card-theme() {
nb-card {
font-size: nb-theme(card-font-size);
line-height: nb-theme(card-line-height);

background: nb-theme(card-bg);
color: nb-theme(card-fg-text);
// TODO: move card margin style to layout
margin-bottom: nb-theme(card-margin);
background-color: nb-theme(card-background-color);
border: nb-theme(card-border-width) nb-theme(card-border-style) nb-theme(card-border-color);
border-radius: nb-theme(card-border-radius);
box-shadow: nb-theme(card-shadow);
font-weight: nb-theme(card-font-weight);
border: nb-theme(card-border-width) nb-theme(card-border-type) nb-theme(card-border-color);

@include nb-scrollbars(
nb-theme(scrollbar-fg),
nb-theme(scrollbar-bg),
nb-theme(scrollbar-width));
color: nb-theme(card-text-color);
font-family: nb-theme(card-text-font-family);
font-size: nb-theme(card-text-font-size);
font-weight: nb-theme(card-text-font-weight);
line-height: nb-theme(card-text-line-height);

&.xxsmall-card {
height: nb-theme(card-height-xxsmall);
}
&.xsmall-card {
height: nb-theme(card-height-xsmall);
}
&.small-card {
height: nb-theme(card-height-small);
}
&.medium-card {
height: nb-theme(card-height-medium);
}
&.large-card {
height: nb-theme(card-height-large);
}
&.xlarge-card {
height: nb-theme(card-height-xlarge);
}
&.xxlarge-card {
height: nb-theme(card-height-xxlarge);
}
// TODO: move card margin style to layout
margin-bottom: nb-theme(card-margin-bottom);

&.active-card {
nb-card-header {
background-color: nb-theme(card-header-active-bg);
border-bottom-color: nb-theme(card-header-active-bg);
color: nb-theme(card-header-active-fg);
}
}
&.disabled-card {
nb-card-header {
background-color: nb-theme(card-header-disabled-bg);
border-bottom-color: nb-theme(card-header-disabled-bg);
}
}
&.primary-card {
nb-card-header {
background-color: nb-theme(card-header-primary-bg);
border-bottom-color: nb-theme(card-header-primary-bg);
}
}
&.info-card {
nb-card-header {
background-color: nb-theme(card-header-info-bg);
border-bottom-color: nb-theme(card-header-info-bg);
@include nb-scrollbars(
nb-theme(card-scrollbar-color),
nb-theme(card-scrollbar-background-color),
nb-theme(card-scrollbar-width));

@each $size in nb-get-sizes() {
&.size-#{$size} {
height: nb-theme(card-height-#{$size});
}
}
&.success-card {

&[disabled] {
nb-card-header {
background-color: nb-theme(card-header-success-bg);
border-bottom-color: nb-theme(card-header-success-bg);
background-color: nb-theme(card-header-disabled-background-color);
color: nb-theme(card-header-disabled-text-color);
}
}
&.warning-card {
nb-card-header {
background-color: nb-theme(card-header-warning-bg);
border-bottom-color: nb-theme(card-header-warning-bg);

@each $status in nb-get-statuses() {
&.status-#{$status} {
nb-card-header {
background-color: nb-theme(card-header-#{$status}-background-color);
border-bottom-width: 0;
border-bottom-color: nb-theme(card-header-#{$status}-background-color);
color: nb-theme(card-header-#{$status}-text-color);
}
}
}
&.danger-card {
nb-card-header {
background-color: nb-theme(card-header-danger-bg);
border-bottom-color: nb-theme(card-header-danger-bg);

&.accent-#{$status} {
border-top-color: nb-theme(card-header-#{$status}-background-color);
}
}

&.accent {
border-top-style: solid;
border-top-style: nb-theme(card-border-style);
border-top-width: nb-theme(card-border-radius);

& nb-card-header {
border-radius: 0;
}
}

&.accent-active {
border-top-color: nb-theme(card-header-active-bg);
}
&.accent-disabled {
border-top-color: nb-theme(card-header-disabled-bg);
}
&.accent-primary {
border-top-color: nb-theme(card-header-primary-bg);
}
&.accent-success {
border-top-color: nb-theme(card-header-success-bg);
}
&.accent-info {
border-top-color: nb-theme(card-header-info-bg);
}
&.accent-warning {
border-top-color: nb-theme(card-header-warning-bg);
}
&.accent-danger {
border-top-color: nb-theme(card-header-danger-bg);
}
}

nb-card-body {
Expand All @@ -144,14 +85,14 @@
padding: nb-theme(card-padding);
position: relative;
@include nb-scrollbars(
nb-theme(scrollbar-fg),
nb-theme(scrollbar-bg),
nb-theme(scrollbar-width));
nb-theme(card-scrollbar-color),
nb-theme(card-scrollbar-background-color),
nb-theme(card-scrollbar-width));
}

nb-card-footer {
padding: nb-theme(card-padding);
border-top: 1px solid nb-theme(card-separator);
border-top: nb-theme(card-divider-width) nb-theme(card-divider-style) nb-theme(card-divider-color);
border-bottom-left-radius: nb-theme(card-border-radius);
border-bottom-right-radius: nb-theme(card-border-radius);
}
Expand Down
Loading

0 comments on commit cd4972c

Please sign in to comment.