nscomponentsreact/build/generated/css/nsPanel.min.css

React Wrapper Components for NSComponents

.nsPanelModalProp
{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0,0,0,.4);
    transition: opacity .3s;
}
.nsPanelModalAnimation
{
	opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.nsPanelModalProp.nsPanelModalOpen
{
	overflow-x: hidden;
    overflow-y: auto;
}
.nsPanelModalAnimation.nsPanelModalOpen
{
	opacity: 1;
}
.nsPanel 
{
    /*margin: 0;*/
    padding: 0;
    width: 100%;
    pointer-events: auto;
    border-radius: .3rem;
}
.nsPanel.nsPanelModalContent 
{
    position: relative;
    margin: auto;
    padding: 0;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    z-Index: 100;
}
.nsPanel.nsPanelModalContentDrag
{
	left: 20%;
}
.nsPanel.nsPanelOpen.nsPanelModalZoom
{
	-webkit-animation-name: nsAnimateZoomIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateZoomIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalZoom
{
	-webkit-animation-name: nsAnimateZoomOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateZoomOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalLeft
{
	-webkit-animation-name: nsAnimateLeftIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateLeftIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalLeft
{
	-webkit-animation-name: nsAnimateLeftOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateLeftOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalRight
{
	-webkit-animation-name: nsAnimateRightIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRightIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalRight
{
	-webkit-animation-name: nsAnimateRightOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRightOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalTop
{
	-webkit-animation-name: nsAnimateTopIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateTopIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalTop
{
	-webkit-animation-name: nsAnimateTopOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateTopOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalBottom
{
	-webkit-animation-name: nsAnimateBottomIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateBottomIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalBottom
{
	-webkit-animation-name: nsAnimateBottomOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateBottomOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalFlipX
{
	-webkit-animation-name: nsAnimateFlipXIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateFlipXIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalFlipX
{
	-webkit-animation-name: nsAnimateFlipXOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateFlipXOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalFlipY
{
	-webkit-animation-name: nsAnimateFlipYIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateFlipYIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalFlipY
{
	-webkit-animation-name: nsAnimateFlipYOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateFlipYOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalRoll
{
	-webkit-animation-name: nsAnimateRollIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRollIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalRoll
{
	-webkit-animation-name: nsAnimateRollOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRollOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalBounce
{
	-webkit-animation-name: nsAnimateBounceIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateBounceIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalBounce
{
	-webkit-animation-name: nsAnimateBounceOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateBounceOut;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelOpen.nsPanelModalRotate
{
	-webkit-animation-name: nsAnimateRotateIn;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRotateIn;
    animation-duration: 0.5s;
}
.nsPanel.nsPanelModalRotate
{
	-webkit-animation-name: nsAnimateRotateOut;
    -webkit-animation-duration: 0.5s;
    animation-name: nsAnimateRotateOut;
    animation-duration: 0.5s;
}

.nsPanel.nsPanelOpen.nsPanelWidget
{
	width: 45%;
    height: 45%;
    background: #F6F6F6;
}
.nsPanel .nsPanelTitleBar 
{
    text-align: left;
    min-height: 20px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}
.nsPanel .nsPanelTitleBarContent 
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    cursor: move;
    overflow: hidden;
}
.nsPanel .nsPanelControlbar 
{
    /*display: -webkit-box;
    display: -ms-flexbox;*/
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    float:right;
}
.nsPanel .nsPanelControlbar .nsPanelControlButton 
{
    padding: 0 3px;
    cursor: pointer;
}
/* donot give padding */
.nsPanel .nsPanelBody 
{
    overflow: auto;
    height: 91%;
    width:100%;
}
.nsPanel .nsPanelExpColIcon
{
	width:14px;
	height:14px;
}
.nsPanel .nsPanelMinMaxIcon
{
	width:14px;
	height:14px;
}
.nsPanel .nsPanelFullScreenIcon
{
	width:14px;
	height:14px;
}
.nsPanel .nsPanelCloseIcon
{
	width:14px;
	height:14px;
}
.nsPanelMinimizeContainer 
{
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
.nsPanelMinimized 
{
    /*width: 250px;
    height: 35px;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px;
    position: static !important;*/
    height: auto !important;
    left: auto !important;
    opacity: 1;
    top: auto !important;
    width: auto !important;
    position: static !important;
}
.nsPanelMinimized.nsPanelMinimizedright
{
	float: right;
}
.nsPanelMinimized.nsPanelMinimizedleft
{
	float: left;
}
.nsPanelFullScreen 
{
	height: 100%!important;
    width: 100%!important;
    height: 100vh!important;
    width: 100vw!important;
    position: fixed!important; 
    top: 0!important; 
    left: 0!important; 
    bottom: 0!important;
  	right: 0!important;
  	margin: 0;
    z-index:100;
    opacity:1;
}

/* Add Animation */
@keyframes nsAnimateZoomIn{
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    50% {
        opacity: 1;
    }
}
@keyframes nsAnimateZoomOut{
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    100% {
        opacity: 0;
    }
}
@keyframes nsAnimateTopIn{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes nsAnimateTopOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }
}
@keyframes nsAnimateBottomIn{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes nsAnimateBottomOut{
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }
}
@keyframes nsAnimateLeftIn{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes nsAnimateLeftOut{
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
}
@keyframes nsAnimateRightIn{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes nsAnimateRightOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }
}
@keyframes nsAnimateFlipXIn{
    0% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        -webkit-transition-timing-function: ease-in;
        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);
        -webkit-transition-timing-function: ease-in;
        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 nsAnimateFlipXOut{
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0;
    }
}
@keyframes nsAnimateFlipYIn{
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
        transform: perspective(400px) rotate3d(0,1,0,-5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes nsAnimateFlipYOut{
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
        transform: perspective(400px) rotate3d(0,1,0,-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        opacity: 0;
    }
}
@keyframes nsAnimateRollIn{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes nsAnimateRollOut{
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
    }
}
@keyframes nsAnimateBounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03);
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}
@keyframes nsAnimateBounceOut{
	20% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9);
    }

    50%,55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }
}
@keyframes nsAnimateRotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-200deg);
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes nsAnimateRotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,200deg);
        transform: rotate3d(0,0,1,200deg);
        opacity: 0;
    }
}
/****************************************White Theme ***************************************/
.nsPanelWhite
{
	background-color: #fefefe;
	/*border: 1px solid rgba(0,0,0,.2);*/
	border: 5px solid #157fcc;
}
.nsPanelModalWhite .nsPanelWhite
{
	background-color: #fff;
    border: 5px solid #157fcc;
}
.nsPanelWhite .nsPanelTitleBar
{
	background-color: #157fcc;
	font-weight: bold;
}
.nsPanelWhite .nsPanelTitleBarContent
{
	color: #fefefe;
}
.nsPanelWhite .nsPanelExpColIconUse 
{
  fill: #848484;
  color: #F6F6F6;
}
.nsPanelWhite .nsPanelMinMaxIconUse 
{
  fill: #F6F6F6;
  color: #848484;
}
.nsPanelWhite .nsPanelCloseIconUse 
{
  fill: #848484;
  color: #F6F6F6;
}
.nsPanelWhite .nsPanelFullScreenIcon
{
  fill: #848484;
  color: #F6F6F6;
}
/****************************************End of White Theme ***************************************/