Refactor form controls: remove unnecessary icons from checkboxes and radios for a cleaner design, and adjust checkbox and radio input classes for improved spacing.

Author: azadshaikh

src/html/pages/forms/form-controls.astro

@@ -338,7 +338,6 @@ const formCheckboxesAndRadios = `<div class="row g-3">
                 <input class="form-check-input mt-0" type="checkbox" id="inputGroupCheckbox">
             </div>
             <input type="text" class="form-control" placeholder="Checkbox with input">
-            <span class="input-group-text"><i class="ri-checkbox-line"></i></span>
         </div>
     </div>
     <div class="col-md-6">
@@ -347,7 +346,6 @@ const formCheckboxesAndRadios = `<div class="row g-3">
                 <input class="form-check-input mt-0" type="radio" id="inputGroupRadio">
             </div>
             <input type="text" class="form-control" placeholder="Radio with input">
-            <span class="input-group-text"><i class="ri-radio-button-line"></i></span>
         </div>
     </div>
 </div>`;

src/html/pages/forms/radio-checkbox.astro

@@ -233,7 +233,7 @@ const bootstrapBasicOptions = `<div class="row g-4">
     <div class="card mb-3">
       <div class="card-body">
         <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="discountOffer" checked>
+          <input class="form-check-input me-2" type="checkbox" id="discountOffer" checked>
           <label class="form-check-label w-100" for="discountOffer">
             <div class="d-flex justify-content-between align-items-center">
               <div>
@@ -249,7 +249,7 @@ const bootstrapBasicOptions = `<div class="row g-4">
     <div class="card">
       <div class="card-body">
         <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="updateOffer">
+          <input class="form-check-input me-2" type="checkbox" id="updateOffer">
           <label class="form-check-label w-100" for="updateOffer">
             <div class="d-flex justify-content-between align-items-center">
               <div>
@@ -269,7 +269,7 @@ const bootstrapBasicOptions = `<div class="row g-4">
     <div class="card mb-3">
       <div class="card-body">
         <div class="form-check">
-          <input class="form-check-input" type="radio" name="pricingRadio" id="basicPlan" checked>
+          <input class="form-check-input me-2" type="radio" name="pricingRadio" id="basicPlan" checked>
           <label class="form-check-label w-100" for="basicPlan">
             <div class="d-flex justify-content-between align-items-center">
               <div>
@@ -285,7 +285,7 @@ const bootstrapBasicOptions = `<div class="row g-4">
     <div class="card">
       <div class="card-body">
         <div class="form-check">
-          <input class="form-check-input" type="radio" name="pricingRadio" id="premiumPlan">
+          <input class="form-check-input me-2" type="radio" name="pricingRadio" id="premiumPlan">
           <label class="form-check-label w-100" for="premiumPlan">
             <div class="d-flex justify-content-between align-items-center">
               <div>

src/html/pages/forms/select.astro

@@ -32,7 +32,6 @@ const basicSelectControls = `<div class="row g-3">
     </div>
     <div class="col-md-4">
         <div class="input-group">
-            <span class="input-group-text"><i class="ri-service-line"></i></span>
             <select class="form-select rounded-pill">
                 <option selected>Choose Service</option>
                 <option value="web-dev">Web Development <i class="ri-code-line"></i></option>
@@ -353,7 +352,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Basic Select Controls -->
           <div class="my-3">
             <h2 class="mb-0" id="basic-select">
-              <i class="ri-list-settings-line me-2"></i>Basic Select Controls
+              Basic Select Controls
             </h2>
             <p class="py-2">
               Enhanced select controls with intuitive visual feedback:
@@ -376,7 +375,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Select Size Variations -->
           <div class="my-3">
             <h2 class="mb-0" id="select-sizing">
-              <i class="ri-font-size-2 me-2"></i>Size Variations
+              Size Variations
             </h2>
             <p class="py-2">
               Flexible sizing options to match your design needs:
@@ -399,7 +398,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Multiple Selection -->
           <div class="my-3">
             <h2 class="mb-0" id="multiple-select">
-              <i class="ri-checkbox-multiple-line me-2"></i>Multiple Selection
+              Multiple Selection
             </h2>
             <p class="py-2">
               Various approaches for handling multiple selections:
@@ -425,7 +424,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Grouped Options -->
           <div class="my-3">
             <h2 class="mb-0" id="grouped-options">
-              <i class="ri-folder-line me-2"></i>Grouped Options
+              Grouped Options
             </h2>
             <p class="py-2">
               Organize options into logical categories:
@@ -446,7 +445,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Floating Labels -->
           <div class="my-3">
             <h2 class="mb-0" id="floating-labels">
-              <i class="ri-price-tag-3-line me-2"></i>Floating Labels
+              Floating Labels
             </h2>
             <p class="py-2">
               Modern form controls with animated labels:
@@ -468,7 +467,7 @@ const styledSelectControls = `<div class="row g-3">
           <!-- Styled Select -->
           <div class="my-3">
             <h2 class="mb-0" id="styled-select">
-              <i class="ri-brush-line me-2"></i>Styled Select
+              Styled Select
             </h2>
             <p class="py-2">
               Enhanced visual styles for select controls:

src/scss/components/forms/_form-control.scss

@@ -27,9 +27,7 @@ $form-control-textarea-padding: 0.5rem !default;
   }
 
   &:focus {
-    margin: -1px; // Compensate for the increased border width
     border-color: var(--bs-primary);
-    border-width: 2px;
   }
 }
 

src/scss/components/forms/_form-select.scss

@@ -25,9 +25,7 @@ $form-select-padding: 0.275rem 0.5rem !default;
   }
 
   &:focus {
-    margin: -1px; // Compensate for the increased border width
     border-color: var(--bs-primary);
-    border-width: 2px;
   }
 }