Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 207 | espaco | 1 | @mixin icon-override($icon) { |
| 2 | font-family: 'primeicons' !important; |
||
| 3 | speak: none; |
||
| 4 | font-style: normal; |
||
| 5 | font-weight: normal; |
||
| 6 | font-variant: normal; |
||
| 7 | text-transform: none; |
||
| 8 | display: inline-block; |
||
| 9 | -webkit-font-smoothing: antialiased; |
||
| 10 | -moz-osx-font-smoothing: grayscale; |
||
| 11 | text-indent: 0 !important; |
||
| 12 | background-image: none !important; |
||
| 13 | |||
| 14 | &:before { |
||
| 15 | content: $icon; |
||
| 16 | } |
||
| 17 | } |
||
| 18 | |||
| 19 | @mixin action-icon { |
||
| 20 | width: $actionIconWidth; |
||
| 21 | height: $actionIconHeight; |
||
| 22 | background: $actionIconBg; |
||
| 23 | color: $actionIconColor; |
||
| 24 | transition: $transition; |
||
| 25 | border-radius: $actionIconBorderRadius; |
||
| 26 | border: $actionIconBorder; |
||
| 27 | text-align: center; |
||
| 28 | line-height: $actionIconHeight; |
||
| 29 | padding: 0; |
||
| 30 | |||
| 31 | &:hover { |
||
| 32 | background: $actionIconHoverBg; |
||
| 33 | color: $actionIconHoverColor; |
||
| 34 | border-color: $actionIconHoverBorderColor; |
||
| 35 | } |
||
| 36 | } |
||
| 37 | |||
| 38 | @mixin secondary-button() { |
||
| 39 | background: $secondaryButtonBg; |
||
| 40 | color: $secondaryButtonTextColor; |
||
| 41 | border: $secondaryButtonBorder; |
||
| 42 | |||
| 43 | &.ui-state-hover, &:not(:disabled):hover { |
||
| 44 | background: $secondaryButtonHoverBg; |
||
| 45 | border-color: $secondaryButtonHoverBorderColor; |
||
| 46 | color: $secondaryButtonHoverTextColor; |
||
| 47 | } |
||
| 48 | |||
| 49 | &.ui-state-focus { |
||
| 50 | box-shadow: $secondaryButtonFocusShadow; |
||
| 51 | } |
||
| 52 | |||
| 53 | &.ui-state-active, &:active { |
||
| 54 | background: $secondaryButtonActiveBg; |
||
| 55 | border-color: $secondaryButtonActiveBorderColor; |
||
| 56 | color: $secondaryButtonActiveTextColor; |
||
| 57 | } |
||
| 58 | } |
||
| 59 | |||
| 60 | @mixin border-radius-right($val) { |
||
| 61 | border-top-right-radius: $val; |
||
| 62 | border-bottom-right-radius: $val; |
||
| 63 | } |
||
| 64 | |||
| 65 | @mixin border-radius-left($val) { |
||
| 66 | border-top-left-radius: $val; |
||
| 67 | border-bottom-left-radius: $val; |
||
| 68 | } |
||
| 69 | |||
| 70 | @mixin border-radius-top($val) { |
||
| 71 | border-top-left-radius: $val; |
||
| 72 | border-top-right-radius: $val; |
||
| 73 | } |
||
| 74 | |||
| 75 | @mixin border-radius-bottom($val) { |
||
| 76 | border-bottom-left-radius: $val; |
||
| 77 | border-bottom-right-radius: $val; |
||
| 78 | } |
||
| 79 | |||
| 80 | @mixin flex() { |
||
| 81 | display: -ms-flexbox; |
||
| 82 | display: flex; |
||
| 83 | } |
||
| 84 | |||
| 85 | @mixin flex-wrap($value) { |
||
| 86 | -ms-flex-wrap: $value; |
||
| 87 | flex-wrap: $value; |
||
| 88 | } |
||
| 89 | |||
| 90 | @mixin flex-direction-row() { |
||
| 91 | -ms-flex-direction: row; |
||
| 92 | flex-direction: row; |
||
| 93 | } |
||
| 94 | |||
| 95 | @mixin flex-direction-column() { |
||
| 96 | -ms-flex-direction: column; |
||
| 97 | flex-direction: column; |
||
| 98 | } |
||
| 99 | |||
| 100 | @mixin flex-justify-center() { |
||
| 101 | -ms-flex-pack: center; |
||
| 102 | justify-content: center; |
||
| 103 | } |
||
| 104 | |||
| 105 | @mixin flex-justify-between() { |
||
| 106 | -ms-flex-pack: justify; |
||
| 107 | justify-content: space-between; |
||
| 108 | } |
||
| 109 | |||
| 110 | @mixin flex-align-center() { |
||
| 111 | -ms-flex-align: center; |
||
| 112 | align-items: center; |
||
| 113 | } |
||
| 114 | |||
| 115 | @mixin flex-align-start() { |
||
| 116 | -ms-flex-align: start; |
||
| 117 | align-items: flex-start; |
||
| 118 | } |
||
| 119 | |||
| 120 | @mixin flex-align-end() { |
||
| 121 | -ms-flex-align: end; |
||
| 122 | align-items: flex-end; |
||
| 123 | } |
||
| 124 | |||
| 125 | @mixin flex-justify-start() { |
||
| 126 | -ms-flex-pack: start; |
||
| 127 | justify-content: flex-start; |
||
| 128 | } |
||
| 129 | |||
| 130 | @mixin flex-justify-end() { |
||
| 131 | -ms-flex-pack: end; |
||
| 132 | justify-content: flex-end; |
||
| 133 | } |
||
| 134 | |||
| 135 | @mixin focused-input() { |
||
| 136 | border-color: $inputFocusBorderColor; |
||
| 137 | outline: 0 none; |
||
| 138 | box-shadow: $inputFocusShadow; |
||
| 139 | } |
||
| 140 | |||
| 141 | @mixin focused() { |
||
| 142 | outline: $focusOutline; |
||
| 143 | outline-offset: $focusOutlineOffset; |
||
| 144 | box-shadow: $focusShadow; |
||
| 145 | } |
||
| 146 | |||
| 147 | @mixin focused-inset() { |
||
| 148 | outline: $focusOutline; |
||
| 149 | outline-offset: $focusOutlineOffset; |
||
| 150 | box-shadow: inset $focusShadow; |
||
| 151 | } |
||
| 152 | |||
| 153 | @mixin placeholder { |
||
| 154 | ::-webkit-input-placeholder {@content} |
||
| 155 | :-moz-placeholder {@content; opacity: 1} |
||
| 156 | ::-moz-placeholder {@content; opacity: 1} |
||
| 157 | :-ms-input-placeholder {@content} |
||
| 158 | } |
||
| 159 | |||
| 160 | @mixin gradient($deg, $color1, $color2) { |
||
| 161 | background: -moz-linear-gradient($deg, $color1 0%, $color2 100%); /* ff3.6+ */ |
||
| 162 | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, $color1), color-stop(100%, $color2)); /* safari4+,chrome */ |
||
| 163 | background: -webkit-linear-gradient($deg, $color1 0%, $color2 100%); /* safari5.1+,chrome10+ */ |
||
| 164 | background: -o-linear-gradient($deg, $color1 0%, $color2 100%); /* opera 11.10+ */ |
||
| 165 | background: -ms-linear-gradient($deg, $color1 0%, $color2 100%); /* ie10+ */ |
||
| 166 | background: linear-gradient($deg, $color1 0%, $color2 100%); /* w3c */ |
||
| 167 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=1 ); /* ie6-9 */ |
||
| 168 | } |
||
| 169 | |||
| 170 | @mixin background-gradient-left2right($start-color, $end-color) { |
||
| 171 | background: $start-color; |
||
| 172 | background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color)); |
||
| 173 | background-image: -webkit-linear-gradient(left, $start-color, $end-color); |
||
| 174 | background-image: -moz-linear-gradient(left, $start-color, $end-color); |
||
| 175 | background-image: -ms-linear-gradient(left, $start-color, $end-color); |
||
| 176 | background-image: -o-linear-gradient(left, $start-color, $end-color); |
||
| 177 | background-image: linear-gradient(left, $start-color, $end-color); |
||
| 178 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1'); |
||
| 179 | } |
||
| 180 | |||
| 181 | @mixin background-gradient-right2left($start-color, $end-color) { |
||
| 182 | background: $start-color; |
||
| 183 | background-image: -webkit-gradient(linear, right top, left top, from($start-color), to($end-color)); |
||
| 184 | background-image: -webkit-linear-gradient(right, $start-color, $end-color); |
||
| 185 | background-image: -moz-linear-gradient(right, $start-color, $end-color); |
||
| 186 | background-image: -ms-linear-gradient(right, $start-color, $end-color); |
||
| 187 | background-image: -o-linear-gradient(right, $start-color, $end-color); |
||
| 188 | background-image: linear-gradient(right, $start-color, $end-color); |
||
| 189 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1'); |
||
| 190 | } |
||
| 191 | |||
| 192 | @mixin background-gradient-top2bottom($start-color, $end-color) { |
||
| 193 | background: $start-color; |
||
| 194 | background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color)); |
||
| 195 | background-image: -webkit-linear-gradient(top, $start-color, $end-color); |
||
| 196 | background-image: -moz-linear-gradient(top, $start-color, $end-color); |
||
| 197 | background-image: -ms-linear-gradient(top, $start-color, $end-color); |
||
| 198 | background-image: -o-linear-gradient(top, $start-color, $end-color); |
||
| 199 | background-image: linear-gradient(to bottom, $start-color, $end-color); |
||
| 200 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}'); |
||
| 201 | } |
||
| 202 | |||
| 203 | @mixin background-gradient-bottom2top($start-color, $end-color) { |
||
| 204 | background: $end-color; |
||
| 205 | background-image: -webkit-gradient(linear, left bottom, left top, from($start-color), to($end-color)); |
||
| 206 | background-image: -webkit-linear-gradient(bottom, $start-color, $end-color); |
||
| 207 | background-image: -moz-linear-gradient(bottom, $start-color, $end-color); |
||
| 208 | background-image: -ms-linear-gradient(bottom, $start-color, $end-color); |
||
| 209 | background-image: -o-linear-gradient(bottom, $start-color, $end-color); |
||
| 210 | background-image: linear-gradient(to top, $start-color, $end-color); |
||
| 211 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}'); |
||
| 212 | } |
||
| 213 | |||
| 214 | @mixin flex-center() { |
||
| 215 | @include flex(); |
||
| 216 | @include flex-align-center(); |
||
| 217 | @include flex-justify-center(); |
||
| 218 | } |
||
| 219 | |||
| 220 | @mixin nested-submenu-indents($val, $index, $length) { |
||
| 221 | ul { |
||
| 222 | li { |
||
| 223 | a { |
||
| 224 | padding-left: $val * $index * 1px; |
||
| 225 | } |
||
| 226 | |||
| 227 | @if $index < $length { |
||
| 228 | @include nested-submenu-indents($val, $index + 1, $length); |
||
| 229 | } |
||
| 230 | } |
||
| 231 | } |
||
| 232 | } |
||
| 233 | |||
| 234 | @mixin transition($transition...) { |
||
| 235 | -moz-transition: $transition; |
||
| 236 | -o-transition: $transition; |
||
| 237 | -webkit-transition: $transition; |
||
| 238 | transition: $transition; |
||
| 239 | } |
||
| 240 | |||
| 241 | @mixin rotate($deg) { |
||
| 242 | -webkit-transform: rotate($deg); |
||
| 243 | -moz-transform: rotate($deg); |
||
| 244 | -o-transform: rotate($deg); |
||
| 245 | -ms-transform: rotate($deg); |
||
| 246 | transform: rotate($deg); |
||
| 247 | } |
||
| 248 | |||
| 249 | @mixin scale($deg) { |
||
| 250 | -webkit-transform: scale($deg); |
||
| 251 | -moz-transform: scale($deg); |
||
| 252 | -o-transform: scale($deg); |
||
| 253 | -ms-transform: scale($deg); |
||
| 254 | transform: scale($deg); |
||
| 255 | } |
||
| 256 | |||
| 257 | @mixin opacity($opacity) { |
||
| 258 | opacity: $opacity; |
||
| 259 | $opacity-ie: $opacity * 100; |
||
| 260 | filter: alpha(opacity=$opacity-ie); |
||
| 261 | } |
||
| 262 | |||
| 263 | @mixin background-gradient-top2bottom($start-color, $end-color) { |
||
| 264 | background-color: $start-color; |
||
| 265 | background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color)); |
||
| 266 | background-image: -webkit-linear-gradient(top, $start-color, $end-color); |
||
| 267 | background-image: -moz-linear-gradient(top, $start-color, $end-color); |
||
| 268 | background-image: -ms-linear-gradient(top, $start-color, $end-color); |
||
| 269 | background-image: -o-linear-gradient(top, $start-color, $end-color); |
||
| 270 | background-image: linear-gradient(to bottom, $start-color, $end-color); |
||
| 271 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}'); |
||
| 272 | } |
||
| 273 | |||
| 274 | @mixin background-gradient-left2right($start-color, $end-color) { |
||
| 275 | background-color: $start-color; |
||
| 276 | background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color)); |
||
| 277 | background-image: -webkit-linear-gradient(left, $start-color, $end-color); |
||
| 278 | background-image: -moz-linear-gradient(left, $start-color, $end-color); |
||
| 279 | background-image: -ms-linear-gradient(left, $start-color, $end-color); |
||
| 280 | background-image: -o-linear-gradient(left, $start-color, $end-color); |
||
| 281 | background-image: linear-gradient(left, $start-color, $end-color); |
||
| 282 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1'); |
||
| 283 | } |
||
| 284 | |||
| 285 | @mixin shadow($value) { |
||
| 286 | -webkit-box-shadow: $value; |
||
| 287 | -moz-box-shadow: $value; |
||
| 288 | box-shadow: $value; |
||
| 289 | } |
||
| 290 | |||
| 291 | @mixin border-radius($val) { |
||
| 292 | -moz-border-radius: $val; |
||
| 293 | -webkit-border-radius: $val; |
||
| 294 | border-radius: $val; |
||
| 295 | } |
||
| 296 | |||
| 297 | @mixin border-radius-top($val) { |
||
| 298 | -moz-border-radius-topleft: $val; |
||
| 299 | -webkit-border-top-left-radius: $val; |
||
| 300 | border-top-left-radius: $val; |
||
| 301 | -moz-border-radius-topright: $val; |
||
| 302 | -webkit-border-top-right-radius: $val; |
||
| 303 | border-top-right-radius: $val; |
||
| 304 | } |
||
| 305 | |||
| 306 | @mixin border-radius-bottom($val) { |
||
| 307 | -moz-border-radius-bottomleft: $val; |
||
| 308 | -webkit-border-bottom-left-radius: $val; |
||
| 309 | border-bottom-left-radius: $val; |
||
| 310 | -moz-border-radius-bottomright: $val; |
||
| 311 | -webkit-border-bottom-right-radius: $val; |
||
| 312 | border-bottom-right-radius: $val; |
||
| 313 | } |
||
| 314 | |||
| 315 | @mixin border-radius-right($val) { |
||
| 316 | -moz-border-radius-topright: $val; |
||
| 317 | -webkit-border-top-right-radius: $val; |
||
| 318 | border-top-right-radius: $val; |
||
| 319 | -moz-border-radius-bottomright: $val; |
||
| 320 | -webkit-border-bottom-right-radius: $val; |
||
| 321 | border-bottom-right-radius: $val; |
||
| 322 | } |
||
| 323 | |||
| 324 | @mixin border-radius-left($val) { |
||
| 325 | -moz-border-radius-topleft: $val; |
||
| 326 | -webkit-border-top-left-radius: $val; |
||
| 327 | border-top-left-radius: $val; |
||
| 328 | -moz-border-radius-bottomleft: $val; |
||
| 329 | -webkit-border-bottom-left-radius: $val; |
||
| 330 | border-bottom-left-radius: $val; |
||
| 331 | } |
||
| 332 | |||
| 333 | @mixin input-placeholder($color) { |
||
| 334 | &::-webkit-input-placeholder {color: $color} |
||
| 335 | &:-moz-placeholder {color: $color} |
||
| 336 | &::-moz-placeholder {color: $color} |
||
| 337 | &:-ms-input-placeholder {color: $color} |
||
| 338 | } |