UNPKG

arts-react-bootstrap-modal

Version:

React Bootstrap Modal ===================================

269 lines (268 loc) 5.07 kB
/* Licensed MIT; Copyright (c) 2011-2014 Twitter, Inc <https://github.com/twbs/bootstrap/blob/master/LICENSE> */ /* Licensed MIT; Copyright (c) 2011-2014 Twitter, Inc <https://github.com/twbs/bootstrap/blob/master/LICENSE> */ /* Licensed MIT; Copyright (c) 2011-2014 Twitter, Inc <https://github.com/twbs/bootstrap/blob/master/LICENSE> */ .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: 0.5; filter: alpha(opacity=50); } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } .btsModals-open { overflow: hidden; } .btsModals { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .btsModals.fade .btsModals-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .btsModals.in .btsModals-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .btsModals-open .btsModals { overflow-x: hidden; overflow-y: auto; } .btsModals-dialog { position: relative; width: auto; margin: 10px; } .btsModals-content { position: relative; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: 0; } .btsModals-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .btsModals-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .btsModals-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .btsModals-header { padding: 15px; border-bottom: 1px solid #e5e5e5; min-height: 16.42857143px; } .btsModals-header .close { margin-top: -2px; } .btsModals-title { margin: 0; line-height: 1.42857143; } .btsModals-body { position: relative; padding: 15px; } .btsModals-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .btsModals-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .btsModals-footer .btn-group .btn + .btn { margin-left: -1px; } .btsModals-footer .btn-block + .btn-block { margin-left: 0; } @media (min-width: 768px) { .btsModals-dialog { width: 600px; margin: 30px auto; } .btsModals-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .btsModals-sm { width: 300px; } } @media (min-width: 992px) { .btsModals-lg { width: 900px; } } /* Animate.css - http://daneden.me/animate Licensed under the ☺ license (http://licence.visualidiot.com/) Copyright (c) 2012 Dan Eden*/ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } .btsModals { display: block; } .btsModals-content > .close { position: absolute; top: 10px; right: 10px; } @media (min-width: 768px) { .btsModals-sm > .btsModals-dialog { width: 300px; } } @media (min-width: 992px) { .btsModals-lg > .btsModals-dialog { width: 900px; } }