holygrail2 1.1.87 → 1.1.88

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "holygrail2",
-    "version": "1.1.87",
+    "version": "1.1.88",
     "description": "A minimal, responsive, style-agnostic CSS framework.",
     "main": "scss/style.scss",
     "directories": {

package/scss/elements/_form.scss

@@ -1,18 +1,15 @@
 @import '../abstract/_all';
 $input-padding-x: 14px;
 $input-padding-y: 14px;
-
 .form {
   width: 100%;
 }
-
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
   background-color: transparent;
   opacity: 1;
 }
-
 .input,
 .textarea,
 .select select {
@@ -30,7 +27,6 @@ fieldset[disabled] .form-control {
   vertical-align: top;
   height: 40px;
   box-sizing: border-box;
-
   color: $c-primary;
   max-width: 100%;
   width: 100%;
@@ -40,12 +36,10 @@ fieldset[disabled] .form-control {
   }
   &:focus {
     outline: none;
-
     border: var(--line-width) solid transparent;
     border-color: $c-primary;
     border-width: 0 0 var(--line-width) 0;
   }
-
   &disabled,
   &.disabled {
     pointer-events: none;
@@ -53,18 +47,15 @@ fieldset[disabled] .form-control {
     color: $c-middle-grey;
   }
 }
-
 input::input-placeholder {
   color: $c-middle-grey;
   transform: translate3d(0, 0, 0);
 }
-
 .textarea {
   min-height: 100px;
   padding: 8px 0;
   box-sizing: border-box;
 }
-
 .select {
   max-width: 100%;
   appearance: none;
@@ -265,7 +256,6 @@ input::input-placeholder {
     }
   }
 }
-
 .validation-error-messages {
   color: $c-error;
   font-weight: 500;
@@ -286,14 +276,12 @@ input::input-placeholder {
   padding-left: 0;
   border-bottom: var(--line-width) solid $c-primary;
 }
-
 .input-notouch {
   @include font-regular;
   pointer-events: none;
   border-color: $c-middle-grey;
   padding: 24px 0;
 }
-
 .info-text {
   color: $c-dark-grey;
   margin-top: 4px;
@@ -328,10 +316,8 @@ input::input-placeholder {
   label {
     font-size: $text-input-d;
   }
-
   font-family: $font-family-form;
   position: relative;
-
   .validation-error-messages {
     width: calc(100% - 40px);
   }
@@ -360,14 +346,14 @@ input::input-placeholder {
     position: absolute;
     right: 0;
   }
-  & > input,
-  & > label,
-  & > textarea {
+  &>input,
+  &>label,
+  &>textarea {
     font-family: $font-family-form;
     padding: 16px 0;
     font-weight: normal;
   }
-  & > label {
+  &>label {
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -397,7 +383,7 @@ input::input-placeholder {
     padding-top: calc(#{$input-padding-y} + #{$input-padding-y} * (2 / 3));
     padding-bottom: 14px;
   }
-  & input:not(:placeholder-shown) ~ label {
+  & input:not(:placeholder-shown)~label {
     padding-top: 1px;
     padding-bottom: calc(#{$input-padding-y} / 3);
     font-size: 9px;
@@ -407,7 +393,7 @@ input::input-placeholder {
     padding-top: calc(#{$input-padding-y} + #{$input-padding-y} * (2 / 3));
     padding-bottom: 14px;
   }
-  & input:focus ~ label {
+  & input:focus~label {
     padding-top: 1px;
     padding-bottom: calc(#{$input-padding-y} / 3);
     font-size: 9px;
@@ -444,8 +430,8 @@ input::input-placeholder {
   &.has-ico-pre,
   .has-ico-pre {
     &.btn,
-    & > input,
-    & > label {
+    &>input,
+    &>label {
       padding-left: $btn-padding * 2;
     }
     .form-icon {
@@ -469,8 +455,8 @@ input::input-placeholder {
   &.has-ico-post,
   .has-ico-post {
     &.btn,
-    & > input,
-    & > label {
+    &>input,
+    &>label {
       padding-right: $btn-padding * 3;
     }
     .form-icon {
@@ -494,7 +480,6 @@ input::input-placeholder {
     }
   }
 }
-
 .form-input-label-2 {
   &.required {
     label::after {
@@ -502,7 +487,6 @@ input::input-placeholder {
     }
   }
 }
-
 .is-error {
   .input,
   .help {
@@ -522,19 +506,17 @@ input::input-placeholder {
       fill: $c-error !important;
     }
   }
-
-  svg.ico-default {
-    g {
-      stroke: $c-primary !important;
-    }
-    path {
-      fill: $c-primary !important;
+  .ico-default {
+    svg {
+      g {
+        stroke: $c-primary !important;
+      }
+      path {
+        fill: $c-primary !important;
+      }
     }
   }
-
-
 }
-
 .ok-input {
   .input,
   .help {
@@ -555,12 +537,10 @@ input::input-placeholder {
     color: $c-success;
   }
 }
-
 .disabled-input {
   pointer-events: none;
   opacity: 0.4;
 }
-
 .input-line-v2 {
   position: relative;
   display: flex;
@@ -585,13 +565,11 @@ input::input-placeholder {
     overflow: hidden;
   }
 }
-
 .has-light {
   .form-input-label input,
   .form-input-label-2 input {
     background-color: transparent;
   }
-
   input,
   label {
     color: $c-white;
@@ -600,7 +578,7 @@ input::input-placeholder {
   .form-input-label-2,
   .form-input-prefix,
   .form-prefix {
-    & > label {
+    &>label {
       color: $c-white;
     }
     & input::input-placeholder {
@@ -612,7 +590,7 @@ input::input-placeholder {
     & input::placeholder {
       color: transparent;
     }
-    & input:not(:placeholder-shown) ~ label {
+    & input:not(:placeholder-shown)~label {
       color: $c-white;
     }
     input:-webkit-autofill,
@@ -647,29 +625,23 @@ input::input-placeholder {
       opacity: 0.7;
     }
   }
-
   .input:focus {
     border-color: #fff;
   }
 }
-
 .form-postcode {
   flex-wrap: wrap;
   gap: 8px;
-
   > :not(.select):nth-child(1) {
     flex: 0 0 200px;
   }
-
   > :nth-child(2) {
     flex: 1 0 auto;
   }
-
   .form-input-label-2 .help {
     width: 100%;
   }
 }
-
 .form-prefix {
   display: flex;
   flex-wrap: wrap;
@@ -680,11 +652,10 @@ input::input-placeholder {
   > :nth-child(2) {
     flex: 5 0 130px;
   }
-  > .btn {
+  >.btn {
     flex: 1 0 auto;
   }
 }
-
 // a eliminar activate-user---input-phone-combo----itxphoneaccountcreation
 .form-input-prefix {
   display: flex;
@@ -714,20 +685,20 @@ input::input-placeholder {
   left: 50%;
   transform: translateX(-50%);
 }
-
 @supports (-ms-ime-align: auto) {
-  .form-input-label-2 > label {
+  .form-input-label-2>label {
     display: none;
   }
   .formlabel input:-ms-input-placeholder {
     color: $c-dark-grey;
   }
 }
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .form-input-label-2 > label {
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
+  .form-input-label-2>label {
     display: none;
   }
   .formlabel input:-ms-input-placeholder {
     color: $c-dark-grey !important;
   }
-}
+}