Permalink
Browse files

New button-container. Changed .minor-group so interaction states are …

…distinct from normal buttons, and it works in older browsers
  • Loading branch information...
1 parent 7bce1a6 commit 557f303b41c8f10080f09573524b71eb67c3ac09 @necolas necolas committed Mar 1, 2011
Showing with 26 additions and 13 deletions.
  1. +26 −13 stylesheets/css3buttons.css
@@ -284,6 +284,9 @@ Licensed under Unlicense
margin: 0;
}
+.button + .button,
+.button + .button-group,
+.button-group + .button,
.button-group + .button-group {
margin-left: 15px;
}
@@ -303,6 +306,13 @@ Licensed under Unlicense
margin-left: -1px;
}
+.button-group > .button:not(:first-child):not(:last-child),
+.button-group li:not(:first-child):not(:last-child) > .button {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
.button-group > .button:first-child,
.button-group li:first-child > .button {
margin-left: 0;
@@ -314,13 +324,6 @@ Licensed under Unlicense
border-bottom-right-radius: 0;
}
-.button-group > .button:not(:first-child):not(:last-child),
-.button-group li:not(:first-child):not(:last-child) > .button {
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
-}
-
.button-group > .button:last-child,
.button-group li:last-child > .button {
-webkit-border-top-left-radius: 0;
@@ -334,15 +337,25 @@ Licensed under Unlicense
/* ............................................................................................................. Minor */
.button-group.minor-group .button {
+ border: 1px solid #d4d4d4;
text-shadow: none;
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
- background-image: -moz-linear-gradient(#fff, #fff);
- background-image: linear-gradient(#fff, #fff);
+ background: #fff;
}
.button-group.minor-group .button:hover,
.button-group.minor-group .button:focus,
.button-group.minor-group .button:active {
- text-shadow: none;
- background-image: none;
-}
+ background: #599bdc;
+}
+
+.button-group.minor-group .button:active,
+.button-group.minor-group .button.active {
+ background: #3072b3;
+}
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
+/* For mixing buttons and button groups, e.g., in a navigation bar */
+
+.button-container .button {
+ vertical-align:top;
+}

0 comments on commit 557f303

Please sign in to comment.