172. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-07-21 10:22:13 +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.

172.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/web/css/source_navigation.less2021-02-05 03:01:30 +0000
2/Applications/Ampps/www/Porto v4.0.1/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/web/css/source_navigation.less2021-02-05 03:01:30 +0000

172.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged1696
Changed00
Inserted00
Removed00

172.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

172.4 Active regular expressions

No regular expressions were active.

172.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 // 6 //
7 //  Common 7 //  Common
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 & when (@media-common = true) { 10 & when (@media-common = true) {
11  11 
12     .panel.header { 12     .panel.header {
13         .links, 13         .links,
14         .switcher { 14         .switcher {
15             display: none; 15             display: none;
16         } 16         }
17     } 17     }
18  18 
19     .nav-toggle { 19     .nav-toggle {
20         .lib-icon-font( 20         .lib-icon-font(
21             @icon-menu, 21             @icon-menu,
22             @_icon-font-size: 20px, 22             @_icon-font-size: 20px,
23             @_icon-font-color: inherit, 23             @_icon-font-color: inherit,
24             @_icon-font-color-hover: inherit 24             @_icon-font-color-hover: inherit
25         ); 25         );
26         .lib-icon-text-hide(); 26         .lib-icon-text-hide();
27         cursor: pointer; 27         cursor: pointer;
28         display: block; 28         display: block;
29         margin-left: 20px; 29         margin-left: 20px;
30         position: relative; 30         position: relative;
31         z-index: 1; 31         z-index: 1;
32         padding: 6.5px 1px 6.5px 10px; 32         padding: 6.5px 1px 6.5px 10px;
33         text-align: center; 33         text-align: center;
34         vertical-align: middle; 34         vertical-align: middle;
35         margin: 8px 0 8px .25rem; 35         margin: 8px 0 8px .25rem;
36         line-height: 20px; 36         line-height: 20px;
37         border-radius: .25rem; 37         border-radius: .25rem;
38     } 38     }
39 } 39 }
40  40 
41 // 41 //
42 //  Mobile 42 //  Mobile
43 //  _____________________________________________ 43 //  _____________________________________________
44  44 
45 @active-nav-indent: 54px; 45 @active-nav-indent: 54px;
46 @media (max-width: 991px) { 46 @media (max-width: 991px) {
47     .navigation { 47     .navigation {
48         .parent { 48         .parent {
49             .level-top { 49             .level-top {
50                 position: relative; 50                 position: relative;
51                 .lib-icon-font( 51                 .lib-icon-font(
52                 @_icon-font-content: @icon-down, 52                 @_icon-font-content: @icon-down,
53                 @_icon-font-size: 42px, 53                 @_icon-font-size: 42px,
54                 @_icon-font-position: after, 54                 @_icon-font-position: after,
55                 @_icon-font-display: block 55                 @_icon-font-display: block
56                 ); 56                 );
57                 color: #777; 57                 color: #777;
58                 &:after { 58                 &:after {
59                     position: absolute; 59                     position: absolute;
60                     left: 7px; 60                     left: 7px;
61                     top: -8px; 61                     top: -8px;
62                 } 62                 }
63                 &.ui-state-active { 63                 &.ui-state-active {
64                     .lib-icon-font-symbol( 64                     .lib-icon-font-symbol(
65                     @_icon-font-content: @icon-up, 65                     @_icon-font-content: @icon-up,
66                     @_icon-font-position: after 66                     @_icon-font-position: after
67                     ); 67                     );
68                 } 68                 }
69             } 69             }
70         } 70         }
71     } 71     }
72  72 
73     .nav-sections { 73     .nav-sections {
74         .lib-css(transition, right .3s, 1); 74         .lib-css(transition, right .3s, 1);
75         height: 100%; 75         height: 100%;
76         right: -80%; 76         right: -80%;
77         right: calc(~"-1 * (100% - @{active-nav-indent})"); 77         right: calc(~"-1 * (100% - @{active-nav-indent})");
78         overflow: auto; 78         overflow: auto;
79         position: fixed; 79         position: fixed;
80         top: 0; 80         top: 0;
81         width: 80%; 81         width: 80%;
82         width: calc(~"100% - @{active-nav-indent}"); 82         width: calc(~"100% - @{active-nav-indent}");
83  83 
84         background-color: @mobile_navigation__background; 84         background-color: @mobile_navigation__background;
85         .switcher { 85         .switcher {
86             border-bottom: 1px solid @mobile_navigation__border-color; 86             border-bottom: 1px solid @mobile_navigation__border-color;
87             font-weight: 400; 87             font-weight: 400;
88             margin: 0; 88             margin: 0;
89             padding: 12px 20px; 89             padding: 12px 20px;
90             height: auto; 90             height: auto;
91             color: #777; 91             color: #777;
92             .label { 92             .label {
93                 display: block; 93                 display: block;
94                 margin-bottom: @indent__xs; 94                 margin-bottom: @indent__xs;
95             } 95             }
96             &-trigger { 96             &-trigger {
97                 strong { 97                 strong {
98                     display: inline-block !important; 98                     display: inline-block !important;
99                     position: relative; 99                     position: relative;
100                 } 100                 }
101             } 101             }
102             &-dropdown { 102             &-dropdown {
103                 .lib-list-reset-styles(); 103                 .lib-list-reset-styles();
104                 padding: @indent__s 0; 104                 padding: @indent__s 0;
105             } 105             }
106         } 106         }
107  107 
108         .header.links { 108         .header.links {
109             .lib-list-reset-styles(); 109             .lib-list-reset-styles();
110             color: @mobile_navigation_submenu__font-color; 110             color: @mobile_navigation_submenu__font-color;
111             li { 111             li {
112                 border-bottom: 1px solid @mobile_navigation__border-color; 112                 border-bottom: 1px solid @mobile_navigation__border-color;
113                 margin: 0; 113                 margin: 0;
114                 &.greet.welcome { 114                 &.greet.welcome {
115                     font-weight: 400; 115                     font-weight: 400;
116                     padding: 12px 20px; 116                     padding: 12px 20px;
117                 } 117                 }
118             } 118             }
119             a, 119             a,
120             a:hover { 120             a:hover {
121                 .lib-css(color, @mobile_navigation__font-color); 121                 .lib-css(color, @mobile_navigation__font-color);
122                 .lib-css(text-decoration, @navigation-level0-item__text-decoration); 122                 .lib-css(text-decoration, @navigation-level0-item__text-decoration);
123                 display: block; 123                 display: block;
124                 font-weight: 400; 124                 font-weight: 400;
125                 padding: 12px 20px; 125                 padding: 12px 20px;
126             } 126             }
127             a:hover { 127             a:hover {
128                 color: @_link-color-hover !important; 128                 color: @_link-color-hover !important;
129             } 129             }
130         } 130         }
131     } 131     }
132  132 
133     .nav-before-open { 133     .nav-before-open {
134         height: 100%; 134         height: 100%;
135         width: 100%; 135         width: 100%;
136         .page-wrapper { 136         .page-wrapper {
137             .lib-css(transition, right .3s, 1); 137             .lib-css(transition, right .3s, 1);
138             height: 100%; 138             height: 100%;
139             right: 0; 139             right: 0;
140             overflow: hidden; 140             overflow: hidden;
141             position: relative; 141             position: relative;
142         } 142         }
143  143 
144         body { 144         body {
145             height: 100%; 145             height: 100%;
146             overflow: hidden; 146             overflow: hidden;
147             position: relative; 147             position: relative;
148             width: 100%; 148             width: 100%;
149         } 149         }
150     } 150     }
151  151 
152     .nav-open { 152     .nav-open {
153         .page-wrapper { 153         .page-wrapper {
154             right: 80%; 154             right: 80%;
155             right: calc(~"100% - @{active-nav-indent}"); 155             right: calc(~"100% - @{active-nav-indent}");
156             overflow: visible; 156             overflow: visible;
157         } 157         }
158  158 
159         .nav-sections { 159         .nav-sections {
160             @_shadow: 0 0 5px 0 rgba(50, 50, 50, .75); 160             @_shadow: 0 0 5px 0 rgba(50, 50, 50, .75);
161  161 
162             .lib-css(box-shadow, @_shadow, 1); 162             .lib-css(box-shadow, @_shadow, 1);
163             right: 0; 163             right: 0;
164             z-index: 99; 164             z-index: 99;
165         } 165         }
166  166 
167         .nav-toggle { 167         .nav-toggle {
168             &:after{ 168             &:after{
169                 background: rgba(0,0,0,.01); 169                 background: rgba(0,0,0,.01);
170                 content: ''; 170                 content: '';
171                 display: block; 171                 display: block;
172                 height: 100%; 172                 height: 100%;
173                 position: fixed; 173                 position: fixed;
174                 left:0; 174                 left:0;
175                 top: 0; 175                 top: 0;
176                 width: 100%; 176                 width: 100%;
177                 z-index: 1; 177                 z-index: 1;
178             } 178             }
179         } 179         }
180     } 180     }
181  181 
182     header.page-header .nav-sections { 182     header.page-header .nav-sections {
183         &-items { 183         &-items {
184             .lib-clearfix(); 184             .lib-clearfix();
185             position: relative; 185             position: relative;
186             z-index: 1; 186             z-index: 1;
187         } 187         }
188  188 
189         &-item-title { 189         &-item-title {
190             background: @mobile_navigation-tab__background; 190             background: @mobile_navigation-tab__background;
191             border: solid rgba(255,255,255,0.3); 191             border: solid rgba(255,255,255,0.3);
192             border-width: 0 0 1px 1px; 192             border-width: 0 0 1px 1px;
193             box-sizing: border-box; 193             box-sizing: border-box;
194             float: right; 194             float: right;
195             height: 71px; 195             height: 71px;
196             padding-top: 24px; 196             padding-top: 24px;
197             text-align: center; 197             text-align: center;
198             width: 33.33%; 198             width: 33.33%;
199  199 
200             &.active { 200             &.active {
201                 background: transparent; 201                 background: transparent;
202                 border-bottom: 0; 202                 border-bottom: 0;
203  203 
204                 > a, > a:hover, > a:focus { 204                 > a, > a:hover, > a:focus {
205                     color: @mobile_navigation-tab-active__font-color; 205                     color: @mobile_navigation-tab-active__font-color;
206                 } 206                 }
207             } 207             }
208             > a, > a:hover, > a:focus { 208             > a, > a:hover, > a:focus {
209                 color: @mobile_navigation-tab__font-color; 209                 color: @mobile_navigation-tab__font-color;
210             } 210             }
211         } 211         }
212  212 
213         &-item-content { 213         &-item-content {
214             .lib-clearfix(); 214             .lib-clearfix();
215             box-sizing: border-box; 215             box-sizing: border-box;
216             float: left; 216             float: left;
217             margin-right: -100%; 217             margin-right: -100%;
218             margin-top: 71px; 218             margin-top: 71px;
219             width: 100%; 219             width: 100%;
220             &.active { 220             &.active {
221                 display: block; 221                 display: block;
222             } 222             }
223         } 223         }
224     } 224     }
225  225 
226     .lib-main-navigation( 226     .lib-main-navigation(
227         @_nav-background-color: transparent, 227         @_nav-background-color: transparent,
228         @_nav-level0-item-border: 1px solid @mobile_navigation__border-color, 228         @_nav-level0-item-border: 1px solid @mobile_navigation__border-color,
229         @_nav-level0-item-color: @mobile_navigation__font-color, 229         @_nav-level0-item-color: @mobile_navigation__font-color,
230         @_nav-level0-font-size: 13px, 230         @_nav-level0-font-size: 13px,
231         @_nav-level0-font-weight: 400, 231         @_nav-level0-font-weight: 400,
232         @_submenu-item-color: @mobile_navigation_submenu__font-color 232         @_submenu-item-color: @mobile_navigation_submenu__font-color
233     ); 233     );
234  234 
235     .navigation { 235     .navigation {
236         a { 236         a {
237             padding-top: 10px; 237             padding-top: 10px;
238             padding-bottom: 10px; 238             padding-bottom: 10px;
239             &:hover { 239             &:hover {
240                 color: @_link-color-hover !important; 240                 color: @_link-color-hover !important;
241             } 241             }
242         } 242         }
243         li.level0 { 243         li.level0 {
244             line-height: 16px; 244             line-height: 16px;
245  245 
246             &:first-child { 246             &:first-child {
247                 border-top: 0; 247                 border-top: 0;
248             } 248             }
249             > a.level-top { 249             > a.level-top {
250                 padding: 13px 15px 13px 36px; 250                 padding: 13px 15px 13px 36px;
251             } 251             }
252             > a.ui-state-active { 252             > a.ui-state-active {
253                 color: #000; 253                 color: #000;
254                 font-weight: 600; 254                 font-weight: 600;
255  255 
256                 &, & + .submenu { 256                 &, & + .submenu {
257                     background-color: @mobile_navigation_opened_submenu__background-color; 257                     background-color: @mobile_navigation_opened_submenu__background-color;
258                 } 258                 }
259             } 259             }
260             &.active .all-category .ui-state-focus, &.active > a:not(.ui-state-active), &.has-active > a:not(.ui-state-active), &.active > a:not(.ui-state-active) span:not(.ui-menu-icon), &.has-active > a:not(.ui-state-active) span:not(.ui-menu-icon) { 260             &.active .all-category .ui-state-focus, &.active > a:not(.ui-state-active), &.has-active > a:not(.ui-state-active), &.active > a:not(.ui-state-active) span:not(.ui-menu-icon), &.has-active > a:not(.ui-state-active) span:not(.ui-menu-icon) {
261                 border-left: 0; 261                 border-left: 0;
262                 margin-right: 0; 262                 margin-right: 0;
263             } 263             }
264  264 
265             > .ui-menu-item > a { 265             > .ui-menu-item > a {
266                 font-weight: 400; 266                 font-weight: 400;
267             } 267             }
268             .ui-menu-item > a:before { 268             .ui-menu-item > a:before {
269                 content: @icon-right-open; 269                 content: @icon-right-open;
270                 display: inline; 270                 display: inline;
271                 font-family: @icon-font-family; 271                 font-family: @icon-font-family;
272                 margin-right: 10px; 272                 margin-right: 10px;
273                 font-size: 16px; 273                 font-size: 16px;
274                 vertical-align: top; 274                 vertical-align: top;
275                 color: @mobile_navigation_opened_submenu-item_icon-color; 275                 color: @mobile_navigation_opened_submenu-item_icon-color;
276             } 276             }
277             ul.level0 > .level1 { 277             ul.level0 > .level1 {
278                 font-weight: 400; 278                 font-weight: 400;
279             } 279             }
280         } 280         }
281         ul.submenu { 281         ul.submenu {
282             &, &:not(:first-child) { 282             &, &:not(:first-child) {
283                 padding-right: 15px; 283                 padding-right: 15px;
284                 .active > a, .level1.active > a { 284                 .active > a, .level1.active > a {
285                     padding-right: 15px; 285                     padding-right: 15px;
286                     border: 0; 286                     border: 0;
287                     font-weight: 600; 287                     font-weight: 600;
288                 } 288                 }
289             } 289             }
290             > li { 290             > li {
291                 line-height: 16px; 291                 line-height: 16px;
292             } 292             }
293         } 293         }
294     } 294     }
295 } 295 }
296  296 
297 // 297 //
298 //  Desktop 298 //  Desktop
299 //  _____________________________________________ 299 //  _____________________________________________
300  300 
301 @media(min-width: 992px) { 301 @media(min-width: 992px) {
302     .nav-toggle { 302     .nav-toggle {
303         display: none; 303         display: none;
304     } 304     }
305  305 
306     .nav-sections { 306     .nav-sections {
307         .lib-vendor-prefix-flex-shrink(0); 307         .lib-vendor-prefix-flex-shrink(0);
308         .lib-vendor-prefix-flex-basis(auto); 308         .lib-vendor-prefix-flex-basis(auto);
309         &-item-title { 309         &-item-title {
310             display: none; 310             display: none;
311         } 311         }
312         &-item-content > * { 312         &-item-content > * {
313             display: none; 313             display: none;
314         } 314         }
315         &-item-content > .navigation { 315         &-item-content > .navigation {
316             display: block; 316             display: block;
317             z-index: 5; 317             z-index: 5;
318         } 318         }
319     } 319     }
320  320 
321     .lib-main-navigation-desktop( 321     .lib-main-navigation-desktop(
322         @_nav-level0-item__active__border-width: 0, 322         @_nav-level0-item__active__border-width: 0,
323         @_nav-level0-item-line-height: 46px, 323         @_nav-level0-item-line-height: 46px,
324         @_nav-font-size: 12px, 324         @_nav-font-size: 12px,
325         @_submenu-border-width: 0, 325         @_submenu-border-width: 0,
326         @_submenu-border-style: solid, 326         @_submenu-border-style: solid,
327         @_submenu-border-color: @theme-color, 327         @_submenu-border-color: @theme-color,
328         @_submenu-font-weight: 400, 328         @_submenu-font-weight: 400,
329         @_submenu-item-color: #777, 329         @_submenu-item-color: #777,
330         @_submenu-item-padding: 9px 5px, 330         @_submenu-item-padding: 9px 5px,
331         @_submenu-item__hover__background-color: #f4f4f4, 331         @_submenu-item__hover__background-color: #f4f4f4,
332         @_submenu-item-color-hover: #777 332         @_submenu-item-color-hover: #777
333     ); 333     );
334  334 
335     .panel.header { 335     .panel.header {
336         .links, 336         .links,
337         .switcher { 337         .switcher {
338             display: inline-block; 338             display: inline-block;
339             margin: 0; 339             margin: 0;
340             vertical-align: middle; 340             vertical-align: middle;
341         } 341         }
342     } 342     }
343  343 
344     .navigation li.level0 { 344     .navigation li.level0 {
345         transition-delay: 0.3s; 345         transition-delay: 0.3s;
346         margin-left: 0; 346         margin-left: 0;
347     } 347     }
348 } 348 }