Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
fix(guidelines): update Kubernetes component
Browse files Browse the repository at this point in the history 
update the Kubernetes component css to match code guidelines
  • Loading branch information
@joshuawilson
Adam Jolicoeur authored and joshuawilson committed May 19, 2017
1 parent 7531b53 commit c749683
Show file tree
Hide file tree
Showing 46 changed files with 310 additions and 574 deletions.
311 changes: 144 additions & 167 deletions src/app/kubernetes/components/pipeline-status/pipeline-status.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,208 +1,185 @@
.console-os .top-header,.pipeline-status-bar {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex
.console-os .top-header,
.pipeline-status-bar {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex
}

.pipeline-status-bar .clip1:before,.pipeline-status-bar .clip2:before,.pipeline-status-bar .pipeline-line:before {
background-color: #d1d1d1
.pipeline-status-bar .clip1:before,
.pipeline-status-bar .clip2:before,
.pipeline-status-bar .pipeline-line:before {
background-color: #d1d1d1
}

.pipeline-status-bar .inner-circle-fill {
background-color: #fff;
opacity: 0
background-color: #fff;
opacity: 0
}
.pipeline-status-bar.SUCCESS .clip1:before,
.pipeline-status-bar.SUCCESS .clip2:before,
.pipeline-status-bar.SUCCESS .inner-circle-fill,
.pipeline-status-bar.SUCCESS .pipeline-line,
.pipeline-status-bar.SUCCESS .pipeline-line:before,
.pipeline-status-bar.SUCCESS .pipeline-circle,
.pipeline-status-bar.SUCCESS .pipeline-circle .inner-circle {
background-color: #3f9c35
}

.pipeline-status-bar.SUCCESS .clip1:before,.pipeline-status-bar.SUCCESS .clip2:before,.pipeline-status-bar.SUCCESS .inner-circle-fill,
.pipeline-status-bar.SUCCESS .pipeline-line,.pipeline-status-bar.SUCCESS .pipeline-line:before,
.pipeline-status-bar.SUCCESS .pipeline-circle, .pipeline-status-bar.SUCCESS .pipeline-circle .inner-circle {
background-color: #3f9c35
}

.pipeline-status-bar.SUCCESS .pipeline-circle:after {
content: "\f00c";
opacity: 1;
}

.pipeline-status-bar.FAILED .clip1:before,.pipeline-status-bar.FAILED .clip2:before,.pipeline-status-bar.FAILED .inner-circle-fill,
.pipeline-status-bar.FAILED .pipeline-line,.pipeline-status-bar.FAILED .pipeline-line:before,
.pipeline-status-bar.FAILED .pipeline-circle, .pipeline-status-bar.FAILED .pipeline-circle .inner-circle {
background-color: #c00
content: "\f00c";
opacity: 1;
}
.pipeline-status-bar.FAILED .clip1:before,
.pipeline-status-bar.FAILED .clip2:before,
.pipeline-status-bar.FAILED .inner-circle-fill,
.pipeline-status-bar.FAILED .pipeline-line,
.pipeline-status-bar.FAILED .pipeline-line:before,
.pipeline-status-bar.FAILED .pipeline-circle,
.pipeline-status-bar.FAILED .pipeline-circle .inner-circle {
background-color: #c00
}

.pipeline-status-bar.FAILED .pipeline-circle:after {
content: "\f00d";
opacity: 1;
content: "\f00d";
opacity: 1;
}
.pipeline-status-bar.NOT_EXECUTED .clip1:before,
.pipeline-status-bar.NOT_EXECUTED .clip2:before,
.pipeline-status-bar.NOT_EXECUTED .inner-circle-fill,
.pipeline-status-bar.NOT_EXECUTED .pipeline-line,
.pipeline-status-bar.NOT_EXECUTED .pipeline-line:before,
.pipeline-status-bar.NOT_EXECUTED .pipeline-circle,
.pipeline-status-bar.NOT_EXECUTED .pipeline-circle .inner-circle {
background-color: #d1d1d1
}

.pipeline-status-bar.NOT_EXECUTED .clip1:before,.pipeline-status-bar.NOT_EXECUTED .clip2:before,.pipeline-status-bar.NOT_EXECUTED .inner-circle-fill,
.pipeline-status-bar.NOT_EXECUTED .pipeline-line,.pipeline-status-bar.NOT_EXECUTED .pipeline-line:before,
.pipeline-status-bar.NOT_EXECUTED .pipeline-circle, .pipeline-status-bar.NOT_EXECUTED .pipeline-circle .inner-circle {
background-color: #d1d1d1
}

.pipeline-status-bar.NOT_EXECUTED .pipeline-circle:after {
content: "";
opacity: 1;
}

.pipeline-status-bar.PAUSED_PENDING_INPUT .clip1:before,.pipeline-status-bar.PAUSED_PENDING_INPUT .clip2:before,.pipeline-status-bar.PAUSED_PENDING_INPUT .inner-circle-fill,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-line,.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-line:before,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-circle, .pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-circle .inner-circle {
background-color: #f0ab00
content: "";
opacity: 1;
}
.pipeline-status-bar.PAUSED_PENDING_INPUT .clip1:before,
.pipeline-status-bar.PAUSED_PENDING_INPUT .clip2:before,
.pipeline-status-bar.PAUSED_PENDING_INPUT .inner-circle-fill,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-line,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-line:before,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-circle,
.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-circle .inner-circle {
background-color: #f0ab00
}

.pipeline-status-bar.PAUSED_PENDING_INPUT .pipeline-circle:after {
content: "\f04c";
font-size: 10px;
opacity: 1;
}

.pipeline-status-bar.ABORTED .clip1:before,.pipeline-status-bar.ABORTED .clip2:before,.pipeline-status-bar.ABORTED .inner-circle-fill,
.pipeline-status-bar.ABORTED .inner-circle-fill,.pipeline-status-bar.ABORTED .pipeline-line,.pipeline-status-bar.ABORTED .pipeline-line:before,
.pipeline-status-bar.ABORTED .pipeline-circle, .pipeline-status-bar.ABORTED .pipeline-circle .inner-circle {
background-color: #d1d1d1
content: "\f04c";
font-size: 10px;
opacity: 1;
}
.pipeline-status-bar.ABORTED .clip1:before,
.pipeline-status-bar.ABORTED .clip2:before,
.pipeline-status-bar.ABORTED .inner-circle-fill,
.pipeline-status-bar.ABORTED .inner-circle-fill,
.pipeline-status-bar.ABORTED .pipeline-line,
.pipeline-status-bar.ABORTED .pipeline-line:before,
.pipeline-status-bar.ABORTED .pipeline-circle,
.pipeline-status-bar.ABORTED .pipeline-circle .inner-circle {
background-color: #d1d1d1
}

.pipeline-status-bar.ABORTED .pipeline-circle:after {
content: "\f05e";
opacity: 1;
content: "\f05e";
opacity: 1;
}


/** we have animations on in progress stages */
.pipeline-status-bar.IN_PROGRESS .clip1:before,.pipeline-status-bar.IN_PROGRESS .clip2:before,.pipeline-status-bar.IN_PROGRESS .inner-circle-fill {
background-color: #0088ce
.pipeline-status-bar.IN_PROGRESS .clip1:before,
.pipeline-status-bar.IN_PROGRESS .clip2:before,
.pipeline-status-bar.IN_PROGRESS .inner-circle-fill {
background-color: #0088ce
}

.pipeline-status-bar.IN_PROGRESS .pipeline-circle {
animation: fadeInProgress 0s .7s linear forwards
animation: fadeInProgress 0s .7s linear forwards
}

.pipeline-status-bar.IN_PROGRESS .pipeline-circle:after {
content: "\f021";
content: "\f021";
}

.pipeline-status-bar.IN_PROGRESS .pipeline-line {
overflow: hidden
overflow: hidden
}

.pipeline-status-bar.IN_PROGRESS .pipeline-line:before {
animation: progress-rail 5s .5s linear infinite;
background-color: #0088ce;
transform: translateX(-100%);
width: 25%
animation: progress-rail 5s .5s linear infinite;
background-color: #0088ce;
transform: translateX(-100%);
width: 25%
}


.pipeline-status-bar {
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: -9px
}

display: flex;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: -9px
}
.pipeline-status-bar .pipeline-line {
width: 100%;
height: 4px;
background: #d1d1d1;
position: relative
position: relative
width: 100%;
height: 4px;
background: #d1d1d1;
}

.pipeline-status-bar .pipeline-line:before {
content: '';
position: absolute;
height: 100%;
/*
animation: progress-line .35s ease-in forwards
*/
}

content: '';
position: absolute;
height: 100%;
}
.pipeline-circle {
background: #d1d1d1;
width: 18px;
height: 18px;
border-radius: 9px;
margin-top: -11px;
position: relative;
transform: rotate(-90deg)
}

position: relative;
width: 18px;
height: 18px;
border-radius: 9px;
margin-top: -11px;
background: #d1d1d1;
transform: rotate(-90deg)
}
.pipeline-circle:after {
position: absolute;
color: #fff;
font-family: FontAwesome;
font-size: 12px;
transform: translate(-50%,-50%) rotate(90deg);
top: 50%;
left: 50%;
opacity: 0;
/*
animation: fadeIn .1s 875ms linear forwards
*/
}

position: absolute;
top: 50%;
left: 50%;
font-family: FontAwesome;
font-size: 12px;
transform: translate(-50%,-50%) rotate(90deg);
color: #fff;
opacity: 0;
}
.pipeline-circle .clip1:before,.pipeline-circle .clip2:before {
width: 18px;
height: 18px;
transform: rotate(360deg);
border-radius: 9px;
position: absolute;
content: ''
}

position: absolute;
width: 18px;
height: 18px;
transform: rotate(360deg);
border-radius: 9px;
content: ''
}
.pipeline-circle .clip1 {
position: absolute;
clip: rect(0,18px,18px,9px);
z-index: -9
position: absolute;
clip: rect(0, 18px, 18px, 9px);
z-index: -9
}

.pipeline-circle .clip1:before {
clip: rect(0,9px,18px,0);
/*
animation: progress 175ms .35s linear forwards
*/
clip: rect(0, 9px, 18px, 0);
}

.pipeline-circle .clip2 {
position: absolute;
clip: rect(0,9px,18px,0);
z-index: -9
position: absolute;
clip: rect(0, 9px, 18px, 0);
z-index: -9
}

.pipeline-circle .clip2:before {
clip: rect(0,18px,18px,9px);
/*
animation: progress 175ms 525ms linear forwards
*/
clip: rect(0, 18px, 18px, 9px);
}

.pipeline-circle .inner-circle {
height: 10px;
width: 10px;
border-radius: 9px;
background-color: #fff;
position: absolute;
top: 4px;
left: 4px;
/*
animation: fadeOut .1s .7s linear forwards
*/
}

position: absolute;
top: 4px;
left: 4px;
height: 10px;
width: 10px;
border-radius: 9px;
background-color: #fff;
}
.pipeline-circle .inner-circle .inner-circle-fill {
box-sizing: border-box;
height: 100%;
width: 100%;
border-radius: 50%;
opacity: 0
}



box-sizing: border-box;
height: 100%;
width: 100%;
border-radius: 50%;
opacity: 0
}
Loading

0 comments on commit c749683

Please sign in to comment.