@dialpad/dialtone 6.7.0 → 6.10.0

package/lib/build/less/utilities/effects.less

@@ -1,4 +1,4 @@
-@import (reference) "../variables/spacing.less";
+//@import (reference) '../variables/spacing.less';
 
 //
 //  DIALTONE
@@ -27,6 +27,7 @@
     from {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(360deg);
     }
@@ -37,98 +38,116 @@
 @keyframes d-loading-bars__short {
   0% {
     min-height: @su4;
-    opacity: 0;
     transform: translateY(-@su16);
+    opacity: 0;
   }
+
   5% {
     min-height: @su4;
-    opacity: 0.5;
     transform: translateY(@su16);
+    opacity: 0.5;
   }
+
   10% {
-    opacity: 1;
     min-height: 1rem;
     transform: translateY(-@su2);
+    opacity: 1;
   }
+
   15% {
-    opacity: 1;
     transform: translateY(@su1);
-  }
-  20%, 70% {
     opacity: 1;
+  }
+
+  20%,
+ 70% {
     min-height: 1rem;
     transform: translateY(0);
+    opacity: 1;
   }
+
   75% {
-    opacity: 1;
     min-height: 0.75rem;
     transform: translateY(1rem);
+    opacity: 1;
   }
+
   80% {
-    opacity: 0.5;
     min-height: @su4;
     transform: translateY(-@su4);
+    opacity: 0.5;
   }
-  85%, 100% {
-    opacity: 0;
+
+  85%,
+ 100% {
     min-height: @su4;
     transform: translateY(@su16);
+    opacity: 0;
   }
 }
+
 @keyframes d-loading-bars__tall {
   0% {
     min-height: @su4;
-    opacity: 0;
     transform: translateY(-@su16);
+    opacity: 0;
   }
+
   5% {
     min-height: @su4;
-    opacity: 0.5;
     transform: translateY(@su16);
+    opacity: 0.5;
   }
+
   10% {
-    opacity: 1;
     min-height: 1rem;
     transform: translateY(-@su2);
+    opacity: 1;
   }
+
   15% {
-    opacity: 1;
     min-height: 2.2rem;
     transform: translateY(@su1);
-  }
-  20%, 70% {
     opacity: 1;
+  }
+
+  20%,
+ 70% {
     min-height: 2.2rem;
     transform: translateY(0);
+    opacity: 1;
   }
+
   75% {
-    opacity: 1;
     min-height: @su16;
     transform: translateY(1rem);
+    opacity: 1;
   }
+
   80% {
-    opacity: 1;
     min-height: 1rem;
     transform: translateY(-@su4);
+    opacity: 1;
   }
-  85%, 100% {
-    opacity: 0;
+
+  85%,
+ 100% {
     min-height: @su4;
     transform: translateY(@su16);
+    opacity: 0;
   }
 }
 
-
 //  ============================================================================
 //  $   BOX SHADOW
 //  ----------------------------------------------------------------------------
-.d-bs-sm                        { box-shadow: var(--bs-sm) !important; }
-.d-bs-md                        { box-shadow: var(--bs-md) !important; }
-.d-bs-lg                        { box-shadow: var(--bs-lg) !important; }
-.d-bs-xl                        { box-shadow: var(--bs-xl) !important; }
-.d-bs-card                      { box-shadow: var(--bs-card) !important; }
-.d-bs-none                      { box-shadow: none !important; }
-.d-bs-unset                     { box-shadow: unset !important; }
+.d-bs-sm { box-shadow: var(--bs-sm) !important; }
+.d-bs-md { box-shadow: var(--bs-md) !important; }
+.d-bs-lg { box-shadow: var(--bs-lg) !important; }
+.d-bs-xl { box-shadow: var(--bs-xl) !important; }
+.d-bs-card { box-shadow: var(--bs-card) !important; }
+.d-bs-none { box-shadow: none !important; }
+.d-bs-unset { box-shadow: unset !important; }
 
 
 //  ============================================================================
@@ -136,55 +155,55 @@
 //      For times that you want a fill background, but not at 100% opacity.
 //      These are only offered for $white and gray.
 //  ----------------------------------------------------------------------------
-.d-o0                           { opacity: 0 !important; }
-.d-o5                           { opacity: .05 !important; }
-.d-o10                          { opacity: .1 !important; }
-.d-o20                          { opacity: .2 !important; }
-.d-o25                          { opacity: .25 !important; }
-.d-o30                          { opacity: .3 !important; }
-.d-o40                          { opacity: .4 !important; }
-.d-o50                          { opacity: .5 !important; }
-.d-o60                          { opacity: .6 !important; }
-.d-o70                          { opacity: .7 !important; }
-.d-o75                          { opacity: .75 !important; }
-.d-o80                          { opacity: .8 !important; }
-.d-o90                          { opacity: .9 !important; }
-.d-o100                         { opacity: 1 !important; }
-.d-o-unset                      { opacity: unset !important; }
+.d-o0 { opacity: 0 !important; }
+.d-o5 { opacity: 0.05 !important; }
+.d-o10 { opacity: 0.1 !important; }
+.d-o20 { opacity: 0.2 !important; }
+.d-o25 { opacity: 0.25 !important; }
+.d-o30 { opacity: 0.3 !important; }
+.d-o40 { opacity: 0.4 !important; }
+.d-o50 { opacity: 0.5 !important; }
+.d-o60 { opacity: 0.6 !important; }
+.d-o70 { opacity: 0.7 !important; }
+.d-o75 { opacity: 0.75 !important; }
+.d-o80 { opacity: 0.8 !important; }
+.d-o90 { opacity: 0.9 !important; }
+.d-o100 { opacity: 1 !important; }
+.d-o-unset { opacity: unset !important; }
 
 
 //  ============================================================================
 //  $   TRANSITION
 //  ----------------------------------------------------------------------------
 .d-t {
+    transition-delay: 0s;
+    transition-timing-function: var(--ttf-in-out);
     transition-duration: var(--td50);
     transition-property: all;
-    transition-timing-function: var(--ttf-in-out);
-    transition-delay: 0s;
 }
 
 //  --  TRANSITION DURATION
-.d-td0                          { transition-duration: var(--td0) !important; }
-.d-td50                         { transition-duration: var(--td50) !important; }
-.d-td100                        { transition-duration: var(--td100) !important; }
-.d-td150                        { transition-duration: var(--td150) !important; }
-.d-td200                        { transition-duration: var(--td200) !important; }
+.d-td0 { transition-duration: var(--td0) !important; }
+.d-td50 { transition-duration: var(--td50) !important; }
+.d-td100 { transition-duration: var(--td100) !important; }
+.d-td150 { transition-duration: var(--td150) !important; }
+.d-td200 { transition-duration: var(--td200) !important; }
 
 //  --  TRANSITION TIMING
-.d-ttf-in-out                   { transition-timing-function: var(--ttf-in-out) !important; }
-.d-ttf-out                      { transition-timing-function: var(--ttf-out) !important; }
+.d-ttf-in-out { transition-timing-function: var(--ttf-in-out) !important; }
+.d-ttf-out { transition-timing-function: var(--ttf-out) !important; }
 
 //  --  TRANSITION PROPERTY
-.d-tp-all                       { transition-property: all !important; }
-.d-tp-o                         { transition-property: opacity !important; }
-.d-tp-bs                        { transition-property: box-shadow !important; }
-.d-tp-bgc                       { transition-property: background-color !important; }
-.d-tp-transform                 { transition-property: transform !important; }
-.d-tp-colors                    { transition-property: background-color, border-color, color, fill, stroke !important; }
+.d-tp-all { transition-property: all !important; }
+.d-tp-o { transition-property: opacity !important; }
+.d-tp-bs { transition-property: box-shadow !important; }
+.d-tp-bgc { transition-property: background-color !important; }
+.d-tp-transform { transition-property: transform !important; }
+.d-tp-colors { transition-property: background-color, border-color, color, fill, stroke !important; }
 
 //  --  TRANSITION DELAY
-.d-t-delay25                    { transition-delay: var(--td25) !important; }
-.d-t-delay50                    { transition-delay: var(--td50) !important; }
-.d-t-delay100                   { transition-delay: var(--td100) !important; }
-.d-t-delay150                   { transition-delay: var(--td150) !important; }
-.d-t-delay200                   { transition-delay: var(--td200) !important; }
+.d-t-delay25 { transition-delay: var(--td25) !important; }
+.d-t-delay50 { transition-delay: var(--td50) !important; }
+.d-t-delay100 { transition-delay: var(--td100) !important; }
+.d-t-delay150 { transition-delay: var(--td150) !important; }
+.d-t-delay200 { transition-delay: var(--td200) !important; }

package/lib/build/less/utilities/flex.less

@@ -1,3 +1,5 @@
+//@import (reference) '../utilities/internals.less';
+
 //
 //  DIALTONE
 //  UTILITIES: FLEXBOX
@@ -22,16 +24,16 @@
 //     cross-axis. Note that this only works when a parent container
 //     has more than one line.
 //  ----------------------------------------------------------------------------
-.d-ac-center                 { align-content: center !important; }
-.d-ac-flex-end               { align-content: flex-end !important; }
-.d-ac-flex-start             { align-content: flex-start !important; }
-.d-ac-space-around           { align-content: space-around !important; }
-.d-ac-space-between          { align-content: space-between !important; }
-.d-ac-space-evenly           { align-content: space-evenly !important; }
-.d-ac-baseline               { align-content: baseline !important; }
-.d-ac-stretch                { align-content: stretch !important; }
-.d-ac-normal                 { align-content: normal !important; }
-.d-ac-unset                  { align-content: unset !important; }
+.d-ac-center { align-content: center !important; }
+.d-ac-flex-end { align-content: flex-end !important; }
+.d-ac-flex-start { align-content: flex-start !important; }
+.d-ac-space-around { align-content: space-around !important; }
+.d-ac-space-between { align-content: space-between !important; }
+.d-ac-space-evenly { align-content: space-evenly !important; }
+.d-ac-baseline { align-content: baseline !important; }
+.d-ac-stretch { align-content: stretch !important; }
+.d-ac-normal { align-content: normal !important; }
+.d-ac-unset { align-content: unset !important; }
 
 
 //  ============================================================================
@@ -40,13 +42,13 @@
 //     the parent's cross axis. Think of it the cross-axis for
 //     justify-content.
 //  ----------------------------------------------------------------------------
-.d-ai-center                 { align-items: center !important; }
-.d-ai-flex-end               { align-items: flex-end !important; }
-.d-ai-flex-start             { align-items: flex-start !important; }
-.d-ai-baseline               { align-items: baseline !important; }
-.d-ai-stretch                { align-items: stretch !important; }
-.d-ai-normal                 { align-items: normal !important; }
-.d-ai-unset                  { align-items: unset !important; }
+.d-ai-center { align-items: center !important; }
+.d-ai-flex-end { align-items: flex-end !important; }
+.d-ai-flex-start { align-items: flex-start !important; }
+.d-ai-baseline { align-items: baseline !important; }
+.d-ai-stretch { align-items: stretch !important; }
+.d-ai-normal { align-items: normal !important; }
+.d-ai-unset { align-items: unset !important; }
 
 
 //  ============================================================================
@@ -54,14 +56,14 @@
 //     Allows child containers to re-align themselves regardless
 //     of the parent's main axis direction.
 //  ----------------------------------------------------------------------------
-.d-as-center                 { align-self: center !important; }
-.d-as-flex-end               { align-self: flex-end !important; }
-.d-as-flex-start             { align-self: flex-start !important; }
-.d-as-baseline               { align-self: baseline !important; }
-.d-as-stretch                { align-self: stretch !important; }
-.d-as-auto                   { align-self: auto !important; }
-.d-as-normal                 { align-self: normal !important; }
-.d-as-unset                  { align-self: unset !important; }
+.d-as-center { align-self: center !important; }
+.d-as-flex-end { align-self: flex-end !important; }
+.d-as-flex-start { align-self: flex-start !important; }
+.d-as-baseline { align-self: baseline !important; }
+.d-as-stretch { align-self: stretch !important; }
+.d-as-auto { align-self: auto !important; }
+.d-as-normal { align-self: normal !important; }
+.d-as-unset { align-self: unset !important; }
 
 
 //  ============================================================================
@@ -69,38 +71,6 @@
 //  ----------------------------------------------------------------------------
 //  $$  FLEX COLUMNS
 //  ----------------------------------------------------------------------------
-#d-internals() {
-  #build-flex-columns(@num, @count: 1) when (@count =< @num) {
-    .d-fl-col@{count} {
-      display: flex;
-
-      //  Automatically make all direct child to obey the parent class
-      > * {
-        --fl-gap: 0;
-        --fl-basis: calc(100% / @count);
-
-        display: inline-flex;
-        margin: var(--fl-gap);
-        flex: 1 calc(var(--fl-basis) - ((var(--fl-gap) * 2)));
-
-        //  Add in a gap to items after the first row
-        &:nth-child(-n + @{count}) {
-          margin-top: 0;
-        }
-      }
-
-      //  If flex column is in a column direction (and became rows),
-      //  change the margin direction.
-      &.d-fd-column > * {
-        margin: var(--fl-gap) 0;
-      }
-    }
-
-    //  Iterate our loop until we hit our grid column total
-    #d-internals #build-flex-columns(@num, @count + 1);
-  }
-}
-@flex-columns: 12;
 
 //  Now let's generate the columns
 #d-internals #build-flex-columns(@flex-columns);
@@ -108,18 +78,18 @@
 
 //  $$  FLEX GAPS
 //  ----------------------------------------------------------------------------
-.d-flg0 > *     { --fl-gap: 0 !important; }
-.d-flg1 > *     { --fl-gap: 0.1rem !important; }
-.d-flg2 > *     { --fl-gap: 0.2rem !important; }
-.d-flg4 > *     { --fl-gap: 0.4rem !important; }
-.d-flg6 > *     { --fl-gap: 0.6rem !important; }
-.d-flg8 > *     { --fl-gap: 0.8rem !important; }
-.d-flg12 > *    { --fl-gap: 1.2rem !important; }
-.d-flg16 > *    { --fl-gap: 1.6rem !important; }
-.d-flg24 > *    { --fl-gap: 2.4rem !important; }
-.d-flg32 > *    { --fl-gap: 3.2rem !important; }
-.d-flg48 > *    { --fl-gap: 4.8rem !important; }
-.d-flg64 > *    { --fl-gap: 6.4rem !important; }
+.d-flg0 > * { --fl-gap: 0 !important; }
+.d-flg1 > * { --fl-gap: 0.1rem !important; }
+.d-flg2 > * { --fl-gap: 0.2rem !important; }
+.d-flg4 > * { --fl-gap: 0.4rem !important; }
+.d-flg6 > * { --fl-gap: 0.6rem !important; }
+.d-flg8 > * { --fl-gap: 0.8rem !important; }
+.d-flg12 > * { --fl-gap: 1.2rem !important; }
+.d-flg16 > * { --fl-gap: 1.6rem !important; }
+.d-flg24 > * { --fl-gap: 2.4rem !important; }
+.d-flg32 > * { --fl-gap: 3.2rem !important; }
+.d-flg48 > * { --fl-gap: 4.8rem !important; }
+.d-flg64 > * { --fl-gap: 6.4rem !important; }
 
 
 
@@ -130,38 +100,38 @@
 //      This determines the content flow direction within the parent container.
 //      Default value is row.
 //  ----------------------------------------------------------------------------
-.d-fd-row                    { flex-direction: row !important; }
-.d-fd-row-reverse            { flex-direction: row-reverse !important; }
-.d-fd-column                 { flex-direction: column !important; }
-.d-fd-column-reverse         { flex-direction: column-reverse !important; }
-.d-fd-unset                  { flex-direction: unset !important; }
+.d-fd-row { flex-direction: row !important; }
+.d-fd-row-reverse { flex-direction: row-reverse !important; }
+.d-fd-column { flex-direction: column !important; }
+.d-fd-column-reverse { flex-direction: column-reverse !important; }
+.d-fd-unset { flex-direction: unset !important; }
 
 //  $$  FLEX WRAP
 //      This determines if a parent's children will wrap.
 //      Default value is nowrap.
 //  ----------------------------------------------------------------------------
-.d-fw-wrap                   { flex-wrap: wrap !important; }
-.d-fw-wrap-reverse           { flex-wrap: wrap-reverse !important; }
-.d-fw-nowrap                 { flex-wrap: nowrap !important; }
-.d-fw-unset                  { flex-wrap: unset !important; }
+.d-fw-wrap { flex-wrap: wrap !important; }
+.d-fw-wrap-reverse { flex-wrap: wrap-reverse !important; }
+.d-fw-nowrap { flex-wrap: nowrap !important; }
+.d-fw-unset { flex-wrap: unset !important; }
 
 //  $$  FLEX FLOW
 //      This is another shorthand property for flex-direction and flex-wrap.
-//      Default value is "row nowrap".
-//  ----------------------------------------------------------------------------
-.d-ff-row-wrap                       { flex-flow: row wrap !important; }
-.d-ff-row-wrap-reverse               { flex-flow: row wrap-reverse !important; }
-.d-ff-row-nowrap                     { flex-flow: row nowrap !important; }
-.d-ff-row-reverse-wrap               { flex-flow: row-reverse wrap !important; }
-.d-ff-row-reverse-wrap-reverse       { flex-flow: row-reverse wrap-reverse !important; }
-.d-ff-row-reverse-nowrap             { flex-flow: row-reverse nowrap !important; }
-.d-ff-column-wrap                    { flex-flow: column wrap !important; }
-.d-ff-column-wrap-reverse            { flex-flow: column wrap-reverse !important; }
-.d-ff-column-nowrap                  { flex-flow: column nowrap !important; }
-.d-ff-column-reverse-wrap            { flex-flow: column-reverse wrap !important; }
-.d-ff-column-reverse-wrap-reverse    { flex-flow: column-reverse wrap-reverse !important; }
-.d-ff-column-reverse-nowrap          { flex-flow: column-reverse nowrap !important; }
-.d-ff-unset                          { flex-flow: unset !important; }
+//      Default value is 'row nowrap'.
+//  ----------------------------------------------------------------------------
+.d-ff-row-wrap { flex-flow: row wrap !important; }
+.d-ff-row-wrap-reverse { flex-flow: row wrap-reverse !important; }
+.d-ff-row-nowrap { flex-flow: row nowrap !important; }
+.d-ff-row-reverse-wrap { flex-flow: row-reverse wrap !important; }
+.d-ff-row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
+.d-ff-row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
+.d-ff-column-wrap { flex-flow: column wrap !important; }
+.d-ff-column-wrap-reverse { flex-flow: column wrap-reverse !important; }
+.d-ff-column-nowrap { flex-flow: column nowrap !important; }
+.d-ff-column-reverse-wrap { flex-flow: column-reverse wrap !important; }
+.d-ff-column-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
+.d-ff-column-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
+.d-ff-unset { flex-flow: unset !important; }
 
 
 //  ============================================================================
@@ -170,26 +140,26 @@
 //  $$  FLEX
 //      Graduating scale of flex-grow and flex-shrink values
 //  ----------------------------------------------------------------------------
-.d-fl0                       { flex: 0 auto !important; }
-.d-fl1                       { flex: 1 auto !important; }
-.d-fl2                       { flex: 2 auto !important; }
-.d-fl3                       { flex: 3 auto !important; }
-.d-fl4                       { flex: 4 auto !important; }
-.d-fl5                       { flex: 5 auto !important; }
-.d-fl-unset                  { flex: unset !important; }
+.d-fl0 { flex: 0 auto !important; }
+.d-fl1 { flex: 1 auto !important; }
+.d-fl2 { flex: 2 auto !important; }
+.d-fl3 { flex: 3 auto !important; }
+.d-fl4 { flex: 4 auto !important; }
+.d-fl5 { flex: 5 auto !important; }
+.d-fl-unset { flex: unset !important; }
 
 //  $$$  FLEX NONE
 //       This is equivalent to flex: 0 0 auto.
 //       It sizes the item according to its width/height properties, but makes it
 //       fully inflexible.
-.d-fl-none                   { flex: none !important; }
+.d-fl-none { flex: none !important; }
 
 //  $$$  FLEX EQUAL
 //       Equally distributes children out within a parent container
 .d-fl-equal {
+  flex-basis: 0 !important;
   flex-grow: 1 !important;
   flex-shrink: 1 !important;
-  flex-basis: 0 !important;
 }
 
 //  $$  FLEX GROW
@@ -197,41 +167,41 @@
 //      grow relative to other flex items in the container when there isn't
 //      enough space in the row. Default value is 1.
 //  ----------------------------------------------------------------------------
-.d-fl-grow0                  { flex-grow: 0 !important; }
-.d-fl-grow1                  { flex-grow: 1 !important; }
-.d-fl-grow2                  { flex-grow: 2 !important; }
-.d-fl-grow3                  { flex-grow: 3 !important; }
-.d-fl-grow4                  { flex-grow: 4 !important; }
-.d-fl-grow5                  { flex-grow: 5 !important; }
-.d-fl-grow-unset             { flex-grow: unset !important; }
+.d-fl-grow0 { flex-grow: 0 !important; }
+.d-fl-grow1 { flex-grow: 1 !important; }
+.d-fl-grow2 { flex-grow: 2 !important; }
+.d-fl-grow3 { flex-grow: 3 !important; }
+.d-fl-grow4 { flex-grow: 4 !important; }
+.d-fl-grow5 { flex-grow: 5 !important; }
+.d-fl-grow-unset { flex-grow: unset !important; }
 
 //  $$  FLEX SHRINK
 //      Specifies the flex-shrink factor, which states how much an item will
 //      shrink relative to other flex items in the container when there isn't
 //      enough space in the row. Default value is 1.
 //  ----------------------------------------------------------------------------
-.d-fl-shrink0                { flex-shrink: 0 !important; }
-.d-fl-shrink1                { flex-shrink: 1 !important; }
-.d-fl-shrink2                { flex-shrink: 2 !important; }
-.d-fl-shrink3                { flex-shrink: 3 !important; }
-.d-fl-shrink4                { flex-shrink: 4 !important; }
-.d-fl-shrink5                { flex-shrink: 5 !important; }
-.d-fl-shrink-unset           { flex-shrink: unset !important; }
+.d-fl-shrink0 { flex-shrink: 0 !important; }
+.d-fl-shrink1 { flex-shrink: 1 !important; }
+.d-fl-shrink2 { flex-shrink: 2 !important; }
+.d-fl-shrink3 { flex-shrink: 3 !important; }
+.d-fl-shrink4 { flex-shrink: 4 !important; }
+.d-fl-shrink5 { flex-shrink: 5 !important; }
+.d-fl-shrink-unset { flex-shrink: unset !important; }
 
 
 //  ============================================================================
 //  $  JUSTIFY CONTENT
 //     Defines the child alignment along the parent's main axis
 //  ----------------------------------------------------------------------------
-.d-jc-center                 { justify-content: center !important; }
-.d-jc-flex-end               { justify-content: flex-end !important; }
-.d-jc-flex-start             { justify-content: flex-start !important; }
-.d-jc-space-around           { justify-content: space-around !important; }
-.d-jc-space-between          { justify-content: space-between !important; }
-.d-jc-space-evenly           { justify-content: space-evenly !important; }
-.d-jc-baseline               { justify-content: baseline !important; }
-.d-jc-normal                 { justify-content: normal !important; }
-.d-jc-unset                  { justify-content: unset !important; }
+.d-jc-center { justify-content: center !important; }
+.d-jc-flex-end { justify-content: flex-end !important; }
+.d-jc-flex-start { justify-content: flex-start !important; }
+.d-jc-space-around { justify-content: space-around !important; }
+.d-jc-space-between { justify-content: space-between !important; }
+.d-jc-space-evenly { justify-content: space-evenly !important; }
+.d-jc-baseline { justify-content: baseline !important; }
+.d-jc-normal { justify-content: normal !important; }
+.d-jc-unset { justify-content: unset !important; }
 
 
 //  $$  CENTER ITEMS
@@ -249,17 +219,18 @@
 //  $  ORDER
 //      Designate a child container's position.
 //  ----------------------------------------------------------------------------
-.d-order1                    { order: 1 !important; }
-.d-order2                    { order: 2 !important; }
-.d-order3                    { order: 3 !important; }
-.d-order4                    { order: 4 !important; }
-.d-order5                    { order: 5 !important; }
-.d-order6                    { order: 6 !important; }
-.d-order7                    { order: 7 !important; }
-.d-order8                    { order: 8 !important; }
-.d-order9                    { order: 9 !important; }
-.d-order10                   { order: 10 !important; }
-.d-order11                   { order: 11 !important; }
-.d-order12                   { order: 12 !important; }
-.d-order-first               { order: -9999 !important; }
-.d-order-last                { order: 9999 !important; }
+.d-order1 { order: 1 !important; }
+.d-order2 { order: 2 !important; }
+.d-order3 { order: 3 !important; }
+.d-order4 { order: 4 !important; }
+.d-order5 { order: 5 !important; }
+.d-order6 { order: 6 !important; }
+.d-order7 { order: 7 !important; }
+.d-order8 { order: 8 !important; }
+.d-order9 { order: 9 !important; }
+.d-order10 { order: 10 !important; }
+.d-order11 { order: 11 !important; }
+.d-order12 { order: 12 !important; }
+.d-order-first { order: -9999 !important; }
+.d-order-last { order: 9999 !important; }
+