gbili
/
calendar-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: hover has dark color

Browse Source
master
Guillermo Pages 10 months ago
parent e466472dc1
commit 11130cfe54
5 changed files with 88 additions and 72 deletions
Show Stats Download Patch File Download Diff File

75
src/components/calendar/Day/Day.module.scss
Unescape Escape View File

@ -52,7 +52,7 @@
&:hover { &:hover {
box-shadow: shared.$shadow-hover; box-shadow: shared.$shadow-hover;
background: colors.$day-content-defaultmode-selectingstate-midrange-hover-background-color; background: colors.$day-color-interactive-hover;
z-index: 1; z-index: 1;
} }
@ -61,6 +61,12 @@
box-shadow: shared.$shadow-focus; box-shadow: shared.$shadow-focus;
z-index: 1; z-index: 1;
} }
&.Day__Container--greyed {
&:hover {
background: colors.$day-content-greyedmode-interactivestate-any-hover-background-color;
}
}
} }
&--otherMonth { &--otherMonth {
@ -461,3 +467,70 @@
text-align: center; text-align: center;
} }
} }
.DayNumber {
&__Container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&__Svg {
width: 100%;
height: 100%;
}
&__Text {
fill: colors.$day-content-defaultmode-defaultstate-color;
font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-feature-settings: 'tnum' on, 'lnum' on;
.Day__Container--interactive:hover &:not(&--selected) {
fill: colors.$day-color-interactive-text-hover;
}
// Greyed state
&--greyed {
fill: colors.$day-content-greyedmode-defaultstate-color;
}
// Selected states
&--selected {
fill: colors.$day-content-defaultmode-selectedstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-midrange-color;
}
}
// Selecting states
&--selecting {
fill: colors.$day-content-defaultmode-selectingstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectingstate-midrange-color;
}
}
// Range start
&--rangeStart:not(&--rangeEnd) {
fill: colors.$day-content-defaultmode-selectedstate-rangestart-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
}
}
// Range end
&--rangeEnd:not(&--rangeStart) {
fill: colors.$day-content-defaultmode-selectedstate-rangeend-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangeend-color;
}
}
}
}

2
src/components/calendar/Day/index.tsx
Unescape Escape View File

@ -75,7 +75,7 @@ export const Day: React.FC<DayProps> = ({
</div> </div>
)} )}
<div className={styles.Day__Content}> <div className={styles.Day__Content}>
<DayNumber <DayNumber
number={parseInt(format(date, 'd'), 10)} number={parseInt(format(date, 'd'), 10)}
proportion={fontProportion} proportion={fontProportion}
variations={variations} variations={variations}

64
src/components/calendar/DayNumber/DayNumber.module.scss
Unescape Escape View File

@ -1,64 +0,0 @@
@use '../shared/colors' as colors;
.DayNumber {
&__Container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&__Svg {
width: 100%;
height: 100%;
}
&__Text {
fill: colors.$day-content-defaultmode-defaultstate-color;
font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-feature-settings: 'tnum' on, 'lnum' on;
// Greyed state
&--greyed {
fill: colors.$day-content-greyedmode-defaultstate-color;
}
// Selected states
&--selected {
fill: colors.$day-content-defaultmode-selectedstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-midrange-color;
}
}
// Selecting states
&--selecting {
fill: colors.$day-content-defaultmode-selectingstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectingstate-midrange-color;
}
}
// Range start
&--rangeStart:not(&--rangeEnd) {
fill: colors.$day-content-defaultmode-selectedstate-rangestart-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
}
}
// Range end
&--rangeEnd:not(&--rangeStart) {
fill: colors.$day-content-defaultmode-selectedstate-rangeend-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangeend-color;
}
}
}
}

2
src/components/calendar/DayNumber/index.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import React, { useRef, useEffect, useState } from 'react'; import React, { useRef, useEffect, useState } from 'react';
import styles from './DayNumber.module.scss'; import styles from '../Day/Day.module.scss';
import classNames from 'classnames'; import classNames from 'classnames';
import { DayVariation } from '../../../types/calendar'; import { DayVariation } from '../../../types/calendar';

17
src/components/calendar/shared/_colors.scss
Unescape Escape View File

@ -21,8 +21,12 @@ $day-color-greyed: #bcbcbc; // day greyed mode default state container
$day-color-selected: #e3f2fd; // day default mode selected state container $day-color-selected: #e3f2fd; // day default mode selected state container
$day-color-selected-hover: #bbdefb; // day default mode selected state hover container $day-color-selected-hover: #bbdefb; // day default mode selected state hover container
$day-color-selecting: #f5f5f5; // day default mode selecting state container $day-color-selecting: #f5f5f5; // day default mode selecting state container
$day-color-selecting-rangestartend-content: #aeaeae; // day default mode selecting state container
$day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border $day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border
$day-color-selecting-hover: #eeeeee; $day-color-selecting-hover: #727272;
$day-color-interactive-hover: #939393;
$day-color-interactive-text-hover: #ffffff;
// Header colors // Header colors
$day-color-header: #2c2c2c; // day default mode default state header $day-color-header: #2c2c2c; // day default mode default state header
@ -44,6 +48,9 @@ $day-content-greyedmode-defaultstate-color: $day-color-text-light;
$day-header-greyedmode-defaultstate-background-color: $day-color-header-greyed; $day-header-greyedmode-defaultstate-background-color: $day-color-header-greyed;
$day-header-greyedmode-defaultstate-color: $day-color-header-greyed-text; $day-header-greyedmode-defaultstate-color: $day-color-header-greyed-text;
// interactive state greyedmode
$day-content-greyedmode-interactivestate-any-hover-background-color: color.mix($day-color-interactive-hover, $day-color-greyed, 80%);
// Selecting State Colors // Selecting State Colors
$day-content-defaultmode-selectingstate-midrange-background-color: $day-color-selecting; $day-content-defaultmode-selectingstate-midrange-background-color: $day-color-selecting;
$day-content-defaultmode-selectingstate-midrange-color: $day-color-text; $day-content-defaultmode-selectingstate-midrange-color: $day-color-text;
@ -106,11 +113,11 @@ $day-header-greyedmode-selectedstate-rangeend-color: $day-color-header-text; //
$day-header-greyedmode-selectedstate-rangeend-hover-background-color: color.adjust(color.mix($day-color-primary-dark, $day-color-greyed, 80%), $lightness: 10%); $day-header-greyedmode-selectedstate-rangeend-hover-background-color: color.adjust(color.mix($day-color-primary-dark, $day-color-greyed, 80%), $lightness: 10%);
// Selecting State for Range // Selecting State for Range
$day-content-defaultmode-selectingstate-rangestart-background-color: $day-color-selecting; $day-content-defaultmode-selectingstate-rangestart-background-color: $day-color-selecting-rangestartend-content;
$day-content-defaultmode-selectingstate-rangestart-color: $day-color-text; $day-content-defaultmode-selectingstate-rangestart-color: $day-color-text;
$day-content-defaultmode-selectingstate-rangestart-hover-background-color: $day-color-selecting-hover; $day-content-defaultmode-selectingstate-rangestart-hover-background-color: $day-color-selecting-hover;
$day-content-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%); $day-content-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-selecting-rangestartend-content, $day-color-greyed, 80%);
$day-content-greyedmode-selectingstate-rangestart-color: $day-color-text-light; $day-content-greyedmode-selectingstate-rangestart-color: $day-color-text-light;
$day-content-greyedmode-selectingstate-rangestart-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%); $day-content-greyedmode-selectingstate-rangestart-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%);
@ -123,11 +130,11 @@ $day-header-greyedmode-selectingstate-rangestart-color: $day-color-header-greyed
$day-header-greyedmode-selectingstate-rangestart-hover-background-color: color.adjust(color.mix($day-color-header-greyed, $day-color-selecting, 80%), $lightness: 10%); $day-header-greyedmode-selectingstate-rangestart-hover-background-color: color.adjust(color.mix($day-color-header-greyed, $day-color-selecting, 80%), $lightness: 10%);
// Selecting Range End // Selecting Range End
$day-content-defaultmode-selectingstate-rangeend-background-color: $day-color-selecting; $day-content-defaultmode-selectingstate-rangeend-background-color: $day-color-selecting-rangestartend-content;
$day-content-defaultmode-selectingstate-rangeend-color: $day-color-text; $day-content-defaultmode-selectingstate-rangeend-color: $day-color-text;
$day-content-defaultmode-selectingstate-rangeend-hover-background-color: $day-color-selecting-hover; $day-content-defaultmode-selectingstate-rangeend-hover-background-color: $day-color-selecting-hover;
$day-content-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%); $day-content-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-selecting-rangestartend-content, $day-color-greyed, 80%);
$day-content-greyedmode-selectingstate-rangeend-color: $day-color-text-light; $day-content-greyedmode-selectingstate-rangeend-color: $day-color-text-light;
$day-content-greyedmode-selectingstate-rangeend-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%); $day-content-greyedmode-selectingstate-rangeend-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%);

Write Preview
Loading…
Cancel
Save