Permalink
Browse files

New Readme and install instructions. Reorganized file structure for c…

…hanges to come.
  • Loading branch information...
1 parent d193ee1 commit 19854c032caa3557edb46c7836e7787ed52ec31b Phil LaPier committed May 8, 2011
View
29 README.md
@@ -0,0 +1,29 @@
+# Sexy CSS3 Flashes
+===================
+
+Use these CSS3 flashes in your rails app.
+
+## Dependencies
+
+You'll need:
+
+* jQuery
+* Sass 3.1.1+
+
+## Install
+
+Everything in flashes directory, place respectively in your rails app:
+
+ _flashes.html.erb partial into app/views/shared/
+ sass files into public/stylesheets/scss/
+ flashes.js into public/javascripts/ and include it in your javascripts tag.
+
+Add the flashes partial to your layouts:
+
+ <%= render :partial => 'shared/flashes' -%>
+
+## About
+
+These CSS3 flashes were created on the grounds of providing better functionality and visual appeal. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers degrading rather gracefully. If you use these flashes in the wild, drop me a note and let me know. http://twitter.com/phillapier
+
+DEMO: http://plapier.github.com/sexy-css3-flashes/index.html:
View
9 README.rdoc
@@ -1,9 +0,0 @@
-= Sexy CSS3 Flashes
-These CSS3 flashes were created on the grounds of providing better functionality and visual appeal. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers degrading rather gracefully. If you use these flashes in the wild, drop me a note and let me know. http://twitter.com/phillapier
-
-*Slide-down animation is being served by jQuery (required).
-
-*I recommend using Sass with these flashes. (http://sass-lang.com)
-
-=== Dark Chrome Flashes: http://plapier.github.com/sexy-css3-flashes/dark-chrome
-=== Light Chrome Flashes: http://plapier.github.com/sexy-css3-flashes/light-chrome
View
116 dark-chrome/css/screen.css
@@ -1,116 +0,0 @@
-/************************************************************************
- Created by Phil LaPier
- Stylesheet for Dark Chrome DEMO PAGE only. See flashes.css / flashes.scss.
-************************************************************************/
-* {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 1em;
- list-style: none;
-}
-
-div.clear {
- clear: both;
-}
-
-body {
- background: rgb(180, 185, 190);
- color: #333;
- font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
- font-size: 11px;
- line-height: 150%;
-}
-div#wrap {
- margin: 180px auto;
- width: 300px;
-}
-div#buttons {
- text-align: center;
-}
-ul {
- margin-bottom: 30px;
-}
-ul li {
- display: inline-block;
- margin: 0px 15px 0px 0px;
-}
-
-h1 {
- border-top: 3px solid #333;
- font-size: 1.1em;
- margin-bottom: 5px;
- padding-top: 10px;
- text-shadow: #CFCFCF 1px 1px 0;
-}
-p {
- margin-bottom: 10px;
- text-shadow: #CFCFCF 1px 1px 0;
-}
-a {
- color: #333;
- font-weight: bold;
- margin-top: 5px;
-}
-a:hover {
- text-shadow: #E3E3E3 1px 1px 0;
-}
-
-.button {
- -webkit-box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.6),
- 0 1px 0 rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(150, 150, 150),
- 0 1px 2px rgba(0, 0, 0, 0.25);
- -moz-box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.6),
- 0 1px 0 rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(150, 150, 150),
- 0 1px 2px rgba(0, 0, 0, 0.25);
- box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.6),
- 0 1px 0 rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(150, 150, 150),
- 0 1px 2px rgba(0, 0, 0, 0.25);
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background-color: rgba(255, 255, 255, 0.7);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- from(rgb(240, 240, 240)),
- to(rgb(210, 210, 210))
- );
- background:
- -moz-linear-gradient(
- top,
- rgb(240, 240, 240) 0%,
- rgb(210, 210, 210) 100%
- );
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D2D2D2',GradientType=0 ); /* ie */
- color: rgb(90, 90, 90);
- cursor: pointer;
- font: 11px/20px 'Lucida Grande', sans-serif;
- padding: 0px 12px;
- text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
-}
-
-.button:active {
- -webkit-box-shadow:
- inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(140, 140, 140),
- 0 1px 1px rgba(0, 0, 0, 0.3);
- -moz-box-shadow:
- inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(140, 140, 140),
- 0 1px 1px rgba(0, 0, 0, 0.3);
- box-shadow:
- inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
- 0 0 0 1px rgb(140, 140, 140),
- 0 1px 1px rgba(0, 0, 0, 0.3);
-}
View
73 dark-chrome/css/scss/_mixins.scss
@@ -1,73 +0,0 @@
-//MIXINS FOR DARK CHROME
-
-@mixin border-radius ($radii) {
- -webkit-border-radius: $radii;
- -moz-border-radius: $radii;
- border-radius: $radii;
-}
-
-// Box-Shadow Mixin Requires Sass v3.1.1+
-@mixin box-shadow ($shadow-1,
- $shadow-2: false, $shadow-3: false,
- $shadow-4: false, $shadow-5: false,
- $shadow-6: false, $shadow-7: false,
- $shadow-8: false, $shadow-9: false) {
-
- $full: $shadow-1;
- $shadows: $shadow-2, $shadow-3,
- $shadow-4, $shadow-5,
- $shadow-6, $shadow-7,
- $shadow-8, $shadow-9;
-
- @each $shadow in $shadows {
- @if $shadow {
- $full: $full, $shadow;
- }
- }
- -webkit-box-shadow: $full;
- -moz-box-shadow: $full;
- -o-box-shadow: $full;
- box-shadow: $full;
-}
-
-@mixin box-sizing ($box) {
- -webkit-box-sizing: $box;
- -moz-box-sizing: $box;
- box-sizing: $box;
-}
-
-@mixin linear-gradient ($from, $to) {
- background: $from;
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to)); // Saf4+, Chrome
- background: -webkit-linear-gradient(top, $from, $to); // Chrome 10+, Saf5.1+
- background: -moz-linear-gradient(top, $from, $to); // FF3.6
- background: -ms-linear-gradient(top, $from, $to); // IE10
- background: -o-linear-gradient(top, $from, $to); // Opera 11.10+
- background: linear-gradient(top, $from, $to);
-}
-
-/* Legacy support for inline-block in IE7 (maybe IE6) */
-@mixin inline-block {
- display: -moz-inline-box;
- -moz-box-orient: vertical;
- display: inline-block;
- vertical-align: baseline;
- zoom: 1;
- *display: inline;
- *vertical-align: auto;
-}
-
-@mixin transition($ratio: 0.15s) {
- -webkit-transition: all $ratio ease-out;
- -moz-transition: all $ratio ease-out;
- -ms-transition: all $ratio ease-out;
- -o-transition: all $ratio ease-out;
- transition: all $ratio ease-out;
-}
-
-@mixin transform($property){
- -webkit-transform: $property;
- -moz-transform: $property;
- -ms-transform: $property;
- transform: $property;
-}
View
0 dark-chrome/css/flashes.css → demo/css/dark-chrome-flashes.css
File renamed without changes.
View
116 light-chrome/css/flashes.css → demo/css/light-chrome-flashes.css
@@ -1,54 +1,54 @@
/************************************************************************
- Sexy CSS3 Flashes v1.2.7
- LIGHT CHROME
+ Sexy CSS3 Flashes v1.2.8
Copyright 2010, Phil LaPier
https://github.com/plapier/sexy-css3-flashes
Requires Sass v3.1.1+ to compile (http://sass-lang.com/)
************************************************************************/
/* Legacy support for inline-block in IE7 (maybe IE6) */
-/* Flash Message Styling for LIGHT CHROME Flashes
+/* Flash Message Styling for DARK CHROME or LIGHT CHROME Flashes
************************************************************************/
div#flash_wrapper {
margin: 0 auto;
width: 960px; }
div#flash_wrapper div#flash {
font-size: 15px;
margin: 0 auto;
- max-height: 55px;
+ max-height: 50px;
position: absolute;
top: 0;
width: 960px;
z-index: 100; }
div#flash_wrapper div#flash div.flash_message {
- border: 1px solid #bbbbbb;
+ border-color: #bbbbbb;
+ border-style: none solid solid solid;
+ border-width: 1px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
- border-top: 0;
- -webkit-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 5px 1px black;
- -moz-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 5px 1px black;
- -o-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 5px 1px black;
- box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 5px 1px black;
+ -webkit-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 3px 0 black;
+ -moz-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 3px 0 black;
+ -o-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 3px 0 black;
+ box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 3px 0 black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
- height: 55px;
+ height: 50px;
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5f5), color-stop(1, #959595));
background: -webkit-linear-gradient(top, #f5f5f5, #959595);
background: -moz-linear-gradient(top, #f5f5f5, #959595);
background: -ms-linear-gradient(top, #f5f5f5, #959595);
background: -o-linear-gradient(top, #f5f5f5, #959595);
background: linear-gradient(top, #f5f5f5, #959595);
- margin: -55px 0 0;
+ margin: -50px 0 0;
overflow: hidden;
- padding: 16px 15px; }
+ padding: 13px 15px; }
div#flash_wrapper div#flash div.flash_message div#flash-vrule {
background: rgba(255, 255, 255, 0.4);
border-left: 1px solid #959595;
- bottom: 18px;
- height: 55px;
+ bottom: 15px;
+ height: 50px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
@@ -103,48 +103,48 @@ div#flash_wrapper {
position: relative;
vertical-align: top;
width: 30px; }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status {
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- -webkit-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
- -moz-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
- -o-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
- box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
- height: 20px;
- margin: 5px auto 0;
- width: 20px; }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_success {
- background: #009900; }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_failure {
- background: #e00000; }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_notice, div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_alert {
- background: #f3bc00; }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_notice div#gloss, div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status.icon_alert div#gloss {
- background: white;
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, rgba(255, 255, 255, 0)));
- background: -webkit-linear-gradient(top, white, rgba(255, 255, 255, 0));
- background: -moz-linear-gradient(top, white, rgba(255, 255, 255, 0));
- background: -ms-linear-gradient(top, white, rgba(255, 255, 255, 0));
- background: -o-linear-gradient(top, white, rgba(255, 255, 255, 0));
- background: linear-gradient(top, white, rgba(255, 255, 255, 0)); }
- div#flash_wrapper div#flash div.flash_message div#flash_icon div#icon_status div#gloss {
- background: transparent;
- -webkit-border-radius: 16px;
- -moz-border-radius: 16px;
- border-radius: 16px;
- height: 16px;
- background: rgba(255, 255, 255, 0.7);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(255, 255, 255, 0)));
- background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
- background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
- background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
- background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
- background: linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
- margin: 0 auto;
- position: relative;
- top: 1px;
- width: 16px; }
+ div#flash_wrapper div#flash div.flash_message div#icon_status {
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ border-radius: 20px;
+ -webkit-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
+ -o-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
+ box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.7);
+ height: 20px;
+ margin: 5px auto 0;
+ width: 20px; }
+ div#flash_wrapper div#flash div.flash_message div#icon_status.icon_success {
+ background: #009900; }
+ div#flash_wrapper div#flash div.flash_message div#icon_status.icon_failure {
+ background: #e00000; }
+ div#flash_wrapper div#flash div.flash_message div#icon_status.icon_notice, div#flash_wrapper div#flash div.flash_message div#icon_status.icon_alert {
+ background: #f3bc00; }
+ div#flash_wrapper div#flash div.flash_message div#icon_status.icon_notice div#gloss, div#flash_wrapper div#flash div.flash_message div#icon_status.icon_alert div#gloss {
+ background: white;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, rgba(255, 255, 255, 0)));
+ background: -webkit-linear-gradient(top, white, rgba(255, 255, 255, 0));
+ background: -moz-linear-gradient(top, white, rgba(255, 255, 255, 0));
+ background: -ms-linear-gradient(top, white, rgba(255, 255, 255, 0));
+ background: -o-linear-gradient(top, white, rgba(255, 255, 255, 0));
+ background: linear-gradient(top, white, rgba(255, 255, 255, 0)); }
+ div#flash_wrapper div#flash div.flash_message div#icon_status div#gloss {
+ background: transparent;
+ -webkit-border-radius: 16px;
+ -moz-border-radius: 16px;
+ border-radius: 16px;
+ height: 16px;
+ background: rgba(255, 255, 255, 0.7);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(255, 255, 255, 0)));
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+ background: linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+ margin: 0 auto;
+ position: relative;
+ top: 1px;
+ width: 16px; }
div#flash_wrapper div#flash div.flash_message div#flash_close {
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
@@ -173,7 +173,7 @@ div#flash_wrapper {
div#flash_wrapper div#flash div.flash_message div#flash_close span.close {
color: rgba(0, 0, 0, 0.4);
display: block;
- /* font-stack should degrade somewhat gracefully for X button (close button) */
+ /* font-stack should degrade gracefully for X button */
font-family: Helvetica, 'lucida grande', Tahoma, Arial, sans-serif;
font-size: 17px;
font-weight: bold;
View
125 light-chrome/css/screen.css → demo/css/style.css
@@ -1,6 +1,6 @@
/************************************************************************
Created by Phil LaPier
- Stylesheet for Light Chrome demo page only. See flashes.css / flashes.scss.
+ Stylesheet for DEMO PAGE only. See flashes.css / flashes.scss.
************************************************************************/
* {
margin: 0;
@@ -14,15 +14,6 @@
div.clear {
clear: both;
}
-
-body {
-/* background: rgb(180, 185, 190); */
- background: rgba(0, 0, 0, 0.8);
- color: #ccc;
- font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
- font-size: 11px;
- line-height: 150%;
-}
div#wrap {
margin: 180px auto;
width: 300px;
@@ -38,26 +29,123 @@ ul li {
margin: 0px 15px 0px 0px;
}
-h1 {
+/* Dark
+************************************************************************/
+
+body#dark {
+ background: rgb(180, 185, 190);
+ color: #333;
+ font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
+ font-size: 11px;
+ line-height: 150%;
+}
+body#dark h1 {
+ border-top: 3px solid #333;
+ font-size: 1.1em;
+ margin-bottom: 5px;
+ padding-top: 10px;
+ text-shadow: #CFCFCF 1px 1px 0;
+}
+body#dark p {
+ margin-bottom: 10px;
+ text-shadow: #CFCFCF 1px 1px 0;
+}
+body#dark a {
+ color: #333;
+ font-weight: bold;
+ margin-top: 5px;
+}
+body#dark a:hover {
+ text-shadow: #E3E3E3 1px 1px 0;
+}
+
+body#dark .button {
+ -webkit-box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.6),
+ 0 1px 0 rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(150, 150, 150),
+ 0 1px 2px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.6),
+ 0 1px 0 rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(150, 150, 150),
+ 0 1px 2px rgba(0, 0, 0, 0.25);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.6),
+ 0 1px 0 rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(150, 150, 150),
+ 0 1px 2px rgba(0, 0, 0, 0.25);
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ background-color: rgba(255, 255, 255, 0.7);
+ background-image:
+ -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgb(240, 240, 240)),
+ to(rgb(210, 210, 210))
+ );
+ background:
+ -moz-linear-gradient(
+ top,
+ rgb(240, 240, 240) 0%,
+ rgb(210, 210, 210) 100%
+ );
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D2D2D2',GradientType=0 ); /* ie */
+ color: rgb(90, 90, 90);
+ cursor: pointer;
+ font: 11px/20px 'Lucida Grande', sans-serif;
+ padding: 0px 12px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+body#dark .button:active {
+ -webkit-box-shadow:
+ inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(140, 140, 140),
+ 0 1px 1px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow:
+ inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(140, 140, 140),
+ 0 1px 1px rgba(0, 0, 0, 0.3);
+ box-shadow:
+ inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgb(140, 140, 140),
+ 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+/* Light
+************************************************************************/
+body#light {
+ background: rgba(0, 0, 0, 0.8);
+ color: #ccc;
+ font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
+ font-size: 11px;
+ line-height: 150%;
+}
+body#light h1 {
border-top: 3px solid #888;
font-size: 1.1em;
margin-bottom: 5px;
padding-top: 10px;
}
-p {
+body#light p {
margin-bottom: 10px;
}
-a {
+body#light a {
color: #AAA;
font-weight: bold;
margin-top: 5px;
}
-a:hover {
+body#light a:hover {
color: #FFF;
}
-.button {
+body#light .button {
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 0 rgba(0, 0, 0, 0.2),
@@ -90,14 +178,14 @@ a:hover {
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
-.button:hover {
+body#light .button:hover {
background: #727272;
background: -moz-linear-gradient( top, #727272 0%, #3e3e3e 100%);
background: -webkit-gradient(linear, left top, left bottom, from( #727272 ), to( #3e3e3e ));
background: -webkit-linear-gradient( #727272, #3e3e3e );
background: linear-gradient(#727272, #3e3e3e);
}
-.button:active {
+body#light .button:active {
-webkit-box-shadow:
inset 0 0 4px 1px rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.15),
@@ -110,4 +198,5 @@ a:hover {
inset 0 0 4px 1px rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.25);
-}
+}
+
View
10 dark-chrome/index.html → demo/dark-chrome.html
@@ -3,13 +3,13 @@
<html>
<head>
<title>Sexy CSS3 Flashes</title>
- <link href="css/screen.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="css/flashes.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="css/dark-chrome-flashes.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/flashes.js"></script>
</head>
- <body>
+ <body id="dark">
<!-- Flash Message -->
<div id="flash_wrapper">
@@ -40,8 +40,8 @@
</div>
<h1>Sexy CSS3 Flashes (Dark Chrome)</h1>
<p>These CSS3 flashes were created on the grounds of providing better functionality and visual appeal. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers degrading rather gracefully. If you use these flashes in the wild, drop me a note and let me know.</p>
- <p><a href="http://github.com/plapier/sexy-css3-flashes">Fork me on GitHub</a> | <a href="../light-chrome/index.html">Switch to Light Chrome</a></p>
+ <p><a href="http://github.com/plapier/sexy-css3-flashes">Fork me on GitHub</a> | <a href="light-chrome.html">Switch to Light Chrome</a></p>
</div>
</body>
-</html>
+</html>
View
0 dark-chrome/js/flashes.js → demo/js/flashes.js
File renamed without changes.
View
10 light-chrome/index.html → demo/light-chrome.html
@@ -3,13 +3,13 @@
<html>
<head>
<title>Sexy CSS3 Flashes</title>
- <link href="css/screen.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="css/flashes.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="css/light-chrome-flashes.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/flashes.js"></script>
</head>
- <body>
+ <body id="light">
<!-- Flash Message -->
<div id="flash_wrapper">
@@ -40,8 +40,8 @@
</div>
<h1>Sexy CSS3 Flashes (Light Chrome)</h1>
<p>These CSS3 flashes were created on the grounds of providing better functionality and visual appeal. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers degrading rather gracefully. If you use these flashes in the wild, drop me a note and let me know.</p>
- <p><a href="http://github.com/plapier/sexy-css3-flashes">Fork me on GitHub</a> | <a href="../dark-chrome/index.html">Switch to Dark Chrome</a></p>
+ <p><a href="http://github.com/plapier/sexy-css3-flashes">Fork me on GitHub</a> | <a href="dark-chrome.html">Switch to Dark Chrome</a></p>
</div>
</body>
-</html>
+</html>
View
0 dark-chrome/js/application.js → flashes/javascripts/flashes.js
File renamed without changes.
View
0 light-chrome/css/scss/_mixins.scss → flashes/sass/_mixins.scss
File renamed without changes.
View
0 dark-chrome/css/scss/flashes.scss → flashes/sass/flashes.scss
File renamed without changes.
View
0 dark-chrome/rails-view/_flashes.html.erb → flashes/views/shared/_flashes.html.erb
File renamed without changes.
View
10 index.html
@@ -3,15 +3,15 @@
<html>
<head>
<title>Sexy CSS3 Flashes</title>
-<link href="dark-chrome/css/screen.css" media="screen" rel="stylesheet" type="text/css" />
+<link href="demo/css/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
-<body>
+<body id="dark">
<div id="wrap">
<div id="buttons">
<ul>
- <li><a href="dark-chrome/index.html"><button id="success" class="button">Dark Chrome</button></a></li>
- <li><a href="light-chrome/index.html"><button id="failure" class="button">Light Chrome</button></a></li>
+ <li><a href="demo/dark-chrome.html"><button id="success" class="button">Dark Chrome</button></a></li>
+ <li><a href="demo/light-chrome.html"><button id="failure" class="button">Light Chrome</button></a></li>
</ul>
</div>
<h1>Sexy CSS3 Flashes</h1>
@@ -22,4 +22,4 @@
<a href="http://github.com/plapier/sexy-css3-flashes"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
</body>
-</html>
+</html>
View
180 light-chrome/css/scss/flashes.scss
@@ -1,180 +0,0 @@
-/************************************************************************
- Sexy CSS3 Flashes v1.2.7
- LIGHT CHROME
- Copyright 2010, Phil LaPier
- https://github.com/plapier/sexy-css3-flashes
-
- Requires Sass v3.1.1+ to compile (http://sass-lang.com/)
-************************************************************************/
-@import "mixins";
-
-
-
-
-// EDIT HERE
-//************************************************************************//
-
-$flashHeight: 55px; // Change Flash Message Height
-$flashWidth: 960px; // Change Flash Message Width
-
-$fontSize: 15px; // Font Size (15px - 16px recommended)
-
-$chrome-from: #f5f5f5; $chrome-to: #959595; //Gray Chrome
-//$chrome-from: #e1f6ff; $chrome-to: #96b6ce; //Blue Chrome Test
-
-//************************************************************************//
-// STOP EDITING HERE
-
-
-
-
-// DO NOT EDIT - CALCULATE THE HEIGHT AND ADJUST ACCORDINGLY
-//************************************************************************//
-
-$vPadding: floor( ((($flashHeight - $fontSize) / 2) - 4) ); // Calculate the padding of the flashes
-
-// Color Variables for LIGHT CHROME
-$text-color: hsla(0, 0%, 13%, 1.0);
-$text-shadow: hsla(100%, 100%, 100%, 0.8);
-
-$shadow: darken($chrome-to, 15%);
-$highlight: lighten($chrome-to, 15%);
-
-$green: #009900;
-$red: darken(#FF0000, 6%);
-$yellow: #F3BC00;
-
-//************************************************************************//
-// END
-
-
-
-
-//************************************************************************//
-/* Flash Message Styling for LIGHT CHROME Flashes
-************************************************************************/
-div#flash_wrapper {
- margin: 0 auto;
- width: $flashWidth;
-
- div#flash {
- font-size: 15px;
- margin: 0 auto;
- max-height: $flashHeight;
- position: absolute;
- top: 0;
- width: $flashWidth;
- z-index: 100;
-
- div.flash_message {
- border: 1px solid $highlight;
- @include border-radius(0 0 8px 8px);
- border-top: 0;
- @include box-shadow(inset 0 -1px 0 0 $shadow, 0 0 5px 1px #000); // if adjusted, you may need to adjust jQuery boxShadowOffset in application.js
- @include box-sizing(border-box);
- height: $flashHeight;
- @include linear-gradient($chrome-from, $chrome-to);
- margin: -$flashHeight 0 0; //Negative margin
- overflow: hidden;
- padding: $vPadding 15px;
-
- div#flash-vrule {
- background: hsla(100%, 100%, 100%, 0.4);
- border-left: 1px solid $chrome-to;
- bottom: $vPadding + 2;
- height: $flashHeight;
- @include inline-block;
- margin-right: 12px;
- position: relative;
- vertical-align: top;
- width: 1px;
- }
- p {
- color: $text-color;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: $fontSize;
- font-weight: bold;
- @include inline-block;
- line-height: $fontSize;
- margin: 2px 0px;
- text-shadow: $text-shadow 1px 1px 1px;
- }
- div#flash_icon {
- @include border-radius(30px);
- bottom: 4px;
- @include box-shadow(inset 0 1px 0 0 hsla(0, 0, 0, 0.3), 0 -1px 0 0 hsla(100%, 100%, 100%, 0.65));
- height: 30px;
- @include inline-block;
- @include linear-gradient(hsla(0%, 0%, 0%, 0.22), hsla(0%, 0%, 0%, 0.28));
- margin-right: 12px;
- position: relative;
- vertical-align: top;
- width: 30px;
-
- div#icon_status {
- @include border-radius(20px);
- @include box-shadow(0 1px 2px 0px hsla(0, 0, 0, 0.7));
- height: 20px;
- margin: 5px auto 0;
- width: 20px;
-
- &.icon_success {
- background: $green;
- }
- &.icon_failure {
- background: $red;
- }
- &.icon_notice, &.icon_alert {
- background: $yellow;
-
- div#gloss {
- @include linear-gradient(hsla(0%, 0%, 100%, 1), hsla(0%, 0%, 100%, 0));
- }
- }
- div#gloss {
- background: transparent;
- @include border-radius(16px);
- height: 16px;
- @include linear-gradient(hsla(0%, 0%, 100%, 0.7), hsla(0%, 0%, 100%, 0));
- margin: 0 auto;
- position: relative;
- top: 1px;
- width: 16px;
- }
- }
- }
- div#flash_close {
- background: hsla(0%, 0%, 0%, 0.1);
- border: 1px solid hsla(0%, 0%, 0%, 0.2);
- @include border-radius(20px);
- cursor: pointer;
- float: right;
- height: 20px;
- @include inline-block;
- opacity: 0;
- text-align: center;
- @include transition;
- vertical-align: top;
- width: 20px;
-
- span.close {
- color: hsla(0%, 0%, 0%, 0.4);
- display: block;
- /* font-stack should degrade somewhat gracefully for X button (close button) */
- font-family: Helvetica, 'lucida grande', Tahoma, Arial, sans-serif;
- font-size: 17px;
- font-weight: bold;
- line-height: 1em;
- text-align: center;
- }
- &:hover {
- @include transform(scale(1.2));
- }
- }
- //hover over flash message to see close button. JS will slide flashes up regardless.
- &:hover > div#flash_close {
- opacity: 1.0;
- }
- }
- }
-}
View
32 light-chrome/js/application.js
@@ -1,32 +0,0 @@
-//----------------------------------------------------------------
-// This Javascript is required for Flashes to animate in your app.
-//----------------------------------------------------------------
-
-// Flash messages
-$(function(){
-
-// EDIT HERE
-//----------------------------------------------------------------
- var delayTime = 3000; // Show Flash messages for 3 seconds
- var boxShadowOffset = 4; // CSS Box-Shadow Offset (pixels)
-//----------------------------------------------------------------
-// STOP EDITING HERE
-
-
- // Grab height of Flash Message
- var flashHeight = $('.flash_message').css("height");
-
- // Calculate closed position of flash message
- // Negate height, parse to integer, add CSS shadow height
- var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
-
-
- // On Document load, slide down flashes then slide up after delay of 3 seconds
- $('.flash_message').animate({ marginTop: 0 }).delay(delayTime).animate({ marginTop: closePos });
-
- // Dissmiss Flash Messages
- $('#flash_close').click(function(){
- $('.flash_message').stop(); //Stop Animation
- $('.flash_message').animate({ marginTop: closePos }); // Slide up
- });
-});
View
52 light-chrome/js/flashes.js
@@ -1,52 +0,0 @@
-//---------------------------------------------------
-// Javascript for Demo Page only. See application.js.
-//---------------------------------------------------
-
-var slideDown = function(pos){
- $('.flash_message').animate({ marginTop: 0 });
-};
-var slideUp = function(closePos, btnID){
- $('.flash_message').animate({ marginTop: closePos }, function(){ changeIcon(btnID) });
-};
-
-var changeIcon = function(btnID){
-
- var iconID = "icon_" + btnID;
- $('div#icon_status').attr("class", iconID);
-
- if (btnID == "notice") {
- $('div.flash_message p').html("Woah! Slow down, I can't think that fast.");
- }
- else if (btnID == "failure") {
- $('div.flash_message p').html("Incorrect email or password. Please try again.");
- }
- else if (btnID == "success") {
- $('div.flash_message p').html("Account created successfully!");
- }
- else {
- return false;
- }
-};
-
-$(function(){
- // Slide down on page load
- slideDown();
- var flashHeight = $('div#flash').css("max-height"); // Grab height of Flash Message
- var boxShadowOffset = 4; // Define CSS Box-Shadow Height (pixels)
-
- // Calculate closed position of flash message
- // Negate height, parse to integer, add CSS shadow height
- var closePos = "-" + (parseInt(flashHeight) + boxShadowOffset) + "px";
-
- // On button click, slide up - change icon and text - slide down
- $('li button').click(function(){
- var btnID = $(this).attr("id");
- slideUp(closePos, btnID); // pass in flash message height & button ID
- slideDown(btnID);
- });
-
- // Slide up when close button is clicked
- $('#flash_close').click(function(){
- slideUp(closePos);
- });
-});
View
16 light-chrome/rails-view/_flashes.html.erb
@@ -1,16 +0,0 @@
-<div id="flash">
- <% flash.each do |key, value| -%>
- <div id="flash_<%= key %>" class="flash_message">
-
- <div id="flash_icon">
- <div id="icon_status" class="icon_<%= key %>">
- <div id="gloss"></div>
- </div>
- </div>
- <div id="flash-vrule"></div>
- <p><%=h value %></p>
- <div id="flash_close"><span class="close">&#215;</span></div>
-
- </div>
- <% end -%>
-</div>

0 comments on commit 19854c0

Please sign in to comment.