Merge pull request #473 from civicrm/CPS-332-support-new-button-markup

CPS-322: Support new Button markup
civicrm · Nov 5, 2020 · 5bf1577 · 5bf1577
2 parents 70d4e3a + 311fea7
commit 5bf1577
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/scss/bootstrap/overrides/crm/_button.scss b/scss/bootstrap/overrides/crm/_button.scss
@@ -12,12 +12,9 @@
 .crm-button-type-cancel,
 .crm-button-type-delete {
   border-color: $gray-light;
+  color: $gray-darker !important;
 
-  input {
-    color: $gray-darker !important;
-  }
-
-  input:hover {
+  &:hover {
     color: $gray-dark !important;
   }
 }
diff --git a/scss/civicrm/administer/civi-case/_case-types.scss b/scss/civicrm/administer/civi-case/_case-types.scss
@@ -41,6 +41,28 @@
         }
       }
     }
+
+    .crm-button {
+      @extend %btn-civi;
+
+      &[crm-icon=fa-check] {
+        @extend %btn-civi-primary;
+        padding: 8px 19px;
+      }
+
+      &[crm-icon=fa-times] {
+        @extend %btn-civi-secondary-outline;
+        border: solid 1px $gray-dark;
+        color: $gray;
+        margin: 0;
+        padding: 7px 19px;
+
+        &:hover {
+          background: $gray-dark;
+          color: $crm-white;
+        }
+      }
+    }
   }
 
   table tr.forked {

diff --git a/scss/civicrm/administer/common/_common.scss b/scss/civicrm/administer/common/_common.scss
@@ -59,28 +59,6 @@ ul.civihr-popup {
         margin-right: 0;
       }
     }
-
-    .crm-button {
-      @extend %btn-civi;
-
-      &[crm-icon=fa-check] {
-        @extend %btn-civi-primary;
-        padding: 8px 19px;
-      }
-
-      &[crm-icon=fa-times] {
-        @extend %btn-civi-secondary-outline;
-        border: solid 1px $gray-dark;
-        color: $gray;
-        margin: 0;
-        padding: 7px 19px;
-
-        &:hover {
-          background: $gray-dark;
-          color: $crm-white;
-        }
-      }
-    }
   }
 
   .action-link {

diff --git a/scss/civicrm/administer/contribute/_managepremiums.scss b/scss/civicrm/administer/contribute/_managepremiums.scss
@@ -20,14 +20,15 @@
       }
 
       .premium-full-disabled {
-        input[type='button'] {
+        button {
+          background: darken($crm-copy, $crm-darken-percentage);
           margin: 20px 0;
         }
       }
 
       .crm-contribution-manage_premiums-form-block {
         padding: 0;
-        
+
         .collapsible-title {
           margin-bottom: 0;
         }

diff --git a/scss/civicrm/administer/display/_display.scss b/scss/civicrm/administer/display/_display.scss
@@ -73,13 +73,8 @@
         padding: 0;
       }
 
-      .crm-i {
-        margin: 0 -25px 0 15px !important;
-      }
-
       #ckeditor_config {
-        margin: 0 !important;
-        padding-left: 30px;
+        padding: 8px 12px;
       }
     }
   }

diff --git a/scss/civicrm/common/_buttons.scss b/scss/civicrm/common/_buttons.scss
@@ -56,10 +56,11 @@ $button-border-radius: 2px;
     }
   }
 
-  input.crm-form-submit {
+  button.crm-form-submit {
     background: $brand-primary;
     border-color: $brand-primary;
     border-radius: $border-radius-base;
+    box-sizing: content-box;
     font-family: $font-family-base;
     margin-right: 0;
     padding: 8px 12px;
@@ -102,7 +103,7 @@ $button-border-radius: 2px;
       }
     }
 
-    input.crm-form-submit {
+    button.crm-form-submit {
       color: $crm-cancel-color !important;
 
       &:hover {
@@ -151,15 +152,12 @@ $button-border-radius: 2px;
 
       .crm-button-type-cancel,
       .crm-button-type-back {
-        input {
-          border: solid 1px $gray-dark;
-          ///The default theme uses "!important"
-          color: $crm-cancel-color !important;
-
-          &:hover {
-            background: darken($crm-copy, $crm-darken-percentage);
-            color: $crm-white !important;
-          }
+        border: solid 1px $gray-dark;
+        color: $crm-cancel-color !important; // The default theme uses "!important"
+
+        &:hover {
+          background: darken($crm-copy, $crm-darken-percentage);
+          color: $crm-white !important;
         }
       }
     }
@@ -178,8 +176,8 @@ $button-border-radius: 2px;
     line-height: 35px;
   }
 
-  #crm-submit-buttons input.crm-form-submit,
-  .crm-button input.crm-form-submit,
+  #crm-submit-buttons button.crm-form-submit,
+  button.crm-button.crm-form-submit,
   .crm-hover-button,
   .ui-dialog-buttonset .ui-button,
   a.button,
@@ -254,15 +252,13 @@ $button-border-radius: 2px;
     .crm-i {
       background-color: transparent !important;
       color: $crm-white;
-      padding: 2px 3px;
-      top: 0;
+      padding: 0 2px;
     }
   }
 
   .crm-i {
     line-height: inherit;
     text-shadow: none;
-    vertical-align: middle;
   }
 
   .crm-button-type-refresh {
@@ -381,8 +377,9 @@ button {
   border: 0;
   border-radius: $border-radius-base;
   color: $crm-white;
+  cursor: pointer;
   font-family: $font-family-base;
-  line-height: 1;
+  line-height: $line-height-base;
   padding: 11px 12px;
   text-shadow: none;
   text-transform: uppercase;

diff --git a/scss/civicrm/contact/pages/_contributions.scss b/scss/civicrm/contact/pages/_contributions.scss
@@ -1013,7 +1013,7 @@ form.CRM_Contribute_Form_ContributionCharts {
   .form-layout-compressed {
     margin: 20px 0 0;
 
-    input.crm-form-submit {
+    button.crm-form-submit {
       margin-left: 5px;
       padding: 4px 10px;
       text-shadow: none;

diff --git a/scss/civicrm/financial/_batchtransaction.scss b/scss/civicrm/financial/_batchtransaction.scss
@@ -23,7 +23,7 @@
     }
 
     .form-layout-compressed {
-      input.crm-form-submit {
+      button.crm-form-submit {
         margin-left: 5px;
         padding: 4px 10px;
         vertical-align: middle;

diff --git a/scss/civicrm/search/pages/_advanced-search.scss b/scss/civicrm/search/pages/_advanced-search.scss
@@ -6,13 +6,9 @@
   }
 
   .form-layout {
-    .crm-i-button {
+    .crm-form-submit {
       margin-left: 20px;
       margin-top: 15px;
-
-      .crm-i { /* stylelint-disable-line selector-max-compound-selectors */
-        top: -2px;
-      }
     }
   }
 }
diff --git a/scss/civicrm/search/pages/_full-text-search.scss b/scss/civicrm/search/pages/_full-text-search.scss
@@ -2,9 +2,11 @@
 
 .CRM_Contact_Form_Search_Custom .crm-search-form-block table.form-layout-compressed {
   td {
-    input.crm-form-submit {
+    button.crm-form-submit {
       @extend .btn-sm;
+      float: none;
       margin-left: 20px !important;
+      vertical-align: initial;
     }
   }