feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
1
assets/icons/chrome.svg
Normal file
1
assets/icons/chrome.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2491" height="2500" viewBox="0 0 435.816 437.46"><path d="M217.341.039s128.478-5.783 196.57 123.337H206.416s-39.188-1.289-72.593 46.255c-9.634 19.916-19.91 40.473-8.349 80.937C108.773 222.309 36.823 97.04 36.823 97.04S87.578 5.176 217.341.039z" fill="#c6352e"/><path d="M407.223 327.871s-59.247 114.143-205.118 108.533c17.995-31.148 103.772-179.682 103.772-179.682s20.709-33.289-3.744-85.991c-12.431-18.305-25.09-37.486-65.919-47.713 32.836-.326 177.285.021 177.285.021s54.168 89.891-6.276 204.832z" fill="#f4d911"/><path d="M28.373 328.738s-69.224-108.395 8.58-231.908c17.979 31.16 103.71 179.72 103.71 179.72s18.469 34.578 76.341 39.756c22.061-1.609 45.007-2.982 74.279-33.223-16.139 28.594-88.673 153.521-88.673 153.521S97.681 438.56 28.373 328.738z" fill="#81b354"/><path d="M202.105 437.46l29.187-121.793s32.092-2.504 58.982-32.017c-16.693 29.365-88.169 153.81-88.169 153.81z" fill="#7baa50"/><path d="M119.59 220.093c0-53.69 43.52-97.215 97.215-97.215 53.69 0 97.214 43.524 97.214 97.215 0 53.693-43.522 97.219-97.214 97.219-53.695 0-97.215-43.525-97.215-97.219z" fill="#fff"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-829.128" y1="1417.339" x2="-829.128" y2="1261.441" gradientTransform="matrix(1 0 0 -1 1045.93 1557.636)"><stop offset="0" stop-color="#a2c0e6"/><stop offset="1" stop-color="#406cb1"/></linearGradient><path d="M135.86 220.093c0-44.702 36.238-80.941 80.945-80.941 44.698 0 80.94 36.239 80.94 80.941 0 44.703-36.242 80.945-80.94 80.945-44.707.001-80.945-36.244-80.945-80.945z" fill="url(#a)"/><path d="M413.5 123.039l-120.183 35.237s-18.123-26.596-57.104-35.258c33.776-.115 177.287.021 177.287.021z" fill="#e7ce12"/><path d="M123.137 246.197c-16.89-29.25-86.31-149.16-86.31-149.16l89.029 88.07s-9.149 18.82-5.68 45.7l2.961 15.39z" fill="#bc332c"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
assets/icons/firefox.svg
Normal file
1
assets/icons/firefox.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.1 KiB |
1
assets/icons/github.svg
Normal file
1
assets/icons/github.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="#161614"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
1
assets/icons/google.svg
Normal file
1
assets/icons/google.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="#ea4335"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="#34a853"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="#4a90e2"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="#fbbc05"/></svg>
|
||||
|
After Width: | Height: | Size: 726 B |
1
assets/icons/twitter.svg
Normal file
1
assets/icons/twitter.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" height="1684" stroke-linejoin="round" stroke-miterlimit="2" viewBox="-89.00934757 -46.8841404 643.93723344 446.8841404" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m154.729 400c185.669 0 287.205-153.876 287.205-287.312 0-4.37-.089-8.72-.286-13.052a205.304 205.304 0 0 0 50.352-52.29c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1 -64.098 24.511c-18.42-19.628-44.644-31.904-73.682-31.904-55.744 0-100.948 45.222-100.948 100.965 0 7.925.887 15.631 2.619 23.025-83.895-4.223-158.287-44.405-208.074-105.504a100.739 100.739 0 0 0 -13.668 50.754c0 35.034 17.82 65.961 44.92 84.055a100.172 100.172 0 0 1 -45.716-12.63c-.015.424-.015.837-.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.036 101.036 0 0 1 -26.617 3.553c-6.493 0-12.821-.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.371 43.224a204.9 204.9 0 0 1 -24.078-1.399c44.674 28.645 97.72 45.359 154.734 45.359" fill="#1da1f2" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -10,28 +10,34 @@
|
||||
font-variant-ligatures: common-ligatures;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply h-1;
|
||||
@apply w-2;
|
||||
|
||||
&:hover {
|
||||
@apply bg-primaryDark;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-secondaryLight;
|
||||
@apply bg-divider;
|
||||
@apply rounded-full;
|
||||
@apply border-solid;
|
||||
@apply border-4;
|
||||
@apply border-transparent;
|
||||
@apply bg-clip-content;
|
||||
|
||||
&:hover {
|
||||
@apply bg-secondary;
|
||||
@apply bg-dividerDark;
|
||||
@apply bg-clip-content;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply w-4;
|
||||
@apply h-4;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@apply text-secondaryLight;
|
||||
@apply opacity-25;
|
||||
@@ -44,6 +50,7 @@ html {
|
||||
body {
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply text-sm;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply overflow-x-hidden;
|
||||
@@ -52,15 +59,11 @@ body {
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
@apply opacity-25;
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active,
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
@apply transition;
|
||||
@apply transition-opacity;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
@@ -70,76 +73,41 @@ body.sticky-footer footer {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.svg-icons {
|
||||
@apply inline-flex;
|
||||
@apply flex-shrink-0;
|
||||
@apply h-5;
|
||||
@apply w-5;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply inline-flex;
|
||||
@apply text-current;
|
||||
@apply no-underline;
|
||||
@apply outline-none;
|
||||
@apply focus-visible:ring;
|
||||
@apply focus-visible:ring-inset;
|
||||
@apply focus-visible:ring-accent;
|
||||
|
||||
&.link {
|
||||
@apply text-accent;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
& > div {
|
||||
@apply flex;
|
||||
@apply py-2 px-2;
|
||||
@apply w-full;
|
||||
@apply items-center;
|
||||
@apply justify-between;
|
||||
@apply text-accent;
|
||||
|
||||
@apply hover:text-accent;
|
||||
@apply focus:text-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@apply min-h-screen;
|
||||
@apply flex flex-col flex-nowrap;
|
||||
}
|
||||
|
||||
.wrapper .page {
|
||||
min-height: calc(100vh - 153px);
|
||||
}
|
||||
|
||||
.content,
|
||||
.columns,
|
||||
.footer {
|
||||
@apply flex flex-1;
|
||||
}
|
||||
|
||||
.sticky-inner {
|
||||
@apply flex flex-col;
|
||||
@apply items-start items-stretch;
|
||||
@apply order-1;
|
||||
@apply sticky;
|
||||
@apply top-0;
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
main {
|
||||
@apply flex flex-col flex-1;
|
||||
@apply order-2;
|
||||
@apply relative;
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply m-0;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
h3.heading {
|
||||
@apply m-2;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-b border-dashed border-divider;
|
||||
@apply my-4;
|
||||
button {
|
||||
@apply font-medium;
|
||||
@apply outline-none;
|
||||
@apply focus-visible:ring;
|
||||
@apply focus-visible:ring-inset;
|
||||
@apply focus-visible:ring-accent;
|
||||
}
|
||||
|
||||
.tippy-popper {
|
||||
@@ -154,26 +122,26 @@ hr {
|
||||
}
|
||||
|
||||
.popover-theme {
|
||||
@apply bg-primaryLight;
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply p-2;
|
||||
@apply shadow-md;
|
||||
@apply shadow-lg;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {
|
||||
border-top-color: var(--primary-light-color);
|
||||
border-top-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
|
||||
border-bottom-color: var(--primary-light-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .tippy-tooltip .tippy-arrow {
|
||||
border-left-color: var(--primary-light-color);
|
||||
border-left-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .tippy-tooltip .tippy-arrow {
|
||||
border-right-color: var(--primary-light-color);
|
||||
border-right-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,6 +153,12 @@ hr {
|
||||
@apply items-stretch;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@apply font-bold;
|
||||
@apply text-secondaryDark;
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
.info:not(.toasted) {
|
||||
@apply m-4;
|
||||
@apply text-secondaryLight;
|
||||
@@ -195,96 +169,6 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply p-4;
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
@apply font-bold;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
span {
|
||||
@apply inline-flex;
|
||||
@apply ml-4;
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-primary;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-color);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
@apply bg-transparent;
|
||||
@apply text-secondaryLight;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
@apply rounded-lg;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-secondary;
|
||||
@apply fill-current;
|
||||
@apply shadow-none;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@apply text-accent;
|
||||
@apply px-6;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
30% {
|
||||
@apply transform;
|
||||
@apply scale-90;
|
||||
}
|
||||
50% {
|
||||
@apply transform;
|
||||
@apply scale-110;
|
||||
}
|
||||
100% {
|
||||
@apply transform;
|
||||
@apply scale-100;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
&:active {
|
||||
animation: beat 0.5s forwards 1;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset:target,
|
||||
section:target {
|
||||
animation: highlight 2s ease;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@apply truncate;
|
||||
}
|
||||
@@ -295,64 +179,12 @@ input[type="radio"],
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.show-on-large-screen {
|
||||
@apply flex flex-1;
|
||||
}
|
||||
|
||||
.drop-down-input,
|
||||
.url-field,
|
||||
.input,
|
||||
.select,
|
||||
.textarea,
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
@apply flex;
|
||||
@apply p-4;
|
||||
@apply bg-primaryDark;
|
||||
@apply text-secondary;
|
||||
@apply font-mono;
|
||||
@apply select-text;
|
||||
@apply resize-y;
|
||||
@apply outline-none;
|
||||
@apply w-full;
|
||||
|
||||
&:not([readonly]):not(.ace_editor):hover,
|
||||
&:not([readonly]):not(.ace_editor):active,
|
||||
&:not([readonly]):not(.ace_editor):focus {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down-input {
|
||||
@apply cursor-pointer;
|
||||
@apply rounded-none;
|
||||
|
||||
min-width: 128px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply grid;
|
||||
}
|
||||
|
||||
pre.ace_editor {
|
||||
@apply font-mono;
|
||||
@apply z-0;
|
||||
@apply resize-none;
|
||||
}
|
||||
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
@apply w-auto;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
@apply relative;
|
||||
@apply w-full;
|
||||
@@ -439,12 +271,6 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply p-4;
|
||||
@apply text-secondaryLight;
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
@apply flex flex-1 flex-row;
|
||||
@apply items-center;
|
||||
@@ -627,7 +453,3 @@ section {
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-list {
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,10 @@
|
||||
--secondary-dark-color: rgba(0, 0, 0, 0.5);
|
||||
// Border color
|
||||
--divider-color: rgba(255, 255, 255, 0.05);
|
||||
// Light Border color
|
||||
--divider-light-color: rgba(255, 255, 255, 0.05);
|
||||
// Dark Border color
|
||||
--divider-dark-color: rgba(255, 255, 255, 0.05);
|
||||
// Error color
|
||||
--error-color: rgba(255, 255, 255, 0.05);
|
||||
// Tooltip color
|
||||
@@ -42,6 +46,10 @@
|
||||
--secondary-dark-color: theme("colors.gray.700");
|
||||
// Border color
|
||||
--divider-color: theme("colors.gray.200");
|
||||
// Light Border color
|
||||
--divider-light-color: theme("colors.gray.100");
|
||||
// Dark Border color
|
||||
--divider-dark-color: theme("colors.gray.300");
|
||||
// Error color
|
||||
--error-color: theme("colors.gray.700");
|
||||
// Tooltip color
|
||||
@@ -65,6 +73,10 @@
|
||||
--secondary-dark-color: rgba(9, 9, 9, 0.5);
|
||||
// Border color
|
||||
--divider-color: rgba(255, 255, 255, 0.11);
|
||||
// Light Border color
|
||||
--divider-light-color: rgba(255, 255, 255, 0.11);
|
||||
// Dark Border color
|
||||
--divider-dark-color: rgba(255, 255, 255, 0.11);
|
||||
// Error color
|
||||
--error-color: rgba(255, 255, 255, 0.05);
|
||||
// Tooltip color
|
||||
|
||||
Reference in New Issue
Block a user