mixins.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. .setPlaceholder(@prefix,@color:@text-color-help-dark) {
  2. // input
  3. @{prefix}::-webkit-input-placeholder {
  4. color: @color;
  5. }
  6. @{prefix}::-moz-placeholder {
  7. /* Mozilla Firefox 19+ */
  8. color: @color;
  9. }
  10. @{prefix}:-moz-placeholder {
  11. /* Mozilla Firefox 4 to 18 */
  12. color: @color;
  13. }
  14. @{prefix}:-ms-input-placeholder {
  15. /* Internet Explorer 10-11 */
  16. color: @color;
  17. }
  18. }
  19. // Text truncation
  20. .text-truncate() {
  21. overflow: hidden;
  22. text-overflow: ellipsis;
  23. white-space: nowrap;
  24. }
  25. /* Force no line break */
  26. .word-nowrap() {
  27. word-wrap: normal;
  28. white-space: nowrap;
  29. }
  30. /* Force line break */
  31. .break-all() {
  32. word-break: break-all;
  33. word-wrap: break-word;
  34. white-space: normal;
  35. }
  36. // Prohibit selection
  37. .unselect() {
  38. cursor: pointer;
  39. user-select: none;
  40. }
  41. /* Suitable for webkit core and mobile */
  42. .ellipsis-multiple(@num: 1) {
  43. display: -webkit-box;
  44. overflow: hidden;
  45. -webkit-box-orient: vertical;
  46. -webkit-line-clamp: @num;
  47. }
  48. .respond-to (small, @content) {
  49. @media only screen and (min-width: @screen-sm-min) {
  50. @content();
  51. }
  52. }
  53. .respond-to (medium, @content) {
  54. @media only screen and (min-width: @screen-md-min) {
  55. @content();
  56. }
  57. }
  58. .respond-to (large, @content) {
  59. @media only screen and (min-width: @screen-lg-min) {
  60. @content();
  61. }
  62. }
  63. .respond-to (xlarge, @content) {
  64. @media only screen and (min-width: @screen-xl-min) {
  65. @content();
  66. }
  67. }
  68. .respond-to (xsmall-only, @content) {
  69. @media only screen and (max-width: @screen-xs-max) {
  70. @content();
  71. }
  72. }
  73. .respond-to (small-only, @content) {
  74. @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  75. @content();
  76. }
  77. }
  78. .respond-to (medium-only, @content) {
  79. @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  80. @content();
  81. }
  82. }
  83. .respond-to (large-only, @content) {
  84. @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
  85. @content();
  86. }
  87. }
  88. .respond-to (xsmall-and-small, @content) {
  89. @media only screen and (max-width: @screen-sm-max) {
  90. @content();
  91. }
  92. }
  93. .respond-to (small-and-medium, @content) {
  94. @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
  95. @content();
  96. }
  97. }