_actions.less 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Variables -> Actions
  7. // _____________________________________________
  8. @action__border-color: @color-gray68;
  9. @action__font-size: @font-size__base;
  10. @action__line-height: @line-height__base;
  11. @action__padding-top: round(((@field-control__height -
  12. (@field-control__font-size * @field-control__line-height) -
  13. ((unit(@field-control__border-width) / @font-size-unit-ratio) * 2)) / 2 + .1), 1);
  14. @action__padding-bottom: @field-control__padding-top;
  15. @action__height: 3.2rem;
  16. @action__active__border-color: @color-blue-pure; // Not the same as @button__hover__border-color
  17. @action__hover__background-color: @color-blue-clear-sky;
  18. @action__hover__border-color: darken(@action__border-color, 15%);
  19. @action__outer-indent: .7rem;
  20. @action-select__disabled__color: @text__color;
  21. // Actions menu
  22. @action-menu__hover__background-color: @color-gray89;
  23. //
  24. // Buttons
  25. // ---------------------------------------------
  26. // Base button
  27. @button__background-color: @color-gray89;
  28. @button__border-color: @action__border-color;
  29. @button__border-size: 1px;
  30. @button__border-style: solid;
  31. @button__color: @color-brownie;
  32. @button__font-family: @font-family__base;
  33. @button__font-size: @action__font-size;
  34. @button__line-height: @action__line-height;
  35. @button__padding-top: @action__padding-top;
  36. @button__padding-bottom: @action__padding-bottom;
  37. @button__padding-horizontal: 1em;
  38. @button__padding-vertical__l: .6875em;
  39. @button__active__background-color: darken(@button__background-color, 5%);
  40. @button__hover__background-color: darken(@button__background-color, 3%);
  41. @button__hover__border-color: @color-blue-pure;
  42. @button__hover__box-shadow: 0 0 0 1px @button__hover__border-color;
  43. @button__large__font-size: 1.6rem;
  44. @button__large__padding-horizontal: 1.45em;
  45. @button__large__padding-vertical: .7em;
  46. // Primary button
  47. @button-primary__background-color: @primary__color;
  48. @button-primary__color: @color-white;
  49. @button-primary__hover__background-color: @color-phoenix-brown-almost;
  50. @button-primary__hover__border-color: @color-phoenix-brown;
  51. // Secondary button
  52. @button-secondary__background-color: @color-brownie;
  53. @button-secondary__border-color: @button-secondary__background-color;
  54. @button-secondary__color: @color-white;
  55. @button-secondary__active__background-color: @color-very-dark-gray-black2;
  56. @button-secondary__hover__background-color: @color-very-dark-gray-black2;
  57. @button-secondary__hover__border-color: @button-secondary__hover__background-color;
  58. // Triangle marker
  59. @button-marker-triangle__height: .5rem;
  60. @button-marker-triangle__width: .8rem;
  61. @button-marker-triangle__height__xl: .9rem;
  62. @button-marker-triangle__width__xl: 1.2rem;
  63. // Button Triangle
  64. @button-triangle__base__border-color: darken(@button__border-color, 10%);
  65. @button-triangle__base__disabled__background-color: lighten(@button__background-color, 10%);
  66. @button-triangle__base__size: 1.7rem;
  67. //
  68. // Dropdown
  69. // ---------------------------------------------
  70. @action-dropdown__color: @text__color;
  71. @action-dropdown__background-color: @page-wrapper__background-color;
  72. @action-dropdown__border-color: @color-light-gray;
  73. @action-dropdown__font-size: round(@font-size__base - .1rem, 1);
  74. @action-dropdown__height: @action__height;
  75. @action-dropdown__padding-top: .7rem;
  76. @action-dropdown__padding-bottom: .8rem;
  77. @action-dropdown__padding-horizontal: 1.5rem;
  78. @action-dropdown__padding-right: @action-dropdown__padding-horizontal + @action-dropdown-menu__padding-horizontal + @button-marker-triangle__width;
  79. @action-dropdown__active__border-color: @color-blue-pure;
  80. @action-dropdown__hover__color: darken(@action-dropdown__color, 20%);
  81. @action-dropdown-menu__padding-vertical: .5rem;
  82. @action-dropdown-menu__padding-horizontal: 1rem;
  83. @action-dropdown-menu-link__padding-vertical: .6rem;
  84. @action-dropdown-menu-link__padding-horizontal: @action-dropdown__padding-horizontal - @action-dropdown-menu__padding-horizontal;