Skip to content
This repository has been archived by the owner on Oct 12, 2023. It is now read-only.

Commit

Permalink
Add dropshadow to searchbar (#195)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatoBeltran
PatoBeltran authored May 19, 2020
1 parent 9600bda commit af435f5
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 168 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGELOG

## 8.0.6
### Changed
- Added box-shadow to search bar to be accessible on light mastheads.

## 8.0.5
### Fixed
- When a FormField was rendered with no error, we were setting the FormError's title to `false`, causing a react warning.
Expand Down
309 changes: 155 additions & 154 deletions lib/components/SearchInput/SearchInput.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,156 @@
@import '../../common/constants';
@import '../../common/mixins';

$search-min-width:280px;
$search-icon-width: $grid-size*8;
$search-icon-height: $grid-size*8;
$border-radius-size: $grid-size/2;

.search-input-container {
flex-shrink: 1;
flex-grow: 1;
position: relative;
display: inline-flex;
max-width: $search-max-width;
min-width: $search-min-width;
height: $search-icon-height;
border-radius: $border-radius-size;

.search-input input.input-component:not([value=""]) {
+button::before {
display: none;
color: var(--color-masthead-foreground);
}
}

&:hover,
&:active,
&:focus {
.search-prefix-icon {
color: var(--color-search-text-hover);
}

.search-input input.input-component {
background-color: var(--color-search-background-hover);
color: var(--color-search-text-hover);

&::placeholder {
color: var(--color-search-text-placeholder);
}

&:not([value=""]) {
+button::before {
color: var(--color-search-text-hover);
}
}
}
}

.search-prefix-icon {
color: var(--color-masthead-foreground);
background-color: transparent;
position: absolute;
z-index: 1;
margin-left: $gutter-xxsmall;
height: 100%;
border: 0;
background: transparent;
outline: none;

@include rtl {
margin: 0 $gutter-xxsmall 0 0;
}
}

.search-input {
flex: 2;
min-width: 0;
line-height: $search-icon-width;
width: auto;
border: 0;

input.input-component {
background-color: var(--color-search-background);
color: var(--color-masthead-foreground);
border-radius: $border-radius-size;
border: 0 !important;

padding-left: $search-icon-width;

@include rtl {
padding-left: 2*$grid-size;
padding-right: $search-icon-width;
}

&:focus,
&:active {
padding-left: $search-icon-width;

@include rtl {
padding-left: 8*$grid-size;
padding-right: $search-icon-width;
}
}

&::placeholder {
color: var(--color-masthead-foreground);
}

&:not([value=""]) {
border-radius: $border-radius-size 0 0 $border-radius-size;

@include rtl {
border-radius: 0 $border-radius-size $border-radius-size 0;
}

&:focus,
&:active {
+button::before {
display: block;
}
}
}
}

.search-button-container {
padding: 0;

.search-button {
width: $search-icon-width;
height: $search-icon-width;
border-radius: 0 $border-radius-size $border-radius-size 0;

@include rtl {
border-radius: $border-radius-size 0 0 $border-radius-size;

span::before {
transform: rotate(180deg);
}
}
}
}
}

.search-button {
background-color: var(--color-accent);

>div {
background-color: var(--color-accent) !important;
}

&:focus,
&:active,
&:hover {
background-color: var(--color-accent);

span {
color: var(--color-accent-foreground) !important;
}
}

span {
color: var(--color-accent-foreground) !important;
}
}
@import '../../common/constants';
@import '../../common/mixins';

$search-min-width:280px;
$search-icon-width: $grid-size*8;
$search-icon-height: $grid-size*8;
$border-radius-size: $grid-size/2;

.search-input-container {
flex-shrink: 1;
flex-grow: 1;
position: relative;
display: inline-flex;
max-width: $search-max-width;
min-width: $search-min-width;
height: $search-icon-height;
border-radius: $border-radius-size;
box-shadow: var(--depth-1);

.search-input input.input-component:not([value=""]) {
+button::before {
display: none;
color: var(--color-masthead-foreground);
}
}

&:hover,
&:active,
&:focus {
.search-prefix-icon {
color: var(--color-search-text-hover);
}

.search-input input.input-component {
background-color: var(--color-search-background-hover);
color: var(--color-search-text-hover);

&::placeholder {
color: var(--color-search-text-placeholder);
}

&:not([value=""]) {
+button::before {
color: var(--color-search-text-hover);
}
}
}
}

.search-prefix-icon {
color: var(--color-masthead-foreground);
background-color: transparent;
position: absolute;
z-index: 1;
margin-left: $gutter-xxsmall;
height: 100%;
border: 0;
background: transparent;
outline: none;

@include rtl {
margin: 0 $gutter-xxsmall 0 0;
}
}

.search-input {
flex: 2;
min-width: 0;
line-height: $search-icon-width;
width: auto;
border: 0;

input.input-component {
background-color: var(--color-search-background);
color: var(--color-masthead-foreground);
border-radius: $border-radius-size;
border: 0 !important;

padding-left: $search-icon-width;

@include rtl {
padding-left: 2*$grid-size;
padding-right: $search-icon-width;
}

&:focus,
&:active {
padding-left: $search-icon-width;

@include rtl {
padding-left: 8*$grid-size;
padding-right: $search-icon-width;
}
}

&::placeholder {
color: var(--color-masthead-foreground);
}

&:not([value=""]) {
border-radius: $border-radius-size 0 0 $border-radius-size;

@include rtl {
border-radius: 0 $border-radius-size $border-radius-size 0;
}

&:focus,
&:active {
+button::before {
display: block;
}
}
}
}

.search-button-container {
padding: 0;

.search-button {
width: $search-icon-width;
height: $search-icon-width;
border-radius: 0 $border-radius-size $border-radius-size 0;

@include rtl {
border-radius: $border-radius-size 0 0 $border-radius-size;

span::before {
transform: rotate(180deg);
}
}
}
}
}

.search-button {
background-color: var(--color-accent);

>div {
background-color: var(--color-accent) !important;
}

&:focus,
&:active,
&:hover {
background-color: var(--color-accent);

span {
color: var(--color-accent-foreground) !important;
}
}

span {
color: var(--color-accent-foreground) !important;
}
}
}
Loading

0 comments on commit af435f5

Please sign in to comment.