From fe9177c44aec04d29eb936a2100414a0af54e8f2 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <code.commits@artfulrobot.uk>
Date: Fri, 15 Dec 2023 11:06:51 +0000
Subject: [PATCH] SK, buttons improvements

---
 src/_custom-properties.scss |  7 ++-
 src/civicrm.scss            | 98 +++++++++++++++++++++++++++++--------
 2 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/src/_custom-properties.scss b/src/_custom-properties.scss
index 4e32ada..b6c214e 100644
--- a/src/_custom-properties.scss
+++ b/src/_custom-properties.scss
@@ -1,6 +1,11 @@
 :root {
+  --aah-colour-brand: #{$colourArtfulBrightBlue};
+  --aah-colour-brand-dark: #{$colourArtfulDarkBlue};
+
   --aah-button-bg: #{$colourArtfulBrightBlue};
   --aah-button-bg-hover: #{darken($colourArtfulBrightBlue, 10%)};
-  --aah-button-bg-secondary: #{$colourArtfulDarkBlue};
+  --aah-button-bg-secondary: transparent;
+  --aah-button-bg-secondary-hover: #{$colourVeryLightBlue};
+  --aah-button-colour-secondary: #{$colourArtfulBrightBlue};
   --aah-bg-layer: #{$colourSubtleHoverLightBlueGreyTint};
 }
diff --git a/src/civicrm.scss b/src/civicrm.scss
index d5c20be..06b6c4f 100644
--- a/src/civicrm.scss
+++ b/src/civicrm.scss
@@ -67,6 +67,18 @@ body.aah-theme {
    position: absolute;
 }
 
+/* Inline form field 'post-help' and radio-button unselect */
+.crm-container .description:not(.price-set-option-content .description, .form-layout td.description, .form-layout-compressed td.description) {
+  font-size: 0.875em;
+  font-weight: normal;
+  white-space: normal;
+  width: auto;
+  color: #696969;
+  line-height: inherit;
+  padding: 0;
+  margin: 0;
+}
+
 .crm-container .crm-flex-box {
   display: flex;
   flex-wrap: wrap;
@@ -521,6 +533,12 @@ input.crm-form-submit,
 
   &.btn-secondary {
     background: var(--aah-button-bg-secondary);
+    background: transparent;
+    color: var(--aah-button-colour-secondary);
+    color: var(--aah-colour-brand);
+    &:hover {
+      background: var(--aah-button-bg-secondary-hover);
+    }
   }
   &[disabled] {
     opacity:0.35;
@@ -680,10 +698,13 @@ td>.crm-submit-buttons:first-child {
 
 #crm-main-content-wrapper .btn-group>button {
   height: 2.3em;
-  border-radius: 0;
+
+  // A button at the start needs left rounding
   &:first-child { border-radius: 3px 0 0 3px; }
-  &:last-child  { border-radius: 0 3px 3px 0; }
-  &:first-child:last-child  { border-radius: 3px; }
+  // A button at the end needs right rounding
+  &:last-of-type  { border-radius: 0 3px 3px 0; }
+  // A button on its own in a btn-group (duh) nees full rounding.
+  &:first-child:last-of-type  { border-radius: 3px; }
 }
 
 // }}}
@@ -2346,8 +2367,17 @@ body.crm-name-crm-search-page-admin.aah-theme #crm-main-content-wrapper {
   fieldset {
     border-top: none;
     background: $colourLayeredBackground;
+
     // Reinstate our style - set to 6px, then again to 0px by crmSearchAdmin
     padding: 4.8rem 0.5rem 0.5rem 0.5rem;
+
+    &.crm-search-join,
+    &.crm-search-join-add,
+    &.crm-search-groupbys,
+    {
+      padding-top: 6px;
+    }
+
     legend {
       position: absolute;
       top: 0.5rem;
@@ -2356,24 +2386,16 @@ body.crm-name-crm-search-page-admin.aah-theme #crm-main-content-wrapper {
       left: 0.5rem;
     }
   }
-
-  // Next, allow for those without legends
- // fieldset.crm-search-criteria-column,
- // fieldset#crm-search-build-functions,
- // fieldset#crm-search-admin-debug
-  //.crm-search-criteria-column>div>fieldset, // Matches the 'with's, but not the GroupBy, Where, Having (which use legend)
-  // .crm-search-criteria-column:first-child>fieldset:last-child, // Matches the GroupBy.
-  // .crm-search-admin-relative fieldset:not(.crm-search-admin-edit-columns fieldset):not(fieldset:last-child) // matches all fieldsets except the output column ones in Table edit.
-  .xxx // This proved too hard to achieve; needs core patch to add some meaningful classes.
-  {
-    padding-top: 0.5rem;
+  .crm-search-select-fields > div > fieldset {
+    padding-top: 6px;
   }
 
+
   fieldset.crm-draggable:nth-child(1) {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
-}
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
 
   .crm-search-admin-edit-columns {
     fieldset {
@@ -2395,11 +2417,45 @@ body.crm-name-crm-search-page-admin.aah-theme #crm-main-content-wrapper {
     }
   }
 
-  .crm-search-loading-placeholder {
-    width: 100%; // why was it 80%?
-    // height: 100%;
+  // Within Wheres, this puts the "If" bubble to the left.
+  crm-search-clause > .api4-clause-group-sortable > div > div {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    & > .api4-clause-badge {
+      flex: 0 0 5ch;
+    }
+  }
+  .api4-clause-group-sortable > div:not(&:last-child) {
+    border-bottom: solid 1px  color-mix(in srgb, $colourArtfulMutedBlue 20%, transparent);
+  }
+  // Target the Add Where...
+  crm-search-clause > .api4-input:last-child {
+    padding: 1rem;
+
+  }
+
+  #expires_date ~ :where(input, a) {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+  #expires_date ~ a {
+    padding-top: 1em;
   }
 }
+.aah-theme #bootstrap-theme .crm-search-loading-placeholder {
+    width: 100%; // why was it 80%?
+    background: transparent;
+    &:before {
+      width: 100%;
+      left: 0;
+      height: 100%;
+      background-image: none;
+      animation: aahblockoverlay 5s infinite;
+      border-radius: 3px;
+    }
+}
+
 .crm-search-admin-relative {
   // Leave space for the absolutely positioned View Results thing.
   padding-top:3.5rem;