Verified Commit 07afcb51 authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files

feat: Style datepicker according to the design specs

parent 926f57d2

components/base/datepicker/datepicker.scss

+94 −1
Original line number Diff line number Diff line 
@import 'pikaday/scss/pikaday';



// Datepicker

$gl-datepicker-width: 258px;

$gl-datepicker-width: 240px;



.gl-datepicker-input {

  width: $gl-datepicker-width;
@@ -15,3 +15,96 @@ $gl-datepicker-width: 258px; 
  @include gl-right-0;

  @include gl-p-4;

}



.gl-datepicker-theme {

  @include gl-font-regular;

  @include gl-border-none;

  @include gl-rounded-base;

  @include gl-mt-3;



  &.is-bound {

    @include gl-shadow;

  }



  .pika-lendar {

    @include gl-m-0;

    @include gl-p-4;

    @include gl-inset-border-1-gray-200;

    @include gl-rounded-base;

  }



  .pika-title {

    @include gl-line-height-normal;

    @include gl-mb-4;

    @include gl-h-5;

  }



  .pika-next,

  .pika-prev {

    @include gl-bg-center;

    @include gl-bg-no-repeat;

    @include gl-bg-size-100p;

    @include gl-w-5;

    @include gl-h-5;

  }



  .pika-next {

    @include gl-bg-chevron-right-sm;

  }



  .pika-prev {

    @include gl-bg-chevron-left-sm;

  }



  .pika-label {

    @include gl-font-base;

    @include gl-line-height-normal;

    @include gl-py-0;

  }



  .pika-select {

    @include gl-top-0;

    @include gl-h-5;

  }



  th {

    @include gl-pb-4;

    @include gl-font-weight-bold;

    @include gl-line-height-normal;

    @include gl-text-gray-700;

  }



  abbr[title] {

    @include gl-text-decoration-none;

  }



  .pika-button {

    @include gl-shadow-none;

    @include gl-rounded-base;

    @include gl-bg-transparent;

    @include gl-py-3;

    @include gl-text-center;

    @include gl-text-gray-900;

    @include gl-line-height-normal;



    &.is-past-date {

      @include gl-text-gray-600;

    }



    &:hover {

      @include gl-text-gray-900;

      @include gl-bg-gray-100;

    }

  }



  .is-selected > .pika-button {

    @include gl-bg-blue-500;

    @include gl-font-weight-normal;

    @include gl-text-white;

  }



  .is-today > .pika-button {

    @include gl-font-weight-bold;

    @include gl-text-gray-900;

  }

}

components/base/datepicker/datepicker.vue

+22 −1
Original line number Diff line number Diff line
@@ -19,6 +19,22 @@ export const defaultDateFormatter = date => { 
};



const equals = (date1, date2) => date1 && date2 && date1.getTime() === date2.getTime();

const isBefore = (compareTo, date) => compareTo && date &&

  date.getTime() < compareTo.getTime();



const highlightPastDates = (pikaday) => {

  const pikaButtons = pikaday.el.querySelectorAll('.pika-button');

  const today = new Date();



  pikaButtons.forEach((pikaButton) => {

    const { pikaYear, pikaMonth, pikaDay } = pikaButton.dataset;

    const pikaButtonDate = new Date(pikaYear, pikaMonth, pikaDay);



    if (isBefore(today, pikaButtonDate)) {

      pikaButton.classList.add('is-past-date');

    }

  })

}



export default {

  components: {
@@ -109,6 +125,8 @@ export default { 
      ? $parentEl.querySelector(this.target)

      : this.$refs.calendarTriggerBtn;

    const container = this.container ? $parentEl.querySelector(this.container) : this.$el;

    const drawEvent = this.draw.bind(this);



    const pikadayConfig = {

      field: this.$refs.datepickerField.$el,

      trigger,
@@ -127,7 +145,10 @@ export default { 
      onSelect: this.selected.bind(this),

      onClose: this.closed.bind(this),

      onOpen: this.opened.bind(this),

      onDraw: this.draw.bind(this),

      onDraw(pikaday) {

        highlightPastDates(pikaday);

        drawEvent();

      }

    };



    if (this.i18n) {

scss/utilities.scss

+131 −12
Original line number Diff line number Diff line
@@ -25,6 +25,10 @@ 
@mixin gl-p-0 { padding: $gl-spacing-scale-0; }

.gl-p-0 { @include gl-p-0; }



@mixin gl-p-3 { padding: $gl-spacing-scale-3; }

.gl-p-3 { @include gl-p-3; }





@mixin gl-p-4 { padding: $gl-spacing-scale-4; }

.gl-p-4 { @include gl-p-4; }
@@ -53,6 +57,17 @@ 
}

.gl-py-0 { @include gl-py-0; }





@mixin gl-pb-2 { padding-bottom: $gl-spacing-scale-2; }

.gl-pb-2 { @include gl-pb-2; }



@mixin gl-pb-3 { padding-bottom: $gl-spacing-scale-3; }

.gl-pb-3 { @include gl-pb-3; }



@mixin gl-pb-4 { padding-bottom: $gl-spacing-scale-4; }

.gl-pb-4 { @include gl-pb-4; }





@mixin gl-py-2 {

  padding-top: $gl-spacing-scale-2;

  padding-bottom: $gl-spacing-scale-2;
@@ -84,12 +99,28 @@ 
* notes:

* - Utilities should strictly follow $gl-spacing-scale

*/

@mixin gl-m-0 { margin: $gl-spacing-scale-0; }

.gl-m-0 { @include gl-m-0; }



@mixin gl-mt-3 { margin-top: $gl-spacing-scale-3; }

.gl-mt-3 { @include gl-mt-3; }



@mixin gl-mr-2 { margin-right: $gl-spacing-scale-2; }

.gl-mr-2 { @include gl-mr-2; }



@mixin gl-ml-1 { margin-left: $gl-spacing-scale-1; }

.gl-ml-1 { @include gl-ml-1; }



@mixin gl-mb-2 { margin-bottom: $gl-spacing-scale-2; }

.gl-mb-2 { @include gl-mb-2; }



@mixin gl-mb-3 { margin-bottom: $gl-spacing-scale-3; }

.gl-mb-3 { @include gl-mb-3; }



@mixin gl-mb-4 { margin-bottom: $gl-spacing-scale-4; }

.gl-mb-4 { @include gl-mb-4; }





@mixin gl-my-auto {

  margin-top: auto;

  margin-bottom: auto;
@@ -101,6 +132,7 @@ 
  margin-left: $gl-spacing-scale-3;

  margin-right: $gl-spacing-scale-3;

}

.gl-mx-3 { @include gl-mx-3; }



/**

* Fixed dimension (width/height) utilities
@@ -115,15 +147,24 @@ 
@mixin gl-w-4 { width: $gl-spacing-scale-4; }

.gl-w-4 { @include gl-w-4; }



@mixin gl-w-5 { width: $gl-spacing-scale-5; }

.gl-w-5 { @include gl-w-5; }



@mixin gl-h-4 { height: $gl-spacing-scale-4; }

.gl-h-4 { @include gl-h-4; }



@mixin gl-h-5 { height: $gl-spacing-scale-5; }

.gl-h-5 { @include gl-h-5; }



/**

* Border style utilities.

*

* naming convention: gl-border-{position}-{style}

*/



@mixin gl-border-none { border-style: none; }

.gl-border-none { @include gl-border-none; }



@mixin gl-border-solid { border-style: solid; }

.gl-border-solid { @include gl-border-solid; }
@@ -168,6 +209,11 @@ 
* notes:

* - Base new utilities in this group in the $gl-border-radius variables

*/



@mixin gl-rounded-base { border-radius: $gl-border-radius-base; }

.gl-rounded-base { @include gl-rounded-base; }





@mixin gl-rounded-full { border-radius: $gl-border-radius-full; }

.gl-rounded-full { @include gl-rounded-full; }
@@ -175,8 +221,22 @@ 
.gl-rounded-small { @include gl-rounded-small; }



/**

* Font size utility

* Font family utility

*

* naming convention: gl-font-{family-name}

* Notes:

* - Strictly based on design system typography specs

*/

@mixin gl-font-monospace { font-family: $gl-monospace-font; }

.gl-font-monospace { @include gl-font-monospace; }



@mixin gl-font-regular { font-family: $gl-regular-font; }

.gl-font-regular { @include gl-font-regular; }



/**

* Font size utility

*

* naming convention: gl-font-{type-scale-size}

* Notes:

* - Strictly based on design system type scale. See

* $gl-type-scale for further references.
@@ -206,9 +266,15 @@ 
* - Strictly based design system color palette. See variables.scss

* for a comprehensive list.

*/

@mixin gl-text-white { color: $white; }

.gl-text-white { @include gl-text-white; }



@mixin gl-text-gray-400 { color: $gray-400; }

.gl-text-gray-400 { @include gl-text-gray-400; }



@mixin gl-text-gray-600 { color: $gray-600; }

.gl-text-gray-600 { @include gl-text-gray-600; }



@mixin gl-text-gray-700 { color: $gray-700; }

.gl-text-gray-700 { @include gl-text-gray-700; }
@@ -229,10 +295,13 @@ 
.gl-line-height-normal { @include gl-line-height-normal; }



/**

* text-items utilities

* Text align utilities

*/

@mixin gl-text-align-center { text-align: center; }

.gl-text-align-center { @include gl-text-align-center; }

@mixin gl-text-center { text-align: center; }

.gl-text-center { @include gl-text-center; }



@mixin gl-text-decoration-none { text-decoration: none; }

.gl-text-decoration-none { @include gl-text-decoration-none; }



/**

* Inset border utilities
@@ -242,6 +311,12 @@ 
*

* Naming convention: gl-inset-border-{border-position}-{border-size}-{color-name}

*/



@mixin gl-inset-border-1-gray-200 {

  box-shadow: inset 0 0 0 map-get($gl-border-sizes, 1) $gray-200;

}

.gl-inset-border-1-gray-200 { @include gl-inset-border-1-gray-200; }



@mixin gl-inset-border-b-2-gray-200 {

  box-shadow: inset 0 (map-get($gl-border-sizes, 2) * -1) 0 0 $gray-200;

}
@@ -277,6 +352,17 @@ 
}

.gl-inset-border-b-2-theme-green-500 { @include gl-inset-border-b-2-theme-green-500; }



/**

* Box shadow utilities

*

* naming convention: gl-shadow-{config-name}

*/

@mixin gl-shadow-none { box-shadow: none; }

.gl-shadow-none { box-shadow: none; }



@mixin gl-shadow { box-shadow: 0 2px 3px 1px $gray-200; }

.gl-shadow { @include gl-shadow; }



/**

* Display utilities

*/
@@ -292,12 +378,6 @@ 
@mixin gl-flex-wrap { flex-wrap: wrap; }

.gl-flex-wrap { @include gl-flex-wrap; }



@mixin gl-flex-direction-column { flex-direction: column; }

.gl-flex-direction-column { @include gl-flex-direction-column; }



@mixin gl-justify-content-center { justify-content: center; }

.gl-justify-content-center { @include gl-justify-content-center; }



/**

* Position utilities.

*
@@ -340,5 +420,44 @@ 
@mixin gl-bg-white-light { background-color: $white-light; }

.gl-bg-white-light { @include gl-bg-white-light; }



@mixin gl-bg-gray-200 { background-color: $gray-200; }

.gl-bg-gray-200 { @include gl-bg-gray-200; }
 
@mixin gl-bg-gray-100 { background-color: $gray-100; }

.gl-bg-gray-100 { @include gl-bg-gray-100; }



@mixin gl-bg-blue-500 { background-color: $blue-500; }

.gl-bg-blue-500 { @include gl-bg-blue-500; }



/**

* Background position utilities.

*

* naming convention: gl-bg-{position}

*/

@mixin gl-bg-center { background-position: center; }

.gl-bg-center { @include gl-bg-center; }



/**

* Background size utilities.

*

* naming convention: gl-bg-{repeat-pattern}

*/

@mixin gl-bg-size-100p { background-size: 100% 100%; }

.gl-bg-size-100p { @include gl-bg-size-100p; }



/**

* Background repeat  utilities.

*

* naming convention: gl-bg-{repeat-pattern}

*/

@mixin gl-bg-no-repeat { background-repeat: no-repeat; }

.gl-bg-no-repeat { @include gl-bg-no-repeat; }





/**

* Background image utilities.

*

* naming convention: gl-bg-{image-name}

*/

@mixin gl-bg-chevron-left-sm { background-image: url($gl-icon-chevron-left-sm); }

.gl-bg-chevron-left-sm { @include gl-bg-chevron-left-sm; }



@mixin gl-bg-chevron-right-sm { background-image: url($gl-icon-chevron-right-sm); }

.gl-bg-chevron-right-sm { @include gl-bg-chevron-right-sm; }

scss/variables.scss

+5 −2
Original line number Diff line number Diff line
@@ -426,14 +426,14 @@ $gl-border-sizes: ( 


// border roundness

$gl-border-radius-small: 2px;

$gl-border-radius-default: 4px;

$gl-border-radius-base: 4px;

$gl-border-radius-large: 8px;

$gl-border-radius-full: 50%;



$gl-rounded-sizes: (

  'none': 0,

  'sm': $gl-border-radius-small,

  '': $gl-border-radius-default,

  'base': $gl-border-radius-base,

  'lg': $gl-border-radius-large,

  'full': $gl-border-radius-full,

);
@@ -465,3 +465,6 @@ $license-header-cell-width: 150px; 
$avatar-radius: 50%;

$gl-avatar-size: 40px;

$gl-avatar-border-opacity: 0.1;



$gl-icon-chevron-left-sm: 'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/chevron-left</title><path d="M7.414 7.989l2.295 2.306a1 1 0 1 1-1.418 1.41l-3-3.015a1 1 0 0 1 .004-1.414l3-2.985a1 1 0 1 1 1.41 1.418l-2.29 2.28z" id="a"/></svg>';

$gl-icon-chevron-right-sm: 'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/chevron-right</title><path d="M8.586 7.989l-2.291-2.28a1 1 0 1 1 1.41-1.418l3 2.985a1 1 0 0 1 .004 1.414l-3 3.015a1 1 0 0 1-1.418-1.41l2.295-2.306z" id="a"/></svg>';