more specific variables for footer buttons. resolves #10

JedWatson · Jun 9, 2015 · 215d7ab · 215d7ab
1 parent b82c0ab
commit 215d7ab
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/less/dateselect.less b/less/dateselect.less
@@ -283,7 +283,7 @@
 	#DateSelect .gradient-vertical(lighten(@DateSelect-header-bg, 4%), darken(@DateSelect-header-bg, 4%));
 	background-color: @DateSelect-header-bg;
 	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 white;
-	color: white;
+	color: @DateSelect-header-color;
 	display: block;
 	text-align: center;
 }
@@ -447,8 +447,8 @@
 	}
 }
 .DateSelectFooter__button--primary {
-	color: @DateSelect-primary;
-	font-weight: 500;
+	color: @DateSelect-footer-single-button-primary-color;
+	font-weight: @DateSelect-footer-button-font-weight-primary;
 }
 
 
@@ -461,11 +461,10 @@
 	.DateSelectFooter__button {
 		&:hover,
 		&:focus {
-			background-color: rgba(255, 255, 255, 0.66);
+			background-color: @DateSelect-footer-single-button-hover-bg;
 		}
 		&:active {
-			background-color: rgba(0, 0, 0, 0.05);
-			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+			background-color: @DateSelect-footer-single-button-active-bg;
 		}
 
 		&:first-child {
@@ -491,14 +490,11 @@
 	.DateSelectFooter__button {
 		background: none;
 		border-radius: .25em;
-		border: 0;
-		border: 1px solid transparent;
+		border: none;
 		cursor: pointer;
 		display: inline-block;
-		display: inline-block;
 		float: none;
 		font-size: inherit;
-		font-weight: 500;
 		height: 2.4em;
 		line-height: 2.3em;
 		margin-bottom: 0;
@@ -513,7 +509,7 @@
 		&:hover,
 		&:focus,
 		&.focus {
-			color: @DateSelect-primary;
+			color: @DateSelect-footer-multi-button-hover-color;
 			text-decoration: none;
 		}
 
@@ -530,24 +526,24 @@
 		}
 	}
 	.DateSelectFooter__button--primary {
-		#DateSelect .gradient-vertical(lighten(@DateSelect-primary, 4%), darken(@DateSelect-primary, 4%));
-		background-color: @DateSelect-primary;
-		color: white;
+		#DateSelect .gradient-vertical(lighten(@DateSelect-footer-multi-button-primary-bg, 4%), darken(@DateSelect-footer-multi-button-primary-bg, 4%));
+		background-color: @DateSelect-footer-multi-button-primary-bg;
+		color: @DateSelect-footer-multi-button-primary-color;
 
 		&:hover,
 		&:focus,
 		&.focus {
-			#DateSelect .gradient-vertical(lighten(@DateSelect-primary, 8%), @DateSelect-primary);
-			color: white;
+			#DateSelect .gradient-vertical(lighten(@DateSelect-footer-multi-button-primary-bg, 8%), @DateSelect-footer-multi-button-primary-bg);
+			color: @DateSelect-footer-multi-button-primary-color;
 			outline: none;
 		}
 		&:focus,
 		&.focus {
-			box-shadow: 0 0 0 3px fade(@DateSelect-primary, 25%);
+			box-shadow: 0 0 0 3px fade(@DateSelect-footer-multi-button-primary-bg, 25%);
 		}
 		&:active,
 		&.active {
-			background-color: darken(@DateSelect-primary, 5%);
+			background-color: darken(@DateSelect-footer-multi-button-primary-bg, 5%);
 			background-image: none;
 			box-shadow: none;
 		}

diff --git a/less/variables.less b/less/variables.less
@@ -15,9 +15,7 @@
 @DateSelect-backdrop-bg:                rgba(0, 0, 0, 0.5);
 
 @DateSelect-header-bg:                  desaturate(@DateSelect-primary, 10%);
-@DateSelect-footer-bg:                  darken(@DateSelect-bg, 5%);
-@DateSelect-footer-border:              darken(@DateSelect-bg, 15%);
-@DateSelect-footer-color:               #666;
+@DateSelect-header-color:               white;
 
 @DateSelect-selected-day-bg:            @DateSelect-primary;
 @DateSelect-selected-day-color:         white;
@@ -51,6 +49,36 @@
 
 
 
+// Footer / Buttons
+// ------------------------------
+
+
+// common
+
+@DateSelect-footer-bg:                  darken(@DateSelect-bg, 5%);
+@DateSelect-footer-border:              darken(@DateSelect-bg, 15%);
+@DateSelect-footer-color:               #666;
+@DateSelect-footer-button-font-weight:  normal;
+@DateSelect-footer-button-font-weight-primary: 500;
+
+
+// single picker
+
+@DateSelect-footer-single-button-primary-color:   @DateSelect-primary;
+@DateSelect-footer-single-button-hover-bg:   rgba(255, 255, 255, 0.66);
+@DateSelect-footer-single-button-active-bg:  rgba(0, 0, 0, 0.05);
+
+
+// multi picker
+
+@DateSelect-footer-multi-button-primary-bg:     @DateSelect-primary;
+@DateSelect-footer-multi-button-primary-color:  white;
+@DateSelect-footer-multi-button-color:          @DateSelect-footer-color;
+@DateSelect-footer-multi-button-hover-color:    @DateSelect-primary;
+
+
+
+
 // Z-Index List
 // ------------------------------