divers styles: colors var, table thead,...

This commit is contained in:
Mathieu Jaumotte 2021-07-13 12:17:45 +02:00
parent 30af99f4f0
commit 15f439b43d
6 changed files with 37 additions and 19 deletions

View File

@ -8,10 +8,10 @@ div.chill-collection {
li.entry { li.entry {
padding: 1em; padding: 1em;
border: 1px solid var(--chill-llight-gray); border: 1px solid var(--bs-chill-light-gray);
&:nth-child(even) { &:nth-child(even) {
background-color: var(--chill-llight-gray); background-color: var(--bs-chill-light-gray);
} }
} }

View File

@ -29,6 +29,14 @@ h1, h2, .h1, .h2 {
display: block; display: block;
} }
label:not(.form-check-label),
legend.col-form-label {
padding-top: .5em;
padding-bottom: .5em;
font-weight: 700;
margin-bottom: .375em;
}
form { form {
/* avoid useless html in first level of the custom fields row loop in forms /* avoid useless html in first level of the custom fields row loop in forms
* (better should to improve the loop) * (better should to improve the loop)
@ -58,6 +66,15 @@ form {
} }
} }
/// table
table.table-bordered {
thead, thead * {
border: 0 !important;
text-align: center;
}
}
/// chill elements of design /// chill elements of design
.sticky-form-buttons { .sticky-form-buttons {
@ -266,9 +283,3 @@ footer.footer {
} }
} }
} }
/// modal + vue
div.modal-mask {
display: inherit;
}

View File

@ -6,6 +6,7 @@
* when possible, try to use bootstrap html class * when possible, try to use bootstrap html class
*/ */
@import '~ChillMainAssets/modules/bootstrap/bootstrap';
@import 'alert-first-child'; @import 'alert-first-child';
@import 'alert-with-actions'; @import 'alert-with-actions';
@ -68,7 +69,7 @@ div.flex-table {
margin: 0; margin: 0;
} }
h2, h3, h4 { h2, h3, h4 {
color: var(--chill-blue); color: var(--bs-chill-blue);
} }
div.item-bloc { div.item-bloc {
// We use box-shadow instead of border // We use box-shadow instead of border
@ -76,11 +77,11 @@ div.flex-table {
// when blocs are resized for small screen ! // when blocs are resized for small screen !
// Then we can simulate border-collapse: collapse (table) // Then we can simulate border-collapse: collapse (table)
box-shadow: box-shadow:
1px 0 0 0 #000, 1px 0 0 0 var(--bs-dark),
0 1px 0 0 #000, 0 1px 0 0 var(--bs-dark),
1px 1px 0 0 #000, /* fix the corner */ 1px 1px 0 0 var(--bs-dark), /* fix the corner */
1px 0 0 0 #000 inset, 1px 0 0 0 var(--bs-dark) inset,
0 1px 0 0 #000 inset; 0 1px 0 0 var(--bs-dark) inset;
} }
} }

View File

@ -7,7 +7,7 @@
</div> </div>
<table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0"> <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
<thead class=""> <thead>
<tr> <tr>
<th class="chill-orange">{{ $t('persons_associated.name') }}</th> <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
<th class="chill-orange">{{ $t('persons_associated.startdate') }}</th> <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>

View File

@ -6,7 +6,7 @@
<div v-if="accompanyingCourse.requestor" class="flex-table"> <div v-if="accompanyingCourse.requestor" class="flex-table">
<label> <label>
<input type="checkbox" v-model="isAnonymous" /><!-- :value="value" --> <input type="checkbox" v-model="isAnonymous" class="me-2" /><!-- :value="value" -->
{{ $t('requestor.is_anonymous') }} {{ $t('requestor.is_anonymous') }}
</label> </label>
@ -154,7 +154,5 @@ div.flex-table {
margin-right: 2em; margin-right: 2em;
} }
} }
} }
</style> </style>

View File

@ -75,6 +75,14 @@ export default {
<style src="vue-multiselect/dist/vue-multiselect.css"></style> <style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss"> <style lang="scss">
span.multiselect__tag { span.multiselect__tag {
background: var(--chill-orange); background: var(--bs-chill-orange);
}
span.multiselect__option--highlight {
&::after {
background: var(--bs-chill-green);
}
&.multiselect__option--selected::after {
background: var(--bs-chill-red);
}
} }
</style> </style>