You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

139 lines
2.4 KiB

  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. // compass includes
  11. @import "compass/css3/transform";
  12. // mixins
  13. @mixin theme($name, $border-color, $background-color, $close-background-color: $border-color, $text-color: #fff, $close-text-color: $text-color) {
  14. .jquery-notific8-notification.#{$name} {
  15. border-color: $border-color;
  16. background-color: $background-color;
  17. color: $text-color;
  18. .jquery-notific8-close, .jquery-notific8-close-sticky {
  19. background-color: $close-background-color;
  20. color: $close-text-color;
  21. }
  22. }
  23. }
  24. // definitions
  25. .jquery-notific8-container {
  26. display: block;
  27. padding: 0;
  28. margin: 0;
  29. position: fixed;
  30. &.top {
  31. top: 0;
  32. &.right {
  33. right: 0;
  34. }
  35. &.left {
  36. left: 0;
  37. }
  38. }
  39. &.bottom {
  40. bottom: 0;
  41. &.right {
  42. right: 0;
  43. }
  44. &.left {
  45. left: 0;
  46. }
  47. }
  48. }
  49. .jquery-notific8-notification {
  50. position: relative;
  51. display: none;
  52. padding: (10em/16);
  53. color: #fff;
  54. height: (66em/16);
  55. max-height: (66em/16);
  56. overflow: hidden;
  57. border-style: solid;
  58. border-width: 2px;
  59. width: (343em/16);
  60. &:hover {
  61. .jquery-notific8-close {
  62. display: block;
  63. }
  64. }
  65. }
  66. .jquery-notific8-heading {
  67. font-weight: bold;
  68. margin-bottom: (5em/16);
  69. }
  70. .jquery-notific8-message {
  71. font-size: (14em/16);
  72. }
  73. .jquery-notific8-close {
  74. position: absolute;
  75. padding: 0 0.25em;
  76. cursor: pointer;
  77. top: 0;
  78. display: none;
  79. }
  80. .jquery-notific8-close-sticky {
  81. text-align: center;
  82. position: absolute;
  83. width: (89em/16);
  84. padding: (2em/16) 0;
  85. cursor: pointer;
  86. text-transform: uppercase;
  87. span {
  88. font-size: (10em/16);
  89. }
  90. }
  91. .right {
  92. .jquery-notific8-notification {
  93. float: right;
  94. clear: right;
  95. padding-right: (33em/16);
  96. }
  97. .jquery-notific8-close {
  98. right: -2px;
  99. }
  100. .jquery-notific8-close-sticky {
  101. top: (31em/16);
  102. right: (-38em/16);
  103. @include rotate(90deg);
  104. }
  105. }
  106. .left {
  107. .jquery-notific8-notification {
  108. float: left;
  109. clear: left;
  110. padding-left: (33em/16);
  111. }
  112. .jquery-notific8-close {
  113. left: -2px;
  114. }
  115. .jquery-notific8-close-sticky {
  116. top: (31em/16);
  117. left: (-38em/16);
  118. @include rotate(270deg);
  119. }
  120. }
  121. .top .jquery-notific8-notification {
  122. margin-top: (10em/16);
  123. }
  124. .bottom .jquery-notific8-notification {
  125. margin-bottom: (10em/16);
  126. }