_helpers.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. // ==============================================
  6. // Misc helpers and shortcuts
  7. // ==============================================
  8. // Shortcuts --------------------------------
  9. .filter(@_filter: grayscale(100%)) {
  10. -webkit-filter: @_filter; // Use in 41 Chrome
  11. filter: @_filter;
  12. }
  13. .rotate(@_rotation) {
  14. -webkit-transform: rotate(@_rotation); // Use in 8 Safari
  15. -ms-transform: rotate(@_rotation); // Use in 9 IE
  16. transform: rotate(@_rotation);
  17. }
  18. .placeholder(@_color: #ddd) {
  19. :-moz-placeholder {
  20. color: @_color;
  21. }
  22. ::-webkit-input-placeholder {
  23. color: @_color;
  24. }
  25. :-ms-input-placeholder {
  26. color: @_color;
  27. }
  28. }
  29. #gradient {
  30. .horizontal (@start-color, @end-color) when not (@disable-filters) {
  31. background-color: @end-color;
  32. background-repeat: repeat-x;
  33. background-image: -webkit-linear-gradient(left, @start-color, @end-color); // Use in 4.3 Android
  34. background-image: -ms-linear-gradient(left, @start-color 0%, @end-color 100%); // Use in 10 IE
  35. background-image: linear-gradient(left, @start-color, @end-color);
  36. }
  37. .horizontal (@start-color, @end-color) when (@disable-filters) {
  38. background-color: @end-color;
  39. background-repeat: repeat-x;
  40. background-image: -webkit-linear-gradient(left, @start-color, @end-color); // Use in 4.3 Android
  41. background-image: -ms-linear-gradient(left, @start-color 0%, @end-color 100%); // Use in 10 IE
  42. background-image: linear-gradient(left, @start-color, @end-color);
  43. }
  44. .vertical (@start-color, @end-color) when (@disable-filters) {
  45. background-color: @end-color;
  46. background-repeat: repeat-x;
  47. background-image: -webkit-linear-gradient(@start-color, @end-color); // Use in 4.3 Android
  48. background-image: -ms-linear-gradient(top, @start-color 0%, @end-color 100%); // Use in 10 IE
  49. background-image: linear-gradient(@start-color, @end-color);
  50. }
  51. .vertical (@start-color, @end-color) when not (@disable-filters) {
  52. background-color: @end-color;
  53. background-repeat: repeat-x;
  54. background-image: -webkit-linear-gradient(@start-color, @end-color); // Use in 4.3 Android
  55. background-image: -ms-linear-gradient(top, @start-color 0%, @end-color 100%); // Use in 10 IE
  56. background-image: linear-gradient(@start-color, @end-color);
  57. }
  58. }
  59. // Helpers --------------------------------
  60. .clearfix() when not (@using-ieclasses) {
  61. &:before,
  62. &:after {
  63. content: "";
  64. display: table;
  65. }
  66. &:after {
  67. clear: both;
  68. }
  69. }
  70. .clearfix() when (@using-ieclasses) {
  71. &:before,
  72. &:after {
  73. content: "";
  74. display: table;
  75. }
  76. &:after {
  77. clear: both;
  78. }
  79. }
  80. .inline-block() when (@using-ieclasses) {
  81. display: inline-block;
  82. }
  83. .inline-block() when not (@using-ieclasses) {
  84. display: inline-block;
  85. }
  86. .ir() {
  87. border: 0;
  88. font: 0/0 a;
  89. text-shadow: none;
  90. color: transparent;
  91. background-color: transparent;
  92. }
  93. .hidden() {
  94. display: none !important;
  95. visibility: hidden;
  96. }
  97. .visually-hidden() {
  98. border: 0;
  99. clip: rect(0 0 0 0);
  100. height: 1px;
  101. margin: -1px;
  102. overflow: hidden;
  103. padding: 0;
  104. position: absolute;
  105. width: 1px;
  106. &.focusable:active,
  107. &.focusable:focus {
  108. clip: auto;
  109. height: auto;
  110. margin: 0;
  111. overflow: visible;
  112. position: static;
  113. width: auto;
  114. }
  115. }
  116. .size(@thesize) {
  117. width: @thesize;
  118. height: @thesize;
  119. }
  120. .size(@width, @height) {
  121. width: @width;
  122. height: @height;
  123. }
  124. // System --------------------------------
  125. .nudge-l( @pos ) when ( @pos = 0 ) {
  126. }
  127. .nudge-l( @pos ) when not ( @pos = 0 ) {
  128. left: @pos;
  129. }
  130. .nudge-r( @pos ) when ( @pos = 0 ) {
  131. }
  132. .nudge-r( @pos ) when not ( @pos = 0 ) {
  133. right: @pos;
  134. }
  135. .nudge-t( @pos ) when ( @pos = 0 ) {
  136. }
  137. .nudge-t( @pos ) when not ( @pos = 0 ) {
  138. top: @pos;
  139. }
  140. .nudge-b( @pos ) when ( @pos = 0 ) {
  141. }
  142. .nudge-b( @pos ) when not ( @pos = 0 ) {
  143. bottom: @pos;
  144. }