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..d3d5a29e 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 4px; + 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; @@ -287,12 +299,14 @@ $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; } .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; } } } diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 7bea2a95..2e316d96 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -330,8 +330,8 @@ $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--focused: rgba($c-pool, 0.75); +$cf-input-border--default: $cf-grey-4; +$cf-input-border--focused: rgba($cf-turquoise, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx;