Extract calendar and datetime variables

packages/bootstrap/scss/_variables.scss

@@ -1550,158 +1550,6 @@ $rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
 $rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;
 
 
-// Calendar
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: $line-height !default;
-
-$calendar-header-padding-x: $padding-x !default;
-$calendar-header-padding-y: $padding-y !default;
-$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
-$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
-$calendar-header-border-width: 1px !default;
-
-$calendar-header-min-width: 280px !default;
-
-$calendar-content-padding-x: $calendar-header-padding-x !default;
-$calendar-content-padding-y: $calendar-header-padding-y !default;
-
-$calendar-cell-padding-x: .5rem !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-size-px: 40px !default;
-$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1rem !default;
-$calendar-cell-border-radius: $border-radius !default;
-
-$calendar-header-cell-padding-x: 0px !default;
-$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-
-$calendar-header-height: 2em !default;
-
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
-
-$calendar-view-width: 7 * $calendar-cell-size !default;
-$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
-
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
-
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
-$calendar-header-shadow: none !default;
-
-$calendar-header-button-hovered-bg: $button-hovered-bg !default;
-$calendar-header-button-hovered-text: $button-hovered-text !default;
-$calendar-header-button-hovered-border: $button-hovered-border !default;
-$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
-
-$calendar-header-button-pressed-bg: $button-pressed-bg !default;
-$calendar-header-button-pressed-text: $button-pressed-text !default;
-$calendar-header-button-pressed-border: $button-pressed-border !default;
-$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
-$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
-
-$calendar-header-cell-text: null !default;
-$calendar-header-cell-opacity: $disabled-opacity !default;
-
-$calendar-navigation-bg: $calendar-header-bg !default;
-$calendar-navigation-text: $calendar-header-text !default;
-$calendar-navigation-border: $calendar-header-border !default;
-
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hovered-text: $link-hover-text !default;
-
-$calendar-weekend-text: inherit !default;
-$calendar-weekend-bg: transparent !default;
-$calendar-weekend-opacity: 1 !default;
-
-$calendar-today-style: box !default;
-$calendar-today-color: $primary !default;
-
-$calendar-week-number-bg: transparent !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
-$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-cell-hovered-bg: $node-hovered-bg !default;
-$calendar-cell-hovered-text: $node-hovered-text !default;
-$calendar-cell-hovered-border: $node-hovered-border !default;
-
-$calendar-cell-selected-bg: $node-selected-bg !default;
-$calendar-cell-selected-text: $node-selected-text !default;
-$calendar-cell-selected-border: $node-selected-border !default;
-
-$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, .5) !default;
-
-
-// Multiview Calendar
-$multiviewcalendar-button-style: stretched !default;
-$multiviewcalendar-button-size: 50px !default;
-$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
-$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
-$multiviewcalendar-content-padding-y: 0px !default;
-$multiviewcalendar-navigation-margin-x: 0px !default;
-$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
-
-
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-highlight-color: $component-border !default;
-$time-list-focused-bg: rgba(0, 0, 0, .02) !default;
-$time-list-title-focus: black !default;
-
-$time-header-padding: $padding-y $padding-x !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
-$time-list-height: 200px !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-focused-bg: $button-pressed-bg !default;
-$datetime-select-focused-text: $button-pressed-text !default;
-$datetime-select-focused-border: $button-pressed-border !default;
-$datetime-select-focused-gradient: $button-pressed-gradient !default;
-$datetime-select-focused-shadow: $button-pressed-shadow !default;
-
-
 // Menu
 $menu-border-width: 0px !default;
 $menu-font-family: $font-family !default;

packages/bootstrap/scss/calendar/_index.scss

@@ -9,5 +9,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";

packages/bootstrap/scss/calendar/_variables.scss

@@ -0,0 +1,101 @@
+// Calendar
+$calendar-border-width: 1px !default;
+$calendar-font-family: $font-family !default;
+$calendar-font-size: $font-size !default;
+$calendar-line-height: $line-height !default;
+
+$calendar-header-padding-x: $padding-x !default;
+$calendar-header-padding-y: $padding-y !default;
+$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
+$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
+$calendar-header-border-width: 1px !default;
+
+$calendar-header-min-width: 280px !default;
+
+$calendar-content-padding-x: $calendar-header-padding-x !default;
+$calendar-content-padding-y: $calendar-header-padding-y !default;
+
+$calendar-cell-padding-x: .5rem !default;
+$calendar-cell-padding-y: $calendar-cell-padding-x !default;
+$calendar-cell-line-height: $calendar-line-height !default;
+$calendar-cell-size-px: 40px !default;
+$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1rem !default;
+$calendar-cell-border-radius: $border-radius !default;
+
+$calendar-header-cell-padding-x: 0px !default;
+$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
+$calendar-header-cell-font-size: $font-size-sm !default;
+$calendar-header-cell-line-height: 2 !default;
+
+$calendar-header-height: 2em !default;
+
+$calendar-navigation-width: 5em !default;
+$calendar-navigation-item-height: 2em !default;
+
+$calendar-view-width: 7 * $calendar-cell-size !default;
+$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
+
+$calendar-bg: $component-bg !default;
+$calendar-text: $component-text !default;
+$calendar-border: $component-border !default;
+
+$calendar-header-bg: $header-bg !default;
+$calendar-header-text: $header-text !default;
+$calendar-header-border: $header-border !default;
+$calendar-header-gradient: $header-gradient !default;
+$calendar-header-shadow: none !default;
+
+$calendar-header-button-hovered-bg: $button-hovered-bg !default;
+$calendar-header-button-hovered-text: $button-hovered-text !default;
+$calendar-header-button-hovered-border: $button-hovered-border !default;
+$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
+
+$calendar-header-button-pressed-bg: $button-pressed-bg !default;
+$calendar-header-button-pressed-text: $button-pressed-text !default;
+$calendar-header-button-pressed-border: $button-pressed-border !default;
+$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
+$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
+
+$calendar-header-cell-text: null !default;
+$calendar-header-cell-opacity: $disabled-opacity !default;
+
+$calendar-navigation-bg: $calendar-header-bg !default;
+$calendar-navigation-text: $calendar-header-text !default;
+$calendar-navigation-border: $calendar-header-border !default;
+
+$calendar-today-nav-text: $link-text !default;
+$calendar-today-nav-hovered-text: $link-hover-text !default;
+
+$calendar-weekend-text: inherit !default;
+$calendar-weekend-bg: transparent !default;
+$calendar-weekend-opacity: 1 !default;
+
+$calendar-today-style: box !default;
+$calendar-today-color: $primary !default;
+
+$calendar-week-number-bg: transparent !default;
+$calendar-week-number-text: $calendar-header-cell-text !default;
+$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-cell-hovered-bg: $node-hovered-bg !default;
+$calendar-cell-hovered-text: $node-hovered-text !default;
+$calendar-cell-hovered-border: $node-hovered-border !default;
+
+$calendar-cell-selected-bg: $node-selected-bg !default;
+$calendar-cell-selected-text: $node-selected-text !default;
+$calendar-cell-selected-border: $node-selected-border !default;
+
+$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
+$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, .5) !default;
+
+
+// Multiview Calendar
+$multiviewcalendar-button-style: stretched !default;
+$multiviewcalendar-button-size: 50px !default;
+$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
+$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
+$multiviewcalendar-content-padding-y: 0px !default;
+$multiviewcalendar-navigation-margin-x: 0px !default;
+$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;

packages/bootstrap/scss/datetime/_index.scss

@@ -11,5 +11,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";

packages/bootstrap/scss/datetime/_variables.scss

@@ -0,0 +1,47 @@
+// DateTime
+$time-highlight-size: 1px;
+
+$time-list-highlight-color: $component-border !default;
+$time-list-focused-bg: rgba(0, 0, 0, .02) !default;
+$time-list-title-focus: black !default;
+
+$time-header-padding: $padding-y $padding-x !default;
+$timepicker-header-height: 2em;
+
+$time-list-padding: $padding-y * 5 !default;
+$time-list-focus-size: 2px !default;
+$time-list-width: 5em !default;
+$time-list-height: 200px !default;
+
+$dateinput-text: null !default;
+
+$datetime-width: ((4 * $time-list-width) + 1em) !default;
+
+$datetime-bg: $input-bg !default;
+$datetime-text: $input-text !default;
+$datetime-border: $input-border !default;
+
+$datetime-hovered-bg: $input-hovered-bg !default;
+$datetime-hovered-text: $input-hovered-text !default;
+$datetime-hovered-border: $input-hovered-border !default;
+
+$datetime-focused-bg: $input-focused-bg !default;
+$datetime-focused-text: $input-focused-text !default;
+$datetime-focused-border: $input-focused-border !default;
+$datetime-focused-shadow: $input-focused-shadow !default;
+
+$datetime-select-bg: $button-bg !default;
+$datetime-select-text: $button-text !default;
+$datetime-select-border: $button-border !default;
+$datetime-select-gradient: $button-gradient !default;
+
+$datetime-select-hovered-bg: $button-hovered-bg !default;
+$datetime-select-hovered-text: $button-hovered-text !default;
+$datetime-select-hovered-border: $button-hovered-border !default;
+$datetime-select-hovered-gradient: $button-hovered-gradient !default;
+
+$datetime-select-focused-bg: $button-pressed-bg !default;
+$datetime-select-focused-text: $button-pressed-text !default;
+$datetime-select-focused-border: $button-pressed-border !default;
+$datetime-select-focused-gradient: $button-pressed-gradient !default;
+$datetime-select-focused-shadow: $button-pressed-shadow !default;