diff --git a/assets/styles/base.less b/assets/styles/base.less index 1a47353821..3bb9d506c1 100644 --- a/assets/styles/base.less +++ b/assets/styles/base.less @@ -232,25 +232,22 @@ button { .switch-container { .switch-button-control { .switch-button { + border: 0.125rem solid var(--flair-color); + box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33); + .sw-button { - border: 2px solid var(--flair-color); &:extend(.background-flair); + &:extend(.switch-off-glow-flair); } - border: 2px solid var(--flair-color); - box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33); - } - .switch-button.enabled { - &:extend(.background-flair); - &:extend(.glow-flair); - .sw-button { - background: @white !important; - } - } + &.enabled { + &:extend(.background-flair); + &:extend(.glow-flair); - .switch-button { - .sw-button { - &:extend(.switch-off-glow-flair); + .sw-button { + border: 0.2rem solid var(--flair-color); + background: @white !important; + } } } } diff --git a/components/interactables/Switch/Switch.html b/components/interactables/Switch/Switch.html index 38adeaf634..123d4f4bbf 100644 --- a/components/interactables/Switch/Switch.html +++ b/components/interactables/Switch/Switch.html @@ -1,6 +1,10 @@
-
+
diff --git a/components/interactables/Switch/Switch.less b/components/interactables/Switch/Switch.less index ed30b2156b..d9c10698dd 100644 --- a/components/interactables/Switch/Switch.less +++ b/components/interactables/Switch/Switch.less @@ -1,45 +1,71 @@ .switch-container { + display: inline-flex; + align-content: flex-end; + margin: @light-spacing 0; + align-items: center; + .is-small { transform: scale(0.75); transform-origin: 0; } + .switch-label { display: inline-block; margin-left: 10px; padding-top: 3px; } + .is-small-label { padding-top: 4.5px; margin-left: -5px; font-size: 12px; } + .switch-button-control { + display: inline-block; + .switch-button { - .sw-button { - height: calc(1.6em - (2 * 2px)); - width: calc(1.6em - (2 * 2px)); - border-radius: calc(1.6em - (2 * 2px)); - transition: all @animation-speed-micro ease-in-out; - } - height: 1.6em; - width: calc(1.6em * 2); - border-radius: 1.6em; + position: relative; + height: 1.6rem; + width: calc(1.6rem * 2); + border-radius: 1.6rem; transition: all @animation-speed-micro ease-in-out; cursor: pointer; - } - .switch-button.enabled { + .sw-button { - transform: translateX(calc(calc(1.6em - (2 * 2px)) + (2 * 2px))); + position: absolute; + top: 50%; + height: calc(1.6rem - (2 * 0.125rem) - 0.125rem); + width: calc(1.6rem - (2 * 0.125rem) - 0.125rem); + border-radius: calc(1.6rem - (2 * 0.125rem) - 0.125rem); + transition: transform @animation-speed-micro ease-in-out; + transform: translateY(-50%) translateX(1px); + } + + &.enabled { + box-shadow: none; + + .sw-button { + height: calc(1.6rem - (2 * 0.125rem)); + width: calc(1.6rem - (2 * 0.125rem)); + border-radius: calc(1.6rem - (2 * 0.125rem)); + transform: translateY(-50%) + translateX(calc(calc(1.6rem - (2 * 0.125rem)) + (2 * 0.125rem))); + } + } + + &.locked { + border-color: @gray; + .sw-button { + border-color: @gray; + background: @gray !important; + box-shadow: -5px 0px 20px -2px @gray !important; + } } - box-shadow: none; } + .switch-button-label { margin-left: 10px; } - display: inline-block; } - display: inline-flex; - align-content: flex-end; - margin: @light-spacing 0; - align-items: center; } diff --git a/components/interactables/Switch/Switch.vue b/components/interactables/Switch/Switch.vue index c152d35ef2..5de1f56949 100644 --- a/components/interactables/Switch/Switch.vue +++ b/components/interactables/Switch/Switch.vue @@ -34,6 +34,15 @@ export default Vue.extend({ required: false, default: '', }, + + /** + * If provided the button would appear as disabled and non interactable + */ + isLocked: { + type: Boolean, + required: false, + default: false, + }, }, methods: { /** @@ -42,7 +51,9 @@ export default Vue.extend({ * @example */ toggle() { - this.$emit('toggle', !this.isEnabled) + if (!this.isLocked) { + this.$emit('toggle', !this.isEnabled) + } }, }, }) diff --git a/components/views/settings/pages/privacy/Privacy.html b/components/views/settings/pages/privacy/Privacy.html index 5ba4552cb1..735b1a44b9 100644 --- a/components/views/settings/pages/privacy/Privacy.html +++ b/components/views/settings/pages/privacy/Privacy.html @@ -11,7 +11,7 @@ :title="$t('pages.privacy.register.title')" :text="$t('pages.privacy.register.subtitle')" > - +