- Jul 27, 2018
-
-
qsm-odoo authored
Only two classes remain to declare a media structure: 'media' and 'media-body'. 'media-left/right' are guessed by their position using the flex layout. Also, the 'media-list' class has been dropped but <ul/> element should use the 'list-unstyled' class instead. Like all other components, spacing between medias are now to be handled explicitely thanks the spacing utility classes.
-
qsm-odoo authored
* project Colors are now handled by bg-* utility classes.
-
qsm-odoo authored
* calendar Bootstrap removed its definition of the text-overflow mixin, so we now must use our own (which is better anyway).
-
qsm-odoo authored
In a previous commit, we removed the use of the 'btn-sm' classes as we used it everywhere for default-size buttons instead of customizing the size of those default-size buttons directly. This commit proves it was even more necessary as the 'btn-xs' class does not exist anymore in BS4 and we so can use the 'btn-sm' class instead.
-
qsm-odoo authored
Use BS4 *custom* structure for radio buttons to allow customizing their style and have cross-browser style.
-
qsm-odoo authored
The '.label' elements have been replaced by '.badge' elements without the 'badge-pill' class.
-
qsm-odoo authored
-
qsm-odoo authored
-
qsm-odoo authored
Pagination elements' items must now have the 'page-item'/'page-link' classes.
-
qsm-odoo authored
Carousel items must now have the 'carousel-item' class.
-
qsm-odoo authored
The '.badge' elements must now also use the 'badge-pill' class to get the same style as before as '.badge' elements without it are meant to replace the old 'label' component.
-
qsm-odoo authored
Before this commit, Odoo used checkboxes in three different ways: - A simple <input type="checkbox"/>, mainly in the frontend. The style is browser dependant. - Same as above but with the BS3, checkbox structure. The style is still the same, but the alignement is supposed to be better (which is not always the case). - The Odoo official structure: ``` <div class="o_checkbox"> <input type="checkbox"/> <span/> </div> ``` which allows to have a cross-browser checkbox style and correct alignements. The goal after this commit is to only use the BS4 *custom* checkbox structure to achieve the same goal as our official structure (and remove that one): ``` <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">...</label> </div> ``` /!\ Labels are now required (use a zero-width space if necessary)
-
qsm-odoo authored
`table-condensed` -> `table-sm` Also SCSS variables were renamed. Also restore list view design.
-
qsm-odoo authored
The 'form-horizontal' class have been removed; the '.form-group' elements must now use the 'row' class for an horizontal layout. The 'control-label' class was renamed to 'col-form-label'. The 'help-block' class was renamed to 'form-text'. The 'has-error' and 'has-success' classes have been removed and replaced by a new system using the :valid and :invalid pseudo-classes, when a parent has the 'was-validated' class. While this system is great, it is not straightforward to use it in Odoo. Fortunately, BS4 provides the 'is-valid' and 'is-invalid' classes as fallback. This commit replaces the 'has-error' and 'has-success' classes by 'o_has_error' and 'o_has_success' classes (for JS compatibility) and use the 'is-*' fallback classes. (The 'has-warning' class has no equivalent but was unused in Odoo anyway).
-
qsm-odoo authored
The '.list-inline' items now must have the explicite 'list-inline-item' class for the structure to be correct.
-
qsm-odoo authored
This class allows '.list-group' elements to be better integrated in cards as the extra border is removed.
-
qsm-odoo authored
'img-rounded' -> 'rounded' 'img-circle' -> 'rounded-circle'
-
qsm-odoo authored
The input-group-addon class has been replaced by a combination of the input-group-text and the input-group-append/prepend classes. The input-group-btn class is replaced by the input-group-append/prepend classes.
-
qsm-odoo authored
Panels and wells were dropped and replaced by the "Card" component.
-
qsm-odoo authored
col-lg-* -> col-xl-* col-md-* -> col-lg-* col-sm-* -> col-md-* col-xs-* -> col-* col-lg-offset-* -> offset-xl-* col-md-offset-* -> offset-lg-* col-sm-offset-* -> offset-md-* col-xs-offset-* -> offset-* col-lg-pull-* -> order-xl-1 col-md-pull-* -> order-lg-1 col-sm-pull-* -> order-md-1 col-xs-pull-* -> order-1 col-lg-push-* -> order-xl-2 col-md-push-* -> order-lg-2 col-sm-push-* -> order-md-2 col-xs-push-* -> order-2
-
qsm-odoo authored
Now, the 'breadcrumb-item' class has to be put explicitely on breadcrumb items.
-
qsm-odoo authored
See previous commit for more explanation.
-
qsm-odoo authored
Odoo used to declare two main colors: primary and optional (which are purple and turquoise in enterprise). Those were respectively assigned to the 'primary' bootstrap variable and the 'btn-primary' bootstrap variable. BS4, however, does not allow to have a different primary color for buttons. Instead, the 'primary' color is used for all 'primary' related components and utility classes, same as for all other colors. So, if we want to keep our enterprise buttons green, our 'optional' colors had to become our 'primary' color. The old odoo primary is then renamed to the 'odoo' color. The palette of grays is now larger by default and is numbered from 100 to 900 alongside the $black and $white variables. The equivalence for older variables and the way we used them is: $gray-darker -> gray 900 (unused before) $gray-dark -> gray 900 $gray -> gray 700 $gray-light -> gray 600 $gray-lighter-darker -> gray 400 (the old variable was created by us) $gray-lighter-dark -> gray 300 (the old variable was created by us) $gray-lighter -> gray 200 Fortunately, the 'lighter' variations we created fit well in the default BS4 system ! Unfortunately, our $gray-lighter which carried the same function as $gray-200 (see above) is very close to the new default $gray-100 and quite distant from the new $gray-200. This will be handled in the next commit.
-
qsm-odoo authored
$border-radius-base -> $border-radius $border-radius-large -> $border-radius-lg $border-radius-small -> $border-radius-sm
-
qsm-odoo authored
Now the nav structure is more declarative: the 'nav-item' and 'nav-link' classes have to be put on related nav item and links. Also, the 'active' class has to be put on links instead of items. Same as for the navbar component: - The navbar structure was simplified and meant to be more declarative. - The navbar colors are also now handled by a different set of classes. The 'nav-stacked' class was removed and replaced by flex utilities. The set of classes for colors and nav styles also changed.
-
qsm-odoo authored
-
qsm-odoo authored
-
qsm-odoo authored
BS variables were renamed or changed and all (most) variables now use 'rem' units instead of 'px' unit.
-
qsm-odoo authored
- The dropdown structure was simplified, allowing to get rid of the 3-levels structure induced by <ul/> elements and dropdowns can now contain anything. The class 'dropdown-item' is now mandatory for each dropdown clickable element. The class 'dropdown-item-text' can be used to add same padding and style but without making the element have a clickable look. - Dividers now use the class 'dropdown-divider' - The way dropdowns are opened and hidden also changed (before the 'open' class was added on the `.dropdown-menu` parent, now the 'show' class is added on both the `.dropdown-menu` parent and the `.dropdown-menu` itself). - JS-wise, no click event handlers can be put on `.dropdown-toggle` elements anymore (instead, use handlers for dropdown events). - Carets are automatically put on `.dropdown-toggle` elements, so this commit replaces the `.caret` elements with this. This feature was possible to disable but would prevent us from adding a caret with scss. Also, this simplifies the DOM. The 'o-no-caret' class was also introduced to allow using the 'dropdown-toggle' class on non-caret elements. - Also adapt the scss to use $caret-width instead of $caret-width-base
-
qsm-odoo authored
That was pretty useless, better use the btn-secondary class and add particular rules to `.btn.fa` if necessary.
-
qsm-odoo authored
BS4 "btn-default" class was replaced with "btn-secondary", which makes more sense.
-
qsm-odoo authored
Odoo made the bad choice of using the 'btn-sm' class for every button instead of configuring the padding for default 'btn' to be smaller. In BS4, the style of btn-sm is actually more complex, lowering the font-size too. Also, btn-xs was removed so we would not have the possibility to display smaller button than our default ones. This commit removes btn-sm wherever it was used. Unfortunately, this might remove it at some places where it made sense but this can be restored in a second time.
-
qsm-odoo authored
The system completely changed. I also had to adapt classes to new screen breakpoints. hidden/hide -> d-none show -> d-block hidden-xs -> d-none d-md-(block/inline/...) hidden-sm -> d-md-none d-lg-(block/inline/...) hidden-md -> d-lg-none d-xl-(block/inline/...) hidden-lg -> d-xl-none visible-xs-* -> d-* d-md-none visible-sm-* -> d-none d-md-* d-lg-none visible-md-* -> d-none d-lg-* d-xl-none visible-lg-* -> d-none d-xl-* hidden-print -> d-print-none visible-print-* -> d-none d-print-* ... and all possible combination of those had to be handled too.
-
qsm-odoo authored
-
qsm-odoo authored
The variables are now an unique map. As the screen sizes' names changed, the container names changed accordingly.
-
qsm-odoo authored
* website_quote, website_sale
-
qsm-odoo authored
media queries that target a specific screen size handled by bootstrap have now a more convenient way to be defined: ``` @media (min-width: $screen-sm-min) { ... } -> @include media-breakpoint-up(sm) { ... } ``` ``` @media (max-width: $screen-sm-max) { ... } -> @include media-breakpoint-down(sm) { ... } ``` ``` @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... } -> @include media-breakpoint-only(sm) { ... } ``` ``` @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... } -> @include media-breakpoint-between(sm, md) { ... } ``` Also, bootstrap has changed the values for its default screen sizes: ------------------ | BS3 | BS4 | ------------------ 0 | XS | XS | -> Portrait Mobile 576 | / | SM | -> Landscape Mobile 768 | SM | MD | -> Portrait Tablet 992 | MD | LG | -> Landscape Tablet / Small Desktop 1200 | LG | XL | -> Desktop ------------------ While it is possible to configure BS variables to behave as BS3, we took the decision to keep the BS4 variables untouched. BS4 system seems indeed better and having the purest bootstrap possible is better for Odoo to be used as a framework.
-
qsm-odoo authored
-
qsm-odoo authored
-
qsm-odoo authored
Patches were introduced by Odoo in the lib and have been removed while updating it to "tempus dominus". This commit restores them. See: - https://github.com/odoo/odoo/commit/3741603495532e218b66f3cfa0272e4536f1cf2c - https://github.com/odoo/odoo/commit/ab42507d460125c5ee81bb6b4b859146494339ac
-