mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 08:20:45 -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 {
|
@mixin tooltipShow {
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -50,3 +50,9 @@
|
||||||
@import 'partials/color-palette';
|
@import 'partials/color-palette';
|
||||||
@import 'partials/colorpicker';
|
@import 'partials/colorpicker';
|
||||||
@import 'partials/forms';
|
@import 'partials/forms';
|
||||||
|
|
||||||
|
//#################################################
|
||||||
|
// Resources
|
||||||
|
//#################################################
|
||||||
|
|
||||||
|
@import 'collection/font-collection';
|
||||||
|
|
Loading…
Reference in a new issue