From 565a52337333e6bf3f41f416a27503f4c7026dc6 Mon Sep 17 00:00:00 2001 From: Vitaly Date: Fri, 12 Oct 2012 15:01:11 +0400 Subject: [PATCH] fix #9 issue, added less support, generated css by less --- .gitignore | 2 +- css/bootstrap-notify.css | 12 +-- css/bootstrap-notify.less | 42 ++++++++ css/styles/alert-bangtidy.css | 35 +++--- css/styles/alert-bangtidy.less | 44 ++++++++ css/styles/alert-blackgloss.css | 177 +++++++++++++++++++------------ css/styles/alert-blackgloss.less | 95 +++++++++++++++++ 7 files changed, 314 insertions(+), 93 deletions(-) create mode 100644 css/bootstrap-notify.less create mode 100644 css/styles/alert-bangtidy.less create mode 100644 css/styles/alert-blackgloss.less diff --git a/.gitignore b/.gitignore index 5ca0973..a205f15 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ .DS_Store - +./idea diff --git a/css/bootstrap-notify.css b/css/bootstrap-notify.css index a2d6877..b7f4148 100644 --- a/css/bootstrap-notify.css +++ b/css/bootstrap-notify.css @@ -1,31 +1,29 @@ +/** + * Created less By Vitaly @Laboratory + */ .notifications { position: fixed; } - -/* Positioning */ +/* Positioning */ .notifications.top-right { right: 10px; top: 25px; } - .notifications.top-left { left: 10px; top: 25px; } - .notifications.bottom-left { left: 10px; bottom: 25px; } - .notifications.bottom-right { right: 10px; bottom: 25px; } - /* Notification Element */ .notifications > div { position: relative; z-index: 9999; margin: 5px 0px; -} \ No newline at end of file +} diff --git a/css/bootstrap-notify.less b/css/bootstrap-notify.less new file mode 100644 index 0000000..8d4f24f --- /dev/null +++ b/css/bootstrap-notify.less @@ -0,0 +1,42 @@ +/** + * Created less By Vitaly @Laboratory + */ + +@right: 10px; +@left: @right; +@top: 25px; +@bottom: @top; + +.notifications { + position: fixed; +} + +/* Positioning */ +.notifications.top-right { + right: @right; + top: @top; +} + +.notifications.top-left { + left: @left; + top: @top; +} + +.notifications.bottom-left { + left: @left; + bottom: @bottom; +} + +.notifications.bottom-right { + right: @right; + bottom: @bottom; +} + +/* Notification Element */ +.notifications { + > div { + position: relative; + z-index: 9999; + margin: 5px 0px; + } +} diff --git a/css/styles/alert-bangtidy.css b/css/styles/alert-bangtidy.css index a167615..95f2939 100644 --- a/css/styles/alert-bangtidy.css +++ b/css/styles/alert-bangtidy.css @@ -1,6 +1,7 @@ /** * bangTidy2 Style - Ported from Growl Style * Ported By Nijikokun @vizualover @nijikokun + * Created less By Vitaly @Laboratory * Original Author Daryl Ginn * Based On http://dribbble.com/shots/527056-Growl-Theme-2 * @@ -10,28 +11,28 @@ .alert-bangTidy { box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - background: rgba(0, 0, 0, 0.80); - background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.88) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0.80)), color-stop(100%,rgba(0, 0, 0, 0.88))); - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); - background: -o-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); - background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); - background: linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.80)', endColorstr='rgba(0, 0, 0, 0.88)',GradientType=0 ); + background: rgba(0, 0, 0, 0.8); + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.88))); + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%); + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%); + background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%); + background: linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.8)', endColorstr='rgba(0, 0, 0, 0.88)', GradientType=0); border: 1px solid #000; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); - -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; overflow: hidden; color: white; - -webkit-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); - -moz-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); - -o-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); + -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + -o-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -} \ No newline at end of file +} diff --git a/css/styles/alert-bangtidy.less b/css/styles/alert-bangtidy.less new file mode 100644 index 0000000..1c536a7 --- /dev/null +++ b/css/styles/alert-bangtidy.less @@ -0,0 +1,44 @@ +/** + * bangTidy2 Style - Ported from Growl Style + * Ported By Nijikokun @vizualover @nijikokun + * Created less By Vitaly @Laboratory + * Original Author Daryl Ginn + * Based On http://dribbble.com/shots/527056-Growl-Theme-2 + * + * To use, for style use: bangTidy + * + */ +@rgba80: rgba(0, 0, 0, 0.80); +@rgba88: rgba(0, 0, 0, 0.88); +@box_shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1); +@text_shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); +@border_radius: 4px; + +.alert-bangTidy { + box-sizing: border-box; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background: @rgba80; + background: -moz-linear-gradient(top, @rgba80 0%, @rgba88 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @rgba80), color-stop(100%, @rgba88)); + background: -webkit-linear-gradient(top, @rgba80 0%, @rgba88 100%); + background: -o-linear-gradient(top, @rgba80 0%, @rgba88 100%); + background: -ms-linear-gradient(top, @rgba80 0%, @rgba88 100%); + background: linear-gradient(top, @rgba80 0%, @rgba88 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@{rgba80}', endColorstr = '@{rgba88}', GradientType = 0); + border: 1px solid #000; + -webkit-box-shadow: @box_shadow; + -moz-box-shadow: @box_shadow; + -o-box-shadow: @box_shadow; + box-shadow: @box_shadow; + -webkit-border-radius: @border_radius; + -moz-border-radius: @border_radius; + -o-border-radius: @border_radius; + border-radius: @border_radius; + overflow: hidden; + color: white; + -webkit-text-shadow: @text_shadow; + -moz-text-shadow: @text_shadow; + -o-text-shadow: @text_shadow; + text-shadow: @text_shadow; + -webkit-font-smoothing: antialiased; +} \ No newline at end of file diff --git a/css/styles/alert-blackgloss.css b/css/styles/alert-blackgloss.css index 89c3d8b..a345848 100644 --- a/css/styles/alert-blackgloss.css +++ b/css/styles/alert-blackgloss.css @@ -3,92 +3,133 @@ * -- * Based off blackgloss growl theme. * Copyright 2012 Nijiko Yonskai + * Created less By Vitaly @Laboratory * -- - * Usage: + * Usage: * Set style to `blackgloss` and include this css. * - * Note: - * The gloss is only supported in webkit based browsers. + * Note: + * The gloss is only supported in webkit based browsers. * Chrome and Safari. */ @-webkit-keyframes notification { - 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } - 70% { -webkit-transform: rotateY(20deg); opacity: .8; } - 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } - 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } + 0% { + -webkit-transform: rotatey(-90deg); + opacity: 0; + } + 70% { + -webkit-transform: rotatey(20deg); + opacity: .8; + } + 90% { + -webkit-transform: rotatey(-10deg); + opacity: 1; + } + 100% { + -webkit-transform: rotatey(0deg); + opacity: 1; + } } - @-moz-keyframes notification { - 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } - 70% { -webkit-transform: rotateY(20deg); opacity: .8; } - 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } - 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } + 0% { + -webkit-transform: rotatey(-90deg); + opacity: 0; + } + 70% { + -webkit-transform: rotatey(20deg); + opacity: .8; + } + 90% { + -webkit-transform: rotatey(-10deg); + opacity: 1; + } + 100% { + -webkit-transform: rotatey(0deg); + opacity: 1; + } } - @-o-keyframes notification { - 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } - 70% { -webkit-transform: rotateY(20deg); opacity: .8; } - 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } - 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } + 0% { + -webkit-transform: rotatey(-90deg); + opacity: 0; + } + 70% { + -webkit-transform: rotatey(20deg); + opacity: .8; + } + 90% { + -webkit-transform: rotatey(-10deg); + opacity: 1; + } + 100% { + -webkit-transform: rotatey(0deg); + opacity: 1; + } } - -keyframes notification { - 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } - 70% { -webkit-transform: rotateY(20deg); opacity: .8; } - 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } - 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } +keyframes notification 0% { + -webkit-transform: rotatey(-90deg); + opacity: 0; +} +keyframes notification 70% { + -webkit-transform: rotatey(20deg); + opacity: .8; +} +keyframes notification 90% { + -webkit-transform: rotatey(-10deg); + opacity: 1; +} +keyframes notification 100% { + -webkit-transform: rotatey(0deg); + opacity: 1; } - /* Webkit Only */ .alert-blackgloss:before { - background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255,255,255,.0)), to(rgba(255,255,255,.6)), color-stop(.99,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.0))) no-repeat; - -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), color-stop(.8,rgba(255,255,255,.0))); - position: absolute; - content: '.'; - line-height: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - overflow: hidden; - text-indent: -99999px; - -webkit-border-radius: 5px; + background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.6)), color-stop(0.99, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0))) no-repeat; + -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), color-stop(0.8, rgba(255, 255, 255, 0))); + position: absolute; + content: '.'; + line-height: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + overflow: hidden; + text-indent: -99999px; + -webkit-border-radius: 5px; } - .alert-blackgloss { - -webkit-animation: notification .75s linear; - -moz-animation: notification .75s linear; - -ms-animation: notification .75s linear; - -o-animation: notification .75s linear; - animation: notification .75s linear; - background: rgba(0,0,0,1); - -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); - -moz-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); - -ms-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); - -o-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); - box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); - border: 1px solid rgba(0,0,0,.95); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - -webkit-font-smoothing: antialiased; - text-shadow: 0 1px 2px rgba(0,0,0,.5); - color: #fff; - -webkit-transform: rotateY(-0deg); - -moz-transform: rotateY(-0deg); - -o-transform: rotateY(-0deg); - transform: rotateY(-0deg); - position: relative; - background-clip: padding-box; + -webkit-animation: notification 0.75s linear; + -moz-animation: notification 0.75s linear; + -ms-animation: notification 0.75s linear; + -o-animation: notification 0.75s linear; + animation: notification 0.75s linear; + background: #000000; + -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + border: 1px solid rgba(0, 0, 0, 0.95); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-font-smoothing: antialiased; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + color: #fff; + -webkit-transform: rotatey(0deg); + -moz-transform: rotatey(0deg); + -o-transform: rotatey(0deg); + transform: rotatey(0deg); + position: relative; + background-clip: padding-box; } - .alert-blackgloss .close { position: relative; top: -3px; right: -25px; - color: #fff; - content: 'x'; -} \ No newline at end of file + color: #fff; + content: 'x'; +} diff --git a/css/styles/alert-blackgloss.less b/css/styles/alert-blackgloss.less new file mode 100644 index 0000000..fe10b36 --- /dev/null +++ b/css/styles/alert-blackgloss.less @@ -0,0 +1,95 @@ +/** + * alert-blackgloss.css v1.0 + * -- + * Based off blackgloss growl theme. + * Copyright 2012 Nijiko Yonskai + * Created less By Vitaly @Laboratory + * -- + * Usage: + * Set style to `blackgloss` and include this css. + * + * Note: + * The gloss is only supported in webkit based browsers. + * Chrome and Safari. + */ + +.keyframes_mixin() { + 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } + 70% { -webkit-transform: rotateY(20deg); opacity: .8; } + 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } + 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } +} +@box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1); +@amination: notification .75s linear; +@border-radius: 5px; +@transform: rotateY(-0deg); + +@-webkit-keyframes notification { + .keyframes_mixin; +} + +@-moz-keyframes notification { + .keyframes_mixin; +} + +@-o-keyframes notification { + .keyframes_mixin; +} + +keyframes notification { + .keyframes_mixin; +} + +/* Webkit Only */ +.alert-blackgloss:before { + background: -webkit-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255,255,255,.0)), to(rgba(255,255,255,.6)), color-stop(.99,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.0))) no-repeat; + -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), color-stop(.8,rgba(255,255,255,.0))); + position: absolute; + content: '.'; + line-height: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + overflow: hidden; + text-indent: -99999px; + -webkit-border-radius: @border-radius; +} + +.alert-blackgloss { + -webkit-animation: @amination; + -moz-animation: @amination; + -ms-animation: @amination; + -o-animation: @amination; + animation: @amination; + background: rgba(0,0,0,1); + -webkit-box-shadow: @box-shadow; + -moz-box-shadow: @box-shadow; + -ms-box-shadow: @box-shadow; + -o-box-shadow: @box-shadow; + box-shadow: @box-shadow; + border: 1px solid rgba(0,0,0,.95); + -webkit-border-radius: @border-radius; + -moz-border-radius: @border-radius; + -ms-border-radius: @border-radius; + -o-border-radius: @border-radius; + border-radius: @border-radius; + -webkit-font-smoothing: antialiased; + text-shadow: 0 1px 2px rgba(0,0,0,.5); + color: #fff; + -webkit-transform: @transform; + -moz-transform: @transform; + -o-transform: @transform; + transform: @transform; + position: relative; + background-clip: padding-box; +} + +.alert-blackgloss .close { + position: relative; + top: -3px; + right: -25px; + color: #fff; + content: 'x'; +}