@dialpad/dialtone 6.6.0 → 6.8.1

package/lib/build/less/components/notice.less

@@ -15,23 +15,23 @@
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --notice--bgc:          var(--black-025);
-    --notice--fc:           var(--fc-dark);
+    --notice--bgc: var(--black-025);
+    --notice--fc: var(--fc-dark);
+
+    display: flex;
+    align-items: center;
 
     //  Base Styles
     //  ------------------------------------------------------------------------
     box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    padding: var(--su12);
     width: 100%;
     max-width: var(--size628);
-
-    border-radius: var(--br4);
-    background-color: var(--notice--bgc);
+    padding: var(--su12);
+    color: var(--notice--fc);
     font-size: var(--fs14);
     line-height: var(--lh6);
-    color: var(--notice--fc);
+    background-color: var(--notice--bgc);
+    border-radius: var(--br4);
 
     .d-toast & {
         max-width: var(--size464);
@@ -47,9 +47,8 @@
 //  ----------------------------------------------------------------------------
 .d-notice__content {
     display: flex;
-    flex-direction: column;
     flex: 1 auto;
-
+    flex-direction: column;
     margin-right: var(--su16);
 }
 
@@ -68,9 +67,8 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    color: inherit;
-
     margin-right: var(--su8);
+    color: inherit;
 }
 
 //  ============================================================================
@@ -87,8 +85,8 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--important {
-    --notice--bgc:          var(--black-800);
-    --notice--fc:           var(--black-025);
+    --notice--bgc: var(--black-800);
+    --notice--fc: var(--black-025);
 }
 
 //  $$  ERROR
@@ -96,14 +94,14 @@
 .d-notice--error,
 .d-banner--error,
 .d-toast--error {
-    --notice--bgc:          var(--red-100);
-    --notice--fc:           var(--red-700);
+    --notice--bgc: var(--red-100);
+    --notice--fc: var(--red-700);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc:          var(--red-500);
-        --notice--fc:           var(--white);
+        --notice--bgc: var(--red-500);
+        --notice--fc: var(--white);
     }
 }
 
@@ -112,13 +110,13 @@
 .d-notice--info,
 .d-banner--info,
 .d-toast--info {
-    --notice--bgc:          var(--purple-100);
+    --notice--bgc: var(--purple-100);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc:          var(--purple-500);
-        --notice--fc:           var(--white);
+        --notice--bgc: var(--purple-500);
+        --notice--fc: var(--white);
     }
 }
 
@@ -127,14 +125,14 @@
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-    --notice--bgc:          var(--green-100);
-    --notice--fc:           var(--green-700);
+    --notice--bgc: var(--green-100);
+    --notice--fc: var(--green-700);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc:          var(--green-300);
-        --notice--fc:           var(--green-700);
+        --notice--bgc: var(--green-300);
+        --notice--fc: var(--green-700);
     }
 }
 
@@ -143,12 +141,12 @@
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-    --notice--bgc:          var(--yellow-100);
+    --notice--bgc: var(--yellow-100);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc:          var(--yellow-400);
-        --notice--fc:           var(--fc-dark);
+        --notice--bgc: var(--yellow-400);
+        --notice--fc: var(--fc-dark);
     }
 }

package/lib/build/less/components/radio-checkbox.less

@@ -25,38 +25,39 @@
 .d-radio {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --check-radio--color:         var(--primary-color);
-    --check-radio--bc:            var(--black-500);
-    --check-radio--bgc:           var(--white);
+    --check-radio--color: var(--primary-color);
+    --check-radio--bc: var(--black-500);
+    --check-radio--bgc: var(--white);
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        -webkit-appearance: none;
-           -moz-appearance: none;
-                appearance: none;
-
-        &::-ms-check {
-            display: none;
-        }
+        width: 1em;
+        height: 1em;
 
         //  [2]  Now re-style the checkboxes and radios
         //  --------------------------------------------------------------------
         margin: 0;
-        width: 1em;
-        height: 1em;
-        border: var(--su1) solid var(--check-radio--bc);
+        font-size: inherit;
         background-color: var(--check-radio--bgc);
-        box-shadow: none;
+        border: var(--su1) solid var(--check-radio--bc);
         outline: 0;
-        font-size: inherit;
+        box-shadow: none;
         cursor: pointer;
+        -webkit-appearance: none;
+           -moz-appearance: none;
+                appearance: none;
+
+        &::-ms-check {
+            display: none;
+        }
 
         &:focus,
         &:checked:focus {
             --check-radio--bc: var(--check-radio--color);
-            box-shadow:        var(--bs-focus-ring);
+
             outline: 0;
+            box-shadow: var(--bs-focus-ring);
         }
 
         &:checked {
@@ -70,10 +71,11 @@
     //  --  DISABLED
     &[disabled],
     &--disabled {
-        --check-radio--color:   var(--black-200);
-        --check-radio--bc:      var(--black-200);
-        --check-radio--bgc:     var(--black-075);
-        cursor:                 not-allowed;
+        --check-radio--color: var(--black-200);
+        --check-radio--bc: var(--black-200);
+        --check-radio--bgc: var(--black-075);
+
+        cursor: not-allowed;
     }
 }
 
@@ -85,8 +87,8 @@
 .d-radio-group {
     display: flex;
     padding-right: var(--su1);
-    padding-left: var(--su1);
     padding-bottom: var(--su2);
+    padding-left: var(--su1);
 
     //  --  Wrapper Disabled State
     &.d-checkbox-group--disabled,
@@ -120,22 +122,19 @@
 .d-radio__copy {
     display: inline-flex;
     flex-direction: column;
-
-    margin-left: var(--su8);
     max-width: var(--size464);
+    margin-left: var(--su8);
 }
 
 .d-checkbox__label,
 .d-radio__label {
     display: inline-flex;
-    flex-direction: column;
     flex: 1 auto;
-
+    flex-direction: column;
     color: var(--black-800);
+    font-weight: var(--fw-normal);
     font-size: var(--fs14);
     line-height: calc(20/14);
-    font-weight: var(--fw-normal);
-
     cursor: pointer;
 }
 
@@ -145,10 +144,10 @@
 //  ----------------------------------------------------------------------------
 .d-checkbox {
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: var(--br2);
-        background-position: center center;
         background-repeat: no-repeat;
+        background-position: center center;
         background-size: contain;
+        border-radius: var(--br2);
 
         &:focus,
         &:checked:focus {
@@ -156,76 +155,83 @@
         }
 
         &:checked {
-            --check-radio--bgc:     var(--check-radio--color);
+            --check-radio--bgc: var(--check-radio--color);
+
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
 
             //  Disabled
             &[disabled] {
-                --check-radio--bgc:     var(--black-075);
+                --check-radio--bgc: var(--black-075);
+
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc:     var(--black-075);
+            --check-radio--bgc: var(--black-075);
+
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
 
         &--indeterminate,
         &:indeterminate {
-            --check-radio--bgc:     var(--check-radio--color);
+            --check-radio--bgc: var(--check-radio--color);
+
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
 
             &[disabled] {
-                --check-radio--bgc:     var(--black-075);
+                --check-radio--bgc: var(--black-075);
+
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
         }
 
         &--indeterminate&--disabled,
         &:indeterminate&--disabled {
-            --check-radio--bgc:     var(--black-075);
+            --check-radio--bgc: var(--black-075);
+
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
 
         //  Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color:   var(--black-200);
-            --check-radio--bc:      var(--black-200);
-            --check-radio--bgc:     var(--black-075);
+            --check-radio--color: var(--black-200);
+            --check-radio--bc: var(--black-200);
+            --check-radio--bgc: var(--black-075);
         }
-
     }
 }
 
 //  $$  CHECKBOX VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-checkbox--warning {
-    --check-radio--color:         var(--warning-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--warning-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-warning);
+        box-shadow: var(--bs-focus-ring-warning);
     }
 }
+
 .d-checkbox--error {
-    --check-radio--color:         var(--error-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--error-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-error);
+        box-shadow: var(--bs-focus-ring-error);
     }
 }
+
 .d-checkbox--success {
-    --check-radio--color:         var(--success-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--success-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-success);
+        box-shadow: var(--bs-focus-ring-success);
     }
 }
 
@@ -240,28 +246,29 @@
         // Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color:   var(--black-200);
-            --check-radio--bc:      var(--black-200);
-            --check-radio--bgc:     var(--black-075);
+            --check-radio--color: var(--black-200);
+            --check-radio--bc: var(--black-200);
+            --check-radio--bgc: var(--black-075);
         }
 
         &:focus,
         &:checked:focus {
-            box-shadow:             var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+            box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
         }
 
         &:checked {
-            --check-radio--bgc:     var(--check-radio--color);
-            box-shadow:             inset 0 0 0 var(--su2) var(--white);
+            --check-radio--bgc: var(--check-radio--color);
+
+            box-shadow: inset 0 0 0 var(--su2) var(--white);
 
             // Disabled
             &[disabled] {
-                --check-radio--bgc:     var(--black-200);
+                --check-radio--bgc: var(--black-200);
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc:     var(--black-200);
+            --check-radio--bgc: var(--black-200);
         }
     }
 }
@@ -269,31 +276,31 @@
 //  $$  RADIO VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-radio--warning {
-    --check-radio--color:         var(--warning-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--warning-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
+        box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
 .d-radio--error {
-    --check-radio--color:         var(--error-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--error-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
+        box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
 .d-radio--success {
-    --check-radio--color:         var(--success-color);
-    --check-radio--bc:            var(--check-radio--color);
+    --check-radio--color: var(--success-color);
+    --check-radio--bc: var(--check-radio--color);
 
     &:focus,
     &:checked:focus {
-        box-shadow:               var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
+        box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
     }
-}
+}

package/lib/build/less/components/selects.less

@@ -23,42 +23,41 @@
 .d-select {
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
-  --select--bc:           var(--black-400);
-  --select--bgc:          var(--white);
-  --select--fc:           var(--black-800);
-  --select--bs:           var(--focus-ring);
+  --select--bc: var(--black-400);
+  --select--bgc: var(--white);
+  --select--fc: var(--black-800);
+  --select--bs: var(--focus-ring);
 
-  box-sizing: border-box;
   position: relative;
   display: inline-flex; // important to the children alignment
+  box-sizing: border-box;
   width: 100%; // important to fill the available space
   width: -webkit-fill-available; // important to fill the available space
-
   font-weight: inherit;
   font-size: var(--fs18);
   font-family: inherit;
   line-height: var(--lh-tight);
 
   //  --  Arrows
-  &:before,
-  &:after {
-    content: "";
+  &::before,
+  &::after {
     position: absolute;
-    z-index: var(--zi-selected);
     right: 0.75em;
+    z-index: var(--zi-selected);
     border-color: var(--black-900) transparent;
     border-style: solid;
     border-width: 0.25em;
+    content: '';
     pointer-events: none;
   }
 
-  &:before {
-    top: calc(~"50% - 0.25em");
+  &::before {
+    top: calc(~'50% - 0.25em');
     border-top-width: 0;
   }
 
-  &:after {
-    top: calc(~"50% + 0.125em");
+  &::after {
+    top: calc(~'50% + 0.125em');
     border-bottom-width: 0;
   }
 }
@@ -100,6 +99,11 @@
 //  $  SELECT MENU INPUT
 //  ----------------------------------------------------------------------------
 .d-select__input {
+  height: 100%; // Fill the height of its parent
+  padding: 0.7rem 2em 0.7rem 0.8rem;
+  color: var(--select--fc);
+  background-color: var(--select--bgc);
+  border-color: var(--select--bc);
   //  [1] Reset the appearance
   -webkit-appearance: none;
       -moz-appearance: none;
@@ -110,30 +114,27 @@
 
   --select--bc: var(--black-500);
 
-  padding: 0.7rem 2em 0.7rem 0.8rem;
-  height: 100%; // Fill the height of its parent
-
-  color:            var(--select--fc);
-  background-color: var(--select--bgc);
-  border-color:     var(--select--bc);
-
   &:focus {
     --select--bc: var(--primary-color);
 
     box-shadow: var(--bs-focus-ring);
   }
+
   &:disabled {
     color: var(--black-400);
     background: var(--black-075);
     border: 1px solid var(--black-200);
   }
+
   &::-moz-focus-inner {
     outline: none !important;
   }
+
   &:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 var(--black-900);
   }
+
   &::-ms-expand {
     display: none;
   }
@@ -146,6 +147,7 @@
 
   &:focus {
     --select--bc: var(--success-color);
+
     box-shadow: var(--bs-focus-ring-success);
   }
 }
@@ -155,6 +157,7 @@
 
   &:focus {
     --select--bc: var(--error-color);
+
     box-shadow: var(--bs-focus-ring-error);
   }
 }
@@ -164,13 +167,14 @@
 
   &:focus {
     --select--bc: var(--warning-color);
+
     box-shadow: var(--bs-focus-ring-warning);
   }
 }
 
 .d-select--disabled {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     border-color: var(--black-400) transparent;
   }
 }

package/lib/build/less/components/table.less

@@ -17,29 +17,26 @@
 .d-table {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --table--th:           var(--black-700);
-    --table--td:           var(--black-600);
-    --table--bc:           var(--black-200);
-
-    box-sizing: border-box;
+    --table--th: var(--black-700);
+    --table--td: var(--black-600);
+    --table--bc: var(--black-200);
 
     display: table;
-    max-width: 100%;
+    box-sizing: border-box;
     width: 100%;
+    max-width: 100%;
     margin: var(--su0);
-
-    border-spacing: 0;
-    border-collapse: collapse;
-
     font-size: var(--fs14);
     line-height: var(--lh2);
+    border-collapse: collapse;
+    border-spacing: 0;
 
     // Caption styles
     .d-table__caption {
+      margin-bottom: var(--su8);
       color: var(--table--th);
-      font-size: var(--fs18);
       font-weight: var(--fw-bold);
-      margin-bottom: var(--su8);
+      font-size: var(--fs18);
       .d-ta-unset();
     }
 
@@ -96,9 +93,9 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-table--inverted {
-    --table--th:           var(--black-050);
-    --table--td:           var(--black-100);
-    --table--bc:           var(--black-050);
+    --table--th: var(--black-050);
+    --table--td: var(--black-100);
+    --table--bc: var(--black-050);
 }
 
 //  ============================================================================
@@ -107,13 +104,13 @@
 .d-table--striped {
     // Row Styles
     tr:nth-child(even) {
-        background-color: hsl(var(--black-400-h),var(--black-400-s),var(--black-400-l), .1)
+        background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
     }
 
     &.d-table--inverted {
         // Row Styles
         tr:nth-child(even) {
-            background-color: hsl(var(--black-050-h),var(--black-050-s),var(--black-050-l), .1);
+            background-color: hsl(var(--black-050-h), var(--black-050-s), var(--black-050-l), 0.1);
         }
     }
 }