mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-02 07:53:55 +03:00
Merge pull request #1955 from gitbutlerapp/add-new-components
Add new components
This commit is contained in:
Pavel Laptev
GitHub
commit
d1d479b307
@ -4,7 +4,7 @@
|
||||
import Icon from '$lib/icons/Icon.svelte';
|
||||
|
||||
export let icon: keyof typeof iconsJson | undefined = undefined;
|
||||
export let color: 'primary' | 'error' = 'primary';
|
||||
export let color: 'primary' | 'neutral' | 'error' = 'primary';
|
||||
export let kind: 'filled' | 'outlined' = 'filled';
|
||||
export let disabled = false;
|
||||
export let id: string | undefined = undefined;
|
||||
@ -31,6 +31,7 @@
|
||||
class:primary-outline={color == 'primary' && kind == 'outlined'}
|
||||
class:error-filled={color == 'error' && kind == 'filled'}
|
||||
class:primary-filled={color == 'primary' && kind == 'filled'}
|
||||
class:neutral-outline={color == 'neutral' && kind == 'outlined'}
|
||||
class:pointer-events-none={loading}
|
||||
class:wide
|
||||
bind:this={element}
|
||||
@ -63,6 +64,7 @@
|
||||
gap: var(--space-2);
|
||||
height: var(--size-btn-m);
|
||||
min-width: var(--size-btn-m);
|
||||
background: transparent;
|
||||
transition: background-color var(--transition-fast);
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
@ -100,6 +102,19 @@
|
||||
background: var(--clr-theme-pop-container);
|
||||
}
|
||||
}
|
||||
.neutral-outline {
|
||||
color: var(--clr-theme-scale-30);
|
||||
border: 1px solid var(--clr-theme-container-outline-light);
|
||||
&:hover {
|
||||
color: var(--clr-theme-scale-20);
|
||||
border: 1px solid var(--clr-theme-container-outline-pale);
|
||||
}
|
||||
&:active {
|
||||
color: var(--clr-theme-scale-20);
|
||||
border: 1px solid var(--clr-theme-container-outline-pale);
|
||||
background: var(--clr-theme-container-pale);
|
||||
}
|
||||
}
|
||||
.error-filled {
|
||||
color: var(--clr-theme-err-on-element);
|
||||
background: var(--clr-theme-err-element);
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let name = '';
|
||||
|
||||
export let large = false;
|
||||
export let small = false;
|
||||
export let disabled = false;
|
||||
export let checked = false;
|
||||
export let error = false;
|
||||
export let indeterminate = false;
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
@ -13,15 +11,101 @@
|
||||
on:click|stopPropagation
|
||||
on:change
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
class:small
|
||||
{value}
|
||||
{name}
|
||||
class:large
|
||||
class:error
|
||||
{disabled}
|
||||
bind:checked
|
||||
bind:indeterminate
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
||||
<style>
|
||||
<style lang="postcss">
|
||||
.checkbox {
|
||||
appearance: none;
|
||||
width: var(--space-16);
|
||||
height: var(--space-16);
|
||||
border-radius: var(--radius-s);
|
||||
background-color: var(--clr-theme-container-light);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
|
||||
transition:
|
||||
background-color var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
opacity var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
position: relative;
|
||||
|
||||
/* not checked */
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--clr-theme-container-pale);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-pale);
|
||||
outline: none;
|
||||
|
||||
&::after {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-sub);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--clr-theme-scale-ntrl-60);
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked {
|
||||
background-color: var(--clr-theme-pop-element);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-pop-element-dim);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element-dim);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
filter: invert(0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* tick element */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-s);
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05IDEuNUw0LjkyMTM5IDUuNzQ4NTVDNC41Mjc4MyA2LjE1ODUxIDMuODcyMTcgNi4xNTg1MSAzLjQ3ODYxIDUuNzQ4NTZMMSAzLjE2NjY3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K');
|
||||
background-position: center;
|
||||
background-size: 80%;
|
||||
background-repeat: no-repeat;
|
||||
transition:
|
||||
opacity var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
filter: invert(var(--helpers-invert-1));
|
||||
transform: scale(0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
|
||||
&.small {
|
||||
width: var(--space-14);
|
||||
height: var(--space-14);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
107
packages/ui/src/lib/components/RadioButton.svelte
Normal file
107
packages/ui/src/lib/components/RadioButton.svelte
Normal file
@ -0,0 +1,107 @@
|
||||
<script lang="ts">
|
||||
export let name = '';
|
||||
|
||||
export let small = false;
|
||||
export let disabled = false;
|
||||
export let group = '';
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<input
|
||||
on:click|stopPropagation
|
||||
on:change
|
||||
type="radio"
|
||||
class="radio"
|
||||
class:small
|
||||
{value}
|
||||
{name}
|
||||
{disabled}
|
||||
bind:group
|
||||
/>
|
||||
|
||||
<style lang="postcss">
|
||||
.radio {
|
||||
appearance: none;
|
||||
width: var(--space-16);
|
||||
height: var(--space-16);
|
||||
border-radius: var(--space-16);
|
||||
background-color: var(--clr-theme-container-light);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
|
||||
transition:
|
||||
background-color var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
opacity var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
position: relative;
|
||||
|
||||
/* not checked */
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--clr-theme-container-pale);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-pale);
|
||||
outline: none;
|
||||
|
||||
&::after {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-sub);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--clr-theme-scale-ntrl-60);
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked {
|
||||
background-color: var(--clr-theme-pop-element);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-pop-element-dim);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element-dim);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
background-color: var(--clr-core-ntrl-100);
|
||||
}
|
||||
}
|
||||
|
||||
/* tick element */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: var(--space-4);
|
||||
left: var(--space-4);
|
||||
width: calc(100% - var(--space-8));
|
||||
height: calc(100% - var(--space-8));
|
||||
border-radius: var(--space-16);
|
||||
background-color: var(--clr-theme-scale-ntrl-0);
|
||||
transition: background-color var(--transition-fast);
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
|
||||
&.small {
|
||||
width: var(--space-14);
|
||||
height: var(--space-14);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
packages/ui/src/lib/components/Toggle.svelte
Normal file
104
packages/ui/src/lib/components/Toggle.svelte
Normal file
@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
export let name = '';
|
||||
|
||||
export let small = false;
|
||||
export let disabled = false;
|
||||
export let checked = false;
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<input
|
||||
on:click|stopPropagation
|
||||
on:change
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
class:small
|
||||
{value}
|
||||
{name}
|
||||
{disabled}
|
||||
bind:checked
|
||||
/>
|
||||
|
||||
<style lang="postcss">
|
||||
.toggle {
|
||||
appearance: none;
|
||||
width: calc(var(--space-24) + var(--space-2));
|
||||
height: var(--space-16);
|
||||
border-radius: var(--space-16);
|
||||
background-color: var(--clr-theme-container-mid);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
|
||||
transition:
|
||||
background-color var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
opacity var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
position: relative;
|
||||
|
||||
/* not checked */
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--clr-theme-container-dark);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-sub);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--clr-theme-scale-ntrl-60);
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked {
|
||||
background-color: var(--clr-theme-pop-element);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-pop-element-dim);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-dim);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translateX(var(--space-10));
|
||||
}
|
||||
}
|
||||
|
||||
/* tick element */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: var(--space-2);
|
||||
left: var(--space-2);
|
||||
width: var(--space-12);
|
||||
height: var(--space-12);
|
||||
border-radius: var(--space-12);
|
||||
background-color: var(--clr-core-ntrl-100);
|
||||
transition:
|
||||
background-color var(--transition-fast),
|
||||
transform var(--transition-medium);
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
|
||||
&.small {
|
||||
width: var(--space-24);
|
||||
height: var(--space-14);
|
||||
|
||||
&:after {
|
||||
width: var(--space-10);
|
||||
height: var(--space-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -138,87 +138,6 @@ button {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
display: inline-grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
input[type='checkbox']::before {
|
||||
content: '';
|
||||
width: 0.625rem;
|
||||
height: 0.5rem;
|
||||
transform: scale(0);
|
||||
box-shadow: inset 1em 1em white;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
transform: scale(1);
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
input[type='checkbox']:indeterminate::before {
|
||||
transform: scale(1);
|
||||
clip-path: inset(30% 7% 30% 7%);
|
||||
}
|
||||
|
||||
/* colors */
|
||||
input[type='checkbox'] {
|
||||
@apply bg-gradient-to-b from-light-200 to-light-300 dark:from-dark-400 dark:to-dark-500;
|
||||
}
|
||||
input[type='checkbox'].error {
|
||||
background: #fff4f4;
|
||||
border: 0.125rem solid #d82c0d;
|
||||
}
|
||||
|
||||
input[type='checkbox']:hover {
|
||||
@apply bg-gradient-to-b from-light-300 to-light-400 dark:from-dark-300 dark:to-dark-400;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='checkbox']:indeterminate {
|
||||
background: linear-gradient(180deg, #6b66aa 0%, #484383 100%);
|
||||
}
|
||||
input[type='checkbox'].error:checked,
|
||||
input[type='checkbox'].error:indeterminate {
|
||||
background: #d82c0d;
|
||||
}
|
||||
|
||||
input[type='checkbox']:focus {
|
||||
background: #ffffff;
|
||||
border: 0.125rem solid #58529f;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
input[type='checkbox']:checked:focus,
|
||||
input[type='checkbox']:indeterminate:focus {
|
||||
border: 0.125rem solid #458fff;
|
||||
background: linear-gradient(180deg, #6b66aa 0%, #484383 100%);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type='checkbox']:disabled {
|
||||
@apply border border-light-600 bg-gradient-to-b from-[#a0a0a0] to-[#b5b5b5] dark:border-dark-400 dark:from-[#606060] dark:to-[#757575];
|
||||
|
||||
border: 0.125rem solid #d2d5d8;
|
||||
}
|
||||
input[type='checkbox']:checked:disabled,
|
||||
input[type='checkbox']:indeterminate:disabled {
|
||||
background: #bdc1cc;
|
||||
}
|
||||
|
||||
/* sizes */
|
||||
input[type='checkbox'] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
input[type='checkbox'].large {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents elements within drop-zones from firing mouse events, making
|
||||
* it much easier to manage in/out/over/leave events since they fire less
|
||||
|
||||
@ -211,6 +211,8 @@
|
||||
--radius-l: var(--space-12);
|
||||
--radius-m: var(--space-6);
|
||||
--radius-s: var(--space-4);
|
||||
--size-btn-xxs: 0.875rem;
|
||||
--size-btn-xs: 1rem;
|
||||
--size-btn-s: 1.25rem;
|
||||
--size-btn-m: 1.625rem;
|
||||
--size-btn-l: 2rem;
|
||||
@ -234,6 +236,8 @@
|
||||
--transition-fast: 0.05s ease-in-out;
|
||||
--transition-medium: 0.1s ease-in-out;
|
||||
--transition-slow: 0.25s ease-in-out;
|
||||
--helpers-invert-0: 0;
|
||||
--helpers-invert-1: 1;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@ -340,4 +344,6 @@
|
||||
--clr-theme-warn-outline: var(--clr-core-warn-55);
|
||||
--clr-theme-warn-outline-dark: var(--clr-core-warn-65);
|
||||
--clr-theme-warn-outline-dim: var(--clr-core-warn-60);
|
||||
--helpers-invert-0: 1;
|
||||
--helpers-invert-1: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user