Skip to content

Commit 73293e3

Browse files
itxchandanitxchandan
committed
Small changes fixes
1 parent e969437 commit 73293e3

20 files changed

+1654
-7
lines changed

‎assets/css/before-after.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,3 +115,13 @@
115115
background: #fff;
116116
box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
117117
}
118+
119+
.twentytwenty-vertical .twentytwenty-handle{
120+
display: flex;
121+
flex-direction: column;
122+
justify-content: space-evenly;
123+
}
124+
.twentytwenty-vertical {}
125+
.twentytwenty-vertical .fa{
126+
transform: rotate(90deg);
127+
}

‎assets/js/twentytwenty.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
}
3131
var beforeImg = container.find("img:first");
3232
var afterImg = container.find("img:last");
33-
container.append("<div class='twentytwenty-handle'></div>");
33+
container.append("<div class='twentytwenty-handle-wrapper'><div class='twentytwenty-handle'></div></div>");
3434
var slider = container.find(".twentytwenty-handle");
3535
slider.append("<i class='fas fa-chevron-left'></i>");
3636
slider.append("<i class='fas fa-chevron-right'></i>");

‎assets/js/twentytwenty.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/scss/accordion.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.mighty-accordion .mt-panel .accordion {
2+
border: 1px solid #ccc;
3+
color: #444;
4+
cursor: pointer;
5+
padding: 10px;
6+
width: 100%;
7+
text-align: left;
8+
outline: none;
9+
font-size: 15px;
10+
transition: 0.4s;
11+
display: flex;
12+
align-items: center;
13+
}
14+
15+
.mighty-accordion .mt-panel .accordion .accordion-title {
16+
display: inline-block
17+
}
18+
19+
.mighty-accordion .mt-panel .icons-right {
20+
justify-content: space-between;
21+
}
22+
23+
.mighty-accordion .mt-panel .active,
24+
.mighty-accordion .mt-panel .accordion:hover {
25+
border: 1px solid #ccc;
26+
}
27+
28+
.mighty-accordion .mt-panel .accordion-active-icon {
29+
display: none;
30+
color: #777;
31+
font-weight: bold;
32+
}
33+
34+
.mighty-accordion .mt-panel .active .accordion-icon {
35+
display: none;
36+
color: #777;
37+
font-weight: bold;
38+
float: left;
39+
margin-left: 5px;
40+
padding: 5px;
41+
}
42+
43+
.mighty-accordion .mt-panel .accordion .accordion-icons i {
44+
padding: 5px;
45+
border-color: black;
46+
}
47+
48+
.mighty-accordion .mt-panel .active .accordion-active-icon {
49+
display: block;
50+
}
51+
52+
.mighty-accordion .mt-panel .panel {
53+
background-color: white;
54+
max-height: 0;
55+
overflow: hidden;
56+
transition: max-height 0.2s ease-out;
57+
}
58+
59+
.mighty-accordion .mt-panel .panel .accordion-content {
60+
border-color: black;
61+
}

‎assets/scss/before-after.scss‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.mighty-before-after {
2+
text-align: center;
3+
}
4+
5+
.mighty-before-after img {
6+
width: 100%;
7+
}
8+
9+
.mighty-before-after.show-label-normal .twentytwenty-overlay .twentytwenty-before-label,
10+
.mighty-before-after.show-label-normal .twentytwenty-overlay .twentytwenty-after-label {
11+
opacity: 1;
12+
}
13+
14+
.mighty-before-after.show-label-normal .twentytwenty-overlay:hover .twentytwenty-before-label,
15+
.mighty-before-after.show-label-normal .twentytwenty-overlay:hover .twentytwenty-after-label {
16+
opacity: 0;
17+
}
18+
19+
.mighty-before-after.show-label-normal .inverted-overlay .twentytwenty-before-label,
20+
.mighty-before-after.show-label-normal .inverted-overlay .twentytwenty-after-label {
21+
opacity: 1;
22+
}
23+
24+
.mighty-before-after.show-label-normal .inverted-overlay:hover .twentytwenty-before-label,
25+
.mighty-before-after.show-label-normal .inverted-overlay:hover .twentytwenty-after-label {
26+
opacity: 0;
27+
}
28+
29+
.mighty-before-after.show-label-always .twentytwenty-before-label,
30+
.mighty-before-after.show-label-always .twentytwenty-after-label {
31+
opacity: 1;
32+
}
33+
34+
.mighty-before-after.show-label-always .twentytwenty-before-label:hover,
35+
.mighty-before-after.show-label-always .twentytwenty-after-label:hover {
36+
opacity: 1;
37+
}
38+
39+
.mighty-before-after.show-label-hover .inverted-overlay:hover .twentytwenty-before-label,
40+
.mighty-before-after.show-label-hover .inverted-overlay:hover .twentytwenty-after-label {
41+
opacity: 0;
42+
}
43+
44+
/* Horizontal Label Alignment */
45+
.twentytwenty-horizontal .label-h-top .twentytwenty-before-label:before,
46+
.twentytwenty-horizontal .label-h-top .twentytwenty-after-label:before {
47+
top: 10px;
48+
}
49+
50+
.twentytwenty-horizontal .label-h-bottom .twentytwenty-before-label:before,
51+
.twentytwenty-horizontal .label-h-bottom .twentytwenty-after-label:before {
52+
bottom: 10px;
53+
}
54+
55+
.twentytwenty-horizontal .label-h-middle .twentytwenty-before-label:before,
56+
.twentytwenty-horizontal .label-h-middle .twentytwenty-after-label:before {
57+
top: 50%;
58+
}
59+
60+
/* Vertical Label Alignment */
61+
.twentytwenty-vertical .label-v-left .twentytwenty-before-label:before,
62+
.twentytwenty-vertical .label-v-left .twentytwenty-after-label:before {
63+
left: 10px;
64+
}
65+
66+
.twentytwenty-vertical .label-v-center .twentytwenty-before-label:before,
67+
.twentytwenty-vertical .label-v-center .twentytwenty-after-label:before {
68+
left: 50%;
69+
}
70+
71+
.twentytwenty-vertical .label-v-right .twentytwenty-before-label:before,
72+
.twentytwenty-vertical .label-v-right .twentytwenty-after-label:before {
73+
right: 10px;
74+
}
75+
76+
/* Inverted overlay */
77+
.twentytwenty-before-label,
78+
.twentytwenty-after-label,
79+
.inverted-overlay {
80+
position: absolute;
81+
top: 0;
82+
width: 100%;
83+
height: 100%;
84+
}
85+
86+
.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;
92+
}
93+
94+
/* Arrows */
95+
.mighty-before-after .twentytwenty-handle i {
96+
font-size: 20px;
97+
color: white;
98+
vertical-align: -webkit-baseline-middle;
99+
padding: 0 5px;
100+
}
101+
102+
.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;
107+
}
108+
109+
.mighty-before-after .twentytwenty-vertical .mighty-before-after .twentytwenty-handle i {
110+
transform: rotate(90deg);
111+
}
112+
113+
.mighty-before-after .twentytwenty-handle:before,
114+
.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);
117+
}
118+
119+
.twentytwenty-vertical .twentytwenty-handle{
120+
display: flex;
121+
flex-direction: column;
122+
justify-content: space-evenly;
123+
}
124+
.twentytwenty-vertical {}
125+
.twentytwenty-vertical .fa{
126+
transform: rotate(90deg);
127+
}

‎assets/scss/buttongroup.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.mighty-buttongroup a.ma-btn {
2+
display: block;
3+
width: 100%;
4+
}
5+
6+
.mighty-buttongroup, .mighty-buttongroup.mt-btng-align-justify .mt-button{
7+
-webkit-box-align: center;
8+
-webkit-align-items: center;
9+
-moz-box-align: center;
10+
-ms-flex-align: center;
11+
align-items: center;
12+
display: flex;
13+
}
14+
.mighty-buttongroup.mt-btng-align-left {
15+
-webkit-box-pack: start;
16+
-webkit-justify-content: flex-start;
17+
-moz-box-pack: start;
18+
-ms-flex-pack: start;
19+
justify-content: flex-start;
20+
}
21+
.mighty-buttongroup.mt-btng-align-center {
22+
-webkit-box-pack: center;
23+
-webkit-justify-content: center;
24+
-moz-box-pack: center;
25+
-ms-flex-pack: center;
26+
justify-content: center;
27+
}
28+
.mighty-buttongroup.mt-btng-align-right {
29+
-webkit-box-pack: end;
30+
-webkit-justify-content: flex-end;
31+
-moz-box-pack: end;
32+
-ms-flex-pack: end;
33+
justify-content: flex-end;
34+
}
35+
.mighty-buttongroup.mt-btng-align-justify .mt-button {
36+
-webkit-box-flex: 1;
37+
-webkit-flex-grow: 1;
38+
-moz-box-flex: 1;
39+
-ms-flex-positive: 1;
40+
flex-grow: 1;
41+
}
42+
43+
.mighty-buttongroup.stack-on-desktop {
44+
display: block;
45+
}
46+
47+
/* Mobile */
48+
@media only screen and (max-width: 767px) {
49+
.mighty-buttongroup.stack-on-mobile {
50+
display: block;
51+
}
52+
}
53+
54+
/* Tablet */
55+
@media only screen and (max-width: 991px) {
56+
.mighty-buttongroup.stack-on-tablet {
57+
display: block;
58+
}
59+
}

0 commit comments

Comments
 (0)