diff --git a/Makefile b/Makefile index f4dec9c1a..001cb7edd 100644 --- a/Makefile +++ b/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 diff --git a/src/pat/colour-picker/_colour-picker.scss b/src/pat/colour-picker/_colour-picker.scss index b1196253c..5a676e3ba 100644 --- a/src/pat/colour-picker/_colour-picker.scss +++ b/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 { diff --git a/src/pat/date-picker/_date-picker.scss b/src/pat/date-picker/_date-picker.scss index cf53236a4..65d62d32b 100644 --- a/src/pat/date-picker/_date-picker.scss +++ b/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"; diff --git a/src/pat/date-picker/documentation.md b/src/pat/date-picker/documentation.md index 9ad17d9e1..f84b15dbc 100644 --- a/src/pat/date-picker/documentation.md +++ b/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. -####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. -####Default value +#### Default value -####First day on Monday +#### First day on Monday -####Specifying the "min" and "max" attributes. +#### Specifying the "min" and "max" attributes. -####Show the week number. +#### Show the week number. -####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,7 +55,7 @@ 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. @@ -63,7 +63,7 @@ The the other date is changed after the first, it will be automatically updated -####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 -### 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 -`` 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. diff --git a/src/pat/datetime-picker/documentation.md b/src/pat/datetime-picker/documentation.md index 287be54a1..359309ee8 100644 --- a/src/pat/datetime-picker/documentation.md +++ b/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. -####Default value +#### Default value -####Specifying the "min" and "max" attributes. +#### Specifying the "min" and "max" attributes. -####Show the week number. +#### Show the week number. -####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 -`` 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 diff --git a/src/pat/tooltip/_tooltip.scss b/src/pat/tooltip/_tooltip.scss index 6fa0d5d3c..4c749c18d 100644 --- a/src/pat/tooltip/_tooltip.scss +++ b/src/pat/tooltip/_tooltip.scss @@ -1,2 +1,2 @@ @charset "UTF-8"; -@use "../../../node_modules/tippy.js/dist/tippy"; +@use "tippy.js/dist/tippy"; diff --git a/style/patterns.css b/style/patterns.css index 0288ec64e..cd2e1d4fe 100644 --- a/style/patterns.css +++ b/style/patterns.css @@ -199,7 +199,7 @@ form .message { form .pat-message.success, form .message.success { background-color: green; - color: black; + color: hsl(120, 100%, -24.9019607843%); } form .pat-message.notice, form .message.notice { @@ -4047,10 +4047,10 @@ div.pat-modal:after { } .pat-notification-panel.success { background-color: green; - color: black; + color: hsl(120, 100%, -24.9019607843%); } .pat-notification-panel.success * { - color: black !important; + color: hsl(120, 100%, -24.9019607843%) !important; } .pat-notification-panel.warning { background-color: orange;