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

Commit

Permalink
Updates per visual review
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeff-phillips-18
jeff-phillips-18 committed May 25, 2018
1 parent 32bbcdf commit 52ca4f1
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 48 deletions.
54 changes: 38 additions & 16 deletions src/less/charts.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
&.bullet-chart-pf-vertical {
height: 100%;
width: initial;
flex-direction: row;
}
}

Expand All @@ -19,6 +20,7 @@
flex-direction: row;
width: 100%;
.bullet-chart-pf-vertical & {
flex: initial;
flex-direction: column-reverse;
height: 100%;
width: initial;
Expand All @@ -41,6 +43,7 @@
padding-right: 10px;
text-align: right;
.bullet-chart-pf-vertical & {
padding-right: 0;
text-align: center;
}
}
Expand All @@ -63,9 +66,6 @@
flex-direction: row-reverse;
flex: initial;
margin-left: -15px;
&.show-axis {
margin-left: -40px;
}
}
}

Expand Down Expand Up @@ -224,27 +224,42 @@
}

.bullet-chart-pf-legend {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-top: 7px;
text-align: center;
width: 100%;

.bullet-chart-pf-vertical & {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-top: 0;
text-align: left;
width: initial;
}
}

.bullet-chart-pf-legend-spacer {
display: none;
.bullet-chart-pf-vertical & {
display: inline-block;
flex: 1;
}
}

.bullet-chart-pf-legend-item {
flex: 1;
overflow: hidden;
position: relative;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
display: inline-block;
margin-right: 10px;

.bullet-chart-pf-vertical & {
margin-right: 0;
margin-top: 10px;
}
}

.bullet-chart-pf-legend-item-box {
border: 1px solid @color-pf-black-600;
display: inline-block;
height: 13px;
margin-right: 5px;
margin-right: 3px;
width: 13px;
&.range-1 {
background-color: @color-pf-black-150;
Expand All @@ -258,8 +273,15 @@
}

.bullet-chart-pf-legend-item-text {
display: inline-block;
line-height: 14px;
max-width: 150px;
overflow: hidden;
position: relative;
top: -2px;
text-overflow: ellipsis;
top: 1px;
white-space: nowrap;
word-wrap: normal;
}

.c3 {
Expand Down
54 changes: 38 additions & 16 deletions src/sass/converted/patternfly/_charts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
&.bullet-chart-pf-vertical {
height: 100%;
width: initial;
flex-direction: row;
}
}

Expand All @@ -19,6 +20,7 @@
flex-direction: row;
width: 100%;
.bullet-chart-pf-vertical & {
flex: initial;
flex-direction: column-reverse;
height: 100%;
width: initial;
Expand All @@ -41,6 +43,7 @@
padding-right: 10px;
text-align: right;
.bullet-chart-pf-vertical & {
padding-right: 0;
text-align: center;
}
}
Expand All @@ -63,9 +66,6 @@
flex-direction: row-reverse;
flex: initial;
margin-left: -15px;
&.show-axis {
margin-left: -40px;
}
}
}

Expand Down Expand Up @@ -224,27 +224,42 @@
}

.bullet-chart-pf-legend {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-top: 7px;
text-align: center;
width: 100%;

.bullet-chart-pf-vertical & {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-top: 0;
text-align: left;
width: initial;
}
}

.bullet-chart-pf-legend-spacer {
display: none;
.bullet-chart-pf-vertical & {
display: inline-block;
flex: 1;
}
}

.bullet-chart-pf-legend-item {
flex: 1;
overflow: hidden;
position: relative;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
display: inline-block;
margin-right: 10px;

.bullet-chart-pf-vertical & {
margin-right: 0;
margin-top: 10px;
}
}

.bullet-chart-pf-legend-item-box {
border: 1px solid $color-pf-black-600;
display: inline-block;
height: 13px;
margin-right: 5px;
margin-right: 3px;
width: 13px;
&.range-1 {
background-color: $color-pf-black-150;
Expand All @@ -258,8 +273,15 @@
}

.bullet-chart-pf-legend-item-text {
display: inline-block;
line-height: 14px;
max-width: 150px;
overflow: hidden;
position: relative;
top: -2px;
text-overflow: ellipsis;
top: 1px;
white-space: nowrap;
word-wrap: normal;
}

.c3 {
Expand Down
54 changes: 38 additions & 16 deletions src/sass/converted/rcue/_charts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
&.bullet-chart-pf-vertical {
height: 100%;
width: initial;
flex-direction: row;
}
}

Expand All @@ -19,6 +20,7 @@
flex-direction: row;
width: 100%;
.bullet-chart-pf-vertical & {
flex: initial;
flex-direction: column-reverse;
height: 100%;
width: initial;
Expand All @@ -41,6 +43,7 @@
padding-right: 10px;
text-align: right;
.bullet-chart-pf-vertical & {
padding-right: 0;
text-align: center;
}
}
Expand All @@ -63,9 +66,6 @@
flex-direction: row-reverse;
flex: initial;
margin-left: -15px;
&.show-axis {
margin-left: -40px;
}
}
}

Expand Down Expand Up @@ -224,27 +224,42 @@
}

.bullet-chart-pf-legend {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-top: 7px;
text-align: center;
width: 100%;

.bullet-chart-pf-vertical & {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-top: 0;
text-align: left;
width: initial;
}
}

.bullet-chart-pf-legend-spacer {
display: none;
.bullet-chart-pf-vertical & {
display: inline-block;
flex: 1;
}
}

.bullet-chart-pf-legend-item {
flex: 1;
overflow: hidden;
position: relative;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
display: inline-block;
margin-right: 10px;

.bullet-chart-pf-vertical & {
margin-right: 0;
margin-top: 10px;
}
}

.bullet-chart-pf-legend-item-box {
border: 1px solid $color-pf-black-600;
display: inline-block;
height: 13px;
margin-right: 5px;
margin-right: 3px;
width: 13px;
&.range-1 {
background-color: $color-pf-black-150;
Expand All @@ -258,8 +273,15 @@
}

.bullet-chart-pf-legend-item-text {
display: inline-block;
line-height: 14px;
max-width: 150px;
overflow: hidden;
position: relative;
top: -2px;
text-overflow: ellipsis;
top: 1px;
white-space: nowrap;
word-wrap: normal;
}

.c3 {
Expand Down
8 changes: 8 additions & 0 deletions tests/pages/bullet-charts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ <h2>Bullet Chart</h2>
<span class="bullet-chart-pf-overflow"></span>
</div>
<div class="bullet-chart-pf-legend">
<span class="bullet-chart-pf-legend-spacer"></span>
<span class="bullet-chart-pf-legend-item">
<span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
<span class="bullet-chart-pf-legend-item-text">Data2</span>
Expand All @@ -63,6 +64,7 @@ <h2>Bullet Chart</h2>
<span class="bullet-chart-pf-legend-item-box range-3"></span>
<span class="bullet-chart-pf-legend-item-text">Range 3</span>
</span>
<span class="bullet-chart-pf-legend-spacer"></span>
</div>
</div>
</div>
Expand Down Expand Up @@ -104,6 +106,7 @@ <h2>Bullet Chart - Vertical</h2>
<span class="bullet-chart-pf-overflow"></span>
</div>
<div class="bullet-chart-pf-legend">
<span class="bullet-chart-pf-legend-spacer"></span>
<span class="bullet-chart-pf-legend-item">
<span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
<span class="bullet-chart-pf-legend-item-text">Data2</span>
Expand All @@ -124,6 +127,7 @@ <h2>Bullet Chart - Vertical</h2>
<span class="bullet-chart-pf-legend-item-box range-3"></span>
<span class="bullet-chart-pf-legend-item-text">Range 3</span>
</span>
<span class="bullet-chart-pf-legend-spacer"></span>
</div>
</div>
</div>
Expand Down Expand Up @@ -167,6 +171,7 @@ <h2>Bullet Chart - Dots</h2>
<span class="bullet-chart-pf-overflow"></span>
</div>
<div class="bullet-chart-pf-legend">
<span class="bullet-chart-pf-legend-spacer"></span>
<span class="bullet-chart-pf-legend-item">
<span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
<span class="bullet-chart-pf-legend-item-text">Data2</span>
Expand All @@ -187,6 +192,7 @@ <h2>Bullet Chart - Dots</h2>
<span class="bullet-chart-pf-legend-item-box range-3"></span>
<span class="bullet-chart-pf-legend-item-text">Range 3</span>
</span>
<span class="bullet-chart-pf-legend-spacer"></span>
</div>
</div>
</div>
Expand Down Expand Up @@ -228,6 +234,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
<span class="bullet-chart-pf-overflow"></span>
</div>
<div class="bullet-chart-pf-legend">
<span class="bullet-chart-pf-legend-spacer"></span>
<span class="bullet-chart-pf-legend-item">
<span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
<span class="bullet-chart-pf-legend-item-text">Data2</span>
Expand All @@ -248,6 +255,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
<span class="bullet-chart-pf-legend-item-box range-3"></span>
<span class="bullet-chart-pf-legend-item-text">Range 3</span>
</span>
<span class="bullet-chart-pf-legend-spacer"></span>
</div>
</div>
</div>
Expand Down

0 comments on commit 52ca4f1

Please sign in to comment.