Merge pull request #1130 from TechnologyEnhancedLearning/Develop/Fixes/TD-5608-Radio-buttons-rating-stars-selection-misaligned

TD-5608: Fixed the radiobutton alignment issues

Author: swapnamol-abraham

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue

@@ -125,5 +125,45 @@
         filter: grayscale(0) !important;
     }
 
- 
+    label {
+           display: inline-flex;
+           align-items: center;
+           gap: 5px; /* space between radio and text */
+    }
+    /*Add a background color to the radio button when focused */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow !important;
+        outline: 0;
+        //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+    }
+
+    .radio-button {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 24px;
+        height: 24px;
+        border: 2px solid black;
+        border-radius: 50%;
+        position: relative;
+        cursor: pointer;
+        transition: box-shadow 0.3s;
+        outline: none;
+    }
+
+    /* Yellow glow on focus */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
+    }
+
+    /* Inner black dot when selected */
+    .radio-button:checked::before {
+        content: "";
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 50%;
+    }
 </style>

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue

@@ -610,5 +610,41 @@
            gap: 5px; /* space between radio and text */
            margin: 7px;
     }
-                              
+    /*Add a background color to the radio button when focused */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow !important;
+        outline: 0;
+        //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+    }
+
+    .radio-button {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 24px;
+        height: 24px;
+        border: 2px solid black;
+        border-radius: 50%;
+        position: relative;
+        cursor: pointer;
+        transition: box-shadow 0.3s;
+        outline: none;
+    }
+
+    /* Yellow glow on focus */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
+    }
+
+    /* Inner black dot when selected */
+    .radio-button:checked::before {
+        content: "";
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 50%;
+    }
+                         
 </style>

LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss

@@ -249,39 +249,3 @@ form label.nhsuk-u-visually-hidden {
     box-shadow: 0 0 0 4px $nhsuk-yellow;
 }
 
-/*Add a background color to the radio button when focused */
-.radio-button:focus {
-    box-shadow: 0 0 0 4px $nhsuk-yellow !important;
-    outline: 0;
-    //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
-}
-
-.radio-button {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 24px;
-    height: 24px;
-    border: 2px solid black;
-    border-radius: 50%;
-    position: relative;
-    cursor: pointer;
-    transition: box-shadow 0.3s;
-    outline: none;
-}
-
-/* Yellow glow on focus */
-.radio-button:focus {
-    box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
-}
-
-/* Inner black dot when selected */
-.radio-button:checked::before {
-    content: "";
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 12px;
-    height: 12px;
-    background-color: black;
-    border-radius: 50%;
-}