151 lines
4.3 KiB
SCSS
151 lines
4.3 KiB
SCSS
.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;
|
|
}
|
|
}
|
|
} |