Merge pull request #383 from civicrm/v0.1-alpha31-rc

Merge v0.1-alpha31 to master

info.xml

@@ -14,8 +14,8 @@
     <url desc="Support">http://civicrm.stackexchange.com/</url>
     <url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
   </urls>
-  <releaseDate>2018-12-17</releaseDate>
-  <version>0.1-alpha30</version>
+  <releaseDate>2019-03-13</releaseDate>
+  <version>0.1-alpha31</version>
   <compatibility>
     <ver>4.7</ver>
   </compatibility>

package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "bootstrap-sass": "3.4.1",
+    "extend": "^3.0.2",
     "gulp": "^4.0.0",
     "gulp-postcss": "^7.0.1",
     "gulp-replace": "^1.0.0",

scss/civicrm/_mixins.scss

@@ -14,7 +14,6 @@
 @import 'mixins/expandable-table';
 @import 'mixins/input-fields-container';
 @import 'mixins/input-text';
-@import 'mixins/open-sans-font-family';
 @import 'mixins/panel-header';
 @import 'mixins/plain-old-text';
 @import 'mixins/responsive-search';

scss/civicrm/_variables.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id */
 
 $crm-standard-gap: 20px;
+$crm-table-form-cell-padding: 4px;
 
 $contact-avatar: 90px;
 $crm-control-height: 30px;

scss/civicrm/administer/communication-organisation/_reminders.scss

@@ -53,9 +53,9 @@
       .crm-form-multiselect {
         @extend %responsive;
         @include civicrm-form-control;
-        @include open-sans-font-family();
         @include placeholder;
         display: inline-block;
+        font-family: $font-family-base;
         height: auto;
       }
 

scss/civicrm/cms/_cms.scss

@@ -1,3 +1,2 @@
-/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id, scss/at-extend-no-missing-placeholder */
-
+@import 'drupal';
 @import 'wordpress';

scss/civicrm/cms/_drupal.scss

@@ -0,0 +1,109 @@
+/* stylelint-disable selector-max-id */
+
+@import 'base/scss/vendor/bootstrap/alerts';
+
+.page-civicrm {
+  %title {
+    font-weight: 600 !important;
+  }
+
+  h2 {
+    @extend %title;
+  }
+
+  #branding {
+    background: $crm-page-topbar-bg !important;
+    color: $crm-white !important;
+    font-family: $font-family-base;
+    line-height: 20px;
+    overflow: visible !important;
+    padding: $crm-standard-gap 0 0;
+
+    h1.page-title { /* stylelint-disable-line selector-no-qualifying-type */
+      @extend %title;
+
+      background: $crm-white;
+      box-sizing: border-box;
+      color: $gray-darker;
+      display: block;
+      line-height: 50px !important;
+      margin: -#{$crm-standard-gap} 0 $crm-standard-gap;
+      padding: 0 ($crm-standard-gap * 2);
+      position: relative;
+      top: 25px;
+      width: 100%;
+      z-index: 1;
+    }
+
+    .add-shortcut {
+      display: none;
+    }
+
+    .breadcrumb {
+      color: transparent;
+      float: left;
+      left: 10px;
+      padding: 0 ($crm-standard-gap * 2);
+      position: relative;
+      top: -5px;
+
+      /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
+      > a {
+        color: $crm-white;
+        font-size: 0.8rem;
+        left: -10px;
+        padding: 0;
+        position: relative;
+
+        &:not(:last-of-type)::after {
+          content: '>';
+          display: inline-block;
+          font-size: 0.6em;
+          position: absolute;
+          right: -10px;
+        }
+      }
+      /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */
+    }
+  }
+
+  #console {
+    @extend .alert, .alert-warning; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+    margin-top: 0 !important;
+  }
+
+  // The "printer" icon button
+  #printer-friendly {
+    position: absolute !important;
+    right: 0 !important;
+    top: -50px !important;
+    z-index: 2;
+
+    a {
+      color: $crm-white;
+    }
+  }
+
+  #toolbar {
+    box-shadow: none !important;
+  }
+}
+
+#{$outside-namespace-marker} {
+  html {
+    // Ensures that there is the same amount of vertical room for the main menu
+    // regardless of whether there is a drupal menu module enabled or not
+    body {
+      &:not(.toolbar) {
+        margin-top: $crm-main-menu-height !important;
+      }
+
+      .toolbar-menu { /* stylelint-disable-line selector-max-compound-selectors */
+        height: $crm-main-menu-height !important;
+        padding-bottom: 0 !important;
+        padding-top: 0 !important;
+      }
+    }
+  }
+}

scss/civicrm/common/_alerts.scss

@@ -1,11 +1,3 @@
-/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id, scss/at-extend-no-missing-placeholder */
-
-@import 'base/scss/vendor/bootstrap/alerts';
-
-.page-civicrm div#console {
-  @extend .alert, .alert-warning;
-}
-
 .font-red,
 .status-warning {
   color: $brand-danger !important;

scss/civicrm/common/_base.scss

@@ -1,26 +1,8 @@
 /* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id */
 
-#{$outside-namespace-marker} {
-  html {
-    // Ensures that there is the same amount of vertical room for the main menu
-    // regardless of whether there is a drupal menu module enabled or not
-    body {
-      @include open-sans-font-family();
-
-      &:not(.toolbar) {
-        margin-top: $crm-main-menu-height !important;
-      }
-
-      .toolbar-menu {
-        height: $crm-main-menu-height !important;
-        padding-bottom: 0 !important;
-        padding-top: 0 !important;
-      }
-    }
-  }
-}
-
 .crm-container {
+  font-family: $font-family-base;
+
   a,
   a:link {
     color: $brand-primary;
@@ -242,34 +224,6 @@
   }
 }
 
-.page-civicrm {
-  #branding {
-    padding: 20px 0 0 !important;
-
-    .breadcrumb {
-      padding: 0 40px;
-    }
-
-    .breadcrumb a {
-      padding: 0 !important;
-    }
-
-    .add-shortcut {
-      display: none;
-    }
-
-    h1 {
-      &.page-title {
-        background: $crm-white;
-        color: $gray-darker;
-        margin-bottom: 20px !important;
-        margin-top: -20px !important;
-        padding: 0 40px !important;
-      }
-    }
-  }
-}
-
 .required {
   &::after {
     display: none;

scss/civicrm/common/_buttons.scss

@@ -9,7 +9,7 @@ $button-border-radius: 2px;
 
 %btn-civi {
   @extend .btn;
-  @include open-sans-font-family();
+  font-family: $font-family-base;
   font-size: $font-size-base;
   opacity: 1;
   text-shadow: none;

scss/civicrm/common/_common.scss

@@ -6,7 +6,6 @@
 @import 'forms';
 @import 'accordions';
 @import 'backgrounds';
-@import 'top';
 @import 'alerts';
 @import 'modals';
 @import 'radio-checkbox';

scss/civicrm/common/_forms.scss

@@ -115,8 +115,8 @@
     }
 
     .cke_combo_text {
-      @include open-sans-font-family();
       border-right: solid 1px $gray-dark;
+      font-family: $font-family-base;
       margin: 0;
       padding-right: 7px;
       //Match the dropdown size;
@@ -215,14 +215,14 @@ input.crm-form-text,
 .crm-icon-picker-button,
 input.dateplugin,
 input.crm-form-password {
-  @include open-sans-font-family();
   @include transition(border-color 0.15s ease-in-out 0s);
   background-color: $crm-white;
   background-image: none;
   border-color: $crm-grayblue-darker;
   border-radius: $border-radius-base;
   box-shadow: $crm-form-control-shadow;
   color: $gray-darker;
+  font-family: $font-family-base;
   font-size: $font-size-base;
   height: $input-height-small;
   padding: 2px 10px;
@@ -234,13 +234,13 @@ input.crm-form-password {
 }
 
 input[type='file'] {
-  @include open-sans-font-family();
   display: inline-block;
+  font-family: $font-family-base;
   font-size: $font-size-base;
 }
 
 textarea {
-  @include open-sans-font-family();
+  font-family: $font-family-base;
 
   &.ng-valid,
   &.ng-pristine {
@@ -266,7 +266,6 @@ select.crm-form-multiselect {
 
 select.crm-form-select,
 select[aria-controls] {
-  @include open-sans-font-family();
   @include transition(border-color 0.15s ease-in-out 0s);
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -275,6 +274,7 @@ select[aria-controls] {
   border: 1px solid $crm-grayblue-darker;
   border-radius: $border-radius-base;
   box-shadow: $crm-form-control-shadow;
+  font-family: $font-family-base;
   font-size: $font-size-base;
   height: $input-height-base;
   padding: 4px 35px 4px 10px;

scss/civicrm/common/_modals.scss

@@ -25,12 +25,21 @@
   }
 
   table {
-    // @NOTE This selector is used for nested accordions
+    // @NOTE This selector is used for nested accordions.
+    // Unfortunately, this seems like the only way to determine it.
     &.form-layout,
     &.form-layout-compressed {
       > tbody > tr > td[colspan='2'] {
         padding: 0;
       }
+
+      // @NOTE This discards the padding flushing for nested tables
+      .form-layout,
+      .form-layout-compressed {
+        td[colspan='2'] {
+          padding: $crm-table-form-cell-padding;
+        }
+      }
     }
 
     &.no-border {
@@ -85,27 +94,31 @@
     width: calc(100% + #{$crm-standard-gap * 2});
   }
 
-  .crm-form-block {
-    margin-bottom: 0;
-  }
-
   .crm-accordion-header:not(.crm-master-accordion-header)+.crm-accordion-body {
     box-shadow: none;
     padding: 20px 0 !important;
 
     td.label {
       padding-left: $crm-standard-gap;
     }
-
-    .form-layout-compressed {
-      margin-top: $crm-standard-gap;
-    }
   }
 
   .dataTables_length {
     padding: $crm-standard-gap;
   }
 
+  // Resets the padding for entries amount selectors inside pagers
+  .crm-datatable-pager-top .dataTables_length {
+    padding: 0;
+    padding-left: $crm-standard-gap;
+  }
+
+  // If the pager is the very first element in the modal, no top padding is needed
+  > .crm-form-block:first-child > .dataTables_wrapper:first-child >
+  .dataTables_length:first-child {
+    padding-top: 0;
+  }
+
   .crm-accordion-body {
     .dataTables_wrapper:first-child {
       .dataTables_length {

scss/civicrm/common/_tables.scss

@@ -8,9 +8,9 @@ table {
 
 %crm-table {
   $border-color: $table-border-color;
-  @include open-sans-font-family();
   border: 0;
   border-radius: $border-radius-base;
+  font-family: $font-family-base;
 
   tr {
     background: $crm-white !important;