@gofynd/nitrozen-vue/src/components/NIconBtn/NIconBtn.less

Fynd Design Library for Vue

@import './../../base/base.less';

.n-icbutton {
    // height: 40px;
    height: 24px;
    width: max-content;
    cursor: pointer;
    box-shadow: none;
    text-align: center;
    outline: none;
    border: 0;
    letter-spacing: 0px;
    background: none;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.5s;
    // transition: color 0.5s;
    .icon-wrapper{
        height: 16px;
        width:  16px;
    }

    &:disabled {
        .disableBtn();
    }

    // Primary,Secondary Padding and border radius
    &.n-icbutton-primary {
        padding: 4px; // padding of m
       
    }
    // Primary,Secondary Padding and border radius
    &.n-icbutton-secondary {
        padding: 4px;   // padding of 'm'
       

    }

     // Primary,Secondary Colors
    &.n-icbutton-primary {
        background-color: @SecondaryColor;
        color: @WhiteColor;
        &:hover:not([disabled]) {
            background-color: @SecondaryHoverColor;
        }
        &:active {
            background-color: @SecondaryHoverColor;
            color: @SecondaryLight;
        }
    }
    &.n-icbutton-primary.n-ic-button-positive{
        background: @SemanticSuccess;
        color:@WhiteColor;
        &:hover:not([disabled]) {
           background: @SemanticSuccessHover;
           color:@WhiteColor;
        }
        &:active {
            background: @SemanticSuccessHover;
            color: @SemanticSuccessLight !important;
        }
    }
    &.n-icbutton-primary.n-ic-button-negative{
        background: @SemanticError;
        color:@WhiteColor;
        &:hover:not([disabled]) {
            background: @SemanticErrorHover;
            color:@WhiteColor;
         }
         &:active {
             background: @SemanticErrorHover;
             color: @SemanticErrorLight !important;
         }
    }

       // Primary,Secondary Colors
    &.n-icbutton-secondary {
        border: 1px solid @BorderColor;
        background: @WhiteColor;
        color: @GreyColor;
        &:hover:not([disabled]) {
            border-color: @GreyBorderHover;
            background: @GreyBGHover;
            color: @GreyColorHover;
        }
        &:active {
            background-color: @SecondaryHoverColor !important;
            color: @SecondaryLight !important;
            border: 1px solid @SecondaryHoverColor !important;
        }
    }
    &.n-icbutton-secondary.n-ic-button-positive{
        border-color: @SemanticSuccess;
        color: @SemanticSuccess;
        &:hover:not([disabled]) {
            border-color: @SemanticSuccessHover;
            color: @SemanticSuccessHover;
            background: @SemanticSuccessBG;
        }
        &:active {
           background: @SemanticSuccessHover !important;
           color: @SemanticSuccessLight !important;
           border: 1px solid @SemanticSuccessHover !important;
        }
    }
    &.n-icbutton-secondary.n-ic-button-negative{
        border-color: @SemanticErrorHover;
        color: @SemanticErrorHover;
        &:hover:not([disabled]) {
            border-color: @SemanticErrorHover;
            color: @SemanticErrorHover;
            background: @SemanticErrorBG;
        }
        &:active {
           background: @SemanticErrorHover !important;
           color: @SemanticErrorLight !important;
           border: 1px solid @SemanticErrorHover !important;
        }
    }


    &.n-icbutton-secondary:disabled,
    &.n-icbutton-primary:disabled,
    &.n-icbutton-rounded:disabled {
        .disableBtn();
    }

    &.n-icbutton-rounded {
        border-radius: 24px;
        padding: 0px 32px;
    }
    
    &.n-icbutton-large {
        padding: 6px;
        height: 32px;
        .icon-wrapper{
            height: 20px;
            width: 20px;
        }
    }
    
    &.n-icbutton-small {
        padding: 4px;
        height: 20px;
        .icon-wrapper{
            height: 12px;
            width:12px;
        }
    }
    
    // Tertiary Button difference
    &.n-icbutton-tertiary {
        padding: 2px;
       
        .icon-wrapper{
           
            height: 20px;
            width:  20px;
        }
        &.n-icbutton-large{
            padding: 4px;
            .icon-wrapper{
                height: 24px;
                width:  24px;
            }
        }
        &.n-icbutton-small{
            padding: 2px;
            .icon-wrapper{
                height: 16px;
                width:  16px;
            }
        }
    }
    &.n-icbutton-tertiary{
        color: @GreyColor;
        background: none;
        &:hover:not([disabled]) {
          color: @GreyColorHover;
        }
        &:active {
           background: #E7EEFF;
           color: @SecondaryHoverColor !important;
        }
    }
    &.n-icbutton-tertiary.n-ic-button-positive{
        color:@SemanticSuccess;
        &:hover:not([disabled]) {
            color: @SemanticSuccessHover;
        }
        &:active {
            color: @SemanticSuccessHover !important;
            background: @SemanticSuccessBG;
        }
    }
    &.n-icbutton-tertiary.n-ic-button-negative{
        color:@SemanticError;
        &:hover:not([disabled]) {
            color: @SemanticErrorHover;
        }
        &:active {
            color: @SemanticErrorHover !important;
            background: @SemanticErrorBG;
        }
    }
}





.hover-state {
    pointer-events: none;
}





.icon-wrapper{
    svg {
      height: 100% !important;
      width: 100% !important;
    }

    path,
    circle,
    polygon,
    polyline,
    rect,
    text,
    textPath,
    tref,
    tspan {
      height: 100% !important;
      width: 100% !important;
      color: inherit;
      fill: currentColor;
    }
}