Permalink
Browse files

Refactored scss. Add transform mixin

  • Loading branch information...
1 parent 387f929 commit 24e27b797a630069f7690640cb94451fe68a41f8 Phil LaPier committed Apr 30, 2011
@@ -22,6 +22,9 @@ div#flash_wrapper {
z-index: 100; }
div#flash_wrapper div#flash div.flash_message {
border: 1px solid #282828;
+ -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 3px 0 black;
-moz-box-shadow: inset 0 -1px 0 0 #6f6f6f, 0 0 3px 0 black;
@@ -30,20 +33,17 @@ div#flash_wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+ height: 55px;
background: #595959;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #595959), color-stop(1, #3c3c3c));
background: -webkit-linear-gradient(top, #595959, #3c3c3c);
background: -moz-linear-gradient(top, #595959, #3c3c3c);
background: -ms-linear-gradient(top, #595959, #3c3c3c);
background: -o-linear-gradient(top, #595959, #3c3c3c);
background: linear-gradient(top, #595959, #3c3c3c);
- height: 55px;
margin: -55px 0 0;
overflow: hidden;
- padding: 15px 15px;
- -webkit-border-radius: 0 0 8px 8px;
- -moz-border-radius: 0 0 8px 8px;
- border-radius: 0 0 8px 8px; }
+ padding: 15px 15px; }
div#flash_wrapper div#flash div.flash_message div#flash-vrule {
background: #282828;
border-left: 1px solid #6f6f6f;
@@ -62,6 +62,7 @@ div#flash_wrapper {
width: 1px; }
div#flash_wrapper div#flash div.flash_message p {
color: white;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
display: -moz-inline-box;
@@ -71,9 +72,8 @@ div#flash_wrapper {
zoom: 1;
*display: inline;
*vertical-align: auto;
- margin: 2px 0px;
line-height: 15px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ margin: 2px 0px;
text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px; }
div#flash_wrapper div#flash div.flash_message div#flash_icon {
-webkit-border-radius: 30px;
@@ -75,4 +75,11 @@
-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;
}
@@ -68,15 +68,15 @@ div#flash_wrapper {
div.flash_message {
border: 1px solid $shadow;
+ @include border-radius(0 0 8px 8px);
border-top: 0;
- @include box-shadow( inset 0 -1px 0 0 $highlight, 0 0 3px 0 #000);
+ @include box-shadow(inset 0 -1px 0 0 $highlight, 0 0 3px 0 #000); // if adjusted, you may need to adjust jQuery boxShadowOffset in application.js
@include box-sizing(border-box);
- @include linear-gradient($chrome-from, $chrome-to);
height: $flashHeight;
+ @include linear-gradient($chrome-from, $chrome-to);
margin: -$flashHeight 0 0; //Negative margin
overflow: hidden;
padding: $vPadding 15px;
- @include border-radius(0 0 8px 8px);
div#flash-vrule {
background: $shadow;
@@ -91,12 +91,12 @@ div#flash_wrapper {
}
p {
color: $text-color;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: $fontSize;
font-weight: bold;
@include inline-block;
- margin: 2px 0px;
line-height: $fontSize;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ margin: 2px 0px;
text-shadow: $text-shadow 1px 1px 1px;
}
div#flash_icon {
@@ -167,10 +167,7 @@ div#flash_wrapper {
text-align: center;
}
&:hover {
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
+ @include transform(scale(1.2));
}
}
//hover over flash message to see close button. JS will slide flashes up regardless.
@@ -21,6 +21,9 @@ div#flash_wrapper {
z-index: 100; }
div#flash_wrapper div#flash div.flash_message {
border: 1px solid #bbbbbb;
+ -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;
@@ -29,50 +32,47 @@ div#flash_wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+ height: 55px;
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);
- height: 55px;
margin: -55px 0 0;
overflow: hidden;
- padding: 15px 15px;
- -webkit-border-radius: 0 0 8px 8px;
- -moz-border-radius: 0 0 8px 8px;
- border-radius: 0 0 8px 8px; }
+ padding: 15px 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: 17px;
+ height: 55px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
- height: 55px;
margin-right: 12px;
position: relative;
vertical-align: top;
width: 1px; }
div#flash_wrapper div#flash div.flash_message p {
color: #212121;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
+ line-height: 15px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
- line-height: 15px;
margin: 2px 0px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
div#flash_wrapper div#flash div.flash_message div#flash_icon {
-webkit-border-radius: 30px;
@@ -75,4 +75,11 @@
-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;
}
@@ -67,41 +67,41 @@ div#flash_wrapper {
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 you adjust the box-shadow height, adjust boxShadowHeight in jQuery as well.
+ @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);
- @include linear-gradient($chrome-from, $chrome-to);
height: $flashHeight;
+ @include linear-gradient($chrome-from, $chrome-to);
margin: -$flashHeight 0 0; //Negative margin
overflow: hidden;
padding: $vPadding 15px;
- @include border-radius(0 0 8px 8px);
div#flash-vrule {
background: hsla(100%, 100%, 100%, 0.4);
border-left: 1px solid $chrome-to;
bottom: $vPadding + 2;
- @include inline-block;
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;
+ @include inline-block;
margin: 2px 0px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
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));
+ @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));
@@ -167,10 +167,7 @@ div#flash_wrapper {
text-align: center;
}
&:hover {
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
+ @include transform(scale(1.2));
}
}
//hover over flash message to see close button. JS will slide flashes up regardless.

0 comments on commit 24e27b7

Please sign in to comment.