From 2d8da8bcb0432daeb7de9d0042690af3be84f422 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 22 Jun 2021 19:15:02 -0700 Subject: Add four new snippet examples (#33882) * Add four new snippet examples - Dropdowns - Footers - List groups - Modals * Fix HTML linter errors * more linter --- .../docs/5.0/examples/dropdowns/dropdowns.css | 89 ++++++ .../content/docs/5.0/examples/dropdowns/index.html | 339 +++++++++++++++++++++ site/content/docs/5.0/examples/footers/footers.css | 12 + site/content/docs/5.0/examples/footers/index.html | 188 ++++++++++++ .../docs/5.0/examples/list-groups/index.html | 186 +++++++++++ .../docs/5.0/examples/list-groups/list-groups.css | 61 ++++ site/content/docs/5.0/examples/modals/index.html | 173 +++++++++++ site/content/docs/5.0/examples/modals/modals.css | 34 +++ 8 files changed, 1082 insertions(+) create mode 100644 site/content/docs/5.0/examples/dropdowns/dropdowns.css create mode 100644 site/content/docs/5.0/examples/dropdowns/index.html create mode 100644 site/content/docs/5.0/examples/footers/footers.css create mode 100644 site/content/docs/5.0/examples/footers/index.html create mode 100644 site/content/docs/5.0/examples/list-groups/index.html create mode 100644 site/content/docs/5.0/examples/list-groups/list-groups.css create mode 100644 site/content/docs/5.0/examples/modals/index.html create mode 100644 site/content/docs/5.0/examples/modals/modals.css (limited to 'site/content/docs/5.0') diff --git a/site/content/docs/5.0/examples/dropdowns/dropdowns.css b/site/content/docs/5.0/examples/dropdowns/dropdowns.css new file mode 100644 index 0000000000..4341c59ea4 --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/dropdowns.css @@ -0,0 +1,89 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.dropdown-menu { + position: static; + display: block; + width: auto; + margin: 4rem auto; +} + +.dropdown-menu-macos { + display: grid; + gap: .25rem; + padding: .5rem; + border-radius: .5rem; +} +.dropdown-menu-macos .dropdown-item { + border-radius: .25rem; +} + +.dropdown-item-danger { + color: var(--bs-red); +} +.dropdown-item-danger:hover, +.dropdown-item-danger:focus { + color: #fff; + background-color: var(--bs-red); +} +.dropdown-item-danger.active { + background-color: var(--bs-red); +} + +.btn-hover-light { + text-align: left; + background-color: var(--bs-white); + border-radius: .25rem; +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-blue); + background-color: var(--bs-light); +} + +.cal-month, +.cal-days, +.cal-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + align-items: center; +} +.cal-month-name { + grid-column-start: 2; + grid-column-end: 7; + text-align: center; +} +.cal-weekday, +.cal-btn { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0; +} +.cal-btn:not([disabled]) { + font-weight: 500; +} +.cal-btn:hover, +.cal-btn:focus { + background-color: rgba(0, 0, 0, .05); +} +.cal-btn[disabled] { + opacity: .5; +} + +.form-control-dark { + background-color: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .15); +} diff --git a/site/content/docs/5.0/examples/dropdowns/index.html b/site/content/docs/5.0/examples/dropdowns/index.html new file mode 100644 index 0000000000..5296d1507e --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/index.html @@ -0,0 +1,339 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+ +
+ + + +
+ + \ No newline at end of file diff --git a/site/content/docs/5.0/examples/footers/footers.css b/site/content/docs/5.0/examples/footers/footers.css new file mode 100644 index 0000000000..4e826827ec --- /dev/null +++ b/site/content/docs/5.0/examples/footers/footers.css @@ -0,0 +1,12 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} diff --git a/site/content/docs/5.0/examples/footers/index.html b/site/content/docs/5.0/examples/footers/index.html new file mode 100644 index 0000000000..b269095742 --- /dev/null +++ b/site/content/docs/5.0/examples/footers/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Footers +extra_css: + - "footers.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ + + + © {{< year >}} Company, Inc +
+ +
    +
    • +
    • +
    • +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.0/examples/list-groups/index.html b/site/content/docs/5.0/examples/list-groups/index.html new file mode 100644 index 0000000000..c16bad944d --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + +
+ + twbs +
+
+
List group item heading
+

Some placeholder content in a paragraph.

+
+ now +
+ + + twbs +
+
+
Another title here
+

Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.

+
+ 3d +
+ + + twbs +
+
+
Third heading
+

Some placeholder content in a paragraph.

+
+ 1w +
+ +
+ +
+ +
+
+ + + +
+ +
+ + + +
+
+ +
+ +
+ + + + +
+ +
+ +
+ + + + + + + + + + + +
\ No newline at end of file diff --git a/site/content/docs/5.0/examples/list-groups/list-groups.css b/site/content/docs/5.0/examples/list-groups/list-groups.css new file mode 100644 index 0000000000..11351f87e2 --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/list-groups.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } + +.list-group { + width: auto; + max-width: 460px; + margin: 4rem auto; +} + +.form-check-input:checked + .form-checked-content { + opacity: .5; +} + +.form-check-input-placeholder { + pointer-events: none; + border-style: dashed; +} +[contenteditable]:focus { + outline: 0; +} + +.list-group-checkable { + display: grid; + gap: .5rem; + border: 0; +} +.list-group-checkable .list-group-item { + cursor: pointer; + border-radius: .5rem; +} +.list-group-item-check { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.list-group-item-check:hover + .list-group-item { + background-color: var(--bs-light); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-blue); +} +.list-group-item-check[disabled] + .list-group-item, +.list-group-item-check:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} diff --git a/site/content/docs/5.0/examples/modals/index.html b/site/content/docs/5.0/examples/modals/index.html new file mode 100644 index 0000000000..cc0feff873 --- /dev/null +++ b/site/content/docs/5.0/examples/modals/index.html @@ -0,0 +1,173 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
diff --git a/site/content/docs/5.0/examples/modals/modals.css b/site/content/docs/5.0/examples/modals/modals.css new file mode 100644 index 0000000000..8fda8212ab --- /dev/null +++ b/site/content/docs/5.0/examples/modals/modals.css @@ -0,0 +1,34 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: .75rem; } +.rounded-6 { border-radius: 1rem; } + +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + +.modal-alert .modal-dialog { + width: 380px; +} + +.border-right { border-right: 1px solid #eee; } + +.modal-tour .modal-dialog { + width: 380px; +} -- cgit v1.2.3