Skip to content

Commit b4a3741

Browse files
Muskan Guptaci-build
Muskan Gupta
authored and
ci-build
committed
Updating style for switch
1 parent eff155f commit b4a3741

File tree

2 files changed

+188
-46
lines changed
  • ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch

2 files changed

+188
-46
lines changed

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ JavaScript handling for dialog interaction. It is already included by its edit d
5252
```
5353
BLOCK cmp-adaptiveform-switch
5454
ELEMENT cmp-adaptiveform-switch__label-container
55+
ELEMENT cmp-adaptiveform-switch__label
5556
ELEMENT cmp-adaptiveform-switch__container
5657
ELEMENT cmp-adaptiveform-switch__option
5758
ELEMENT cmp-adaptiveform-switch__option--off

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/_cq_styleConfig/.content.xml‎

Lines changed: 187 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,62 +15,203 @@
1515
jcr:title="Switch"
1616
id="af_switchwidgetandtext"
1717
cssSelector=".cmp-adaptiveform-switch"
18-
longTitle="Switch Widget"
18+
longTitle="Switch Handle Widget"
1919
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common"
2020
secondarySelectors="af_guideContainer:af_widgetAndText">
2121
<items jcr:primaryType="nt:unstructured">
22-
<handle
23-
jcr:primaryType="nt:unstructured"
24-
jcr:title="Handle"
25-
id="af_switchhandle"
26-
cssSelector=".cmp-adaptiveform-switch__circle-indicator"
27-
longTitle="Switch Handle"
28-
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
22+
<switchLabelContainer
23+
jcr:primaryType="nt:unstructured"
24+
jcr:title="Label Container"
25+
id="af_switchlabelcontainer"
26+
cssSelector=".cmp-adaptiveform-switch__label-container"
27+
longTitle="Switch Label Container"
28+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
29+
<items jcr:primaryType="nt:unstructured">
30+
<switchLabel
31+
jcr:primaryType="nt:unstructured"
32+
jcr:title="Label"
33+
id="af_switchlabel"
34+
cssSelector=".cmp-adaptiveform-switch__label"
35+
longTitle="Switch Label"
36+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
37+
<states jcr:primaryType="nt:unstructured">
38+
<hover
39+
jcr:primaryType="nt:unstructured"
40+
jcr:title="Hover"
41+
cssSelector=".cmp-adaptiveform-switch__label:hover"/>
42+
<focus
43+
jcr:primaryType="nt:unstructured"
44+
jcr:title="Focus"
45+
cssSelector=".cmp-adaptiveform-switch__label:focus"/>
46+
</states>
47+
</switchLabel>
48+
<switchHelpIcon
49+
jcr:primaryType="nt:unstructured"
50+
jcr:title="Help Icon"
51+
id="af_switchhelpicon"
52+
cssSelector=".cmp-adaptiveform-switch__questionmark"
53+
longTitle="Switch Help Icon"
54+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common"
55+
secondarySelectors="af_guideContainer:af_helpicon">
56+
<states jcr:primaryType="nt:unstructured">
57+
<focus
58+
jcr:primaryType="nt:unstructured"
59+
jcr:title="Focus"
60+
cssSelector=".cmp-adaptiveform-switch__questionmark:focus"/>
61+
<hover
62+
jcr:primaryType="nt:unstructured"
63+
jcr:title="Hover"
64+
cssSelector=".cmp-adaptiveform-switch__questionmark:hover"/>
65+
<disabled
66+
jcr:primaryType="nt:unstructured"
67+
jcr:title="Disabled"
68+
cssSelector=".cmp-adaptiveform-switch__questionmark:disabled"/>
69+
</states>
70+
</switchHelpIcon>
71+
</items>
2972
<states jcr:primaryType="nt:unstructured">
30-
<focus
31-
jcr:primaryType="nt:unstructured"
32-
jcr:title="Focus"
33-
cssSelector=".cmp-adaptiveform-switch__widget:focus + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
3473
<disabled
35-
jcr:primaryType="nt:unstructured"
36-
jcr:title="Disabled"
37-
cssSelector=".cmp-adaptiveform-switch__widget:disabled + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
74+
jcr:primaryType="nt:unstructured"
75+
jcr:title="Disabled"
76+
cssSelector="cmp-adaptiveform-switch__label-container:disabled"/>
3877
<hover
39-
jcr:primaryType="nt:unstructured"
40-
jcr:title="Hover"
41-
cssSelector=".cmp-adaptiveform-switch__widget:hover + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
42-
<checked
43-
jcr:primaryType="nt:unstructured"
44-
jcr:title="Selected"
45-
cssSelector=".cmp-adaptiveform-switch__widget:checked + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
46-
</states>
47-
</handle>
48-
<switchLabel
49-
jcr:primaryType="nt:unstructured"
50-
jcr:title="Label"
51-
id="af_switchonlabel"
52-
cssSelector=".cmp-adaptiveform-switch__widget-slider"
53-
longTitle="Switch Label"
54-
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
78+
jcr:primaryType="nt:unstructured"
79+
jcr:title="Hover"
80+
cssSelector="cmp-adaptiveform-switch__label-container:hover"/>
81+
<focus
82+
jcr:primaryType="nt:unstructured"
83+
jcr:title="Focus"
84+
cssSelector="cmp-adaptiveform-switch__label-container:focus"/>
85+
</states>
86+
</switchLabelContainer>
87+
<switchContainer
88+
jcr:primaryType="nt:unstructured"
89+
jcr:title="Switch Widget Container"
90+
id="af_switchwidgetcontainer"
91+
cssSelector=".cmp-adaptiveform-switch__container"
92+
longTitle="Switch Widget Container"
93+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
94+
<items jcr:primaryType="nt:unstructured">
95+
<switchOption
96+
jcr:primaryType="nt:unstructured"
97+
jcr:title="Option"
98+
id="af_switchoption"
99+
cssSelector=".cmp-adaptiveform-switch__option"
100+
longTitle="Switch Option"
101+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
102+
<states jcr:primaryType="nt:unstructured">
103+
<hover
104+
jcr:primaryType="nt:unstructured"
105+
jcr:title="Hover"
106+
cssSelector=".cmp-adaptiveform-switch__option:hover"/>
107+
<focus
108+
jcr:primaryType="nt:unstructured"
109+
jcr:title="Focus"
110+
cssSelector=".cmp-adaptiveform-switch__option:focus"/>
111+
</states>
112+
</switchOption>
113+
<switchWidget
114+
jcr:primaryType="nt:unstructured"
115+
jcr:title="Widget"
116+
id="af_switchwidget"
117+
cssSelector=".adaptiveform-switch__widget-label"
118+
longTitle="Switch Widget"
119+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
120+
<states jcr:primaryType="nt:unstructured">
121+
<hover
122+
jcr:primaryType="nt:unstructured"
123+
jcr:title="Hover"
124+
cssSelector=".cmp-adaptiveform-switch__widget-label:hover"/>
125+
<focus
126+
jcr:primaryType="nt:unstructured"
127+
jcr:title="Focus"
128+
cssSelector=".cmp-adaptiveform-switch__widget-label:focus"/>
129+
<disabled
130+
jcr:primaryType="nt:unstructured"
131+
jcr:title="Disabled"
132+
cssSelector=".cmp-adaptiveform-switch__widget-label:disabled"/>
133+
</states>
134+
</switchWidget>
135+
<switchHandle
136+
jcr:primaryType="nt:unstructured"
137+
jcr:title="Handle"
138+
id="af_switchhandle"
139+
cssSelector=".cmp-adaptiveform-switch__circle-indicator"
140+
longTitle="Switch Handle"
141+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
142+
<states jcr:primaryType="nt:unstructured">
143+
<focus
144+
jcr:primaryType="nt:unstructured"
145+
jcr:title="Focus"
146+
cssSelector=".cmp-adaptiveform-switch__widget:focus + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
147+
<disabled
148+
jcr:primaryType="nt:unstructured"
149+
jcr:title="Disabled"
150+
cssSelector=".cmp-adaptiveform-switch__widget:disabled + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
151+
<hover
152+
jcr:primaryType="nt:unstructured"
153+
jcr:title="Hover"
154+
cssSelector=".cmp-adaptiveform-switch__widget:hover + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
155+
<checked
156+
jcr:primaryType="nt:unstructured"
157+
jcr:title="Selected"
158+
cssSelector=".cmp-adaptiveform-switch__widget:checked + .cmp-adaptiveform-switch__widget-slider .cmp-adaptiveform-switch__circle-indicator"/>
159+
</states>
160+
</switchHandle>
161+
<switchSlider
162+
jcr:primaryType="nt:unstructured"
163+
jcr:title="Slider"
164+
id="af_switchonlabel"
165+
cssSelector=".cmp-adaptiveform-switch__widget-slider"
166+
longTitle="Switch Slider"
167+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
168+
<states jcr:primaryType="nt:unstructured">
169+
<focus
170+
jcr:primaryType="nt:unstructured"
171+
jcr:title="Focus"
172+
cssSelector=".cmp-adaptiveform-switch__widget:focus + .cmp-adaptiveform-switch__widget-slider"/>
173+
<disabled
174+
jcr:primaryType="nt:unstructured"
175+
jcr:title="Disabled"
176+
cssSelector=".cmp-adaptiveform-switch__widget:disabled + .cmp-adaptiveform-switch__widget-slider"/>
177+
<hover
178+
jcr:primaryType="nt:unstructured"
179+
jcr:title="Hover"
180+
cssSelector=".cmp-adaptiveform-switch__widget:hover + .cmp-adaptiveform-switch__widget-slider"/>
181+
<checked
182+
jcr:primaryType="nt:unstructured"
183+
jcr:title="Selected"
184+
cssSelector=".cmp-adaptiveform-switch__widget:checked + .cmp-adaptiveform-switch__widget-slider"/>
185+
</states>
186+
</switchSlider>
187+
</items>
188+
</switchContainer>
189+
<switchDescriptionShort
190+
jcr:primaryType="nt:unstructured"
191+
jcr:title="Short Description"
192+
id="af_switchdescriptionshort"
193+
cssSelector=".cmp-adaptiveform-switch__shortdescription"
194+
longTitle="Switch Short Description"
195+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
196+
</switchDescriptionShort>
197+
<switchDescriptionLong
198+
jcr:primaryType="nt:unstructured"
199+
jcr:title="Long Description"
200+
id="af_switchdescriptionlong"
201+
cssSelector=".cmp-adaptiveform-switch__longdescription"
202+
longTitle="Switch Long Description"
203+
propertySheet="/mnt/overlay/fd/af/components/stylePropertySheet/common">
55204
<states jcr:primaryType="nt:unstructured">
56205
<focus
57-
jcr:primaryType="nt:unstructured"
58-
jcr:title="Focus"
59-
cssSelector=".cmp-adaptiveform-switch__widget:focus + .cmp-adaptiveform-switch__widget-slider"/>
60-
<disabled
61-
jcr:primaryType="nt:unstructured"
62-
jcr:title="Disabled"
63-
cssSelector=".cmp-adaptiveform-switch__widget:disabled + .cmp-adaptiveform-switch__widget-slider"/>
206+
jcr:primaryType="nt:unstructured"
207+
jcr:title="Focus"
208+
cssSelector=".cmp-adaptiveform-switch__longdescription:focus"/>
64209
<hover
65-
jcr:primaryType="nt:unstructured"
66-
jcr:title="Hover"
67-
cssSelector=".cmp-adaptiveform-switch__widget:hover + .cmp-adaptiveform-switch__widget-slider"/>
68-
<checked
69-
jcr:primaryType="nt:unstructured"
70-
jcr:title="Selected"
71-
cssSelector=".cmp-adaptiveform-switch__widget:checked + .cmp-adaptiveform-switch__widget-slider"/>
210+
jcr:primaryType="nt:unstructured"
211+
jcr:title="Hover"
212+
cssSelector=".cmp-adaptiveform-switch__longdescription:hover"/>
72213
</states>
73-
</switchLabel>
214+
</switchDescriptionLong>
74215
</items>
75216
<states jcr:primaryType="nt:unstructured">
76217
<checked

0 commit comments

Comments
 (0)