444 lines
9.5 KiB
SCSS
444 lines
9.5 KiB
SCSS
$gap: 0.5rem;
|
|
$paddingTable: 0.5rem;
|
|
$fieldHeight: calc(1.313em + 0.75rem + 2px);
|
|
|
|
.row {
|
|
margin-left: -$gap;
|
|
margin-right: -$gap;
|
|
}
|
|
|
|
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
|
|
padding-left: $gap;
|
|
padding-right: $gap;
|
|
}
|
|
|
|
.custom-select {
|
|
padding: 0 1.75rem 0 0.5rem;
|
|
}
|
|
|
|
.custom-control-inline:last-child,
|
|
.custom-control-inline:only-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
.form-group {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.form-control, .custom-select, .btn, .input-group-text {
|
|
height: $fieldHeight;
|
|
}
|
|
|
|
textarea.form-control {
|
|
min-height: calc(#{$fieldHeight} * 2);
|
|
}
|
|
|
|
.list-group-item {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
line-height: 1.25;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn .b-icon.bi, .nav-link .b-icon.bi, .dropdown-toggle .b-icon.bi, .dropdown-item .b-icon.bi, .input-group-text .b-icon.bi {
|
|
font-size: 100%;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.card {
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.card-body {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.card-body, .tab-content {
|
|
padding: 0.75rem;
|
|
background: #FFF;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
padding: 0.5rem 0.75rem;
|
|
height: 35px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.alert {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
font-size: 0.9rem;
|
|
box-shadow: 3px 3px 8px -3px rgb(0 0 0 / 50%);
|
|
}
|
|
|
|
.dropdown-header, .dropdown-item {
|
|
padding: 0.5rem 1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.b-dropdown-text {
|
|
padding: 0.25rem 1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
|
|
body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e")!important; }
|
|
body .table.b-table>tfoot>tr>[aria-sort=ascending], body .table.b-table>thead>tr>th[aria-sort=ascending]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='%23007bff' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e") !important; }
|
|
body .table.b-table>tfoot>tr>[aria-sort=descending], body .table.b-table>thead>tr>th[aria-sort=descending]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='%23007bff' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e") !important; }
|
|
|
|
.custom-control-label::before {
|
|
top: 0.3rem;
|
|
}
|
|
|
|
|
|
.b-calendar .b-calendar-inner {
|
|
min-width: auto;
|
|
}
|
|
.b-form-btn-label-control.btn-group > .dropdown-menu {
|
|
padding: 0;
|
|
}
|
|
|
|
.b-calendar .b-calendar-grid {
|
|
border: none;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.b-calendar output {
|
|
border: none;
|
|
background: #f8f9fa;
|
|
border-radius: 4px 4px 0 0;
|
|
border-bottom: 1px solid #d0d0d0;
|
|
line-height: 1;
|
|
padding: 0.5rem;
|
|
height: auto;
|
|
}
|
|
|
|
.b-calendar-grid-body {
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
}
|
|
|
|
.b-calendar .b-calendar-grid-body .col[data-date] .btn {
|
|
font-size: 12px;
|
|
margin: 0 !important;
|
|
width: auto;
|
|
height: auto;
|
|
flex: 1;
|
|
font-weight: 500 !important;
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
.b-calendar-grid-weekdays {
|
|
padding: 0 5px;
|
|
}
|
|
.b-calendar-grid-body, .b-calendar-grid-weekdays.row.no-gutters.border-bottom {
|
|
display: flex;
|
|
border: none !important;
|
|
margin: 0;
|
|
}
|
|
|
|
.b-calendar .b-calendar-header, .b-calendar .b-calendar-nav {
|
|
margin: 0;
|
|
}
|
|
|
|
.b-calendar.b-form-date-calendar.w-100 {
|
|
display: flex;
|
|
}
|
|
|
|
.b-calendar-grid-help {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
line-height: 1;
|
|
color: #333 !important;
|
|
display: none;
|
|
}
|
|
|
|
.b-calendar-grid-body .row {
|
|
margin: 0;
|
|
}
|
|
|
|
.b-calendar .b-calendar-grid-body .col[data-date] {
|
|
display: flex;
|
|
width: 30px;
|
|
height: 30px;
|
|
flex: 1;
|
|
}
|
|
|
|
.b-calendar-grid-caption {
|
|
text-transform: uppercase;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.b-calendar .btn.disabled {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.b-calendar .b-calendar-grid .btn:not(.active):hover {
|
|
box-shadow: 0px 0px 0px 1px var(--primary) inset;
|
|
color: var(--primary) !important;
|
|
background: none;
|
|
}
|
|
|
|
.b-calendar .btn-outline-primary:not(:disabled):not(.disabled):active, .b-calendar .btn-outline-primary:not(:disabled):not(.disabled).active, .b-calendar .show > .btn-outline-primary.dropdown-toggle {
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.b-calendar svg {
|
|
transform: scale(0.8);
|
|
color: #444;
|
|
}
|
|
|
|
.b-calendar .b-calendar-grid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.b-calendar-grid-caption {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.b-calendar-nav {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #d0d0d0;
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
}
|
|
|
|
.b-calendar-nav .btn {
|
|
padding: 0;
|
|
margin: 0 !important;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.b-calendar-nav .btn:hover {
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.b-calendar .btn.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
|
|
.rkm-time-picker {
|
|
padding: 0;
|
|
margin: 0;
|
|
min-width: auto;
|
|
}
|
|
|
|
.rkm-time-picker .b-time {
|
|
width: auto;
|
|
min-width: auto;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
display: flex !important;
|
|
}
|
|
|
|
.rkm-time-picker .mx-auto {
|
|
width: 100%;
|
|
}
|
|
|
|
.rkm-time-picker svg.bi {
|
|
transform: scale(0.9);
|
|
font-size: 100% !important;
|
|
}
|
|
|
|
.rkm-time-picker .b-form-spinbutton.b-time-hours + .d-flex svg {
|
|
height: 8px;
|
|
}
|
|
|
|
.rkm-date-picker .b-form-spinbutton {
|
|
border: none;
|
|
}
|
|
|
|
.rkm-time-picker .b-form-spinbutton {
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.rkm-time-picker .b-form-spinbutton .btn {
|
|
padding: 0.75rem 1.5rem;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
}
|
|
|
|
.rkm-time-picker .b-form-spinbutton output {
|
|
width: 100%;
|
|
margin: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
|
|
.tabs {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.tab-content {
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
}
|
|
|
|
.nav-tabs {
|
|
margin: 0;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
}
|
|
|
|
.nav-tabs .nav-item a {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
|
|
color: var(--primary);
|
|
background: none;
|
|
}
|
|
|
|
.tabs .card-header {
|
|
padding: 0;
|
|
background: #FFF;
|
|
border-radius: 3px 3px 0 0;
|
|
border-bottom-color: #dee2e6;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
font-weight: 500;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.nav-tabs .nav-link:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: 0.25rem;
|
|
width: calc(100% - 0.5rem);
|
|
height: 3px;
|
|
background: rgb(108 117 125 / 76%);
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
transform: translateY(0) translateZ(0);
|
|
transition: transform 0.3s, color 0.3s;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active:after, .nav-tabs .nav-link:hover:after {
|
|
transform: translateY(-3px) translateZ(0);
|
|
}
|
|
|
|
.nav-tabs .nav-link.active:after {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.nav-tabs li:first-child .nav-link {
|
|
border-radius: 0.25rem 0 0 0;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
color: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.card-header-tabs {
|
|
margin: 0;
|
|
}
|
|
|
|
.tabs .nav-item.disabledTab a {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.nav-tabs .nav-item + .nav-item {
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
.datatable-footer .form-group {
|
|
margin: 0;
|
|
}
|
|
.datatable-footer .col-form-label {
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.table thead th {
|
|
border-bottom: none;
|
|
padding-bottom: calc(0.5rem + 1px);
|
|
box-shadow: 0px -1px 0px 0px #dee2e6 inset;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.table th {
|
|
color: var(--gray-dark);
|
|
font-weight: 600;
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.table td {
|
|
height: 50px;
|
|
}
|
|
|
|
.table th[aria-sort]:hover {
|
|
background: #dee2e6;
|
|
}
|
|
|
|
.table th, .table td {
|
|
padding: $paddingTable;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table-striped tbody tr:nth-of-type(odd) {
|
|
background: #FFF;
|
|
}
|
|
|
|
.table-striped tbody tr:nth-of-type(even) {
|
|
background: rgb(248 248 248);
|
|
}
|
|
|
|
.table tbody tr:not(.b-table-details):not(.b-table-empty-row):not(.b-table-busy-slot):hover > td {
|
|
background: rgb(0 123 255 / 10%);
|
|
border-top: 1px solid var(--primary);
|
|
border-bottom: 1px solid var(--primary);
|
|
}
|
|
|
|
.table tbody tr:not(.b-table-details thead tr):not(.b-table-details):not(.b-table-empty-row):not(.b-table-busy-slot):hover {
|
|
border: 1px solid var(--primary);
|
|
}
|
|
|
|
.b-table-has-details td {
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.pagination {
|
|
margin-bottom: 0;
|
|
} |