[IMP] web: checkbox design
This commit is contained in:
committed by
Aaron Bohy
parent
3b2cafe363
commit
40546d777b
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user