De Online Afspraken widget is gebaseerd op bootstrap technology / styling voor weergave van oa. de kalender en velden. Om te zorgen dat de widget in basis goed functioneert op een website die geen bootstrap stylesheet gebruikt, dan onderstaande styling toevoegen aan de website na het laden van de widget. Bij voorkeur aan het einde van de eigen stylesheets.
#autoflex-oa-app {
color: white;
font-size: 1rem;
line-height: 1.2;
}
#autoflex-oa-app .container {
background-color: black;
}
#autoflex-oa-app .jumbotron {
background-color: #d33131;
padding: 2rem;
margin-bottom: 2rem;
border-radius: .3rem;
}
#autoflex-oa-app .row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
#autoflex-oa-app .col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
#autoflex-oa-app .col-form-label {
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
margin-bottom: 0;
line-height: 1.5;
border: none;
color: white;
}
#autoflex-oa-app .b-calendar-grid {
height: auto;
padding: 0;
margin: 0;
overflow: hidden;
}
#autoflex-oa-app .b-calendar .b-calendar-grid .row {
flex-wrap: nowrap;
}
#autoflex-oa-app .btn {
display: inline-block;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
}
#autoflex-oa-app button.btn.btn-danger{
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
#autoflex-oa-app button.btn.btn-success{
color: #fff;
background-color: #023a47;
border-color: #023a47;
}
#autoflex-oa-app .form-control {
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
font-size: initial;
}
#autoflex-oa-app .custom-select {
display: inline-block;
width: 100%;
color: #495057;
vertical-align: middle;
border: 1px solid #ced4da;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#autoflex-oa-app .custom-control-label {
font-size: initial;
}
#autoflex-oa-app .text-muted {
color: inherit;
}
.modal-body p {
color: black;
}
.modal-title {
color: black;
}