_bourbon-deprecated-upcoming.scss (14536B)
1 // The following features have been deprecated and will be removed in the next MAJOR version release 2 3 @mixin inline-block { 4 display: inline-block; 5 6 @warn "The inline-block mixin is deprecated and will be removed in the next major version release"; 7 } 8 9 @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { 10 11 @if type-of($style) == string and type-of($base-color) == color { 12 @include buttonstyle($style, $base-color, $text-size, $padding); 13 } 14 15 @if type-of($style) == string and type-of($base-color) == number { 16 $padding: $text-size; 17 $text-size: $base-color; 18 $base-color: #4294f0; 19 20 @if $padding == inherit { 21 $padding: 7px 18px; 22 } 23 24 @include buttonstyle($style, $base-color, $text-size, $padding); 25 } 26 27 @if type-of($style) == color and type-of($base-color) == color { 28 $base-color: $style; 29 $style: simple; 30 @include buttonstyle($style, $base-color, $text-size, $padding); 31 } 32 33 @if type-of($style) == color and type-of($base-color) == number { 34 $padding: $text-size; 35 $text-size: $base-color; 36 $base-color: $style; 37 $style: simple; 38 39 @if $padding == inherit { 40 $padding: 7px 18px; 41 } 42 43 @include buttonstyle($style, $base-color, $text-size, $padding); 44 } 45 46 @if type-of($style) == number { 47 $padding: $base-color; 48 $text-size: $style; 49 $base-color: #4294f0; 50 $style: simple; 51 52 @if $padding == #4294f0 { 53 $padding: 7px 18px; 54 } 55 56 @include buttonstyle($style, $base-color, $text-size, $padding); 57 } 58 59 &:disabled { 60 cursor: not-allowed; 61 opacity: 0.5; 62 } 63 64 @warn "The button mixin is deprecated and will be removed in the next major version release"; 65 } 66 67 // Selector Style Button 68 @mixin buttonstyle($type, $b-color, $t-size, $pad) { 69 // Grayscale button 70 @if $type == simple and $b-color == grayscale($b-color) { 71 @include simple($b-color, true, $t-size, $pad); 72 } 73 74 @if $type == shiny and $b-color == grayscale($b-color) { 75 @include shiny($b-color, true, $t-size, $pad); 76 } 77 78 @if $type == pill and $b-color == grayscale($b-color) { 79 @include pill($b-color, true, $t-size, $pad); 80 } 81 82 @if $type == flat and $b-color == grayscale($b-color) { 83 @include flat($b-color, true, $t-size, $pad); 84 } 85 86 // Colored button 87 @if $type == simple { 88 @include simple($b-color, false, $t-size, $pad); 89 } 90 91 @else if $type == shiny { 92 @include shiny($b-color, false, $t-size, $pad); 93 } 94 95 @else if $type == pill { 96 @include pill($b-color, false, $t-size, $pad); 97 } 98 99 @else if $type == flat { 100 @include flat($b-color, false, $t-size, $pad); 101 } 102 } 103 104 // Simple Button 105 @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 106 $color: hsl(0, 0, 100%); 107 $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 108 $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 109 $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 110 $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 111 112 @if is-light($base-color) { 113 $color: hsl(0, 0, 20%); 114 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 115 } 116 117 @if $grayscale == true { 118 $border: grayscale($border); 119 $inset-shadow: grayscale($inset-shadow); 120 $stop-gradient: grayscale($stop-gradient); 121 $text-shadow: grayscale($text-shadow); 122 } 123 124 border: 1px solid $border; 125 border-radius: 3px; 126 box-shadow: inset 0 1px 0 0 $inset-shadow; 127 color: $color; 128 display: inline-block; 129 font-size: $textsize; 130 font-weight: bold; 131 @include linear-gradient ($base-color, $stop-gradient); 132 padding: $padding; 133 text-decoration: none; 134 text-shadow: 0 1px 0 $text-shadow; 135 background-clip: padding-box; 136 137 &:hover:not(:disabled) { 138 $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 139 $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 140 $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 141 142 @if $grayscale == true { 143 $base-color-hover: grayscale($base-color-hover); 144 $inset-shadow-hover: grayscale($inset-shadow-hover); 145 $stop-gradient-hover: grayscale($stop-gradient-hover); 146 } 147 148 @include linear-gradient ($base-color-hover, $stop-gradient-hover); 149 150 box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 151 cursor: pointer; 152 } 153 154 &:active:not(:disabled), 155 &:focus:not(:disabled) { 156 $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 157 $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 158 159 @if $grayscale == true { 160 $border-active: grayscale($border-active); 161 $inset-shadow-active: grayscale($inset-shadow-active); 162 } 163 164 border: 1px solid $border-active; 165 box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; 166 } 167 } 168 169 // Shiny Button 170 @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 171 $color: hsl(0, 0, 100%); 172 $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 173 $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 174 $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 175 $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 176 $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 177 $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 178 $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 179 180 @if is-light($base-color) { 181 $color: hsl(0, 0, 20%); 182 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 183 } 184 185 @if $grayscale == true { 186 $border: grayscale($border); 187 $border-bottom: grayscale($border-bottom); 188 $fourth-stop: grayscale($fourth-stop); 189 $inset-shadow: grayscale($inset-shadow); 190 $second-stop: grayscale($second-stop); 191 $text-shadow: grayscale($text-shadow); 192 $third-stop: grayscale($third-stop); 193 } 194 195 @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 196 197 border: 1px solid $border; 198 border-bottom: 1px solid $border-bottom; 199 border-radius: 5px; 200 box-shadow: inset 0 1px 0 0 $inset-shadow; 201 color: $color; 202 display: inline-block; 203 font-size: $textsize; 204 font-weight: bold; 205 padding: $padding; 206 text-align: center; 207 text-decoration: none; 208 text-shadow: 0 -1px 1px $text-shadow; 209 210 &:hover:not(:disabled) { 211 $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 212 $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 213 $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 214 $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 215 216 @if $grayscale == true { 217 $first-stop-hover: grayscale($first-stop-hover); 218 $second-stop-hover: grayscale($second-stop-hover); 219 $third-stop-hover: grayscale($third-stop-hover); 220 $fourth-stop-hover: grayscale($fourth-stop-hover); 221 } 222 223 @include linear-gradient(top, $first-stop-hover 0%, 224 $second-stop-hover 50%, 225 $third-stop-hover 50%, 226 $fourth-stop-hover 100%); 227 cursor: pointer; 228 } 229 230 &:active:not(:disabled), 231 &:focus:not(:disabled) { 232 $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 233 234 @if $grayscale == true { 235 $inset-shadow-active: grayscale($inset-shadow-active); 236 } 237 238 box-shadow: inset 0 0 20px 0 $inset-shadow-active; 239 } 240 } 241 242 // Pill Button 243 @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 244 $color: hsl(0, 0, 100%); 245 $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 246 $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 247 $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 248 $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 249 $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 250 $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 251 252 @if is-light($base-color) { 253 $color: hsl(0, 0, 20%); 254 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 255 } 256 257 @if $grayscale == true { 258 $border-bottom: grayscale($border-bottom); 259 $border-sides: grayscale($border-sides); 260 $border-top: grayscale($border-top); 261 $inset-shadow: grayscale($inset-shadow); 262 $stop-gradient: grayscale($stop-gradient); 263 $text-shadow: grayscale($text-shadow); 264 } 265 266 border: 1px solid $border-top; 267 border-color: $border-top $border-sides $border-bottom; 268 border-radius: 16px; 269 box-shadow: inset 0 1px 0 0 $inset-shadow; 270 color: $color; 271 display: inline-block; 272 font-size: $textsize; 273 font-weight: normal; 274 line-height: 1; 275 @include linear-gradient ($base-color, $stop-gradient); 276 padding: $padding; 277 text-align: center; 278 text-decoration: none; 279 text-shadow: 0 -1px 1px $text-shadow; 280 background-clip: padding-box; 281 282 &:hover:not(:disabled) { 283 $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 284 $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 285 $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 286 $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 287 $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 288 $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 289 $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 290 291 @if $grayscale == true { 292 $base-color-hover: grayscale($base-color-hover); 293 $border-bottom: grayscale($border-bottom); 294 $border-sides: grayscale($border-sides); 295 $border-top: grayscale($border-top); 296 $inset-shadow-hover: grayscale($inset-shadow-hover); 297 $stop-gradient-hover: grayscale($stop-gradient-hover); 298 $text-shadow-hover: grayscale($text-shadow-hover); 299 } 300 301 @include linear-gradient ($base-color-hover, $stop-gradient-hover); 302 303 background-clip: padding-box; 304 border: 1px solid $border-top; 305 border-color: $border-top $border-sides $border-bottom; 306 box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 307 cursor: pointer; 308 text-shadow: 0 -1px 1px $text-shadow-hover; 309 } 310 311 &:active:not(:disabled), 312 &:focus:not(:disabled) { 313 $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 314 $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 315 $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 316 $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 317 $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 318 319 @if $grayscale == true { 320 $active-color: grayscale($active-color); 321 $border-active: grayscale($border-active); 322 $border-bottom-active: grayscale($border-bottom-active); 323 $inset-shadow-active: grayscale($inset-shadow-active); 324 $text-shadow-active: grayscale($text-shadow-active); 325 } 326 327 background: $active-color; 328 border: 1px solid $border-active; 329 border-bottom: 1px solid $border-bottom-active; 330 box-shadow: inset 0 0 6px 3px $inset-shadow-active; 331 text-shadow: 0 -1px 1px $text-shadow-active; 332 } 333 } 334 335 // Flat Button 336 @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 337 $color: hsl(0, 0, 100%); 338 339 @if is-light($base-color) { 340 $color: hsl(0, 0, 20%); 341 } 342 343 background-color: $base-color; 344 border-radius: 3px; 345 border: 0; 346 color: $color; 347 display: inline-block; 348 font-size: $textsize; 349 font-weight: bold; 350 padding: $padding; 351 text-decoration: none; 352 background-clip: padding-box; 353 354 &:hover:not(:disabled){ 355 $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); 356 357 @if $grayscale == true { 358 $base-color-hover: grayscale($base-color-hover); 359 } 360 361 background-color: $base-color-hover; 362 cursor: pointer; 363 } 364 365 &:active:not(:disabled), 366 &:focus:not(:disabled) { 367 $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 368 369 @if $grayscale == true { 370 $base-color-active: grayscale($base-color-active); 371 } 372 373 background-color: $base-color-active; 374 cursor: pointer; 375 } 376 } 377 378 // Flexible grid 379 @function flex-grid($columns, $container-columns: $fg-max-columns) { 380 $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 381 $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 382 @return percentage($width / $container-width); 383 384 @warn "The flex-grid function is deprecated and will be removed in the next major version release"; 385 } 386 387 // Flexible gutter 388 @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 389 $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 390 @return percentage($gutter / $container-width); 391 392 @warn "The flex-gutter function is deprecated and will be removed in the next major version release"; 393 } 394 395 @function grid-width($n) { 396 @return $n * $gw-column + ($n - 1) * $gw-gutter; 397 398 @warn "The grid-width function is deprecated and will be removed in the next major version release"; 399 } 400 401 @function golden-ratio($value, $increment) { 402 @return modular-scale($increment, $value, $ratio: $golden); 403 404 @warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead."; 405 } 406 407 @mixin box-sizing($box) { 408 @include prefixer(box-sizing, $box, webkit moz spec); 409 410 @warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed."; 411 }