修改color和size样式

app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js

@@ -450,7 +450,7 @@ define([
                 }
                 if (item.label.toLowerCase() == "size") {
                     // Create new control
-                    var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="margin-top: 0.13333rem;padding: 0.26667rem;background-color: #f7f7f7;display: none;"><div style="font-size:.32rem;color:#999999;">Product Measurements</div>'+'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '"></span></div>';
+                    var sizeContent = '<div class="swatch-attribute-selected-option-size-content" ><div style="font-size:.32rem;color:#999999;">Product Size Describe</div>'+'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '"></span></div>';
 
                     container.append(
                         '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -166,17 +166,12 @@
 .swatch-option {
   display: block;
   font-family: Outfit-Regular;
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
   color: #222222;
   font-size: 12px;
   font-weight: 500;
   text-align: center;
-  background-color: #f1f1f1;
   border-radius: 10%;
   padding: 0;
-  border: 0;
 }
 
 .swatch-option-link-layered .swatch-option .color{
@@ -436,9 +431,6 @@ button, input, optgroup, select, textarea{
 }
 
 
-#product-options-wrapper .swatch-option.image:hover{
-  border: 2px solid #000;
-}
 
 
 .product.info .review-add + .review-list, .product.info #product-review-container {
@@ -2183,15 +2175,7 @@ button.action.submit.primary {
   white-space: nowrap;
 }
 
-@media (max-width: 768px){
-  .swatch-attribute-selected-option-size-content span.swatch-attribute-selected-option{
-    margin-left: 0!important;
-    line-height:.53333rem;
-    font-size: .32rem;
-    text-transform:capitalize;
-    color: #0a0a0a;
-  }
-}
+
 
 #product-intro__freeshipping-more-3{
   display: inline-block;
@@ -2256,18 +2240,57 @@ button.action.submit.primary {
 }
 
 .swatch-option.color, .swatch-option.image{
-  width: 40px !important;
-  height: 40px !important;
-  border: 1px solid #000008;
+  width: 40px;
+  height: 40px;
+  background-clip: content-box!important;
+  padding: 5px;
+}
+
+.swatch-option.color.selected{
+  border: 2px solid black;
+}
+
+.swatch-option.image.selected{
+  border: 2px solid black;
 }
 
 .swatch-option.text{
   width: auto!important;
   padding: calc( 8.5px) calc( 11px);
-  line-height:22px!important;
+  line-height:10px!important;
   min-width: 40px;
   text-align: center;
   font-size: 15px;
+  background: none!important;
+  border:2px solid rgba(23, 23, 23, 0.6);
+  border-radius: 15px;
+  margin-left: 10px;
+}
+
+.swatch-option.text.selected{
+  border:2px solid black;
+}
+
+.swatch-attribute.size .swatch-attribute-selected-option{
+  font-size: 15px;
+  color: rgba(23, 23, 23, 0.6) !important;
+}
+
+.swatch-attribute-selected-option-size-content{
+  margin-top: 0.53333rem;
+  padding: 0.26667rem;
+  background-color: #f8f8f8!important;
+  display: none;
+}
+
+@media (max-width: 768px){
+  .swatch-attribute-selected-option-size-content span.swatch-attribute-selected-option{
+    margin-left: 0!important;
+    line-height:0.53333rem;
+    font-size: .32rem;
+    text-transform:capitalize;
+    color: #0a0a0a;
+  }
 }
 
 .block-minicart .block-content>.actions .action.checkout{
@@ -2280,24 +2303,18 @@ button.action.submit.primary {
   margin: 0 !important;
 }
 
-//色块强制大小
-#product-options-wrapper .swatch-option.image{
-  width: 40px !important;;
-  height: 40px !important;;
-  border-radius: 50% !important;;
-}
-
 //颜色提示强制关闭
 .breeze .field-tooltip-content, .breeze .tooltip.wrapper .tooltip.content, .breeze .map-popup, .breeze .swatch-option-tooltip {
   display: none !important;
 }
 
+
+
 @media (max-width: 1024px){
 
   #product-options-wrapper .swatch-option.color,#product-options-wrapper .swatch-option.image{
     width: 30px !important;
     height: 30px !important;
-    border: 1px solid #000008;
     border-radius: 50% !important;
     line-height: 30px;
   }
@@ -2360,10 +2377,6 @@ button.action.submit.primary {
   background-color: #000;
 }
 
-//产品色块选中错位处理
-#product-options-wrapper .swatch-option.image:hover{
-  border: none;
-}
 
 //评论列表距离顶部
 .product.info.detailed, .block.related {
@@ -2855,6 +2868,10 @@ tr.grand.totals {
 }
 
 
+.swatch-option.selected:before{
+  box-shadow:none;
+}
+
 div#shipping-method-buttons-container {
   display: none;
 }
@@ -3018,6 +3035,7 @@ strong#block-related-heading,strong#block-upsell-heading{ font-weight: 600; colo
 }
 
 
+
 /*导入Joshine工具类*/
 @import "./_joshine_col";
 @import "./_joshine_utils";