230. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:03 +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.

230.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_Checkout/web/css/source/module/checkout_tooltip.less2018-11-28 08:56:30 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout_tooltip.less2018-11-28 08:56:30 +0000

230.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged1280
Changed00
Inserted00
Removed00

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

230.4 Active regular expressions

No regular expressions were active.

230.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 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @checkout-tooltip__hover__z-index: @tooltip__z-index;  10 @checkout-tooltip__hover__z-index: @tooltip__z-index; 
11 @checkout-tooltip-icon-arrow__font-size: 10px; 11 @checkout-tooltip-icon-arrow__font-size: 10px;
12 @checkout-tooltip-icon-arrow__left: -( @checkout-tooltip-content__padding + @checkout-tooltip-icon-arrow__font-size - @checkout-tooltip-content__border-width); 12 @checkout-tooltip-icon-arrow__left: -( @checkout-tooltip-content__padding + @checkout-tooltip-icon-arrow__font-size - @checkout-tooltip-content__border-width);
13  13 
14 @checkout-tooltip-icon__color: @color-gray-light2; 14 @checkout-tooltip-icon__color: @color-gray-light2;
15 @checkout-tooltip-icon__content: @icon-help; 15 @checkout-tooltip-icon__content: @icon-help;
16 @checkout-tooltip-icon__font-size: 24px; 16 @checkout-tooltip-icon__font-size: 24px;
17 @checkout-tooltip-icon__hover__color: @primary__color; 17 @checkout-tooltip-icon__hover__color: @primary__color;
18  18 
19 @checkout-tooltip-content__background-color: @color-gray-light01; 19 @checkout-tooltip-content__background-color: @color-gray-light01;
20 @checkout-tooltip-content__border-color: #ddd; 20 @checkout-tooltip-content__border-color: #ddd;
21 @checkout-tooltip-content__border-width: 1px; 21 @checkout-tooltip-content__border-width: 1px;
22 @checkout-tooltip-content__font-size: @font-size__base; 22 @checkout-tooltip-content__font-size: @font-size__base;
23 @checkout-tooltip-content__padding: 12px; 23 @checkout-tooltip-content__padding: 12px;
24 @checkout-tooltip-content__width: 270px; 24 @checkout-tooltip-content__width: 270px;
25 @checkout-tooltip-content__active__border-color: #ddd; 25 @checkout-tooltip-content__active__border-color: #ddd;
26  26 
27 @checkout-tooltip-content-mobile-popup__width: 200px; 27 @checkout-tooltip-content-mobile-popup__width: 200px;
28 @checkout-tooltip-content-mobile__right: -(@indent__s); 28 @checkout-tooltip-content-mobile__right: -(@indent__s);
29 @checkout-tooltip-content-mobile__top: 30px + @checkout-tooltip-icon-arrow__font-size; 29 @checkout-tooltip-content-mobile__top: 30px + @checkout-tooltip-icon-arrow__font-size;
30  30 
31 // 31 //
32 //  Common 32 //  Common
33 //  _____________________________________________ 33 //  _____________________________________________
34  34 
35 & when (@media-common = true) { 35 & when (@media-common = true) {
36  36 
37     .field-tooltip { 37     .field-tooltip {
38         cursor: pointer; 38         cursor: pointer;
39         position: absolute; 39         position: absolute;
40         right: 0; 40         right: 0;
41         top: 1px; 41         top: 1px;
42  42 
43         &._active { 43         &._active {
44             .lib-css(z-index, @checkout-tooltip__hover__z-index); 44             .lib-css(z-index, @checkout-tooltip__hover__z-index);
45  45 
46             .field-tooltip-content { 46             .field-tooltip-content {
47                 display: block; 47                 display: block;
48             } 48             }
49             .field-tooltip-action { 49             .field-tooltip-action {
50                 &:before { 50                 &:before {
51                     .lib-css(color, @checkout-tooltip-icon__hover__color); 51                     .lib-css(color, @checkout-tooltip-icon__hover__color);
52                 } 52                 }
53             } 53             }
54         } 54         }
55  55 
56         .field-tooltip-action { 56         .field-tooltip-action {
57             .lib-icon-font( 57             .lib-icon-font(
58                 @checkout-tooltip-icon__content, 58                 @checkout-tooltip-icon__content,
59                 @_icon-font-size: @checkout-tooltip-icon__font-size, 59                 @_icon-font-size: @checkout-tooltip-icon__font-size,
60                 @_icon-font-text-hide: true, 60                 @_icon-font-text-hide: true,
61                 @_icon-font-color: @checkout-tooltip-icon__color, 61                 @_icon-font-color: @checkout-tooltip-icon__color,
62                 @_icon-font-color-hover: @checkout-tooltip-icon__hover__color, 62                 @_icon-font-color-hover: @checkout-tooltip-icon__hover__color,
63                 @_icon-font-color-active: false 63                 @_icon-font-color-active: false
64             ); 64             );
65  65 
66             &:focus { 66             &:focus {
67                 ._keyfocus & { 67                 ._keyfocus & {
68                     .lib-css(z-index, @checkout-tooltip__hover__z-index); 68                     .lib-css(z-index, @checkout-tooltip__hover__z-index);
69                     + .field-tooltip-content { 69                     + .field-tooltip-content {
70                         display: block; 70                         display: block;
71                     } 71                     }
72                     &:before { 72                     &:before {
73                         .lib-css(color, @checkout-tooltip-icon__hover__color); 73                         .lib-css(color, @checkout-tooltip-icon__hover__color);
74                     } 74                     }
75                 } 75                 }
76             } 76             }
77         } 77         }
78  78 
79         .field-tooltip-content { 79         .field-tooltip-content {
80             .lib-css(background, @checkout-tooltip-content__background-color); 80             .lib-css(background, @checkout-tooltip-content__background-color);
81             .lib-css(border, @checkout-tooltip-content__border-width solid @checkout-tooltip-content__border-color); 81             .lib-css(border, @checkout-tooltip-content__border-width solid @checkout-tooltip-content__border-color);
82             .lib-css(border-radius, @checkout-tooltip-content__border-width); 82             .lib-css(border-radius, @checkout-tooltip-content__border-width);
83             .lib-css(font-size, @checkout-tooltip-content__font-size); 83             .lib-css(font-size, @checkout-tooltip-content__font-size);
84             .lib-css(padding, @checkout-tooltip-content__padding); 84             .lib-css(padding, @checkout-tooltip-content__padding);
85             .lib-css(width, @checkout-tooltip-content__width); 85             .lib-css(width, @checkout-tooltip-content__width);
86             display: none; 86             display: none;
87             left: 38px; 87             left: 38px;
88             position: absolute; 88             position: absolute;
89             text-transform: none; 89             text-transform: none;
90             top: -9px; 90             top: -9px;
91             word-wrap: break-word; 91             word-wrap: break-word;
92             z-index: 2; 92             z-index: 2;
93  93 
94             &:before, 94             &:before,
95             &:after { 95             &:after {
96                 .lib-arrow( 96                 .lib-arrow(
97                 @_position: left, 97                 @_position: left,
98                 @_size: @checkout-tooltip-icon-arrow__font-size, 98                 @_size: @checkout-tooltip-icon-arrow__font-size,
99                 @_color: @checkout-tooltip-content__background-color 99                 @_color: @checkout-tooltip-content__background-color
100                 ); 100                 );
101                 .lib-css(left, @checkout-tooltip-icon-arrow__left); 101                 .lib-css(left, @checkout-tooltip-icon-arrow__left);
102                 .lib-css(top, @checkout-tooltip-content__padding); 102                 .lib-css(top, @checkout-tooltip-content__padding);
103                 content: ''; 103                 content: '';
104                 display: block; 104                 display: block;
105                 position: absolute; 105                 position: absolute;
106                 z-index: 3; 106                 z-index: 3;
107             } 107             }
108             &:before { 108             &:before {
109                 .lib-css(border-right-color, @checkout-tooltip-content__active__border-color); 109                 .lib-css(border-right-color, @checkout-tooltip-content__active__border-color);
110             } 110             }
111             &:after { 111             &:after {
112                 .lib-css(border-right-color, @checkout-tooltip-content__background-color); 112                 .lib-css(border-right-color, @checkout-tooltip-content__background-color);
113                 width: 1px; 113                 width: 1px;
114                 z-index: 4; 114                 z-index: 4;
115             } 115             }
116         } 116         }
117     } 117     }
118 } 118 }
119  119 
120 // 120 //
121 //  Mobile 121 //  Mobile
122 //  _____________________________________________ 122 //  _____________________________________________
123  123 
124 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 124 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
125     .modal-popup { 125     .modal-popup {
126         .field-tooltip { 126         .field-tooltip {
127             .field-tooltip-content { 127             .field-tooltip-content {
128                 .lib-css(width, @checkout-tooltip-content-mobile-popup__width); 128                 .lib-css(width, @checkout-tooltip-content-mobile-popup__width);
129             } 129             }
130         } 130         }
131     } 131     }
132 } 132 }
133  133 
134 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { 134 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
135     .field-tooltip { 135     .field-tooltip {
136         .field-tooltip-content { 136         .field-tooltip-content {
137             &:extend(.abs-checkout-tooltip-content-position-top-mobile all); 137             &:extend(.abs-checkout-tooltip-content-position-top-mobile all);
138         } 138         }
139     } 139     }
140 } 140 }

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