diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css new file mode 100644 index 0000000..e7ffbef --- /dev/null +++ b/src/components/Input/Input.module.css @@ -0,0 +1,79 @@ +.input { + height: 2.5rem; + width: 100%; + border: 1px solid #28123e; /* border-primary */ + border-radius: 3px; + padding-top: 0.25rem; + padding-inline: 0.5rem; + color: #28123e; /* text-primary */ + background: white; +} + +.polkadot { + composes: input; + padding-right: 2.5rem; + background: + url(coin.svg) no-repeat center right 7px/20px, + url(bar.svg) no-repeat center right 35px; + background-color: white; +} + +.switch { + --width: 52px; + --height: 26px; + --offset: 2px; + --knob: calc(var(--height) - var(--offset) * 2); + + appearance: none; + cursor: pointer; + margin: 0; + padding: 0; + display: inline-grid; + flex-shrink: 0; + inline-size: var(--width); + block-size: var(--height); + place-items: center; + position: relative; +} + +.switch[data-inverted='true'] { + --toggle-background: rgba(101, 112, 139, 0.5); + --switch-background: theme('colors.white'); + --switch-checked-background: theme('colors.childBountyGray'); +} + +.switchInverted { + composes: switch; + --toggle-background: rgba(101, 112, 139, 0.5); + --switch-background: theme('colors.white'); + --switch-checked-background: theme('colors.childBountyGray'); +} + +.switch::before { + content: ''; + display: block; + inline-size: var(--width); + block-size: var(--height); + border-radius: calc(var(--height) / 2); + background: var(--toggle-background, white); + position: absolute; +} + +.switch::after { + display: block; + background-color: var(--switch-background, theme('colors.curatorMainBackground')); + content: ''; + inline-size: var(--knob); + block-size: var(--knob); + border-radius: 50%; + position: absolute; + inset-inline-start: var(--offset); + transition: + left 0.3s, + background-color 0.3s; +} + +.switch:checked::after { + background: var(--switch-checked-background, theme('colors.accent')); + inset-inline-start: calc(var(--width) - var(--knob) - var(--offset)); +} diff --git a/src/components/Input/bar.svg b/src/components/Input/bar.svg new file mode 100644 index 0000000..211f65e --- /dev/null +++ b/src/components/Input/bar.svg @@ -0,0 +1 @@ + diff --git a/src/components/svg/PolkaCoin.svg b/src/components/Input/coin.svg similarity index 100% rename from src/components/svg/PolkaCoin.svg rename to src/components/Input/coin.svg diff --git a/src/components/ToggleIcon.svelte b/src/components/ToggleIcon.svelte deleted file mode 100644 index 2c7cb5d..0000000 --- a/src/components/ToggleIcon.svelte +++ /dev/null @@ -1,61 +0,0 @@ - - - - - diff --git a/src/components/curator-actions/child-bounties/operations/AcceptSubCuratorRole.svelte b/src/components/curator-actions/child-bounties/operations/AcceptSubCuratorRole.svelte index d0f4946..99c83bb 100644 --- a/src/components/curator-actions/child-bounties/operations/AcceptSubCuratorRole.svelte +++ b/src/components/curator-actions/child-bounties/operations/AcceptSubCuratorRole.svelte @@ -1,6 +1,6 @@