Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Jérome Perrin
gitlab-ce
Commits
30e7952a
Commit
30e7952a
authored
Dec 28, 2016
by
Regis
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
scss_lint is now happy
parent
e118094d
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
708 additions
and
708 deletions
+708
-708
app/assets/stylesheets/pages/pipelines.scss
app/assets/stylesheets/pages/pipelines.scss
+708
-708
No files found.
app/assets/stylesheets/pages/pipelines.scss
View file @
30e7952a
.pipelines
{
.pipelines
{
.realtime-loading
{
.realtime-loading
{
font-size
:
40px
;
font-size
:
40px
;
text-align
:
center
;
text-align
:
center
;
}
}
.stage
{
.stage
{
max-width
:
90px
;
max-width
:
90px
;
width
:
90px
;
width
:
90px
;
text-align
:
center
;
text-align
:
center
;
overflow
:
hidden
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
white-space
:
nowrap
;
}
.commit-title
{
margin
:
0
;
}
.controls
{
white-space
:
nowrap
;
}
.btn
{
margin
:
4px
;
}
.table.ci-table
{
min-width
:
1200px
;
table-layout
:
fixed
;
.pipeline-id
{
color
:
$black
;
}
}
.commit-title
{
.pipeline-date
,
margin
:
0
;
.pipeline-status
{
width
:
10%
;
}
}
.controls
{
.pipeline-info
,
white-space
:
nowrap
;
.pipeline-commit
,
.pipeline-actions
,
.pipeline-stages
{
width
:
20%
;
}
}
}
}
.btn
{
@media
(
max-width
:
$screen-md-max
)
{
margin
:
4px
;
.content-list
{
&
.pipelines
,
&
.builds-content-list
{
width
:
100%
;
overflow
:
auto
;
}
}
}
}
.table.ci-table
{
.content-list.pipelines
.table-holder
{
min-width
:
12
00px
;
min-height
:
3
00px
;
table-layout
:
fixed
;
}
.pipeline-id
{
.pipeline-holder
{
color
:
$black
;
width
:
100%
;
}
overflow
:
auto
;
}
.pipeline-date
,
.table.ci-table
{
.pipeline-status
{
min-width
:
900px
;
width
:
10%
;
}
.pipeline-info
,
&
.pipeline
{
.pipeline-commit
,
min-width
:
650px
;
.pipeline-actions
,
.pipeline-stages
{
width
:
20%
;
}
}
}
}
@media
(
max-width
:
$screen-md-max
)
{
&
.builds-page
{
.content-list
{
&
.pipelines
,
tr
{
&
.builds-content-list
{
height
:
71px
;
width
:
100%
;
overflow
:
auto
;
}
}
}
}
}
.content-list.pipelines
.table-holder
{
tr
{
min-height
:
300px
;
th
{
padding
:
16px
8px
;
border
:
none
;
}
td
{
padding
:
10px
8px
;
}
.commit-link
{
padding
:
9px
8px
10px
;
}
}
}
.pipeline-holder
{
tbody
{
width
:
100%
;
border-top-width
:
1px
;
overflow
:
auto
;
}
}
.table.ci-table
{
.build.retried
{
min-width
:
900px
;
background-color
:
$gray-lightest
;
}
&
.pipeline
{
.commit-link
{
min-width
:
650px
;
a
{
&
:focus
{
text-decoration
:
none
;
}
}
}
&
.builds-page
{
a
:hover
{
text-decoration
:
none
;
tr
{
height
:
71px
;
}
}
}
}
tr
{
.avatar
{
th
{
margin-left
:
0
;
padding
:
16px
8px
;
float
:
none
;
border
:
none
;
}
}
td
{
.branch-commit
{
padding
:
10px
8px
;
}
.commit-link
{
.branch-name
{
padding
:
9px
8px
10px
;
font-weight
:
bold
;
}
max-width
:
120px
;
overflow
:
hidden
;
display
:
inline-block
;
white-space
:
nowrap
;
vertical-align
:
top
;
text-overflow
:
ellipsis
;
}
}
tbody
{
svg
{
border-top-width
:
1px
;
height
:
14px
;
width
:
14px
;
vertical-align
:
middle
;
fill
:
$gl-gray-light
;
}
}
.build.retried
{
.fa
{
background-color
:
$gray-lightest
;
font-size
:
12px
;
color
:
$gl-text-color
;
}
}
.commit-link
{
.commit-id
{
a
{
color
:
$gl-link-color
;
&
:focus
{
}
text-decoration
:
none
;
}
}
a
:hover
{
.commit-title
{
text-decoration
:
none
;
margin-top
:
4px
;
}
max-width
:
225px
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
}
.avatar
{
.label
{
margin-left
:
0
;
margin-right
:
4px
;
float
:
none
;
}
}
.branch-commit
{
.label-container
{
font-size
:
0
;
.branch-name
{
.label
{
font-weight
:
bold
;
margin-top
:
5px
;
max-width
:
120px
;
overflow
:
hidden
;
display
:
inline-block
;
white-space
:
nowrap
;
vertical-align
:
top
;
text-overflow
:
ellipsis
;
}
}
}
}
svg
{
.icon-container
{
height
:
14px
;
display
:
inline-block
;
width
:
14px
;
width
:
10px
;
vertical-align
:
middle
;
fill
:
$gl-gray-light
;
}
.fa
{
&
.commit-icon
{
font-size
:
12px
;
width
:
15px
;
color
:
$gl-text-color
;
text-align
:
center
;
}
}
}
.commit-id
{
.stage-cell
{
color
:
$gl-link-color
;
font-size
:
0
;
}
.commit-title
{
svg
{
margin-top
:
4px
;
height
:
18px
;
max-width
:
225px
;
width
:
18px
;
overflow
:
hidden
;
position
:
relative
;
white-space
:
nowrap
;
z-index
:
2
;
text-overflow
:
ellipsis
;
vertical-align
:
middle
;
}
overflow
:
visible
;
}
.label
{
.stage-container
{
margin-right
:
4px
;
display
:
inline-block
;
}
position
:
relative
;
margin-right
:
6px
;
.label-container
{
.tooltip
{
font-size
:
0
;
white-space
:
nowrap
;
}
.label
{
&
:not
(
:last-child
)
{
margin-top
:
5px
;
&
:
:
after
{
content
:
''
;
width
:
8px
;
position
:
absolute
;
right
:
-7px
;
top
:
10px
;
border-bottom
:
2px
solid
$border-color
;
}
}
}
}
}
}
}
.icon-container
{
.duration
,
display
:
inline-block
;
.finished-at
{
width
:
10px
;
color
:
$gl-gray-light
;
margin
:
4px
0
;
&
.commit-icon
{
.fa
{
width
:
15px
;
font-size
:
12px
;
text-align
:
center
;
margin-right
:
4px
;
}
}
}
.stage-cell
{
svg
{
font-size
:
0
;
width
:
12px
;
height
:
12px
;
vertical-align
:
middle
;
margin-right
:
4px
;
}
}
svg
{
.pipeline-actions
{
height
:
18px
;
min-width
:
140px
;
width
:
18px
;
position
:
relative
;
z-index
:
2
;
vertical-align
:
middle
;
overflow
:
visible
;
}
.stage-container
{
.btn
{
display
:
inline-block
;
margin
:
0
;
position
:
relative
;
color
:
$gl-gray-light
;
margin-right
:
6px
;
}
.tooltip
{
.cancel-retry-btns
{
white-space
:
nowrap
;
vertical-align
:
middle
;
}
&
:not
(
:last-child
)
{
.btn
:not
(
:first-child
)
{
&
:
:
after
{
margin-left
:
8px
;
content
:
''
;
width
:
8px
;
position
:
absolute
;
right
:
-7px
;
top
:
10px
;
border-bottom
:
2px
solid
$border-color
;
}
}
}
}
}
}
.d
uration
,
.d
ropdown-toggle
,
.
finished-at
{
.
dropdown-menu
{
color
:
$gl-gray-light
;
color
:
$gl-gray-light
;
margin
:
4px
0
;
.fa
{
.fa
{
font-size
:
12px
;
color
:
$gl-gray-light
;
margin-right
:
4px
;
font-size
:
1
4px
;
}
}
svg
{
svg
,
width
:
12px
;
.fa
{
height
:
12px
;
margin-right
:
0
;
vertical-align
:
middle
;
margin-right
:
4px
;
}
}
}
}
.pipeline-actions
{
.btn-remove
{
min-width
:
140px
;
color
:
$white-light
;
}
.btn
{
.btn-group
{
margin
:
0
;
&
.open
{
color
:
$gl-gray-light
;
.btn-default
{
background-color
:
$white-normal
;
border-color
:
$border-white-normal
;
}
}
}
.cancel-retry-btns
{
.btn
{
vertical-align
:
middle
;
.icon-play
{
height
:
13px
;
.btn
:not
(
:first-child
)
{
width
:
12px
;
margin-left
:
8px
;
}
}
}
}
}
}
.dropdown-toggle
,
.build-link
{
.dropdown-menu
{
color
:
$gl-gray-light
;
.f
a
{
a
{
color
:
$gl-gray-light
;
color
:
$gl-dark-link-color
;
font-size
:
14px
;
}
}
}
svg
,
.btn-group.open
.dropdown-toggle
{
.fa
{
box-shadow
:
none
;
margin-right
:
0
;
}
}
}
}
.btn-remove
{
.admin-builds-table
{
color
:
$white-light
;
.ci-table
td
:last-child
{
}
min-width
:
120px
;
}
}
.btn-group
{
// Pipeline visualization
&
.open
{
.pipeline-actions
{
.btn-default
{
border-bottom
:
none
;
background-color
:
$white-normal
;
}
border-color
:
$border-white-normal
;
}
}
.btn
{
.tab-pane
{
.icon-play
{
&
.pipelines
{
height
:
13px
;
.ci-table
{
width
:
12px
;
min-width
:
900px
;
}
}
}
}
}
.build-link
{
.content-list.pipelines
{
overflow
:
auto
;
}
a
{
.stage
{
color
:
$gl-dark-link-color
;
max-width
:
100px
;
}
width
:
100px
;
}
}
.
btn-group.open
.dropdown-toggle
{
.
pipeline-actions
{
box-shadow
:
none
;
min-width
:
initial
;
}
}
}
}
.admin-builds-table
{
&
.builds
{
.ci-table
td
:last-child
{
.ci-table
{
min-width
:
120px
;
tr
{
height
:
71px
;
}
}
}
}
}
}
// Pipeline visualization
// Pipeline graph
.pipeline-actions
{
.pipeline-graph
{
border-bottom
:
none
;
width
:
100%
;
background-color
:
$gray-light
;
padding
:
$gl-padding
;
white-space
:
nowrap
;
transition
:
max-height
0
.3s
,
padding
0
.3s
;
ul
{
padding
:
0
;
}
}
.tab-pane
{
a
{
&
.pipelines
{
text-decoration
:
none
;
.ci-table
{
color
:
$gl-text-color-light
;
min-width
:
900px
;
}
}
.content-list.pipelines
{
svg
{
overflow
:
auto
;
vertical-align
:
middle
;
}
margin-right
:
3px
;
}
.stage
{
.stage-column
{
max-width
:
100px
;
display
:
inline-block
;
width
:
100px
;
vertical-align
:
top
;
}
.pipeline-actions
{
&
:not
(
:last-child
)
{
min-width
:
initial
;
margin-right
:
44px
;
}
}
}
&
.builds
{
&
.left-margin
{
.ci-table
{
&
:not
(
:first-child
)
{
tr
{
margin-left
:
44px
;
height
:
71px
;
.left-connector
{
&
:
:
before
{
content
:
''
;
position
:
absolute
;
top
:
48%
;
left
:
-48px
;
border-top
:
2px
solid
$border-color
;
width
:
48px
;
height
:
1px
;
}
}
}
}
}
}
}
}
// Pipeline graph
.pipeline-graph
{
width
:
100%
;
background-color
:
$gray-light
;
padding
:
$gl-padding
;
white-space
:
nowrap
;
transition
:
max-height
0
.3s
,
padding
0
.3s
;
ul
{
padding
:
0
;
}
a
{
&
.no-margin
{
text-decoration
:
none
;
margin
:
0
;
color
:
$gl-text-color-light
;
}
}
svg
{
li
{
vertical-align
:
middle
;
list-style
:
none
;
margin-right
:
3px
;
}
}
.stage-column
{
&
:last-child
{
display
:
inline-block
;
.build
{
vertical-align
:
top
;
// Remove right connecting horizontal line from first build in last stage
&
:first-child
{
&
:not
(
:last-child
)
{
&
:
:
after
{
margin-right
:
44px
;
border
:
none
;
}
&
.left-margin
{
&
:not
(
:first-child
)
{
margin-left
:
44px
;
.left-connector
{
&
:
:
before
{
content
:
''
;
position
:
absolute
;
top
:
48%
;
left
:
-48px
;
border-top
:
2px
solid
$border-color
;
width
:
48px
;
height
:
1px
;
}
}
}
}
}
}
// Remove right curved connectors from all builds in last stage
&
:not
(
:first-child
)
{
&
.no-margin
{
&
:
:
after
{
margin
:
0
;
border
:
none
;
}
li
{
list-style
:
none
;
}
&
:last-child
{
.build
{
// Remove right connecting horizontal line from first build in last stage
&
:first-child
{
&
:
:
after
{
border
:
none
;
}
}
// Remove right curved connectors from all builds in last stage
&
:not
(
:first-child
)
{
&
:
:
after
{
border
:
none
;
}
}
}
// Remove opposite curve
}
.curve
{
// Remove opposite curve
&
:
:
befor
e
{
.curv
e
{
display
:
none
;
&
:
:
before
{
}
display
:
none
;
}
}
}
}
}
}
}
&
:first-child
{
&
:first-child
{
.build
{
.build
{
// Remove left curved connectors from all builds in first stage
// Remove left curved connectors from all builds in first stage
&
:not
(
:first-child
)
{
&
:not
(
:first-child
)
{
&
:
:
before
{
&
:
:
before
{
border
:
none
;
border
:
none
;
}
}
}
// Remove opposite curve
}
.curve
{
// Remove opposite curve
&
:
:
after
{
.curve
{
display
:
none
;
&
:
:
after
{
}
display
:
none
;
}
}
}
}
}
}
}
// Curve first child connecting lines in opposite direction
// Curve first child connecting lines in opposite direction
.curve
{
.curve
{
display
:
none
;
display
:
none
;
&
:
:
before
,
&::
after
{
content
:
''
;
width
:
21px
;
height
:
25px
;
position
:
absolute
;
top
:
-31px
;
border-top
:
2px
solid
$border-color
;
}
&
:
:
after
{
&
:
:
before
,
left
:
-44px
;
&::
after
{
border-right
:
2px
solid
$border-color
;
content
:
''
;
border-radius
:
0
20px
;
width
:
21px
;
}
height
:
25px
;
position
:
absolute
;
top
:
-31px
;
border-top
:
2px
solid
$border-color
;
}
&
:
:
before
{
&
:
:
after
{
right
:
-44px
;
left
:
-44px
;
border-left
:
2px
solid
$border-color
;
border-right
:
2px
solid
$border-color
;
border-radius
:
20px
0
0
;
border-radius
:
0
20px
;
}
}
}
}
.stage-name
{
&
:
:
before
{
margin
:
0
0
15px
10px
;
right
:
-44px
;
font-weight
:
bold
;
border-left
:
2px
solid
$border-color
;
width
:
176px
;
border-radius
:
20px
0
0
;
white-space
:
nowrap
;
}
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
}
}
.build
{
.stage-name
{
position
:
relative
;
margin
:
0
0
15px
10px
;
width
:
186px
;
font-weight
:
bold
;
margin-bottom
:
10px
;
width
:
176px
;
white-space
:
normal
;
white-space
:
nowrap
;
color
:
$gl-text-color-light
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
.dropdown-menu-toggle
{
}
background-color
:
transparent
;
border
:
none
;
padding
:
0
;
color
:
$gl-text-color-light
;
&
:focus
{
.build
{
outline
:
none
;
position
:
relative
;
}
width
:
186px
;
margin-bottom
:
10px
;
white-space
:
normal
;
color
:
$gl-text-color-light
;
&
:hover
{
.dropdown-menu-toggle
{
color
:
$gl-text-color
;
background-color
:
transparent
;
border
:
none
;
padding
:
0
;
color
:
$gl-text-color-light
;
.dropdown-counter-badge
{
&
:focus
{
color
:
$gl-text-color
;
outline
:
none
;
}
}
}
}
>
.build-content
{
&
:hover
{
display
:
inline-block
;
color
:
$gl-text-color
;
padding
:
8px
10px
9px
;
width
:
100%
;
border
:
1px
solid
$border-color
;
border-radius
:
30px
;
background-color
:
$white-light
;
&
:hover
{
.dropdown-counter-badge
{
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$stage-hover-border
;
color
:
$gl-text-color
;
color
:
$gl-text-color
;
}
}
}
}
}
>
.ci-action-icon-container
{
>
.build-content
{
position
:
absolute
;
display
:
inline-block
;
right
:
5px
;
padding
:
8px
10px
9px
;
top
:
5px
;
width
:
100%
;
}
border
:
1px
solid
$border-color
;
border-radius
:
30px
;
background-color
:
$white-light
;
.ci-status-icon
svg
{
&
:hover
{
height
:
20px
;
background-color
:
$stage-hover-bg
;
width
:
20px
;
border
:
1px
solid
$stage-hover-border
;
color
:
$gl-text-color
;
}
}
}
.arrow
{
>
.ci-action-icon-container
{
&
:
:
before
,
position
:
absolute
;
&::
after
{
right
:
5px
;
content
:
''
;
top
:
5px
;
display
:
inline-block
;
}
position
:
absolute
;
width
:
0
;
height
:
0
;
border-color
:
transparent
;
border-style
:
solid
;
top
:
18px
;
}
&
:
:
before
{
.ci-status-icon
svg
{
left
:
-5px
;
height
:
20px
;
margin-top
:
-6px
;
width
:
20px
;
border-width
:
7px
5px
7px
0
;
}
border-right-color
:
$border-color
;
}
&
:
:
after
{
.arrow
{
left
:
-4px
;
&
:
:
before
,
margin-top
:
-9px
;
&::
after
{
border-width
:
10px
7px
10px
0
;
content
:
''
;
border-right-color
:
$white-light
;
display
:
inline-block
;
}
position
:
absolute
;
width
:
0
;
height
:
0
;
border-color
:
transparent
;
border-style
:
solid
;
top
:
18px
;
}
}
// Connect first build in each stage with right horizontal line
&
:
:
before
{
&
:first-child
{
left
:
-5px
;
&
:
:
after
{
margin-top
:
-6px
;
content
:
''
;
border-width
:
7px
5px
7px
0
;
position
:
absolute
;
border-right-color
:
$border-color
;
top
:
48%
;
right
:
-48px
;
border-top
:
2px
solid
$border-color
;
width
:
48px
;
height
:
1px
;
}
}
}
// Connect each build (except for first) with curved lines
&
:
:
after
{
&
:not
(
:first-child
)
{
left
:
-4px
;
&
:
:
after
,
margin-top
:
-9px
;
&::
before
{
border-width
:
10px
7px
10px
0
;
content
:
''
;
border-right-color
:
$white-light
;
top
:
-49px
;
}
position
:
absolute
;
}
border-bottom
:
2px
solid
$border-color
;
width
:
25px
;
height
:
69px
;
}
// Right connecting curves
// Connect first build in each stage with right horizontal line
&
:
:
after
{
&
:first-child
{
right
:
-25px
;
&
:
:
after
{
border-right
:
2px
solid
$border-color
;
content
:
''
;
border-radius
:
0
0
20px
;
position
:
absolute
;
}
top
:
48%
;
right
:
-48px
;
border-top
:
2px
solid
$border-color
;
width
:
48px
;
height
:
1px
;
}
}
// Left connecting curves
// Connect each build (except for first) with curved lines
&
:
:
before
{
&
:not
(
:first-child
)
{
left
:
-25px
;
&
:
:
after
,
border-left
:
2px
solid
$border-color
;
&::
before
{
border-radius
:
0
0
0
20px
;
content
:
''
;
}
top
:
-49px
;
position
:
absolute
;
border-bottom
:
2px
solid
$border-color
;
width
:
25px
;
height
:
69px
;
}
}
// Connect second build to first build with smaller curved line
// Right connecting curves
&
:nth-child
(
2
)
{
&
:
:
after
{
&
:
:
after
,
right
:
-25px
;
&::
before
{
border-right
:
2px
solid
$border-color
;
height
:
29px
;
border-radius
:
0
0
20px
;
top
:
-9px
;
}
}
.curve
{
// Left connecting curves
display
:
block
;
&
:
:
before
{
}
left
:
-25px
;
border-left
:
2px
solid
$border-color
;
border-radius
:
0
0
0
20px
;
}
}
}
}
.grouped-pipeline-dropdown
{
// Connect second build to first build with smaller curved line
.dropdown-build
{
&
:nth-child
(
2
)
{
.build-content
{
&
:
:
after
,
width
:
100%
;
&::
before
{
height
:
29px
;
&
:hover
{
top
:
-9px
;
background-color
:
$stage-hover-bg
;
}
color
:
$gl-text-color
;
}
}
.ci-action-icon-container
{
.curve
{
padding
:
0
;
display
:
block
;
font-size
:
11px
;
position
:
absolute
;
top
:
1px
;
right
:
8px
;
}
}
}
}
}
}
}
.dropdown-counter-badge
{
color
:
$border-color
;
font-weight
:
100
;
font-size
:
15px
;
position
:
absolute
;
right
:
5px
;
top
:
8px
;
}
.grouped-pipeline-dropdown
{
.grouped-pipeline-dropdown
{
padding
:
0
;
width
:
191px
;
min-width
:
191px
;
left
:
auto
;
right
:
-195px
;
top
:
-4px
;
box-shadow
:
0
1px
5px
$black-transparent
;
a
{
display
:
inline-block
;
}
.dropdown-build
{
.dropdown-build
{
.build-content
{
.build-content
{
width
:
100%
;
width
:
100%
;
...
@@ -660,290 +617,333 @@
...
@@ -660,290 +617,333 @@
padding
:
0
;
padding
:
0
;
font-size
:
11px
;
font-size
:
11px
;
position
:
absolute
;
position
:
absolute
;
margin-top
:
3
px
;
top
:
1
px
;
right
:
7
px
;
right
:
8
px
;
}
}
}
}
ul
{
max-height
:
245px
;
overflow
:
auto
;
margin
:
3px
0
;
li
{
margin
:
4px
8px
4px
9px
;
padding
:
0
;
line-height
:
1
.1
;
position
:
relative
;
.ci-action-icon-container
:hover
{
background-color
:
transparent
;
}
.ci-status-icon
{
position
:
relative
;
top
:
2px
;
}
}
}
}
.pipeline-graph
.dropdown-build
.ci-status-icon
svg
{
width
:
18px
;
height
:
18px
;
}
}
}
.ci-status-text
{
max-width
:
110px
;
.dropdown-counter-badge
{
white-space
:
nowrap
;
color
:
$border-color
;
overflow
:
hidden
;
font-weight
:
100
;
text-overflow
:
ellipsis
;
font-size
:
15px
;
vertical-align
:
bottom
;
position
:
absolute
;
right
:
5px
;
top
:
8px
;
}
.grouped-pipeline-dropdown
{
padding
:
0
;
width
:
191px
;
min-width
:
191px
;
left
:
auto
;
right
:
-195px
;
top
:
-4px
;
box-shadow
:
0
1px
5px
$black-transparent
;
a
{
display
:
inline-block
;
display
:
inline-block
;
position
:
relative
;
font-weight
:
200
;
}
}
// Action Icons
.dropdown-build
{
.ci-action-icon-container
.ci-action-icon-wrapper
{
.build-content
{
i
{
width
:
100%
;
color
:
$border-color
;
border-radius
:
100%
;
border
:
1px
solid
$border-color
;
padding
:
5px
6px
;
font-size
:
13px
;
background
:
$white-light
;
height
:
30px
;
width
:
30px
;
&
:
:
before
{
position
:
relative
;
top
:
3px
;
left
:
3px
;
}
&
:hover
{
&
:hover
{
color
:
$gl-text-color
;
background-color
:
$stage-hover-bg
;
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$stage-hover-bg
;
color
:
$gl-text-color
;
}
}
}
}
.ci-play-icon
{
.ci-action-icon-container
{
padding
:
5px
5px
5px
7px
;
padding
:
0
;
font-size
:
11px
;
position
:
absolute
;
margin-top
:
3px
;
right
:
7px
;
}
}
}
}
.dropdown-build
{
ul
{
color
:
$gl-text-color-light
;
max-height
:
245px
;
overflow
:
auto
;
.build-content
{
margin
:
3px
0
;
padding
:
4px
7px
8px
;
}
.ci-action-icon-container
{
li
{
margin
:
4px
8px
4px
9px
;
padding
:
0
;
padding
:
0
;
font-size
:
11px
;
line-height
:
1
.1
;
float
:
right
;
margin-top
:
3px
;
display
:
inline-block
;
position
:
relative
;
position
:
relative
;
i
{
.ci-action-icon-container
:hover
{
font-size
:
11px
;
background-color
:
transparent
;
margin-top
:
0
;
}
}
}
.ci-action-icon-container
{
i
{
width
:
24px
;
height
:
24px
;
&
:
:
before
{
.ci-status-icon
{
top
:
1px
;
position
:
relative
;
left
:
1px
;
top
:
2px
;
}
}
}
}
}
}
.stage
{
}
max-width
:
100px
;
width
:
100px
;
.pipeline-graph
.dropdown-build
.ci-status-icon
svg
{
width
:
18px
;
height
:
18px
;
}
.ci-status-text
{
max-width
:
110px
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
vertical-align
:
bottom
;
display
:
inline-block
;
position
:
relative
;
font-weight
:
200
;
}
// Action Icons
.ci-action-icon-container
.ci-action-icon-wrapper
{
i
{
color
:
$border-color
;
border-radius
:
100%
;
border
:
1px
solid
$border-color
;
padding
:
5px
6px
;
font-size
:
13px
;
background
:
$white-light
;
height
:
30px
;
width
:
30px
;
&
:
:
before
{
position
:
relative
;
top
:
3px
;
left
:
3px
;
}
}
.ci-status-icon
svg
{
&
:hover
{
height
:
18px
;
color
:
$gl-text-color
;
width
:
18px
;
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$stage-hover-bg
;
}
}
}
.ci-status-text
{
.ci-play-icon
{
max-width
:
95px
;
padding
:
5px
5px
5px
7px
;
}
}
}
}
/**
.dropdown-build
{
* Builds dropdown in mini pipeline
color
:
$gl-text-color-light
;
*/
.mini-pipeline-graph
{
.builds-dropdown
{
background-color
:
transparent
;
padding
:
0
;
color
:
$gl-text-color-light
;
border
:
none
;
margin
:
0
;
&
:focus
,
.build-content
{
&
:hover
{
padding
:
4px
7px
8px
;
outline
:
none
;
}
margin-right
:
-8px
;
.ci-status-icon
{
.ci-action-icon-container
{
width
:
32px
;
padding
:
0
;
padding
:
0
8px
0
0
;
font-size
:
11px
;
transition
:
width
0
.1s
cubic-bezier
(
0
.25
,
0
,
1
,
1
);
float
:
right
;
margin-top
:
3px
;
display
:
inline-block
;
position
:
relative
;
+
.dropdown-caret
{
i
{
visibility
:
visible
;
font-size
:
11px
;
opacity
:
1
;
margin-top
:
0
;
}
}
}
}
}
&
:focus
,
.ci-action-icon-container
{
&
:active
{
i
{
.ci-status-icon-success
{
width
:
24px
;
background-color
:
rgba
(
$gl-success
,
.1
);
height
:
24px
;
}
.ci-status-icon-failed
{
&
:
:
before
{
background-color
:
rgba
(
$gl-danger
,
.1
);
top
:
1px
;
}
left
:
1px
;
}
}
}
.ci-status-icon-pending
,
.stage
{
.ci-status-icon-success_with_warnings
{
max-width
:
100px
;
background-color
:
rgba
(
$gl-warning
,
.1
)
;
width
:
100px
;
}
}
.ci-status-icon-running
{
.ci-status-icon
svg
{
background-color
:
rgba
(
$blue-normal
,
.1
);
height
:
18px
;
}
width
:
18px
;
}
.ci-status-icon-canceled
,
.ci-status-text
{
.ci-status-icon-disabled
,
max-width
:
95px
;
.ci-status-icon-not-found
{
}
background-color
:
rgba
(
$gl-gray
,
.1
);
}
}
/**
* Builds dropdown in mini pipeline
*/
.mini-pipeline-graph
{
.builds-dropdown
{
background-color
:
transparent
;
padding
:
0
;
color
:
$gl-text-color-light
;
border
:
none
;
margin
:
0
;
.ci-status-icon-created
,
&
:focus
,
.ci-status-icon-skipped
{
&
:hover
{
background-color
:
rgba
(
$gray-darkest
,
.1
);
outline
:
none
;
}
margin-right
:
-8px
;
}
.mini-pipeline-graph-icon-container
{
.ci-status-icon
{
.dropdown-caret
{
width
:
32px
;
font-size
:
11px
;
padding
:
0
8px
0
0
;
position
:
absolute
;
transition
:
width
0
.1s
cubic-bezier
(
0
.25
,
0
,
1
,
1
);
top
:
6px
;
left
:
20px
;
+
.dropdown-caret
{
margin-right
:
-6px
;
visibility
:
visible
;
z-index
:
2
;
opacity
:
1
;
visibility
:
hidden
;
opacity
:
0
;
transition
:
visibility
0
.1s
,
opacity
0
.1s
linear
;
}
}
}
}
}
}
.dropdown-build
.build-content
{
&
:focus
,
padding
:
3px
7px
7px
;
&
:active
{
}
.ci-status-icon-success
{
background-color
:
rgba
(
$gl-success
,
.1
);
}
.builds-dropdown-loading
{
.ci-status-icon-failed
{
margin
:
10px
auto
;
background-color
:
rgba
(
$gl-danger
,
.1
);
width
:
18px
;
}
}
.grouped-pipeline-dropdown
{
.ci-status-icon-pending
,
right
:
-172px
;
.ci-status-icon-success_with_warnings
{
top
:
23px
;
background-color
:
rgba
(
$gl-warning
,
.1
)
;
min-height
:
50px
;
}
a
{
.ci-status-icon-running
{
color
:
$gl-text-color-light
;
background-color
:
rgba
(
$blue-normal
,
.1
)
;
}
}
}
.arrow-up
{
.ci-status-icon-canceled
,
&
:
:
before
,
.ci-status-icon-disabled
,
&::
after
{
.ci-status-icon-not-found
{
content
:
''
;
background-color
:
rgba
(
$gl-gray
,
.1
);
display
:
inline-block
;
position
:
absolute
;
width
:
0
;
height
:
0
;
border-color
:
transparent
;
border-style
:
solid
;
top
:
-6px
;
left
:
2px
;
border-width
:
0
5px
6px
;
}
}
&
:
:
before
{
.ci-status-icon-created
,
border-width
:
0
5px
5px
;
.ci-status-icon-skipped
{
b
order-bottom-color
:
$border-color
;
b
ackground-color
:
rgba
(
$gray-darkest
,
.1
)
;
}
}
}
&
:
:
after
{
.mini-pipeline-graph-icon-container
{
margin-top
:
1px
;
.dropdown-caret
{
border-bottom-color
:
$white-light
;
font-size
:
11px
;
position
:
absolute
;
top
:
6px
;
left
:
20px
;
margin-right
:
-6px
;
z-index
:
2
;
visibility
:
hidden
;
opacity
:
0
;
transition
:
visibility
0
.1s
,
opacity
0
.1s
linear
;
}
}
}
}
}
}
/**
.dropdown-build
.build-content
{
* Icons in mini pipeline graph
padding
:
3px
7px
7px
;
*/
}
.mini-pipeline-graph-icon-container
.ci-status-icon
{
display
:
inline-block
;
border
:
1px
solid
;
border-radius
:
22px
;
margin-right
:
1px
;
width
:
22px
;
height
:
22px
;
position
:
relative
;
z-index
:
2
;
transition
:
all
0
.1s
cubic-bezier
(
0
.25
,
0
,
1
,
1
);
svg
{
.builds-dropdown-loading
{
top
:
-1px
;
margin
:
10px
auto
;
left
:
-1px
;
width
:
18px
;
}
.grouped-pipeline-dropdown
{
right
:
-172px
;
top
:
23px
;
min-height
:
50px
;
a
{
color
:
$gl-text-color-light
;
}
}
}
}
.stage-cell
.mini-pipeline-graph-icon-container
.ci-status-icon
svg
{
.arrow-up
{
width
:
22px
;
&
:
:
before
,
height
:
22px
;
&::
after
{
content
:
''
;
display
:
inline-block
;
position
:
absolute
;
width
:
0
;
height
:
0
;
border-color
:
transparent
;
border-style
:
solid
;
top
:
-6px
;
left
:
2px
;
border-width
:
0
5px
6px
;
}
&
:
:
before
{
border-width
:
0
5px
5px
;
border-bottom-color
:
$border-color
;
}
&
:
:
after
{
margin-top
:
1px
;
border-bottom-color
:
$white-light
;
}
}
}
}
/**
* Icons in mini pipeline graph
*/
.mini-pipeline-graph-icon-container
.ci-status-icon
{
display
:
inline-block
;
border
:
1px
solid
;
border-radius
:
22px
;
margin-right
:
1px
;
width
:
22px
;
height
:
22px
;
position
:
relative
;
z-index
:
2
;
transition
:
all
0
.1s
cubic-bezier
(
0
.25
,
0
,
1
,
1
);
svg
{
top
:
-1px
;
left
:
-1px
;
}
}
.stage-cell
.mini-pipeline-graph-icon-container
.ci-status-icon
svg
{
width
:
22px
;
height
:
22px
;
}
.terminal-icon
{
.terminal-icon
{
margin-left
:
3px
;
margin-left
:
3px
;
}
.terminal-container
{
.content-block
{
border-bottom
:
none
;
}
}
.terminal-container
{
#terminal
{
.content-block
{
margin-top
:
10px
;
border-bottom
:
none
;
min-height
:
450px
;
}
box-sizing
:
border-box
;
#terminal
{
>
div
{
margin-top
:
10px
;
min-height
:
450px
;
min-height
:
450px
;
box-sizing
:
border-box
;
>
div
{
min-height
:
450px
;
}
}
}
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment