suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement design feedbacdk and new icons

Browse Source
This commit is contained in:
Lisa Passing 2015-03-16 12:31:10 +01:00
parent 843ccd4b1d
commit 4e532118ea
10 changed files with 70 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/styles/app/_mixins/vars.sass
View File

@ -35,6 +35,7 @@ $start-color: #D2C93B
$start-bg-color: #D2CA24
$cancel-color: #A1A0A0
$dropdown-color: $teal1
$created-color: #CDBC2C
$dashboard-text-color: #9d9fa1

1
app/styles/app/modules/buttons.sass
View File

@ -146,5 +146,6 @@ $button-border-color: #d4d4d4
.icon--question
@extend %absolute-center
width: 0.9em
transform: translateX(.1em)
background-size: 80% auto

19
app/styles/app/modules/icons.sass
View File

@ -93,21 +93,11 @@
background-image: inline-image('svg/icon-job-passed.svg')
.icon--error-grey,
.icon--job.errored
&:after
content: "!"
display: block
width: 0.4em
height: 1em
font-size: 24px
background-image: inline-image('svg/icon-job-errored.svg')
.icon--job.started,
.icon--job.created,
.icon--started-yellow
&:after
content: "..."
display: block
width: 0.4em
height: 1em
font-size: 24px
background-image: inline-image('svg/icon-job-started.svg')
.icon--lang
background-image: inline-image('svg/icon-language.svg')
@ -120,7 +110,10 @@
.icon--eye
background-image: inline-image('svg/icon-showmore.svg')
.icon--question
background-image: inline-image('svg/question.svg')
background-image: inline-image('svg/icon-help.svg')
.icon-tab-arrow
background-image: inline-image('svg/icon-tab-arrow.svg')
.icon-arrow-down

16
app/styles/app/modules/tabs.sass
View File

@ -44,16 +44,18 @@
position: relative
padding-left: 1em
&:before
content: "\003E"
content: ""
display: block
position: absolute
color: $grey4
left: -0.5em
width: .6em
height: 1em
font-size: 29px
line-height: 1
transform: scale(0.6, 1.6)
top: 0.4em
left: -0.7em
width: .7em
height: 1.3em
background:
size: 100%
repeat: no-repeat
@extend .icon-tab-arrow
.tabbody

16
app/styles/app/modules/tiles.sass
View File

@ -44,12 +44,13 @@
&.failed
@include colorJobs($fail-color)
&.errored
@include colorJobs($cancel-color)
@include colorJobs(#939292)
&.passed
@include colorJobs($pass-color)
&.started,
&.created
@include colorJobs($start-color)
&.created,
&.received
@include colorJobs($created-color)
@media #{$medium-up}
height: 145px
@ -167,15 +168,8 @@
margin-bottom: 0.3em
@media #{$medium-up}
height: 64px
.icon.errored
width: .5em
.icon.started,
.icon.created
&:after
width: .8em
color: $start-color
margin-top: -0.3em
.tile-main
color: #7d8282
.icon
margin-right: .3em
.icon.mac

17
public/images/svg/icon-help.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="5px" height="9px" viewBox="0 0 5 9" enable-background="new 0 0 5 9" xml:space="preserve">
<path fill="#FFFFFF" d="M2.187,6.817c-0.304,0-0.578,0.096-0.78,0.294C1.199,7.31,1.096,7.592,1.098,7.902
C1.096,8.216,1.199,8.498,1.405,8.7C1.605,8.902,1.877,9,2.18,9c0.002,0,0.004,0,0.007,0c0.318,0.002,0.6-0.094,0.805-0.3
c0.204-0.202,0.306-0.484,0.305-0.798C3.297,7.592,3.195,7.31,2.989,7.111C2.783,6.911,2.502,6.817,2.187,6.817z"/>
<path fill="#FFFFFF" d="M2.568,0C2.029,0,1.562,0.068,1.167,0.208C0.782,0.347,0.439,0.521,0.139,0.734L0,0.833L0.738,2.31
l0.178-0.127c0.09-0.066,0.193-0.128,0.311-0.192c0.115-0.062,0.237-0.117,0.364-0.166c0.125-0.044,0.25-0.081,0.375-0.106
c0.124-0.025,0.238-0.038,0.345-0.038c0.35,0,0.554,0.083,0.638,0.181C3.056,1.985,3.115,2.142,3.116,2.38
c-0.001,0.176-0.04,0.314-0.115,0.432c-0.086,0.136-0.198,0.27-0.334,0.4C2.523,3.351,2.368,3.495,2.201,3.646
C2.019,3.81,1.858,4.003,1.718,4.223C1.574,4.45,1.464,4.714,1.385,5.014C1.329,5.225,1.304,5.458,1.304,5.713
c0,0.13,0.006,0.265,0.018,0.404L1.34,6.299h0.175h1.434v-0.2c0-0.305,0.05-0.542,0.136-0.713c0.096-0.192,0.211-0.361,0.347-0.509
C3.575,4.729,3.731,4.584,3.904,4.45c0.19-0.149,0.364-0.319,0.524-0.513c0.163-0.202,0.298-0.442,0.406-0.719
C4.948,2.925,5,2.572,5,2.159c0.003-0.645-0.222-1.191-0.661-1.581C3.899,0.185,3.297,0,2.568,0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

12
public/images/svg/icon-job-errored.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15.188px" height="15.229px" viewBox="0 0 15.188 15.229" enable-background="new 0 0 15.188 15.229" xml:space="preserve">
<g>
<path fill="#A0A09F" d="M6.345,9.028c0.049,0.598,0.58,1.086,1.179,1.086h0.307c0.6,0,1.13-0.488,1.18-1.086l0.654-7.941
C9.715,0.489,9.265,0,8.665,0H6.692c-0.6,0-1.05,0.489-1,1.086L6.345,9.028z"/>
<path fill="#A0A09F" d="M7.68,11.785c-0.896,0-1.609,0.713-1.609,1.609C6.071,14.289,6.783,15,7.68,15
c0.895,0,1.606-0.71,1.606-1.605C9.286,12.498,8.574,11.785,7.68,11.785z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 891 B

11
public/images/svg/icon-job-started.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15.188px" height="15.229px" viewBox="0 0 15.188 15.229" enable-background="new 0 0 15.188 15.229" xml:space="preserve">
<g>
<circle fill="#CDBC2C" cx="7.686" cy="7.369" r="2.044"/>
<circle fill="#D6C826" cx="13.143" cy="7.369" r="2.044"/>
<circle fill="#D6C826" cx="2.232" cy="7.369" r="2.044"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 690 B

8
public/images/svg/icon-tab-arrow.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="8.024px" height="14.307px" viewBox="0 0 8.024 14.307" enable-background="new 0 0 8.024 14.307" xml:space="preserve">
<polyline fill="none" stroke="#E1E1E0" stroke-width="1.9341" stroke-miterlimit="10" points="0.713,0.653 6.713,7.201
0.801,13.653 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B

29
public/images/svg/question.svg
View File

@ -1,29 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="83px" height="105.6px" viewBox="36.5 22.5 83 105.6" enable-background="new 36.5 22.5 83 105.6" xml:space="preserve">
<g>
<path fill="none" d="M95.8,29.8c-5.533-2.733-11.2-4.1-17-4.1c-16.2,0-28.566,7.1-37.1,21.3c-1,1.6-0.733,3,0.8,4.2l13.2,10
c0.466,0.4,1.1,0.6,1.9,0.6c1.066,0,1.9-0.4,2.5-1.2c3.533-4.533,6.4-7.6,8.6-9.2c2.267-1.6,5.133-2.4,8.6-2.4
c3.2,0,6.05,0.867,8.55,2.6s3.75,3.7,3.75,5.9c0,2.533-0.666,4.567-2,6.1c-1.333,1.533-3.6,3.033-6.8,4.5
c-4.2,1.867-8.05,4.75-11.55,8.65C65.75,80.65,64,84.834,64,89.3V92.9c0,0.934,0.3,1.699,0.9,2.3c0.6,0.6,1.367,0.899,2.3,0.899
h19.2c0.934,0,1.699-0.3,2.3-0.899c0.6-0.601,0.899-1.366,0.899-2.3c0-1.268,0.717-2.917,2.15-4.95
C93.184,85.916,95,84.267,97.2,83c2.134-1.2,3.767-2.15,4.899-2.85c1.134-0.7,2.667-1.867,4.601-3.5
c1.933-1.633,3.417-3.233,4.45-4.8c1.033-1.567,1.967-3.583,2.8-6.05c0.833-2.466,1.25-5.167,1.25-8.1
c0-5.867-1.851-11.3-5.55-16.3C105.95,36.4,101.334,32.533,95.8,29.8z"/>
<path fill="none" d="M86.4,102.5H67.2c-0.934,0-1.7,0.3-2.3,0.9c-0.6,0.6-0.9,1.366-0.9,2.3v19.2c0,0.934,0.3,1.699,0.9,2.3
c0.6,0.6,1.367,0.899,2.3,0.899h19.2c0.934,0,1.699-0.3,2.3-0.899c0.6-0.601,0.899-1.366,0.899-2.3v-19.2
c0-0.934-0.3-1.7-0.899-2.3C88.1,102.8,87.334,102.5,86.4,102.5z"/>
<path fill="#FFFFFF" d="M89.6,124.9c0,0.934-0.3,1.699-0.899,2.3c-0.601,0.6-1.366,0.899-2.3,0.899H67.2
c-0.934,0-1.7-0.3-2.3-0.899c-0.6-0.601-0.9-1.366-0.9-2.3v-19.2c0-0.934,0.3-1.7,0.9-2.3c0.6-0.601,1.367-0.9,2.3-0.9h19.2
c0.934,0,1.699,0.3,2.3,0.9c0.6,0.6,0.899,1.366,0.899,2.3V124.9z M113.95,65.8c-0.833,2.467-1.767,4.483-2.8,6.05
c-1.033,1.566-2.518,3.167-4.45,4.8c-1.934,1.633-3.467,2.8-4.601,3.5C100.967,80.85,99.334,81.8,97.2,83
c-2.2,1.267-4.017,2.916-5.45,4.95c-1.434,2.033-2.15,3.683-2.15,4.95c0,0.934-0.3,1.699-0.899,2.3
C88.1,95.8,87.334,96.1,86.4,96.1H67.2c-0.934,0-1.7-0.3-2.3-0.899C64.3,94.6,64,93.834,64,92.9V89.3
c0-4.466,1.75-8.649,5.25-12.55c3.5-3.9,7.35-6.783,11.55-8.65c3.2-1.467,5.467-2.967,6.8-4.5c1.334-1.533,2-3.567,2-6.1
c0-2.2-1.25-4.167-3.75-5.9S80.5,49,77.3,49c-3.466,0-6.333,0.8-8.6,2.4c-2.2,1.6-5.067,4.667-8.6,9.2c-0.6,0.8-1.434,1.2-2.5,1.2
c-0.8,0-1.434-0.2-1.9-0.6l-13.2-10c-1.533-1.2-1.8-2.6-0.8-4.2c8.533-14.2,20.9-21.3,37.1-21.3c5.8,0,11.467,1.367,17,4.1
c5.534,2.733,10.15,6.6,13.851,11.6c3.699,5,5.55,10.434,5.55,16.3C115.2,60.633,114.783,63.333,113.95,65.8z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB