novo-elements 7.3.0 → 7.4.0-next.1

package/elements/button/styles/button-dialogue.scss

@@ -6,6 +6,9 @@
     @include theme-text-colors("color");
     background: transparent;
     color: $positive;
+    i {
+      line-height: 1.2;
+    }
     &:hover,
     &:focus {
       background: lighten($light, 7%);

package/elements/button/styles/button-icon.scss

@@ -29,6 +29,9 @@
       font-size: 1.2rem;
       height: 2rem;
     }
+    &[size="medium"] {
+      font-size: 1.6rem;
+    }
     &[size="large"] {
       font-size: 2rem;
       height: 2.8rem;

package/elements/button/styles/button.scss

@@ -38,7 +38,8 @@
     line-height: 1;
   }
 
-  &[size="small"] {
+  &[size="small"],
+  &[size="sm"] {
     font-size: 1rem;
     padding: 0 $spacing-md;
     height: 2.4rem;
@@ -49,7 +50,8 @@
     }
   }
 
-  &[size="large"] {
+  &[size="large"],
+  &[size="lg"] {
     font-size: 1.6rem;
     padding: 0 $spacing-lg;
     height: 3.6rem;

package/elements/chips/ChipList.scss

@@ -40,12 +40,24 @@ $novo-chip-input-margin: 4px;
 
 novo-field.novo-focused {
   input.novo-chip-input {
+    opacity: 1;
     width: $novo-chip-input-width;
     margin: $novo-chip-input-margin;
     flex: 1 0 $novo-chip-input-width;
   }
 }
 
+novo-field:not(.novo-focused) {
+  .novo-field-input .novo-chip-list-has-value {
+    margin-right: 2rem;
+    input.novo-chip-input {
+      opacity: 0;
+      width: 0px !important;
+      max-width: 0px !important;
+    }
+  }
+}
+
 input.novo-chip-input {
   width: 20px;
   margin: $novo-chip-input-margin;

package/elements/chips/Chips.scss

@@ -35,7 +35,7 @@ novo-entity-chips {
     input {
       padding-top: 0;
       border: none;
-      background: transparent;
+      background: transparent !important;
       width: 100%;
       &:focus {
         outline: none;

package/elements/common/typography/text.mixins.scss

@@ -6,10 +6,15 @@
 }
 
 @mixin base-text-rules() {
-  transition-property: color, opacity;
-  transition: 0.2s ease-out;
+  transition: color 0.2s ease-out, opacity 0.2s ease-out;
   vertical-align: middle;
 
+  &.text-capitalize {
+    text-transform: capitalize;
+  }
+  &.text-uppercase {
+    text-transform: uppercase;
+  }
   &.text-nowrap {
     white-space: nowrap;
   }

package/elements/expansion/_expansion-theme.scss

@@ -26,8 +26,8 @@
   }
 
   .novo-expansion-panel-header-description,
-  .novo-expansion-indicator::after {
-    color: $grey;
+  .novo-expansion-indicator {
+    border-color: var(--text-main, $dark);
   }
 
   .novo-expansion-panel-header[aria-disabled="true"] {

package/elements/expansion/expansion-panel-header.scss

@@ -50,12 +50,15 @@
  * Creates the expansion indicator arrow. Done using ::after rather than having
  * additional nodes in the template.
  */
-.novo-expansion-indicator::after {
-  border-style: solid;
-  border-width: 0 2px 2px 0;
-  content: "";
-  display: inline-block;
-  padding: 3px;
-  transform: rotate(45deg);
-  vertical-align: middle;
+.novo-expansion-indicator {
+  &::after {
+    border-style: solid;
+    border-width: 0 2px 2px 0;
+    content: "";
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(-45deg);
+    vertical-align: middle;
+  }
+  margin-right: 10px;
 }

package/elements/expansion/expansion-panel.scss

@@ -15,7 +15,6 @@
   margin: 0px 16px;
 
   &.novo-expanded {
-    margin: 16px 4px;
     &:first-child {
       margin-top: 0;
     }
@@ -40,6 +39,7 @@
 }
 
 .novo-expansion-panel-spacing {
+  margin: 16px 4px;
   .novo-accordion &:first-child {
     margin-top: 0;
   }

package/elements/field/field.scss

@@ -41,8 +41,10 @@
   .novo-field-input {
     grid-area: input;
     display: grid;
+    align-items: center;
     grid-template-columns: minmax(auto, max-content) 1fr minmax(auto, max-content);
     flex: 1 1 100%;
+    min-height: 2.9rem;
 
     &::ng-deep {
       .novo-input-element {
@@ -51,7 +53,7 @@
         background-image: none;
         background-color: transparent;
         box-shadow: none;
-        padding: 0.4rem 0.2rem;
+        padding: 0.4rem 0.2rem 0rem;
         border-bottom: none !important;
 
         &:focus {
@@ -72,6 +74,7 @@
     .novo-field-infix {
       display: flex;
       align-items: center;
+      align-self: flex-end;
       select,
       &::ng-deep .novo-input-element {
         width: 100%;
@@ -93,4 +96,10 @@
     display: flex;
     flex-direction: column;
   }
+
+  &::ng-deep {
+    .novo-date-range-format {
+      min-width: 22rem;
+    }
+  }
 }

package/elements/icon/Icon.scss

@@ -43,6 +43,11 @@ novo-icon {
         width: 1.6em;
         height: 1.6em;
       }
+      &[shape='circle'] {
+        i {
+          border-radius: 50%;
+        }
+      }
     }
   }
 
@@ -52,4 +57,15 @@ novo-icon {
       box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
     }
   }
+  &[shape='circle'] {
+    i {
+      border-radius: 50%;
+    }
+  }
+  &.icon-size-smaller {
+    font-size: 1.0em;
+  }
+  &.icon-size-larger {
+    font-size: 1.4em;
+  }
 }

package/elements/query-builder/condition-builder/condition-builder.component.scss

@@ -0,0 +1,66 @@
+@import "~novo-design-tokens/scss";
+
+:host {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  .condition-field {
+    grid-template-columns: minmax(fit-content, 1fr);
+    width: 100%;
+    width: -webkit-fill-available;
+  }
+
+  .condition-operator {
+    &::ng-deep {
+      .novo-select {
+        min-width: 13rem;
+      }
+    }
+  }
+  .condition-input {
+    &::ng-deep {
+      // Full Width
+      novo-field.novo-field-layout-vertical {
+        grid-template-columns: minmax(fit-content, 1fr);
+        width: -webkit-fill-available;
+        .novo-input-element {
+          width: 100%;
+        }
+      }
+      novo-field {
+        width: fit-content;
+      }
+      .novo-field-infix {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      novo-chips {
+        border-bottom: none !important;
+        input {
+          padding-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  .and-or-filter-button {
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #ddd;
+    color: #5691f5;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    margin: 0.4rem auto;
+    // vertical-align: middle;
+    align-items: center;
+    text-align: center;
+    user-select: none;
+    outline: none;
+    white-space: nowrap;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+}

package/elements/query-builder/condition-group/condition-group.component.scss

@@ -0,0 +1,12 @@
+:host {
+  position: relative;
+  display: block;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-round);
+  padding: var(--spacing-md);
+  width: 100%;
+
+  .condition-row {
+    width: 100%;
+  }
+}

package/elements/query-builder/criteria-builder/criteria-builder.component.scss

@@ -0,0 +1,9 @@
+:host {
+  position: relative;
+  display: block;
+  width: 76rem;
+
+  .criteria-builder-inner {
+    padding-bottom: 1rem;
+  }
+}

package/elements/search/SearchBox.scss

@@ -26,13 +26,18 @@ novo-search {
     grid-template-columns: 4rem 1fr;
   }
 
+  > button[theme][theme='fab'] {
+    width: 2.8em;
+    height: 2.8em;
+    min-height: 2.8em;
+  }
+
   > input {
     height: 100%;
-    max-width: 400px;
     display: block;
     background: transparent;
     position: relative;
-    font-size: 1.4em;
+    font-size: 1.4rem;
     color: var(--text-main);
     z-index: z(above);
     border: none;
@@ -65,3 +70,20 @@ novo-search {
     }
   }
 }
+
+header {
+  novo-search.always-open:not(.focused) {
+    button {
+      background: rgba($white, 0.25) !important;
+      color: rgba($positive, 0.25) !important;
+    }
+    input {
+      background-color: rgba($white, 0.25) !important;
+      border-color: rgba($white, 0.25) !important;
+      color: rgba($positive, 0.25) !important;
+      &::placeholder {
+        color: $empty !important;
+      }
+    }
+  }
+}

package/elements/select/Select.scss

@@ -25,7 +25,7 @@ novo-select {
     z-index: z(default);
     cursor: pointer;
     text-transform: none;
-    padding: 0 $spacing-sm;
+    padding: 0 $spacing-md 0 $spacing-sm;
     margin-bottom: -1px;
     -webkit-appearance: none;
 

package/elements/select-search/select-search.component.scss

@@ -5,25 +5,22 @@
 $novo-menu-side-padding: 16px !default;
 $clear-button-width: 20px;
 $multiple-check-width: 33px;
-$novo-option-height: 3em;
+$novo-option-height: 3.6rem;
 $novo-select-search-clear-x: 4px;
 $novo-select-search-spinner-x: 16px;
 $novo-select-search-toggle-all-checkbox-x: 16px;
 
+:host {
+  display: block;
+  width: 100%;
+}
+
 .novo-select-search-hidden {
   visibility: hidden;
 }
 .novo-select-search-inner {
-  position: absolute;
-  top: 0;
   width: 100%;
-  min-width: 190px;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  z-index: 100;
-  font-size: inherit;
-  box-shadow: none;
-  border-radius: 0;
+  background-color: var(--background-bright);
   /* Prevent iOS scroll issue */
   -webkit-transform: translate3d(0, 0, 0);
 
@@ -34,19 +31,10 @@ $novo-select-search-toggle-all-checkbox-x: 16px;
       align-items: center;
     }
   }
+}
 
-  .novo-input-element {
-    flex-basis: auto;
-    border: none;
-    &:focus {
-      outline: none;
-      border-radius: 0 !important;
-    }
-    &:-ms-input-placeholder {
-      // fix IE11 not able to focus programmatically with css style -ms-user-select: none
-      -ms-user-select: text;
-    }
-  }
+.novo-select-search-icon {
+  padding: var(--spacing-md);
 }
 
 ::ng-deep .novo-select-search-panel {
@@ -55,50 +43,10 @@ $novo-select-search-toggle-all-checkbox-x: 16px;
   overflow-x: hidden;
 }
 
-.novo-select-search-input {
-  padding: $spacing-md;
-  padding-left: $clear-button-width * 2;
-  padding-right: $clear-button-width + $novo-select-search-clear-x;
-  box-sizing: border-box;
-  width: 100%;
-
-  :host-context([dir="rtl"]) & {
-    padding-right: $novo-menu-side-padding;
-    padding-left: $clear-button-width + $novo-select-search-clear-x;
-  }
-}
 .novo-select-search-no-entries-found {
   padding: $novo-menu-side-padding;
 }
 
-.novo-select-search-icon-prefix {
-  position: absolute;
-  left: $clear-button-width - $novo-select-search-clear-x;
-  top: 7px;
-}
-
-.novo-select-search-clear {
-  position: absolute;
-  right: $novo-select-search-clear-x;
-  top: 5px;
-
-  :host-context([dir="rtl"]) & {
-    right: auto;
-    left: $novo-select-search-clear-x;
-  }
-}
-
-.novo-select-search-spinner {
-  position: absolute;
-  right: $novo-select-search-spinner-x;
-  top: calc(50% - 8px);
-
-  :host-context([dir="rtl"]) & {
-    right: auto;
-    left: $novo-select-search-spinner-x;
-  }
-}
-
 /** override styling when inside a novo-option */
 :host.novo-select-search-inside-novo-option {
   .novo-select-search-input {
@@ -116,10 +64,10 @@ $novo-select-search-toggle-all-checkbox-x: 16px;
   }
 }
 
-::ng-deep .novo-option[aria-disabled="true"].contains-novo-select-search {
+::ng-deep .novo-option.contains-novo-select-search {
   /* let move novo-select-search at the top of the dropdown. As option is disabled, there will be no-ripple hence safe. */
-  position: static;
-  padding: 0;
+  padding: 0 !important; // Option group padding was being applied as well. 
+  border: none;
 
   .novo-icon {
     margin-right: 0px;
@@ -128,9 +76,6 @@ $novo-select-search-toggle-all-checkbox-x: 16px;
   .novo-option-pseudo-checkbox {
     display: none;
   }
-  &.novo-select-search-no-entries-found {
-    height: 2 * $novo-option-height;
-  }
 }
 
 .novo-select-search-toggle-all-checkbox {