diff options
Diffstat (limited to 'rulemgt-frontend/src/assets/common/css/popModal.css')
| -rw-r--r-- | rulemgt-frontend/src/assets/common/css/popModal.css | 1099 |
1 files changed, 1099 insertions, 0 deletions
diff --git a/rulemgt-frontend/src/assets/common/css/popModal.css b/rulemgt-frontend/src/assets/common/css/popModal.css new file mode 100644 index 0000000..210d98a --- /dev/null +++ b/rulemgt-frontend/src/assets/common/css/popModal.css @@ -0,0 +1,1099 @@ +/* +popModal - 1.21 [18.11.15] +Author: vadimsva +Github: https://github.com/vadimsva/popModal +*/ +/* popModal */ +.popModal { + position: absolute; + background: #fff; + padding: 9px; + border: 1px solid #ddd; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + text-align: left; + max-width: 1000px; + min-width: 180px; + z-index: 9997; + box-sizing: border-box +} + +.popModal .close { + line-height: 12px; + font-size: 25px; + font-weight: bold; + font-family: serif; + position: absolute; + right: 8px; + top: 8px; + color: #000; + opacity: 0.2; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + outline: 0 +} + +.popModal .close:hover { + opacity: 1 +} + +.popModal .popModal_content { + margin: 0px auto; + margin-bottom: 30px !important; + word-wrap: break-word; + font-family: sans-serif; + font-size: 14px; + font-weight: initial; + font-style: initial; + color: initial; + text-decoration: initial; + text-transform: initial; + padding: initial +} + +.popModal .popModal_content.popModal_contentOverflow { + max-height: 1000px; + overflow-y: auto; + overflow-x: hidden; + margin: 0px 0px 0px 0px; + padding: 0 0px +} + +.popModal .popModal_content:before { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 20px; + bottom: -20px +} + +.popModal .popModal_content.popModal_asMenu { + margin: 0 -15px +} + +.popModal .popModal_content.popModal_asMenu ul { + list-style: none; + padding: 0 +} + +.popModal.bottomRight .popModal_content.popModal_asMenu ul { + text-align: right +} + +.popModal .popModal_content.popModal_asMenu ul > li { + line-height: 40px +} + +.popModal .popModal_content.popModal_asMenu ul > li:empty { + border-top: 1px solid #ddd +} + +.popModal .popModal_content.popModal_asMenu ul > li > a { + display: block; + padding: 0 15px; + text-decoration: none +} + +.popModal .popModal_content.popModal_asMenu ul > li > a:hover { + background-color: #eee +} + +.popModal .popModal_footer { + background: #fafafa; + padding: 15px; + border-top: 1px solid #ddd; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + right: 0 +} + +.popModal .popModal_footer button { + margin: 0 0 0 5px +} + +.popModal:before, +.popModal:after { + content: ''; + position: absolute; + border: 10px solid transparent +} + +.popModal:after { + z-index: 1 +} + +.popModal.bottomLeft:before, +.popModal.bottomRight:before, +.popModal.bottomCenter:before { + border-top-width: 0; + border-bottom-color: #aaa; + top: -10px; + left: 6px +} + +.popModal.bottomLeft:after, +.popModal.bottomRight:after, +.popModal.bottomCenter:after { + border-top-width: 0; + border-bottom-color: #fff; + top: -9px; + left: 6px +} + +.popModal.bottomRight:before, +.popModal.bottomRight:after { + left: auto; + right: 6px +} + +.popModal.bottomCenter:before, +.popModal.bottomCenter:after { + left: 50%; + margin-left: -10px +} + +.popModal.leftTop:before, +.popModal.leftCenter:before { + border-right-width: 0; + border-left-color: #aaa; + top: 6px; + right: -10px +} + +.popModal.leftTop:after, +.popModal.leftCenter:after { + border-right-width: 0; + border-left-color: #fff; + top: 6px; + right: -9px +} + +.popModal.rightTop:before, +.popModal.rightCenter:before { + border-left-width: 0; + border-right-color: #aaa; + top: 6px; + left: -10px +} + +.popModal.rightTop:after, +.popModal.rightCenter:after { + border-left-width: 0; + border-right-color: #fff; + top: 6px; + left: -9px +} + +.popModal.leftCenter:before, +.popModal.rightCenter:before { + top: 50%; + margin-top: -10px +} + +.popModal.leftCenter:after, +.popModal.rightCenter:after { + top: 50%; + margin-top: -10px +} + +@media (max-width: 400px) { + .popModal { + position: relative; + top: 10px !important; + left: auto !important; + right: auto !important; + width: 100% !important; + max-width: none + } +} + +/* notifyModal */ +.notifyModal { + position: fixed; + z-index: 999999; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + cursor: pointer; + transition: all 200ms ease +} + +.notifyModal.overlay { + top: 0; + bottom: 0; + left: 0; + right: 0 +} + +.notifyModal.overlay.center { + top: 0; + bottom: 0 +} + +.notifyModal.open { + opacity: 1 +} + +.notifyModal.open .notifyModal_content { + transform: scale(1) +} + +.notifyModal .notifyModal_content { + position: absolute; + background: #F9EDBE; + width: 380px; + padding: 25px; + margin: auto; + border: 1px solid #CAB388; + text-align: justify; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + transition: all 200ms ease; + transform: scale(0.95); + font-family: sans-serif; + font-size: 14px; + font-weight: initial; + font-style: initial; + color: initial; + text-decoration: initial; + text-transform: initial; + line-height: 18px; + box-sizing: border-box +} + +.notifyModal.alert .notifyModal_content { + background: #FFC7C7; + border-color: #CA7878; + color: #642020 +} + +.notifyModal.simple .notifyModal_content { + background: #fff; + border-color: #aaa +} + +.notifyModal.dark .notifyModal_content { + background: #333; + border-color: #000; + color: #ccc +} + +.notifyModal.dark .notifyModal_content .close { + color: #ccc +} + +.notifyModal.leftTop { + top: 0; + left: 0 +} + +.notifyModal.centerTop { + top: 0; + left: 0; + right: 0 +} + +.notifyModal.rightTop { + top: 0; + right: 0 +} + +.notifyModal.center { + top: 35%; + bottom: auto; + left: 0; + right: 0 +} + +.notifyModal.leftBottom { + bottom: 0; + left: 0 +} + +.notifyModal.centerBottom { + bottom: 0; + left: 0; + right: 0 +} + +.notifyModal.rightBottom { + bottom: 0; + right: 0 +} + +.notifyModal.center .notifyModal_content { + left: 0; + right: 0; + top: 35% +} + +.notifyModal.leftTop .notifyModal_content { + left: 20px; + top: 20px +} + +.notifyModal.centerTop .notifyModal_content { + left: 0; + right: 0; + top: 20px +} + +.notifyModal.rightTop .notifyModal_content { + right: 20px; + top: 20px +} + +.notifyModal.leftBottom .notifyModal_content { + left: 20px; + bottom: 20px +} + +.notifyModal.centerBottom .notifyModal_content { + left: 0; + right: 0; + bottom: 20px +} + +.notifyModal.rightBottom .notifyModal_content { + right: 20px; + bottom: 20px +} + +.notifyModal.centerTopSlide.open .notifyModal_content, +.notifyModal.centerBottomSlide.open .notifyModal_content { + transform: scale(1) translateY(0) +} + +.notifyModal.centerTopSlide .notifyModal_content { + top: 0; + left: 0; + right: 0; + transform: scale(1) translateY(-100%) +} + +.notifyModal.centerBottomSlide .notifyModal_content { + bottom: 0; + left: 0; + right: 0; + transform: scale(1) translateY(100%) +} + +.notifyModal.leftTopSlide.open .notifyModal_content, +.notifyModal.leftBottomSlide.open .notifyModal_content, +.notifyModal.rightTopSlide.open .notifyModal_content, +.notifyModal.rightBottomSlide.open .notifyModal_content { + transform: scale(1) translateX(0) +} + +.notifyModal.leftTopSlide .notifyModal_content { + left: 0; + top: 20px; + transform: scale(1) translateX(-100%) +} + +.notifyModal.leftBottomSlide .notifyModal_content { + left: 0; + bottom: 20px; + transform: scale(1) translateX(-100%) +} + +.notifyModal.rightTopSlide .notifyModal_content { + right: 0; + top: 20px; + transform: scale(1) translateX(100%) +} + +.notifyModal.rightBottomSlide .notifyModal_content { + right: 0; + bottom: 20px; + transform: scale(1) translateX(100%) +} + +.notifyModal .notifyModal_content .close { + line-height: 12px; + font-size: 25px; + font-weight: bold; + font-family: serif; + position: absolute; + right: 8px; + top: 8px; + color: #000; + opacity: 0.2; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + outline: 0 +} + +.notifyModal .notifyModal_content .close:hover { + opacity: 1 +} + +@media (max-width: 400px) { + .notifyModal .notifyModal_content { + width: auto; + margin: auto 20px + } + + .notifyModal.center .notifyModal_content { + top: 15% + } +} + +/* hintModal */ +.hintModal { + position: relative; + overflow: visible; + transform: translateZ(0); + backface-visibility: hidden; + z-index: 1 +} + +.hintModal .hintModal_container { + display: none; + left: 0; + margin: 0; + position: absolute; + background: #F8F4E1; + padding: 15px; + border: 1px solid #B4A984; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + opacity: 0; + text-align: justify; + max-width: 260px; + min-width: 260px; + z-index: 1; + line-height: 16px; + border-radius: 4px; + font-size: 13px; + font-weight: normal; + font-family: sans-serif; + font-style: initial; + margin-top: 6px; + color: #333; + top: 100%; + box-sizing: border-box; + text-decoration: initial; + text-transform: initial +} + +.hintModal .hintModal_container:before, +.hintModal .hintModal_container:after { + content: ''; + position: absolute; + border: 6px solid transparent; + border-top-width: 0; + border-bottom-color: #B4A984; + top: -6px; + left: 6px +} + +.hintModal .hintModal_container:before { + border-bottom-color: #B4A984; + top: -6px +} + +.hintModal .hintModal_container:after { + border-bottom-color: #F8F4E1; + top: -5px; + z-index: 1 +} + +.hintModal.bottomRight .hintModal_container { + left: auto; + right: 0 +} + +.hintModal.bottomRight .hintModal_container:before, +.hintModal.bottomRight .hintModal_container:after { + left: auto; + right: 6px +} + +.hintModal.bottomCenter .hintModal_container { + left: -120px; + right: -120px; + margin-left: auto; + margin-right: auto +} + +.hintModal.bottomCenter .hintModal_container:before, +.hintModal.bottomCenter .hintModal_container:after { + left: 50%; + margin-left: -6px +} + +.hintModal:hover .hintModal_container { + display: block +} + +/* dialogModal */ +.dialogModal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 888888; + overflow-y: scroll; + opacity: 0; + transition: all 200ms ease; + backface-visibility: hidden +} + +.dialogModal.open { + opacity: 1 +} + +.dialogModal * { + box-sizing: border-box +} + +.dialogModal.modal .dialogModal_container { + opacity: 0; + transition: all 200ms ease +} + +.dialogModal .dialogModal_top { + position: fixed; + left: 0; + right: 0; + z-index: 2; + opacity: 0 +} + +.dialogModal .dialogModal_top .dialogModal_header { + padding: 15px 25px; + line-height: 30px; + height: 60px; + font-size: 120%; + margin: auto; + width: 650px; + background: #fff; + border-bottom: 1px solid #f5f5f5; + position: relative +} + +.dialogModal .dialogModal_top .dialogModal_header .close { + line-height: 30px; + font-size: 40px; + font-family: serif; + color: #000; + opacity: 0.2; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + outline: 0; + width: 30px; + float: right +} + +.dialogModal .dialogModal_top .dialogModal_header .close:hover { + opacity: 1 +} + +.dialogModal .dialogModal_top .dialogModal_header .dialogPrev.notactive, +.dialogModal .dialogModal_top .dialogModal_header .dialogNext.notactive { + opacity: 0.1 !important; + cursor: default +} + +.dialogModal .dialogModal_top .dialogModal_header .dialogPrev, +.dialogModal .dialogModal_top .dialogModal_header .dialogNext { + line-height: 23px; + font-size: 30px; + color: #000; + opacity: 0.2; + cursor: pointer; + background: transparent; + border: 0; + outline: 0; + float: right; + width: 30px; + height: 30px; + text-align: center +} + +.dialogModal .dialogModal_top .dialogModal_header .dialogPrev:hover, +.dialogModal .dialogModal_top .dialogModal_header .dialogNext:hover { + opacity: 1 +} + +.dialogModal .dialogModal_top .dialogModal_header span { + display: inline-block; + overflow: hidden; + white-space: nowrap; + width: calc(100% - 90px); + text-overflow: ellipsis +} + +.dialogModal .dialogModal_top .dialogModal_header:after { + content: ''; + position: absolute; + bottom: -11px; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.5); + height: 10px +} + +.dialogModal .dialogModal_body { + position: absolute; + width: 650px; + left: 0; + right: 0; + margin: 60px auto 40px; + background: #fff; + font-family: sans-serif; + font-size: 14px; + font-weight: initial; + font-style: initial; + color: initial; + text-decoration: initial; + text-transform: initial; + opacity: 0 +} + +.dialogModal .dialogModal_body .dialogModal_header { + display: none +} + +.dialogModal .dialogModal_content { + padding: 15px 25px 25px; + line-height: 20px; + min-height: 200px +} + +.dialogModal .dialogModal_footer { + background: #fafafa; + padding: 15px 25px; + border-top: 1px solid #ddd; + text-align: right +} + +.dialogModal .dialogModal_footer button { + margin: 0 0 0 5px +} + +.dialogModal.modal { + overflow-y: hidden +} + +.dialogModal.modal .dialogModal_container { + position: absolute; + overflow-y: auto; + margin: auto; + width: 650px; + left: 0; + right: 0; + bottom: 40px +} + +.dialogModal.modal .dialogModal_top { + margin-top: -60px +} + +.dialogModal.modal .dialogModal_body { + margin: auto; + width: auto +} + +body.dialogModalOpen { + overflow: hidden +} + +@media (max-width: 680px) { + .dialogModal .dialogModal_container, .dialogModal .dialogModal_top .dialogModal_header, .dialogModal .dialogModal_body { + width: auto !important + } +} + +/* titleModal */ +.titleModal { +} + +.titleModal_container { + position: absolute; + z-index: 99999; + background: #000; + color: #fff; + padding: 5px 10px; + line-height: 16px; + margin-top: 12px; + border-radius: 4px; + font-size: 13px; + text-align: center; + max-width: 260px; + opacity: 0; + white-space: normal; + font-family: sans-serif; + font-weight: initial; + font-style: initial; + text-decoration: initial; + text-transform: initial +} + +.titleModal_container:after { + content: ''; + position: absolute; + border: 6px solid transparent; + border-top-width: 0; + border-bottom-color: #000; + top: -6px; + left: 50%; + margin-left: -6px +} + +.titleModal_container.top { + margin-top: -6px +} + +.titleModal_container.top:after { + border: 6px solid transparent; + border-bottom-width: 0; + border-top-color: #000; + top: auto; + bottom: -6px; + left: 50%; + margin-left: -6px +} + +.titleModal_container.left { + margin-top: auto; + margin-left: 3px +} + +.titleModal_container.left:after { + border: 6px solid transparent; + border-right-width: 0; + border-left-color: #000; + top: 50%; + left: auto; + right: -6px; + margin-left: 0; + margin-top: -6px +} + +.titleModal_container.right { + margin-top: auto; + margin-left: -3px +} + +.titleModal_container.right:after { + border: 6px solid transparent; + border-left-width: 0; + border-right-color: #000; + top: 50%; + left: 0; + margin-top: -6px +} + +.titleModal.light .titleModal_container { + background: #fff; + color: #000; + border: 1px solid #ccc +} + +.titleModal.light .titleModal_container:after { + border-bottom-color: #fff +} + +.titleModal.light .titleModal_container:before { + content: ''; + position: absolute; + border: 7px solid transparent; + border-top-width: 0; + border-bottom-color: #ccc; + top: -7px; + left: 50%; + margin-left: -7px +} + +.titleModal.light .titleModal_container.top:after { + border: 6px solid transparent; + border-bottom-width: 0; + border-top-color: #fff +} + +.titleModal.light .titleModal_container.top:before { + border: 6px solid transparent; + border-bottom-width: 0; + border-top-color: #ccc; + top: auto; + bottom: -7px; + left: 50%; + margin-left: -6px +} + +.titleModal.light .titleModal_container.left:after { + border: 6px solid transparent; + border-right-width: 0; + border-left-color: #fff +} + +.titleModal.light .titleModal_container.left:before { + border: 7px solid transparent; + border-right-width: 0; + border-left-color: #ccc; + top: 50%; + left: auto; + right: -7px; + margin-left: 0; + margin-top: -7px +} + +.titleModal.light .titleModal_container.right:after { + border: 6px solid transparent; + border-left-width: 0; + border-right-color: #fff +} + +.titleModal.light .titleModal_container.right:before { + border: 7px solid transparent; + border-left-width: 0; + border-right-color: #ccc; + top: 50%; + left: 0; + margin-top: -7px +} + +/* confirmModal */ +.confirmModal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 888888; + overflow: auto; + opacity: 0; + transition: all 200ms ease; + backface-visibility: hidden +} + +.confirmModal.open { + opacity: 1 +} + +.confirmModal * { + box-sizing: border-box +} + +.confirmModal .confirmModal_body { + position: relative; + width: 400px; + left: 0; + right: 0; + margin: 0 auto 40px; + background: #fff; + font-family: sans-serif; + font-size: 14px; + font-weight: initial; + font-style: initial; + color: initial; + text-decoration: initial; + text-transform: initial; + opacity: 0 +} + +.confirmModal .confirmModal_body.open { + opacity: 1 +} + +.confirmModal .confirmModal_content { + padding: 60px 40px; + line-height: 20px +} + +.confirmModal .confirmModal_footer { + background: #fafafa; + padding: 15px 25px; + border-top: 1px solid #ddd; + text-align: right +} + +.confirmModal .confirmModal_footer button { + margin: 0 0 0 5px +} + +.confirmModal .confirmModal_body.needConfirm { + animation-name: needConfirm; + animation-timing-function: ease; + animation-iteration-count: 3 +} + +@keyframes needConfirm { + 0% { + transform: scale(1) + } + 50% { + transform: scale(1.1) + } + 100% { + transform: scale(1) + } +} + +body.confirmModalOpen { + overflow: hidden +} + +@media (max-width: 430px) { + .confirmModal .confirmModal_body { + width: 100% + } +} + +/* animation */ +.animated { + animation-duration: 0.2s; + animation-fill-mode: both; + transform: translateZ(0); + backface-visibility: hidden +} + +.fadeInLeft { + animation-name: fadeInLeft +} + +.fadeOutLeft { + animation-name: fadeOutLeft +} + +.fadeInRight { + animation-name: fadeInRight +} + +.fadeOutRight { + animation-name: fadeOutRight +} + +.fadeInTop { + animation-name: fadeInTop +} + +.fadeInTopBig { + animation-name: fadeInTopBig +} + +.fadeOutTop { + animation-name: fadeOutTop +} + +.fadeInBottom { + animation-name: fadeInBottom +} + +.fadeOutBottom { + animation-name: fadeOutBottom +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(-10px) + } + 100% { + opacity: 1; + transform: translateX(0) + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0) + } + 100% { + opacity: 0; + transform: translateX(-10px) + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(10px) + } + 100% { + opacity: 1; + transform: translateX(0) + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0) + } + 100% { + opacity: 0; + transform: translateX(10px) + } +} + +@keyframes fadeInTop { + 0% { + opacity: 0; + transform: translateY(-10px) + } + 100% { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes fadeOutTop { + 0% { + opacity: 1; + transform: translateY(0) + } + 100% { + opacity: 0; + transform: translateY(-10px) + } +} + +@keyframes fadeInTopBig { + 0% { + opacity: 0; + transform: translateY(-100%) + } + 100% { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes fadeInBottom { + 0% { + opacity: 0; + transform: translateY(10px) + } + 100% { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes fadeOutBottom { + 0% { + opacity: 1; + transform: translateY(0) + } + 100% { + opacity: 0; + transform: translateY(10px) + } +} + +.prompt-message-min { + min-width: 300px; + max-width: 300px; +}
\ No newline at end of file |