@dialpad/dialtone-css 8.46.4 → 8.46.5

package/lib/build/less/recipes/callbar_button.less

@@ -11,13 +11,25 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-recipe-callbar-button {
+  padding-right: var(--dt-space-0);
+  padding-left: var(--dt-space-0);
+  color: var(--dt-color-foreground-primary);
+
   &:not(.d-recipe-callbar-button--circle) {
     line-height: var(--dt-font-line-height-300);
   }
 
-  &.d-btn[disabled] {
+  &.d-btn--disabled {
     background-color: unset;
-    opacity: .5;
+    opacity: var(--dt-opacity-700);
+  }
+}
+
+.d-recipe-callbar-button__text {
+  font-size: var(--dt-font-size-100);
+
+  @media (max-width: 980px) {
+    display: none;
   }
 }
 

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -33,6 +33,14 @@
       color: var(--dt-color-foreground-primary-inverted);
     }
   }
+
+  .d-popover__header__content {
+    display: flex;
+    align-items: center;
+    padding-right: var(--dt-space-450);
+    padding-left: var(--dt-space-450);
+    font-weight: normal;
+  }
 }
 
 .d-recipe-callbar-button-with-popover__button {

package/lib/build/less/recipes/combobox_multi_select.less

@@ -36,6 +36,10 @@
   flex-grow: 1;
 }
 
+.d-recipe-combobox-multi-select__input--hidden {
+  color: transparent;
+}
+
 .d-recipe-combobox-multi-select__input-wrapper {
   position: relative;
   display: block;

package/lib/build/less/recipes/contact_info.less

@@ -51,5 +51,13 @@
     box-sizing: unset;
     border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
     border-radius: var(--dt-size-radius-pill);
+
+    &.d-recipe-contact-info__avatar-stacked {
+      margin-left: var(--dt-space-550-negative);
+    }
+
+    &.d-recipe-contact-info__avatar-halo {
+      border-color: var(--dt-color-border-brand);
+    }
   }
 }

package/lib/build/less/recipes/editor.less

@@ -1,4 +1,10 @@
-.d-recipe-editor__top-bar-background {
+.d-recipe-editor {
+  display: flex;
+  flex-direction: column;
+}
+
+.d-recipe-editor__top-bar {
+  padding: var(--dt-space-400);
   background-color: var(--dt-color-surface-secondary);
 }
 
@@ -8,3 +14,39 @@
   margin-left: var(--dt-space-400);
   background: var(--dt-color-border-subtle);
 }
+
+.d-recipe-editor-link__input-wrapper {
+  margin-top: var(--dt-space-350);
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+  background-color: var(--dt-color-surface-secondary);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
+  outline: none;
+  box-shadow: none !important; // This doesn't work if !important is removed
+}
+
+.d-recipe-editor__popover-content {
+  padding: var(--dt-space-500);
+}
+
+.d-recipe-editor__popover-footer {
+  padding-right: var(--dt-space-450);
+  padding-left: var(--dt-space-550);
+}
+
+.d-recipe-editor__content {
+  margin: var(--dt-space-400) var(--dt-space-500) var(--dt-space-500);
+  overflow: auto;
+  cursor: text;
+}
+
+.d-recipe-editor__content-input {
+  margin-top: var(--dt-space-350);
+  margin-bottom: var(--dt-space-350);
+  margin-left: var(--dt-space-500);
+}
+
+.d-recipe-editor__link {
+  display: inline-block;
+  cursor: text;
+}

package/lib/build/less/recipes/emoji_row.less

@@ -8,6 +8,10 @@
   display: inline-block;
 }
 
+.d-recipe-emoji-row__tooltip-content {
+   max-width: var(--dt-size-975);
+}
+
 .d-recipe-emoji-row__reaction {
   --emoji-item-color-inset-shadow: transparent;
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);

package/lib/build/less/recipes/feed_item_pill.less

@@ -1,3 +1,7 @@
+.d-recipe-feed-item-pill--toggleable {
+  cursor: pointer;
+}
+
 .d-recipe-feed-item-pill__wrapper {
   padding: var(--dt-space-400);
   background-color: var(--dt-color-surface-secondary);

package/lib/build/less/recipes/grouped_chip.less

@@ -3,6 +3,10 @@
   white-space: nowrap;
   background-color: unset;
   background-image: unset;
+
+  .d-chip__text {
+    font-size: var(--dt-font-size-100);
+  }
 }
 
 .d-recipe-grouped-chip__content {

package/lib/build/less/recipes/ivr_node.less

@@ -1,29 +1,87 @@
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
 .d-recipe-ivr-node {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 280px; /* stylelint-disable-line meowtec/no-px */
   cursor: pointer;
+
+  .d-card {
+    width: var(--dt-size-100-percent);
+  }
+
+  .d-card__header {
+    margin-top: var(--dt-size-100-negative);
+    padding: var(--dt-space-0);
+    border-top-left-radius: var(--dt-size-border-300);
+    border-top-right-radius: var(--dt-size-border-300);
+  }
+
+  .d-card__content {
+    padding: var(--dt-space-400) var(--dt-space-450) var(--dt-space-450);
+    border-top: var(--dt-size-border-100) solid var(--dt-color-black-300);
+  }
 }
 
-.d-recipe-ivr-node__header-left {
-  display: flex;
-  align-items: center;
+//  ============================================================================
+//  $   NODE TYPES
+//  ----------------------------------------------------------------------------
+.d-recipe-ivr-node-prompt {
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-200);
+  }
 }
 
-.d-recipe-ivr-node__label {
-  font-weight: var(--dt-font-weight-bold);
-  font-size: var(--dt-font-size-200);
+.d-recipe-ivr-node-prompt--selected {
+  .d-card {
+    border: var(--dt-size-border-300) solid var(--dt-color-blue-300);
+    border-radius: var(--dt-size-radius-400);
+  }
+
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-300);
+  }
 }
 
-.d-recipe-ivr-node__dropdown-list {
-  width: var(--dt-size-825);
+.d-recipe-ivr-node-logic {
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-200);
+  }
 }
 
-.d-recipe-ivr-node__goto-icon {
-  transform: rotate(90deg);
+.d-recipe-ivr-node-logic--selected {
+  .d-card {
+    border: var(--dt-size-border-300) solid var(--dt-color-purple-400);
+    border-radius: var(--dt-size-radius-400);
+  }
+
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-400);
+  }
 }
 
+.d-recipe-ivr-node-terminal {
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-red-100);
+  }
+}
+
+.d-recipe-ivr-node-terminal--selected {
+  .d-card {
+    border: var(--dt-size-border-300) solid var(--dt-color-red-200);
+    border-radius: var(--dt-size-radius-400);
+  }
+
+  .d-card__header {
+    border-top: var(--dt-size-border-300) solid var(--dt-color-red-200);
+  }
+}
+
+//  ============================================================================
+//  $   NODE CONNECTOR
+//  ----------------------------------------------------------------------------
 .d-recipe-ivr-node__connector {
   z-index: var(--zi-base);
   display: flex;
@@ -52,3 +110,25 @@
     margin-bottom: var(--dt-space-500-negative);
   }
 }
+
+//  ============================================================================
+//  $   MISC
+//  ----------------------------------------------------------------------------
+
+.d-recipe-ivr-node__header-left {
+  display: flex;
+  align-items: center;
+}
+
+.d-recipe-ivr-node__label {
+  font-weight: var(--dt-font-weight-bold);
+  font-size: var(--dt-font-size-200);
+}
+
+.d-recipe-ivr-node__dropdown-list {
+  width: var(--dt-size-825);
+}
+
+.d-recipe-ivr-node__goto-icon {
+  transform: rotate(90deg);
+}

package/lib/build/less/recipes/leftbar_row.less

@@ -108,10 +108,10 @@
   }
 
   &--has-unread {
-  --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
-  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
-  --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
-}
+    --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
+    --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
+    --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
+  }
 
   &--muted {
     --leftbar-row-opacity: 60%;
@@ -365,3 +365,77 @@
     opacity: 0.9;
   }
 }
+
+//  ============================================================================
+//  $   Contact Row
+//  ----------------------------------------------------------------------------
+.d-recipe-contact-row--active {
+  color: var(--dt-color-foreground-success);
+}
+
+.d-recipe-contact-row--busy {
+  color: var(--dt-color-foreground-critical);
+}
+
+.d-recipe-contact-row--away {
+  color: var(--dt-color-foreground-warning);
+}
+
+//  ============================================================================
+//  $   CSS General Row
+//  ----------------------------------------------------------------------------
+.d-recipe-leftbar-general-row {
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__contact-center {
+    &--magenta-100 {
+      background-color: var(--dt-color-magenta-100);
+    }
+
+    &--magenta-200 {
+      background-color: var(--dt-color-magenta-200);
+    }
+
+    &--magenta-300 {
+      background-color: var(--dt-color-magenta-300);
+    }
+
+    &--magenta-400 {
+      background-color: var(--dt-color-magenta-400);
+    }
+
+    &--green-200 {
+      background-color: var(--dt-color-green-200);
+    }
+
+    &--green-500 {
+      background-color: var(--dt-color-green-500);
+    }
+
+    &--gold-300 {
+      background-color: var(--dt-color-gold-300);
+    }
+
+    &--purple-100 {
+      background-color: var(--dt-color-purple-100);
+    }
+
+    &--purple-300 {
+      background-color: var(--dt-color-purple-300);
+    }
+
+    &--purple-600 {
+      background-color: var(--dt-color-purple-600);
+    }
+
+    &--black-300 {
+      background-color: var(--dt-color-black-300);
+    }
+  }
+}
+
+

package/lib/build/less/recipes/message_input.less

@@ -90,3 +90,8 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.d-recipe-message-input__sms-count {
+  display: flex;
+  align-items: center;
+}

package/lib/build/less/recipes/top_banner_info.less

@@ -28,3 +28,23 @@
   margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
   text-align: right;
 }
+
+.d-recipe-top-banner-info--success {
+  background-color: var(--dt-color-surface-success);
+}
+
+.d-recipe-top-banner-info--critical {
+  background-color: var(--dt-color-surface-critical);
+}
+
+.d-recipe-top-banner-info--warning {
+  background-color: var(--dt-color-surface-warning);
+}
+
+.d-recipe-top-banner-info--info {
+  background-color: var(--dt-color-surface-info);
+}
+
+.d-recipe-top-banner-info--primary {
+  background-color: var(--dt-color-surface-primary);
+}