1
1
mirror of https://github.com/primer/css.git synced 2024-12-24 22:53:58 +03:00

Backporting changes from github

This commit is contained in:
Jon Rohan 2015-10-10 14:08:02 -04:00
parent 587106bba1
commit 0bc93ff4c3
2 changed files with 68 additions and 82 deletions

View File

@ -1,106 +1,92 @@
.flash-messages {
margin-top: 15px;
margin-bottom: 15px;
}
.flash,
.flash-global {
// Default flash
.flash {
position: relative;
padding: 15px;
font-size: 14px;
line-height: 1.6;
line-height: 1.5;
color: #246;
background-color: #e2eef9;
border: solid 1px #bac6d3;
&.flash-warn {
color: #4c4a42;
background-color: #fff9ea;
border-color: #dfd8c2;
}
&.flash-error {
color: #911;
background-color: #fcdede;
border-color: #d2b2b2;
}
.flash-close {
float: right;
padding: 17px; // bigger hit area
margin-top: -15px; // negative margins to account for bigger padding
margin-right: -15px;
margin-left: 20px;
color: inherit;
text-decoration: none;
cursor: pointer;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
border: 1px solid #bac6d3;
border-radius: 3px;
p:last-child {
margin-bottom: 0;
}
}
// Flashes can have an action button instead of the cross.
.flash-action {
float: right;
margin-top: -4px;
margin-left: 20px;
}
// Contain the flash messages
.flash-messages {
margin-bottom: 20px;
}
// Make links stand out
a {
font-weight: bold;
// Close button
.flash-close {
float: right;
width: 34px;
height: 44px;
margin: -11px;
color: inherit;
line-height: 40px;
text-align: center;
cursor: pointer;
opacity: 0.6;
// Undo `<button>` styles
background: none;
border: 0;
-webkit-appearance: none;
&:hover {
opacity: 1;
}
}
.flash {
padding: 15px;
border-radius: 3px;
+ .flash { margin-top: 5px; }
// Action button
.flash-action {
float: right;
margin-top: -4px;
margin-left: 20px;
}
//
// Variations
//
.flash-warn {
color: #4c4a42;
background-color: #fff9ea;
border-color: #dfd8c2;
}
.flash-error {
color: #911;
background-color: #fcdede;
border-color: #d2b2b2;
}
.flash-full {
margin-top: -1px;
border-width: 1px 0;
border-radius: 0;
}
// Add an icon
.flash-with-icon {
padding-left: 40px;
.container {
padding-left: 40px;
}
> .octicon {
.flash-icon {
float: left;
margin-top: 3px;
margin-left: -25px;
}
}
// Global notices
// Content within
//
// Useful for site-wide banners and global notifications.
.flash-global {
padding: 10px;
margin-top: -1px;
border-width: 1px 0;
h2,
p {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
line-height: 1.4;
}
// Global flashes can have an action buttons too.
.flash-action {
margin-top: 5px;
}
}
// Content within flash messages.
.flash-title {
// Reset margins on headings and paragraphs within alerts.
.flash-content {
margin-top: 0;
margin-bottom: 5px;
margin-bottom: 0;
line-height: 1.5;
}

View File

@ -328,12 +328,12 @@
border-radius: 0;
}
&:first-child {
&:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
&:last-child:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}