index.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-grid {
  4. position: relative;
  5. float: left;
  6. box-sizing: border-box;
  7. &--bordered {
  8. &::before {
  9. .setRightLine(@border-color-split);
  10. }
  11. &::after {
  12. .setBottomLine(@border-color-split);
  13. }
  14. }
  15. &--hover {
  16. background-color: @active-state-bg;
  17. }
  18. &__thumb {
  19. .square(@grids-icon-size);
  20. display: block;
  21. margin: 0 auto;
  22. }
  23. &__label {
  24. text-align: center;
  25. color: @grids-color;
  26. font-size: @grids-font-size;
  27. margin-top: @margin-component-base;
  28. .ellipsis();
  29. }
  30. &__inner {
  31. height: 100%;
  32. width: 100%;
  33. text-align: center;
  34. padding: @grids-inner-padding;
  35. box-sizing: border-box;
  36. display: flex;
  37. flex-direction: column;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. &--square &__content {
  42. position: relative;
  43. display: block;
  44. content: ' ';
  45. padding-bottom: 100%;
  46. }
  47. &--square &__inner {
  48. position: absolute;
  49. top: 50%;
  50. transform: translate3d(0, -50%, 0);
  51. }
  52. }