Skip to content

Commit

Permalink
card ribbons config move to variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@codecalm
codecalm committed Oct 18, 2022
1 parent ade3bf4 commit 5c7567b
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 65 deletions.
2 changes: 0 additions & 2 deletions src/scss/_utilities.scss
View file
@@ -1,5 +1,3 @@
$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));

$border-values: (
null: $border-width var(--#{$prefix}border-style) $border-color-translucent,
wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
Expand Down
113 changes: 57 additions & 56 deletions src/scss/_variables.scss
View file
Expand Up @@ -263,7 +263,9 @@ $gray-colors: (

$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));

//
// Dark mode
//
$dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
$dark-mode-border-color: lighten($dark, 4%) !default;
Expand Down Expand Up @@ -313,17 +315,26 @@ $avatar-font-size: $h4-font-size;
$link-decoration: none !default;
$link-hover-decoration: underline !default;

//Typography

// Typography
$hr-opacity: $border-opacity !default;
$hr-margin-y: 2rem !default;

// Caret
$caret-width: .36em !default;
$caret-spacing: .4em !default;

//Sizing
// Grid
$grid-gutter-width: 1rem !default;
$container-padding-x: 1.5rem !default;

$container-variations: (
tight: 30rem,
narrow: 45rem,
) !default;

$content-padding-y: 1.25rem !default;

// Spacers
$spacer: 1rem !default;
$spacers: (
0: 0,
Expand All @@ -336,13 +347,13 @@ $spacers: (

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

// Sizes
$size-spacers: (
auto: auto,
px: 1px,
full: 100%
) !default;


$size-values: map-merge($spacers, (
25: 25%,
33: 33.33333%,
Expand All @@ -353,14 +364,6 @@ $size-values: map-merge($spacers, (
auto: auto
)) !default;


$container-variations: (
tight: 30rem,
narrow: 45rem,
) !default;

$content-padding-y: 1.25rem !default;

// Aspect ratios
$aspect-ratios: (
"1x1": 100%,
Expand Down Expand Up @@ -395,7 +398,7 @@ $transition-time: .3s !default;
// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;

//accordion
// Accordion
$accordion-bg: transparent !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
Expand All @@ -406,7 +409,7 @@ $accordion-button-active-bg: transparent !default;
$accordion-button-active-color: inherit !default;
$accordion-button-focus-border-color: $accordion-border-color !default;

//alerts
// Alerts
$alert-padding-x: 1rem !default;
$alert-padding-y: 1rem !default;
$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
Expand All @@ -415,7 +418,7 @@ $alert-border-width: 1px !default;
$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
$alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;

//breadcrumb
// Breadcrumb
$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
$breadcrumb-active-color: inherit !default;

Expand All @@ -425,15 +428,15 @@ $breadcrumb-variants: (
bullets: "\02022",
) !default;

//badges
// Badges
$badge-font-size: $code-font-size !default;
$badge-line-height: $code-line-height !default;
$badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
$badge-padding-y: .25em !default;
$badge-padding-x: .5em !default;
$badge-empty-size: .5rem !default;

//buttons
// Buttons
$input-btn-line-height: $line-height-base !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
Expand All @@ -449,20 +452,20 @@ $input-btn-padding-y-lg: .5rem !default;

$input-btn-focus-width: .25rem !default;

// inputs
// Inputs
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-color: inherit !default;
$input-focus-color: inherit !default;

// buttons
// Buttons
$btn-padding-x: 1rem !default;
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
$btn-border-radius: var(--#{$prefix}border-radius) !default;

//cards
// Cards
$card-title-spacer-y: 1.25rem !default;
$card-box-shadow: var(--#{$prefix}shadow-card) !default;
$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
Expand All @@ -488,29 +491,33 @@ $card-group-margin: 1.5rem !default;

$card-stamp-opacity: .2 !default;

$card-ribbon-margin: .25rem !default;
$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
$card-ribbon-font-size: $h6-font-size !default;

$cards-grid-gap: 1rem !default;
$cards-grid-breakpoint: lg !default;

//carousel

// Carousel
$carousel-control-color: $white !default;
$carousel-control-icon-width: 1.5rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !default;

$carousel-indicator-thumb-opacity: .75 !default;
$carousel-indicator-thumb-width: 4rem !default;

$carousel-indicator-dot-width: .5rem !default;

//close
// Close
$btn-close-width: .75rem !default;
$btn-close-opacity: .3 !default;

//datagrid
// Datagrid
$datagrid-padding: 1.5rem !default;
$datagrid-item-width: 15rem !default;

//dropdown
// Dropdown
$dropdown-item-padding-x: .75rem !default;
$dropdown-item-padding-y: .5rem !default;
$dropdown-font-size: $font-size-base !default;
Expand All @@ -523,28 +530,26 @@ $dropdown-link-hover-color: inherit !default;
$dropdown-spacer: 1px !default;
$dropdown-min-width: 11rem !default;
$dropdown-max-width: 25rem !default;

$dropdown-scrollable-height: 13rem !default;

$dropdown-link-active-color: var(--#{$prefix}primary) !default;
$dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;

//tooltip
// Tooltip
$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
$tooltip-color: var(--#{$prefix}light) !default;

//loader
// Loader
$loader-size: 2.5rem !default;

//lists
// Lists
$list-group-header-bg: var(--#{$prefix}light) !default;
$list-group-header-color: var(--#{$prefix}muted) !default;

$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-item-padding-y: $card-cap-padding-y !default;
$list-group-item-padding-x: $card-cap-padding-x !default;

//modals
// Modals
$modal-backdrop-opacity: .24 !default;
$modal-backdrop-bg: $dark !default;
$modal-backdrop-blur: 4px !default;
Expand All @@ -571,7 +576,7 @@ $modal-lg: 720px !default;
$modal-md: 540px !default;
$modal-sm: 380px !default;

//nav
// Nav
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: .75rem !default;
$nav-link-color: var(--#{$prefix}muted) !default;
Expand All @@ -595,7 +600,7 @@ $nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;


//navbar
// Navbar
$navbar-height: 3.5rem !default;
$navbar-padding-y: .25rem !default;

Expand Down Expand Up @@ -630,20 +635,20 @@ $navbar-active-border-color: var(--#{$prefix}primary) !default;

$navbar-overlap-height: 9rem !default;

//sidebar
// Sidebar
$sidebar-width: 15rem !default;

//popover
// Popover
$popover-border-color: var(--#{$prefix}border-color) !default;

//footer
// Footer
$footer-padding-y: 2rem !default;
$footer-bg: $white !default;
$footer-border-color: var(--#{$prefix}border-color) !default;
$footer-color: var(--#{$prefix}muted) !default;


//pagination
// Pagination
$pagination-border-width: 0 !default;
$pagination-padding-y: .25rem !default;
$pagination-padding-x: .25rem !default;
Expand All @@ -655,23 +660,23 @@ $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
$pagination-active-bg: var(--#{$prefix}primary) !default;
$pagination-active-border-color: var(--#{$prefix}primary) !default;

//statuses
// Statuses
$status-dot-size: .5rem !default;
$status-height: 1.5rem !default;

//steps
// Steps
$steps-border-width: 2px !default;
$steps-color-inactive: #f3f5f5 !default;

//spinner
// Spinner
$spinner-width: 1.5rem !default;
$spinner-height: 1.5rem !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
$spinner-border-width: 2px !default;
$spinner-border-width-sm: 1px !default;

//tables
// Tables
$table-bg-scale-dark: 40% !default;
$table-color: inherit !default;
$table-cell-padding-x: .75rem !default;
Expand All @@ -690,25 +695,22 @@ $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;

//toasts
// Toasts
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-header-color: var(--#{$prefix}muted) !default;

//tracking
// Tracking
$tracking-height: 1.5rem !default;
$tracking-gap-width: .125rem !default;
$tracking-border-radius: var(--#{$prefix}border-radius) !default;

//progress
// Progress
$progress-bg: var(--#{$prefix}border-color) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-bar-bg: var(--#{$prefix}primary) !default;
$progress-height: .5rem !default;

//ribbons
$ribbon-margin: .25rem !default;


// Lists
$list-group-bg: inherit !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-action-color: inherit !default;
Expand All @@ -729,24 +731,25 @@ $input-group-addon-color: var(--#{$prefix}muted) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;


//Forms
// Forms
$form-check-margin-bottom: .5rem !default;
$form-check-input-width: 1rem !default;
$form-check-padding-start: $form-check-input-width + .5rem !default;

$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;

$form-check-input-checked-bg-size: 1rem !default;
$form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;

$form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
$form-check-input-checked-bg-repeat: repeat !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !default;

$form-check-input-checked-border-color: $input-border-color-translucent !default;

$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !default;

$form-check-label-disabled-opacity: $text-muted-opacity;

$form-select-indicator-color: $text-muted-light !default;
Expand All @@ -770,20 +773,18 @@ $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='htt
$form-label-font-size: $h4-font-size !default;
$form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;

$caret-width: .36em !default;

// Legend
$legend-bg: var(--#{$prefix}border-color) !default;
$legend-size: .75em !default;
$legend-border-radius: var(--#{$prefix}border-radius-sm) !default;

//Flags
// Flags
$flag-border-size: var(--#{$prefix}border-size) !default;
$flag-border-color: var(--#{$prefix}border-color) !default;
$flag-border-radius: var(--#{$prefix}border-radius) !default;
$flag-sizes: $avatar-sizes !default;

//Payments
// Payments
$payment-sizes: $avatar-sizes !default;

// Offcanvas
Expand Down

0 comments on commit 5c7567b

Please sign in to comment.