mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
eed16e0034
* This commit only covers the migration of the icons in the menu and draftail editor. All other admin menu icons remain implemented as before. * Existing font based icon support still exists. * Convert menu icons to SVG * This could be considered a breaking change for any Wagtail sites or packages that are leveraging Wagtail's Button and Icon React components. * Remove references to unused `submenu-trigger` class * Prefix icon `id`s with `icon-` to prevent `id` collisions * Add hooks support (not yet documented) for adding custom icons
143 lines
2.9 KiB
SCSS
143 lines
2.9 KiB
SCSS
// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
|
|
@font-face {
|
|
font-family: 'wagtail';
|
|
src: url('#{$font-root}wagtail.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Set SVG icons to use the current text color in the location they appear as
|
|
// their default fill color. Can be overridden for a specific icon by either
|
|
// the color or fill properties.
|
|
.icon {
|
|
fill: currentColor;
|
|
}
|
|
|
|
.icon.teal {
|
|
color: $color-teal;
|
|
}
|
|
|
|
.icon.white {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon:before,
|
|
.icon:after,
|
|
.hallotoolbar [class^='icon-'],
|
|
.hallotoolbar [class*=' icon-']:before,
|
|
.hallotoolbar [class^='icon-']:before {
|
|
@include icon(); // from _mixins.scss
|
|
}
|
|
|
|
.icon:after,
|
|
.hallotoolbar [class^='icon-']:after,
|
|
.hallotoolbar [class^='icon-']:after {
|
|
text-align: right;
|
|
}
|
|
|
|
.hallotoolbar [class^='icon-'],
|
|
.hallotoolbar [class*=' icon-']:before,
|
|
.hallotoolbar [class*=' icon-']:before,
|
|
.hallotoolbar [class^='icon-']:before {
|
|
vertical-align: -10%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
// =============================================================================
|
|
// Icon factory methods
|
|
// =============================================================================
|
|
|
|
@each $icon, $content in $icons {
|
|
.icon-#{$icon}:before {
|
|
content: quote(#{$content});
|
|
}
|
|
}
|
|
|
|
@each $icon, $content in $icons-after {
|
|
.icon-#{$icon}:after {
|
|
content: quote(#{$content});
|
|
}
|
|
}
|
|
|
|
|
|
// =============================================================================
|
|
// Custom config for various icons
|
|
// =============================================================================
|
|
.icon-download {
|
|
// Credit: Icon made by Freepik from Flaticon.com
|
|
}
|
|
|
|
.icon-view:before,
|
|
.icon-no-view:before {
|
|
vertical-align: -3.5px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.icon-spinner:after,
|
|
.icon-spinner:before {
|
|
width: 1em;
|
|
animation: spin 0.5s infinite linear;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icon-horizontalrule:before {
|
|
font-family: Open Sans, Arial, sans-serif;
|
|
}
|
|
|
|
|
|
.icon-larger:before {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.icon.text-replace {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
margin-right: 0;
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
width: 100%;
|
|
line-height: 1.2em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.icon-spinner:after {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
}
|
|
|
|
// CSS-only circled question mark.
|
|
// <span class="icon-help-inverse" aria-hidden="true"></span>
|
|
.icon-help-inverse {
|
|
$size: 15px;
|
|
|
|
&:before {
|
|
display: inline-block;
|
|
width: $size;
|
|
height: $size;
|
|
line-height: $size;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
color: $color-grey-2;
|
|
border: 1px solid currentColor;
|
|
}
|
|
}
|