[FIX] web_editor: move bootstrap default css value from editor.css to inline.css to don't overwrite backend css values and have css style in html field (iframe)

3 files changed, 201 insertions, 329 deletions

diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css
index 73d79d856d2..ab39d4e1e37 100644
--- a/addons/web_editor/static/src/css/editor.css
+++ b/addons/web_editor/static/src/css/editor.css
@@ -792,202 +792,6 @@
 }
 
 /* }}} */
-/* ---- Default values ----  {{{ */
-.tooltip {
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  visibility: visible;
-  font-size: 12px;
-  line-height: 1.4;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-.tooltip.in {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-.tooltip.bottom {
-  margin-top: 3px;
-  padding: 5px 0;
-}
-.tooltip.bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.tooltip-inner {
-  max-width: 200px;
-  padding: 3px 8px;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #000;
-  border-radius: 4px;
-}
-
-.fade:not(.modal-backdrop) {
-  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-}
-
-.fade.in:not(.modal-backdrop) {
-  opacity: 1;
-}
-
-.pull-right {
-  float: right;
-}
-
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.pull-left {
-  float: left;
-}
-
-.img-responsive {
-  display: block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-
-.img-rounded {
-  border-radius: 6px;
-}
-
-.img-thumbnail {
-  padding: 4px;
-  line-height: 1.42857;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-
-.img-circle {
-  border-radius: 50%;
-}
-
-.img-responsive {
-  text-align: center;
-}
-
-img.shadow {
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-
-.fa-1x {
-  font-size: 1em;
-}
-
-.fa-2x {
-  font-size: 2em;
-}
-
-.fa-3x {
-  font-size: 3em;
-}
-
-.fa-4x {
-  font-size: 4em;
-}
-
-.fa-5x {
-  font-size: 5em;
-}
-
-.fa-6x {
-  font-size: 6em;
-}
-
-.fa-7x {
-  font-size: 7em;
-}
-
-.fa-8x {
-  font-size: 8em;
-}
-
-.fa-9x {
-  font-size: 9em;
-}
-
-.fa-10x {
-  font-size: 10em;
-}
-
-.text-primary {
-  color: #428bca;
-}
-
-.text-success {
-  color: #3c763d;
-}
-
-.text-info {
-  color: #31708f;
-}
-
-.text-warning {
-  color: #8a6d3b;
-}
-
-.text-danger {
-  color: #a94442;
-}
-
-.bg-primary {
-  color: #fff;
-  background-color: #428bca;
-}
-
-.bg-success {
-  background-color: #dff0d8;
-}
-
-.bg-info {
-  background-color: #d9edf7;
-}
-
-.bg-warning {
-  background-color: #fcf8e3;
-}
-
-.bg-danger {
-  background-color: #f2dede;
-}
-
-.hidden {
-  display: none;
-}
-
-/* }}} */
 /* ---- COLOR-PICKER ----  {{{ */
 .colorpicker {
   margin: 0 auto;
@@ -1086,10 +890,6 @@ html[data-translatable] .oe_field_translate {
   cursor: pointer;
 }
 
-.img-responsive {
-  text-align: center;
-}
-
 .css_editable_display {
   display: block !important;
 }
diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass
index 420ec01fe1e..bf929e89002 100644
--- a/addons/web_editor/static/src/css/editor.sass
+++ b/addons/web_editor/static/src/css/editor.sass
@@ -683,132 +683,6 @@ $attachment-border-color: #848490
 
 /* }}} */
 
-/* ---- Default values ----  {{{ */
-
-.tooltip
-    position: absolute
-    z-index: 1070
-    display: block
-    visibility: visible
-    font-size: 12px
-    line-height: 1.4
-    opacity: 0
-    filter: alpha(opacity=0)
-    &.in
-        opacity: .9
-        filter: alpha(opacity=90)
-    &.bottom
-        margin-top: 3px
-        padding: 5px 0
-        .tooltip-arrow
-            top: 0
-            left: 50%
-            margin-left: -5px
-            border-width: 0 5px 5px
-            border-bottom-color: #000
-.tooltip-arrow
-    position: absolute
-    width: 0
-    height: 0
-    border-color: transparent
-    border-style: solid
-.tooltip-inner
-    max-width: 200px
-    padding: 3px 8px
-    color: #fff
-    text-align: center
-    text-decoration: none
-    background-color: #000
-    border-radius: 4px
-.fade:not(.modal-backdrop)
-    opacity: 0
-    -webkit-transition: opacity .15s linear
-    -o-transition: opacity .15s linear
-    transition: opacity .15s linear
-.fade.in:not(.modal-backdrop)
-    opacity: 1
-.pull-right
-    float: right
-.center-block
-    display: block
-    margin-left: auto
-    margin-right: auto
-.pull-left 
-    float: left
-.img-responsive
-    display: block
-    width: 100% \9
-    max-width: 100%
-    height: auto
-.img-rounded
-    border-radius: 6px
-.img-thumbnail
-    padding: 4px
-    line-height: 1.42857143
-    background-color: #fff
-    border: 1px solid #ddd
-    border-radius: 4px
-    -webkit-transition: all .2s ease-in-out
-    -o-transition: all .2s ease-in-out
-    transition: all .2s ease-in-out
-    display: inline-block
-    width: 100% \9
-    max-width: 100%
-    height: auto
-.img-circle
-    border-radius: 50%
-.img-responsive
-    text-align: center
-img.shadow
-    -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
-    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
-    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2)
-.fa-1x
-    font-size: 1em
-.fa-2x
-    font-size: 2em
-.fa-3x
-    font-size: 3em
-.fa-4x
-    font-size: 4em
-.fa-5x
-    font-size: 5em
-.fa-6x
-    font-size: 6em
-.fa-7x
-    font-size: 7em
-.fa-8x
-    font-size: 8em
-.fa-9x
-    font-size: 9em
-.fa-10x
-    font-size: 10em
-.text-primary
-    color: #428bca
-.text-success
-    color: #3c763d
-.text-info
-    color: #31708f
-.text-warning
-    color: #8a6d3b
-.text-danger
-    color: #a94442
-.bg-primary
-    color: #fff
-    background-color: #428bca
-.bg-success
-    background-color: #dff0d8
-.bg-info
-    background-color: #d9edf7
-.bg-warning
-    background-color: #fcf8e3
-.bg-danger
-    background-color: #f2dede
-.hidden
-    display: none
-
-/* }}} */
-
 /* ---- COLOR-PICKER ----  {{{ */
 
 .colorpicker
@@ -897,9 +771,6 @@ html[data-translatable] .oe_field_translate
 .o_editable .fa
     cursor: pointer
 
-.img-responsive
-    text-align: center
-
 .css_editable_display
     display: block !important
 
diff --git a/addons/web_editor/static/src/css/inline.css b/addons/web_editor/static/src/css/inline.css
index 61e995fa3fa..cba6343becb 100644
--- a/addons/web_editor/static/src/css/inline.css
+++ b/addons/web_editor/static/src/css/inline.css
@@ -62,3 +62,204 @@ body {
 .note-color-palette .colorpicker {
     display: none;
 }
+
+/* ---- Default bootstrap values ----  {{{ */
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.tooltip.in {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+.tooltip.bottom {
+  margin-top: 3px;
+  padding: 5px 0;
+}
+.tooltip.bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #000;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip-inner {
+  max-width: 200px;
+  padding: 3px 8px;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #000;
+  border-radius: 4px;
+}
+
+.fade:not(.modal-backdrop) {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.fade.in:not(.modal-backdrop) {
+  opacity: 1;
+}
+
+.pull-right {
+  float: right;
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pull-left {
+  float: left;
+}
+
+.img-responsive {
+  display: block;
+  width: 100% \9;
+  max-width: 100%;
+  height: auto;
+}
+
+.img-rounded {
+  border-radius: 6px;
+}
+
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  width: 100% \9;
+  max-width: 100%;
+  height: auto;
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-responsive {
+  text-align: center;
+}
+
+img.shadow {
+  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+
+.fa-1x {
+  font-size: 1em;
+}
+
+.fa-2x {
+  font-size: 2em;
+}
+
+.fa-3x {
+  font-size: 3em;
+}
+
+.fa-4x {
+  font-size: 4em;
+}
+
+.fa-5x {
+  font-size: 5em;
+}
+
+.fa-6x {
+  font-size: 6em;
+}
+
+.fa-7x {
+  font-size: 7em;
+}
+
+.fa-8x {
+  font-size: 8em;
+}
+
+.fa-9x {
+  font-size: 9em;
+}
+
+.fa-10x {
+  font-size: 10em;
+}
+
+.text-primary {
+  color: #428bca;
+}
+
+.text-success {
+  color: #3c763d;
+}
+
+.text-info {
+  color: #31708f;
+}
+
+.text-warning {
+  color: #8a6d3b;
+}
+
+.text-danger {
+  color: #a94442;
+}
+
+.bg-primary {
+  color: #fff;
+  background-color: #428bca;
+}
+
+.bg-success {
+  background-color: #dff0d8;
+}
+
+.bg-info {
+  background-color: #d9edf7;
+}
+
+.bg-warning {
+  background-color: #fcf8e3;
+}
+
+.bg-danger {
+  background-color: #f2dede;
+}
+
+.hidden {
+  display: none;
+}
+
+.img-responsive {
+  text-align: center;
+}
+
+/* }}} */
\ No newline at end of file