mukeshs/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mukesh13
2025-07-30 13:44:47 +05:30
commit 6c0c0e3d1d
494 changed files with 57695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
public/scss/component/_button.scss Normal file
View File

@ -0,0 +1,306 @@
@use "../abstracts/index" as *;
.tf-btn {
@include flex(center, center);
width: max-content;
height: 48px;
padding: 0 24px;
background-color: var(--Primary);
@include transition3();
border-radius: 46px;
@include transition3();
position: relative;
overflow: hidden;
z-index: 1;
font-size: 16px;
line-height: 24px;
span {
color: var(--White);
@include transition3();
white-space: nowrap;
}
.bg-effect {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background-color: var(--White);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
&.btn-white {
background-color: var(--White);
span {
color: var(--Primary);
}
.bg-effect {
background-color: var(--Primary);
}
&:hover {
background-color: var(--Primary);
span,
i {
color: var(--White) !important;
}
}
&.bg-effect-dark-color {
.bg-effect {
background-color: var(--Mono-dark-8);
}
}
}
&.btn-white2 {
background-color: var(--White);
span {
color: var(--Mono-dark-9);
}
.bg-effect {
background-color: var(--Mono-dark-8);
}
&:hover {
background-color: var(--Mono-dark-8);
color: var(--White);
span {
color: var(--White) !important;
}
}
&.bg-effect-dark-color {
.bg-effect {
background-color: var(--dark-color2);
}
}
}
&.btn-primary2 {
background-color: var(--Primary);
span {
color: var(--White);
}
.bg-effect {
background-color: var(--Mono-dark-8);
}
&:hover {
background-color: var(--Mono-dark-8);
span {
color: var(--White) !important;
}
}
}
&.btn-dark {
background-color: var(--Mono-dark-9);
span {
color: var(--White);
}
i {
color: var(--Mono-dark-9);
@include transition3();
}
.bg-effect {
background-color: var(--Primary);
}
&:hover {
background-color: var(--Primary);
span {
color: var(--White) !important;
}
i {
color: var(--White);
}
}
}
&.btn-dark-2 {
background-color: var(--dark-color2);
span {
color: var(--White);
}
i {
color: var(--dark-color);
@include transition3();
}
.bg-effect {
background-color: var(--White);
}
&:hover {
background-color: var(--White);
span {
color: var(--dark-color2);
}
i {
color: var(--dark-color2);
}
}
}
&.btn-black {
background-color: var(--black);
padding: 0 20px;
span {
color: var(--White);
font-size: 12px;
line-height: 14.52px;
}
i {
color: var(--White);
@include transition3();
}
.bg-effect {
background-color: var(--White);
}
&:hover {
background-color: var(--White);
span {
color: var(--dark-color2);
}
i {
color: var(--black);
}
}
}
&.btn-black2 {
background-color: var(--black);
padding: 0 20px;
span {
color: var(--White);
font-size: 12px;
line-height: 14.52px;
}
i {
color: var(--White);
@include transition3();
}
.bg-effect {
background-color: var(--Primary);
}
&:hover {
background-color: var(--Primary);
span {
color: var(--White);
}
i {
color: var(--White);
}
}
}
&.btn-border {
background-color: transparent;
border: 1px solid var(--Mono-gray-2);
&.border-1 {
border-color: var(--Primary);
span {
color: var(--Primary) !important;
}
&:hover {
span {
color: var(--White) !important;
}
}
}
span {
color: var(--Mono-dark-9);
}
.bg-effect {
background-color: var(--Primary);
}
&:hover {
background-color: var(--Primary);
border: 1px solid var(--Primary);
span {
color: var(--White) !important;
}
}
}
&.btn-bright-orange {
background-color: var(--bright-orange);
span {
color: var(--dark-color);
}
i {
color: var(--dark-color);
@include transition3();
}
.bg-effect {
background-color: var(--dark-color);
}
&:hover {
background-color: var(--dark-color);
span {
color: var(--White);
}
i {
color: var(--White);
}
}
}
&.h36 {
height: 36px;
}
&.h-48 {
height: 48px;
}
&.btn-px-28 {
padding: 0 28px;
}
&.btn-px-30 {
padding: 0 30px;
}
&:hover {
transition-delay: 0.15s;
background-color: var(--White);
span {
color: var(--Mono-dark-9) !important;
}
.bg-effect {
width: 225%;
height: calc(var(--button-width) * 2.25);
}
-webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
}
.tf-btn-link {
@include d-flex();
align-items: center;
font-size: 16px;
line-height: 24px;
color: var(--Primary);
gap: 8px;
width: max-content;
span {
position: relative;
&::after {
position: absolute;
content: "";
width: 0;
left: 0;
bottom: -1px;
background: var(--Primary);
height: 2px;
@include transition3();
}
}
i {
@include transition3();
transition-delay: 0.2s;
font-size: 12px;
height: 20px;
width: 20px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
&:hover {
span {
&::after {
width: 100%;
}
}
i {
transform: translateX(4px) rotate(45deg);
background-color: var(--Primary);
color: var(--White);
}
}
}