CSS voor websites die geen bootstrap gebruiken

De Online Afspraken widget is gebaseerd op bootstrap technologie / 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, dient de website bouwer 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;
}

Gerelateerde artikelen

Page:

Inkopen van BPM bij geïmporteerde auto's
Page:

OKR tellerstanden automatisch melden
Page:

Publiceer voertuigen op Eigen Website (PEW)
Page:

PechOnderwegService.nl
Page:

Klantenvertellen / Ekomi - directe koppeling
Page:

iDeal link in Email
Page:

E-Mail uitleg, issues en oplossingen
Page:

Hoe briefpapier / logo aan te leveren
Page:

Planning werkplaats v2
Page:

Recepturen gebruiken

Autoflex 10 EVO

CSS voor websites die geen bootstrap gebruiken

Analytics

Related content