@teammodlr/ui-kit 2.0.28 → 2.0.30

package/src/components/badge/Badge.css

@@ -1,128 +0,0 @@
-.m-badge__wrapper {
-    position: relative;
-}
-
-.m-badge {
-    --badge-border-color: var(--white);
-    --badge-background-color: var(--red);
-    --badge-color: var(--white);
-    --badge-line-height: 15px;
-    --badge-font-size: 10px;
-    --badge-padding: 0px 6px;
-    --badge-border-radius: 8px;
-    --badge-translate-x: 45%;
-    --badge-translate-y: -50%;
-    
-    position: absolute;
-    display: inline-block;
-    border: 1px solid var(--badge-border-color);
-    background-color: var(--badge-background-color);
-    color: var(--badge-color);
-    line-height: var(--badge-line-height);
-    font-size: var(--badge-font-size);
-    padding: var(--badge-padding);
-    border-radius: var(--badge-border-radius);
-}
-
-.m-badge__top-right {
-    --badge-translate-x: 45%;
-    --badge-translate-y: -50%;
-    top: 0;
-    right: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__top-left {
-    --badge-translate-x: -45%;
-    --badge-translate-y: -50%;
-    top: 0;
-    left: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__bottom-right {
-    --badge-translate-x: 50%;
-    --badge-translate-y: 45%;
-    bottom: 0;
-    right: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge__bottom-left {
-    --badge-translate-x: -50%;
-    --badge-translate-y: 45%;
-    bottom: 0;
-    left: 0;
-    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
-}
-
-.m-badge--blue {
-    --badge-border-color: var(--blue);
-    --badge-background-color: var(--blue);
-    --badge-color: var(--white);
-}
-
-.m-badge--red {
-    --badge-border-color: var(--red);
-    --badge-background-color: var(--red);
-    --badge-color: var(--white);
-}
-
-.m-badge--green {
-    --badge-border-color: var(--green);
-    --badge-background-color: var(--green);
-    --badge-color: var(--white);
-}
-
-.m-badge--yellow {
-    --badge-border-color: var(--yellow);
-    --badge-background-color: var(--yellow);
-    --badge-color: var(--gray-900);
-}
-
-.m-badge--black {
-    --badge-border-color: var(--gray-900);
-    --badge-background-color: var(--gray-900);
-    --badge-color: var(--white);
-}
-
-.m-badge--white {
-    --badge-border-color: var(--gray-300);
-    --badge-background-color: var(--white);
-    --badge-color: var(--gray-900);
-}
-
-.m-badge--xs {
-    --badge-line-height: 10px;
-    --badge-font-size: 8px;
-    --badge-padding: 0px 4px;
-    --badge-border-radius: 5px;
-}
-
-.m-badge--sm {
-    --badge-line-height: 12px;
-    --badge-font-size: 9px;
-    --badge-padding: 0px 5px;
-    --badge-border-radius: 6px;
-}
-
-.m-badge--md {
-    --badge-line-height: 15px;
-    --badge-font-size: 10px;
-    --badge-padding: 0px 6px;
-    --badge-border-radius: 8px;
-}
-
-.m-badge--lg {
-    --badge-line-height: 18px;
-    --badge-font-size: 12px;
-    --badge-padding: 0px 8px;
-    --badge-border-radius: 10px;
-}
-
-.m-badge--xl {
-    --badge-line-height: 20px;
-    --badge-font-size: 14px;
-    --badge-padding: 0px 10px;
-    --badge-border-radius: 12px;
-}

package/src/components/breadcrumb/Breadcrumb.css

@@ -1,46 +0,0 @@
-.m-breadcrumbs {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 4px;
-    font-variant-numeric: tabular-nums;
-    align-items: center;
-    position: relative;
-}
-
-.m-breadcrumbs__item:last-child .m-breadcrumbs__item-separator {
-    display: none;
-}
-
-.m-breadcrumbs__item {
-    display: flex;
-    align-items: center;
-    outline: none;
-    cursor: pointer;
-    color: var(--gray-600);
-}
-
-.m-breadcrumbs__link {
-    padding: 4px 10px;
-    font-size: 14px;
-    border-radius: 4px;
-    background-color: transparent;
-    text-decoration: none;
-    outline: 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 .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-breadcrumbs__link:hover {
-    color: var(--blue-dark);
-    background-color: var(--gray-100);
-}
-
-.m-breadcrumbs__item-separator {
-    display: inline-flex;
-    padding: 0 6px;
-    cursor: default;
-    user-select: none;
-    color: var(--gray-300);
-    /*font-style: italic;*/
-    /*border-right: 2px solid transparent;*/
-}

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

@@ -1,378 +0,0 @@
-.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;
-}