Skip to content

Commit 18cca9a

Browse files
bart-krakowskijedrzejchalubek
bart-krakowski
authored and
jedrzejchalubek
committed
feat(): Introduce media icon (#78)
1 parent 1b4aba5 commit 18cca9a

File tree

15 files changed

+230
-1
lines changed

15 files changed

+230
-1
lines changed

‎src/_includes/components/media-icon.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="media-icon media-icon--{{ include.variant }}">
2+
<a class="media-icon__inner" href="{{ include.href }}">
3+
<span class="media-icon__icon">
4+
{% include_relative assets/icons/{{ include.icon }}.svg %}
5+
</span>
6+
<h5 class="media-icon__heading">{{ include.title }}</h5>
7+
<div class="media-icon__content">
8+
{{ include.content }}
9+
10+
{% if include.variant == 'large' %}
11+
<span class="media-icon__excerpt">
12+
{{ include.excerpt }}
13+
</span>
14+
{% endif %}
15+
</div>
16+
{% if include.variant == 'large' %}
17+
<div class="media-icon__anchor">
18+
{% include_relative assets/icons/anchor.svg %}
19+
</div>
20+
{% endif %}
21+
</a>
22+
</div>

‎src/_sass/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@
2323
$color-values: (
2424
primary: #1dc989,
2525
primary-dark: #1eb57d,
26+
primary-light: #52bd95,
2627
secondary: #1f477d,
2728
secondary-dark: #435a6f,
2829
gray-light: #f7f9fa,
2930
gray-lighter: #f9fafb,
3031
gray: #a5b0ba,
32+
border-gray: #edf0ed,
3133
code-gray: #435a6f,
3234
code-green: #52bd95,
3335
code-blue: #2e98df,

‎src/_sass/components/_media-icon.scss

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
.media-icon {
2+
$this: &;
3+
4+
border: 1px solid color(border-gray);
5+
background-color: color(white);
6+
transition: 0.3s box-shadow;
7+
border-radius: 8px;
8+
9+
&__inner {
10+
position: relative;
11+
padding: 15px;
12+
width: 100%;
13+
color: color(secondary-dark);
14+
display: grid;
15+
column-gap: 15px;
16+
grid-template-columns: auto 1fr;
17+
grid-template-rows: repeat(2, auto);
18+
grid-template-areas: "icon heading" "content content";
19+
20+
@include breakpoint(large up) {
21+
grid-template-columns: auto 1fr auto;
22+
grid-template-rows: repeat(2, auto);
23+
grid-template-areas: "icon heading anchor" "icon content anchor";
24+
padding: 24px;
25+
padding-bottom: 32px;
26+
}
27+
}
28+
29+
svg > * {
30+
transition: 0.3s fill;
31+
}
32+
33+
&:hover {
34+
box-shadow: 0 8px 16px 0 rgba(18, 66, 74, 0.08);
35+
36+
#{$this}__icon {
37+
background-color: rgba(color(primary-light), 0.16);
38+
}
39+
40+
svg > * {
41+
fill: color(primary);
42+
}
43+
}
44+
45+
&__icon {
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
width: 48px;
50+
height: 48px;
51+
border-radius: 8px;
52+
background-color: color(gray-light);
53+
transition: 0.3s background;
54+
grid-area: icon;
55+
56+
@include breakpoint(large up) {
57+
width: 64px;
58+
height: 64px;
59+
align-self: baseline;
60+
}
61+
62+
svg {
63+
width: 32px;
64+
max-height: 32px;
65+
}
66+
}
67+
68+
a {
69+
text-decoration: none;
70+
}
71+
72+
&__content {
73+
font-size: 14px;
74+
color: color(secondary-dark);
75+
margin-top: 15px;
76+
grid-area: content;
77+
line-height: 1.57;
78+
79+
@include breakpoint(large up) {
80+
margin-top: 0;
81+
grid-area: content;
82+
}
83+
}
84+
85+
&__heading {
86+
display: flex;
87+
align-items: center;
88+
grid-area: heading;
89+
}
90+
91+
&__anchor {
92+
display: none;
93+
align-self: center;
94+
grid-area: anchor;
95+
96+
@include breakpoint(large up) {
97+
display: block;
98+
}
99+
100+
svg {
101+
height: 16px;
102+
}
103+
}
104+
105+
&__excerpt {
106+
font-size: 14px;
107+
font-weight: 500;
108+
line-height: 1.43;
109+
color: color(primary);
110+
text-decoration: underline;
111+
112+
@include breakpoint(large up) {
113+
display: none;
114+
}
115+
}
116+
117+
&--small {
118+
#{$this}__inner {
119+
display: flex;
120+
flex-direction: column;
121+
align-items: center;
122+
123+
@include breakpoint(large up) {
124+
display: grid;
125+
grid-template-columns: auto 1fr auto;
126+
grid-template-rows: repeat(3, auto);
127+
grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile";
128+
}
129+
}
130+
131+
#{$this}__content {
132+
text-align: center;
133+
line-height: 1.57;
134+
margin-top: 10px;
135+
136+
@include breakpoint(large up) {
137+
text-align: left;
138+
margin-top: 0;
139+
}
140+
}
141+
142+
#{$this}__heading {
143+
line-height: 1.33;
144+
padding-top: 15px;
145+
146+
@include breakpoint(large up) {
147+
text-align: left;
148+
padding-top: 0;
149+
}
150+
}
151+
}
152+
}

‎src/_sass/components/_steps-list.scss

Whitespace-only changes.

‎src/_sass/segment.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@
3939

4040
// Components
4141
// =================================================
42+
@import "components/media-icon";
4243
@import "components/stage";
4344
@import "components/logo";
4445
@import "components/note";
4546
@import "components/button-link";
4647
@import "components/alert";
4748
@import "components/markdown";
4849

49-
// Pages
50+
// Pages
5051
// =================================================
5152
@import "pages/docs";

‎src/assets/icons/anchor.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/media/academy.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/assets/icons/media/connections.svg

Lines changed: 9 additions & 0 deletions
Loading

‎src/assets/icons/media/guides.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/media/partners.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/icons/media/personas.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/icons/media/privacy.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/media/protocols.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/icons/media/web-app.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/styleguide.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ layout: page
3737
- Subitem
3838
* Item
3939

40+
{% 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" %}
41+
{% 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" %}
4042
{% include components/button-link.html text="Find out more" href="https://segment.com" %}
4143

4244
{% capture note %}

0 commit comments

Comments
 (0)