Skip to content

Commit

Permalink
preserve antd components' styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@saha80
saha80 committed Mar 16, 2023
1 parent a03d432 commit 56130a2
Show file tree
Hide file tree
Showing 26 changed files with 539 additions and 272 deletions.
4 changes: 2 additions & 2 deletions src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons';
import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker';
import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
Expand Down Expand Up @@ -114,7 +114,7 @@ export const Input = styled(BaseInput)`
line-height: 1.375rem;
`;

export const RangePicker = styled(BaseRangePicker)`
export const RangePicker = styled(BaseDatePicker.RangePicker)`
width: 100%;
margin-bottom: 0.875rem;
Expand Down
4 changes: 4 additions & 0 deletions src/components/common/BaseAlert/BaseAlert.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@ export const Alert = styled(AntAlert)`
.ant-alert-message {
color: var(--black);
}
.ant-alert-action {
margin-inline-start: 8px;
}
`;
104 changes: 55 additions & 49 deletions src/components/common/BaseButton/BaseButton.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
import { Button as AntButton } from 'antd';
import { Severity } from '@app/interfaces/interfaces';
import { defineColorBySeverity } from '@app/utils/utils';
import { FONT_WEIGHT } from '@app/styles/themes/constants';

interface BtnProps {
$severity?: Severity;
Expand All @@ -14,7 +15,9 @@ export const Button = styled(AntButton)<BtnProps>`
justify-content: center;
gap: 0.3rem;
font-weight: 600;
transition-duration: 0.3s;
font-weight: ${FONT_WEIGHT.semibold};
box-shadow: none;
&.ant-btn.ant-btn-icon-only > span {
Expand All @@ -40,66 +43,50 @@ export const Button = styled(AntButton)<BtnProps>`
color: var(--disabled-color);
}
&.ant-btn-dangerous {
&.ant-btn-primary {
box-shadow: none;
}
&.ant-btn-text:not(:disabled):hover {
background-color: transparent;
}
}
${(props) =>
!props.danger &&
css`
transition-duration: 0.3s;
${props.$severity &&
css`
box-shadow: none;
text-shadow: none;
background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2);
border-color: ${defineColorBySeverity(props.$severity)};
color: ${defineColorBySeverity(props.$severity)};
&:focus,
&:not(:disabled):hover {
background: var(--background-color);
border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
}
`}
${(typeof props.type === 'undefined' || props.type === 'default' || props.type === 'dashed') &&
css`
&.ant-btn-default,
&.ant-btn-dashed {
&:focus {
background-color: var(--background-color);
}
${props.$severity === 'info' &&
css`
&:focus,
&:not(:disabled):hover {
color: var(--ant-primary-color-hover);
border-color: var(--ant-primary-color-hover);
}
`}
`}
&:focus,
&:not(:disabled):hover {
color: var(--ant-primary-color-hover);
border-color: var(--ant-primary-color-hover);
}
}
${props.type === 'text' &&
css`
&.ant-btn-text {
&:focus {
background-color: rgba(0, 0, 0, 0.02);
background-color: rgba(0, 0, 0, 0.018);
}
&:not(:disabled):hover {
background: transparent;
color: var(--secondary-color);
}
`}
}
${props.type === 'ghost' &&
css`
&.ant-btn-ghost {
color: var(--primary-color);
border-color: var(--primary-color);
&:disabled {
cursor: not-allowed;
color: var(--disabled-color);
border-color: var(--border-base-color);
background-color: var(--disabled-bg-color);
}
Expand All @@ -111,31 +98,32 @@ export const Button = styled(AntButton)<BtnProps>`
&:not(:disabled):hover {
color: var(--secondary-color);
border-color: var(--secondary-color);
}
`}
}
${props.type === 'primary' &&
css`
&.ant-btn-primary:not(:disabled) {
background: var(--primary-color);
&:focus {
border-color: var(--ant-primary-color-hover);
background: var(--ant-primary-color-hover);
}
&:not(:disabled):hover {
&:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
}
`}
}
${props.type === 'link' &&
css`
&.ant-btn-link {
color: var(--primary-color);
&:disabled {
color: var(--disabled-color);
}
&:focus {
color: var(--ant-primary-color-hover);
}
Expand All @@ -149,6 +137,24 @@ export const Button = styled(AntButton)<BtnProps>`
a {
text-decoration: underline;
}
`};
}
${props.$severity &&
css`
background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2);
border-color: ${defineColorBySeverity(props.$severity)};
color: ${defineColorBySeverity(props.$severity)};
&.ant-btn-default:focus,
&.ant-btn-default:not(:disabled):hover {
background: var(--background-color);
border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
}
`}
`}
`;
11 changes: 9 additions & 2 deletions src/components/common/BaseCard/BaseCard.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ export const Card = styled(AntCard)<CardInternalProps>`
box-shadow: var(--box-shadow);
.ant-card-head {
justify-content: end;
min-height: 50px;
padding-top: 15px;
padding-bottom: 15px;
min-height: 36px;
border-bottom: 0;
Expand All @@ -30,6 +31,12 @@ export const Card = styled(AntCard)<CardInternalProps>`
padding-bottom: 0;
}
@media only screen and ${media.md} {
padding-top: 20px;
padding-bottom: 0;
min-height: 48px;
}
@media only screen and ${media.xl} {
font-size: ${FONT_SIZE.xxl};
Expand Down
12 changes: 8 additions & 4 deletions src/components/common/BaseCheckbox/BaseCheckbox.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,20 @@ export const Checkbox = styled(AntdCheckbox)`
border: 1px solid var(--primary-color);
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
border-color: var(--disabled-color);
.ant-checkbox-disabled .ant-checkbox-inner {
border-color: var(--border-base-color);
}
.ant-checkbox-disabled + span {
color: var(--disabled-color);
&.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
border-color: var(--disabled-color);
}
`;

export const CheckboxGroup = styled(Group)`
.ant-form-vertical &.ant-checkbox-group {
display: inline-block;
}
& .ant-checkbox-inner {
border-radius: 0.1875rem;
height: 1.25rem;
Expand Down
54 changes: 54 additions & 0 deletions src/components/common/BasePagination/BasePagination.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,59 @@ export const Pagination = styled(AntdPagination)`
color: var(--disabled-color);
}
:not(.ant-pagination-disabled),
&.ant-pagination-disabled {
.ant-pagination-item,
.ant-pagination-jump-prev,
.ant-pagination-jump-next {
&:focus-visible {
outline: none;
}
}
.ant-pagination-prev,
.ant-pagination-next {
&:focus-visible {
.ant-pagination-item-link {
outline: none;
}
}
}
}
:not(.ant-pagination-disabled) {
.ant-pagination-item:focus-visible {
a {
color: var(--ant-primary-color);
}
border-color: var(--ant-primary-color);
}
.ant-pagination-prev,
.ant-pagination-next {
&:focus-visible {
.ant-pagination-item-link {
color: var(--ant-primary-color);
border-color: var(--ant-primary-color);
}
}
}
}
&.ant-pagination-disabled {
.ant-pagination-jump-prev,
.ant-pagination-jump-next {
&:focus-visible,
&:hover {
.ant-pagination-item-link-icon {
opacity: 0;
}
.ant-pagination-item-ellipsis {
opacity: 1;
}
}
}
}
.ant-pagination-disabled {
.ant-pagination-item-link,
.ant-pagination-item a {
Expand All @@ -19,6 +72,7 @@ export const Pagination = styled(AntdPagination)`
color: var(--disabled-color);
}
}
& .ant-select-arrow {
color: var(--disabled-color);
}
Expand Down
10 changes: 10 additions & 0 deletions src/components/common/BaseRadio/BaseRadio.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,22 @@ import styled from 'styled-components';
import { Radio as AntdRadio } from 'antd';

export const Radio = styled(AntdRadio)`
.ant-radio-input:focus-visible + .ant-radio-inner {
outline: none;
box-shadow: 0 0 0 3px var(--ant-primary-color-outline);
}
.ant-radio-disabled + span {
color: var(--disabled-color);
}
`;

export const RadioButton = styled(AntdRadio.Button)`
&.ant-radio-button-wrapper:has(:focus-visible) {
outline: none;
box-shadow: 0 0 0 3px var(--ant-primary-color-outline);
}
&.ant-radio-button-wrapper-disabled {
color: var(--disabled-color);
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/common/BaseSlider/BaseSlider.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import styled from 'styled-components';
import { Slider as AntdSlider } from 'antd';

export const Slider = styled(AntdSlider)`
&.ant-slider.ant-slider-disabled .ant-slider-rail {
background-color: var(--background-base-color) !important;
}
& .ant-slider-mark-text:not(.ant-slider-mark-text-active) {
color: var(--subtext-color);
}
Expand Down
5 changes: 5 additions & 0 deletions src/components/common/inputs/BaseInput/BaseInput.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants';
export const Input = styled(AntInput)`
font-family: inherit;
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover
.ant-select-selector {
border-color: transparent;
}
.ant-input-group-addon:first-child,
.ant-input-group-addon:last-child {
min-width: 5.5rem;
Expand Down
3 changes: 2 additions & 1 deletion src/components/common/inputs/SearchInput/SearchInput.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export const SearchInput = styled(BaseInput.Search)`
font-size: ${FONT_SIZE.lg};
}
.ant-input-search-button {
.ant-input-search-button,
.ant-input-search-button:hover {
&.ant-btn .anticon {
color: var(--primary-color);
}
Expand Down
20 changes: 20 additions & 0 deletions src/components/common/pickers/BaseDatePicker.styled.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import styled from 'styled-components';
import { DatePicker as AntDatePicker } from 'antd';

export const DatePicker = styled(AntDatePicker)`
& input {
font-family: inherit;
}
`;

export const RangePicker = styled(AntDatePicker.RangePicker)`
& input {
font-family: inherit;
}
`;

export const TimePicker = styled(AntDatePicker.TimePicker)`
& input {
font-family: inherit;
}
`;
Loading

0 comments on commit 56130a2

Please sign in to comment.