Skip to content

Commit

Permalink
fix: month Year Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@asif-ahmed-1990
sathishkumar-thangavel authored and asif-ahmed-1990 committed May 22, 2020
1 parent 2596656 commit 51b2124
Show file tree
Hide file tree
Showing 11 changed files with 443 additions and 231 deletions.
71 changes: 61 additions & 10 deletions src/components.d.ts
View file
Expand Up @@ -47,14 +47,38 @@ export namespace Components {
"value": string;
}
interface FwDatepicker {
/**
* Selected Date will be retured in the given date format
*/
"dateFormat": string;
"dateValue": any;
"endDate": any;
"maxDate": any;
"minDate": any;
/**
* From date that is selected in the date range picker mode
*/
"fromDate": string;
/**
* Maximum date that are allowed to select in the calender
*/
"maxDate": string;
/**
* Minimum date that are allowed to select in the calender
*/
"minDate": string;
/**
* Shows single date or date range picker based on mode
*/
"mode": string;
/**
* Placeholder to display in the input field
*/
"placeholder": string;
"startDate": any;
/**
* To date that is selected in the date range picker mode
*/
"toDate": string;
/**
* Value selected in the single date picker mode
*/
"value": any;
}
interface FwIcon {
/**
Expand Down Expand Up @@ -591,15 +615,42 @@ declare namespace LocalJSX {
"value"?: string;
}
interface FwDatepicker {
/**
* Selected Date will be retured in the given date format
*/
"dateFormat"?: string;
"dateValue"?: any;
"endDate"?: any;
"maxDate"?: any;
"minDate"?: any;
/**
* From date that is selected in the date range picker mode
*/
"fromDate"?: string;
/**
* Maximum date that are allowed to select in the calender
*/
"maxDate"?: string;
/**
* Minimum date that are allowed to select in the calender
*/
"minDate"?: string;
/**
* Shows single date or date range picker based on mode
*/
"mode"?: string;
/**
* Triggered when the update button clicked
*/
"onFwChange"?: (event: CustomEvent<any>) => void;
/**
* Placeholder to display in the input field
*/
"placeholder"?: string;
"startDate"?: any;
/**
* To date that is selected in the date range picker mode
*/
"toDate"?: string;
/**
* Value selected in the single date picker mode
*/
"value"?: any;
}
interface FwIcon {
/**
Expand Down
83 changes: 34 additions & 49 deletions src/components/datepicker/datepicker.scss
View file
@@ -1,20 +1,10 @@
.MyDatePicker {
position: relative;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.MyDatePicker * {
/* Chrome/Safari/Opera */
-webkit-user-select: none;

/* Firefox */
-moz-user-select: none;
@import "../../styles/freshworks";

/* Edge */
-ms-user-select: none;

/* Non-prefixed version, currently */
user-select: none;
.date-picker {
position: relative;
* {
user-select: none;
}
}

.mdp-container,
Expand All @@ -25,7 +15,7 @@
top: 40px;
width: 300px;
min-height: 336px;
background: #fff;
background: var(--color-milk);
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
Expand All @@ -41,8 +31,8 @@
top: 344px;
width: 317px;
padding: 8px;
background: #f5f7f9;
border-top: 1px solid #ebeff3;
background: var(--color-smoke-25);
border-top: 1px solid var(--color-smoke-50);
margin-top: 15.5px;
box-shadow: 4px 9px 20px rgba(0, 0, 0, 0.2);
border-radius: 0 0 5px 5px;
Expand Down Expand Up @@ -78,7 +68,7 @@

.mdpc-body-right {
float: right;
border-left: 1px solid #e4f2fd;
border-left: 1px solid var(--color-smoke-50);
padding-left: 10px;
}
}
Expand All @@ -101,7 +91,7 @@

.mdpchb-inner:hover {
cursor: pointer;
background: #ebeff3;
background: var(--color-smoke-50);
}

.mdpchb-inner {
Expand All @@ -128,8 +118,8 @@
float: left;
width: 6px;
height: 6px;
border-left: 2px solid #888;
border-bottom: 2px solid #888;
border-left: 2px solid var(--color-smoke-300);
border-bottom: 2px solid var(--color-smoke-300);
position: absolute;
}

Expand Down Expand Up @@ -185,19 +175,25 @@
float: left;
height: 30px;
font-size: 16px;
color: #666;
color: var(--color-smoke-700);
text-align: center;
margin-top: 16px;
margin-top: 6px;
width: 90px;
}

.mdpchc-month {
float: left;
height: 15px;
font-size: 16px;
color: #666;
color: var(--color-smoke-700);
text-align: center;
margin-top: 16px;
margin-top: 6px;
margin-right: 10px;
width: 90px;

fw-select .input-container-inner input {
width: 98%;
}
}

/**
Expand All @@ -207,15 +203,12 @@
.c-day-container,
.cc-body,
.cc-head,
.cc-month,
.cch-name,
.cdc-day,
.cdc-day span {
position: relative;
display: block;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Expand All @@ -224,14 +217,6 @@
height: 100%;
}

.cc-month {
height: 30px;
width: 100%;
font-size: 16px;
line-height: 30px;
color: #666;
}

.cc-head {
height: 30px;
width: 100%;
Expand All @@ -242,7 +227,7 @@
height: 30px;
line-height: 30px;
font-weight: 700;
color: #666;
color: var(--color-smoke-700);
font-size: 13px;
text-align: center;
}
Expand All @@ -263,13 +248,13 @@
height: 100%;
font-size: 12px;
font-weight: 300;
color: #444;
color: var(--color-smoke-700);
text-align: center;
}

.cdc-day span:hover {
cursor: pointer;
background: #ebeff3;
background: var(--color-smoke-50);
}

.cdc-day span {
Expand All @@ -290,22 +275,22 @@
pointer-events: none;
}

.dateinput {
.date-input {
width: 210px;
}

.c-day-container.disabled .cdc-day span {
color: #ddd;
background: #fff !important;
color: var(--color-smoke-100);
background: var(--color-milk) !important;
}

.c-day-container.highlight .cdc-day span {
border: 1px solid #d2dae0;
.c-day-container.highlight:not(.disabled) .cdc-day span {
border: 1px solid var(--color-smoke-100);
}

.c-day-container.highlight-blue .cdc-day span {
background: #2e5dc5;
color: #fdfefe;
.c-day-container.highlight-blue:not(.disabled) .cdc-day span {
background: var(--color-azure-800);
color: var(--color-smoke-25);
}

.c-day-container.start-day {
Expand Down

0 comments on commit 51b2124

Please sign in to comment.