mixins.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. //AdminLTE mixins
  2. //===============
  3. //Changes the color and the hovering properties of the navbar
  4. .navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
  5. background-color: @color;
  6. //Navbar links
  7. .nav > li > a {
  8. color: @font-color;
  9. }
  10. .nav > li > a:hover,
  11. .nav > li > a:active,
  12. .nav > li > a:focus,
  13. .nav .open > a,
  14. .nav .open > a:hover,
  15. .nav .open > a:focus {
  16. background: @hover-bg;
  17. color: @hover-color;
  18. }
  19. .navbar-custom-menu > .nav {
  20. margin-right: 10px;
  21. }
  22. //Add color to the sidebar toggle button
  23. .sidebar-toggle {
  24. color: @font-color;
  25. &:hover {
  26. color: @hover-color;
  27. background: @hover-bg;
  28. }
  29. }
  30. }
  31. //Logo color variation
  32. .logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent) {
  33. background-color: @bg-color;
  34. color: @color;
  35. border-bottom: 1px solid @border-bottom-color;
  36. > a {
  37. color: @color;
  38. }
  39. &:hover {
  40. background: darken(@bg-color, 1%);
  41. }
  42. }
  43. //Box solid color variantion creator
  44. .box-solid-variant(@color; @text-color: #fff) {
  45. border: 1px solid @color;
  46. > .box-header {
  47. color: @text-color;
  48. background: @color;
  49. background-color: @color;
  50. a, .btn {
  51. color: @text-color;
  52. }
  53. }
  54. }
  55. //Direct Chat Variant
  56. .direct-chat-variant(@bg-color; @color: #fff) {
  57. .right > .direct-chat-text {
  58. background: @bg-color;
  59. border-color: @bg-color;
  60. color: @color;
  61. &:after,
  62. &:before {
  63. border-left-color: @bg-color;
  64. }
  65. }
  66. }
  67. //border radius creator
  68. .border-radius(@radius) {
  69. border-radius: @radius;
  70. }
  71. //Different radius each side
  72. .border-radius(@top-left; @top-right; @bottom-left; @bottom-right) {
  73. border-top-left-radius: @top-left;
  74. border-top-right-radius: @top-right;
  75. border-bottom-right-radius: @bottom-right;
  76. border-bottom-left-radius: @bottom-left;
  77. }
  78. //Gradient background
  79. .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  80. background: @color;
  81. background: -webkit-gradient(linear,
  82. left bottom,
  83. left top,
  84. color-stop(0, @start),
  85. color-stop(1, @stop));
  86. background: -ms-linear-gradient(bottom,
  87. @start,
  88. @stop);
  89. background: -moz-linear-gradient(center bottom,
  90. @start 0%,
  91. @stop 100%);
  92. background: -o-linear-gradient(@stop,
  93. @start);
  94. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
  95. }