From 5b2d910aeb21f028d32aec67b058222162a33341 Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Tue, 26 Apr 2016 19:36:38 +1200 Subject: [PATCH] Form action styles update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/components/FormAction/FormAction.scss | 190 ++++++++++-------- .../client/src/components/Preview/Preview.js | 3 +- admin/client/src/styles/_typography.scss | 2 +- admin/client/src/styles/_variables.scss | 32 +-- 4 files changed, 121 insertions(+), 106 deletions(-) diff --git a/admin/client/src/components/FormAction/FormAction.scss b/admin/client/src/components/FormAction/FormAction.scss index ddd3ddbb5..d306d67c2 100644 --- a/admin/client/src/components/FormAction/FormAction.scss +++ b/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 { - width: 4px; - height: 5px; - animation: loading-icon 1.2s infinite ease-in-out both; - fill: $gray; - transform-origin: 50% 50%; - } + circle { + width: 4px; + height: 5px; + animation: loading-icon 1.2s infinite ease-in-out both; + fill: $gray; + transform-origin: 50% 50%; + } - circle:nth-child(1) { - animation-delay: -.32s; - } + circle:nth-child(1) { + animation-delay: -.32s; + } - circle:nth-child(2) { - animation-delay: -.16s; - } + circle:nth-child(2) { + animation-delay: -.16s; } } -.btn--loading { - > span, - &::before { - visibility: hidden; - } +.btn--loading > span, +.btn--loading::before { + 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 { - - &:hover, - &: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; +// Specific button variations +.btn-primary { + border-bottom-color: $btn-primary-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 { - font-size: 20px; - line-height: 20px; - color: $body-color; - } - - &:hover { - background-color: $gray-lighter; - } + svg circle { + fill: $btn-primary-bg; + } +} + + +.btn-secondary { + 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; + } } diff --git a/admin/client/src/components/Preview/Preview.js b/admin/client/src/components/Preview/Preview.js index ab8af880b..d1bafe99c 100644 --- a/admin/client/src/components/Preview/Preview.js +++ b/admin/client/src/components/Preview/Preview.js @@ -30,8 +30,7 @@ class Preview extends SilverStripeComponent {
-
diff --git a/admin/client/src/styles/_typography.scss b/admin/client/src/styles/_typography.scss index f7d154e5c..c5b1b5887 100644 --- a/admin/client/src/styles/_typography.scss +++ b/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; diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss index 2d1fdf639..6a5d2f9cf 100644 --- a/admin/client/src/styles/_variables.scss +++ b/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-border: $btn-primary-bg; +$btn-primary-bg: $brand-success; +$btn-primary-border: $btn-primary-bg; +$btn-primary-shadow: darken($btn-primary-bg, 6%); -$btn-secondary-color: $gray-dark; -$btn-secondary-bg: transparent; -$btn-secondary-border: $border-color; +$btn-secondary-color: $body-color; +$btn-secondary-bg: $gray-lighter; +$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-bg: $brand-success; -$btn-success-border: $btn-success-bg; -$btn-success-shadow: darken($btn-success-bg, 6%); +// $btn-success-color: #fff; +// $btn-success-bg: $brand-success; +// $btn-success-border: $btn-success-bg; $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-bg: transparent; -$btn-danger-border: transparent; +$btn-danger-color: #fff; +$btn-danger-bg: $brand-danger; +$btn-danger-border: $brand-danger; // $btn-link-disabled-color: $gray-light; //