src/shared/ui/Button/Button.module.scss - main - dedaMazai/chatAI

src/shared/ui/Button/Button.module.scss
232 строки4 KB
Andrey Chipizubov
fix
25 окт 2023, 11:20
25 окт 2023, 11:204580325
.Button {
    cursor: pointer;
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;

    &:hover {
        opacity: 0.9;
    }
}

.clear {
    padding: 0 !important;
    border: none;
    background: none;
    outline: none;
    color: var(--primary-color);
}

.clearGreen {
    border: none;
    outline: none;
    border-radius: 10px;
    color: var(--primary-color);
    background: transparent;

    &:hover {
        background: var(--green-light-button);
        color: var(--text-green);
    }
}

.clearGrey {
    border: none;
    outline: none;
    border-radius: 10px;
    color: var(--primary-color);
    background: transparent;

    &:hover {
        background: var(--grey-light-button);
    }
}

.clearActive {
    // padding: 0 !important;
    border: none;
    background: none;
    outline: none;
    color: var(--text-main);

    &:hover {
        color: var(--text-green);
    }
}

.filled {
    background: var(--green-button);
    border: none;
    outline: none;
    border-radius: 10px;

    &.greenLight {
        background: var(--green-light-button);
        color: var(--text-green);

        &:hover {
            color: var(--text-white);
        }
    }

    &:hover {
        background: var(--green-button-hover);
    }

    &.grey {
        background: var(--grey-button);
        color: var(--text-black);

        svg {
            fill: var(--text-black);
        }

        &:hover {
            background: var(--grey-button-hover);
        }
    }

    &.black {
        background: var(--black-button);
        border: 2px solid var(--black-button);
        color: var(--text-main-invert);

        svg {
            fill: var(--bg-color);
        }

        &:hover {
            background: var(--black-button-hover);
            border: 2px solid var(--black-button);
            color: var(--text-black);

            svg {
                fill: var(--text-black);
            }
        }
    }

    &.red {
        background: var(--red-button);

        &:hover {
            background: var(--red-button);
        }
    }
}

.outline {
    background: none;
    border-radius: 10px;
    border: 2px solid var(--green-button);
    color: var(--primary-color);

    &:hover {
        border: 2px solid var(--green-button-hover);
    }

    &.greenLight {
        border: 2px solid var(--green-light-button);
        color: var(--text-green);
    }

    &.grey {
        border: 2px solid var(--grey-button);
        color: var(--text-black);

        &:hover {
            border: 2px solid var(--grey-button-hover);
        }
    }

    &.black {
        border: 2px solid var(--black-button);
        color: var(--text-black);

        &:hover {
            border: 2px solid var(--black-button-hover);
        }
    }

    &.red {
        border: 2px solid var(--red-button);
    }
}

.square {
    padding: 0;
}

.square.m {
    width: var(--font-line-m);
    height: var(--font-line-m);
}

.square.l {
    width: var(--font-line-l);
    height: var(--font-line-l);
}

.square.xl {
    width: var(--font-line-xl);
    height: var(--font-line-xl);
}

.m {
    font: var(--font-m);
    padding: 8px 18px;

    &.circle {
        border-radius: 20px;
    }
}

.l {
    font: var(--font-l);
    padding: 12px 32px;

    &.circle {
        border-radius: 30px;
    }
}

.xl {
    font: var(--font-xl);
    padding: 18px 42px;

    &.circle {
        border-radius: 35px;
    }
}

.disabled {
    opacity: 0.5;

    &:hover {
        opacity: 0.5;
    }
}

.fullWidth {
    width: 100%;
}

.fullHeight {
    height: 100%;
}

.jump {
    &:hover {
        transform: translateY(-0.1875rem);
    }
}

.bold {
    font-weight: 700;
}

.nowrap {
    text-wrap: nowrap;
}