Browse Source

remove mixins for box-shadow and border radius

these are pretty much supported already. let's cut the fat.
Eddie Machado 13 years ago
parent
commit
2b7cb35b5d
5 changed files with 23 additions and 113 deletions
  1. 1 30
      library/css/ie.css
  2. 4 12
      library/css/login.css
  3. 0 0
      library/css/style.css
  4. 10 55
      library/scss/_mixins.scss
  5. 8 16
      library/scss/login.scss

+ 1 - 30
library/css/ie.css

@@ -27,8 +27,7 @@ This is where you can take advantage of Sass' great features:
 Mixins & Constants. I won't go in-depth on how they work exactly,
 Mixins & Constants. I won't go in-depth on how they work exactly,
 there are a few articles below that will help do that. What I will
 there are a few articles below that will help do that. What I will
 tell you is that this will help speed up simple changes like
 tell you is that this will help speed up simple changes like
-changing a color or adding CSS3 techniques like box shadow and
-border-radius.
+changing a color or adding CSS3 techniques gradients.
 
 
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 remember less is more.
 remember less is more.
@@ -127,15 +126,6 @@ span.amp {
   border-color: #deeaae;
   border-color: #deeaae;
   background: #e6efc2; }
   background: #e6efc2; }
 
 
-/*********************
-BORDER RADIUS
-*********************/
-/*
-I totally rewrote this to be cleaner and easier to use.
-You'll need to be using Sass 3.2+ for these to work.
-Thanks to @anthonyshort for the inspiration on these.
-USAGE: @include border-radius(4px 4px 0 0);
-*/
 /*********************
 /*********************
 TRANISTION
 TRANISTION
 *********************/
 *********************/
@@ -146,15 +136,6 @@ Thanks to @anthonyshort for the inspiration on these.
 USAGE: @include transition(all 0.2s ease-in-out);
 USAGE: @include transition(all 0.2s ease-in-out);
 */
 */
 /*********************
 /*********************
-BOX SHADOWS
-*********************/
-/*
-I totally rewrote this to be cleaner and easier to use.
-You'll need to be using Sass 3.2+ for these to work.
-Thanks to @anthonyshort for the inspiration on these.
-USAGE: @include box-shadow(inset 0 0 4px rgba(0,0,0,0.22));
-*/
-/*********************
 CSS3 GRADIENTS
 CSS3 GRADIENTS
 Be careful with these since they can
 Be careful with these since they can
 really slow down your CSS. Don't overdue it.
 really slow down your CSS. Don't overdue it.
@@ -184,11 +165,6 @@ BUTTONS
   cursor: pointer;
   cursor: pointer;
   margin-bottom: 20px;
   margin-bottom: 20px;
   line-height: 21px;
   line-height: 21px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  -border-radius: 4px;
   border-radius: 4px;
   border-radius: 4px;
   background-color: #e40f42;
   background-color: #e40f42;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42));
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42));
@@ -224,11 +200,6 @@ BUTTONS
   background-image: -moz-linear-gradient(top, #1990db, #1681c4);
   background-image: -moz-linear-gradient(top, #1990db, #1681c4);
   background-image: -o-linear-gradient(top, #1990db, #1681c4);
   background-image: -o-linear-gradient(top, #1990db, #1681c4);
   background-image: linear-gradient(to bottom, #1990db, #1681c4);
   background-image: linear-gradient(to bottom, #1990db, #1681c4);
-  -webkit-box-shadow: inset 0 0 3px #59b3ec;
-  -moz-box-shadow: inset 0 0 3px #59b3ec;
-  -ms-box-shadow: inset 0 0 3px #59b3ec;
-  -o-box-shadow: inset 0 0 3px #59b3ec;
-  -box-shadow: inset 0 0 3px #59b3ec;
   box-shadow: inset 0 0 3px #59b3ec; }
   box-shadow: inset 0 0 3px #59b3ec; }
   .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus {
   .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus {
     border-color: #116396;
     border-color: #116396;

+ 4 - 12
library/css/login.css

@@ -1,11 +1,11 @@
 /******************************************************************
 /******************************************************************
-Site Name: 
-Author: 
+Site Name:
+Author:
 
 
 Stylesheet: Login Stylesheet
 Stylesheet: Login Stylesheet
 
 
-This stylesheet is loaded (if admin.php is setup in your 
-functions file) on the login page. This way you can style 
+This stylesheet is loaded (if admin.php is setup in your
+functions file) on the login page. This way you can style
 the login page. It won't affect any other page, admin or front-end.
 the login page. It won't affect any other page, admin or front-end.
 
 
 For more info, check out the codex:
 For more info, check out the codex:
@@ -34,13 +34,7 @@ form {
   font-weight: normal;
   font-weight: normal;
   background: white;
   background: white;
   border: 1px solid #E5E5E5;
   border: 1px solid #E5E5E5;
-  -webkit-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  -moz-border-radius: 3px;
   border-radius: 3px;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-  -khtml-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none; }
   box-shadow: none; }
 
 
 body form .input {
 body form .input {
@@ -55,8 +49,6 @@ body form .input {
   border: 1px solid #E5E5E5;
   border: 1px solid #E5E5E5;
   background: #FBFBFB;
   background: #FBFBFB;
   outline: none;
   outline: none;
-  -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
-  -moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
   box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); }
   box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); }
 
 
 /*
 /*

File diff suppressed because it is too large
+ 0 - 0
library/css/style.css


+ 10 - 55
library/scss/_mixins.scss

@@ -8,8 +8,7 @@ This is where you can take advantage of Sass' great features:
 Mixins & Constants. I won't go in-depth on how they work exactly,
 Mixins & Constants. I won't go in-depth on how they work exactly,
 there are a few articles below that will help do that. What I will
 there are a few articles below that will help do that. What I will
 tell you is that this will help speed up simple changes like
 tell you is that this will help speed up simple changes like
-changing a color or adding CSS3 techniques like box shadow and
-border-radius.
+changing a color or adding CSS3 techniques gradients.
 
 
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 remember less is more.
 remember less is more.
@@ -32,13 +31,13 @@ TOOLS
 *********************/
 *********************/
 
 
 // BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
 // BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
-* { 
-	-webkit-box-sizing: border-box; 
-	-moz-box-sizing:    border-box; 
-	box-sizing:         border-box; 
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing:    border-box;
+	box-sizing:         border-box;
 }
 }
 
 
-// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ 
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
 .image-replacement {
 .image-replacement {
 	text-indent: 100%;
 	text-indent: 100%;
 	white-space: nowrap;
 	white-space: nowrap;
@@ -110,7 +109,7 @@ span.amp {
   font-style: italic;
   font-style: italic;
 }
 }
 
 
-// text alignment 
+// text alignment
 .text-left   { text-align: left; }
 .text-left   { text-align: left; }
 .text-center { text-align: center; }
 .text-center { text-align: center; }
 .text-right  { text-align: right; }
 .text-right  { text-align: right; }
@@ -147,27 +146,6 @@ span.amp {
 	background: $alert-green;
 	background: $alert-green;
 }
 }
 
 
-/*********************
-BORDER RADIUS
-*********************/
-
-/*
-I totally rewrote this to be cleaner and easier to use.
-You'll need to be using Sass 3.2+ for these to work.
-Thanks to @anthonyshort for the inspiration on these.
-USAGE: @include border-radius(4px 4px 0 0);
-*/
-
-@mixin border-radius($radius...) {
-	// defining prefixes so we can use them in mixins below
-	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
-  @each $prefix in $prefixes {
-    #{$prefix}-border-radius: $radius;
-  }
-
-  border-radius: $radius;
-}
-
 /*********************
 /*********************
 TRANISTION
 TRANISTION
 *********************/
 *********************/
@@ -181,7 +159,7 @@ USAGE: @include transition(all 0.2s ease-in-out);
 
 
 @mixin transition($transition...) {
 @mixin transition($transition...) {
 	// defining prefixes so we can use them in mixins below
 	// defining prefixes so we can use them in mixins below
-	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
+	$prefixes:      ("-webkit", "-ms", "-o",  "");
   @each $prefix in $prefixes {
   @each $prefix in $prefixes {
     #{$prefix}-transition: $transition;
     #{$prefix}-transition: $transition;
   }
   }
@@ -189,29 +167,6 @@ USAGE: @include transition(all 0.2s ease-in-out);
   transition: $transition;
   transition: $transition;
 }
 }
 
 
-
-/*********************
-BOX SHADOWS
-*********************/
-
-/*
-I totally rewrote this to be cleaner and easier to use.
-You'll need to be using Sass 3.2+ for these to work.
-Thanks to @anthonyshort for the inspiration on these.
-USAGE: @include box-shadow(inset 0 0 4px rgba(0,0,0,0.22));
-*/
-
-@mixin box-shadow($shadow...) {
-	// defining prefixes so we can use them in mixins below
-	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
-  @each $prefix in $prefixes {
-    #{$prefix}-box-shadow: $shadow;
-  }
-
-  box-shadow: $shadow;
-}
-
-
 /*********************
 /*********************
 CSS3 GRADIENTS
 CSS3 GRADIENTS
 Be careful with these since they can
 Be careful with these since they can
@@ -262,7 +217,7 @@ BUTTONS
 	cursor: pointer;
 	cursor: pointer;
 	margin-bottom: 20px;
 	margin-bottom: 20px;
 	line-height: 21px;
 	line-height: 21px;
-	@include border-radius(4px);
+	border-radius: 4px;
 	@include css-gradient($link-color, darken($link-color, 5%));
 	@include css-gradient($link-color, darken($link-color, 5%));
 
 
 
 
@@ -283,7 +238,7 @@ BUTTONS
 	border-color: darken($bones-blue, 10%);
 	border-color: darken($bones-blue, 10%);
 	text-shadow: 0 1px 1px darken($bones-blue, 10%);
 	text-shadow: 0 1px 1px darken($bones-blue, 10%);
 	@include css-gradient( $bones-blue, darken($bones-blue, 5%) );
 	@include css-gradient( $bones-blue, darken($bones-blue, 5%) );
-	@include box-shadow(inset 0 0 3px lighten($bones-blue, 16%));
+	box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
 
 
 	&:hover, &:focus {
 	&:hover, &:focus {
 		border-color: darken($bones-blue, 15%);
 		border-color: darken($bones-blue, 15%);

+ 8 - 16
library/scss/login.scss

@@ -1,11 +1,11 @@
 /******************************************************************
 /******************************************************************
-Site Name: 
-Author: 
+Site Name:
+Author:
 
 
 Stylesheet: Login Stylesheet
 Stylesheet: Login Stylesheet
 
 
-This stylesheet is loaded (if admin.php is setup in your 
-functions file) on the login page. This way you can style 
+This stylesheet is loaded (if admin.php is setup in your
+functions file) on the login page. This way you can style
 the login page. It won't affect any other page, admin or front-end.
 the login page. It won't affect any other page, admin or front-end.
 
 
 For more info, check out the codex:
 For more info, check out the codex:
@@ -14,7 +14,7 @@ http://codex.wordpress.org/Creating_Admin_Themes
 ******************************************************************/
 ******************************************************************/
 
 
 
 
-body.login {} 
+body.login {}
 
 
 
 
 #login {} /* the form box */
 #login {} /* the form box */
@@ -40,14 +40,8 @@ form {
 	font-weight: normal;
 	font-weight: normal;
 	background: white;
 	background: white;
 	border: 1px solid #E5E5E5;
 	border: 1px solid #E5E5E5;
-	-webkit-border-radius: 3px;
-	 -khtml-border-radius: 3px;
-	   -moz-border-radius: 3px;
-			border-radius: 3px;
-	-webkit-box-shadow: none;
-	 -khtml-box-shadow: none;
-	   -moz-box-shadow: none;
-			box-shadow: none;
+	border-radius: 3px;
+	box-shadow: none;
 }
 }
 
 
 body form .input {
 body form .input {
@@ -62,9 +56,7 @@ body form .input {
 	border: 1px solid #E5E5E5;
 	border: 1px solid #E5E5E5;
 	background: #FBFBFB;
 	background: #FBFBFB;
 	outline: none;
 	outline: none;
-	-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
-	   -moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
-			box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
+	box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
 }
 }
 
 
 /*
 /*

Some files were not shown because too many files changed in this diff