This post is about styling and define the check box as apple style swiping as we use regularly in iPhone /iPad
To Achieve this we have to use check box and below CSS styles
After creating project
Step 1:
drag check box in container and create style sheet
Step 2 :
Add the following code in css file
/* added for swipe functionality - Start */
.sapUiCb > label {
color: #ffffff;
display: block;
height: 18px;
line-height: 15px;
vertical-align: middle;
position: relative;
width: 66px;
/*border-radius*/
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #00b0f0;
cursor: pointer;
padding-left:0px;
padding-right:0px;
}
.sapUiCb > label:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 12px;
width: 12px;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 2px;
left: 1px;
right: auto;
background: white;
/*box-shadow*/
-webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
/*transition*/
-webkit-transition:5000ms ease-in-out 2s;
-moz-transition:5000ms ease-in-out 2s;
-o-transition:5000ms ease-in-out 2s;
transition:5000ms ease-in-out 2s;
}
.sapUiCb > label:after {
content: attr(data-off);
display: block;
position: absolute;
z-index: 0;
top: 0;
left: -300px;
padding: 10px;
height: 100%;
width: 300px;
color: #bfbfbf;
white-space: nowrap;
/*transition*/
-webkit-transition:5000ms ease-in-out 2s;
-moz-transition:5000ms ease-in-out 2s;
-o-transition:5000ms ease-in-out 2s;
transition:5000ms ease-in-out 2s;
}
.sapUiCb input[type=checkbox]:checked + label {
/*box-shadow*/
box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);
-webkit-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);
-moz-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);
height: 18px;
color: #000000;
display: block;
vertical-align: middle;
position: relative;
width: 66px;
/*border-radius*/
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #f8f8f8;
cursor: pointer;
/*transition*/
-webkit-transition:5000ms ease-in-out 2s;
-moz-transition:5000ms ease-in-out 2s;
-o-transition:5000ms ease-in-out 2s;
transition:5000ms ease-in-out 2s;
}
.sapUiCb input[type=checkbox]:checked + label:before {
left: calc(100% - 14px);
/*box-shadow*/
-webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);
/*transition*/
-webkit-transition:5000ms ease-in-out 2s;
-moz-transition:5000ms ease-in-out 2s;
-o-transition:5000ms ease-in-out 2s;
transition:5000ms ease-in-out 2s;
}
.sapUiCb input[type=checkbox]:checked + label:after {
content: attr(data-on);
left: 60px;
width: 36px;
}
.sapUiCb {
line-height: 14px;
font-size: 16px !important;
width:20px;
overflow:visible !important;
/*Custom Style on 28-june-15*/
text-align:center;
font-weight:bold;
/*transition*/
-webkit-transition:5000ms ease-in-out 2s;
-moz-transition:5000ms ease-in-out 2s;
-o-transition:5000ms ease-in-out 2s;
transition:5000ms ease-in-out 2s;
}
.sapUiCb:focus {
outline: 0 !important;
}
.sapUiCb input[type=checkbox] {
display: none;
}
/* added for swipe functionality - End */
Step 3:
After saving, select check box and in the left side panel choose on Click option enter following code as shown in the below images
That is All You can get following way of design
Thank you if any quires revert me
- SAP Managed Tags:
