From fc1d1b28fb2a00c9f8c17c98e84923757e372eb8 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Tue, 22 Oct 2019 16:35:14 -0700 Subject: [PATCH 1/2] Add Zap component (#511) --- CHANGELOG.md | 3 ++- src/assets/sass/protocol/components/_zap.scss | 24 ++++++++++++++++++ .../sass/protocol/includes/_mixins.scss | 1 + .../sass/protocol/includes/mixins/_zap.scss | 23 +++++++++++++++++ src/assets/sass/protocol/protocol-extra.scss | 1 + src/pages/demos/zap.hbs | 23 +++++++++++++++++ src/patterns/atoms/zap/text.hbs | 25 +++++++++++++++++++ 7 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/assets/sass/protocol/components/_zap.scss create mode 100644 src/assets/sass/protocol/includes/mixins/_zap.scss create mode 100644 src/pages/demos/zap.hbs create mode 100644 src/patterns/atoms/zap/text.hbs diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fe42c82a..3d1293195 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## HEAD -* **css:** Rename `mzp-c-box-emphasis` to `mzp-c-emphasis-box` (#489) +* **css:** Add Zap component (#511) +* **css:** (breaking) Rename `mzp-c-box-emphasis` to `mzp-c-emphasis-box` (#489) * **assets:** Update @mozilla-protocol/assets to 3.0.1 (#509) * **css:** CTA links now use text underlines instead of borders (#490) diff --git a/src/assets/sass/protocol/components/_zap.scss b/src/assets/sass/protocol/components/_zap.scss new file mode 100644 index 000000000..22ff8ea59 --- /dev/null +++ b/src/assets/sass/protocol/components/_zap.scss @@ -0,0 +1,24 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. + + +@import '../protocol/includes/lib'; + +[class*=" mzp-t-zap"], [class^=mzp-t-zap] strong { + @include zap('#{$image-path}/zaps/zap-01.svg'); +} + +@for $num from 2 through 18 { + .mzp-t-zap-#{$num} strong { + // add leading zero if necessary + $zero: ''; + @if $num < 10 { + $zero: 0; + } + + &::after { + background-image: url('#{$image-path}/zaps/zap-#{$zero}#{$num}.svg'); + } + } +} diff --git a/src/assets/sass/protocol/includes/_mixins.scss b/src/assets/sass/protocol/includes/_mixins.scss index 7899a34c7..a16390fa0 100644 --- a/src/assets/sass/protocol/includes/_mixins.scss +++ b/src/assets/sass/protocol/includes/_mixins.scss @@ -8,6 +8,7 @@ 'mixins/grid', 'mixins/images', 'mixins/bidi', + 'mixins/zap', 'mixins/typography'; diff --git a/src/assets/sass/protocol/includes/mixins/_zap.scss b/src/assets/sass/protocol/includes/mixins/_zap.scss new file mode 100644 index 000000000..9b13b4348 --- /dev/null +++ b/src/assets/sass/protocol/includes/mixins/_zap.scss @@ -0,0 +1,23 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. + +/* -------------------------------------------------------------------------- */ +// Zap + +@mixin zap($img) { + position: relative; + + &:after { + background-image: url('#{$img}'); + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + display: block; + height: 0.3em; + left: -0.2em; + position: absolute; + top: calc(100% - 0.15em); + width: calc(100% + 0.4em); + } +} diff --git a/src/assets/sass/protocol/protocol-extra.scss b/src/assets/sass/protocol/protocol-extra.scss index 8f94999b3..7b25f944e 100644 --- a/src/assets/sass/protocol/protocol-extra.scss +++ b/src/assets/sass/protocol/protocol-extra.scss @@ -21,5 +21,6 @@ $image-path: '../img' !default; @import '../protocol/components/notification-bar'; @import '../protocol/components/picto-card'; @import '../protocol/components/sidebar-menu'; +@import '../protocol/components/zap'; @import '../protocol/templates/card-layout'; @import '../protocol/templates/main-with-sidebar'; diff --git a/src/pages/demos/zap.hbs b/src/pages/demos/zap.hbs new file mode 100644 index 000000000..d7c0eb2d9 --- /dev/null +++ b/src/pages/demos/zap.hbs @@ -0,0 +1,23 @@ +--- +title: Zap Styles +notes: All 18 zap styles +--- + +

one

+

two

+

three

+

four

+

five

+

six

+

seven

+

eight

+

nine

+

ten

+

eleven

+

twelve

+

thirteen

+

fourteen

+

fifteen

+

sixteen

+

seventeen

+

eighteen

diff --git a/src/patterns/atoms/zap/text.hbs b/src/patterns/atoms/zap/text.hbs new file mode 100644 index 000000000..8f9387837 --- /dev/null +++ b/src/patterns/atoms/zap/text.hbs @@ -0,0 +1,25 @@ +--- +name: Zap +description: | + The zap is a florish that can be added to Firefox themed sites to give emphasis to one word. +order: 1 +notes: | + For localization purposes the theme class for the zap goes on the parent element and the zap is applied to any child `` tags. + + Add the class `mzp-t-zap-1`, and change the number `1` to the number of the zap you want. There are 18 zaps to choose from. + + If you want to apply the zap in a different manner, or use a zap that's not one of the default ones you can use the `zap('zap.svg')` mixin. +tips: | + - zaps cannot they cannot break to a new line, so they should only be put on one word + - the zap is flexable! it can be used on words of various sizes + - zaps will work best on large text + - zaps with a lot of detail don't work as well on short words +links: + See all 18 zaps: /demos/zap.html +--- + +

Here is a zap one example.

+ +

Here is a zap three example.

+ +

Here is a zap twelve example.

From 1e8bb47ab2eb9ba7530d498e01391e4557f3fdd9 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Tue, 29 Oct 2019 10:55:10 -0700 Subject: [PATCH 2/2] review fixes --- src/assets/sass/protocol/components/_zap.scss | 4 +-- src/pages/demos/zap.hbs | 36 +++++++++---------- src/patterns/atoms/zap/text.hbs | 12 +++---- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/assets/sass/protocol/components/_zap.scss b/src/assets/sass/protocol/components/_zap.scss index 22ff8ea59..5fb56e6f3 100644 --- a/src/assets/sass/protocol/components/_zap.scss +++ b/src/assets/sass/protocol/components/_zap.scss @@ -5,12 +5,12 @@ @import '../protocol/includes/lib'; -[class*=" mzp-t-zap"], [class^=mzp-t-zap] strong { +[class*="mzp-has-zap"] strong { @include zap('#{$image-path}/zaps/zap-01.svg'); } @for $num from 2 through 18 { - .mzp-t-zap-#{$num} strong { + .mzp-has-zap-#{$num} strong { // add leading zero if necessary $zero: ''; @if $num < 10 { diff --git a/src/pages/demos/zap.hbs b/src/pages/demos/zap.hbs index d7c0eb2d9..e293b8dd2 100644 --- a/src/pages/demos/zap.hbs +++ b/src/pages/demos/zap.hbs @@ -3,21 +3,21 @@ title: Zap Styles notes: All 18 zap styles --- -

one

-

two

-

three

-

four

-

five

-

six

-

seven

-

eight

-

nine

-

ten

-

eleven

-

twelve

-

thirteen

-

fourteen

-

fifteen

-

sixteen

-

seventeen

-

eighteen

+

one

+

two

+

three

+

four

+

five

+

six

+

seven

+

eight

+

nine

+

ten

+

eleven

+

twelve

+

thirteen

+

fourteen

+

fifteen

+

sixteen

+

seventeen

+

eighteen

diff --git a/src/patterns/atoms/zap/text.hbs b/src/patterns/atoms/zap/text.hbs index 8f9387837..5c213f898 100644 --- a/src/patterns/atoms/zap/text.hbs +++ b/src/patterns/atoms/zap/text.hbs @@ -6,20 +6,20 @@ order: 1 notes: | For localization purposes the theme class for the zap goes on the parent element and the zap is applied to any child `` tags. - Add the class `mzp-t-zap-1`, and change the number `1` to the number of the zap you want. There are 18 zaps to choose from. + Add the class `mzp-has-zap-1`, and change the number `1` to the number of the zap you want. There are 18 zaps to choose from. If you want to apply the zap in a different manner, or use a zap that's not one of the default ones you can use the `zap('zap.svg')` mixin. tips: | - - zaps cannot they cannot break to a new line, so they should only be put on one word - - the zap is flexable! it can be used on words of various sizes + - zaps cannot break to a new line, so they should only be put on one word + - the zap is flexible! it can be used on words of various sizes - zaps will work best on large text - zaps with a lot of detail don't work as well on short words links: See all 18 zaps: /demos/zap.html --- -

Here is a zap one example.

+

Here is a zap one example.

-

Here is a zap three example.

+

Here is a zap three example.

-

Here is a zap twelve example.

+

Here is a zap twelve example.