[Bugix]JIRA : NAP-41 -> Product page radio button on IE

wp-content/themes/nap/assets/css/main.css

@@ -143,7 +143,7 @@ form{
   overflow: hidden;
 }
 select::-ms-expand {
-    display: none;
+  display: none;
 }
 select,
 input[type ="text"],
@@ -1305,6 +1305,7 @@ aside.news-wrapper {
   right: 0;
   z-index: 999;
   background: #fff;
+  overflow-x: hidden;
 }
 .product-details form {
   width: 43.4%;
@@ -1326,6 +1327,7 @@ aside.news-wrapper {
   overflow-y: scroll;
   max-height: 560px;
   margin-right: -17px;
+  padding-bottom: 15px;
 }
 
 .border-l:before{
@@ -1348,19 +1350,25 @@ aside.news-wrapper {
   cursor: pointer;
 }
 .pa_couleur li{
-  margin-bottom: 15px;
+  margin-bottom: 21px;
+  margin-right: 17px;
 }
 .pa_couleur li.selected >span:first-child,
 .pa_couleur li.selected >span:first-child{
   border : 1px solid;
 }
 .pa_couleur li span{
-  height: 36px;
+  /*height: 36px;
   width: 36px;
   display: block;
   border-radius: 50%;
   margin: 0 auto;
+  position: relative;*/
+  text-align: center;
+  margin: 0 auto;
   position: relative;
+  height: 36px;
+  display: block;
 }
 .pa_format ul li {
   text-align: center;
@@ -1400,7 +1408,9 @@ label.chevron.bottom::first-letter {
  filter: grayscale(100%);
  opacity: 0.4;
 }
-.pa_couleur li.selected >input:first-child::before,
+
+.pa_couleur li.selected input[type='radio']+span:before,
+/*.pa_couleur li.selected >input:first-child::before,*/
 .list li.selected >span:first-child::after{
   content:'';
   height: 14px;
@@ -1610,7 +1620,8 @@ label.chevron.bottom::first-letter {
   height: 100%;
 }
 /** WORDPRESS VARIATION PLUGUIN RADIO **/
-.color-list input[type='radio']:after {
+.color-list input[type='radio']+span:after
+/*.color-list input[type='radio']::after */{
   position: relative;
   background-color: #d1d3d1;
   content: '';
@@ -1629,13 +1640,27 @@ label.chevron.bottom::first-letter {
 .color-list input[type='radio']:checked:after {
   border: 1px solid #071D3D;
 }
+.format-list input,
+.color-list input{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  -ms-appearance:none;
+  appearance:none;
+}
 .format-list input[type='radio'],.color-list input[type='radio'] {
   margin:0;padding:0;
   -webkit-appearance:none;
   -moz-appearance:none;
+  -ms-appearance:none;
   appearance:none;
   position: relative;
   margin-left: -15px;
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  z-index: 99;
+  left: 50%;
+  opacity: 0;
 }
 .reset_variations, .quantity{
   display: none !important;
@@ -2601,9 +2626,9 @@ div.wpcf7-mail-sent-ok{
     transition: all .2s ease;
     z-index: 9999999999999999;
   }
- #loading-container-subpage{
-  display: none;
- }
+  #loading-container-subpage{
+    display: none;
+  }
   #loading-center-absolute {
    /* background: url(../img/logo-loader.png) no-repeat center center;*/
    position: absolute;
@@ -2624,19 +2649,19 @@ div.wpcf7-mail-sent-ok{
  }
 
  .load-4 .ring-1 {animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite;}
-  .load-4 p {
-    padding-top: 10px;
-  }
- .ring-1 {
-    width: 10px;
-    height: 10px;
-    margin: 0 auto;
-    padding: 10px;
-    border: 7px dashed #182566;
-    border-radius: 100%;
+ .load-4 p {
+  padding-top: 10px;
+}
+.ring-1 {
+  width: 10px;
+  height: 10px;
+  margin: 0 auto;
+  padding: 10px;
+  border: 7px dashed #182566;
+  border-radius: 100%;
 }
 @keyframes loadingD {
-    0 {transform: rotate(0deg);}
-    50% {transform: rotate(180deg);}
-    100% {transform: rotate(360deg);}
+  0 {transform: rotate(0deg);}
+  50% {transform: rotate(180deg);}
+  100% {transform: rotate(360deg);}
 }
\ No newline at end of file

wp-content/themes/nap/assets/css/responsive.css

@@ -58,14 +58,16 @@
 	.pa_format ul li{
 		margin-bottom: 10px;
 	}
-	.color-list input[type='radio']:after{
+	.color-list input[type='radio']+span:after
+	/*.color-list input[type='radio']:after*/{
 		height: 33px;
 		width: 33px;
 	}
 	.pa_couleur li {
 		margin-bottom: 10px;
 	}
-	.pa_couleur li.selected >input:first-child::before, 
+	.pa_couleur li.selected input[type='radio']+span:before,
+	/*.pa_couleur li.selected >input:first-child::before,*/ 
 	.list li.selected >span:first-child::after {
 		height: 14px;
 		width: 18px;
@@ -641,12 +643,18 @@
 		border-top: 0px;
 	}
 	.list li{
-		display: inline-block;
+		/*display: inline-block;*/
+		display: inline-flex;
 		margin-bottom: 0px;
 	}
+	.pa_couleur li{
+		margin: 0 5px;
+		line-height: 0;
+		font-size: 0;
+	}
 	.format-list input[type='radio'], 
 	.color-list input[type='radio']{
-		margin: 0 5px;
+		margin: 0px;
 	}
 	.list .product-header,
 	.product-details .list ul{
@@ -672,6 +680,7 @@
 		text-align: left;
 		padding-right: 10px;
 		display: flex;
+		padding-bottom: 0px;
 	}
 	.nav-slider ul .icon{
 		display: inline-block;
@@ -784,6 +793,7 @@
 	.pa_format ul li {
 		/*max-width: 60px;*/
 		margin: 0 10px;
+		display: grid;
 	}
 	/* Page CMS */
 	.phototheque-content .nav-phototeque{

wp-content/themes/nap/woocommerce/single-product/add-to-cart/variable.php

@@ -54,9 +54,14 @@ if (!function_exists('print_attribute_radio')) {
            $filtered_label = apply_filters('woocommerce_variation_option_name', $label);
           
             printf(' <style>
-                        #' . $id . ':after { background-color: ' . $hexa . '; }
+                        #' . $id . ':after ,
+                #' . $id . '+span:after
+
+                { background-color: ' . $hexa . '; }
                     </style><li class="color-list '.$selected.' " data-color="' . $hexa . '">
-                    <input data-color="' . $hexa . '" type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s ' . $default_checked . '></li>', $input_name, $esc_value, $id, $checked, $filtered_label);
+                    <input data-color="' . $hexa . '" type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s ' . $default_checked . '>
+                    <span></span>
+                    </li>', $input_name, $esc_value, $id, $checked, $filtered_label);
         } else {
             $icons = nap_icon_format($value);