Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
5 lars 1 
/**
2 
 * @author Will Steinmetz
3 
 *
4 
 * Styles for the notific8 plug-in for jQuery
5 
 *
6 
 * Copyright (c)2013, Will Steinmetz
7 
 * Licensed under the BSD license.
8 
 * http://opensource.org/licenses/BSD-3-Clause
9 
 */
10 
 
11 
// compass includes
12 
@import "compass/css3/transform";
13 
 
14 
// mixins
15 
@mixin theme($name, $border-color, $background-color, $close-background-color: $border-color, $text-color: #fff, $close-text-color: $text-color) {
16 
  .jquery-notific8-notification.#{$name} {
17 
    border-color: $border-color;
18 
    background-color: $background-color;
19 
    color: $text-color;
20 
    .jquery-notific8-close, .jquery-notific8-close-sticky {
21 
      background-color: $close-background-color;
22 
      color: $close-text-color;
23 
    }
24 
  }
25 
}
26 
 
27 
// definitions
28 
.jquery-notific8-container {
29 
  display: block;
30 
  padding: 0;
31 
  margin: 0;
32 
  position: fixed;
33 
  &.top {
34 
    top: 0;
35 
    &.right {
36 
      right: 0;
37 
    }
38 
    &.left {
39 
      left: 0;
40 
    }
41 
  }
42 
  &.bottom {
43 
    bottom: 0;
44 
    &.right {
45 
      right: 0;
46 
    }
47 
    &.left {
48 
      left: 0;
49 
    }
50 
  }
51 
}
52 
 
53 
.jquery-notific8-notification {
54 
  position: relative;
55 
  display: none;
56 
  padding: (10em/16);
57 
  color: #fff;
58 
  height: (66em/16);
59 
  max-height: (66em/16);
60 
  overflow: hidden;
61 
  border-style: solid;
62 
  border-width: 2px;
63 
  width: (343em/16);
64 
  &:hover {
65 
    .jquery-notific8-close {
66 
      display: block;
67 
    }
68 
  }
69 
}
70 
 
71 
.jquery-notific8-heading {
72 
  font-weight: bold;
73 
  margin-bottom: (5em/16);
74 
}
75 
 
76 
.jquery-notific8-message {
77 
  font-size: (14em/16);
78 
}
79 
 
80 
.jquery-notific8-close {
81 
  position: absolute;
82 
  padding: 0 0.25em;
83 
  cursor: pointer;
84 
  top: 0;
85 
  display: none;
86 
}
87 
 
88 
.jquery-notific8-close-sticky {
89 
  text-align: center;
90 
  position: absolute;
91 
  width: (89em/16);
92 
  padding: (2em/16) 0;
93 
  cursor: pointer;
94 
  text-transform: uppercase;
95 
  span {
96 
    font-size: (10em/16);
97 
  }
98 
}
99 
 
100 
.right {
101 
  .jquery-notific8-notification {
102 
    float: right;
103 
    clear: right;
104 
    padding-right: (33em/16);
105 
  }
106 
  .jquery-notific8-close {
107 
    right: -2px;
108 
  }
109 
  .jquery-notific8-close-sticky {
110 
    top: (31em/16);
111 
    right: (-38em/16);
112 
    @include rotate(90deg);
113 
  }
114 
}
115 
 
116 
.left {
117 
  .jquery-notific8-notification {
118 
    float: left;
119 
    clear: left;
120 
    padding-left: (33em/16);
121 
  }
122 
  .jquery-notific8-close {
123 
    left: -2px;
124 
  }
125 
  .jquery-notific8-close-sticky {
126 
    top: (31em/16);
127 
    left: (-38em/16);
128 
    @include rotate(270deg);
129 
  }
130 
}
131 
 
132 
.top .jquery-notific8-notification {
133 
  margin-top: (10em/16);
134 
}
135 
 
136 
.bottom .jquery-notific8-notification {
137 
  margin-bottom: (10em/16);
138 
}