From 7160f7dc228fa48eec7763789ae95bf47a08e155 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Fri, 8 Nov 2019 16:59:43 +0100 Subject: [PATCH] Add bootstrap kitchensink Can be used to control the look of all elements: /_bootstrap_kitchensink.html?theme=casa --- .../wwwroot/_bootstrap_kitchensink.html | 2171 +++++++++++++++++ 1 file changed, 2171 insertions(+) create mode 100644 BTCPayServer/wwwroot/_bootstrap_kitchensink.html diff --git a/BTCPayServer/wwwroot/_bootstrap_kitchensink.html b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html new file mode 100644 index 000000000..6c2647a0a --- /dev/null +++ b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html @@ -0,0 +1,2171 @@ + + + + + + + Bootstrap 4 Kitchen Sink + + + + + + + + + + + + + +
+
+
+ + +

Headings


h1. Bootstrap heading


+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+ +



+ +

Display headings


Display 1


+

Display 2


+

Display 3


+

Display 4


+ +



+ +

Lead


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.

+ +



+ +

Inline text elements


You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ +



+ +

Abbreviations


attr

+

HTML

+ +



+ +

Blockquotes


+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+ +



+ +

Lists


    +
  • Lorem ipsum dolor sit amet
    • +
  • Consectetur adipiscing elit
    • +
  • Integer molestie lorem at massa
    • +
  • Facilisis in pretium nisl aliquet
    • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
      • +
    • Purus sodales ultricies
      • +
    • Vestibulum laoreet porttitor sem
      • +
    • Ac tristique libero volutpat at
      • +
    +
    • +
  • Faucibus porta lacus fringilla vel
    • +
  • Aenean sit amet erat nunc
    • +
  • Eget porttitor lorem
    • +
+ +
    +
  • Lorem ipsum
    • +
  • Phasellus iaculis
    • +
  • Nulla volutpat
    • +
+ +



+ +

Inline code


For example, <section> should be wrapped as inline. + +



+ +

Code blocks


<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+
+ +



+ +

Variables


y = mx + b + +



+ +

User input


To switch directories, type cd followed by the name of the directory.
+To edit settings, press ctrl + , + +



+ +

Sample output


This text is meant to be treated as sample output from a computer program. + +



+ +

Responsive images


Responsive image + +



+ +

Image thumbnails


... + +



+ +

Aligning images


... +...
+ +



+ +
...
+ +



+ +
+ ... +
+ +



+ +

Tables


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ +



+ +

Table head options


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ +



+ +

Striped rows


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ +



+ +

Bordered table


+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ +



+ +

Borderless table


+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ +



+ +

Hoverable rows


+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ +



+ +

Small table


+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ +



+ +

Contextual classes


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassHeadingHeading
ActiveCellCell
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
+ +



+ +

Alerts


+ + + + + + + + +



+ +

Alerts > Link color


+ + + + + + + + +



+ +

Badges


Primary +Secondary +Success +Danger +Warning +Info +Light +Dark + +



+ +

Badges > Pills


Primary +Secondary +Success +Danger +Warning +Info +Light +Dark + +



+ +

Badges > Links


Primary +Secondary +Success +Danger +Warning +Info +Light +Dark + +



+ +

Badges > In Elements


Example heading New


+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+ +



+ +

Badges > In Buttons


+ +



+ +

Breadcrumbs


+ + + + + +



+ +

Buttons


+ + + + + + + + + + +



+ +

Buttons > Outline


+ + + + + + + + +



+ +

Buttons > Sizes


+ + +

+ + + + +

+ + + + +



+ +

Button groups


+ + + +
+ +



+ +

Button groups > Vertical


+ + + +
+ +



+ +

Button groups > Button Toolbar


+ +



+ +

Button groups > Sizing


+ + + +
+ +

+ +
+ + + +
+ +

+ +
+ + + +
+ +



+ +

Cards


+ Card image cap + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+ +



+ +

Cards (No Image)


+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+ +



+ +

Cards > Card styles


+
Header
+
+
Primary card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Secondary card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Success card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Danger card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Warning card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Info card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Light card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Dark card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+ +



+ +

Cards > Card groups


+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+

Last updated 3 mins ago

+
+
+
+ +



+ +

Cards > Card decks


+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+ Card image cap +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+

Last updated 3 mins ago

+
+
+
+ +



+ +

Carousel


+ +



+ +

Carousel > With Controls


+ +



+ +

Collapse


+ + +

+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. +
+
+ +



+ +

Collapse > Multiple targets


+ + + +

+
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. +
+
+
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. +
+
+
+
+ +



+ +

Collapse > Accordion


+
+
+
+ +
+
+ +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+
+ +
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+
+ +
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+ +



+ +

Dropdowns


+ +
+ Action + Another action + Something else here +
+
+ +
+ +
+ + +
+ Action + Another action + Something else here +
+
+ +
+ +
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +



+ +

Forms


+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
+ +



+ +

Forms > Form controls


+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +



+ +

Forms > Sizing


+
+
+
+
+ +



+ +

Forms > Checkboxes and radios


+
+ + +
+
+ + +
+ +
+ +
+ + +
+
+ + +
+
+ + +
+
+ +



+ +

Forms > Custom Elements


+ + +
+ +
+ +
+ + +
+
+ + +
+ +
+ + + +

+ +
+ + +
+ +



+ +

Input group


+
+ @ +
+ +
+ +
+ +
+ @example.com +
+
+ + +
+
+ https://example.com/users/ +
+ +
+ +
+
+ $ +
+ +
+ .00 +
+
+ +
+
+ With textarea +
+ +
+ +



+ +

Input group > Sizing


+
+ Small +
+ +
+ +
+
+ Default +
+ +
+ +
+
+ Large +
+ +
+ +



+ +

Input group > Checkboxes and radios


+
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ +



+ +

Input group > Multiple inputs


+
+ First and last name +
+ + +
+ +



+ +

Input group > Multiple addons


+
+ $ + 0.00 +
+ +
+ +
+ +
+ $ + 0.00 +
+
+ +



+ +

Input group > Button addons


+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ + +
+ +
+ +
+ +
+ + +
+
+ +



+ +

Input group > Buttons with dropdowns


+
+ +
+ Action + Another action + Something else here + + Separated link +
+
+ +
+ +
+ +
+ +
+ Action + Another action + Something else here + + Separated link +
+
+
+ +



+ +

Jumbotron


+

Hello, world!


+

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+
+

It uses utility classes for typography and spacing to space content out within the larger container.

+ Learn more +
+ +



+ +

List group


    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+ +



+ +

List group > Active items


    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+ +



+ +

List group > Disabled items


    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+ +



+ +

List group > Links and buttons


+ Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros +
+ +



+ +

List group > Flush


    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+ +



+ +

List group > Contextual classes


    +
  • Dapibus ac facilisis in
    • +
  • A simple primary list group item
    • +
  • A simple secondary list group item
    • +
  • A simple success list group item
    • +
  • A simple danger list group item
    • +
  • A simple warning list group item
    • +
  • A simple info list group item
    • +
  • A simple light list group item
    • +
  • A simple dark list group item
    • +
+ +



+ +

List group > With badges


    +
  • + Cras justo odio + 14 +
    • +
  • + Dapibus ac facilisis in + 2 +
    • +
  • + Morbi leo risus + 1 +
    • +
+ +



+ +

List group > Custom content


+ +
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta. + + +
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta. + + +
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta. + +
+ +



+ +

Modal


+ +



+ +

Modal > Live Demo


+ + + + + +



+ +

Modal > Vertically centered


+ + + + + +



+ +

Navs


+ +



+ +

Navs > Vertical


+ +



+ +

Navs > Tabs


+ +



+ +

Navs > Pills


+ +



+ +

Navs > Fill and justify


+ +



+ +

Navbar


+ +



+ +

Navbar > Color schemes


+ +



+ +

Pagination


+ +



+ +

Pagination > Disabled and active states


+ +



+ +

Popovers


+ + +



+ +

Popovers > Four directions


+ + + + + + + +



+ +

Progress


+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +



+ +

Progress > Labels


+
25%
+
+ +



+ +

Progress > Height


+
+
+
+
+
+ +



+ +

Progress > Backgrounds


+
+
+
+
+
+
+
+
+
+
+
+ +



+ +

Progress > Multiple bars


+
+
+
+
+ +



+ +

Progress > Striped


+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +



+ +

Tooltips


+ + + + + + +



+ +

Borders


+ + + + + +
+ +



+ +

Borders > Subtractive


+ + + + + +
+ +



+ +

Borders > Border color


+ + + + + + + + + +
+ +



+ +

Borders > Border-radius


... +... +... +... +... +... +... + +



+ +

Clearfix


+ + +
+ +



+ +

Close icon


+ +
+ +



+ +

Colors


.text-primary

+

.text-secondary

+

.text-success

+

.text-danger

+

.text-warning

+

.text-info

+

.text-light

+

.text-dark

+

.text-body

+

.text-muted

+

.text-white

+

.text-black-50

+

.text-white-50

+ +



+ +

Primary link

+

Secondary link

+

Success link

+

Danger link

+

Warning link

+

Info link

+

Light link

+

Dark link

+

Muted link

+

White link

+ +



+ +

Colors > Background color


.bg-primary
+
.bg-secondary
+
.bg-success
+
.bg-danger
+
.bg-warning
+
.bg-info
+
.bg-light
+
.bg-dark
+
.bg-white
+
.bg-transparent
+ +



+ +

Display property


d-inline
+
d-inline
+ +



+ +d-block +d-block + +



+ +

Floats


+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes
+
+ +
+
Float left on viewports sized SM (small) or wider

+
Float left on viewports sized MD (medium) or wider

+
Float left on viewports sized LG (large) or wider

+
Float left on viewports sized XL (extra-large) or wider

+
+ +



+ +

Shadows


No shadow
+
Small shadow
+
Regular shadow
+
Larger shadow
+ +



+ +

Sizing


Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+
Width auto
+ +



+ +
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
+
Height auto
+
+ +



+ +

Spacing Notation


+ +

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

+

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

+

Where property is one of:

+
    +
  • m - for classes that set margin
    • +
  • p - for classes that set padding
    • +
+

Where sides is one of:

+
    +
  • t - for classes that set margin-top or padding-top
    • +
  • b - for classes that set margin-bottom or padding-bottom
    • +
  • l - for classes that set margin-left or padding-left
    • +
  • r - for classes that set margin-right or padding-right
    • +
  • x - for classes that set both *-left and *-right
    • +
  • y - for classes that set both *-top and *-bottom
    • +
  • blank - for classes that set a margin or padding on all 4 sides of the element
    • +
+

Where size is one of:

+
    +
  • 0 - for classes that eliminate the margin or padding by setting it to 0
    • +
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
    • +
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
    • +
  • 3 - (by default) for classes that set the margin or padding to $spacer
    • +
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
    • +
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
    • +
  • auto - for classes that set the margin to auto
    • +

Text alignment


Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

+ +



+ +

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

+ +

Left aligned text on viewports sized SM (small) or wider.

+

Left aligned text on viewports sized MD (medium) or wider.

+

Left aligned text on viewports sized LG (large) or wider.

+

Left aligned text on viewports sized XL (extra-large) or wider.

+ +



+ +

Text wrapping and overflow


+
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+ + + + Praeterea iter est quasdam res quas ex communi. + + +



+ +

Text transform


Lowercased text.

+

Uppercased text.

+

CapiTaliZed text.

+ +



+ +

Font weight and italics


Bold text.

+

Normal weight text.

+

Light weight text.

+

Italic text.

+ +



+ +

Vertical alignment


baseline +top +middle +bottom +text-top +text-bottom + +



+ + + + + + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
+ +



+ + + +
+ + +
+
+
+ +