diff --git a/changelog/unreleased/enhancement-polish-oc-switch b/changelog/unreleased/enhancement-polish-oc-switch new file mode 100644 index 000000000..287d46c3c --- /dev/null +++ b/changelog/unreleased/enhancement-polish-oc-switch @@ -0,0 +1,6 @@ +Enhancement: Polish OcSwitch + +We've adjusted the OcSwitch to fit the redesign + +https://github.com/owncloud/web/issues/6492 +https://github.com/owncloud/owncloud-design-system/pull/2018 \ No newline at end of file diff --git a/src/components/atoms/OcSwitch/OcSwitch.vue b/src/components/atoms/OcSwitch/OcSwitch.vue index 79495a58f..fa5cc4f81 100644 --- a/src/components/atoms/OcSwitch/OcSwitch.vue +++ b/src/components/atoms/OcSwitch/OcSwitch.vue @@ -76,31 +76,32 @@ export default { gap: var(--oc-space-small); &-btn { - border: 1px solid var(--oc-color-input-border); + border: 1px solid var(--oc-color-input-bg); border-radius: 20px; cursor: pointer; display: block; - height: 16px; + height: 18px; margin: 0; padding: 0; position: relative; transition: background-color 0.25s; - width: 29px; + width: 31px; &::before { - background-color: var(--oc-color-input-bg); + background-color: var(--oc-color-swatch-inverse-hover); + box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px; border-radius: 50%; content: ""; height: 12px; left: 1px; position: absolute; - top: 1px; + top: 2px; transition: transform 0.25s; width: 12px; } &[aria-checked="false"] { - background-color: var(--oc-color-input-text-muted); + background-color: var(--oc-color-swatch-inverse-muted); &::before { transform: translateX(0); @@ -109,7 +110,7 @@ export default { } &[aria-checked="true"] { - background-color: var(--oc-color-input-text-default); + background-color: var(--oc-color-swatch-primary-default); &::before { transform: translateX(calc(100% + 1px));