_theme.less 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Luma theme overrides
  7. // _____________________________________________
  8. // Theme file should contain declarations (overrides) ONLY OF EXISTING variables
  9. // Otherwise this theme won't be available for parent nesting
  10. // All new variables should be placed in local theme lib or local theme files
  11. //
  12. // Typography
  13. // ---------------------------------------------
  14. // Fonts
  15. @icons__font-path: '@{baseDir}fonts/Luma-Icons';
  16. @icons__font-name: 'luma-icons';
  17. // Color nesting
  18. @panel__background-color: @color-gray-light0;
  19. @border-color__base: @color-gray80;
  20. // Headings
  21. @h3__font-weight: @font-weight__semibold;
  22. @h3__margin-top: @indent__base;
  23. // Links
  24. @link__color: @theme__color__primary-alt;
  25. // Focus
  26. @focus__color: @color-blue3;
  27. //
  28. // Tables
  29. // ---------------------------------------------
  30. @table-cell__padding-vertical: 11px;
  31. @table-cell-stripped__background-color: @table-cell__hover__background-color;
  32. @table-responsive-th__background-color: @table-cell-stripped__background-color;
  33. @table-responsive-cell__padding: @indent__xs @indent__s;
  34. //
  35. // Layout grid
  36. // ---------------------------------------------
  37. @total-columns: 24;
  38. // Variables for layout columns
  39. @layout-column__sidebar-width: 5;
  40. // Checkout columns width
  41. @layout-column-checkout__width-left: 6;
  42. //
  43. // Navigation
  44. // ---------------------------------------------
  45. @navigation__background: @color-gray94;
  46. @navigation-level0-item__active__color: @primary__color;
  47. @submenu-item__active__color: @navigation-level0-item__active__color;
  48. // Desktop navigation
  49. @navigation-desktop-level0-item__line-height: 47px;
  50. @submenu-desktop__font-weight: @font-weight__regular;
  51. @submenu-desktop-item__active__color: @navigation-level0-item__active__color;
  52. // Tabs
  53. @tab-control__color: @color-gray43;
  54. @tab-control__font-weight: @font-weight__regular;
  55. @tab-control__height: @indent__base*2;
  56. @tab-control__margin-right: -1px;
  57. @tab-control__padding-top: 1px;
  58. @tab-control__padding-right: 35px;
  59. // Tabs content
  60. @tab-content__padding-top: 35px;
  61. @tab-content__padding-right: @tab-control__padding-right;
  62. //
  63. // Accordion
  64. // ---------------------------------------------
  65. @accordion-control__font-family: false;
  66. @accordion-control__font-size: @font-size__base;
  67. @accordion-control__font-style: false;
  68. @accordion-control__font-weight: @font-weight__semibold;
  69. @accordion-control__border-right: false;
  70. @accordion-control__border-bottom: false;
  71. @accordion-control__border-left: false;
  72. @accordion-control__background-color: false;
  73. @accordion-control__color: @primary__color;
  74. @accordion-control__hover__background-color: false;
  75. @accordion-control__hover__color: @accordion-control__color;
  76. @accordion-control__active__background-color: false;
  77. @accordion-control__active__color: @accordion-control__color;
  78. @accordion-control__margin-bottom: 0;
  79. @accordion-control__padding-right: @indent__s;
  80. @accordion-control__padding-left: @indent__s;
  81. @accordion-content__border: false;
  82. @accordion-content__margin: 0;
  83. @accordion-content__padding: @indent__s @indent__s @indent__l;
  84. //
  85. // Buttons
  86. // ---------------------------------------------
  87. @button__font-weight: @font-weight__semibold;
  88. // Default = secondary button
  89. @button__background: @color-gray-darken0;
  90. @button__border: 1px solid @border-color__base;
  91. @button__hover__color: @button__color;
  92. @button__hover__background: darken(@button__background, 5%);
  93. @button__active__background: @color-gray-darken1;
  94. // Primary button
  95. @button-primary__hover__color: @color-white;
  96. @button-primary__active__background: @link__hover__color;
  97. @button-primary__active__border: 1px solid @link__hover__color;
  98. @button-primary__active__color: @color-white;
  99. // Button with icon
  100. @button-icon__line-height: @icon-font__line-height;
  101. //
  102. // Icons
  103. // ---------------------------------------------
  104. @icon-wishlist-empty: false;
  105. @icon-comment-reflected: false;
  106. @icon-compare-empty: false;
  107. @icon-arrow-up-thin: false;
  108. @icon-arrow-right-thin: false;
  109. @icon-arrow-left-thin: false;
  110. @icon-arrow-down-thin: false;
  111. @icon-wishlist-empty: '\e601';
  112. //
  113. // Messages
  114. // ---------------------------------------------
  115. @message__padding: 12px @indent__base 12px @indent__m;
  116. @message__line-height: false;
  117. @message-icon__font-size: 24px;
  118. @message-icon__inner-padding-left: 45px;
  119. @message-icon__top: 22px;
  120. @message-error-icon: @icon-error;
  121. @message-success-icon: @icon-success;
  122. //
  123. // Loaders
  124. // ---------------------------------------------
  125. @loader-overlay__background-color: rgba(255, 255, 255, .7);
  126. //
  127. // Forms
  128. // ---------------------------------------------
  129. // Select
  130. @select__background: @form-element-input__background url('../images/select-bg.svg') no-repeat 100% 45%;
  131. @select__border: 1px solid @border-color__base;
  132. @select__height: 32px;
  133. @select__padding: 4px 25px @indent__xs @indent__s;
  134. // Form fieldset
  135. @form-fieldset-legend__font-size: 18px;
  136. @form-fieldset-legend__font-weight: @font-weight__light;
  137. @form-fieldset-legend__margin: 0 0 @indent__base;
  138. @form-fieldset-legend__padding: 0 0 @indent__s;
  139. @form-fieldset-legend__width: 100%;
  140. // Form field
  141. @form-field-type-revert: false;
  142. @form-field__additional-vertical-indent: @indent__s;
  143. // Form field label
  144. @form-field-label__font-weight: @font-weight__semibold;
  145. @form-field-type-label-block__margin: 0 0 8px;
  146. // Form field note icon
  147. @form-field-note-icon-font__content: false;
  148. // Placeholder
  149. @form-element-input-placeholder__color: @color-gray34;
  150. //
  151. // Pager
  152. // ---------------------------------------------
  153. @pager__font-weight: @font-weight__regular;
  154. @pager__line-height: @indent__l;
  155. @pager-item__margin: 0 8px 0 0;
  156. @pager-item__padding: 0 @indent__xs;
  157. // Pager current page
  158. @pager-current__background: @color-gray90;
  159. // Pager link.action
  160. @pager-icon__font-margin: 0;
  161. @pager-icon__font-size: 16px;
  162. // Pager link.action visited
  163. @pager-action__visited__color: @text__color__muted;
  164. // Pager link.action hover
  165. @pager-action__hover__color: @text__color__muted;
  166. // Pager link.action active
  167. @pager-action__active__color: @text__color__muted;
  168. //
  169. // Rating
  170. // ---------------------------------------------
  171. @rating-icon__font-size: 16px;
  172. @rating-icon__letter-spacing: 2px;
  173. //
  174. // Dropdowns
  175. // ---------------------------------------------
  176. @dropdown-toggle-icon__content: @icon-down;
  177. @dropdown-toggle-icon__active__content: @icon-up;
  178. @dropdown-toggle-icon__font-size: 12px;
  179. // Split dropdown
  180. @dropdown-split-actions__padding: 0 @indent__xs;
  181. @dropdown-split-toggle__actions__padding: false;
  182. // Actions-toolbar
  183. @actions-toolbar-actions__position: left;
  184. @actions-toolbar-actions-primary__margin: 0 15px 0 0;
  185. //
  186. // Breadcrumbs
  187. // ---------------------------------------------
  188. @breadcrumbs__container-margin: 0 0 15px;
  189. @breadcrumbs-icon__font-size: 10px;
  190. @breadcrumbs-icon__font-margin: 0 @indent__s;
  191. @breadcrumbs-current__color: @color-gray-middle5;
  192. @breadcrumbs-link__color: @link__color;
  193. @breadcrumbs-link__visited__color: @breadcrumbs-link__color;
  194. @breadcrumbs-link__hover__color: @breadcrumbs-link__color;
  195. @breadcrumbs-link__active__color: @breadcrumbs-link__color;
  196. //
  197. // Popups
  198. // ---------------------------------------------
  199. @popup__border: 1px solid @color-gray68;
  200. @popup-title-headings__level: h2;
  201. // Popup icons
  202. @popup-icon-font__size: 16px;
  203. @popup-icon-font__line-height: 16px;
  204. @popup-icon-font__color: @color-gray55;
  205. @popup-icon-font__color-hover: darken(@popup-icon-font__color, 10%);
  206. @popup-icon-font__color-active: @popup-icon-font__color-hover;
  207. // Window overlay
  208. @overlay__background: @color-gray55;
  209. @overlay__opacity: .7;
  210. @overlay__opacity-old: 70;
  211. @gallery-thumb-border-color-active: @active__color;
  212. // Checkout tooltip icon
  213. @checkout-tooltip-icon__font-size: 21px;
  214. // Checkout Payment Option icon
  215. @checkout-payment-option-title-icon__font-size: 14px;
  216. @checkout-payment-option-title-icon__line-height: 16px;
  217. @checkout-payment-option-title-icon__margin: 0 0 0 @indent__s;
  218. // Checkout Sidebar Shipping Information
  219. @checkout-sidebar-shipping-information-edit-icon__content: @icon-edit;
  220. @checkout-sidebar-shipping-information-edit-icon__font-size: 18px;
  221. @checkout-sidebar-shipping-information-edit-icon__line-height: 20px;
  222. @checkout-sidebar-shipping-information-edit-icon__top: @indent__s;
  223. // Checkout
  224. @checkout-sidebar__columns: 8;
  225. //
  226. // Footer
  227. // ---------------------------------------------
  228. @copyright__background-color: @color-gray-middle4;