goiintra/public_html/assets/css/leftside-modal.css

665 lines
12 KiB
CSS

.filter-icon {
position: fixed;
left: 15px;
bottom: 15px;
z-index: 99997;
background: var(--color-primary);
width: 44px;
height: 44px;
border-radius: 50px;
}
.filter-icon i {
font-size: 24px;
color: #fff;
line-height: 0;
}
.filter-icon :hover {
color: #fff;
}
.filter-icon.btn-primary{
border: none !important;
}
.filter-forecast-body .form-forecast-search table.td-search td {
padding: 0px 0px;
}
.filter-forecast-body .td-search td {
height: 30px;
}
.filter-forecast-body hr {
margin: 0;
}
.btn-line{
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
padding: 6px;
margin-bottom:10px;
margin-right: 5px;
border-radius: 5px;
transition: 0.5s;
color: var(--color-sub);
background: var(--color-white);
border: 1px solid var(--color-sub);
}
.btn-line:hover, .btn-line:active, .btn-line:focus{
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
padding: 6px;
margin-bottom:10px;
margin-right: 5px;
border-radius: 5px;
transition: 0.5s;
color: var(--color-white);
background: var(--color-primary);
border: 1px solid var(--color-primary);
}
/* MODAL FADE LEFT RIGHT BOTTOM */
.modal.fade:not(.in).left .modal-dialog {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
.modal.fade:not(.in).right .modal-dialog {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
.modal.fade:not(.in).bottom .modal-dialog {
-webkit-transform: translate3d(0, 25%, 0);
transform: translate3d(0, 25%, 0);
}
.modal.right .modal-dialog {
position:absolute;
top:0;
right:0;
margin:0;
}
.modal.left .modal-dialog {
position:absolute;
top:0;
left:0;
margin:0;
}
.modal.left .modal-dialog.modal-sm {
max-width:300px;
}
.modal.left .modal-content, .modal.right .modal-content {
min-height:100vh;
border:0;
}
/*------------------------------*/
.close {
z-index: 1;
position: absolute;
right: 10px;
line-height: 1;
font-size: 75px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 0 #ffffff;
/* opacity: 0.2; */
/* filter: alpha(opacity=20) */
}
.close:hover,.close:focus {
color: #ffffff;
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
}
.modal-open {
overflow: hidden
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0)
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
z-index: 99998;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px
}
.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid transparent;
border-radius: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
box-shadow: 0 3px 9px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #00000062
}
.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0)
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50)
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
#sidebar-left .modal-header {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.modal-header .close {
margin-top: -2px
}
.modal-title {
flex: none;
width: 300px !important;
text-align: left;
white-space: normal;
word-wrap: break-word;
overflow: visible;
margin: 0;
line-height: 1.42857143;
padding-right: 60px;
}
.modal-body {
position: relative;
padding: 20px
}
.modal-footer {
padding: 20px;
text-align: right;
border-top: 1px solid #e5e5e5
}
.modal-footer .btn+.btn {
margin-left: 5px;
margin-bottom: 0
}
.modal-footer .btn-group .btn+.btn {
margin-left: -1px
}
.modal-footer .btn-block+.btn-block {
margin-left: 0
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll
}
@media (min-width: 768px) {
.modal-dialog {
width:400px;
margin: 30px auto
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
box-shadow: 0 5px 15px rgba(0,0,0,0.5)
}
.modal-sm {
width: 300px
}
}
@media (min-width: 992px) {
.modal-lg {
width:600px
}
}
.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-header:after,.modal-footer:after {
clear: both
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.pull-right {
float: right !important
}
.pull-left {
float: left !important
}
.hide {
display: none !important
}
.show {
display: block !important
}
.invisible {
visibility: hidden
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0
}
.hidden {
display: none !important
}
.affix {
position: fixed
}
@-ms-viewport {
width: device-width
}
.visible-xs,.visible-sm,.visible-md,.visible-lg {
display: none !important
}
.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block {
display: none !important
}
@media (max-width: 767px) {
.visible-xs {
display:block !important
}
table.visible-xs {
display: table !important
}
tr.visible-xs {
display: table-row !important
}
th.visible-xs,td.visible-xs {
display: table-cell !important
}
}
@media (max-width: 767px) {
.visible-xs-block {
display:block !important
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display:inline !important
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display:inline-block !important
}
}
@media (min-width: 768px) and (max-width:991px) {
.visible-sm {
display:block !important
}
table.visible-sm {
display: table !important
}
tr.visible-sm {
display: table-row !important
}
th.visible-sm,td.visible-sm {
display: table-cell !important
}
}
@media (min-width: 768px) and (max-width:991px) {
.visible-sm-block {
display:block !important
}
}
@media (min-width: 768px) and (max-width:991px) {
.visible-sm-inline {
display:inline !important
}
}
@media (min-width: 768px) and (max-width:991px) {
.visible-sm-inline-block {
display:inline-block !important
}
}
@media (min-width: 992px) and (max-width:1199px) {
.visible-md {
display:block !important
}
table.visible-md {
display: table !important
}
tr.visible-md {
display: table-row !important
}
th.visible-md,td.visible-md {
display: table-cell !important
}
}
@media (min-width: 992px) and (max-width:1199px) {
.visible-md-block {
display:block !important
}
}
@media (min-width: 992px) and (max-width:1199px) {
.visible-md-inline {
display:inline !important
}
}
@media (min-width: 992px) and (max-width:1199px) {
.visible-md-inline-block {
display:inline-block !important
}
}
@media (min-width: 1200px) {
.visible-lg {
display:block !important
}
table.visible-lg {
display: table !important
}
tr.visible-lg {
display: table-row !important
}
th.visible-lg,td.visible-lg {
display: table-cell !important
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display:block !important
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display:inline !important
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display:inline-block !important
}
}
@media (max-width: 767px) {
.hidden-xs {
display:none !important
}
}
@media (min-width: 768px) and (max-width:991px) {
.hidden-sm {
display:none !important
}
}
@media (min-width: 992px) and (max-width:1199px) {
.hidden-md {
display:none !important
}
}
@media (min-width: 1200px) {
.hidden-lg {
display:none !important
}
}
.visible-print {
display: none !important
}
@media print {
.visible-print {
display: block !important
}
table.visible-print {
display: table !important
}
tr.visible-print {
display: table-row !important
}
th.visible-print,td.visible-print {
display: table-cell !important
}
}
.visible-print-block {
display: none !important
}
@media print {
.visible-print-block {
display: block !important
}
}
.visible-print-inline {
display: none !important
}
@media print {
.visible-print-inline {
display: inline !important
}
}
.visible-print-inline-block {
display: none !important
}
@media print {
.visible-print-inline-block {
display: inline-block !important
}
}
@media print {
.hidden-print {
display: none !important
}
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent
}
/* 2023.07.17 */
#sidebar-left td.td-title {
text-align: left;
}
#sidebar-left .td-search td input {
border: 1px solid #BCBBBB;
border-radius: 3px;
padding: 5px 10px;
width: 150px;
}
#sidebar-left .td-search #c_fullquantity_a,
#sidebar-left .td-search #c_fullquantity_b {
border: 1px solid #BCBBBB;
border-radius: 3px;
padding: 5px 10px;
width: 70px;
}
#sidebar-left .modal-content {
width: 310px;
}