Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/styles/plugins/_react-datepicker.scss Executable file
View File

@@ -0,0 +1,80 @@
/* React Datepicker Overrides */
// Card
.react-datepicker {
border: solid 1px $gray-400 !important;
font-family: inherit !important;
box-shadow: $box-shadow;
}
.react-datepicker__header {
background-color: $gray-200 !important;
border-bottom: solid 0px $gray-400 !important;
}
// Card Header
.react-datepicker__navigation--next {
border-left-color: $gray-500 !important;
}
.react-datepicker__navigation--next:hover {
border-left-color: $gray-600 !important;
}
.react-datepicker__navigation--previous {
border-right-color: $gray-500 !important;
}
.react-datepicker__navigation--previous:hover {
border-right-color: $gray-600 !important;
}
// Month Header
.react-datepicker__current-month {
color: $black !important;
font-weight: 500 !important;
font-size: 14px !important;
}
.react-datepicker__day-name {
color: $body-color !important;
}
// Active Day
.react-datepicker__day--selected {
color: $white !important;
background-color: $primary !important;
}
// Hover Day
.react-datepicker__day:hover {
background-color: $primary !important;
color: $white !important;
}
// Day In Range
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
background-color: lighten($primary, 15%) !important;
color: $white !important;
}
.react-datepicker__day--in-range {
background-color: lighten($primary, 24%) !important;
color: $white !important;
}
// Day in Selecting Range
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
background-color: $primary !important;
color: $white !important;
}
// Triangle Top
[data-placement^="bottom"] .react-datepicker__triangle {
border-bottom-color: $gray-200 !important;
}
[data-placement^="bottom"] .react-datepicker__triangle::before {
border-bottom-color: $gray-400 !important;
}
// Triangle Bottom
[data-placement^="top"] .react-datepicker__triangle {
border-top-color: $gray-400 !important;
}
[data-placement^="top"] .react-datepicker__triangle::before {
border-top-color: $gray-400 !important;
}