diff --git a/CHANGES.md b/CHANGES.md index 2a74316da..6a924cba0 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,10 @@ Allow importing styles from external libraries in Patternslib JavaScript via the global variable ``window.__patternslib_import_styles`` set to ``true``. This allows loading these styles automatically via Webpack. Disable setting style import per default. +- Styles: Import styles by setting ``__patternslib_import_styles`` + Allow importing styles from external libraries in Patternslib JavaScript via the global variable ``window.__patternslib_import_styles`` set to ``true``. + This allows loading these styles automatically via Webpack. + Set patternslib to use/import styles per default. - pat carousel: Use ``imagesloaded`` instead of timeout to wait for images to have been loaded. - core registry: Do not scan patterns within trees with attribute ``hidden`` or class ``cant-touch-this``. - Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes. diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index e6231ea82..ab390f16d 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -13,13 +13,6 @@ @import "components/avatar"; @import "components/form"; @import "components/icon"; -@import "src/pat/auto-suggest/auto-suggest"; -@import "src/pat/autofocus/autofocus"; -@import "src/pat/auto-scale/auto-scale"; -@import "src/pat/auto-submit/auto-submit"; -@import "src/pat/bumper/bumper"; -@import "src/pat/carousel/carousel"; -@import "src/pat/checklist/checklist"; @import "src/pat/collapsible/collapsible"; @import "src/pat/date-picker/date-picker"; @import "src/pat/datetime-picker/datetime-picker"; diff --git a/package.json b/package.json index b9fc8e2c6..ba4551623 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "masonry-layout": "^4.2.2", "moment": "^2.29.0", "moment-timezone": "^0.5.31", + "patterns-sass": "git+https://github.com/Patternslib/patterns-sass.git#scr-984", "photoswipe": "^4.1.3", "pikaday": "^1.8.0", "promise-polyfill": "^8.1.0", diff --git a/src/pat/auto-scale/_auto-scale.scss b/src/pat/auto-scale/_auto-scale.scss deleted file mode 100644 index 60a09d8bc..000000000 --- a/src/pat/auto-scale/_auto-scale.scss +++ /dev/null @@ -1,13 +0,0 @@ -.pat-auto-scale { - -moz-transform-origin: left top; - -webkit-transform-origin: left top; - transform-origin: left top; - opacity: 0; - -moz-transition: opacity 0.2s; - -webkit-transition: opacity 0.2s; - transition: opacity 0.2s; -} - -.pat-auto-scale.scaled { - opacity: 1; -} diff --git a/src/pat/auto-scale/auto-scale.js b/src/pat/auto-scale/auto-scale.js index 496cd4ba9..7264b4f72 100644 --- a/src/pat/auto-scale/auto-scale.js +++ b/src/pat/auto-scale/auto-scale.js @@ -4,7 +4,6 @@ * Copyright 2012 Humberto Sermeno * Copyright 2013 Simplon B.V. - Wichert Akkerman */ - import $ from "jquery"; import Base from "../../core/base"; import Parser from "../../core/parser"; @@ -25,6 +24,10 @@ export default Base.extend({ force_method: null, init: function ($el, opts) { + if (window.__patternslib_import_styles) { + import("patterns-sass/components/_auto-scale.scss"); + } + this.options = parser.parse(this.$el, opts); if (this.force_method !== null) { this.options.method = this.force_method; diff --git a/src/pat/auto-scale/example-2.html b/src/pat/auto-scale/example-2.html index 96ff90d59..168ec6aff 100644 --- a/src/pat/auto-scale/example-2.html +++ b/src/pat/auto-scale/example-2.html @@ -9,7 +9,6 @@ type="text/javascript" charset="utf-8" > - - +
Demo page - - -

Carousel in a list

diff --git a/src/pat/carousel/slick.css b/src/pat/carousel/slick.css deleted file mode 100644 index 94926c612..000000000 --- a/src/pat/carousel/slick.css +++ /dev/null @@ -1,102 +0,0 @@ -/* Slider */ -.slick-slider { - position: relative; - - display: block; - box-sizing: border-box; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - -webkit-touch-callout: none; - -khtml-user-select: none; - -ms-touch-action: pan-y; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; -} - -.slick-list { - position: relative; - - display: block; - overflow: hidden; - - margin: 0; - padding: 0; -} -.slick-list:focus { - outline: none; -} -.slick-list.dragging { - cursor: pointer; - cursor: hand; -} - -.slick-slider .slick-track, -.slick-slider .slick-list { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - -.slick-track { - position: relative; - top: 0; - left: 0; - - display: block; - margin-left: auto; - margin-right: auto; -} -.slick-track:before, -.slick-track:after { - display: table; - - content: ""; -} -.slick-track:after { - clear: both; -} -.slick-loading .slick-track { - visibility: hidden; -} - -.slick-slide { - display: none; - float: left; - - height: 100%; - min-height: 1px; -} -[dir="rtl"] .slick-slide { - float: right; -} -.slick-slide img { - display: block; -} -.slick-slide.slick-loading img { - display: none; -} -.slick-slide.dragging img { - pointer-events: none; -} -.slick-initialized .slick-slide { - display: block; -} -.slick-loading .slick-slide { - visibility: hidden; -} -.slick-vertical .slick-slide { - display: block; - - height: auto; - - border: 1px solid transparent; -} -.slick-arrow.slick-hidden { - display: none; -} diff --git a/src/pat/checklist/_checklist.scss b/src/pat/checklist/_checklist.scss deleted file mode 100644 index 962f4f691..000000000 --- a/src/pat/checklist/_checklist.scss +++ /dev/null @@ -1,49 +0,0 @@ -@charset "UTF-8"; -@import "settings"; - -.pat-checklist { - > br { - display: none; - } - - label { - padding-left: 1.5em; - position: relative; - display: block; - - &.checked:before, - &.unchecked:before { - font-family: fontello; - content: "#{$glyph-checkbox}"; - float: left; - position: absolute; - left: 0; - top: 0em; - } - - &.checked:before { - content: "#{$glyph-checkbox-active}"; - } - - input[type="checkbox"], - input[type="radio"] { - opacity: 0; - position: absolute; - } - } - - &.radio label { - &:before { - content: "#{$glyph-radio-button}"; - } - &.checked:before { - content: "#{$glyph-radio-button-active}"; - } - } - - fieldset.composed { - padding-left: 0; - margin-bottom: 0; - position: relative; - } -} diff --git a/src/pat/checklist/checklist.js b/src/pat/checklist/checklist.js index 646913d4e..b5ba8d287 100644 --- a/src/pat/checklist/checklist.js +++ b/src/pat/checklist/checklist.js @@ -18,6 +18,10 @@ export default Base.extend({ all_radios: [], init() { + if (window.__patternslib_import_styles) { + import("patterns-sass/components/_checklist.scss"); + } + this.options = parser.parse(this.el, this.options, false); this.$el.on("patterns-injected", this._init.bind(this)); this._init(); diff --git a/src/pat/checklist/index.html b/src/pat/checklist/index.html index 17a7b183a..37358e74f 100644 --- a/src/pat/checklist/index.html +++ b/src/pat/checklist/index.html @@ -3,7 +3,6 @@ Demo page -