From 54bc89cdd52f427f858f2b6e3d495e0bd26defbe Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Mon, 17 Oct 2022 16:21:47 -0700 Subject: [PATCH 1/5] feat(Dropdowns): Clockface 4 updates for Dropdowns --- src/Components/Button/Button.scss | 18 ++++++++++++++---- src/Components/Dropdowns/Dropdown.scss | 18 ++++++++++++++++-- src/Components/Dropdowns/DropdownMenu.tsx | 2 -- src/Components/Inputs/Input.scss | 1 + 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index 6a5d64f2..c7d96484 100644 --- a/src/Components/Button/Button.scss +++ b/src/Components/Button/Button.scss @@ -222,7 +222,12 @@ .cf-button-primary, .cf-button-success { - @include buttonColorModifier($cf-turquoise, $cf-turquoise, $cf-grey-1, $cf-grey-1); + @include buttonColorModifier( + $cf-turquoise, + $cf-turquoise, + $cf-grey-1, + $cf-grey-1 + ); } .cf-button-tertiary { @@ -237,10 +242,15 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier($cf-carnation, $cf-carnation, $cf-grey-1, $cf-grey-1); + @include buttonColorModifier( + $cf-carnation, + $cf-carnation, + $cf-grey-1, + $cf-grey-1 + ); - &:focus{ - @include focus-shadow($cf-carnation) + &:focus { + @include focus-shadow($cf-carnation); } } diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index 57f78e85..de796e9a 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -43,6 +43,7 @@ $dropdown-item--padding-v: $cf-space-2xs; border-radius: $cf-radius; box-shadow: 0 2px 5px 0.6px rgba($g0-obsidian, 0.2); padding: $cf-space-2xs; + border: rgba(255, 255, 255, 0.05) solid $cf-border; } .cf-dropdown-menu--contents { @@ -52,6 +53,8 @@ $dropdown-item--padding-v: $cf-space-2xs; flex-direction: column; align-items: stretch; cursor: pointer; + margin-right: 2px; + margin-left: 1px; } /* @@ -69,10 +72,18 @@ $dropdown-item--padding-v: $cf-space-2xs; .cf-dropdown-divider { @include dropdownItemStyles(); font-weight: $cf-font-weight--medium; + text-transform: uppercase; + color: #88889b; + padding-bottom: 4px; + border-bottom: $cf-grey-4 1px solid; + margin-bottom: 4px; &.line { padding: 0; height: $cf-border; + background: $cf-grey-4; + margin: 8px 0; + width: 100%; } &:hover { @@ -85,6 +96,7 @@ $dropdown-item--padding-v: $cf-space-2xs; color: $g20-white; position: relative; border-radius: $cf-radius; + margin-top: $cf-space-3xs; &.cf-dropdown-link-item { padding: 0; @@ -292,7 +304,9 @@ $dropdown-item--padding-v: $cf-space-2xs; } .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) { - background-color: $active; + background-color: $cf-martinique; + border: 1px $cf-lavender solid; + border-radius: $cf-border; } } @@ -309,7 +323,7 @@ $dropdown-item--padding-v: $cf-space-2xs; } .cf-dropdown__onyx { - @include dropdownMenuColor($c-pool); + @include dropdownMenuColor($cf-lavender); } .cf-dropdown__none { diff --git a/src/Components/Dropdowns/DropdownMenu.tsx b/src/Components/Dropdowns/DropdownMenu.tsx index 8defa92e..9ae1bd0f 100644 --- a/src/Components/Dropdowns/DropdownMenu.tsx +++ b/src/Components/Dropdowns/DropdownMenu.tsx @@ -61,8 +61,6 @@ export const DropdownMenu = forwardRef( [`cf-dropdown__${theme}`]: theme, }) - // const {thumbStartColor, thumbStopColor} = getScrollbarColorsFromTheme(theme) - const scrollTop = calculateSelectedPosition(scrollToSelected, children) const scrollbarsStyle = { diff --git a/src/Components/Inputs/Input.scss b/src/Components/Inputs/Input.scss index a1d77166..01fd292a 100644 --- a/src/Components/Inputs/Input.scss +++ b/src/Components/Inputs/Input.scss @@ -133,6 +133,7 @@ alternate css for the other sizes */ &:before, &:after { width: $cf-form-sm-font; + background: $cf-input-text--default; } } } From 10498760bb8bb0081e88fc2107811540493848ac Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Mon, 17 Oct 2022 21:27:42 -0700 Subject: [PATCH 2/5] fix: hover effect --- src/Components/Dropdowns/Dropdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index de796e9a..0342560d 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -299,7 +299,7 @@ $dropdown-item--padding-v: $cf-space-2xs; .cf-dropdown-item:not(.cf-dropdown-item__disabled):hover, .cf-dropdown-item:not(.cf-dropdown-item__disabled):focus { - background-color: rgba($cf-grey-95, 0.1); + background-color: rgba($cf-grey-95, 0.09); outline: none; } From 01b5c45504f460a2e1aab8ab663a46da670d09b9 Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Mon, 17 Oct 2022 21:43:53 -0700 Subject: [PATCH 3/5] fix: input border --- src/Styles/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 7bea2a95..05db970d 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -330,7 +330,7 @@ $cf-input-text--focused: $cf-white; $cf-input-text--hover: $cf-white; $cf-input-text--disabled: $cf-empty-state-text; -$cf-input-border--default: $g5-pepper; +$cf-input-border--default: $cf-grey-4; $cf-input-border--focused: rgba($c-pool, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx; From 64c59bb03f043dcbbabb4ff9d318429b4fba55c6 Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Mon, 17 Oct 2022 21:45:02 -0700 Subject: [PATCH 4/5] fix: input border focused --- src/Styles/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 05db970d..2e316d96 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -331,7 +331,7 @@ $cf-input-text--hover: $cf-white; $cf-input-text--disabled: $cf-empty-state-text; $cf-input-border--default: $cf-grey-4; -$cf-input-border--focused: rgba($c-pool, 0.75); +$cf-input-border--focused: rgba($cf-turquoise, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx; From 0b4004a5d7f3b75a60db887a8552526d08d6d325 Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Tue, 18 Oct 2022 08:51:40 -0700 Subject: [PATCH 5/5] fix: line margin --- src/Components/Dropdowns/Dropdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index 0342560d..d3d5a29e 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -82,7 +82,7 @@ $dropdown-item--padding-v: $cf-space-2xs; padding: 0; height: $cf-border; background: $cf-grey-4; - margin: 8px 0; + margin: 8px 0 4px; width: 100%; }