mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
702e180de6
- Introduced the Divider component following the XRPL Brand Design System, supporting horizontal and vertical orientations, three stroke weights (thin, regular, strong), and three color variants (gray, black, green). - Created a comprehensive showcase page for the Divider component, demonstrating its usage and variations. - Added detailed documentation for the Divider component, including props API, usage examples, and best practices. - Included styles for the Divider component in SCSS format, ensuring compatibility with light and dark themes.
131 lines
4.3 KiB
SCSS
131 lines
4.3 KiB
SCSS
// Bootstrap-derived SASS. See README.md in this folder for instructions.
|
|
|
|
@import "_colors.scss";
|
|
@import "_font-face.scss";
|
|
|
|
$navbar-padding-y: 0;
|
|
$nav-link-padding-x: 2rem;
|
|
$nav-link-padding-y: 1rem;
|
|
$navbar-brand-padding-y: 1.25rem;
|
|
$navbar-nav-link-padding-x: $nav-link-padding-x;
|
|
$navbar-nav-link-padding-y: $nav-link-padding-y;
|
|
$border-radius-lg: 8px;
|
|
$border-radius-sm: 4px;
|
|
$border-radius: $border-radius-sm;
|
|
$dropdown-border-width: 1px;
|
|
$enable-shadows: true;
|
|
$dropdown-box-shadow: 0px 5px 40px $black;
|
|
$card-spacer-x: 2rem;
|
|
$card-spacer-y: 2rem;
|
|
$spacer: 0.5rem;
|
|
// Bootstrap 5 uses separate variables for card header/footer
|
|
$card-cap-padding-y: 2rem;
|
|
$card-cap-padding-x: 2rem;
|
|
// $card-deck-margin is deprecated in Bootstrap 5 - card-deck no longer exists
|
|
// Define custom variable for backward compatibility
|
|
$card-deck-margin: 1.25rem;
|
|
$card-border-radius: $border-radius-lg;
|
|
// $card-columns-gap is deprecated in Bootstrap 5 - use grid system instead
|
|
$caret-width: 0.4em;
|
|
|
|
$input-btn-padding-y: 1rem;
|
|
$input-btn-padding-x: 1.5rem;
|
|
$input-btn-font-size: 14px;
|
|
$input-btn-line-height: 1.25;
|
|
$input-font-size: 1rem;
|
|
|
|
// @import "_font-face.scss";
|
|
$font-family-monospace: "Tobias", "Noto Serif", monospace;
|
|
$font-family-sans-serif: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
$base-size: 16px;
|
|
$line-height-base: 1.5;
|
|
|
|
@import "_breakpoints.scss";
|
|
|
|
// Bootstrap v5 - Import only what we need
|
|
// Note: Bootstrap still uses @import internally, so we use @import for Bootstrap
|
|
@import "../node_modules/bootstrap/scss/functions";
|
|
@import "../node_modules/bootstrap/scss/variables";
|
|
@import "../node_modules/bootstrap/scss/variables-dark";
|
|
@import "../node_modules/bootstrap/scss/maps";
|
|
@import "../node_modules/bootstrap/scss/mixins";
|
|
|
|
// Layout & components we actually use
|
|
@import "../node_modules/bootstrap/scss/root";
|
|
@import "../node_modules/bootstrap/scss/reboot";
|
|
@import "../node_modules/bootstrap/scss/type";
|
|
@import "../node_modules/bootstrap/scss/images";
|
|
@import "../node_modules/bootstrap/scss/containers";
|
|
@import "../node_modules/bootstrap/scss/grid";
|
|
@import "../node_modules/bootstrap/scss/tables";
|
|
@import "../node_modules/bootstrap/scss/forms";
|
|
@import "../node_modules/bootstrap/scss/buttons";
|
|
@import "../node_modules/bootstrap/scss/dropdown";
|
|
@import "../node_modules/bootstrap/scss/nav";
|
|
@import "../node_modules/bootstrap/scss/navbar";
|
|
@import "../node_modules/bootstrap/scss/card";
|
|
@import "../node_modules/bootstrap/scss/breadcrumb";
|
|
@import "../node_modules/bootstrap/scss/modal";
|
|
@import "../node_modules/bootstrap/scss/transitions";
|
|
@import "../node_modules/bootstrap/scss/helpers";
|
|
|
|
// Import utilities LAST so they have highest specificity
|
|
@import "../node_modules/bootstrap/scss/utilities";
|
|
@import "../node_modules/bootstrap/scss/utilities/api";
|
|
|
|
// Import site styles
|
|
@import "_font.scss";
|
|
@import "_forms.scss";
|
|
@import "_layout.scss";
|
|
@import "_side-nav.scss";
|
|
@import "_helpers.scss";
|
|
@import "_buttons.scss";
|
|
@import "../shared/components/Button/Button.scss";
|
|
@import "_tables.scss";
|
|
@import "_use-cases.scss";
|
|
@import "_github-edit.scss";
|
|
@import "_top-nav.scss";
|
|
@import "_top-banner.scss";
|
|
@import "_content.scss";
|
|
@import "../shared/components/PageGrid/page-grid";
|
|
@import "../shared/components/Link/_link-icons.scss";
|
|
@import "../shared/components/Link/_link.scss";
|
|
@import "../shared/components/Divider/Divider.scss";
|
|
@import "_code-tabs.scss";
|
|
@import "_code-walkthrough.scss";
|
|
@import "_diagrams.scss";
|
|
@import "_external-links.scss";
|
|
@import "_footer.scss";
|
|
@import "_callouts.scss";
|
|
@import "_cards.scss";
|
|
@import "_breadcrumbs.scss";
|
|
@import "_landings.scss";
|
|
@import "_interactive-tutorials.scss";
|
|
@import "_status-labels.scss";
|
|
@import "_dev-tools.scss";
|
|
@import "_print.scss";
|
|
@import "_pages.scss";
|
|
@import "_rpc-tool.scss";
|
|
@import "_blog.scss";
|
|
@import "_feedback.scss";
|
|
@import "_video.scss";
|
|
@import "_contribute.scss";
|
|
@import "_docs-landing.scss";
|
|
@import "_osano.scss";
|
|
|
|
// Light/Dark theme settings ---------------------------------------------------
|
|
// Option to only change theme on user system settings. No toggle.
|
|
|
|
//Mixin to conditionaly include other themes
|
|
// @import "light/_mixins.scss";
|
|
|
|
// Default to dark theme with light being alt
|
|
// $color-scheme-alt: light;
|
|
|
|
// @include prefers-color-scheme($color-scheme-alt) {
|
|
// @import "light/_light-theme.scss";
|
|
// }
|
|
|
|
html.light {
|
|
@import "light/_light-theme.scss";
|
|
} |