1
0
mirror of https://github.com/phpbb/phpbb.git synced 2025-04-07 01:13:53 +02:00

[ticket/15538] o-icon class and stylelint

PHPBB3-15538
This commit is contained in:
mrgoldy 2019-03-10 18:42:31 +01:00 committed by Marc Alexander
parent 2f4aef8689
commit 5f62976d66
No known key found for this signature in database
GPG Key ID: 50E0D2423696F995
4 changed files with 14 additions and 8 deletions
phpBB/styles/prosilver

@ -1,6 +1,6 @@
{% spaceless %}
<i
class="icon fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
class="o-icon font fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
{% if S_HIDDEN %}
{% if TITLE %}title="{{ lang(TITLE) }}"{% endif %}
aria-hidden="true"

@ -1,6 +1,6 @@
{% spaceless %}
<img
class="icon png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
class="o-icon png png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
src="{{ SOURCE }}"
alt="{{ lang(TITLE) }}"
{{ ATTRIBUTES }}

@ -1,7 +1,8 @@
{% spaceless %}
{% set TITLE_ID = TITLE ? TITLE|lower|replace({' ': '-'}) ~ '-' ~ random() %}
<svg
class="icon svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
class="o-icon svg svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
{% if TITLE %}
{% if S_HIDDEN %}aria-hidden="true"{% endif %}

@ -14,6 +14,7 @@ svg {
* Just change the name of the font after the 14/1 to the name of
* the font you wish to use.
*/
.o-icon,
.icon,
.button .icon,
blockquote cite:before,
@ -32,42 +33,46 @@ blockquote cite:before,
text-rendering: auto; /* optimizelegibility throws things off #1094 */
}
img.icon,
svg.icon {
.o-icon.png,
.o-icon.svg {
vertical-align: middle;
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
.o-icon:before,
.icon:before {
padding-right: 2px;
}
.button .o-icon:before,
.button .icon:before {
padding-right: 0;
}
/* Icon size classes - Default size is 14px, use these for small variations */
.o-icon.icon-xl,
.icon.icon-xl {
font-size: 20px;
width: 20px;
height: 20px;
}
.o-icon.icon-lg,
.icon.icon-lg {
font-size: 16px;
width: 16px;
height: 16px;
}
.o-icon.icon-md,
.icon.icon-md {
font-size: 10px;
width: 10px;
height: 10px;
}
.o-icon.icon-sm,
.icon.icon-sm {
font-size: 8px;
width: 8px;