Skip to content

Commit cad3753

Browse files
zoglozoglo
committed
Make overflow options responsive
1 parent ed0d31e commit cad3753

File tree

3 files changed

+86
-6
lines changed

3 files changed

+86
-6
lines changed

‎contao/templates/style-manager-slider.xml

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<field title="alias">init</field>
1515
<field title="title">Slider Active</field>
1616
<field title="description">Here you define whether the slider for this element should be initialized.</field>
17-
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:27:"init-slider init-tns-slider";s:5:"value";s:7:"Default";}i:1;a:2:{s:3:"key";s:34:"init-slider init-tns-slider tns-ov";s:5:"value";s:8:"Overflow";}}</field>
17+
<field title="cssClasses">a:1:{i:0;a:2:{s:3:"key";s:27:"init-slider init-tns-slider";s:5:"value";s:3:"Yes";}}</field>
1818
<field title="chosen">1</field>
1919
<field title="blankOption">1</field>
2020
<field title="extendContentElement">1</field>
@@ -225,6 +225,19 @@
225225
<field title="extendModule">1</field>
226226
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
227227
</child>
228+
<child alias="overflow">
229+
<field title="pid">10020</field>
230+
<field title="sorting">1050</field>
231+
<field title="alias">overflow</field>
232+
<field title="title">Overflow</field>
233+
<field title="description">Allows overflowing the slider items.</field>
234+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:5:"t-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:5:"t-ovv";s:5:"value";s:7:"Visible";}}</field>
235+
<field title="blankOption">1</field>
236+
<field title="extendContentElement">1</field>
237+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
238+
<field title="extendModule">1</field>
239+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
240+
</child>
228241
<child alias="items">
229242
<field title="pid">10020</field>
230243
<field title="sorting">1100</field>
@@ -566,6 +579,19 @@
566579
<field title="extendModule">1</field>
567580
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
568581
</child>
582+
<child alias="overflow">
583+
<field title="pid">10030</field>
584+
<field title="sorting">550</field>
585+
<field title="alias">overflow</field>
586+
<field title="title">Overflow</field>
587+
<field title="description">Allows overflowing the slider items.</field>
588+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:8:"t-xs-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:8:"t-xs-ovv";s:5:"value";s:7:"Visible";}}</field>
589+
<field title="blankOption">1</field>
590+
<field title="extendContentElement">1</field>
591+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
592+
<field title="extendModule">1</field>
593+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
594+
</child>
569595
<child alias="items">
570596
<field title="pid">10030</field>
571597
<field title="sorting">600</field>
@@ -847,6 +873,19 @@
847873
<field title="extendModule">1</field>
848874
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
849875
</child>
876+
<child alias="overflow">
877+
<field title="pid">10040</field>
878+
<field title="sorting">550</field>
879+
<field title="alias">overflow</field>
880+
<field title="title">Overflow</field>
881+
<field title="description">Allows overflowing the slider items.</field>
882+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:7:"t-s-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:7:"t-s-ovv";s:5:"value";s:7:"Visible";}}</field>
883+
<field title="blankOption">1</field>
884+
<field title="extendContentElement">1</field>
885+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
886+
<field title="extendModule">1</field>
887+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
888+
</child>
850889
<child alias="items">
851890
<field title="pid">10040</field>
852891
<field title="sorting">600</field>
@@ -1128,6 +1167,19 @@
11281167
<field title="extendModule">1</field>
11291168
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
11301169
</child>
1170+
<child alias="overflow">
1171+
<field title="pid">10050</field>
1172+
<field title="sorting">550</field>
1173+
<field title="alias">overflow</field>
1174+
<field title="title">Overflow</field>
1175+
<field title="description">Allows overflowing the slider items.</field>
1176+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:7:"t-m-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:7:"t-m-ovv";s:5:"value";s:7:"Visible";}}</field>
1177+
<field title="blankOption">1</field>
1178+
<field title="extendContentElement">1</field>
1179+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
1180+
<field title="extendModule">1</field>
1181+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
1182+
</child>
11311183
<child alias="items">
11321184
<field title="pid">10050</field>
11331185
<field title="sorting">600</field>
@@ -1409,6 +1461,19 @@
14091461
<field title="extendModule">1</field>
14101462
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
14111463
</child>
1464+
<child alias="overflow">
1465+
<field title="pid">10060</field>
1466+
<field title="sorting">550</field>
1467+
<field title="alias">overflow</field>
1468+
<field title="title">Overflow</field>
1469+
<field title="description">Allows overflowing the slider items.</field>
1470+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:7:"t-l-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:7:"t-l-ovv";s:5:"value";s:7:"Visible";}}</field>
1471+
<field title="blankOption">1</field>
1472+
<field title="extendContentElement">1</field>
1473+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
1474+
<field title="extendModule">1</field>
1475+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
1476+
</child>
14121477
<child alias="items">
14131478
<field title="pid">10060</field>
14141479
<field title="sorting">600</field>
@@ -1690,6 +1755,19 @@
16901755
<field title="extendModule">1</field>
16911756
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
16921757
</child>
1758+
<child alias="overflow">
1759+
<field title="pid">10070</field>
1760+
<field title="sorting">550</field>
1761+
<field title="alias">overflow</field>
1762+
<field title="title">Overflow</field>
1763+
<field title="description">Allows overflowing the slider items.</field>
1764+
<field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:8:"t-xl-ovh";s:5:"value";s:6:"Hidden";}i:1;a:2:{s:3:"key";s:8:"t-xl-ovv";s:5:"value";s:7:"Visible";}}</field>
1765+
<field title="blankOption">1</field>
1766+
<field title="extendContentElement">1</field>
1767+
<field title="contentElements">a:7:{i:0;s:19:"rsce_icon_text_list";i:1;s:15:"rsce_image_list";i:2;s:20:"rsce_image_text_list";i:3;s:14:"rsce_text_list";i:4;s:12:"wrapperStart";i:5;s:19:"wrapperStartContent";i:6;s:7:"gallery";}</field>
1768+
<field title="extendModule">1</field>
1769+
<field title="modules">a:2:{i:0;s:8:"newslist";i:1;s:9:"eventlist";}</field>
1770+
</child>
16931771
<child alias="items">
16941772
<field title="pid">10070</field>
16951773
<field title="sorting">600</field>

‎public/framework/scss/ctm_base-tns/_defaults.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
}
4848

4949
.init-slider {
50+
--tn-ov:hidden;
5051
--tn:var(--tn-1);
5152
--tn-a:var(--tn-1-a);
5253
--tb:var(--tb-1);
@@ -57,12 +58,8 @@
5758

5859
> .inside,
5960
> .tns-outer {
60-
overflow: hidden;
61+
overflow: var(--tn-ov);
6162
margin: calc(var(--t-gtr) * -1);
62-
63-
@at-root #{selector-append('.tns-ov', &)} {
64-
overflow: visible;
65-
}
6663
}
6764

6865
> .inside > .c_headline {

‎public/framework/scss/ctm_layout-tns/_layout.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,10 @@
6363
--tn-m:0 #{divide($grid-gutter-width, 2)},
6464
--tn-dsp:flex
6565
)
66+
),
67+
// Overflows
68+
'.t': (
69+
'&-ovh': (--tn-ov:hidden),
70+
'&-ovv': (--tn-ov:visible)
6671
)
6772
));

0 commit comments

Comments
 (0)