Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit593ef99

Browse files
bart-krakowskijedrzejchalubek
authored andcommitted
feat(): Introduce alert component (#75)
1 parentb0473ec commit593ef99

File tree

9 files changed

+71
-0
lines changed

9 files changed

+71
-0
lines changed
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<divmarkdown="div"class="alert alert--{{ include.type }}"role="alert">
2+
{% include_relative assets/icons/alerts/{{ include.type }}.svg %}
3+
{{ include.content }}
4+
</div>

‎src/_sass/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $color-values: (
2626
secondary:#1f477d,
2727
secondary-dark:#435a6f,
2828
gray-light:#f7f9fa,
29+
gray-lighter:#f9fafb,
2930
gray:#a5b0ba,
3031
code-gray:#435a6f,
3132
code-green:#52bd95,

‎src/_sass/components/_alert.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.alert {
2+
background-color:color(gray-lighter);
3+
border-radius:4px;
4+
font-size:14px;
5+
line-height:1.57;
6+
padding:15px20px15px50px;
7+
position:relative;
8+
9+
&::before {
10+
content:"";
11+
border-radius:2px;
12+
position:absolute;
13+
top:0;
14+
left:0;
15+
height:100%;
16+
width:3px;
17+
}
18+
19+
svg {
20+
position:absolute;
21+
left:20px;
22+
top:22px;
23+
}
24+
25+
&--info {
26+
&::before {
27+
background-color:color(info);
28+
}
29+
}
30+
31+
&--success {
32+
&::before {
33+
background-color:color(success);
34+
}
35+
}
36+
37+
&--warning {
38+
&::before {
39+
background-color:color(warning);
40+
}
41+
}
42+
43+
&--error {
44+
&::before {
45+
background-color:color(error);
46+
}
47+
}
48+
}

‎src/_sass/segment.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
@import"components/logo";
4343
@import"components/note";
4444
@import"components/button-link";
45+
@import"components/alert";
4546

4647
// Pages
4748
// =================================================

‎src/assets/icons/alerts/error.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/alerts/info.svg‎

Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading

‎src/styleguide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,8 @@ layout: page
3737
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.
3838
{% endcapture %}
3939
{% include components/note.html title="Server-side tracking" content=server_side_tracking buttonTitle="Find out more" buttonHref="https://segment.com" %}
40+
41+
{% include components/alert.html type="info" content="This is my sample note." %}
42+
{% include components/alert.html type="success" content="This is my sample note." %}
43+
{% include components/alert.html type="warning" content="This is my sample note." %}
44+
{% include components/alert.html type="error" content="This is my sample note." %}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp