Web: Components: Refactor file input border radius
This commit is contained in:
parent
d2346a8d4a
commit
7badc8740c
@ -1,5 +1,6 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import Base from "../themes/base";
|
||||
import { getCorrectBorderRadius } from "../utils/rtlUtils";
|
||||
|
||||
const paddingRightStyle = (props) =>
|
||||
props.theme.fileInput.paddingRight[props.size];
|
||||
@ -81,11 +82,16 @@ const StyledFileInput = styled.div`
|
||||
props.theme.input.borderColor};
|
||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
||||
|
||||
border-radius: ${({ theme }) =>
|
||||
getCorrectBorderRadius(
|
||||
theme.fileInput.icon.borderRadius,
|
||||
theme.interfaceDirection
|
||||
)};
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 0;
|
||||
border-radius: ${props.theme.fileInput.icon.borderRadiusRtl};
|
||||
|
||||
& svg {
|
||||
transform: scaleX(-1);
|
||||
@ -93,7 +99,6 @@ const StyledFileInput = styled.div`
|
||||
`
|
||||
: css`
|
||||
right: 0;
|
||||
border-radius: ${props.theme.fileInput.icon.borderRadiusLtr};
|
||||
`}
|
||||
}
|
||||
|
||||
|
@ -698,8 +698,7 @@ const Base = {
|
||||
background: white,
|
||||
|
||||
border: "1px solid",
|
||||
borderRadiusLtr: "0 3px 3px 0",
|
||||
borderRadiusRtl: "3px 0 0 3px",
|
||||
borderRadius: "0 3px 3px 0",
|
||||
|
||||
width: {
|
||||
base: "30px",
|
||||
|
@ -693,8 +693,7 @@ const Dark = {
|
||||
background: "#292929",
|
||||
|
||||
border: "1px solid",
|
||||
borderRadiusLtr: "0 3px 3px 0",
|
||||
borderRadiusRtl: "3px 0 0 3px",
|
||||
borderRadius: "0 3px 3px 0",
|
||||
|
||||
width: {
|
||||
base: "30px",
|
||||
|
Loading…
Reference in New Issue
Block a user