@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React(Javascript/Web)
66 lines (62 loc) • 2.23 kB
CSS
/*
This class styles the search container.
It uses flexbox to align items horizontally,
includes padding, rounded corners, a border,
and a background color. It also has flexible sizing for layout adjustments.
*/
.cometchat-search-bar {
display: flex;
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
align-items: center;
align-self: stretch;
border-radius: var(--cometchat-radius-max, 1000px);
border: 1px solid var(--cometchat-border-color-light);
background: var(--cometchat-background-color-03);
flex: 1 0 0;
}
/*
This class styles the search input field.
It occupies the full width and height,
has no borders, and inherits the border-radius from its parent.
The background is transparent to blend with the container.
*/
.cometchat-search-bar__input {
width: 100%;
height: 100%;
border: none;
border-radius: none;
background: transparent;
color: var(--cometchat-text-color-primary);
font: var(--cometchat-font-heading4-regular);
font-style: normal;
outline: none;
padding-left: var(--cometchat-padding-1);
}
/*
This class styles the search icon.
It uses a webkit mask to display the search icon,
ensures the icon is centered and sized correctly,
and uses a background color for the icon.
*/
.cometchat-search-bar__icon {
-webkit-mask: url("../../assets/search.svg") center center no-repeat;
mask: url("../../assets/search.svg") center center no-repeat;
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
-webkit-mask-size: contain;
mask-size: contain;
background: var(--cometchat-icon-color-secondary);
}
/*
This class styles the placeholder text inside the search input field.
It sets the text color and font style.
The color is a tertiary text color for search placeholder.
*/
.cometchat-search-bar__input::placeholder {
color: var(--cometchat-text-color-tertiary);
font: var(--cometchat-font-heading4-regular);
font-style: normal;
}