@ -0,0 +1,968 @@ |
||||
/*! |
||||
* AdminLTE v3.1.0 |
||||
* Only Pages |
||||
* Author: Colorlib |
||||
* Website: AdminLTE.io <https://adminlte.io> |
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT> |
||||
*/ |
||||
.close, .mailbox-attachment-close { |
||||
float: right; |
||||
font-size: 1.5rem; |
||||
font-weight: 700; |
||||
line-height: 1; |
||||
color: #000; |
||||
text-shadow: 0 1px 0 #fff; |
||||
opacity: .5; |
||||
} |
||||
|
||||
.close:hover, .mailbox-attachment-close:hover { |
||||
color: #000; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus { |
||||
opacity: .75; |
||||
} |
||||
|
||||
button.close, button.mailbox-attachment-close { |
||||
padding: 0; |
||||
background-color: transparent; |
||||
border: 0; |
||||
} |
||||
|
||||
a.close.disabled, a.disabled.mailbox-attachment-close { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
@-webkit-keyframes flipInX { |
||||
0% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transition-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transition-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
|
||||
@keyframes flipInX { |
||||
0% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transition-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transition-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes shake { |
||||
0% { |
||||
-webkit-transform: translate(2px, 1px) rotate(0deg); |
||||
transform: translate(2px, 1px) rotate(0deg); |
||||
} |
||||
10% { |
||||
-webkit-transform: translate(-1px, -2px) rotate(-2deg); |
||||
transform: translate(-1px, -2px) rotate(-2deg); |
||||
} |
||||
20% { |
||||
-webkit-transform: translate(-3px, 0) rotate(3deg); |
||||
transform: translate(-3px, 0) rotate(3deg); |
||||
} |
||||
30% { |
||||
-webkit-transform: translate(0, 2px) rotate(0deg); |
||||
transform: translate(0, 2px) rotate(0deg); |
||||
} |
||||
40% { |
||||
-webkit-transform: translate(1px, -1px) rotate(1deg); |
||||
transform: translate(1px, -1px) rotate(1deg); |
||||
} |
||||
50% { |
||||
-webkit-transform: translate(-1px, 2px) rotate(-1deg); |
||||
transform: translate(-1px, 2px) rotate(-1deg); |
||||
} |
||||
60% { |
||||
-webkit-transform: translate(-3px, 1px) rotate(0deg); |
||||
transform: translate(-3px, 1px) rotate(0deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: translate(2px, 1px) rotate(-2deg); |
||||
transform: translate(2px, 1px) rotate(-2deg); |
||||
} |
||||
80% { |
||||
-webkit-transform: translate(-1px, -1px) rotate(4deg); |
||||
transform: translate(-1px, -1px) rotate(4deg); |
||||
} |
||||
90% { |
||||
-webkit-transform: translate(2px, 2px) rotate(0deg); |
||||
transform: translate(2px, 2px) rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: translate(1px, -2px) rotate(-1deg); |
||||
transform: translate(1px, -2px) rotate(-1deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes shake { |
||||
0% { |
||||
-webkit-transform: translate(2px, 1px) rotate(0deg); |
||||
transform: translate(2px, 1px) rotate(0deg); |
||||
} |
||||
10% { |
||||
-webkit-transform: translate(-1px, -2px) rotate(-2deg); |
||||
transform: translate(-1px, -2px) rotate(-2deg); |
||||
} |
||||
20% { |
||||
-webkit-transform: translate(-3px, 0) rotate(3deg); |
||||
transform: translate(-3px, 0) rotate(3deg); |
||||
} |
||||
30% { |
||||
-webkit-transform: translate(0, 2px) rotate(0deg); |
||||
transform: translate(0, 2px) rotate(0deg); |
||||
} |
||||
40% { |
||||
-webkit-transform: translate(1px, -1px) rotate(1deg); |
||||
transform: translate(1px, -1px) rotate(1deg); |
||||
} |
||||
50% { |
||||
-webkit-transform: translate(-1px, 2px) rotate(-1deg); |
||||
transform: translate(-1px, 2px) rotate(-1deg); |
||||
} |
||||
60% { |
||||
-webkit-transform: translate(-3px, 1px) rotate(0deg); |
||||
transform: translate(-3px, 1px) rotate(0deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: translate(2px, 1px) rotate(-2deg); |
||||
transform: translate(2px, 1px) rotate(-2deg); |
||||
} |
||||
80% { |
||||
-webkit-transform: translate(-1px, -1px) rotate(4deg); |
||||
transform: translate(-1px, -1px) rotate(4deg); |
||||
} |
||||
90% { |
||||
-webkit-transform: translate(2px, 2px) rotate(0deg); |
||||
transform: translate(2px, 2px) rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: translate(1px, -2px) rotate(-1deg); |
||||
transform: translate(1px, -2px) rotate(-1deg); |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes wobble { |
||||
0% { |
||||
-webkit-transform: none; |
||||
transform: none; |
||||
} |
||||
15% { |
||||
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); |
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); |
||||
} |
||||
30% { |
||||
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); |
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); |
||||
} |
||||
45% { |
||||
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); |
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); |
||||
} |
||||
60% { |
||||
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); |
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); |
||||
} |
||||
75% { |
||||
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); |
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: none; |
||||
transform: none; |
||||
} |
||||
} |
||||
|
||||
@keyframes wobble { |
||||
0% { |
||||
-webkit-transform: none; |
||||
transform: none; |
||||
} |
||||
15% { |
||||
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); |
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); |
||||
} |
||||
30% { |
||||
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); |
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); |
||||
} |
||||
45% { |
||||
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); |
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); |
||||
} |
||||
60% { |
||||
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); |
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); |
||||
} |
||||
75% { |
||||
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); |
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: none; |
||||
transform: none; |
||||
} |
||||
} |
||||
|
||||
.mailbox-messages > .table { |
||||
margin: 0; |
||||
} |
||||
|
||||
.mailbox-controls { |
||||
padding: 5px; |
||||
} |
||||
|
||||
.mailbox-controls.with-border { |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125); |
||||
} |
||||
|
||||
.mailbox-read-info { |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125); |
||||
padding: 10px; |
||||
} |
||||
|
||||
.mailbox-read-info h3 { |
||||
font-size: 20px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.mailbox-read-info h5 { |
||||
margin: 0; |
||||
padding: 5px 0 0; |
||||
} |
||||
|
||||
.mailbox-read-time { |
||||
color: #999; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.mailbox-read-message { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.mailbox-attachments { |
||||
padding-left: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
.mailbox-attachments li { |
||||
border: 1px solid #eee; |
||||
float: left; |
||||
margin-bottom: 10px; |
||||
margin-right: 10px; |
||||
width: 200px; |
||||
} |
||||
|
||||
.mailbox-attachment-name { |
||||
color: #666; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.mailbox-attachment-icon, |
||||
.mailbox-attachment-info, |
||||
.mailbox-attachment-size { |
||||
display: block; |
||||
} |
||||
|
||||
.mailbox-attachment-info { |
||||
background-color: #f8f9fa; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.mailbox-attachment-size { |
||||
color: #999; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.mailbox-attachment-size > span { |
||||
display: inline-block; |
||||
padding-top: .75rem; |
||||
} |
||||
|
||||
.mailbox-attachment-icon { |
||||
color: #666; |
||||
font-size: 65px; |
||||
max-height: 132.5px; |
||||
padding: 20px 10px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.mailbox-attachment-icon.has-img { |
||||
padding: 0; |
||||
} |
||||
|
||||
.mailbox-attachment-icon.has-img > img { |
||||
height: auto; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.lockscreen { |
||||
background-color: #e9ecef; |
||||
} |
||||
|
||||
.lockscreen .lockscreen-name { |
||||
font-weight: 600; |
||||
text-align: center; |
||||
} |
||||
|
||||
.lockscreen-logo { |
||||
font-size: 35px; |
||||
font-weight: 300; |
||||
margin-bottom: 25px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.lockscreen-logo a { |
||||
color: #495057; |
||||
} |
||||
|
||||
.lockscreen-wrapper { |
||||
margin: 0 auto; |
||||
margin-top: 10%; |
||||
max-width: 400px; |
||||
} |
||||
|
||||
.lockscreen-item { |
||||
border-radius: 4px; |
||||
background-color: #fff; |
||||
margin: 10px auto 30px; |
||||
padding: 0; |
||||
position: relative; |
||||
width: 290px; |
||||
} |
||||
|
||||
.lockscreen-image { |
||||
border-radius: 50%; |
||||
background-color: #fff; |
||||
left: -10px; |
||||
padding: 5px; |
||||
position: absolute; |
||||
top: -25px; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.lockscreen-image > img { |
||||
border-radius: 50%; |
||||
height: 70px; |
||||
width: 70px; |
||||
} |
||||
|
||||
.lockscreen-credentials { |
||||
margin-left: 70px; |
||||
} |
||||
|
||||
.lockscreen-credentials .form-control { |
||||
border: 0; |
||||
} |
||||
|
||||
.lockscreen-credentials .btn { |
||||
background-color: #fff; |
||||
border: 0; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.lockscreen-footer { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.dark-mode .lockscreen-item { |
||||
background-color: #343a40; |
||||
} |
||||
|
||||
.dark-mode .lockscreen-logo a { |
||||
color: #fff; |
||||
} |
||||
|
||||
.dark-mode .lockscreen-credentials .btn { |
||||
background-color: #343a40; |
||||
} |
||||
|
||||
.dark-mode .lockscreen-image { |
||||
background-color: #6c757d; |
||||
} |
||||
|
||||
.login-logo, |
||||
.register-logo { |
||||
font-size: 2.1rem; |
||||
font-weight: 300; |
||||
margin-bottom: .9rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
.login-logo a, |
||||
.register-logo a { |
||||
color: #495057; |
||||
} |
||||
|
||||
.login-page, |
||||
.register-page { |
||||
-webkit-align-items: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
background-color: #e9ecef; |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-flex-direction: column; |
||||
-ms-flex-direction: column; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
-webkit-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.login-box, |
||||
.register-box { |
||||
width: 360px; |
||||
} |
||||
|
||||
@media (max-width: 576px) { |
||||
.login-box, |
||||
.register-box { |
||||
margin-top: .5rem; |
||||
width: 90%; |
||||
} |
||||
} |
||||
|
||||
.login-box .card, |
||||
.register-box .card { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.login-card-body, |
||||
.register-card-body { |
||||
background-color: #fff; |
||||
border-top: 0; |
||||
color: #666; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control, |
||||
.register-card-body .input-group .form-control { |
||||
border-right: 0; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control:focus, |
||||
.register-card-body .input-group .form-control:focus { |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, |
||||
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text, |
||||
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, |
||||
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text { |
||||
border-color: #80bdff; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control.is-valid:focus, |
||||
.register-card-body .input-group .form-control.is-valid:focus { |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, |
||||
.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text, |
||||
.register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, |
||||
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text { |
||||
border-color: #28a745; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control.is-invalid:focus, |
||||
.register-card-body .input-group .form-control.is-invalid:focus { |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text, |
||||
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text { |
||||
border-color: #dc3545; |
||||
} |
||||
|
||||
.login-card-body .input-group .input-group-text, |
||||
.register-card-body .input-group .input-group-text { |
||||
background-color: transparent; |
||||
border-bottom-right-radius: 0.25rem; |
||||
border-left: 0; |
||||
border-top-right-radius: 0.25rem; |
||||
color: #777; |
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
||||
} |
||||
|
||||
.login-box-msg, |
||||
.register-box-msg { |
||||
margin: 0; |
||||
padding: 0 20px 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.social-auth-links { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.dark-mode .login-card-body, |
||||
.dark-mode .register-card-body { |
||||
background-color: #343a40; |
||||
border-color: #6c757d; |
||||
color: #fff; |
||||
} |
||||
|
||||
.dark-mode .login-logo a, |
||||
.dark-mode .register-logo a { |
||||
color: #fff; |
||||
} |
||||
|
||||
.error-page { |
||||
margin: 20px auto 0; |
||||
width: 600px; |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
.error-page { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.error-page > .headline { |
||||
float: left; |
||||
font-size: 100px; |
||||
font-weight: 300; |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
.error-page > .headline { |
||||
float: none; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.error-page > .error-content { |
||||
display: block; |
||||
margin-left: 190px; |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
.error-page > .error-content { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
|
||||
.error-page > .error-content > h3 { |
||||
font-size: 25px; |
||||
font-weight: 300; |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
.error-page > .error-content > h3 { |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.invoice { |
||||
background-color: #fff; |
||||
border: 1px solid rgba(0, 0, 0, 0.125); |
||||
position: relative; |
||||
} |
||||
|
||||
.invoice-title { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.dark-mode .invoice { |
||||
background-color: #343a40; |
||||
} |
||||
|
||||
.profile-user-img { |
||||
border: 3px solid #adb5bd; |
||||
margin: 0 auto; |
||||
padding: 3px; |
||||
width: 100px; |
||||
} |
||||
|
||||
.profile-username { |
||||
font-size: 21px; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.post { |
||||
border-bottom: 1px solid #adb5bd; |
||||
color: #666; |
||||
margin-bottom: 15px; |
||||
padding-bottom: 15px; |
||||
} |
||||
|
||||
.post:last-of-type { |
||||
border-bottom: 0; |
||||
margin-bottom: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.post .user-block { |
||||
margin-bottom: 15px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.post .row { |
||||
width: 100%; |
||||
} |
||||
|
||||
.dark-mode .post { |
||||
color: #fff; |
||||
border-color: #6c757d; |
||||
} |
||||
|
||||
.product-image { |
||||
max-width: 100%; |
||||
height: auto; |
||||
width: 100%; |
||||
} |
||||
|
||||
.product-image-thumbs { |
||||
-webkit-align-items: stretch; |
||||
-ms-flex-align: stretch; |
||||
align-items: stretch; |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
margin-top: 2rem; |
||||
} |
||||
|
||||
.product-image-thumb { |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); |
||||
border-radius: 0.25rem; |
||||
background-color: #fff; |
||||
border: 1px solid #dee2e6; |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
margin-right: 1rem; |
||||
max-width: 7rem; |
||||
padding: 0.5rem; |
||||
} |
||||
|
||||
.product-image-thumb img { |
||||
max-width: 100%; |
||||
height: auto; |
||||
-webkit-align-self: center; |
||||
-ms-flex-item-align: center; |
||||
align-self: center; |
||||
} |
||||
|
||||
.product-image-thumb:hover { |
||||
opacity: .5; |
||||
} |
||||
|
||||
.product-share a { |
||||
margin-right: .5rem; |
||||
} |
||||
|
||||
.projects td { |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.projects .list-inline { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.projects img.table-avatar, |
||||
.projects .table-avatar img { |
||||
border-radius: 50%; |
||||
display: inline; |
||||
width: 2.5rem; |
||||
} |
||||
|
||||
.projects .project-state { |
||||
text-align: center; |
||||
} |
||||
|
||||
body.iframe-mode .main-sidebar { |
||||
display: none; |
||||
} |
||||
|
||||
body.iframe-mode .content-wrapper { |
||||
margin-left: 0 !important; |
||||
margin-top: 0 !important; |
||||
padding-bottom: 0 !important; |
||||
} |
||||
|
||||
body.iframe-mode .main-header, |
||||
body.iframe-mode .main-footer { |
||||
display: none; |
||||
} |
||||
|
||||
body.iframe-mode-fullscreen { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.content-wrapper { |
||||
height: 100%; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .btn-iframe-close { |
||||
color: #dc3545; |
||||
position: absolute; |
||||
line-height: 1; |
||||
right: .125rem; |
||||
top: .125rem; |
||||
z-index: 10; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .btn-iframe-close:hover, .content-wrapper.iframe-mode .btn-iframe-close:focus { |
||||
-webkit-animation-name: fadeIn; |
||||
animation-name: fadeIn; |
||||
-webkit-animation-duration: 0.3s; |
||||
animation-duration: 0.3s; |
||||
-webkit-animation-fill-mode: both; |
||||
animation-fill-mode: both; |
||||
visibility: visible; |
||||
} |
||||
|
||||
@media (hover: none) and (pointer: coarse) { |
||||
.content-wrapper.iframe-mode .btn-iframe-close { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .navbar-nav { |
||||
overflow-y: auto; |
||||
width: 100%; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .navbar-nav .nav-link { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .navbar-nav .nav-item { |
||||
position: relative; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close { |
||||
-webkit-animation-name: fadeIn; |
||||
animation-name: fadeIn; |
||||
-webkit-animation-duration: 0.3s; |
||||
animation-duration: 0.3s; |
||||
-webkit-animation-fill-mode: both; |
||||
animation-fill-mode: both; |
||||
visibility: visible; |
||||
} |
||||
|
||||
@media (hover: none) and (pointer: coarse) { |
||||
.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .tab-content { |
||||
position: relative; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .tab-pane + .tab-empty { |
||||
display: none; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .tab-empty { |
||||
width: 100%; |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
-webkit-align-items: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .tab-loading { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
display: none; |
||||
background-color: #f4f6f9; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode .tab-loading > div { |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
-webkit-align-items: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode iframe { |
||||
border: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
margin-bottom: -8px; |
||||
} |
||||
|
||||
.content-wrapper.iframe-mode iframe .content-wrapper { |
||||
padding-bottom: 0 !important; |
||||
} |
||||
|
||||
body.iframe-mode-fullscreen .content-wrapper.iframe-mode { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin-left: 0 !important; |
||||
height: 100%; |
||||
min-height: 100%; |
||||
z-index: 1048; |
||||
} |
||||
|
||||
.permanent-btn-iframe-close .btn-iframe-close { |
||||
-webkit-animation: none !important; |
||||
animation: none !important; |
||||
visibility: visible !important; |
||||
opacity: 1; |
||||
} |
||||
|
||||
.content-wrapper.kanban { |
||||
height: 1px; |
||||
} |
||||
|
||||
.content-wrapper.kanban .content { |
||||
height: 100%; |
||||
overflow-x: auto; |
||||
overflow-y: hidden; |
||||
} |
||||
|
||||
.content-wrapper.kanban .content .container, |
||||
.content-wrapper.kanban .content .container-fluid { |
||||
width: -webkit-max-content; |
||||
width: -moz-max-content; |
||||
width: max-content; |
||||
display: -webkit-flex; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-align-items: stretch; |
||||
-ms-flex-align: stretch; |
||||
align-items: stretch; |
||||
} |
||||
|
||||
.content-wrapper.kanban .content-header + .content { |
||||
height: calc(100% - ((2 * 15px) + (1.8rem * 1.2))); |
||||
} |
||||
|
||||
.content-wrapper.kanban .card .card-body { |
||||
padding: .5rem; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row { |
||||
width: 340px; |
||||
display: inline-block; |
||||
margin: 0 .5rem; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row:first-child { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row .card-body { |
||||
height: calc(100% - (12px + (1.8rem * 1.2) + .5rem)); |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row .card:last-child { |
||||
margin-bottom: 0; |
||||
border-bottom-width: 1px; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row .card .card-header { |
||||
padding: .5rem .75rem; |
||||
} |
||||
|
||||
.content-wrapper.kanban .card.card-row .card .card-body { |
||||
padding: .75rem; |
||||
} |
||||
|
||||
.content-wrapper.kanban .btn-tool.btn-link { |
||||
text-decoration: underline; |
||||
padding-left: 0; |
||||
padding-right: 0; |
||||
} |
||||
/*# sourceMappingURL=adminlte.pages.css.map */ |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 7.9 KiB |
After Width: | Height: | Size: 8.1 KiB |
After Width: | Height: | Size: 9.0 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 121 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 339 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 647 KiB |
After Width: | Height: | Size: 413 KiB |
After Width: | Height: | Size: 362 KiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,48 @@ |
||||
{ |
||||
"root": true, |
||||
"parserOptions": { |
||||
"ecmaVersion": 5, |
||||
"sourceType": "script" |
||||
}, |
||||
"env": { |
||||
"jquery": true |
||||
}, |
||||
"extends": [ |
||||
"plugin:unicorn/recommended", |
||||
"xo", |
||||
"xo/browser" |
||||
], |
||||
"rules": { |
||||
"capitalized-comments": "off", |
||||
"indent": [ |
||||
"error", |
||||
2, |
||||
{ |
||||
"MemberExpression": "off", |
||||
"SwitchCase": 1 |
||||
} |
||||
], |
||||
"multiline-ternary": [ |
||||
"error", |
||||
"always-multiline" |
||||
], |
||||
"object-curly-spacing": [ |
||||
"error", |
||||
"always" |
||||
], |
||||
"semi": [ |
||||
"error", |
||||
"never" |
||||
], |
||||
"strict": "error", |
||||
"unicorn/no-array-for-each": "off", |
||||
"unicorn/no-for-loop": "off", |
||||
"unicorn/no-null": "off", |
||||
"unicorn/prefer-dataset": "off", |
||||
"unicorn/prefer-includes": "off", |
||||
"unicorn/prefer-node-append": "off", |
||||
"unicorn/prefer-query-selector": "off", |
||||
"unicorn/prefer-spread": "off", |
||||
"unicorn/prevent-abbreviations": "off" |
||||
} |
||||
} |
@ -0,0 +1,686 @@ |
||||
/** |
||||
* AdminLTE Demo Menu |
||||
* ------------------ |
||||
* You should not use this file in production. |
||||
* This file is for demo purposes only. |
||||
*/ |
||||
|
||||
/* eslint-disable camelcase */ |
||||
|
||||
(function ($) { |
||||
'use strict' |
||||
|
||||
function capitalizeFirstLetter(string) { |
||||
return string.charAt(0).toUpperCase() + string.slice(1) |
||||
} |
||||
|
||||
function createSkinBlock(colors, callback, noneSelected) { |
||||
var $block = $('<select />', { |
||||
class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-') |
||||
}) |
||||
|
||||
if (noneSelected) { |
||||
var $default = $('<option />', { |
||||
text: 'None Selected' |
||||
}) |
||||
if (callback) { |
||||
$default.on('click', callback) |
||||
} |
||||
|
||||
$block.append($default) |
||||
} |
||||
|
||||
colors.forEach(function (color) { |
||||
var $color = $('<option />', { |
||||
class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'), |
||||
text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' ')) |
||||
}) |
||||
|
||||
$block.append($color) |
||||
|
||||
$color.data('color', color) |
||||
|
||||
if (callback) { |
||||
$color.on('click', callback) |
||||
} |
||||
}) |
||||
|
||||
return $block |
||||
} |
||||
|
||||
var $sidebar = $('.control-sidebar') |
||||
var $container = $('<div />', { |
||||
class: 'p-3 control-sidebar-content' |
||||
}) |
||||
|
||||
$sidebar.append($container) |
||||
|
||||
// Checkboxes
|
||||
|
||||
$container.append( |
||||
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>' |
||||
) |
||||
|
||||
var $dark_mode_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('dark-mode'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('dark-mode') |
||||
} else { |
||||
$('body').removeClass('dark-mode') |
||||
} |
||||
}) |
||||
var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>') |
||||
$container.append($dark_mode_container) |
||||
|
||||
$container.append('<h6>Header Options</h6>') |
||||
var $header_fixed_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('layout-navbar-fixed'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('layout-navbar-fixed') |
||||
} else { |
||||
$('body').removeClass('layout-navbar-fixed') |
||||
} |
||||
}) |
||||
var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>') |
||||
$container.append($header_fixed_container) |
||||
|
||||
var $dropdown_legacy_offset_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.main-header').hasClass('dropdown-legacy'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.main-header').addClass('dropdown-legacy') |
||||
} else { |
||||
$('.main-header').removeClass('dropdown-legacy') |
||||
} |
||||
}) |
||||
var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>') |
||||
$container.append($dropdown_legacy_offset_container) |
||||
|
||||
var $no_border_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.main-header').hasClass('border-bottom-0'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.main-header').addClass('border-bottom-0') |
||||
} else { |
||||
$('.main-header').removeClass('border-bottom-0') |
||||
} |
||||
}) |
||||
var $no_border_container = $('<div />', { class: 'mb-4' }).append($no_border_checkbox).append('<span>No border</span>') |
||||
$container.append($no_border_container) |
||||
|
||||
$container.append('<h6>Sidebar Options</h6>') |
||||
|
||||
var $sidebar_collapsed_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('sidebar-collapse'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('sidebar-collapse') |
||||
$(window).trigger('resize') |
||||
} else { |
||||
$('body').removeClass('sidebar-collapse') |
||||
$(window).trigger('resize') |
||||
} |
||||
}) |
||||
var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>') |
||||
$container.append($sidebar_collapsed_container) |
||||
|
||||
$(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () { |
||||
$sidebar_collapsed_checkbox.prop('checked', true) |
||||
}) |
||||
$(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () { |
||||
$sidebar_collapsed_checkbox.prop('checked', false) |
||||
}) |
||||
|
||||
var $sidebar_fixed_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('layout-fixed'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('layout-fixed') |
||||
$(window).trigger('resize') |
||||
} else { |
||||
$('body').removeClass('layout-fixed') |
||||
$(window).trigger('resize') |
||||
} |
||||
}) |
||||
var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>') |
||||
$container.append($sidebar_fixed_container) |
||||
|
||||
var $sidebar_mini_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('sidebar-mini'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('sidebar-mini') |
||||
} else { |
||||
$('body').removeClass('sidebar-mini') |
||||
} |
||||
}) |
||||
var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>') |
||||
$container.append($sidebar_mini_container) |
||||
|
||||
var $sidebar_mini_md_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('sidebar-mini-md'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('sidebar-mini-md') |
||||
} else { |
||||
$('body').removeClass('sidebar-mini-md') |
||||
} |
||||
}) |
||||
var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>') |
||||
$container.append($sidebar_mini_md_container) |
||||
|
||||
var $sidebar_mini_xs_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('sidebar-mini-xs'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('sidebar-mini-xs') |
||||
} else { |
||||
$('body').removeClass('sidebar-mini-xs') |
||||
} |
||||
}) |
||||
var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>') |
||||
$container.append($sidebar_mini_xs_container) |
||||
|
||||
var $flat_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('nav-flat'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('nav-flat') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('nav-flat') |
||||
} |
||||
}) |
||||
var $flat_sidebar_container = $('<div />', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('<span>Nav Flat Style</span>') |
||||
$container.append($flat_sidebar_container) |
||||
|
||||
var $legacy_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('nav-legacy'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('nav-legacy') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('nav-legacy') |
||||
} |
||||
}) |
||||
var $legacy_sidebar_container = $('<div />', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('<span>Nav Legacy Style</span>') |
||||
$container.append($legacy_sidebar_container) |
||||
|
||||
var $compact_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('nav-compact'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('nav-compact') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('nav-compact') |
||||
} |
||||
}) |
||||
var $compact_sidebar_container = $('<div />', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('<span>Nav Compact</span>') |
||||
$container.append($compact_sidebar_container) |
||||
|
||||
var $child_indent_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('nav-child-indent'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('nav-child-indent') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('nav-child-indent') |
||||
} |
||||
}) |
||||
var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Nav Child Indent</span>') |
||||
$container.append($child_indent_sidebar_container) |
||||
|
||||
var $child_hide_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('nav-collapse-hide-child') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('nav-collapse-hide-child') |
||||
} |
||||
}) |
||||
var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>') |
||||
$container.append($child_hide_sidebar_container) |
||||
|
||||
var $no_expand_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.main-sidebar').hasClass('sidebar-no-expand'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.main-sidebar').addClass('sidebar-no-expand') |
||||
} else { |
||||
$('.main-sidebar').removeClass('sidebar-no-expand') |
||||
} |
||||
}) |
||||
var $no_expand_sidebar_container = $('<div />', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>') |
||||
$container.append($no_expand_sidebar_container) |
||||
|
||||
$container.append('<h6>Footer Options</h6>') |
||||
var $footer_fixed_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('layout-footer-fixed'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('layout-footer-fixed') |
||||
} else { |
||||
$('body').removeClass('layout-footer-fixed') |
||||
} |
||||
}) |
||||
var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>') |
||||
$container.append($footer_fixed_container) |
||||
|
||||
$container.append('<h6>Small Text Options</h6>') |
||||
|
||||
var $text_sm_body_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('body').hasClass('text-sm'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('body').addClass('text-sm') |
||||
} else { |
||||
$('body').removeClass('text-sm') |
||||
} |
||||
}) |
||||
var $text_sm_body_container = $('<div />', { class: 'mb-1' }).append($text_sm_body_checkbox).append('<span>Body</span>') |
||||
$container.append($text_sm_body_container) |
||||
|
||||
var $text_sm_header_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.main-header').hasClass('text-sm'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.main-header').addClass('text-sm') |
||||
} else { |
||||
$('.main-header').removeClass('text-sm') |
||||
} |
||||
}) |
||||
var $text_sm_header_container = $('<div />', { class: 'mb-1' }).append($text_sm_header_checkbox).append('<span>Navbar</span>') |
||||
$container.append($text_sm_header_container) |
||||
|
||||
var $text_sm_brand_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.brand-link').hasClass('text-sm'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.brand-link').addClass('text-sm') |
||||
} else { |
||||
$('.brand-link').removeClass('text-sm') |
||||
} |
||||
}) |
||||
var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>') |
||||
$container.append($text_sm_brand_container) |
||||
|
||||
var $text_sm_sidebar_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.nav-sidebar').hasClass('text-sm'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.nav-sidebar').addClass('text-sm') |
||||
} else { |
||||
$('.nav-sidebar').removeClass('text-sm') |
||||
} |
||||
}) |
||||
var $text_sm_sidebar_container = $('<div />', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('<span>Sidebar Nav</span>') |
||||
$container.append($text_sm_sidebar_container) |
||||
|
||||
var $text_sm_footer_checkbox = $('<input />', { |
||||
type: 'checkbox', |
||||
value: 1, |
||||
checked: $('.main-footer').hasClass('text-sm'), |
||||
class: 'mr-1' |
||||
}).on('click', function () { |
||||
if ($(this).is(':checked')) { |
||||
$('.main-footer').addClass('text-sm') |
||||
} else { |
||||
$('.main-footer').removeClass('text-sm') |
||||
} |
||||
}) |
||||
var $text_sm_footer_container = $('<div />', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>') |
||||
$container.append($text_sm_footer_container) |
||||
|
||||
// Color Arrays
|
||||
|
||||
var navbar_dark_skins = [ |
||||
'navbar-primary', |
||||
'navbar-secondary', |
||||
'navbar-info', |
||||
'navbar-success', |
||||
'navbar-danger', |
||||
'navbar-indigo', |
||||
'navbar-purple', |
||||
'navbar-pink', |
||||
'navbar-navy', |
||||
'navbar-lightblue', |
||||
'navbar-teal', |
||||
'navbar-cyan', |
||||
'navbar-dark', |
||||
'navbar-gray-dark', |
||||
'navbar-gray' |
||||
] |
||||
|
||||
var navbar_light_skins = [ |
||||
'navbar-light', |
||||
'navbar-warning', |
||||
'navbar-white', |
||||
'navbar-orange' |
||||
] |
||||
|
||||
var sidebar_colors = [ |
||||
'bg-primary', |
||||
'bg-warning', |
||||
'bg-info', |
||||
'bg-danger', |
||||
'bg-success', |
||||
'bg-indigo', |
||||
'bg-lightblue', |
||||
'bg-navy', |
||||
'bg-purple', |
||||
'bg-fuchsia', |
||||
'bg-pink', |
||||
'bg-maroon', |
||||
'bg-orange', |
||||
'bg-lime', |
||||
'bg-teal', |
||||
'bg-olive' |
||||
] |
||||
|
||||
var accent_colors = [ |
||||
'accent-primary', |
||||
'accent-warning', |
||||
'accent-info', |
||||
'accent-danger', |
||||
'accent-success', |
||||
'accent-indigo', |
||||
'accent-lightblue', |
||||
'accent-navy', |
||||
'accent-purple', |
||||
'accent-fuchsia', |
||||
'accent-pink', |
||||
'accent-maroon', |
||||
'accent-orange', |
||||
'accent-lime', |
||||
'accent-teal', |
||||
'accent-olive' |
||||
] |
||||
|
||||
var sidebar_skins = [ |
||||
'sidebar-dark-primary', |
||||
'sidebar-dark-warning', |
||||
'sidebar-dark-info', |
||||
'sidebar-dark-danger', |
||||
'sidebar-dark-success', |
||||
'sidebar-dark-indigo', |
||||
'sidebar-dark-lightblue', |
||||
'sidebar-dark-navy', |
||||
'sidebar-dark-purple', |
||||
'sidebar-dark-fuchsia', |
||||
'sidebar-dark-pink', |
||||
'sidebar-dark-maroon', |
||||
'sidebar-dark-orange', |
||||
'sidebar-dark-lime', |
||||
'sidebar-dark-teal', |
||||
'sidebar-dark-olive', |
||||
'sidebar-light-primary', |
||||
'sidebar-light-warning', |
||||
'sidebar-light-info', |
||||
'sidebar-light-danger', |
||||
'sidebar-light-success', |
||||
'sidebar-light-indigo', |
||||
'sidebar-light-lightblue', |
||||
'sidebar-light-navy', |
||||
'sidebar-light-purple', |
||||
'sidebar-light-fuchsia', |
||||
'sidebar-light-pink', |
||||
'sidebar-light-maroon', |
||||
'sidebar-light-orange', |
||||
'sidebar-light-lime', |
||||
'sidebar-light-teal', |
||||
'sidebar-light-olive' |
||||
] |
||||
|
||||
// Navbar Variants
|
||||
|
||||
$container.append('<h6>Navbar Variants</h6>') |
||||
|
||||
var $navbar_variants = $('<div />', { |
||||
class: 'd-flex' |
||||
}) |
||||
var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) |
||||
var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { |
||||
var color = $(this).data('color') |
||||
var $main_header = $('.main-header') |
||||
$main_header.removeClass('navbar-dark').removeClass('navbar-light') |
||||
navbar_all_colors.forEach(function (color) { |
||||
$main_header.removeClass(color) |
||||
}) |
||||
|
||||
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0 ') |
||||
|
||||
if (navbar_dark_skins.indexOf(color) > -1) { |
||||
$main_header.addClass('navbar-dark') |
||||
$(this).parent().addClass(color).addClass('text-light') |
||||
} else { |
||||
$main_header.addClass('navbar-light') |
||||
$(this).parent().addClass(color) |
||||
} |
||||
|
||||
$main_header.addClass(color) |
||||
}) |
||||
|
||||
var active_navbar_color = null |
||||
$('.main-header')[0].classList.forEach(function (className) { |
||||
if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) { |
||||
active_navbar_color = className.replace('navbar-', 'bg-') |
||||
} |
||||
}) |
||||
|
||||
$navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true) |
||||
$navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color) |
||||
|
||||
$navbar_variants.append($navbar_variants_colors) |
||||
|
||||
$container.append($navbar_variants) |
||||
|
||||
// Sidebar Colors
|
||||
|
||||
$container.append('<h6>Accent Color Variants</h6>') |
||||
var $accent_variants = $('<div />', { |
||||
class: 'd-flex' |
||||
}) |
||||
$container.append($accent_variants) |
||||
$container.append(createSkinBlock(accent_colors, function () { |
||||
var color = $(this).data('color') |
||||
var accent_class = color |
||||
var $body = $('body') |
||||
accent_colors.forEach(function (skin) { |
||||
$body.removeClass(skin) |
||||
}) |
||||
|
||||
$body.addClass(accent_class) |
||||
}, true)) |
||||
|
||||
var active_accent_color = null |
||||
$('body')[0].classList.forEach(function (className) { |
||||
if (accent_colors.indexOf(className) > -1 && active_accent_color === null) { |
||||
active_accent_color = className.replace('navbar-', 'bg-') |
||||
} |
||||
}) |
||||
|
||||
// $accent_variants.find('option.' + active_accent_color).prop('selected', true)
|
||||
// $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color)
|
||||
|
||||
$container.append('<h6>Dark Sidebar Variants</h6>') |
||||
var $sidebar_variants_dark = $('<div />', { |
||||
class: 'd-flex' |
||||
}) |
||||
$container.append($sidebar_variants_dark) |
||||
var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () { |
||||
var color = $(this).data('color') |
||||
var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '') |
||||
var $sidebar = $('.main-sidebar') |
||||
sidebar_skins.forEach(function (skin) { |
||||
$sidebar.removeClass(skin) |
||||
$sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light') |
||||
}) |
||||
|
||||
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) |
||||
|
||||
$sidebar_light_variants.find('option').prop('selected', false) |
||||
$sidebar.addClass(sidebar_class) |
||||
$('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light') |
||||
}, true) |
||||
$container.append($sidebar_dark_variants) |
||||
|
||||
var active_sidebar_dark_color = null |
||||
$('.main-sidebar')[0].classList.forEach(function (className) { |
||||
var color = className.replace('sidebar-dark-', 'bg-') |
||||
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) { |
||||
active_sidebar_dark_color = color |
||||
} |
||||
}) |
||||
|
||||
$sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true) |
||||
$sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color) |
||||
|
||||
$container.append('<h6>Light Sidebar Variants</h6>') |
||||
var $sidebar_variants_light = $('<div />', { |
||||
class: 'd-flex' |
||||
}) |
||||
$container.append($sidebar_variants_light) |
||||
var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () { |
||||
var color = $(this).data('color') |
||||
var sidebar_class = 'sidebar-light-' + color.replace('bg-', '') |
||||
var $sidebar = $('.main-sidebar') |
||||
sidebar_skins.forEach(function (skin) { |
||||
$sidebar.removeClass(skin) |
||||
$sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light') |
||||
}) |
||||
|
||||
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) |
||||
|
||||
$sidebar_dark_variants.find('option').prop('selected', false) |
||||
$sidebar.addClass(sidebar_class) |
||||
$('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark') |
||||
}, true) |
||||
$container.append($sidebar_light_variants) |
||||
|
||||
var active_sidebar_light_color = null |
||||
$('.main-sidebar')[0].classList.forEach(function (className) { |
||||
var color = className.replace('sidebar-light-', 'bg-') |
||||
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) { |
||||
active_sidebar_light_color = color |
||||
} |
||||
}) |
||||
|
||||
if (active_sidebar_light_color !== null) { |
||||
$sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true) |
||||
$sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color) |
||||
} |
||||
|
||||
var logo_skins = navbar_all_colors |
||||
$container.append('<h6>Brand Logo Variants</h6>') |
||||
var $logo_variants = $('<div />', { |
||||
class: 'd-flex' |
||||
}) |
||||
$container.append($logo_variants) |
||||
var $clear_btn = $('<a />', { |
||||
href: '#' |
||||
}).text('clear').on('click', function (e) { |
||||
e.preventDefault() |
||||
var $logo = $('.brand-link') |
||||
logo_skins.forEach(function (skin) { |
||||
$logo.removeClass(skin) |
||||
}) |
||||
}) |
||||
|
||||
var $brand_variants = createSkinBlock(logo_skins, function () { |
||||
var color = $(this).data('color') |
||||
var $logo = $('.brand-link') |
||||
|
||||
if (color === 'navbar-light' || color === 'navbar-white') { |
||||
$logo.addClass('text-black') |
||||
} else { |
||||
$logo.removeClass('text-black') |
||||
} |
||||
|
||||
logo_skins.forEach(function (skin) { |
||||
$logo.removeClass(skin) |
||||
}) |
||||
|
||||
if (color) { |
||||
$(this).parent().removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '') |
||||
} else { |
||||
$(this).parent().removeClass().addClass('custom-select mb-3 border-0') |
||||
} |
||||
|
||||
$logo.addClass(color) |
||||
}, true).append($clear_btn) |
||||
$container.append($brand_variants) |
||||
|
||||
var active_brand_color = null |
||||
$('.brand-link')[0].classList.forEach(function (className) { |
||||
if (logo_skins.indexOf(className) > -1 && active_brand_color === null) { |
||||
active_brand_color = className.replace('navbar-', 'bg-') |
||||
} |
||||
}) |
||||
|
||||
if (active_brand_color) { |
||||
$brand_variants.find('option.' + active_brand_color).prop('selected', true) |
||||
$brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color) |
||||
} |
||||
})(jQuery) |
@ -0,0 +1,267 @@ |
||||
/* |
||||
* Author: Abdullah A Almsaeed |
||||
* Date: 4 Jan 2014 |
||||
* Description: |
||||
* This is a demo file used only for the main dashboard (index.html) |
||||
**/ |
||||
|
||||
/* global moment:false, Chart:false, Sparkline:false */ |
||||
|
||||
$(function () { |
||||
'use strict' |
||||
|
||||
// Make the dashboard widgets sortable Using jquery UI
|
||||
$('.connectedSortable').sortable({ |
||||
placeholder: 'sort-highlight', |
||||
connectWith: '.connectedSortable', |
||||
handle: '.card-header, .nav-tabs', |
||||
forcePlaceholderSize: true, |
||||
zIndex: 999999 |
||||
}) |
||||
$('.connectedSortable .card-header').css('cursor', 'move') |
||||
|
||||
// jQuery UI sortable for the todo list
|
||||
$('.todo-list').sortable({ |
||||
placeholder: 'sort-highlight', |
||||
handle: '.handle', |
||||
forcePlaceholderSize: true, |
||||
zIndex: 999999 |
||||
}) |
||||
|
||||
// bootstrap WYSIHTML5 - text editor
|
||||
$('.textarea').summernote() |
||||
|
||||
$('.daterange').daterangepicker({ |
||||
ranges: { |
||||
Today: [moment(), moment()], |
||||
Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')], |
||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()], |
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()], |
||||
'This Month': [moment().startOf('month'), moment().endOf('month')], |
||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] |
||||
}, |
||||
startDate: moment().subtract(29, 'days'), |
||||
endDate: moment() |
||||
}, function (start, end) { |
||||
// eslint-disable-next-line no-alert
|
||||
alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')) |
||||
}) |
||||
|
||||
/* jQueryKnob */ |
||||
$('.knob').knob() |
||||
|
||||
// jvectormap data
|
||||
var visitorsData = { |
||||
US: 398, // USA
|
||||
SA: 400, // Saudi Arabia
|
||||
CA: 1000, // Canada
|
||||
DE: 500, // Germany
|
||||
FR: 760, // France
|
||||
CN: 300, // China
|
||||
AU: 700, // Australia
|
||||
BR: 600, // Brazil
|
||||
IN: 800, // India
|
||||
GB: 320, // Great Britain
|
||||
RU: 3000 // Russia
|
||||
} |
||||
// World map by jvectormap
|
||||
$('#world-map').vectorMap({ |
||||
map: 'usa_en', |
||||
backgroundColor: 'transparent', |
||||
regionStyle: { |
||||
initial: { |
||||
fill: 'rgba(255, 255, 255, 0.7)', |
||||
'fill-opacity': 1, |
||||
stroke: 'rgba(0,0,0,.2)', |
||||
'stroke-width': 1, |
||||
'stroke-opacity': 1 |
||||
} |
||||
}, |
||||
series: { |
||||
regions: [{ |
||||
values: visitorsData, |
||||
scale: ['#ffffff', '#0154ad'], |
||||
normalizeFunction: 'polynomial' |
||||
}] |
||||
}, |
||||
onRegionLabelShow: function (e, el, code) { |
||||
if (typeof visitorsData[code] !== 'undefined') { |
||||
el.html(el.html() + ': ' + visitorsData[code] + ' new visitors') |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// Sparkline charts
|
||||
var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) |
||||
var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) |
||||
var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) |
||||
|
||||
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]) |
||||
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]) |
||||
sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]) |
||||
|
||||
// The Calender
|
||||
$('#calendar').datetimepicker({ |
||||
format: 'L', |
||||
inline: true |
||||
}) |
||||
|
||||
// SLIMSCROLL FOR CHAT WIDGET
|
||||
$('#chat-box').overlayScrollbars({ |
||||
height: '250px' |
||||
}) |
||||
|
||||
/* Chart.js Charts */ |
||||
// Sales chart
|
||||
var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d') |
||||
// $('#revenue-chart').get(0).getContext('2d');
|
||||
|
||||
var salesChartData = { |
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], |
||||
datasets: [ |
||||
{ |
||||
label: 'Digital Goods', |
||||
backgroundColor: 'rgba(60,141,188,0.9)', |
||||
borderColor: 'rgba(60,141,188,0.8)', |
||||
pointRadius: false, |
||||
pointColor: '#3b8bba', |
||||
pointStrokeColor: 'rgba(60,141,188,1)', |
||||
pointHighlightFill: '#fff', |
||||
pointHighlightStroke: 'rgba(60,141,188,1)', |
||||
data: [28, 48, 40, 19, 86, 27, 90] |
||||
}, |
||||
{ |
||||
label: 'Electronics', |
||||
backgroundColor: 'rgba(210, 214, 222, 1)', |
||||
borderColor: 'rgba(210, 214, 222, 1)', |
||||
pointRadius: false, |
||||
pointColor: 'rgba(210, 214, 222, 1)', |
||||
pointStrokeColor: '#c1c7d1', |
||||
pointHighlightFill: '#fff', |
||||
pointHighlightStroke: 'rgba(220,220,220,1)', |
||||
data: [65, 59, 80, 81, 56, 55, 40] |
||||
} |
||||
] |
||||
} |
||||
|
||||
var salesChartOptions = { |
||||
maintainAspectRatio: false, |
||||
responsive: true, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
xAxes: [{ |
||||
gridLines: { |
||||
display: false |
||||
} |
||||
}], |
||||
yAxes: [{ |
||||
gridLines: { |
||||
display: false |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line', |
||||
data: salesChartData, |
||||
options: salesChartOptions |
||||
}) |
||||
|
||||
// Donut Chart
|
||||
var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d') |
||||
var pieData = { |
||||
labels: [ |
||||
'Instore Sales', |
||||
'Download Sales', |
||||
'Mail-Order Sales' |
||||
], |
||||
datasets: [ |
||||
{ |
||||
data: [30, 12, 20], |
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12'] |
||||
} |
||||
] |
||||
} |
||||
var pieOptions = { |
||||
legend: { |
||||
display: false |
||||
}, |
||||
maintainAspectRatio: false, |
||||
responsive: true |
||||
} |
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'doughnut', |
||||
data: pieData, |
||||
options: pieOptions |
||||
}) |
||||
|
||||
// Sales graph chart
|
||||
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d') |
||||
// $('#revenue-chart').get(0).getContext('2d');
|
||||
|
||||
var salesGraphChartData = { |
||||
labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'], |
||||
datasets: [ |
||||
{ |
||||
label: 'Digital Goods', |
||||
fill: false, |
||||
borderWidth: 2, |
||||
lineTension: 0, |
||||
spanGaps: true, |
||||
borderColor: '#efefef', |
||||
pointRadius: 3, |
||||
pointHoverRadius: 7, |
||||
pointColor: '#efefef', |
||||
pointBackgroundColor: '#efefef', |
||||
data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432] |
||||
} |
||||
] |
||||
} |
||||
|
||||
var salesGraphChartOptions = { |
||||
maintainAspectRatio: false, |
||||
responsive: true, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
xAxes: [{ |
||||
ticks: { |
||||
fontColor: '#efefef' |
||||
}, |
||||
gridLines: { |
||||
display: false, |
||||
color: '#efefef', |
||||
drawBorder: false |
||||
} |
||||
}], |
||||
yAxes: [{ |
||||
ticks: { |
||||
stepSize: 5000, |
||||
fontColor: '#efefef' |
||||
}, |
||||
gridLines: { |
||||
display: true, |
||||
color: '#efefef', |
||||
drawBorder: false |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line', |
||||
data: salesGraphChartData, |
||||
options: salesGraphChartOptions |
||||
}) |
||||
}) |
@ -0,0 +1,270 @@ |
||||
/* global Chart:false */ |
||||
|
||||
$(function () { |
||||
'use strict' |
||||
|
||||
/* ChartJS |
||||
* ------- |
||||
* Here we will create a few charts using ChartJS |
||||
*/ |
||||
|
||||
//-----------------------
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var salesChartCanvas = $('#salesChart').get(0).getContext('2d') |
||||
|
||||
var salesChartData = { |
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], |
||||
datasets: [ |
||||
{ |
||||
label: 'Digital Goods', |
||||
backgroundColor: 'rgba(60,141,188,0.9)', |
||||
borderColor: 'rgba(60,141,188,0.8)', |
||||
pointRadius: false, |
||||
pointColor: '#3b8bba', |
||||
pointStrokeColor: 'rgba(60,141,188,1)', |
||||
pointHighlightFill: '#fff', |
||||
pointHighlightStroke: 'rgba(60,141,188,1)', |
||||
data: [28, 48, 40, 19, 86, 27, 90] |
||||
}, |
||||
{ |
||||
label: 'Electronics', |
||||
backgroundColor: 'rgba(210, 214, 222, 1)', |
||||
borderColor: 'rgba(210, 214, 222, 1)', |
||||
pointRadius: false, |
||||
pointColor: 'rgba(210, 214, 222, 1)', |
||||
pointStrokeColor: '#c1c7d1', |
||||
pointHighlightFill: '#fff', |
||||
pointHighlightStroke: 'rgba(220,220,220,1)', |
||||
data: [65, 59, 80, 81, 56, 55, 40] |
||||
} |
||||
] |
||||
} |
||||
|
||||
var salesChartOptions = { |
||||
maintainAspectRatio: false, |
||||
responsive: true, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
xAxes: [{ |
||||
gridLines: { |
||||
display: false |
||||
} |
||||
}], |
||||
yAxes: [{ |
||||
gridLines: { |
||||
display: false |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var salesChart = new Chart(salesChartCanvas, { |
||||
type: 'line', |
||||
data: salesChartData, |
||||
options: salesChartOptions |
||||
} |
||||
) |
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var pieChartCanvas = $('#pieChart').get(0).getContext('2d') |
||||
var pieData = { |
||||
labels: [ |
||||
'Chrome', |
||||
'IE', |
||||
'FireFox', |
||||
'Safari', |
||||
'Opera', |
||||
'Navigator' |
||||
], |
||||
datasets: [ |
||||
{ |
||||
data: [700, 500, 400, 600, 300, 100], |
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'] |
||||
} |
||||
] |
||||
} |
||||
var pieOptions = { |
||||
legend: { |
||||
display: false |
||||
} |
||||
} |
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var pieChart = new Chart(pieChartCanvas, { |
||||
type: 'doughnut', |
||||
data: pieData, |
||||
options: pieOptions |
||||
}) |
||||
|
||||
//-----------------
|
||||
// - END PIE CHART -
|
||||
//-----------------
|
||||
|
||||
/* jVector Maps |
||||
* ------------ |
||||
* Create a world map with markers |
||||
*/ |
||||
$('#world-map-markers').mapael({ |
||||
map: { |
||||
name: 'usa_states', |
||||
zoom: { |
||||
enabled: true, |
||||
maxLevel: 10 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// $('#world-map-markers').vectorMap({
|
||||
// map : 'world_en',
|
||||
// normalizeFunction: 'polynomial',
|
||||
// hoverOpacity : 0.7,
|
||||
// hoverColor : false,
|
||||
// backgroundColor : 'transparent',
|
||||
// regionStyle : {
|
||||
// initial : {
|
||||
// fill : 'rgba(210, 214, 222, 1)',
|
||||
// 'fill-opacity' : 1,
|
||||
// stroke : 'none',
|
||||
// 'stroke-width' : 0,
|
||||
// 'stroke-opacity': 1
|
||||
// },
|
||||
// hover : {
|
||||
// 'fill-opacity': 0.7,
|
||||
// cursor : 'pointer'
|
||||
// },
|
||||
// selected : {
|
||||
// fill: 'yellow'
|
||||
// },
|
||||
// selectedHover: {}
|
||||
// },
|
||||
// markerStyle : {
|
||||
// initial: {
|
||||
// fill : '#00a65a',
|
||||
// stroke: '#111'
|
||||
// }
|
||||
// },
|
||||
// markers : [
|
||||
// {
|
||||
// latLng: [41.90, 12.45],
|
||||
// name : 'Vatican City'
|
||||
// },
|
||||
// {
|
||||
// latLng: [43.73, 7.41],
|
||||
// name : 'Monaco'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-0.52, 166.93],
|
||||
// name : 'Nauru'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-8.51, 179.21],
|
||||
// name : 'Tuvalu'
|
||||
// },
|
||||
// {
|
||||
// latLng: [43.93, 12.46],
|
||||
// name : 'San Marino'
|
||||
// },
|
||||
// {
|
||||
// latLng: [47.14, 9.52],
|
||||
// name : 'Liechtenstein'
|
||||
// },
|
||||
// {
|
||||
// latLng: [7.11, 171.06],
|
||||
// name : 'Marshall Islands'
|
||||
// },
|
||||
// {
|
||||
// latLng: [17.3, -62.73],
|
||||
// name : 'Saint Kitts and Nevis'
|
||||
// },
|
||||
// {
|
||||
// latLng: [3.2, 73.22],
|
||||
// name : 'Maldives'
|
||||
// },
|
||||
// {
|
||||
// latLng: [35.88, 14.5],
|
||||
// name : 'Malta'
|
||||
// },
|
||||
// {
|
||||
// latLng: [12.05, -61.75],
|
||||
// name : 'Grenada'
|
||||
// },
|
||||
// {
|
||||
// latLng: [13.16, -61.23],
|
||||
// name : 'Saint Vincent and the Grenadines'
|
||||
// },
|
||||
// {
|
||||
// latLng: [13.16, -59.55],
|
||||
// name : 'Barbados'
|
||||
// },
|
||||
// {
|
||||
// latLng: [17.11, -61.85],
|
||||
// name : 'Antigua and Barbuda'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-4.61, 55.45],
|
||||
// name : 'Seychelles'
|
||||
// },
|
||||
// {
|
||||
// latLng: [7.35, 134.46],
|
||||
// name : 'Palau'
|
||||
// },
|
||||
// {
|
||||
// latLng: [42.5, 1.51],
|
||||
// name : 'Andorra'
|
||||
// },
|
||||
// {
|
||||
// latLng: [14.01, -60.98],
|
||||
// name : 'Saint Lucia'
|
||||
// },
|
||||
// {
|
||||
// latLng: [6.91, 158.18],
|
||||
// name : 'Federated States of Micronesia'
|
||||
// },
|
||||
// {
|
||||
// latLng: [1.3, 103.8],
|
||||
// name : 'Singapore'
|
||||
// },
|
||||
// {
|
||||
// latLng: [1.46, 173.03],
|
||||
// name : 'Kiribati'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-21.13, -175.2],
|
||||
// name : 'Tonga'
|
||||
// },
|
||||
// {
|
||||
// latLng: [15.3, -61.38],
|
||||
// name : 'Dominica'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-20.2, 57.5],
|
||||
// name : 'Mauritius'
|
||||
// },
|
||||
// {
|
||||
// latLng: [26.02, 50.55],
|
||||
// name : 'Bahrain'
|
||||
// },
|
||||
// {
|
||||
// latLng: [0.33, 6.73],
|
||||
// name : 'São Tomé and Príncipe'
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
}) |
||||
|
||||
// lgtm [js/unused-local-variable]
|
@ -0,0 +1,147 @@ |
||||
/* global Chart:false */ |
||||
|
||||
$(function () { |
||||
'use strict' |
||||
|
||||
var ticksStyle = { |
||||
fontColor: '#495057', |
||||
fontStyle: 'bold' |
||||
} |
||||
|
||||
var mode = 'index' |
||||
var intersect = true |
||||
|
||||
var $salesChart = $('#sales-chart') |
||||
// eslint-disable-next-line no-unused-vars
|
||||
var salesChart = new Chart($salesChart, { |
||||
type: 'bar', |
||||
data: { |
||||
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], |
||||
datasets: [ |
||||
{ |
||||
backgroundColor: '#007bff', |
||||
borderColor: '#007bff', |
||||
data: [1000, 2000, 3000, 2500, 2700, 2500, 3000] |
||||
}, |
||||
{ |
||||
backgroundColor: '#ced4da', |
||||
borderColor: '#ced4da', |
||||
data: [700, 1700, 2700, 2000, 1800, 1500, 2000] |
||||
} |
||||
] |
||||
}, |
||||
options: { |
||||
maintainAspectRatio: false, |
||||
tooltips: { |
||||
mode: mode, |
||||
intersect: intersect |
||||
}, |
||||
hover: { |
||||
mode: mode, |
||||
intersect: intersect |
||||
}, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
yAxes: [{ |
||||
// display: false,
|
||||
gridLines: { |
||||
display: true, |
||||
lineWidth: '4px', |
||||
color: 'rgba(0, 0, 0, .2)', |
||||
zeroLineColor: 'transparent' |
||||
}, |
||||
ticks: $.extend({ |
||||
beginAtZero: true, |
||||
|
||||
// Include a dollar sign in the ticks
|
||||
callback: function (value) { |
||||
if (value >= 1000) { |
||||
value /= 1000 |
||||
value += 'k' |
||||
} |
||||
|
||||
return '$' + value |
||||
} |
||||
}, ticksStyle) |
||||
}], |
||||
xAxes: [{ |
||||
display: true, |
||||
gridLines: { |
||||
display: false |
||||
}, |
||||
ticks: ticksStyle |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
|
||||
var $visitorsChart = $('#visitors-chart') |
||||
// eslint-disable-next-line no-unused-vars
|
||||
var visitorsChart = new Chart($visitorsChart, { |
||||
data: { |
||||
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], |
||||
datasets: [{ |
||||
type: 'line', |
||||
data: [100, 120, 170, 167, 180, 177, 160], |
||||
backgroundColor: 'transparent', |
||||
borderColor: '#007bff', |
||||
pointBorderColor: '#007bff', |
||||
pointBackgroundColor: '#007bff', |
||||
fill: false |
||||
// pointHoverBackgroundColor: '#007bff',
|
||||
// pointHoverBorderColor : '#007bff'
|
||||
}, |
||||
{ |
||||
type: 'line', |
||||
data: [60, 80, 70, 67, 80, 77, 100], |
||||
backgroundColor: 'tansparent', |
||||
borderColor: '#ced4da', |
||||
pointBorderColor: '#ced4da', |
||||
pointBackgroundColor: '#ced4da', |
||||
fill: false |
||||
// pointHoverBackgroundColor: '#ced4da',
|
||||
// pointHoverBorderColor : '#ced4da'
|
||||
}] |
||||
}, |
||||
options: { |
||||
maintainAspectRatio: false, |
||||
tooltips: { |
||||
mode: mode, |
||||
intersect: intersect |
||||
}, |
||||
hover: { |
||||
mode: mode, |
||||
intersect: intersect |
||||
}, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
yAxes: [{ |
||||
// display: false,
|
||||
gridLines: { |
||||
display: true, |
||||
lineWidth: '4px', |
||||
color: 'rgba(0, 0, 0, .2)', |
||||
zeroLineColor: 'transparent' |
||||
}, |
||||
ticks: $.extend({ |
||||
beginAtZero: true, |
||||
suggestedMax: 200 |
||||
}, ticksStyle) |
||||
}], |
||||
xAxes: [{ |
||||
display: true, |
||||
gridLines: { |
||||
display: false |
||||
}, |
||||
ticks: ticksStyle |
||||
}] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
// lgtm [js/unused-local-variable]
|
@ -0,0 +1,399 @@ |
||||
/*! |
||||
* Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. |
||||
* @package bootstrap-colorpicker |
||||
* @version v3.2.0 |
||||
* @license MIT |
||||
* @link https://itsjavi.com/bootstrap-colorpicker/ |
||||
* @link https://github.com/itsjavi/bootstrap-colorpicker.git |
||||
*/ |
||||
.colorpicker { |
||||
position: relative; |
||||
display: none; |
||||
font-size: inherit; |
||||
color: inherit; |
||||
text-align: left; |
||||
list-style: none; |
||||
background-color: #ffffff; |
||||
background-clip: padding-box; |
||||
border: 1px solid rgba(0, 0, 0, 0.2); |
||||
padding: .75rem .75rem; |
||||
width: 148px; |
||||
border-radius: 4px; |
||||
-webkit-box-sizing: content-box; |
||||
box-sizing: content-box; } |
||||
|
||||
.colorpicker.colorpicker-disabled, |
||||
.colorpicker.colorpicker-disabled * { |
||||
cursor: default !important; } |
||||
|
||||
.colorpicker div { |
||||
position: relative; } |
||||
|
||||
.colorpicker-popup { |
||||
position: absolute; |
||||
top: 100%; |
||||
left: 0; |
||||
float: left; |
||||
margin-top: 1px; |
||||
z-index: 1060; } |
||||
|
||||
.colorpicker-popup.colorpicker-bs-popover-content { |
||||
position: relative; |
||||
top: auto; |
||||
left: auto; |
||||
float: none; |
||||
margin: 0; |
||||
z-index: initial; |
||||
border: none; |
||||
padding: 0.25rem 0; |
||||
border-radius: 0; |
||||
background: none; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; } |
||||
|
||||
.colorpicker:before, |
||||
.colorpicker:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
line-height: 0; } |
||||
|
||||
.colorpicker-clear { |
||||
clear: both; |
||||
display: block; } |
||||
|
||||
.colorpicker:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
border-left: 7px solid transparent; |
||||
border-right: 7px solid transparent; |
||||
border-bottom: 7px solid #ccc; |
||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
||||
position: absolute; |
||||
top: -7px; |
||||
left: auto; |
||||
right: 6px; } |
||||
|
||||
.colorpicker:after { |
||||
content: ''; |
||||
display: inline-block; |
||||
border-left: 6px solid transparent; |
||||
border-right: 6px solid transparent; |
||||
border-bottom: 6px solid #ffffff; |
||||
position: absolute; |
||||
top: -6px; |
||||
left: auto; |
||||
right: 7px; } |
||||
|
||||
.colorpicker.colorpicker-with-alpha { |
||||
width: 170px; } |
||||
|
||||
.colorpicker.colorpicker-with-alpha .colorpicker-alpha { |
||||
display: block; } |
||||
|
||||
.colorpicker-saturation { |
||||
position: relative; |
||||
width: 126px; |
||||
height: 126px; |
||||
/* FF3.6+ */ |
||||
/* Chrome,Safari4+ */ |
||||
/* Chrome10+,Safari5.1+ */ |
||||
/* Opera 11.10+ */ |
||||
/* IE10+ */ |
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0))); |
||||
background: linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); |
||||
/* W3C */ |
||||
cursor: crosshair; |
||||
float: left; |
||||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
margin-bottom: 6px; } |
||||
.colorpicker-saturation .colorpicker-guide { |
||||
display: block; |
||||
height: 6px; |
||||
width: 6px; |
||||
border-radius: 6px; |
||||
border: 1px solid #000; |
||||
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); |
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
margin: -3px 0 0 -3px; } |
||||
|
||||
.colorpicker-hue, |
||||
.colorpicker-alpha { |
||||
position: relative; |
||||
width: 16px; |
||||
height: 126px; |
||||
float: left; |
||||
cursor: row-resize; |
||||
margin-left: 6px; |
||||
margin-bottom: 6px; } |
||||
|
||||
.colorpicker-alpha-color { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; } |
||||
|
||||
.colorpicker-hue, |
||||
.colorpicker-alpha-color { |
||||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } |
||||
|
||||
.colorpicker-hue .colorpicker-guide, |
||||
.colorpicker-alpha .colorpicker-guide { |
||||
display: block; |
||||
height: 4px; |
||||
background: rgba(255, 255, 255, 0.8); |
||||
border: 1px solid rgba(0, 0, 0, 0.4); |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
margin-left: -2px; |
||||
margin-top: -2px; |
||||
right: -2px; |
||||
z-index: 1; } |
||||
|
||||
.colorpicker-hue { |
||||
/* FF3.6+ */ |
||||
/* Chrome,Safari4+ */ |
||||
/* Chrome10+,Safari5.1+ */ |
||||
/* Opera 11.10+ */ |
||||
/* IE10+ */ |
||||
background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red)); |
||||
background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%); |
||||
/* W3C */ } |
||||
|
||||
.colorpicker-alpha { |
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; |
||||
background-size: 10px 10px; |
||||
background-position: 0 0, 5px 5px; |
||||
display: none; } |
||||
|
||||
.colorpicker-bar { |
||||
min-height: 16px; |
||||
margin: 6px 0 0 0; |
||||
clear: both; |
||||
text-align: center; |
||||
font-size: 10px; |
||||
line-height: normal; |
||||
max-width: 100%; |
||||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } |
||||
.colorpicker-bar:before { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; } |
||||
|
||||
.colorpicker-bar.colorpicker-bar-horizontal { |
||||
height: 126px; |
||||
width: 16px; |
||||
margin: 0 0 6px 0; |
||||
float: left; } |
||||
|
||||
.colorpicker-input-addon { |
||||
position: relative; } |
||||
|
||||
.colorpicker-input-addon i { |
||||
display: inline-block; |
||||
cursor: pointer; |
||||
vertical-align: text-top; |
||||
height: 16px; |
||||
width: 16px; |
||||
position: relative; } |
||||
|
||||
.colorpicker-input-addon:before { |
||||
content: ""; |
||||
position: absolute; |
||||
width: 16px; |
||||
height: 16px; |
||||
display: inline-block; |
||||
vertical-align: text-top; |
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; |
||||
background-size: 10px 10px; |
||||
background-position: 0 0, 5px 5px; } |
||||
|
||||
.colorpicker.colorpicker-inline { |
||||
position: relative; |
||||
display: inline-block; |
||||
float: none; |
||||
z-index: auto; |
||||
vertical-align: text-bottom; } |
||||
|
||||
.colorpicker.colorpicker-horizontal { |
||||
width: 126px; |
||||
height: auto; } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-bar { |
||||
width: 126px; } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-saturation { |
||||
float: none; |
||||
margin-bottom: 0; } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-hue, |
||||
.colorpicker.colorpicker-horizontal .colorpicker-alpha { |
||||
float: none; |
||||
width: 126px; |
||||
height: 16px; |
||||
cursor: col-resize; |
||||
margin-left: 0; |
||||
margin-top: 6px; |
||||
margin-bottom: 0; } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide, |
||||
.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide { |
||||
position: absolute; |
||||
display: block; |
||||
bottom: -2px; |
||||
left: 0; |
||||
right: auto; |
||||
height: auto; |
||||
width: 4px; } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-hue { |
||||
/* FF3.6+ */ |
||||
/* Chrome,Safari4+ */ |
||||
/* Chrome10+,Safari5.1+ */ |
||||
/* Opera 11.10+ */ |
||||
/* IE10+ */ |
||||
background: -webkit-gradient(linear, right top, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red)); |
||||
background: linear-gradient(to left, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%); |
||||
/* W3C */ } |
||||
|
||||
.colorpicker.colorpicker-horizontal .colorpicker-alpha { |
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; |
||||
background-size: 10px 10px; |
||||
background-position: 0 0, 5px 5px; } |
||||
|
||||
.colorpicker-inline:before, |
||||
.colorpicker-no-arrow:before, |
||||
.colorpicker-popup.colorpicker-bs-popover-content:before { |
||||
content: none; |
||||
display: none; } |
||||
|
||||
.colorpicker-inline:after, |
||||
.colorpicker-no-arrow:after, |
||||
.colorpicker-popup.colorpicker-bs-popover-content:after { |
||||
content: none; |
||||
display: none; } |
||||
|
||||
.colorpicker-alpha, |
||||
.colorpicker-saturation, |
||||
.colorpicker-hue { |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; } |
||||
|
||||
.colorpicker.colorpicker-visible, |
||||
.colorpicker-alpha.colorpicker-visible, |
||||
.colorpicker-saturation.colorpicker-visible, |
||||
.colorpicker-hue.colorpicker-visible, |
||||
.colorpicker-bar.colorpicker-visible { |
||||
display: block; } |
||||
|
||||
.colorpicker.colorpicker-hidden, |
||||
.colorpicker-alpha.colorpicker-hidden, |
||||
.colorpicker-saturation.colorpicker-hidden, |
||||
.colorpicker-hue.colorpicker-hidden, |
||||
.colorpicker-bar.colorpicker-hidden { |
||||
display: none; } |
||||
|
||||
.colorpicker-inline.colorpicker-visible { |
||||
display: inline-block; } |
||||
|
||||
.colorpicker.colorpicker-disabled:after { |
||||
border: none; |
||||
content: ''; |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(233, 236, 239, 0.33); |
||||
top: 0; |
||||
left: 0; |
||||
right: auto; |
||||
z-index: 2; |
||||
position: absolute; } |
||||
|
||||
.colorpicker.colorpicker-disabled .colorpicker-guide { |
||||
display: none; } |
||||
|
||||
/** EXTENSIONS **/ |
||||
.colorpicker-preview { |
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; |
||||
background-size: 10px 10px; |
||||
background-position: 0 0, 5px 5px; } |
||||
|
||||
.colorpicker-preview > div { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; } |
||||
|
||||
.colorpicker-bar.colorpicker-swatches { |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
height: auto; } |
||||
|
||||
.colorpicker-swatches--inner { |
||||
clear: both; |
||||
margin-top: -6px; } |
||||
|
||||
.colorpicker-swatch { |
||||
position: relative; |
||||
cursor: pointer; |
||||
float: left; |
||||
height: 16px; |
||||
width: 16px; |
||||
margin-right: 6px; |
||||
margin-top: 6px; |
||||
margin-left: 0; |
||||
display: block; |
||||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; |
||||
background-size: 10px 10px; |
||||
background-position: 0 0, 5px 5px; } |
||||
|
||||
.colorpicker-swatch--inner { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; } |
||||
|
||||
.colorpicker-swatch:nth-of-type(7n+0) { |
||||
margin-right: 0; } |
||||
|
||||
.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0) { |
||||
margin-right: 6px; } |
||||
|
||||
.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0) { |
||||
margin-right: 0; } |
||||
|
||||
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0) { |
||||
margin-right: 0; } |
||||
|
||||
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0) { |
||||
margin-right: 6px; } |
||||
|
||||
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0) { |
||||
margin-right: 6px; } |
||||
|
||||
.colorpicker-swatch:last-of-type:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; } |
||||
|
||||
*[dir='rtl'] .colorpicker-element input, |
||||
.colorpicker-element[dir='rtl'] input, |
||||
.colorpicker-element input[dir='rtl'] { |
||||
direction: ltr; |
||||
text-align: right; } |
||||
|
||||
/*# sourceMappingURL=bootstrap-colorpicker.css.map */ |
@ -0,0 +1,418 @@ |
||||
/*! ======================================================= |
||||
VERSION 11.0.2 |
||||
========================================================= */ |
||||
/*! ========================================================= |
||||
* bootstrap-slider.js |
||||
* |
||||
* Maintainers: |
||||
* Kyle Kemp |
||||
* - Twitter: @seiyria |
||||
* - Github: seiyria |
||||
* Rohit Kalkur |
||||
* - Twitter: @Rovolutionary |
||||
* - Github: rovolution |
||||
* |
||||
* ========================================================= |
||||
* |
||||
* bootstrap-slider is released under the MIT License |
||||
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors |
||||
* |
||||
* Permission is hereby granted, free of charge, to any person |
||||
* obtaining a copy of this software and associated documentation |
||||
* files (the "Software"), to deal in the Software without |
||||
* restriction, including without limitation the rights to use, |
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
* copies of the Software, and to permit persons to whom the |
||||
* Software is furnished to do so, subject to the following |
||||
* conditions: |
||||
* |
||||
* The above copyright notice and this permission notice shall be |
||||
* included in all copies or substantial portions of the Software. |
||||
* |
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
||||
* OTHER DEALINGS IN THE SOFTWARE. |
||||
* |
||||
* ========================================================= */ |
||||
.slider { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
position: relative; |
||||
} |
||||
|
||||
.slider.slider-horizontal { |
||||
width: 210px; |
||||
height: 20px; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-track { |
||||
height: 10px; |
||||
width: 100%; |
||||
margin-top: -5px; |
||||
top: 50%; |
||||
left: 0; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { |
||||
height: 100%; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-tick, |
||||
.slider.slider-horizontal .slider-handle { |
||||
margin-left: -10px; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-tick.triangle, |
||||
.slider.slider-horizontal .slider-handle.triangle { |
||||
position: relative; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
border-width: 0 10px 10px 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-bottom-color: #036fa5; |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-tick-container { |
||||
white-space: nowrap; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-tick-label-container { |
||||
white-space: nowrap; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label { |
||||
display: inline-block; |
||||
text-align: center; |
||||
} |
||||
|
||||
.slider.slider-horizontal.slider-rtl .slider-track { |
||||
left: initial; |
||||
right: 0; |
||||
} |
||||
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick, |
||||
.slider.slider-horizontal.slider-rtl .slider-handle { |
||||
margin-left: initial; |
||||
margin-right: -10px; |
||||
} |
||||
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick-container { |
||||
left: initial; |
||||
right: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical { |
||||
height: 210px; |
||||
width: 20px; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-track { |
||||
width: 10px; |
||||
height: 100%; |
||||
left: 25%; |
||||
top: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-selection { |
||||
width: 100%; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { |
||||
width: 100%; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-tick, |
||||
.slider.slider-vertical .slider-handle { |
||||
margin-top: -10px; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-tick.triangle, |
||||
.slider.slider-vertical .slider-handle.triangle { |
||||
border-width: 10px 0 10px 10px; |
||||
width: 1px; |
||||
height: 1px; |
||||
border-left-color: #036fa5; |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-tick-label-container { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.slider.slider-vertical .slider-tick-label-container .slider-tick-label { |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.slider.slider-vertical.slider-rtl .slider-track { |
||||
left: initial; |
||||
right: 25%; |
||||
} |
||||
|
||||
.slider.slider-vertical.slider-rtl .slider-selection { |
||||
left: initial; |
||||
right: 0; |
||||
} |
||||
|
||||
.slider.slider-vertical.slider-rtl .slider-tick.triangle, |
||||
.slider.slider-vertical.slider-rtl .slider-handle.triangle { |
||||
border-width: 10px 10px 10px 0; |
||||
} |
||||
|
||||
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { |
||||
padding-left: initial; |
||||
padding-right: 4px; |
||||
} |
||||
|
||||
.slider.slider-disabled .slider-handle { |
||||
background-color: #cfcfcf; |
||||
background-image: -moz-linear-gradient(top, #DFDFDF, #BEBEBE); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#DFDFDF), to(#BEBEBE)); |
||||
background-image: -webkit-linear-gradient(top, #DFDFDF, #BEBEBE); |
||||
background-image: -o-linear-gradient(top, #DFDFDF, #BEBEBE); |
||||
background-image: linear-gradient(to bottom, #DFDFDF, #BEBEBE); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#BEBEBE',GradientType=0); |
||||
} |
||||
|
||||
.slider.slider-disabled .slider-track { |
||||
background-color: #e7e7e7; |
||||
background-image: -moz-linear-gradient(top, #E5E5E5, #E9E9E9); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E5E5), to(#E9E9E9)); |
||||
background-image: -webkit-linear-gradient(top, #E5E5E5, #E9E9E9); |
||||
background-image: -o-linear-gradient(top, #E5E5E5, #E9E9E9); |
||||
background-image: linear-gradient(to bottom, #E5E5E5, #E9E9E9); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#E9E9E9',GradientType=0); |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
.slider input { |
||||
display: none; |
||||
} |
||||
|
||||
.slider .tooltip-inner { |
||||
white-space: nowrap; |
||||
max-width: none; |
||||
} |
||||
|
||||
.slider .bs-tooltip-top .tooltip-inner, |
||||
.slider .bs-tooltip-bottom .tooltip-inner { |
||||
position: relative; |
||||
left: -50%; |
||||
} |
||||
|
||||
.slider.bs-tooltip-left .tooltip-inner, .slider.bs-tooltip-right .tooltip-inner { |
||||
position: relative; |
||||
top: -100%; |
||||
} |
||||
|
||||
.slider .tooltip { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.slider .tooltip.bs-tooltip-top .arrow, .slider .tooltip.bs-tooltip-bottom .arrow { |
||||
left: -.4rem; |
||||
} |
||||
|
||||
.slider .tooltip.bs-tooltip-top { |
||||
margin-top: -44px; |
||||
} |
||||
|
||||
.slider .tooltip.bs-tooltip-bottom { |
||||
margin-top: 2px; |
||||
} |
||||
|
||||
.slider .tooltip.bs-tooltip-left, .slider .tooltip.bs-tooltip-right { |
||||
margin-top: -14px; |
||||
} |
||||
|
||||
.slider .tooltip.bs-tooltip-left .arrow, .slider .tooltip.bs-tooltip-right .arrow { |
||||
top: 8px; |
||||
} |
||||
|
||||
.slider .hide { |
||||
display: none; |
||||
} |
||||
|
||||
.slider-track { |
||||
background-color: #f7f7f7; |
||||
background-image: -moz-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#F9F9F9)); |
||||
background-image: -webkit-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: -o-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9',GradientType=0); |
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
position: absolute; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.slider-selection { |
||||
background-color: #f7f7f7; |
||||
background-image: -moz-linear-gradient(top, #F9F9F9, #F5F5F5); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#F5F5F5)); |
||||
background-image: -webkit-linear-gradient(top, #F9F9F9, #F5F5F5); |
||||
background-image: -o-linear-gradient(top, #F9F9F9, #F5F5F5); |
||||
background-image: linear-gradient(to bottom, #F9F9F9, #F5F5F5); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#F5F5F5',GradientType=0); |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
position: absolute; |
||||
} |
||||
|
||||
.slider-selection.tick-slider-selection { |
||||
background-color: #46c1fe; |
||||
background-image: -moz-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52c5ff), to(#3abcfd)); |
||||
background-image: -webkit-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: -o-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: linear-gradient(to bottom, #52c5ff, #3abcfd); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd',GradientType=0); |
||||
} |
||||
|
||||
.slider-track-low, .slider-track-high { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
position: absolute; |
||||
background: transparent; |
||||
} |
||||
|
||||
.slider-handle { |
||||
background-color: #0478b2; |
||||
background-image: -moz-linear-gradient(top, #0480BE, #036fa5); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0480BE), to(#036fa5)); |
||||
background-image: -webkit-linear-gradient(top, #0480BE, #036fa5); |
||||
background-image: -o-linear-gradient(top, #0480BE, #036fa5); |
||||
background-image: linear-gradient(to bottom, #0480BE, #036fa5); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0480BE', endColorstr='#036fa5',GradientType=0); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
||||
position: absolute; |
||||
top: 0; |
||||
width: 20px; |
||||
height: 20px; |
||||
background-color: #0480BE; |
||||
border: 0px solid transparent; |
||||
} |
||||
|
||||
.slider-handle:hover { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.slider-handle.round { |
||||
-webkit-border-radius: 20px; |
||||
-moz-border-radius: 20px; |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.slider-handle.triangle { |
||||
background: transparent none; |
||||
} |
||||
|
||||
.slider-handle.custom { |
||||
background: transparent none; |
||||
} |
||||
|
||||
.slider-handle.custom::before { |
||||
line-height: 20px; |
||||
font-size: 20px; |
||||
content: '\2605'; |
||||
color: #726204; |
||||
} |
||||
|
||||
.slider-tick { |
||||
background-color: #f7f7f7; |
||||
background-image: -moz-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#F9F9F9)); |
||||
background-image: -webkit-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: -o-linear-gradient(top, #F5F5F5, #F9F9F9); |
||||
background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9',GradientType=0); |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
position: absolute; |
||||
cursor: pointer; |
||||
width: 20px; |
||||
height: 20px; |
||||
filter: none; |
||||
opacity: 0.8; |
||||
border: 0px solid transparent; |
||||
} |
||||
|
||||
.slider-tick.round { |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.slider-tick.triangle { |
||||
background: transparent none; |
||||
} |
||||
|
||||
.slider-tick.custom { |
||||
background: transparent none; |
||||
} |
||||
|
||||
.slider-tick.custom::before { |
||||
line-height: 20px; |
||||
font-size: 20px; |
||||
content: '\2605'; |
||||
color: #726204; |
||||
} |
||||
|
||||
.slider-tick.in-selection { |
||||
background-color: #46c1fe; |
||||
background-image: -moz-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52c5ff), to(#3abcfd)); |
||||
background-image: -webkit-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: -o-linear-gradient(top, #52c5ff, #3abcfd); |
||||
background-image: linear-gradient(to bottom, #52c5ff, #3abcfd); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd',GradientType=0); |
||||
opacity: 1; |
||||
} |
||||
|
||||
/*# sourceMappingURL=bootstrap-slider.css.map */ |
@ -0,0 +1,510 @@ |
||||
/** |
||||
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. |
||||
* |
||||
* @version v3.3.4 |
||||
* @homepage https://bttstrp.github.io/bootstrap-switch |
||||
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) |
||||
* @license Apache-2.0 |
||||
*/ |
||||
|
||||
.clearfix { |
||||
*zoom: 1; |
||||
} |
||||
.clearfix:before, |
||||
.clearfix:after { |
||||
display: table; |
||||
content: ""; |
||||
line-height: 0; |
||||
} |
||||
.clearfix:after { |
||||
clear: both; |
||||
} |
||||
.hide-text { |
||||
font: 0/0 a; |
||||
color: transparent; |
||||
text-shadow: none; |
||||
background-color: transparent; |
||||
border: 0; |
||||
} |
||||
.input-block-level { |
||||
display: block; |
||||
width: 100%; |
||||
min-height: 30px; |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
.bootstrap-switch { |
||||
display: inline-block; |
||||
direction: ltr; |
||||
cursor: pointer; |
||||
-webkit-border-radius: 5px; |
||||
-moz-border-radius: 5px; |
||||
border-radius: 5px; |
||||
border: 1px solid; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
position: relative; |
||||
text-align: left; |
||||
overflow: hidden; |
||||
line-height: 8px; |
||||
z-index: 0; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
-o-user-select: none; |
||||
user-select: none; |
||||
vertical-align: middle; |
||||
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
-moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-container { |
||||
display: inline-block; |
||||
top: 0; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
-moz-transform: translate3d(0, 0, 0); |
||||
-o-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on, |
||||
.bootstrap-switch .bootstrap-switch-handle-off, |
||||
.bootstrap-switch .bootstrap-switch-label { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
cursor: pointer; |
||||
display: inline-block !important; |
||||
padding-top: 4px; |
||||
padding-bottom: 4px; |
||||
padding-left: 8px; |
||||
padding-right: 8px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on, |
||||
.bootstrap-switch .bootstrap-switch-handle-off { |
||||
text-align: center; |
||||
z-index: 1; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { |
||||
color: #fff; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #005fcc; |
||||
background-image: -moz-linear-gradient(top, #0044cc, #08c); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#08c)); |
||||
background-image: -webkit-linear-gradient(top, #0044cc, #08c); |
||||
background-image: -o-linear-gradient(top, #0044cc, #08c); |
||||
background-image: linear-gradient(to bottom, #0044cc, #08c); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); |
||||
border-color: #08c #08c #005580; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #08c; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary[disabled] { |
||||
color: #fff; |
||||
background-color: #08c; |
||||
*background-color: #0077b3; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active { |
||||
background-color: #006699 \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { |
||||
color: #fff; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #41a7c5; |
||||
background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de)); |
||||
background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de); |
||||
background-image: -o-linear-gradient(top, #2f96b4, #5bc0de); |
||||
background-image: linear-gradient(to bottom, #2f96b4, #5bc0de); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0); |
||||
border-color: #5bc0de #5bc0de #28a1c5; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #5bc0de; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info[disabled] { |
||||
color: #fff; |
||||
background-color: #5bc0de; |
||||
*background-color: #46b8da; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active { |
||||
background-color: #31b0d5 \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { |
||||
color: #fff; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #58b058; |
||||
background-image: -moz-linear-gradient(top, #51a351, #62c462); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462)); |
||||
background-image: -webkit-linear-gradient(top, #51a351, #62c462); |
||||
background-image: -o-linear-gradient(top, #51a351, #62c462); |
||||
background-image: linear-gradient(to bottom, #51a351, #62c462); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0); |
||||
border-color: #62c462 #62c462 #3b9e3b; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #62c462; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success[disabled] { |
||||
color: #fff; |
||||
background-color: #62c462; |
||||
*background-color: #4fbd4f; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active { |
||||
background-color: #42b142 \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { |
||||
color: #fff; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #f9a123; |
||||
background-image: -moz-linear-gradient(top, #f89406, #fbb450); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450)); |
||||
background-image: -webkit-linear-gradient(top, #f89406, #fbb450); |
||||
background-image: -o-linear-gradient(top, #f89406, #fbb450); |
||||
background-image: linear-gradient(to bottom, #f89406, #fbb450); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0); |
||||
border-color: #fbb450 #fbb450 #f89406; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #fbb450; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning[disabled] { |
||||
color: #fff; |
||||
background-color: #fbb450; |
||||
*background-color: #faa937; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active { |
||||
background-color: #fa9f1e \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { |
||||
color: #fff; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #d14641; |
||||
background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b)); |
||||
background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b); |
||||
background-image: -o-linear-gradient(top, #bd362f, #ee5f5b); |
||||
background-image: linear-gradient(to bottom, #bd362f, #ee5f5b); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0); |
||||
border-color: #ee5f5b #ee5f5b #e51d18; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #ee5f5b; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger[disabled] { |
||||
color: #fff; |
||||
background-color: #ee5f5b; |
||||
*background-color: #ec4844; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active { |
||||
background-color: #e9322d \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { |
||||
color: #333; |
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); |
||||
background-color: #f0f0f0; |
||||
background-image: -moz-linear-gradient(top, #e6e6e6, #fff); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff)); |
||||
background-image: -webkit-linear-gradient(top, #e6e6e6, #fff); |
||||
background-image: -o-linear-gradient(top, #e6e6e6, #fff); |
||||
background-image: linear-gradient(to bottom, #e6e6e6, #fff); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); |
||||
border-color: #fff #fff #d9d9d9; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #fff; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:hover, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:focus, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.disabled, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default[disabled], |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default[disabled] { |
||||
color: #333; |
||||
background-color: #fff; |
||||
*background-color: #f2f2f2; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active, |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active { |
||||
background-color: #e6e6e6 \9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-label { |
||||
text-align: center; |
||||
margin-top: -1px; |
||||
margin-bottom: -1px; |
||||
z-index: 100; |
||||
border-left: 1px solid #ccc; |
||||
border-right: 1px solid #ccc; |
||||
color: #333; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #f5f5f5; |
||||
background-image: -moz-linear-gradient(top, #fff, #e6e6e6); |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); |
||||
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); |
||||
background-image: -o-linear-gradient(top, #fff, #e6e6e6); |
||||
background-image: linear-gradient(to bottom, #fff, #e6e6e6); |
||||
background-repeat: repeat-x; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); |
||||
border-color: #e6e6e6 #e6e6e6 #bfbfbf; |
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
||||
*background-color: #e6e6e6; |
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-label:hover, |
||||
.bootstrap-switch .bootstrap-switch-label:focus, |
||||
.bootstrap-switch .bootstrap-switch-label:active, |
||||
.bootstrap-switch .bootstrap-switch-label.active, |
||||
.bootstrap-switch .bootstrap-switch-label.disabled, |
||||
.bootstrap-switch .bootstrap-switch-label[disabled] { |
||||
color: #333; |
||||
background-color: #e6e6e6; |
||||
*background-color: #d9d9d9; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-label:active, |
||||
.bootstrap-switch .bootstrap-switch-label.active { |
||||
background-color: #cccccc \9; |
||||
} |
||||
.bootstrap-switch span::before { |
||||
content: "\200b"; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on { |
||||
-webkit-border-top-left-radius: 4px; |
||||
-moz-border-radius-topleft: 4px; |
||||
border-top-left-radius: 4px; |
||||
-webkit-border-bottom-left-radius: 4px; |
||||
-moz-border-radius-bottomleft: 4px; |
||||
border-bottom-left-radius: 4px; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-off { |
||||
-webkit-border-top-right-radius: 4px; |
||||
-moz-border-radius-topright: 4px; |
||||
border-top-right-radius: 4px; |
||||
-webkit-border-bottom-right-radius: 4px; |
||||
-moz-border-radius-bottomright: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
} |
||||
.bootstrap-switch input[type='radio'], |
||||
.bootstrap-switch input[type='checkbox'] { |
||||
position: absolute !important; |
||||
top: 0; |
||||
left: 0; |
||||
opacity: 0; |
||||
filter: alpha(opacity=0); |
||||
z-index: -1; |
||||
visibility: hidden; |
||||
} |
||||
.bootstrap-switch input[type='radio'].form-control, |
||||
.bootstrap-switch input[type='checkbox'].form-control { |
||||
height: auto; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-mini { |
||||
min-width: 71px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { |
||||
padding: 3px 6px; |
||||
font-size: 10px; |
||||
line-height: 9px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-small { |
||||
min-width: 79px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { |
||||
padding: 3px 6px; |
||||
font-size: 12px; |
||||
line-height: 18px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-large { |
||||
min-width: 120px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { |
||||
padding: 9px 12px; |
||||
font-size: 16px; |
||||
line-height: normal; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-disabled, |
||||
.bootstrap-switch.bootstrap-switch-readonly, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate { |
||||
cursor: default !important; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { |
||||
opacity: 0.5; |
||||
filter: alpha(opacity=50); |
||||
cursor: default !important; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { |
||||
-webkit-transition: margin-left 0.5s; |
||||
-moz-transition: margin-left 0.5s; |
||||
-o-transition: margin-left 0.5s; |
||||
transition: margin-left 0.5s; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { |
||||
-webkit-border-top-left-radius: 0; |
||||
-moz-border-radius-topleft: 0; |
||||
border-top-left-radius: 0; |
||||
-webkit-border-bottom-left-radius: 0; |
||||
-moz-border-radius-bottomleft: 0; |
||||
border-bottom-left-radius: 0; |
||||
-webkit-border-top-right-radius: 4px; |
||||
-moz-border-radius-topright: 4px; |
||||
border-top-right-radius: 4px; |
||||
-webkit-border-bottom-right-radius: 4px; |
||||
-moz-border-radius-bottomright: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { |
||||
-webkit-border-top-right-radius: 0; |
||||
-moz-border-radius-topright: 0; |
||||
border-top-right-radius: 0; |
||||
-webkit-border-bottom-right-radius: 0; |
||||
-moz-border-radius-bottomright: 0; |
||||
border-bottom-right-radius: 0; |
||||
-webkit-border-top-left-radius: 4px; |
||||
-moz-border-radius-topleft: 4px; |
||||
border-top-left-radius: 4px; |
||||
-webkit-border-bottom-left-radius: 4px; |
||||
-moz-border-radius-bottomleft: 4px; |
||||
border-bottom-left-radius: 4px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-focused { |
||||
border-color: rgba(82, 168, 236, 0.8); |
||||
outline: 0; |
||||
outline: thin dotted \9; |
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); |
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); |
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { |
||||
-webkit-border-top-right-radius: 4px; |
||||
-moz-border-radius-topright: 4px; |
||||
border-top-right-radius: 4px; |
||||
-webkit-border-bottom-right-radius: 4px; |
||||
-moz-border-radius-bottomright: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { |
||||
-webkit-border-top-left-radius: 4px; |
||||
-moz-border-radius-topleft: 4px; |
||||
border-top-left-radius: 4px; |
||||
-webkit-border-bottom-left-radius: 4px; |
||||
-moz-border-radius-bottomleft: 4px; |
||||
border-bottom-left-radius: 4px; |
||||
} |
@ -0,0 +1,187 @@ |
||||
/** |
||||
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. |
||||
* |
||||
* @version v3.3.4 |
||||
* @homepage https://bttstrp.github.io/bootstrap-switch |
||||
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) |
||||
* @license Apache-2.0 |
||||
*/ |
||||
|
||||
.bootstrap-switch { |
||||
display: inline-block; |
||||
direction: ltr; |
||||
cursor: pointer; |
||||
border-radius: 4px; |
||||
border: 1px solid; |
||||
border-color: #ccc; |
||||
position: relative; |
||||
text-align: left; |
||||
overflow: hidden; |
||||
line-height: 8px; |
||||
z-index: 0; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
vertical-align: middle; |
||||
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-container { |
||||
display: inline-block; |
||||
top: 0; |
||||
border-radius: 4px; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on, |
||||
.bootstrap-switch .bootstrap-switch-handle-off, |
||||
.bootstrap-switch .bootstrap-switch-label { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
cursor: pointer; |
||||
display: table-cell; |
||||
vertical-align: middle; |
||||
padding: 6px 12px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on, |
||||
.bootstrap-switch .bootstrap-switch-handle-off { |
||||
text-align: center; |
||||
z-index: 1; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { |
||||
color: #fff; |
||||
background: #337ab7; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { |
||||
color: #fff; |
||||
background: #5bc0de; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { |
||||
color: #fff; |
||||
background: #5cb85c; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { |
||||
background: #f0ad4e; |
||||
color: #fff; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { |
||||
color: #fff; |
||||
background: #d9534f; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, |
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { |
||||
color: #000; |
||||
background: #eeeeee; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-label { |
||||
text-align: center; |
||||
margin-top: -1px; |
||||
margin-bottom: -1px; |
||||
z-index: 100; |
||||
color: #333; |
||||
background: #fff; |
||||
} |
||||
.bootstrap-switch span::before { |
||||
content: "\200b"; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-on { |
||||
border-bottom-left-radius: 3px; |
||||
border-top-left-radius: 3px; |
||||
} |
||||
.bootstrap-switch .bootstrap-switch-handle-off { |
||||
border-bottom-right-radius: 3px; |
||||
border-top-right-radius: 3px; |
||||
} |
||||
.bootstrap-switch input[type='radio'], |
||||
.bootstrap-switch input[type='checkbox'] { |
||||
position: absolute !important; |
||||
top: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
z-index: -1; |
||||
opacity: 0; |
||||
filter: alpha(opacity=0); |
||||
visibility: hidden; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { |
||||
padding: 1px 5px; |
||||
font-size: 12px; |
||||
line-height: 1.5; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { |
||||
padding: 5px 10px; |
||||
font-size: 12px; |
||||
line-height: 1.5; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { |
||||
padding: 6px 16px; |
||||
font-size: 18px; |
||||
line-height: 1.3333333; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-disabled, |
||||
.bootstrap-switch.bootstrap-switch-readonly, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate { |
||||
cursor: default !important; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, |
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { |
||||
opacity: 0.5; |
||||
filter: alpha(opacity=50); |
||||
cursor: default !important; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { |
||||
-webkit-transition: margin-left 0.5s; |
||||
-o-transition: margin-left 0.5s; |
||||
transition: margin-left 0.5s; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { |
||||
border-bottom-left-radius: 0; |
||||
border-top-left-radius: 0; |
||||
border-bottom-right-radius: 3px; |
||||
border-top-right-radius: 3px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { |
||||
border-bottom-right-radius: 0; |
||||
border-top-right-radius: 0; |
||||
border-bottom-left-radius: 3px; |
||||
border-top-left-radius: 3px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-focused { |
||||
border-color: #66afe9; |
||||
outline: 0; |
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); |
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { |
||||
border-bottom-right-radius: 3px; |
||||
border-top-right-radius: 3px; |
||||
} |
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, |
||||
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { |
||||
border-bottom-left-radius: 3px; |
||||
border-top-left-radius: 3px; |
||||
} |
@ -0,0 +1,784 @@ |
||||
/** |
||||
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. |
||||
* |
||||
* @version v3.3.4 |
||||
* @homepage https://bttstrp.github.io/bootstrap-switch
|
||||
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
|
||||
* @license Apache-2.0 |
||||
*/ |
||||
|
||||
(function (global, factory) { |
||||
if (typeof define === "function" && define.amd) { |
||||
define(['jquery'], factory); |
||||
} else if (typeof exports !== "undefined") { |
||||
factory(require('jquery')); |
||||
} else { |
||||
var mod = { |
||||
exports: {} |
||||
}; |
||||
factory(global.jquery); |
||||
global.bootstrapSwitch = mod.exports; |
||||
} |
||||
})(this, function (_jquery) { |
||||
'use strict'; |
||||
|
||||
var _jquery2 = _interopRequireDefault(_jquery); |
||||
|
||||
function _interopRequireDefault(obj) { |
||||
return obj && obj.__esModule ? obj : { |
||||
default: obj |
||||
}; |
||||
} |
||||
|
||||
var _extends = Object.assign || function (target) { |
||||
for (var i = 1; i < arguments.length; i++) { |
||||
var source = arguments[i]; |
||||
|
||||
for (var key in source) { |
||||
if (Object.prototype.hasOwnProperty.call(source, key)) { |
||||
target[key] = source[key]; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return target; |
||||
}; |
||||
|
||||
function _classCallCheck(instance, Constructor) { |
||||
if (!(instance instanceof Constructor)) { |
||||
throw new TypeError("Cannot call a class as a function"); |
||||
} |
||||
} |
||||
|
||||
var _createClass = function () { |
||||
function defineProperties(target, props) { |
||||
for (var i = 0; i < props.length; i++) { |
||||
var descriptor = props[i]; |
||||
descriptor.enumerable = descriptor.enumerable || false; |
||||
descriptor.configurable = true; |
||||
if ("value" in descriptor) descriptor.writable = true; |
||||
Object.defineProperty(target, descriptor.key, descriptor); |
||||
} |
||||
} |
||||
|
||||
return function (Constructor, protoProps, staticProps) { |
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps); |
||||
if (staticProps) defineProperties(Constructor, staticProps); |
||||
return Constructor; |
||||
}; |
||||
}(); |
||||
|
||||
var $ = _jquery2.default || window.jQuery || window.$; |
||||
|
||||
var BootstrapSwitch = function () { |
||||
function BootstrapSwitch(element) { |
||||
var _this = this; |
||||
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; |
||||
|
||||
_classCallCheck(this, BootstrapSwitch); |
||||
|
||||
this.$element = $(element); |
||||
this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, this._getElementOptions(), options); |
||||
this.prevOptions = {}; |
||||
this.$wrapper = $('<div>', { |
||||
class: function _class() { |
||||
var classes = []; |
||||
classes.push(_this.options.state ? 'on' : 'off'); |
||||
if (_this.options.size) { |
||||
classes.push(_this.options.size); |
||||
} |
||||
if (_this.options.disabled) { |
||||
classes.push('disabled'); |
||||
} |
||||
if (_this.options.readonly) { |
||||
classes.push('readonly'); |
||||
} |
||||
if (_this.options.indeterminate) { |
||||
classes.push('indeterminate'); |
||||
} |
||||
if (_this.options.inverse) { |
||||
classes.push('inverse'); |
||||
} |
||||
if (_this.$element.attr('id')) { |
||||
classes.push('id-' + _this.$element.attr('id')); |
||||
} |
||||
return classes.map(_this._getClass.bind(_this)).concat([_this.options.baseClass], _this._getClasses(_this.options.wrapperClass)).join(' '); |
||||
} |
||||
}); |
||||
this.$container = $('<div>', { class: this._getClass('container') }); |
||||
this.$on = $('<span>', { |
||||
html: this.options.onText, |
||||
class: this._getClass('handle-on') + ' ' + this._getClass(this.options.onColor) |
||||
}); |
||||
this.$off = $('<span>', { |
||||
html: this.options.offText, |
||||
class: this._getClass('handle-off') + ' ' + this._getClass(this.options.offColor) |
||||
}); |
||||
this.$label = $('<span>', { |
||||
html: this.options.labelText, |
||||
class: this._getClass('label') |
||||
}); |
||||
|
||||
this.$element.on('init.bootstrapSwitch', this.options.onInit.bind(this, element)); |
||||
this.$element.on('switchChange.bootstrapSwitch', function () { |
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { |
||||
args[_key] = arguments[_key]; |
||||
} |
||||
|
||||
if (_this.options.onSwitchChange.apply(element, args) === false) { |
||||
if (_this.$element.is(':radio')) { |
||||
$('[name="' + _this.$element.attr('name') + '"]').trigger('previousState.bootstrapSwitch', true); |
||||
} else { |
||||
_this.$element.trigger('previousState.bootstrapSwitch', true); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
this.$container = this.$element.wrap(this.$container).parent(); |
||||
this.$wrapper = this.$container.wrap(this.$wrapper).parent(); |
||||
this.$element.before(this.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : this.$off); |
||||
|
||||
if (this.options.indeterminate) { |
||||
this.$element.prop('indeterminate', true); |
||||
} |
||||
|
||||
this._init(); |
||||
this._elementHandlers(); |
||||
this._handleHandlers(); |
||||
this._labelHandlers(); |
||||
this._formHandler(); |
||||
this._externalLabelHandler(); |
||||
this.$element.trigger('init.bootstrapSwitch', this.options.state); |
||||
} |
||||
|
||||
_createClass(BootstrapSwitch, [{ |
||||
key: 'setPrevOptions', |
||||
value: function setPrevOptions() { |
||||
this.prevOptions = _extends({}, this.options); |
||||
} |
||||
}, { |
||||
key: 'state', |
||||
value: function state(value, skip) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.state; |
||||
} |
||||
if (this.options.disabled || this.options.readonly || this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) { |
||||
return this.$element; |
||||
} |
||||
if (this.$element.is(':radio')) { |
||||
$('[name="' + this.$element.attr('name') + '"]').trigger('setPreviousOptions.bootstrapSwitch'); |
||||
} else { |
||||
this.$element.trigger('setPreviousOptions.bootstrapSwitch'); |
||||
} |
||||
if (this.options.indeterminate) { |
||||
this.indeterminate(false); |
||||
} |
||||
this.$element.prop('checked', Boolean(value)).trigger('change.bootstrapSwitch', skip); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'toggleState', |
||||
value: function toggleState(skip) { |
||||
if (this.options.disabled || this.options.readonly) { |
||||
return this.$element; |
||||
} |
||||
if (this.options.indeterminate) { |
||||
this.indeterminate(false); |
||||
return this.state(true); |
||||
} else { |
||||
return this.$element.prop('checked', !this.options.state).trigger('change.bootstrapSwitch', skip); |
||||
} |
||||
} |
||||
}, { |
||||
key: 'size', |
||||
value: function size(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.size; |
||||
} |
||||
if (this.options.size != null) { |
||||
this.$wrapper.removeClass(this._getClass(this.options.size)); |
||||
} |
||||
if (value) { |
||||
this.$wrapper.addClass(this._getClass(value)); |
||||
} |
||||
this._width(); |
||||
this._containerPosition(); |
||||
this.options.size = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'animate', |
||||
value: function animate(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.animate; |
||||
} |
||||
if (this.options.animate === Boolean(value)) { |
||||
return this.$element; |
||||
} |
||||
return this.toggleAnimate(); |
||||
} |
||||
}, { |
||||
key: 'toggleAnimate', |
||||
value: function toggleAnimate() { |
||||
this.options.animate = !this.options.animate; |
||||
this.$wrapper.toggleClass(this._getClass('animate')); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'disabled', |
||||
value: function disabled(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.disabled; |
||||
} |
||||
if (this.options.disabled === Boolean(value)) { |
||||
return this.$element; |
||||
} |
||||
return this.toggleDisabled(); |
||||
} |
||||
}, { |
||||
key: 'toggleDisabled', |
||||
value: function toggleDisabled() { |
||||
this.options.disabled = !this.options.disabled; |
||||
this.$element.prop('disabled', this.options.disabled); |
||||
this.$wrapper.toggleClass(this._getClass('disabled')); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'readonly', |
||||
value: function readonly(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.readonly; |
||||
} |
||||
if (this.options.readonly === Boolean(value)) { |
||||
return this.$element; |
||||
} |
||||
return this.toggleReadonly(); |
||||
} |
||||
}, { |
||||
key: 'toggleReadonly', |
||||
value: function toggleReadonly() { |
||||
this.options.readonly = !this.options.readonly; |
||||
this.$element.prop('readonly', this.options.readonly); |
||||
this.$wrapper.toggleClass(this._getClass('readonly')); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'indeterminate', |
||||
value: function indeterminate(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.indeterminate; |
||||
} |
||||
if (this.options.indeterminate === Boolean(value)) { |
||||
return this.$element; |
||||
} |
||||
return this.toggleIndeterminate(); |
||||
} |
||||
}, { |
||||
key: 'toggleIndeterminate', |
||||
value: function toggleIndeterminate() { |
||||
this.options.indeterminate = !this.options.indeterminate; |
||||
this.$element.prop('indeterminate', this.options.indeterminate); |
||||
this.$wrapper.toggleClass(this._getClass('indeterminate')); |
||||
this._containerPosition(); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'inverse', |
||||
value: function inverse(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.inverse; |
||||
} |
||||
if (this.options.inverse === Boolean(value)) { |
||||
return this.$element; |
||||
} |
||||
return this.toggleInverse(); |
||||
} |
||||
}, { |
||||
key: 'toggleInverse', |
||||
value: function toggleInverse() { |
||||
this.$wrapper.toggleClass(this._getClass('inverse')); |
||||
var $on = this.$on.clone(true); |
||||
var $off = this.$off.clone(true); |
||||
this.$on.replaceWith($off); |
||||
this.$off.replaceWith($on); |
||||
this.$on = $off; |
||||
this.$off = $on; |
||||
this.options.inverse = !this.options.inverse; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'onColor', |
||||
value: function onColor(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.onColor; |
||||
} |
||||
if (this.options.onColor) { |
||||
this.$on.removeClass(this._getClass(this.options.onColor)); |
||||
} |
||||
this.$on.addClass(this._getClass(value)); |
||||
this.options.onColor = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'offColor', |
||||
value: function offColor(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.offColor; |
||||
} |
||||
if (this.options.offColor) { |
||||
this.$off.removeClass(this._getClass(this.options.offColor)); |
||||
} |
||||
this.$off.addClass(this._getClass(value)); |
||||
this.options.offColor = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'onText', |
||||
value: function onText(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.onText; |
||||
} |
||||
this.$on.html(value); |
||||
this._width(); |
||||
this._containerPosition(); |
||||
this.options.onText = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'offText', |
||||
value: function offText(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.offText; |
||||
} |
||||
this.$off.html(value); |
||||
this._width(); |
||||
this._containerPosition(); |
||||
this.options.offText = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'labelText', |
||||
value: function labelText(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.labelText; |
||||
} |
||||
this.$label.html(value); |
||||
this._width(); |
||||
this.options.labelText = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'handleWidth', |
||||
value: function handleWidth(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.handleWidth; |
||||
} |
||||
this.options.handleWidth = value; |
||||
this._width(); |
||||
this._containerPosition(); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'labelWidth', |
||||
value: function labelWidth(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.labelWidth; |
||||
} |
||||
this.options.labelWidth = value; |
||||
this._width(); |
||||
this._containerPosition(); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'baseClass', |
||||
value: function baseClass(value) { |
||||
return this.options.baseClass; |
||||
} |
||||
}, { |
||||
key: 'wrapperClass', |
||||
value: function wrapperClass(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.wrapperClass; |
||||
} |
||||
if (!value) { |
||||
value = $.fn.bootstrapSwitch.defaults.wrapperClass; |
||||
} |
||||
this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(' ')); |
||||
this.$wrapper.addClass(this._getClasses(value).join(' ')); |
||||
this.options.wrapperClass = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'radioAllOff', |
||||
value: function radioAllOff(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.radioAllOff; |
||||
} |
||||
var val = Boolean(value); |
||||
if (this.options.radioAllOff === val) { |
||||
return this.$element; |
||||
} |
||||
this.options.radioAllOff = val; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'onInit', |
||||
value: function onInit(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.onInit; |
||||
} |
||||
if (!value) { |
||||
value = $.fn.bootstrapSwitch.defaults.onInit; |
||||
} |
||||
this.options.onInit = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'onSwitchChange', |
||||
value: function onSwitchChange(value) { |
||||
if (typeof value === 'undefined') { |
||||
return this.options.onSwitchChange; |
||||
} |
||||
if (!value) { |
||||
value = $.fn.bootstrapSwitch.defaults.onSwitchChange; |
||||
} |
||||
this.options.onSwitchChange = value; |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: 'destroy', |
||||
value: function destroy() { |
||||
var $form = this.$element.closest('form'); |
||||
if ($form.length) { |
||||
$form.off('reset.bootstrapSwitch').removeData('bootstrap-switch'); |
||||
} |
||||
this.$container.children().not(this.$element).remove(); |
||||
this.$element.unwrap().unwrap().off('.bootstrapSwitch').removeData('bootstrap-switch'); |
||||
return this.$element; |
||||
} |
||||
}, { |
||||
key: '_getElementOptions', |
||||
value: function _getElementOptions() { |
||||
return { |
||||
state: this.$element.is(':checked'), |
||||
size: this.$element.data('size'), |
||||
animate: this.$element.data('animate'), |
||||
disabled: this.$element.is(':disabled'), |
||||
readonly: this.$element.is('[readonly]'), |
||||
indeterminate: this.$element.data('indeterminate'), |
||||
inverse: this.$element.data('inverse'), |
||||
radioAllOff: this.$element.data('radio-all-off'), |
||||
onColor: this.$element.data('on-color'), |
||||
offColor: this.$element.data('off-color'), |
||||
onText: this.$element.data('on-text'), |
||||
offText: this.$element.data('off-text'), |
||||
labelText: this.$element.data('label-text'), |
||||
handleWidth: this.$element.data('handle-width'), |
||||
labelWidth: this.$element.data('label-width'), |
||||
baseClass: this.$element.data('base-class'), |
||||
wrapperClass: this.$element.data('wrapper-class') |
||||
}; |
||||
} |
||||
}, { |
||||
key: '_width', |
||||
value: function _width() { |
||||
var _this2 = this; |
||||
|
||||
var $handles = this.$on.add(this.$off).add(this.$label).css('width', ''); |
||||
var handleWidth = this.options.handleWidth === 'auto' ? Math.round(Math.max(this.$on.width(), this.$off.width())) : this.options.handleWidth; |
||||
$handles.width(handleWidth); |
||||
this.$label.width(function (index, width) { |
||||
if (_this2.options.labelWidth !== 'auto') { |
||||
return _this2.options.labelWidth; |
||||
} |
||||
if (width < handleWidth) { |
||||
return handleWidth; |
||||
} |
||||
return width; |
||||
}); |
||||
this._handleWidth = this.$on.outerWidth(); |
||||
this._labelWidth = this.$label.outerWidth(); |
||||
this.$container.width(this._handleWidth * 2 + this._labelWidth); |
||||
return this.$wrapper.width(this._handleWidth + this._labelWidth); |
||||
} |
||||
}, { |
||||
key: '_containerPosition', |
||||
value: function _containerPosition() { |
||||
var _this3 = this; |
||||
|
||||
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.state; |
||||
var callback = arguments[1]; |
||||
|
||||
this.$container.css('margin-left', function () { |
||||
var values = [0, '-' + _this3._handleWidth + 'px']; |
||||
if (_this3.options.indeterminate) { |
||||
return '-' + _this3._handleWidth / 2 + 'px'; |
||||
} |
||||
if (state) { |
||||
if (_this3.options.inverse) { |
||||
return values[1]; |
||||
} else { |
||||
return values[0]; |
||||
} |
||||
} else { |
||||
if (_this3.options.inverse) { |
||||
return values[0]; |
||||
} else { |
||||
return values[1]; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}, { |
||||
key: '_init', |
||||
value: function _init() { |
||||
var _this4 = this; |
||||
|
||||
var init = function init() { |
||||
_this4.setPrevOptions(); |
||||
_this4._width(); |
||||
_this4._containerPosition(); |
||||
setTimeout(function () { |
||||
if (_this4.options.animate) { |
||||
return _this4.$wrapper.addClass(_this4._getClass('animate')); |
||||
} |
||||
}, 50); |
||||
}; |
||||
if (this.$wrapper.is(':visible')) { |
||||
init(); |
||||
return; |
||||
} |
||||
var initInterval = window.setInterval(function () { |
||||
if (_this4.$wrapper.is(':visible')) { |
||||
init(); |
||||
return window.clearInterval(initInterval); |
||||
} |
||||
}, 50); |
||||
} |
||||
}, { |
||||
key: '_elementHandlers', |
||||
value: function _elementHandlers() { |
||||
var _this5 = this; |
||||
|
||||
return this.$element.on({ |
||||
'setPreviousOptions.bootstrapSwitch': this.setPrevOptions.bind(this), |
||||
|
||||
'previousState.bootstrapSwitch': function previousStateBootstrapSwitch() { |
||||
_this5.options = _this5.prevOptions; |
||||
if (_this5.options.indeterminate) { |
||||
_this5.$wrapper.addClass(_this5._getClass('indeterminate')); |
||||
} |
||||
_this5.$element.prop('checked', _this5.options.state).trigger('change.bootstrapSwitch', true); |
||||
}, |
||||
|
||||
'change.bootstrapSwitch': function changeBootstrapSwitch(event, skip) { |
||||
event.preventDefault(); |
||||
event.stopImmediatePropagation(); |
||||
var state = _this5.$element.is(':checked'); |
||||
_this5._containerPosition(state); |
||||
if (state === _this5.options.state) { |
||||
return; |
||||
} |
||||
_this5.options.state = state; |
||||
_this5.$wrapper.toggleClass(_this5._getClass('off')).toggleClass(_this5._getClass('on')); |
||||
if (!skip) { |
||||
if (_this5.$element.is(':radio')) { |
||||
$('[name="' + _this5.$element.attr('name') + '"]').not(_this5.$element).prop('checked', false).trigger('change.bootstrapSwitch', true); |
||||
} |
||||
_this5.$element.trigger('switchChange.bootstrapSwitch', [state]); |
||||
} |
||||
}, |
||||
|
||||
'focus.bootstrapSwitch': function focusBootstrapSwitch(event) { |
||||
event.preventDefault(); |
||||
_this5.$wrapper.addClass(_this5._getClass('focused')); |
||||
}, |
||||
|
||||
'blur.bootstrapSwitch': function blurBootstrapSwitch(event) { |
||||
event.preventDefault(); |
||||
_this5.$wrapper.removeClass(_this5._getClass('focused')); |
||||
}, |
||||
|
||||
'keydown.bootstrapSwitch': function keydownBootstrapSwitch(event) { |
||||
if (!event.which || _this5.options.disabled || _this5.options.readonly) { |
||||
return; |
||||
} |
||||
if (event.which === 37 || event.which === 39) { |
||||
event.preventDefault(); |
||||
event.stopImmediatePropagation(); |
||||
_this5.state(event.which === 39); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}, { |
||||
key: '_handleHandlers', |
||||
value: function _handleHandlers() { |
||||
var _this6 = this; |
||||
|
||||
this.$on.on('click.bootstrapSwitch', function (event) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
_this6.state(false); |
||||
return _this6.$element.trigger('focus.bootstrapSwitch'); |
||||
}); |
||||
return this.$off.on('click.bootstrapSwitch', function (event) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
_this6.state(true); |
||||
return _this6.$element.trigger('focus.bootstrapSwitch'); |
||||
}); |
||||
} |
||||
}, { |
||||
key: '_labelHandlers', |
||||
value: function _labelHandlers() { |
||||
var _this7 = this; |
||||
|
||||
var handlers = { |
||||
click: function click(event) { |
||||
event.stopPropagation(); |
||||
}, |
||||
|
||||
|
||||
'mousedown.bootstrapSwitch touchstart.bootstrapSwitch': function mousedownBootstrapSwitchTouchstartBootstrapSwitch(event) { |
||||
if (_this7._dragStart || _this7.options.disabled || _this7.options.readonly) { |
||||
return; |
||||
} |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
_this7._dragStart = (event.pageX || event.originalEvent.touches[0].pageX) - parseInt(_this7.$container.css('margin-left'), 10); |
||||
if (_this7.options.animate) { |
||||
_this7.$wrapper.removeClass(_this7._getClass('animate')); |
||||
} |
||||
_this7.$element.trigger('focus.bootstrapSwitch'); |
||||
}, |
||||
|
||||
'mousemove.bootstrapSwitch touchmove.bootstrapSwitch': function mousemoveBootstrapSwitchTouchmoveBootstrapSwitch(event) { |
||||
if (_this7._dragStart == null) { |
||||
return; |
||||
} |
||||
var difference = (event.pageX || event.originalEvent.touches[0].pageX) - _this7._dragStart; |
||||
event.preventDefault(); |
||||
if (difference < -_this7._handleWidth || difference > 0) { |
||||
return; |
||||
} |
||||
_this7._dragEnd = difference; |
||||
_this7.$container.css('margin-left', _this7._dragEnd + 'px'); |
||||
}, |
||||
|
||||
'mouseup.bootstrapSwitch touchend.bootstrapSwitch': function mouseupBootstrapSwitchTouchendBootstrapSwitch(event) { |
||||
if (!_this7._dragStart) { |
||||
return; |
||||
} |
||||
event.preventDefault(); |
||||
if (_this7.options.animate) { |
||||
_this7.$wrapper.addClass(_this7._getClass('animate')); |
||||
} |
||||
if (_this7._dragEnd) { |
||||
var state = _this7._dragEnd > -(_this7._handleWidth / 2); |
||||
_this7._dragEnd = false; |
||||
_this7.state(_this7.options.inverse ? !state : state); |
||||
} else { |
||||
_this7.state(!_this7.options.state); |
||||
} |
||||
_this7._dragStart = false; |
||||
}, |
||||
|
||||
'mouseleave.bootstrapSwitch': function mouseleaveBootstrapSwitch() { |
||||
_this7.$label.trigger('mouseup.bootstrapSwitch'); |
||||
} |
||||
}; |
||||
this.$label.on(handlers); |
||||
} |
||||
}, { |
||||
key: '_externalLabelHandler', |
||||
value: function _externalLabelHandler() { |
||||
var _this8 = this; |
||||
|
||||
var $externalLabel = this.$element.closest('label'); |
||||
$externalLabel.on('click', function (event) { |
||||
event.preventDefault(); |
||||
event.stopImmediatePropagation(); |
||||
if (event.target === $externalLabel[0]) { |
||||
_this8.toggleState(); |
||||
} |
||||
}); |
||||
} |
||||
}, { |
||||
key: '_formHandler', |
||||
value: function _formHandler() { |
||||
var $form = this.$element.closest('form'); |
||||
if ($form.data('bootstrap-switch')) { |
||||
return; |
||||
} |
||||
$form.on('reset.bootstrapSwitch', function () { |
||||
window.setTimeout(function () { |
||||
$form.find('input').filter(function () { |
||||
return $(this).data('bootstrap-switch'); |
||||
}).each(function () { |
||||
return $(this).bootstrapSwitch('state', this.checked); |
||||
}); |
||||
}, 1); |
||||
}).data('bootstrap-switch', true); |
||||
} |
||||
}, { |
||||
key: '_getClass', |
||||
value: function _getClass(name) { |
||||
return this.options.baseClass + '-' + name; |
||||
} |
||||
}, { |
||||
key: '_getClasses', |
||||
value: function _getClasses(classes) { |
||||
if (!$.isArray(classes)) { |
||||
return [this._getClass(classes)]; |
||||
} |
||||
return classes.map(this._getClass.bind(this)); |
||||
} |
||||
}]); |
||||
|
||||
return BootstrapSwitch; |
||||
}(); |
||||
|
||||
$.fn.bootstrapSwitch = function (option) { |
||||
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { |
||||
args[_key2 - 1] = arguments[_key2]; |
||||
} |
||||
|
||||
function reducer(ret, next) { |
||||
var $this = $(next); |
||||
var existingData = $this.data('bootstrap-switch'); |
||||
var data = existingData || new BootstrapSwitch(next, option); |
||||
if (!existingData) { |
||||
$this.data('bootstrap-switch', data); |
||||
} |
||||
if (typeof option === 'string') { |
||||
return data[option].apply(data, args); |
||||
} |
||||
return ret; |
||||
} |
||||
return Array.prototype.reduce.call(this, reducer, this); |
||||
}; |
||||
$.fn.bootstrapSwitch.Constructor = BootstrapSwitch; |
||||
$.fn.bootstrapSwitch.defaults = { |
||||
state: true, |
||||
size: null, |
||||
animate: true, |
||||
disabled: false, |
||||
readonly: false, |
||||
indeterminate: false, |
||||
inverse: false, |
||||
radioAllOff: false, |
||||
onColor: 'primary', |
||||
offColor: 'default', |
||||
onText: 'ON', |
||||
offText: 'OFF', |
||||
labelText: ' ', |
||||
handleWidth: 'auto', |
||||
labelWidth: 'auto', |
||||
baseClass: 'bootstrap-switch', |
||||
wrapperClass: 'wrapper', |
||||
onInit: function onInit() {}, |
||||
onSwitchChange: function onSwitchChange() {} |
||||
}; |
||||
}); |
@ -0,0 +1,87 @@ |
||||
/* |
||||
* Bootstrap Duallistbox - v4.0.2 |
||||
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. |
||||
* http://www.virtuosoft.eu/code/bootstrap-duallistbox/ |
||||
* |
||||
* Made by István Ujj-Mészáros |
||||
* Under Apache License v2.0 License |
||||
*/ |
||||
.bootstrap-duallistbox-container .buttons { |
||||
width: 100%; |
||||
margin-bottom: -1px; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container label { |
||||
display: block; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .info { |
||||
display: inline-block; |
||||
margin-bottom: 5px; |
||||
font-size: 11px; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .clear1, |
||||
.bootstrap-duallistbox-container .clear2 { |
||||
display: none; |
||||
font-size: 10px; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .box1.filtered .clear1, |
||||
.bootstrap-duallistbox-container .box2.filtered .clear2 { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .move, |
||||
.bootstrap-duallistbox-container .remove { |
||||
width: 50%; |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .btn-group .btn { |
||||
border-bottom-left-radius: 0; |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
.bootstrap-duallistbox-container:not(.moveonselect) select { |
||||
border-top-left-radius: 0; |
||||
border-top-right-radius: 0; |
||||
} |
||||
.bootstrap-duallistbox-container .moveall, |
||||
.bootstrap-duallistbox-container .removeall { |
||||
width: 50%; |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container select { |
||||
width: 100%; |
||||
height: 300px; |
||||
padding: 0; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .filter { |
||||
display: inline-block; |
||||
width: 100%; |
||||
height: 31px; |
||||
margin: 0 0 5px 0; |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container .filter.placeholder { |
||||
color: #aaa; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container.moveonselect .move, |
||||
.bootstrap-duallistbox-container.moveonselect .remove { |
||||
display:none; |
||||
} |
||||
|
||||
.bootstrap-duallistbox-container.moveonselect .moveall, |
||||
.bootstrap-duallistbox-container.moveonselect .removeall { |
||||
width: 100%; |
||||
} |
@ -0,0 +1 @@ |
||||
.bootstrap-duallistbox-container .buttons{width:100%;margin-bottom:-1px}.bootstrap-duallistbox-container label{display:block}.bootstrap-duallistbox-container .info{display:inline-block;margin-bottom:5px;font-size:11px}.bootstrap-duallistbox-container .clear1,.bootstrap-duallistbox-container .clear2{display:none;font-size:10px}.bootstrap-duallistbox-container .box1.filtered .clear1,.bootstrap-duallistbox-container .box2.filtered .clear2{display:inline-block}.bootstrap-duallistbox-container .move,.bootstrap-duallistbox-container .remove{width:50%;box-sizing:content-box}.bootstrap-duallistbox-container .btn-group .btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.bootstrap-duallistbox-container:not(.moveonselect) select{border-top-left-radius:0;border-top-right-radius:0}.bootstrap-duallistbox-container .moveall,.bootstrap-duallistbox-container .removeall{width:50%;box-sizing:content-box}.bootstrap-duallistbox-container.bs2compatible .btn-group>.btn+.btn{margin-left:0}.bootstrap-duallistbox-container select{width:100%;height:300px;padding:0}.bootstrap-duallistbox-container .filter{display:inline-block;width:100%;height:31px;margin:0 0 5px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-duallistbox-container .filter.placeholder{color:#aaa}.bootstrap-duallistbox-container.moveonselect .move,.bootstrap-duallistbox-container.moveonselect .remove{display:none}.bootstrap-duallistbox-container.moveonselect .moveall,.bootstrap-duallistbox-container.moveonselect .removeall{width:100%} |
@ -0,0 +1,893 @@ |
||||
/* |
||||
* Bootstrap Duallistbox - v4.0.2 |
||||
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. |
||||
* http://www.virtuosoft.eu/code/bootstrap-duallistbox/
|
||||
* |
||||
* Made by István Ujj-Mészáros |
||||
* Under Apache License v2.0 License |
||||
*/ |
||||
(function(factory) { |
||||
if (typeof define === 'function' && define.amd) { |
||||
define(['jquery'], factory); |
||||
} else if (typeof module === 'object' && module.exports) { |
||||
module.exports = function(root, jQuery) { |
||||
if (jQuery === undefined) { |
||||
if (typeof window !== 'undefined') { |
||||
jQuery = require('jquery'); |
||||
} |
||||
else { |
||||
jQuery = require('jquery')(root); |
||||
} |
||||
} |
||||
factory(jQuery); |
||||
return jQuery; |
||||
}; |
||||
} else { |
||||
factory(jQuery); |
||||
} |
||||
}(function($) { |
||||
// Create the defaults once
|
||||
var pluginName = 'bootstrapDualListbox', |
||||
defaults = { |
||||
filterTextClear: 'show all', |
||||
filterPlaceHolder: 'Filter', |
||||
moveSelectedLabel: 'Move selected', |
||||
moveAllLabel: 'Move all', |
||||
removeSelectedLabel: 'Remove selected', |
||||
removeAllLabel: 'Remove all', |
||||
moveOnSelect: true, // true/false (forced true on androids, see the comment later)
|
||||
moveOnDoubleClick: true, // true/false (forced false on androids, cause moveOnSelect is forced to true)
|
||||
preserveSelectionOnMove: false, // 'all' / 'moved' / false
|
||||
selectedListLabel: false, // 'string', false
|
||||
nonSelectedListLabel: false, // 'string', false
|
||||
helperSelectNamePostfix: '_helper', // 'string_of_postfix' / false
|
||||
selectorMinimalHeight: 100, |
||||
showFilterInputs: true, // whether to show filter inputs
|
||||
nonSelectedFilter: '', // string, filter the non selected options
|
||||
selectedFilter: '', // string, filter the selected options
|
||||
infoText: 'Showing all {0}', // text when all options are visible / false for no info text
|
||||
infoTextFiltered: '<span class="badge badge-warning">Filtered</span> {0} from {1}', // when not all of the options are visible due to the filter
|
||||
infoTextEmpty: 'Empty list', // when there are no options present in the list
|
||||
filterOnValues: false, // filter by selector's values, boolean
|
||||
sortByInputOrder: false, |
||||
eventMoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventMoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventRemoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
eventRemoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||
btnClass: 'btn-outline-secondary', // sets the button style class for all the buttons
|
||||
btnMoveText: '>', // string, sets the text for the "Move" button
|
||||
btnRemoveText: '<', // string, sets the text for the "Remove" button
|
||||
btnMoveAllText: '>>', // string, sets the text for the "Move All" button
|
||||
btnRemoveAllText: '<<' // string, sets the text for the "Remove All" button
|
||||
}, |
||||
// Selections are invisible on android if the containing select is styled with CSS
|
||||
// http://code.google.com/p/android/issues/detail?id=16922
|
||||
isBuggyAndroid = /android/i.test(navigator.userAgent.toLowerCase()); |
||||
|
||||
// The actual plugin constructor
|
||||
function BootstrapDualListbox(element, options) { |
||||
this.element = $(element); |
||||
// jQuery has an extend method which merges the contents of two or
|
||||
// more objects, storing the result in the first object. The first object
|
||||
// is generally empty as we don't want to alter the default options for
|
||||
// future instances of the plugin
|
||||
this.settings = $.extend({}, defaults, options); |
||||
this._defaults = defaults; |
||||
this._name = pluginName; |
||||
this.init(); |
||||
} |
||||
|
||||
function triggerChangeEvent(dualListbox) { |
||||
dualListbox.element.trigger('change'); |
||||
} |
||||
|
||||
function updateSelectionStates(dualListbox) { |
||||
dualListbox.element.find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
if (typeof($item.data('original-index')) === 'undefined') { |
||||
$item.data('original-index', dualListbox.elementCount++); |
||||
} |
||||
if (typeof($item.data('_selected')) === 'undefined') { |
||||
$item.data('_selected', false); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function changeSelectionState(dualListbox, original_index, selected) { |
||||
dualListbox.element.find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
if ($item.data('original-index') === original_index) { |
||||
$item.prop('selected', selected); |
||||
if(selected){ |
||||
$item.attr('data-sortindex', dualListbox.sortIndex); |
||||
dualListbox.sortIndex++; |
||||
} else { |
||||
$item.removeAttr('data-sortindex'); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function formatString(s, args) { |
||||
console.log(s, args); |
||||
return s.replace(/{(\d+)}/g, function(match, number) { |
||||
return typeof args[number] !== 'undefined' ? args[number] : match; |
||||
}); |
||||
} |
||||
|
||||
function refreshInfo(dualListbox) { |
||||
if (!dualListbox.settings.infoText) { |
||||
return; |
||||
} |
||||
|
||||
var visible1 = dualListbox.elements.select1.find('option').length, |
||||
visible2 = dualListbox.elements.select2.find('option').length, |
||||
all1 = dualListbox.element.find('option').length - dualListbox.selectedElements, |
||||
all2 = dualListbox.selectedElements, |
||||
content = ''; |
||||
|
||||
if (all1 === 0) { |
||||
content = dualListbox.settings.infoTextEmpty; |
||||
} else if (visible1 === all1) { |
||||
content = formatString(dualListbox.settings.infoText, [visible1, all1]); |
||||
} else { |
||||
content = formatString(dualListbox.settings.infoTextFiltered, [visible1, all1]); |
||||
} |
||||
|
||||
dualListbox.elements.info1.html(content); |
||||
dualListbox.elements.box1.toggleClass('filtered', !(visible1 === all1 || all1 === 0)); |
||||
|
||||
if (all2 === 0) { |
||||
content = dualListbox.settings.infoTextEmpty; |
||||
} else if (visible2 === all2) { |
||||
content = formatString(dualListbox.settings.infoText, [visible2, all2]); |
||||
} else { |
||||
content = formatString(dualListbox.settings.infoTextFiltered, [visible2, all2]); |
||||
} |
||||
|
||||
dualListbox.elements.info2.html(content); |
||||
dualListbox.elements.box2.toggleClass('filtered', !(visible2 === all2 || all2 === 0)); |
||||
} |
||||
|
||||
function refreshSelects(dualListbox) { |
||||
dualListbox.selectedElements = 0; |
||||
|
||||
dualListbox.elements.select1.empty(); |
||||
dualListbox.elements.select2.empty(); |
||||
|
||||
dualListbox.element.find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
if ($item.prop('selected')) { |
||||
dualListbox.selectedElements++; |
||||
dualListbox.elements.select2.append($item.clone(true).prop('selected', $item.data('_selected'))); |
||||
} else { |
||||
dualListbox.elements.select1.append($item.clone(true).prop('selected', $item.data('_selected'))); |
||||
} |
||||
}); |
||||
|
||||
if (dualListbox.settings.showFilterInputs) { |
||||
filter(dualListbox, 1); |
||||
filter(dualListbox, 2); |
||||
} |
||||
refreshInfo(dualListbox); |
||||
} |
||||
|
||||
function filter(dualListbox, selectIndex) { |
||||
if (!dualListbox.settings.showFilterInputs) { |
||||
return; |
||||
} |
||||
|
||||
saveSelections(dualListbox, selectIndex); |
||||
|
||||
dualListbox.elements['select'+selectIndex].empty().scrollTop(0); |
||||
var regex, |
||||
allOptions = dualListbox.element.find('option'), |
||||
options = dualListbox.element; |
||||
|
||||
if (selectIndex === 1) { |
||||
options = allOptions.not(':selected'); |
||||
} else { |
||||
options = options.find('option:selected'); |
||||
} |
||||
|
||||
try { |
||||
regex = new RegExp($.trim(dualListbox.elements['filterInput'+selectIndex].val()), 'gi'); |
||||
} |
||||
catch(e) { |
||||
// a regex to match nothing
|
||||
regex = new RegExp('/a^/', 'gi'); |
||||
} |
||||
|
||||
options.each(function(index, item) { |
||||
var $item = $(item), |
||||
isFiltered = true; |
||||
if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex) ) ) { |
||||
isFiltered = false; |
||||
dualListbox.elements['select'+selectIndex].append($item.clone(true).prop('selected', $item.data('_selected'))); |
||||
} |
||||
allOptions.eq($item.data('original-index')).data('filtered'+selectIndex, isFiltered); |
||||
}); |
||||
|
||||
refreshInfo(dualListbox); |
||||
} |
||||
|
||||
function saveSelections(dualListbox, selectIndex) { |
||||
var options = dualListbox.element.find('option'); |
||||
dualListbox.elements['select'+selectIndex].find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
options.eq($item.data('original-index')).data('_selected', $item.prop('selected')); |
||||
}); |
||||
} |
||||
|
||||
function sortOptionsByInputOrder(select){ |
||||
var selectopt = select.children('option'); |
||||
|
||||
selectopt.sort(function(a,b){ |
||||
var an = parseInt(a.getAttribute('data-sortindex')), |
||||
bn = parseInt(b.getAttribute('data-sortindex')); |
||||
|
||||
if(an > bn) { |
||||
return 1; |
||||
} |
||||
if(an < bn) { |
||||
return -1; |
||||
} |
||||
return 0; |
||||
}); |
||||
|
||||
selectopt.detach().appendTo(select); |
||||
} |
||||
|
||||
function sortOptions(select, dualListbox) { |
||||
select.find('option').sort(function(a, b) { |
||||
return ($(a).data('original-index') > $(b).data('original-index')) ? 1 : -1; |
||||
}).appendTo(select); |
||||
|
||||
// workaround for chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1072475
|
||||
refreshSelects(dualListbox); |
||||
} |
||||
|
||||
function clearSelections(dualListbox) { |
||||
dualListbox.elements.select1.find('option').each(function() { |
||||
dualListbox.element.find('option').data('_selected', false); |
||||
}); |
||||
} |
||||
|
||||
function move(dualListbox) { |
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
saveSelections(dualListbox, 2); |
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
} |
||||
|
||||
dualListbox.elements.select1.find('option:selected').each(function(index, item) { |
||||
var $item = $(item); |
||||
if (!$item.data('filtered1')) { |
||||
changeSelectionState(dualListbox, $item.data('original-index'), true); |
||||
} |
||||
}); |
||||
|
||||
refreshSelects(dualListbox); |
||||
triggerChangeEvent(dualListbox); |
||||
if(dualListbox.settings.sortByInputOrder){ |
||||
sortOptionsByInputOrder(dualListbox.elements.select2); |
||||
} else { |
||||
sortOptions(dualListbox.elements.select2, dualListbox); |
||||
} |
||||
} |
||||
|
||||
function remove(dualListbox) { |
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
saveSelections(dualListbox, 2); |
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 2); |
||||
} |
||||
|
||||
dualListbox.elements.select2.find('option:selected').each(function(index, item) { |
||||
var $item = $(item); |
||||
if (!$item.data('filtered2')) { |
||||
changeSelectionState(dualListbox, $item.data('original-index'), false); |
||||
} |
||||
}); |
||||
|
||||
refreshSelects(dualListbox); |
||||
triggerChangeEvent(dualListbox); |
||||
sortOptions(dualListbox.elements.select1, dualListbox); |
||||
if(dualListbox.settings.sortByInputOrder){ |
||||
sortOptionsByInputOrder(dualListbox.elements.select2); |
||||
} |
||||
} |
||||
|
||||
function moveAll(dualListbox) { |
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
saveSelections(dualListbox, 2); |
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
} |
||||
|
||||
dualListbox.element.find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
if (!$item.data('filtered1')) { |
||||
$item.prop('selected', true); |
||||
$item.attr('data-sortindex', dualListbox.sortIndex); |
||||
dualListbox.sortIndex++; |
||||
} |
||||
}); |
||||
|
||||
refreshSelects(dualListbox); |
||||
triggerChangeEvent(dualListbox); |
||||
} |
||||
|
||||
function removeAll(dualListbox) { |
||||
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 1); |
||||
saveSelections(dualListbox, 2); |
||||
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { |
||||
saveSelections(dualListbox, 2); |
||||
} |
||||
|
||||
dualListbox.element.find('option').each(function(index, item) { |
||||
var $item = $(item); |
||||
if (!$item.data('filtered2')) { |
||||
$item.prop('selected', false); |
||||
$item.removeAttr('data-sortindex'); |
||||
} |
||||
}); |
||||
|
||||
refreshSelects(dualListbox); |
||||
triggerChangeEvent(dualListbox); |
||||
} |
||||
|
||||
function bindEvents(dualListbox) { |
||||
dualListbox.elements.form.submit(function(e) { |
||||
if (dualListbox.elements.filterInput1.is(':focus')) { |
||||
e.preventDefault(); |
||||
dualListbox.elements.filterInput1.focusout(); |
||||
} else if (dualListbox.elements.filterInput2.is(':focus')) { |
||||
e.preventDefault(); |
||||
dualListbox.elements.filterInput2.focusout(); |
||||
} |
||||
}); |
||||
|
||||
dualListbox.element.on('bootstrapDualListbox.refresh', function(e, mustClearSelections){ |
||||
dualListbox.refresh(mustClearSelections); |
||||
}); |
||||
|
||||
dualListbox.elements.filterClear1.on('click', function() { |
||||
dualListbox.setNonSelectedFilter('', true); |
||||
}); |
||||
|
||||
dualListbox.elements.filterClear2.on('click', function() { |
||||
dualListbox.setSelectedFilter('', true); |
||||
}); |
||||
|
||||
if (dualListbox.settings.eventMoveOverride === false) { |
||||
dualListbox.elements.moveButton.on('click', function() { |
||||
move(dualListbox); |
||||
}); |
||||
} |
||||
|
||||
if (dualListbox.settings.eventMoveAllOverride === false) { |
||||
dualListbox.elements.moveAllButton.on('click', function() { |
||||
moveAll(dualListbox); |
||||
}); |
||||
} |
||||
|
||||
if (dualListbox.settings.eventRemoveOverride === false) { |
||||
dualListbox.elements.removeButton.on('click', function() { |
||||
remove(dualListbox); |
||||
}); |
||||
} |
||||
|
||||
if (dualListbox.settings.eventRemoveAllOverride === false) { |
||||
dualListbox.elements.removeAllButton.on('click', function() { |
||||
removeAll(dualListbox); |
||||
}); |
||||
} |
||||
|
||||
dualListbox.elements.filterInput1.on('change keyup', function() { |
||||
filter(dualListbox, 1); |
||||
}); |
||||
|
||||
dualListbox.elements.filterInput2.on('change keyup', function() { |
||||
filter(dualListbox, 2); |
||||
}); |
||||
} |
||||
|
||||
BootstrapDualListbox.prototype = { |
||||
init: function () { |
||||
// Add the custom HTML template
|
||||
this.container = $('' + |
||||
'<div class="bootstrap-duallistbox-container row">' + |
||||
' <div class="box1 col-md-6">' + |
||||
' <label></label>' + |
||||
' <span class="info-container">' + |
||||
' <span class="info"></span>' + |
||||
' <button type="button" class="btn btn-sm clear1" style="float:right!important;"></button>' + |
||||
' </span>' + |
||||
' <input class="form-control filter" type="text">' + |
||||
' <div class="btn-group buttons">' + |
||||
' <button type="button" class="btn moveall"></button>' + |
||||
' <button type="button" class="btn move"></button>' + |
||||
' </div>' + |
||||
' <select multiple="multiple"></select>' + |
||||
' </div>' + |
||||
' <div class="box2 col-md-6">' + |
||||
' <label></label>' + |
||||
' <span class="info-container">' + |
||||
' <span class="info"></span>' + |
||||
' <button type="button" class="btn btn-sm clear2" style="float:right!important;"></button>' + |
||||
' </span>' + |
||||
' <input class="form-control filter" type="text">' + |
||||
' <div class="btn-group buttons">' + |
||||
' <button type="button" class="btn remove"></button>' + |
||||
' <button type="button" class="btn removeall"></button>' + |
||||
' </div>' + |
||||
' <select multiple="multiple"></select>' + |
||||
' </div>' + |
||||
'</div>') |
||||
.insertBefore(this.element); |
||||
|
||||
// Cache the inner elements
|
||||
this.elements = { |
||||
originalSelect: this.element, |
||||
box1: $('.box1', this.container), |
||||
box2: $('.box2', this.container), |
||||
filterInput1: $('.box1 .filter', this.container), |
||||
filterInput2: $('.box2 .filter', this.container), |
||||
filterClear1: $('.box1 .clear1', this.container), |
||||
filterClear2: $('.box2 .clear2', this.container), |
||||
label1: $('.box1 > label', this.container), |
||||
label2: $('.box2 > label', this.container), |
||||
info1: $('.box1 .info', this.container), |
||||
info2: $('.box2 .info', this.container), |
||||
select1: $('.box1 select', this.container), |
||||
select2: $('.box2 select', this.container), |
||||
moveButton: $('.box1 .move', this.container), |
||||
removeButton: $('.box2 .remove', this.container), |
||||
moveAllButton: $('.box1 .moveall', this.container), |
||||
removeAllButton: $('.box2 .removeall', this.container), |
||||
form: $($('.box1 .filter', this.container)[0].form) |
||||
}; |
||||
|
||||
// Set select IDs
|
||||
this.originalSelectName = this.element.attr('name') || ''; |
||||
var select1Id = 'bootstrap-duallistbox-nonselected-list_' + this.originalSelectName, |
||||
select2Id = 'bootstrap-duallistbox-selected-list_' + this.originalSelectName; |
||||
this.elements.select1.attr('id', select1Id); |
||||
this.elements.select2.attr('id', select2Id); |
||||
this.elements.label1.attr('for', select1Id); |
||||
this.elements.label2.attr('for', select2Id); |
||||
|
||||
// Apply all settings
|
||||
this.selectedElements = 0; |
||||
this.sortIndex = 0; |
||||
this.elementCount = 0; |
||||
this.setFilterTextClear(this.settings.filterTextClear); |
||||
this.setFilterPlaceHolder(this.settings.filterPlaceHolder); |
||||
this.setMoveSelectedLabel(this.settings.moveSelectedLabel); |
||||
this.setMoveAllLabel(this.settings.moveAllLabel); |
||||
this.setRemoveSelectedLabel(this.settings.removeSelectedLabel); |
||||
this.setRemoveAllLabel(this.settings.removeAllLabel); |
||||
this.setMoveOnSelect(this.settings.moveOnSelect); |
||||
this.setMoveOnDoubleClick(this.settings.moveOnDoubleClick); |
||||
this.setPreserveSelectionOnMove(this.settings.preserveSelectionOnMove); |
||||
this.setSelectedListLabel(this.settings.selectedListLabel); |
||||
this.setNonSelectedListLabel(this.settings.nonSelectedListLabel); |
||||
this.setHelperSelectNamePostfix(this.settings.helperSelectNamePostfix); |
||||
this.setSelectOrMinimalHeight(this.settings.selectorMinimalHeight); |
||||
|
||||
updateSelectionStates(this); |
||||
|
||||
this.setShowFilterInputs(this.settings.showFilterInputs); |
||||
this.setNonSelectedFilter(this.settings.nonSelectedFilter); |
||||
this.setSelectedFilter(this.settings.selectedFilter); |
||||
this.setInfoText(this.settings.infoText); |
||||
this.setInfoTextFiltered(this.settings.infoTextFiltered); |
||||
this.setInfoTextEmpty(this.settings.infoTextEmpty); |
||||
this.setFilterOnValues(this.settings.filterOnValues); |
||||
this.setSortByInputOrder(this.settings.sortByInputOrder); |
||||
this.setEventMoveOverride(this.settings.eventMoveOverride); |
||||
this.setEventMoveAllOverride(this.settings.eventMoveAllOverride); |
||||
this.setEventRemoveOverride(this.settings.eventRemoveOverride); |
||||
this.setEventRemoveAllOverride(this.settings.eventRemoveAllOverride); |
||||
this.setBtnClass(this.settings.btnClass); |
||||
this.setBtnMoveText(this.settings.btnMoveText); |
||||
this.setBtnRemoveText(this.settings.btnRemoveText); |
||||
this.setBtnMoveAllText(this.settings.btnMoveAllText); |
||||
this.setBtnRemoveAllText(this.settings.btnRemoveAllText); |
||||
|
||||
// Hide the original select
|
||||
this.element.hide(); |
||||
|
||||
bindEvents(this); |
||||
refreshSelects(this); |
||||
|
||||
return this.element; |
||||
}, |
||||
setFilterTextClear: function(value, refresh) { |
||||
this.settings.filterTextClear = value; |
||||
this.elements.filterClear1.html(value); |
||||
this.elements.filterClear2.html(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setFilterPlaceHolder: function(value, refresh) { |
||||
this.settings.filterPlaceHolder = value; |
||||
this.elements.filterInput1.attr('placeholder', value); |
||||
this.elements.filterInput2.attr('placeholder', value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setMoveSelectedLabel: function(value, refresh) { |
||||
this.settings.moveSelectedLabel = value; |
||||
this.elements.moveButton.attr('title', value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setMoveAllLabel: function(value, refresh) { |
||||
this.settings.moveAllLabel = value; |
||||
this.elements.moveAllButton.attr('title', value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setRemoveSelectedLabel: function(value, refresh) { |
||||
this.settings.removeSelectedLabel = value; |
||||
this.elements.removeButton.attr('title', value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setRemoveAllLabel: function(value, refresh) { |
||||
this.settings.removeAllLabel = value; |
||||
this.elements.removeAllButton.attr('title', value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setMoveOnSelect: function(value, refresh) { |
||||
if (isBuggyAndroid) { |
||||
value = true; |
||||
} |
||||
this.settings.moveOnSelect = value; |
||||
if (this.settings.moveOnSelect) { |
||||
this.container.addClass('moveonselect'); |
||||
var self = this; |
||||
this.elements.select1.on('change', function() { |
||||
move(self); |
||||
}); |
||||
this.elements.select2.on('change', function() { |
||||
remove(self); |
||||
}); |
||||
this.elements.moveButton.detach(); |
||||
this.elements.removeButton.detach(); |
||||
} else { |
||||
this.container.removeClass('moveonselect'); |
||||
this.elements.select1.off('change'); |
||||
this.elements.select2.off('change'); |
||||
this.elements.moveButton.insertAfter(this.elements.moveAllButton); |
||||
this.elements.removeButton.insertBefore(this.elements.removeAllButton); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setMoveOnDoubleClick: function(value, refresh) { |
||||
if (isBuggyAndroid) { |
||||
value = false; |
||||
} |
||||
this.settings.moveOnDoubleClick = value; |
||||
if (this.settings.moveOnDoubleClick) { |
||||
this.container.addClass('moveondoubleclick'); |
||||
var self = this; |
||||
this.elements.select1.on('dblclick', function() { |
||||
move(self); |
||||
}); |
||||
this.elements.select2.on('dblclick', function() { |
||||
remove(self); |
||||
}); |
||||
} else { |
||||
this.container.removeClass('moveondoubleclick'); |
||||
this.elements.select1.off('dblclick'); |
||||
this.elements.select2.off('dblclick'); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setPreserveSelectionOnMove: function(value, refresh) { |
||||
// We are forcing to move on select and disabling preserveSelectionOnMove on Android
|
||||
if (isBuggyAndroid) { |
||||
value = false; |
||||
} |
||||
this.settings.preserveSelectionOnMove = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setSelectedListLabel: function(value, refresh) { |
||||
this.settings.selectedListLabel = value; |
||||
if (value) { |
||||
this.elements.label2.show().html(value); |
||||
} else { |
||||
this.elements.label2.hide().html(value); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setNonSelectedListLabel: function(value, refresh) { |
||||
this.settings.nonSelectedListLabel = value; |
||||
if (value) { |
||||
this.elements.label1.show().html(value); |
||||
} else { |
||||
this.elements.label1.hide().html(value); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setHelperSelectNamePostfix: function(value, refresh) { |
||||
this.settings.helperSelectNamePostfix = value; |
||||
if (value) { |
||||
this.elements.select1.attr('name', this.originalSelectName + value + '1'); |
||||
this.elements.select2.attr('name', this.originalSelectName + value + '2'); |
||||
} else { |
||||
this.elements.select1.removeAttr('name'); |
||||
this.elements.select2.removeAttr('name'); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setSelectOrMinimalHeight: function(value, refresh) { |
||||
this.settings.selectorMinimalHeight = value; |
||||
var height = this.element.height(); |
||||
if (this.element.height() < value) { |
||||
height = value; |
||||
} |
||||
this.elements.select1.height(height); |
||||
this.elements.select2.height(height); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setShowFilterInputs: function(value, refresh) { |
||||
if (!value) { |
||||
this.setNonSelectedFilter(''); |
||||
this.setSelectedFilter(''); |
||||
refreshSelects(this); |
||||
this.elements.filterInput1.hide(); |
||||
this.elements.filterInput2.hide(); |
||||
} else { |
||||
this.elements.filterInput1.show(); |
||||
this.elements.filterInput2.show(); |
||||
} |
||||
this.settings.showFilterInputs = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setNonSelectedFilter: function(value, refresh) { |
||||
if (this.settings.showFilterInputs) { |
||||
this.settings.nonSelectedFilter = value; |
||||
this.elements.filterInput1.val(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
} |
||||
}, |
||||
setSelectedFilter: function(value, refresh) { |
||||
if (this.settings.showFilterInputs) { |
||||
this.settings.selectedFilter = value; |
||||
this.elements.filterInput2.val(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
} |
||||
}, |
||||
setInfoText: function(value, refresh) { |
||||
this.settings.infoText = value; |
||||
if (value) { |
||||
this.elements.info1.show(); |
||||
this.elements.info2.show(); |
||||
} else { |
||||
this.elements.info1.hide(); |
||||
this.elements.info2.hide(); |
||||
} |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setInfoTextFiltered: function(value, refresh) { |
||||
this.settings.infoTextFiltered = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setInfoTextEmpty: function(value, refresh) { |
||||
this.settings.infoTextEmpty = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setFilterOnValues: function(value, refresh) { |
||||
this.settings.filterOnValues = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setSortByInputOrder: function(value, refresh){ |
||||
this.settings.sortByInputOrder = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setEventMoveOverride: function(value, refresh) { |
||||
this.settings.eventMoveOverride = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setEventMoveAllOverride: function(value, refresh) { |
||||
this.settings.eventMoveAllOverride = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setEventRemoveOverride: function(value, refresh) { |
||||
this.settings.eventRemoveOverride = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setEventRemoveAllOverride: function(value, refresh) { |
||||
this.settings.eventRemoveAllOverride = value; |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setBtnClass: function(value, refresh) { |
||||
this.settings.btnClass = value; |
||||
this.elements.moveButton.attr('class', 'btn move').addClass(value); |
||||
this.elements.removeButton.attr('class', 'btn remove').addClass(value); |
||||
this.elements.moveAllButton.attr('class', 'btn moveall').addClass(value); |
||||
this.elements.removeAllButton.attr('class', 'btn removeall').addClass(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setBtnMoveText: function(value, refresh) { |
||||
this.settings.btnMoveText = value; |
||||
this.elements.moveButton.html(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setBtnRemoveText: function(value, refresh) { |
||||
this.settings.btnMoveText = value; |
||||
this.elements.removeButton.html(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setBtnMoveAllText: function(value, refresh) { |
||||
this.settings.btnMoveText = value; |
||||
this.elements.moveAllButton.html(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
setBtnRemoveAllText: function(value, refresh) { |
||||
this.settings.btnMoveText = value; |
||||
this.elements.removeAllButton.html(value); |
||||
if (refresh) { |
||||
refreshSelects(this); |
||||
} |
||||
return this.element; |
||||
}, |
||||
getContainer: function() { |
||||
return this.container; |
||||
}, |
||||
refresh: function(mustClearSelections) { |
||||
updateSelectionStates(this); |
||||
|
||||
if (!mustClearSelections) { |
||||
saveSelections(this, 1); |
||||
saveSelections(this, 2); |
||||
} else { |
||||
clearSelections(this); |
||||
} |
||||
|
||||
refreshSelects(this); |
||||
}, |
||||
destroy: function() { |
||||
this.container.remove(); |
||||
this.element.show(); |
||||
$.data(this, 'plugin_' + pluginName, null); |
||||
return this.element; |
||||
} |
||||
}; |
||||
|
||||
// A really lightweight plugin wrapper around the constructor,
|
||||
// preventing against multiple instantiations
|
||||
$.fn[ pluginName ] = function (options) { |
||||
var args = arguments; |
||||
|
||||
// Is the first parameter an object (options), or was omitted, instantiate a new instance of the plugin.
|
||||
if (options === undefined || typeof options === 'object') { |
||||
return this.each(function () { |
||||
// If this is not a select
|
||||
if (!$(this).is('select')) { |
||||
$(this).find('select').each(function(index, item) { |
||||
// For each nested select, instantiate the Dual List Box
|
||||
$(item).bootstrapDualListbox(options); |
||||
}); |
||||
} else if (!$.data(this, 'plugin_' + pluginName)) { |
||||
// Only allow the plugin to be instantiated once so we check that the element has no plugin instantiation yet
|
||||
|
||||
// if it has no instance, create a new one, pass options to our plugin constructor,
|
||||
// and store the plugin instance in the elements jQuery data object.
|
||||
$.data(this, 'plugin_' + pluginName, new BootstrapDualListbox(this, options)); |
||||
} |
||||
}); |
||||
// If the first parameter is a string and it doesn't start with an underscore or "contains" the `init`-function,
|
||||
// treat this as a call to a public method.
|
||||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { |
||||
|
||||
// Cache the method call to make it possible to return a value
|
||||
var returns; |
||||
|
||||
this.each(function () { |
||||
var instance = $.data(this, 'plugin_' + pluginName); |
||||
// Tests that there's already a plugin-instance and checks that the requested public method exists
|
||||
if (instance instanceof BootstrapDualListbox && typeof instance[options] === 'function') { |
||||
// Call the method of our plugin instance, and pass it the supplied arguments.
|
||||
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1)); |
||||
} |
||||
}); |
||||
|
||||
// If the earlier cached method gives a value back return the value,
|
||||
// otherwise return this to preserve chainability.
|
||||
return returns !== undefined ? returns : this; |
||||
} |
||||
|
||||
}; |
||||
|
||||
})); |
@ -0,0 +1,167 @@ |
||||
/*! |
||||
* bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
|
||||
* Copyright 2018 - 2020 Johann-S <johann.servoire@gmail.com> |
||||
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
||||
*/ |
||||
(function (global, factory) { |
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
||||
typeof define === 'function' && define.amd ? define(factory) : |
||||
(global = global || self, global.bsCustomFileInput = factory()); |
||||
}(this, (function () { 'use strict'; |
||||
|
||||
var Selector = { |
||||
CUSTOMFILE: '.custom-file input[type="file"]', |
||||
CUSTOMFILELABEL: '.custom-file-label', |
||||
FORM: 'form', |
||||
INPUT: 'input' |
||||
}; |
||||
|
||||
var textNodeType = 3; |
||||
|
||||
var getDefaultText = function getDefaultText(input) { |
||||
var defaultText = ''; |
||||
var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL); |
||||
|
||||
if (label) { |
||||
defaultText = label.textContent; |
||||
} |
||||
|
||||
return defaultText; |
||||
}; |
||||
|
||||
var findFirstChildNode = function findFirstChildNode(element) { |
||||
if (element.childNodes.length > 0) { |
||||
var childNodes = [].slice.call(element.childNodes); |
||||
|
||||
for (var i = 0; i < childNodes.length; i++) { |
||||
var node = childNodes[i]; |
||||
|
||||
if (node.nodeType !== textNodeType) { |
||||
return node; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return element; |
||||
}; |
||||
|
||||
var restoreDefaultText = function restoreDefaultText(input) { |
||||
var defaultText = input.bsCustomFileInput.defaultText; |
||||
var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL); |
||||
|
||||
if (label) { |
||||
var element = findFirstChildNode(label); |
||||
element.textContent = defaultText; |
||||
} |
||||
}; |
||||
|
||||
var fileApi = !!window.File; |
||||
var FAKE_PATH = 'fakepath'; |
||||
var FAKE_PATH_SEPARATOR = '\\'; |
||||
|
||||
var getSelectedFiles = function getSelectedFiles(input) { |
||||
if (input.hasAttribute('multiple') && fileApi) { |
||||
return [].slice.call(input.files).map(function (file) { |
||||
return file.name; |
||||
}).join(', '); |
||||
} |
||||
|
||||
if (input.value.indexOf(FAKE_PATH) !== -1) { |
||||
var splittedValue = input.value.split(FAKE_PATH_SEPARATOR); |
||||
return splittedValue[splittedValue.length - 1]; |
||||
} |
||||
|
||||
return input.value; |
||||
}; |
||||
|
||||
function handleInputChange() { |
||||
var label = this.parentNode.querySelector(Selector.CUSTOMFILELABEL); |
||||
|
||||
if (label) { |
||||
var element = findFirstChildNode(label); |
||||
var inputValue = getSelectedFiles(this); |
||||
|
||||
if (inputValue.length) { |
||||
element.textContent = inputValue; |
||||
} else { |
||||
restoreDefaultText(this); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function handleFormReset() { |
||||
var customFileList = [].slice.call(this.querySelectorAll(Selector.INPUT)).filter(function (input) { |
||||
return !!input.bsCustomFileInput; |
||||
}); |
||||
|
||||
for (var i = 0, len = customFileList.length; i < len; i++) { |
||||
restoreDefaultText(customFileList[i]); |
||||
} |
||||
} |
||||
|
||||
var customProperty = 'bsCustomFileInput'; |
||||
var Event = { |
||||
FORMRESET: 'reset', |
||||
INPUTCHANGE: 'change' |
||||
}; |
||||
var bsCustomFileInput = { |
||||
init: function init(inputSelector, formSelector) { |
||||
if (inputSelector === void 0) { |
||||
inputSelector = Selector.CUSTOMFILE; |
||||
} |
||||
|
||||
if (formSelector === void 0) { |
||||
formSelector = Selector.FORM; |
||||
} |
||||
|
||||
var customFileInputList = [].slice.call(document.querySelectorAll(inputSelector)); |
||||
var formList = [].slice.call(document.querySelectorAll(formSelector)); |
||||
|
||||
for (var i = 0, len = customFileInputList.length; i < len; i++) { |
||||
var input = customFileInputList[i]; |
||||
Object.defineProperty(input, customProperty, { |
||||
value: { |
||||
defaultText: getDefaultText(input) |
||||
}, |
||||
writable: true |
||||
}); |
||||
handleInputChange.call(input); |
||||
input.addEventListener(Event.INPUTCHANGE, handleInputChange); |
||||
} |
||||
|
||||
for (var _i = 0, _len = formList.length; _i < _len; _i++) { |
||||
formList[_i].addEventListener(Event.FORMRESET, handleFormReset); |
||||
|
||||
Object.defineProperty(formList[_i], customProperty, { |
||||
value: true, |
||||
writable: true |
||||
}); |
||||
} |
||||
}, |
||||
destroy: function destroy() { |
||||
var formList = [].slice.call(document.querySelectorAll(Selector.FORM)).filter(function (form) { |
||||
return !!form.bsCustomFileInput; |
||||
}); |
||||
var customFileInputList = [].slice.call(document.querySelectorAll(Selector.INPUT)).filter(function (input) { |
||||
return !!input.bsCustomFileInput; |
||||
}); |
||||
|
||||
for (var i = 0, len = customFileInputList.length; i < len; i++) { |
||||
var input = customFileInputList[i]; |
||||
restoreDefaultText(input); |
||||
input[customProperty] = undefined; |
||||
input.removeEventListener(Event.INPUTCHANGE, handleInputChange); |
||||
} |
||||
|
||||
for (var _i2 = 0, _len2 = formList.length; _i2 < _len2; _i2++) { |
||||
formList[_i2].removeEventListener(Event.FORMRESET, handleFormReset); |
||||
|
||||
formList[_i2][customProperty] = undefined; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return bsCustomFileInput; |
||||
|
||||
}))); |
||||
//# sourceMappingURL=bs-custom-file-input.js.map
|
@ -0,0 +1,7 @@ |
||||
/*! |
||||
* bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
|
||||
* Copyright 2018 - 2020 Johann-S <johann.servoire@gmail.com> |
||||
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
||||
*/ |
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var l=t[n];if(3!==l.nodeType)return l}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(s.CUSTOMFILELABEL);n&&(l(n).textContent=t)},n=!!window.File,r=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function d(){var e=this.parentNode.querySelector(s.CUSTOMFILELABEL);if(e){var t=l(e),n=r(this);n.length?t.textContent=n:u(this)}}function v(){for(var e=[].slice.call(this.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var p="bsCustomFileInput",m="reset",h="change";return{init:function(e,t){void 0===e&&(e=s.CUSTOMFILE),void 0===t&&(t=s.FORM);for(var n,l,r=[].slice.call(document.querySelectorAll(e)),i=[].slice.call(document.querySelectorAll(t)),o=0,u=r.length;o<u;o++){var c=r[o];Object.defineProperty(c,p,{value:{defaultText:(n=void 0,n="",(l=c.parentNode.querySelector(s.CUSTOMFILELABEL))&&(n=l.textContent),n)},writable:!0}),d.call(c),c.addEventListener(h,d)}for(var f=0,a=i.length;f<a;f++)i[f].addEventListener(m,v),Object.defineProperty(i[f],p,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(s.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,l=t.length;n<l;n++){var r=t[n];u(r),r[p]=void 0,r.removeEventListener(h,d)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(m,v),e[i][p]=void 0}}}); |
||||
//# sourceMappingURL=bs-custom-file-input.min.js.map
|
@ -0,0 +1,194 @@ |
||||
/*! |
||||
* bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper) |
||||
* Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com> |
||||
* Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE) |
||||
*/ |
||||
|
||||
.bs-stepper .step-trigger { |
||||
display: -ms-inline-flexbox; |
||||
display: inline-flex; |
||||
-ms-flex-wrap: wrap; |
||||
flex-wrap: wrap; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
padding: 20px; |
||||
font-size: 1rem; |
||||
font-weight: 700; |
||||
line-height: 1.5; |
||||
color: #6c757d; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
white-space: nowrap; |
||||
vertical-align: middle; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
background-color: transparent; |
||||
border: none; |
||||
border-radius: .25rem; |
||||
transition: background-color .15s ease-out, color .15s ease-out; |
||||
} |
||||
|
||||
.bs-stepper .step-trigger:not(:disabled):not(.disabled) { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.bs-stepper .step-trigger:disabled, |
||||
.bs-stepper .step-trigger.disabled { |
||||
pointer-events: none; |
||||
opacity: .65; |
||||
} |
||||
|
||||
.bs-stepper .step-trigger:focus { |
||||
color: #007bff; |
||||
outline: none; |
||||
} |
||||
|
||||
.bs-stepper .step-trigger:hover { |
||||
text-decoration: none; |
||||
background-color: rgba(0, 0, 0, .06); |
||||
} |
||||
|
||||
@media (max-width: 520px) { |
||||
.bs-stepper .step-trigger { |
||||
-ms-flex-direction: column; |
||||
flex-direction: column; |
||||
padding: 10px; |
||||
} |
||||
} |
||||
|
||||
.bs-stepper-label { |
||||
display: inline-block; |
||||
margin: .25rem; |
||||
} |
||||
|
||||
.bs-stepper-header { |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
@media (max-width: 520px) { |
||||
.bs-stepper-header { |
||||
margin: 0 -10px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.bs-stepper-line, |
||||
.bs-stepper .line { |
||||
-ms-flex: 1 0 32px; |
||||
flex: 1 0 32px; |
||||
min-width: 1px; |
||||
min-height: 1px; |
||||
margin: auto; |
||||
background-color: rgba(0, 0, 0, .12); |
||||
} |
||||
|
||||
@media (max-width: 400px) { |
||||
.bs-stepper-line, |
||||
.bs-stepper .line { |
||||
-ms-flex-preferred-size: 20px; |
||||
flex-basis: 20px; |
||||
} |
||||
} |
||||
|
||||
.bs-stepper-circle { |
||||
display: -ms-inline-flexbox; |
||||
display: inline-flex; |
||||
-ms-flex-line-pack: center; |
||||
align-content: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
width: 2em; |
||||
height: 2em; |
||||
padding: .5em 0; |
||||
margin: .25rem; |
||||
line-height: 1em; |
||||
color: #fff; |
||||
background-color: #6c757d; |
||||
border-radius: 1em; |
||||
} |
||||
|
||||
.active .bs-stepper-circle { |
||||
background-color: #007bff; |
||||
} |
||||
|
||||
.bs-stepper-content { |
||||
padding: 0 20px 20px; |
||||
} |
||||
|
||||
@media (max-width: 520px) { |
||||
.bs-stepper-content { |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
.bs-stepper.vertical { |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
} |
||||
|
||||
.bs-stepper.vertical .bs-stepper-header { |
||||
-ms-flex-direction: column; |
||||
flex-direction: column; |
||||
-ms-flex-align: stretch; |
||||
align-items: stretch; |
||||
margin: 0; |
||||
} |
||||
|
||||
.bs-stepper.vertical .bs-stepper-pane, |
||||
.bs-stepper.vertical .content { |
||||
display: block; |
||||
} |
||||
|
||||
.bs-stepper.vertical .bs-stepper-pane:not(.fade), |
||||
.bs-stepper.vertical .content:not(.fade) { |
||||
display: block; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.bs-stepper-pane:not(.fade), |
||||
.bs-stepper .content:not(.fade) { |
||||
display: none; |
||||
} |
||||
|
||||
.bs-stepper .content.fade, |
||||
.bs-stepper-pane.fade { |
||||
visibility: hidden; |
||||
transition-duration: .3s; |
||||
transition-property: opacity; |
||||
} |
||||
|
||||
.bs-stepper-pane.fade.active, |
||||
.bs-stepper .content.fade.active { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
||||
|
||||
.bs-stepper-pane.active:not(.fade), |
||||
.bs-stepper .content.active:not(.fade) { |
||||
display: block; |
||||
visibility: visible; |
||||
} |
||||
|
||||
.bs-stepper-pane.dstepper-block, |
||||
.bs-stepper .content.dstepper-block { |
||||
display: block; |
||||
} |
||||
|
||||
.bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none, |
||||
.bs-stepper:not(.vertical) .content.dstepper-none { |
||||
display: none; |
||||
} |
||||
|
||||
.vertical .bs-stepper-pane.fade.dstepper-none, |
||||
.vertical .content.fade.dstepper-none { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
/*# sourceMappingURL=bs-stepper.css.map */ |
@ -0,0 +1,6 @@ |
||||
/*! |
||||
* bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper) |
||||
* Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com> |
||||
* Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE) |
||||
*/.bs-stepper .step-trigger{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:20px;font-size:1rem;font-weight:700;line-height:1.5;color:#6c757d;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:none;border-radius:.25rem;transition:background-color .15s ease-out,color .15s ease-out}.bs-stepper .step-trigger:not(:disabled):not(.disabled){cursor:pointer}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{pointer-events:none;opacity:.65}.bs-stepper .step-trigger:focus{color:#007bff;outline:0}.bs-stepper .step-trigger:hover{text-decoration:none;background-color:rgba(0,0,0,.06)}@media (max-width:520px){.bs-stepper .step-trigger{-ms-flex-direction:column;flex-direction:column;padding:10px}}.bs-stepper-label{display:inline-block;margin:.25rem}.bs-stepper-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (max-width:520px){.bs-stepper-header{margin:0 -10px;text-align:center}}.bs-stepper .line,.bs-stepper-line{-ms-flex:1 0 32px;flex:1 0 32px;min-width:1px;min-height:1px;margin:auto;background-color:rgba(0,0,0,.12)}@media (max-width:400px){.bs-stepper .line,.bs-stepper-line{-ms-flex-preferred-size:20px;flex-basis:20px}}.bs-stepper-circle{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:center;justify-content:center;width:2em;height:2em;padding:.5em 0;margin:.25rem;line-height:1em;color:#fff;background-color:#6c757d;border-radius:1em}.active .bs-stepper-circle{background-color:#007bff}.bs-stepper-content{padding:0 20px 20px}@media (max-width:520px){.bs-stepper-content{padding:0}}.bs-stepper.vertical{display:-ms-flexbox;display:flex}.bs-stepper.vertical .bs-stepper-header{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;margin:0}.bs-stepper.vertical .bs-stepper-pane,.bs-stepper.vertical .content{display:block}.bs-stepper.vertical .bs-stepper-pane:not(.fade),.bs-stepper.vertical .content:not(.fade){display:block;visibility:hidden}.bs-stepper .content:not(.fade),.bs-stepper-pane:not(.fade){display:none}.bs-stepper .content.fade,.bs-stepper-pane.fade{visibility:hidden;transition-duration:.3s;transition-property:opacity}.bs-stepper .content.fade.active,.bs-stepper-pane.fade.active{visibility:visible;opacity:1}.bs-stepper .content.active:not(.fade),.bs-stepper-pane.active:not(.fade){display:block;visibility:visible}.bs-stepper .content.dstepper-block,.bs-stepper-pane.dstepper-block{display:block}.bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none,.bs-stepper:not(.vertical) .content.dstepper-none{display:none}.vertical .bs-stepper-pane.fade.dstepper-none,.vertical .content.fade.dstepper-none{visibility:hidden} |
||||
/*# sourceMappingURL=bs-stepper.min.css.map */ |