Commit aa1dcf2d authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Benni Mack
Browse files

[TASK] Replace FontAwesome icons with typo3 icons

To provide a consistent look&feel and to eventually phase out
FontAwesome in the TYPO3 backend, all remaining fa-* icons are replaced
with their counterparts from the @typo3/icons package.

The CSS class `icon-emphasized` is introduced as a drop-in replacement
for the `fa-stack` construct:

```
<span class="icon-emphasized">
    <core:icon identifier="my-icon-identifier" size="small"/>
</span>
```

The removal of the FontAwesome integration will follow in a separate
patch.

Resolves: #97877
Releases: main
Change-Id: I0e9ca1e4a918b3f44969ea9886ec0cd1e56d78be
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75041

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 95dd43c0
......@@ -15,15 +15,18 @@
// </div>
//
//
// Advanded Usage
// Advanced Usage
// --------------
//
// <div class="callout callout-info">
// <div class="media">
// <div class="media-left">
// <span class="fa-stack fa-lg callout-icon">
// <i class="fa fa-circle fa-stack-2x"></i>
// <i class="fa fa-info fa-stack-1x"></i>
// <span class="icon-emphasized">
// <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-info" data-identifier="actions-info">
// <span class="icon-markup">
// <svg class="icon-color"><use xlink:href="/typo3/sysext/core/Resources/Public/Icons/T3Icons/sprites/actions.svg#actions-info"></use></svg>
// </span>
// </span>
// </span>
// </div>
// <div class="media-body">
......@@ -82,12 +85,9 @@ $callout-notice-border: $state-notice-border;
.media {
margin: 0;
.fa-stack {
.icon-emphasized {
color: $callout-icon-color;
> .fa:first-child {
color: $callout-border;
}
background-color: $callout-border;
}
}
}
......@@ -131,12 +131,9 @@ $callout-notice-border: $state-notice-border;
.media {
margin: 0;
.fa-stack {
.icon-emphasized {
color: $icon-color;
> .fa:first-child {
color: $border;
}
background-color: $border;
}
}
}
......
@import "../../../node_modules/@typo3/icons/dist/icons.scss";
@import "../../../node_modules/@typo3/icons/dist/icons-bootstrap.scss";
//
// Mixins
//
@mixin icon-background($icon, $iconColor: $white) {
content: '';
vertical-align: middle;
mask: escape-svg($icon);
background-color: $iconColor;
background-size: contain;
display: inline-block;
}
//
// Icon alignment
//
......
......@@ -7,7 +7,9 @@
//
// Load global variables
//
@import "../../node_modules/@typo3/icons/dist/scss/icons-variables-actions.scss";
@import "variables/main";
@import "minimal";
//
// Variables
......@@ -1131,26 +1133,18 @@ $tree-line-height: 20px;
z-index: 1;
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
font-family: FontAwesome;
vertical-align: middle;
width: 14px;
height: 14px;
border-radius: 50%;
font-size: 1em;
line-height: 1.4;
text-align: center;
background: none;
}
}
#t3-form-navigation-component & {
&:before {
@include icon-background($icon-actions-exclamation-circle, $danger);
margin-top: 0.2em;
color: #fff;
font-size: 10px;
font-weight: 800;
content: "\f12a";
background-color: $danger;
}
}
......@@ -1163,9 +1157,10 @@ $tree-line-height: 20px;
border-color: $danger;
&:before {
@include icon-background($icon-actions-exclamation-circle, $danger);
left: 4.5em;
margin-top: 1.9em;
content: "\f071";
}
.element-label {
......
@import "../../../node_modules/@typo3/icons/dist/scss/icons-variables-actions.scss";
//
// Base
//
......@@ -256,7 +258,7 @@
background-color: $warning;
background-clip: padding-box;
color: #fff;
line-height: 13px;
line-height: 16px;
cursor: default;
span {
......@@ -265,22 +267,21 @@
.search-choice-close {
position: absolute;
top: 4px;
right: 5px;
top: 3px;
right: 0;
display: block;
width: 12px;
height: 12px;
width: 16px;
height: 16px;
&:hover {
text-decoration: none;
}
&:after {
content: $fa-var-times;
font-family: FontAwesome;
padding-left: 2px;
vertical-align: top;
color: #fff;
@include icon-background($icon-actions-close, $white);
width: 16px;
height: 16px;
}
}
}
......
......@@ -9,8 +9,6 @@ $console-border-color: darken($gray-300, 15%);
border: 1px solid $console-border-color;
.topbar {
@extend .clearfix;
background-color: $gray-300;
padding: $padding-base-vertical $padding-base-horizontal;
border-bottom: 1px solid $console-border-color;
......
......@@ -83,10 +83,6 @@
&.btn-default {
margin-bottom: 5px;
}
&:not(.active) .fa {
display: none;
}
}
}
......
@import "../../../node_modules/@typo3/icons/dist/scss/icons-variables-actions.scss";
//
// Dropzone Variables
//
......@@ -59,9 +61,6 @@ $dropzone-icon-ok-bg: $success;
right: 5px;
height: $dropzone-close-height;
width: $dropzone-close-width;
font-family: FontAwesome;
font-size: $dropzone-close-size;
line-height: $dropzone-close-height;
text-align: center;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
......@@ -73,12 +72,18 @@ $dropzone-icon-ok-bg: $success;
border: 0;
&:hover {
color: $dropzone-close-hover-text;
background-color: $dropzone-close-hover-bg;
&:before {
@include icon-background($icon-actions-close, $dropzone-close-hover-text);
}
}
&:before {
content: "\f00d";
@include icon-background($icon-actions-close, $dropzone-close-text);
width: $dropzone-close-size;
height: $dropzone-close-size;
}
}
......@@ -125,21 +130,23 @@ $dropzone-icon-ok-bg: $success;
}
.dropzone-hint-icon {
display: flex;
justify-content: center;
align-items: center;
height: $dropzone-icon-height;
width: $dropzone-icon-width;
text-align: center;
line-height: $dropzone-icon-height;
font-size: $dropzone-icon-size;
background-color: $dropzone-icon-bg;
border-radius: $dropzone-icon-radius;
font-family: FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
&:before {
content: "\f093";
@include icon-background($icon-actions-upload, $dropzone-text);
width: $dropzone-icon-size;
height: $dropzone-icon-size;
}
}
......@@ -156,13 +163,17 @@ $dropzone-icon-ok-bg: $success;
.dropzone-hint-icon {
color: $dropzone-icon-ok-text;
background: $dropzone-icon-ok-bg;
&:before {
@include icon-background($icon-actions-upload, $dropzone-icon-ok-text);
}
}
}
.drop-in-progress {
.dropzone-hint-icon {
&:before {
content: "\f063";
@include icon-background($icon-actions-arrow-down, $dropzone-icon-ok-text);
}
}
}
......
......@@ -21,12 +21,6 @@ $contrast-color: rgba(0, 0, 0, 0.1);
.media {
margin: 0;
.fa-stack {
> .fa:first-child {
opacity: 0.2;
}
}
}
}
......
@import "../../../node_modules/@typo3/icons/dist/scss/icons-variables-actions.scss";
//
// Tab menu
//
......@@ -28,20 +30,8 @@
}
}
&[class*="has-"] > a.nav-link {
&[class*='has-'] > a.nav-link {
&:before {
font-family: FontAwesome;
margin-right: 2px;
margin-top: -2px;
vertical-align: middle;
font-size: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 50%;
width: 15px;
height: 15px;
display: inline-block;
@include transition(all 0.25s ease-in-out);
}
}
......@@ -60,7 +50,11 @@
}
&:before {
content: $fa-var-exclamation;
@include icon-background($icon-actions-exclamation-circle, $white);
border-radius: 50%;
width: 14px;
height: 14px;
}
&.active {
......
......@@ -84,7 +84,14 @@ $tree-control-icon-size: 12px;
position: relative;
.icon {
margin-right: 2px;
margin-right: -4px;
margin-top: 4px;
svg {
width: $tree-control-icon-size;
height: $tree-control-icon-size;
background-color: $tree-bg;
}
}
}
}
......@@ -144,27 +151,6 @@ $tree-control-icon-size: 12px;
outline: none;
text-decoration: none;
}
> .fa {
display: inline-block;
text-align: center;
cursor: pointer;
&:before {
width: $tree-control-icon-size;
height: $tree-control-icon-size;
background-color: $tree-bg;
display: block;
}
}
&.list-tree-control-open > .fa:before {
content: "\f0d7";
}
&.list-tree-control-closed > .fa:before {
content: "\f0da";
}
}
.list-tree-root {
......
......@@ -29,3 +29,15 @@
padding: 0.375rem 1rem 0.375rem 0.75rem;
}
.media {
.icon-emphasized {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
border-radius: 100%;
}
}
......@@ -224,6 +224,7 @@ $login-container-padding-horizontal: 2.5em;
text-align: center;
position: absolute;
opacity: 0.75;
padding: 0;
@include transition(opacity 0.2s ease-in-out);
......@@ -265,10 +266,6 @@ $login-container-padding-horizontal: 2.5em;
padding-top: 1em;
color: $login-copyright-text;
.fa {
font-size: 13px;
}
> *:first-child {
margin-top: 0;
}
......
:root {
--grideditor-grid-spacing: 1rem;
--grideditor-cell-spacing: 1rem;
--grideditor-cell-bg: #fff;
--grideditor-cell-border-radius: 4px;
--grideditor-cell-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
--grideditor-action-size: 32px;
--grideditor-action-spacing: 2px;
--grideditor-action-bg: #fafafa;
--grideditor-action-focus-bg: #{tint-color($primary, 90%)};
--grideditor-action-focus-outline-color: #{tint-color($primary, 20%)};
--grideditor-action-hover-bg: #{tint-color($primary, 95%)};
}
.grideditor {
td {
vertical-align: middle;
display: grid;
grid-template: "grideditor-control-top ." "grideditor-editor grideditor-control-right" "grideditor-control-bottom ." "grideditor-preview grideditor-preview" auto / minmax(auto, 1fr);
gap: var(--grideditor-grid-spacing);
&-control {
justify-content: center;
align-items: center;
display: flex;
&.editor_cell {
height: 100%;
&-top {
grid-area: grideditor-control-top;
}
}
table.editor {
border: 0;
border-left: 1px $gray-300 solid;
border-top: 1px $gray-300 solid;
td {
vertical-align: middle;
border: 0;
border-bottom: 1px $gray-300 solid;
border-right: 1px $gray-300 solid;
text-align: center;
background-color: white;
min-height: 100px;
&-right {
grid-area: grideditor-control-right;
}
}
div#editor {
height: 100%;
&-bottom {
grid-area: grideditor-control-bottom;
}
}
div.cell_container {
width: 80px;
height: 80px;
position: relative;
left: 50%;
margin-top: 30px;
margin-left: -30px;
opacity: 0.3;
}
&-editor {
grid-area: grideditor-editor;
div.cell_container:hover {
opacity: 0.5;
&-grid {
display: grid;
gap: 1em;
width: 100%;
}
}
.grideditor-preview {
margin-top: 5px;
}
&-preview {
grid-area: grideditor-preview;
.link {
display: block;
position: absolute;
width: 20px;
height: 40px;
overflow: hidden;
opacity: 0.5;
&:hover {
text-decoration: none;
opacity: 1;
typo3-t3editor-codemirror {
border: 1px solid $border-color;
}
}
}
&_expand_down,
&_shrink_up {
width: 40px;
height: 20px;
}
// Cell
.grideditor-cell {
--grideditor-cell-col-start: var(--grideditor-cell-col, 1);
&_expand_right {
left: 52px;
top: 0;
--grideditor-cell-col-end: calc(var(--grideditor-cell-col, 1) + var(--grideditor-cell-colspan, 1));
&:before {
font-family: FontAwesome;
content: "#{$fa-var-caret-right}";
font-size: 42px;
line-height: 42px;
}
}
--grideditor-cell-row-start: var(--grideditor-cell-row, 1);
&_shrink_left {
left: -8px;
top: 0;
--grideditor-cell-row-end: calc(var(--grideditor-cell-row, 1) + var(--grideditor-cell-rowspan, 1));
&:before {
font-family: FontAwesome;
content: "#{$fa-var-caret-left}";
font-size: 42px;
line-height: 42px;
}
}
grid-column: var(--grideditor-cell-col-start) / var(--grideditor-cell-col-end);
grid-row: var(--grideditor-cell-row-start) / var(--grideditor-cell-row-end);
height: 100%;
width: 100%;
display: flex;
min-height: 100px;
flex-direction: column;
border: 1px solid var(--grideditor-cell-bg);
background-color: var(--grideditor-cell-bg);
border-radius: var(--grideditor-cell-border-radius);
box-shadow: var(--grideditor-cell-shadow);
&_expand_down {
left: 12px;
top: 40px;
> * {
width: 100%;
}
&:before {
font-family: FontAwesome;
content: "#{$fa-var-caret-down}";
font-size: 42px;
line-height: 19px;
}
}
&-actions {
position: relative;
flex-grow: 1;
min-height: calc(var(--grideditor-cell-spacing) + (var(--grideditor-action-size) + var(--grideditor-action-spacing)) * 3);
min-width: calc(var(--grideditor-cell-spacing) + (var(--grideditor-action-size) + var(--grideditor-action-spacing)) * 3);
}
&_shrink_up {
left: 12px;
top: -20px;
&-info {
font-family: $font-family-monospace;
font-size: 0.75rem;
line-height: 1.2em;
padding: calc(var(--grideditor-cell-spacing) / 2) var(--grideditor-cell-spacing);
background-color: rgba(0, 0, 0, 0.05);
border-bottom-left-radius: var(--grideditor-cell-border-radius);
border-bottom-right-radius: var(--grideditor-cell-border-radius);
}
}
&:before {
font-family: FontAwesome;
content: "#{$fa-var-caret-up}";
font-size: 42px;
line-height: 20px;