🩹(react) update stylesheet to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices. Refactored stylesheet to behave as a partial, enhancing SASS compilation efficiency.
This commit is contained in:
Lebaud Antoine
committed by
aleb_the_flash
aleb_the_flash
parent
41a0b6f636
commit
430f893645
376
packages/react/src/components/Forms/DatePicker/_index.scss
Normal file
376
packages/react/src/components/Forms/DatePicker/_index.scss
Normal file
@@ -0,0 +1,376 @@
|
||||
@use 'src/utils' as *;
|
||||
|
||||
|
||||
.c__date-picker {
|
||||
position: relative;
|
||||
|
||||
|
||||
&__wrapper {
|
||||
border-radius: var(--c--components--forms-datepicker--border-radius);
|
||||
border-width: var(--c--components--forms-datepicker--border-width);
|
||||
border-color: var(--c--components--forms-datepicker--border-color);
|
||||
border-style: var(--c--components--forms-datepicker--border-style);
|
||||
display: flex;
|
||||
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
|
||||
padding: 0 0.75rem;
|
||||
gap: 1rem;
|
||||
box-sizing: border-box;
|
||||
height: var(--c--components--forms-datepicker--height);
|
||||
background-color: var(--c--components--forms-datepicker--background-color);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
.icon {
|
||||
font-size: var(--c--components--button--medium-icon-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
min-width: 0;
|
||||
|
||||
&--collapsed {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__value {
|
||||
display: flex;
|
||||
font-size: var(--c--components--forms-datepicker--font-size);
|
||||
color: var(--c--components--forms-datepicker--value-color);
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
&__segment {
|
||||
&--empty {
|
||||
color: var(--c--components--forms-field--color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--c--theme--colors--primary-100);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1.375rem;
|
||||
|
||||
&--empty {
|
||||
color: var(--c--components--forms-field--color);
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
visibility: hidden;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Modifiers */
|
||||
|
||||
&--disabled {
|
||||
.c__date-picker__wrapper {
|
||||
color: var(--c--theme--colors--greyscale-600);
|
||||
border-color: var(--c--components--forms-datepicker--border-color--disabled);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
&__toggle {
|
||||
color: var(--c--theme--colors--greyscale-400);
|
||||
}
|
||||
|
||||
.c__date-picker__inner {
|
||||
|
||||
&__action {
|
||||
color: var(--c--theme--colors--greyscale-400);
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: var(--c--components--forms-datepicker--value-color--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--invalid {
|
||||
.c__date-picker__wrapper {
|
||||
border-color: var(--c--theme--colors--danger-600);
|
||||
border-radius: var(--c--components--forms-datepicker--border-radius);
|
||||
|
||||
&__toggle {
|
||||
color: var(--c--theme--colors--danger-600);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--c--theme--colors--danger-600);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.c__date-picker--disabled) {
|
||||
&:hover {
|
||||
.c__date-picker__wrapper {
|
||||
border-color: var(--c--theme--colors--danger-800);
|
||||
&__toggle {
|
||||
color: var(--c--theme--colors--danger-800);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--c--theme--colors--danger-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
.c__date-picker__wrapper {
|
||||
border-color: var(--c--theme--colors--success-600);
|
||||
border-radius: var(--c--components--forms-datepicker--border-radius);
|
||||
|
||||
&__toggle {
|
||||
color: var(--c--theme--colors--success-600);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--c--theme--colors--success-600);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.c__date-picker--disabled) {
|
||||
&:hover {
|
||||
.c__date-picker__wrapper {
|
||||
border-color: var(--c--theme--colors--success-800);
|
||||
&__toggle {
|
||||
color: var(--c--theme--colors--success-800);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--c--theme--colors--success-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
|
||||
&:hover {
|
||||
.c__date-picker__wrapper {
|
||||
border-radius: var(--c--components--forms-datepicker--border-radius--hover);
|
||||
border-color: var(--c--components--forms-datepicker--border-color--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Even if usually !important is evil, in this case it is on purpose. Focus styling most have a greater priority
|
||||
* than :hover. But here hover has more css specificity, so we need !important.
|
||||
*/
|
||||
@mixin focused-wrapper {
|
||||
border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
|
||||
border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
|
||||
|
||||
.c__date-picker__wrapper__toggle {
|
||||
color: var(--c--components--forms-datepicker--border-color--focus) !important;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--c--components--forms-datepicker--label-color--focus);
|
||||
}
|
||||
}
|
||||
|
||||
&--focused {
|
||||
.c__date-picker__wrapper {
|
||||
@include focused-wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
.c__date-picker__wrapper:focus-visible {
|
||||
outline: none;
|
||||
@include focused-wrapper;
|
||||
}
|
||||
|
||||
&__range {
|
||||
min-width: px-to-rem(350px);
|
||||
|
||||
&__separator {
|
||||
background-color: var(--c--theme--colors--greyscale-400);
|
||||
height: px-to-rem(24px);
|
||||
width: px-to-rem(1px);
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.c__calendar {
|
||||
display: block;
|
||||
transform: translate(2px, 0);
|
||||
max-width: px-to-rem(340px);
|
||||
|
||||
&__wrapper {
|
||||
display: block;
|
||||
padding: 0.75rem;
|
||||
|
||||
&--opened {
|
||||
@extend %shadow;
|
||||
background-color: var(--c--components--forms-datepicker--menu-background-color);
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
min-width: 8.5rem;
|
||||
|
||||
&__dropdown {
|
||||
padding: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__grid {
|
||||
width: 100%;
|
||||
padding-top: 0.5rem;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0 0.4rem;
|
||||
|
||||
&__header-row {
|
||||
line-height: 3rem;
|
||||
font-size: var(--c--components--button--small-font-size);
|
||||
|
||||
th {
|
||||
font-weight: var(--c--components--button--font-weight);
|
||||
color: var(--c--theme--colors--greyscale-700);
|
||||
}
|
||||
}
|
||||
|
||||
&__week-row {
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__background {
|
||||
&--range {
|
||||
background: var(--c--components--forms-datepicker--range-selection-background-color);
|
||||
|
||||
&:not(&--end):not(&--start):not(&--disabled) button {
|
||||
color: var(--c--components--forms-datepicker--grid-cell--color--today);
|
||||
}
|
||||
|
||||
&--end {
|
||||
border-top-right-radius: 100%;
|
||||
border-bottom-right-radius: 100%;
|
||||
}
|
||||
&--start {
|
||||
border-top-left-radius: 100%;
|
||||
border-bottom-left-radius: 100%;
|
||||
}
|
||||
&--disabled {
|
||||
background: var(--c--components--forms-datepicker--range-selection-background-color--disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__button {
|
||||
&--today {
|
||||
border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today);
|
||||
}
|
||||
&--today:not(&--selected) {
|
||||
color: var(--c--components--forms-datepicker--grid-cell--color--today);
|
||||
}
|
||||
}
|
||||
.c__button--small {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@extend %shadow;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
max-height: 25rem;
|
||||
background-color: var(--c--components--forms-datepicker--menu-background-color);
|
||||
transform: translate(2px, 0);
|
||||
display: none;
|
||||
z-index: 2;
|
||||
|
||||
&--opened {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: px-to-rem(3px);
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 0.75rem;
|
||||
font-size: var(--c--components--forms-datepicker--item-font-size);
|
||||
color: var(--c--components--forms-datepicker--item-color);
|
||||
cursor: pointer;
|
||||
|
||||
&--highlight {
|
||||
background-color: var(--c--components--forms-datepicker--item-background-color--hover);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: var(--c--components--forms-datepicker--item-background-color--selected);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: var(--c--theme--colors--greyscale-400);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user