From d67418eeb7d097c244d74fd8e36fb964ea346372 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 8 Apr 2019 21:57:21 +0300 Subject: [PATCH] feat(calendar): Eva style 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. --- .../calendar-kit/_calendar-kit.theme.scss | 207 ++++++++---------- .../calendar/_calendar.component.theme.scss | 4 +- .../calendar/calendar-range.component.ts | 99 +++++---- .../components/calendar/calendar.component.ts | 99 +++++---- .../theme/styles/themes/_default.scss | 67 ++++-- 5 files changed, 261 insertions(+), 215 deletions(-) diff --git a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss index ddcd6d376c..a3131cad30 100644 --- a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss +++ b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss @@ -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; @@ -28,19 +31,19 @@ } &: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); } } @@ -48,62 +51,28 @@ 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); } } @@ -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); } } } diff --git a/src/framework/theme/components/calendar/_calendar.component.theme.scss b/src/framework/theme/components/calendar/_calendar.component.theme.scss index 9846f254fa..ef7b688d6b 100644 --- a/src/framework/theme/components/calendar/_calendar.component.theme.scss +++ b/src/framework/theme/components/calendar/_calendar.component.theme.scss @@ -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; @@ -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 { diff --git a/src/framework/theme/components/calendar/calendar-range.component.ts b/src/framework/theme/components/calendar/calendar-range.component.ts index 4ce97212f2..6bf7bda86c 100644 --- a/src/framework/theme/components/calendar/calendar-range.component.ts +++ b/src/framework/theme/components/calendar/calendar-range.component.ts @@ -46,43 +46,68 @@ export interface NbCalendarRange { * * @styles * - * calendar-width - * calendar-body-height - * calendar-header-title-font-size - * calendar-header-title-font-weight - * calendar-header-sub-title-font-size - * calendar-header-sub-title-font-weight - * calendar-navigation-button-width - * calendar-selected-item-bg - * calendar-hover-item-bg - * calendar-today-item-bg - * calendar-active-item-bg - * calendar-fg - * calendar-selected-fg - * calendar-day-cell-width - * calendar-day-cell-height - * calendar-month-cell-width - * calendar-month-cell-height - * calendar-year-cell-width - * calendar-year-cell-height - * calendar-inactive-opacity - * calendar-disabled-opacity - * calendar-border-radius - * calendar-weekday-width - * calendar-weekday-height - * calendar-weekday-font-size - * calendar-weekday-font-weight - * calendar-weekday-fg - * calendar-weekday-holiday-fg - * calendar-range-bg-in-range - * calendar-large-width - * calendar-large-body-height - * calendar-day-cell-large-width - * calendar-day-cell-large-height - * calendar-month-cell-large-width - * calendar-month-cell-large-height - * calendar-year-cell-large-width - * calendar-year-cell-large-height + * calendar-width: + * calendar-body-height: + * calendar-border-radius: + * calendar-text-color: + * calendar-text-font-family: + * calendar-text-font-size: + * calendar-text-font-weight: + * calendar-text-line-height: + * calendar-header-text-color: + * calendar-header-text-font-family: + * calendar-header-title-text-font-size: + * calendar-header-title-text-font-weight: + * calendar-header-title-text-line-height: + * calendar-header-sub-title-text-font-size: + * calendar-header-sub-title-text-font-weight: + * calendar-header-sub-title-text-line-height: + * calendar-navigation-button-width: + * calendar-cell-inactive-text-color: + * calendar-cell-disabled-background-color: + * calendar-cell-disabled-text-color: + * calendar-cell-selected-background-color: + * calendar-cell-selected-text-color: + * calendar-cell-selected-text-font-size: + * calendar-cell-selected-text-font-weight: + * calendar-cell-selected-text-line-height: + * calendar-cell-hover-background-color: + * calendar-cell-hover-text-color: + * calendar-cell-hover-text-font-size: + * calendar-cell-hover-text-font-weight: + * calendar-cell-hover-text-line-height: + * calendar-cell-active-background-color: + * calendar-cell-active-text-color: + * calendar-cell-active-text-font-size: + * calendar-cell-active-text-font-weight: + * calendar-cell-active-text-line-height: + * calendar-cell-today-background-color: + * calendar-cell-today-text-color: + * calendar-cell-today-text-font-size: + * calendar-cell-today-text-font-weight: + * calendar-cell-today-text-line-height: + * calendar-day-cell-width: + * calendar-day-cell-height: + * calendar-month-cell-width: + * calendar-month-cell-height: + * calendar-year-cell-width: + * calendar-year-cell-height: + * calendar-weekday-width: + * calendar-weekday-height: + * calendar-weekday-text-color: + * calendar-weekday-text-font-size: + * calendar-weekday-text-font-weight: + * calendar-weekday-text-line-height: + * calendar-weekday-holiday-text-color: + * calendar-cell-in-range-background-color: + * calendar-large-width: + * calendar-large-body-height: + * calendar-day-cell-large-width: + * calendar-day-cell-large-height: + * calendar-month-cell-large-width: + * calendar-month-cell-large-height: + * calendar-year-cell-large-width: + * calendar-year-cell-large-height: * */ @Component({ selector: 'nb-calendar-range', diff --git a/src/framework/theme/components/calendar/calendar.component.ts b/src/framework/theme/components/calendar/calendar.component.ts index 91bd53a638..5ebfd33b63 100644 --- a/src/framework/theme/components/calendar/calendar.component.ts +++ b/src/framework/theme/components/calendar/calendar.component.ts @@ -76,43 +76,68 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar- * * @styles * - * calendar-width - * calendar-body-height - * calendar-header-title-font-size - * calendar-header-title-font-weight - * calendar-header-sub-title-font-size - * calendar-header-sub-title-font-weight - * calendar-navigation-button-width - * calendar-selected-item-bg - * calendar-hover-item-bg - * calendar-today-item-bg - * calendar-active-item-bg - * calendar-fg - * calendar-selected-fg - * calendar-day-cell-width - * calendar-day-cell-height - * calendar-month-cell-width - * calendar-month-cell-height - * calendar-year-cell-width - * calendar-year-cell-height - * calendar-inactive-opacity - * calendar-disabled-opacity - * calendar-border-radius - * calendar-weekday-width - * calendar-weekday-height - * calendar-weekday-font-size - * calendar-weekday-font-weight - * calendar-weekday-fg - * calendar-weekday-holiday-fg - * calendar-range-bg-in-range - * calendar-large-width - * calendar-large-body-height - * calendar-day-cell-large-width - * calendar-day-cell-large-height - * calendar-month-cell-large-width - * calendar-month-cell-large-height - * calendar-year-cell-large-width - * calendar-year-cell-large-height + * calendar-width: + * calendar-body-height: + * calendar-border-radius: + * calendar-text-color: + * calendar-text-font-family: + * calendar-text-font-size: + * calendar-text-font-weight: + * calendar-text-line-height: + * calendar-header-text-color: + * calendar-header-text-font-family: + * calendar-header-title-text-font-size: + * calendar-header-title-text-font-weight: + * calendar-header-title-text-line-height: + * calendar-header-sub-title-text-font-size: + * calendar-header-sub-title-text-font-weight: + * calendar-header-sub-title-text-line-height: + * calendar-navigation-button-width: + * calendar-cell-inactive-text-color: + * calendar-cell-disabled-background-color: + * calendar-cell-disabled-text-color: + * calendar-cell-selected-background-color: + * calendar-cell-selected-text-color: + * calendar-cell-selected-text-font-size: + * calendar-cell-selected-text-font-weight: + * calendar-cell-selected-text-line-height: + * calendar-cell-hover-background-color: + * calendar-cell-hover-text-color: + * calendar-cell-hover-text-font-size: + * calendar-cell-hover-text-font-weight: + * calendar-cell-hover-text-line-height: + * calendar-cell-active-background-color: + * calendar-cell-active-text-color: + * calendar-cell-active-text-font-size: + * calendar-cell-active-text-font-weight: + * calendar-cell-active-text-line-height: + * calendar-cell-today-background-color: + * calendar-cell-today-text-color: + * calendar-cell-today-text-font-size: + * calendar-cell-today-text-font-weight: + * calendar-cell-today-text-line-height: + * calendar-day-cell-width: + * calendar-day-cell-height: + * calendar-month-cell-width: + * calendar-month-cell-height: + * calendar-year-cell-width: + * calendar-year-cell-height: + * calendar-weekday-width: + * calendar-weekday-height: + * calendar-weekday-text-color: + * calendar-weekday-text-font-size: + * calendar-weekday-text-font-weight: + * calendar-weekday-text-line-height: + * calendar-weekday-holiday-text-color: + * calendar-cell-in-range-background-color: + * calendar-large-width: + * calendar-large-body-height: + * calendar-day-cell-large-width: + * calendar-day-cell-large-height: + * calendar-month-cell-large-width: + * calendar-month-cell-large-height: + * calendar-year-cell-large-width: + * calendar-year-cell-large-height: * */ @Component({ selector: 'nb-calendar', diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index c174b811e0..a350b130a5 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1061,34 +1061,63 @@ $theme: ( calendar-width: 21.875rem, calendar-body-height: 25.625rem, - calendar-header-title-font-size: font-size-xlg, - calendar-header-title-font-weight: font-weight-bold, - calendar-header-sub-title-font-size: font-size, - calendar-header-sub-title-font-weight: font-weight-thin, + calendar-border-radius: radius, + calendar-text-color: text-dark-color, + calendar-text-font-family: text-paragraph-font-family, + calendar-text-font-size: text-paragraph-font-size, + calendar-text-font-weight: text-paragraph-font-weight, + calendar-text-line-height: text-paragraph-line-height, + + calendar-header-text-color: text-dark-color, + calendar-header-text-font-family: text-heading-6-font-family, + calendar-header-title-text-font-size: text-heading-6-font-size, + calendar-header-title-text-font-weight: text-heading-6-font-weight, + calendar-header-title-text-line-height: text-heading-6-line-height, + calendar-header-sub-title-text-font-size: text-paragraph-line-height, + calendar-header-sub-title-text-font-weight: text-paragraph-font-weight, + calendar-header-sub-title-text-line-height: text-paragraph-line-height, + calendar-navigation-button-width: 10rem, - calendar-selected-item-bg: color-success, - calendar-hover-item-bg: calendar-selected-item-bg, - calendar-today-item-bg: color-bg-active, - calendar-active-item-bg: color-success, - calendar-fg: color-fg-text, - calendar-selected-fg: color-white, - calendar-today-fg: calendar-fg, + + calendar-cell-inactive-text-color: text-disabled-color, + calendar-cell-in-range-background-color: color-primary-200, + calendar-cell-disabled-background-color: color-basic-disabled, + calendar-cell-disabled-text-color: text-disabled-color, + calendar-cell-selected-background-color: color-primary, + calendar-cell-selected-text-color: text-light-color, + calendar-cell-selected-text-font-size: text-subtitle-font-size, + calendar-cell-selected-text-font-weight: text-subtitle-font-weight, + calendar-cell-selected-text-line-height: text-subtitle-line-height, + calendar-cell-hover-background-color: color-primary-hover, + calendar-cell-hover-text-color: text-light-color, + calendar-cell-hover-text-font-size: text-subtitle-font-size, + calendar-cell-hover-text-font-weight: text-subtitle-font-weight, + calendar-cell-hover-text-line-height: text-subtitle-line-height, + calendar-cell-active-background-color: color-primary-active, + calendar-cell-active-text-color: color-primary-active, + calendar-cell-active-text-font-size: text-subtitle-font-size, + calendar-cell-active-text-font-weight: text-subtitle-font-weight, + calendar-cell-active-text-line-height: text-subtitle-line-height, + calendar-cell-today-background-color: color-basic, + calendar-cell-today-text-color: text-dark-color, + calendar-cell-today-text-font-size: text-subtitle-font-size, + calendar-cell-today-text-font-weight: text-subtitle-font-weight, + calendar-cell-today-text-line-height: text-subtitle-line-height, + calendar-day-cell-width: 2.625rem, calendar-day-cell-height: 2.625rem, calendar-month-cell-width: 4.25rem, calendar-month-cell-height: 2.375rem, calendar-year-cell-width: calendar-month-cell-width, calendar-year-cell-height: calendar-month-cell-height, - calendar-inactive-opacity: 0.5, - calendar-disabled-opacity: 0.3, - calendar-border-radius: radius, + calendar-weekday-width: calendar-day-cell-width, calendar-weekday-height: 1.75rem, - calendar-weekday-font-size: font-size-xs, - calendar-weekday-font-weight: font-weight-normal, - calendar-weekday-fg: color-fg, - calendar-weekday-holiday-fg: color-danger, - calendar-range-bg-in-range: #ebfbf2, + calendar-weekday-text-color: color-basic, + calendar-weekday-text-font-size: text-paragraph-2-font-size, + calendar-weekday-text-font-weight: text-paragraph-2-font-weight, + calendar-weekday-text-line-height: text-paragraph-2-line-height, + calendar-weekday-holiday-text-color: text-danger-color, calendar-large-width: 24.375rem, calendar-large-body-height: 27.75rem,