@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/components/button/Button-old.css

@@ -1,378 +1,378 @@
-.m-button {
-    --button-height: 36px;
-    --button-padding: 0 15px;
-    --button-font-size: 15px;
-    --button-border-radius: 4px;
-    --button-font-weight: 500;
-    --button-border-color: var(--gray-200);
-    margin: 0;
-    white-space: nowrap;
-    outline: none;
-    border: 1px solid var(--button-border-color);
-    background-color: transparent;
-    z-index: auto;
-    padding: var(--button-padding);
-    font-size: var(--button-font-size);
-    font-weight: var(--button-font-weight);
-    font-family: inherit;
-    color: var(--gray-600);
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    height: var(--button-height);
-    line-height: 1;
-    border-radius: var(--button-border-radius);
-    text-decoration: none;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-button__content {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    min-width: 0px;
-}
-
-
-.m-button.m-button--strong {
-    font-weight: 500;
-}
-
-.m-button--block {
-    display: flex;
-}
-
-.m-button.m-button--icon-left .m-button__content {
-    padding-left: 8px;
-}
-
-.m-button.m-button--icon-right .m-button__content {
-    padding-right: 8px;
-}
-
-.m-button:not(.m-button--disabled):hover {
-    color: var(--blue);
-    --button-border-color: var(--blue);
-}
-
-.m-button:not(.m-button--disabled):focus,
-.m-button:not(.m-button--disabled):active {
-    color: var(--blue-dark);
-    --button-border-color: var(--blue-dark);
-}
-
-.m-button.m-button--secondary {
-    color: var(--gray-500);
-    --button-border-color: var(--white);
-    background-color: var(--white);
-}
-
-.m-button:not(.m-button--disabled).m-button--secondary:hover {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-150);
-    background-color: var(--gray-150);
-}
-
-.m-button:not(.m-button--disabled).m-button--secondary:active,
-.m-button:not(.m-button--disabled).m-button--secondary:focus {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-200);
-    background-color: var(--gray-200);
-}
-
-.m-button.m-button--gray.m-button--secondary {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-100);
-    background-color: var(--gray-100);
-}
-
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-150);
-    background-color: var(--gray-150);
-}
-
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-200);
-    background-color: var(--gray-200);
-}
-
-/**
-   * Info Button
-  */
-.m-button--blue {
-    color: var(--white);
-    --button-border-color: var(--blue);
-    background-color: var(--blue);
-}
-
-.m-button--blue:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--blue-hover);
-    background-color: var(--blue-hover);
-}
-
-.m-button--blue:not(.m-button--disabled):active,
-.m-button--blue:not(.m-button--disabled):focus {
-    color: var(--white);
-    --button-border-color: var(--blue-focus);
-    background-color: var(--blue-focus);
-}
-
-.m-button--blue.m-button--secondary {
-    color: var(--blue-dark);
-    --button-border-color: var(--blue-secondary);
-    background-color: var(--blue-secondary);
-}
-
-.m-button--blue.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--blue-darker);
-    --button-border-color: var(--blue-secondary-hover);
-    background-color: var(--blue-secondary-hover);
-}
-
-.m-button--blue.m-button--secondary:not(.m-button--disabled):active,
-.m-button--blue.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--blue-darker);
-    --button-border-color: var(--blue-secondary-focus);
-    background-color: var(--blue-secondary-focus);
-}
-
-/**
-   * Success Button
-  */
-.m-button--green {
-    color: var(--white);
-    --button-border-color: var(--green);
-    background-color: var(--green);
-}
-
-.m-button--green:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--green-hover);
-    background-color: var(--green-hover);
-}
-
-.m-button--green:not(.m-button--disabled):focus,
-.m-button--green:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--green-focus);
-    background-color: var(--green-focus);
-}
-
-.m-button--green.m-button--secondary {
-    color: var(--green-dark);
-    --button-border-color: var(--green-secondary);
-    background-color: var(--green-secondary);
-}
-
-.m-button--green.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--green-darker);
-    --button-border-color: var(--green-secondary-hover);
-    background-color: var(--green-secondary-hover);
-}
-
-.m-button--green.m-button--secondary:not(.m-button--disabled):focus,
-.m-button--green.m-button--secondary:not(.m-button--disabled):active {
-    color: var(--green-darker);
-    --button-border-color: var(--green-secondary-focus);
-    background-color: var(--green-secondary-focus);
-}
-
-/**
-   * Danger Button
-  */
-.m-button--red {
-    color: var(--white);
-    --button-border-color: var(--red);
-    background-color: var(--red);
-}
-
-.m-button--red:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--red-hover);
-    background-color: var(--red-hover);
-}
-
-.m-button--red:not(.m-button--disabled):focus,
-.m-button--red:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--red-focus);
-    background-color: var(--red-focus);
-}
-
-.m-button--red.m-button--secondary {
-    color: var(--red-dark);
-    --button-border-color: var(--red-secondary);
-    background-color: var(--red-secondary);
-}
-
-.m-button--red.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--red-darker);
-    --button-border-color: var(--red-secondary-hover);
-    background-color: var(--red-secondary-hover);
-}
-
-.m-button--red.m-button--secondary:not(.m-button--disabled):active,
-.m-button--red.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--red-darker);
-    --button-border-color: var(--red-secondary-focus);
-    background-color: var(--red-secondary-focus);
-}
-
-/**
-   * Yellow Button
-  */
-.m-button--yellow {
-    color: var(--white);
-    --button-border-color: var(--yellow);
-    background-color: var(--yellow);
-}
-
-.m-button--yellow:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--yellow-hover);
-    background-color: var(--yellow-hover);
-}
-
-.m-button--yellow:not(.m-button--disabled):focus,
-.m-button--yellow:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--yellow-focus);
-    background-color: var(--yellow-focus);
-}
-
-.m-button--yellow.m-button--secondary {
-    color: var(--yellow-dark);
-    --button-border-color: var(--yellow-secondary);
-    background-color: var(--yellow-secondary);
-}
-
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--yellow-darker);
-    --button-border-color: var(--yellow-secondary-hover);
-    background-color: var(--yellow-secondary-hover);
-}
-
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--yellow-darker);
-    --button-border-color: var(--yellow-secondary-focus);
-    background-color: var(--yellow-secondary-focus);
-}
-
-.m-button--xs {
-    --button-height: 22px;
-    --button-padding: 0 6px;
-    --button-font-size: 14px;
-}
-
-.m-button--sm {
-    --button-height: 28px;
-    --button-padding: 0 10px;
-    --button-font-size: 14px;
-}
-
-.m-button--lg {
-    --button-height: 40px;
-    --button-padding: 0 18px;
-    --button-font-size: 18px;
-}
-
-.m-button--xl {
-    --button-height: 44px;
-    --button-padding: 0 22px;
-    --button-font-size: 20px;
-}
-
-.m-button--rounded {
-    border-radius: 34px;
-}
-
-.m-button--rounded.m-button--xs {
-    padding: 0 10px;
-}
-
-.m-button--rounded.m-button--sm {
-    padding: 0 14px;
-}
-
-.m-button--rounded.m-button--md {
-    padding: 0 18px;
-}
-
-.m-button--rounded.m-button--lg {
-    padding: 0 22px;
-}
-
-.m-button--rounded.m-button--xl {
-    padding: 0 26px;
-}
-
-.m-button--disabled {
-    opacity: 0.8;
-    cursor: not-allowed;
-    user-select: none;
-}
-
-.m-button-group {
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-}
-
-/**
-   * Only round the first and last button 
-  */
-
-.m-button-group .m-button:first-child {
-    border-top-left-radius: var(--button-border-radius);
-    border-bottom-left-radius: var(--button-border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.m-button-group .m-button:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: var(--button-border-radius);
-    border-bottom-right-radius: var(--button-border-radius);
-}
-
-.m-button-group .m-button {
-    border-radius: 0;
-}
-
-.m-button-group .m-button:not(:first-child) {
-    border-left: none;
-}
-
-
-.m-button-group .m-button:not(:first-child)::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: transparent;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-button-group .m-button:hover:not(:first-child)::after {
-    background-color: var(--button-border-color);
-}
-
-.m-button-group--block > .m-button {
-    flex-basis: 100%;
-}
-
-.m-button-group--block {
-    display: flex;
-}
+.m-button {
+    --button-height: 36px;
+    --button-padding: 0 15px;
+    --button-font-size: 15px;
+    --button-border-radius: 4px;
+    --button-font-weight: 500;
+    --button-border-color: var(--gray-200);
+    margin: 0;
+    white-space: nowrap;
+    outline: none;
+    border: 1px solid var(--button-border-color);
+    background-color: transparent;
+    z-index: auto;
+    padding: var(--button-padding);
+    font-size: var(--button-font-size);
+    font-weight: var(--button-font-weight);
+    font-family: inherit;
+    color: var(--gray-600);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    height: var(--button-height);
+    line-height: 1;
+    border-radius: var(--button-border-radius);
+    text-decoration: none;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-button__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    min-width: 0px;
+}
+
+
+.m-button.m-button--strong {
+    font-weight: 500;
+}
+
+.m-button--block {
+    display: flex;
+}
+
+.m-button.m-button--icon-left .m-button__content {
+    padding-left: 8px;
+}
+
+.m-button.m-button--icon-right .m-button__content {
+    padding-right: 8px;
+}
+
+.m-button:not(.m-button--disabled):hover {
+    color: var(--blue);
+    --button-border-color: var(--blue);
+}
+
+.m-button:not(.m-button--disabled):focus,
+.m-button:not(.m-button--disabled):active {
+    color: var(--blue-dark);
+    --button-border-color: var(--blue-dark);
+}
+
+.m-button.m-button--secondary {
+    color: var(--gray-500);
+    --button-border-color: var(--white);
+    background-color: var(--white);
+}
+
+.m-button:not(.m-button--disabled).m-button--secondary:hover {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-150);
+    background-color: var(--gray-150);
+}
+
+.m-button:not(.m-button--disabled).m-button--secondary:active,
+.m-button:not(.m-button--disabled).m-button--secondary:focus {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-200);
+    background-color: var(--gray-200);
+}
+
+.m-button.m-button--gray.m-button--secondary {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-100);
+    background-color: var(--gray-100);
+}
+
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-150);
+    background-color: var(--gray-150);
+}
+
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-200);
+    background-color: var(--gray-200);
+}
+
+/**
+   * Info Button
+  */
+.m-button--blue {
+    color: var(--white);
+    --button-border-color: var(--blue);
+    background-color: var(--blue);
+}
+
+.m-button--blue:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--blue-hover);
+    background-color: var(--blue-hover);
+}
+
+.m-button--blue:not(.m-button--disabled):active,
+.m-button--blue:not(.m-button--disabled):focus {
+    color: var(--white);
+    --button-border-color: var(--blue-focus);
+    background-color: var(--blue-focus);
+}
+
+.m-button--blue.m-button--secondary {
+    color: var(--blue-dark);
+    --button-border-color: var(--blue-secondary);
+    background-color: var(--blue-secondary);
+}
+
+.m-button--blue.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--blue-darker);
+    --button-border-color: var(--blue-secondary-hover);
+    background-color: var(--blue-secondary-hover);
+}
+
+.m-button--blue.m-button--secondary:not(.m-button--disabled):active,
+.m-button--blue.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--blue-darker);
+    --button-border-color: var(--blue-secondary-focus);
+    background-color: var(--blue-secondary-focus);
+}
+
+/**
+   * Success Button
+  */
+.m-button--green {
+    color: var(--white);
+    --button-border-color: var(--green);
+    background-color: var(--green);
+}
+
+.m-button--green:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--green-hover);
+    background-color: var(--green-hover);
+}
+
+.m-button--green:not(.m-button--disabled):focus,
+.m-button--green:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--green-focus);
+    background-color: var(--green-focus);
+}
+
+.m-button--green.m-button--secondary {
+    color: var(--green-dark);
+    --button-border-color: var(--green-secondary);
+    background-color: var(--green-secondary);
+}
+
+.m-button--green.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--green-darker);
+    --button-border-color: var(--green-secondary-hover);
+    background-color: var(--green-secondary-hover);
+}
+
+.m-button--green.m-button--secondary:not(.m-button--disabled):focus,
+.m-button--green.m-button--secondary:not(.m-button--disabled):active {
+    color: var(--green-darker);
+    --button-border-color: var(--green-secondary-focus);
+    background-color: var(--green-secondary-focus);
+}
+
+/**
+   * Danger Button
+  */
+.m-button--red {
+    color: var(--white);
+    --button-border-color: var(--red);
+    background-color: var(--red);
+}
+
+.m-button--red:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--red-hover);
+    background-color: var(--red-hover);
+}
+
+.m-button--red:not(.m-button--disabled):focus,
+.m-button--red:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--red-focus);
+    background-color: var(--red-focus);
+}
+
+.m-button--red.m-button--secondary {
+    color: var(--red-dark);
+    --button-border-color: var(--red-secondary);
+    background-color: var(--red-secondary);
+}
+
+.m-button--red.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--red-darker);
+    --button-border-color: var(--red-secondary-hover);
+    background-color: var(--red-secondary-hover);
+}
+
+.m-button--red.m-button--secondary:not(.m-button--disabled):active,
+.m-button--red.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--red-darker);
+    --button-border-color: var(--red-secondary-focus);
+    background-color: var(--red-secondary-focus);
+}
+
+/**
+   * Yellow Button
+  */
+.m-button--yellow {
+    color: var(--white);
+    --button-border-color: var(--yellow);
+    background-color: var(--yellow);
+}
+
+.m-button--yellow:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--yellow-hover);
+    background-color: var(--yellow-hover);
+}
+
+.m-button--yellow:not(.m-button--disabled):focus,
+.m-button--yellow:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--yellow-focus);
+    background-color: var(--yellow-focus);
+}
+
+.m-button--yellow.m-button--secondary {
+    color: var(--yellow-dark);
+    --button-border-color: var(--yellow-secondary);
+    background-color: var(--yellow-secondary);
+}
+
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--yellow-darker);
+    --button-border-color: var(--yellow-secondary-hover);
+    background-color: var(--yellow-secondary-hover);
+}
+
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--yellow-darker);
+    --button-border-color: var(--yellow-secondary-focus);
+    background-color: var(--yellow-secondary-focus);
+}
+
+.m-button--xs {
+    --button-height: 22px;
+    --button-padding: 0 6px;
+    --button-font-size: 14px;
+}
+
+.m-button--sm {
+    --button-height: 28px;
+    --button-padding: 0 10px;
+    --button-font-size: 14px;
+}
+
+.m-button--lg {
+    --button-height: 40px;
+    --button-padding: 0 18px;
+    --button-font-size: 18px;
+}
+
+.m-button--xl {
+    --button-height: 44px;
+    --button-padding: 0 22px;
+    --button-font-size: 20px;
+}
+
+.m-button--rounded {
+    border-radius: 34px;
+}
+
+.m-button--rounded.m-button--xs {
+    padding: 0 10px;
+}
+
+.m-button--rounded.m-button--sm {
+    padding: 0 14px;
+}
+
+.m-button--rounded.m-button--md {
+    padding: 0 18px;
+}
+
+.m-button--rounded.m-button--lg {
+    padding: 0 22px;
+}
+
+.m-button--rounded.m-button--xl {
+    padding: 0 26px;
+}
+
+.m-button--disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+    user-select: none;
+}
+
+.m-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+    position: relative;
+}
+
+/**
+   * Only round the first and last button 
+  */
+
+.m-button-group .m-button:first-child {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.m-button-group .m-button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+}
+
+.m-button-group .m-button {
+    border-radius: 0;
+}
+
+.m-button-group .m-button:not(:first-child) {
+    border-left: none;
+}
+
+
+.m-button-group .m-button:not(:first-child)::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: transparent;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-button-group .m-button:hover:not(:first-child)::after {
+    background-color: var(--button-border-color);
+}
+
+.m-button-group--block > .m-button {
+    flex-basis: 100%;
+}
+
+.m-button-group--block {
+    display: flex;
+}