Skip to content

Commit

Permalink
style: Remove border reset default style and color (#54)
Browse files Browse the repository at this point in the history
* Remove border style solid and default color
  • Loading branch information
ksk5280 authored Apr 14, 2021
1 parent a60cda0 commit a9cad85
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 21 deletions.
24 changes: 5 additions & 19 deletions src/components/CssReset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,8 @@ Remove the inheritance of text transform in Edge and Firefox.
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
Expand Down Expand Up @@ -366,30 +366,16 @@ const tailwindPreflightReset = css`
* is wrapped by a div with box-sizing set to content-box.
*
* https://github.com/mozdevs/cssremedy/issues/4
*
*
* 2. Allow adding a border to an element by just adding a border-width.
*
* By default, the way the browser specifies that an element should have no
* border is by setting it's border-style to none in the user-agent
* stylesheet.
*
* In order to easily add borders to elements by just setting the border-width
* property, we change the default border-style for all elements to solid, and
* use border-width to hide them instead. This way our border utilities only
* need to set the border-width property instead of the entire border
* shorthand, making our border utilities much more straightforward to compose.
*
* https://github.com/tailwindcss/tailwindcss/pull/116
*
* 2. Setting border width to 0 removes the default border from elements
* like the button and fieldset
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
/*
Expand Down
4 changes: 2 additions & 2 deletions src/components/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export function IconButton(props: IconButtonProps) {
);
}

const iconButtonStylesReset = Css.hPx(28).wPx(28).br8.bTransparent.bw2.bgTransparent.cursorPointer.outline0.p0.df
.itemsCenter.justifyCenter.transition.$;
const iconButtonStylesReset = Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0
.df.itemsCenter.justifyCenter.transition.$;
export const iconButtonStylesHover = Css.bgGray100.$;
const iconButtonStylesFocus = Css.bLightBlue700.$;
const iconButtonStylesDisabled = Css.cursorNotAllowed.$;

0 comments on commit a9cad85

Please sign in to comment.