pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] *: BS4, adapt media queries

Browse Source 
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.
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent 4a0a41d9b9
commit 0ca6d39777
45 changed files with 136 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/account/static/src/scss/account_reconciliation.scss
+2 -2
View File
@@ -33,9 +33,9 @@
width: 100%;
}
}
h1, .progress {
@media screen and (min-width: $screen-xs) {
@media screen and (min-width: 480px) { // FIXME
width: 48%;
}
}
addons/base_import/static/src/scss/base_import.scss
Vendored
+1 -1
View File
@@ -6,7 +6,7 @@
right: 0;
bottom: 0;
left: 0;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
position: static;
}
addons/hr_attendance/static/src/scss/hr_attendance.scss
+8 -8
View File
@@ -28,7 +28,7 @@
font: normal 1.2em $font-family-monospace;
color: white;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
@include o-position-absolute(20px, 20px);
width: auto;
padding: 3px 10px 3px 10px;
@@ -44,7 +44,7 @@
align-items: center;
@include o-position-absolute(0, 0, 0, 0);
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
justify-content: center;
}
}
@@ -55,13 +55,13 @@
position: relative;
background-color: fade-out(white, 0.1);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
overflow: hidden;
padding: 0 2em 2em;
flex: 1 0 auto;
}
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
padding: 2em 4em;
width: auto;
max-width: 550px;
@@ -72,11 +72,11 @@
}
.o_hr_attendance_kiosk_welcome_row {
@media (min-width: $screen-sm-min){
@include media-breakpoint-up(md) {
display: flex;
align-items: center;
}
@media (max-width: $screen-sm-max){
@include media-breakpoint-down(md) {
> div {
margin-bottom: 20px;
}
@@ -138,12 +138,12 @@
@include square(50px);
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin: 1em -2em 0;
background: transparent;
}
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
margin: 0;
height: 90px;
border-radius: .2em .2em 0 0;
addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+4 -4
View File
@@ -1,5 +1,5 @@
// MOBILE LAYOUT CUSTOMIZATIONS
@media screen and (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
#o_employee_right {
.o_org_chart_title {
font-size: 20px;
@@ -10,7 +10,7 @@
}
// SMALL DESKTOP LAYOUT
@media screen and (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
#o_employee_container {
display: flex;
width: 100%;
@@ -31,14 +31,14 @@
}
// MEDIUM DESKTOP LAYOUT
@media screen and (min-width: $screen-md-min){
@include media-breakpoint-up(lg) {
#o_employee_right {
flex: 0 1 33%;
}
}
// LARGE DESKTOP LAYOUT
@media screen and (min-width: $screen-lg-min){
@include media-breakpoint-up(xl) {
#o_employee_right {
flex: 0 1 30%;
}
addons/mail/static/src/scss/abstract_thread_window.scss
+3 -3
View File
@@ -14,7 +14,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
z-index: $o-mail-thread-window-zindex;
box-shadow: -5px -5px 10px rgba(black, 0.18);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
width: 100%;
height: 100%!important;
box-shadow: none;
@@ -37,7 +37,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
background-color: $o-brand-primary;
padding: 8px;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
height: $o-mail-chat-header-height;
padding-top: 12px;
border-radius: 0px;
@@ -101,7 +101,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
cursor: pointer;
box-shadow: none;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
display: none;
}
addons/mail/static/src/scss/composer.scss
+7 -7
View File
@@ -67,7 +67,7 @@
.o_composer_button_full_composer {
@include o-position-absolute(auto, 0);
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_composer_button_send {
color: $o-brand-optional;
}
@@ -220,7 +220,7 @@
.o_chatter_composer_tools {
flex: 0 0 auto;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_composer_button_send {
display: inline-block;
}
@@ -264,10 +264,10 @@ $o-mail-attachment-margin: 5px;
width: 100%;
padding: $o-mail-attachment-margin;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
width: 50%;
}
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
width: 25%;
}
@@ -358,13 +358,13 @@ $o-mail-attachment-margin: 5px;
> .o_attachment {
width: 50%;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
width: percentage(1/3);
}
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
width: percentage(1/4);
}
@media (min-width: $screen-lg-min) {
@include media-breakpoint-up(xl) {
width: percentage(1/6);
}
addons/mail/static/src/scss/discuss.scss
+5 -5
View File
@@ -43,7 +43,7 @@
overflow: auto;
padding: $o-horizontal-padding 0;
@media (min-width: $screen-lg-min) {
@include media-breakpoint-up(xl) {
width: $o-mail-chat-sidebar-width + 50px;
}
@@ -116,11 +116,11 @@
height: 100%;
margin-left: $o-mail-chat-sidebar-width;
position: relative;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
overflow: auto;
}
@media (min-width: $screen-lg-min) {
@include media-breakpoint-up(xl) {
margin-left: $o-mail-chat-sidebar-width + 50px;
}
@@ -260,7 +260,7 @@
// ------------------------------------------------------------------
// Mobile
// ------------------------------------------------------------------
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_mail_discuss {
display: flex;
flex-flow: column nowrap;
@@ -398,7 +398,7 @@
}
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
border: none;
addons/mail/static/src/scss/followers.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.o_followers {
float: right;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
display: none !important; // Hide the followers in mobile
}
addons/mail/static/src/scss/systray.scss
+2 -2
View File
@@ -65,7 +65,7 @@
min-height: 50px;
overflow-y: auto;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
.o_mail_preview {
min-height: 50px;
padding: 5px;
@@ -105,7 +105,7 @@
// Mobile rules
// Goal: mock the design of Discuss in mobile
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_mail_systray_item {
.o_notification_counter {
top: 10%;
addons/mail/static/src/scss/thread.scss
+2 -2
View File
@@ -6,7 +6,7 @@
.o_thread_date_separator {
margin-top: 15px;
margin-bottom: 30px;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin-top: 0px;
margin-bottom: 15px;
}
@@ -54,7 +54,7 @@
text-align: center;
font-size: smaller;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin-top: 4px;
font-size: x-small;
}
addons/mail/static/src/scss/thread_window.scss
+2 -2
View File
@@ -33,7 +33,7 @@
padding: 10px;
font-size: 13px;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
width: 70%;
> textarea {
padding: 15px 10px;
@@ -44,7 +44,7 @@
@include o-position-absolute($right: 0px, $top: 0px);
button {
padding: 10px;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
padding: 13px;
}
&.btn-icon {
addons/portal/static/src/scss/bootstrap.extend.scss
Vendored
+5 -5
View File
@@ -11,7 +11,7 @@
text-align: justify;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
text-align: inherit;
}
@@ -28,7 +28,7 @@
text-align: justify;
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include media-breakpoint-only(md) {
.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
text-align: inherit;
}
@@ -45,7 +45,7 @@
text-align: justify;
}
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include media-breakpoint-only(lg) {
.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
text-align: inherit;
}
@@ -62,7 +62,7 @@
text-align: justify;
}
}
@media (min-width: $screen-lg-min) {
@include media-breakpoint-up(xl) {
.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
text-align: inherit;
}
@@ -78,4 +78,4 @@
.text-justify-lg {
text-align: justify;
}
}
}
addons/portal/static/src/scss/portal.scss
+5 -5
View File
@@ -40,7 +40,7 @@ header {
&.divider {
@include o-w-fill-navbar;
border-right: 1px solid $navbar-default-link-disabled-color;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
display: none;
}
}
@@ -50,7 +50,7 @@ header {
}
}
.nav.navbar-nav.pull-right {
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
float: none!important;
}
}
@@ -283,7 +283,7 @@ img.o_we_custom_image {
.navbar-brand {
margin: 0;
@media (min-width: $grid-float-breakpoint) {
@include media-breakpoint-up(md) {
padding: $navbar-padding-vertical $navbar-padding-horizontal 0 0;
}
}
@@ -320,7 +320,7 @@ img.o_we_custom_image {
}
}
@media (max-width: $grid-float-breakpoint) {
@include media-breakpoint-down(sm) {
.navbar-collapse {
z-index: 0;
box-shadow: inset 0 0 0 1px $btn-default-border;
@@ -335,7 +335,7 @@ img.o_we_custom_image {
}
}
@media (min-width: $grid-float-breakpoint) {
@include media-breakpoint-up(md) {
> .container-fluid {
padding: 0;
addons/stock/static/src/scss/stock_traceability_report.scss
+1 -1
View File
@@ -20,7 +20,7 @@
}
}
.o_stock_reports_page {
@media (max-width: $screen-md-min) {
@include media-breakpoint-down(md) {
overflow-x:scroll;
}
background-color: $o-view-background-color;
addons/theme_default/static/src/scss/option_layout_boxed.scss
+1 -1
View File
@@ -1,5 +1,5 @@
#wrapwrap {
@media (min-width: $screen-sm-min){
@include media-breakpoint-up(md) {
width: 85%;
margin: 0 auto;
}
addons/web/static/src/scss/base_settings.scss
+7 -7
View File
@@ -2,7 +2,7 @@
@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
padding: $padding-base $o-horizontal-padding;
@media (min-width: $screen-lg-min) {
@include media-breakpoint-up(xl) {
padding-left: $o-horizontal-padding*2;;
}
}
@@ -18,7 +18,7 @@
.o_base_settings {
height: 100%;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
flex-flow: column nowrap;
}
@@ -31,7 +31,7 @@
.title, .o_setting_search {
flex: 1 0 auto;
width: $screen-xs-min*0.5;
width: map-get($o-extra-grid-breakpoints, vsm) / 2;
}
.o_setting_search {
@@ -75,7 +75,7 @@
overflow: auto;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
flex-flow: column nowrap;
}
@@ -87,7 +87,7 @@
overflow: auto;
padding-top: $o-horizontal-padding*0.5;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
flex: 0 0 $o-base-settings-mobile-tabs-height;
display: inline-flex;
position: relative;
@@ -119,7 +119,7 @@
}
// Mobile Tabs
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
display: block;
@include o-position-absolute($left:100%);
@include size(auto, $o-base-settings-mobile-tabs-height);
@@ -190,7 +190,7 @@
}
.o_settings_container {
max-width: $screen-md-min; // Provide a maximum container size to ensure readability
max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
@include o-base-settings-horizontal-padding(0);
}
}
addons/web/static/src/scss/control_panel.scss
+1 -1
View File
@@ -93,7 +93,7 @@
> .o_cp_switch_buttons > .btn:first-child {
margin-left: $o-horizontal-padding;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin-left: $o-horizontal-padding - 6;
}
}
addons/web/static/src/scss/dropdown.scss
+1 -1
View File
@@ -66,7 +66,7 @@
@extend %dropdown-li-a-padding;
color: $o-main-text-color;
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
color: white;
text-decoration: underline;
}
addons/web/static/src/scss/fields.scss
+2 -2
View File
@@ -253,7 +253,7 @@
}
// Radio buttons
&.o_field_radio {
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
display: inline-block;
}
.o_radio_input {
@@ -365,7 +365,7 @@
cursor: pointer;
}
}
@media (max-width: $screen-xs-min) {
@include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
.o_form_image_controls{
position: initial;
opacity: 1;
addons/web/static/src/scss/form_view.scss
+4 -4
View File
@@ -16,7 +16,7 @@
}
.oe_inline {
width: auto!important;
@media (min-width: $screen-xs-min) {
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
&.o_inner_group {
width: 1px!important;
}
@@ -31,7 +31,7 @@
float: right!important;
}
@media (min-width: $screen-xs-min) {
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
.o_row {
&, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
display: flex;
@@ -103,7 +103,7 @@
max-width: $container-sm - (2 * $o-horizontal-padding);
}
@media (min-width: $screen-xs-min) {
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
.o_row {
> .o_field_widget, > div {
flex: 1 1 auto;
@@ -425,7 +425,7 @@
// Text field with oe_inline class
.o_field_text.oe_inline {
width: 100%!important;
@media (min-width: $screen-xs-min) {
@include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
width: 45%!important;
}
}
addons/web/static/src/scss/kanban_dashboard.scss
+1 -1
View File
@@ -10,7 +10,7 @@
justify-content: space-between;
padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin-bottom: 10px;
}
addons/web/static/src/scss/kanban_view.scss
+6 -6
View File
@@ -5,7 +5,7 @@
align-content: stretch;
overflow-x: visible;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
padding: 0px!important;
overflow-x: auto;
}
@@ -15,7 +15,7 @@
border: 1px solid $gray-lighter-dark;
background-color: white;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
}
&:focus, &:focus-within {
@@ -142,7 +142,7 @@
.o_dropdown_kanban {
@include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
visibility: hidden;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
visibility: visible;
}
@@ -207,7 +207,7 @@
> button, > a {
@include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
right: $o-kanban-inside-hgutter-mobile;
}
}
@@ -258,7 +258,7 @@
+ div {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
}
}
@@ -484,7 +484,7 @@
width: $o-kanban-default-record-width;
margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin: 0 0 -1px 0;
flex: 1 0 100%;
}
addons/web/static/src/scss/kanban_view_mobile.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_kanban_view.o_kanban_grouped {
display: block;
position: relative;
addons/web/static/src/scss/modal.scss
+1 -1
View File
@@ -31,7 +31,7 @@
}
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
.modal-dialog {
height: 100%;
padding: 30px 0;
addons/web/static/src/scss/navbar.scss
+4 -4
View File
@@ -38,7 +38,7 @@
font-weight: 500;
line-height: $o-navbar-height;
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
float: none;
margin: 0;
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
@@ -151,7 +151,7 @@
}
}
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
transition: height 200ms linear 0s;
position: relative;
@@ -211,7 +211,7 @@
}
}
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
body.o_mobile_menu_opened {
overflow: hidden;
height: 100%;
@@ -224,7 +224,7 @@
}
}
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
.o_switch_company_menu > .dropdown-menu {
padding-top: 0px;
li.bg-info {
addons/web/static/src/scss/primary_variables.scss
+15 -2
View File
@@ -36,8 +36,21 @@ $o-tooltip-text-color: #777777;
$o-tooltip-title-text-color: #4c4c4c;
// Layout
$screen-xs-min: 475px;
$screen-xl-min: 1534px;
//
// Extension of BS4. This is not redefining the BS4 variable directly as we only
// need the extra ones for media queries (not creating new breakpoint classes).
// Note: default BS4 values are hardcoded here while it should be possible to
// merge with the default BS variable (but we would have to take care of
// ordering & cie).
$o-extra-grid-breakpoints: (
xs: 0,
vsm: 475px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1534px,
);
$o-form-group-cols: 12;
$o-form-spacing-unit: 5px;
addons/web/static/src/scss/rainbow.scss
+3 -3
View File
@@ -10,7 +10,7 @@
z-index: $zindex-modal;
padding: 50px;
margin: -5% auto 0 (-$reward-size / 2);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin: -5% auto 0 (-$reward-size-mobile / 2);
}
background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
@@ -20,7 +20,7 @@
animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
@include o-position-absolute(20%, auto, auto, 50%);
@include size($reward-size, $reward-size);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
@include size($reward-size-mobile, $reward-size-mobile);
}
@@ -75,7 +75,7 @@
.o_reward_stars {
display: block;
@include size($reward-size * 0.75, $reward-size / 2);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
@include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
}
@include o-position-absolute(18%, 7%);
addons/web/static/src/scss/secondary_variables.scss
-3
View File
@@ -15,9 +15,6 @@ $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%);
$o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
#EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
$screen-xxs-max: ($screen-xs-min - 1);
$screen-lg-max: ($screen-xl-min - 1);
$o-sheet-cancel-hpadding: $o-horizontal-padding;
$o-sheet-cancel-bpadding: $o-horizontal-padding;
addons/web/static/src/scss/web_calendar.scss
+2 -2
View File
@@ -199,12 +199,12 @@
}
// Mobile rules
@media only screen and (max-width: 768px) {
@include media-breakpoint-down(sm) {
.o_calendar_container {
padding: 0;
}
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_control_panel {
.o_calendar_button_today {
float: right;
addons/web_editor/static/src/scss/web_editor.common.scss
+2 -2
View File
@@ -32,7 +32,7 @@ html, body {
min-width: 20px;
}
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.table-responsive > table.table {
table-layout: auto;
}
@@ -121,7 +121,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
margin-left: 0;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
transform: none !important;
}
addons/web_settings_dashboard/static/src/scss/dashboard.scss
+2 -2
View File
@@ -18,7 +18,7 @@
.o_web_settings_dashboard_col {
padding: 10px 8px;
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
padding: 5px 8px;
}
@@ -46,7 +46,7 @@
font-size: 1.5em;
}
}
@media (max-width: 1200px) {
@include media-breakpoint-down(lg) {
> li {
width: 100%;
margin-bottom: 5px;
addons/website/static/src/scss/website.backend.scss
+3 -3
View File
@@ -129,11 +129,11 @@
flex-flow: row wrap;
justify-content: flex-start;
> .o_inner_box {
@media (max-width: $screen-sm-min) {
@include media-breakpoint-down(sm) {
flex: 1 1 200px;
display: block !important;
}
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
flex: 0 0 16.6%;
}
}
@@ -209,7 +209,7 @@
.o_properties_selection {
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
display: flex;
}
addons/website/static/src/scss/website.scss
+2 -2
View File
@@ -493,7 +493,7 @@ div.carousel {
// Company Team
.s_company_team {
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
img {
max-width: 50%;
}
@@ -547,7 +547,7 @@ div.carousel {
.js_language_selector {
display: inline-block;
}
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
.row {
display: flex;
> div {
addons/website/static/src/scss/website.ui.scss
+3 -3
View File
@@ -58,7 +58,7 @@ body.o_connected_user {
font-size: 20px;
}
}
@media only screen and (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
#oe_applications {
position: inherit;
z-index: 1002;
@@ -233,7 +233,7 @@ body .modal {
text-align: right;
background-color: $o-we-color-paper;
@media screen and (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
width: 38%;
}
}
@@ -243,7 +243,7 @@ body .modal {
visibility: visible;
padding-left: 15px;
@media screen and (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
padding-left: 50px;
}
}
addons/website_blog/static/src/scss/website_blog.scss
+1 -1
View File
@@ -92,7 +92,7 @@
}
/* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.o_blog_cover_container {
> .blog_title {
> h1 {
addons/website_form/static/src/scss/website_form.scss
+2 -2
View File
@@ -9,12 +9,12 @@
flex-basis: 33%;
// col-sm-6
@media (max-width: $screen-sm-max) {
@include media-breakpoint-down(md) {
flex-basis: 50%;
}
// col-xs-12
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
flex-basis: 100%;
}
}
addons/website_sale/static/src/scss/website_sale.scss
+4 -4
View File
@@ -87,7 +87,7 @@
width: 100px;
}
@media (max-width: 767px) {
@include media-breakpoint-down(sm) {
.td-img,
.td-price-total {
display: none;
@@ -302,7 +302,7 @@
max-height: 40px;
}
}
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
#products_grid {
&.col-md-12 {
.oe-height-1 {
@@ -353,7 +353,7 @@
}
}
}
@media (min-width: 1200px) {
@include media-breakpoint-up(xl) {
#products_grid {
&.col-md-12 {
.oe-height-1 {
@@ -404,7 +404,7 @@
}
}
}
@media (max-width: 768px) {
@include media-breakpoint-down(sm) {
#products_grid {
table,
tbody,
addons/website_sale/static/src/scss/website_sale_backend.scss
+4 -4
View File
@@ -8,22 +8,22 @@
padding: $o-mail-attachment-margin;
flex: 0 1 50%;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
flex: 0 0 percentage(1/3);
}
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
flex: 0 0 percentage(1/5);
}
@media (min-width: $screen-lg-min){
@include media-breakpoint-up(xl) {
flex: 0 0 percentage(1/6);
}
.o_image_box {
padding-top: 50%;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
padding-top: 75%;
}
}
addons/website_sale/static/src/scss/website_sale_dashboard.scss
+2 -2
View File
@@ -20,7 +20,7 @@
justify-content: center;
}
.o_link_enable {
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
border-right: 1px solid #ccc;
}
height: initial;
@@ -41,7 +41,7 @@
}
}
.o_link_disable {
@media (min-width: $screen-md-min) {
@include media-breakpoint-up(lg) {
border-right: 1px solid #ccc;
}
height: initial;
addons/website_sale/static/src/scss/website_sale_frontend.scss
+6 -6
View File
@@ -25,14 +25,14 @@ $o-wsale-wizard-label-completed: $state-success-text;
margin-top: $grid-gutter-width*0.5;
padding: 0 $grid-gutter-width*0.5;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
padding: 0;
}
.progress-wizard-step {
position: relative;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
float: left;
width: percentage(1/3);
@@ -41,7 +41,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
width: percentage(1/4);
}
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
&.disabled, &.complete {
display:none;
}
@@ -55,7 +55,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
border-radius: 50%;
box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
@include o-position-absolute($left: 50%);
margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5);
}
@@ -67,11 +67,11 @@ $o-wsale-wizard-label-completed: $state-success-text;
font-size: $font-size-base;
display: inline-block;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
display: block;
margin: (10px + $tmp-dot-radius) 0 20px 0;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
margin-left: -15px;
font-size:24px;
}
addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
+2 -2
View File
@@ -1,7 +1,7 @@
@media(max-width:767px){
@include media-breakpoint-down(sm) {
.o_delivery_compute {
max-width: 130px;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
addons/website_sale_options/static/src/scss/website_sale.scss
+1 -1
View File
@@ -12,7 +12,7 @@ div#modal_optional_products table tr td {
border: 0;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
div#modal_optional_products .td-qty {
display: none;
}
addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss
+1 -1
View File
@@ -9,7 +9,7 @@
}
// XS size
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
.oe_website_sale {
.td-wish-btn {
width: 100px;
addons/website_theme_install/static/src/scss/website_theme_install.scss
+1 -1
View File
@@ -8,7 +8,7 @@
justify-content: space-between;
margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width);
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
padding-left: $o-horizontal-padding - $o-kanban-record-margin;
padding-right: $o-horizontal-padding;
}
odoo/addons/base/static/src/scss/onboarding.scss
+3 -3
View File
@@ -54,7 +54,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
flex-flow: row nowrap;
justify-content: initial;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
flex-flow: column nowrap;
.o_onboarding_folded_title {
@@ -71,7 +71,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
position: relative;
opacity: 0.6;
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(sm) {
text-align: left;
margin-bottom: 16px;
align-items: baseline;
@@ -229,7 +229,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
.o_onboarding_folded_title {
padding: 6px 10px 6px 0;
@media (min-width: $screen-sm-min) {
@include media-breakpoint-up(md) {
border-right: 1px solid $gray-lighter-dark;
}
}