mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
44614dba9d
Updated button styles to enhance responsiveness across devices by replacing fixed breakpoints with a mixin for the xl breakpoint. Adjusted typography and padding for smaller screens to ensure consistent appearance and usability. Improved comments for clarity on the import order and design tokens.
128 lines
4.2 KiB
SCSS
128 lines
4.2 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 "_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";
|
|
} |