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

add new tab styles

Browse Source
This commit is contained in:
Lisa Passing 2015-03-09 14:58:38 +01:00
parent c77ed00425
commit 1483a0e86c
7 changed files with 119 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/styles/app.scss
View File

@ -21,7 +21,7 @@
@import "app/main/annotations";
@import "app/main/list";
@import "app/main/log";
@import "app/main/repository";
// @import "app/main/repository";
@import "app/main/sponsors";
@import "app/main/summary";
// @import "app/main/tools";

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

@ -1,4 +1,8 @@
// colors
$teal1: #5FA5A4
$teal2: #63A4A3
$blue-grey: #404650
$blue-grey-light: #d8e2e6
$light-gray: #e9e9e7
@ -26,7 +30,7 @@ $error-color: $fail-color
$start-color: #D2C93B
$start-bg-color: #D2CA24
$cancel-color: #A1A0A0
$dropdown-color: #5FA5A4
$dropdown-color: $teal1
$dashboard-text-color: #9d9fa1

20
app/styles/app/layouts/buildheader.sass
View File

@ -9,8 +9,6 @@
.repo
font-size: $font-size-normal
color: $grey
// a
// color: $grey
.repo-header
header
@ -59,12 +57,18 @@
.repo-menus
@media #{$medium-up}
.dropdown
float: right
position: absolute
top: -1.1em
right: 0
z-index: 50
.tabnav
float: left
margin-bottom: .7em
.tabbody
clear: both
position: absolute
top: -0.6em
.repo-menu-header
position: relative
height: 1.6em
margin-bottom: 1em
border-bottom: solid $cream-dark 2px
.repo-main-commit
&,
@ -94,7 +98,7 @@
width: 22px
height: 22px
margin-right: .4em
vertical-align: middle
vertical-align: top
border-radius: 50%
@media #{$medium-up}
position: absolute

158
app/styles/app/main/repository.sass
View File

@ -1,94 +1,94 @@
#repo
position: relative
width: 100%
overflow-x: hidden
padding: 1px 0 0 10px
// #repo
// position: relative
// width: 100%
// overflow-x: hidden
// padding: 1px 0 0 10px
h3
margin-right: 5px
// h3
// margin-right: 5px
.status-image
display: inline-block
position: relative
width: 90px
height: 25px
vertical-align: top
// .status-image
// display: inline-block
// position: relative
// width: 90px
// height: 25px
// vertical-align: top
a#status-image-popup
display: inline-block
opacity: 1.0
img
border: none
// a#status-image-popup
// display: inline-block
// opacity: 1.0
// img
// border: none
.github-icon
width: 21px
height: 21px
display: inline-block
position: relative
vertical-align: top
img
opacity: 0.65
// .github-icon
// width: 21px
// height: 21px
// display: inline-block
// position: relative
// vertical-align: top
// img
// opacity: 0.65
.not-found
display: block
padding: 10px 5px
font-size: 12px
// .not-found
// display: block
// padding: 10px 5px
// font-size: 12px
.description, .language
font-weight: normal
font-size: 15px
// .description, .language
// font-weight: normal
// font-size: 15px
.description
margin: 10px 0 35px 0
color: #9ca0a7
// .description
// margin: 10px 0 35px 0
// color: #9ca0a7
.language
display: none
padding-right: 5px
color: #666a72
// .language
// display: none
// padding-right: 5px
// color: #666a72
.github-stats
position: absolute
top: 15px
right: 10px
> *
float: left
a
height: 16px
display: block
font-size: $font-size-smaller
font-weight: bold
text-decoration: none
margin-left: 10px
padding-left: 20px
background: no-repeat 0px 2px
color: $color-text-light
&.watchers
background-image: inline-image('ui/github-watchers.png')
&.forks
background-image: inline-image('ui/github-forks.png')
// .github-stats
// position: absolute
// top: 15px
// right: 10px
// > *
// float: left
// a
// height: 16px
// display: block
// font-size: $font-size-smaller
// font-weight: bold
// text-decoration: none
// margin-left: 10px
// padding-left: 20px
// background: no-repeat 0px 2px
// color: $color-text-light
// &.watchers
// background-image: inline-image('ui/github-watchers.png')
// &.forks
// background-image: inline-image('ui/github-forks.png')
.tab dd
a[href^="https://github.com"],
a[href^="http://github.com"],
a[href^="https://www.github.com"],
a[href^="http://www.github.com"]
&:hover
background: transparent url(/images/icons/github.png) center right no-repeat
background-size: 12px
opacity: 1
padding-right: 16px
// .tab dd
// a[href^="https://github.com"],
// a[href^="http://github.com"],
// a[href^="https://www.github.com"],
// a[href^="http://www.github.com"]
// &:hover
// background: transparent url(/images/icons/github.png) center right no-repeat
// background-size: 12px
// opacity: 1
// padding-right: 16px
@media #{$large-up}
h3
display: inline-block
.github-icon
display: inline-block
top: 17px
margin-right: 1em
.status-image
top: 18px
// @media #{$large-up}
// h3
// display: inline-block
// .github-icon
// display: inline-block
// top: 17px
// margin-right: 1em
// .status-image
// top: 18px

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

@ -2,46 +2,37 @@
.tabnav
ul
@include resetul
@include border-top-radius(4px)
width: 100%
background-color: $cream-light
clear: both
@media #{$small-only}
margin-top: 2em
li
&:first-child a
border-top-left-radius: 4px
&:last-child a
border-top-right-radius: 4px
@media #{$small-only}
margin-bottom: .8em
a
@extend %inline-block
width: 100%
border: 2px solid transparent
padding: .3em 1em .2em
color: $grey2
padding: .2em 0
.active
position: relative
a
border-top-color: $cream-dark
border-left-color: $cream-dark
border-right-color: $cream-dark
background-color: $white
color: $teal2
&:after
content: none
content: ""
position: absolute
left: 0
bottom: -4px
width: 100%
height: 2px
background-color: $teal2
@media #{$medium-up}
ul
@extend %inline-block
li
float: left
// &:last-child
// a:after
// content: none
// a
// &:after
// content: ""
// position: relative
// left: 1.3em
// display: inline-block
// width: 2px
// height: 10px
// background-color: $cream-dark
padding-right: 2em

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

@ -16,6 +16,8 @@
@include grid-column(9)
.tile-additional
@media #{$small-only}
margin-top: 1em
@media #{$xlarge-up}
@include grid-column(3)

11
app/templates/repo.hbs
View File

@ -17,15 +17,14 @@
<p class="description">{{description}}</p>
</header>
<div class="repo-menus">
{{view 'repo-show-tools'}}
{{view 'repo-show-tabs'}}
<div class="repo-menu-header">
{{view 'repo-show-tools'}}
{{view 'repo-show-tabs'}}
</div>
<div class="tabbody repo-main">
{{outlet}}
</div>
</div>
</article>
{{else}}