Skip to content

Commit

Permalink
feat(lint): adjust templates to match linted FUI code (#215)
Browse files Browse the repository at this point in the history 
This PR reflects the changes of fomantic/Fomantic-UI#2610
  • Loading branch information
@lubber-de
lubber-de authored Dec 15, 2022
1 parent 56cc6d2 commit 106d289
Showing 1 changed file with 94 additions and 92 deletions.
186 changes: 94 additions & 92 deletions src/templates/icon.variables.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

/*******************************

Fomantic-UI integration of FontAwesome :
Fomantic-UI integration of FontAwesome:

// class names are separated
i.icon.angle-left => i.icon.angle.left
Expand All @@ -31,9 +31,9 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
Icon
*******************************/

/*--------------
/* --------------
Font Files
---------------*/
--------------- */

/* Solid Icons */
@importIcons: true;
Expand All @@ -45,158 +45,155 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand

@fonts: {
{% if icons.solid.icons.length > 0 -%}
@solid: {
font-family: @fontName;
src: url("@{fontPath}/@{fontName}.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontName}.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : block;
font-variant : normal;
text-decoration: inherit;
text-transform : none;
};
@solid: {
font-family: @fontName;
src: url('@{fontPath}/@{fontName}.woff2') format('woff2')
if(@supportIE, e(',') url('@{fontPath}/@{fontName}.woff') format('woff'));
font-style: normal;
font-weight: @normal;
font-display: block;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
};
{%- endif %}
{% if icons.outline.icons.length > 0 -%}
@outline: {
font-family: @outlineFontName;
src: url("@{fontPath}/@{outlineFontName}.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{outlineFontName}.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : block;
font-variant : normal;
text-decoration: inherit;
text-transform : none;
};
@outline: {
font-family: @outlineFontName;
src: url('@{fontPath}/@{outlineFontName}.woff2') format('woff2')
if(@supportIE, e(',') url('@{fontPath}/@{outlineFontName}.woff') format('woff'));
font-style: normal;
font-weight: @normal;
font-display: block;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
};
{%- endif %}
{% if icons.thin.icons.length > 0 -%}
@thin: {
font-family: @thinFontName;
src: url("@{fontPath}/@{thinFontName}.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{thinFontName}.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : block;
font-variant : normal;
text-decoration: inherit;
text-transform : none;
};
@thin: {
font-family: @thinFontName;
src: url('@{fontPath}/@{thinFontName}.woff2') format('woff2')
if(@supportIE, e(',') url('@{fontPath}/@{thinFontName}.woff') format('woff'));
font-style: normal;
font-weight: @normal;
font-display: block;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
};
{%- endif %}
{% if icons.brand.icons.length > 0 -%}
@brand: {
font-family: @brandFontName;
src: url("@{fontPath}/@{brandFontName}.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{brandFontName}.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : block;
font-variant : normal;
text-decoration: inherit;
text-transform : none;
};
@brand: {
font-family: @brandFontName;
src: url('@{fontPath}/@{brandFontName}.woff2') format('woff2')
if(@supportIE, e(',') url('@{fontPath}/@{brandFontName}.woff') format('woff'));
font-style: normal;
font-weight: @normal;
font-display: block;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
};
{%- endif %}
{% if icons.duotone.icons.length > 0 -%}
@duotone: {
font-family: @duotoneFontName;
src: url("@{fontPath}/@{duotoneFontName}.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{duotoneFontName}.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : block;
font-variant : normal;
text-decoration: inherit;
text-transform : none;
};
@duotone: {
font-family: @duotoneFontName;
src: url('@{fontPath}/@{duotoneFontName}.woff2') format('woff2')
if(@supportIE, e(',') url('@{fontPath}/@{duotoneFontName}.woff') format('woff'));
font-style: normal;
font-weight: @normal;
font-display: block;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
};
{%- endif %}

};


// Underscores in map keys will be replaced by dots to separate classnames at compile time

/* Deprecated *In/Out Naming Conflict) */
/* Deprecated (In/Out Naming Conflict) */
@icon-deprecated-map: {
linkedin_in:\f0e1;
zoom_in: \f00e;
zoom_out: \f010;
sign_in: \f2f6;
in_cart: \f218;
log_out: \f2f5;
sign_out: \f2f5;
linkedin_in: '\f0e1';
zoom_in: '\f00e';
zoom_out: '\f010';
sign_in: '\f2f6';
in_cart: '\f218';
log_out: '\f2f5';
sign_out: '\f2f5';
};

/* Icons */
@icon-map: {
{% for icon in icons.solid.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};

@icon-aliases-map: {
{% for icon in icons.solid.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};

@icon-outline-map: {
{% for icon in icons.outline.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};
@icon-outline-aliases-map: {
{% for icon in icons.outline.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};

@icon-thin-map: {
{% for icon in icons.thin.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};
@icon-thin-aliases-map: {
{% for icon in icons.thin.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};

@icon-brand-map: {
{% for icon in icons.brand.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};
@icon-brand-aliases-map: {
{% for icon in icons.brand.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};

@icon-duotone-map: {
{% for icon in icons.duotone.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};
@icon-duotone-secondary-map: {
{% for icon in icons.duotone.icons -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.secondaryUnicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.secondaryUnicode }}';
{% endfor -%}
};
@icon-duotone-aliases-map: {
{% for icon in icons.duotone.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.unicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.unicode }}';
{% endfor -%}
};
@icon-duotone-secondary-aliases-map: {
{% for icon in icons.duotone.aliases -%}
{{ icon.className | replace: ".", "_" }}: {{ icon.secondaryUnicode }};
{{ icon.className | replace: ".", "_" }}: '{{ icon.secondaryUnicode }}';
{% endfor -%}
};


/*--------------
/* --------------
Definition
---------------*/
--------------- */

/* Icon Variables */
@opacity: 1;
Expand All @@ -205,7 +202,6 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
@distanceFromText: 0.25rem;
@lineHeight: 1;


/* Variations */
@linkOpacity: 0.8;
@linkDuration: 0.3s;
Expand All @@ -225,16 +221,16 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
@cornerIconSize: 0.45em;
@cornerIconStroke: 1px;
@cornerIconShadow:
-@cornerIconStroke -@cornerIconStroke 0 @white,
@cornerIconStroke -@cornerIconStroke 0 @white,
-@cornerIconStroke @cornerIconStroke 0 @white,
@cornerIconStroke @cornerIconStroke 0 @white
-@cornerIconStroke -@cornerIconStroke 0 @white,
@cornerIconStroke -@cornerIconStroke 0 @white,
-@cornerIconStroke @cornerIconStroke 0 @white,
@cornerIconStroke @cornerIconStroke 0 @white
;
@cornerIconInvertedShadow:
-@cornerIconStroke -@cornerIconStroke 0 @black,
@cornerIconStroke -@cornerIconStroke 0 @black,
-@cornerIconStroke @cornerIconStroke 0 @black,
@cornerIconStroke @cornerIconStroke 0 @black
-@cornerIconStroke -@cornerIconStroke 0 @black,
@cornerIconStroke -@cornerIconStroke 0 @black,
-@cornerIconStroke @cornerIconStroke 0 @black,
@cornerIconStroke @cornerIconStroke 0 @black
;

@cornerOffset: 0;
Expand All @@ -248,3 +244,9 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
@big: 2em;
@huge: 4em;
@massive: 8em;

/* Duotone specifics */
@duotonePrimaryColor: inherit;
@duotonePrimaryOpacity: 1;
@duotoneSecondaryColor: inherit;
@duotoneSecondaryOpacity: 0.4;

0 comments on commit 106d289

Please sign in to comment.