Form action styles update

Doesn’t conform to BEM.
Need to update places btn-success is being used and replace with
btn-primary, but the differences shouldn’t be too noticeable.

admin/client/src/components/FormAction/FormAction.scss

@@ -1,7 +1,9 @@
+// TODO Separate out bootstrap btn reset styles to a separate style sheet or divide within this sheet
+// TODO Rename component to something like Btn or Button?
 // General buttons
 .btn {
 	height: 32px;
-	margin-right: 1rem;
+	margin-right: $spacer-x * .75; // 12px
 	position: relative;
 }
 
@@ -14,26 +16,14 @@
 	line-height: 13px;
 }
 
-// Btn icons with no text require .btn--no-text
+
-.btn--no-text[class*="font-icon-"]::before {
+// For buttons with icon and no text, removes space after icon
+// TODO replace all .no-text classes for .btn--no-text
+.btn--no-text[class*="font-icon-"]::before,
+.no-text[class*="font-icon-"]::before {
 	margin-right: 0;
 }
 
-.btn-group {
-	margin-right: 1rem;
-
-	.btn {
-		margin-right: 0;
-	}
-
-	.btn-success {
-		border-left: 1px solid darken($btn-success-bg, 6%);
-
-		&:first-child {
-			border-left: none;
-		}
-	}
-}
 
 // SVG loading icon
 .btn__loading-icon {
@@ -48,30 +38,28 @@
 	svg {
 		width: 24px;
 		height: 20px;
+	}
 
-		circle {
+	circle {
-			width: 4px;
+		width: 4px;
-			height: 5px;
+		height: 5px;
-			animation: loading-icon 1.2s infinite ease-in-out both;
+		animation: loading-icon 1.2s infinite ease-in-out both;
-			fill: $gray;
+		fill: $gray;
-			transform-origin: 50% 50%;
+		transform-origin: 50% 50%;
-		}
+	}
 
-		circle:nth-child(1) {
+	circle:nth-child(1) {
-			animation-delay: -.32s;
+		animation-delay: -.32s;
-		}
+	}
 
-		circle:nth-child(2) {
+	circle:nth-child(2) {
-			animation-delay: -.16s;
+		animation-delay: -.16s;
-		}
 	}
 }
 
-.btn--loading {
+.btn--loading > span,
-	> span,
+.btn--loading::before {
-	&::before {
+	visibility: hidden;
-		visibility: hidden;
-	}
 }
 
 @keyframes loading-icon {
@@ -79,63 +67,91 @@
 	40% { transform: scale(1); }
 }
 
-// Specific button types
-.btn-link {
-	&:hover,
-	&:focus {
-		text-decoration: none;
-	}
-}
 
-.btn-secondary {
+// Specific button variations
-
+.btn-primary {
-	&:hover,
+	border-bottom-color: $btn-primary-shadow;
-	&:active,
-	&:active:focus,
-	&:active:hover,
-	&:focus {
-		background-color: $gray-lighter;
-	}
-
-	.toolbar--content & {
-		border-color: transparent;
-	}
-}
-
-.btn-success-outline {
-	border-color: lighten($brand-success,10%);
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: $brand-success;
-		background-image: none;
-		background-color: transparent;
-		border-color: lighten($brand-success,10%);
-	}
-
-	svg circle {
-		fill: $brand-success;
-	}
-}
-
-.btn-success {
-	box-shadow: 0 1px 0 $btn-success-shadow;
 
 	svg circle {
 		fill: #fff;
 	}
 }
+.btn-primary-outline {
+	border-color: lighten($btn-primary-border,10%);
 
-.btn--options {
+	&:hover,
+	&:active,
+	&:focus {
+		color: darken($btn-primary-bg, 10%);
+		background-image: none;
+		background-color: lighten($btn-primary-bg, 50%);
+		border-color: $btn-primary-border;
+	}
 
-  .font-icon-dot-3 {
+	svg circle {
-    font-size: 20px;
+		fill: $btn-primary-bg;
-    line-height: 20px;
+	}
-    color: $body-color;
+}
-  }
+
-
+
-  &:hover {
+.btn-secondary {
-    background-color: $gray-lighter;
+	border-color: transparent;
-  }
+	background-color: transparent;
+
+	&:hover,
+	&:active,
+	&:focus,
+	&:active:hover,
+	&:active:focus {
+		background-color: $gray-lighter;
+		border-color: transparent;
+	}
+}
+.btn-secondary-outline {
+	color: $btn-secondary-color;
+
+	&:hover,
+	&:focus,
+	&:active,
+	&:active:focus,
+	&:active:hover {
+		background-color: $gray-lighter;
+		color: $btn-secondary-color;
+	}
+
+	svg circle {
+		fill: $body-color;
+	}
+}
+
+
+// Trigger for the more options popup
+.btn__options {
+	@extend .btn-secondary;
+	@extend .btn--no-text;
+	font-size: 20px;
+  line-height: 20px;
+  color: $body-color;
+
+	&:hover {
+	  background-color: $btn-secondary-bg;
+	}
+}
+
+
+// Grouped buttons
+.btn-group {
+	margin-right: $spacer-x * .75; // 12px
+}
+
+.btn-group .btn {
+	margin-right: 0;
+}
+
+.btn-group .btn-primary {
+	border-left: 1px solid $btn-primary-shadow;
+
+	&:first-child {
+		border-left: none;
+	}
 }

admin/client/src/components/Preview/Preview.js

@@ -30,8 +30,7 @@ class Preview extends SilverStripeComponent {
         <a href="" className="cms-content__back-btn font-icon-left-open-big" />
         <div className="toolbar--south">
           <div className="btn-toolbar">
-            <button className="btn btn-secondary btn-secondary" type="button">
+            <button className="btn btn-secondary btn-secondary font-icon-edit" type="button">
-              <i className="font-icon-edit" /> Edit
             </button>
           </div>
         </div>

admin/client/src/styles/_typography.scss

@@ -5,7 +5,7 @@
  */
 
  // Tables
-// Used as a base for components: Grid-field.
+// Used as a base for components: GridField.
 
 .table {
   margin-left: -$spacer-x;

admin/client/src/styles/_variables.scss

@@ -32,7 +32,7 @@ $gray-light: #d3d9dd;
 $gray-lighter: #e8e9ea;
 // $gray-lightest: #f7f7f9;
 //
-$brand-primary: #29abe2; //#0275d8;
+$brand-primary: #29abe2;
 $brand-success: #3fa142;
 // $brand-info: #5bc0de;
 // $brand-warning: #f0ad4e;
@@ -253,38 +253,38 @@ $table-border-color: $gray-lighter;
 // For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-padding-x: .7692rem; // 10px
-$btn-padding-y: .3846rem;
+$btn-padding-y: .3846rem; // 5px
 $btn-font-weight: normal;
 
 $btn-primary-color: #fff;
-// $btn-primary-bg: $brand-primary;
+$btn-primary-bg: $brand-success;
-// $btn-primary-border: $btn-primary-bg;
+$btn-primary-border: $btn-primary-bg;
+$btn-primary-shadow: darken($btn-primary-bg, 6%);
 
-$btn-secondary-color: $gray-dark;
+$btn-secondary-color: $body-color;
-$btn-secondary-bg: transparent;
+$btn-secondary-bg: $gray-lighter;
-$btn-secondary-border: $border-color;
+$btn-secondary-border: $border-color-dark;
 
 // $btn-info-color: #fff;
 // $btn-info-bg: $brand-info;
 // $btn-info-border: $btn-info-bg;
 
-$btn-success-color: #fff;
+// $btn-success-color: #fff;
-$btn-success-bg: $brand-success;
+// $btn-success-bg: $brand-success;
-$btn-success-border: $btn-success-bg;
+// $btn-success-border: $btn-success-bg;
-$btn-success-shadow: darken($btn-success-bg, 6%);
 
 $btn-complete-color: #555;
-$btn-complete-bg: $brand-success;
+$btn-complete-bg: $btn-primary-bg;
 $btn-complete-border: $gray-light;
-$btn-complete-shadow: darken($btn-success-bg, 6%);
+$btn-complete-shadow: darken($btn-primary-bg, 6%);
 
 // $btn-warning-color: #fff;
 // $btn-warning-bg: $brand-warning;
 // $btn-warning-border: $btn-warning-bg;
 
-$btn-danger-color: $brand-danger;
+$btn-danger-color: #fff;
-$btn-danger-bg: transparent;
+$btn-danger-bg: $brand-danger;
-$btn-danger-border: transparent;
+$btn-danger-border: $brand-danger;
 
 // $btn-link-disabled-color: $gray-light;
 //