style caches

some cache tweaks

add title attributes to settings interaction elements

app/components/caches-item.coffee

@@ -4,7 +4,7 @@
 CachesItemComponent = Ember.Component.extend
 
   tagName: 'li'
-  classNames: ['tile', 'tile--xs', 'row']
+  classNames: ['cache-item']
   classNameBindings: ['cache.type']
   isDeleting: false
 

app/styles/app/_mixins/mixins.sass

@@ -40,21 +40,32 @@
 %inline-block
   display: inline-block
 
-%helptext
-  font-size: $font-size-m
-  color: $grey-medium
-  a
-    color: $grey-dark
-    text-decoration: none
-    &:hover
-      text-decoration: underline
-
 %section-title
   font-size: $font-size-sm
   color: $grey-medium
   font-weight: 400
 
 
+=linkStyle
+  a
+    text-decoration: none
+    border-bottom: 1px solid #bfc0c1
+    padding-bottom: 0.1em
+    transition: color 200ms ease, border 200ms ease
+    &:hover,
+    &:active
+      color: #303030
+      text-decoration: none
+      border-color: transparent
+
+%helptext
+  font-size: $font-size-m
+  color: $grey-medium
+  +linkStyle
+
+.helptext
+  @extend %helptext
+
 // @todo simplyfiy coloring mixins
 =colorStatusIcons($color, $status)
   .status-icon.#{$status}

app/styles/app/layout.sass

@@ -97,16 +97,3 @@
     width: grid-calc(31, 36)
     margin-left: grid-calc(5, 36)
 
-
-.travis-lint
-  background-color: $travis-lint-bg
-  width: 100%
-  color: $travis-lint-color
-  margin: 10px 0 36px 0
-  p
-    padding: 10px
-    font-weight: bold
-    margin: 0
-  a
-    margin-left: 5px
-

app/styles/app/layouts/caches.sass

@@ -1,67 +1,95 @@
-.caches
-  @include resetul
-  margin-top: 1rem
-  font-size: $font-size-sm
-  color: $grey-medium
-  clear: both
-
-  .tile-xs
-    padding-left: 0
-
-
-  .push
-    .icon--grey
-      @extend .icon--grey.push
-      width: 1.2em;
-      height: 0.8em;
-  .pull_request
-    .icon--grey
-      @extend .icon--grey.pull_request
-      width: 1em;
-      height: 1.5em;
-
-  .icon--grey
-    margin-right: .3em
-
-  .button--delete
-    transform: translateY(-0.2em);
-
-  @media #{$medium-up}
-    .caches-branch
-      position: relative
-      overflow: hidden
-      width: grid-calc(4, 13)
-      &:after
-        content: ""
-        @include fadeOut(right, -90deg, $cream-light)
-    .caches-date
-      width: grid-calc(4, 13)
-    .caches-size
-      width: grid-calc(4, 13)
-    .caches-button
-      text-align: right
-      width: grid-calc(1, 13)
-
-.delete-repo-caches
-  margin-top: 1rem
 
 .caches-header
-  overflow: auto
+  .small-title
-  .build-title
+    margin-top: .5em
-    float: left
+    small
-    margin: 1.1em 0 .5em
+      color: $grey
-    a:hover
+      font-size: 14px
-      text-decoration: underline
+    a:hover,
-  .button--delete
+    a:active
-    float: right
+      border-bottom: 1px solid $grey
 
-.caches-helptext
+  @media #{$medium-up}
-  @extend %helptext
+    display: flex
+    flex-flow: row wrap
+    justify-content: space-between
+    align-items: center
 
-.caches-title
+.caches-list
-  @extend %helptext
+  padding: 0
-  @extend %section-title
+  margin: 0
-  @include clearfix
+  list-style: none
-  float: left
+
-  margin: 1em 0 .5em
+.cache-item
+  border: 1px solid $cream-dark
+  margin-bottom: 5px
+  font-size: 15px
+  padding: 0 1em
+  .status-icon
+    width: 1.5em
+    height: 1.5em
+    vertical-align: middle
+  &:hover,
+  &:active
+    background-color: #F5F5F5
+
+  @media #{$medium-up}
+    display: flex
+    justify-content: space-between
+    flex-flow: row wrap
+    align-items: center
+    padding: .3em 0
+    white-space: nowrap
+    .row-item:first-of-type
+      flex: 1 0 30%
+      padding-left: 1em
+    .row-item:nth-of-type(2)
+      flex: 1 0 30%
+    .row-item:nth-of-type(3)
+      flex: 1 0 30%
+    .row-item:last-of-type
+      flex: 0 0 50px
+      padding-right: 1em
+
+.delete-cache-button
+  padding-right: 3.1em
+  font-size: 15px
+  background:
+    size: auto 17px
+    position: 90% 0
+    repeat: no-repeat
+  @extend %icon-line-trashcan
+  &:hover,
+  &:active
+    color: $red
+    @extend %icon-line-trashcan-red
+
+.delete-cache-icon
+  position: relative
+  display: inline-block
+  .tooltip
+    pointer-events: none
+  .icon-trash
+    display: inline-block
+    height: 17px
+    padding-left: 1.7em
+    background:
+      size: auto 100%
+      repeat: no-repeat
+    @extend %icon-line-trashcan
+  &:hover,
+  &:active
+    color: $red
+    .icon-trash
+      @extend %icon-line-trashcan-red
+  @media #{$medium-up}
+    .tooltip
+      pointer-events: inherit
+    .icon-trash
+      width: 50px
+      padding-left: 0
+      text-indent: 999%
+      white-space: nowrap
+      overflow: hidden
+      background-position: 50% 0
 

app/styles/app/layouts/settings.sass

@@ -53,17 +53,18 @@
     box-shadow: none
 
 %settings-row
-  padding: .6em .5em
   border-radius: 4px
   background-color: #F6F5F5
   @media #{$medium-up}
-    height: 47px
+    height: 36px
 
 .settings-envvar
   @extend %settings-row
+  padding: .4em .5em
 
 .settings-sshkey
   @extend %settings-row
+  padding: .6em .5em
   display: block
   margin-bottom: 1rem
   overflow: hidden
@@ -104,7 +105,6 @@
     width: grid-calc(6, 12)
     margin-bottom: 0
 
-
 %settings-value-section
   display: inline-block
   vertical-align: middle
@@ -133,7 +133,7 @@
   input
     display: inline-block
     width: 100%
-    padding: 0.7em 0.5em 0.7em 2.6em
+    padding: 0.6em 0.5em 0.7em 2.6em
     border-radius: 4px
     border: none
     background-color: #eeedec
@@ -161,7 +161,7 @@
     @extend .icon-delete
     width: 1.1em
     height: 1.6em
-    background-position: 0 4px
+    background-position: 0 2px
   &:hover
     .icon-delete
       @extend .icon-delete-hover

app/styles/app/layouts/sidebar.sass

@@ -74,12 +74,11 @@ $sb-font-size: 14px
         color: $teal-light
       &:after
         bottom: -1px
+  li
+    margin-right: 0.8em
   @media (min-width: #{lower-bound($large-range)})
     ul
         height: 2em
-  @media #{$xxlarge-up}
-    li
-      padding-right: 2em
   @media (max-width: #{lower-bound($large-range)})
     li
       display: block !important

app/styles/app/modules/icons.sass

@@ -52,14 +52,20 @@
 %icon-hook-off
   background-image: inline-image('svg/hooks-off.svg')
 
+
+%icon-line-trashcan
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-501.7 376.8 12.3 15"><style>.st0{fill:%23939798;}</style><g id="trash"><path class="st0" d="M-491 381.1h-9.2c-.2 0-.3.1-.4.2-.1.1-.2.3-.1.4l.8 9.6c0 .3.3.5.6.5h7.7c.3 0 .5-.2.6-.5l.8-9.6c0-.2 0-.3-.1-.4-.4-.1-.5-.2-.7-.2zm-1.3 9.6h-6.6l-.7-8.4h8l-.7 8.4zM-490 379.2h-2.9v-1.1c0-.7-.6-1.3-1.3-1.3h-2.7c-.7 0-1.3.6-1.3 1.3v1.1h-2.9c-.3 0-.6.3-.6.6s.3.6.6.6h11.2c.3 0 .6-.3.6-.6s-.4-.6-.7-.6zm-7.1-1c0-.1.1-.2.2-.2h2.7c.1 0 .2.1.2.2v1.1h-3.1v-1.1z"/><path class="st0" d="M-496.7 389.5c.3 0 .4-.2.4-.5l-.4-5.2c0-.2-.2-.4-.5-.4-.2 0-.4.2-.4.5l.4 5.2c.1.3.3.4.5.4zM-494.5 389.5c.3 0 .4-.2.5-.4l.4-5.2c0-.2-.2-.4-.4-.5-.2 0-.4.2-.5.4l-.4 5.2c0 .3.2.5.4.5z"/></g></svg>')
+%icon-line-trashcan-red
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-501.7 376.8 12.3 15"><style>.st0{fill:%23d94341;}</style><g id="trash"><path class="st0" d="M-491 381.1h-9.2c-.2 0-.3.1-.4.2-.1.1-.2.3-.1.4l.8 9.6c0 .3.3.5.6.5h7.7c.3 0 .5-.2.6-.5l.8-9.6c0-.2 0-.3-.1-.4-.4-.1-.5-.2-.7-.2zm-1.3 9.6h-6.6l-.7-8.4h8l-.7 8.4zM-490 379.2h-2.9v-1.1c0-.7-.6-1.3-1.3-1.3h-2.7c-.7 0-1.3.6-1.3 1.3v1.1h-2.9c-.3 0-.6.3-.6.6s.3.6.6.6h11.2c.3 0 .6-.3.6-.6s-.4-.6-.7-.6zm-7.1-1c0-.1.1-.2.2-.2h2.7c.1 0 .2.1.2.2v1.1h-3.1v-1.1z"/><path class="st0" d="M-496.7 389.5c.3 0 .4-.2.4-.5l-.4-5.2c0-.2-.2-.4-.5-.4-.2 0-.4.2-.4.5l.4 5.2c.1.3.3.4.5.4zM-494.5 389.5c.3 0 .4-.2.5-.4l.4-5.2c0-.2-.2-.4-.4-.5-.2 0-.4.2-.5.4l-.4 5.2c0 .3.2.5.4.5z"/></g></svg>')
+%icon-line-trashcan-disabled
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-502.4 377 12.1 15"><style>.st0{fill:%23939798;}</style><g id="disabledtrash"><path class="st0" d="M-492.3 382.7l-.6 8.2h-6.6v-.4l-.8.9-.2.2c.1.2.3.4.5.4h7.7c.3 0 .5-.2.6-.5l.8-9.6c0-.1 0-.3-.1-.4l-1.3 1.2zM-496.1 381.4h-4.7c-.2 0-.3.1-.4.2-.1.1-.2.3-.1.4l.4 4.7 1-1.1-.2-3h3.1l.9-1.2zM-501.8 380.6h6.5l1.8-1.9v-.3c0-.7-.6-1.3-1.3-1.3h-2.7c-.7 0-1.3.6-1.3 1.3v1.1h-2.9c-.3 0-.6.3-.6.6s.2.5.5.5zm4-2.2c0-.1.1-.2.2-.2h2.7c.1 0 .2.1.2.2v1.1h-3.1v-1.1z"/><path class="st0" d="M-497.4 389.8c.1 0 .1 0 0 0 .3 0 .4-.2.4-.5l-.1-1.5-.8.9v.7c.1.2.3.4.5.4zM-495.1 389.8c.2 0 .4-.2.4-.4l.3-4.4-.9 1-.2 3.3c-.1.2.1.4.4.5zM-490.5 378.1c-.2-.2-.6-.2-.8 0l-10.9 11.7c-.2.2-.2.6 0 .8.1.1.2.2.4.2s.3-.1.4-.2l10.9-11.7c.2-.3.2-.6 0-.8z"/></g></svg>')
+
 .icon-delete
-  background-image: inline-image('svg/delete.svg')
+  @extend %icon-line-trashcan
-  
 .icon-delete-hover
-  background-image: inline-image('svg/delete-hover.svg')
+  @extend %icon-line-trashcan-red
-
 .icon-delete-disabled
-  background-image: inline-image('svg/delete-disabled.svg')
+  @extend %icon-line-trashcan-disabled
 
 .icon-key
   background-image: inline-image('svg/key.svg')

app/styles/app/modules/tooltips.sass

@@ -3,9 +3,9 @@
     position: absolute
     top: -2.8em
     width: auto
-    height: 1.9em
+    height: 1.6em
     margin: auto
-    padding: .3em .4em .3em
+    padding: .1em .4em
     z-index: 5
     background-color: #818383
     border-radius: 4px
@@ -54,7 +54,7 @@
     right: 0
     left: 0
     top: -4em
-    height: 3.2em
+    height: 2.9em
     max-width: 8.6em
     &:before
       left: 45%

app/styles/app/pages/home-pro.sass

@@ -4,18 +4,6 @@ $red: #DB4242
 $yellow: #E5C025
 $grey: #858585
 
-@mixin linkStyle
-  a
-    text-decoration: none
-    border-bottom: 1px solid #bfc0c1
-    padding-bottom: 0.1em
-    transition: color 200ms ease, border 200ms ease
-    &:hover,
-    &:active
-      color: #303030
-      text-decoration: none
-      border-color: transparent
-
 .landing-pro
 
   br

app/templates/caches.hbs

@@ -1,13 +1,13 @@
 {{#if cachesExist}}
   <div class="caches-header">
-    <h1 class="caches-title">All caches <small>(<a href="http://docs.travis-ci.com/user/caching/" title="">documentation</a>)</small></h1>
+    <h1 class="small-title">All caches <small>(<a href="http://docs.travis-ci.com/user/caching/" title="Read about caching">Read the docs</a>)</small></h1>
-    <a href="#" {{action "deleteRepoCache"}} class="{{if isDeleting 'deleting'}} delete-repo-caches button--delete">
+    <a {{action "deleteRepoCache"}} class="{{if isDeleting 'deleting'}} delete-cache-button" title="Delete all repository caches">
       Delete all repository caches
     </a>
   </div>
   {{#if model.pushes.length}}
-    <h2 class="caches-title">Pushes</h2>
+    <h2 class="small-title">Pushes</h2>
-    <ul id="caches" class="caches">
+    <ul id="caches" class="caches-list">
       {{#each  model.pushes as |cache|}}
         {{caches-item cache=cache repo=repo caches=model.pushes}}
       {{/each}}
@@ -15,8 +15,8 @@
   {{/if}}
 
   {{#if model.pullRequests.length}}
-    <h2 class="caches-title">Pull Requests</h2>
+    <h2 class="small-title">Pull Requests</h2>
-    <ul class="caches">
+    <ul class="caches-list">
       {{#each model.pullRequests as |cache|}}
         {{caches-item cache=cache repo=repo caches=model.pullRequests}}
       {{/each}}
@@ -24,5 +24,5 @@
   {{/if}}
 
 {{else}}
-  <p class="caches-helptext">No caches have been created yet,<br>read more on <a href="http://docs.travis-ci.com/user/caching/" title="">how to setup caching with your build</a>.</p>
+  <p class="helptext">No caches have been created yet,<br>read more on <a href="http://docs.travis-ci.com/user/caching/" title="Documentation on caching">how to setup caching with your build</a>.</p>
 {{/if}}

app/templates/components/caches-item.hbs

@@ -1,14 +1,20 @@
-<p class="tile-item caches-branch column">
+<div class="row-item">
-  <span class="icon icon--grey"></span>
+  {{request-icon event=cache.type}}
-  {{cache.branch}}
+  <span class="label-align">{{cache.branch}}</span>
-</p>
+</div>
-
+<div class="row-item">
-<p class="tile-item caches-date column">{{format-time cache.last_modified}}</p>
+  <span class="icon-calendar"></span>
-
+  <span class="label-align">{{format-time cache.last_modified}}</span>
-<p class="tile-item caches-size column">{{travis-mb cache.size}}MB</p>
+</div>
-
+<div class="row-item">
-<p class="tile-item caches-button column">
+  <span class="icon-scale"></span>
-  <a href="#" {{action "delete"}} class="{{if isDeleting 'deleting'}} delete-by-slug delete button--delete">
+  <span class="label-align">{{travis-mb cache.size}}MB</span>
-    Delete
+</div>
+<div class="row-item">
+  <a {{action "delete"}} class="{{if isDeleting 'deleting'}} delete-cache-icon" title="Delete this cache">
+    <div class="tooltip">
+      <span class="icon-trash">delete cache</span>
+      <span class="tooltip-bubble">Delete</span>
+    </div>
   </a>
-</p>
+</div>

app/templates/env-vars.hbs

@@ -7,8 +7,8 @@
         {{#if isEditing}}
           {{partial 'env_vars/form'}}
         {{else}}
-          <a href="#" class="edit-var" {{action "edit"}}>Edit</a>
+          <a class="edit-var" {{action "edit"}} title="Edit env var">Edit</a>
-          <a href="#" {{action "delete"}} class="delete-var {{if isDeleting 'deleting'}}">
+          <a {{action "delete"}} class="delete-var {{if isDeleting 'deleting'}}" title="Delete env var">
             Delete
           </a>
           <span class="name">{{name}}</span>

app/templates/requests.hbs

@@ -1,5 +1,5 @@
 {{#if config.pro}}
-<div class="travis-lint">
+<div class="helptext">
   <p>Travis Lint for clean .yml files
     <a href={{lintUrl}} title="Travis WebLint">lint.travis-ci.org/{{repo.slug}}</a>
   </p>

app/templates/ssh-key.hbs

@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="actions">
-      <a href="#" {{action "delete"}} class="delete-ssh-key {{if isDeleting 'deleting'}}">
+      <a {{action "delete"}} class="delete-ssh-key {{if isDeleting 'deleting'}}" title="Delete SSH key">
         Delete
       </a>
     </div>
@@ -27,5 +27,5 @@
     The default key's fingerprint is <code>{{defaultKey.fingerprint}}</code>
   </p>
 
-  <a {{action "add"}} href="#" class="add-ssh-key">Add a custom SSH key</a>
+  <a {{action "add"}} class="add-ssh-key" title="Add a custom SSH key">Add a custom SSH key</a>
 {{/if}}

public/images/line-icons/icon-trash-disabled.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="-502.4 377 12.1 15" style="enable-background:new -502.4 377 12.1 15;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#939798;}
+</style>
+<g id="disabledtrash">
+	<path class="st0" d="M-492.3,382.7l-0.6,8.2h-6.6l0-0.4l-0.8,0.9c-0.1,0.1-0.1,0.1-0.2,0.2c0.1,0.2,0.3,0.4,0.5,0.4h7.7
+		c0.3,0,0.5-0.2,0.6-0.5l0.8-9.6c0-0.1,0-0.3-0.1-0.4L-492.3,382.7z"/>
+	<path class="st0" d="M-496.1,381.4h-4.7c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.2,0.3-0.1,0.4l0.4,4.7l1-1.1l-0.2-3h3.1L-496.1,381.4z"
+		/>
+	<path class="st0" d="M-501.8,380.6h3.5h3l1.8-1.9v-0.3c0-0.7-0.6-1.3-1.3-1.3h-2.7c-0.7,0-1.3,0.6-1.3,1.3v1.1h-2.9
+		c-0.3,0-0.6,0.3-0.6,0.6S-502.1,380.6-501.8,380.6z M-497.8,378.4c0-0.1,0.1-0.2,0.2-0.2h2.7c0.1,0,0.2,0.1,0.2,0.2v1.1h-3.1V378.4
+		z"/>
+	<path class="st0" d="M-497.4,389.8C-497.3,389.8-497.3,389.8-497.4,389.8c0.3,0,0.4-0.2,0.4-0.5l-0.1-1.5l-0.8,0.9l0,0.7
+		C-497.8,389.6-497.6,389.8-497.4,389.8z"/>
+	<path class="st0" d="M-495.1,389.8c0.2,0,0.4-0.2,0.4-0.4l0.3-4.4l-0.9,1l-0.2,3.3C-495.6,389.5-495.4,389.7-495.1,389.8
+		C-495.1,389.8-495.1,389.8-495.1,389.8z"/>
+	<path class="st0" d="M-490.5,378.1c-0.2-0.2-0.6-0.2-0.8,0l-10.9,11.7c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.1,0.2,0.2,0.4,0.2
+		c0.2,0,0.3-0.1,0.4-0.2l10.9-11.7C-490.3,378.6-490.3,378.3-490.5,378.1z"/>
+</g>
+</svg>

public/images/line-icons/icon-trash.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="-501.7 376.8 12.3 15" style="enable-background:new -501.7 376.8 12.3 15;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#939798;}
+</style>
+<g id="trash">
+	<path class="st0" d="M-491,381.1h-9.2c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.2,0.3-0.1,0.4l0.8,9.6c0,0.3,0.3,0.5,0.6,0.5h7.7
+		c0.3,0,0.5-0.2,0.6-0.5l0.8-9.6c0-0.2,0-0.3-0.1-0.4C-490.7,381.2-490.8,381.1-491,381.1z M-492.3,390.7h-6.6l-0.7-8.4h8
+		L-492.3,390.7z"/>
+	<path class="st0" d="M-490,379.2h-2.9v-1.1c0-0.7-0.6-1.3-1.3-1.3h-2.7c-0.7,0-1.3,0.6-1.3,1.3v1.1h-2.9c-0.3,0-0.6,0.3-0.6,0.6
+		s0.3,0.6,0.6,0.6h11.2c0.3,0,0.6-0.3,0.6-0.6S-489.7,379.2-490,379.2z M-497.1,378.2c0-0.1,0.1-0.2,0.2-0.2h2.7
+		c0.1,0,0.2,0.1,0.2,0.2v1.1h-3.1V378.2z"/>
+	<path class="st0" d="M-496.7,389.5C-496.7,389.5-496.7,389.5-496.7,389.5c0.3,0,0.4-0.2,0.4-0.5l-0.4-5.2c0-0.2-0.2-0.4-0.5-0.4
+		c-0.2,0-0.4,0.2-0.4,0.5l0.4,5.2C-497.1,389.4-496.9,389.5-496.7,389.5z"/>
+	<path class="st0" d="M-494.5,389.5C-494.5,389.5-494.5,389.5-494.5,389.5c0.3,0,0.4-0.2,0.5-0.4l0.4-5.2c0-0.2-0.2-0.4-0.4-0.5
+		c-0.2,0-0.4,0.2-0.5,0.4l-0.4,5.2C-494.9,389.3-494.7,389.5-494.5,389.5z"/>
+</g>
+</svg>