Created
August 16, 2018 23:15
-
-
Save logue/40d908316200e03c9d61d713a0562cf3 to your computer and use it in GitHub Desktop.
jQuery Confirm for Bootstrap4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* @file jQuery Confirm for Bootstrap4 | |
* @copyright © 2017,2018 By Logue <http://logue.be/>. | |
* @license MIT | |
*/ | |
$orange: $yellow; | |
$default: $light; | |
/**********************************/ | |
@keyframes jconfirm-adjust-hue { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
body[class*=jconfirm-no-scroll-] { | |
overflow: hidden !important; | |
} | |
.jconfirm { | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 99999999; | |
font-family: inherit; | |
overflow: hidden; | |
.jconfirm-bg { | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
transition: opacity 4s; | |
&.jconfirm-bg-h { | |
opacity: 0 !important; | |
} | |
} | |
.jconfirm-scrollpane { | |
//overflow-y: auto; | |
perspective: 500px; | |
perspective-origin: center; | |
display: table; | |
width: 100%; | |
height: 100%; | |
} | |
.jconfirm-row { | |
display: table-row; | |
width: 100%; | |
} | |
.jconfirm-cell { | |
//height: 100%; | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.jconfirm-holder { | |
max-height: 100%; | |
padding: 50px 0; | |
} | |
.jconfirm-box-container { | |
transition: transform; | |
&.jconfirm-no-transition { | |
transition: none !important; | |
} | |
} | |
.jconfirm-box { | |
background: $white; | |
border-radius: 4px; | |
position: relative; | |
outline: none; | |
padding: 15px 15px 0; | |
overflow: hidden; | |
margin-left: auto; | |
margin-right: auto; | |
@keyframes type-blue { | |
1%, | |
100% { | |
border-color: $blue; | |
} | |
50% { | |
border-color: lighten($blue, 10%); | |
} | |
} | |
@keyframes type-green { | |
1%, | |
100% { | |
border-color: $green; | |
} | |
50% { | |
border-color: lighten($green, 10%); | |
} | |
} | |
@keyframes type-red { | |
1%, | |
100% { | |
border-color: $red; | |
} | |
50% { | |
border-color: lighten($red, 10%); | |
} | |
} | |
@keyframes type-orange { | |
1%, | |
100% { | |
border-color: $orange; | |
} | |
50% { | |
border-color: lighten($orange, 10%); | |
} | |
} | |
@keyframes type-purple { | |
1%, | |
100% { | |
border-color: $purple; | |
} | |
50% { | |
border-color: lighten($purple, 10%); | |
} | |
} | |
@keyframes type-dark { | |
1%, | |
100% { | |
border-color: $dark; | |
} | |
50% { | |
border-color: lighten($dark, 10%); | |
} | |
} | |
&.jconfirm-type-animated { | |
animation-duration: 2s; | |
animation-iteration-count: infinite; | |
} | |
&.jconfirm-type-blue { | |
border-top: solid 7px $blue; | |
animation-name: type-blue; | |
} | |
&.jconfirm-type-green { | |
border-top: solid 7px $green; | |
animation-name: type-green; | |
} | |
&.jconfirm-type-red { | |
border-top: solid 7px $red; | |
animation-name: type-red; | |
} | |
&.jconfirm-type-orange { | |
border-top: solid 7px $orange; | |
animation-name: type-orange; | |
} | |
&.jconfirm-type-purple { | |
border-top: solid 7px $purple; | |
animation-name: type-purple; | |
} | |
&.jconfirm-type-dark { | |
border-top: solid 7px $dark; | |
animation-name: type-dark; | |
} | |
&.loading { | |
height: 120px; | |
&:before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
background: $white; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
border-radius: 10px; | |
z-index: 1; | |
} | |
&:after { | |
opacity: 0.6; | |
content: ''; | |
height: 30px; | |
width: 30px; | |
border: solid 3px transparent; | |
position: absolute; | |
left: 50%; | |
margin-left: -15px; | |
border-radius: 50%; | |
animation: jconfirm-adjust-hue 1s infinite linear; | |
border-bottom-color: $blue; | |
top: 50%; | |
margin-top: -15px; | |
z-index: 2; | |
} | |
} | |
div.jconfirm-closeIcon { | |
height: 20px; | |
width: 20px; | |
position: absolute; | |
top: 10px; | |
right: 10px; | |
cursor: pointer; | |
opacity: 6; | |
text-align: center; | |
font-size: 27px !important; | |
line-height: 14px !important; | |
display: none; | |
z-index: 1; | |
&:empty { | |
display: none; | |
} | |
.fa { | |
font-size: 16px; | |
} | |
.glyphicon { | |
font-size: 16px; | |
} | |
.zmdi { | |
font-size: 16px; | |
} | |
&:hover { | |
opacity: 1; | |
} | |
} | |
div.jconfirm-title-c { | |
display: block; | |
font-size: 22px; | |
line-height: 20px; | |
user-select: none; | |
cursor: default; | |
padding-bottom: 15px; | |
&.jconfirm-hand { | |
cursor: move; | |
} | |
.jconfirm-icon-c { | |
font-size: inherit; | |
//padding-bottom: 15px; | |
display: inline-block; | |
vertical-align: middle; | |
i { | |
vertical-align: middle; | |
} | |
&:empty { | |
display: none; | |
} | |
} | |
.jconfirm-title { | |
user-select: none; | |
font-size: inherit; | |
font-family: inherit; | |
display: inline-block; | |
vertical-align: middle; | |
//padding-bottom: 15px; | |
&:empty { | |
display: none; | |
} | |
} | |
} | |
div.jconfirm-content-pane { | |
margin-bottom: 15px; | |
height: auto; | |
transition: height .4s ease-in; | |
display: inline-block; | |
width: 100%; | |
position: relative; | |
overflow-x: hidden; | |
overflow-y: auto; | |
&.no-scroll { | |
overflow-y: hidden; | |
} | |
&::-webkit-scrollbar { | |
width: 3px; | |
} | |
&::-webkit-scrollbar-track { | |
background: rgba(0, 0, 0, .1); | |
} | |
&::-webkit-scrollbar-thumb { | |
background: $gray-600; | |
border-radius: 3px; | |
} | |
.jconfirm-content { | |
overflow: auto; | |
img { | |
max-width: 100%; | |
height: auto; | |
} | |
&:empty { | |
display: none; | |
} | |
} | |
} | |
.jconfirm-buttons { | |
padding-bottom: 11px; | |
>button { | |
margin-bottom: 4px; | |
margin-left: 2px; | |
margin-right: 2px; | |
} | |
button { | |
display: inline-block; | |
padding: 6px 12px; | |
font-size: 14px; | |
font-weight: 400; | |
line-height: 1.42857143; | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: middle; | |
-ms-touch-action: manipulation; | |
touch-action: manipulation; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
border-radius: 4px; | |
min-height: 1em; | |
//outline: blue; | |
//user-select: none; | |
transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, .1s ease; | |
-webkit-tap-highlight-color: transparent; | |
border: none; | |
background-image: none; | |
&.btn-blue { | |
@extend .btn-primary; | |
} | |
&.btn-green { | |
@extend .btn-success; | |
} | |
&.btn-red { | |
@extend .btn-danger; | |
} | |
&.btn-orange { | |
@extend .btn-warning; | |
} | |
&.btn-default { | |
@extend .btn-secondary; | |
} | |
&.btn-purple { | |
background-color: $purple; | |
color: $white; | |
text-shadow: none; | |
transition: 2s; | |
&:hover { | |
background-color: darken($purple, 10%); | |
color: $white; | |
} | |
} | |
&.btn-dark { | |
@extend .btn-dark; | |
} | |
} | |
} | |
&.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c { | |
color: $red !important; | |
} | |
&.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c { | |
color: $blue !important; | |
} | |
&.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c { | |
color: $green !important; | |
} | |
&.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c { | |
color: $purple !important; | |
} | |
&.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c { | |
color: $orange !important; | |
} | |
&.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c { | |
color: $dark !important; | |
} | |
} | |
.jconfirm-clear { | |
clear: both; | |
} | |
&.jconfirm-rtl { | |
direction: rtl; | |
div.jconfirm-closeIcon { | |
left: 5px; | |
right: auto; | |
} | |
} | |
&.jconfirm-white, | |
&.jconfirm-light { | |
.jconfirm-bg { | |
background-color: $gray-700; | |
opacity: 2; | |
} | |
.jconfirm-box { | |
box-shadow: 0 2px 6px rgba(0, 0, 0, .2); | |
border-radius: 5px; | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-right: 8px; | |
margin-left: 0px; | |
} | |
.jconfirm-buttons { | |
float: right; | |
button { | |
text-transform: uppercase; | |
font-size: 14px; | |
font-weight: bold; | |
text-shadow: none; | |
} | |
button.btn-default { | |
@extend .btn-secondary; | |
} | |
} | |
} | |
&.jconfirm-rtl { | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-left: 8px; | |
margin-right: 0px; | |
} | |
} | |
} | |
&.jconfirm-black, | |
&.jconfirm-dark { | |
.jconfirm-bg { | |
background-color: darkslategray; | |
opacity: 4; | |
} | |
.jconfirm-box { | |
box-shadow: 0 2px 6px rgba(0, 0, 0, .2); | |
background: $gray-700; | |
border-radius: 5px; | |
color: $white; | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-right: 8px; | |
margin-left: 0px; | |
} | |
.jconfirm-buttons { | |
float: right; | |
button { | |
border: none; | |
background-image: none; | |
text-transform: uppercase; | |
font-size: 14px; | |
font-weight: bold; | |
text-shadow: none; | |
transition: 1s; | |
color: $white; | |
} | |
button.btn-default { | |
@extend .btn-secondary; | |
} | |
} | |
} | |
&.jconfirm-rtl { | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-left: 8px; | |
margin-right: 0px; | |
} | |
} | |
} | |
.jconfirm-box.hilight { | |
&.jconfirm-hilight-shake { | |
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; | |
transform: translate3d(0, 0, 0); | |
} | |
&.jconfirm-hilight-glow { | |
animation: glow 0.82s cubic-bezier(.36, .07, .19, .97) both; | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
} | |
@keyframes shake { | |
10%, | |
90% { | |
transform: translate3d(-2px, 0, 0); | |
} | |
20%, | |
80% { | |
transform: translate3d(4px, 0, 0); | |
} | |
30%, | |
50%, | |
70% { | |
transform: translate3d(-8px, 0, 0); | |
} | |
40%, | |
60% { | |
transform: translate3d(8px, 0, 0); | |
} | |
} | |
@keyframes glow { | |
0%, | |
100% { | |
box-shadow: 0 0 0px $red; | |
} | |
50% { | |
box-shadow: 0 0 30px $red; | |
} | |
} | |
/*Transition rules*/ | |
.jconfirm { | |
perspective: 400px; | |
.jconfirm-box { | |
opacity: 1; | |
transition-property: all; | |
&.jconfirm-animation-top, | |
&.jconfirm-animation-left, | |
&.jconfirm-animation-right, | |
&.jconfirm-animation-bottom, | |
&.jconfirm-animation-opacity, | |
&.jconfirm-animation-zoom, | |
&.jconfirm-animation-scale, | |
&.jconfirm-animation-none, | |
&.jconfirm-animation-rotate, | |
&.jconfirm-animation-rotatex, | |
&.jconfirm-animation-rotatey, | |
&.jconfirm-animation-scaley, | |
&.jconfirm-animation-scalex { | |
opacity: 0; | |
} | |
&.jconfirm-animation-rotate { | |
transform: rotate(90deg); | |
} | |
&.jconfirm-animation-rotatex { | |
transform: rotateX(90deg); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-rotatexr { | |
transform: rotateX(-90deg); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-rotatey { | |
transform: rotatey(90deg); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-rotateyr { | |
transform: rotatey(-90deg); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-scaley { | |
transform: scaley(1.5); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-scalex { | |
transform: scalex(1.5); | |
transform-origin: center; | |
} | |
&.jconfirm-animation-top { | |
transform: translate(0px, -100px); | |
} | |
&.jconfirm-animation-left { | |
transform: translate(-100px, 0px); | |
} | |
&.jconfirm-animation-right { | |
transform: translate(100px, 0px); | |
} | |
&.jconfirm-animation-bottom { | |
transform: translate(0px, 100px); | |
} | |
&.jconfirm-animation-opacity {} | |
&.jconfirm-animation-zoom { | |
transform: scale(1.2); | |
} | |
&.jconfirm-animation-scale { | |
transform: scale(0.5); | |
} | |
&.jconfirm-animation-none { | |
visibility: hidden; | |
} | |
} | |
} | |
.jconfirm.jconfirm-supervan { | |
.jconfirm-bg { | |
background-color: rgba($gray-600, .95); | |
} | |
.jconfirm-box { | |
background-color: transparent; | |
&.jconfirm-type-blue { | |
border: none; | |
} | |
&.jconfirm-type-green { | |
border: none; | |
} | |
&.jconfirm-type-red { | |
border: none; | |
} | |
&.jconfirm-type-orange { | |
border: none; | |
} | |
&.jconfirm-type-purple { | |
border: none; | |
} | |
&.jconfirm-type-dark { | |
border: none; | |
} | |
div.jconfirm-closeIcon { | |
color: $white; | |
} | |
div.jconfirm-title-c { | |
text-align: center; | |
color: $white; | |
font-size: 28px; | |
font-weight: normal; | |
>* { | |
padding-bottom: 25px; | |
} | |
.jconfirm-icon-c { | |
margin-right: 8px; | |
margin-left: 0px; | |
} | |
} | |
div.jconfirm-content-pane { | |
margin-bottom: 25px; | |
} | |
div.jconfirm-content { | |
text-align: center; | |
color: white; | |
&:empty { | |
&:before {} | |
&:after {} | |
} | |
} | |
.jconfirm-buttons { | |
text-align: center; | |
button { | |
font-size: 16px; | |
border-radius: 2px; | |
background: $gray-800; | |
text-shadow: none; | |
border: none; | |
color: $white; | |
padding: 10px; | |
min-width: 100px; | |
} | |
button+button {} | |
} | |
&.hilight {} | |
} | |
&.jconfirm-rtl { | |
.jconfirm-box div.jconfirm-title-c .jconfirm-icon-c { | |
margin-left: 8px; | |
margin-right: 0px; | |
} | |
} | |
} | |
.jconfirm.jconfirm-material { | |
.jconfirm-bg { | |
background-color: rgba(0, 0, 0, .67); | |
} | |
.jconfirm-box { | |
background-color: $white; | |
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12); | |
padding: 30px 25px 10px 25px; | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-right: 8px; | |
margin-left: 0px; | |
} | |
div.jconfirm-closeIcon { | |
color: rgba(0, 0, 0, .87); | |
} | |
div.jconfirm-title-c { | |
color: rgba(0, 0, 0, .87); | |
font-size: 22px; | |
font-weight: bold; | |
} | |
div.jconfirm-content { | |
color: rgba(0, 0, 0, .87); | |
&:empty { | |
&:before {} | |
&:after {} | |
} | |
} | |
.jconfirm-buttons { | |
text-align: right; | |
button { | |
text-transform: uppercase; | |
font-weight: 500; | |
} | |
button+button {} | |
} | |
&.hilight {} | |
} | |
&.jconfirm-rtl { | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-left: 8px; | |
margin-right: 0px; | |
} | |
} | |
} | |
.jconfirm.jconfirm-bootstrap { | |
.jconfirm-bg { | |
background-color: rgba(0, 0, 0, .21); | |
} | |
.jconfirm-box { | |
background-color: $white; | |
box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2); | |
border: solid 1px rgba(0, 0, 0, 0.4); | |
padding: 15px 0 0; | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-right: 8px; | |
margin-left: 0px; | |
} | |
div.jconfirm-closeIcon { | |
color: rgba(0, 0, 0, 0.87); | |
} | |
div.jconfirm-title-c { | |
color: rgba(0, 0, 0, 0.87); | |
font-size: 22px; | |
font-weight: bold; | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
div.jconfirm-content-pane {} | |
div.jconfirm-content { | |
color: rgba(0, 0, 0, 0.87); | |
padding: 0px 15px; | |
&:empty { | |
&:before {} | |
&:after {} | |
} | |
} | |
.jconfirm-buttons { | |
text-align: right; | |
padding: 10px; | |
margin: -5px 0 0px; | |
border-top: solid 1px $gray-300; | |
overflow: hidden; | |
border-radius: 0 0 4px 4px; | |
button { | |
font-weight: 500; | |
} | |
button+button {} | |
} | |
&.hilight {} | |
} | |
&.jconfirm-rtl { | |
.jconfirm-title-c .jconfirm-icon-c { | |
margin-left: 8px; | |
margin-right: 0px; | |
} | |
} | |
} | |
.jconfirm.jconfirm-modern { | |
.jconfirm-bg { | |
background-color: $gray-500; | |
opacity: 6; | |
} | |
.jconfirm-box { | |
background-color: $white; | |
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12); | |
padding: 30px 30px 15px; | |
div.jconfirm-closeIcon { | |
color: rgba(0, 0, 0, 0.87); | |
top: 15px; | |
right: 15px; | |
} | |
div.jconfirm-title-c { | |
color: rgba(0, 0, 0, .87); | |
font-size: 24px; | |
font-weight: bold; | |
text-align: center; | |
margin-bottom: 10px; | |
.jconfirm-icon-c { | |
transition: transform 5s; | |
transform: scale(0); | |
display: block; | |
margin-right: 0px; | |
margin-left: 0px; | |
margin-bottom: 10px; | |
font-size: 69px; | |
color: $gray-500; | |
} | |
} | |
div.jconfirm-content { | |
text-align: center; | |
font-size: 15px; | |
color: $gray-600; | |
margin-bottom: 25px; | |
&:empty { | |
&:before {} | |
&:after {} | |
} | |
} | |
.jconfirm-buttons { | |
text-align: center; | |
button { | |
font-weight: bold; | |
text-transform: uppercase; | |
transition: 1s; | |
padding: 10px 20px; | |
&.btn-success {} | |
} | |
button+button { | |
margin-left: 4px; | |
} | |
} | |
} | |
&.jconfirm-open { | |
.jconfirm-box .jconfirm-title-c .jconfirm-icon-c { | |
transform: scale(1); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment