1
0

icons.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /**
  2. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  3. *
  4. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  5. * @author Joas Schilling <coding@schilljs.com>
  6. * @author Lukas Reschke <lukas@statuscode.ch>
  7. * @author Roeland Jago Douma <roeland@famdouma.nl>
  8. * @author Vincent Chan <plus.vincchan@gmail.com>
  9. * @author Thomas Müller <thomas.mueller@tmit.eu>
  10. * @author Hendrik Leppelsack <hendrik@leppelsack.de>
  11. * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
  12. *
  13. * @license GNU AGPL version 3 or any later version
  14. *
  15. * This program is free software: you can redistribute it and/or modify
  16. * it under the terms of the GNU Affero General Public License as
  17. * published by the Free Software Foundation, either version 3 of the
  18. * License, or (at your option) any later version.
  19. *
  20. * This program is distributed in the hope that it will be useful,
  21. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  22. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  23. * GNU Affero General Public License for more details.
  24. *
  25. * You should have received a copy of the GNU Affero General Public License
  26. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  27. *
  28. */
  29. @use 'variables';
  30. @import 'functions';
  31. /* GLOBAL ------------------------------------------------------------------- */
  32. [class^='icon-'], [class*=' icon-'] {
  33. background-repeat: no-repeat;
  34. background-position: center;
  35. min-width: 16px;
  36. min-height: 16px;
  37. }
  38. .icon-breadcrumb {
  39. background-image: url('../img/breadcrumb.svg?v=1');
  40. }
  41. /* LOADING ------------------------------------------------------------------ */
  42. .loading,
  43. .loading-small,
  44. .icon-loading,
  45. .icon-loading-dark,
  46. .icon-loading-small,
  47. .icon-loading-small-dark {
  48. position: relative;
  49. &:after {
  50. z-index: 2;
  51. content: '';
  52. height: 28px;
  53. width: 28px;
  54. margin: -16px 0 0 -16px;
  55. position: absolute;
  56. top: 50%;
  57. left: 50%;
  58. border-radius: 100%;
  59. -webkit-animation: rotate .8s infinite linear;
  60. animation: rotate .8s infinite linear;
  61. -webkit-transform-origin: center;
  62. -ms-transform-origin: center;
  63. transform-origin: center;
  64. border: 2px solid var(--color-loading-light);
  65. border-top-color: var(--color-loading-dark);
  66. // revert if background is too bright
  67. filter: var(--background-invert-if-dark);
  68. .primary &,
  69. .primary + & {
  70. // revert if primary is too bright
  71. filter: var(--primary-invert-if-bright);
  72. }
  73. }
  74. }
  75. .icon-loading-dark:after,
  76. .icon-loading-small-dark:after {
  77. border: 2px solid var(--color-loading-dark);
  78. border-top-color: var(--color-loading-light);
  79. }
  80. .icon-loading-small:after,
  81. .icon-loading-small-dark:after {
  82. height: 12px;
  83. width: 12px;
  84. margin: -8px 0 0 -8px;
  85. }
  86. /* Css replaced elements don't have ::after nor ::before */
  87. audio, canvas, embed, iframe, img, input, object, video {
  88. &.icon-loading {
  89. background-image: url('../img/loading.gif');
  90. }
  91. &.icon-loading-dark {
  92. background-image: url('../img/loading-dark.gif');
  93. }
  94. &.icon-loading-small {
  95. background-image: url('../img/loading-small.gif');
  96. }
  97. &.icon-loading-small-dark {
  98. background-image: url('../img/loading-small-dark.gif');
  99. }
  100. }
  101. @keyframes rotate {
  102. from {
  103. transform: rotate(0deg);
  104. }
  105. to {
  106. transform: rotate(360deg);
  107. }
  108. }
  109. .icon-32 {
  110. background-size: 32px !important;
  111. }
  112. .icon-white.icon-shadow,
  113. .icon-audio-white,
  114. .icon-audio-off-white,
  115. .icon-fullscreen-white,
  116. .icon-screen-white,
  117. .icon-screen-off-white,
  118. .icon-video-white,
  119. .icon-video-off-white {
  120. filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
  121. }
  122. /* ICONS -------------------------------------------------------------------
  123. * These icon classes are generated automatically with the following pattern
  124. * .icon-close (black icon)
  125. * .icon-close-white (white icon)
  126. * .icon-close.icon-white (white icon)
  127. *
  128. * Some class definitions are kept as before, since they don't follow the pattern
  129. * or have some additional styling like drop shadows
  130. */
  131. @import url('../../dist/icons.css');