💄 (switch) change switch lib

package.json

@@ -11,7 +11,6 @@
     "@vue/composition-api": "^1.0.0-beta.1",
     "core-js": "^3.6.5",
     "plyr": "^3.6.2",
-    "pretty-checkbox": "^3.0.3",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="plume">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="120"

src/components/ZoneMusic.vue

@@ -1,21 +1,18 @@
 <template>
   <div class="zone-music">
-    <div class="pretty p-switch p-fill">
+    <div class="pm-field">
-      <div>
+      <label for="use-music" data-pm-holder>
-        <label for="use-music" :class="{ disabled: withMusic }"
+        <span :class="{ disabled: withMusic }">concentré</span>
-          >concentré</label
-        >
-      </div>
         <input
           type="checkbox"
           name="use-music"
           id="use-music"
           :checked="withMusic"
           @change="setWithMusic(!withMusic)"
+          data-pm-checkbox-toggle
         />
-      <div class="state p-success">
+        <span :class="{ disabled: !withMusic }">détente</span>
-        <label for="use-music" :class="{ disabled: !withMusic }">détente</label>
+      </label>
-      </div>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
   </div>
@@ -55,15 +52,16 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
-.pretty {
+label[data-pm-holder] {
   display: flex;
   justify-content: center;
-}
+  margin: auto;
+  max-width: 300px;
 
-label {
+  span {
-  margin: 0 1rem;
+    flex: 1;
+  }
 }
-
 .disabled {
   color: darken($color, 60);
 }

src/styles/app.scss

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
-@import '~pretty-checkbox/src/pretty-checkbox';
 
 @import './variables';
+@import './plume';
 
 body {
   text-align: center;

src/styles/plume.scss

@@ -0,0 +1,172 @@
+:root {
+  --pm-placeholder-color: #999;
+  --pm-form-field-margin-bottom: 32px;
+  --pm-form-caption-font-size: 0.8em;
+  --pm-fieldset-border-style: solid;
+  --pm-fieldset-border-width: 1px;
+  --pm-fieldset-border-color: rgba(127, 127, 127, 0.4);
+  --pm-label-font-size: 1em;
+  --pm-label-font-weight: 600;
+  --pm-label-margin-bottom: 24px;
+  --pm-input-height: 40px;
+  --pm-input-box-shadow: none;
+  --pm-input-padding: 8px 16px;
+  --pm-input-border-style: solid;
+  --pm-input-border-radius: none;
+  --pm-input-border-width: 0 0 2px 0;
+  --pm-input-border-color: rgba(127, 127, 127, 0.4);
+  --pm-input-background-color: rgba(200, 200, 200, 0.1);
+  --pm-input-switch-size: 24px;
+  --pm-input-switch-border-width: 2px;
+  --pm-textarea-padding: 16px;
+  --pm-textarea-min-height: 100px;
+}
+.plume fieldset {
+  padding: 12px;
+  border-style: var(--pm-fieldset-border-style);
+  border-width: var(--pm-fieldset-border-width);
+  border-color: var(--pm-fieldset-border-color);
+  border-radius: var(--pm-input-border-radius);
+}
+.plume fieldset legend {
+  padding: 0 10px;
+  color: var(--pm-primary-color);
+}
+.plume .pm-field,
+.plume fieldset {
+  width: 100%;
+  display: block;
+  margin-bottom: var(--pm-form-field-margin-bottom);
+}
+.plume label,
+.plume legend {
+  display: block;
+  color: var(--pm-app-text-color);
+  font-weight: var(--pm-label-font-weight);
+  margin-bottom: var(--pm-label-margin-bottom);
+}
+.plume label[data-pm-holder],
+.plume legend[data-pm-holder] {
+  font-weight: 300;
+  margin: 0 4px;
+  align-items: center;
+  display: inline-flex;
+  height: var(--pm-input-height);
+}
+.plume label.pm-required::after,
+.plume legend.pm-required::after {
+  content: '*';
+  margin-left: 8px;
+  color: var(--pm-color-error);
+}
+.plume
+  input:not([type='range']):not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),
+.plume textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.plume
+  input:not([type='range']):not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),
+.plume select,
+.plume textarea {
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  height: var(--pm-input-height);
+  padding: var(--pm-input-padding);
+  box-shadow: var(--pm-input-box-shadow);
+  border-style: var(--pm-input-border-style);
+  border-color: var(--pm-input-border-color);
+  border-width: var(--pm-input-border-width);
+  border-radius: var(--pm-input-border-radius);
+  background-color: var(--pm-input-background-color);
+}
+.plume input[type='checkbox'],
+.plume input[type='radio'] {
+  margin: 0 8px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  width: var(--pm-input-switch-size);
+  height: var(--pm-input-switch-size);
+  border: solid var(--pm-input-switch-border-width);
+  border-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox']::before {
+  top: 2px;
+  left: 2px;
+  content: '';
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  background-color: var(--pm-primary-color);
+  height: calc(100% - 4px);
+  width: calc(100% - 4px);
+}
+.plume input[type='checkbox']:checked,
+.plume input[type='radio']:checked {
+  border-color: var(--pm-primary-color);
+}
+.plume input[type='checkbox']:checked::before,
+.plume input[type='radio']:checked::before {
+  opacity: 1;
+  visibility: visible;
+}
+.plume input[type='radio'],
+.plume input[type='radio']:checked::before {
+  border-radius: 100%;
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle] {
+  border-radius: 25px;
+  height: var(--pm-input-switch-size);
+  cursor: pointer;
+  width: calc(var(--pm-input-switch-size) * 2);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]::before {
+  top: 2px;
+  left: 2px;
+  content: '';
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  border-radius: 100%;
+  height: calc(100% - 4px);
+  width: calc(
+    var(--pm-input-switch-size) - (var(--pm-input-switch-border-width) * 2) -
+      4px
+  );
+  background-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]:checked {
+  border-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]:checked::before {
+  content: '';
+  top: 2px;
+  left: calc(var(--pm-input-switch-size) + 2px);
+  background-color: var(--pm-primary-color);
+}
+.plume:not(.pm-no-effects) input[type='checkbox']::after,
+.plume:not(.pm-no-effects) input[type='checkbox']::before {
+  transition: 0.1s;
+}
+.plume:not(.pm-no-effects) [data-pm-success]:not([data-pm-success=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-error]:not([data-pm-error=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-warning]:not([data-pm-warning=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-info]:not([data-pm-info=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}

src/styles/variables.scss

@@ -1,3 +1,8 @@
 $color: #f8efba;
 $bgcolor: #2c3a47;
 $font-family: 'Fira Mono', monospace;
+
+:root {
+  --pm-app-surface-color: #{#2c3a47};
+  --pm-primary-color: #{$color};
+}

yarn.lock

@@ -6855,11 +6855,6 @@ pretty-bytes@^5.1.0:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
   integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
 
-pretty-checkbox@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-checkbox/-/pretty-checkbox-3.0.3.tgz#d49c8013a8fc08ee0c2d6ebde453464bfdbc428e"
-  integrity sha1-1JyAE6j8CO4MLW695FNGS/28Qo4=
-
 pretty-error@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"