관리-도구

편집 파일: _buttons.scss

@use '../utils' as *;

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.tp-btn-theme {    
    height:60px;
    line-height: 60px;
    padding: 0 30px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-white);
    background-color: var(--tp-theme-1);
    text-align: center;
    position: relative;
    z-index: 1;
    &.theme-lg{
        padding: 0 61px;
        height: 70px;
        line-height: 70px;
    }
    &.black-bg{
        padding: 0 61px;
        height: 70px;
        line-height: 70px;
        border-radius: 5px;
    }
    &.height {
        height: 64px;
        line-height: 64px;
        padding:0 50px;

}
    &.height-2 {
        height: 50px;
        line-height: 50px;
    }
    & span {
        & svg {                 
            display: inline-block;
            margin-left: 4px;
            color: var(--tp-common-white);
        }
    }
    &:hover {
        color: var(--tp-common-white);
        background-color: var(--tp-common-black);
    }

}
.tp-btn-black {    
    height: 50px;
    line-height: 50px;
    padding: 0 38px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-white);
    background-color: var(--tp-common-black);
    position: relative;
    z-index: 1;
    text-align: center;
    & span {
        & svg {
            position: absolute;  
            top: 50%;
            transform: translateY(-50%);
            right: -25px;          
            color: var(--tp-theme-1);
            display: inline-block;
        }
    }
    &.height {
        height: 60px;
        line-height: 60px;
    }
    &.theme-bg {        
        background-color: var(--tp-theme-1);
        & svg {
            color: var(--tp-common-black);
        }
        
        &:hover {
            color: var(--tp-common-white);
            background-color: var(--tp-common-black);
        }
    }
    &.hover-2 {
        transition: .3s;
        &:hover {
            color: var(--tp-common-black);
            background-color: var(--tp-common-white);
        }
    }
    &:hover {
        color: var(--tp-common-white);
        background-color: var(--tp-theme-1);
    }
       
}
.tp-btn-black-lg {    
    height: 50px;
    line-height: 50px;
    padding: 0 44px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-white);
    background-color: var(--tp-common-black);
    text-align: center;
    position: relative;
    z-index: 1;
    &:hover {
        color: var(--tp-common-white);
        background-color: var(--tp-theme-1);
    }
}
.tp-btn-black-sm {    
    height: 50px;
    line-height: 50px;
    padding: 0 31px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-white);
    background-color: var(--tp-common-black);
    text-align: center;
    position: relative;
    z-index: 1;
    & span {
        & svg {
            position: absolute;  
            top: 50%;
            transform: translateY(-50%);
            right: -25px;          
            color: var(--tp-theme-1);
            display: inline-block;
        }
    }
    &:hover {
        color: var(--tp-common-black);
        background-color: var(--tp-common-white);
    }
}
.tp-btn-border-lg {    
    height: 50px;
    line-height: 48px;
    padding: 0 38px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-black);
    text-align: center;
    border: 1px solid var(--tp-common-black);
    position: relative;
    z-index: 1;
    & span {
        & svg {
            position: absolute;  
            top: 51%;
            transform: translateY(-50%);
            right: -25px;          
            color: var(--tp-theme-1);
            display: inline-block;
            z-index: 1;
        }
    }
    &.white-border {
        color: var(--tp-common-white);
        border: 1px solid var(--tp-common-white);
        &:hover {
            color: var(--tp-common-white);
            background-color: var(--tp-theme-1);
            border: 1px solid var(--tp-theme-1);
        }
    }
    &.grey-border {
        border: 1px solid var(--tp-theme-1);
        &:hover {
            color: var(--tp-common-white);
            background-color: var(--tp-theme-1);
        }
    }
    &.grey-border-2 {
        border-color: #E6E6E6;
    }
    &:hover {
        color: var(--tp-common-white);
        background-color: var(--tp-common-black);
    }
}
.tp-btn-border {    
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-black);
    text-align: center;
    border: 1px solid var(--tp-theme-1);
    position: relative;
    z-index:2;
    & span {
        & svg {
            position: absolute;  
            top: 50%;
            transform: translateY(-50%);
            right: -25px;          
            color: var(--tp-theme-1);
            display: inline-block;
        }
    }
    &.height {
        height: 65px;
        line-height: 65px;
        border: 2px solid var(--tp-theme-1);
        color: var(--tp-common-white);
        &:hover {
            color: var(--tp-common-white);
            background-color: var(--tp-theme-1);
            border: 2px solid var(--tp-theme-1);
        }
    }
    &.black-border{
        border-color: var(--tp-common-black);
        &:hover {
            color: var(--tp-common-white);
            background-color: var(--tp-common-black);
            border: 1px solid var(--tp-common-black);
        }
    }
    &:hover {
        color: var(--tp-common-white);
        background-color: var(--tp-theme-1);
        border: 1px solid var(--tp-theme-1);
    }
    
}
.tp-btn-border-bottom {  
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
    color: var(--tp-common-black);
    text-align: center;
    position: relative;
    z-index: 1;
    & span {
        & svg {                 
            display: inline-block;
            margin-left: 6px;
            color: var(--tp-theme-1);
        }
    }
    & .bottom-line {
        overflow: hidden;
        left: 0;
        bottom: 4px;
        height: 1px;
        width: 107px;
        position: absolute;
        background:var(--tp-theme-1);
        display: block;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            width: 7px;
            height: 1px;
            background-color: #fff;
            animation: lineAnim 1.5s linear infinite;
        }
    }
}
.tp-menu-btn {
    background-color: var(--tp-theme-1);
    color: var(--tp-common-white);
    width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    overflow: hidden;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    text-align: center;
    position: relative;
    z-index: 1;
    &:hover{
        background-color: var(--tp-common-black);
        color: var(--tp-common-white);
    }
  
}

Name	Size	Permissions	Action
📄 .htaccess	218 bytes
📁 755944	-
📄 index.php	33,708 bytes

관리-도구

편집 파일: _buttons.scss

Sid Gifari File Manager