primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Refactored to include .Popover-message

Browse Source
This commit is contained in:
Brandon Rosage 2017-10-27 14:15:01 -05:00
parent 17d1a9f526
commit 450030991e
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modules/primer-popover/README.md
View File

@ -45,8 +45,8 @@ status: Experimental
```html title="Center-aligned"
<div class="position-relative text-center">
<button class="btn btn-primary">UI</button>
<div class="position-absolute right-0 left-0 text-left">
<div class="Popover p-4 mt-2 mx-auto Box box-shadow-large">
<div class="Popover">
<div class="Popover-message text-left p-4 mt-2 Box box-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>
@ -60,8 +60,8 @@ status: Experimental
```html title="Right-aligned"
<div class="position-relative text-right">
<button class="btn btn-primary">UI</button>
<div class="position-absolute right-0 left-0 text-left">
<div class="Popover Popover--right p-4 mt-2 Box box-shadow-large">
<div class="Popover">
<div class="Popover-message Popover-message--right text-left p-4 mt-2 Box box-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>
@ -75,8 +75,8 @@ status: Experimental
```html title="Left-aligned"
<div class="position-relative">
<button class="btn btn-primary">UI</button>
<div class="position-absolute right-0 left-0 text-left">
<div class="Popover Popover--left p-4 mt-2 Box box-shadow-large">
<div class="Popover">
<div class="Popover-message Popover-message--left text-left p-4 mt-2 Box box-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>
@ -90,8 +90,8 @@ status: Experimental
```html title="Large"
<div class="position-relative text-center">
<button class="btn btn-primary">UI</button>
<div class="position-absolute right-0 left-0 text-left">
<div class="Popover Popover--lg p-4 mt-2 mx-auto Box box-shadow-large">
<div class="Popover">
<div class="Popover-message Popover-message--lg text-left p-4 mt-2 Box box-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>

14
modules/primer-popover/lib/popover.scss
View File

@ -1,6 +1,12 @@
.Popover {
position: absolute;
right: 0;
left: 0;
z-index: 100;
}
.Popover-message {
position: relative;
z-index: 20;
max-width: 235px;
margin-right: auto;
margin-left: auto;
@ -29,7 +35,7 @@
}
}
.Popover--right {
.Popover-message--right {
right: -9px;
margin-right: 0;
@ -48,7 +54,7 @@
}
}
.Popover--left {
.Popover-message--left {
left: -9px;
margin-left: 0;
@ -63,6 +69,6 @@
}
}
.Popover--lg {
.Popover-message--lg {
max-width: 330px;
}