@servicetitan/design-system 13.3.2 → 14.0.0-react18.0

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "13.3.2";
+  --anvil-version: "14.0.0-react18.0";
 }
 
 /*
@@ -6285,8 +6285,7 @@ kendo-badge-container {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .k-button-group > .k-button + .k-button {
-  -webkit-margin-start: 0px;
-          margin-inline-start: 0px;
+  margin-inline-start: 0px;
 }
 .k-button-group > .k-button:hover,
 .k-button-group > .k-button.k-hover,
@@ -7268,8 +7267,7 @@ kendo-badge-container {
 .k-checkbox + .k-checkbox-label,
 .k-checkbox-wrap + .k-checkbox-label {
   display: inline;
-  -webkit-margin-start: 4px;
-          margin-inline-start: 4px;
+  margin-inline-start: 4px;
 }
 
 .k-checkbox-label:empty {
@@ -9383,13 +9381,11 @@ textarea.k-input-inner {
 }
 
 .k-chip-content:first-child {
-  -webkit-margin-start: 4px;
-          margin-inline-start: 4px;
+  margin-inline-start: 4px;
 }
 
 .k-chip-content:last-child {
-  -webkit-margin-end: 4px;
-          margin-inline-end: 4px;
+  margin-inline-end: 4px;
 }
 
 .k-chip-text,
@@ -9917,8 +9913,7 @@ textarea.k-input-inner {
 .k-radio + .k-radio-label,
 .k-radio-wrap + .k-radio-label {
   display: inline;
-  -webkit-margin-start: 4px;
-          margin-inline-start: 4px;
+  margin-inline-start: 4px;
 }
 
 .k-radio-label:empty {
@@ -10399,8 +10394,7 @@ textarea.k-input-inner {
 }
 
 .k-menu-expand-arrow {
-  -webkit-margin-end: -4px;
-          margin-inline-end: -4px;
+  margin-inline-end: -4px;
   display: inline-flex;
   flex-flow: row wrap;
   align-items: center;
@@ -10433,10 +10427,8 @@ textarea.k-input-inner {
   padding-right: calc( 16px + 16px );
 }
 .k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
-  -webkit-margin-end: calc(-1 * (calc( 16px + 16px ) - 4px));
-          margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
+  margin-inline-start: 8px;
+  margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
 }
 .k-menu-vertical > .k-separator {
   margin: 4px 0;
@@ -10494,14 +10486,11 @@ textarea.k-input-inner {
 }
 .k-menu-group-sm .k-menu-link {
   padding: 2px 8px;
-  -webkit-padding-end: calc( 16px + 16px );
-          padding-inline-end: calc( 16px + 16px );
+  padding-inline-end: calc( 16px + 16px );
 }
 .k-menu-group-sm .k-menu-expand-arrow {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
-  -webkit-margin-end: calc(-1 * (calc( 16px + 16px ) - 4px));
-          margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
+  margin-inline-start: 8px;
+  margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
 }
 
 .k-menu-group-md {
@@ -10514,14 +10503,11 @@ textarea.k-input-inner {
 }
 .k-menu-group-md .k-menu-link {
   padding: 4px 8px;
-  -webkit-padding-end: calc( 16px + 16px );
-          padding-inline-end: calc( 16px + 16px );
+  padding-inline-end: calc( 16px + 16px );
 }
 .k-menu-group-md .k-menu-expand-arrow {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
-  -webkit-margin-end: calc(-1 * (calc( 16px + 16px ) - 4px));
-          margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
+  margin-inline-start: 8px;
+  margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
 }
 
 .k-menu-group-lg {
@@ -10534,14 +10520,11 @@ textarea.k-input-inner {
 }
 .k-menu-group-lg .k-menu-link {
   padding: 6px 8px;
-  -webkit-padding-end: calc( 16px + 16px );
-          padding-inline-end: calc( 16px + 16px );
+  padding-inline-end: calc( 16px + 16px );
 }
 .k-menu-group-lg .k-menu-expand-arrow {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
-  -webkit-margin-end: calc(-1 * (calc( 16px + 16px ) - 4px));
-          margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
+  margin-inline-start: 8px;
+  margin-inline-end: calc(-1 * (calc( 16px + 16px ) - 4px));
 }
 
 .k-popups-wrapper {
@@ -10716,8 +10699,7 @@ textarea.k-input-inner {
 .k-toolbar::before {
   content: "";
   height: calc( 1.4285714286em + 8px + 0px );
-  -webkit-margin-start: -8px;
-          margin-inline-start: -8px;
+  margin-inline-start: -8px;
 }
 .k-toolbar.k-toolbar-resizable {
   flex-wrap: nowrap;
@@ -10729,8 +10711,7 @@ textarea.k-input-inner {
   vertical-align: middle;
 }
 .k-toolbar > * > label {
-  -webkit-margin-end: 8px;
-          margin-inline-end: 8px;
+  margin-inline-end: 8px;
   align-self: center;
 }
 .k-toolbar .k-input,
@@ -11417,14 +11398,10 @@ kendo-toolbar-renderer {
 
 .k-progress-status {
   padding: 0 0.5em;
-  -webkit-padding-before: 0;
-          padding-block-start: 0;
-  -webkit-padding-after: 0;
-          padding-block-end: 0;
-  -webkit-padding-start: 0.5em;
-          padding-inline-start: 0.5em;
-  -webkit-padding-end: 0.5em;
-          padding-inline-end: 0.5em;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0.5em;
+  padding-inline-end: 0.5em;
   min-width: 10px;
   text-align: center;
   display: inline-block;
@@ -11613,8 +11590,7 @@ kendo-toolbar-renderer {
 }
 
 .k-tooltip-icon {
-  -webkit-margin-end: 4px;
-          margin-inline-end: 4px;
+  margin-inline-end: 4px;
   flex-shrink: 0;
 }
 
@@ -11632,8 +11608,7 @@ kendo-toolbar-renderer {
 }
 
 .k-tooltip-button {
-  -webkit-margin-start: 4px;
-          margin-inline-start: 4px;
+  margin-inline-start: 4px;
   flex-shrink: 0;
 }
 .k-tooltip-button .k-icon {
@@ -12213,8 +12188,7 @@ kendo-label > .k-label {
 
 .k-window-actions {
   margin: -5em 0;
-  -webkit-margin-end: calc( 12px - 16px );
-          margin-inline-end: calc( 12px - 16px );
+  margin-inline-end: calc( 12px - 16px );
   line-height: 1;
   display: flex;
   flex-flow: row nowrap;
@@ -13201,10 +13175,8 @@ kendo-label > .k-label {
 
 .k-grid-header,
 .k-grid-footer {
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
-  -webkit-padding-end: var(--kendo-scrollbar-width, 17px);
-          padding-inline-end: var(--kendo-scrollbar-width, 17px);
+  padding-inline-start: 0;
+  padding-inline-end: var(--kendo-scrollbar-width, 17px);
   border-width: 0;
   border-style: solid;
   border-color: inherit;
@@ -13459,10 +13431,8 @@ div.k-grid-footer {
 
 .k-grid .k-command-cell > .k-button + .k-button {
   margin-left: 8px;
-  -webkit-margin-end: unset;
-          margin-inline-end: unset;
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
+  margin-inline-end: unset;
+  margin-inline-start: 8px;
 }
 
 .k-grid > .k-resize-handle,
@@ -15458,7 +15428,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .semantic-anvil-theme .ui.selection.dropdown .menu {
   overflow-x: hidden;
   overflow-y: auto;
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
   border-top-width: 0px !important;
@@ -15609,7 +15578,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .semantic-anvil-theme .ui.search.dropdown .menu {
   overflow-x: hidden;
   overflow-y: auto;
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
 }
@@ -15925,7 +15893,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .semantic-anvil-theme .ui.scrolling.dropdown .menu {
   overflow-x: hidden;
   overflow-y: auto;
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
   min-width: 100% !important;
@@ -16220,7 +16187,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   height: 1em;
   width: auto;
   /* Old size: 1.23em; */
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   font-weight: normal;
   font-style: normal;
@@ -16355,7 +16321,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuItem {
-  padding: 4px 16px;
+  padding: 5px 16px;
 }
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuGroup__divider,
@@ -16369,31 +16335,27 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   display: flex;
   flex-direction: row;
   min-height: 26px;
+  /* Changes due to use button tag instead of div */
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 16px;
+  border: none;
+  width: 100%;
+  text-align: left;
 }
 .ActionMenu .ActionMenuItem:focus {
   outline: 0;
-}
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
   background: var(--colorsSurfacePrimary, #0265dc);
   color: var(--colorsTextOnPrimary, white);
   cursor: pointer;
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__content, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Headline,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .BodyText,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Eyebrow,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Text,
-.ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content,
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__content * {
   color: var(--colorsTextOnPrimary, white);
 }
-.ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
+.ActionMenu .ActionMenuItem:focus .ActionMenuItem__icon .a-Icon > svg {
   fill: currentColor !important;
 }
 .ActionMenu .ActionMenuItem .ActionMenuItem__icon,
@@ -16423,10 +16385,6 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   display: none;
 }
 
-:not(.ActionMenu) > .ActionMenu__TriggerWrapper {
-  display: inline-block;
-}
-
 .ActionMenuGroup__label.Divider {
   margin-left: 8px;
   margin-right: 8px;
@@ -16436,6 +16394,22 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   opacity: 0.6;
 }
 
+.ActionMenu__TriggerWrapper {
+  display: inline-block;
+}
+.ActionMenu .ActionMenu__TriggerWrapper {
+  display: block;
+}
+
+.ActionMenu__ItemsWrapper:focus,
+.ActionMenu__OverlayWrapper:focus {
+  outline: none;
+}
+.ActionMenu__ItemsWrapper:focus-visible,
+.ActionMenu__OverlayWrapper:focus-visible {
+  outline: none;
+}
+
 .Announcement {
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
@@ -17868,6 +17842,12 @@ button.Button--full {
   border-color: var(--colorsSurfaceDefault, white);
   cursor: default;
 }
+.ColorPicker__Item:focus, .ColorPicker__Item:focus-visible {
+  outline: none;
+}
+.ColorPicker:not(.ColorPicker--disabled) .ColorPicker__Item:focus {
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #0265dc), 0 0 0 5px var(--colorsFocusRingPrimary, #a9d1ff);
+}
 @media (pointer: coarse) {
   .ColorPicker__Item {
     width: 32px;
@@ -17891,10 +17871,6 @@ button.Button--full {
 .ColorPicker__CardWrapper--focus .ColorPicker {
   outline: none;
 }
-.ColorPicker__CardWrapper--focus .ColorPicker__CardSection {
-  border-color: var(--colorsBorderPrimary, #0265dc);
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
-}
 .ColorPicker__CardWrapper--disabled .ColorPicker--disabled {
   opacity: initial;
 }
@@ -23817,8 +23793,7 @@ button.a-Icon:focus {
 
 .a-Icon,
 button.a-Icon {
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
   color: inherit;
   display: inline-block;
   font-weight: normal;
@@ -26191,8 +26166,10 @@ button.a-Icon svg {
 .SideNavItem > .SideNavItem__button:active:not(:focus-within) {
   background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
-.SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
+.SideNavItem > .SideNavItem__button:focus, .SideNavItem > .SideNavItem__button:focus-visible {
   outline: none;
+}
+.SideNavItem > .SideNavItem__button:focus-visible {
   box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #78bbfa);
 }
 .SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
@@ -26214,7 +26191,7 @@ button.a-Icon svg {
 }
 .SideNavItem.SideNavItem--disabled > .SideNavItem__button {
   background-color: transparent !important;
-  opacity: 0.4;
+  opacity: 0.6;
   pointer-events: none;
 }
 .SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
@@ -34370,10 +34347,12 @@ _:-ms-lang(x), .Tooltip__body {
   pointer-events: auto;
 }
 
-.Popper:focus {
+.Popper:focus,
+.Popper__body:focus {
   outline: none;
 }
-.Popper:focus-visible {
+.Popper:focus-visible,
+.Popper__body:focus-visible {
   outline: none;
 }