wcfsetup/install/files/style/icon/icon.scss

   1 /* do NOT reference fonts directly, always make use of 'getFont.php' */
   2 @font-face {
   3         font-family: 'FontAwesome';
   4         src: url(getFont('fontawesome-webfont.eot', '', '4.7.0'));
   5         src: url(getFont('fontawesome-webfont.eot', '', '4.7.0') + "#iefix") format('embedded-opentype'),
   6         url(getFont('fontawesome-webfont.woff2', '', '4.7.0')) format('woff2'),
   7         url(getFont('fontawesome-webfont.woff', '', '4.7.0')) format('woff'),
   8         url(getFont('fontawesome-webfont.ttf', '', '4.7.0')) format('truetype');
   9         font-weight: normal;
  10         font-style: normal;
  11 }
  12
  13 .icon, .fa {
  14         color: $wcfContentText;
  15         display: inline-block;
  16         font-family: FontAwesome;
  17         font-weight: normal !important;
  18         font-style: normal !important;
  19         text-align: center;
  20
  21         -webkit-user-select: none;
  22         -moz-user-select: none;
  23         -ms-user-select: none;
  24
  25         -moz-osx-font-smoothing: grayscale;
  26         -webkit-font-smoothing: antialiased;
  27
  28         &.disabled {
  29                 opacity: .3;
  30         }
  31         &:hover {
  32                 text-decoration: none;
  33         }
  34
  35         /* default icon colors */
  36         &.green {
  37                 color: rgba(0, 153, 0, 1);
  38         }
  39
  40         &.red {
  41                 color: rgba(204, 0, 0, 1);
  42         }
  43
  44         &.black {
  45                 color: #333;
  46         }
  47
  48         &.brown {
  49                 color: #c63;
  50         }
  51
  52         &.orange {
  53                 color: #f90;
  54         }
  55
  56         &.yellow {
  57                 color: #ff0;
  58         }
  59
  60         &.blue {
  61                 color: #369;
  62         }
  63
  64         &.purple {
  65                 color: #c0f;
  66         }
  67
  68         &.pink {
  69                 color: #f0c;
  70         }
  71 }
  72
  73 // firefox cursor issue
  74 span.icon:not(.pointer):not(.disabled),
  75 span.fa:not(.pointer):not(.disabled) {
  76         cursor: default;
  77 }
  78
  79 a > span.icon:not(.pointer),
  80 a > span.fa:not(.pointer) {
  81         cursor: pointer !important;
  82 }
  83
  84 // icon sizes
  85 .icon16 {
  86         font-size: 14px;
  87         height: 16px;
  88         line-height: 16px;
  89         width: 16px;
  90 }
  91
  92 .icon24 {
  93         font-size: 18px;
  94         height: 24px;
  95         line-height: 24px;
  96         width: 24px;
  97 }
  98
  99 .icon32 {
 100         font-size: 28px;
 101         height: 32px;
 102         line-height: 32px;
 103         width: 32px;
 104         vertical-align: -5px;
 105 }
 106
 107 .icon48 {
 108         font-size: 42px;
 109         height: 48px;
 110         line-height: 48px;
 111         width: 48px;
 112 }
 113
 114 .icon64 {
 115         font-size: 56px;
 116         height: 64px;
 117         line-height: 64px;
 118         width: 64px;
 119 }
 120
 121 .icon96 {
 122         font-size: 84px;
 123         height: 96px;
 124         line-height: 96px;
 125         width: 96px;
 126 }
 127
 128 .icon128 {
 129         font-size: 112px;
 130         height: 128px;
 131         line-height: 128px;
 132         width: 128px;
 133 }
 134
 135 .icon144 {
 136         font-size: 130px;
 137         height: 144px;
 138         line-height: 144px;
 139         width: 144px;
 140 }
 141
 142 // spinner animation
 143 .fa-spinner {
 144         animation: wcfSpinner .6s linear infinite;
 145         border: 2px solid rgb(204, 204, 204);
 146         border-top-color: rgb(79, 129, 189);
 147         border-radius: 50%;
 148         vertical-align: middle;
 149 }
 150
 151 /* work-around for a bug in the scss compiler that is fixed in a newer version,
 152    but that version has a devastating performance compared to the current version */
 153 .fa-spinner.fa-spinner::before {
 154         display: none;
 155 }
 156
 157 @-webkit-keyframes wcfSpinner {
 158         to { -webkit-transform: rotate(360deg); }
 159 }
 160
 161 @keyframes wcfSpinner {
 162         to { transform: rotate(360deg); }
 163 }
 164
 165 @-webkit-keyframes spin {
 166         0% { -webkit-transform: rotate(0deg); }
 167         100% { -webkit-transform: rotate(359deg); }
 168 }
 169 @keyframes spin {
 170         0% { transform: rotate(0deg); }
 171         100% { transform: rotate(359deg); }
 172 }
 173
 174 .fa-rotate-90 {
 175         -webkit-transform: rotate(90deg);
 176         transform: rotate(90deg);
 177 }
 178
 179 .fa-rotate-180 {
 180         -webkit-transform: rotate(180deg);
 181         transform: rotate(180deg);
 182 }
 183
 184 .fa-rotate-270 {
 185         -webkit-transform: rotate(270deg);
 186         transform: rotate(270deg);
 187 }
 188
 189 .fa-flip-horizontal {
 190         -webkit-transform: scale(-1, 1);
 191         transform: scale(-1, 1);
 192 }
 193
 194 .fa-flip-vertical {
 195         -webkit-transform: scale(1, -1);
 196         transform: scale(1, -1);
 197 }
 198
 199 /* ringing animation for fa-bell */
 200 @keyframes fa-bell-ring {
 201         0% { transform:rotate(-15deg) }
 202         2% { transform:rotate(15deg) }
 203         4% { transform:rotate(-18deg) }
 204         6% { transform:rotate(18deg) }
 205         8% { transform:rotate(-22deg) }
 206         10% { transform:rotate(22deg) }
 207         12% { transform:rotate(-18deg) }
 208         14% { transform:rotate(18deg) }
 209         16% { transform:rotate(-12deg) }
 210         18% { transform:rotate(12deg) }
 211         20%, 100% { transform:rotate(0deg) }
 212 }
 213
 214 /* EmojiOne's Emoji Keyboard (2016) for Chrome uses an excessively high `z-index` value */
 215 .emojione-emoji {
 216         z-index: auto !important;
 217 }
 218
 219 /* This icon is too wide and overflows its boundaries. */
 220 .fa-free-code-camp {
 221         &.icon16 { font-size: 10px; }
 222         &.icon24 { font-size: 16px; }
 223         &.icon32 { font-size: 22px; }
 224         &.icon48 { font-size: 34px; }
 225         &.icon64 { font-size: 46px; }
 226         &.icon96 { font-size: 70px; }
 227         &.icon128 { font-size: 94px; }
 228         &.icon144 { font-size: 108px; }
 229 }
 230
 231 @import "variables";
 232 @import "icons";