app.mixins.less 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. .color-variant(@bg-color: #555, @lt-percent: 10%, @lter-percent: 15%, @dk-percent: 10%, @dker-percent: 15%) {
  2. background-color: @bg-color;
  3. &.lt,
  4. .lt {
  5. .color-schema(@bg-color, -@lt-percent, -2.5%);
  6. }
  7. &.lter,
  8. .lter {
  9. .color-schema(@bg-color, -@lter-percent, -5%);
  10. }
  11. &.dk,
  12. .dk {
  13. .color-schema(@bg-color, @dk-percent, 2.5%);
  14. }
  15. &.dker,
  16. .dker {
  17. .color-schema(@bg-color, @dker-percent, 5%);
  18. }
  19. &.bg,
  20. .bg{
  21. background-color: @bg-color;
  22. }
  23. }
  24. .color-schema(@bg-color: #555, @percent: 15%, @sat-percent){
  25. background-color: saturate(darken(@bg-color, @percent), @sat-percent);
  26. }
  27. .font-variant(@bg-color){
  28. @font-color: desaturate(lighten(@bg-color,40%), 10%);
  29. @link-color: desaturate(lighten(@bg-color,50%), 10%);
  30. @hover-color: #fff;
  31. color: @font-color;
  32. a {
  33. color: @link-color;
  34. &:hover{
  35. color: @hover-color;
  36. }
  37. &.list-group-item{
  38. &:hover,
  39. &:focus{
  40. background-color: inherit;
  41. }
  42. }
  43. }
  44. .nav {
  45. > li {
  46. &:hover,
  47. &:focus,
  48. &.active{
  49. > a{
  50. color: @hover-color;
  51. .color-schema(@bg-color, 5%, 2.5%);
  52. }
  53. }
  54. > a{
  55. color: darken(@link-color, 5%);
  56. &:hover,
  57. &:focus{
  58. .color-schema(@bg-color, 3%, 2.5%);
  59. }
  60. }
  61. }
  62. .open > a{
  63. .color-schema(@bg-color, 5%, 2.5%);
  64. }
  65. }
  66. .caret{
  67. border-top-color: @font-color;
  68. border-bottom-color: @font-color;
  69. }
  70. &.navbar .nav{
  71. > li.active > a{
  72. color: @hover-color;
  73. .color-schema(@bg-color, 5%, 2.5%);
  74. }
  75. }
  76. .open > a {
  77. &,
  78. &:hover,
  79. &:focus{
  80. color: @hover-color;
  81. }
  82. }
  83. .text-muted {
  84. color: darken(@font-color, 10%) !important;
  85. }
  86. .text-lt {
  87. color: lighten(@font-color, 25%) !important;
  88. }
  89. &.auto,
  90. .auto{
  91. .list-group-item{
  92. border-color: darken(@bg-color, 5%) !important;
  93. background-color: transparent;
  94. &:hover,
  95. &:focus,
  96. &:active,
  97. &.active{
  98. .color-schema(@bg-color, 5%, 2.5%) !important;
  99. }
  100. }
  101. }
  102. }
  103. .text-wariant(@bg-color, @name){
  104. a.bg-@{name}:hover{
  105. background-color: darken(@bg-color, 5%);
  106. }
  107. a.text-@{name}:hover{
  108. color: darken(@bg-color, 5%);
  109. }
  110. .text-@{name}{
  111. color: @bg-color;
  112. }
  113. .text-@{name}-lt{
  114. color: lighten(@bg-color, 5%);
  115. }
  116. .text-@{name}-lter{
  117. color: lighten(@bg-color, 10%);
  118. }
  119. .text-@{name}-dk{
  120. color: darken(@bg-color, 5%);
  121. }
  122. .text-@{name}-dker{
  123. color: darken(@bg-color, 10%);
  124. }
  125. }
  126. .clearfix() {
  127. &:before,
  128. &:after {
  129. content: " ";
  130. display: table;
  131. }
  132. &:after {
  133. clear: both;
  134. }
  135. }
  136. // Button variants
  137. // -------------------------
  138. // Easily pump out default styles, as well as :hover, :focus, :active,
  139. // and disabled options for all buttons
  140. .button-variant(@color; @background; @border) {
  141. color: @color !important;
  142. background-color: @background;
  143. border-color: @border;
  144. &:hover,
  145. &:focus,
  146. &:active,
  147. &.active,
  148. .open .dropdown-toggle& {
  149. color: @color !important;
  150. background-color: darken(@background, 5%);
  151. border-color: darken(@border, 8%);
  152. }
  153. &:active,
  154. &.active,
  155. .open .dropdown-toggle& {
  156. background-image: none;
  157. }
  158. &.disabled,
  159. &[disabled],
  160. fieldset[disabled] & {
  161. &,
  162. &:hover,
  163. &:focus,
  164. &:active,
  165. &.active {
  166. background-color: @background;
  167. border-color: @border
  168. }
  169. }
  170. }
  171. .translateZ(@z) {
  172. -webkit-transform: translateZ(@z);
  173. -ms-transform: translateZ(@z);
  174. -o-transform: translateZ(@z);
  175. transform: translateZ(@z);
  176. }
  177. // CSS3 PROPERTIES
  178. // --------------------------------------------------
  179. // Single side border-radius
  180. .border-top-radius(@radius) {
  181. border-top-right-radius: @radius;
  182. border-top-left-radius: @radius;
  183. }
  184. .border-right-radius(@radius) {
  185. border-bottom-right-radius: @radius;
  186. border-top-right-radius: @radius;
  187. }
  188. .border-bottom-radius(@radius) {
  189. border-bottom-right-radius: @radius;
  190. border-bottom-left-radius: @radius;
  191. }
  192. .border-left-radius(@radius) {
  193. border-bottom-left-radius: @radius;
  194. border-top-left-radius: @radius;
  195. }
  196. // Drop shadows
  197. .box-shadow(@shadow) {
  198. -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
  199. box-shadow: @shadow;
  200. }
  201. // Transitions
  202. .transition(@transition) {
  203. -webkit-transition: @transition;
  204. transition: @transition;
  205. }
  206. .transition-delay(@transition-delay) {
  207. -webkit-transition-delay: @transition-delay;
  208. transition-delay: @transition-delay;
  209. }
  210. .transition-duration(@transition-duration) {
  211. -webkit-transition-duration: @transition-duration;
  212. transition-duration: @transition-duration;
  213. }
  214. .transition-transform(@transition) {
  215. -webkit-transition: -webkit-transform @transition;
  216. -moz-transition: -moz-transform @transition;
  217. -o-transition: -o-transform @transition;
  218. transition: transform @transition;
  219. }
  220. // Transformations
  221. .rotate(@degrees) {
  222. -webkit-transform: rotate(@degrees);
  223. -ms-transform: rotate(@degrees); // IE9+
  224. transform: rotate(@degrees);
  225. }
  226. .scale(@ratio) {
  227. -webkit-transform: scale(@ratio);
  228. -ms-transform: scale(@ratio); // IE9+
  229. transform: scale(@ratio);
  230. }
  231. .translate(@x, @y) {
  232. -webkit-transform: translate(@x, @y);
  233. -ms-transform: translate(@x, @y); // IE9+
  234. transform: translate(@x, @y);
  235. }
  236. .skew(@x, @y) {
  237. -webkit-transform: skew(@x, @y);
  238. -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
  239. transform: skew(@x, @y);
  240. }
  241. .translate3d(@x, @y, @z) {
  242. -webkit-transform: translate3d(@x, @y, @z);
  243. transform: translate3d(@x, @y, @z);
  244. }
  245. // Backface visibility
  246. // Prevent browsers from flickering when using CSS 3D transforms.
  247. // Default value is `visible`, but can be changed to `hidden`
  248. // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
  249. .backface-visibility(@visibility){
  250. -webkit-backface-visibility: @visibility;
  251. -moz-backface-visibility: @visibility;
  252. backface-visibility: @visibility;
  253. }
  254. // Box sizing
  255. .box-sizing(@boxmodel) {
  256. -webkit-box-sizing: @boxmodel;
  257. -moz-box-sizing: @boxmodel;
  258. box-sizing: @boxmodel;
  259. }
  260. // User select
  261. // For selecting text on the page
  262. .user-select(@select) {
  263. -webkit-user-select: @select;
  264. -moz-user-select: @select;
  265. -ms-user-select: @select; // IE10+
  266. -o-user-select: @select;
  267. user-select: @select;
  268. }
  269. // Resize anything
  270. .resizable(@direction) {
  271. resize: @direction; // Options: horizontal, vertical, both
  272. overflow: auto; // Safari fix
  273. }
  274. // CSS3 Content Columns
  275. .content-columns(@column-count, @column-gap: @grid-gutter-width) {
  276. -webkit-column-count: @column-count;
  277. -moz-column-count: @column-count;
  278. column-count: @column-count;
  279. -webkit-column-gap: @column-gap;
  280. -moz-column-gap: @column-gap;
  281. column-gap: @column-gap;
  282. }
  283. // Optional hyphenation
  284. .hyphens(@mode: auto) {
  285. word-wrap: break-word;
  286. -webkit-hyphens: @mode;
  287. -moz-hyphens: @mode;
  288. -ms-hyphens: @mode; // IE10+
  289. -o-hyphens: @mode;
  290. hyphens: @mode;
  291. }
  292. // Opacity
  293. .opacity(@opacity) {
  294. opacity: @opacity;
  295. // IE8 filter
  296. @opacity-ie: (@opacity * 100);
  297. filter: ~"alpha(opacity=@{opacity-ie})";
  298. }
  299. // GRADIENTS
  300. // --------------------------------------------------
  301. #gradient {
  302. // Horizontal gradient, from left to right
  303. //
  304. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  305. // Color stops are not available in IE9 and below.
  306. .horizontal(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
  307. background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
  308. background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
  309. background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
  310. background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
  311. background-repeat: repeat-x;
  312. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
  313. }
  314. // Vertical gradient, from top to bottom
  315. //
  316. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  317. // Color stops are not available in IE9 and below.
  318. .vertical(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
  319. background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
  320. background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
  321. background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
  322. background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
  323. background-repeat: repeat-x;
  324. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
  325. }
  326. .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
  327. background-repeat: repeat-x;
  328. background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
  329. background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
  330. background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
  331. }
  332. .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
  333. background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
  334. background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
  335. background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
  336. background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
  337. background-repeat: no-repeat;
  338. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  339. }
  340. .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
  341. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
  342. background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
  343. background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
  344. background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
  345. background-repeat: no-repeat;
  346. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  347. }
  348. .radial(@inner-color: #555, @outer-color: #333) {
  349. background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
  350. background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
  351. background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
  352. background-image: radial-gradient(circle, @inner-color, @outer-color);
  353. background-repeat: no-repeat;
  354. }
  355. .striped(@color: #555, @angle: 45deg) {
  356. background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
  357. background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  358. background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  359. background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  360. }
  361. }
  362. // Reset filters for IE
  363. //
  364. // When you need to remove a gradient background, don't forget to use this to reset
  365. // the IE filter for IE9 and below.
  366. .reset-filter() {
  367. filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
  368. }