feat: add radio button

Author: MaxLardenois

scss/_variables.scss

@@ -1071,7 +1071,7 @@ $form-check-label-cursor:                 pointer !default; // OUDS mod: instead
 // ouds mod: no `$form-check-input-color`
 // OUDS mod: no `$form-check-input-border`
 $form-check-input-border-radius:          $ouds-checkbox-border-radius !default; // OUDS mod: instead of `0`
-// OUDS mod: no `$form-check-radio-border-radius`
+$form-check-radio-border-radius:          $ouds-radio-button-border-radius !default; // OUDS mod: instead of `0`
 // OUDS mod: no `$form-check-input-focus-border`
 // OUDS mod: no `$form-check-input-focus-box-shadow`
 
@@ -1087,13 +1087,21 @@ $ouds-checkbox-calc-border-width-indeterminate: calc(strip-units($ouds-checkbox-
 $ouds-checkbox-calc-width-indeterminate: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
 $ouds-checkbox-calc-border-width-selected: calc(strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
 $ouds-checkbox-calc-width-selected: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+
+$ouds-radio-button-calc-multiplicator: 2 !default; // Here to avoid float numbers in svg
+$ouds-radio-button-calc-viewbox: calc(strip-units($ouds-radio-button-size-indicator) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+$ouds-radio-button-calc-border-radius: calc(strip-units($form-check-radio-border-radius) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+$ouds-radio-button-calc-border-width-unselected: calc(strip-units($ouds-radio-button-border-width-unselected) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+$ouds-radio-button-calc-width-unselected: calc($ouds-radio-button-calc-viewbox - strip-units($ouds-radio-button-border-width-unselected) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+$ouds-radio-button-calc-border-width-selected: calc(strip-units($ouds-radio-button-border-width-selected) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
+$ouds-radio-button-calc-width-selected: calc($ouds-radio-button-calc-viewbox - strip-units($ouds-radio-button-border-width-selected) * $ouds-radio-button-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
 // End mod
 
 // OUDS mod: no `$form-check-input-checked-color`
 // OUDS mod: no `$form-check-input-checked-bg-color`
 // OUDS mod: no `$form-check-input-checked-border-color`
 $form-check-input-checked-bg-image:       "<svg viewBox='0 0 20 20' width='#{$ouds-checkbox-calc-viewbox}' height='#{$ouds-checkbox-calc-viewbox}' x='0' y='0'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>" !default; // OUDS mod: custom SVG
-// OUDS mod: no `$form-check-radio-checked-bg-image`
+$form-check-radio-checked-bg-image:       "<svg viewBox='0 0 20 20' width='#{$ouds-radio-button-calc-viewbox}' height='#{$ouds-radio-button-calc-viewbox}' x='0' y='0'><path fill='#000' d='M14.0635 10C14.0635 12.2437 12.2446 14.0625 10.001 14.0625C7.75732 14.0625 5.93848 12.2437 5.93848 10C5.93848 7.75634 7.75732 5.9375 10.001 5.9375C12.2446 5.9375 14.0635 7.75634 14.0635 10Z'/></svg>" !default; // OUDS mod: custom SVG
 
 // OUDS mod: no `$form-check-input-indeterminate-color`
 // OUDS mod: no `$form-check-input-indeterminate-bg-color`
@@ -1111,6 +1119,9 @@ $ouds-checkbox-unselected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
 $ouds-checkbox-unselected-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-unselected-hover / 2)}' y='#{calc($ouds-checkbox-calc-border-width-unselected-hover / 2)}' width='#{$ouds-checkbox-calc-width-unselected-hover}' height='#{$ouds-checkbox-calc-width-unselected-hover}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-unselected-hover}'/></svg>") !default;
 $ouds-checkbox-selected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-selected / 2)}' y='#{calc($ouds-checkbox-calc-border-width-selected / 2)}' width='#{$ouds-checkbox-calc-width-selected}' height='#{$ouds-checkbox-calc-width-selected}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-selected}'/>#{$form-check-input-checked-bg-image}</svg>") !default;
 $ouds-checkbox-indeterminate-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-indeterminate / 2)}' y='#{calc($ouds-checkbox-calc-border-width-indeterminate / 2)}' width='#{$ouds-checkbox-calc-width-indeterminate}' height='#{$ouds-checkbox-calc-width-indeterminate}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-indeterminate}'/>#{$form-check-input-indeterminate-bg-image}</svg>") !default;
+
+$ouds-radio-button-unselected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-radio-button-calc-viewbox} #{$ouds-radio-button-calc-viewbox}'><rect x='#{calc($ouds-radio-button-calc-border-width-unselected / 2)}' y='#{calc($ouds-radio-button-calc-border-width-unselected / 2)}' width='#{$ouds-radio-button-calc-width-unselected}' height='#{$ouds-radio-button-calc-width-unselected}' rx='#{$ouds-radio-button-calc-border-radius}' ry='#{$ouds-radio-button-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-radio-button-calc-border-width-unselected}'/></svg>") !default;
+$ouds-radio-button-selected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-radio-button-calc-viewbox} #{$ouds-radio-button-calc-viewbox}'><rect x='#{calc($ouds-radio-button-calc-border-width-selected / 2)}' y='#{calc($ouds-radio-button-calc-border-width-selected / 2)}' width='#{$ouds-radio-button-calc-width-selected}' height='#{$ouds-radio-button-calc-width-selected}' rx='#{$ouds-radio-button-calc-border-radius}' ry='#{$ouds-radio-button-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-radio-button-calc-border-width-selected}'/>#{$form-check-radio-checked-bg-image}</svg>") !default;
 // End mod
 
 // OUDS mod: Star rating

scss/forms/_control-item.scss

@@ -141,6 +141,10 @@
     mask: escape-svg($ouds-checkbox-unselected-icon);
   }
 
+  &[type="radio"] {
+    mask: escape-svg($ouds-radio-button-unselected-icon);
+  }
+
   &:hover,
   &:focus-visible,
   &:active {
@@ -163,6 +167,10 @@
     &[type="checkbox"] {
       mask: escape-svg($ouds-checkbox-selected-icon);
     }
+
+    &[type="radio"] {
+      mask: escape-svg($ouds-radio-button-selected-icon);
+    }
   }
 
   &:hover {
@@ -201,7 +209,6 @@
   min-height: $ouds-checkbox-size-min-height;
 }
 
-
 //
 // Checkbox
 //
@@ -214,6 +221,18 @@
   @extend %control-item-standalone;
 }
 
+//
+// Radio button
+//
+
+.radio-button-item {
+  @extend %control-item;
+}
+
+.radio-button-standalone {
+  @extend %control-item-standalone;
+}
+
 //
 // Bootstrap compatibility
 //