@pinuts/bsr-uikit-relaunch 0.2.64 → 0.2.65

package/dist/styles/_form.scss

@@ -1,25 +1,28 @@
 @use "sass:math";
 @import "./variables/_variables.scss";
 
+@function to-rem($size) {
+  @return math.div($size, 16px) * 1rem;
+}
+
 /* GENERAL INPUT STYLES v0.1*/
 #addressSelector {
-    display: flex;
-    flex-direction: column;
-    font-family: $fontfamily-base;
+  display: flex;
+  flex-direction: column;
+  font-family: $fontfamily-base;
 
-    .row .col:has(input):not(:has(fieldset)) { 
-        margin-bottom: $base-gap * 10; 
-    }
-    .row .col.checkAddressBtn, 
-    .row .col.plzSelectAddressBtn,
-    .row .col:not(.plzSelectAddressBtn) > .btn-secondary 
-    {
-        margin-top: $base-gap * 10;
-    }
+  .row .col:has(input):not(:has(fieldset)) {
+    margin-bottom: $base-gap * 10;
+  }
+  .row .col.checkAddressBtn,
+  .row .col.plzSelectAddressBtn,
+  .row .col:not(.plzSelectAddressBtn) > .btn-secondary {
+    margin-top: $base-gap * 10;
+  }
 
-    .row .col fieldset.formInput:has(ul.groupInputList) {
-        margin-bottom: 0;
-    }
+  .row .col fieldset.formInput:has(ul.groupInputList) {
+    margin-bottom: 0;
+  }
 }
 
 #addressSelector .topRow,
@@ -38,7 +41,7 @@
     font-weight: $fontweight-bold;
     line-height: $input-label-line-height;
     letter-spacing: $letter-spacing-xs;
-    color: $bsr-grey-100;
+    color: $bsr-black-90;
     margin-bottom: 0;
 
     .required {
@@ -263,6 +266,8 @@ fieldset.formInput {
       input[type="radio"] + label.label {
         padding-left: 0 !important;
         font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
+        font-weight: 700 !important;
+        font-size: to-rem(14px);
       }
 
       &::before {
@@ -559,8 +564,8 @@ form input[type="checkbox"] + label:before {
   }
 }
 
-.selectGroup-events, .event-picker {
-
+.selectGroup-events,
+.event-picker {
   .location-picker-text {
     font-family: $fontfamily-base;
     font-size: $inputField-font-size;
@@ -573,6 +578,7 @@ form input[type="checkbox"] + label:before {
     align-items: center;
     justify-content: space-between;
     color: $bsr-black-90;
+    font-family: $fontfamily-heading;
   }
   .pi-info {
     display: flex;
@@ -582,73 +588,79 @@ form input[type="checkbox"] + label:before {
     gap: 0;
     padding-left: 0;
 
-    li:before, li::marker {
+    li:before,
+    li::marker {
       display: none;
-      content: '';
+      content: "";
     }
   }
 }
 
 fieldset legend {
-     h2, h3, h4 {
-        font-family: $fontfamily-base;
-        color: $bsr-black-90 !important;
-    }
-}
-
-fieldset.fieldsetLegend legend, .pi-title {
-
-    h2, h3, h4 {
-        font-family: $fontfamily-base;
-        font-size: $h3-fontsize;
-        line-height: $h3-lineheight;
-        font-weight: $fontweight-bold;
-        color: $bsr-black-90;
-    }
+  h2,
+  h3,
+  h4 {
+    font-family: $fontfamily-base;
+    color: $bsr-black-90 !important;
+  }
 }
 
-div.form-label {
+fieldset.fieldsetLegend legend,
+.pi-title {
+  h2,
+  h3,
+  h4 {
     font-family: $fontfamily-base;
-    font-size: $input-label-font-size;
-    line-height: $input-label-line-height;
-    color: $bsr-black-90;
+    font-size: $h3-fontsize;
+    line-height: $h3-lineheight;
     font-weight: $fontweight-bold;
-}   
+    color: $bsr-black-90;
+  }
+}
 
+div.form-label {
+  font-family: $fontfamily-base;
+  font-size: $input-label-font-size;
+  line-height: $input-label-line-height;
+  color: $bsr-black-90;
+  font-weight: $fontweight-bold;
+}
 
 fieldset.formInput:has(.topRow):has(input[type="checkbox"]):not(:has(input[name="agb"])) {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: baseline;
-    justify-content: start;
-    gap: $base-gap * 4; 
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: baseline;
+  justify-content: start;
+  gap: $base-gap * 4;
 }
 input[name="agb"] + label {
-    font-family: $fontfamily-base;
-    font-size: $inputField-font-size !important;
-    line-height: $inputField-line-height !important;
-    color: $bsr-black-90;
-    font-weight: $fontweight-normal;
+  font-family: $fontfamily-base;
+  font-size: $inputField-font-size !important;
+  line-height: $inputField-line-height !important;
+  color: $bsr-black-90;
+  font-weight: $fontweight-normal;
 }
 input.custom-control-input label.custom-control-label {
-    column-gap: $base-gap;
+  column-gap: $base-gap;
 }
 
 .step-line {
-    &.line-gray {
-        background: $bsr-black-10;
-    }
-    &.line-brick {
-        background: $bsr-brick-100;
-    }
+  &.line-gray {
+    background: $bsr-black-10;
+  }
+  &.line-brick {
+    background: $bsr-brick-100;
+  }
 }
 
 .pi-intro {
-    h2, h3, h4 {
-        font-family: $fontfamily-base;
-        font-size: $h3-fontsize;
-        line-height: $h3-lineheight;
-        font-weight: $fontweight-bold;
-        color: $bsr-black-90;
-    }
-}
+  h2,
+  h3,
+  h4 {
+    font-family: $fontfamily-heading;
+    font-size: $h3-fontsize;
+    line-height: $h3-lineheight;
+    font-weight: $fontweight-bold;
+    color: $bsr-black-90;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",