allow Sass customizing

Semmy99 · Jun 27, 2016 · 948043f · 948043f
1 parent d32cf74
commit 948043f
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 90 deletions.
diff --git a/src/sass/_datepicker-config.scss b/src/sass/_datepicker-config.scss
@@ -1,16 +1,16 @@
-$dayCellSize: 32px;
-$datepickerWidth: 250px;
-$datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 4px;
-$datepickerPadding: 4px;
-$datepickerZIndex: 100;
+$datepickerDayCellSize: 32px !default;
+$datepickerWidth: 250px !default;
+$datepickerMinBodyHeight: 170px !default;
+$datepickerBorderRadius: 4px !default;
+$datepickerPadding: 4px !default;
+$datepickerZIndex: 100 !default;
 
-$fontFamily: Tahoma;
-$fontSize: 14px;
+$datepickerFontFamily: Tahoma !default;
+$datepickerFontSize: 14px !default;
 
-$yearsPerRow: 4;
+$datepickerYearsPerRow: 4 !default;
 
-$textColor: (
+$datepickerTextColor: (
  button: #5cc4ef,
  otherMonth: #dedede,
  otherMonthInRange: #ccc,
@@ -19,60 +19,60 @@ $textColor: (
  common: #4a4a4a,
  dayNames: #FF9A19,
  navArrows: #9c9c9c
-);
+) !default;
 
-$bg: (
+$datepickerBG: (
  selected: #5cc4ef,
  selectedHover: darken(#5cc4ef, 5),
  inRange: rgba(#5cc4ef, .1),
  hover: #f0f0f0
-);
+) !default;
 
-$borderColor: (
+$datepickerBorderColor: (
  nav: #efefef,
  inline: #d7d7d7,
  default: #dbdbdb
-);
+) !default;
 
-$navigationHeight: 32px;
-$navigationButtonsOffset: 2px;
+$datepickerNavigationHeight: 32px !default;
+$datepickerNavigationButtonsOffset: 2px !default;
 
-$pointerSize: 10px;
-$pointerOffset: 10px;
+$datepickerPointerSize: 10px !default;
+$datepickerPointerOffset: 10px !default;
 
 // Transitions
-$transitionSpeed: .3s;
-$transitionEase: ease;
-$transitionOffset: 8px;
+$datepickerTransitionSpeed: .3s !default;
+$datepickerTransitionEase: ease !default;
+$datepickerTransitionOffset: 8px !default;
 
 // Objects
 %otherMonth {
- color: map_get($textColor, otherMonth);
+ color: map_get($datepickerTextColor, otherMonth);
 
  &:hover {
- color: darken(map_get($textColor, otherMonth), 10);
+ color: darken(map_get($datepickerTextColor, otherMonth), 10);
  }
 
  &.-disabled- {
  &.-focus- {
- color: map_get($textColor, otherMonth);
+ color: map_get($datepickerTextColor, otherMonth);
  }
  }
 
  &.-selected- {
  color: #fff;
- background: lighten(map_get($bg, selected), 15);
+ background: lighten(map_get($datepickerBG, selected), 15);
  &.-focus- {
- background: lighten(map_get($bg, selected), 10);
+ background: lighten(map_get($datepickerBG, selected), 10);
  }
  }
 
  &.-in-range- {
- background-color: map_get($bg, inRange);
- color: darken(map_get($textColor, otherMonth), 7);
+ background-color: map_get($datepickerBG, inRange);
+ color: darken(map_get($datepickerTextColor, otherMonth), 7);
 
  &.-focus- {
- background-color: rgba(map_get($bg, inRange), .2);
+ background-color: rgba(map_get($datepickerBG, inRange), .2);
  }
  }
 

diff --git a/src/sass/cell.scss b/src/sass/cell.scss
@@ -17,62 +17,62 @@
  position: relative;
  align-items: center;
  justify-content: center;
- height: $dayCellSize;
+ height: $datepickerDayCellSize;
  z-index: 1;
 
  &.-focus- {
- background: map_get($bg, hover);
+ background: map_get($datepickerBG, hover);
  }
 
  &.-current- {
- color: map_get($textColor, currentDate);
+ color: map_get($datepickerTextColor, currentDate);
 
  &.-focus- {
- color: map_get($textColor, common);
+ color: map_get($datepickerTextColor, common);
  }
 
  &.-in-range- {
- color: map_get($textColor, currentDate);
+ color: map_get($datepickerTextColor, currentDate);
  }
  }
 
  &.-in-range- {
- background: map_get($bg, inRange);
- color: map_get($textColor, common);
+ background: map_get($datepickerBG, inRange);
+ color: map_get($datepickerTextColor, common);
  border-radius: 0;
 
  &.-focus- {
- background-color: rgba(map_get($bg, inRange), .2);
+ background-color: rgba(map_get($datepickerBG, inRange), .2);
  }
  }
 
  &.-disabled- {
  cursor: default;
- color: map_get($textColor, disabled);
+ color: map_get($datepickerTextColor, disabled);
 
  &.-focus- {
- color: map_get($textColor, disabled);
+ color: map_get($datepickerTextColor, disabled);
  }
 
  &.-in-range- {
- color: darken(map_get($textColor, disabled), 5);
+ color: darken(map_get($datepickerTextColor, disabled), 5);
  }
 
  &.-current- {
  &.-focus- {
- color: map_get($textColor, disabled);
+ color: map_get($datepickerTextColor, disabled);
  }
  }
  }
 
  &.-range-from- {
- border: 1px solid rgba(map_get($bg, selected), .5);
- background-color: map_get($bg, inRange);
+ border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+ background-color: map_get($datepickerBG, inRange);
  border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
  }
  &.-range-to- {
- border: 1px solid rgba(map_get($bg, selected), .5);
- background-color: map_get($bg, inRange);
+ border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+ background-color: map_get($datepickerBG, inRange);
  border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
  }
 
@@ -84,15 +84,15 @@
  &.-selected- {
  color: #fff;
  border: none;
- background: map_get($bg, selected);
+ background: map_get($datepickerBG, selected);
 
  &.-current- {
  color: #fff;
- background: map_get($bg, selected);
+ background: map_get($datepickerBG, selected);
  }
 
  &.-focus- {
- background: map_get($bg, selectedHover);
+ background: map_get($datepickerBG, selectedHover);
  }
  }
 
@@ -111,7 +111,7 @@
 }
 
 .datepicker--day-name {
- color: map_get($textColor, dayNames);
+ color: map_get($datepickerTextColor, dayNames);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -164,7 +164,7 @@
 // -------------------------
 
 .datepicker--cell-year {
- width: 100% / $yearsPerRow;
+ width: 100% / $datepickerYearsPerRow;
  height: 33.33%;
 
  &.-other-decade- {

diff --git a/src/sass/datepicker.scss b/src/sass/datepicker.scss
@@ -16,44 +16,44 @@
 
 .datepicker {
  background: #fff;
- border: 1px solid map_get($borderColor, default);
+ border: 1px solid map_get($datepickerBorderColor, default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  border-radius: $datepickerBorderRadius;
  box-sizing: content-box;
- font-family: $fontFamily, sans-serif;
- font-size: $fontSize;
- color: map_get($textColor, common);
+ font-family: $datepickerFontFamily, sans-serif;
+ font-size: $datepickerFontSize;
+ color: map_get($datepickerTextColor, common);
  width: $datepickerWidth;
  position: absolute;
  left: -100000px;
  opacity: 0;
- transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
+ transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
  z-index: $datepickerZIndex;
 
  &.-from-top- {
- transform: translateY(-$transitionOffset);
+ transform: translateY(-$datepickerTransitionOffset);
  }
  &.-from-right- {
- transform: translateX($transitionOffset);
+ transform: translateX($datepickerTransitionOffset);
  }
  &.-from-bottom- {
- transform: translateY($transitionOffset);
+ transform: translateY($datepickerTransitionOffset);
  }
  &.-from-left- {
- transform: translateX(-$transitionOffset);
+ transform: translateX(-$datepickerTransitionOffset);
  }
 
 
  &.active {
  opacity: 1;
  transform: translate(0);
- transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
+ transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
  }
 }
 
 .datepicker-inline {
  .datepicker {
- border-color: map-get($borderColor, inline);
+ border-color: map-get($datepickerBorderColor, inline);
  box-shadow: none;
  position: static;
  left: auto;
@@ -74,15 +74,15 @@
 
 // Pointer
 // -------------------------------------------------
-$pointerHalfSize: $pointerSize / 2 - 1;
+$pointerHalfSize: $datepickerPointerSize / 2 - 1;
 
 .datepicker--pointer {
  position: absolute;
  background: #fff;
- border-top: 1px solid map-get($borderColor, default);
- border-right: 1px solid map-get($borderColor, default);
- width: $pointerSize;
- height: $pointerSize;
+ border-top: 1px solid map-get($datepickerBorderColor, default);
+ border-right: 1px solid map-get($datepickerBorderColor, default);
+ width: $datepickerPointerSize;
+ height: $datepickerPointerSize;
  z-index: -1;
 
  // Main axis
@@ -112,23 +112,23 @@ $pointerHalfSize: $pointerSize / 2 - 1;
  // -------------------------
 
  .-top-left- &, .-bottom-left- & {
- left: $pointerOffset;
+ left: $datepickerPointerOffset;
  }
  .-top-right- &, .-bottom-right- & {
- right: $pointerOffset;
+ right: $datepickerPointerOffset;
  }
  .-top-center- &, .-bottom-center- & {
- left: calc(50% - #{$pointerSize} / 2);
+ left: calc(50% - #{$datepickerPointerSize} / 2);
  }
 
  .-left-top- &, .-right-top- & {
- top: $pointerOffset;
+ top: $datepickerPointerOffset;
  }
  .-left-bottom- &, .-right-bottom- & {
- bottom: $pointerOffset;
+ bottom: $datepickerPointerOffset;
  }
  .-left-center- &, .-right-center- & {
- top: calc(50% - #{$pointerSize} / 2);
+ top: calc(50% - #{$datepickerPointerSize} / 2);
  }
 
 }