@vchasno/ui-kit 0.3.34 → 0.4.0

package/dist/css/Button.global.css

@@ -1,198 +0,0 @@
-.vchasno-ui-button {
-    display: inline-flex;
-    min-height: 40px;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    border-radius: 8px;
-    background-color: var(--vchasno-ui-btn-default-bg);
-    color: var(--vchasno-ui-btn-default-color);
-    font-size: var(--vchasno-ui-btn-font-size);
-    font-weight: 700;
-    gap: 5px;
-    transition:
-        min-height var(--vchasno-ui-transition-duration-sec, 0.3s),
-        padding var(--vchasno-ui-transition-duration-sec, 0.3s),
-        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
-        color var(--vchasno-ui-transition-duration-sec, 0.3s);
-    user-select: none;
-}
-
-.vchasno-ui-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.8;
-}
-
-.vchasno-ui-button:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-default-hover-bg);
-    color: var(--vchasno-ui-btn-default-hover-color);
-    cursor: pointer;
-}
-
-.vchasno-ui-button.--sm {
-    min-width: 40px;
-    padding: 0 15px;
-}
-
-.vchasno-ui-button.--md {
-    min-width: 40px;
-    padding: 0 24px;
-}
-
-.vchasno-ui-button.--lg {
-    min-width: 50px;
-    min-height: 50px;
-    padding: 0 32px;
-}
-
-.vchasno-ui-button.--wide {
-    width: 100%;
-}
-
-.vchasno-ui-button.--primary {
-    border: 1px solid transparent;
-    background-color: var(--vchasno-ui-btn-primary-bg);
-    color: var(--vchasno-ui-btn-primary-color);
-}
-
-.vchasno-ui-button.--primary.--outline {
-    border: 1px solid var(--vchasno-ui-btn-primary-bg);
-    background-color: transparent;
-    box-shadow: none;
-    color: var(--vchasno-ui-btn-primary-bg);
-}
-
-.vchasno-ui-button.--secondary {
-    border: 1px solid var(--vchasno-ui-btn-secondary-border-color);
-    background-color: var(--vchasno-ui-btn-secondary-bg);
-    color: var(--vchasno-ui-btn-secondary-color);
-}
-
-.vchasno-ui-button:disabled.--primary,
-.vchasno-ui-button:disabled.--secondary {
-    background-color: #b6cadb;
-    color: var(--vchasno-ui-btn-disabled-color);
-}
-
-.vchasno-ui-button:disabled.--primary {
-    background-color: var(--vchasno-ui-btn-primary-disabled-bg);
-}
-
-.vchasno-ui-button:disabled.--secondary {
-    background-color: var(--vchasno-ui-btn-secondary-disabled-bg);
-}
-
-.vchasno-ui-button.--primary:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-primary-hover-bg);
-    color: var(--vchasno-ui-btn-primary-color);
-}
-
-.vchasno-ui-button.--primary.--outline:not(:disabled):hover {
-    border: 1px solid var(--vchasno-ui-btn-primary-bg);
-    background-color: var(--vchasno-ui-btn-default-hover-bg);
-    color: var(--vchasno-ui-btn-primary-bg);
-}
-
-.vchasno-ui-button.--secondary.--outline {
-    border: 1px solid var(--vchasno-ui-btn-secondary-bg);
-    background-color: transparent;
-    box-shadow: none;
-    color: var(--vchasno-ui-btn-secondary-bg);
-}
-
-.vchasno-ui-button.--secondary:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-secondary-hover-bg);
-    color: var(--vchasno-ui-btn-secondary-color);
-}
-
-.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {
-    background-color: rgb(0 0 0 / 10%);
-    color: var(--vchasno-ui-btn-secondary-bg);
-}
-
-.vchasno-ui-button.--pink {
-    background-color: var(--vchasno-ui-btn-pink-bg);
-    color: var(--vchasno-ui-btn-primary-color);
-}
-
-.vchasno-ui-button.--pink.--outline {
-    border: 1px solid var(--vchasno-ui-btn-pink-bg);
-    background-color: transparent;
-    color: var(--vchasno-ui-btn-pink-bg);
-}
-
-.vchasno-ui-button.--pink:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-pink-hover-bg);
-    color: var(--vchasno-ui-btn-primary-color);
-}
-
-.vchasno-ui-button.--pink.--outline:not(:disabled):hover {
-    border: 1px solid var(--vchasno-ui-btn-pink-bg);
-    background-color: transparent;
-    color: var(--vchasno-ui-btn-pink-bg);
-}
-
-.vchasno-ui-button.--danger {
-    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
-    background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));
-    color: var(--vchasno-ui-btn-danger-color, #ef6562);
-}
-
-.vchasno-ui-button.--danger.--outline {
-    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
-    background-color: transparent;
-    color: var(--vchasno-ui-btn-danger-color, #ef6562);
-}
-
-.vchasno-ui-button:disabled.--danger {
-    border: 1px solid #b6cadb;
-    background-color: rgb(182 202 219 / 20%);
-    color: #b6cadb;
-}
-
-.vchasno-ui-button.--danger:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);
-    color: var(--vchasno-ui-btn-danger-hover-color, #fff);
-}
-
-.vchasno-ui-button.--danger.--outline:not(:disabled):hover {
-    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
-    background-color: rgb(0 0 0 / 10%);
-    color: var(--vchasno-ui-btn-danger-color, #ef6562);
-}
-
-.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {
-    stroke: var(--vchasno-ui-btn-default-color);
-    transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);
-}
-
-.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {
-    stroke: var(--vchasno-ui-btn-default-hover-color);
-}
-
-.vchasno-ui-button:disabled.--transparent {
-    color: #b6cadb;
-}
-
-.vchasno-ui-button.--light {
-    border: 1px solid transparent;
-    background-color: var(--vchasno-ui-btn-light-bg, #fff);
-    color: var(--vchasno-ui-btn-light-color);
-}
-
-.vchasno-ui-button:disabled.--light {
-    border: none;
-    background-color: rgb(182 202 219 / 20%);
-    color: #b6cadb;
-}
-
-.vchasno-ui-button.--light.--outline {
-    border: 1px solid var(--vchasno-ui-btn-primary-bg);
-    background-color: var(--vchasno-ui-btn-primary-color);
-    color: var(--vchasno-ui-btn-primary-bg);
-}
-
-.vchasno-ui-button.--light:not(:disabled):hover {
-    background-color: var(--vchasno-ui-btn-light-hover-bg);
-    color: var(--vchasno-ui-btn-primary-bg);
-}

package/dist/css/Checkbox.global.css

@@ -1,76 +0,0 @@
-.vchasno-ui-checkbox {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    gap: 8px;
-    user-select: none;
-}
-
-.vchasno-ui-checkbox__box {
-    display: inline-flex;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);
-    border-radius: 3px;
-    outline: 2px solid transparent;
-    transition:
-        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
-        border var(--vchasno-ui-transition-duration-sec, 0.3s),
-        outline var(--vchasno-ui-transition-duration-sec, 0.3s);
-}
-
-.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {
-    stroke: var(--vchasno-ui-checkbox-bg-color);
-}
-
-.vchasno-ui-checkbox__svg {
-    color: transparent;
-    transform: scale(0) translateZ(0);
-    transition:
-        color var(--vchasno-ui-transition-duration-sec),
-        transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);
-}
-
-.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {
-    display: none;
-}
-
-.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {
-    border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);
-    background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);
-}
-
-.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {
-    color: var(--vchasno-ui-checkbox-icon-color);
-    transform: scale(1) translateZ(0);
-}
-
-.vchasno-ui-checkbox.--hover > input:not(:disabled) + .vchasno-ui-checkbox__box,
-.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,
-.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {
-    border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);
-    outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);
-}
-
-.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {
-    border-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
-    background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
-}
-
-.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {
-    stroke: var(--vchasno-ui-checkbox-icon-color);
-}
-
-.vchasno-ui-checkbox__label {
-    font-size: var(--vchasno-ui-checkbox-font-size);
-    line-height: 1;
-    user-select: none;
-}
-
-.vchasno-ui-checkbox.--disabled {
-    color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
-    cursor: not-allowed;
-}