[IMP] web: checkbox design

This commit is contained in:
stefanorigano (SRI)
2021-06-18 21:31:32 +02:00
committed by Aaron Bohy
parent 3b2cafe363
commit 40546d777b
4 changed files with 46 additions and 18 deletions
@@ -0,0 +1,29 @@
// = Checkbox
// ============================================================================
.custom-control.custom-checkbox .custom-control-input {
// Force default bts default border color
&:not(:checked):not(:indeterminate):not(:disabled) ~ .custom-control-label:before {
border-color: $custom-control-indicator-border-color;
}
&:disabled {
~ .custom-control-label {
cursor: not-allowed;
&:before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
&:checked ~ .custom-control-label:after {
// Use odoo custom muted icon
background-image: $o-custom-checkbox-indicator-icon-checked-disabled;
}
}
@media print {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
@@ -115,6 +115,18 @@ $dropdown-link-disabled-color: $o-main-color-muted !default;
$dropdown-item-padding-y: $o-dropdown-vpadding !default;
$dropdown-item-padding-x: $o-dropdown-hpadding !default;
// Forms
$custom-control-indicator-border-color: $gray-500 !default;
$custom-control-label-disabled-color: $o-main-color-muted !default;
$custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: $primary !default;
$custom-control-indicator-checked-border-color: $primary !default;
$custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-indicator-checked-disabled-bg: $gray-200 !default;
// Z-index master list
// Change the z-index of the modal-backdrop elements to be equal to the
@@ -65,6 +65,11 @@ $o-tooltip-text-color: #777777 !default;
$o-tooltip-title-text-color: black !default;
$o-tooltip-title-background-color: #F7F7F7 !default;
// Forms
// Bootstrap clone, we just change the icon color
$o-custom-checkbox-indicator-icon-checked-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$o-main-color-muted}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
// Layout
//
// Extension of BS4. This is not redefining the BS4 variable directly as we only
-18
View File
@@ -56,24 +56,6 @@ $bs-datetimepicker-secondary-border-color-rgba: $border-color;
}
}
// Overwrite bts4 custom-checkbox design (un-checked state only)
.custom-control.custom-checkbox {
.custom-control-input:not(:checked):not(:indeterminate) {
~ .custom-control-label:before {
background: none;
outline: 1px solid $o-main-text-color;
}
&:disabled ~ .custom-control-label:before {
background: $o-brand-lightsecondary;
opacity: 0.25;
}
}
@media print {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
.o_catch_attention {
position: relative;
z-index: 1;