@servicetitan/design-system 10.3.4 → 10.5.1

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: "10.3.4";
+  --anvil-version: "10.5.1";
 }
 
 /*
@@ -120,6 +120,7 @@ a:focus {
   margin-top: -0.5px;
   margin-bottom: -0.5px;
   margin-left: -0.5px;
+  margin-right: 0;
   padding: 0;
   top: 0;
 }
@@ -17078,8 +17079,8 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger__shortLabel {
   align-items: center;
-  background: #f7f7f7;
-  color: #9e9ea0;
+  background: transparent;
+  color: #737475;
   display: flex;
   margin: -7px 0 -7px -12px;
   z-index: 0;
@@ -17102,14 +17103,13 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger__shortLabel--left {
   border-radius: 3px 0 0 3px;
-  border-right: 1px solid #dfe0e1;
-  margin: -7px 12px -7px -12px;
+  margin: -7px 0 -7px -12px;
 }
 .Trigger--s-small .Trigger__shortLabel--left {
-  margin: -3px 10px -3px -10px;
+  margin: -3px 0 -3px -10px;
 }
 .Trigger--s-large .Trigger__shortLabel--left {
-  margin: -11px 11px -11px -11px;
+  margin: -11px 0 -11px -11px;
 }
 .Trigger:active .Trigger__shortLabel--left, .Trigger--open .Trigger__shortLabel--left {
   border-right-color: #2270ee;
@@ -17120,14 +17120,13 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger__shortLabel--right {
   border-radius: 0 3px 3px 0;
-  border-left: 1px solid #dfe0e1;
-  margin: -7px -12px -7px 12px;
+  margin: -7px -12px -7px 0;
 }
 .Trigger--s-small .Trigger__shortLabel--right {
-  margin: -3px -10px -3px 10px;
+  margin: -3px -10px -3px 0;
 }
 .Trigger--s-large .Trigger__shortLabel--right {
-  margin: -11px -11px -11px 11px;
+  margin: -11px -11px -11px 0;
 }
 .Trigger:active .Trigger__shortLabel--right, .Trigger--open .Trigger__shortLabel--right {
   border-right-color: #2270ee;
@@ -18534,31 +18533,6 @@ button.Button--full {
   padding: 16px;
 }
 
-.DateRangeTrigger__shortLabel {
-  align-items: center;
-  background: #f7f7f7;
-  color: #9e9ea0;
-  display: flex;
-  padding: 0 11px;
-  border-radius: 3px 0 0 3px;
-  border-right: 1px solid #dfe0e1;
-  margin: -7px 12px -7px -12px;
-}
-.Trigger--open .DateRangeTrigger__shortLabel {
-  border-color: #2270ee;
-}
-.Trigger--s-small .DateRangeTrigger__shortLabel {
-  margin: -3px 10px -3px -10px;
-}
-.Trigger--s-large .DateRangeTrigger__shortLabel {
-  margin: -11px 11px -11px -11px;
-}
-.Trigger--error .DateRangeTrigger__shortLabel {
-  background-color: #ffece9;
-  color: #f94d32;
-  border-color: #f94d32;
-}
-
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
   color: #141414;
@@ -25066,11 +25040,11 @@ button.Button--full {
   border-bottom-right-radius: 3px;
 }
 
-.Input.Input--has-addon > input, .Input.Input--has-addon > input + input, .Input.Input--has-action > input, .Input.Input--has-action > input + input {
+.Input.Input--has-addon > input, .Input.Input--has-addon > input + input, .Input.Input--has-action > input, .Input.Input--has-action > input + input, .Input.Input--has-addon.Input--has-addon-right > .InputAddon {
   border-left-width: 0;
 }
 
-.Input.Input--has-addon > input, .Input.Input--has-action > input {
+.Input.Input--has-addon > input, .Input.Input--has-action > input, .Input.Input--has-addon.Input--has-addon-left > .InputAddon {
   border-right-width: 0;
 }
 
@@ -25097,7 +25071,6 @@ button.Button--full {
   /* Transparent Icon */
   /* Icon */
   /* Left Icon */
-  /* Focus */
   /*** Input with adjacent label ***/
   /* Input.Addon */
   /* Handling with duplicate borders */
@@ -25179,17 +25152,17 @@ button.Button--full {
 .Input.Input--disabled, .Input:not(.Input--disabled) input[disabled] {
   opacity: 0.6;
 }
-.Input.Input--disabled > input, .Input:not(.Input--disabled) input[disabled] {
+.Input.Input--disabled > input, .Input:not(.Input--disabled) input[disabled], .Input.Input--disabled .InputAddon {
   background-color: #f7f7f7;
   pointer-events: none;
 }
-.Input.Input--disabled > input::-moz-placeholder, .Input:not(.Input--disabled) input[disabled]::-moz-placeholder {
+.Input.Input--disabled > input::-moz-placeholder, .Input:not(.Input--disabled) input[disabled]::-moz-placeholder, .Input.Input--disabled .InputAddon::-moz-placeholder {
   color: rgba(20, 20, 20, 0.4);
 }
-.Input.Input--disabled > input:-ms-input-placeholder, .Input:not(.Input--disabled) input[disabled]:-ms-input-placeholder {
+.Input.Input--disabled > input:-ms-input-placeholder, .Input:not(.Input--disabled) input[disabled]:-ms-input-placeholder, .Input.Input--disabled .InputAddon:-ms-input-placeholder {
   color: rgba(20, 20, 20, 0.4);
 }
-.Input.Input--disabled > input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder {
+.Input.Input--disabled > input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
   color: rgba(20, 20, 20, 0.4);
 }
 .Input:focus-within, .Input.Input--focus {
@@ -25252,6 +25225,9 @@ button.Button--full {
 .Input.Input--error:focus-within.Input--has-addon .InputAddon, .Input.Input--error.Input--focus.Input--has-addon .InputAddon {
   border-color: #e63717;
 }
+.Input.Input--error.Input--has-icon > i.a-Icon {
+  color: #e63717;
+}
 .Input.Input--loading.Input--loading > input {
   padding-right: 2.475em !important;
 }
@@ -25302,9 +25278,8 @@ button.Button--full {
   right: 0;
   margin: 0;
   height: 100%;
-  /* ... */
+  color: #737475;
   width: 2.475em;
-  opacity: 0.5;
   border-radius: 0 3px 3px 0;
   transition: opacity 0.3s ease;
 }
@@ -25339,9 +25314,6 @@ button.Button--full {
   padding-left: 2.475em !important;
   padding-right: 0.6875em !important;
 }
-.Input.Input--has-icon > input:focus ~ i.a-Icon {
-  opacity: 1;
-}
 .Input.Input--has-addon {
   /* ... */
   /* Proper Icon size in case it was not set explicitly */
@@ -25352,8 +25324,7 @@ button.Button--full {
   font-size: 16px;
   z-index: 0;
   /* Differ from Semantic UI */
-  background-color: #f7f7f7;
-  color: #9e9ea0;
+  color: #737475;
   border: 1px solid #dfe0e1;
   border-radius: 3px;
   height: auto;
@@ -25375,6 +25346,12 @@ button.Button--full {
 .Input.Input--has-addon.Input--large > .InputAddon {
   padding: 0.7em 0.6875em;
 }
+.Input.Input--has-addon.Input--has-addon-left > .InputAddon {
+  padding-right: 0;
+}
+.Input.Input--has-addon.Input--has-addon-right > .InputAddon {
+  padding-left: 0;
+}
 .Input.Input--has-addon > .InputAddon .a-Icon {
   line-height: inherit;
 }
@@ -28858,6 +28835,9 @@ button.Button--full {
 .Togglebox--radio .Togglebox__children {
   padding-left: 9px;
 }
+.Togglebox--checkbox .Togglebox__children {
+  padding-left: 8px;
+}
 .Togglebox--toggleSwitch .Togglebox__children {
   padding-left: 12px;
 }
@@ -31413,6 +31393,22 @@ _:-ms-lang(x), .Tooltip__body {
   flex-grow: 3 !important;
 }
 
+.flex-grow-4 {
+  flex-grow: 4;
+}
+
+.flex-grow-4-i {
+  flex-grow: 4 !important;
+}
+
+.flex-grow-5 {
+  flex-grow: 5;
+}
+
+.flex-grow-5-i {
+  flex-grow: 5 !important;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }