Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

Commit f6f29de

Browse files
dabengjeff-phillips-18
dabeng
authored and
jeff-phillips-18
committed
fix(blank slate): secondary action buttons do not align properly (#1117)
1 parent 5476682 commit f6f29de

File tree

8 files changed

+98
-22
lines changed

8 files changed

+98
-22
lines changed

‎src/less/blank-slate.less‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,21 @@
2525
}
2626
.blank-slate-pf-secondary-action {
2727
margin-top: @line-height-computed;
28+
a {
29+
display: inline-block;
30+
padding: @blank-slate-pf-secondary-link-padding-top @blank-slate-pf-secondary-link-padding-left;
31+
& + a:before {
32+
background-color: @color-pf-black-500;
33+
content: "";
34+
display: inline-block;
35+
height: ceil((@font-size-base * .8));
36+
left: ~"calc(-@{blank-slate-pf-secondary-link-padding-left} - 2px)";
37+
position: relative;
38+
width: 1px;
39+
}
40+
}
2841
}
2942
button {
30-
margin-right: 5px;
31-
&:last-of-type {
32-
margin-right: 0;
33-
}
43+
margin-bottom: 5px;
3444
}
3545
}

‎src/less/variables.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
@applauncher-pf-menu-link-shadow: @color-pf-black-300;
2929
@applauncher-pf-menu-link-icon-font-size: 2em;
3030
@applauncher-pf-menu-link-icon-width: ((9 * @applauncher-pf-menu-link-icon-font-size) / 14); //Numbers to imitate fa-fw class
31+
@blank-slate-pf-secondary-link-padding-left: 15px;
32+
@blank-slate-pf-secondary-link-padding-top: 5px;
3133
@bootstrap-switch-handle-default-bg-color: @color-pf-black-100;
3234
@bootstrap-treeview-highlight-color: @color-pf-blue-300;
3335
@btn-default-bg-img-start: @color-pf-black-100;

‎src/sass/converted/patternfly/_blank-slate.scss‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,21 @@
2525
}
2626
.blank-slate-pf-secondary-action {
2727
margin-top: $line-height-computed;
28+
a {
29+
display: inline-block;
30+
padding: $blank-slate-pf-secondary-link-padding-top $blank-slate-pf-secondary-link-padding-left;
31+
& + a:before {
32+
background-color: $color-pf-black-500;
33+
content: "";
34+
display: inline-block;
35+
height: ceil(($font-size-base * .8));
36+
left: unquote("calc(-#{$blank-slate-pf-secondary-link-padding-left} - 2px)");
37+
position: relative;
38+
width: 1px;
39+
}
40+
}
2841
}
2942
button {
30-
margin-right: 5px;
31-
&:last-of-type {
32-
margin-right: 0;
33-
}
43+
margin-bottom: 5px;
3444
}
3545
}

‎src/sass/converted/patternfly/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ $applauncher-pf-menu-link-background-color-hover: $color-pf-bl
2828
$applauncher-pf-menu-link-shadow: $color-pf-black-300 !default;
2929
$applauncher-pf-menu-link-icon-font-size: 2em !default;
3030
$applauncher-pf-menu-link-icon-width: ((9 * $applauncher-pf-menu-link-icon-font-size) / 14) !default; //Numbers to imitate fa-fw class
31+
$blank-slate-pf-secondary-link-padding-left: 15px !default;
32+
$blank-slate-pf-secondary-link-padding-top: 5px !default;
3133
$bootstrap-switch-handle-default-bg-color: $color-pf-black-100 !default;
3234
$bootstrap-treeview-highlight-color: $color-pf-blue-300 !default;
3335
$btn-default-bg-img-start: $color-pf-black-100 !default;

‎tests/pages/_includes/widgets/communication/blank-slate-multiple-secondary-action-buttons.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="blank-slate-pf {{include.extraClass}}" id="{{include.id}}">
2+
<div class="blank-slate-pf-icon">
3+
<span class="pficon pficon pficon-add-circle-o"></span>
4+
</div>
5+
<h1>
6+
Empty State Title
7+
</h1>
8+
<p>
9+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
10+
</p>
11+
<p>
12+
Learn more about this <a href="#">in the documentation</a>.
13+
</p>
14+
<div class="blank-slate-pf-main-action">
15+
<button class="btn btn-primary btn-lg"> Main Action</button>
16+
</div>
17+
<div class="blank-slate-pf-secondary-action">
18+
<button class="btn btn-default" style="width: 240px;">Secondary Action</button>
19+
<button class="btn btn-default" style="width: 240px;">Secondary Action With a Longer Label</button>
20+
<button class="btn btn-default" style="width: 240px;">Secondary Action</button>
21+
</div>
22+
</div>

‎tests/pages/_includes/widgets/communication/blank-slate-multiple-secondary-action-links.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="blank-slate-pf {{include.extraClass}}" id="{{include.id}}">
2+
<div class="blank-slate-pf-icon">
3+
<span class="pficon pficon pficon-add-circle-o"></span>
4+
</div>
5+
<h1>
6+
Empty State Title
7+
</h1>
8+
<p>
9+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
10+
</p>
11+
<p>
12+
Learn more about this <a href="#">in the documentation</a>.
13+
</p>
14+
<div class="blank-slate-pf-main-action">
15+
<button class="btn btn-primary btn-lg"> Main Action </button>
16+
</div>
17+
<div class="blank-slate-pf-secondary-action">
18+
<a href="#!">Secondary Action</a>
19+
<a href="#!">Secondary Action</a>
20+
<a href="#!">Secondary Action With a Longer Label</a>
21+
<a href="#!">Secondary Action</a>
22+
<a href="#!">Secondary Action</a>
23+
</div>
24+
</div>

‎tests/pages/_includes/widgets/communication/blank-slate.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>
99
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1010
</p>
1111
<p>
12-
Learn more about this <a href="#">on the documentation</a>.
12+
Learn more about this <a href="#">in the documentation</a>.
1313
</p>
1414
<div class="blank-slate-pf-main-action">
1515
<button class="btn btn-primary btn-lg"> Main Action </button>

‎tests/pages/blank-slate.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,23 @@
55
resource: true
66
---
77

8-
<h2>Empty Blank Slate</h2>
9-
<div class="blank-slate-pf">
10-
<h1>Empty State Title</h1>
11-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
12-
<p>Learn more about this <a href="#">on the documentation</a>.</p>
13-
<div class="blank-slate-pf-main-action">
14-
<button class="btn btn-primary btn-lg">
15-
Main Action
16-
</button>
17-
</div>
18-
</div>
19-
<hr>
20-
<h2>Empty Slate with icon and secondary actions</h2>
8+
<h2>Empty Blank Slate</h2>
9+
<div class="blank-slate-pf">
10+
<h1>Empty State Title</h1>
11+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
12+
<p>Learn more about this <a href="#">in the documentation</a>.</p>
13+
<div class="blank-slate-pf-main-action">
14+
<button class="btn btn-primary btn-lg">
15+
Main Action
16+
</button>
17+
</div>
18+
</div>
19+
<hr>
20+
<h2>Empty Slate with icon and secondary actions</h2>
2121
{% include widgets/communication/blank-slate.html %}
22+
<hr>
23+
<h2>Empty Slate with multiple secondary action buttons</h2>
24+
{% include widgets/communication/blank-slate-multiple-secondary-action-buttons.html %}
25+
<hr>
26+
<h2>Empty Slate with multiple secondary action links</h2>
27+
{% include widgets/communication/blank-slate-multiple-secondary-action-links.html %}

0 commit comments

Comments
 (0)