Skip to content

Commit 57fc459

Browse files
pgaliaspgalias
committed
slider, dropdown
1 parent 0cea8ce commit 57fc459

File tree

7 files changed

+497
-25
lines changed

7 files changed

+497
-25
lines changed

‎src/_data/slider.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
[{
2+
"input": {
3+
"type": "radio",
4+
"name": "slider",
5+
"id": "slide-1",
6+
"checked": true
7+
},
8+
"content": {
9+
"heading": "slide #1",
10+
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!",
11+
"image": "https://placekitten.com/800/600",
12+
"animated": false
13+
}
14+
}, {
15+
"input": {
16+
"type": "radio",
17+
"name": "slider",
18+
"id": "slide-2",
19+
"checked": false
20+
},
21+
"content": {
22+
"heading": "slide #2",
23+
"image": "https://placekitten.com/850/600",
24+
"animated": true
25+
}
26+
}, {
27+
"input": {
28+
"type": "radio",
29+
"name": "slider",
30+
"id": "slide-3",
31+
"checked": false
32+
},
33+
"content": {
34+
"image": "https://placekitten.com/900/600",
35+
"animated": false
36+
}
37+
}, {
38+
"input": {
39+
"type": "radio",
40+
"name": "slider",
41+
"id": "slide-4",
42+
"checked": false
43+
},
44+
"content": {
45+
"heading": "slide #4",
46+
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto assumenda dicta dolor eligendi eos esse, et eum ex hic illo inventore laboriosam maiores nisi quia sit unde voluptas voluptatem.",
47+
"animated": false
48+
}
49+
}]

‎src/_scripts/main.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $(() => {
1010

1111
function onChange(self, child, regexp, replace = '', checkbox = false) {
1212
const txt = self.attr('data-class-name');
13-
const selector = self.closest('article').find(child);
13+
const selector = self.closest('article').find('pre').find(child);
1414
const type = child === 'code' ? 'html' : 'text';
1515
const code = selector[type]();
1616

@@ -25,17 +25,20 @@ $(() => {
2525
selector[type](replace);
2626
}
2727

28-
$('.acc-width-opt input[type=radio],.tabs-width-opt input[type=radio],.modalbox-width-opt input[type=radio]').on('change', function() {
28+
$('.acc-width-opt input[type=radio],.tabs-width-opt input[type=radio],.modalbox-width-opt input[type=radio],.slider-width-opt input[type=radio]').on('change', function() {
2929
const self = $(this);
3030

31-
const regexp = /(--full-width|--fixed-width|--wide|--wide-short|--full-size|--fixed-size)/g;
31+
const regexp = /(--full-width|--fixed-width|--wide-short|--wide|--full-size|--fixed-size)/g;
3232
onChange(self, 'code', regexp);
3333

34-
self.closest('article').find('.accordion, .tabs').toggleClass((index, element) => {
34+
self.closest('article').find('.accordion, .tabs, .slider').toggleClass((index, element) => {
3535
let elementArray = element.split(' ');
3636
return `${elementArray[0]}--full-width ${elementArray[0]}--fixed-width`
3737
});
38-
self.closest('article').find('.modal__dialog').removeClass('modal__dialog--full-size modal__dialog--fixed-size modal__dialog--wide modal__dialog--wide-short').addClass(`modal__dialog${self.attr('data-class-name')}`);
38+
39+
self.closest('article').find('.modal__dialog')
40+
.removeClass('modal__dialog--full-size modal__dialog--fixed-size modal__dialog--wide modal__dialog--wide-short')
41+
.addClass(`modal__dialog${self.attr('data-class-name')}`);
3942
});
4043

4144
$('.acc-type-opt input[type=radio]').on('change', function() {
@@ -49,16 +52,26 @@ $(() => {
4952
self.closest('article').find('.accordion :input').each((index, element) => $(element).attr('type', txt));
5053
});
5154

52-
$('.acc-theme-opt input[type=checkbox], .tabs-theme-opt input[type=checkbox]').on('change', function() {
55+
$('.slider-pills-position-opt input[type=radio]').on('change', function() {
56+
const self = $(this);
57+
const txt = self.attr('data-class-name');
58+
const regexp = /(bottom|top|left|right)/;
59+
60+
onChange(self, '.hljs-tag:eq(36)', regexp, '');
61+
62+
self.closest('article').find('.slider__pills').removeClass('slider__pills--bottom slider__pills--top slider__pills--left slider__pills--right').addClass(`slider__pills--${txt}`);
63+
});
64+
65+
$('.acc-theme-opt input[type=checkbox], .tabs-theme-opt input[type=checkbox], .slider-theme-opt input[type=checkbox]').on('change', function() {
5366
const self = $(this);
5467
const txt = self.attr('data-class-name');
55-
const regexp = /(accordion--blue|tabs--blue)/;
68+
const regexp = /(accordion--blue|tabs--blue|slider--blue)/;
5669

5770
onChange(self, '.hljs-tag:first .hljs-string', regexp, '', true);
5871

59-
self.closest('article').find('.accordion, .tabs, .modal__dialog').toggleClass((index, element) => {
72+
self.closest('article').find('.accordion, .tabs, .slider').toggleClass((index, element) => {
6073
let elementArray = element.split(' ');
61-
return `${elementArray[0]}${txt}`;
74+
return `${elementArray[0]}${txt.replace(elementArray[0], '')}`;
6275
});
6376
});
6477

@@ -69,6 +82,6 @@ $(() => {
6982

7083
onChange(self, '.hljs-tag:eq(5) .hljs-string', regexp, '', true);
7184

72-
self.closest('article').find('.modal__dialog').toggleClass(`modal__dialog${txt}`);
85+
self.closest('article').find('.modal__dialog').toggleClass(txt);
7386
});
74-
});
87+
});

‎src/_styles/common/_code.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,14 @@ pre {
44
border: 1px solid $blue;
55

66
font-size: 13px;
7+
}
8+
9+
p {
10+
code.html {
11+
color: #0048ab;
12+
font-size: 13px;
13+
background: #eaeef3;
14+
border: 1px solid #00bac7;
15+
vertical-align: middle;
16+
}
717
}

‎src/_styles/content/_article.scss‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
article {
22
h1 {
33
font-size: 3em;
4-
& + p {
5-
font-size: 1.35em;
6-
}
74

85
&::after {
96
content: '';
107
display: block;
118
border-bottom: 1px solid lighten($blue-content-txt,50%);
129
}
1310

14-
a,
15-
a:link,
16-
a:target,
17-
a:focus,
18-
a:hover {
19-
color: inherit;
20-
text-decoration: none;
21-
}
22-
2311
@include laptop-and-desktop {
2412
&:hover > a {
2513
position: relative;
@@ -40,6 +28,48 @@ article {
4028
}
4129
}
4230

31+
& > h2 {
32+
&::after {
33+
content: '';
34+
display: block;
35+
border-bottom: 1px inset lighten($blue-content-txt,55%);
36+
}
37+
38+
@include laptop-and-desktop {
39+
&:hover > a {
40+
position: relative;
41+
$size: 32px;
42+
&::before {
43+
content: '';
44+
display: block;
45+
46+
position: absolute;
47+
top: calc(50% - #{$size}/2);
48+
left: -40px*.8;
49+
50+
background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Mi44IDQ4Mi44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODIuOCA0ODIuODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI1NS4yLDIwOS4zYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyMS45LDIxLjksMjEuOSw1Ny41LDAsNzkuNGwtMTE1LDExNWMtMjEuOSwyMS45LTU3LjUsMjEuOS03OS40LDBsLTE3LjMtMTcuMyAgICBjLTIxLjktMjEuOS0yMS45LTU3LjUsMC03OS40bDExNS0xMTVjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFzLTEzLjgtNS4zLTE5LjEsMGwtMTE1LDExNUM4LjcsMzIyLjcsMCwzNDMuNiwwLDM2NS44ICAgIGMwLDIyLjIsOC42LDQzLjEsMjQuNCw1OC44bDE3LjMsMTcuM2MxNi4yLDE2LjIsMzcuNSwyNC4zLDU4LjgsMjQuM3M0Mi42LTguMSw1OC44LTI0LjNsMTE1LTExNWMzMi40LTMyLjQsMzIuNC04NS4yLDAtMTE3LjYgICAgQzI2OS4xLDIwNCwyNjAuNSwyMDQsMjU1LjIsMjA5LjN6IiBmaWxsPSIjMDBiYWM3Ii8+CgkJPHBhdGggZD0iTTQ1OC41LDU4LjJsLTE3LjMtMTcuM2MtMzIuNC0zMi40LTg1LjItMzIuNC0xMTcuNiwwbC0xMTUsMTE1Yy0zMi40LDMyLjQtMzIuNCw4NS4yLDAsMTE3LjZjNS4zLDUuMywxMy44LDUuMywxOS4xLDAgICAgczUuMy0xMy44LDAtMTkuMWMtMjEuOS0yMS45LTIxLjktNTcuNSwwLTc5LjRsMTE1LTExNWMyMS45LTIxLjksNTcuNS0yMS45LDc5LjQsMGwxNy4zLDE3LjNjMjEuOSwyMS45LDIxLjksNTcuNSwwLDc5LjRsLTExNSwxMTUgICAgYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsMTE1LTExNWMxNS43LTE1LjcsMjQuNC0zNi42LDI0LjQtNTguOCAgICBDNDgyLjgsOTQuOCw0NzQuMiw3My45LDQ1OC41LDU4LjJ6IiBmaWxsPSIjMDBiYWM3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==") no-repeat center/cover;
51+
width: $size*.8;
52+
height: $size*.8;
53+
}
54+
}
55+
}
56+
}
57+
58+
h1, & > h2 {
59+
& + p {
60+
font-size: 1.35em;
61+
}
62+
63+
a,
64+
a:link,
65+
a:target,
66+
a:focus,
67+
a:hover {
68+
color: inherit;
69+
text-decoration: none;
70+
}
71+
}
72+
4373
h3 {
4474
font-size: 1.5em;
4575
font-weight: 600;
@@ -70,4 +100,16 @@ article {
70100
margin-bottom: 0;
71101
}
72102
}
103+
&#dropdown {
104+
nav > ul {
105+
display: flex;
106+
flex-flow: row wrap;
107+
justify-content: center;
108+
font-size: 1em;
109+
> * {
110+
margin: 0 10px;
111+
padding: 5px;
112+
}
113+
}
114+
}
73115
}

‎src/_styles/content/_content.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "features";
22
@import "article";
3+
@import "slide";
34

45
$content-margin: (top), 50px;
56

‎src/_styles/content/_slide.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.slider {
2+
.slide__content {
3+
position: absolute;
4+
top: 20%;
5+
left: 0;
6+
background: rgba(0,0,0,.4);
7+
color: #fff;
8+
9+
font-size: 16px;
10+
line-height: 1.2;
11+
> p {
12+
font-size: 1em;
13+
white-space: initial;
14+
}
15+
> h2 {
16+
font-size: 1.9em;
17+
text-transform: capitalize;
18+
}
19+
20+
&.animated {
21+
overflow: hidden;
22+
width: 0;
23+
height: 0;
24+
border-radius: 0 5px 5px 0;
25+
> * {
26+
transform: translate(110%);
27+
}
28+
}
29+
}
30+
@for $i from 1 through 4 {
31+
> input:nth-of-type(#{$i}):checked ~ ul li:nth-of-type(#{$i}) .slide__content.animated {
32+
transition: .5s .4s;
33+
width: 60%;
34+
height: auto;
35+
padding: 10px;
36+
> * {
37+
transform: translate(0);
38+
transition: .5s .9s;
39+
}
40+
}
41+
}
42+
}

0 commit comments

Comments
 (0)