taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Font refactor to openSans. openSans FTW

stable
Xavier Julián 2014-06-26 14:06:29 +02:00
parent 2c9a809df9
commit 006dbaa84f
33 changed files with 1885 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/fonts/OpenSans-CondLight-webfont.eot Normal file
View File

Binary file not shown.

1830
app/fonts/OpenSans-CondLight-webfont.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
app/fonts/OpenSans-CondLight-webfont.ttf Normal file
View File

Binary file not shown.

BIN
app/fonts/OpenSans-CondLight-webfont.woff Normal file
View File

Binary file not shown.

10
app/styles/components/buttons.scss
View File

@ -1,7 +1,7 @@
// Buttons components // Buttons components
.trans-button { .trans-button {
@extend %large; @extend %large;
font-family: 'ostrichSans'; @extend %title;
&:hover, &:hover,
&.active { &.active {
@include transition (color .3s linear); @include transition (color .3s linear);
@ -14,18 +14,18 @@
%button, %button,
.button { .button {
@extend %large; @extend %medium;
@extend %title;
@include transition (background .3s linear); @include transition (background .3s linear);
display: inline-block; display: inline-block;
font-family: 'ostrichSans';
padding: 8px 40px; padding: 8px 40px;
text-transform: uppercase;
&:hover { &:hover {
@include transition (background .3s linear); @include transition (background .3s linear);
} }
span { span {
color: $white; color: $white;
position: relative;
top: 2px;
} }
.icon { .icon {
margin-right: .3rem; margin-right: .3rem;

2
app/styles/components/filter.scss
View File

@ -1,8 +1,8 @@
.single-filter { .single-filter {
@extend %large; @extend %large;
@include clearfix; @include clearfix;
@extend %title;
display: block; display: block;
font-family: 'ostrichSans';
height: 32px; height: 32px;
margin-bottom: 1rem; margin-bottom: 1rem;
opacity: .5; opacity: .5;

2
app/styles/components/notification-message.scss
View File

@ -13,8 +13,8 @@
} }
.warning { .warning {
@extend %xlarge; @extend %xlarge;
@extend %bold;
color: $white; color: $white;
font-family: 'DroidSans-Bold';
line-height: 2.4rem; line-height: 2.4rem;
} }
.icon-delete { .icon-delete {

2
app/styles/components/popover.scss
View File

@ -1,9 +1,9 @@
@mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '') { @mixin popover($width, $top: '', $left: '', $bottom: '', $right: '', $arrow-width: 0, $arrow-top: '', $arrow-left: '', $arrow-bottom: '') {
@extend %text;
background: $blackish; background: $blackish;
bottom: #{$bottom}; bottom: #{$bottom};
color: $white; color: $white;
display: none; display: none;
font-family: 'DroidSans';
left: #{$left}; left: #{$left};
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;

4
app/styles/components/summary.scss
View File

@ -29,8 +29,8 @@
} }
.number { .number {
@extend %xlarge; @extend %xlarge;
@extend %bold;
float: left; float: left;
font-family: 'DroidSans-Bold';
margin-right: .3rem; margin-right: .3rem;
position: relative; position: relative;
top: 5px; top: 5px;
@ -39,8 +39,8 @@
.description { .description {
// line-height: 0; // line-height: 0;
@extend %small; @extend %small;
@extend %text;
float: left; float: left;
font-family: DroidSans;
line-height: .9rem; line-height: .9rem;
} }
} }

4
app/styles/dependencies/forms.scss
View File

@ -13,10 +13,10 @@ input[type="date"],
select, select,
textarea { textarea {
@extend %large; @extend %large;
@extend %title;
background: $gray-light; background: $gray-light;
border: 0; border: 0;
color: $grayer; color: $grayer;
font-family: 'ostrichSans';
height: 40px; height: 40px;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
@ -26,5 +26,5 @@ textarea {
} }
} }
input[type="password"] { input[type="password"] {
font-family: 'DroidSans'; @extend %text;
} }

16
app/styles/dependencies/typography.scss
View File

@ -2,7 +2,7 @@
// Font face // Font face
@each $font-face in DroidSans, DroidSans-Bold, ostrichSans, taiga { @each $font-face in DroidSans, DroidSans-Bold, ostrichSans, OpenSans-CondLight-webfont, taiga {
@font-face { @font-face {
font-family: '#{$font-face}'; font-family: '#{$font-face}';
src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'), src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'),
@ -25,7 +25,7 @@ h6 {
} }
} }
// __Font Sizes__ // __Font Sizes__ //
%xsmall {font-size: .5rem;} %xsmall {font-size: .5rem;}
%small {font-size: .8rem;} %small {font-size: .8rem;}
%medium {font-size: 1rem;} %medium {font-size: 1rem;}
@ -33,13 +33,21 @@ h6 {
%xlarge {font-size: 2rem;} %xlarge {font-size: 2rem;}
%xxlarge {font-size: 3rem;} %xxlarge {font-size: 3rem;}
// __Font Types__ //
%title {font-family: 'OpenSans-CondLight-webfont';}
%text {font-family: 'DroidSans';}
%bold {font-family: 'DroidSans-Bold';}
%taiga {font-family: 'taiga';}
h1 { h1 {
@extend %xxlarge; @extend %xxlarge;
font-family: 'ostrichSans'; @extend %title;
line-height: 2.7rem; line-height: 2.7rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase;
span { span {
@include ellipsis(250px); @include ellipsis(250px);
display: inline;
margin-right: .5rem; margin-right: .5rem;
} }
.green { .green {
@ -53,7 +61,7 @@ h1 {
h2 { h2 {
@extend %xlarge; @extend %xlarge;
font-family: 'ostrichSans'; @extend %title;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

2
app/styles/layout/base.scss
View File

@ -80,7 +80,7 @@ body {
} }
.icon { .icon {
font-family: 'taiga'; @extend %taiga;
} }
.hidden { .hidden {

2
app/styles/layout/invitation.scss
View File

@ -31,8 +31,8 @@
} }
.invitation-text { .invitation-text {
@extend %xlarge; @extend %xlarge;
@extend %title;
color: $white; color: $white;
font-family: 'ostrichSans';
line-height: 3rem; line-height: 3rem;
text-align: center; text-align: center;
.project-name { .project-name {

4
app/styles/layout/login.scss
View File

@ -18,8 +18,8 @@
} }
.tagline { .tagline {
@extend %xlarge; @extend %xlarge;
@extend %title;
color: $white; color: $white;
font-family: 'ostrichSans';
line-height: 2rem; line-height: 2rem;
} }
form { form {
@ -80,7 +80,7 @@
} }
.title { .title {
@extend %large; @extend %large;
font-family: 'DroidSans-bold'; @extend %bold;
} }
.icon-delete { .icon-delete {
color: $red-light; color: $red-light;

8
app/styles/layout/us-detail.scss
View File

@ -12,8 +12,8 @@
margin-bottom: 2rem; margin-bottom: 2rem;
.us-title { .us-title {
@extend %xlarge; @extend %xlarge;
@extend %text;
background: $whitish; background: $whitish;
font-family: 'DroidSans';
padding: 2rem 1rem; padding: 2rem 1rem;
.us-number { .us-number {
color: $gray-light; color: $gray-light;
@ -73,8 +73,8 @@
} }
.us-activity-tabs { .us-activity-tabs {
@extend %title;
border-bottom: 3px solid $gray-light; border-bottom: 3px solid $gray-light;
font-family: 'ostrichSans';
padding: .5rem 0; padding: .5rem 0;
li { li {
@extend %large; @extend %large;
@ -149,8 +149,8 @@
} }
.points { .points {
@extend %xlarge; @extend %xlarge;
@extend %title;
display: block; display: block;
font-family: 'ostrichSans';
text-align: center; text-align: center;
} }
.role { .role {
@ -192,7 +192,7 @@
position: relative; position: relative;
.title { .title {
@extend %large; @extend %large;
font-family: 'ostrichSans'; @extend %title;
} }
.icon { .icon {
@extend %large; @extend %large;

2
app/styles/modules/activity.scss
View File

@ -33,7 +33,7 @@
@include table-flex-child(1, 50px, 0); @include table-flex-child(1, 50px, 0);
} }
.activity-changed { .activity-changed {
font-family: 'DroidSans-Bold'; @extend %bold;
} }
.activity-fromto { .activity-fromto {
@extend %small; @extend %small;

4
app/styles/modules/admin-membership-table.scss
View File

@ -1,6 +1,6 @@
.admin-membership-table { .admin-membership-table {
.title { .title {
font-family: 'DroidSans-Bold'; @extend %bold;
} }
.avatar { .avatar {
align-items: center; align-items: center;
@ -17,7 +17,7 @@
width: 100%; width: 100%;
} }
.name { .name {
font-family: DroidSans-Bold; @extend %bold;
} }
.email { .email {
color: $gray-light; color: $gray-light;

2
app/styles/modules/admin-menu.scss
View File

@ -1,8 +1,8 @@
.admin-menu { .admin-menu {
li { li {
@extend %xlarge; @extend %xlarge;
@extend %title;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
font-family: 'ostrichSans';
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }

4
app/styles/modules/admin-roles.scss
View File

@ -1,12 +1,12 @@
.admin-roles { .admin-roles {
.total { .total {
@extend %large; @extend %large;
@extend %title;
background-color: $whitish; background-color: $whitish;
font-family: DroidSans-Bold;
padding: .5rem 1rem; padding: .5rem 1rem;
span { span {
@extend %medium; @extend %medium;
font-family: DroidSans; @extend %text;
padding-left: .5rem; padding-left: .5rem;
} }
} }

2
app/styles/modules/admin-submenu.scss
View File

@ -4,8 +4,8 @@
} }
li { li {
@extend %xlarge; @extend %xlarge;
@extend %title;
border-bottom: 1px solid #a6b2a7; border-bottom: 1px solid #a6b2a7;
font-family: 'ostrichSans';
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }

4
app/styles/modules/backlog-table.scss
View File

@ -61,13 +61,13 @@
.backlog-table-header { .backlog-table-header {
.backlog-table-title { .backlog-table-title {
@extend %medium; @extend %medium;
font-family: 'DroidSans-Bold'; @extend %bold;
} }
.backlog-table-subtitle { .backlog-table-subtitle {
@extend %small; @extend %small;
@extend %text;
background: $whitish; background: $whitish;
border-bottom: 2px solid $grayer; border-bottom: 2px solid $grayer;
font-family: 'DroidSans';
&:hover { &:hover {
background: $whitish; background: $whitish;
} }

4
app/styles/modules/colors-table.scss
View File

@ -11,8 +11,8 @@
} }
.title { .title {
@extend %medium; @extend %medium;
@extend %bold;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
font-family: 'DroidSans-Bold';
&:hover { &:hover {
background: transparent; background: transparent;
} }
@ -67,8 +67,8 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
input { input {
@extend %text;
background-color: $very-light-gray; background-color: $very-light-gray;
font-family: DroidSans;
width: 243px; width: 243px;
@include placeholder { @include placeholder {
color: $gray; color: $gray;

2
app/styles/modules/comment-activity.scss
View File

@ -33,7 +33,7 @@
@include table-flex-child(1, 50px, 0); @include table-flex-child(1, 50px, 0);
} }
.activity-changed { .activity-changed {
font-family: 'DroidSans-Bold'; @extend %bold;
} }
.activity-fromto { .activity-fromto {
@extend %small; @extend %small;

2
app/styles/modules/issues-table.scss
View File

@ -11,8 +11,8 @@
} }
.title { .title {
@extend %medium; @extend %medium;
@extend %bold;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
font-family: 'DroidSans-Bold';
&:hover { &:hover {
background: transparent; background: transparent;
} }

2
app/styles/modules/lightbox.scss
View File

@ -227,7 +227,7 @@
} }
.subtitle { .subtitle {
@extend %large; @extend %large;
font-family: 'ostrichSans'; @extend %title;
} }
.delete-options { .delete-options {
@include table-flex(); @include table-flex();

2
app/styles/modules/list-filters.scss
View File

@ -12,7 +12,7 @@
margin-right: 2rem; margin-right: 2rem;
a { a {
@extend %large; @extend %large;
font-family: 'ostrichSans'; @extend %title;
opacity: .4; opacity: .4;
&.active, &.active,
&:hover { &:hover {

2
app/styles/modules/nav.scss
View File

@ -1,8 +1,8 @@
.menu { .menu {
@extend %title;
background-image: url('../images/menu.png'); background-image: url('../images/menu.png');
background-position: left bottom; background-position: left bottom;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'ostrichSans';
height: 100%; height: 100%;
padding: 2rem .3rem; padding: 2rem .3rem;
position: fixed; position: fixed;

2
app/styles/modules/project-details.scss
View File

@ -2,8 +2,8 @@
input[type="text"], input[type="text"],
textarea { textarea {
@extend %medium; @extend %medium;
@extend %text;
background-color: $very-light-gray; background-color: $very-light-gray;
font-family: 'DroidSans';
font-weight: bold; font-weight: bold;
} }
fieldset { fieldset {

2
app/styles/modules/project-nav.scss
View File

@ -31,9 +31,9 @@
.projects-list { .projects-list {
a { a {
@extend %large; @extend %large;
@extend %title;
color: $whitish; color: $whitish;
display: block; display: block;
font-family: 'ostrichSans';
padding: 1rem; padding: 1rem;
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;

2
app/styles/modules/search-filter.scss
View File

@ -9,7 +9,7 @@
} }
a { a {
@extend %large; @extend %large;
font-family: 'ostrichSans'; @extend %title;
opacity: .2; opacity: .2;
&.active, &.active,
&:hover { &:hover {

2
app/styles/modules/search-result-table.scss
View File

@ -32,8 +32,8 @@
} }
.title { .title {
@extend %medium; @extend %medium;
@extend %bold;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
font-family: 'DroidSans-Bold';
&:hover { &:hover {
background: transparent; background: transparent;
} }

4
app/styles/modules/sprints.scss
View File

@ -14,8 +14,8 @@
} }
.sprint-name { .sprint-name {
@extend %large; @extend %large;
@extend %title;
display: inline-block; display: inline-block;
font-family: 'ostrichSans';
margin-right: 3px; margin-right: 3px;
max-width: 100px; max-width: 100px;
overflow: hidden; overflow: hidden;
@ -25,8 +25,8 @@
} }
.sprint-date { .sprint-date {
@extend %large; @extend %large;
@extend %title;
color: $gray-light; color: $gray-light;
font-family: 'ostrichSans';
} }
.sprint { .sprint {
margin-bottom: 2rem; margin-bottom: 2rem;

2
app/styles/modules/taskboard-table.scss
View File

@ -63,7 +63,7 @@ $column-margin: 0 10px 0 0;
} }
.us-title { .us-title {
@extend %large; @extend %large;
font-family: 'DroidSans'; @extend %title;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.us-ref { .us-ref {