Skip to content

Commit

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

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.
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent 98a159c commit c5f7ead
Show file tree
Hide file tree
Showing 5 changed files with 261 additions and 215 deletions.
207 changes: 87 additions & 120 deletions src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@
.header {
display: flex;
flex-direction: column;

color: nb-theme(calendar-header-text-color);
font-family: nb-theme(calendar-header-text-font-family);
}

.title {
display: flex;
align-items: center;
color: nb-theme(calendar-fg);
font-weight: nb-theme(calendar-header-title-font-weight);
font-size: nb-theme(calendar-header-title-font-size);
font-size: nb-theme(calendar-header-title-text-font-size);
font-weight: nb-theme(calendar-header-title-text-font-weight);
line-height: nb-theme(calendar-header-title-text-line-height);

.nb-arrow-dropright {
margin-left: 0.5rem;
Expand All @@ -28,82 +31,48 @@
}

&:hover {
color: nb-theme(calendar-hover-item-bg);
color: nb-theme(calendar-cell-hover-background-color);
cursor: pointer;
}

&:active {
color: nb-theme(calendar-active-item-bg);
color: nb-theme(calendar-cell-active-background-color);
}
}

.sub-title {
color: nb-theme(calendar-weekday-fg);
font-weight: nb-theme(calendar-header-sub-title-font-weight);
font-size: nb-theme(calendar-header-sub-title-font-size);
font-size: nb-theme(calendar-header-sub-title-text-font-size);
font-weight: nb-theme(calendar-header-sub-title-text-font-weight);
line-height: nb-theme(calendar-header-sub-title-text-line-height);
}
}

nb-calendar-navigation button[nbButton] {
width: nb-theme(calendar-navigation-button-width);
}

nb-calendar-day-picker .day-cell,
nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
color: nb-theme(calendar-fg);
display: flex;
align-items: center;
justify-content: center;
margin: 1px;

&:not(.empty):not(.disabled) {
cursor: pointer;
}
}

nb-calendar-year-picker {
&.medium .year-cell {
width: nb-theme(calendar-year-cell-width);
height: nb-theme(calendar-year-cell-height);
}
nb-calendar-days-names .day {
width: nb-theme(calendar-weekday-width);
height: nb-theme(calendar-weekday-height);
color: nb-theme(calendar-weekday-text-color);
font-size: nb-theme(calendar-weekday-text-font-size);
font-weight: nb-theme(calendar-weekday-text-font-weight);
line-height: nb-theme(calendar-weekday-text-line-height);

&.large .year-cell {
width: nb-theme(calendar-year-cell-large-width);
height: nb-theme(calendar-year-cell-large-height);
&.holiday {
color: nb-theme(calendar-weekday-holiday-text-color);
}
}

nb-calendar-year-picker .year-cell {
border-radius: nb-theme(calendar-border-radius);

&.disabled {
background: nb-theme(calendar-today-item-bg);
opacity: nb-theme(calendar-disabled-opacity);
}

&.today {
background: nb-theme(calendar-today-item-bg);
font-weight: nb-theme(font-weight-bold);
color: nb-theme(calendar-today-fg);
}

&.selected {
background: nb-theme(calendar-selected-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
}

&:hover, &:hover:active {
background: nb-theme(calendar-hover-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
nb-calendar-day-picker {
&.medium .day-cell {
width: nb-theme(calendar-day-cell-width);
height: nb-theme(calendar-day-cell-height);
}

&:active {
background: nb-theme(calendar-active-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
&.large .day-cell {
width: nb-theme(calendar-day-cell-large-width);
height: nb-theme(calendar-day-cell-large-height);
}
}

Expand All @@ -119,91 +88,89 @@
}
}

nb-calendar-month-picker .month-cell {
nb-calendar-year-picker {
&.medium .year-cell {
width: nb-theme(calendar-year-cell-width);
height: nb-theme(calendar-year-cell-height);
}

&.large .year-cell {
width: nb-theme(calendar-year-cell-large-width);
height: nb-theme(calendar-year-cell-large-height);
}
}

nb-calendar-day-picker .day-cell,
nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
border-radius: nb-theme(calendar-border-radius);
color: nb-theme(calendar-text-color);
font-family: nb-theme(calendar-text-font-family);
font-size: nb-theme(calendar-text-font-size);
font-weight: nb-theme(calendar-text-font-weight);
line-height: nb-theme(calendar-text-line-height);

display: flex;
align-items: center;
justify-content: center;
margin: 1px;

&:not(.empty):not(.disabled) {
cursor: pointer;
}

&.disabled {
background: nb-theme(calendar-today-item-bg);
opacity: nb-theme(calendar-disabled-opacity);
background-color: nb-theme(calendar-cell-disabled-background-color);
color: nb-theme(calendar-cell-disabled-text-color);
}

&.today {
background: nb-theme(calendar-today-item-bg);
font-weight: nb-theme(font-weight-bold);
color: nb-theme(calendar-today-fg);
background-color: nb-theme(calendar-cell-today-background-color);
color: nb-theme(calendar-cell-today-text-color);
font-size: nb-theme(calendar-cell-today-text-font-size);
font-weight: nb-theme(calendar-cell-today-text-font-weight);
line-height: nb-theme(calendar-cell-today-text-line-height);
}

&.selected {
background: nb-theme(calendar-selected-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
background-color: nb-theme(calendar-cell-selected-background-color);
color: nb-theme(calendar-cell-selected-text-color);
font-size: nb-theme(calendar-cell-selected-text-font-size);
font-weight: nb-theme(calendar-cell-selected-text-font-weight);
line-height: nb-theme(calendar-cell-selected-text-line-height);
}
}

nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
&:hover, &:hover:active {
background: nb-theme(calendar-hover-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
background-color: nb-theme(calendar-cell-hover-background-color);
color: nb-theme(calendar-cell-hover-text-color);
font-size: nb-theme(calendar-cell-hover-text-font-size);
font-weight: nb-theme(calendar-cell-hover-text-font-weight);
line-height: nb-theme(calendar-cell-hover-text-line-height);
}

&:active {
background: nb-theme(calendar-active-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
}
}

nb-calendar-day-picker {
&.medium .day-cell {
width: nb-theme(calendar-day-cell-width);
height: nb-theme(calendar-day-cell-height);
}

&.large .day-cell {
width: nb-theme(calendar-day-cell-large-width);
height: nb-theme(calendar-day-cell-large-height);
background-color: nb-theme(calendar-cell-active-background-color);
color: nb-theme(calendar-cell-active-text-color);
font-size: nb-theme(calendar-cell-active-text-font-size);
font-weight: nb-theme(calendar-cell-active-text-font-weight);
line-height: nb-theme(calendar-cell-active-text-line-height);
}
}

nb-calendar-day-picker .day-cell {
border-radius: nb-theme(calendar-border-radius);

&.today {
background: nb-theme(calendar-today-item-bg);
font-weight: nb-theme(font-weight-bold);
color: nb-theme(calendar-today-fg);
}

&.bounding-month {
opacity: nb-theme(calendar-inactive-opacity);
}

&.disabled {
background: nb-theme(calendar-today-item-bg);
opacity: nb-theme(calendar-disabled-opacity);
color: nb-theme(calendar-cell-inactive-text-color);
}

&:not(.disabled):not(.empty):hover {
background: nb-theme(calendar-hover-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
}

&.selected {
background: nb-theme(calendar-active-item-bg);
color: nb-theme(calendar-selected-fg);
font-weight: nb-theme(font-weight-bold);
}
}

nb-calendar-days-names .day {
width: nb-theme(calendar-weekday-width);
height: nb-theme(calendar-weekday-height);
font-size: nb-theme(calendar-weekday-font-size);
font-weight: nb-theme(calendar-weekday-font-weight);
color: nb-theme(calendar-weekday-fg);

&.holiday {
color: nb-theme(calendar-weekday-holiday-fg);
background-color: nb-theme(calendar-cell-hover-background-color);
color: nb-theme(calendar-cell-hover-text-color);
font-size: nb-theme(calendar-cell-hover-text-font-size);
font-weight: nb-theme(calendar-cell-hover-text-font-weight);
line-height: nb-theme(calendar-cell-hover-text-line-height);
}
}
}
4 changes: 2 additions & 2 deletions src/framework/theme/components/calendar/_calendar.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}

&.in-range {
background: nb-theme(calendar-range-bg-in-range);
background: nb-theme(calendar-cell-in-range-background-color);

&:not(.today, :hover) {
border-radius: 0;
Expand All @@ -52,7 +52,7 @@

&.start, &.end {
@extend .selected;
background: nb-theme(calendar-range-bg-in-range);
background: nb-theme(calendar-cell-in-range-background-color);
}

&.start {
Expand Down
Loading

0 comments on commit c5f7ead

Please sign in to comment.