taiga-front/app/styles/core/typography.scss

298 lines
4.5 KiB
SCSS
Executable File

// Typography
// Font face
@each $font-face in
OpenSans-CondLight,
OpenSans-Light,
Opensans-Regular,
Opensans-Bold,
taiga {
@font-face {
font-family: '#{$font-face}';
src: url('../fonts/#{$font-face}.ttf') format('truetype');
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $blackish;
font-weight: normal;
line-height: 1.5;
a {
font-weight: inherit;
}
}
h1 {
@extend %xxlarge;
@extend %title;
line-height: 1.5;
margin-bottom: 1rem;
text-transform: uppercase;
span {
@extend %xxlarge;
margin-right: .5rem;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
&.green,
&:last-child {
flex-shrink: 0;
}
}
.project-name {
display: inline-block;
margin-bottom: 0;
}
.project-name-short {
display: inline-block;
max-width: 40%;
}
.green {
color: $primary;
}
.date {
@include ellipsis(500px);
color: $gray-light;
}
}
h2 {
@extend %xlarge;
@extend %title;
line-height: 1.2;
margin-bottom: 1rem;
}
p {
line-height: 1.5;
margin: 0 0 20px;
img {
margin: 0;
}
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
hr {
border: solid $blackish;
border-width: 1px 0 0;
clear: both;
height: 0;
margin: 10px 0 30px;
}
// __Links__
a,
a:visited {
text-decoration: none;
&:hover {
transition: color .3s linear;
}
}
// Taiga Icons
[data-icon]::before {
// scss-lint:disable ImportantRule
content: attr(data-icon);
font-family: 'taiga' !important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
speak: none;
text-transform: none !important;
}
[class^='icon-']::before,
[class*=' icon-']::before {
// scss-lint:disable ImportantRule
font-family: 'taiga' !important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
speak: none;
text-transform: none !important;
}
.icon-bug::before {
content: 'a';
}
.icon-copy::before {
content: 'b';
}
.icon-minimize::before {
content: 'c';
}
.icon-maximize::before {
content: 'd';
}
.icon-comment::before {
content: 'e';
}
.icon-plus::before {
content: 'f';
}
.icon-attachments::before {
content: 'g';
}
.icon-edit::before {
content: 'h';
}
.icon-documents::before {
content: 'i';
}
.icon-delete::before {
content: 'j';
}
.icon-arrow-bottom::before {
content: 'k';
}
.icon-arrow-left::before {
content: 'l';
}
.icon-arrow-right::before {
content: 'm';
}
.icon-arrow-up::before {
content: 'n';
}
.icon-briefcase::before {
content: 'o';
}
.icon-caret-down::before {
content: 'p';
}
.icon-caret-up::before {
content: 'q';
}
.icon-check-square::before {
content: 'r';
}
.icon-notification-error::before {
content: 's';
}
.icon-settings::before {
content: 't';
}
.icon-document::before {
content: 'u';
}
.icon-warning::before {
content: 'v';
}
.icon-move::before {
content: 'w';
}
.icon-drag-v::before {
content: 'x';
}
.icon-filter::before {
content: 'y';
}
.icon-help::before {
content: 'z';
}
.icon-reload::before {
content: 'A';
}
.icon-writer::before {
content: 'B';
}
.icon-stats::before {
content: 'C';
}
.icon-floppy::before {
content: 'D';
}
.icon-warning-alt::before {
content: 'E';
}
.icon-video::before {
content: 'F';
}
.icon-bulk::before {
content: 'G';
}
.icon-vunfold::before {
content: 'H';
}
.icon-tasks::before {
content: 'I';
}
.icon-kanban::before {
content: 'J';
}
.icon-search::before {
content: 'K';
}
.icon-wiki::before {
content: 'L';
}
.icon-team::before {
content: 'M';
}
.icon-vfold::before {
content: 'N';
}
.icon-issues::before {
content: 'O';
}
.icon-iocaine::before {
content: 'P';
}
.icon-archive::before {
content: 'Q';
}
.icon-capslock::before {
content: 'R';
}
.icon-upload::before {
content: 'S';
}
.icon-github::before {
content: 'T';
}
.icon-timeline::before {
content: 'U';
}
.icon-scrum::before {
content: 'V';
}
.icon-project::before {
content: 'W';
}
.icon-heart::before {
content: 'X';
}
.icon-eye::before {
content: 'Y';
}