fix: saadeghi#92

Avensen · Jun 5, 2023 · c14f4bd · c14f4bd
1 parent eaf80d3
commit c14f4bd
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 79 deletions.
diff --git a/src/colors/themes.js b/src/colors/themes.js
@@ -337,7 +337,7 @@ module.exports = {
     "--rounded-btn": "0.5rem",
     "--rounded-badge": "1.9rem",
     "--animation-btn": "0.25s",
-    "--animation-input": ".4s",
+    "--animation-input": ".2s",
     "--padding-card": "2rem",
     "--btn-text-case": "uppercase",
     "--btn-focus-scale": "0.95",

diff --git a/src/docs/components/landing/HomepageDemoCheckbox.vue b/src/docs/components/landing/HomepageDemoCheckbox.vue
@@ -6,47 +6,31 @@
         <div class="flex justify-around p-4 space-x-4">
           <label aria-label="checkbox CSS component">
             <input type="checkbox" checked="checked" class="checkbox">
-            <span class="checkbox-mark">
-            </span>
           </label>
           <label aria-label="checkbox CSS component">
             <input type="checkbox" checked="checked" class="checkbox checkbox-primary">
-            <span class="checkbox-mark">
-            </span>
           </label>
           <label aria-label="checkbox CSS component">
             <input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
-            <span class="checkbox-mark">
-            </span>
           </label>
           <label aria-label="checkbox CSS component">
             <input type="checkbox" checked="checked" class="checkbox checkbox-accent">
-            <span class="checkbox-mark">
-            </span>
           </label>
         </div>
       </PromoDropdown>
       <PromoDropdown title="radio" desc="Colorful, animated and accessible" classes="dropdown-end w-full" link="components/form/radio">
         <div class="flex justify-around p-4 space-x-4">
           <label aria-label="radio CSS component">
             <input type="radio" name="opt" class="radio">
-            <span class="radio-mark">
-            </span>
           </label>
           <label aria-label="radio CSS component">
             <input type="radio" name="opt" class="radio radio-primary">
-            <span class="radio-mark">
-            </span>
           </label>
           <label aria-label="radio CSS component">
             <input type="radio" name="opt" class="radio radio-secondary">
-            <span class="radio-mark">
-            </span>
           </label>
           <label aria-label="radio CSS component">
             <input type="radio" name="opt" class="radio radio-accent">
-            <span class="radio-mark">
-            </span>
           </label>
         </div>
       </PromoDropdown>

diff --git a/src/docs/components/landing/HomepageDemoToggle.vue b/src/docs/components/landing/HomepageDemoToggle.vue
@@ -8,41 +8,25 @@
       <PromoDropdown title="toggle" desc="Use toggle to switch between two states" classes="flex-1 w-full" link="components/form/toggle"><div class="form-control">
         <label class="cursor-pointer label">
           <span class="label-text">Enable teleportation</span>
-          <div>
-            <input type="checkbox" checked="checked" class="toggle toggle-primary">
-            <span class="toggle-mark">
-            </span>
-          </div>
+          <input type="checkbox" checked="checked" class="toggle toggle-primary">
         </label>
       </div>
       <div class="form-control">
         <label class="cursor-pointer label">
           <span class="label-text">Enable time travel</span>
-          <div>
-            <input type="checkbox" checked="checked" class="toggle toggle-secondary">
-            <span class="toggle-mark">
-            </span>
-          </div>
+          <input type="checkbox" checked="checked" class="toggle toggle-secondary">
         </label>
       </div>
       <div class="form-control">
         <label class="cursor-pointer label">
           <span class="label-text">Enable laser eyes</span>
-          <div>
-            <input type="checkbox" checked="checked" class="toggle toggle-accent">
-            <span class="toggle-mark">
-            </span>
-          </div>
+          <input type="checkbox" checked="checked" class="toggle toggle-accent">
         </label>
       </div>
       <div class="form-control">
         <label class="cursor-pointer label">
           <span class="label-text">Enable immortality</span>
-          <div>
-            <input type="checkbox" checked="checked" class="toggle">
-            <span class="toggle-mark">
-            </span>
-          </div>
+          <input type="checkbox" checked="checked" class="toggle">
         </label>
       </div>
       </PromoDropdown>

diff --git a/src/docs/components/ui/Checkbox.vue b/src/docs/components/ui/Checkbox.vue
@@ -1,8 +1,5 @@
 <template>
-  <div>
-    <input type="checkbox" class="checkbox" :class="classes" checked />
-    <span class="checkbox-mark"></span>
-  </div>
+  <input type="checkbox" class="checkbox" :class="classes" checked />
 </template>
 
 <script>

diff --git a/src/docs/components/ui/Radio.vue b/src/docs/components/ui/Radio.vue
@@ -1,8 +1,5 @@
 <template>
-  <div>
-    <input type="radio" class="radio" :class="classes" :name="name" :value="value" checked />
-    <span class="radio-mark"></span>
-  </div>
+  <input type="radio" class="radio" :class="classes" :name="name" :value="value" checked />
 </template>
 
 <script>

diff --git a/src/docs/components/ui/Toggle.vue b/src/docs/components/ui/Toggle.vue
@@ -1,8 +1,5 @@
 <template>
-  <div>
-    <input type="checkbox" class="toggle" :class="classes" checked />
-    <span class="toggle-mark"></span>
-  </div>
+  <input type="checkbox" class="toggle" :class="classes" checked />
 </template>
 
 <script>

diff --git a/src/docs/pages/components/form/checkbox.vue b/src/docs/pages/components/form/checkbox.vue
@@ -4,7 +4,6 @@
       components : [
         { class: 'form-control', desc: 'Container element' },
         { class: 'checkbox', desc: 'For checkbox' },
-        { class: 'checkbox-mark', desc: 'For span that coms after checkbox' },
       ],
       utilities : [
         { class: 'checkbox-primary', desc: 'Adds `primary` to checkbox' },
@@ -13,6 +12,9 @@
       ]
     }"/>
     <Wrapper title="checkbox" classes="flex flex-col space-y-2 max-w-xs">
+      <Checkbox/>
+    </Wrapper>
+    <Wrapper title="checkbox with label and container" classes="flex flex-col space-y-2 max-w-xs">
       <div class="p-6 card bordered">
         <FormControl>
           <label class="cursor-pointer label">
@@ -58,14 +60,12 @@
           <label class="label">
             <span class="label-text">Disabled + unchecked</span>
             <input type="checkbox" class="checkbox" disabled>
-            <span class="checkbox-mark"></span>
           </label>
         </FormControl>
         <FormControl>
           <label class="label">
             <span class="label-text">Disabled + checked</span>
             <input type="checkbox" checked="checked" class="checkbox" disabled>
-            <span class="checkbox-mark"></span>
           </label>
         </FormControl>
       </div>

diff --git a/src/docs/pages/components/form/radio.vue b/src/docs/pages/components/form/radio.vue
@@ -4,7 +4,6 @@
       components : [
         { class: 'form-control', desc: 'Container element' },
         { class: 'radio', desc: 'For radio input' },
-        { class: 'radio-mark', desc: 'For span that coms after radio input' },
       ],
       utilities : [
         { class: 'radio-primary', desc: 'Adds `primary` to radio' },
@@ -45,8 +44,7 @@
         <FormControl>
           <label class="label">
             <span class="label-text">Disabled</span>
-            <input type="radio" name="opt" checked="checked" class="radio radio-accent" value="" disabled>
-            <span class="radio-mark"></span>
+            <input type="radio" name="opt" checked="checked" class="radio" value="" disabled>
           </label>
         </FormControl>
       </div>

diff --git a/src/docs/pages/components/form/toggle.vue b/src/docs/pages/components/form/toggle.vue
@@ -4,7 +4,6 @@
       components : [
         { class: 'form-control', desc: 'Container element' },
         { class: 'toggle', desc: 'For checkbox' },
-        { class: 'toggle-mark', desc: 'For span that coms after checkbox' },
       ],
       utilities : [
         { class: 'toggle-primary', desc: 'Adds `primary` to toggle' },
@@ -13,6 +12,9 @@
       ]
     }"/>
     <Wrapper title="toggle" classes="flex flex-col space-y-2 max-w-xs">
+      <Toggle/>
+    </Wrapper>
+    <Wrapper title="toggle with label and container" classes="flex flex-col space-y-2 max-w-xs">
       <div class="p-6 card bordered">
         <FormControl>
           <label class="cursor-pointer label">
@@ -57,19 +59,13 @@
         <FormControl>
           <label class="label">
             <span class="label-text">Unchecked + Disabled</span>
-            <div>
-              <input type="checkbox" class="toggle" :class="classes" disabled="disabled" />
-              <span class="toggle-mark"></span>
-            </div>
+            <input type="checkbox" class="toggle" :class="classes" disabled="disabled" />
           </label>
         </FormControl>
         <FormControl>
           <label class="label">
             <span class="label-text">Checked + Disabled</span>
-            <div>
-              <input type="checkbox" class="toggle" :class="classes" checked disabled="disabled" />
-              <span class="toggle-mark"></span>
-            </div>
+            <input type="checkbox" class="toggle" :class="classes" checked disabled="disabled" />
           </label>
         </FormControl>
       </div>

diff --git a/src/docs/pages/components/table.vue b/src/docs/pages/components/table.vue
@@ -93,7 +93,6 @@
               <th>
                 <label>
                   <input type="checkbox" class="checkbox">
-                  <span class="checkbox-mark"></span>
                 </label>
               </th>
               <th>Name</th>
@@ -107,7 +106,6 @@
               <th>
                 <label>
                   <input type="checkbox" class="checkbox">
-                  <span class="checkbox-mark"></span>
                 </label>
               </th>
               <td>

diff --git a/src/docs/pages/core/colors.vue b/src/docs/pages/core/colors.vue
@@ -21,11 +21,11 @@
 
 
 
-<div class="tabs mb-6 mt-10">
+<div class="mt-10 mb-6 tabs">
   <button v-on:click="activeTab = 'colors'"  v-bind:class="{'tab-active': activeTab == 'colors'}" class="tab tab-lifted tab-lg">Customize</button>
   <button v-on:click="activeTab = 'preview'"  v-bind:class="{'tab-active': activeTab == 'preview'}" class="tab tab-lifted tab-lg">Preview</button>
   <button v-on:click="activeTab = 'output'"  v-bind:class="{'tab-active': activeTab == 'output'}" class="tab tab-lifted tab-lg">Result</button>
-  <span class="tab tab-lifted tab-lg flex-grow cursor-default hidden sm:block"></span>
+  <span class="flex-grow hidden cursor-default tab tab-lifted tab-lg sm:block"></span>
 </div>
 
 
@@ -40,10 +40,7 @@
     <div class="form-control">
       <label class="cursor-pointer label">
         <span class="label-text">Show customized colors</span>
-        <div>
-          <input type="checkbox" checked="checked" class="toggle toggle-primary" v-model="applyCustomThemeToSite">
-          <span class="toggle-mark"></span>
-        </div>
+        <input type="checkbox" checked="checked" class="toggle toggle-primary" v-model="applyCustomThemeToSite">
       </label>
     </div>
   </div>
@@ -340,7 +337,7 @@
 <div class="text-xl font-bold text-base-content">Theme config</div>
 <div class="mb-6">This is your custom color theme. Add it to tailwind.config.js</div>
 <div class="w-full max-w-2xl my-2">
-  <div class="shadow-lg mockup-code text-sm">
+  <div class="text-sm shadow-lg mockup-code">
   <pre><code>daisyui: {
     themes: [
       {
@@ -371,7 +368,7 @@
       <br/>
       These are default utility classes that use color names:
 
-      <div class="shadow-lg mockup-code text-sm mt-6">
+      <div class="mt-6 text-sm shadow-lg mockup-code">
         <pre>
   <code>bg-<span class="text-info">{COLOR_NAME}</span></span>
     text-<span class="text-info">{COLOR_NAME}</span>

diff --git a/src/docs/pages/docs/add-themes.vue b/src/docs/pages/docs/add-themes.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
 
-    <div class="tabs mb-10">
-      <NuxtLink to="/docs/default-themes" class="tab tab-lifted tab-lg"><Icon glyph="color-swatch" class="inline-block w-4 h-4 lg:w-6 w-4 h-4 lg:h-6 mr-2 stroke-current" />Use themes</NuxtLink>
-      <NuxtLink to="/docs/add-themes" class="tab tab-lifted tab-lg tab-active"><Icon glyph="document-add" class="inline-block w-4 h-4 lg:w-6 w-4 h-4 lg:h-6 mr-2 stroke-current" />Add theme</NuxtLink>
-      <span class="tab tab-lifted tab-lg flex-grow cursor-default hidden sm:block"></span>
+    <div class="mb-10 tabs">
+      <NuxtLink to="/docs/default-themes" class="tab tab-lifted tab-lg"><Icon glyph="color-swatch" class="inline-block w-4 h-4 mr-2 stroke-current lg:w-6 lg:h-6" />Use themes</NuxtLink>
+      <NuxtLink to="/docs/add-themes" class="tab tab-lifted tab-lg tab-active"><Icon glyph="document-add" class="inline-block w-4 h-4 mr-2 stroke-current lg:w-6 lg:h-6" />Add theme</NuxtLink>
+      <span class="flex-grow hidden cursor-default tab tab-lifted tab-lg sm:block"></span>
     </div>
 
     <h2 class="my-6 text-5xl font-bold">
@@ -65,7 +65,7 @@
     '--rounded-badge': '1.9rem',    <span class="text-neutral-content text-opacity-20">/* border-radius for badge and other small elements */</span>
 
     '--animation-btn': '0.25s',     <span class="text-neutral-content text-opacity-20">/* bounce animation time for button */</span>
-    '--animation-input': '.4s',     <span class="text-neutral-content text-opacity-20">/* bounce animation time for checkbox, toggle, etc */</span>
+    '--animation-input': '.2s',     <span class="text-neutral-content text-opacity-20">/* bounce animation time for checkbox, toggle, etc */</span>
 
     '--padding-card': '2rem',       <span class="text-neutral-content text-opacity-20">/* default card-body padding */</span>