11.mighty-before-after {
2- text-align : center;
2+ text-align : center;
33}
44
55.mighty-before-after img {
6- width : 100% ;
6+ width : 100% ;
77}
88
99.mighty-before-after .show-label-normal .twentytwenty-overlay .twentytwenty-before-label ,
1010.mighty-before-after .show-label-normal .twentytwenty-overlay .twentytwenty-after-label {
11- opacity : 1 ;
11+ opacity : 1 ;
1212}
1313
1414.mighty-before-after .show-label-normal .twentytwenty-overlay : hover .twentytwenty-before-label ,
1515.mighty-before-after .show-label-normal .twentytwenty-overlay : hover .twentytwenty-after-label {
16- opacity : 0 ;
16+ opacity : 0 ;
1717}
1818
1919.mighty-before-after .show-label-normal .inverted-overlay .twentytwenty-before-label ,
2020.mighty-before-after .show-label-normal .inverted-overlay .twentytwenty-after-label {
21- opacity : 1 ;
21+ opacity : 1 ;
2222}
2323
2424.mighty-before-after .show-label-normal .inverted-overlay : hover .twentytwenty-before-label ,
2525.mighty-before-after .show-label-normal .inverted-overlay : hover .twentytwenty-after-label {
26- opacity : 0 ;
26+ opacity : 0 ;
2727}
2828
2929.mighty-before-after .show-label-always .twentytwenty-before-label ,
3030.mighty-before-after .show-label-always .twentytwenty-after-label {
31- opacity : 1 ;
31+ opacity : 1 ;
3232}
3333
3434.mighty-before-after .show-label-always .twentytwenty-before-label : hover ,
3535.mighty-before-after .show-label-always .twentytwenty-after-label : hover {
36- opacity : 1 ;
36+ opacity : 1 ;
3737}
3838
3939.mighty-before-after .show-label-hover .inverted-overlay : hover .twentytwenty-before-label ,
4040.mighty-before-after .show-label-hover .inverted-overlay : hover .twentytwenty-after-label {
41- opacity : 0 ;
41+ opacity : 0 ;
4242}
4343
4444/* Horizontal Label Alignment */
45- .twentytwenty-horizontal .label-h-top .twentytwenty-before-label : before ,
45+ .twentytwenty-horizontal .label-h-top .twentytwenty-before-label : before ,
4646.twentytwenty-horizontal .label-h-top .twentytwenty-after-label : before {
47- top : 10px ;
47+ top : 10px ;
4848}
4949
50- .twentytwenty-horizontal .label-h-bottom .twentytwenty-before-label : before ,
50+ .twentytwenty-horizontal .label-h-bottom .twentytwenty-before-label : before ,
5151.twentytwenty-horizontal .label-h-bottom .twentytwenty-after-label : before {
52- bottom : 10px ;
52+ bottom : 10px ;
5353}
5454
55- .twentytwenty-horizontal .label-h-middle .twentytwenty-before-label : before ,
55+ .twentytwenty-horizontal .label-h-middle .twentytwenty-before-label : before ,
5656.twentytwenty-horizontal .label-h-middle .twentytwenty-after-label : before {
57- top : 50% ;
57+ top : 50% ;
5858}
5959
6060/* Vertical Label Alignment */
61- .twentytwenty-vertical .label-v-left .twentytwenty-before-label : before ,
61+ .twentytwenty-vertical .label-v-left .twentytwenty-before-label : before ,
6262.twentytwenty-vertical .label-v-left .twentytwenty-after-label : before {
63- left : 10px ;
63+ left : 10px ;
6464}
6565
66- .twentytwenty-vertical .label-v-center .twentytwenty-before-label : before ,
66+ .twentytwenty-vertical .label-v-center .twentytwenty-before-label : before ,
6767.twentytwenty-vertical .label-v-center .twentytwenty-after-label : before {
68- left : 50% ;
68+ left : 50% ;
6969}
7070
71- .twentytwenty-vertical .label-v-right .twentytwenty-before-label : before ,
71+ .twentytwenty-vertical .label-v-right .twentytwenty-before-label : before ,
7272.twentytwenty-vertical .label-v-right .twentytwenty-after-label : before {
73- right : 10px ;
73+ right : 10px ;
7474}
7575
7676/* Inverted overlay */
7777.twentytwenty-before-label ,
7878.twentytwenty-after-label ,
7979.inverted-overlay {
80- position : absolute;
81- top : 0 ;
82- width : 100% ;
83- height : 100% ;
80+ position : absolute;
81+ top : 0 ;
82+ width : 100% ;
83+ height : 100% ;
8484}
8585
8686.inverted-overlay {
87- -webkit-transition-property : background;
88- -moz-transition-property : background;
89- transition-property : background;
90- background : rgba (0 , 0 , 0 , 0 );
91- z-index : 25 ;
87+ -webkit-transition-property : background;
88+ -moz-transition-property : background;
89+ transition-property : background;
90+ background : rgba (0 , 0 , 0 , 0 );
91+ z-index : 25 ;
9292}
9393
9494/* Arrows */
9595.mighty-before-after .twentytwenty-handle i {
96- font-size : 20px ;
97- color : white;
98- vertical-align : -webkit-baseline-middle;
99- padding : 0 5px ;
96+ font-size : 20px ;
97+ color : white;
98+ vertical-align : -webkit-baseline-middle;
99+ padding : 0 5px ;
100100}
101101
102102.mighty-before-after .twentytwenty-vertical .mighty-before-after .twentytwenty-handle {
103- display : flex;
104- border-color : # fff ;
105- flex-direction : column;
106- justify-content : space-evenly;
103+ display : flex;
104+ border-color : # fff ;
105+ flex-direction : column;
106+ justify-content : space-evenly;
107107}
108108
109109.mighty-before-after .twentytwenty-vertical .mighty-before-after .twentytwenty-handle i {
110- transform : rotate (90deg );
110+ transform : rotate (90deg );
111111}
112112
113113.mighty-before-after .twentytwenty-handle : before ,
114114.mighty-before-after .twentytwenty-handle : after {
115- background : # fff ;
116- box-shadow : 0 3px 0 # fff, 0px 0px 12px rgba (51 , 51 , 51 , 0.5 );
115+ background : # fff ;
116+ box-shadow : 0 3px 0 # fff, 0px 0px 12px rgba (51 , 51 , 51 , 0.5 );
117117}
118118
119119.twentytwenty-vertical .twentytwenty-handle {
120- display : flex;
120+ display : flex;
121121 flex-direction : column;
122122 justify-content : space-evenly;
123123}
124+
124125.twentytwenty-vertical .twentytwenty-handle i {
125- transform : rotate (90deg );
126+ transform : rotate (90deg );
126127}
128+
127129.twentytwenty-horizontal .twentytwenty-handle {
128- display : flex;
129- align-items : center;
130- justify-content : space-evenly;
130+ display : flex;
131+ align-items : center;
132+ justify-content : space-evenly;
131133}
0 commit comments