Nils Diewald | a297f06 | 2015-04-02 00:23:46 +0000 | [diff] [blame] | 1 | /** |
| 2 | * Orange Colors |
| 3 | */ |
| 4 | $light-orange: #f4eebb; // #ffe56a; |
| 5 | $middle-orange: #ffd080; |
| 6 | $dark-orange: #ffa500; |
| 7 | $darker-orange: #ff8000; |
| 8 | $darkest-orange: darken($dark-orange, 20%); |
| 9 | // $light-orange-2: #f4eebb;, #ffd080; |
| 10 | // Yellow: #fff48d |
| 11 | |
| 12 | /** |
| 13 | * Green Colors |
| 14 | */ |
| 15 | $dark-green: #496000; |
| 16 | $middle-green: #688704; |
| 17 | $light-green: #7ba400; |
| 18 | |
| 19 | /** |
| 20 | * Blue Colors |
| 21 | */ |
| 22 | $light-blue: #cfe6f4; |
| 23 | $dark-blue: #73b2f4; |
| 24 | $darkest-blue: darken($dark-blue, 40%); |
| 25 | |
| 26 | |
| 27 | /* |
| 28 | * Grey |
| 29 | */ |
| 30 | $light-grey: #ddd; |
| 31 | $dark-grey: #555; |
| 32 | $middle-grey: #999; |
| 33 | // $nearly-white: #f5f5f5; |
| 34 | $nearly-white: #fff; |
| 35 | |
| 36 | $dark-shadow: 1px 1px 1px rgba(0,0,0,0.3); |
| 37 | $light-shadow: 1px 1px rgba(255,255,255,0.5); |
| 38 | |
| 39 | $total-results: $light-green; |
| 40 | |
| 41 | /** |
| 42 | * KWIC colors |
| 43 | */ |
| 44 | $kwic-border: $middle-grey; |
| 45 | $kwic-line-noneven: $light-grey; |
| 46 | $kwic-line-even: $nearly-white; |
| 47 | $kwic-match-color: $dark-grey; |
| 48 | $kwic-match-shadow: $light-shadow; |
| 49 | |
| 50 | $kwic-highlight-1: #c1002b; |
| 51 | $kwic-highlight-2: $dark-blue; // #009ee0; |
| 52 | $kwic-highlight-3: $dark-orange; // #f29400; |
| 53 | $kwic-highlight-4: $light-green; |
| 54 | |
| 55 | $choose-bg: $light-grey; |
| 56 | $choose-border-color: $middle-grey; |
| 57 | $choose-border: 2px solid $choose-border-color; |
| 58 | $choose-color: $dark-grey; |
| 59 | $choose-blind-color: $middle-grey; |
| 60 | $choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2); |
| 61 | $standard-border-radius: 6px; |
| 62 | |
| 63 | /** |
| 64 | * Path information |
| 65 | */ |
| 66 | $img-path: '../../img/build'; |
| 67 | $font-path: '../../font'; |
| 68 | |
| 69 | /** |
| 70 | * Margins |
| 71 | */ |
| 72 | $standard-margin: 30px; |
| 73 | $right-match-distance: 20px; |
| 74 | |
| 75 | @mixin blind { |
| 76 | position: absolute; |
| 77 | margin-left: -3000px; |
| 78 | } |
| 79 | |
| 80 | @mixin choose-item { |
| 81 | color: $choose-color; |
| 82 | background-color: $choose-bg; |
| 83 | border-color: $choose-border-color; |
| 84 | text-shadow: $light-shadow; |
| 85 | } |
| 86 | |
| 87 | @mixin choose-hover { |
| 88 | color: $nearly-white; |
| 89 | text-shadow: none; |
| 90 | background-color: $dark-orange; |
| 91 | border-color: $darker-orange; |
| 92 | } |
| 93 | |
| 94 | @mixin choose-active { |
| 95 | color: $dark-green; |
| 96 | text-shadow: none; |
| 97 | background-color: $light-green; |
| 98 | border-color: $dark-green; |
| 99 | } |
| 100 | |
| 101 | @mixin color-transition { |
| 102 | transition: color 0.3s ease 0s; |
| 103 | } |
| 104 | |
| 105 | @mixin standard-text-padding { |
| 106 | padding-left: .4em; |
| 107 | padding-right: .4em; |
| 108 | } |
| 109 | |
| 110 | @mixin box-sizing-box() { |
| 111 | -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ |
| 112 | -moz-box-sizing: border-box; /* Firefox, other Gecko */ |
| 113 | box-sizing: border-box; /* Opera/IE 8+ */ |
| 114 | } |
| 115 | |
| 116 | |
| 117 | // https://css-tricks.com/almanac/properties/a/appearance/ |
| 118 | @mixin no-appearance { |
| 119 | -webkit-appearance:none; |
| 120 | -moz-appearance:none; |
| 121 | appearance:none; |
| 122 | } |