@dialpad/dialtone 6.6.0 → 6.8.1

package/lib/build/less/components/button.less

@@ -1,4 +1,4 @@
-@import (reference) "../variables/icons.less";
+@import (reference) '../variables/icons.less';
 
 //
 //  DIALTONE
@@ -20,37 +20,32 @@
 .d-btn {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --button--fc:               var(--primary-color);
-    --button--bgc:              transparent;
-    --button--bc:               transparent;
-    --button--br:               var(--base--corner-radius);
-
-    box-sizing: border-box;
+    --button--fc: var(--primary-color);
+    --button--bgc: transparent;
+    --button--bc: transparent;
+    --button--br: var(--base--corner-radius);
 
     position: relative;
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
     padding: calc(var(--su8) - var(--su1));  // Subtract border
+    color: var(--button--fc);
+    font-size: var(--fs16);
+    font-family: inherit;
+    line-height: var(--lh4);
+    text-transform: inherit;
+    text-decoration: none;
     vertical-align: middle;
-
+    background-color: var(--button--bgc);
     border: 0.1rem solid var(--button--bc);
     border-radius: var(--button--br);
-    background-color: var(--button--bgc);
     box-shadow: var(--button--bs);
-
-    text-decoration: none;
-    text-transform: inherit;
-    font-family: inherit;
-    font-size: var(--fs16);
-    line-height: var(--lh4);
-    color: var(--button--fc);
-
     cursor: pointer;
     transition-timing-function: var(--ttf-in-out);
     transition-duration: 75ms;
     transition-property: background-color, border, box-shadow;
-
     user-select: none;
     fill: currentColor;
 
@@ -60,7 +55,7 @@
     &:active,
     &:hover {
         --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~" / " 10%);
+        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
     }
 
     &:focus {
@@ -71,8 +66,8 @@
     &[disabled] {
         color: var(--black-400);
         background-color: var(--black-100);
-        cursor: not-allowed;
         border-color: transparent;
+        cursor: not-allowed;
         transition: none;
     }
 
@@ -140,8 +135,8 @@
 //  ----------------------------------------------------------------------------
 .d-btn__label {
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }
 
 //  ============================================================================
@@ -210,7 +205,7 @@
     }
 
     &.d-btn--outlined {
-        --button--bc:    var(--black-700);
+        --button--bc: var(--black-700);
     }
 
     // &:active {
@@ -221,29 +216,33 @@
     //  Adjust padding based on sizes
     &.d-btn--xs {
         padding: calc(var(--su8) - var(--su1));
-        --button--br:   var(--br-circle);
+
+        --button--br: var(--br-circle);
     }
 
     &.d-btn--sm {
         padding: var(--su8);
-        --button--br:   var(--br-circle);
+
+        --button--br: var(--br-circle);
     }
 
     &.d-btn--lg {
         padding: calc(var(--su12) + var(--su1));
-        --button--br:   var(--br-circle);
+
+        --button--br: var(--br-circle);
     }
 
     &.d-btn--xl {
         padding: calc(var(--su16) - var(--su1));
-        --button--br:   var(--br-circle);
+
+        --button--br: var(--br-circle);
     }
 }
 
 //  $$  OUTLINED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--outlined {
-    --button--bc:    var(--primary-color);
+    --button--bc: var(--primary-color);
 }
 
 //  $$  PRIMARY BUTTON
@@ -265,7 +264,7 @@
 
     &:hover {
       --button--fc: var(--black-800);
-      --button--bgc: hsla(var(--muted-color-hsl) ~" / " 10%);
+      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 10%);
     }
 
     &:focus {
@@ -283,7 +282,7 @@
     --button--fc: var(--error-color);
 
     &:hover {
-        --button--bgc: hsla(var(--error-color-hsl) ~" / " 10%);
+        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 10%);
         --button--fc: var(--error-color-hover);
     }
 
@@ -315,7 +314,7 @@
 
     &:hover {
         --button--fc: var(--white);
-        --button--bgc: hsla(var(--white-hsl) ~" / " 15%);
+        --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
     &:focus {
@@ -334,7 +333,7 @@
 
         &:hover {
             --button--fc: var(--primary-color-hover);
-            --button--bgc: hsla(var(--white-hsl) ~" / " 90%);
+            --button--bgc: hsla(var(--white-hsl) ~' / ' 90%);
         }
     }
 }
@@ -348,30 +347,30 @@
 //  $$  DISABLED STATE
 //  ----------------------------------------------------------------------------
 .d-btn--disabled {
-    pointer-events: none;
     color: var(--black-400);
     background-color: var(--black-100);
-    cursor: not-allowed;
     border-color: transparent;
+    cursor: not-allowed;
     transition: none;
+    pointer-events: none;
 }
 
 //  $$  BRAND BUTTONS
 //  ----------------------------------------------------------------------------
 .d-btn--brand {
     display: flex;
-    background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
     color: var(--white);
+    background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
 
     &:hover,
     &:focus,
     &:active {
+        color: hsla(var(--white-hsl) ~' / ' 90%);
         background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
-        color: hsla(var(--white-hsl) ~" / " 90%);
     }
 
     &:focus {
-        box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~" / " 90%);
+        box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
     }
 
     &:active {
@@ -379,14 +378,14 @@
     }
 
     .d-btn__icon {
-      margin-right: var(--su8);
-      margin-left: var(--sun4);
+      align-items: center;
+      justify-content: center;
       width: 2em;
       height: 2em;
-      border-radius: var(--br2);
+      margin-right: var(--su8);
+      margin-left: var(--sun4);
       background-color: var(--white);
-      justify-content: center;
-      align-items: center
+      border-radius: var(--br2);
     }
 
     .d-btn__label {
@@ -396,21 +395,21 @@
 
 //  --  GOOGLE
 .d-btn--google {
-    --brand-color-h:    217;
-    --brand-color-s:    89%;
-    --brand-color-l:    61%;
+    --brand-color-h: 217;
+    --brand-color-s: 89%;
+    --brand-color-l: 61%;
 }
 //  --  OFFICE 365
 .d-btn--o365 {
-    --brand-color-h:    15;
-    --brand-color-s:    99%;
-    --brand-color-l:    46%;
+    --brand-color-h: 15;
+    --brand-color-s: 99%;
+    --brand-color-l: 46%;
 }
 //  --  LINKEDIN
 .d-btn--linkedin {
-    --brand-color-h:    197;
-    --brand-color-s:    100%;
-    --brand-color-l:    26%;
+    --brand-color-h: 197;
+    --brand-color-s: 100%;
+    --brand-color-l: 26%;
 }
 
 //  ============================================================================
@@ -431,18 +430,16 @@
     }
 
     //  Show the loading animation
-    &:before {
-        content: "";
+    &::before {
         position: absolute;
         top: calc(50% - var(--su8));
         left: calc(50% - var(--su8));
-
         width: var(--su16);
         height: var(--su16);
-        border-radius: var(--br-circle);
         border: var(--su2) solid currentColor;
         border-left-color: transparent !important;
-
+        border-radius: var(--br-circle);
         animation: d-loading-circle 900ms infinite linear;
+        content: '';
     }
 }

package/lib/build/less/components/forms.less

@@ -1,4 +1,4 @@
-@import (reference) "../variables/typography.less";
+@import (reference) '../variables/typography.less';
 
 //
 //  DIALTONE
@@ -21,8 +21,8 @@
 //  $  FIELDSETS
 //  ----------------------------------------------------------------------------
 fieldset {
-  padding: var(--su0);
   min-width: var(--su0);
+  padding: var(--su0);
   border: none;
 }
 
@@ -31,24 +31,20 @@ fieldset {
 //  $  LABELS
 //  ----------------------------------------------------------------------------
 .d-label {
-  box-sizing: border-box;
-
   display: flex;
   flex: 1 0%;
   align-items: baseline;
   justify-content: space-between;
-
+  box-sizing: border-box;
   margin-bottom: var(--su6);
-
+  color: currentColor;
   font-weight: @fw-bold;
   font-size: var(--fs16);
   font-family: inherit;
   line-height: var(--lh4);
-  color: currentColor;
-
-  cursor: pointer;
   word-break: break-word;
   overflow-wrap: break-word;
+  cursor: pointer;
 
   legend & { cursor: default; }
 }
@@ -56,19 +52,22 @@ fieldset {
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-label--xs {
-  font-size:   var(--fs12);
+  font-size: var(--fs12);
   line-height: var(--lh4);
 }
+
 .d-label--sm {
-  font-size:   var(--fs14);
+  font-size: var(--fs14);
   line-height: var(--lh2);
 }
+
 .d-label--lg {
-  font-size:   var(--fs18);
+  font-size: var(--fs18);
   line-height: var(--lh2);
 }
+
 .d-label--xl {
-  font-size:   var(--fs20);
+  font-size: var(--fs20);
   line-height: var(--lh4);
 }
 
@@ -77,16 +76,14 @@ fieldset {
 //  $ DESCRIPTIONS
 //  ----------------------------------------------------------------------------
 .d-description {
-  box-sizing: border-box;
-
   display: flex;
+  box-sizing: border-box;
   margin-bottom: var(--su6);
-
   color: var(--black-500);
-  fill: currentColor;
   font-size: var(--fs12);
   font-family: inherit;
   line-height: var(--lh4);
+  fill: currentColor;
 }
 
 .d-label + .d-description {
@@ -96,12 +93,12 @@ fieldset {
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-description--lg {
-  font-size:   var(--fs14);
+  font-size: var(--fs14);
   line-height: var(--lh6);
 }
 
 .d-description--xl {
-  font-size:   var(--fs16);
+  font-size: var(--fs16);
   line-height: var(--lh6);
 }
 
@@ -109,32 +106,31 @@ fieldset {
 //  $   VALIDATION MESSAGES
 //  ----------------------------------------------------------------------------
 .d-validation-message {
-  --validation--fc:   var(--fc-light);
+  --validation--fc: var(--fc-light);
 
   display: inline-flex;
   align-items: flex-start;
   margin-top: var(--su6);
-
+  color: var(--validation--fc);
+  font-weight: inherit;
   font-size: var(--fs12);
   font-family: inherit;
-  font-weight: inherit;
   line-height: var(--lh4);
-  color: var(--validation--fc);
 
   // Icon Slot
   &::before {
-    content: '';
-    height: var(--su16);
     width: var(--su16);
     min-width: var(--su16);
+    height: var(--su16);
     margin-right: var(--su4);
+    content: '';
   }
 }
 
 //  $$   VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-validation-message--warning {
-  --validation--fc:   var(--fc-warning);
+  --validation--fc: var(--fc-warning);
 
   &::before {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
@@ -143,7 +139,7 @@ fieldset {
 }
 
 .d-validation-message--error {
-  --validation--fc:   var(--fc-error);
+  --validation--fc: var(--fc-error);
 
   &::before {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
@@ -152,7 +148,7 @@ fieldset {
 }
 
 .d-validation-message--success {
-  --validation--fc:   var(--fc-success);
+  --validation--fc: var(--fc-success);
 
   &::before {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");