mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
add font collection structure
This commit is contained in:
parent
5545739c81
commit
62588620a6
3 changed files with 99 additions and 0 deletions
81
resources/styles/collection/font-collection.scss
Normal file
81
resources/styles/collection/font-collection.scss
Normal file
|
@ -0,0 +1,81 @@
|
|||
// source sans pro
|
||||
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-extralight",100);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-extralightitalic",100,italic);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-light",200);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-lightitalic",200,italic);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-regular",normal);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-italic",normal,italic);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-semibold",500);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-semibolditalic",500,italic);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-bold",bold);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-bolditalic",bold,italic);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-black",900);
|
||||
@include font-face-collection("sourcesanspro","sourcesanspro-blackitalic",900,italic);
|
||||
|
||||
// Open Sans
|
||||
|
||||
@include font-face-collection("opensans","opensans-extralight",100);
|
||||
@include font-face-collection("opensans","opensans-extralightitalic",100,italic);
|
||||
@include font-face-collection("opensans","opensans-light",200);
|
||||
@include font-face-collection("opensans","opensans-lightitalic",200,italic);
|
||||
@include font-face-collection("opensans","opensans-regular",normal);
|
||||
@include font-face-collection("opensans","opensans-italic",normal,italic);
|
||||
@include font-face-collection("opensans","opensans-semibold",500);
|
||||
@include font-face-collection("opensans","opensans-semibolditalic",500,italic);
|
||||
@include font-face-collection("opensans","opensans-bold",bold);
|
||||
@include font-face-collection("opensans","opensans-bolditalic",bold,italic);
|
||||
@include font-face-collection("opensans","opensans-black",900);
|
||||
@include font-face-collection("opensans","opensans-blackitalic",900,italic);
|
||||
|
||||
// Bebas
|
||||
|
||||
@include font-face-collection("bebas","bebas",normal);
|
||||
|
||||
// Caviar Dreams
|
||||
|
||||
@include font-face-collection("caviardreams","caviardreams",normal);
|
||||
@include font-face-collection("caviardreams","caviardreams-italic",normal,italic);
|
||||
@include font-face-collection("caviardreams","caviardreams-bold",bold);
|
||||
@include font-face-collection("caviardreams","caviardreams-bolditalic",bold,italic);
|
||||
|
||||
// Good Dog
|
||||
|
||||
@include font-face-collection("gooddog","gooddog",normal);
|
||||
|
||||
// PT Sans
|
||||
|
||||
@include font-face-collection("ptsans","ptsans",normal);
|
||||
@include font-face-collection("ptsans","ptsans-italic",normal,italic);
|
||||
@include font-face-collection("ptsans","ptsans-bold",bold);
|
||||
@include font-face-collection("ptsans","ptsans-bolditalic",bold,italic);
|
||||
|
||||
// Roboto
|
||||
|
||||
@include font-face-collection("roboto","roboto-thin",100);
|
||||
@include font-face-collection("roboto","roboto-thinitalic",100,italic);
|
||||
@include font-face-collection("roboto","roboto-light",200);
|
||||
@include font-face-collection("roboto","roboto-lightitalic",200,italic);
|
||||
@include font-face-collection("roboto","roboto-regular",normal);
|
||||
@include font-face-collection("roboto","roboto-italic",normal,italic);
|
||||
@include font-face-collection("roboto","roboto-semibold",500);
|
||||
@include font-face-collection("roboto","roboto-semibolditalic",500,italic);
|
||||
@include font-face-collection("roboto","roboto-bold",bold);
|
||||
@include font-face-collection("roboto","roboto-bolditalic",bold,italic);
|
||||
@include font-face-collection("roboto","roboto-black",900);
|
||||
@include font-face-collection("roboto","roboto-blackitalic",900,italic);
|
||||
|
||||
// Roboto Condensed
|
||||
|
||||
@include font-face-collection("robotocondensed","robotocondensed-thin",100);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-thinitalic",100,italic);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-light",200);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-lightitalic",200,italic);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-regular",normal);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-italic",normal,italic);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-semibold",500);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-semibolditalic",500,italic);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-bold",bold);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-bolditalic",bold,italic);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-black",900);
|
||||
@include font-face-collection("robotocondensed","robotocondensed-blackitalic",900,italic);
|
|
@ -105,6 +105,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Collection fonts
|
||||
|
||||
@mixin font-face-collection($style-name, $file, $weight: unquote("normal"), $style: unquote("normal") ) {
|
||||
$filepath: "/fonts/collection/" + $file;
|
||||
@font-face {
|
||||
font-family: "#{$style-name}";
|
||||
src: url($filepath + ".eot");
|
||||
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
|
||||
font-weight: unquote($weight);
|
||||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltipShow {
|
||||
&:hover {
|
||||
|
|
|
@ -50,3 +50,9 @@
|
|||
@import 'partials/color-palette';
|
||||
@import 'partials/colorpicker';
|
||||
@import 'partials/forms';
|
||||
|
||||
//#################################################
|
||||
// Resources
|
||||
//#################################################
|
||||
|
||||
@import 'collection/font-collection';
|
||||
|
|
Loading…
Reference in a new issue