OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"); |
| 4 |
| 5 // Navbar ===================================================================== |
| 6 |
| 7 .navbar { |
| 8 border: none; |
| 9 .box-shadow(0 1px 2px rgba(0,0,0,.3)); |
| 10 |
| 11 &-brand { |
| 12 font-size: 24px; |
| 13 } |
| 14 |
| 15 &-inverse { |
| 16 .form-control { |
| 17 color: #fff; |
| 18 .placeholder(@navbar-inverse-link-color); |
| 19 |
| 20 &[type=text], |
| 21 &[type=password] { |
| 22 .box-shadow(inset 0 -1px 0 @navbar-inverse-link-color); |
| 23 |
| 24 &:focus { |
| 25 .box-shadow(inset 0 -2px 0 #fff); |
| 26 } |
| 27 } |
| 28 } |
| 29 } |
| 30 } |
| 31 |
| 32 // Buttons ==================================================================== |
| 33 |
| 34 #btn(@class,@bg) { |
| 35 .btn-@{class} { |
| 36 background-size: 200%; |
| 37 background-position: 50%; |
| 38 |
| 39 &:hover, |
| 40 &:active:hover, |
| 41 &:focus { |
| 42 background-color: darken(@bg, 6%); |
| 43 } |
| 44 |
| 45 &:active { |
| 46 background-color: darken(@bg, 6%); |
| 47 #gradient > .radial(darken(@bg, 6%) 10%, @bg 11%); |
| 48 background-size: 1000%; |
| 49 .box-shadow(2px 2px 2px rgba(0,0,0,.3)); |
| 50 } |
| 51 } |
| 52 } |
| 53 |
| 54 #btn(default,@btn-default-bg); |
| 55 #btn(primary,@btn-primary-bg); |
| 56 #btn(success,@btn-success-bg); |
| 57 #btn(info,@btn-info-bg); |
| 58 #btn(warning,@btn-warning-bg); |
| 59 #btn(danger,@btn-danger-bg); |
| 60 |
| 61 .btn { |
| 62 text-transform: uppercase; |
| 63 border-right: none; |
| 64 border-bottom: none; |
| 65 .box-shadow(1px 1px 2px rgba(0,0,0,.3)); |
| 66 .transition(all 0.2s); |
| 67 |
| 68 &-link { |
| 69 .box-shadow(none); |
| 70 |
| 71 &:hover, |
| 72 &:focus { |
| 73 color: @brand-primary; |
| 74 text-decoration: none; |
| 75 } |
| 76 } |
| 77 |
| 78 &-default.disabled { |
| 79 border: 1px solid @btn-default-border; |
| 80 } |
| 81 } |
| 82 |
| 83 |
| 84 // Typography ================================================================= |
| 85 |
| 86 body { |
| 87 -webkit-font-smoothing: antialiased; |
| 88 letter-spacing: .1px; |
| 89 text-rendering: optimizeLegibility; |
| 90 } |
| 91 |
| 92 p { |
| 93 margin: 0 0 1em; |
| 94 } |
| 95 |
| 96 input, |
| 97 button { |
| 98 -webkit-font-smoothing: antialiased; |
| 99 letter-spacing: .1px; |
| 100 text-rendering: optimizeLegibility; |
| 101 } |
| 102 |
| 103 a { |
| 104 .transition(all 0.2s); |
| 105 } |
| 106 |
| 107 // Tables ===================================================================== |
| 108 |
| 109 .table-hover { |
| 110 > tbody > tr, |
| 111 > tbody > tr > th, |
| 112 > tbody > tr > td { |
| 113 .transition(all 0.2s); |
| 114 } |
| 115 } |
| 116 |
| 117 // Forms ====================================================================== |
| 118 //WIP |
| 119 label { |
| 120 font-weight: normal; |
| 121 } |
| 122 |
| 123 textarea, |
| 124 textarea.form-control, |
| 125 input.form-control, |
| 126 input[type=text], |
| 127 input[type=password], |
| 128 input[type=email], |
| 129 input[type=number], |
| 130 [type=text].form-control, |
| 131 [type=password].form-control, |
| 132 [type=email].form-control, |
| 133 [type=tel].form-control, |
| 134 [contenteditable].form-control { |
| 135 padding: 0; |
| 136 border: none; |
| 137 border-radius: 0; |
| 138 -webkit-appearance: none; |
| 139 .box-shadow(inset 0 -1px 0 #ddd); |
| 140 font-size: 16px; |
| 141 |
| 142 &:focus { |
| 143 .box-shadow(inset 0 -2px 0 @brand-primary); |
| 144 } |
| 145 |
| 146 &[disabled], |
| 147 &[readonly] { |
| 148 .box-shadow(none); |
| 149 border-bottom: 1px dotted #ddd; |
| 150 } |
| 151 |
| 152 &.input { |
| 153 &-sm { |
| 154 font-size: @font-size-small; |
| 155 } |
| 156 |
| 157 &-lg { |
| 158 font-size: @font-size-large; |
| 159 } |
| 160 } |
| 161 } |
| 162 |
| 163 |
| 164 // Navs ======================================================================= |
| 165 |
| 166 .nav-tabs { |
| 167 > li > a, |
| 168 > li > a:focus { |
| 169 margin-right: 0; |
| 170 background-color: transparent; |
| 171 border: none; |
| 172 color: @navbar-default-link-color; |
| 173 .box-shadow(inset 0 -1px 0 #ddd); |
| 174 .transition(all 0.2s); |
| 175 |
| 176 &:hover { |
| 177 background-color: transparent; |
| 178 .box-shadow(inset 0 -2px 0 @brand-primary); |
| 179 color: @brand-primary; |
| 180 } |
| 181 } |
| 182 |
| 183 & > li.active > a, |
| 184 & > li.active > a:focus { |
| 185 border: none; |
| 186 .box-shadow(inset 0 -2px 0 @brand-primary); |
| 187 color: @brand-primary; |
| 188 |
| 189 &:hover { |
| 190 border: none; |
| 191 color: @brand-primary; |
| 192 } |
| 193 } |
| 194 |
| 195 & > li.disabled > a { |
| 196 .box-shadow(inset 0 -1px 0 #ddd); |
| 197 } |
| 198 |
| 199 } |
| 200 |
| 201 |
| 202 // Containers ================================================================= |
| 203 |
| 204 .panel { |
| 205 border: none; |
| 206 border-radius: 2px; |
| 207 .box-shadow(0 1px 4px rgba(0,0,0,.3)); |
| 208 |
| 209 &-heading { |
| 210 border-bottom: none; |
| 211 } |
| 212 |
| 213 &-footer { |
| 214 border-top: none; |
| 215 } |
| 216 } |
| 217 |
| 218 #moin-content { |
| 219 font-size: 15px; |
| 220 } |
OLD | NEW |