diff --git a/yivi-css/package-lock.json b/yivi-css/package-lock.json index 1ac9d07..57d1391 100644 --- a/yivi-css/package-lock.json +++ b/yivi-css/package-lock.json @@ -10,7 +10,7 @@ "license": "SEE LICENSE IN REPOSITORY", "devDependencies": { "concurrently": "^5.3.0", - "kss": "^3.0.1", + "kss": "^3.1.0", "michelangelo": "^0.8.0", "onchange": "^7.1.0", "sass": "^1.32.4", @@ -19,12 +19,12 @@ } }, "node_modules/@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.23.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz", + "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==", "dev": true, "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -631,13 +631,13 @@ "dev": true }, "node_modules/handlebars": { - "version": "4.7.7", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz", - "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==", + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", "dev": true, "dependencies": { "minimist": "^1.2.5", - "neo-async": "^2.6.0", + "neo-async": "^2.6.2", "source-map": "^0.6.1", "wordwrap": "^1.0.0" }, @@ -1312,9 +1312,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==", "dev": true }, "node_modules/require-directory": { diff --git a/yivi-css/package.json b/yivi-css/package.json index 35422f0..331d95f 100644 --- a/yivi-css/package.json +++ b/yivi-css/package.json @@ -34,7 +34,7 @@ }, "devDependencies": { "concurrently": "^5.3.0", - "kss": "^3.0.1", + "kss": "^3.1.0", "michelangelo": "^0.8.0", "onchange": "^7.1.0", "sass": "^1.32.4", diff --git a/yivi-css/src/animations/checkmark.scss b/yivi-css/src/animations/checkmark.scss index 230ec44..561e8e3 100644 --- a/yivi-css/src/animations/checkmark.scss +++ b/yivi-css/src/animations/checkmark.scss @@ -1,12 +1,13 @@ -/* Checkmark - * - * A checkmark to indicate success - * - * Markup: - *
- * - * Styleguide Animations.Checkmark - */ +/* +Checkmark + +A checkmark to indicate success + +Markup: +
+ +Styleguide Animations.Checkmark +*/ @import '../mixins/reset', '../mixins/animation', '../variables/colours'; .yivi-web-checkmark-animation { diff --git a/yivi-css/src/animations/clock.scss b/yivi-css/src/animations/clock.scss index 59b885f..51e6878 100644 --- a/yivi-css/src/animations/clock.scss +++ b/yivi-css/src/animations/clock.scss @@ -1,12 +1,13 @@ -/* Clock - * - * A clock to show timeouts - * - * Markup: - *
- * - * Styleguide Animations.Clock - */ +/* +Clock + +A clock to show timeouts + +Markup: +
+ +Styleguide Animations.Clock +*/ @use 'sass:math'; diff --git a/yivi-css/src/animations/forbidden.scss b/yivi-css/src/animations/forbidden.scss index 6f44bc3..e176257 100644 --- a/yivi-css/src/animations/forbidden.scss +++ b/yivi-css/src/animations/forbidden.scss @@ -1,12 +1,13 @@ -/* Forbidden - * - * A forbidden sign to show issues - * - * Markup: - *
- * - * Styleguide Animations.Forbidden - */ +/* +Forbidden + +A forbidden sign to show issues + +Markup: +
+ +Styleguide Animations.Forbidden +*/ @use 'sass:math'; diff --git a/yivi-css/src/animations/index.scss b/yivi-css/src/animations/index.scss index 7bcd7e0..21ec4b2 100644 --- a/yivi-css/src/animations/index.scss +++ b/yivi-css/src/animations/index.scss @@ -1,8 +1,9 @@ -/* Animations - * - * Weight: 5 - * - * Styleguide Animations - */ +/* +Animations + +Weight: 5 + +Styleguide Animations +*/ @import 'loading', 'waiting-for-user', 'checkmark', 'forbidden', 'clock'; diff --git a/yivi-css/src/animations/loading.scss b/yivi-css/src/animations/loading.scss index f322b2b..b95fb8b 100644 --- a/yivi-css/src/animations/loading.scss +++ b/yivi-css/src/animations/loading.scss @@ -1,14 +1,15 @@ -/* Loading - * - * A loading animation that precedes the QR code - * - * Markup: - *
- * - *
- * - * Styleguide Animations.Loading - */ +/* +Loading + +A loading animation that precedes the QR code + +Markup: +
+ +
+ +Styleguide Animations.Loading +*/ @import '../mixins/reset', '../mixins/animation', '../variables/colours'; diff --git a/yivi-css/src/animations/waiting-for-user.scss b/yivi-css/src/animations/waiting-for-user.scss index 795f2f1..918c5c4 100644 --- a/yivi-css/src/animations/waiting-for-user.scss +++ b/yivi-css/src/animations/waiting-for-user.scss @@ -1,13 +1,14 @@ -/* Waiting for user - * - * An animation to show while we wait for the user to disclose credentials from - * their mobile phone - * - * Markup: - *
- * - * Styleguide Animations.Waiting for user - */ +/* +Waiting for user + +An animation to show while we wait for the user to disclose credentials from +their mobile phone + +Markup: +
+ +Styleguide Animations.Waiting for user +*/ @import '../mixins/reset', '../mixins/animation', '../variables/colours'; diff --git a/yivi-css/src/components/index.scss b/yivi-css/src/components/index.scss index e854c51..88031d2 100644 --- a/yivi-css/src/components/index.scss +++ b/yivi-css/src/components/index.scss @@ -1,8 +1,9 @@ -/* Components - * - * Weight: 4 - * - * Styleguide Components - */ +/* +Components + +Weight: 4 + +Styleguide Components +*/ @import 'yivi-form', 'yivi-button', 'yivi-logo', 'yivi-pairing-form', 'qr-code'; diff --git a/yivi-css/src/components/qr-code.scss b/yivi-css/src/components/qr-code.scss index f45ab9a..9d50d7e 100644 --- a/yivi-css/src/components/qr-code.scss +++ b/yivi-css/src/components/qr-code.scss @@ -1,12 +1,13 @@ -/* QR code - * - * Styling to apply to the QR code image - * - * Markup: - * - * - * Styleguide Components.QR code - */ +/* +QR code + +Styling to apply to the QR code image + +Markup: + + +Styleguide Components.QR code +*/ @import '../mixins/reset', '../variables/sizes'; .yivi-web-qr-code { diff --git a/yivi-css/src/components/yivi-button.scss b/yivi-css/src/components/yivi-button.scss index c1bb993..b04bedc 100644 --- a/yivi-css/src/components/yivi-button.scss +++ b/yivi-css/src/components/yivi-button.scss @@ -1,18 +1,19 @@ -/* Yivi button - * - * A button to press to launch the disclosure flow in the Yivi app (locally on a - * mobile device) - * - * Markup: - * - * - * Open Yivi-app - * - * - * Styleguide Components.Yivi button - */ +/* +Yivi button + +A button to press to launch the disclosure flow in the Yivi app (locally on a +mobile device) + +Markup: + + + Open Yivi-app + + +Styleguide Components.Yivi button +*/ @import '../mixins/reset', '../mixins/fonts', '../variables/colours', '../variables/sizes', '../mixins/svg-url', '../variables/svg-images'; diff --git a/yivi-css/src/components/yivi-form.scss b/yivi-css/src/components/yivi-form.scss index 86b641d..c669374 100644 --- a/yivi-css/src/components/yivi-form.scss +++ b/yivi-css/src/components/yivi-form.scss @@ -1,51 +1,52 @@ -/* Yivi 'login form' - * - * A place to nicely show the different states of the Yivi disclosure flow. - * - * - * - * Trigger helper: - * - * - * Markup: - *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- * - *

With some text and stuff

- *
- *
- *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- * - *
- *
- *
- * - *

With some text and stuff

- *
- *
- *
- * - * Styleguide Components.Yivi login - */ +/* +Yivi 'login form' + +A place to nicely show the different states of the Yivi disclosure flow. + + + +Trigger helper: + + +Markup: +
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+ +

With some text and stuff

+
+
+
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+ +
+
+
+ +

With some text and stuff

+
+
+
+ +Styleguide Components.Yivi login +*/ @import '../mixins/reset', '../mixins/fonts', '../mixins/responsiveness', '../mixins/center', '../mixins/animation', '../variables/colours', diff --git a/yivi-css/src/components/yivi-logo.scss b/yivi-css/src/components/yivi-logo.scss index 057b595..57344fd 100644 --- a/yivi-css/src/components/yivi-logo.scss +++ b/yivi-css/src/components/yivi-logo.scss @@ -1,14 +1,15 @@ -/* Yivi logo - * - * Change an element into the Yivi logo - * - * Markup: - * - *
- * - * - * Styleguide Components.Yivi logo - */ +/* +Yivi logo + +Change an element into the Yivi logo + +Markup: + +
+ + +Styleguide Components.Yivi logo +*/ @import '../mixins/reset', '../mixins/svg-url', '../variables/svg-images'; diff --git a/yivi-css/src/components/yivi-pairing-form.scss b/yivi-css/src/components/yivi-pairing-form.scss index e89717b..7e6957f 100644 --- a/yivi-css/src/components/yivi-pairing-form.scss +++ b/yivi-css/src/components/yivi-pairing-form.scss @@ -1,76 +1,77 @@ -/* Yivi pairing form - * - * A form to enter the pairing code in order to pair your Yivi app with the session. - * - * Markup: - *
- *

Vul de koppelcode in die in je Yivi-app verschijnt. - *

- * - * - * - * - *
- * - * - * - *
- * - * Styleguide Components.Yivi pairing form - */ +/* +Yivi pairing form + +A form to enter the pairing code in order to pair your Yivi app with the session. + +Markup: +
+

Vul de koppelcode in die in je Yivi-app verschijnt. +

+ + + + +
+ + + +
+ +Styleguide Components.Yivi pairing form +*/ @import './yivi-button', '../animations/loading', '../mixins/reset', '../mixins/fonts', '../mixins/center', '../variables/colours'; diff --git a/yivi-css/src/examples/happy-path.scss b/yivi-css/src/examples/happy-path.scss index b981c4c..324527b 100644 --- a/yivi-css/src/examples/happy-path.scss +++ b/yivi-css/src/examples/happy-path.scss @@ -1,148 +1,149 @@ -/* Happy path - * - * Weight: 1 - * - * This is what the entire flow should look like if everything works as intended. - * - * - * - * Styleguide Examples.Happy path - - * Desktop flow - * - * Weight: 0 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Eén moment alsjeblieft

- *
- *
- * - *
- *
- *
- *

Volg de instructies in de Yivi app

- *
- *
- *
- *

Gelukt!

- *
- *
- *
- *
- * - * Styleguide Examples.Happy path.desktop - - * Desktop pairing flow - * - * Weight: 1 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Eén moment alsjeblieft

- *
- *
- * - *
- *
- *
- *

Vul de koppelcode in die in jouw Yivi-app verschijnt.

- *
- * - * - * - * - *
- * - *

Annuleer

- *
- *
- *
- *
- *

Volg de instructies in de Yivi app

- *
- *
- *
- *

Gelukt!

- *
- *
- *
- *
- * - * Styleguide Examples.Happy path.desktop pairing - - * Mobile flow - * - * Weight: 2 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Eén moment alsjeblieft

- *
- *
- * - *

Toon QR code

- *
- *
- *
- *

Gelukt!

- *
- *
- *
- *
- * - * Styleguide Examples.Happy path.mobile - */ +/* +Happy path + +Weight: 1 + +This is what the entire flow should look like if everything works as intended. + + + +Styleguide Examples.Happy path + +Desktop flow + +Weight: 0 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Eén moment alsjeblieft

+
+
+ +
+
+
+

Volg de instructies in de Yivi app

+
+
+
+

Gelukt!

+
+
+
+
+ +Styleguide Examples.Happy path.desktop + +Desktop pairing flow + +Weight: 1 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Eén moment alsjeblieft

+
+
+ +
+
+
+

Vul de koppelcode in die in jouw Yivi-app verschijnt.

+
+ + + + +
+ +

Annuleer

+
+
+
+
+

Volg de instructies in de Yivi app

+
+
+
+

Gelukt!

+
+
+
+
+ +Styleguide Examples.Happy path.desktop pairing + +Mobile flow + +Weight: 2 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Eén moment alsjeblieft

+
+
+ +

Toon QR code

+
+
+
+

Gelukt!

+
+
+
+
+ +Styleguide Examples.Happy path.mobile +*/ diff --git a/yivi-css/src/examples/helpers.scss b/yivi-css/src/examples/helpers.scss index 8dd78bb..7c60de9 100644 --- a/yivi-css/src/examples/helpers.scss +++ b/yivi-css/src/examples/helpers.scss @@ -1,36 +1,37 @@ -/* Helpers - * - * Weight: 0 - * - * The Yivi form has a notification area for non-state errors that occur outside - * the disclosure flow. We call these "helpers", and they're supposed to give - * the user hints about known issues or point to specific resources to help the - * user along. - * - * You can trigger these helpers to show in each and every example on this page. - * - * - * - * Trigger helper: - * - * - * Markup: - *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- * - * Styleguide Examples.Helpers - */ +/* +Helpers + +Weight: 0 + +The Yivi form has a notification area for non-state errors that occur outside +the disclosure flow. We call these "helpers", and they're supposed to give +the user hints about known issues or point to specific resources to help the +user along. + +You can trigger these helpers to show in each and every example on this page. + + + +Trigger helper: + + +Markup: +
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+ +Styleguide Examples.Helpers +*/ diff --git a/yivi-css/src/examples/index.scss b/yivi-css/src/examples/index.scss index cee4e45..63c34b0 100644 --- a/yivi-css/src/examples/index.scss +++ b/yivi-css/src/examples/index.scss @@ -1,8 +1,9 @@ -/* Examples - * - * Weight: 0 - * - * Styleguide Examples - */ +/* +Examples + +Weight: 0 + +Styleguide Examples +*/ @import 'states', 'happy-path', 'helpers'; diff --git a/yivi-css/src/examples/states.scss b/yivi-css/src/examples/states.scss index ae5b80e..24df334 100644 --- a/yivi-css/src/examples/states.scss +++ b/yivi-css/src/examples/states.scss @@ -1,338 +1,339 @@ -/* States - * - * Weight: 2 - * - * These examples show the different states that the disclosure flow can move - * through. - * - * Styleguide Examples.States - - * State 1: Uninitialised - * - * Weight: 0 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Eén moment alsjeblieft

- *
- *
- *
- *
- * - * Styleguide Examples.States.Uninitialised - - * State 2: Loading - * - * Weight: 1 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Eén moment alsjeblieft

- *
- *
- *
- *
- * - * Styleguide Examples.States.Loading - - * State 3a: Showing QR code (desktop) - * - * Weight: 2 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- * - *
- *
- *
- *
- * - * Styleguide Examples.States.Showing QR code - - * State 3b: Showing Yivi button (mobile) - * - * Weight: 3 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- * - *

Toon QR code

- *
- *
- *
- *
- * - * Styleguide Examples.States.Showing Yivi button - - * State 4: Pairing - * - * Weight: 4 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Vul de koppelcode in die in je Yivi-app verschijnt. - *

- * - * - * - * - *
- * - * - * - *
- *
- *
- *
- *
- * - * Styleguide Examples.States.Pairing - - * State 5: Code scanned, continue on phone - * - * Weight: 5 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Volg de instructies in de Yivi app

- *
- *
- *
- *
- * - * Styleguide Examples.States.Code scanned, continue on phone - - * State 6: Disclosure cancelled - * - * Weight: 6 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen

- *

Opnieuw proberen

- *
- *
- *
- *
- * - * Styleguide Examples.States.Disclosure cancelled - - * State 7: Disclosure timed out - * - * Weight: 7 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Sorry! We hebben te lang
niks van je gehoord

- *

Opnieuw proberen

- *
- *
- *
- *
- * - * Styleguide Examples.States.Disclosure timed out - - * State 8: Disclosure errored - * - * Weight: 8 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Sorry! Er is een fout opgetreden

- *

Opnieuw proberen

- *
- *
- *
- *
- * - * Styleguide Examples.States.Disclosure errored - - * State 9: Browser is not supported - * - * Weight: 9 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Het spijt ons, maar je browser voldoet niet aan de minimale eisen

- *
- *
- *
- *
- * - * Styleguide Examples.States.Browser is not supported - - * State 10: Success - * - * Weight: 10 - * - * Markup: - *
- *
- *
- *

Ga verder met

- *
- *

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

- *
- *
- *
- *
- *
- *

Gelukt!

- *
- *
- *
- *
- * - * Styleguide Examples.States.Success - */ +/* +States + +Weight: 2 + +These examples show the different states that the disclosure flow can move +through. + +Styleguide Examples.States + +State 1: Uninitialised + +Weight: 0 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Eén moment alsjeblieft

+
+
+
+
+ +Styleguide Examples.States.Uninitialised + +State 2: Loading + +Weight: 1 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Eén moment alsjeblieft

+
+
+
+
+ +Styleguide Examples.States.Loading + +State 3a: Showing QR code (desktop) + +Weight: 2 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+ +
+
+
+
+ +Styleguide Examples.States.Showing QR code + +State 3b: Showing Yivi button (mobile) + +Weight: 3 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+ +

Toon QR code

+
+
+
+
+ +Styleguide Examples.States.Showing Yivi button + +State 4: Pairing + +Weight: 4 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Vul de koppelcode in die in je Yivi-app verschijnt. +

+ + + + +
+ + + +
+
+
+
+
+ +Styleguide Examples.States.Pairing + +State 5: Code scanned, continue on phone + +Weight: 5 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Volg de instructies in de Yivi app

+
+
+
+
+ +Styleguide Examples.States.Code scanned, continue on phone + +State 6: Disclosure cancelled + +Weight: 6 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen

+

Opnieuw proberen

+
+
+
+
+ +Styleguide Examples.States.Disclosure cancelled + +State 7: Disclosure timed out + +Weight: 7 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Sorry! We hebben te lang
niks van je gehoord

+

Opnieuw proberen

+
+
+
+
+ +Styleguide Examples.States.Disclosure timed out + +State 8: Disclosure errored + +Weight: 8 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Sorry! Er is een fout opgetreden

+

Opnieuw proberen

+
+
+
+
+ +Styleguide Examples.States.Disclosure errored + +State 9: Browser is not supported + +Weight: 9 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Het spijt ons, maar je browser voldoet niet aan de minimale eisen

+
+
+
+
+ +Styleguide Examples.States.Browser is not supported + +State 10: Success + +Weight: 10 + +Markup: +
+
+
+

Ga verder met

+
+

Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.

+
+
+
+
+
+

Gelukt!

+
+
+
+
+ +Styleguide Examples.States.Success +*/ diff --git a/yivi-css/src/layouts/center.scss b/yivi-css/src/layouts/center.scss index f2f724b..797d62a 100644 --- a/yivi-css/src/layouts/center.scss +++ b/yivi-css/src/layouts/center.scss @@ -1,14 +1,15 @@ -/* Center - * - * Center the content in its parent. Both vertically and horizontally. - * - * Markup: - *
- *
- *
- * - * Styleguide Layouts.Center - */ +/* +Center + +Center the content in its parent. Both vertically and horizontally. + +Markup: +
+
+
+ +Styleguide Layouts.Center +*/ @import '../mixins/reset', '../mixins/center'; diff --git a/yivi-css/src/layouts/index.scss b/yivi-css/src/layouts/index.scss index 0b27361..3c65ad7 100644 --- a/yivi-css/src/layouts/index.scss +++ b/yivi-css/src/layouts/index.scss @@ -1,8 +1,9 @@ -/* Layouts - * - * Weight: 3 - * - * Styleguide Layouts - */ +/* +Layouts + +Weight: 3 + +Styleguide Layouts +*/ @import 'center', 'popup'; diff --git a/yivi-css/src/layouts/popup.scss b/yivi-css/src/layouts/popup.scss index 53461dc..d8e7c17 100644 --- a/yivi-css/src/layouts/popup.scss +++ b/yivi-css/src/layouts/popup.scss @@ -1,17 +1,18 @@ -/* Popup - * - * Overlay content over the page - * - * Markup: - *
- *
- * - *
- *
- * - * - * Styleguide Layouts.Popup - */ +/* +Popup + +Overlay content over the page + +Markup: +
+
+ +
+
+ + +Styleguide Layouts.Popup +*/ @import '../mixins/reset', '../mixins/center', '../mixins/animation'; diff --git a/yivi-css/src/mixins/animation.scss b/yivi-css/src/mixins/animation.scss index 62e7222..9744945 100644 --- a/yivi-css/src/mixins/animation.scss +++ b/yivi-css/src/mixins/animation.scss @@ -1,22 +1,23 @@ -/* Animation - * - * These are some really simple mixins to write clean and DRY animations and - * leave the annoying vendor specific prefixing to the mixin. - * - * Styleguide Mixins.Animation - - * animation($animation) - * - * A mixin for vendor prefixing the `animation` declaration - * - * ```css - * .complicated-element { - * @include animation(animation-name 2s infinite linear); - * } - * ``` - * - * Styleguide Mixins.Animation.animation - */ +/* +Animation + +These are some really simple mixins to write clean and DRY animations and +leave the annoying vendor specific prefixing to the mixin. + +Styleguide Mixins.Animation + +animation($animation) + +A mixin for vendor prefixing the `animation` declaration + +```css +.complicated-element { + @include animation(animation-name 2s infinite linear); +} +``` + +Styleguide Mixins.Animation.animation +*/ @mixin animation($animation) { -ms-animation: $animation; @@ -24,18 +25,19 @@ animation: $animation; } -/* animation-delay($delay) - * - * A mixin for vendor prefixing the `animation-delay` declaration - * - * ```css - * .complicated-element { - * @include animation-delay(2s); - * } - * ``` - * - * Styleguide Mixins.Animation.animation-delay - */ +/* +animation-delay($delay) + +A mixin for vendor prefixing the `animation-delay` declaration + +```css +.complicated-element { + @include animation-delay(2s); +} +``` + +Styleguide Mixins.Animation.animation-delay +*/ @mixin animation-delay($delay) { -ms-animation-delay: $delay; @@ -43,18 +45,19 @@ animation-delay: $delay; } -/* keyframes($name) { ... } - * - * A mixin for vendor prefixing the `@keyframes` declaration - * - * ```css - * @include keyframes(animation-name) { - * // Your animation here - * } - * ``` - * - * Styleguide Mixins.Animation.keyframes - */ +/* +keyframes($name) { ... } + +A mixin for vendor prefixing the `@keyframes` declaration + +```css +@include keyframes(animation-name) { + // Your animation here +} +``` + +Styleguide Mixins.Animation.keyframes +*/ @mixin keyframes($name) { @-ms-keyframes #{$name} { @@ -68,18 +71,19 @@ } } -/* transition($props); - * - * A mixin for vendor prefixing transitions - * - * ```css - * .complicated-element { - * @include transition(transform 0.2s ease-in-out); - * } - * ``` - * - * Styleguide Mixins.Animation.transition - */ +/* +transition($props); + +A mixin for vendor prefixing transitions + +```css +.complicated-element { + @include transition(transform 0.2s ease-in-out); +} +``` + +Styleguide Mixins.Animation.transition +*/ @mixin transition($props) { -webkit-transition: -webkit-#{$props}; diff --git a/yivi-css/src/mixins/center.scss b/yivi-css/src/mixins/center.scss index bec50a7..992d86f 100644 --- a/yivi-css/src/mixins/center.scss +++ b/yivi-css/src/mixins/center.scss @@ -1,15 +1,16 @@ -/* Center - * - * Center the content in this element. Both vertically and horizontally. - * - * ```css - * .complicated-element { - * @include center; - * } - * ``` - * - * Styleguide Mixins.Center - */ +/* +Center + +Center the content in this element. Both vertically and horizontally. + +```css +.complicated-element { + @include center; +} +``` + +Styleguide Mixins.Center +*/ @mixin center { display: flex; diff --git a/yivi-css/src/mixins/fonts.scss b/yivi-css/src/mixins/fonts.scss index 3af5945..8eaede4 100644 --- a/yivi-css/src/mixins/fonts.scss +++ b/yivi-css/src/mixins/fonts.scss @@ -1,19 +1,20 @@ -/* font($family:, $size:, $color:) - * - * Set the default styling for font family and size. - * - * ```css - * p { - * @include font; - * } - * ``` - * - * $family - The font family, defaults to $default-font - * $size - The font size, defaults to $default-font-size - * $color - The color to use for the font, defaults to $text-color - * - * Styleguide Mixins.fonts - */ +/* +font($family:, $size:, $color:) + +Set the default styling for font family and size. + +```css +p { + @include font; +} +``` + +$family - The font family, defaults to $default-font +$size - The font size, defaults to $default-font-size +$color - The color to use for the font, defaults to $text-color + +Styleguide Mixins.fonts +*/ @import '../variables/fonts', '../variables/colours'; diff --git a/yivi-css/src/mixins/index.scss b/yivi-css/src/mixins/index.scss index eb71874..5abddc4 100644 --- a/yivi-css/src/mixins/index.scss +++ b/yivi-css/src/mixins/index.scss @@ -1,8 +1,9 @@ -/* Mixins - * - * Weight: 2 - * - * Styleguide Mixins - */ +/* +Mixins + +Weight: 2 + +Styleguide Mixins +*/ @import 'fonts', 'reset', 'responsiveness', 'animation', 'center'; diff --git a/yivi-css/src/mixins/reset.scss b/yivi-css/src/mixins/reset.scss index ba59cb6..3fc8674 100644 --- a/yivi-css/src/mixins/reset.scss +++ b/yivi-css/src/mixins/reset.scss @@ -1,17 +1,18 @@ -/* reset($children-too: false) - * - * A mixin that resets margin, background color, padding and box-sizing to reliable defaults on the given element (and optionally all its children). - * - * ```css - * .complicated-element { - * @include reset; - * } - * ``` - * - * $children-too - Apply the reset to all the element's children too. Defaults to false. Only use this option if you are sure that no unknown components can ever be a child of your element. - * - * Styleguide Mixins.reset - */ +/* +reset($children-too: false) + +A mixin that resets margin, background color, padding and box-sizing to reliable defaults on the given element (and optionally all its children). + +```css +.complicated-element { + @include reset; +} +``` + +$children-too - Apply the reset to all the element's children too. Defaults to false. Only use this option if you are sure that no unknown components can ever be a child of your element. + +Styleguide Mixins.reset +*/ @mixin _reset { background-color: inherit; diff --git a/yivi-css/src/mixins/responsiveness.scss b/yivi-css/src/mixins/responsiveness.scss index c2da3f0..4bc72c3 100644 --- a/yivi-css/src/mixins/responsiveness.scss +++ b/yivi-css/src/mixins/responsiveness.scss @@ -1,24 +1,26 @@ -/* Responsiveness - * - * We'll probably want to revisit this some time soon, but for now it will get us going. - * - * Styleguide Mixins.Responsiveness - */ +/* +Responsiveness + +We'll probably want to revisit this some time soon, but for now it will get us going. + +Styleguide Mixins.Responsiveness +*/ $display-cutoff-point: 768px; -/* on-small-touchscreen {} - * - * Mixin to specify styling that is only applicable to touchscreen devices with a maximum screen width of 768 pixels. - * - * ```css - * @include on-small-touchscreen { - * // Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-small-touchscreen - */ +/* +on-small-touchscreen {} + +Mixin to specify styling that is only applicable to touchscreen devices with a maximum screen width of 768 pixels. + +```css +@include on-small-touchscreen { + // Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-small-touchscreen +*/ @mixin on-small-touchscreen { @media screen and (max-width: $display-cutoff-point) and (pointer: coarse) { @@ -26,18 +28,19 @@ $display-cutoff-point: 768px; } } -/* on-large-touchscreen {} - * - * Mixin to specify styling that is only applicable to touchscreen devices with a minimum screen width of 768 pixels. - * - * ```css - * @include on-large-touchscreen { - * // Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-large-touchscreen - */ +/* +on-large-touchscreen {} + +Mixin to specify styling that is only applicable to touchscreen devices with a minimum screen width of 768 pixels. + +```css +@include on-large-touchscreen { + // Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-large-touchscreen +*/ @mixin on-large-touchscreen { @media screen and (min-width: ($display-cutoff-point - 1)) and (pointer: coarse) { @@ -45,18 +48,19 @@ $display-cutoff-point: 768px; } } -/* on-small-computer {} - * - * Mixin to specify styling that is only applicable to devices that have a mouse pointer with a maximum screen width of 768 pixels. - * - * ```css - * @include on-small-computer { - * // Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-small-computer - */ +/* +on-small-computer {} + +Mixin to specify styling that is only applicable to devices that have a mouse pointer with a maximum screen width of 768 pixels. + +```css +@include on-small-computer { + // Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-small-computer +*/ @mixin on-small-computer { @media screen and (max-width: $display-cutoff-point) and (pointer: fine) { @@ -64,18 +68,19 @@ $display-cutoff-point: 768px; } } -/* on-large-computer {} - * - * Mixin to specify styling that is only applicable to devices that have a mouse pointer with a minimum screen width of 768 pixels. - * - * ```css - * @include on-large-computer { - * * Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-large-computer - */ +/* +on-large-computer {} + +Mixin to specify styling that is only applicable to devices that have a mouse pointer with a minimum screen width of 768 pixels. + +```css +@include on-large-computer { + Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-large-computer +*/ @mixin on-large-computer { @media screen and (min-width: ($display-cutoff-point - 1)) and (pointer: fine) { @@ -83,18 +88,19 @@ $display-cutoff-point: 768px; } } -/* on-small-screen {} - * - * Mixin to specify styling that is only applicable to devices that have a maximum screen width of 768 pixels. - * - * ```css - * @include on-small-screen { - * * Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-small-screen - */ +/* +on-small-screen {} + +Mixin to specify styling that is only applicable to devices that have a maximum screen width of 768 pixels. + +```css +@include on-small-screen { + Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-small-screen +*/ @mixin on-small-screen { @media screen and (max-width: $display-cutoff-point) { @@ -102,18 +108,19 @@ $display-cutoff-point: 768px; } } -/* on-large-screen {} - * - * Mixin to specify styling that is only applicable to devices that have a minimum screen width of 768 pixels. - * - * ```css - * @include on-large-screen { - * // Styling to apply - * } - * ``` - * - * Styleguide Mixins.Responsiveness.on-large-screen - */ +/* +on-large-screen {} + +Mixin to specify styling that is only applicable to devices that have a minimum screen width of 768 pixels. + +```css +@include on-large-screen { + // Styling to apply +} +``` + +Styleguide Mixins.Responsiveness.on-large-screen +*/ @mixin on-large-screen { @media screen and (min-width: ($display-cutoff-point + 1)) { diff --git a/yivi-css/src/mixins/svg-url.scss b/yivi-css/src/mixins/svg-url.scss index d2b1da3..246da16 100644 --- a/yivi-css/src/mixins/svg-url.scss +++ b/yivi-css/src/mixins/svg-url.scss @@ -28,22 +28,22 @@ $chunk: str-replace($chunk, '>', '%3E'); /* - * The maybe list - * - * Keep size and compile time down - * ... only add on documented fail - * - * $chunk: str-replace($chunk, '|', '%7C'); - * $chunk: str-replace($chunk, '[', '%5B'); - * $chunk: str-replace($chunk, ']', '%5D'); - * $chunk: str-replace($chunk, '^', '%5E'); - * $chunk: str-replace($chunk, '`', '%60'); - * $chunk: str-replace($chunk, ';', '%3B'); - * $chunk: str-replace($chunk, '?', '%3F'); - * $chunk: str-replace($chunk, ':', '%3A'); - * $chunk: str-replace($chunk, '@', '%40'); - * $chunk: str-replace($chunk, '=', '%3D'); - */ + The maybe list + + Keep size and compile time down + ... only add on documented fail + + $chunk: str-replace($chunk, '|', '%7C'); + $chunk: str-replace($chunk, '[', '%5B'); + $chunk: str-replace($chunk, ']', '%5D'); + $chunk: str-replace($chunk, '^', '%5E'); + $chunk: str-replace($chunk, '`', '%60'); + $chunk: str-replace($chunk, ';', '%3B'); + $chunk: str-replace($chunk, '?', '%3F'); + $chunk: str-replace($chunk, ':', '%3A'); + $chunk: str-replace($chunk, '@', '%40'); + $chunk: str-replace($chunk, '=', '%3D'); + */ $encoded: #{$encoded}#{$chunk}; $index: $index + $slice; diff --git a/yivi-css/src/variables/colours.scss b/yivi-css/src/variables/colours.scss index 92c5911..dedfd89 100644 --- a/yivi-css/src/variables/colours.scss +++ b/yivi-css/src/variables/colours.scss @@ -1,20 +1,21 @@ -/* Colours - * - * Styleguide Variables.colours - - * Colours from the Yivi app - * - * $yivi-anthracite - #484747; Yivi anthracite - * $yivi-link-blue - #00508a; Yivi link blue - * $yivi-green - #00973a; Yivi green - * $yivi-light-blue - #dcecf5; Yivi light blue - * $yivi-red - #e12747; Yivi red - * $yivi-grey - #eae5e2; Yivi grey - * - * Weight: 1 - * - * Styleguide Variables.colours.app - */ +/* +Colours + +Styleguide Variables.colours + +Colours from the Yivi app + +$yivi-anthracite - #484747; Yivi anthracite +$yivi-link-blue - #00508a; Yivi link blue +$yivi-green - #00973a; Yivi green +$yivi-light-blue - #dcecf5; Yivi light blue +$yivi-red - #e12747; Yivi red +$yivi-grey - #eae5e2; Yivi grey + +Weight: 1 + +Styleguide Variables.colours.app +*/ $yivi-anthracite: #484747; $yivi-link-blue: #00508a; @@ -23,38 +24,40 @@ $yivi-light-blue: #dcecf5; $yivi-red: #e12747; $yivi-grey: #eae5e2; -/* Colours for interface elements - * - * $background-color - #dcecf5; For the background - * $helper-color - #dcecf5; For the helper background - * $content-bg-color - #ffffff; For background of the actual content - * $button-color - #e12747; For the background of the buttons - * - * Weight: 1 - * - * Styleguide Variables.colours.app - - * From out to in: - */ +/* +Colours for interface elements + +$background-color - #dcecf5; For the background +$helper-color - #dcecf5; For the helper background +$content-bg-color - #ffffff; For background of the actual content +$button-color - #e12747; For the background of the buttons + +Weight: 1 + +Styleguide Variables.colours.app + +From out to in: +*/ $background-color: $yivi-light-blue; $helper-color: $yivi-light-blue; $content-bg-color: white; $button-color: $yivi-red; -/* Text colours - * - * For the fonts - * - * $header-text-color - #484747; For the header text - * $content-text-color - #484747; For the content text - * $content-link-color - #00508a; For links in the content - * $content-link-color-hover - #484747; For the hover state on links in the content - * $button-text-color - #ffffff; For the button foreground text - * - * Weight: 2 - * - * Styleguide Variables.colours.text - */ +/* +Text colours + +For the fonts + +$header-text-color - #484747; For the header text +$content-text-color - #484747; For the content text +$content-link-color - #00508a; For links in the content +$content-link-color-hover - #484747; For the hover state on links in the content +$button-text-color - #ffffff; For the button foreground text + +Weight: 2 + +Styleguide Variables.colours.text +*/ $header-text-color: $yivi-anthracite; $content-text-color: $yivi-anthracite; diff --git a/yivi-css/src/variables/fonts.scss b/yivi-css/src/variables/fonts.scss index 0979ebc..5fec573 100644 --- a/yivi-css/src/variables/fonts.scss +++ b/yivi-css/src/variables/fonts.scss @@ -1,9 +1,10 @@ -/* Fonts - * - * We use Roboto as default font, with Tahoma and Arial as fall-back options. - * As Roboto is a custom font, it is only used if it is imported by the website explicitly. - * - * Styleguide Variables.fonts - */ +/* +Fonts + +We use Roboto as default font, with Tahoma and Arial as fall-back options. +As Roboto is a custom font, it is only used if it is imported by the website explicitly. + +Styleguide Variables.fonts +*/ $default-font: 'Open Sans', 'Roboto', Tahoma, Arial, sans-serif; $default-font-size: 16px; diff --git a/yivi-css/src/variables/index.scss b/yivi-css/src/variables/index.scss index 098dea8..63a1885 100644 --- a/yivi-css/src/variables/index.scss +++ b/yivi-css/src/variables/index.scss @@ -1,8 +1,9 @@ -/* Variables - * - * Weight: 1 - * - * Styleguide Variables - */ +/* +Variables + +Weight: 1 + +Styleguide Variables +*/ @import 'colours', 'fonts', 'sizes'; diff --git a/yivi-css/src/variables/sizes.scss b/yivi-css/src/variables/sizes.scss index 87c4842..9b06351 100644 --- a/yivi-css/src/variables/sizes.scss +++ b/yivi-css/src/variables/sizes.scss @@ -1,10 +1,11 @@ -/* Sizes - * - * These variables contain the dimensions of different aspects of the - * components. See source file for definitions. - * - * Styleguide Variables.sizes - */ +/* +Sizes + +These variables contain the dimensions of different aspects of the +components. See source file for definitions. + +Styleguide Variables.sizes +*/ $border-radius: 8px; $button-border-radius: 8px;