diff --git a/CHANGELOG.md b/CHANGELOG.md index a5c03b8..c5d9118 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ ## [Unreleased] +## [1.4.0] - 2020-03-10 +### Added +- PageBuilder support (#235) + +### Changed +- Reorganise styles/vendor/magento-ui/_lib Imports (#226) +- LESS fade mixin for rgba (#225) + ## [1.3.0] - 2019-07-06 ### Added - email styles support (#84) diff --git a/Magento_PageBuilder/styles/_module.scss b/Magento_PageBuilder/styles/_module.scss new file mode 100755 index 0000000..2a38f37 --- /dev/null +++ b/Magento_PageBuilder/styles/_module.scss @@ -0,0 +1 @@ +@import 'modules/module'; diff --git a/Magento_PageBuilder/styles/modules/_icons.scss b/Magento_PageBuilder/styles/modules/_icons.scss new file mode 100755 index 0000000..7a8581e --- /dev/null +++ b/Magento_PageBuilder/styles/modules/_icons.scss @@ -0,0 +1,48 @@ +@font-face { + font-family: $icons-pagebuilder__font-name; + font-style: normal; + font-weight: normal; + src: url('${icons-pagebuilder__font-path}.eot'); + src: + url('${icons-pagebuilder__font-path}.eot?#iefix') format('embedded-opentype'), + url('${icons-pagebuilder__font-path}.woff') format('woff'), + url('${icons-pagebuilder__font-path}.ttf') format('truetype'); +} + +.pagebuilder-icon { + font-family: $icons-pagebuilder__font-name; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +[class^='pagebuilder-icon-']:before, +[class*=' pagebuilder-icon-']:before { + display: inline-block; + font-family: $icons-pagebuilder__font-name; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + text-decoration: inherit; + text-rendering: auto; + text-transform: none; + vertical-align: middle; +} + +.pagebuilder-icon-down:before { + content: $icon-pagebuilder-caret-down__content; +} + +.pagebuilder-icon-next:before { + content: $icon-pagebuilder-caret-next__content; +} + +.pagebuilder-icon-prev:before { + content: $icon-pagebuilder-caret-prev__content; +} + +.pagebuilder-icon-up:before { + content: $icon-pagebuilder-caret-up__content; +} diff --git a/Magento_PageBuilder/styles/modules/_layout.scss b/Magento_PageBuilder/styles/modules/_layout.scss new file mode 100755 index 0000000..4e4213e --- /dev/null +++ b/Magento_PageBuilder/styles/modules/_layout.scss @@ -0,0 +1,47 @@ +// +// Product -- Full Width +// _____________________________________________ + +.product-full-width-section { + padding: 0.5em 0; + + .block.review-add { + margin-top: 2.7rem; + } +} + +.page-layout-product-full-width { + .block.related { + margin-top: 2.7rem; + } +} + +.page-main-details .product-section-title { + border-bottom: 1px solid $color-gray-middle2; + margin-bottom: 15px; + padding-bottom: 12px; +} + +.additional-attributes-wrapper .additional-attributes { + border: none; + width: auto; + + > tbody > tr { + > th { + border: none; + padding: 5.5px 30px 10px 0; + } + > td { + border: none; + padding: 5.5px 5px 10px; + } + } +} + +// +// Page -- Full Width +// _____________________________________________ + +.cms-index-index.page-layout-cms-full-width .nav-sections { + margin-bottom: 0; +} diff --git a/Magento_PageBuilder/styles/modules/_module.scss b/Magento_PageBuilder/styles/modules/_module.scss new file mode 100755 index 0000000..d1bdd53 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/_module.scss @@ -0,0 +1,59 @@ +$icons-pagebuilder__font-name: 'pagebuilder-font'; +$icons-pagebuilder__font-path: '../Magento_PageBuilder/fonts/pagebuilder-icons/pagebuilder-icons'; + +$icon-pagebuilder-caret-up__content: '\f104'; +$icon-pagebuilder-caret-down__content: '\f101'; +$icon-pagebuilder-caret-next__content: '\f102'; +$icon-pagebuilder-caret-prev__content: '\f103'; + +@import 'icons'; +@import 'layout'; +@import 'slick/slick'; +@import 'content-type/import'; + +.cms-content-important { + background-color: $color-white-smoke; + color: $color-gray20; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 22px; + font-style: normal; + font-weight: 300; + line-height: 1.1; + margin: 0 0 35px -20px; + padding: 20px; +} + +.pagebuilder-full-width { + float: left; + width: 100%; +} + +.pagebuilder-content-type { + box-sizing: border-box; + margin-bottom: 20px; +} + +// +// Styles for legacy content types +// --------------------------------------------- + +.pagebuilder-accordion { + @include lib-data-accordion(); +} + +// +// Responsive Classes +// _____________________________________________ + +@include min-screen($screen__m) { + .pagebuilder-mobile-only { + display: none !important; // sass-lint:disable-line no-important + } +} + +@include max-screen($screen__m - 1) { + .pagebuilder-mobile-hidden { + display: none !important; // sass-lint:disable-line no-important + } +} + diff --git a/Magento_PageBuilder/styles/modules/content-type/_import.scss b/Magento_PageBuilder/styles/modules/content-type/_import.scss new file mode 100755 index 0000000..d628dce --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/_import.scss @@ -0,0 +1,21 @@ +// +// _import imports all content types less files +// _____________________________________________ + +@import 'banner/import'; +@import 'block/import'; +@import 'buttons/import'; +@import 'button-item/import'; +@import 'column/import'; +@import 'column-group/import'; +@import 'heading/import'; +@import 'html/import'; +@import 'image/import'; +@import 'map/import'; +@import 'products/import'; +@import 'row/import'; +@import 'slide/import'; +@import 'slider/import'; +@import 'tabs/import'; +@import 'text/import'; +@import 'video/import'; diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_collage-center.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-center.scss new file mode 100644 index 0000000..02c3a78 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-center.scss @@ -0,0 +1,12 @@ +// +// Collage center appearance styles +// _____________________________________________ + +[data-appearance='collage-centered'] { + .pagebuilder-banner-wrapper { + .pagebuilder-overlay { + margin-left: auto; + margin-right: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_collage-left.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-left.scss new file mode 100644 index 0000000..c78638c --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-left.scss @@ -0,0 +1,11 @@ +// +// Collage left appearance styles +// _____________________________________________ + +[data-appearance='collage-left'] { + .pagebuilder-banner-wrapper { + .pagebuilder-overlay { + margin-right: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_collage-right.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-right.scss new file mode 100644 index 0000000..5d765dd --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_collage-right.scss @@ -0,0 +1,11 @@ +// +// Collage right appearance styles +// _____________________________________________ + +[data-appearance='collage-right'] { + .pagebuilder-banner-wrapper { + .pagebuilder-overlay { + margin-left: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_default.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_default.scss new file mode 100644 index 0000000..cf623e9 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_default.scss @@ -0,0 +1,64 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='banner'] > [data-element='link'], +[data-content-type='banner'] > [data-element='empty_link'] { + color: inherit; + text-decoration: inherit; + + &:hover { + color: inherit; + text-decoration: inherit; + } +} + +.pagebuilder-banner-wrapper { + background-clip: padding-box; + border-radius: inherit; + overflow-wrap: break-word; + box-sizing: border-box; + word-wrap: break-word; + + .pagebuilder-overlay { + box-sizing: border-box; + padding: 30px; + transition: background-color 500ms ease; + + &.pagebuilder-poster-overlay { + align-items: center; + display: flex; + justify-content: center; + } + + &:not(.pagebuilder-poster-overlay) { + max-width: 540px; + } + } + + [data-element='content'] { + min-height: 50px; + } + + .pagebuilder-banner-button { + margin: 20px 0 0 0; + max-width: 100%; + text-align: inherit; + transition: opacity 500ms ease; + word-break: break-word; + } +} + +// +// Responsive Classes +// _____________________________________________ + +@include max-screen($screen__m - 1) { + .pagebuilder-banner-wrapper { + background-attachment: scroll !important; // sass-lint:disable-line no-important + + .pagebuilder-overlay:not(.pagebuilder-poster-overlay) { + max-width: none; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_import.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_import.scss new file mode 100644 index 0000000..911bf87 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_import.scss @@ -0,0 +1,9 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; +@import 'poster'; +@import 'collage-center'; +@import 'collage-left'; +@import 'collage-right'; diff --git a/Magento_PageBuilder/styles/modules/content-type/banner/_poster.scss b/Magento_PageBuilder/styles/modules/content-type/banner/_poster.scss new file mode 100644 index 0000000..15c1965 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/banner/_poster.scss @@ -0,0 +1,9 @@ +// +// Poster appearance styles +// _____________________________________________ + +.pagebuilder-banner-wrapper { + .pagebuilder-poster-content { + width: 100%; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/block/_default.scss b/Magento_PageBuilder/styles/modules/content-type/block/_default.scss new file mode 100644 index 0000000..bb4425c --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/block/_default.scss @@ -0,0 +1,12 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type$='block'] { + .block { + p:last-child { + margin-bottom: 1rem; + margin-top: 0; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/block/_import.scss b/Magento_PageBuilder/styles/modules/content-type/block/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/block/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/button-item/_default.scss b/Magento_PageBuilder/styles/modules/content-type/button-item/_default.scss new file mode 100644 index 0000000..7be24f6 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/button-item/_default.scss @@ -0,0 +1,47 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='button-item'] { + max-width: 100%; + [data-element='link'], + [data-element='empty_link'] { + max-width: 100%; + word-wrap: break-word; + } + [data-element='empty_link'] { + cursor: default; + } +} + +a, +button, +div { + &.pagebuilder-button-link { + @include lib-button-l(); + @include lib-button-as-link( + $_margin: 0 10px 10px 0, + $_padding: $button__padding__l + ); + @include lib-css(font-weight, $font-weight__semibold); + box-shadow: none; + box-sizing: border-box; + display: inline-block; + } + + &.pagebuilder-button-primary { + @include lib-link-as-button(); + @include lib-button-primary($_button-margin: 0 10px 10px 0); + @include lib-button-l(); + @include lib-css(border-radius, $button__border-radius); + box-shadow: none; + } + + &.pagebuilder-button-secondary { + @include lib-link-as-button(); + @include lib-button($_button-margin: 0 10px 10px 0); + @include lib-button-l(); + @include lib-css(border-radius, $button__border-radius); + box-shadow: none; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/button-item/_import.scss b/Magento_PageBuilder/styles/modules/content-type/button-item/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/button-item/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/buttons/_default.scss b/Magento_PageBuilder/styles/modules/content-type/buttons/_default.scss new file mode 100644 index 0000000..21dfe90 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/buttons/_default.scss @@ -0,0 +1,7 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='buttons'] { + max-width: 100%; +} diff --git a/Magento_PageBuilder/styles/modules/content-type/buttons/_import.scss b/Magento_PageBuilder/styles/modules/content-type/buttons/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/buttons/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/column-group/_default.scss b/Magento_PageBuilder/styles/modules/content-type/column-group/_default.scss new file mode 100644 index 0000000..40297b2 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/column-group/_default.scss @@ -0,0 +1,9 @@ +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + .pagebuilder-column-group { + flex-wrap: wrap; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/column-group/_import.scss b/Magento_PageBuilder/styles/modules/content-type/column-group/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/column-group/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/column/_default.scss b/Magento_PageBuilder/styles/modules/content-type/column/_default.scss new file mode 100644 index 0000000..92feeaa --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/column/_default.scss @@ -0,0 +1,18 @@ +// +// Responsive Classes +// _____________________________________________ + +.pagebuilder-column { + box-sizing: border-box; +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + .pagebuilder-column { + background-attachment: scroll !important; // sass-lint:disable-line no-important + flex-basis: 100%; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/column/_import.scss b/Magento_PageBuilder/styles/modules/content-type/column/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/column/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/heading/_default.scss b/Magento_PageBuilder/styles/modules/content-type/heading/_default.scss new file mode 100644 index 0000000..b9e9faa --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/heading/_default.scss @@ -0,0 +1,7 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='heading'] { + word-wrap: break-word; +} diff --git a/Magento_PageBuilder/styles/modules/content-type/heading/_import.scss b/Magento_PageBuilder/styles/modules/content-type/heading/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/heading/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/html/_default.scss b/Magento_PageBuilder/styles/modules/content-type/html/_default.scss new file mode 100644 index 0000000..c462011 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/html/_default.scss @@ -0,0 +1,7 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='html'] { + word-wrap: break-word; +} diff --git a/Magento_PageBuilder/styles/modules/content-type/html/_import.scss b/Magento_PageBuilder/styles/modules/content-type/html/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/html/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/image/_default.scss b/Magento_PageBuilder/styles/modules/content-type/image/_default.scss new file mode 100644 index 0000000..9c3e43b --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/image/_default.scss @@ -0,0 +1,16 @@ +// +// Default appearance styles +// _____________________________________________ + +figure[data-content-type='image'] { + box-sizing: border-box; + + > [data-element='link'], + > [data-element='link'] img { + border-radius: inherit; + } + + figcaption { + word-wrap: break-word; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/image/_import.scss b/Magento_PageBuilder/styles/modules/content-type/image/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/image/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/map/_default.scss b/Magento_PageBuilder/styles/modules/content-type/map/_default.scss new file mode 100644 index 0000000..2621892 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/map/_default.scss @@ -0,0 +1,8 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='map'] { + box-sizing: border-box; + height: 300px; +} diff --git a/Magento_PageBuilder/styles/modules/content-type/map/_import.scss b/Magento_PageBuilder/styles/modules/content-type/map/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/map/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/products/_carousel.scss b/Magento_PageBuilder/styles/modules/content-type/products/_carousel.scss new file mode 100644 index 0000000..0896392 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/products/_carousel.scss @@ -0,0 +1,44 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='products'][data-appearance='carousel'] { + .slick-initialized { + li.product-item { + display: block; + + &:first-child { + visibility: visible; + } + + } + } + + .product-item-info { + width: auto; + } + + li.product-item { + display: none; + + &:first-child { + display: block; + visibility: hidden; + } + } + + &.center-mode { + .product-item { + opacity: 0.5; + transition: all 300ms ease; + + &:hover { + opacity: 1; + } + } + + .slick-current .product-item { + opacity: 1; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/products/_default.scss b/Magento_PageBuilder/styles/modules/content-type/products/_default.scss new file mode 100644 index 0000000..50627eb --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/products/_default.scss @@ -0,0 +1,43 @@ +// +// Default appearance styles +// _____________________________________________ + +.pagebuilder-column { + .widget-product-grid { + .product-item { + max-width: 100%; + min-width: 50px; + .price-box { + word-wrap: break-word; + .price { + white-space: normal; + } + } + .product-item-actions { + .actions-primary { + display: inline-block; + max-width: 100%; + } + .actions-secondary { + display: inline-block; + width: auto; + } + .tocart { + max-width: 100%; + white-space: normal; + } + } + } + } + [data-content-type='products'] { + .block.widget { + .products-grid { + .widget-product-grid.product-items { + .product-item { + width: 200px; + } + } + } + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/products/_import.scss b/Magento_PageBuilder/styles/modules/content-type/products/_import.scss new file mode 100644 index 0000000..2126d07 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/products/_import.scss @@ -0,0 +1,6 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; +@import 'carousel'; diff --git a/Magento_PageBuilder/styles/modules/content-type/row/_contained.scss b/Magento_PageBuilder/styles/modules/content-type/row/_contained.scss new file mode 100644 index 0000000..f653588 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/row/_contained.scss @@ -0,0 +1,26 @@ +// +// Contained row appearance styles +// _____________________________________________ + +[data-content-type='row'][data-appearance='contained'] { + box-sizing: border-box; + margin-left: auto !important; // sass-lint:disable-line no-important + margin-right: auto !important; // sass-lint:disable-line no-important + max-width: $layout__max-width; + + [data-element='inner'] { + box-sizing: border-box; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + [data-content-type='row'][data-appearance='contained'] { + [data-element='inner'] { + background-attachment: scroll !important; // sass-lint:disable-line no-important + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/row/_full-bleed.scss b/Magento_PageBuilder/styles/modules/content-type/row/_full-bleed.scss new file mode 100644 index 0000000..2fd48d9 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/row/_full-bleed.scss @@ -0,0 +1,17 @@ +// +// Full Bleed row appearance styles +// _____________________________________________ + +[data-content-type='row'][data-appearance='full-bleed'] { + box-sizing: border-box; +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + [data-content-type='row'][data-appearance='full-bleed'] { + background-attachment: scroll !important; // sass-lint:disable-line no-important + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/row/_full-width.scss b/Magento_PageBuilder/styles/modules/content-type/row/_full-width.scss new file mode 100644 index 0000000..13f33c1 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/row/_full-width.scss @@ -0,0 +1,25 @@ +// +// Full Width row appearance styles +// _____________________________________________ + +[data-content-type='row'][data-appearance='full-width'] { + box-sizing: border-box; + + > .row-full-width-inner { + box-sizing: border-box; + margin-left: auto; + margin-right: auto; + max-width: $layout__max-width; + width: 100%; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + [data-content-type='row'][data-appearance='full-width'] { + background-attachment: scroll !important; // sass-lint:disable-line no-important + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/row/_import.scss b/Magento_PageBuilder/styles/modules/content-type/row/_import.scss new file mode 100644 index 0000000..e5b81fb --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/row/_import.scss @@ -0,0 +1,7 @@ +// +// _import imports all appearance scss files +// _________________________________________ + +@import 'contained'; +@import 'full-bleed'; +@import 'full-width'; diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_collage-center.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-center.scss new file mode 100644 index 0000000..5f5d275 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-center.scss @@ -0,0 +1,12 @@ +// +// Collage center appearance styles +// _____________________________________________ + +[data-appearance='collage-centered'] { + .pagebuilder-slide-wrapper { + .pagebuilder-overlay { + margin-left: auto; + margin-right: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_collage-left.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-left.scss new file mode 100644 index 0000000..78646ea --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-left.scss @@ -0,0 +1,11 @@ +// +// Collage left appearance styles +// _____________________________________________ + +[data-appearance='collage-left'] { + .pagebuilder-slide-wrapper { + .pagebuilder-overlay { + margin-right: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_collage-right.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-right.scss new file mode 100644 index 0000000..4b43ea2 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_collage-right.scss @@ -0,0 +1,11 @@ +// +// Collage right appearance styles +// _____________________________________________ + +[data-appearance='collage-right'] { + .pagebuilder-slide-wrapper { + .pagebuilder-overlay { + margin-left: auto; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_default.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_default.scss new file mode 100644 index 0000000..4559a2f --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_default.scss @@ -0,0 +1,72 @@ +// +// Default appearance styles +// _____________________________________________ + +[data-content-type='slide'] { + box-sizing: border-box; + line-height: 20px; + min-height: inherit; + overflow: hidden; + + > [data-element='link'], + > [data-element='empty_link'] { + color: inherit; + min-height: inherit; + text-decoration: inherit; + + &:hover { + color: inherit; + text-decoration: inherit; + } + } +} + +.pagebuilder-slide-wrapper { + border-radius: inherit; + box-sizing: border-box; + min-height: inherit; + overflow-wrap: break-word; + word-wrap: break-word; + + .pagebuilder-overlay { + border-radius: inherit; + box-sizing: border-box; + padding: 30px; + transition: background-color 500ms ease; + + &.pagebuilder-poster-overlay { + align-items: center; + display: flex; + justify-content: center; + min-height: inherit; + } + + &:not(.pagebuilder-poster-overlay) { + max-width: 540px; + } + } + + [data-element='content'] { + min-height: 50px; + } + + .pagebuilder-slide-button { + margin: 20px 0 0 0; + max-width: 100%; + text-align: inherit; + transition: opacity 500ms ease; + word-break: break-word; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + .pagebuilder-slide-wrapper { + .pagebuilder-overlay:not(.pagebuilder-poster-overlay) { + max-width: none; + } + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_import.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_import.scss new file mode 100644 index 0000000..911bf87 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_import.scss @@ -0,0 +1,9 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; +@import 'poster'; +@import 'collage-center'; +@import 'collage-left'; +@import 'collage-right'; diff --git a/Magento_PageBuilder/styles/modules/content-type/slide/_poster.scss b/Magento_PageBuilder/styles/modules/content-type/slide/_poster.scss new file mode 100644 index 0000000..1949d7e --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slide/_poster.scss @@ -0,0 +1,9 @@ +// +// Poster appearance styles +// _____________________________________________ + +.pagebuilder-slide-wrapper { + .pagebuilder-poster-content { + width: 100%; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/slider/_default.scss b/Magento_PageBuilder/styles/modules/content-type/slider/_default.scss new file mode 100644 index 0000000..9b06c73 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slider/_default.scss @@ -0,0 +1,32 @@ +// +// Default appearance styles +// _____________________________________________ + +div[data-content-type='slider'] { + visibility: hidden; + + &.slick-initialized { + visibility: visible; + } + + .slick-list, + .slick-track, + .slick-slide { + min-height: inherit; + + > div { + line-height: 0; + min-height: inherit; + overflow: hidden; + width: 100%; + } + } +} + +a.button { + appearance: button; + color: initial; + padding: 10px; + text-decoration: none; +} + diff --git a/Magento_PageBuilder/styles/modules/content-type/slider/_import.scss b/Magento_PageBuilder/styles/modules/content-type/slider/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/slider/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/tabs/_default.scss b/Magento_PageBuilder/styles/modules/content-type/tabs/_default.scss new file mode 100644 index 0000000..8dd74ad --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/tabs/_default.scss @@ -0,0 +1,109 @@ +// +// Default appearance styles +// _____________________________________________ + +div[data-content-type='tabs'] { + .tabs-navigation { + display: block; + font-size: 0; + margin: 0 0 -1px; + padding: 0; + + li:first-child { + margin-left: 0 !important; // sass-lint:disable-line no-important + } + + li.tab-header { + background: $color-gray-light0; + border: 1px solid $color-gray80; + border-bottom: 0; + border-bottom-left-radius: 0 !important; // sass-lint:disable-line no-important + border-bottom-right-radius: 0 !important; // sass-lint:disable-line no-important + display: inline-block; + margin: 0; + max-width: 100%; + overflow-wrap: break-word; + position: relative; + word-wrap: break-word; + z-index: 1; + + &:not(:first-child) { + margin-left: -1px; + } + + a.tab-title { + border-right: 0; + color: $color-black; + cursor: pointer !important; // sass-lint:disable-line no-important + display: block; + font-size: 14px; + font-weight: 600; + padding: 1.4rem 2rem; + position: relative; + transition: all 0.3s; + vertical-align: middle; + white-space: normal; + + span.tab-title { + display: block; + } + + &:hover { + text-decoration: none; + } + } + + &:last-child { + border-right: 1px solid $color-gray80; + } + + &.ui-state-active { + background: $color-white; + z-index: 19; + + a.tab-title { + position: relative; + transition: all 0.3s; + } + } + } + } + + .tabs-content { + border: 1px solid $color-gray80; + box-sizing: border-box; + overflow: hidden; + position: relative; + z-index: 9; + + [data-content-type='tab-item'] { + box-sizing: border-box; + min-height: inherit; + + &:not(:first-child) { + display: none; + } + } + } + + &.tab-align-left { + .tabs-content { + border-top-left-radius: 0 !important; // sass-lint:disable-line no-important + } + } + &.tab-align-right { + .tabs-content { + border-top-right-radius: 0 !important; // sass-lint:disable-line no-important + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m - 1) { + [data-content-type='tab-item'] { + background-attachment: scroll !important; // sass-lint:disable-line no-important + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/tabs/_import.scss b/Magento_PageBuilder/styles/modules/content-type/tabs/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/tabs/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/text/_default.scss b/Magento_PageBuilder/styles/modules/content-type/text/_default.scss new file mode 100644 index 0000000..f99e4b9 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/text/_default.scss @@ -0,0 +1,7 @@ +// +// Default appearance styles +// _____________________________________________ + +div[data-content-type='text'] { + word-wrap: break-word; +} diff --git a/Magento_PageBuilder/styles/modules/content-type/text/_import.scss b/Magento_PageBuilder/styles/modules/content-type/text/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/text/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/content-type/video/_default.scss b/Magento_PageBuilder/styles/modules/content-type/video/_default.scss new file mode 100644 index 0000000..55ed839 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/video/_default.scss @@ -0,0 +1,28 @@ +// +// Default appearance styles +// _____________________________________________ + +div[data-content-type='video'] { + font-size: 0; + + .pagebuilder-video-inner { + box-sizing: border-box; + display: inline-block; + width: 100%; + } + + .pagebuilder-video-container { + border-radius: inherit; + overflow: hidden; + padding-top: 56.25%; + position: relative; + } + + iframe { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/Magento_PageBuilder/styles/modules/content-type/video/_import.scss b/Magento_PageBuilder/styles/modules/content-type/video/_import.scss new file mode 100644 index 0000000..3dc2972 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/content-type/video/_import.scss @@ -0,0 +1,5 @@ +// +// _import imports all appearance scss files +// _____________________________________________ + +@import 'default'; diff --git a/Magento_PageBuilder/styles/modules/slick/_slick.scss b/Magento_PageBuilder/styles/modules/slick/_slick.scss new file mode 100755 index 0000000..4835aa1 --- /dev/null +++ b/Magento_PageBuilder/styles/modules/slick/_slick.scss @@ -0,0 +1,215 @@ +$b3: #b3b3b3; +$color-pagebuilder-darkest-gray: #1c1918; + +// +// Slick slider styles +// _____________________________________________ + +.slick-slider { + box-sizing: border-box; + display: block; + position: relative; + touch-action: pan-y; + user-select: none; +} +.slick-list { + display: block; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } +} + +.slick-track { + display: block; + left: 0; + margin-left: auto; + margin-right: auto; + position: relative; + top: 0; + + &:before, + &:after { + content: ''; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } +} +.slick-slide { + display: none; + float: left; + height: 100%; + min-height: 1px; + [dir='rtl'] & { + float: right; + } + img { + display: block; + } + &.slick-loading img { + display: none; + } + + &.dragging img { + pointer-events: none; + } + + .slick-initialized & { + display: block; + } + + .slick-loading & { + visibility: hidden; + } + + .slick-vertical & { + border: 1px solid transparent; + display: block; + height: auto; + } +} + +.slick-slider .slick-track, +.slick-slider .slick-list { + transform: translate3d(0, 0, 0); +} + +.slick-arrow.slick-hidden { + display: none; +} + +.slick-prev { + left: 2rem; + &:before { + content: $icon-pagebuilder-caret-prev__content; + padding-right: 5px; + } +} + +.slick-next { + right: 2rem; + &:before { + content: $icon-pagebuilder-caret-next__content; + padding-left: 5px; + } +} + +.slick-prev, +.slick-next { + background: rgba(252, 252, 252, 0.6); + border: none; + border-radius: 0; + color: transparent; + cursor: pointer; + display: block; + font-size: 0; + height: 60px; + line-height: 0; + outline: none; + padding: 0; + position: absolute; + top: 50%; + transform: translate(0, -50%); + width: 60px; + z-index: 101; + + &.slick-disabled { + opacity: 0.2; + } + + &:hover { + background: rgba(252, 252, 252, 1); + border: none; + &.slick-disabled { + opacity: 0.2; + } + &:before { + color: $color-gray-darken4; + } + } + + &:before, + &:after { + @extend .pagebuilder-icon; + color: $color-gray-darken3; + font-size: 38px; + opacity: 1; + } + + &:active, + &:focus, + &:not(.primary) { + background: rgba(252, 252, 252, 0.7); + border: none; + box-shadow: none; + + &:active { + box-shadow: none; + } + } +} + +.slick-dots { + @include lib-inline-block-space-item(); + display: block; + list-style: none; + margin: 0; + padding: 15px 0; + text-align: center; + width: 100%; + li { + cursor: pointer; + display: inline-block; + height: 14px; + margin: 0 5px; + padding: 0; + position: relative; + vertical-align: middle; + width: 14px; + button { + background: $color-white; + border: 1px solid $color-gray80; + border-radius: 10px; + box-shadow: none; + cursor: pointer; + display: block; + height: 14px; + padding: 0; + text-indent: -99999px; + transition: 0.3s; + width: 14px; + + &:hover { + border: 1px solid $b3; + } + + &:active, + &:focus, + &:not(.primary) { + box-shadow: none; + } + } + + &.slick-active { + button { + background: $color-pagebuilder-darkest-gray; + } + } + } +} diff --git a/styles/blocks/components/_modals_extend.scss b/styles/blocks/components/_modals_extend.scss index 9a0a517..f81e843 100644 --- a/styles/blocks/components/_modals_extend.scss +++ b/styles/blocks/components/_modals_extend.scss @@ -14,7 +14,7 @@ $modal-popup-title-mobile__font-size : $font-size__base !default; $modal-slide__first__indent-left : 44px !default; $modal-slide-mobile__background-color : $color-gray-light01 !default; -$modal-overlay__background-color : fade($color-gray20, 55%) !default; +$modal-overlay__background-color : rgba($color-gray20, 0.55) !default; $modal-action-close__color : $primary__color !default; $modal-action-close__font-size : 32px !default; @@ -58,7 +58,7 @@ $modal-slide-action-close__padding : $modal-slide-header__padding-vertical - .modal-popup { pointer-events: none; - + .modal-title { @include lib-css(border-bottom, $modal-title__border); @include lib-css(font-weight, $font-weight__light); diff --git a/styles/styles.scss b/styles/styles.scss index 73cafaf..ddd2669 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -69,6 +69,7 @@ @import '../Magento_Vault/styles/module'; @import '../Magento_Weee/styles/module'; @import '../Magento_Wishlist/styles/module'; +@import '../Magento_PageBuilder/styles/module'; // Widgets diff --git a/styles/vendor/magento-ui/_lib.scss b/styles/vendor/magento-ui/_lib.scss index 0f6b1e8..a748bbc 100644 --- a/styles/vendor/magento-ui/_lib.scss +++ b/styles/vendor/magento-ui/_lib.scss @@ -2,6 +2,7 @@ // Global lib // _____________________________________________ +@import 'variables'; @import 'actions-toolbar'; @import 'breadcrumbs'; @import 'buttons'; @@ -22,4 +23,3 @@ @import 'tooltips'; @import 'typography'; @import 'utilities'; -@import 'variables';