mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-01-10 04:15:40 +00:00
139 lines
2.4 KiB
SCSS
139 lines
2.4 KiB
SCSS
|
/**
|
||
|
* @author Will Steinmetz
|
||
|
*
|
||
|
* Styles for the notific8 plug-in for jQuery
|
||
|
*
|
||
|
* Copyright (c)2013, Will Steinmetz
|
||
|
* Licensed under the BSD license.
|
||
|
* http://opensource.org/licenses/BSD-3-Clause
|
||
|
*/
|
||
|
|
||
|
// compass includes
|
||
|
@import "compass/css3/transform";
|
||
|
|
||
|
// mixins
|
||
|
@mixin theme($name, $border-color, $background-color, $close-background-color: $border-color, $text-color: #fff, $close-text-color: $text-color) {
|
||
|
.jquery-notific8-notification.#{$name} {
|
||
|
border-color: $border-color;
|
||
|
background-color: $background-color;
|
||
|
color: $text-color;
|
||
|
.jquery-notific8-close, .jquery-notific8-close-sticky {
|
||
|
background-color: $close-background-color;
|
||
|
color: $close-text-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// definitions
|
||
|
.jquery-notific8-container {
|
||
|
display: block;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
position: fixed;
|
||
|
&.top {
|
||
|
top: 0;
|
||
|
&.right {
|
||
|
right: 0;
|
||
|
}
|
||
|
&.left {
|
||
|
left: 0;
|
||
|
}
|
||
|
}
|
||
|
&.bottom {
|
||
|
bottom: 0;
|
||
|
&.right {
|
||
|
right: 0;
|
||
|
}
|
||
|
&.left {
|
||
|
left: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.jquery-notific8-notification {
|
||
|
position: relative;
|
||
|
display: none;
|
||
|
padding: (10em/16);
|
||
|
color: #fff;
|
||
|
height: (66em/16);
|
||
|
max-height: (66em/16);
|
||
|
overflow: hidden;
|
||
|
border-style: solid;
|
||
|
border-width: 2px;
|
||
|
width: (343em/16);
|
||
|
&:hover {
|
||
|
.jquery-notific8-close {
|
||
|
display: block;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.jquery-notific8-heading {
|
||
|
font-weight: bold;
|
||
|
margin-bottom: (5em/16);
|
||
|
}
|
||
|
|
||
|
.jquery-notific8-message {
|
||
|
font-size: (14em/16);
|
||
|
}
|
||
|
|
||
|
.jquery-notific8-close {
|
||
|
position: absolute;
|
||
|
padding: 0 0.25em;
|
||
|
cursor: pointer;
|
||
|
top: 0;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.jquery-notific8-close-sticky {
|
||
|
text-align: center;
|
||
|
position: absolute;
|
||
|
width: (89em/16);
|
||
|
padding: (2em/16) 0;
|
||
|
cursor: pointer;
|
||
|
text-transform: uppercase;
|
||
|
span {
|
||
|
font-size: (10em/16);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.right {
|
||
|
.jquery-notific8-notification {
|
||
|
float: right;
|
||
|
clear: right;
|
||
|
padding-right: (33em/16);
|
||
|
}
|
||
|
.jquery-notific8-close {
|
||
|
right: -2px;
|
||
|
}
|
||
|
.jquery-notific8-close-sticky {
|
||
|
top: (31em/16);
|
||
|
right: (-38em/16);
|
||
|
@include rotate(90deg);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.left {
|
||
|
.jquery-notific8-notification {
|
||
|
float: left;
|
||
|
clear: left;
|
||
|
padding-left: (33em/16);
|
||
|
}
|
||
|
.jquery-notific8-close {
|
||
|
left: -2px;
|
||
|
}
|
||
|
.jquery-notific8-close-sticky {
|
||
|
top: (31em/16);
|
||
|
left: (-38em/16);
|
||
|
@include rotate(270deg);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.top .jquery-notific8-notification {
|
||
|
margin-top: (10em/16);
|
||
|
}
|
||
|
|
||
|
.bottom .jquery-notific8-notification {
|
||
|
margin-bottom: (10em/16);
|
||
|
}
|