This commit is contained in:
2024-12-04 10:54:28 +01:00
4 changed files with 3230 additions and 3116 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -8,8 +8,7 @@ $cTextLight: #3a3a3a;
$cGray: #f6f6f6;
$cGrayLight: #eceff1;
$cComment: #c3c3c3;
$fJosefin: 'Josefin Sans',
sans-serif;
$fJosefin: 'Josefin Sans', sans-serif;
@import '_mixins';
@keyframes fade_in_show {
@@ -105,7 +104,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
.show > .btn-success.dropdown-toggle {
background: $cBlue;
border: none;
}
@@ -118,7 +117,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
.show > .btn-success.dropdown-toggle:focus {
box-shadow: none;
}
@@ -570,18 +569,18 @@ input:-webkit-autofill:active {
display: flex;
margin-left: -15px;
>li {
> li {
@include respond-between(sm, md) {
&#link-5 {
display: none;
}
}
>i {
> i {
display: none;
}
>a {
> a {
font-family: $fJosefin;
color: $cText;
font-size: 22px;
@@ -606,14 +605,14 @@ input:-webkit-autofill:active {
}
&:hover {
>ul {
> ul {
display: flex;
animation: fade_in_show 0.5s;
flex-wrap: wrap;
}
}
>ul {
> ul {
left: 0;
width: 100%;
display: none;
@@ -622,7 +621,7 @@ input:-webkit-autofill:active {
background: #fff;
@include transition;
>li {
> li {
width: calc(100% / 4);
margin-bottom: 25px;
@@ -645,7 +644,7 @@ input:-webkit-autofill:active {
}
}
>a {
> a {
font-weight: 600;
font-size: 16px;
}
@@ -683,7 +682,6 @@ input:-webkit-autofill:active {
@include respond-above(xxl) {
.product-mini {
&:nth-child(11),
&:nth-child(12) {
display: none;
@@ -1329,10 +1327,10 @@ input:-webkit-autofill:active {
&.level-0 {
padding: 0 0 15px 0;
>li {
> li {
padding-bottom: 10px;
>a {
> a {
font-family: $fJosefin;
font-weight: 600;
letter-spacing: -1px;
@@ -1753,7 +1751,8 @@ ul.pager {
text-align: right;
}
._input {}
._input {
}
}
.product-message {
@@ -2109,10 +2108,12 @@ ul.pager {
opacity: 1;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right,
background-image: linear-gradient(
to right,
#000,
#000 50%,
rgba(0, 0, 0, 0.3) 50%);
rgba(0, 0, 0, 0.3) 50%
);
background-size: 200% 100%;
background-position: 100%;
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
@@ -2205,7 +2206,7 @@ ul.pager {
.basket-options {
padding-top: 25px;
>.content {
> .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@@ -2612,7 +2613,7 @@ ul.pager {
font-size: 13px;
}
>* {
> * {
width: 100%;
}
@@ -3029,8 +3030,8 @@ ul.pager {
max-width: 600px;
}
>.container {
>.row {
> .container {
> .row {
.col-xl-4 {
order: 1;
}
@@ -3055,8 +3056,8 @@ ul.pager {
#main-menu {
#menu-container-1 {
ul.level-0 {
>li {
>ul {
> li {
> ul {
padding: 25px;
}
}
@@ -3090,7 +3091,7 @@ ul.pager {
}
.basket-summary-address {
>.basket-address-form {
> .basket-address-form {
.left {
.addresses {
.address {
@@ -3375,7 +3376,6 @@ ul.pager {
}
.pager {
.first,
.last {
display: none;
@@ -3864,3 +3864,84 @@ div[class^='products-box-'] {
}
}
}
// ******************
.form-control {
&.form-control-phone {
display: flex;
flex-direction: row;
align-items: center;
&:has(> .form-control-input:focus) {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
&:hover {
&[tooltip] {
position: relative;
}
&[tooltip]:before {
content: '';
display: none;
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #343a40;
position: absolute;
top: 30px;
left: 85px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
&[tooltip]:after {
display: none;
content: attr(tooltip);
position: absolute;
top: 35px;
left: 50px;
padding: 5px 8px;
background: #343a40;
color: #fff;
z-index: 9;
font-size: 0.75em;
// height: 18px;
line-height: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
word-wrap: normal;
}
&[tooltip]:hover:before,
&[tooltip]:hover:after {
display: block;
}
}
.form-control-phone-code {
display: flex;
align-items: center;
gap: 10px;
span {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
}
.form-control-input {
border: none;
height: calc(2.25rem - 2px);
&:focus {
border: none;
outline: none;
box-shadow: none;
}
}
}
}

View File

@@ -70,7 +70,21 @@
</div>
</div>
<div class="form-group">
<input type="text" id="phone" name="phone" class="form-control" required placeholder="<?= ucfirst( \S::lang( 'telefon' ) );?>" value="<?= htmlspecialchars( $address_current['phone'] );?>">
<div class="form-control form-control-phone" tooltip="Wprowadź numer w formacie: 123456789">
<div class="form-control-phone-code">
<img src="/images/system/lang_pl.png" alt="">
<span>+48</span>
</div>
<input
type="tel"
id="phone"
name="phone"
class="form-control form-control-input"
required
placeholder="<?= ucfirst(\S::lang('telefon')); ?>"
value="<?= htmlspecialchars($address_current['phone']); ?>"
pattern="[0-9]{9}">
</div>
</div>
<div class="form-group">
<div class="row">
@@ -95,6 +109,25 @@
<? if ( $this -> client ):?></div><? endif;?>
</div>
<script class="footer">
$(document).ready(function () {
function validatePhone() {
var phone = $('#phone');
var phonePattern = /^[0-9]{9}$/;
if (!phone.val() || !phonePattern.test(phone.val())) {
$('#order-send').prop('disabled', true);
} else {
$('#order-send').prop('disabled', false);
}
}
$('#phone').on('input', function () {
validatePhone();
});
validatePhone();
});
$( function()
{
$( 'body' ).on( click_event, '.addresses .address .btn-select', function(e)