holygrail2 1.3.50 → 1.3.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail2",
-  "version": "1.3.50",
+  "version": "1.3.52",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "scss/style.scss",
   "style": "dist/style.css",

package/scss/abstract/_setup.scss

@@ -142,14 +142,14 @@ $text-input-m: 12px;
 $text-input-d: 12px;
 $breakpointscols: ( xs: 1px, sm: 768px, md: 992px, lg: 1280px, xl: 1440px ) !default;
 $headers: ( titularbase-m: ( 14px, 14px, 16px, 16px, 1.2, 'medium' ) ) !default;
-$minheaders: ( p-tag: ( 8px, 10px, 1.3, 'regular' ), h2: ( 18px, 24px, 1.2, 'bold' ), title-l: ( 12px, 12px, 1.4, 'regular' ), title-l-l: ( 12px, 12px, 1.4, 'light' ), title-l-b: ( 12px, 12px, 1.4, 'medium' ), title-m: ( 11px, 11px, 1.4, 'regular' ), title-s: ( 10px, 10px, 1.4, 'regular' ), text-l: ( 12px, 12px, 1.5, 'regular' ), text-l-l: ( 12px, 12px, 1.5, 'light' ), text-m: ( 11px, 11px, 1.5, 'regular' ) ) !default;
-$headersFixers: ( 12: ( 12px, 1.5 ), 14: ( 14px, 1.5 ), 16: ( 16px, 1.5 ), 18: ( 18px, 1.5 ), 20: ( 20px, 1.5 ), 24: ( 24px, 1.5 ) ) !default;
+$minheaders: ( h2: ( 18px, 24px, 1.2, "bold" ), title-l-b: ( 14px, 14px, 1.4, "semibold" ), title-s: ( 12px, 12px, 1.4, "regular" ), suisse-1: ( 16px, 20px, 1.5, "regular3" ), suisse-2: ( 13px, 14px, 1.1, "regular3" ), suisse-body: ( 10px, 12px, 1.1, "regular3" ), p-tag: ( 8px, 8px, 1, "light" ), semantic: ( 13px, 13px, 1, "light" ), title-l: ( 14px, 14px, 1.4, "light" ), title-m: ( 12px, 12px, 1.4, "light" ), text-m: ( 12px, 13px, 1.5, "light" ), text-l: ( 12px, 12px, 1.5, "light" ) ) !default;
+$headersFixers: ( 12: ( 12px, 1.5 ), 14: ( 14px, 1.5 ), 16: ( 16px, 1.5 ), 18: ( 18px, 1.5 ), 20: ( 20px, 1.2 ), 24: ( 24px, 1.2 ), 32: ( 32px, 1.2 ), 40: ( 40px, 1.2 ) ) !default;
 $headersFluids: ( 1: ( 60px, 160px, 0.8 ), 2: ( 40px, 100px, 0.9 ), 3: ( 20px, 30px, 0.9 ) ) !default;
 $heights: ( height-xs: ( 80px, 80px ), height-sm: ( 100px, 100px ), height-128: ( 128px, 128px ), height-md: ( 350px, 350px ), height-lg: ( 400px, 400px ), height-xl: ( 450px, 450px ), height-full: ( 100vh, 100vh ), height-big: ( 300px, 500px ), height-medium: ( 200px, 400px ), height-mini: ( 100px, 300px ), height-home: ( calc(100vh - 80px), calc(100vh - 80px) ) ) !default;
-$margin-top: ( mtr-128: ( 64px, 128px, 128px, 128px ) ) !default;
-$margin-bottom: ( mbr-24: ( 16px, 24px, 24px, 24px ), mbr-32: ( 16px, 32px, 32px, 32px ), mbr-64: ( 32px, 64px, 64px, 64px ), mbr-128: ( 64px, 128px, 128px, 128px ), mbr-20-40: ( 20px, 40px, 40px, 40px ), mbr-16-32: ( 16px, 16px, 32px, 32px ), mbr-8-24: ( 8px, 8px, 24px, 24px ) ) !default;
+$margin-top: ( mtr-8-16: ( 8px, 8px, 16px, 16px ), mtr-16-32: ( 16px, 16px, 32px, 32px ), mtr-80-260: ( 80px, 80px, 260px, 260px ) ) !default;
+$margin-bottom: ( mbr-24: ( 16px, 24px, 24px, 24px ), mbr-32: ( 16px, 32px, 32px, 32px ), mbr-64: ( 32px, 64px, 64px, 64px ), mbr-128: ( 64px, 128px, 128px, 128px ), mbr-20-40: ( 20px, 40px, 40px, 40px ), mbr-16-32: ( 16px, 16px, 32px, 32px ), mbr-8-24: ( 8px, 8px, 24px, 24px ), mbr-8-16: ( 8px, 8px, 16px, 16px ), mbr-150: ( 150px, 150px, 50px, 50px ) ) !default;
 $padding: ( p-body: ( 20px, 20px, 40px, 40px ) ) !default;
-$padding-top: ( ptr-120: ( 64px, 64px, 120px, 120px ), ptr-128: ( 64px, 64px, 128px, 128px ), ptr-160: ( 64px, 64px, 160px, 160px ), ptr-136: ( 48px, 48px, 136px, 136px ), ptr-20-120: ( 20px, 20px, 120px, 120px ), ptr-112: ( 80px, 80px, 112px, 112px ), ptr-80: ( 48px, 48px, 80px, 80px ), ptr-64: ( 32px, 32px, 64px, 64px ), ptr-24: ( 16px, 16px, 24px, 24px ) ) !default;
-$padding-bottom: ( pbr-136: ( 64px, 64px, 136px, 136px ), pbr-128: ( 64px, 64px, 128px, 128px ), pbr-120: ( 64px, 64px, 120px, 120px ), pbr-112: ( 80px, 80px, 112px, 112px ), pbr-96: ( 64px, 64px, 96px, 96px ), pbr-24: ( 16px, 16px, 24px, 24px ) ) !default;
-$padding-left: ( pl-body: ( 20px, 20px, 40px, 40px ) ) !default;
-$padding-right: ( pr-body: ( 20px, 20px, 40px, 40px ) ) !default;
+$padding-top: ( ptr-160: ( 64px, 64px, 160px, 160px ), ptr-136: ( 48px, 48px, 136px, 136px ), ptr-120: ( 64px, 64px, 120px, 120px ), ptr-16-120: ( 16px, 16px, 120px, 120px ), ptr-20-120: ( 20px, 20px, 120px, 120px ), ptr-16-32: ( 16px, 32px, 32px, 32px ), ptr-112: ( 80px, 80px, 112px, 112px ), ptr-96: ( 64px, 64px, 96px, 96px ), ptr-80: ( 48px, 48px, 80px, 80px ), ptr-64: ( 32px, 32px, 64px, 64px ), ptr-40: ( 16px, 16px, 40px, 40px ), ptr-24: ( 16px, 16px, 24px, 24px ), ptr-20-0: ( 20px, 0, 0, 0 ) ) !default;
+$padding-bottom: ( pbr-160: ( 64px, 64px, 160px, 160px ), pbr-136: ( 64px, 64px, 136px, 136px ), pbr-120: ( 64px, 64px, 120px, 120px ), pbr-20-120: ( 20px, 20px, 120px, 120px ), pbr-16-32: ( 16px, 32px, 32px, 32px ), pbr-8-24: ( 8px, 24px, 24px, 24px ), pbr-112: ( 80px, 80px, 112px, 112px ), pbr-96: ( 64px, 64px, 96px, 96px ), pbr-80: ( 48px, 48px, 80px, 80px ), pbr-64: ( 32px, 32px, 64px, 64px ), pbr-24: ( 16px, 16px, 24px, 24px ) ) !default;
+$padding-left: ( pl-body: ( 20px, 20px, 20px, 20px ), pl-body2: ( 20px, 20px, 20px, 20px ), plr-20: ( 20px, 20px, 0px, 0px ) ) !default;
+$padding-right: ( pr-body: ( 20px, 20px, 20px, 20px ), pr-body2: ( 20px, 20px, 20px, 20px ), prr-20: ( 20px, 20px, 0px, 0px ) ) !default;

package/scss/base/_helpers.scss

@@ -963,7 +963,7 @@ strong {
 [lang^="ar"],
 //arab emirates, egipto ,jordania, israel ,qatar , bahrain ,arabia saudi
 [lang^="nl"] {
-  body {
+  * {
     font-family: Helvetica, Arial, sans-serif !important;
   }
   .ttu,
@@ -994,8 +994,8 @@ strong {
 [lang^="bg"],
 //bulgaro
 [lang^="ar"] //arab emirates, egipto ,jordania, israel ,qatar , bahrain ,arabia saudi
-{
-  body {
+{ 
+  * {
     font-family: Helvetica, Arial, sans-serif !important;
   }
 }

package/scss/base/_rtl.scss

@@ -192,6 +192,14 @@
       }
     }
   }
+
+  .checkbox-item-2 {
+    [type='checkbox']:not(:checked) + label span,
+    [type='checkbox']:checked + label span {
+      padding-inline-start: 70px;
+    }
+  }
+
   .check-bleed {
     &.checkbox-radio [type='radio']:checked + label .ico-radio,
     &.checkbox-radio [type='radio']:not(:checked) + label .ico-radio {

package/scss/elements/_checkbox.scss

@@ -139,14 +139,18 @@
   margin: 0;
   [type='checkbox']:not(:checked) + label,
   [type='checkbox']:checked + label {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
     position: relative;
-    padding-left: 0;
+    padding-inline-start: 0;
     cursor: pointer;
     font-weight: normal;
     font-size: $text-sm;
     text-align: initial;
     display: flex;
-    height: 26px;
+    min-height: 26px;
   }
   [type='checkbox']:not(:checked) + label::before,
   [type='checkbox']:checked + label::before {
@@ -155,22 +159,22 @@
     width: 62px;
     height: 26px;
     border-radius: 0;
-    left: 0;
+    inset-inline-start: 0;
     border: none;
     border: 1px solid $c-primary;
     outline: 0;
     display: inline-block;
     vertical-align: top;
-    margin: 0 10px 0 0;
+    margin-block: 0;
+    margin-inline: 0 10px;
+    top: 0;
   }
   [type='checkbox']:not(:checked) + label span,
   [type='checkbox']:checked + label span {
     display: inline-block;
     vertical-align: top;
     margin: 0;
-    line-height: 16px;
-    padding-left: 70px;
-    min-height: 20px;
+    padding-inline-start: 70px;
   }
   [type='checkbox']:not(:checked),
   [type='checkbox']:checked {
@@ -187,7 +191,6 @@
     box-sizing: border-box;
     padding: 0;
     margin: 4px 0 0;
-    margin-top: 1px \9;
     line-height: normal;
   }
   .checkbox-circle {
@@ -200,19 +203,19 @@
   [type='checkbox']:checked + label .checkbox-circle {
     position: absolute;
     top: 3px;
-    left: 6px;
+    inset-inline-start: 6px;
     color: $c-primary;
     transition: all 0.2s;
   }
   [type='checkbox']:not(:checked) + label .checkbox-circle {
     opacity: 1;
     transform: scale(1);
-    left: 4px;
+    inset-inline-start: 4px;
   }
   [type='checkbox']:checked + label .checkbox-circle {
     opacity: 1;
     transform: scale(1);
-    left: 38px;
+    inset-inline-start: 38px;
   }
 }
 .checkbox-radio {

package/scss/layouts/_runway.scss

@@ -7,8 +7,7 @@
   .inner-nativescroll {
     position: relative;
     display: inline-flex;
-    div {
-      background: #ccc;
+    > div {
       width: 22vw;
       @media (min-width: $break-md) {
         width: 15vw;