image.less 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. .btn-group-vertical {
  2. .image-btn, .image-btn-caption {
  3. width: 40px;
  4. margin: 0;
  5. padding: 0;
  6. border: none!important;
  7. border-radius: 0!important;
  8. &:hover {
  9. background-color: @tool-hover;
  10. }
  11. &:active {
  12. background-color: @tool-active;
  13. }
  14. &.active {
  15. box-shadow: none;
  16. background-color: @tool-hover;
  17. }
  18. }
  19. .image-btn {
  20. height: 25px;
  21. background: url(images/icons.png) no-repeat center -125px;
  22. }
  23. .image-btn-caption {
  24. height: 20px;
  25. .caption {
  26. font-size: 12px;
  27. }
  28. }
  29. }
  30. .image-preview {
  31. display: block;
  32. max-width: 50%;
  33. }
  34. .modal-body {
  35. .tab-pane {
  36. font-size: inherit;
  37. padding-top: 15px;
  38. }
  39. }
  40. .search-result {
  41. margin-top: 15px;
  42. height: 370px;
  43. overflow: hidden;
  44. ul {
  45. margin: 0;
  46. padding: 0;
  47. list-style: none;
  48. clear: both;
  49. height: 100%;
  50. overflow-x: hidden;
  51. overflow-y: auto;
  52. li {
  53. list-style: none;
  54. float: left;
  55. display: block;
  56. width: 130px;
  57. height: 130px;
  58. line-height: 130px;
  59. margin: 6px;
  60. padding: 0;
  61. font-size: 12px;
  62. position: relative;
  63. vertical-align: top;
  64. text-align: center;
  65. overflow: hidden;
  66. cursor: pointer;
  67. border: 2px solid #fcfcfc;
  68. &.selected {
  69. border: 2px solid #fc8383;
  70. }
  71. img {
  72. max-width: 126px;
  73. max-height: 130px;
  74. vertical-align: middle;
  75. }
  76. span {
  77. display: block;
  78. position: absolute;
  79. bottom: 0;
  80. height: 20px;
  81. background: rgba(0, 0, 0, 0.5);
  82. left: 0;
  83. right: 0;
  84. color: white;
  85. line-height: 20px;
  86. overflow: hidden;
  87. text-overflow: ellipsis;
  88. word-break: break-all;
  89. white-space: nowrap;
  90. opacity: 0;
  91. -webkit-transform: translate(0, 20px);
  92. -ms-transform: translate(0, 20px);
  93. transform: translate(0, 20px);
  94. -webkit-transition: all .2s ease;
  95. transition: all .2s ease;
  96. }
  97. }
  98. li:hover span {
  99. opacity: 1;
  100. -webkit-transform: translate(0, 0);
  101. -ms-transform: translate(0, 0);
  102. transform: translate(0, 0);
  103. }
  104. }
  105. }
  106. // 覆盖 bootstrap 样式
  107. @media (min-width: 768px){
  108. .form-inline .form-control {
  109. width: 422px;
  110. }
  111. }