Skip to content

Commit

Permalink
New Readme and install instructions. Reorganized file structure for c…
Browse files Browse the repository at this point in the history 
…hanges to come.
  • Loading branch information
Phil LaPier committed May 8, 2011
1 parent d193ee1 commit 19854c0
Show file tree
Hide file tree
Showing 19 changed files with 209 additions and 569 deletions.
29 changes: 29 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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:
9 changes: 0 additions & 9 deletions README.rdoc
View file

This file was deleted.

116 changes: 0 additions & 116 deletions dark-chrome/css/screen.css
View file

This file was deleted.

0 dark-chrome/css/flashes.css → demo/css/dark-chrome-flashes.css
View file
File renamed without changes.
116 changes: 58 additions & 58 deletions light-chrome/css/flashes.css → demo/css/light-chrome-flashes.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 19854c0

Please sign in to comment.