Skip to content

Commit f20d70e

Browse files
rajasegarrajasegar
committed
Added new rect styles, updown, slide2,3,4
1 parent 6c4e737 commit f20d70e

File tree

4 files changed

+367
-4
lines changed

4 files changed

+367
-4
lines changed

‎README.MD‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
# Pure CSS Toggle Web component
77
Pure CSS Toggle Buttons - ON-OFF Switches
88

9-
- 11 different style effects to choose from
9+
- 16 different style effects to choose from
1010
- Keyboard Accessible (You can able to toggle using Space keys)
1111
- Screenreader discoverability
1212

@@ -37,7 +37,13 @@ Pass on any one of the following values for different toggle effects to `theme`
3737
- rect-slide
3838
- rect-flip
3939
- rect-move
40-
- rect-hide
40+
- rect-hide
41+
- rect-updown
42+
- rect-zoomin
43+
- rect-slide2
44+
- rect-slide3
45+
- rect-slide4
46+
4147

4248
## Things to do
4349
- Bring focus to the component when using Tab keys for navigation

‎index.js‎

Lines changed: 310 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
(function() {
2-
const rectangleStyles = ["rect-slide", "rect-flip", "rect-move", "rect-hide"];
2+
const rectangleStyles = [
3+
"rect-slide",
4+
"rect-flip",
5+
"rect-move",
6+
"rect-hide",
7+
"rect-updown",
8+
"rect-zoomin",
9+
"rect-slide2",
10+
"rect-slide3",
11+
"rect-slide4"
12+
];
313

414
const addSpan = ["flip", "fadeout", "slideall"];
515

616
const template = document.createElement("template");
17+
718
const commonStyles = `
819
.button
920
{
@@ -717,6 +728,304 @@ transform: scale(4);
717728
}
718729
719730
.rect-hide .checkbox:checked ~ .layer
731+
{
732+
background-color: #fcebeb;
733+
}
734+
/* Rectangle Updown */
735+
.rect-updown .knobs:before, .rect-updown .knobs:after, .rect-updown .knobs span:before, .rect-updown .knobs span:after
736+
{
737+
position: absolute;
738+
top: 4px;
739+
width: 20px;
740+
height: 10px;
741+
font-size: 10px;
742+
font-weight: bold;
743+
text-align: center;
744+
line-height: 1;
745+
padding: 9px 4px;
746+
border-radius: 2px;
747+
transition: 0.3s ease all;
748+
}
749+
750+
.rect-updown .knobs:before, .rect-updown .knobs:after
751+
{
752+
color: #4e4e4e;
753+
z-index: 1;
754+
}
755+
756+
.rect-updown .knobs:before
757+
{
758+
content: attr(data-yes);
759+
left: 4px;
760+
}
761+
762+
.rect-updown .knobs:after
763+
{
764+
content: attr(data-no);
765+
right: 4px;
766+
}
767+
768+
.rect-updown .knobs span
769+
{
770+
top: 0;
771+
left: 0;
772+
display: block;
773+
width: 100%;
774+
height: 100%;
775+
}
776+
777+
.rect-updown .knobs span:before
778+
{
779+
left: 4px;
780+
top: -28px;
781+
background-color: #F44336;
782+
}
783+
784+
.rect-updown .knobs span:after
785+
{
786+
top: 4px;
787+
left: 39px;
788+
background-color: #03A9F4;
789+
}
790+
791+
.rect-updown .knobs span:before, .rect-updown .knobs span:after
792+
{
793+
content: '';
794+
width: 23px;
795+
z-index: 2;
796+
}
797+
798+
.rect-updown .checkbox:checked + .knobs span:before
799+
{
800+
top: 4px;
801+
}
802+
803+
.rect-updown .checkbox:checked + .knobs span:after
804+
{
805+
top: -28px;
806+
}
807+
808+
.rect-updown .checkbox:checked ~ .layer
809+
{
810+
background-color: #fcebeb;
811+
}
812+
/* Rectangle Zoom-in */
813+
.rect-zoomin .knobs:before, .rect-zoomin .knobs:after
814+
{
815+
position: absolute;
816+
top: 4px;
817+
width: 20px;
818+
height: 10px;
819+
color: #fff;
820+
font-size: 10px;
821+
font-weight: bold;
822+
text-align: center;
823+
line-height: 1;
824+
padding: 9px 4px;
825+
opacity: 1;
826+
border-radius: 2px;
827+
transform: scale(1);
828+
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
829+
}
830+
831+
.rect-zoomin .knobs:before
832+
{
833+
content: attr(data-yes);
834+
left: 4px;
835+
background-color: #03A9F4;
836+
}
837+
838+
.rect-zoomin .knobs:after
839+
{
840+
content: attr(data-no);
841+
right: 4px;
842+
opacity: 0;
843+
transform: scale(4);
844+
background-color: #F44336;
845+
}
846+
847+
.rect-zoomin .checkbox:checked + .knobs:before
848+
{
849+
opacity: 0;
850+
transform: scale(4);
851+
}
852+
853+
.rect-zoomin .checkbox:checked + .knobs:after
854+
{
855+
opacity: 1;
856+
transform: scale(1);
857+
}
858+
859+
.rect-zoomin .checkbox:checked ~ .layer
860+
{
861+
background-color: #fcebeb;
862+
}
863+
/* Rectangle Slide v2 */
864+
.rect-slide2 .knobs:before
865+
{
866+
content: attr(data-yes);
867+
position: absolute;
868+
top: 4px;
869+
left: 4px;
870+
width: 20px;
871+
height: 10px;
872+
color: #fff;
873+
font-size: 10px;
874+
font-weight: bold;
875+
text-align: center;
876+
line-height: 1;
877+
padding: 9px 4px;
878+
background-color: #03A9F4;
879+
border-radius: 2px;
880+
transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
881+
}
882+
883+
.rect-slide2 .checkbox:active + .knobs:before
884+
{
885+
width: 46px;
886+
}
887+
888+
.rect-slide2 .checkbox:checked:active + .knobs:before
889+
{
890+
margin-left: -26px;
891+
}
892+
893+
.rect-slide2 .checkbox:checked + .knobs:before
894+
{
895+
content: attr(data-no)';
896+
left: 42px;
897+
background-color: #F44336;
898+
}
899+
900+
.rect-slide2 .checkbox:checked ~ .layer
901+
{
902+
background-color: #fcebeb;
903+
}
904+
/* Rectangle Slide v3 */
905+
.rect-slide3 .knobs:before, .rect-slide3 .knobs span
906+
{
907+
content: attr(data-yes)';
908+
position: absolute;
909+
top: 4px;
910+
left: 4px;
911+
width: 20px;
912+
height: 10px;
913+
color: #fff;
914+
font-size: 10px;
915+
font-weight: bold;
916+
text-align: center;
917+
line-height: 1;
918+
padding: 9px 4px;
919+
}
920+
921+
.rect-slide3 .knobs:before
922+
{
923+
transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
924+
z-index: 2;
925+
}
926+
927+
.rect-slide3 .knobs span
928+
{
929+
background-color: #03A9F4;
930+
border-radius: 2px;
931+
transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
932+
z-index: 1;
933+
}
934+
935+
.rect-slide3 .checkbox:checked + .knobs:before
936+
{
937+
content: attr(data-no)';
938+
left: 42px;
939+
}
940+
941+
.rect-slide3 .checkbox:checked + .knobs span
942+
{
943+
left: 42px;
944+
background-color: #F44336;
945+
}
946+
947+
.rect-slide3 .checkbox:checked ~ .layer
948+
{
949+
background-color: #fcebeb;
950+
}
951+
/* Rectangle Slide v4 */
952+
.rect-slide4 .knobs:before, .rect-slide4 .knobs span
953+
{
954+
content: attr(data-yes)';
955+
position: absolute;
956+
top: 4px;
957+
left: 4px;
958+
color: #fff;
959+
font-size: 10px;
960+
font-weight: bold;
961+
text-align: center;
962+
line-height: 1;
963+
background-color: #03A9F4;
964+
border-radius: 2px;
965+
}
966+
967+
.rect-slide4 .knobs:before
968+
{
969+
top: 50%;
970+
left: 8px;
971+
width: 20px;
972+
height: 10px;
973+
margin-top: -5px;
974+
background-color: transparent;
975+
z-index: 2;
976+
}
977+
978+
.rect-slide4 .knobs span
979+
{
980+
width: 20px;
981+
height: 10px;
982+
padding: 9px 4px;
983+
transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
984+
z-index: 1;
985+
}
986+
987+
.rect-slide4 .checkbox:active + .knobs:before
988+
{
989+
left: 10px;
990+
width: 46px;
991+
height: 4px;
992+
color: transparent;
993+
margin-top: -2px;
994+
background-color: #0095d8;
995+
transition: 0.3s ease all;
996+
overflow: hidden;
997+
}
998+
999+
.rect-slide4 .checkbox:active + .knobs span
1000+
{
1001+
width: 58px;
1002+
}
1003+
1004+
.rect-slide4 .checkbox:checked:active + .knobs:before
1005+
{
1006+
left: auto;
1007+
right: 10px;
1008+
background-color: #d80000;
1009+
}
1010+
1011+
.rect-slide4 .checkbox:checked:active + .knobs span
1012+
{
1013+
margin-left: -38px;
1014+
}
1015+
1016+
.rect-slide4 .checkbox:checked + .knobs:before
1017+
{
1018+
content: attr(data-no)';
1019+
left: 47px;
1020+
}
1021+
1022+
.rect-slide4 .checkbox:checked + .knobs span
1023+
{
1024+
left: 42px;
1025+
background-color: #F44336;
1026+
}
1027+
1028+
.rect-slide4 .checkbox:checked ~ .layer
7201029
{
7211030
background-color: #fcebeb;
7221031
}

0 commit comments

Comments
 (0)