primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-24 13:15:00 +03:00
Code Issues Projects Releases Wiki Activity

Addresses @broccolini's feedback

Browse Source
This commit is contained in:
Brandon Rosage 2017-11-06 17:48:47 -06:00
parent d4e6313f93
commit 6ae4002484
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,7 +61,7 @@ Each of these modifiers also support a syntax for adjusting the positioning the
- `.Popover-message--bottom--left`
- `.Popover-message--left--bottom`
Lastly, there is an added `.Popover-message--lg` modifer, which Assumes a slightly wider popover message.
Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.
### Notes
@ -92,7 +92,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">
<div class="Popover-message Popover-message--lg text-left p-4 mt-2 Box box-shadow-large">
<div class="Popover-message Popover-message--large 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>

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

@ -5,7 +5,7 @@
.Popover-message {
position: relative;
width: 235px;
width: 232px;
margin-right: auto;
margin-left: auto;
@ -22,7 +22,7 @@
top: -16px;
margin-left: -9px;
border: $spacer-2 $border-style transparent;
border-bottom-color: rgba(0, 0, 0, 0.15);
border-bottom-color: $border-black-fade;
}
&::after {
@ -44,8 +44,8 @@
}
&::before {
bottom: -16px;
border-top-color: rgba(0, 0, 0, 0.15);
bottom: -$spacer-3;
border-top-color: $border-black-fade;
}
&::after {
@ -83,7 +83,7 @@
&::before,
&::after {
left: 20px;
left: $spacer-4;
margin-left: 0;
}
@ -121,8 +121,8 @@
.Popover-message--right--top,
.Popover-message--right--bottom {
&::before {
right: -16px;
border-left-color: rgba(0, 0, 0, 0.15);
right: -$spacer-3;
border-left-color: $border-black-fade;
}
&::after {
@ -136,8 +136,8 @@
.Popover-message--left--top,
.Popover-message--left--bottom {
&::before {
left: -16px;
border-right-color: rgba(0, 0, 0, 0.15);
left: -$spacer-3;
border-right-color: $border-black-fade;
}
&::after {
@ -151,7 +151,7 @@
.Popover-message--left--top {
&::before,
&::after {
top: 20px;
top: $spacer-4;
}
}
@ -164,7 +164,7 @@
}
&::before {
bottom: 20px;
bottom: $spacer-4;
}
&::after {
@ -172,9 +172,9 @@
}
}
.Popover-message--lg {
.Popover-message--large {
@include breakpoint(sm) {
min-width: 330px;
min-width: 320px;
}
}