Sha256: 074b7d4f890ce119694adf0c1650bc62ed25ce2789f0356206dfd3ac2b4e65af
Contents?: true
Size: 1.83 KB
Versions: 13
Compression:
Stored size: 1.83 KB
Contents
$flash-red: #FCD7CF;
$flash-green: #B1CEC4;
$flash-yellow: #FFECC3;
$flash-padding: 10px;
.flash {
position: relative;
width: 100%;
padding: $flash-padding;
padding-right: $flash-padding*4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
&.alert {
background-color: $flash-red;
color: darken($flash-red, 70%);
.flash-close:before, .flash-close:after {
background-color: darken($flash-red, 70%);
}
}
&.warning {
background-color: $flash-yellow;
color: darken($flash-yellow, 70%);
.flash-close:before, .flash-close:after {
background-color: darken($flash-yellow, 70%);
}
}
&.notice {
background-color: $flash-green;
color: darken($flash-green, 70%);
.flash-close:before, .flash-close:after {
background-color: darken($flash-green, 70%);
}
}
}
.flash-message {
font-family: sans-serif;
margin: 0;
line-height: 22px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.flash-close {
position: absolute;
display: inline-block;
width: $flash-padding*2;
height: $flash-padding*2;
overflow: hidden;
background: none;
border: 0;
cursor: pointer;
right: $flash-padding;
top: $flash-padding;
outline: none;
&:before, &:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
top: 50%;
left: 0;
background: #000;
margin-top: -1px;
}
&:before {
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&:after {
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
Version data entries
13 entries across 8 versions & 1 rubygems