holygrail2 1.0.28 → 1.0.30

package/dist/style.css

@@ -5612,7 +5612,7 @@ button {
   pointer-events: none;
   filter: grayscale(1);
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
   cursor: not-allowed;
@@ -5635,7 +5635,7 @@ button {
   pointer-events: none;
   filter: grayscale(1);
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -5654,7 +5654,7 @@ button {
 .btn.btn-feel-invert {
   color: #000;
   background-color: transparent;
-  border: 1px solid #fb9962;
+  border: var(--line-width) solid #fb9962;
 }
 .btn.btn-feel-invert svg g {
   fill: #000;
@@ -5780,7 +5780,7 @@ button {
   padding-bottom: 6px;
   justify-content: center;
   align-items: flex-start;
-  border-bottom: 1px solid #000;
+  border-bottom: var(--line-width) solid #000;
 }
 
 .btn--full {
@@ -5798,7 +5798,7 @@ button {
 .btn-primary {
   color: #fff;
   background-color: #000;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-primary svg g {
   fill: #fff;
@@ -5813,12 +5813,12 @@ button {
 .btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary.hover, .btn-primary:active, .btn-primary.active {
   color: #fff;
   background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   opacity: 1;
 }
 .btn-primary[disabled], .btn-primary:disabled, .btn-primary.disabled {
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -5835,7 +5835,7 @@ button {
 .has-light .btn-primary {
   color: #000;
   background-color: #fff;
-  border: 1px solid #fff;
+  border: var(--line-width) solid #fff;
 }
 .has-light .btn-primary svg g {
   fill: #000;
@@ -5850,7 +5850,7 @@ button {
 .has-light .btn-primary:focus, .has-light .btn-primary.focus, .has-light .btn-primary:hover, .has-light .btn-primary.hover, .has-light .btn-primary:active, .has-light .btn-primary.active {
   color: #fff;
   background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   opacity: 1;
 }
 .has-light .btn-primary:focus svg g, .has-light .btn-primary.focus svg g, .has-light .btn-primary:hover svg g, .has-light .btn-primary.hover svg g, .has-light .btn-primary:active svg g, .has-light .btn-primary.active svg g {
@@ -5865,7 +5865,7 @@ button {
 }
 .has-light .btn-primary[disabled], .has-light .btn-primary:disabled, .has-light .btn-primary.disabled {
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -5873,7 +5873,7 @@ button {
 .btn-secondary {
   color: #000;
   background-color: #fff;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-secondary svg g {
   fill: #000;
@@ -5888,12 +5888,12 @@ button {
 .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary.hover, .btn-secondary:active, .btn-secondary.active {
   color: #000;
   background-color: #fff;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   opacity: 1;
 }
 .btn-secondary[disabled], .btn-secondary:disabled, .btn-secondary.disabled {
   background-color: #fff;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -5910,7 +5910,7 @@ button {
 .has-light .btn-secondary {
   color: #fff;
   background-color: transparent;
-  border: 1px solid #fff;
+  border: var(--line-width) solid #fff;
 }
 .has-light .btn-secondary svg g {
   fill: #fff;
@@ -5925,7 +5925,7 @@ button {
 .has-light .btn-secondary:focus, .has-light .btn-secondary.focus, .has-light .btn-secondary:hover, .has-light .btn-secondary.hover, .has-light .btn-secondary:active, .has-light .btn-secondary.active {
   color: #fff;
   background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   opacity: 1;
 }
 .has-light .btn-secondary:focus svg g, .has-light .btn-secondary.focus svg g, .has-light .btn-secondary:hover svg g, .has-light .btn-secondary.hover svg g, .has-light .btn-secondary:active svg g, .has-light .btn-secondary.active svg g {
@@ -5940,7 +5940,7 @@ button {
 }
 .has-light .btn-secondary[disabled], .has-light .btn-secondary:disabled, .has-light .btn-secondary.disabled {
   background-color: transparent;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -5948,7 +5948,7 @@ button {
 .btn-phantom {
   color: #fff;
   background-color: transparent;
-  border: 1px solid #fff;
+  border: var(--line-width) solid #fff;
 }
 .btn-phantom svg g {
   fill: #fff;
@@ -5963,7 +5963,7 @@ button {
 .btn-phantom:focus, .btn-phantom.focus, .btn-phantom:hover, .btn-phantom.hover, .btn-phantom:active, .btn-phantom.active {
   color: #000;
   background-color: transparent;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   opacity: 1;
 }
 
@@ -5971,7 +5971,7 @@ button {
   height: 40px;
   color: #fff;
   background-color: #000;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-limited svg g {
   fill: #fff;
@@ -6006,7 +6006,7 @@ button {
 .btn-primary-feel:disabled, .btn-primary-feel[disabled], .btn-primary-feel.disabled {
   pointer-events: none;
   cursor: default;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
   color: #8e8e8e !important;
   background-color: #e3e3e3 !important;
   filter: none;
@@ -6014,13 +6014,13 @@ button {
 }
 .btn-primary-feel:disabled svg-icon, .btn-primary-feel[disabled] svg-icon, .btn-primary-feel.disabled svg-icon {
   background-color: #e3e3e3 !important;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
 }
 
 .btn-secondary-feel {
   color: #000;
   background-color: #fff;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-secondary-feel svg g {
   fill: #000;
@@ -6032,13 +6032,13 @@ button {
 .btn-secondary-feel:focus, .btn-secondary-feel.focus, .btn-secondary-feel:hover, .btn-secondary-feel.hover, .btn-secondary-feel:active, .btn-secondary-feel.active {
   opacity: 1;
   color: #000;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   background-color: #fff;
 }
 .btn-secondary-feel:disabled, .btn-secondary-feel[disabled], .btn-secondary-feel.disabled {
   pointer-events: none;
   cursor: default;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
   color: #8e8e8e !important;
   background-color: #e3e3e3 !important;
   filter: none;
@@ -6046,7 +6046,7 @@ button {
 }
 .btn-secondary-feel:disabled svg-icon, .btn-secondary-feel[disabled] svg-icon, .btn-secondary-feel.disabled svg-icon {
   background-color: #e3e3e3 !important;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
 }
 .has-light .btn-secondary-feel {
   color: #fff;
@@ -6056,14 +6056,14 @@ button {
 .has-light .btn-secondary-feel:focus, .has-light .btn-secondary-feel.focus, .has-light .btn-secondary-feel:hover, .has-light .btn-secondary-feel.hover, .has-light .btn-secondary-feel:active, .has-light .btn-secondary-feel.active {
   opacity: 1;
   color: #fff;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   background-color: #8e8e8e;
 }
 
 .btn-tertiary {
   color: #000;
   background-color: #fff;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-tertiary svg g {
   fill: #000;
@@ -6075,13 +6075,13 @@ button {
 .btn-tertiary:focus, .btn-tertiary.focus, .btn-tertiary:hover, .btn-tertiary.hover, .btn-tertiary:active, .btn-tertiary.active {
   opacity: 1;
   color: #000;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   background-color: #fff;
 }
 .btn-tertiary:disabled, .btn-tertiary[disabled], .btn-tertiary.disabled {
   pointer-events: none;
   cursor: default;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
   color: #8e8e8e !important;
   background-color: #e3e3e3 !important;
   filter: none;
@@ -6089,7 +6089,7 @@ button {
 }
 .btn-tertiary:disabled svg-icon, .btn-tertiary[disabled] svg-icon, .btn-tertiary.disabled svg-icon {
   background-color: #e3e3e3 !important;
-  border: 1px solid #e3e3e3 !important;
+  border: var(--line-width) solid #e3e3e3 !important;
 }
 .has-light .btn-tertiary {
   color: #fff;
@@ -6099,7 +6099,7 @@ button {
 .has-light .btn-tertiary:focus, .has-light .btn-tertiary.focus, .has-light .btn-tertiary:hover, .has-light .btn-tertiary.hover, .has-light .btn-tertiary:active, .has-light .btn-tertiary.active {
   opacity: 1;
   color: #fff;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
   background-color: #8e8e8e;
 }
 
@@ -6112,7 +6112,7 @@ button {
 .btn-invert {
   color: #000;
   background-color: transparent;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-invert:focus, .btn-invert.focus, .btn-invert:hover, .btn-invert.hover, .btn-invert:active, .btn-invert.active {
   opacity: 0.6;
@@ -6121,7 +6121,7 @@ button {
 .btn-invert-light {
   color: #000;
   background-color: transparent;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
 }
 .btn-invert-light:focus, .btn-invert-light.focus, .btn-invert-light:hover, .btn-invert-light:active, .btn-invert-light.active {
   opacity: 0.6;
@@ -6132,14 +6132,14 @@ button {
 
 .btn-default {
   background-color: #000;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
   color: #fff;
 }
 
 .btn-blue {
   background-color: #1a32a4;
   color: #fff;
-  border: 1px solid #1a32a4;
+  border: var(--line-width) solid #1a32a4;
 }
 .btn-blue:focus, .btn-blue.focus, .btn-blue:hover, .btn-blue.hover, .btn-blue:visited, .btn-blue:active, .btn-blue.active {
   color: #fff;
@@ -6237,11 +6237,11 @@ button {
 .has-light .btn-google {
   background-color: #fff;
   color: #000;
-  border: 1px solid #fff;
+  border: var(--line-width) solid #fff;
 }
 .btn-google svg-icon,
 .has-light .btn-google svg-icon {
-  top: 1px;
+  top: var(--line-width);
 }
 .btn-google:focus, .btn-google.focus, .btn-google:hover, .btn-google.hover, .btn-google:visited, .btn-google:active, .btn-google.active,
 .has-light .btn-google:focus,
@@ -6251,14 +6251,14 @@ button {
 .has-light .btn-google:visited,
 .has-light .btn-google:active,
 .has-light .btn-google.active {
-  border: 1px solid #f0f0f0;
+  border: var(--line-width) solid #f0f0f0;
   opacity: 1;
 }
 
 .btn-facebook {
   background-color: #1977f3;
   color: #fff;
-  border: 1px solid #1977f3;
+  border: var(--line-width) solid #1977f3;
 }
 .btn-facebook svg-icon {
   background-color: transparent;
@@ -6269,19 +6269,19 @@ button {
 .btn-facebook:focus, .btn-facebook.focus, .btn-facebook:hover, .btn-facebook.hover, .btn-facebook:visited, .btn-facebook:active, .btn-facebook.active {
   opacity: 1;
   background-color: #1977f3;
-  border: 1px solid #1977f3;
+  border: var(--line-width) solid #1977f3;
 }
 .has-light .btn-facebook {
   background-color: #1977f3;
   color: #fff;
-  border: 1px solid #1977f3;
+  border: var(--line-width) solid #1977f3;
 }
 
 .btn-apple,
 .has-light .btn-apple {
   background-color: #000;
   color: #fff;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-apple:focus, .btn-apple.focus, .btn-apple:hover, .btn-apple.hover, .btn-apple:visited, .btn-apple:active, .btn-apple.active,
 .has-light .btn-apple:focus,
@@ -6293,14 +6293,14 @@ button {
 .has-light .btn-apple.active {
   opacity: 1;
   background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
 }
 
 .btn-apple-secondary,
 .has-light .btn-apple-secondary {
   background-color: #fff;
   color: #000;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
 }
 .btn-apple-secondary:focus, .btn-apple-secondary.focus, .btn-apple-secondary:hover, .btn-apple-secondary.hover, .btn-apple-secondary:visited, .btn-apple-secondary:active, .btn-apple-secondary.active,
 .has-light .btn-apple-secondary:focus,
@@ -6312,7 +6312,7 @@ button {
 .has-light .btn-apple-secondary.active {
   opacity: 1;
   background-color: #fff;
-  border: 1px solid #8e8e8e;
+  border: var(--line-width) solid #8e8e8e;
 }
 
 .btn-naver,
@@ -6320,7 +6320,7 @@ button {
   background-color: #03cf5d;
   color: #fff;
   padding-left: 40px;
-  border: 1px solid #03cf5d;
+  border: var(--line-width) solid #03cf5d;
 }
 .btn-naver:focus, .btn-naver.focus, .btn-naver:hover, .btn-naver.hover, .btn-naver:visited, .btn-naver:active, .btn-naver.active,
 .has-light .btn-naver:focus,
@@ -6332,7 +6332,7 @@ button {
 .has-light .btn-naver.active {
   opacity: 1;
   background-color: #03cf5d;
-  border: 1px solid #03cf5d;
+  border: var(--line-width) solid #03cf5d;
 }
 
 .btn-wechat,
@@ -6340,7 +6340,7 @@ button {
   background-color: #2dc100;
   color: #fff;
   padding-left: 40px;
-  border: 1px solid #2dc100;
+  border: var(--line-width) solid #2dc100;
 }
 .btn-wechat:focus, .btn-wechat.focus, .btn-wechat:hover, .btn-wechat.hover, .btn-wechat:visited, .btn-wechat:active, .btn-wechat.active,
 .has-light .btn-wechat:focus,
@@ -6352,7 +6352,7 @@ button {
 .has-light .btn-wechat.active {
   opacity: 1;
   background-color: #03cf5d;
-  border: 1px solid #2dc100;
+  border: var(--line-width) solid #2dc100;
 }
 
 .btn-block {
@@ -6500,35 +6500,35 @@ button {
 
 .btn-feel {
   background-color: #fb9962;
-  border: 1px solid #fb9962;
+  border: var(--line-width) solid #fb9962;
   color: #000;
 }
 .btn-feel:hover, .btn-feel.hover, .btn-feel:focus, .btn-feel.focus {
   background-color: #fccbb0;
-  border: 1px solid #fccbb0;
+  border: var(--line-width) solid #fccbb0;
   color: #000;
   opacity: 1;
 }
 .btn-feel[disabled], .btn-feel:disabled, .btn-feel.disabled {
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
 .has-light .btn-feel {
   background-color: #fb9962;
-  border: 1px solid #fb9962;
+  border: var(--line-width) solid #fb9962;
   color: #000;
 }
 .has-light .btn-feel:hover, .has-light .btn-feel.hover, .has-light .btn-feel:focus, .has-light .btn-feel.focus {
   background-color: #fccbb0;
-  border: 1px solid #fccbb0;
+  border: var(--line-width) solid #fccbb0;
   color: #000;
   opacity: 1;
 }
 .has-light .btn-feel[disabled], .has-light .btn-feel:disabled, .has-light .btn-feel.disabled {
   background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
   color: #8e8e8e;
   opacity: 1;
 }
@@ -6582,7 +6582,7 @@ button {
 .btn.btn-secondary-rd {
   font-size: 12px;
   border-radius: 0;
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
   padding: 9px 2px 4px;
   height: 32px;
   min-width: 100px;
@@ -6606,7 +6606,7 @@ button {
 .has-light .btn-phantom {
   color: #fff;
   background-color: transparent;
-  border: 1px solid #fff;
+  border: var(--line-width) solid #fff;
 }
 .has-light .btn-primary-feel:hover, .has-light .btn-primary-feel.hover, .has-light .btn-primary-feel:focus, .has-light .btn-primary-feel.focus {
   background-color: rgba(251, 153, 98, 0.6);
@@ -6719,7 +6719,7 @@ button {
 .checkbox-item [type=checkbox]:not(:checked) + label .icon,
 .checkbox-item [type=checkbox]:checked + label .icon {
   position: absolute;
-  top: 0;
+  top: 3px;
   left: 2px;
   color: #000;
   transition: all 0.2s;
@@ -7087,8 +7087,8 @@ button {
 }
 .check-center.checkbox-radio [type=radio]:checked + label .ico-radio, .check-center.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
   top: 50%;
-  left: 23px;
-  margin-top: -5px;
+  left: 21px;
+  margin-top: -2px;
 }
 .check-center .box3-content {
   padding-left: 30px;
@@ -7101,7 +7101,7 @@ button {
   left: 0;
 }
 .check-bleed.checkbox-radio [type=radio]:checked + label .ico-radio, .check-bleed.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
-  left: 4px;
+  left: 5px;
 }
 
 .check-top.checkbox-radio [type=radio]:checked + label::before, .check-top.checkbox-radio [type=radio]:not(:checked) + label::before {
@@ -7253,9 +7253,9 @@ fieldset[disabled] .form-control {
 .input,
 .textarea,
 .select select {
-  border: 1px solid transparent;
+  border: var(--line-width) solid transparent;
   border-color: #e3e3e3;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 var(--line-width) 0;
   border-radius: 0;
   appearance: none;
   align-items: center;
@@ -7289,9 +7289,9 @@ fieldset[disabled] .form-control {
 .textarea:focus,
 .select select:focus {
   outline: none;
-  border: 1px solid transparent;
+  border: var(--line-width) solid transparent;
   border-color: #000;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 var(--line-width) 0;
 }
 
 input::input-placeholder {
@@ -7400,7 +7400,7 @@ label {
   right: 6px;
   width: 5px;
   height: 5px;
-  margin-top: -3px;
+  margin-top: -5px;
 }
 .select.select-flat, .select.select-flat-no-icon {
   width: max-content;
@@ -7524,12 +7524,12 @@ label {
 }
 
 .input-line {
-  border-top: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-top: var(--line-width) solid transparent;
+  border-left: var(--line-width) solid transparent;
+  border-right: var(--line-width) solid transparent;
   background-color: transparent;
   padding-left: 0;
-  border-bottom: 1px solid #000;
+  border-bottom: var(--line-width) solid #000;
 }
 
 .input-notouch {
@@ -7629,7 +7629,7 @@ label {
   display: block;
   width: 100%;
   font-weight: normal;
-  margin-top: 1px;
+  margin-top: var(--line-width);
   margin-bottom: 0;
   line-height: 1.1;
   color: #8e8e8e;
@@ -7785,7 +7785,7 @@ label {
   color: #b40016 !important;
 }
 .is-error .input {
-  border-bottom: 1px solid #b40016;
+  border-bottom: var(--line-width) solid #b40016;
 }
 .is-error .input-prefix :nth-child(1)::placeholder {
   color: #b40016;
@@ -7803,17 +7803,17 @@ label {
   color: #76ae4a !important;
 }
 .ok-input .input {
-  border-bottom: 1px solid #76ae4a;
+  border-bottom: var(--line-width) solid #76ae4a;
   color: #76ae4a;
 }
 .ok-input .input-prefix:nth-child(1)::placeholder {
   color: #76ae4a;
 }
 .ok-input .input-line {
-  border-top: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid #76ae4a;
+  border-top: var(--line-width) solid transparent;
+  border-left: var(--line-width) solid transparent;
+  border-right: var(--line-width) solid transparent;
+  border-bottom: var(--line-width) solid #76ae4a;
   color: #76ae4a;
 }
 
@@ -7836,7 +7836,7 @@ label {
   padding: 12px 0 4px;
   height: auto;
   border: none;
-  border-bottom: 1px solid #000;
+  border-bottom: var(--line-width) solid #000;
 }
 .input-line-v2 .input::input-placeholder {
   font-family: arial, sans-serif;
@@ -8031,18 +8031,18 @@ a:hover {
   z-index: 1;
   cursor: pointer;
   border-radius: 50%;
-  border: 1px solid #e3e3e3;
+  border: var(--line-width) solid #e3e3e3;
 }
 
 .inner-button {
-  margin-top: -1px;
+  margin-top: -var(--line-width);
   display: block;
   width: 40px;
   height: 40px;
   color: #fff;
 }
 .inner-button::after {
-  border: 1px solid #000;
+  border: var(--line-width) solid #000;
   border-radius: 0;
   border-right: 0;
   border-top: 0;
@@ -8301,12 +8301,12 @@ ul.h-size-selector a:hover {
   cursor: pointer;
 }
 ul.h-size-selector a:hover::after {
-  border: 1px solid rgb(51, 48, 48);
+  border: var(--line-width) solid rgb(51, 48, 48);
 }
 ul.h-size-selector a::after {
   content: "";
   position: absolute;
-  border: 1px solid transparent;
+  border: var(--line-width) solid transparent;
   width: 10px;
   height: 10px;
   left: 3px;
@@ -8330,7 +8330,7 @@ ul.list-mini > li {
 ul.list-mini > li.is-missing::after {
   content: "";
   width: 100%;
-  height: 1px;
+  height: var(--line-width);
   background-color: #000;
   border-radius: 0;
   margin-top: -1px;
@@ -8380,7 +8380,7 @@ ul.list-mini > li::after {
   position: relative;
   padding: 16px;
   background: #fff;
-  border-bottom: 1px solid #e3e3e3;
+  border-bottom: var(--line-width) solid #e3e3e3;
   cursor: pointer;
   opacity: 1;
 }

package/guide/index.html

@@ -1975,8 +1975,10 @@
           </div>
           <b> Icons Buttons </b>
           <div class="grid-4">
+
+
             <div class="btn btn-primary btn--small has-ico-pre">
-              <svg-icon src="question">
+              <svg-icon src="question" class="mr-16">
                 <div class="ico-pre">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -1987,8 +1989,12 @@
               </svg-icon>
               ico-pre
             </div>
+
+
+
             <div class="btn btn-primary btn--small has-ico-post">
-              <svg-icon src="question">
+               ico-post
+              <svg-icon src="question" class="ml-16">
                 <div class="ico-post">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -1996,10 +2002,15 @@
                     </g>
                   </svg>
                 </div>
-              </svg-icon> ico-post
+              </svg-icon>
             </div>
+
+
+
+
+
             <div class="btn btn-primary btn--small has-ico-pre disabled">
-              <svg-icon src="question">
+                          <svg-icon src="question" class="mr-16">
                 <div class="ico-post">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2007,10 +2018,15 @@
                     </g>
                   </svg>
                 </div>
-              </svg-icon> ico-pre
+              </svg-icon> 
+              ico-pre
+  
             </div>
+
+
             <div class="btn btn-primary btn--small has-ico-post disabled">
-              <svg-icon src="question">
+      ico-post
+               <svg-icon src="question" class="ml-16">
                 <div class="ico-post">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2018,10 +2034,12 @@
                     </g>
                   </svg>
                 </div>
-              </svg-icon> ico-post
+              </svg-icon>
             </div>
+
+
             <div class="btn btn-secondary btn--small has-ico-pre">
-              <svg-icon src="question">
+              <svg-icon src="question"class="mr-16">
                 <div class="ico-pre">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2031,8 +2049,12 @@
                 </div>
               </svg-icon>ico-pre
             </div>
+
+
+
             <div class="btn btn-secondary btn--small has-ico-post">
-              <svg-icon src="question">
+            ico-post
+               <svg-icon src="question" class="ml-16">
                 <div class="ico-post">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2040,10 +2062,11 @@
                     </g>
                   </svg>
                 </div>
-              </svg-icon>ico-post
+              </svg-icon>
             </div>
+
             <div class="btn btn-secondary btn--small has-ico-pre guide-hover">
-              <svg-icon src="question">
+              <svg-icon src="question" class="mr-16">
                 <div class="ico-pre">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2054,7 +2077,8 @@
               </svg-icon> Action
             </div>
             <div class="btn btn-secondary btn--small has-ico-post guide-hover">
-              <svg-icon src="question">
+       Action
+              <svg-icon src="question" class="ml-16">
                 <div class="ico-post">
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2062,10 +2086,10 @@
                     </g>
                   </svg>
                 </div>
-              </svg-icon> Action
+              </svg-icon> 
             </div>
             <div class="btn btn-secondary btn--medium has-ico-center mb-24">
-              <svg-icon src="question">
+              <svg-icon src="question" class="mr-16">
                 <div>
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">
@@ -2077,7 +2101,7 @@
             </div>
             <div class="btn btn-secondary btn--medium has-ico-center">
               Action
-              <svg-icon src="question">
+              <svg-icon src="question" class="ml-16">
                 <div>
                   <svg width="16" height="16" viewBox="0 0 16 16">
                     <g stroke-width="1" fill="none" stroke="#212121">

package/package.json

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

package/scss/elements/_form.scss

@@ -16,9 +16,9 @@ fieldset[disabled] .form-control {
 .input,
 .textarea,
 .select select {
-  border: 1px solid transparent;
+  border: var(--line-width) solid transparent;
   border-color: $c-middle-grey;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 var(--line-width) 0;
   border-radius: 0;
   appearance: none;
   align-items: center;
@@ -45,9 +45,9 @@ fieldset[disabled] .form-control {
   &:focus {
     outline: none;
 
-    border: 1px solid transparent;
+    border: var(--line-width) solid transparent;
     border-color: $c-primary;
-    border-width: 0 0 1px 0;
+    border-width: 0 0 var(--line-width) 0;
   }
 }
 
@@ -280,12 +280,12 @@ label {
   min-height: 24px;
 }
 .input-line {
-  border-top: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-top: var(--line-width) solid transparent;
+  border-left: var(--line-width) solid transparent;
+  border-right: var(--line-width) solid transparent;
   background-color: transparent;
   padding-left: 0;
-  border-bottom: 1px solid $c-primary;
+  border-bottom: var(--line-width) solid $c-primary;
 }
 
 .input-notouch {
@@ -377,7 +377,7 @@ label {
     display: block;
     width: 100%;
     font-weight: normal;
-    margin-top: 1px;
+    margin-top: var(--line-width);
     margin-bottom: 0;
     line-height: 1.1;
     color: $c-dark-grey;
@@ -501,7 +501,7 @@ label {
     color: $c-error !important;
   }
   .input {
-    border-bottom: 1px solid $c-error;
+    border-bottom: var(--line-width) solid $c-error;
   }
   .input-prefix :nth-child(1)::placeholder {
     color: $c-error;
@@ -523,17 +523,17 @@ label {
     color: $c-success !important;
   }
   .input {
-    border-bottom: 1px solid $c-success;
+    border-bottom: var(--line-width) solid $c-success;
     color: $c-success;
   }
   .input-prefix:nth-child(1)::placeholder {
     color: $c-success;
   }
   .input-line {
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-    border-bottom: 1px solid $c-success;
+    border-top: var(--line-width) solid transparent;
+    border-left: var(--line-width) solid transparent;
+    border-right: var(--line-width) solid transparent;
+    border-bottom: var(--line-width) solid $c-success;
     color: $c-success;
   }
 }
@@ -555,7 +555,7 @@ label {
     padding: 12px 0 4px;
     height: auto;
     border: none;
-    border-bottom: 1px solid $c-primary;
+    border-bottom: var(--line-width) solid $c-primary;
   }
   .input::input-placeholder {
     @include font-regular;

package/scss/elements/_links.scss

@@ -41,18 +41,18 @@ a {
   z-index: 1;
   cursor: pointer;
   border-radius: 50%;
-  border: 1px solid $c-middle-grey;
+  border: var(--line-width) solid $c-middle-grey;
 }
 
 .inner-button {
-  margin-top: -1px;
+  margin-top: -var(--line-width);
   display: block;
   width: 40px;
   height: 40px;
   color: $c-white;
 
   &::after {
-    border: 1px solid $c-primary;
+    border: var(--line-width) solid $c-primary;
     border-radius: $form-radius;
     border-right: 0;
     border-top: 0;

package/scss/elements/_list.scss

@@ -97,14 +97,14 @@ ul.h-size-selector {
       cursor: pointer;
 
       &::after {
-        border: 1px solid rgb(51 48 48);
+        border: var(--line-width) solid rgb(51 48 48);
       }
     }
 
     &::after {
       content: '';
       position: absolute;
-      border: 1px solid transparent;
+      border: var(--line-width) solid transparent;
       width: 10px;
       height: 10px;
       left: 3px;
@@ -131,7 +131,7 @@ ul.list-mini {
       &::after {
         content: '';
         width: 100%;
-        height: 1px;
+        height: var(--line-width);
         background-color: $c-primary;
         border-radius: $form-radius;
         margin-top: -1px;
@@ -189,7 +189,7 @@ ul.list-mini {
   position: relative;
   padding: 16px;
   background: $c-white;
-  border-bottom: 1px solid $c-middle-grey;
+  border-bottom: var(--line-width) solid $c-middle-grey;
   cursor: pointer;
   opacity: 1;