julien/binome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 (switch) change switch lib

Browse Source
This commit is contained in:
Julien Calixte
2020-07-12 01:12:22 +02:00
parent c5cd14d4f4
commit 0030bda535
7 changed files with 198 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

2
src/App.vue
View File

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

26
src/components/ZoneMusic.vue
View File

@@ -1,21 +1,18 @@
<template>
<div class="zone-music">
<div class="pretty p-switch p-fill">
<div>
<label for="use-music" :class="{ disabled: withMusic }"
>concentré</label
>
</div>
<div class="pm-field">
<label for="use-music" data-pm-holder>
<span :class="{ disabled: withMusic }">concentré</span>
<input
type="checkbox"
name="use-music"
id="use-music"
:checked="withMusic"
@change="setWithMusic(!withMusic)"
data-pm-checkbox-toggle
/>
<div class="state p-success">
<label for="use-music" :class="{ disabled: !withMusic }">détente</label>
</div>
<span :class="{ disabled: !withMusic }">détente</span>
</label>
</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 {
margin: 0 1rem;
span {
flex: 1;
}
}
.disabled {
color: darken($color, 60);
}

2
src/styles/app.scss
View File

@@ -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;

172
src/styles/plume.scss Normal file
View File

@@ -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;
}

5
src/styles/variables.scss
View File

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

5
yarn.lock
View File

@@ -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"