Skip to content

Commit

Permalink
Change --border-radius-circle to --border-radius-full (#30936)
Browse files Browse the repository at this point in the history
Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.
  • Loading branch information
silverwind committed May 25, 2024
1 parent 47e715a commit 2ced31e
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 5 deletions.
2 changes: 1 addition & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default {
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
'full': 'var(--border-radius-circle)', // 50%
'full': 'var(--border-radius-full)',
},
fontFamily: {
sans: 'var(--fonts-regular)',
Expand Down
4 changes: 2 additions & 2 deletions web_src/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
/* other variables */
--border-radius: 4px;
--border-radius-medium: 6px;
--border-radius-circle: 50%;
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
--opacity-disabled: 0.55;
--height-loading: 16rem;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
Expand Down Expand Up @@ -1166,7 +1166,7 @@ overflow-menu .ui.label {

.color-icon {
display: inline-block;
border-radius: var(--border-radius-circle);
border-radius: var(--border-radius-full);
height: 14px;
width: 14px;
}
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/modules/animations.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
border-width: 4px;
border-style: solid;
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
border-radius: var(--border-radius-circle);
border-radius: var(--border-radius-full);
}

.is-loading.loading-icon-2px::after {
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/repo.css
Original file line number Diff line number Diff line change
Expand Up @@ -790,7 +790,7 @@ td .commit-summary {
width: 34px;
height: 34px;
background-color: var(--color-timeline);
border-radius: var(--border-radius-circle);
border-radius: var(--border-radius-full);
display: flex;
float: left;
margin-left: -33px;
Expand Down

0 comments on commit 2ced31e

Please sign in to comment.