diff --git a/addons/website/static/src/img/blocks/block_separator.png b/addons/website/static/src/img/blocks/block_separator.png deleted file mode 100644 index 468d75656e0..00000000000 Binary files a/addons/website/static/src/img/blocks/block_separator.png and /dev/null differ diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less index de57aa7da97..f9fa1b6cbf2 100644 --- a/addons/website/static/src/less/website.snippets.less +++ b/addons/website/static/src/less/website.snippets.less @@ -1,407 +1,396 @@ // General rules -// ============================= - .carousel, .parallax, .blockquote { - overflow: hidden; + overflow: hidden; } @media (max-width: 400px) { - section, .parallax, .row, .hr, .blockquote { - height: auto !important; - } + section, .parallax, .row, .hr, .blockquote { + height: auto !important; + } } - // Table Snippet -// ============================= - .table_desc { - margin: 0 0 20px 0; - width: 100%; - word-break: break-all; - border: 1px solid #dddddd; + margin: 0 0 20px 0; + width: 100%; + word-break: break-all; + border: 1px solid #dddddd; } .table_heading { - background-color: #f5f5f5; - border: 1px solid #dddddd; - color: #666666; - font-size: 14px; - padding: 4px; + background-color: #f5f5f5; + border: 1px solid #dddddd; + color: #666666; + font-size: 14px; + padding: 4px; } table.table_desc tr td { - text-align: left; - padding: 5px; - font-size: 13px; - &:first-child{ - width: 25%; - font-weight: bold; - border-bottom: 1px solid #c9c9c9; - border-right: 1px solid #c9c9c9; - border-left: none; - } - &:last-child{ - border-bottom: 1px solid #c9c9c9; - } + text-align: left; + padding: 5px; + font-size: 13px; + &:first-child { + width: 25%; + font-weight: bold; + border-bottom: 1px solid #c9c9c9; + border-right: 1px solid #c9c9c9; + border-left: none; + } + &:last-child { + border-bottom: 1px solid #c9c9c9; + } } -/* other snippet styles */ +// Other snippet styles .s_comparisons .panel .list-group-item:not(.active) { - color: #666; + color: #666; } .s_references .img-thumbnail { - border: none; + border: none; } // o_image_floating -// ============================= - .o_image_floating { - width: 40%; - margin: 4px; - div.o_container { - position: relative; - mark { - display: block; - position: absolute; - bottom: 0; - width: 100%; - background-color: rgba(86, 61, 124, 0.25); - a { - color: white; - } + width: 40%; + margin: 4px; + div.o_container { + position: relative; } - } -} -.o_image_floating.o_hide_link div.o_container mark { - display: none; -} -.o_image_floating.o_margin_s { - margin-bottom: 4px; -} -.o_image_floating.o_margin_s.pull-right { - margin-left: 8px; -} -.o_image_floating.o_margin_s.pull-left { - margin-right: 8px; -} -.o_image_floating.o_margin_m { - margin-bottom: 8px; -} -.o_image_floating.o_margin_m.pull-right { - margin-left: 12px; -} -.o_image_floating.o_margin_m.pull-left { - margin-right: 12px; -} -.o_image_floating.o_margin_l { - margin-bottom: 12px; -} -.o_image_floating.o_margin_l.pull-right { - margin-left: 16px; -} -.o_image_floating.o_margin_l.pull-left { - margin-right: 16px; -} -.o_image_floating.o_margin_xl { - margin-bottom: 24px; -} -.o_image_floating.o_margin_xl.pull-right { - margin-left: 32px; -} -.o_image_floating.o_margin_xl.pull-left { - margin-right: 32px; -} + &.o_margin_s { + margin-bottom: 4px; + } + &.o_margin_s.pull-right { + margin-left: 8px; + } + &.o_margin_s.pull-left { + margin-right: 8px; + } + &.o_margin_m { + margin-bottom: 8px; + } + &.o_margin_m.pull-right { + margin-left: 12px; + } + &.o_margin_m.pull-left { + margin-right: 12px; + } + &.o_margin_l { + margin-bottom: 12px; + } + &.o_margin_l.pull-right { + margin-left: 16px; + } + &.o_margin_l.pull-left { + margin-right: 16px; + } + &.o_margin_xl { + margin-bottom: 24px; + } + &.o_margin_xl.pull-right { + margin-left: 32px; + } + &.o_margin_xl.pull-left { + margin-right: 32px; + } +} // carousel -// ============================= - .carousel-inner { - height: 100%; - .item { height: 100%; - background-size: cover; - } - .carousel-control { - cursor: pointer; - span { - top: 50%; - position: absolute; - margin-top: -8px; + .item { + height: 100%; + background-size: cover; + } + .carousel-control { + cursor: pointer; + span { + top: 50%; + position: absolute; + margin-top: -8px; + } } - } } -.carousel .carousel-control.left { - left: -10px; - * { - position: absolute; - top: 50%; - z-index: 5; - right: 50%; - } -} -.carousel .carousel-control.right { - right: -10px; - * { - position: absolute; - top: 50%; - z-index: 5; - left: 50%; - } +.carousel .carousel-control { + &.left { + left: -10px; + * { + position: absolute; + top: 50%; + z-index: 5; + right: 50%; + } + } + &.right { + right: -10px; + * { + position: absolute; + top: 50%; + z-index: 5; + left: 50%; + } + } } .quotecarousel { - padding-bottom: 16px; + padding-bottom: 16px; } -div.carousel .container{ - > .carousel-caption { - position: absolute; - right: 50%; - left: 50%; - bottom: 20px; - > div { - position: absolute; - text-align: left; - padding: 20px; - background: rgba(0, 0, 0, 0.4); - bottom: 20px; +div.carousel .container { + > .carousel-caption { + .o-position-absolute(@right: 50%, @left: 50%); + bottom: 20px; + > div { + position: absolute; + text-align: left; + padding: 20px; + background: rgba(0, 0, 0, 0.4); + bottom: 20px; + } } - } - > .carousel-image { - top: 5%; - bottom: 5%; - position: absolute; - max-height: 90%; - margin: 0 auto; - } - .item.text_image .container > .carousel-caption { - left: 10%; - > div { - right: 50%; - margin-right: -20%; - max-width: 550px; + > .carousel-image { + .o-position-absolute(@top: 5%, @bottom: 5%); + max-height: 90%; + margin: 0 auto; } - } - .item.text_image .container > .carousel-image { - right: 10%; - left: 50%; - } - .item.image_text .container > .carousel-caption { - right: 10%; - > div { - left: 50%; - margin-left: -20%; - max-width: 550px; + .item.text_image .container { + > .carousel-caption { + left: 10%; + > div { + right: 50%; + margin-right: -20%; + max-width: 550px; + } + } + > .carousel-image { + right: 10%; + left: 50%; + } } - } - .item.image_text .container > .carousel-image { - right: 50%; - left: 10%; - } - .item.text_only .container > .carousel-caption { - left: 10%; - right: 10%; - top: 10%; - bottom: auto; - > div { - text-align: center; - background: transparent; - bottom: auto; - width: 100%; + .item.image_text .container { + > .carousel-caption { + right: 10%; + > div { + left: 50%; + margin-left: -20%; + max-width: 550px; + } + } + > .carousel-image { + right: 50%; + left: 10%; + } + } + .item.text_only .container { + > .carousel-caption { + left: 10%; + right: 10%; + top: 10%; + bottom: auto; + > div { + text-align: center; + background: transparent; + bottom: auto; + width: 100%; + } + } + > .carousel-image { + display: none !important; + } } - } - .item.text_only .container > .carousel-image { - display: none !important; - } } // Gallery -// ==================================== +.o_gallery { + &.o_grid, &.o_masonry { + .img { + width: 100%; + } + } + &.o_grid { + &.o_spc-none div.row { + margin: 0; + * { + padding: 0; + } + } + &.o_spc-small div.row { + margin: 5px 0; + * { + padding: 0 5px; + } + } + &.o_spc-medium div.row { + margin: 10px 0; + * { + padding: 0 10px; + } + } + &.o_spc-big div.row { + margin: 15px 0; + * { + padding: 0 15px; + } + } -.o_gallery.o_grid .img, -.o_gallery.o_masonry .img { - width: 100%; + &.size-auto .row { + height: auto; + } + &.size-small .row { + height: 100px; + } + &.size-medium .row { + height: 250px; + } + &.size-big .row { + height: 400px; + } + &.size-small, &.size-medium, &.size-big { + img { + height: 100%; + } + } + } + &.o_masonry { + &.o_spc-none div.col { + padding: 0; + > img { + margin: 0 !important; + } + } + &.o_spc-small div.col { + padding: 0 5px; + > img { + margin: 5px 0 !important; + } + } + &.o_spc-medium div.col { + padding: 0 10px; + > img { + margin: 10px 0 !important; + } + } + &.o_spc-big div.col { + padding: 0 15px; + > img { + margin: 15px 0 !important; + } + } + } + &.o_nomode { + &.o_spc-none .img { + padding: 0; + } + &.o_spc-small .img { + padding: 5px; + } + &.o_spc-medium .img { + padding: 10px; + } + &.o_spc-big .img { + padding: 15px; + } + } + &.o_slideshow { + .carousel ul.carousel-indicators li { + border: 1px solid #aaa; + } + > .container { + height: 100%; + } + } + .carousel-inner .item img { + max-width: none; + } } +.o_gallery, .modal-body { + &.o_slideshow { + .carousel { + height: 100%; -.o_gallery.o_grid.o_spc-none div.row { - margin: 0; - * { - padding: 0; - } -} -.o_gallery.o_grid.o_spc-small div.row { - margin: 5px 0; - * { - padding: 0 5px; - } -} -.o_gallery.o_grid.o_spc-medium div.row { - margin: 10px 0; - * { - padding: 0 10px; - } -} -.o_gallery.o_grid.o_spc-big div.row { - margin: 15px 0; - * { - padding: 0 15px; - } -} -.o_gallery.o_masonry.o_spc-none div.col { - padding: 0; - > img { - margin: 0 !important; - } -} -.o_gallery.o_masonry.o_spc-small div.col { - padding: 0 5px; - > img { - margin: 5px 0 !important; - } -} -.o_gallery.o_masonry.o_spc-medium div.col { - padding: 0 10px; - > img { - margin: 10px 0 !important; - } -} -.o_gallery.o_masonry.o_spc-big div.col { - padding: 0 15px; - > img { - margin: 15px 0 !important; - } -} -.o_gallery.o_grid.size-auto .row { - height: auto; -} -.o_gallery.o_grid.size-small .row { - height: 100px; -} -.o_gallery.o_grid.size-medium .row { - height: 250px; -} -.o_gallery.o_grid.size-big .row { - height: 400px; -} -.o_gallery.o_grid.size-small .img, -.o_gallery.o_grid.size-medium .img, -.o_gallery.o_grid.size-big .img { - height: 100%; -} + .item { + padding-bottom: 64px; + } -.o_gallery.o_nomode.o_spc-none .img { - padding: 0; -} -.o_gallery.o_nomode.o_spc-small .img { - padding: 5px; -} -.o_gallery.o_nomode.o_spc-medium .img { - padding: 10px; -} -.o_gallery.o_nomode.o_spc-big .img { - padding: 15px; -} + img { + max-height: 100%; + max-width: 100%; + margin: auto; + position: relative; + top: 50%; + .translate(0, -50%); + } -.o_gallery.o_slideshow .carousel ul.carousel-indicators li { - border: 1px solid #aaa; -} -.o_gallery .carousel-inner .item img { - max-width: none; -} -.o_gallery.o_slideshow > .container { - height: 100%; -} + ul.carousel-indicators { + display: block; + height: auto; + padding: 0; + border-width: 0; + position: absolute; + bottom: 0; -.o_gallery.o_slideshow .carousel, -.modal-body.o_slideshow .carousel { - height: 100%; -} -.o_gallery.o_slideshow .carousel .item, -.modal-body.o_slideshow .carousel .item { - padding-bottom: 64px; -} -.o_gallery.o_slideshow .carousel img, -.modal-body.o_slideshow .carousel img { - max-height: 100%; - max-width: 100%; - margin: auto; - position: relative; - top: 50%; - .translateY(-50%); -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators, -.modal-body.o_slideshow .carousel ul.carousel-indicators { - display: block; - height: auto; - padding: 0; - border-width: 0; - position: absolute; - bottom: 0; -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators > *, -.modal-body.o_slideshow .carousel ul.carousel-indicators > * { - list-style-image: none; - display: inline-block; - width: 40px; - height: 40px; - margin: 0 0px 5px 5px; - padding: 0; - border: 1px solid #aaa; - text-indent: initial; - background-size: cover; - background-color: #fff; - border-radius: 0; -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators > *:not(.active), -.modal-body.o_slideshow .carousel ul.carousel-indicators > *:not(.active) { - opacity: 0.8; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - filter: gray; - filter: url("data:image/svg+xml;utf8,#greyscale"); -} -.o_gallery.o_slideshow .carousel .carousel-control.left, -.o_gallery.o_slideshow .carousel .carousel-control.right, -.modal-body.o_slideshow .carousel .carousel-control.left, -.modal-body.o_slideshow .carousel .carousel-control.right { - background-image: none; - background-color: transparent; + > * { + list-style-image: none; + display: inline-block; + width: 40px; + height: 40px; + margin: 0 0px 5px 5px; + padding: 0; + border: 1px solid #aaa; + text-indent: initial; + background-size: cover; + background-color: #fff; + border-radius: 0; + + &:not(.active) { + opacity: 0.8; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + filter: gray; + filter: url("data:image/svg+xml;utf8,#greyscale"); + } + } + } + + .carousel-control { + &.right, &.left { + background-image: none; + background-color: transparent; + } + } + } + } } // Parallax Theme -// ========================== - -div.carousel{ - .carousel-indicators{ - li { border: 1px solid grey; } - .active { background-color: grey; } - } - span.carousel-img img, - div.carousel-content { - max-height: 95%; - padding: 10px; - } - div.carousel-content { - background-color: black; - color: white; - background: rgba(0, 0, 0, 0.3); - } +div.carousel { + .carousel-indicators { + li { border: 1px solid grey; } + .active { background-color: grey; } + } + span.carousel-img img, + div.carousel-content { + max-height: 95%; + padding: 10px; + } + div.carousel-content { + background-color: black; + color: white; + background: rgba(0, 0, 0, 0.3); + } } .parallax { - background-size: cover; - > div { - position: relative; - display: table; - width: 100%; - min-height: 200px; + background-size: cover; > div { - display: table-cell; - vertical-align: middle; - padding: 32px 0; + position: relative; + display: table; + width: 100%; + min-height: 200px; + > div { + display: table-cell; + vertical-align: middle; + padding: 32px 0; + } } - } } diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 6e49bc09601..62269ba2a6c 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -1,9 +1,7 @@ - - - + - -