From 0628e7b4b04f44f9348c4340dd357f301e19d2c7 Mon Sep 17 00:00:00 2001 From: cliffjr Date: Wed, 29 Nov 2023 09:58:43 +0400 Subject: [PATCH] fix: RTL style not rendering on ar translation --- src/components/Calendar/index.scss | 17 ++- src/components/DateInput/index.scss | 13 +- src/components/DayCell/index.scss | 1 + src/theme/default.scss | 203 +++++++++++++++++++++++++--- 4 files changed, 208 insertions(+), 26 deletions(-) diff --git a/src/components/Calendar/index.scss b/src/components/Calendar/index.scss index ba8704a9b..9272c6dac 100644 --- a/src/components/Calendar/index.scss +++ b/src/components/Calendar/index.scss @@ -16,17 +16,28 @@ width: 0; text-align: center; color: inherit; - & + &{ - margin-left: 0.833em; - } + input{ text-align: inherit; + &:disabled{ cursor: default; } } } +[dir="ltr"] .rdrDateDisplayItem{ + & + &{ + margin-left: 0.833em; + } +} + +[dir="rtl"] .rdrDateDisplayItem{ + & + &{ + margin-right: 0.833em; + } +} + .rdrDateDisplayItemActive{} .rdrMonthAndYearWrapper { diff --git a/src/components/DateInput/index.scss b/src/components/DateInput/index.scss index 9bdf0ddb9..6a4232ac7 100644 --- a/src/components/DateInput/index.scss +++ b/src/components/DateInput/index.scss @@ -10,7 +10,18 @@ font-size: 1.6em; line-height: 1.6em; top: 0; - right: .25em; color: #FF0000; } +} + +[dir="ltr"] .rdrDateInput { + .rdrWarning { + right: .25em; + } +} + +[dir="rtl"] .rdrDateInput { + .rdrWarning { + left: .25em; + } } \ No newline at end of file diff --git a/src/components/DayCell/index.scss b/src/components/DayCell/index.scss index e6f0c6543..42d2fa387 100644 --- a/src/components/DayCell/index.scss +++ b/src/components/DayCell/index.scss @@ -9,6 +9,7 @@ .rdrDayNumber { display: block; position: relative; + span{ color: #1d2429; } diff --git a/src/theme/default.scss b/src/theme/default.scss index 0e17aecac..ec1298c55 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -16,6 +16,7 @@ background-color: rgb(255, 255, 255); box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); border: 1px solid transparent; + input{ cursor: pointer; height: 2.5em; @@ -45,25 +46,39 @@ .rdrMonthAndYearPickers{ font-weight: 600; + select{ appearance: none; -webkit-appearance: none; border: 0; background: transparent; - padding: 10px 30px 10px 10px; border-radius: 4px; outline: 0; color: #3e484f; background: url("data:image/svg+xml;utf8,") no-repeat; - background-position: right 8px center; cursor: pointer; text-align: center; + &:hover{ background-color: rgba(0,0,0,0.07); } } } +[dir="ltr"] .rdrMonthAndYearPickers{ + select{ + padding: 10px 30px 10px 10px; + background-position: right 8px center + } +} + +[dir="rtl"] .rdrMonthAndYearPickers{ + select{ + padding: 10px 10px 10px 30px; + background-position: left 8px center + } +} + .rdrMonthPicker, .rdrYearPicker{ margin: 0 5px } @@ -77,9 +92,11 @@ border: 0; border-radius: 5px; background: #EFF2F7; + &:hover{ background: #E1E7F0; } + i { display: block; width: 0; @@ -88,11 +105,22 @@ text-align: center; border-style: solid; margin: auto; + } +} + +[dir="ltr"] .rdrNextPrevButton { + i { transform: translate(-3px, 0px); } } -.rdrPprevButton { +[dir="rtl"] .rdrNextPrevButton { + i { + transform: translate(3px, 0px); + } +} + +[dir="ltr"] .rdrPprevButton { i { border-width: 4px 6px 4px 4px; border-color: transparent rgb(52, 73, 94) transparent transparent; @@ -100,7 +128,15 @@ } } -.rdrNextButton { +[dir="rtl"] .rdrPprevButton { + i { + border-width: 4px 4px 4px 6px; + border-color: transparent transparent transparent rgb(52, 73, 94); + transform: translate(3px, 0px); + } +} + +[dir="ltr"] .rdrNextButton { i { margin: 0 0 0 7px; border-width: 4px 4px 4px 6px; @@ -109,6 +145,14 @@ } } +[dir="rtl"] .rdrNextButton { + i { + margin: 0 7px 0 0; + border-width: 4px 6px 4px 4px; + border-color: transparent rgb(52, 73, 94) transparent transparent; + transform: translate(-3px, 0px); + } +} .rdrWeekDays { padding: 0 0.833em; @@ -116,16 +160,17 @@ .rdrMonth{ padding: 0 0.833em 1.666em 0.833em; + .rdrWeekDays { padding: 0; } -} +} -.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{ + .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{ display: none; -} +} -.rdrWeekDay { + .rdrWeekDay { font-weight: 400; line-height: 2.667em; color: rgb(132, 144, 149); @@ -140,6 +185,7 @@ height: 3.000em; text-align: center; color: #1d2429; + &:focus { outline: 0; } @@ -162,12 +208,11 @@ .rdrDayToday .rdrDayNumber span{ font-weight: 500; + &:after{ content: ''; position: absolute; bottom: 4px; - left: 50%; - transform: translate(-50%, 0); width: 18px; height: 2px; border-radius: 2px; @@ -175,6 +220,20 @@ } } +[dir="ltr"] .rdrDayToday .rdrDayNumber span{ + &:after{ + left: 50%; + transform: translate(-50%, 0); + } +} + +[dir="rtl"] .rdrDayToday .rdrDayNumber span{ + &:after{ + right: 50%; + transform: translate(50%, 0); + } +} + .rdrDayToday:not(.rdrDayPassive) { .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{ & ~ .rdrDayNumber span:after{ @@ -209,23 +268,35 @@ .rdrInRange{} -.rdrStartEdge{ +[dir="ltr"] .rdrStartEdge{ border-top-left-radius: 1.042em; border-bottom-left-radius: 1.042em; left: 2px; } -.rdrEndEdge{ +[dir="rtl"] .rdrStartEdge{ + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; +} + +[dir="ltr"] .rdrEndEdge{ border-top-right-radius: 1.042em; border-bottom-right-radius: 1.042em; right: 2px; } +[dir="rtl"] .rdrEndEdge{ + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; +} + .rdrSelected{ border-radius: 1.042em; } -.rdrDayStartOfMonth, .rdrDayStartOfWeek{ +[dir="ltr"] .rdrDayStartOfMonth, [dir="ltr"] .rdrDayStartOfWeek{ .rdrInRange, .rdrEndEdge{ border-top-left-radius: 1.042em; border-bottom-left-radius: 1.042em; @@ -233,7 +304,15 @@ } } -.rdrDayEndOfMonth, .rdrDayEndOfWeek{ +[dir="rtl"] .rdrDayStartOfMonth, [dir="rtl"] .rdrDayStartOfWeek{ + .rdrInRange, .rdrEndEdge{ + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; + } +} + +[dir="ltr"] .rdrDayEndOfMonth, [dir="ltr"] .rdrDayEndOfWeek{ .rdrInRange, .rdrStartEdge{ border-top-right-radius: 1.042em; border-bottom-right-radius: 1.042em; @@ -241,7 +320,15 @@ } } -.rdrDayStartOfMonth, .rdrDayStartOfWeek{ +[dir="rtl"] .rdrDayEndOfMonth, [dir="rtl"] .rdrDayEndOfWeek{ + .rdrInRange, .rdrStartEdge{ + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; + } +} + +[dir="ltr"] .rdrDayStartOfMonth, [dir="ltr"] .rdrDayStartOfWeek{ .rdrDayInPreview, .rdrDayEndPreview{ border-top-left-radius: 1.333em; border-bottom-left-radius: 1.333em; @@ -250,7 +337,16 @@ } } -.rdrDayEndOfMonth, .rdrDayEndOfWeek{ +[dir="rtl"] .rdrDayStartOfMonth, [dir="rtl"] .rdrDayStartOfWeek{ + .rdrDayInPreview, .rdrDayEndPreview{ + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + border-right-width: 1px; + right: 0px; + } +} + +[dir="ltr"] .rdrDayEndOfMonth, [dir="ltr"] .rdrDayEndOfWeek{ .rdrDayInPreview, .rdrDayStartPreview{ border-top-right-radius: 1.333em; border-bottom-right-radius: 1.333em; @@ -259,6 +355,14 @@ } } +[dir="rtl"] .rdrDayEndOfMonth, [dir="rtl"] .rdrDayEndOfWeek{ + .rdrDayInPreview, .rdrDayStartPreview{ + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + border-left-width: 1px; + left: 0px; + } +} .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ background: rgba(255, 255, 255, 0.09); @@ -272,16 +376,25 @@ z-index: 1; } - .rdrDayStartPreview{ border-top-width: 1px; - border-left-width: 1px; border-bottom-width: 1px; +} + +[dir="ltr"] .rdrDayStartPreview{ + border-left-width: 1px; border-top-left-radius: 1.333em; border-bottom-left-radius: 1.333em; left: 0px; } +[dir="rtl"] .rdrDayStartPreview{ + border-right-width: 1px; + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + right: 0px; +} + .rdrDayInPreview{ border-top-width: 1px; border-bottom-width: 1px; @@ -289,25 +402,44 @@ .rdrDayEndPreview{ border-top-width: 1px; - border-right-width: 1px; border-bottom-width: 1px; +} + +[dir="ltr"] .rdrDayEndPreview{ + border-right-width: 1px; border-top-right-radius: 1.333em; border-bottom-right-radius: 1.333em; right: 2px; right: 0px; } +[dir="rtl"] .rdrDayEndPreview{ + border-left-width: 1px; + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + left: 2px; + left: 0px; +} + .rdrDefinedRangesWrapper{ font-size: 12px; width: 226px; - border-right: solid 1px #eff2f7; background: #fff; + .rdrStaticRangeSelected{ color: currentColor; font-weight: 600; } } +[dir="ltr"] .rdrDefinedRangesWrapper{ + border-right: solid 1px #eff2f7 +} + +[dir="rtl"] .rdrDefinedRangesWrapper{ + border-left: solid 1px #eff2f7 +} + .rdrStaticRange{ border: 0; cursor: pointer; @@ -316,6 +448,7 @@ border-bottom: 1px solid #eff2f7; padding: 0; background: #fff; + &:hover, &:focus{ .rdrStaticRangeLabel{ background: #eff2f7; @@ -328,9 +461,16 @@ outline: 0; line-height: 18px; padding: 10px 20px; +} + +[dir="ltr"] .rdrStaticRangeLabel{ text-align: left; } +[dir="rtl"] .rdrStaticRangeLabel{ + text-align: right; +} + .rdrInputRanges{ padding: 10px 0; } @@ -347,8 +487,8 @@ border-radius: 4px; text-align: center; border: solid 1px rgb(222, 231, 235); - margin-right: 10px; color: rgb(108, 118, 122); + &:focus, &:hover{ border-color: rgb(180, 191, 196); outline: 0; @@ -356,6 +496,14 @@ } } +[dir="ltr"] .rdrInputRangeInput{ + margin-right: 10px +} + +[dir="rtl"] .rdrInputRangeInput{ + margin-left: 10px +} + .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{ content: ''; border: 1px solid currentColor; @@ -370,9 +518,11 @@ .rdrDayPassive{ pointer-events: none; + .rdrDayNumber span{ color: #d5dce0; } + .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ display: none; } @@ -380,17 +530,26 @@ .rdrDayDisabled { background-color: rgb(248, 248, 248); + .rdrDayNumber span{ color: #aeb9bf; } + .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ filter: grayscale(100%) opacity(60%); } } .rdrMonthName{ - text-align: left; font-weight: 600; color: #849095; padding: 0.833em; } + +[dir="ltr"] .rdrMonthName{ + text-align: left; +} + +[dir="rtl"] .rdrMonthName{ + text-align: right; +}