primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 04:21:12 +03:00
Code Issues Projects Releases Wiki Activity

Update popover docs

Browse Source
This commit is contained in:
simurai 2021-03-16 18:01:04 +09:00
parent b3adc47c59
commit 70036e1806
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/content/components/popover.md
View File

@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
<div class="position-relative text-center">
<button class="btn btn-primary">UI</button>
<div class="Popover right-0 left-0 position-relative">
<div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
<div class="Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
<div class="position-relative text-center">
<button class="btn btn-primary">UI</button>
<div class="Popover right-0 left-0 position-relative">
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -80,7 +80,7 @@ Defaults to caret oriented top-center.
```html live title="Bottom"
<div class="position-relative text-center">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -95,7 +95,7 @@ Defaults to caret oriented top-center.
```html live title="Bottom-right"
<div class="position-relative text-right pr-2">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -109,7 +109,7 @@ Defaults to caret oriented top-center.
```html live title="Bottom-left"
<div class="Popover position-relative pl-2">
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -124,7 +124,7 @@ Defaults to caret oriented top-center.
<div class="d-flex flex-justify-center flex-items-center">
<button class="btn btn-primary">UI</button>
<div class="Popover position-relative">
<div class="Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large">
<div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -139,7 +139,7 @@ Defaults to caret oriented top-center.
<div class="d-flex flex-justify-center flex-items-end">
<button class="btn btn-primary">UI</button>
<div class="Popover position-relative">
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large">
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -154,7 +154,7 @@ Defaults to caret oriented top-center.
<div class="d-flex flex-justify-center flex-items-start">
<button class="btn btn-primary">UI</button>
<div class="Popover position-relative">
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large">
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -168,7 +168,7 @@ Defaults to caret oriented top-center.
```html live title="Right"
<div class="d-flex flex-justify-center flex-items-center">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
<div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -183,7 +183,7 @@ Defaults to caret oriented top-center.
```html live title="Right-bottom"
<div class="d-flex flex-justify-center flex-items-end">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -198,7 +198,7 @@ Defaults to caret oriented top-center.
```html live title="Right-top"
<div class="d-flex flex-justify-center flex-items-start">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -214,7 +214,7 @@ Defaults to caret oriented top-center.
<div class="position-relative pl-2">
<button class="btn btn-primary">UI</button>
<div class="Popover position-relative">
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
@ -229,7 +229,7 @@ Defaults to caret oriented top-center.
<div class="position-relative text-right pr-2">
<button class="btn btn-primary">UI</button>
<div class="Popover right-0 position-relative">
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large">
<h4 class="mb-2">Popover heading</h4>
<p>Message about this particular piece of UI.</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>