@itcase/ui 1.8.179 → 1.9.0

package/dist/css/components/Breadcrumbs/Breadcrumbs.css

@@ -1,77 +0,0 @@
-.breadcrumbs {
-}
-.breadcrumbs__item {
-  display: flex;
-  align-items: center;
-}
-.breadcrumbs__item {
-    &_size_xxl {
-      gap: var(--breadcrumbs-item-xxl-gap);
-      padding: var(--breadcrumbs-item-xxl-padding);
-    }
-    &_size_xl {
-      gap: var(--breadcrumbs-item-xl-gap);
-      padding: var(--breadcrumbs-item-xl-padding);
-    }
-    &_size_l {
-      gap: var(--breadcrumbs-item-l-gap);
-      padding: var(--breadcrumbs-item-l-padding);
-    }
-    &_size_m {
-      gap: var(--breadcrumbs-item-m-gap);
-      padding: var(--breadcrumbs-item-m-padding);
-    }
-    &_size_s {
-      gap: var(--breadcrumbs-item-s-gap);
-      padding: var(--breadcrumbs-item-s-padding);
-    }
-    &_size_xs {
-      gap: var(--breadcrumbs-item-xs-gap);
-      padding: var(--breadcrumbs-item-xs-padding);
-    }
-    &_size_xxs {
-      gap: var(--breadcrumbs-item-xxs-gap);
-      padding: var(--breadcrumbs-item-xxs-padding);
-    }
-}
-.breadcrumbs__item {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: breadCrumbsItemSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes breadCrumbsItemSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --breadcrumbs-item-xxl-gap: 8px;
-  --breadcrumbs-item-xl-gap: 8px;
-  --breadcrumbs-item-l-gap: 4px;
-  --breadcrumbs-item-m-gap: 4px;
-  --breadcrumbs-item-s-gap: 4px;
-  --breadcrumbs-item-xs-gap: 4px;
-  --breadcrumbs-item-xxs-gap: 4px;
-
-  --breadcrumbs-item-xxl-padding: 12px;
-  --breadcrumbs-item-xl-padding: 12px;
-  --breadcrumbs-item-l-padding: 10px;
-  --breadcrumbs-item-m-padding: 6px;
-  --breadcrumbs-item-s-padding: 6px;
-  --breadcrumbs-item-xs-padding: 4px;
-  --breadcrumbs-item-xxs-padding: 2px;
-}

package/dist/css/components/Button/Button.css

@@ -1,630 +0,0 @@
-.button {
-  text-decoration: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  border: solid 0 #fff;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: var(--button-transition);
-  &__loader {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    display: none;
-    left: 0;
-    top: 0;
-    z-index: 1;
-  }
-  &__wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ^&__label {
-      text-decoration: none;
-      text-align: center;
-    }
-  }
-}
-.button {
-  &&_reset-gap {
-    ^&__wrapper {
-      gap: 0;
-    }
-  }
-}
-.button {
-  &&_reset-padding {
-    ^&__wrapper {
-      padding: 0;
-    }
-  }
-}
-.button {
-    &_size_xxl {
-      ^&__wrapper {
-        min-width: var(--button-xxl-min-width);
-        min-height: var(--button-xxl-min-height);
-        padding: var(--button-xxl-padding);
-        gap: var(--button-xxl-gap);
-      }
-    }
-    &_size_xl {
-      ^&__wrapper {
-        min-width: var(--button-xl-min-width);
-        min-height: var(--button-xl-min-height);
-        padding: var(--button-xl-padding);
-        gap: var(--button-xl-gap);
-      }
-    }
-    &_size_l {
-      ^&__wrapper {
-        min-width: var(--button-l-min-width);
-        min-height: var(--button-l-min-height);
-        padding: var(--button-l-padding);
-        gap: var(--button-l-gap);
-      }
-    }
-    &_size_m {
-      ^&__wrapper {
-        min-width: var(--button-m-min-width);
-        min-height: var(--button-m-min-height);
-        padding: var(--button-m-padding);
-        gap: var(--button-m-gap);
-      }
-    }
-    &_size_s {
-      ^&__wrapper {
-        min-width: var(--button-s-min-width);
-        min-height: var(--button-s-min-height);
-        padding: var(--button-s-padding);
-        gap: var(--button-s-gap);
-      }
-    }
-    &_size_xs {
-      ^&__wrapper {
-        min-width: var(--button-xs-min-width);
-        min-height: var(--button-xs-min-height);
-        padding: var(--button-xs-padding);
-        gap: var(--button-xs-gap);
-      }
-    }
-    &_size_xxs {
-      ^&__wrapper {
-        min-width: var(--button-xxs-min-width);
-        min-height: var(--button-xxs-min-height);
-        padding: var(--button-xxs-padding);
-        gap: var(--button-xxs-gap);
-      }
-    }
-}
-.button {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: buttonSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes buttonSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.button {
-  &&_state {
-    &_disabled {
-    }
-  }
-}
-.button {
-  &&_state {
-    &_loading {
-      ^^&__loader {
-        position: absolute;
-        display: flex;
-      }
-    }
-  }
-}
-.button {
-    &_type_default {
-        &^&_size_xxs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-xxs-min-width,
-              var(--button-xxs-min-width)
-            );
-            min-height: var(
-              --button-type-default-xxs-min-height,
-              var(--button-xxs-min-height)
-            );
-            padding: var(
-              --button-type-default-xxs-padding,
-              var(--button-xxs-padding)
-            );
-            gap: var(
-              --button-type-default-xxs-gap,
-              var(--button-xxs-gap)
-            );
-          }
-        }
-        &^&_size_xs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-xs-min-width,
-              var(--button-xs-min-width)
-            );
-            min-height: var(
-              --button-type-default-xs-min-height,
-              var(--button-xs-min-height)
-            );
-            padding: var(
-              --button-type-default-xs-padding,
-              var(--button-xs-padding)
-            );
-            gap: var(
-              --button-type-default-xs-gap,
-              var(--button-xs-gap)
-            );
-          }
-        }
-        &^&_size_s {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-s-min-width,
-              var(--button-s-min-width)
-            );
-            min-height: var(
-              --button-type-default-s-min-height,
-              var(--button-s-min-height)
-            );
-            padding: var(
-              --button-type-default-s-padding,
-              var(--button-s-padding)
-            );
-            gap: var(
-              --button-type-default-s-gap,
-              var(--button-s-gap)
-            );
-          }
-        }
-        &^&_size_m {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-m-min-width,
-              var(--button-m-min-width)
-            );
-            min-height: var(
-              --button-type-default-m-min-height,
-              var(--button-m-min-height)
-            );
-            padding: var(
-              --button-type-default-m-padding,
-              var(--button-m-padding)
-            );
-            gap: var(
-              --button-type-default-m-gap,
-              var(--button-m-gap)
-            );
-          }
-        }
-        &^&_size_l {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-l-min-width,
-              var(--button-l-min-width)
-            );
-            min-height: var(
-              --button-type-default-l-min-height,
-              var(--button-l-min-height)
-            );
-            padding: var(
-              --button-type-default-l-padding,
-              var(--button-l-padding)
-            );
-            gap: var(
-              --button-type-default-l-gap,
-              var(--button-l-gap)
-            );
-          }
-        }
-        &^&_size_xl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-xl-min-width,
-              var(--button-xl-min-width)
-            );
-            min-height: var(
-              --button-type-default-xl-min-height,
-              var(--button-xl-min-height)
-            );
-            padding: var(
-              --button-type-default-xl-padding,
-              var(--button-xl-padding)
-            );
-            gap: var(
-              --button-type-default-xl-gap,
-              var(--button-xl-gap)
-            );
-          }
-        }
-        &^&_size_xxl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-default-xxl-min-width,
-              var(--button-xxl-min-width)
-            );
-            min-height: var(
-              --button-type-default-xxl-min-height,
-              var(--button-xxl-min-height)
-            );
-            padding: var(
-              --button-type-default-xxl-padding,
-              var(--button-xxl-padding)
-            );
-            gap: var(
-              --button-type-default-xxl-gap,
-              var(--button-xxl-gap)
-            );
-          }
-        }
-    }
-    &_type_icon {
-        &^&_size_xxs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-xxs-min-width,
-              var(--button-xxs-min-width)
-            );
-            min-height: var(
-              --button-type-icon-xxs-min-height,
-              var(--button-xxs-min-height)
-            );
-            padding: var(
-              --button-type-icon-xxs-padding,
-              var(--button-xxs-padding)
-            );
-            gap: var(
-              --button-type-icon-xxs-gap,
-              var(--button-xxs-gap)
-            );
-          }
-        }
-        &^&_size_xs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-xs-min-width,
-              var(--button-xs-min-width)
-            );
-            min-height: var(
-              --button-type-icon-xs-min-height,
-              var(--button-xs-min-height)
-            );
-            padding: var(
-              --button-type-icon-xs-padding,
-              var(--button-xs-padding)
-            );
-            gap: var(
-              --button-type-icon-xs-gap,
-              var(--button-xs-gap)
-            );
-          }
-        }
-        &^&_size_s {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-s-min-width,
-              var(--button-s-min-width)
-            );
-            min-height: var(
-              --button-type-icon-s-min-height,
-              var(--button-s-min-height)
-            );
-            padding: var(
-              --button-type-icon-s-padding,
-              var(--button-s-padding)
-            );
-            gap: var(
-              --button-type-icon-s-gap,
-              var(--button-s-gap)
-            );
-          }
-        }
-        &^&_size_m {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-m-min-width,
-              var(--button-m-min-width)
-            );
-            min-height: var(
-              --button-type-icon-m-min-height,
-              var(--button-m-min-height)
-            );
-            padding: var(
-              --button-type-icon-m-padding,
-              var(--button-m-padding)
-            );
-            gap: var(
-              --button-type-icon-m-gap,
-              var(--button-m-gap)
-            );
-          }
-        }
-        &^&_size_l {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-l-min-width,
-              var(--button-l-min-width)
-            );
-            min-height: var(
-              --button-type-icon-l-min-height,
-              var(--button-l-min-height)
-            );
-            padding: var(
-              --button-type-icon-l-padding,
-              var(--button-l-padding)
-            );
-            gap: var(
-              --button-type-icon-l-gap,
-              var(--button-l-gap)
-            );
-          }
-        }
-        &^&_size_xl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-xl-min-width,
-              var(--button-xl-min-width)
-            );
-            min-height: var(
-              --button-type-icon-xl-min-height,
-              var(--button-xl-min-height)
-            );
-            padding: var(
-              --button-type-icon-xl-padding,
-              var(--button-xl-padding)
-            );
-            gap: var(
-              --button-type-icon-xl-gap,
-              var(--button-xl-gap)
-            );
-          }
-        }
-        &^&_size_xxl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-icon-xxl-min-width,
-              var(--button-xxl-min-width)
-            );
-            min-height: var(
-              --button-type-icon-xxl-min-height,
-              var(--button-xxl-min-height)
-            );
-            padding: var(
-              --button-type-icon-xxl-padding,
-              var(--button-xxl-padding)
-            );
-            gap: var(
-              --button-type-icon-xxl-gap,
-              var(--button-xxl-gap)
-            );
-          }
-        }
-    }
-    &_type_label {
-        &^&_size_xxs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-xxs-min-width,
-              var(--button-xxs-min-width)
-            );
-            min-height: var(
-              --button-type-label-xxs-min-height,
-              var(--button-xxs-min-height)
-            );
-            padding: var(
-              --button-type-label-xxs-padding,
-              var(--button-xxs-padding)
-            );
-            gap: var(
-              --button-type-label-xxs-gap,
-              var(--button-xxs-gap)
-            );
-          }
-        }
-        &^&_size_xs {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-xs-min-width,
-              var(--button-xs-min-width)
-            );
-            min-height: var(
-              --button-type-label-xs-min-height,
-              var(--button-xs-min-height)
-            );
-            padding: var(
-              --button-type-label-xs-padding,
-              var(--button-xs-padding)
-            );
-            gap: var(
-              --button-type-label-xs-gap,
-              var(--button-xs-gap)
-            );
-          }
-        }
-        &^&_size_s {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-s-min-width,
-              var(--button-s-min-width)
-            );
-            min-height: var(
-              --button-type-label-s-min-height,
-              var(--button-s-min-height)
-            );
-            padding: var(
-              --button-type-label-s-padding,
-              var(--button-s-padding)
-            );
-            gap: var(
-              --button-type-label-s-gap,
-              var(--button-s-gap)
-            );
-          }
-        }
-        &^&_size_m {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-m-min-width,
-              var(--button-m-min-width)
-            );
-            min-height: var(
-              --button-type-label-m-min-height,
-              var(--button-m-min-height)
-            );
-            padding: var(
-              --button-type-label-m-padding,
-              var(--button-m-padding)
-            );
-            gap: var(
-              --button-type-label-m-gap,
-              var(--button-m-gap)
-            );
-          }
-        }
-        &^&_size_l {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-l-min-width,
-              var(--button-l-min-width)
-            );
-            min-height: var(
-              --button-type-label-l-min-height,
-              var(--button-l-min-height)
-            );
-            padding: var(
-              --button-type-label-l-padding,
-              var(--button-l-padding)
-            );
-            gap: var(
-              --button-type-label-l-gap,
-              var(--button-l-gap)
-            );
-          }
-        }
-        &^&_size_xl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-xl-min-width,
-              var(--button-xl-min-width)
-            );
-            min-height: var(
-              --button-type-label-xl-min-height,
-              var(--button-xl-min-height)
-            );
-            padding: var(
-              --button-type-label-xl-padding,
-              var(--button-xl-padding)
-            );
-            gap: var(
-              --button-type-label-xl-gap,
-              var(--button-xl-gap)
-            );
-          }
-        }
-        &^&_size_xxl {
-          ^^&__wrapper {
-            min-width: var(
-              --button-type-label-xxl-min-width,
-              var(--button-xxl-min-width)
-            );
-            min-height: var(
-              --button-type-label-xxl-min-height,
-              var(--button-xxl-min-height)
-            );
-            padding: var(
-              --button-type-label-xxl-padding,
-              var(--button-xxl-padding)
-            );
-            gap: var(
-              --button-type-label-xxl-gap,
-              var(--button-xxl-gap)
-            );
-          }
-        }
-    }
-}
-.button {
-  &&_width {
-    &_fixed {
-      width: 180px;
-    }
-    &_hug {
-      display: inline-flex;
-    }
-    &_fill {
-      width: 100%;
-      max-width: none !important;
-    }
-  }
-}
-:root {
-  /* MainXL */
-  --button-transition: all 0.2s ease 0s;
-
-  /* Size XXL */
-  --button-xxl-gap: 0.5m;
-  --button-xxl-padding: 2m 2m;
-  --button-xxl-min-width: 56px;
-  --button-xxl-min-height: 56px;
-
-  /* Size XL */
-  --button-xl-gap: 0.5m;
-  --button-xl-padding: 1m 1m;
-  --button-xl-min-width: 40px;
-  --button-xl-min-height: 40px;
-
-  /* Size L */
-  --button-l-gap: 0.5m;
-  --button-l-padding: 0.75m 1.5m;
-  --button-l-min-width: 32px;
-  --button-l-min-height: 32px;
-
-  /* Size M */
-  --button-m-gap: 0.5m;
-  --button-m-padding: 0.25m 0.5m;
-  --button-m-min-width: 28px;
-  --button-m-min-height: 28px;
-
-  /* Size S */
-  --button-s-gap: 0.5m;
-  --button-s-padding: 0.25m 0.5m;
-  --button-s-min-width: 24px;
-  --button-s-min-height: 24px;
-
-  /* Size XS */
-  --button-xs-gap: 0.5m;
-  --button-xs-padding: 0.5m 0.5m;
-  --button-xs-min-width: 20px;
-  --button-xs-min-height: 20px;
-
-  /* Size XXS */
-  --button-xxs-gap: 0.5m;
-  --button-xxs-padding: 0.25m 0.25m;
-  --button-xxs-min-width: 16px;
-  --button-xxs-min-height: 16px;
-}