jekyll-theme-zer0 1.19.1 → 1.20.2

data/_sass/core/_docs-code-examples.scss

@@ -0,0 +1,463 @@
+// ============================================================================
+// Docs code-example chrome — Bootstrap-docs-style example/snippet blocks
+// ----------------------------------------------------------------------------
+// Split out of core/_docs-layout.scss (was lines 762-1214). Styles the
+// `.bd-code-snippet`, `.bd-example*`, `.bd-clipboard`/`.bd-edit`, and
+// `.bd-placeholder-img*` blocks used by _includes/docs/bootstrap-docs.html and
+// assets/js/docs.min.js. Imported immediately after core/docs-layout in
+// assets/css/main.scss so cascade order is unchanged.
+// ============================================================================
+
+.bd-code-snippet {
+    margin: 0 -1.5rem 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0
+}
+
+@media (min-width: 768px) {
+    .bd-code-snippet {
+        margin-right:0;
+        margin-left: 0;
+        border-width: 1px;
+        border-radius: var(--bs-border-radius)
+    }
+}
+
+.bd-example {
+    --bd-example-padding: 1rem;
+    position: relative;
+    padding: var(--bd-example-padding);
+    margin: 0 -1.5rem 1rem;
+    border: solid var(--bs-border-color);
+    border-width: 1px 0
+}
+
+.bd-example::after {
+    display: block;
+    clear: both;
+    content: null
+}
+
+@media (min-width: 768px) {
+    .bd-example {
+        --bd-example-padding: 1.5rem;
+        margin-right: 0;
+        margin-left: 0;
+        border-width: 1px;
+        border-radius: var(--bs-border-radius)
+    }
+}
+
+.bd-example+p {
+    margin-top: 2rem
+}
+
+.bd-example>.form-control+.form-control {
+    margin-top: .5rem
+}
+
+.bd-example>.nav+.nav,.bd-example>.alert+.alert,.bd-example>.navbar+.navbar,.bd-example>.progress+.progress {
+    margin-top: 1rem
+}
+
+.bd-example>.dropdown-menu {
+    position: static;
+    display: block
+}
+
+.bd-example>:last-child,.bd-example>nav:last-child .breadcrumb {
+    margin-bottom: 0
+}
+
+.bd-example>hr:last-child {
+    margin-bottom: 1rem
+}
+
+.bd-example>svg+svg,.bd-example>img+img {
+    margin-left: .5rem
+}
+
+.bd-example>.btn,.bd-example>.btn-group {
+    margin: .25rem .125rem
+}
+
+.bd-example>.btn-toolbar+.btn-toolbar {
+    margin-top: .5rem
+}
+
+.bd-example>.list-group {
+    max-width: 400px
+}
+
+.bd-example>[class*="list-group-horizontal"] {
+    max-width: 100%
+}
+
+.bd-example .fixed-top,.bd-example .sticky-top {
+    position: static;
+    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding)
+}
+
+.bd-example .fixed-bottom,.bd-example .sticky-bottom {
+    position: static;
+    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1)
+}
+
+.bd-example .pagination {
+    margin-bottom: 0
+}
+
+.bd-example-row [class^="col"],.bd-example-cols [class^="col"]>*,.bd-example-cssgrid [class*="grid"]>* {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(var(--bd-violet-rgb), 0.15);
+    border: 1px solid rgba(var(--bd-violet-rgb), 0.3)
+}
+
+.bd-example-row .row+.row,.bd-example-cssgrid .grid+.grid {
+    margin-top: 1rem
+}
+
+.bd-example-row-flex-cols .row {
+    min-height: 10rem;
+    background-color: rgba(var(--bd-violet-rgb), 0.15)
+}
+
+.bd-example-flex div:not(.vr) {
+    background-color: rgba(var(--bd-violet-rgb), 0.15);
+    border: 1px solid rgba(var(--bd-violet-rgb), 0.3)
+}
+
+.example-container {
+    width: 800px;
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    width: 100%;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    margin-right: auto;
+    margin-left: auto
+}
+
+.example-row {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-.5 * var(--bs-gutter-x));
+    margin-left: calc(-.5 * var(--bs-gutter-x))
+}
+
+.example-content-main {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    margin-top: var(--bs-gutter-y)
+}
+
+@media (min-width: 576px) {
+    .example-content-main {
+        flex:0 0 auto;
+        width: 50%
+    }
+}
+
+@media (min-width: 992px) {
+    .example-content-main {
+        flex:0 0 auto;
+        width: 66.666667%
+    }
+}
+
+.example-content-secondary {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    margin-top: var(--bs-gutter-y)
+}
+
+@media (min-width: 576px) {
+    .example-content-secondary {
+        flex:0 0 auto;
+        width: 50%
+    }
+}
+
+@media (min-width: 992px) {
+    .example-content-secondary {
+        flex:0 0 auto;
+        width: 33.333333%
+    }
+}
+
+.bd-example-ratios .ratio {
+    display: inline-block;
+    width: 10rem;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color)
+}
+
+.bd-example-ratios .ratio>div {
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.bd-example-ratios-breakpoint .ratio-4x3 {
+    width: 16rem
+}
+
+@media (min-width: 768px) {
+    .bd-example-ratios-breakpoint .ratio-4x3 {
+        --bs-aspect-ratio: 50%
+    }
+}
+
+.bd-example-offcanvas .offcanvas {
+    position: static;
+    display: block;
+    height: 200px;
+    visibility: visible;
+    transform: translate(0)
+}
+
+.tooltip-demo a {
+    white-space: nowrap
+}
+
+.tooltip-demo .btn {
+    margin: .25rem .125rem
+}
+
+.custom-tooltip {
+    --bs-tooltip-bg: var(--bd-violet-bg);
+    --bs-tooltip-color: var(--bs-white)
+}
+
+.custom-popover {
+    --bs-popover-max-width: 200px;
+    --bs-popover-border-color: var(--bd-violet-bg);
+    --bs-popover-header-bg: var(--bd-violet-bg);
+    --bs-popover-header-color: var(--bs-white);
+    --bs-popover-body-padding-x: 1rem;
+    --bs-popover-body-padding-y: .5rem
+}
+
+.scrollspy-example {
+    height: 200px;
+    margin-top: .5rem;
+    overflow: auto
+}
+
+.scrollspy-example-2 {
+    height: 350px;
+    overflow: auto
+}
+
+.simple-list-example-scrollspy .active {
+    background-color: rgba(var(--bd-violet-rgb), 0.15)
+}
+
+.bd-example-border-utils [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: var(--bs-tertiary-bg)
+}
+
+.bd-example-rounded-utils [class*="rounded"] {
+    margin: .25rem
+}
+
+.bd-example-position-utils {
+    position: relative;
+    padding: 2rem
+}
+
+.bd-example-position-utils .position-relative {
+    height: 200px;
+    background-color: var(--bs-tertiary-bg)
+}
+
+.bd-example-position-utils .position-absolute {
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--bs-body-color);
+    border-radius: .375rem
+}
+
+.bd-example-position-examples::after {
+    content: none
+}
+
+.bd-example-placeholder-cards::after {
+    display: none
+}
+
+.bd-example-placeholder-cards .card {
+    width: 18rem
+}
+
+.bd-example-toasts {
+    min-height: 240px
+}
+
+.bd-example-zindex-levels {
+    min-height: 15rem
+}
+
+.bd-example-zindex-levels>div {
+    color: var(--bs-body-bg);
+    background-color: var(--bd-violet);
+    border: 1px solid var(--bd-purple)
+}
+
+.bd-example-zindex-levels>div>span {
+    position: absolute;
+    right: 5px;
+    bottom: 0
+}
+
+.bd-example-zindex-levels>:nth-child(2) {
+    top: 3rem;
+    left: 3rem
+}
+
+.bd-example-zindex-levels>:nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem
+}
+
+.bd-example-zindex-levels>:nth-child(4) {
+    top: 6rem;
+    left: 6rem
+}
+
+.bd-example-zindex-levels>:nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem
+}
+
+// Wrapper only — pre.highlight carries its own padding when no wrapper exists.
+// Rouge blocks (.highlighter-rouge) are styled in core/code-copy.scss.
+.highlight:not(pre):not(.highlighter-rouge > .highlight) {
+    position: relative;
+    padding: var(--zer0-space-2) var(--zer0-space-3);
+    background-color: var(--bd-pre-bg)
+}
+
+@media (min-width: 768px) {
+    .highlight:not(pre):not(.highlighter-rouge > .highlight) {
+        border-radius: calc(var(--bs-border-radius) - 1px)
+    }
+}
+
+.highlight pre {
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    white-space: pre;
+    background-color: transparent;
+    border: 0
+}
+
+.highlight pre code {
+    font-size: inherit;
+    // color: var(--bs-body-color);
+    word-wrap: normal
+}
+
+.bd-example-snippet .highlight pre {
+    margin-right: 0
+}
+
+.highlight-toolbar {
+    background-color: var(--bd-pre-bg)
+}
+
+.highlight-toolbar+.highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+@media (min-width: 768px) {
+    .bd-file-ref .highlight-toolbar {
+        border-top-left-radius:calc(var(--bs-border-radius) - 1px);
+        border-top-right-radius: calc(var(--bs-border-radius) - 1px)
+    }
+}
+
+.bd-content .bd-code-snippet {
+    margin-bottom: 1rem
+}
+
+.bd-clipboard,.bd-edit {
+    position: relative;
+    display: none;
+    float: right
+}
+
+.bd-clipboard+.highlight,.bd-edit+.highlight {
+    margin-top: 0
+}
+
+@media (min-width: 768px) {
+    .bd-clipboard,.bd-edit {
+        display:block
+    }
+}
+
+.btn-clipboard,.btn-edit {
+    display: block;
+    padding: .5em;
+    line-height: 1;
+    color: var(--bs-body-color);
+    background-color: var(--bd-pre-bg);
+    border: 0;
+    border-radius: .25rem
+}
+
+.btn-clipboard:hover,.btn-edit:hover {
+    color: var(--bs-link-hover-color)
+}
+
+.btn-clipboard:focus,.btn-edit:focus {
+    z-index: 3
+}
+
+.btn-clipboard {
+    position: relative;
+    z-index: 2;
+    margin-top: 1.25rem;
+    margin-right: .75rem
+}
+
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    text-anchor: middle
+}
+
+.bd-placeholder-img-lg {
+    font-size: calc(1.475rem + 2.7vw)
+}
+
+@media (min-width: 1200px) {
+    .bd-placeholder-img-lg {
+        font-size:3.5rem
+    }
+}
+
+main a,main button,main input,main select,main textarea,main h2,main h3,main h4,main [tabindex="0"] {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px
+}