refactor(ui): standardize the border radius (#1920)
Impact: - Increase the border radius of inline code and `<kbd>` tags - Variable `$base-radius` renamed to `$radius-lg`
This commit is contained in:
parent
5f4dab1745
commit
31e19c6d0f
7 changed files with 12 additions and 11 deletions
|
@ -134,7 +134,7 @@ kbd {
|
|||
padding-top: 0.1rem;
|
||||
color: var(--kbd-text-color);
|
||||
background-color: var(--kbd-bg-color);
|
||||
border-radius: 0.25rem;
|
||||
border-radius: $radius-sm;
|
||||
border: solid 1px var(--kbd-wrap-color);
|
||||
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
|
||||
}
|
||||
|
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
|
||||
%rounded {
|
||||
border-radius: $base-radius;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
%img-caption {
|
||||
|
|
|
@ -102,9 +102,9 @@ code {
|
|||
|
||||
&.highlighter-rouge {
|
||||
font-size: $code-font-size;
|
||||
padding: 3px 6px;
|
||||
padding: 3px 5px;
|
||||
word-break: break-word;
|
||||
border-radius: 4px;
|
||||
border-radius: $radius-sm;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
|
||||
|
@ -261,7 +261,7 @@ div {
|
|||
.content > & {
|
||||
@include ml-mr(0);
|
||||
|
||||
border-radius: $base-radius;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
|
|
|
@ -16,7 +16,8 @@ $search-max-width: 200px !default;
|
|||
$footer-height: 5rem !default;
|
||||
$footer-height-large: 6rem !default; /* screen width: < 850px */
|
||||
$main-content-max-width: 1250px !default;
|
||||
$base-radius: 0.625rem !default;
|
||||
$radius-sm: 6px !default;
|
||||
$radius-lg: 10px !default;
|
||||
$back2top-size: 2.75rem !default;
|
||||
|
||||
/* syntax highlight */
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
.card-header {
|
||||
$radius: calc($base-radius - 1px);
|
||||
$radius: calc($radius-lg - 1px);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
background: none;
|
||||
|
||||
%img-radius {
|
||||
border-radius: $base-radius $base-radius 0 0;
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
|
@ -131,7 +131,7 @@
|
|||
/* Tablet */
|
||||
@media all and (min-width: 768px) {
|
||||
%img-radius {
|
||||
border-radius: 0 $base-radius $base-radius 0;
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
}
|
||||
|
||||
#post-list {
|
||||
|
|
|
@ -173,12 +173,12 @@ header {
|
|||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $base-radius 0 0 $base-radius;
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
left: 0.5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $base-radius $base-radius 0;
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
right: 0.5px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue