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

replace css help icon with svg icon

Browse Source
This commit is contained in:
Lisa Passing 2015-03-18 12:33:23 +01:00
parent 84b6238eac
commit af287fecce
7 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/styles/app/layouts/build-job.sass
View File

@ -13,6 +13,13 @@
.job-anchor
position: relative
.build-title
.icon--question
width: 1.3em;
height: 1.3em;
transform: translate(0.3em, 0.2em);
cursor: pointer
// job matrix
.tile--jobs
padding: 0.5em 0.4em 0.4em 3.5rem

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

@ -132,19 +132,3 @@ $button-border-color: #d4d4d4
width: 1.1em
height: 0.7em
margin-right: .5em
.button--help
position: relative
top: .4em
left: .5em
width: 1.4rem
height: 1.4rem
background: $grey1
border: none
&:hover
background-color: $teal1
.icon--question
@extend %absolute-center
width: 0.6em
height: 0.9em

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

@ -117,6 +117,8 @@
background-image: inline-image('svg/icon-showmore.svg')
.icon--question
background-image: inline-image('svg/icon-help.svg')
&:hover
background-image: inline-image('svg/icon-help-hover.svg')
.icon-tab-arrow
background-image: inline-image('svg/icon-tab-arrow.svg')

2
app/styles/app/modules/tooltips.sass
View File

@ -39,4 +39,4 @@ $tooltip-grey: #6A6C6D
top: -8em
left: 4em
&:after
left: 4.1em
left: 3.7em

2
app/templates/jobs.hbs
View File

@ -5,7 +5,7 @@
<h2 class="build-title">Build Jobs</h2>
{{else}}
<h2 class="build-title">Allowed Failures
<span class="btn button-circle button--help"><span class="icon icon--question"></span></span>
<span class="icon icon--question"></span>
<div class="tooltip">
<p class="tooltip-inner">These are jobs you can allow to fail without failing your entire build</p>
</div>

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

@ -0,0 +1,21 @@
<?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="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
<g>
<path fill="#5BA4A4" d="M7,0.418C3.364,0.418,0.418,3.365,0.418,7c0,3.637,2.946,6.582,6.582,6.582S13.582,10.637,13.582,7
C13.582,3.365,10.636,0.418,7,0.418z M7.437,10.936c-0.195,0.189-0.465,0.277-0.769,0.275c-0.003,0-0.005,0-0.007,0
c-0.289,0-0.549-0.09-0.74-0.275c-0.196-0.186-0.295-0.445-0.293-0.732C5.626,9.918,5.725,9.658,5.923,9.477
c0.193-0.182,0.455-0.27,0.745-0.27c0.302,0,0.57,0.086,0.767,0.27c0.197,0.182,0.295,0.441,0.294,0.727
C7.729,10.49,7.632,10.75,7.437,10.936z M9.198,5.902C9.095,6.156,8.966,6.377,8.81,6.562C8.657,6.74,8.491,6.896,8.309,7.033
c-0.164,0.123-0.314,0.256-0.45,0.393c-0.13,0.135-0.24,0.289-0.332,0.467c-0.082,0.156-0.13,0.375-0.13,0.654V8.73h-1.37H5.859
L5.843,8.564C5.831,8.436,5.825,8.312,5.825,8.193c0-0.234,0.023-0.449,0.077-0.643c0.075-0.275,0.181-0.518,0.318-0.727
c0.134-0.201,0.287-0.379,0.461-0.529c0.159-0.139,0.308-0.271,0.445-0.398c0.13-0.119,0.236-0.242,0.319-0.367
c0.071-0.107,0.108-0.234,0.109-0.396C7.555,4.914,7.498,4.77,7.396,4.656C7.315,4.566,7.12,4.49,6.786,4.49
c-0.102,0-0.211,0.012-0.329,0.035C6.338,4.549,6.218,4.582,6.099,4.623C5.978,4.668,5.86,4.719,5.751,4.775
C5.639,4.834,5.54,4.891,5.454,4.951l-0.17,0.117L4.579,3.713l0.133-0.092c0.287-0.195,0.614-0.355,0.981-0.482
C6.071,3.01,6.518,2.947,7.032,2.947c0.697,0,1.271,0.17,1.691,0.531c0.42,0.357,0.635,0.859,0.632,1.451
C9.355,5.309,9.306,5.633,9.198,5.902z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

28
public/images/svg/icon-help.svg
View File

@ -2,16 +2,20 @@
<!-- 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"/>
width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
<g>
<path fill="#D0D1CF" d="M7,0.418C3.364,0.418,0.418,3.365,0.418,7c0,3.637,2.946,6.582,6.582,6.582S13.582,10.637,13.582,7
C13.582,3.365,10.636,0.418,7,0.418z M7.437,10.936c-0.195,0.189-0.465,0.277-0.769,0.275c-0.003,0-0.005,0-0.007,0
c-0.289,0-0.549-0.09-0.74-0.275c-0.196-0.186-0.295-0.445-0.293-0.732C5.626,9.918,5.725,9.658,5.923,9.477
c0.193-0.182,0.455-0.27,0.745-0.27c0.302,0,0.57,0.086,0.767,0.27c0.197,0.182,0.295,0.441,0.294,0.727
C7.729,10.49,7.632,10.75,7.437,10.936z M9.198,5.902C9.095,6.156,8.966,6.377,8.81,6.562C8.657,6.74,8.491,6.896,8.309,7.033
c-0.164,0.123-0.314,0.256-0.45,0.393c-0.13,0.135-0.24,0.289-0.332,0.467c-0.082,0.156-0.13,0.375-0.13,0.654V8.73h-1.37H5.859
L5.843,8.564C5.831,8.436,5.825,8.312,5.825,8.193c0-0.234,0.023-0.449,0.077-0.643c0.075-0.275,0.181-0.518,0.318-0.727
c0.134-0.201,0.287-0.379,0.461-0.529c0.159-0.139,0.308-0.271,0.445-0.398c0.13-0.119,0.236-0.242,0.319-0.367
c0.071-0.107,0.108-0.234,0.109-0.396C7.555,4.914,7.498,4.77,7.396,4.656C7.315,4.566,7.12,4.49,6.786,4.49
c-0.102,0-0.211,0.012-0.329,0.035C6.338,4.549,6.218,4.582,6.099,4.623C5.978,4.668,5.86,4.719,5.751,4.775
C5.639,4.834,5.54,4.891,5.454,4.951l-0.17,0.117L4.579,3.713l0.133-0.092c0.287-0.195,0.614-0.355,0.981-0.482
C6.071,3.01,6.518,2.947,7.032,2.947c0.697,0,1.271,0.17,1.691,0.531c0.42,0.357,0.635,0.859,0.632,1.451
C9.355,5.309,9.306,5.633,9.198,5.902z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB