From a6a3d17f5e405d9101bf5658dccadb27c096cd74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Fri, 27 Sep 2019 13:37:11 +0200 Subject: [PATCH 1/7] wip(): Structure --- src/_includes/components/media-icon.html | 9 +++++++++ src/styleguide.md | 2 ++ 2 files changed, 11 insertions(+) create mode 100644 src/_includes/components/media-icon.html diff --git a/src/_includes/components/media-icon.html b/src/_includes/components/media-icon.html new file mode 100644 index 0000000000..9118e70c97 --- /dev/null +++ b/src/_includes/components/media-icon.html @@ -0,0 +1,9 @@ + + + {% include_relative assets/icons/{{ include.type }}.svg %} + +
+ {{ include.content }} +
+ {{ include.content }} + diff --git a/src/styleguide.md b/src/styleguide.md index 1da5c8b301..f4949e6bd2 100644 --- a/src/styleguide.md +++ b/src/styleguide.md @@ -25,3 +25,5 @@ layout: page - Subitem - Subitem * Item + +{% include components/media-icon.html href="#" icon="media-icons/owl" title="Title" content="This is my sample note." %} From f9207ac9d463a76544e1e086b54e6f4ec8b57b2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Mon, 30 Sep 2019 10:06:07 +0200 Subject: [PATCH 2/7] wip() --- src/_includes/components/media-icon.html | 31 +++++-- src/_sass/_variables.scss | 2 + src/_sass/components/_media-icon.scss | 100 +++++++++++++++++++++++ src/_sass/segment.scss | 4 + src/assets/icons/anchor.svg | 3 + src/assets/icons/media/owl.svg | 8 ++ src/styleguide.md | 3 +- 7 files changed, 141 insertions(+), 10 deletions(-) create mode 100644 src/_sass/components/_media-icon.scss create mode 100644 src/assets/icons/anchor.svg create mode 100644 src/assets/icons/media/owl.svg diff --git a/src/_includes/components/media-icon.html b/src/_includes/components/media-icon.html index 9118e70c97..0d352be7c0 100644 --- a/src/_includes/components/media-icon.html +++ b/src/_includes/components/media-icon.html @@ -1,9 +1,22 @@ - - - {% include_relative assets/icons/{{ include.type }}.svg %} - -
- {{ include.content }} -
- {{ include.content }} - +
+ + + {% include_relative assets/icons/{{ include.icon }}.svg %} + +
{{ include.title }}
+
+ {{ include.content }} + + {% if include.variant == 'large' %} + + {{ include.excerpt }} + + {% endif %} +
+ {% if include.variant == 'large' %} +
+ {% include_relative assets/icons/anchor.svg %} +
+ {% endif %} + +
diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss index 4df2f2faee..92b58e8bc7 100644 --- a/src/_sass/_variables.scss +++ b/src/_sass/_variables.scss @@ -23,10 +23,12 @@ $color-values: ( primary: #1dc989, primary-dark: #1eb57d, + primary-light: #52bd95, secondary: #1f477d, secondary-dark: #435a6f, gray-light: #f7f9fa, gray: #a5b0ba, + border-gray: #edf0ed, code-gray: #435a6f, code-green: #52bd95, code-blue: #2e98df, diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss new file mode 100644 index 0000000000..e277f0984b --- /dev/null +++ b/src/_sass/components/_media-icon.scss @@ -0,0 +1,100 @@ +.media-icon { + $this: &; + + border: 1px solid color(border-gray); + background-color: color(white); + transition: 0.3s box-shadow; + border-radius: 8px; + + &__inner { + position: relative; + display: flex; + flex-wrap: wrap; + padding: 20px 15px; + width: 100%; + color: color(secondary-dark); + + @include breakpoint(medium up) { + padding: 24px; + padding-bottom: 32px; + } + } + + &:hover { + box-shadow: 0 8px 16px 0 rgba(18, 66, 74, 0.08); + + #{$this}__icon { + background-color: rgba(color(primary-light), 0.16); + } + + svg > * { + fill: color(primary); + transition: 0.3s fill; + } + } + + &__icon { + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + border-radius: 8px; + background-color: color(gray-light); + transition: 0.3s background; + + @include breakpoint(medium up) { + width: 64px; + height: 64px; + } + + svg { + width: 32px; + max-height: 32px; + } + } + + &__heading { + padding: 0 15px; + display: flex; + align-items: center; + } + + a { + text-decoration: none; + } + + &__content { + font-size: 14px; + color: color(secondary-dark); + } + + &__anchor { + svg { + display: none; + height: 16px; + + @include breakpoint(medium up) { + display: block; + } + } + + @include breakpoint(medium up) { + position: absolute; + top: 50px; + right: 25px; + } + } + + &__excerpt { + font-size: 14px; + font-weight: 500; + line-height: 1.43; + color: color(primary); + text-decoration: underline; + + @include breakpoint(medium up) { + display: none; + } + } +} diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss index 3b89908acc..631f5d6e19 100644 --- a/src/_sass/segment.scss +++ b/src/_sass/segment.scss @@ -32,3 +32,7 @@ @import "elements/h"; @import "elements/ul"; @import "elements/ol"; + +// Components +// ================================================= +@import "components/media-icon"; \ No newline at end of file diff --git a/src/assets/icons/anchor.svg b/src/assets/icons/anchor.svg new file mode 100644 index 0000000000..b25d830053 --- /dev/null +++ b/src/assets/icons/anchor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/media/owl.svg b/src/assets/icons/media/owl.svg new file mode 100644 index 0000000000..89457c6a71 --- /dev/null +++ b/src/assets/icons/media/owl.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/styleguide.md b/src/styleguide.md index f4949e6bd2..2089f36b56 100644 --- a/src/styleguide.md +++ b/src/styleguide.md @@ -26,4 +26,5 @@ layout: page - Subitem * Item -{% include components/media-icon.html href="#" icon="media-icons/owl" title="Title" content="This is my sample note." %} +{% include components/media-icon.html variant="small" href="#" icon="media/owl" title="Title" content="This is my sample note." %} +{% include components/media-icon.html variant="large" href="#" icon="media/owl" title="Title" content="This is my sample note." excerpt="Read more" excerpt-link="#" %} From 6c57da858bbfb3e576d17d753ad982bd8dffca45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Mon, 30 Sep 2019 15:27:41 +0200 Subject: [PATCH 3/7] feat(): Introduce media icon --- src/_includes/components/steps-list.html | 0 src/_sass/components/_media-icon.scss | 71 ++++++++++++++++--- src/_sass/components/_steps-list.scss | 0 src/_sass/segment.scss | 5 +- .../icons/media/{owl.svg => academy.svg} | 0 src/assets/icons/media/connections.svg | 9 +++ src/assets/icons/media/guides.svg | 3 + src/assets/icons/media/partners.svg | 6 ++ src/assets/icons/media/personas.svg | 6 ++ src/assets/icons/media/privacy.svg | 3 + src/assets/icons/media/protocols.svg | 6 ++ src/assets/icons/media/web-app.svg | 21 ++++++ src/styleguide.md | 7 +- 13 files changed, 118 insertions(+), 19 deletions(-) create mode 100644 src/_includes/components/steps-list.html create mode 100644 src/_sass/components/_steps-list.scss rename src/assets/icons/media/{owl.svg => academy.svg} (100%) create mode 100644 src/assets/icons/media/connections.svg create mode 100644 src/assets/icons/media/guides.svg create mode 100644 src/assets/icons/media/partners.svg create mode 100644 src/assets/icons/media/personas.svg create mode 100644 src/assets/icons/media/privacy.svg create mode 100644 src/assets/icons/media/protocols.svg create mode 100644 src/assets/icons/media/web-app.svg diff --git a/src/_includes/components/steps-list.html b/src/_includes/components/steps-list.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss index e277f0984b..375b182f1d 100644 --- a/src/_sass/components/_media-icon.scss +++ b/src/_sass/components/_media-icon.scss @@ -8,11 +8,14 @@ &__inner { position: relative; - display: flex; - flex-wrap: wrap; - padding: 20px 15px; + padding: 15px; width: 100%; color: color(secondary-dark); + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: repeat(3, auto); + grid-template-areas: "\31 \32 " "\31 \33 " "\34 \34 "; + column-gap: 15px; @include breakpoint(medium up) { padding: 24px; @@ -20,6 +23,10 @@ } } + svg > * { + transition: 0.3s fill; + } + &:hover { box-shadow: 0 8px 16px 0 rgba(18, 66, 74, 0.08); @@ -29,7 +36,6 @@ svg > * { fill: color(primary); - transition: 0.3s fill; } } @@ -42,6 +48,7 @@ border-radius: 8px; background-color: color(gray-light); transition: 0.3s background; + grid-area: \31; @include breakpoint(medium up) { width: 64px; @@ -54,12 +61,6 @@ } } - &__heading { - padding: 0 15px; - display: flex; - align-items: center; - } - a { text-decoration: none; } @@ -67,6 +68,20 @@ &__content { font-size: 14px; color: color(secondary-dark); + padding-top: 15px; + grid-area: \34; + line-height: 1.57; + + @include breakpoint(medium up) { + padding-top: 0; + grid-area: \33; + } + } + + &__heading { + display: flex; + align-items: center; + grid-area: \32; } &__anchor { @@ -97,4 +112,40 @@ display: none; } } + + &--small { + #{$this}__inner { + display: flex; + flex-direction: column; + align-items: center; + + @include breakpoint(medium up) { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: repeat(3, auto); + grid-template-areas: "\31 \32 " "\31 \33 " "\34 \34 "; + } + } + + #{$this}__content { + text-align: center; + line-height: 1.33; + padding-top: 10px; + + @include breakpoint(medium up) { + text-align: left; + padding-top: 0; + } + } + + #{$this}__heading { + line-height: 1.33; + padding-top: 15px; + + @include breakpoint(medium up) { + text-align: left; + padding-top: 0; + } + } + } } diff --git a/src/_sass/components/_steps-list.scss b/src/_sass/components/_steps-list.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss index 5113165e4a..8dc41a1b1c 100644 --- a/src/_sass/segment.scss +++ b/src/_sass/segment.scss @@ -38,15 +38,12 @@ // Components // ================================================= -<<<<<<< HEAD @import "components/media-icon"; -======= @import "components/stage"; @import "components/logo"; @import "components/note"; @import "components/button-link"; -// Pages +// Pages // ================================================= @import "pages/docs"; ->>>>>>> develop diff --git a/src/assets/icons/media/owl.svg b/src/assets/icons/media/academy.svg similarity index 100% rename from src/assets/icons/media/owl.svg rename to src/assets/icons/media/academy.svg diff --git a/src/assets/icons/media/connections.svg b/src/assets/icons/media/connections.svg new file mode 100644 index 0000000000..36c0462d28 --- /dev/null +++ b/src/assets/icons/media/connections.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/media/guides.svg b/src/assets/icons/media/guides.svg new file mode 100644 index 0000000000..9413592d31 --- /dev/null +++ b/src/assets/icons/media/guides.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/media/partners.svg b/src/assets/icons/media/partners.svg new file mode 100644 index 0000000000..f8786d1cea --- /dev/null +++ b/src/assets/icons/media/partners.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/media/personas.svg b/src/assets/icons/media/personas.svg new file mode 100644 index 0000000000..8aea891ad4 --- /dev/null +++ b/src/assets/icons/media/personas.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/media/privacy.svg b/src/assets/icons/media/privacy.svg new file mode 100644 index 0000000000..9b0e209a5b --- /dev/null +++ b/src/assets/icons/media/privacy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/media/protocols.svg b/src/assets/icons/media/protocols.svg new file mode 100644 index 0000000000..4793ccce23 --- /dev/null +++ b/src/assets/icons/media/protocols.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/media/web-app.svg b/src/assets/icons/media/web-app.svg new file mode 100644 index 0000000000..9751ea4fe9 --- /dev/null +++ b/src/assets/icons/media/web-app.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styleguide.md b/src/styleguide.md index c63d9ce26e..03e97c4f0d 100644 --- a/src/styleguide.md +++ b/src/styleguide.md @@ -26,10 +26,8 @@ layout: page - Subitem * Item -<<<<<<< HEAD -{% include components/media-icon.html variant="small" href="#" icon="media/owl" title="Title" content="This is my sample note." %} -{% include components/media-icon.html variant="large" href="#" icon="media/owl" title="Title" content="This is my sample note." excerpt="Read more" excerpt-link="#" %} -======= +{% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="This is my sample note." %} +{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="This is my sample note." excerpt="Read more" excerpt-link="#" %} {% include components/button-link.html text="Find out more" href="https://segment.com" %} {% capture note %} @@ -41,4 +39,3 @@ layout: page Server-side data management is when tag sends data into your web server, then your web server passes that data to the destination system/server. {% endcapture %} {% include components/note.html title="Server-side tracking" content=server_side_tracking buttonTitle="Find out more" buttonHref="https://segment.com" %} ->>>>>>> develop From 558113ad218d2a20080811ead9086a37807b93a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Mon, 30 Sep 2019 16:17:25 +0200 Subject: [PATCH 4/7] refactor() --- src/_includes/components/steps-list.html | 0 src/_sass/components/_media-icon.scss | 12 ++++++------ src/assets/icons/media/web-app.svg | 25 +++++------------------- src/styleguide.md | 2 +- 4 files changed, 12 insertions(+), 27 deletions(-) delete mode 100644 src/_includes/components/steps-list.html diff --git a/src/_includes/components/steps-list.html b/src/_includes/components/steps-list.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss index 375b182f1d..42727d5a36 100644 --- a/src/_sass/components/_media-icon.scss +++ b/src/_sass/components/_media-icon.scss @@ -14,7 +14,7 @@ display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(3, auto); - grid-template-areas: "\31 \32 " "\31 \33 " "\34 \34 "; + grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile"; column-gap: 15px; @include breakpoint(medium up) { @@ -48,7 +48,7 @@ border-radius: 8px; background-color: color(gray-light); transition: 0.3s background; - grid-area: \31; + grid-area: icon; @include breakpoint(medium up) { width: 64px; @@ -69,19 +69,19 @@ font-size: 14px; color: color(secondary-dark); padding-top: 15px; - grid-area: \34; + grid-area: content-mobile; line-height: 1.57; @include breakpoint(medium up) { padding-top: 0; - grid-area: \33; + grid-area: content; } } &__heading { display: flex; align-items: center; - grid-area: \32; + grid-area: heading; } &__anchor { @@ -123,7 +123,7 @@ display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(3, auto); - grid-template-areas: "\31 \32 " "\31 \33 " "\34 \34 "; + grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile"; } } diff --git a/src/assets/icons/media/web-app.svg b/src/assets/icons/media/web-app.svg index 9751ea4fe9..e507d9085c 100644 --- a/src/assets/icons/media/web-app.svg +++ b/src/assets/icons/media/web-app.svg @@ -1,21 +1,6 @@ - - - - - - - - - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/src/styleguide.md b/src/styleguide.md index 03e97c4f0d..c1d72f830e 100644 --- a/src/styleguide.md +++ b/src/styleguide.md @@ -27,7 +27,7 @@ layout: page * Item {% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="This is my sample note." %} -{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="This is my sample note." excerpt="Read more" excerpt-link="#" %} +{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="This is my sample note." excerpt="Read more" %} {% include components/button-link.html text="Find out more" href="https://segment.com" %} {% capture note %} From 186b2471e3fc3460e4c0de418b605482174b9a58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Mon, 30 Sep 2019 17:16:05 +0200 Subject: [PATCH 5/7] refactor() --- src/_sass/components/_media-icon.scss | 52 +++++++++++++-------------- src/styleguide.md | 4 +-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss index 42727d5a36..66f4517dd0 100644 --- a/src/_sass/components/_media-icon.scss +++ b/src/_sass/components/_media-icon.scss @@ -12,12 +12,15 @@ width: 100%; color: color(secondary-dark); display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: repeat(3, auto); - grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile"; column-gap: 15px; + grid-template-columns: auto 1fr; + grid-template-rows: repeat(2, auto); + grid-template-areas: "icon heading" "content content"; - @include breakpoint(medium up) { + @include breakpoint(large up) { + grid-template-columns: auto 1fr auto; + grid-template-rows: repeat(2, auto); + grid-template-areas: "icon heading anchor" "icon content anchor"; padding: 24px; padding-bottom: 32px; } @@ -50,7 +53,7 @@ transition: 0.3s background; grid-area: icon; - @include breakpoint(medium up) { + @include breakpoint(large up) { width: 64px; height: 64px; } @@ -68,12 +71,12 @@ &__content { font-size: 14px; color: color(secondary-dark); - padding-top: 15px; - grid-area: content-mobile; + margin-top: 15px; + grid-area: content; line-height: 1.57; - @include breakpoint(medium up) { - padding-top: 0; + @include breakpoint(large up) { + margin-top: 0; grid-area: content; } } @@ -85,19 +88,16 @@ } &__anchor { - svg { - display: none; - height: 16px; + display: none; + align-self: center; + grid-area: anchor; - @include breakpoint(medium up) { - display: block; - } + @include breakpoint(large up) { + display: block; } - @include breakpoint(medium up) { - position: absolute; - top: 50px; - right: 25px; + svg { + height: 16px; } } @@ -108,7 +108,7 @@ color: color(primary); text-decoration: underline; - @include breakpoint(medium up) { + @include breakpoint(large up) { display: none; } } @@ -119,9 +119,9 @@ flex-direction: column; align-items: center; - @include breakpoint(medium up) { + @include breakpoint(large up) { display: grid; - grid-template-columns: auto 1fr; + grid-template-columns: auto 1fr auto; grid-template-rows: repeat(3, auto); grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile"; } @@ -130,11 +130,11 @@ #{$this}__content { text-align: center; line-height: 1.33; - padding-top: 10px; + margin-top: 10px; - @include breakpoint(medium up) { + @include breakpoint(large up) { text-align: left; - padding-top: 0; + margin-top: 0; } } @@ -142,7 +142,7 @@ line-height: 1.33; padding-top: 15px; - @include breakpoint(medium up) { + @include breakpoint(large up) { text-align: left; padding-top: 0; } diff --git a/src/styleguide.md b/src/styleguide.md index c1d72f830e..110904c126 100644 --- a/src/styleguide.md +++ b/src/styleguide.md @@ -26,8 +26,8 @@ layout: page - Subitem * Item -{% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="This is my sample note." %} -{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="This is my sample note." excerpt="Read more" %} +{% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %} +{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %} {% include components/button-link.html text="Find out more" href="https://segment.com" %} {% capture note %} From d11690fdd24b0db6b03f236908b41962582bd23e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Tue, 1 Oct 2019 11:18:18 +0200 Subject: [PATCH 6/7] fix(): Change aligning icon & change line height --- src/_sass/components/_media-icon.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss index 66f4517dd0..655b4857ad 100644 --- a/src/_sass/components/_media-icon.scss +++ b/src/_sass/components/_media-icon.scss @@ -52,6 +52,7 @@ background-color: color(gray-light); transition: 0.3s background; grid-area: icon; + align-self: baseline; @include breakpoint(large up) { width: 64px; @@ -129,7 +130,7 @@ #{$this}__content { text-align: center; - line-height: 1.33; + line-height: 1.57; margin-top: 10px; @include breakpoint(large up) { From 65a7f96e5b5c2b5b3ad95576e973749d05013620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Tue, 1 Oct 2019 11:38:47 +0200 Subject: [PATCH 7/7] fix(): RWD --- src/_sass/components/_media-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss index 655b4857ad..783ccca071 100644 --- a/src/_sass/components/_media-icon.scss +++ b/src/_sass/components/_media-icon.scss @@ -52,11 +52,11 @@ background-color: color(gray-light); transition: 0.3s background; grid-area: icon; - align-self: baseline; @include breakpoint(large up) { width: 64px; height: 64px; + align-self: baseline; } svg {