Skip to content

Panel component #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 2, 2019
Merged

Panel component #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
963ae98
wip(): Structure
bart-tonik Oct 1, 2019
def8310
fix(): Add border radius
bart-tonik Oct 1, 2019
df69236
feat(): Introduce panel component
bart-tonik Oct 2, 2019
bacbb3c
fix(): Change color
bart-tonik Oct 2, 2019
c03742c
fix(): Change color
bart-tonik Oct 2, 2019
15f624c
fix(): Add params in include
bart-tonik Oct 2, 2019
a3e94d1
refactor(): separating the panel into a panel and callout
bart-tonik Oct 2, 2019
460222b
fix(): Minify svg pattern
bart-tonik Oct 2, 2019
a02a556
Merge branch 'develop' into panel-component
jedrzejchalubek Oct 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/_includes/components/panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="panel">
<div class="panel__inner">
<div class="panel__pattern">
{% include_relative assets/icons/patterns/dots.svg %}
</div>
</div>
</div>
6 changes: 5 additions & 1 deletion src/_sass/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
}

&--large {
padding: 12px 23px;
padding: 14px 20px;
}

&--expand {
width: 100%;
}
}
30 changes: 30 additions & 0 deletions src/_sass/components/_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.panel {
position: relative;
background-color: color(gray-lighter);
border-radius: 8px;
overflow: hidden;

&__inner {
position: relative;
z-index: 1;
padding: 22px 15px 15px;

@include breakpoint(medium up) {
padding: 22px 30px 30px;
}
}

&__pattern {
display: none;
position: absolute;
bottom: 10px;
right: 0;
z-index: -1;

@include breakpoint(medium up) {
display: block;
}
}


}
1 change: 1 addition & 0 deletions src/_sass/segment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
@import "components/field";
@import "components/breadcrumbs";
@import "components/highlight";
@import "components/panel";
@import "components/nav";
@import "components/nav-list";
@import "components/social-list";
Expand Down
78 changes: 78 additions & 0 deletions src/assets/icons/patterns/dots.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/styleguide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,9 @@ analytics.identify('025pikachu025', {
{% include components/alert.html type="success" content="This is my sample note." %}
{% include components/alert.html type="warning" content="This is my sample note." %}
{% include components/alert.html type="error" content="This is my sample note." %}

---

## Panel

{% include components/panel.html title="Get started with Segment" content="Segment is the easiest way to integrate your websites & mobile apps data to 250+ analytics and growth tools." %}