Update button and card styles

* fixed margins, border radius, visual display bugs, matched focus styles
Automattic · Oct 17, 2019 · f9554ac · f9554ac
1 parent 8e3f856
commit f9554ac
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 46 deletions.
diff --git a/_inc/client/at-a-glance/style.scss b/_inc/client/at-a-glance/style.scss
@@ -1,5 +1,7 @@
 // This document contains styles that influence the styles of Stats & At a Glance, overall.
 // For more precise styles, dig into the styles of each component. ie. dash-item
+@import '../scss/calypso-colors';
+
 .jp-at-a-glance {
 	margin-bottom: rem( 48px );
 }
@@ -78,13 +80,13 @@
 	margin: rem( 32px ) 0 0;
 
 	@include breakpoint( "<480px" ) {
-		box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+		box-shadow: 0 0 0 1px $light-gray-700;
 	}
 }
 
 .jp-at-a-glance__stats-summary {
 	text-align: center;
-	border-top: 1px $gray-light solid;
+	border-bottom: 1px $light-gray-700 solid;
 
 	@include breakpoint( ">660px" ) {
 		flex-wrap: nowrap;
@@ -100,7 +102,7 @@
 .jp-at-a-glance__stats-summary-bestday {
 	flex-basis: 25%;
 	padding: rem( 16px );
-	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+	box-shadow: 0 0 0 1px $light-gray-700;
 }
 
 .jp-at-a-glance__stats-summary-today {
@@ -125,10 +127,10 @@
 .jp-at-a-glance__stats-summary-alltime {
 	flex-basis: 50%;
 	padding: rem( 16px );
-	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+	box-shadow: 0 0 0 1px $light-gray-700;
 
 	@include breakpoint( ">660px" ) {
-		max-width: 40%; // for IE 10 since it doesn't recognize flex-basis
+		max-width: 50%; // for IE 10 since it doesn't recognize flex-basis
 		display: flex;
 		flex-grow: 1;
 		flex-shrink: 1;

diff --git a/_inc/client/components/button-group/style.scss b/_inc/client/components/button-group/style.scss
@@ -9,20 +9,18 @@
 			// fixes focus styles in stacking context
 			position: relative;
 			z-index: z-index( 'button-group-parent', '.button-group .button:focus' );
-			box-shadow: inset 1px 0 0 $blue-medium, 0 0 0 2px $blue-light;
 		}
 		&.is-primary:focus {
-			box-shadow: inset 1px 0 0 $blue-dark, 0 0 0 2px $blue-light;
+			box-shadow:
+				0 0 0 1px $white,
+				0 0 0 3px $blue-medium-dark;
 		}
 		&.is-scary:focus {
 			box-shadow: inset 1px 0 0 $alert-red, 0 0 0 2px lighten( $alert-red, 20% );
 		}
 		&.is-primary.is-scary:focus {
 			box-shadow: inset 1px 0 0 darken( $alert-red, 30% ), 0 0 0 2px lighten( $alert-red, 20% );
 		}
-		&:first-child:focus {
-			box-shadow: 0 0 0 2px $blue-light;
-		}
 		&.is-scary:first-child:focus {
 			box-shadow: 0 0 0 2px lighten( $alert-red, 20% );
 		}

diff --git a/_inc/client/components/button/style.scss b/_inc/client/components/button/style.scss
@@ -29,30 +29,21 @@
 	appearance: none;
 
 	&:hover {
-		// border-color: lighten( $gray, 10% );
-		// color: $gray-dark;
 		background: #f1f1f1;
-    	border-color: $blue-grey-dark;
-    	color: $blue-grey-dark;
-	}
-	&:active {
-		border-width: 2px 1px 1px;
+		border-color: $blue-grey-dark;
+		color: $blue-grey-dark;
 	}
 	&[disabled],
 	&:disabled {
 		color: lighten( $gray, 30% );
 		background: $white;
 		border-color: lighten( $gray, 30% );
 		cursor: default;
-
-		&:active {
-			border-width: 1px 1px 2px;
-		}
 	}
 	&:focus {
-		outline: 0;
-		border-color: $blue-medium;
-		box-shadow: 0 0 0 2px $blue-light;
+		background: $white;
+		border-color: $blue-medium-dark;
+		box-shadow: 0 0 0 1px $blue-medium-dark;
 	}
 	&.is-compact {
 		padding: 7px;
@@ -104,6 +95,11 @@
 		background: $blue-medium-dark;
 		color: $white;
 	}
+	&:focus {
+		box-shadow:
+			0 0 0 1px $white,
+			0 0 0 3px $blue-medium-dark;
+	}
 	&[disabled],
 	&:disabled {
 		background: tint( $blue-light, 50% );

diff --git a/_inc/client/components/card/style.scss b/_inc/client/components/card/style.scss
@@ -17,11 +17,9 @@ $section-border: #DDDDDD;
 	padding: 16px;
 	box-sizing: border-box;
 	background: $white;
-	/*box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );*/
-	border: 1px solid $light-gray-700;
-	box-shadow: 0 1px 1px rgba(0,0,0,.04);
-	border-radius: 2px;
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	@include clear-fix;
 
@@ -32,10 +30,10 @@ $section-border: #DDDDDD;
 
 	// Compact Card
 	&.is-compact {
-		margin-bottom: -1px;
+		margin-bottom: 1px;
 
 		@include breakpoint( ">480px" ) {
-			margin-bottom: -1px;
+			margin-bottom: 1px;
 			padding: 16px 24px;
 		}
 	}
@@ -68,4 +66,3 @@ a.dops-card:focus {
 		color: $link-highlight;
 	}
 }
-
diff --git a/_inc/client/components/dash-item/style.scss b/_inc/client/components/dash-item/style.scss
@@ -1,3 +1,5 @@
+@import '../../scss/calypso-colors';
+
 .jp-dash-item {
 	.jp-dash-item__content a {
 		font-style: italic;
@@ -33,7 +35,7 @@
 	font-weight: 500;
 	font-size: rem( 32px );
 	display: inline-block;
-	border: 1px solid $dashboard-number-border;
+	border: 1px solid $light-gray-700;
 	border-radius: 4px;
 	padding: 0px 4px;
 	min-width: 36px;
@@ -56,7 +58,6 @@
 
 .jp-dash-item .dops-section-header {
 	width: 100%;
-	margin-bottom: -1px;
 
 	.dops-button {
 		font-style: normal;

diff --git a/_inc/client/components/masthead/style.scss b/_inc/client/components/masthead/style.scss
@@ -1,8 +1,11 @@
+@import '../../scss/calypso-colors';
+
 .jp-masthead {
 	background-color: $white;
 	text-align: center;
-	box-shadow: 0 1px 0 transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 1px 0 $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	@media (max-width: rem( 782px ) ) {
 		padding: 0 rem( 24px );

diff --git a/_inc/client/components/section-nav/style.scss b/_inc/client/components/section-nav/style.scss
@@ -17,8 +17,9 @@
 	margin: 0 0 17px 0;
 	background: $white;
 	box-sizing: border-box;
-	border: 1px solid $light-gray-700;
-	box-shadow: 0 1px 1px rgba(0,0,0,.04);
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	&.is-empty .dops-section-nav__panel {
 		visibility: hidden;

diff --git a/_inc/client/components/settings-group/style.scss b/_inc/client/components/settings-group/style.scss
@@ -1,6 +1,6 @@
 .jp-form-settings-group {
 	position: relative;
-	margin-bottom: -1px;
+	margin-bottom: 0;
 
 	p {
 		font-size: rem( 14px );

diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss
@@ -1,3 +1,5 @@
+@import '../scss/calypso-colors';
+
 .jp-landing__plans.dops-card {
 	padding: 0;
 }
@@ -56,8 +58,9 @@
 	box-sizing: border-box;
 	margin: rem( 8px );
 	background-color: $white;
-	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	&:last-child {
 		max-width: 100%;

diff --git a/_inc/client/plans/style.scss b/_inc/client/plans/style.scss
@@ -1,3 +1,4 @@
+@import '../scss/calypso-colors';
 // Plans Tables
 
 $plan-features-header-banner-height: 20px;
@@ -61,8 +62,8 @@ $plan-features-sidebar-width: 272px;
 }
 
 .plan-features__table-item {
-	border-right: solid 1px lighten( $gray, 27% );
-	border-left: solid 1px lighten( $gray, 27% );
+	border-right: solid 1px $light-gray-700;
+	border-left: solid 1px $light-gray-700;
 	background-color: $white;
 	position: relative;
 
@@ -104,19 +105,19 @@ $plan-features-sidebar-width: 272px;
 		display: block;
 		height: 1px;
 		width: calc( 100% - 24px );
-		border-bottom: 1px solid lighten( $gray, 27% );
+		border-bottom: 1px solid $light-gray-700;
 		position: absolute;
 		bottom: 0;
 		margin: 0 12px;
 	}
 }
 
 .plan-features__table-item.has-border-bottom {
-	border-bottom: solid 1px lighten( $gray, 27% );
+	border-bottom: solid 1px $light-gray-700;
 }
 
 .plan-features__table-item.has-border-top {
-	border-top: solid 1px lighten( $gray, 27% );
+	border-top: solid 1px $light-gray-700;
 }
 
 .plan-features__table-item.is-placeholder {