Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // |
| 2 | // Mixins |
||
| 3 | // Based on Twitter Bootstrap's _mixings.scss |
||
| 4 | |||
| 5 | @mixin clearfix() { |
||
| 6 | &:before, |
||
| 7 | &:after { |
||
| 8 | content: " "; // 1 |
||
| 9 | display: table; // 2 |
||
| 10 | } |
||
| 11 | &:after { |
||
| 12 | clear: both; |
||
| 13 | } |
||
| 14 | } |
||
| 15 | |||
| 16 | // Opacity |
||
| 17 | |||
| 18 | @mixin opacity($value, $important: '') { |
||
| 19 | opacity: $value #{$important}; |
||
| 20 | filter: alpha(opacity=#{$value * 100}) #{$important}; |
||
| 21 | } |
||
| 22 | |||
| 23 | // Border radius. |
||
| 24 | |||
| 25 | @mixin border-radius($radius, $important: '') { |
||
| 26 | -webkit-border-radius: $radius#{$important}; |
||
| 27 | -moz-border-radius: $radius#{$important}; |
||
| 28 | -ms-border-radius: $radius#{$important}; |
||
| 29 | -o-border-radius: $radius#{$important}; |
||
| 30 | border-radius: $radius#{$important}; |
||
| 31 | } |
||
| 32 | |||
| 33 | // Placeholder text |
||
| 34 | // ------------------------- |
||
| 35 | @mixin placeholder($color: $input-color-placeholder) { |
||
| 36 | &::-moz-placeholder { color: $color; opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 |
||
| 37 | &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ |
||
| 38 | &::-webkit-input-placeholder { color: $color; } // Safari and Chrome |
||
| 39 | } |
||
| 40 | |||
| 41 | // Drop shadows |
||
| 42 | // By default set to: none |
||
| 43 | @mixin box-shadow($shadow) { |
||
| 44 | -webkit-box-shadow: none; // iOS <4.3 & Android <4.1 |
||
| 45 | box-shadow: none; |
||
| 46 | } |
||
| 47 | |||
| 48 | // Labels |
||
| 49 | // ------------------------- |
||
| 50 | @mixin label-variant($color) { |
||
| 51 | background-color: $color; |
||
| 52 | &[href] { |
||
| 53 | &:hover, |
||
| 54 | &:focus { |
||
| 55 | background-color: darken($color, 10%); |
||
| 56 | } |
||
| 57 | } |
||
| 58 | } |
||
| 59 | |||
| 60 | @mixin ease-out($duration: 450ms, $property: all, $delay: 0ms) { |
||
| 61 | transition: $property $duration cubic-bezier(0.23, 1, 0.32, 1) $delay; |
||
| 62 | } |
||
| 63 | |||
| 64 | @mixin pulsate($animation-name, $start-size: 0.75, $end-size: 1, $duration: 1.5s) { |
||
| 65 | @keyframes "#{$animation-name}" { |
||
| 66 | 0%, 100% { |
||
| 67 | transform: scale($start-size); |
||
| 68 | } |
||
| 69 | 50% { |
||
| 70 | transform: scale($end-size); |
||
| 71 | } |
||
| 72 | } |
||
| 73 | animation: $animation-name $duration ease 0s infinite; |
||
| 74 | } |
||
| 75 | |||
| 76 | /* Cubic Bezier Transition */ |
||
| 77 | @mixin cubic-transition ($delay, $duration, $property) { |
||
| 78 | transition: { |
||
| 79 | duration: $duration; |
||
| 80 | property: $property; |
||
| 81 | timing-function: cubic-bezier(0.7, 1, 0.7, 1); |
||
| 82 | } |
||
| 83 | } |
||
| 84 | |||
| 85 | @mixin background-opacity($color, $opacity: 0.3) { |
||
| 86 | background: rgba($color, $opacity); |
||
| 87 | } |
||
| 88 | |||
| 89 | @mixin vertical-align($position: absolute) { |
||
| 90 | position: #{$position}; |
||
| 91 | top: 50%; |
||
| 92 | -webkit-transform: translateY(-50%); |
||
| 93 | -ms-transform: translateY(-50%); |
||
| 94 | transform: translateY(-50%); |
||
| 95 | } |
||
| 96 | |||
| 97 | @mixin transform($degree) { |
||
| 98 | webkit-transform: $degree; |
||
| 99 | -moz-transform: $degree; |
||
| 100 | -ms-transform: $degree; |
||
| 101 | -o-transform: $degree; |
||
| 102 | transform: $degree; |
||
| 103 | } |
||
| 104 | |||
| 105 | @mixin transition($transition) { |
||
| 106 | webkit-transition: #{$transition}; |
||
| 107 | -moz-transition: #{$transition}; |
||
| 108 | -ms-transition: #{$transition}; |
||
| 109 | -o-transition: #{$transition}; |
||
| 110 | transition: #{$transition}; |
||
| 111 | } |
||
| 112 | |||
| 113 | @mixin burger-icon($line-color, $line-color-hover, $line-width, $line-height, $base-top: -5px, $above-top: 5px, $below-top: -5px) { |
||
| 114 | > span { |
||
| 115 | outline: none !important; |
||
| 116 | |||
| 117 | &:hover { |
||
| 118 | background: $line-color-hover; |
||
| 119 | &:before, |
||
| 120 | &:after { |
||
| 121 | background: $line-color-hover; |
||
| 122 | } |
||
| 123 | } |
||
| 124 | } |
||
| 125 | |||
| 126 | > span, |
||
| 127 | > span:before, |
||
| 128 | > span:after { |
||
| 129 | display: inline-block; |
||
| 130 | width: $line-width; |
||
| 131 | height: $line-height; |
||
| 132 | background: $line-color; |
||
| 133 | position: relative; |
||
| 134 | top: $base-top; |
||
| 135 | transition: all ease .3s; |
||
| 136 | } |
||
| 137 | |||
| 138 | > span:before, |
||
| 139 | > span:after { |
||
| 140 | position: absolute; |
||
| 141 | left: 0; |
||
| 142 | content: ''; |
||
| 143 | } |
||
| 144 | |||
| 145 | > span:before { |
||
| 146 | top: $above-top; |
||
| 147 | } |
||
| 148 | |||
| 149 | > span:after { |
||
| 150 | top: $below-top; |
||
| 151 | } |
||
| 152 | |||
| 153 | &.th-toggle-exit { |
||
| 154 | > span { |
||
| 155 | background-color: transparent !important; |
||
| 156 | } |
||
| 157 | |||
| 158 | > span:after { |
||
| 159 | @include transform(translateY(-$base-top) rotateZ(45deg)); |
||
| 160 | } |
||
| 161 | |||
| 162 | > span:before { |
||
| 163 | @include transform(translateY($base-top) rotateZ(-45deg)); |
||
| 164 | } |
||
| 165 | } |
||
| 166 | } |
||
| 167 | |||
| 168 | @mixin burger-icon-color-change($line-color, $line-color-hover) { |
||
| 169 | > span, |
||
| 170 | > span:before, |
||
| 171 | > span:after { |
||
| 172 | background: $line-color; |
||
| 173 | } |
||
| 174 | |||
| 175 | > span { |
||
| 176 | &:hover { |
||
| 177 | background: $line-color-hover; |
||
| 178 | &:before, |
||
| 179 | &:after { |
||
| 180 | background: $line-color-hover; |
||
| 181 | } |
||
| 182 | } |
||
| 183 | } |
||
| 184 | |||
| 185 | &.th-toggle-exit { |
||
| 186 | > span { |
||
| 187 | background-color: transparent !important; |
||
| 188 | } |
||
| 189 | } |
||
| 190 | } |
||
| 191 | |||
| 192 | @mixin close-icon($icon-size, $line-size, $color, $color-hover) { |
||
| 193 | position: relative; |
||
| 194 | display: inline-block; |
||
| 195 | width: $icon-size; |
||
| 196 | height: $icon-size; |
||
| 197 | overflow: hidden; |
||
| 198 | outline: none !important; |
||
| 199 | |||
| 200 | &:hover { |
||
| 201 | cursor: pointer; |
||
| 202 | |||
| 203 | &::before, |
||
| 204 | &::after { |
||
| 205 | background: $color-hover; |
||
| 206 | } |
||
| 207 | } |
||
| 208 | |||
| 209 | &::before, |
||
| 210 | &::after { |
||
| 211 | content: ''; |
||
| 212 | position: absolute; |
||
| 213 | height: $line-size; |
||
| 214 | width: 100%; |
||
| 215 | top: 50%; |
||
| 216 | left: 0; |
||
| 217 | margin-top: $line-size / 2; |
||
| 218 | background: $color; |
||
| 219 | } |
||
| 220 | |||
| 221 | &::before { |
||
| 222 | @include transform(rotate(45deg)); |
||
| 223 | } |
||
| 224 | |||
| 225 | &::after { |
||
| 226 | @include transform(rotate(-45deg)); |
||
| 227 | } |
||
| 228 | } |
||
| 229 | |||
| 230 | @mixin close-icon-color-change($color, $color-hover) { |
||
| 231 | &:hover { |
||
| 232 | &::before, |
||
| 233 | &::after { |
||
| 234 | background: $color-hover; |
||
| 235 | } |
||
| 236 | } |
||
| 237 | |||
| 238 | &::before, |
||
| 239 | &::after { |
||
| 240 | background: $color; |
||
| 241 | } |
||
| 242 | } |