194 lines
8 KiB
SCSS
194 lines
8 KiB
SCSS
.icon {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: 24px 24px;
|
|
vertical-align: bottom;
|
|
|
|
&.small {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
&.follow {
|
|
background-image: image-url("icons/follow-folder.svg");
|
|
}
|
|
|
|
&.unfollow {
|
|
background-image: image-url("icons/unfollow-folder.svg");
|
|
}
|
|
|
|
&.standby {
|
|
background-image: image-url("icons/standby.svg");
|
|
}
|
|
|
|
&.unarchive {
|
|
background-image: image-url("icons/unarchive.svg");
|
|
}
|
|
|
|
&.edit {
|
|
background-image: image-url("icons/edit-folder-blue.svg");
|
|
}
|
|
|
|
&.bubble {
|
|
background-image: image-url("icons/bubble.svg");
|
|
}
|
|
|
|
&.attached {
|
|
background-image: image-url("icons/attached.svg");
|
|
}
|
|
|
|
&.preview {
|
|
background-image: image-url("icons/preview.svg");
|
|
}
|
|
|
|
&.retry {
|
|
background-image: image-url("icons/retry.svg");
|
|
}
|
|
|
|
&.download {
|
|
background-image: image-url("icons/download.svg");
|
|
}
|
|
|
|
&.lock {
|
|
background-image: image-url("icons/lock.svg");
|
|
}
|
|
|
|
&.add {
|
|
background-image: image-url("icons/add.svg");
|
|
margin-left: -5px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
&.justificatif {
|
|
background-image: image-url("icons/justificatif.svg");
|
|
}
|
|
|
|
&.printer {
|
|
background-image: image-url("icons/printer.svg");
|
|
}
|
|
|
|
&.account {
|
|
background-image: image-url("icons/account-circle.svg");
|
|
}
|
|
|
|
&.super-admin {
|
|
background-image: image-url("icons/super-admin.svg");
|
|
}
|
|
|
|
&.mail {
|
|
background-image: image-url("icons/mail.svg");
|
|
}
|
|
|
|
&.reply {
|
|
background-image: image-url("icons/reply.svg");
|
|
}
|
|
|
|
&.search {
|
|
background-image: image-url("icons/search-blue.svg");
|
|
}
|
|
|
|
&.sign-out {
|
|
background-image: image-url("icons/sign-out.svg");
|
|
}
|
|
|
|
&.info {
|
|
background-image: image-url("icons/info-blue.svg");
|
|
object-fit: contain;
|
|
}
|
|
|
|
&.help {
|
|
background-image: image-url("icons/help.svg");
|
|
}
|
|
|
|
&.phone {
|
|
background-image: image-url("icons/phone.svg");
|
|
}
|
|
|
|
&.clock {
|
|
background-image: image-url("icons/clock.svg");
|
|
}
|
|
|
|
&.smile {
|
|
background-image: image-url("icons/smile-regular.svg");
|
|
}
|
|
|
|
&.frown {
|
|
background-image: image-url("icons/frown-regular.svg");
|
|
}
|
|
|
|
&.meh {
|
|
background-image: image-url("icons/meh-regular.svg");
|
|
}
|
|
|
|
&.mandatory {
|
|
width: 10px;
|
|
}
|
|
}
|
|
|
|
// How to add a new remix icon and work with DSFR markup:
|
|
// 1. Find it on https://remixicon.com/
|
|
// 2. Take its DataURL (copy the url background-image value).
|
|
// 2b. No need to download the file !
|
|
// 3. Follow the first example : create the class then add the mask-image property with data url you copied
|
|
// 4. Keep this list alphabetic :)
|
|
.fr-icon {
|
|
// scss-lint:disable VendorPrefix
|
|
&-align-center {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4H21V6H3V4ZM5 19H19V21H5V19ZM3 14H21V16H3V14ZM5 9H19V11H5V9Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4H21V6H3V4ZM5 19H19V21H5V19ZM3 14H21V16H3V14ZM5 9H19V11H5V9Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-align-right {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-calendar-close-fill {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3V1H7V3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3H17V1H15V3H9ZM4 8H20V19H4V8ZM9.87852 9.9643L11.9999 12.0858L14.1211 9.96432L15.5354 11.3785L13.4141 13.5L15.5353 15.6211L14.1212 17.0354L11.9999 14.9142L9.87845 17.0354L8.46432 15.6211L10.5856 13.5L8.46426 11.3785L9.87852 9.9643Z'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3V1H7V3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3H17V1H15V3H9ZM4 8H20V19H4V8ZM9.87852 9.9643L11.9999 12.0858L14.1211 9.96432L15.5354 11.3785L13.4141 13.5L15.5353 15.6211L14.1212 17.0354L11.9999 14.9142L9.87845 17.0354L8.46432 15.6211L10.5856 13.5L8.46426 11.3785L9.87852 9.9643Z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-file-copy-line {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-intermediate-circle-fill {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM7 11V13H17V11H7Z'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM7 11V13H17V11H7Z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-key-line {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.917 13C12.441 15.8377 9.973 18 7 18C3.68629 18 1 15.3137 1 12C1 8.68629 3.68629 6 7 6C9.973 6 12.441 8.16229 12.917 11H23V13H21V17H19V13H17V17H15V13H12.917ZM7 16C9.20914 16 11 14.2091 11 12C11 9.79086 9.20914 8 7 8C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.917 13C12.441 15.8377 9.973 18 7 18C3.68629 18 1 15.3137 1 12C1 8.68629 3.68629 6 7 6C9.973 6 12.441 8.16229 12.917 11H23V13H21V17H19V13H17V17H15V13H12.917ZM7 16C9.20914 16 11 14.2091 11 12C11 9.79086 9.20914 8 7 8C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
&-underline {
|
|
&:before,
|
|
&:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
// scss-lint:enable VendorPrefix
|
|
}
|