j1-template 2023.2.7 → 2023.3.0

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spacing.asciidoc

@@ -0,0 +1,14 @@
+[source, sass]
+----
+$spacer: 1rem !default;
+
+// spacer-variables maps
+$spacers: (
+  0:                                    0,
+  1:                                    $spacer * .25,
+  2:                                    $spacer * .5,
+  3:                                    $spacer,
+  4:                                    $spacer * 1.5,
+  5:                                    $spacer * 3,
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/spinners.asciidoc

@@ -0,0 +1,12 @@
+[source, sass]
+----
+$spinner-width:                         2rem !default;
+$spinner-height:                        $spinner-width !default;
+$spinner-vertical-align:                -.125em !default;
+$spinner-border-width:                  .25em !default;
+$spinner-animation-speed:               .75s !default;
+
+$spinner-width-sm:                      1rem !default;
+$spinner-height-sm:                     $spinner-width-sm !default;
+$spinner-border-width-sm:               .2em !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tables.asciidoc

@@ -0,0 +1,55 @@
+[source, sass]
+----
+// table variables
+//
+$table-cell-padding-y:                  .5rem !default;
+$table-cell-padding-x:                  .5rem !default;
+$table-cell-padding-y-sm:               .25rem !default;
+$table-cell-padding-x-sm:               .25rem !default;
+
+$table-cell-vertical-align:             top !default;
+
+$table-color:                           var(--#{$prefix}body-color) !default;
+$table-bg:                              var(--#{$prefix}body-bg) !default;
+$table-accent-bg:                       transparent !default;
+
+$table-th-font-weight:                  null !default;
+
+$table-striped-color:                   $table-color !default;
+$table-striped-bg-factor:               .05 !default;
+$table-striped-bg:                      rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color:                    $table-color !default;
+$table-active-bg-factor:                .1 !default;
+$table-active-bg:                       rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color:                     $table-color !default;
+$table-hover-bg-factor:                 .075 !default;
+$table-hover-bg:                        rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor:                   .1 !default;
+$table-border-width:                    var(--#{$prefix}border-width) !default;
+$table-border-color:                    var(--#{$prefix}border-color) !default;
+
+$table-striped-order:                   odd !default;
+$table-striped-columns-order:           even !default;
+
+$table-group-separator-color:           currentcolor !default;
+
+$table-caption-color:                   var(--#{$prefix}secondary-color) !default;
+
+$table-bg-scale:                        -80% !default;
+
+// table variants
+//
+$table-variants: (
+  "primary":                            shift-color($primary, $table-bg-scale),
+  "secondary":                          shift-color($secondary, $table-bg-scale),
+  "success":                            shift-color($success, $table-bg-scale),
+  "info":                               shift-color($info, $table-bg-scale),
+  "warning":                            shift-color($warning, $table-bg-scale),
+  "danger":                             shift-color($danger, $table-bg-scale),
+  "light":                              $light,
+  "dark":                               $dark,
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/thumbnails.asciidoc

@@ -0,0 +1,9 @@
+[source, sass]
+----
+$thumbnail-padding:                     .25rem !default;
+$thumbnail-bg:                          var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width:                var(--#{$prefix}border-width) !default;
+$thumbnail-border-color:                var(--#{$prefix}border-color) !default;
+$thumbnail-border-radius:               var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow:                  var(--#{$prefix}box-shadow-sm) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/toasts.asciidoc

@@ -0,0 +1,18 @@
+[source, sass]
+----
+$toast-max-width:                       350px !default;
+$toast-padding-x:                       .75rem !default;
+$toast-padding-y:                       .5rem !default;
+$toast-font-size:                       .875rem !default;
+$toast-color:                           null !default;
+$toast-background-color:                rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width:                    var(--#{$prefix}border-width) !default;
+$toast-border-color:                    var(--#{$prefix}border-color-translucent) !default;
+$toast-border-radius:                   var(--#{$prefix}border-radius) !default;
+$toast-box-shadow:                      var(--#{$prefix}box-shadow) !default;
+$toast-spacing:                         $container-padding-x !default;
+
+$toast-header-color:                    var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color:         rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color:             $toast-border-color !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/tooltips.asciidoc

@@ -0,0 +1,28 @@
+[source, sass]
+----
+// tooltip variables
+//
+$tooltip-font-size:                     $font-size-sm !default;
+$tooltip-max-width:                     200px !default;
+$tooltip-color:                         var(--#{$prefix}body-bg) !default;
+$tooltip-bg:                            var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius:                 var(--#{$prefix}border-radius) !default;
+$tooltip-opacity:                       .9 !default;
+$tooltip-padding-y:                     $spacer * .25 !default;
+$tooltip-padding-x:                     $spacer * .5 !default;
+$tooltip-margin:                        null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width:                   .8rem !default;
+$tooltip-arrow-height:                  .4rem !default;
+
+$tooltip-arrow-color:                   null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+
+// tooltip-feedback variables
+//
+$form-feedback-tooltip-padding-y:       $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:       $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:       $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:     null !default;
+$form-feedback-tooltip-opacity:         $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius:   $tooltip-border-radius !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/typography.asciidoc

@@ -0,0 +1,115 @@
+[source, sass]
+----
+// font variables
+//
+
+$font-family-sans-serif:                system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace:                 SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+
+$font-family-base:                      var(--#{$prefix}font-sans-serif) !default;
+$font-family-code:                      var(--#{$prefix}font-monospace) !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root:                        null !default;
+$font-size-base:                        1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm:                          $font-size-base * .875 !default;
+$font-size-lg:                          $font-size-base * 1.25 !default;
+
+$font-weight-lighter:                   lighter !default;
+$font-weight-light:                     300 !default;
+$font-weight-normal:                    400 !default;
+$font-weight-medium:                    500 !default;
+$font-weight-semibold:                  600 !default;
+$font-weight-bold:                      700 !default;
+$font-weight-bolder:                    bolder !default;
+
+$font-weight-base:                      $font-weight-normal !default;
+
+$line-height-base:                      1.5 !default;
+$line-height-sm:                        1.25 !default;
+$line-height-lg:                        2 !default;
+
+$h1-font-size:                          $font-size-base * 2.5 !default;
+$h2-font-size:                          $font-size-base * 2 !default;
+$h3-font-size:                          $font-size-base * 1.75 !default;
+$h4-font-size:                          $font-size-base * 1.5 !default;
+$h5-font-size:                          $font-size-base * 1.25 !default;
+$h6-font-size:                          $font-size-base !default;
+
+// font-sizes
+//
+$font-sizes: (
+  1:                                    $h1-font-size,
+  2:                                    $h2-font-size,
+  3:                                    $h3-font-size,
+  4:                                    $h4-font-size,
+  5:                                    $h5-font-size,
+  6:                                    $h6-font-size
+) !default;
+
+// headings variables
+//
+$headings-margin-bottom:                $spacer * .5 !default;
+$headings-font-family:                  null !default;
+$headings-font-style:                   null !default;
+$headings-font-weight:                  500 !default;
+$headings-line-height:                  1.2 !default;
+$headings-color:                        inherit !default;
+
+
+// display-headings
+//
+$display-font-sizes: (
+  1:                                    5rem,
+  2:                                    4.5rem,
+  3:                                    4rem,
+  4:                                    3.5rem,
+  5:                                    3rem,
+  6:                                    2.5rem
+) !default;
+
+$display-font-family:                   null !default;
+$display-font-style:                    null !default;
+$display-font-weight:                   300 !default;
+$display-line-height:                   $headings-line-height !default;
+
+// type variables
+//
+$lead-font-size:                        $font-size-base * 1.25 !default;
+$lead-font-weight:                      300 !default;
+
+$small-font-size:                       .875em !default;
+
+$sub-sup-font-size:                     .75em !default;
+
+$text-muted:                            var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+
+$initialism-font-size:                  $small-font-size !default;
+
+$blockquote-margin-y:                   $spacer !default;
+$blockquote-font-size:                  $font-size-base * 1.25 !default;
+$blockquote-footer-color:               $gray-600 !default;
+$blockquote-footer-font-size:           $small-font-size !default;
+
+$hr-margin-y:                           $spacer !default;
+$hr-color:                              inherit !default;
+
+$hr-bg-color:                           null !default; // Deprecated in v5.2.0
+$hr-height:                             null !default; // Deprecated in v5.2.0
+
+$hr-border-color:                       null !default; // Allows for inherited colors
+$hr-border-width:                       var(--#{$prefix}border-width) !default;
+$hr-opacity:                            .25 !default;
+
+$legend-margin-bottom:                  .5rem !default;
+$legend-font-size:                      1.5rem !default;
+$legend-font-weight:                    null !default;
+
+$dt-font-weight:                        $font-weight-bold !default;
+
+$list-inline-padding:                   .5rem !default;
+
+$mark-padding:                          .1875em !default;
+$mark-bg:                               $yellow-100 !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/z_index.asciidoc

@@ -0,0 +1,26 @@
+[source, sass]
+----
+// zindex variables
+//
+$zindex-dropdown:                       1000 !default;
+$zindex-sticky:                         1020 !default;
+$zindex-fixed:                          1030 !default;
+$zindex-offcanvas-backdrop:             1040 !default;
+$zindex-offcanvas:                      1045 !default;
+$zindex-modal-backdrop:                 1050 !default;
+$zindex-modal:                          1055 !default;
+$zindex-popover:                        1070 !default;
+$zindex-tooltip:                        1080 !default;
+$zindex-toast:                          1090 !default;
+
+
+// zindex levels
+//
+$zindex-levels: (
+  n1:                                   -1,
+  0:                                    0,
+  1:                                    1,
+  2:                                    2,
+  3:                                    3
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/_table.asciidoc

@@ -0,0 +1,9 @@
+.XXX Variables
+[cols="4a,8", width="100%", options="header", role="rtable mt-4"]
+|===
+|Variable |Default
+
+|
+|
+
+|===

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/tables/accordion.asciidoc

@@ -0,0 +1,87 @@
+.Accordion Variables
+[cols="4,8", width="100%", options="header", role="rtable mt-4"]
+|===
+|Variable |Default
+
+|`$accordion-padding-y`
+|1rem !default
+
+|`$accordion-padding-x`
+|1.25rem !default
+
+|`$accordion-color`
+|var(--#{$prefix}body-color) !default
+
+|`$accordion-bg`
+|var(--#{$prefix}body-bg) !default
+
+|`$accordion-border-width`
+|var(--#{$prefix}border-width) !default
+
+|`$accordion-border-color`
+|var(--#{$prefix}border-color) !default
+
+|`$accordion-border-radius`
+|var(--#{$prefix}border-radius) !default
+
+|`$accordion-inner-border-radius`
+|subtract($accordion-border-radius, $accordion-border-width) !default
+
+|`$accordion-body-padding-y`
+|$accordion-padding-y !default
+
+|`$accordion-body-padding-x`
+|$accordion-padding-x !default
+
+|`$accordion-button-padding-y`
+|$accordion-padding-y !default
+
+|`$accordion-button-padding-x`
+|$accordion-padding-x !default
+
+|`$accordion-button-color`
+|var(--#{$prefix}body-color) !default
+
+|`$accordion-button-bg`
+|var(--#{$prefix}accordion-bg) !default
+
+|`$accordion-transition`
+|$btn-transition, border-radius .15s ease !default
+
+|`$accordion-button-active-bg`
+|var(--#{$prefix}primary-bg-subtle) !default
+
+|`$accordion-button-active-bg`
+|var(--#{$prefix}primary-bg-subtle) !default
+
+|`$accordion-button-active-color`
+|var(--#{$prefix}primary-text-emphasis) !default
+
+|`$accordion-button-focus-border-color`
+|$input-focus-border-color !default
+
+|`$accordion-button-focus-box-shadow`
+|$btn-focus-box-shadow !default
+
+|`$accordion-icon-width`
+|1.25rem !default
+
+|`$accordion-icon-color`
+|$body-color !default
+
+|`$accordion-icon-active-color`
+|$primary-text-emphasis !default
+
+|`$accordion-icon-transition`
+|transform .2s ease-in-out !default
+
+|`$accordion-icon-transform`
+|rotate(-180deg) !default
+
+|`$accordion-button-icon`
+|url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default
+
+|`$accordion-button-active-icon`
+|url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default
+
+|===

data/lib/starter_web/pages/public/learn/bs_sass_variables/bs_sass_variables.adoc

@@ -0,0 +1,262 @@
+---
+title:                                  BS Sass Variables
+tagline:                                Fine-tune a CSS Build
+date:                                   2023-06-13 00:00:00 +100
+description: >
+                                        The Sass files in Bootstrap provide a modular and flexible approach to
+                                        customizing the framework. They allow to override default variables,
+                                        extend the existing styles to tailor Bootstrap's appearance and
+                                        behavior to your needs.
+
+keywords:                               Jekyll, Theme, JekyllOne, Turorial, Bootstrap, SASS, Variables
+
+categories:                             [ Tutorial ]
+tags:                                   [ Bootstrap, SASS ]
+
+image:
+  path:                                 /assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Mohammad Rahmani
+
+fab_menu_id:                            open_toc
+regenerate:                             true
+permalink:                              /pages/public/learn/bs_sass_variables/
+
+resources:                              [ animate, clipboard, lightbox, rouge]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg
+          alt:                          Photo by Mohammad Rahmani
+          badge:
+            type:                       unsplash
+            author:                     Mohammad Rahmani
+            href:                       https://unsplash.com/de/@afgprogrammer
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Sass (Syntactically Awesome Style Sheets) is a *CSS preprocessor* that extends
+the capabilities of CSS. It allows to write more organized and maintainable
+stylesheets by introducing variables, mixins, nesting, and other powerful
+features.
+
+The Sass files in Bootstrap provide a modular and flexible approach to
+customizing the framework. They allow to override default variables, and
+extend the existing styles to tailor Bootstrap's appearance and behavior
+to your needs.
+
+== Variables
+
+When using Bootstrap with Sass, you can access a set of Sass variables that
+allow you to customize various aspects of the framework. These variables are
+defined in Bootstrap's _variables. scss file, which you can modify to suit
+your project's needs.
+
+Bootstrap allows you to leverage most of the element, like the *accordions*,
+*buttons* or *cards*, making it easier to manage and maintain your stylesheets
+Additionally, Sass allows you to organize your CSS code more effectively and
+reuse styles across your project.
+
+=== Accordion
+
+mdi:bootstrap[18px, mdi-md-deep-purple-400]
+https://getbootstrap.com/docs/5.3/components/accordion/[Bootstrap Docs {char-middot} Accordion, {browser-window--new}]
+
+Build vertically collapsing elements in combination with the BS Collapse
+*JavaScript plugin.*
+
+// include::{tabledir}/accordion.asciidoc[]
+include::{documentdir}/accordion.asciidoc[]
+
+=== Alerts
+
+include::{documentdir}/alerts.asciidoc[]
+
+=== Badges
+
+include::{documentdir}/badges.asciidoc[]
+
+=== Body
+
+include::{documentdir}/body.asciidoc[]
+
+=== Breadcrumbs
+
+include::{documentdir}/breadcrumbs.asciidoc[]
+
+=== Buttons
+
+include::{documentdir}/buttons.asciidoc[]
+
+=== Cards
+
+include::{documentdir}/cards.asciidoc[]
+
+=== Carousel
+
+include::{documentdir}/carousel.asciidoc[]
+
+=== Close
+
+include::{documentdir}/close.asciidoc[]
+
+=== Code
+
+include::{documentdir}/code.asciidoc[]
+
+=== Color System
+
+include::{documentdir}/color_system.asciidoc[]
+
+=== Components
+
+Define common padding and border radius sizes and more.
+
+include::{documentdir}/components.asciidoc[]
+
+=== Dropdowns
+
+Dropdown menu container and contents.
+
+include::{documentdir}/dropdowns.asciidoc[]
+
+=== Figures
+
+include::{documentdir}/figures.asciidoc[]
+
+=== Forms
+
+include::{documentdir}/forms.asciidoc[]
+
+=== Gradient
+
+[source, sass, role="noclip"]
+----
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+----
+
+=== Grid
+
+include::{documentdir}/grid.asciidoc[]
+
+=== Links
+
+include::{documentdir}/links.asciidoc[]
+
+=== List Groups
+
+include::{documentdir}/list_groups.asciidoc[]
+
+=== Modals
+
+include::{documentdir}/modals.asciidoc[]
+
+=== Navbar
+
+include::{documentdir}/navbar.asciidoc[]
+
+=== Navs
+
+include::{documentdir}/navs.asciidoc[]
+
+=== Offcanvas
+
+include::{documentdir}/offcanvas.asciidoc[]
+
+=== Options
+
+include::{documentdir}/options.asciidoc[]
+
+=== Pagination
+
+include::{documentdir}/pagination.asciidoc[]
+
+=== Paragraph
+
+include::{documentdir}/pagination.asciidoc[]
+
+=== Placeholders
+
+include::{documentdir}/paragraph.asciidoc[]
+
+=== Popovers
+
+include::{documentdir}/popovers.asciidoc[]
+
+=== Position
+
+Define the edge positioning anchors of the position utilities.
+
+include::{documentdir}/position.asciidoc[]
+
+=== Progress Bars
+
+include::{documentdir}/progress_bars.asciidoc[]
+
+=== Spacing
+
+Control the default styling of most Bootstrap elements by modifying these
+variables. Mostly focused on spacing. You can add more entries to the `$spacers`
+map, should you need more variation.
+
+include::{documentdir}/spacing.asciidoc[]
+
+=== Spinners
+
+include::{documentdir}/spinners.asciidoc[]
+
+=== Tables
+
+Customizes the `.table` component with basic values, each used across
+all table variations.
+
+include::{documentdir}/tables.asciidoc[]
+
+=== Thumbnails
+
+include::{documentdir}/thumbnails.asciidoc[]
+
+=== Toasts
+
+include::{documentdir}/toasts.asciidoc[]
+
+=== Tooltips
+
+include::{documentdir}/tooltips.asciidoc[]
+
+=== Typography
+
+Font, line-height, and color for body text, headings, and more.
+
+include::{documentdir}/typography.asciidoc[]
+
+=== Z-Index
+
+WARNING: Avoid customizing these values. They're used for a bird's eye view
+of components dependent on the z-axis and are designed to all work together.
+
+include::{documentdir}/z_index.asciidoc[]