260. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:04 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

260.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Swatches/web/cssswatches.css2018-03-27 05:38:58 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Swatches/web/cssswatches.css2021-01-18 06:10:32 +0000

260.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged2620
Changed16
Inserted00
Removed00

260.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

260.4 Active regular expressions

No regular expressions were active.

260.5 Comparison detail

1 /** 1 /**
2  * Copyright © 2015 Magento. All rights reserved. 2  * Copyright © 2015 Magento. All rights reserved.
3  * See COPYING.txt for license details. 3  * See COPYING.txt for license details.
4  */ 4  */
5  5 
6 .swatch-attribute-options { 6 .swatch-attribute-options {
7     display: inline-block; 7     display: inline-block;
8     vertical-align: middle; 8     vertical-align: middle;
9     margin: 0 -3px; 9     margin: 0 -3px;
10 } 10 }
11  11 
12 .product-info-main .swatch-attribute-options { 12 .product-info-main .swatch-attribute-options {
13     display: block; 13     display: block;
14     margin: 15px 0; 14     margin: 15px 0;
15 } 15 }
16 .swatch-attribute-label { 16 .swatch-attribute-label {
17     font-weight: 600; 17     font-weight: 600;
18     color: #333; 18     color: #333;
19     position: relative; 19     position: relative;
20     font-size: 15px; 20     font-size: 15px;
21     text-transform: uppercase; 21     text-transform: uppercase;
22 } 22 }
23 .swatch-attribute-label:after { 23 .swatch-attribute-label:after {
24     content: ":"; 24     content: ":";
25 } 25 }
26 .swatch-attribute-label.required { 26 .swatch-attribute-label.required {
27     padding-right: 10px; 27     padding-right: 10px;
28 } 28 }
29 .swatch-attribute-label[data-required="1"]:after { 29 .swatch-attribute-label[data-required="1"]:after {
30     content: '*'; 30     content: '*';
31     color: red; 31     color: red;
32     position: absolute; 32     position: absolute;
33     right: -11px; 33     right: -11px;
34     top: -2px; 34     top: -2px;
35     font-weight: bold; 35     font-weight: bold;
36     font-size: 1em; 36     font-size: 1em;
37 } 37 }
38  38 
39 .swatch-attribute-selected-option { 39 .swatch-attribute-selected-option {
40     color: #646464; 40     color: #646464;
41     padding-left: 17px; 41     padding-left: 17px;
42 } 42 }
43  43 
44 .swatch-option { 44 .swatch-option {
45     /*width: 30px;*/ 45     /*width: 30px;*/
46     padding: 1px 2px; 46     padding: 1px 2px;
47     min-width: 27.7px; 47     min-width: 27.7px;
48     max-width: 90px; 48     max-width: 90px;
49     height: 27px; 49     height: 27px;
50     float: left; 50     float: left;
51     margin: 0 10px 5px 0; 51     margin: 0 10px 5px 0;
52     text-align: center; 52     text-align: center;
53     cursor: pointer; 53     cursor: pointer;
54     position: relative; 54     position: relative;
55     border: 1px solid rgb(218, 218, 218); 55     border: 1px solid rgb(218, 218, 218);
56     border-radius: 3px; 56     border-radius: 3px;
57     overflow: hidden; 57     overflow: hidden;
58     text-overflow: ellipsis; 58     text-overflow: ellipsis;
59 } 59 }
60  60 
61 .product-items .swatch-option { 61 .product-items .swatch-option {
62     min-width: 25px; 62     min-width: 25px;
63     height: 25px; 63     height: 25px;
64     margin: 0 5px 5px 0; 64     margin: 0 5px 5px 0;
65 } 65 }
66  66 
67 .swatch-option:last-child { 67 .swatch-option:last-child {
68     margin-right: 0; 68     margin-right: 0;
69 } 69 }
70  70 
71 .swatch-option-link-layered .swatch-option { 71 .swatch-option-link-layered .swatch-option {
72     margin-right: 2px; 72     margin-right: 2px;
73     margin-left: 3px; 73     margin-left: 3px;
74     margin-bottom: 4px; 74     margin-bottom: 4px;
75 } 75 }
76  76 
77 .swatch-option.text { 77 .swatch-option.text {
78     background: #F2F2F2; 78     background: #F2F2F2;
79     color: #777; 79     color: #777;
80     font-size: 11px; 80     font-size: 11px;
81     font-weight: 400; 81     font-weight: 400;
82     line-height: 20px; 82     line-height: 20px;
83     padding: 4px; 83     padding: 4px;
84     min-width: 27.7px; 84     min-width: 27.7px;
85 } 85 }
86 .product-items .swatch-option.text { 86 .product-items .swatch-option.text {
87     line-height: 15px; 87     line-height: 15px;
88     margin-right: 5px; 88     margin-right: 5px;
89 } 89 }
90 .swatch-option.selected { 90 .swatch-option.selected {
91     border-color: #08c; 91     border-color: #08c;
92     color: #333; 92     color: #333;
93 } 93 } 
94     
95 .swatch-option.text.selected {    
96     background-color: #FFF !important;    
97 }
    
98  94 
99 .clearfix:after { 95 .clearfix:after {
100     content: " "; /* Older browser do not support empty content */ 96     content: " "; /* Older browser do not support empty content */
101     visibility: hidden; 97     visibility: hidden;
102     display: block; 98     display: block;
103     height: 0; 99     height: 0;
104     clear: both; 100     clear: both;
105 } 101 }
106  102 
107 .swatch-attribute.size .swatch-option, .swatch-attribute.manufacturer .swatch-option { 103 .swatch-attribute.size .swatch-option, .swatch-attribute.manufacturer .swatch-option {
108     background: rgb(240, 240, 240); 104     background: rgb(240, 240, 240);
109     color: rgb(148, 148, 148); 105     color: rgb(148, 148, 148);
110 } 106 }
111  107 
112 .swatch-attribute.size .swatch-option.selected, .swatch-attribute.manufacturer .swatch-option.selected { 108 .swatch-attribute.size .swatch-option.selected, .swatch-attribute.manufacturer .swatch-option.selected {
113     color: black; 109     color: black;
114     background: #fff; 110     background: #fff;
115     border-color: #08c; 111     border-color: #08c;
116 } 112 }
117  113 
118 .swatch-option:not(.disabled):hover { 114 .swatch-option:not(.disabled):hover {
119     border-color: #08c; 115     border-color: #08c;
120     color: #333; 116     color: #333;
121 } 117 }
122  118 
123 .swatch-option.image:not(.disabled):hover, 119 .swatch-option.image:not(.disabled):hover,
124 .swatch-option.color:not(.disabled):hover { 120 .swatch-option.color:not(.disabled):hover {
125     border-color: #08c; 121     border-color: #08c;
126 } 122 }
127  123 
128 .swatch-option.disabled { 124 .swatch-option.disabled {
129     cursor: default; 125     cursor: default;
130 } 126 }
131  127 
132 .swatch-option.disabled:after { 128 .swatch-option.disabled:after {
133     content: ''; 129     content: '';
134     position: absolute; 130     position: absolute;
135     left: 0; 131     left: 0;
136     right: 0; 132     right: 0;
137     top:0; 133     top:0;
138     bottom: 0; 134     bottom: 0;
139     background: -moz-linear-gradient(to left top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 46%, rgba(255,82,22,1) 47%, rgba(255,82,22,1) 53%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 57%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%); 135     background: -moz-linear-gradient(to left top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 46%, rgba(255,82,22,1) 47%, rgba(255,82,22,1) 53%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 57%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%);
140     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0)), color-stop(43%,rgba(255,255,255,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(255,82,22,1)), color-stop(53%,rgba(255,82,22,1)), color-stop(54%,rgba(255,255,255,1)), color-stop(57%,rgba(255,255,255,1)), color-stop(58%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); 136     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0)), color-stop(43%,rgba(255,255,255,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(255,82,22,1)), color-stop(53%,rgba(255,82,22,1)), color-stop(54%,rgba(255,255,255,1)), color-stop(57%,rgba(255,255,255,1)), color-stop(58%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
141     background: -webkit-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 137     background: -webkit-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
142     background: -o-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 138     background: -o-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
143     background: -ms-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 139     background: -ms-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
144     background: linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 140     background: linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
145     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); 141     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
146 } 142 }
147  143 
148 .swatch-option-tooltip { 144 .swatch-option-tooltip {
149     max-width: 140px; 145     max-width: 140px;
150     /*max-height: 160px;*/ 146     /*max-height: 160px;*/
151     max-height: 100%; 147     max-height: 100%;
152     min-height: 20px; 148     min-height: 20px;
153     min-width: 20px; 149     min-width: 20px;
154     position: absolute; 150     position: absolute;
155     padding: 5px; 151     padding: 5px;
156     background: #fff; 152     background: #fff;
157     color: rgb(148, 148, 148); 153     color: rgb(148, 148, 148);
158     border: 1px solid #ccc; 154     border: 1px solid #ccc;
159     display: none; 155     display: none;
160     z-index: 999; 156     z-index: 999;
161     text-align: center; 157     text-align: center;
162     border-radius: 2px; 158     border-radius: 2px;
163 } 159 }
164  160 
165 .swatch-option-tooltip .corner, 161 .swatch-option-tooltip .corner,
166 .swatch-option-tooltip-layered .corner { 162 .swatch-option-tooltip-layered .corner {
167     left: 40%; 163     left: 40%;
168     position: absolute; 164     position: absolute;
169     bottom: 0; 165     bottom: 0;
170     height: 7px; 166     height: 7px;
171 } 167 }
172  168 
173 .swatch-option-tooltip .corner:after, 169 .swatch-option-tooltip .corner:after,
174 .swatch-option-tooltip-layered .corner:after { 170 .swatch-option-tooltip-layered .corner:after {
175     content: ''; 171     content: '';
176     position: relative; 172     position: relative;
177     top: 1px; 173     top: 1px;
178     left: -15px; 174     left: -15px;
179     width: 0; 175     width: 0;
180     height: 0; 176     height: 0;
181     border-style: solid; 177     border-style: solid;
182     border-width: 7px 7.5px 0 7.5px; 178     border-width: 7px 7.5px 0 7.5px;
183     border-color: #fff transparent transparent transparent; 179     border-color: #fff transparent transparent transparent;
184     font-size: 1px; 180     font-size: 1px;
185 } 181 }
186  182 
187 .swatch-option-tooltip .corner:before, 183 .swatch-option-tooltip .corner:before,
188 .swatch-option-tooltip-layered .corner:before { 184 .swatch-option-tooltip-layered .corner:before {
189     content: ''; 185     content: '';
190     position: relative; 186     position: relative;
191     top: 2px; 187     top: 2px;
192     left: 0; 188     left: 0;
193     width: 0; 189     width: 0;
194     height: 0; 190     height: 0;
195     border-style: solid; 191     border-style: solid;
196     border-width: 8px 8.5px 0 8.5px; 192     border-width: 8px 8.5px 0 8.5px;
197     border-color: #adadad transparent transparent transparent; 193     border-color: #adadad transparent transparent transparent;
198     font-size: 1px; 194     font-size: 1px;
199 } 195 }
200  196 
201 .swatch-option-tooltip .image, 197 .swatch-option-tooltip .image,
202 .swatch-option-tooltip-layered .image { 198 .swatch-option-tooltip-layered .image {
203     display: block; 199     display: block;
204     height: 130px; 200     height: 130px;
205     width: 130px; 201     width: 130px;
206     /*margin: 0 0 5px;*/ 202     /*margin: 0 0 5px;*/
207     margin: 0 auto; 203     margin: 0 auto;
208 } 204 }
209  205 
210 .swatch-option-tooltip .title { 206 .swatch-option-tooltip .title {
211     max-width: 140px; 207     max-width: 140px;
212     min-height: 20px; 208     min-height: 20px;
213     max-height: 200px; 209     max-height: 200px;
214     color: rgb(40, 40, 40); 210     color: rgb(40, 40, 40);
215     text-align: center; 211     text-align: center;
216     display: block; 212     display: block;
217     overflow: hidden; 213     overflow: hidden;
218 } 214 }
219  215 
220 .swatch-opt { 216 .swatch-opt {
221     margin: 20px 0; 217     margin: 20px 0;
222 } 218 }
223  219 
224 .product-info-main .swatch-opt { 220 .product-info-main .swatch-opt {
225     margin: 0; 221     margin: 0;
226 } 222 }
227  223 
228 .swatch-more { 224 .swatch-more {
229     display: inline-block; 225     display: inline-block;
230     margin: 2px 0; 226     margin: 2px 0;
231     text-decoration: none !important; 227     text-decoration: none !important;
232     position: static; 228     position: static;
233     z-index: 1; 229     z-index: 1;
234 } 230 }
235  231 
236 /* Layered Features */ 232 /* Layered Features */
237 .swatch-option-link-layered { 233 .swatch-option-link-layered {
238     position: relative; 234     position: relative;
239     margin: 0 !important; 235     margin: 0 !important;
240     padding: 0 !important; 236     padding: 0 !important;
241 } 237 }
242  238 
243 .swatch-option-tooltip-layered { 239 .swatch-option-tooltip-layered {
244     width: 140px; 240     width: 140px;
245     position: absolute; 241     position: absolute;
246     background: #fff; 242     background: #fff;
247     color: rgb(148, 148, 148); 243     color: rgb(148, 148, 148);
248     border: 1px solid #adadad; 244     border: 1px solid #adadad;
249     display: none; 245     display: none;
250     z-index: 999; 246     z-index: 999;
251     left: -47px; 247     left: -47px;
252 } 248 }
253  249 
254 .swatch-visual-tooltip-layered { 250 .swatch-visual-tooltip-layered {
255     height: 160px; 251     height: 160px;
256     top: -170px; 252     top: -170px;
257 } 253 }
258  254 
259 .swatch-textual-tooltip-layered { 255 .swatch-textual-tooltip-layered {
260     height: 30px; 256     height: 30px;
261     top: -40px; 257     top: -40px;
262 } 258 }
263  259 
264 .swatch-option-link-layered:hover > .swatch-option-tooltip-layered { 260 .swatch-option-link-layered:hover > .swatch-option-tooltip-layered {
265     display: block; 261     display: block;
266 } 262 }
267  263 
268 .swatch-attribute-options .swatch-option-tooltip-layered .title { 264 .swatch-attribute-options .swatch-option-tooltip-layered .title {
269     width: 100%; 265     width: 100%;
270     height: 20px; 266     height: 20px;
271     position: absolute; 267     position: absolute;
272     bottom: -5px; 268     bottom: -5px;
273     left: 0; 269     left: 0;
274     color: rgb(40, 40, 40); 270     color: rgb(40, 40, 40);
275     text-align: center; 271     text-align: center;
276     margin-bottom: 10px; 272     margin-bottom: 10px;
277 } 273 }
278  274 
279 .swatch-option-disabled:after { 275 .swatch-option-disabled:after {
280     content: ''; 276     content: '';
281     position: absolute; 277     position: absolute;
282     width: 42px; 278     width: 42px;
283     height: 2px; 279     height: 2px;
284     background: red; 280     background: red;
285     transform: rotate(-30deg); 281     transform: rotate(-30deg);
286     -o-transform: rotate(-30deg); 282     -o-transform: rotate(-30deg);
287     -moz-transform: rotate(-30deg); 283     -moz-transform: rotate(-30deg);
288     -ms-transform: rotate(-30deg); 284     -ms-transform: rotate(-30deg);
289     -webkit-transform: rotate(-30deg); 285     -webkit-transform: rotate(-30deg);
290     z-index: 995; 286     z-index: 995;
291     left: -4px; 287     left: -4px;
292     top: 10px; 288     top: 10px;
293 } 289 }
294  290 
295 .swatch-option-disabled { 291 .swatch-option-disabled {
296     outline: none !important; 292     outline: none !important;
297     cursor: default; 293     cursor: default;
298     border: 0; 294     border: 0;
299 } 295 }
300  296 
301 /* Bugfix for Add To Cart button */ 297 /* Bugfix for Add To Cart button */
302 div[class^="swatch-opt-"] { 298 div[class^="swatch-opt-"] {
303     margin-bottom: 10px; 299     margin-bottom: 10px;
304 } 300 }
305  301 
306 .swatch-option-loading { 302 .swatch-option-loading {
307     content: url("../images/loader-2.gif"); 303     content: url("../images/loader-2.gif");
308 } 304 }
309  305 
310 .swatch-option.color.selected:before { 306 .swatch-option.color.selected:before {
311     content: '\f82b'; 307     content: '\f82b';
312     font-family: 'porto-icons'; 308     font-family: 'porto-icons';
313     color: #fff; 309     color: #fff;
314     text-shadow: 0 0 2px rgba(0,0,0,0.3); 310     text-shadow: 0 0 2px rgba(0,0,0,0.3);
315 } 311 }

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.