lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dahoud
2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
app/(main)/uikit/button/index.module.scss Normal file
View File

@@ -0,0 +1,151 @@
.p-button{
padding: 0%;
&.google {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--purple-700);
display: flex;
align-items: stretch;
padding: 0;
&:enabled:hover {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--purple-700);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-400);
}
}
&.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--blue-500);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--blue-500);
}
&:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
}
&.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--bluegray-800);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--bluegray-800);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-500);
}
}
.template-button .p-button.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--blue-500);
}
.template-button .p-button.twitter:hover {
background-position: left bottom;
}
.template-button .p-button.twitter i {
background-color: var(--blue-500);
}
.template-button .p-button.twitter:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
.template-button .p-button.slack {
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--orange-500);
}
.template-button .p-button.slack:hover {
background-position: left bottom;
}
.template-button .p-button.slack i {
background-color: var(--orange-500);
}
.template-button .p-button.slack:focus {
box-shadow: 0 0 0 1px var(--orange-200);
}
.template-button .p-button.amazon {
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #000;
border-color: var(--yellow-500);
}
.template-button .p-button.amazon:hover {
background-position: left bottom;
}
.template-button .p-button.amazon i {
background-color: var(--yellow-500);
}
.template-button .p-button.amazon:focus {
box-shadow: 0 0 0 1px var(--yellow-200);
}
.template-button .p-button.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--bluegray-800);
}
.template-button .p-button.discord:hover {
background-position: left bottom;
}
.template-button .p-button.discord i {
background-color: var(--bluegray-800);
}
.template-button .p-button.discord:focus {
box-shadow: 0 0 0 1px var(--bluegray-500);
}
@media screen and (max-width: 960px) {
-button .p-button {
margin-bottom: 0.5rem;
}
-button .p-button:not(.p-button-icon-only) {
display: flex;
flex-wrap: wrap;
}
-button .p-buttonset .p-button {
margin-bottom: 0;
}
}
}