mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
7999d26960
- Remove blog-specific footer. (See also: #2501, #2503) - Fix markup that was invalidly reusing the same HTML ID for multiple elements. - Use existing chips for blog categories instead of having separate styles for blog chips. This fixes some issues where the contrast of the blog category chips was not meeting WCAG contrast standards. - Update yellow chip in light mode to meet WCAG AAA contrast standard.
423 lines
8.6 KiB
SCSS
423 lines
8.6 KiB
SCSS
/* Status labels ("DEV" etc) for non-enabled features ----------------------- */
|
|
|
|
.status {
|
|
cursor: help;
|
|
padding: 1px 2px;
|
|
font-weight: normal;
|
|
text-indent: 0;
|
|
}
|
|
.status.not_enabled {
|
|
/* flask icon for "not yet enabled" features */
|
|
color: $warning;
|
|
}
|
|
.status.removed {
|
|
/* trash icon for removed features */
|
|
color: $danger;
|
|
}
|
|
|
|
/* "Topic by Label" browsing ------------------------------------------------ */
|
|
|
|
.labels-wrap {
|
|
ul::before {
|
|
content: "\f02c";
|
|
font-family: FontAwesome;
|
|
font-size: 1.5rem;
|
|
}
|
|
.list-inline-item {
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
.pg-category {
|
|
color: $gray-400;
|
|
|
|
&::after {
|
|
content: "\f105"; /* fontawesome angle-right */
|
|
font-family: FontAwesome;
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
border-radius: 100px;
|
|
border-width: 0;
|
|
padding: .5rem 1rem;
|
|
font-weight: bold;
|
|
text-decoration: none !important;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
.badge-pill {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50px;
|
|
margin-left: 0.5rem;
|
|
font-weight: 400;
|
|
line-height: 23px;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
// default, uncolored labels (gray)
|
|
background-color: $gray-900;
|
|
color: $gray-300;
|
|
|
|
html.light & {
|
|
background-color: $gray-200;
|
|
color: $gray-800;
|
|
.badge-pill {
|
|
color: $gray-200;
|
|
background-color: $gray-800;
|
|
}
|
|
&:hover {
|
|
background-color: $gray-300;
|
|
color: $gray-900;
|
|
.badge-pill {
|
|
color: $gray-300;
|
|
background-color: $gray-900;
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-pill {
|
|
color: $gray-900;
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
&:hover {
|
|
color: $gray-200;
|
|
background-color: $gray-800;
|
|
|
|
.badge-pill {
|
|
color: $gray-800;
|
|
background-color: $gray-200;
|
|
}
|
|
}
|
|
|
|
@mixin chip-indigo {
|
|
background-color: $blue-purple-900;
|
|
color: $blue-purple-300;
|
|
.badge-pill {
|
|
color: $blue-purple-900;
|
|
background-color: $blue-purple-300;
|
|
}
|
|
&:hover {
|
|
background-color: $blue-purple-800;
|
|
color: $blue-purple-200;
|
|
.badge-pill {
|
|
color: $blue-purple-800;
|
|
background-color: $blue-purple-200;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $blue-purple-200;
|
|
color: $blue-purple-800;
|
|
.badge-pill {
|
|
color: $blue-purple-200;
|
|
background-color: $blue-purple-800;
|
|
}
|
|
&:hover {
|
|
background-color: $blue-purple-300;
|
|
color: $blue-purple-900;
|
|
.badge-pill {
|
|
color: $blue-purple-300;
|
|
background-color: $blue-purple-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-green {
|
|
background-color: $green-900;
|
|
color: $green-300;
|
|
.badge-pill {
|
|
background-color: $green-300;
|
|
color: $green-900;
|
|
}
|
|
&:hover {
|
|
background-color: $green-800;
|
|
color: $green-200;
|
|
.badge-pill {
|
|
background-color: $green-200;
|
|
color: $green-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $green-200;
|
|
color: $green-900;
|
|
.badge-pill {
|
|
color: $green-200;
|
|
background-color: $green-900;
|
|
}
|
|
&:hover {
|
|
background-color: $green-300;
|
|
color: $black;
|
|
.badge-pill {
|
|
color: $green-300;
|
|
background-color: $black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-purple {
|
|
background-color: $red-purple-900;
|
|
color: $red-purple-300;
|
|
.badge-pill {
|
|
background-color: $red-purple-300;
|
|
color: $red-purple-900;
|
|
}
|
|
&:hover {
|
|
background-color: $red-purple-800;
|
|
color: $red-purple-200;
|
|
.badge-pill {
|
|
background-color: $red-purple-200;
|
|
color: $red-purple-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $red-purple-200;
|
|
color: $red-purple-800;
|
|
.badge-pill {
|
|
color: $red-purple-200;
|
|
background-color: $red-purple-800;
|
|
}
|
|
&:hover {
|
|
background-color: $red-purple-300;
|
|
color: $red-purple-900;
|
|
.badge-pill {
|
|
color: $red-purple-300;
|
|
background-color: $red-purple-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-yellow {
|
|
background-color: $yellow-900;
|
|
color: $yellow-300;
|
|
.badge-pill {
|
|
background-color: $yellow-300;
|
|
color: $yellow-900;
|
|
}
|
|
&:hover {
|
|
background-color: $yellow-800;
|
|
color: $yellow-200;
|
|
.badge-pill {
|
|
background-color: $yellow-200;
|
|
color: $yellow-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $yellow-200;
|
|
color: $yellow-900;
|
|
.badge-pill {
|
|
color: $yellow-200;
|
|
background-color: $yellow-900;
|
|
}
|
|
&:hover {
|
|
background-color: $yellow-300;
|
|
color: $yellow-900;
|
|
.badge-pill {
|
|
color: $yellow-300;
|
|
background-color: $yellow-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-blue {
|
|
background-color: $blue-900;
|
|
color: $blue-300;
|
|
.badge-pill {
|
|
background-color: $blue-300;
|
|
color: $blue-900;
|
|
}
|
|
&:hover {
|
|
background-color: $blue-800;
|
|
color: $blue-200;
|
|
.badge-pill {
|
|
background-color: $blue-200;
|
|
color: $blue-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $blue-200;
|
|
color: $blue-800;
|
|
.badge-pill {
|
|
color: $blue-200;
|
|
background-color: $blue-800;
|
|
}
|
|
&:hover {
|
|
background-color: $blue-300;
|
|
color: $blue-900;
|
|
.badge-pill {
|
|
color: $blue-300;
|
|
background-color: $blue-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-orange {
|
|
background-color: $orange-900;
|
|
color: $orange-300;
|
|
.badge-pill {
|
|
background-color: $orange-300;
|
|
color: $orange-900;
|
|
}
|
|
&:hover {
|
|
background-color: $orange-800;
|
|
color: $orange-200;
|
|
.badge-pill {
|
|
background-color: $orange-200;
|
|
color: $orange-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $orange-200;
|
|
color: $orange-800;
|
|
.badge-pill {
|
|
color: $orange-200;
|
|
background-color: $orange-800;
|
|
}
|
|
&:hover {
|
|
background-color: $orange-300;
|
|
color: $orange-900;
|
|
.badge-pill {
|
|
color: $orange-300;
|
|
background-color: $orange-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chip-magenta {
|
|
background-color: $magenta-900;
|
|
color: $magenta-300;
|
|
.badge-pill {
|
|
background-color: $magenta-300;
|
|
color: $magenta-900;
|
|
}
|
|
&:hover {
|
|
background-color: $magenta-800;
|
|
color: $magenta-200;
|
|
.badge-pill {
|
|
background-color: $magenta-200;
|
|
color: $magenta-800;
|
|
}
|
|
}
|
|
|
|
html.light & {
|
|
background-color: $magenta-200;
|
|
color: $magenta-800;
|
|
.badge-pill {
|
|
color: $magenta-200;
|
|
background-color: $magenta-800;
|
|
}
|
|
&:hover {
|
|
background-color: $magenta-300;
|
|
color: $magenta-900;
|
|
.badge-pill {
|
|
color: $magenta-300;
|
|
background-color: $magenta-900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.label-accounts,
|
|
&.label-payment-channels,
|
|
&.label-amm,
|
|
&.label-アカウント,
|
|
&.label-payment-channel,
|
|
&.label-use-infrastructure,
|
|
&.label-use-security,
|
|
&.blog-category-development,
|
|
&.chip-indigo {
|
|
@include chip-indigo;
|
|
}
|
|
|
|
&.label-blockchain,
|
|
&.label-xrp,
|
|
&.label-ブロックチェーン,
|
|
&.label-non-fungible-tokens-nfts,
|
|
&.label-use-nfts,
|
|
&.blog-category-release_notes,
|
|
&.blog-category-features,
|
|
&.chip-green {
|
|
@include chip-green;
|
|
}
|
|
|
|
&.label-checks,
|
|
&.label-core-server,
|
|
&.label-コアサーバ,
|
|
&.label-use-interoperability,
|
|
&.label-use-web_monetization,
|
|
&.blog-category-gateway_bulletins,
|
|
&.chip-purple {
|
|
@include chip-purple;
|
|
}
|
|
|
|
&.label-cross-currency,
|
|
&.label-security,
|
|
&.label-クロスカレンシー,
|
|
&.label-セキュリティ,
|
|
&.label-use-gaming,
|
|
&.label-use-defi,
|
|
&.blog-category-amendments,
|
|
&.chip-yellow {
|
|
@include chip-yellow;
|
|
}
|
|
|
|
&.label-decentralized-exchange,
|
|
&.label-smart-contracts,
|
|
&.label-transaction-sending,
|
|
&.label-分散型取引所,
|
|
&.label-スマートコントラクト,
|
|
&.label-トランザクション送信,
|
|
&.label-use-developer_tooling,
|
|
&.label-use-payments,
|
|
&.blog-category-developer_reflections,
|
|
&.chip-blue {
|
|
@include chip-blue;
|
|
}
|
|
|
|
&.label-escrow,
|
|
&.label-tokens,
|
|
&.label-development,
|
|
&.label-トークン,
|
|
&.label-開発,
|
|
&.label-use-wallet,
|
|
&.label-use-sustainability,
|
|
&.blog-category-advisories,
|
|
&.chip-orange {
|
|
@include chip-orange;
|
|
}
|
|
|
|
&.label-fees,
|
|
&.label-payments,
|
|
&.label-data-retention,
|
|
&.label-手数料,
|
|
&.label-支払い,
|
|
&.label-データ保持,
|
|
&.label-use-exchanges,
|
|
&.label-use-custody,
|
|
&.blog-category-security,
|
|
&.chip-magenta {
|
|
@include chip-magenta;
|
|
}
|
|
}
|
|
|
|
.tag-cloud {
|
|
.list-inline-item {
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|