kopia lustrzana https://github.com/wagtail/wagtail
163 wiersze
3.2 KiB
SCSS
163 wiersze
3.2 KiB
SCSS
@use 'sass:string';
|
|
|
|
@font-face {
|
|
font-family: $font-wagtail-icons;
|
|
src: url('../fonts/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: theme('colors.text-button-outline-default');
|
|
}
|
|
|
|
.icon.white {
|
|
color: theme('colors.surface-page');
|
|
}
|
|
|
|
.icon:before,
|
|
.icon:after {
|
|
@include icon(); // from _mixins.scss
|
|
}
|
|
|
|
.icon:after {
|
|
text-align: end;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Icon factory methods
|
|
// =============================================================================
|
|
|
|
// RemovedInWagtail60Warning
|
|
// Font icons unused in Wagtail core, kept for backwards compatibility with third-party customisations.
|
|
@each $icon, $content in $icons {
|
|
.icon-#{$icon}:before {
|
|
content: string.quote(#{$content});
|
|
}
|
|
}
|
|
|
|
@each $icon in $icons-after {
|
|
.icon-#{$icon}-after::after {
|
|
content: '';
|
|
mask-image: url('#{$images-root}icons/#{$icon}.svg');
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
background-color: currentColor;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Custom config for various icons
|
|
// =============================================================================
|
|
.icon-download {
|
|
// Credit: Icon made by Freepik from Flaticon.com
|
|
}
|
|
|
|
.icon-view:before,
|
|
.icon-no-view:before {
|
|
// icon-font
|
|
vertical-align: -3.5px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.icon-spinner:after,
|
|
.icon-spinner:before {
|
|
// iconfont
|
|
width: 1em;
|
|
animation: spin-wag 0.5s infinite linear;
|
|
display: inline-block;
|
|
}
|
|
|
|
// For SVG icons, add spinner styles onto the use element,
|
|
// so an icon can be turned into a spinner by changing the href only.
|
|
// This allows us to switch any icon to a spinner with much less boilerplate.
|
|
use[href='#icon-spinner'] {
|
|
animation: spin-wag 0.5s infinite linear;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.icon-horizontalrule:before {
|
|
font-family: $font-sans;
|
|
}
|
|
|
|
.icon-larger:before {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.icon.text-replace {
|
|
// iconfont
|
|
font-size: 0;
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
margin-inline-end: 0;
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
width: 100%;
|
|
line-height: 1.2em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.text-replace {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
@include svg-icon(1rem, middle);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-wag {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.icon-spinner:after {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
}
|
|
|
|
// stylelint-disable-next-line no-duplicate-selectors
|
|
.icon {
|
|
&.initial {
|
|
@include svg-icon(1em, $position: initial);
|
|
}
|
|
|
|
&.default {
|
|
@include svg-icon(1.5em);
|
|
}
|
|
|
|
&.middle {
|
|
@include svg-icon(1.5em, $position: middle);
|
|
}
|
|
|
|
&--flipped {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
.icon.locale-error {
|
|
vertical-align: text-top;
|
|
margin-inline-end: 0.5em;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
color: theme('colors.critical.200');
|
|
}
|