diff --git a/README.md b/README.md index 55581f6..f98f817 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,20 @@ For Some projects you will need custom color so you can do it with small CSS background: #c0392b; /*this is btn of switch that should be darker color*/ } +# iOS Style + +If you are an iOS fan, you can have iOS style too + +just add `ios` class in label class list + +all sizing and colors works fine + + + # licence and cast MIT Licence diff --git a/clean-switch.css b/clean-switch.css index 64c7d4a..3b49350 100644 --- a/clean-switch.css +++ b/clean-switch.css @@ -1,128 +1,325 @@ -.cl-switch { - /* - Switcher Style - */ - /* - When Checked - */ - /* - Switch large style - */ - /* - Switch xlarge style - */ - /* - Switch Black color style - */ - /* - Switch Red color style - */ - /* - Switch green color style - */ - /* - Switch green color style - */ } - .cl-switch input[type="checkbox"] { - display: none; - visibility: hidden; } - .cl-switch .switcher { - display: inline-block; - border-radius: 100px; - width: 35px; - height: 15px; - background-color: #ccc; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - vertical-align: middle; - cursor: pointer; } - .cl-switch .switcher:before { - content: ""; - display: block; - width: 20px; - height: 20px; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); - border-radius: 50%; - margin-top: -2.5px; - position: absolute; - top: 0; - right: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-right: 0; - -webkit-transition: all 0.2s; - -moz-transition: all 0.2s; - -ms-transition: all 0.2s; - -o-transition: all 0.2s; - transition: all 0.2s; } - .cl-switch .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(63, 81, 181, 0.3); - transition: all, 0.1s; } - .cl-switch .label { - font-family: "Roboto", sans-serif; - cursor: pointer; - vertical-align: middle; - margin: 0 5px; } - .cl-switch input[type="checkbox"]:checked + .switcher { - background-color: #8591d5; } - .cl-switch input[type="checkbox"]:checked + .switcher:before { - right: 100%; - margin-right: -20px; - background-color: #3f51b5; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher { - background: #ccc !important; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher:active:before { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher:before { - background-color: #e2e2e2 !important; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } - .cl-switch.cl-switch-large .switcher { - width: 52px; - height: 22px; } - .cl-switch.cl-switch-large .switcher:before { - width: 30px; - height: 30px; - margin-top: -4px; } - .cl-switch.cl-switch-large .label { - font-size: 18px; } - .cl-switch.cl-switch-large input[type="checkbox"]:checked + .switcher:before { - margin-right: -30px; } - .cl-switch.cl-switch-xlarge .switcher { - width: 87px; - height: 37px; } - .cl-switch.cl-switch-xlarge .switcher:before { - width: 50px; - height: 50px; - margin-top: -6px; } - .cl-switch.cl-switch-xlarge .label { - font-size: 24px; } - .cl-switch.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { - margin-right: -50px; } - .cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher { - background-color: #676767; } - .cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher:before { - background-color: #343434; } - .cl-switch.cl-switch-black .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(52, 52, 52, 0.3); } - .cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher { - background-color: #ffcece; } - .cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher:before { - background-color: #ff6868; } - .cl-switch.cl-switch-red .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 104, 104, 0.3); } - .cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher { - background-color: #77e4c0; } - .cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher:before { - background-color: #29cc97; } - .cl-switch.cl-switch-green .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(41, 204, 151, 0.3); } - .cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher { - background-color: #ffc166; } - .cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { - background-color: #ff9800; } - .cl-switch.cl-switch-orange .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 152, 0, 0.3); } +.cl-switch input[type="checkbox"] { + display: none; + visibility: hidden; +} + +.cl-switch .switcher { + display: inline-block; + border-radius: 100px; + width: 35px; + height: 15px; + background-color: #ccc; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + cursor: pointer; +} + +.cl-switch .switcher:before { + content: ""; + display: block; + width: 20px; + height: 20px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); + border-radius: 50%; + margin-top: -2.5px; + position: absolute; + top: 0; + right: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-right: 0; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} + +.cl-switch .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(63, 81, 181, 0.3); + transition: all, 0.1s; +} + +.cl-switch .label { + font-family: "Roboto", sans-serif; + cursor: pointer; + vertical-align: middle; + margin: 0 5px; +} + +.cl-switch input[type="checkbox"]:checked + .switcher { + background-color: #8591d5; +} + +.cl-switch input[type="checkbox"]:checked + .switcher:before { + right: 100%; + margin-right: -20px; + background-color: #3f51b5; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.cl-switch-large .switcher { + width: 52px; + height: 22px; +} + +.cl-switch.cl-switch-large .switcher:before { + width: 30px; + height: 30px; + margin-top: -4px; +} + +.cl-switch.cl-switch-large .label { + font-size: 18px; +} + +.cl-switch.cl-switch-large input[type="checkbox"]:checked + .switcher:before { + margin-right: -30px; +} + +.cl-switch.cl-switch-xlarge .switcher { + width: 87px; + height: 37px; +} + +.cl-switch.cl-switch-xlarge .switcher:before { + width: 50px; + height: 50px; + margin-top: -6px; +} + +.cl-switch.cl-switch-xlarge .label { + font-size: 24px; +} + +.cl-switch.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { + margin-right: -50px; +} + +.cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher { + background-color: #676767; +} + +.cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher:before { + background-color: #343434; +} + +.cl-switch.cl-switch-black .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(52, 52, 52, 0.3); +} + +.cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher { + background-color: #ffcece; +} + +.cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher:before { + background-color: #ff6868; +} + +.cl-switch.cl-switch-red .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 104, 104, 0.3); +} + +.cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher { + background-color: #77e4c0; +} + +.cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher:before { + background-color: #29cc97; +} + +.cl-switch.cl-switch-green .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(41, 204, 151, 0.3); +} + +.cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher { + background-color: #ffc166; +} + +.cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { + background-color: #ff9800; +} + +.cl-switch.cl-switch-orange .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 152, 0, 0.3); +} + +/* --------------------------------------------- +------------------[IOS style]---------------------------- + --------------------------------------------- */ + +.cl-switch.ios .switcher { + width: 45px; + height: 24px; + background-color: #fff; + border: 1px solid #d3d3d5; + box-shadow: 0 0 0 0 #4bd964 inset; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +.cl-switch.ios .switcher:before { + width: 24px; + height: 24px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + margin-top: 0; + top: -1px; + right: -1px; + margin-right: 0; + border: 1px solid #d3d3d5; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +.cl-switch.ios input[type="checkbox"]:checked + .switcher { + background-color: #fff; + box-shadow: 0 0 0 20px #4bd964 inset; +} + +.cl-switch.ios input[type="checkbox"]:checked + .switcher:before { + right: 100%; + margin-right: -22px; + background-color: #fff; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.ios.cl-switch-large .switcher { + width: 62px; + height: 34px; +} + +.cl-switch.ios.cl-switch-large .switcher:before { + width: 34px; + height: 34px; +} + +.cl-switch.ios.cl-switch-large .label { + font-size: 18px; +} + +.cl-switch.ios.cl-switch-large input[type="checkbox"]:checked + .switcher:before { + margin-right: -30px; +} + +.cl-switch.ios.cl-switch-xlarge .switcher { + width: 80px; + height: 40px; +} + +.cl-switch.ios.cl-switch-xlarge .switcher:before { + width: 40px; + height: 40px; + margin-top: 0; +} + +.cl-switch.ios.cl-switch-xlarge .label { + font-size: 24px; +} + +.cl-switch.ios.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { + margin-right: -39px; +} + +.cl-switch.ios.cl-switch-black .switcher { + box-shadow: 0 0 0 0 #343434 inset; +} + +.cl-switch.ios.cl-switch-black input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #343434 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-black input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-black .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-red .switcher { + box-shadow: 0 0 0 0 #ff6868 inset; +} + +.cl-switch.ios.cl-switch-red input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #ff6868 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-red input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-red .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-green .switcher { + box-shadow: 0 0 0 0 #29cc97 inset; +} + +.cl-switch.ios.cl-switch-green input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #29cc97 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-green input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-green .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-orange .switcher { + box-shadow: 0 0 0 0 #ff9800 inset; +} + +.cl-switch.ios.cl-switch-orange input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #ff9800 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-orange .switcher:active:before { + box-shadow: none; +} diff --git a/clean-switch.scss b/clean-switch.scss index a45a4d1..d7d1a44 100644 --- a/clean-switch.scss +++ b/clean-switch.scss @@ -3,6 +3,7 @@ $black-color: #343434; $red-color: #ff6868; $green-color: #29cc97; $orange-color: #ff9800; +$ios-green: #4bd964; .cl-switch { input[type="checkbox"] { @@ -81,19 +82,16 @@ $orange-color: #ff9800; background: #ccc !important; &:active:before { - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } &:before { background-color: #e2e2e2 !important; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } } - - - /* Switch large style */ @@ -103,9 +101,9 @@ $orange-color: #ff9800; height: 22px; &:before { - width:30px; - height:30px; - margin-top:-4px; + width: 30px; + height: 30px; + margin-top: -4px; } } @@ -130,9 +128,9 @@ $orange-color: #ff9800; height: 37px; &:before { - width:50px; - height:50px; - margin-top:-6px; + width: 50px; + height: 50px; + margin-top: -6px; } } @@ -166,6 +164,7 @@ $orange-color: #ff9800; 0 0 0 10px rgba($black-color, 0.3); } } + /* Switch Red color style */ @@ -223,3 +222,220 @@ $orange-color: #ff9800; } } } + +/* --------------------------------------------- +------------------[IOS style]---------------------------- + --------------------------------------------- */ + +.cl-switch.ios { + /* +Switcher Style + */ + .switcher { + width: 45px; + height: 24px; + background-color: #fff; + border: 1px solid #d3d3d5; + box-shadow: 0 0 0 0 $ios-green inset; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; + + &:before { + width: 24px; + height: 24px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + margin-top: 0; + top: -1px; + right: -1px; + margin-right: 0; + border: 1px solid #d3d3d5; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; + } + + } + + + + /* + When Checked + */ + input[type="checkbox"]:checked + .switcher { + background-color: #fff; + box-shadow: 0 0 0 20px $ios-green inset; + + &:before { + right: 100%; + margin-right: -22px; + background-color: #fff; + } + } + + & [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; + + &:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; + } + + &:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; + } + } + + + + /* + Switch large style + */ + &.cl-switch-large { + .switcher { + width: 62px; + height: 34px; + + &:before { + width: 34px; + height: 34px; + } + } + + .label { + font-size: 18px; + } + + input[type="checkbox"]:checked + .switcher { + &:before { + margin-right: -30px; + } + } + } + + + /* + Switch xlarge style + */ + &.cl-switch-xlarge { + .switcher { + width: 80px; + height: 40px; + + &:before { + width: 40px; + height: 40px; + margin-top: 0; + } + } + + .label { + font-size: 24px; + } + + input[type="checkbox"]:checked + .switcher { + &:before { + margin-right: -39px; + } + } + } + + + /* + Switch Black color style + */ + + &.cl-switch-black { + .switcher { + box-shadow: 0 0 0 0 $black-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $black-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch Red color style + */ + + + &.cl-switch-red { + .switcher { + box-shadow: 0 0 0 0 $red-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $red-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch green color style + */ + + &.cl-switch-green { + .switcher { + box-shadow: 0 0 0 0 $green-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $green-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch green color style + */ + + &.cl-switch-orange { + .switcher { + box-shadow: 0 0 0 0 $orange-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $orange-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } +} diff --git a/docs/css/clean-switch.css b/docs/css/clean-switch.css index 64c7d4a..2126ffc 100644 --- a/docs/css/clean-switch.css +++ b/docs/css/clean-switch.css @@ -22,107 +22,357 @@ */ /* Switch green color style - */ } - .cl-switch input[type="checkbox"] { - display: none; - visibility: hidden; } - .cl-switch .switcher { - display: inline-block; - border-radius: 100px; - width: 35px; - height: 15px; - background-color: #ccc; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - vertical-align: middle; - cursor: pointer; } - .cl-switch .switcher:before { - content: ""; - display: block; - width: 20px; - height: 20px; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); - border-radius: 50%; - margin-top: -2.5px; - position: absolute; - top: 0; - right: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-right: 0; - -webkit-transition: all 0.2s; - -moz-transition: all 0.2s; - -ms-transition: all 0.2s; - -o-transition: all 0.2s; - transition: all 0.2s; } - .cl-switch .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(63, 81, 181, 0.3); - transition: all, 0.1s; } - .cl-switch .label { - font-family: "Roboto", sans-serif; - cursor: pointer; - vertical-align: middle; - margin: 0 5px; } - .cl-switch input[type="checkbox"]:checked + .switcher { - background-color: #8591d5; } - .cl-switch input[type="checkbox"]:checked + .switcher:before { - right: 100%; - margin-right: -20px; - background-color: #3f51b5; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher { - background: #ccc !important; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher:active:before { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } - .cl-switch [disabled]:not([disabled="false"]) + .switcher:before { - background-color: #e2e2e2 !important; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } - .cl-switch.cl-switch-large .switcher { - width: 52px; - height: 22px; } - .cl-switch.cl-switch-large .switcher:before { - width: 30px; - height: 30px; - margin-top: -4px; } - .cl-switch.cl-switch-large .label { - font-size: 18px; } - .cl-switch.cl-switch-large input[type="checkbox"]:checked + .switcher:before { - margin-right: -30px; } - .cl-switch.cl-switch-xlarge .switcher { - width: 87px; - height: 37px; } - .cl-switch.cl-switch-xlarge .switcher:before { - width: 50px; - height: 50px; - margin-top: -6px; } - .cl-switch.cl-switch-xlarge .label { - font-size: 24px; } - .cl-switch.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { - margin-right: -50px; } - .cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher { - background-color: #676767; } - .cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher:before { - background-color: #343434; } - .cl-switch.cl-switch-black .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(52, 52, 52, 0.3); } - .cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher { - background-color: #ffcece; } - .cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher:before { - background-color: #ff6868; } - .cl-switch.cl-switch-red .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 104, 104, 0.3); } - .cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher { - background-color: #77e4c0; } - .cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher:before { - background-color: #29cc97; } - .cl-switch.cl-switch-green .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(41, 204, 151, 0.3); } - .cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher { - background-color: #ffc166; } - .cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { - background-color: #ff9800; } - .cl-switch.cl-switch-orange .switcher:active:before { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 152, 0, 0.3); } + */ +} + +.cl-switch input[type="checkbox"] { + display: none; + visibility: hidden; +} + +.cl-switch .switcher { + display: inline-block; + border-radius: 100px; + width: 35px; + height: 15px; + background-color: #ccc; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + cursor: pointer; +} + +.cl-switch .switcher:before { + content: ""; + display: block; + width: 20px; + height: 20px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); + border-radius: 50%; + margin-top: -2.5px; + position: absolute; + top: 0; + right: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-right: 0; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} + +.cl-switch .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(63, 81, 181, 0.3); + transition: all, 0.1s; +} + +.cl-switch .label { + font-family: "Roboto", sans-serif; + cursor: pointer; + vertical-align: middle; + margin: 0 5px; +} + +.cl-switch input[type="checkbox"]:checked + .switcher { + background-color: #8591d5; +} + +.cl-switch input[type="checkbox"]:checked + .switcher:before { + right: 100%; + margin-right: -20px; + background-color: #3f51b5; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch [disabled]:not([disabled="false"]) + .switcher:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.cl-switch-large .switcher { + width: 52px; + height: 22px; +} + +.cl-switch.cl-switch-large .switcher:before { + width: 30px; + height: 30px; + margin-top: -4px; +} + +.cl-switch.cl-switch-large .label { + font-size: 18px; +} + +.cl-switch.cl-switch-large input[type="checkbox"]:checked + .switcher:before { + margin-right: -30px; +} + +.cl-switch.cl-switch-xlarge .switcher { + width: 87px; + height: 37px; +} + +.cl-switch.cl-switch-xlarge .switcher:before { + width: 50px; + height: 50px; + margin-top: -6px; +} + +.cl-switch.cl-switch-xlarge .label { + font-size: 24px; +} + +.cl-switch.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { + margin-right: -50px; +} + +.cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher { + background-color: #676767; +} + +.cl-switch.cl-switch-black input[type="checkbox"]:checked + .switcher:before { + background-color: #343434; +} + +.cl-switch.cl-switch-black .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(52, 52, 52, 0.3); +} + +.cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher { + background-color: #ffcece; +} + +.cl-switch.cl-switch-red input[type="checkbox"]:checked + .switcher:before { + background-color: #ff6868; +} + +.cl-switch.cl-switch-red .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 104, 104, 0.3); +} + +.cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher { + background-color: #77e4c0; +} + +.cl-switch.cl-switch-green input[type="checkbox"]:checked + .switcher:before { + background-color: #29cc97; +} + +.cl-switch.cl-switch-green .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(41, 204, 151, 0.3); +} + +.cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher { + background-color: #ffc166; +} + +.cl-switch.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { + background-color: #ff9800; +} + +.cl-switch.cl-switch-orange .switcher:active:before { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(255, 152, 0, 0.3); +} + +/* --------------------------------------------- +------------------[IOS style]---------------------------- + --------------------------------------------- */ +.cl-switch.ios { + /* +Switcher Style + */ + /* + When Checked + */ + /* + Switch large style + */ + /* + Switch xlarge style + */ + /* + Switch Black color style + */ + /* + Switch Red color style + */ + /* + Switch green color style + */ + /* + Switch green color style + */ +} + +.cl-switch.ios .switcher { + width: 45px; + height: 24px; + background-color: #fff; + border: 1px solid #d3d3d5; + box-shadow: 0 0 0 0 #4bd964 inset; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +.cl-switch.ios .switcher:before { + width: 24px; + height: 24px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + margin-top: 0; + top: -1px; + right: -1px; + margin-right: 0; + border: 1px solid #d3d3d5; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +.cl-switch.ios input[type="checkbox"]:checked + .switcher { + background-color: #fff; + box-shadow: 0 0 0 20px #4bd964 inset; +} + +.cl-switch.ios input[type="checkbox"]:checked + .switcher:before { + right: 100%; + margin-right: -22px; + background-color: #fff; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.ios [disabled]:not([disabled="false"]) + .switcher:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; +} + +.cl-switch.ios.cl-switch-large .switcher { + width: 62px; + height: 34px; +} + +.cl-switch.ios.cl-switch-large .switcher:before { + width: 34px; + height: 34px; +} + +.cl-switch.ios.cl-switch-large .label { + font-size: 18px; +} + +.cl-switch.ios.cl-switch-large input[type="checkbox"]:checked + .switcher:before { + margin-right: -30px; +} + +.cl-switch.ios.cl-switch-xlarge .switcher { + width: 80px; + height: 40px; +} + +.cl-switch.ios.cl-switch-xlarge .switcher:before { + width: 40px; + height: 40px; + margin-top: 0; +} + +.cl-switch.ios.cl-switch-xlarge .label { + font-size: 24px; +} + +.cl-switch.ios.cl-switch-xlarge input[type="checkbox"]:checked + .switcher:before { + margin-right: -39px; +} + +.cl-switch.ios.cl-switch-black .switcher { + box-shadow: 0 0 0 0 #343434 inset; +} + +.cl-switch.ios.cl-switch-black input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #343434 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-black input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-black .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-red .switcher { + box-shadow: 0 0 0 0 #ff6868 inset; +} + +.cl-switch.ios.cl-switch-red input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #ff6868 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-red input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-red .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-green .switcher { + box-shadow: 0 0 0 0 #29cc97 inset; +} + +.cl-switch.ios.cl-switch-green input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #29cc97 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-green input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-green .switcher:active:before { + box-shadow: none; +} + +.cl-switch.ios.cl-switch-orange .switcher { + box-shadow: 0 0 0 0 #ff9800 inset; +} + +.cl-switch.ios.cl-switch-orange input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px #ff9800 inset; + background: #ffffff; +} + +.cl-switch.ios.cl-switch-orange input[type="checkbox"]:checked + .switcher:before { + background-color: #fff; +} + +.cl-switch.ios.cl-switch-orange .switcher:active:before { + box-shadow: none; +} diff --git a/docs/css/style.css b/docs/css/style.css index cb53cfd..cfeb6a2 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -76,7 +76,437 @@ table { .margin-top { margin-top: 20px; } +.margin-left { + margin-left: 20px; } + /*======== Mixings ========*/ +.-m { + margin: -3px !important; } + +.-mt { + margin-top: -3px !important; } + +.-mr { + margin-right: -3px !important; } + +.-mb { + margin-bottom: -3px !important; } + +.-ml { + margin-left: -3px !important; } + +.-mh { + margin-right: -3px !important; + margin-left: -3px !important; } + +.-mv { + margin-top: -3px !important; + margin-bottom: -3px !important; } + +.-m\+ { + margin: -6px !important; } + +.-mt\+ { + margin-top: -6px !important; } + +.-mr\+ { + margin-right: -6px !important; } + +.-mb\+ { + margin-bottom: -6px !important; } + +.-ml\+ { + margin-left: -6px !important; } + +.-mh\+ { + margin-right: -6px !important; + margin-left: -3px !important; } + +.-mv\+ { + margin-top: -6px !important; + margin-bottom: -3px !important; } + +.-m\+\+ { + margin: -9px !important; } + +.-mt\+\+ { + margin-top: -9px !important; } + +.-mr\+\+ { + margin-right: -9px !important; } + +.-mb\+\+ { + margin-bottom: -9px !important; } + +.-ml\+\+ { + margin-left: -9px !important; } + +.-mh\+\+ { + margin-right: -9px !important; + margin-left: -3px !important; } + +.-mv\+\+ { + margin-top: -9px !important; + margin-bottom: -3px !important; } + +.-m\+\+\+ { + margin: -12px !important; } + +.-mt\+\+\+ { + margin-top: -12px !important; } + +.-mr\+\+\+ { + margin-right: -12px !important; } + +.-mb\+\+\+ { + margin-bottom: -12px !important; } + +.-ml\+\+\+ { + margin-left: -12px !important; } + +.-mh\+\+\+ { + margin-right: -12px !important; + margin-left: -3px !important; } + +.-mv\+\+\+ { + margin-top: -12px !important; + margin-bottom: -3px !important; } + +.m0 { + margin: 0 !important; } + +.mt0 { + margin-top: 0 !important; } + +.mr0 { + margin-right: 0 !important; } + +.mb0 { + margin-bottom: 0 !important; } + +.ml0 { + margin-left: 0 !important; } + +.mh0 { + margin-right: 0 !important; + margin-left: 0 !important; } + +.mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; } + +.m0auto { + margin: 0 auto !important; } + +.mrauto { + margin-right: auto !important; } + +.mlauto { + margin-left: auto !important; } + +.m { + margin: 6px !important; } + +.mt { + margin-top: 6px !important; } + +.mr { + margin-right: 6px !important; } + +.mb { + margin-bottom: 6px !important; } + +.ml { + margin-left: 6px !important; } + +.mh { + margin-right: 6px !important; + margin-left: 6px !important; } + +.mv { + margin-top: 6px !important; + margin-bottom: 6px !important; } + +.m- { + margin: 3px !important; } + +.mt- { + margin-top: 3px !important; } + +.mr- { + margin-right: 3px !important; } + +.mb- { + margin-bottom: 3px !important; } + +.ml- { + margin-left: 3px !important; } + +.mh- { + margin-right: 3px !important; + margin-left: 3px !important; } + +.mv- { + margin-top: 3px !important; + margin-bottom: 3px !important; } + +.m\+ { + margin: 12px !important; } + +.mt\+ { + margin-top: 12px !important; } + +.mr\+ { + margin-right: 12px !important; } + +.mb\+ { + margin-bottom: 12px !important; } + +.ml\+ { + margin-left: 12px !important; } + +.mh\+ { + margin-right: 12px !important; + margin-left: 12px !important; } + +.mv\+ { + margin-top: 12px !important; + margin-bottom: 12px !important; } + +.m\+\+ { + margin: 18px !important; } + +.mt\+\+ { + margin-top: 18px !important; } + +.mr\+\+ { + margin-right: 18px !important; } + +.mb\+\+ { + margin-bottom: 18px !important; } + +.ml\+\+ { + margin-left: 18px !important; } + +.mh\+\+ { + margin-right: 18px !important; + margin-left: 18px !important; } + +.mv\+\+ { + margin-top: 18px !important; + margin-bottom: 18px !important; } + +.m\+\+\+ { + margin: 24px !important; } + +.mt\+\+\+ { + margin-top: 24px !important; } + +.mr\+\+\+ { + margin-right: 24px !important; } + +.mb\+\+\+ { + margin-bottom: 24px !important; } + +.ml\+\+\+ { + margin-left: 24px !important; } + +.mh\+\+\+ { + margin-right: 24px !important; + margin-left: 24px !important; } + +.mv\+\+\+ { + margin-top: 24px !important; + margin-bottom: 24px !important; } + +.p0 { + padding: 0 !important; } + +.pt0 { + padding-top: 0 !important; } + +.pr0 { + padding-right: 0 !important; } + +.pb0 { + padding-bottom: 0 !important; } + +.pl0 { + padding-left: 0 !important; } + +.ph0 { + padding-right: 0 !important; + padding-left: 0 !important; } + +.pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; } + +.p { + padding: 6px !important; } + +.pt { + padding-top: 6px !important; } + +.pr { + padding-right: 6px !important; } + +.pb { + padding-bottom: 6px !important; } + +.pl { + padding-left: 6px !important; } + +.ph { + padding-right: 6px !important; + padding-left: 6px !important; } + +.pv { + padding-top: 6px !important; + padding-bottom: 6px !important; } + +.p- { + padding: 3px !important; } + +.pt- { + padding-top: 3px !important; } + +.pr- { + padding-right: 3px !important; } + +.pb- { + padding-bottom: 3px !important; } + +.pl- { + padding-left: 3px !important; } + +.ph- { + padding-right: 3px !important; + padding-left: 3px !important; } + +.pv- { + padding-top: 3px !important; + padding-bottom: 3px !important; } + +.p\+ { + padding: 12px !important; } + +.pt\+ { + padding-top: 12px !important; } + +.pr\+ { + padding-right: 12px !important; } + +.pb\+ { + padding-bottom: 12px !important; } + +.pl\+ { + padding-left: 12px !important; } + +.ph\+ { + padding-right: 12px !important; + padding-left: 12px !important; } + +.pv\+ { + padding-top: 12px !important; + padding-bottom: 12px !important; } + +.p\+\+ { + padding: 18px !important; } + +.pt\+\+ { + padding-top: 18px !important; } + +.pr\+\+ { + padding-right: 18px !important; } + +.pb\+\+ { + padding-bottom: 18px !important; } + +.pl\+\+ { + padding-left: 18px !important; } + +.ph\+\+ { + padding-right: 18px !important; + padding-left: 18px !important; } + +.pv\+\+ { + padding-top: 18px !important; + padding-bottom: 18px !important; } + +.p\+\+\+ { + padding: 24px !important; } + +.pt\+\+\+ { + padding-top: 24px !important; } + +.pr\+\+\+ { + padding-right: 24px !important; } + +.pb\+\+\+ { + padding-bottom: 24px !important; } + +.pl\+\+\+ { + padding-left: 24px !important; } + +.ph\+\+\+ { + padding-right: 24px !important; + padding-left: 24px !important; } + +.pv\+\+\+ { + padding-top: 24px !important; + padding-bottom: 24px !important; } + +.p\+\+\+\+ { + padding: 36px !important; } + +.pt\+\+\+\+ { + padding-top: 36px !important; } + +.pr\+\+\+\+ { + padding-right: 36px !important; } + +.pb\+\+\+\+ { + padding-bottom: 36px !important; } + +.pl\+\+\+\+ { + padding-left: 36px !important; } + +.ph\+\+\+\+ { + padding-right: 36px !important; + padding-left: 36px !important; } + +.pv\+\+\+\+ { + padding-top: 36px !important; + padding-bottom: 36px !important; } + +.p\+\+\+\+\+ { + padding: 42px !important; } + +.pt\+\+\+\+\+ { + padding-top: 42px !important; } + +.pr\+\+\+\+\+ { + padding-right: 42px !important; } + +.pb\+\+\+\+\+ { + padding-bottom: 42px !important; } + +.pl\+\+\+\+\+ { + padding-left: 42px !important; } + +.ph\+\+\+\+\+ { + padding-right: 42px !important; + padding-left: 42px !important; } + +.pv\+\+\+\+\+ { + padding-top: 42px !important; + padding-bottom: 42px !important; } + +.pv5px { + padding-top: 5px !important; + padding-bottom: 5px !important; } + /*======== Default Codes ========*/ body { font-family: "IRANSans", sans-serif; diff --git a/docs/gulpfile.js b/docs/gulpfile.js index cc5859f..46995aa 100644 --- a/docs/gulpfile.js +++ b/docs/gulpfile.js @@ -3,28 +3,9 @@ */ var gulp = require('gulp'); var compass = require('gulp-compass'); -const sass = require('gulp-sass'); +var sass = require('gulp-sass'); -gulp.task('style-compass', function() { - gulp.src('./scss/style.scss') - .pipe(compass({ - css: 'css', - sass: 'scss' - })) - .pipe(gulp.dest('css')); -}); - -gulp.task('cleansw-compass', function() { - gulp.src('./scss/clean-switch.scss') - .pipe(compass({ - css: 'css', - sass: 'scss' - })) - .pipe(gulp.dest('css')) - .pipe(gulp.dest('./dist')) -}); - gulp.task('style-sass', function () { return gulp.src('./scss/style.scss') .pipe(sass().on('error', sass.logError)) @@ -33,7 +14,7 @@ gulp.task('style-sass', function () { gulp.task('cleansw-sass', function () { return gulp.src('./scss/clean-switch.scss') - .pipe(sass().on('error', sass.logError)) + .pipe(sass({outputStyle:'expanded'}).on('error', sass.logError)) .pipe(gulp.dest('./css')); }); @@ -42,4 +23,4 @@ gulp.task('default', [ 'style-sass','cleansw-sass']); gulp.task('watch', [ 'style-sass','cleansw-sass'] , function(){ gulp.watch('scss/*.scss', ['style-sass']); gulp.watch('scss/clean-switch.scss', ['cleansw-sass']); -}); \ No newline at end of file +}); diff --git a/docs/index.html b/docs/index.html index db8037a..83b2863 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,327 +1,365 @@ - - - - Clean Switch - Material Inspired Pure CSS toggle switch + + + + Clean Switch - Material Inspired Pure CSS toggle switch - - - - + + + + - - - - - - + + + + + +
- + -

Clean Switch

-

Material Inspired Pure CSS toggle switch

+

Clean Switch

+

Material Inspired Pure CSS toggle switch

-
- Download -
+
+ Download +
- +
-
-
-

About

- - - -

- Clean switch is just a lightweight pure css toggle. witch is simillar to Material Design lite switch(MDL) But in pure css and better syntax and no dependency -

-
-
- -
-
-

How To Use

-

First copy clean-switch.css in your project. then link it to your project HTML file

- 
<link rel="stylesheet" href="clean-switch.css">

-
-

You can also use SCSS file clean-switch.scss

-
-
-

Make HTML switch structure like this. and put it inside forms or anywhere you like and it will behave like checkboxes.

- - 
<label class="cl-switch">

-	<input type="checkbox" >

-	<span class="switcher"></span>

-	<span class="label">this is label</span>

-</label>
+
-

-

For More options like color and sizes see examples blow

-
-
- -
-
-

Diffrent Sizes

- -
- -
- -
- -
- -
- -
- -
- - Show Code -
-

To adjust size of switch just add classes to the list of classes in switch ellement

- - - - - 
<label class="cl-switch cl-switch-large">

-	<input type="checkbox" >

-	<span class="switcher"></span>

-	<span class="label">this is large switch</span>

-</label>
+
+
+ + +

About

-
-
-

size classes are:

-
    -
  • cl-switch-large
    • -
  • cl-switch-xlarge
    • -
+ -
+ +

+ Clean switch is just a lightweight pure css toggle. witch is simillar to Material Design lite switch(MDL) But in pure css + and better syntax and no dependency +

+
+ +
+
+

How To Use

+

First copy clean-switch.css in your project. then link it to your project HTML file

+ 
<link rel="stylesheet" href="clean-switch.css">

+
+

You can also use SCSS file clean-switch.scss

+
+
+

Make HTML switch structure like this. and put it inside forms or anywhere you like and it will behave like checkboxes.

+ + 
<label class="cl-switch">

+	<input type="checkbox" >

+	<span class="switcher"></span>

+	<span class="label">this is label</span>

+</label>
+ +

+

For More options like color and sizes see examples blow

+
+
+ +
+
+

Diffrent Sizes

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + Show Code +
+

To adjust size of switch just add classes to the list of classes in switch ellement

+ + + + + 
<label class="cl-switch cl-switch-large">

+	<input type="checkbox" >

+	<span class="switcher"></span>

+	<span class="label">this is large switch</span>

+</label>
+
+
+

size classes are:

+
    +
  • cl-switch-large
    • +
  • cl-switch-xlarge
    • +
+
-

Disabled

+

Disabled

-
- -
+
+ +
-
+
- Show Code -
-

to make a switch disable simply add disabled attribute to checkbox

+ Show Code +
+

to make a switch disable simply add disabled attribute to checkbox

- 
<label class="cl-switch">
+                
<label class="cl-switch">
 	<input type="checkbox" disabled>
 	<span class="switcher"></span>
 	<span class="label">Disabled</span>
 </label>

 
-			

-
- - -

Diffrent Colors

- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - Show Code -
-

To adjust color of the switch just add classes to the list of classes in switch ellement

- - - - 
<label class="cl-switch cl-switch-red">

-	<input type="checkbox" >

-	<span class="switcher"></span>

-	<span class="label">this is red switch</span>

+                

+
+ + +

Diffrent Colors

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + Show Code +
+

To adjust color of the switch just add classes to the list of classes in switch ellement

+ + + + 
<label class="cl-switch cl-switch-red">

+	<input type="checkbox" >

+	<span class="switcher"></span>

+	<span class="label">this is red switch</span>

 </label>
-
-

color classes are:

-
    -
  • cl-switch-black
    • -
  • cl-switch-red
    • -
  • cl-switch-green
    • -
  • cl-switch-orange
    • -
- -
-

Custom Colors

- - -
- -
- -
- -
- -
- - Show Code -
-

For Some projects you will need custom color so you can do it with small CSS

- -
-
-

1- first you should add a class to class list of cl-switch in this example its custom-class

- 
<label class="cl-switch custom-class">

-	<input type="checkbox" >

-	<span class="switcher"></span>

-	<span class="label">this is custom color switch</span>

+                

+                
color classes are:

+                
    
+                    
  • cl-switch-black
    • 
+                    
  • cl-switch-red
    • 
+                    
  • cl-switch-green
    • 
+                    
  • cl-switch-orange
    • 
+                

+
+
+ + +

Custom Colors

+ +
+ +
+ +
+ +
+ +
+ + Show Code +
+

For Some projects you will need custom color so you can do it with small CSS

+ +
+
+

1- first you should add a class to class list of cl-switch in this example its custom-class

+ 
<label class="cl-switch custom-class">

+	<input type="checkbox" >

+	<span class="switcher"></span>

+	<span class="label">this is custom color switch</span>

 </label>
-
-

2- then you should adjust its color in your css that is loaded after cl-switch css

- 
.custom-class input[type="checkbox"]:checked + .switcher {
+                

+                
2- then you should adjust its color in your css that is loaded after cl-switch css

+                
.custom-class input[type="checkbox"]:checked + .switcher {
   background: #c06651; /*this is body of switch that should be lighter color*/
 }
 .custom-class input[type="checkbox"]:checked + .switcher:before {
   background: #c0392b; /*this is btn of switch that should be darker color*/
 }

+
-
+

iOS Style

+
+ +
-

- - - +
+ 
<label class="cl-switch ios">
+	<input type="checkbox">
+	<span class="switcher"></span>
+	<span class="label">title</span>
+</label>
+ +
+
+ + +

+ + + +
+ +
+ - - + - \ No newline at end of file + diff --git a/docs/js/yea.js b/docs/js/yea.js index d4e3b3e..5a618f5 100644 --- a/docs/js/yea.js +++ b/docs/js/yea.js @@ -1,9 +1,29 @@ // some js for docs $(function () { - var togglebtn = $('.toggle-btn'); - togglebtn.click(function (e) { - e.preventDefault(); - $(this).next().slideToggle(); + $(window).on('type:changes',function () { + var togglebtn = $('.toggle-btn'); + + togglebtn.click(function (e) { + e.preventDefault(); + $(this).next().slideToggle(); + }); }); -}); \ No newline at end of file + + + $(window).trigger('type:changes') + + // $('.toggle-os').on('change',function (e) { + // var bodyNS = $('.wrap'); + // + // if($(this).is(':checked')) { + // var replaced = bodyNS.html().replace(/cl-switch(?!-)/g, 'cl-switch ios'); + // bodyNS.html(replaced); + // }else { + // var replaceds = bodyNS.html().replace(/cl-switch ios/g, 'cl-switch'); + // bodyNS.html(replaceds); + // } + // + // $(window).trigger('type:changes') + // }) +}); diff --git a/docs/scss/clean-switch.scss b/docs/scss/clean-switch.scss index a45a4d1..d7d1a44 100644 --- a/docs/scss/clean-switch.scss +++ b/docs/scss/clean-switch.scss @@ -3,6 +3,7 @@ $black-color: #343434; $red-color: #ff6868; $green-color: #29cc97; $orange-color: #ff9800; +$ios-green: #4bd964; .cl-switch { input[type="checkbox"] { @@ -81,19 +82,16 @@ $orange-color: #ff9800; background: #ccc !important; &:active:before { - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } &:before { background-color: #e2e2e2 !important; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } } - - - /* Switch large style */ @@ -103,9 +101,9 @@ $orange-color: #ff9800; height: 22px; &:before { - width:30px; - height:30px; - margin-top:-4px; + width: 30px; + height: 30px; + margin-top: -4px; } } @@ -130,9 +128,9 @@ $orange-color: #ff9800; height: 37px; &:before { - width:50px; - height:50px; - margin-top:-6px; + width: 50px; + height: 50px; + margin-top: -6px; } } @@ -166,6 +164,7 @@ $orange-color: #ff9800; 0 0 0 10px rgba($black-color, 0.3); } } + /* Switch Red color style */ @@ -223,3 +222,220 @@ $orange-color: #ff9800; } } } + +/* --------------------------------------------- +------------------[IOS style]---------------------------- + --------------------------------------------- */ + +.cl-switch.ios { + /* +Switcher Style + */ + .switcher { + width: 45px; + height: 24px; + background-color: #fff; + border: 1px solid #d3d3d5; + box-shadow: 0 0 0 0 $ios-green inset; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; + + &:before { + width: 24px; + height: 24px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + margin-top: 0; + top: -1px; + right: -1px; + margin-right: 0; + border: 1px solid #d3d3d5; + -webkit-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + -ms-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + transition: all 0.4s ease; + } + + } + + + + /* + When Checked + */ + input[type="checkbox"]:checked + .switcher { + background-color: #fff; + box-shadow: 0 0 0 20px $ios-green inset; + + &:before { + right: 100%; + margin-right: -22px; + background-color: #fff; + } + } + + & [disabled]:not([disabled="false"]) + .switcher { + background: #ccc !important; + + &:active:before { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; + } + + &:before { + background-color: #e2e2e2 !important; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; + } + } + + + + /* + Switch large style + */ + &.cl-switch-large { + .switcher { + width: 62px; + height: 34px; + + &:before { + width: 34px; + height: 34px; + } + } + + .label { + font-size: 18px; + } + + input[type="checkbox"]:checked + .switcher { + &:before { + margin-right: -30px; + } + } + } + + + /* + Switch xlarge style + */ + &.cl-switch-xlarge { + .switcher { + width: 80px; + height: 40px; + + &:before { + width: 40px; + height: 40px; + margin-top: 0; + } + } + + .label { + font-size: 24px; + } + + input[type="checkbox"]:checked + .switcher { + &:before { + margin-right: -39px; + } + } + } + + + /* + Switch Black color style + */ + + &.cl-switch-black { + .switcher { + box-shadow: 0 0 0 0 $black-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $black-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch Red color style + */ + + + &.cl-switch-red { + .switcher { + box-shadow: 0 0 0 0 $red-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $red-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch green color style + */ + + &.cl-switch-green { + .switcher { + box-shadow: 0 0 0 0 $green-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $green-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } + + /* + Switch green color style + */ + + &.cl-switch-orange { + .switcher { + box-shadow: 0 0 0 0 $orange-color inset; + } + + input[type="checkbox"]:checked + .switcher { + box-shadow: 0 0 0 20px $orange-color inset; + background: #ffffff; + + &:before { + background-color: #fff; + } + } + + .switcher:active:before { + box-shadow: none; + } + } +} diff --git a/docs/scss/global.scss b/docs/scss/global.scss index 6eef4a7..ebe421a 100644 --- a/docs/scss/global.scss +++ b/docs/scss/global.scss @@ -14,8 +14,8 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -26,7 +26,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -113,9 +113,13 @@ $titles-font: 'Lobster', sans-serif; .margin-top { margin-top: 20px; } +.margin-left { + margin-left: 20px; +} /*======== Mixings ========*/ -@import "mixins"; +@import "parts/mixins"; +@import "parts/spacing"; /*======== Default Codes ========*/ @@ -187,7 +191,7 @@ i { box-sizing: padding-box; line-height: 40px; font-weight: 300; - + &:before { content: "\f00c"; display: block; @@ -228,7 +232,7 @@ textarea { -moz-box-sizing: border-box; box-sizing: border-box; @include transition(); - + &:focus { border: 1px solid lighten($base-color, 10%); display: inline-block; diff --git a/docs/scss/parts/_spacing.scss b/docs/scss/parts/_spacing.scss new file mode 100644 index 0000000..f727a7e --- /dev/null +++ b/docs/scss/parts/_spacing.scss @@ -0,0 +1,193 @@ +///*------------------------------------*\ +// #TRUMPS-SPACING +//\*------------------------------------*/ + +// Margin and padding helper classes. Use these to tweak layout on a micro +// level. +// +// `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none +$spacing: 6px; +$margin: $spacing !default; +$padding: $spacing !default; + + + + + +// Margin helper classes. +// + +// Decrease margins. +.-m { margin: - ($margin / 2) !important; } +.-mt { margin-top: - ($margin / 2) !important; } +.-mr { margin-right: - ($margin / 2) !important; } +.-mb { margin-bottom: - ($margin / 2) !important; } +.-ml { margin-left: - ($margin / 2) !important; } +.-mh { margin-right: - ($margin / 2) !important; margin-left: - ($margin / 2) !important; } +.-mv { margin-top: - ($margin / 2) !important; margin-bottom: - ($margin / 2) !important; } +// Decrease margins medium. +.-m\+ { margin: - ($margin * 2 / 2) !important; } +.-mt\+ { margin-top: - ($margin * 2 / 2) !important; } +.-mr\+ { margin-right: - ($margin * 2 / 2) !important; } +.-mb\+ { margin-bottom: - ($margin * 2 / 2) !important; } +.-ml\+ { margin-left: - ($margin * 2 / 2) !important; } +.-mh\+ { margin-right: - ($margin * 2 / 2) !important; margin-left: - ($margin / 2) !important; } +.-mv\+ { margin-top: - ($margin * 2 / 2) !important; margin-bottom: - ($margin / 2) !important; } + +// Decrease margins large. +.-m\+\+ { margin: - ($margin * 3 / 2) !important; } +.-mt\+\+ { margin-top: - ($margin * 3 / 2) !important; } +.-mr\+\+ { margin-right: - ($margin * 3 / 2) !important; } +.-mb\+\+ { margin-bottom: - ($margin * 3 / 2) !important; } +.-ml\+\+ { margin-left: - ($margin * 3 / 2) !important; } +.-mh\+\+ { margin-right: - ($margin * 3 / 2) !important; margin-left: - ($margin / 2) !important; } +.-mv\+\+ { margin-top: - ($margin * 3 / 2) !important; margin-bottom: - ($margin / 2) !important; } + +// Decrease margins large. +.-m\+\+\+ { margin: - ($margin * 4 / 2) !important; } +.-mt\+\+\+ { margin-top: - ($margin * 4 / 2) !important; } +.-mr\+\+\+ { margin-right: - ($margin * 4 / 2) !important; } +.-mb\+\+\+ { margin-bottom: - ($margin * 4 / 2) !important; } +.-ml\+\+\+ { margin-left: - ($margin * 4 / 2) !important; } +.-mh\+\+\+ { margin-right: - ($margin * 4 / 2) !important; margin-left: - ($margin / 2) !important; } +.-mv\+\+\+ { margin-top: - ($margin * 4 / 2) !important; margin-bottom: - ($margin / 2) !important; } + +// Remove margins. +.m0 { margin: 0 !important; } +.mt0 { margin-top: 0 !important; } +.mr0 { margin-right: 0 !important; } +.mb0 { margin-bottom: 0 !important; } +.ml0 { margin-left: 0 !important; } +.mh0 { margin-right: 0 !important; margin-left: 0 !important; } +.mv0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.m0auto { margin: 0 auto !important; } +.mrauto { margin-right: auto !important; } +.mlauto { margin-left: auto !important; } + +// Add margins. +.m { margin: $margin !important; } +.mt { margin-top: $margin !important; } +.mr { margin-right: $margin !important; } +.mb { margin-bottom: $margin !important; } +.ml { margin-left: $margin !important; } +.mh { margin-right: $margin !important; margin-left: $margin !important; } +.mv { margin-top: $margin !important; margin-bottom: $margin !important; } + +// Add small margins. +.m- { margin: $margin / 2 !important; } +.mt- { margin-top: $margin / 2 !important; } +.mr- { margin-right: $margin / 2 !important; } +.mb- { margin-bottom: $margin / 2 !important; } +.ml- { margin-left: $margin / 2 !important; } +.mh- { margin-right: $margin / 2 !important; margin-left: $margin / 2 !important; } +.mv- { margin-top: $margin / 2 !important; margin-bottom: $margin / 2 !important; } + +// Add medium margins. +.m\+ { margin: $margin * 2 !important; } +.mt\+ { margin-top: $margin * 2 !important; } +.mr\+ { margin-right: $margin * 2 !important; } +.mb\+ { margin-bottom: $margin * 2 !important; } +.ml\+ { margin-left: $margin * 2 !important; } +.mh\+ { margin-right: $margin * 2 !important; margin-left: $margin * 2 !important; } +.mv\+ { margin-top: $margin * 2 !important; margin-bottom: $margin * 2 !important; } + +// Add large margins. +.m\+\+ { margin: $margin * 3 !important; } +.mt\+\+ { margin-top: $margin * 3 !important; } +.mr\+\+ { margin-right: $margin * 3 !important; } +.mb\+\+ { margin-bottom: $margin * 3 !important; } +.ml\+\+ { margin-left: $margin * 3 !important; } +.mh\+\+ { margin-right: $margin * 3 !important; margin-left: $margin * 3 !important; } +.mv\+\+ { margin-top: $margin * 3 !important; margin-bottom: $margin * 3 !important; } + +// Add huge margins. +.m\+\+\+ { margin: $margin * 4 !important; } +.mt\+\+\+ { margin-top: $margin * 4 !important; } +.mr\+\+\+ { margin-right: $margin * 4 !important; } +.mb\+\+\+ { margin-bottom: $margin * 4 !important; } +.ml\+\+\+ { margin-left: $margin * 4 !important; } +.mh\+\+\+ { margin-right: $margin * 4 !important; margin-left: $margin * 4 !important; } +.mv\+\+\+ { margin-top: $margin * 4 !important; margin-bottom: $margin * 4 !important; } + + + + + +// Padding helper classes. +// + +// Remove paddings. +.p0 { padding: 0 !important; } +.pt0 { padding-top: 0 !important; } +.pr0 { padding-right: 0 !important; } +.pb0 { padding-bottom: 0 !important; } +.pl0 { padding-left: 0 !important; } +.ph0 { padding-right: 0 !important; padding-left: 0 !important; } +.pv0 { padding-top: 0 !important; padding-bottom: 0 !important; } + +// Add paddings. +.p { padding: $padding !important; } +.pt { padding-top: $padding !important; } +.pr { padding-right: $padding !important; } +.pb { padding-bottom: $padding !important; } +.pl { padding-left: $padding !important; } +.ph { padding-right: $padding !important; padding-left: $padding !important; } +.pv { padding-top: $padding !important; padding-bottom: $padding !important; } + +// Add small paddings. +.p- { padding: $padding / 2 !important; } +.pt- { padding-top: $padding / 2 !important; } +.pr- { padding-right: $padding / 2 !important; } +.pb- { padding-bottom: $padding / 2 !important; } +.pl- { padding-left: $padding / 2 !important; } +.ph- { padding-right: $padding / 2 !important; padding-left: $padding / 2 !important; } +.pv- { padding-top: $padding / 2 !important; padding-bottom: $padding / 2 !important; } + +// Add medium paddings. +.p\+ { padding: $padding * 2 !important; } +.pt\+ { padding-top: $padding * 2 !important; } +.pr\+ { padding-right: $padding * 2 !important; } +.pb\+ { padding-bottom: $padding * 2 !important; } +.pl\+ { padding-left: $padding * 2 !important; } +.ph\+ { padding-right: $padding * 2 !important; padding-left: $padding * 2 !important; } +.pv\+ { padding-top: $padding * 2 !important; padding-bottom: $padding * 2 !important; } + +// Add large paddings. +.p\+\+ { padding: $padding * 3 !important; } +.pt\+\+ { padding-top: $padding * 3 !important; } +.pr\+\+ { padding-right: $padding * 3 !important; } +.pb\+\+ { padding-bottom: $padding * 3 !important; } +.pl\+\+ { padding-left: $padding * 3 !important; } +.ph\+\+ { padding-right: $padding * 3 !important; padding-left: $padding * 3 !important; } +.pv\+\+ { padding-top: $padding * 3 !important; padding-bottom: $padding * 3 !important; } + +// Add huge paddings. +.p\+\+\+ { padding: $padding * 4 !important; } +.pt\+\+\+ { padding-top: $padding * 4 !important; } +.pr\+\+\+ { padding-right: $padding * 4 !important; } +.pb\+\+\+ { padding-bottom: $padding * 4 !important; } +.pl\+\+\+ { padding-left: $padding * 4 !important; } +.ph\+\+\+ { padding-right: $padding * 4 !important; padding-left: $padding * 4 !important; } +.pv\+\+\+ { padding-top: $padding * 4 !important; padding-bottom: $padding * 4 !important; } + +// Add enormous paddings. +.p\+\+\+\+ { padding: $padding * 6 !important; } +.pt\+\+\+\+ { padding-top: $padding * 6 !important; } +.pr\+\+\+\+ { padding-right: $padding * 6 !important; } +.pb\+\+\+\+ { padding-bottom: $padding * 6 !important; } +.pl\+\+\+\+ { padding-left: $padding * 6 !important; } +.ph\+\+\+\+ { padding-right: $padding * 6 !important; padding-left: $padding * 6 !important; } +.pv\+\+\+\+ { padding-top: $padding * 6 !important; padding-bottom: $padding * 6 !important; } + +// Add enormous paddings. +.p\+\+\+\+\+ { padding: $padding * 7 !important; } +.pt\+\+\+\+\+ { padding-top: $padding * 7 !important; } +.pr\+\+\+\+\+ { padding-right: $padding * 7 !important; } +.pb\+\+\+\+\+ { padding-bottom: $padding * 7 !important; } +.pl\+\+\+\+\+ { padding-left: $padding * 7 !important; } +.ph\+\+\+\+\+ { padding-right: $padding * 7 !important; padding-left: $padding * 7 !important; } +.pv\+\+\+\+\+ { padding-top: $padding * 7 !important; padding-bottom: $padding * 7 !important; } + +// Some dedicate paddings +.pv5px { padding-top: 5px !important; padding-bottom: 5px !important; } + diff --git a/docs/scss/mixins.scss b/docs/scss/parts/mixins.scss similarity index 100% rename from docs/scss/mixins.scss rename to docs/scss/parts/mixins.scss diff --git a/docs/scss/style.scss b/docs/scss/style.scss index 157575c..3d30244 100644 --- a/docs/scss/style.scss +++ b/docs/scss/style.scss @@ -1,5 +1,5 @@ @import "global"; -@import "mixins"; +@import "parts/mixins"; body { line-height: 1.5; } @@ -188,4 +188,4 @@ h3.donate-title { -moz-box-sizing: border-box; display: block; box-sizing: border-box; -} \ No newline at end of file +}