1// Color Pallete 2 3@function getColor($key, $state: false, $list: $ui-coloring) { 4 @each $color in $list { 5 @if $key == nth($color, 1) and $state == default { 6 @return nth($color, 2); 7 } 8 @else if $key == nth($color, 1) and $state == hover { 9 @return nth($color, 3); 10 } 11 @else if $key == nth($color, 1) { 12 @return nth($color, 1); 13 } 14 } 15 @return false; 16} 17 18@mixin palette($shade, $palette-text-color:false) { 19 @if $shade == getColor($shade) { 20 @if $palette-text-color != false { 21 color: $palette-text-color; 22 } 23 @else { 24 color: lighten(getColor($shade, default), 80%); 25 } 26 background: getColor($shade, default); 27 border: 1px solid getColor($shade, default); 28 &:hover { 29 background: getColor($shade, hover); 30 border: 1px solid darken(getColor($shade, hover), 3%); 31 } 32 &:active { 33 background: darken(getColor($shade, default), 10%); 34 border: 1px solid darken(getColor($shade, default), 10%); 35 } 36 37 @if $shade == default { 38 @if $palette-text-color != false { 39 color: $palette-text-color; 40 } 41 @else { 42 color: darken(getColor($shade, default), 61.5%); 43 } 44 border: 1px solid getColor($shade, default); 45 &:hover { 46 border: 1px solid darken(getColor($shade, hover), 5%); 47 } 48 } 49 @if $shade == warning { 50 @if $palette-text-color != false { 51 color: $palette-text-color; 52 } 53 @else { 54 color: darken(getColor($shade, hover), 40%); 55 } 56 } 57 } 58 @else { 59 @if $palette-text-color != false { 60 color: $palette-text-color; 61 } 62 @else { 63 color: lighten($shade, 80%); 64 } 65 background: $shade; 66 border: 1px solid $shade; 67 &:hover { 68 background: lighten($shade, 30%); 69 border: 1px solid lighten($shade, 27%); 70 } 71 &:active { 72 background: darken($shade, 10%); 73 border: 1px solid darken($shade, 10%); 74 } 75 } 76}