Merge pull request #1244 from Patternslib/scss-fixes

fix: Fix SASS at-use import paths from node_modules.

Author: thet

Makefile

@@ -59,7 +59,7 @@ bundle-pre:
 
 .PHONY: css
 css:
-	@$(SASS) -I style -I _sass -I . _sass/_patterns.scss style/patterns.css
+	@$(SASS) -I style --load-path node_modules/ _sass/_patterns.scss style/patterns.css
 
 
 # Update patterns-site

src/pat/colour-picker/_colour-picker.scss

@@ -1,6 +1,5 @@
 @charset "UTF-8";
-
-@use "../../../node_modules/spectrum-colorpicker/spectrum";
+@use "spectrum-colorpicker/spectrum";
 
 .checkNative,
 .checkPattern {

src/pat/date-picker/_date-picker.scss

@@ -1,2 +1,2 @@
 @charset "UTF-8";
-@use "../../../node_modules/pikaday/scss/pikaday.scss";
+@use "pikaday/scss/pikaday.scss";

src/pat/date-picker/documentation.md

@@ -9,36 +9,36 @@ for browsers which don't yet support the HTML5 date input.
 
 ### Examples
 
-####Falling back to the browser's HTML5 picker if available.
+#### Falling back to the browser's HTML5 picker if available.
 
 Set the `behavior` option to `native` to use the browser's HTML5 date input
 rendering when available.
 
     <input class="pat-date-picker" type="date" data-pat-date-picker="behavior: native">
 
-####Enforcing the styled non-HTML5 picker universally.
+#### Enforcing the styled non-HTML5 picker universally.
 
 By default this pattern will NOT defer to the browser's HTML5 picker.
 
     <input class="pat-date-picker" type="date">
 
-####Default value
+#### Default value
 
     <input class="pat-date-picker" type="date" value="2015-01-01">
 
-####First day on Monday
+#### First day on Monday
 
     <input class="pat-date-picker" type="date" value="2015-01-01" data-pat-date-picker="first-day: 1">
 
-####Specifying the "min" and "max" attributes.
+#### Specifying the "min" and "max" attributes.
 
     <input class="pat-date-picker" min="2015-01-01" max="2015-12-31" type="date">
 
-####Show the week number.
+#### Show the week number.
 
     <input class="pat-date-picker" data-pat-date-picker="week-numbers: show;" type="date">
 
-####Multilingual support with German translations
+#### Multilingual support with German translations
 
 The picker's UI can be translated by providing a URL to the `i18n` option. This
 URL must point to a JSON encoded resource containing the translations.
@@ -55,15 +55,15 @@ Here are all the i18n values in JSON format:
        "weekdaysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
      }
 
-####Automatically update one date when changing another
+#### Automatically update one date when changing another
 
 You can define one date input to be after another date with the ``after`` option.
 The the other date is changed after the first, it will be automatically updated to be offset days after the first.
 
     <input name="start" class="pat-date-picker" type="date"/>
     <input name="end"   class="pat-date-picker" type="date" data-pat-date-picker="after: input[name=start]; offset-days: 2;"/>
 
-####Format the displayed date
+#### Format the displayed date
 
 In the default ``styled`` behavior mode, you can format the displayed date.
 The date input will be hidden and updated with an ISO8601 date to submit values which are machine-readable.
@@ -73,32 +73,6 @@ The locale option allows you to define the language in which the formatted date
     <input class="pat-date-picker" data-pat-date-picker="output-format: Do MMMM YYYY; locale: de" type="date" />
 
 
-### Why did we base this library on Pikaday?
-
-When looking for the underlying library to use for this pattern, we compared
-pikaday and [pickadate](https://dbushell.github.io/Pikaday/).
-
--   Prefixed CSS classes
-
-Pikaday's CSS classes are prefixed to make them unique, whereas Pickadate's
-classes are very generic and therefore prone to clash with existing classes and CSS in certain sites.
-
--   Better markup
-
-One of the main drawbacks of pickadate is the markup that it produces.
-Pickaday's special markup is inserted relative to the input element being overridden.
-
-In contrast, the markup generated by pikaday is appended to the end of the
-`<body>` tag, and it then uses absolute positioning to position the picker.
-
-This is easier to style and less prone to create problems when integrating the
-picker in diverse styling environments.
-
--   Simpler, more modest featureset and Javascript
-
-Pikaday is only 5KB compressed. The code is AMD aware and easy to read and
-understand.
-
 ### Option reference
 
 The HTML5 attributes `min` and `max` will be honoured.

src/pat/datetime-picker/documentation.md

@@ -9,25 +9,25 @@ for browsers which don't yet support the HTML5 date input.
 
 ### Examples
 
-####Enforcing the styled non-HTML5 picker universally.
+#### Enforcing the styled non-HTML5 picker universally.
 
 By default this pattern will NOT defer to the browser's HTML5 picker.
 
     <input class="pat-date-picker" type="date">
 
-####Default value
+#### Default value
 
     <input class="pat-date-picker" type="date" value="2015-01-01">
 
-####Specifying the "min" and "max" attributes.
+#### Specifying the "min" and "max" attributes.
 
     <input class="pat-date-picker" min="2015-01-01" max="2015-12-31" type="date">
 
-####Show the week number.
+#### Show the week number.
 
     <input class="pat-date-picker" data-pat-date-picker="week-numbers: show;" type="date">
 
-####Multilingual support with German translations
+#### Multilingual support with German translations
 
 The picker's UI can be translated by providing a URL to the `i18n` option. This
 URL must point to a JSON encoded resource containing the translations.
@@ -44,31 +44,6 @@ Here are all the i18n values in JSON format:
        "weekdaysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
      }
 
-### Why did we base this library on Pikaday?
-
-When looking for the underlying library to use for this pattern, we compared
-pikaday and [pickadate](https://dbushell.github.io/Pikaday/).
-
--   Prefixed CSS classes
-
-Pikaday's CSS classes are prefixed to make them unique, whereas Pickadate's
-classes are very generic and therefore prone to clash with existing classes and CSS in certain sites.
-
--   Better markup
-
-One of the main drawbacks of pickadate is the markup that it produces.
-Pickaday's special markup is inserted relative to the input element being overridden.
-
-In contrast, the markup generated by pikaday is appended to the end of the
-`<body>` tag, and it then uses absolute positioning to position the picker.
-
-This is easier to style and less prone to create problems when integrating the
-picker in diverse styling environments.
-
--   Simpler, more modest featureset and Javascript
-
-Pikaday is only 5KB compressed. The code is AMD aware and easy to read and
-understand.
 
 ### Option reference
 

src/pat/tooltip/_tooltip.scss

@@ -1,2 +1,2 @@
 @charset "UTF-8";
-@use "../../../node_modules/tippy.js/dist/tippy";
+@use "tippy.js/dist/tippy";