@eeacms/volto-eea-design-system 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/.coverage.babel.config.js +13 -0
  2. package/.github/ISSUE_TEMPLATE/bug_report.md +50 -0
  3. package/.github/ISSUE_TEMPLATE/feature_request.md +50 -0
  4. package/.github/workflows/node.js.yml +59 -0
  5. package/.prettierignore +4 -0
  6. package/.project.eslintrc.js +45 -0
  7. package/.release-it.json +17 -0
  8. package/.storybook/manager.js +15 -0
  9. package/CHANGELOG.md +1025 -0
  10. package/DEVELOP.md +51 -0
  11. package/LICENSE.md +9 -0
  12. package/README.md +196 -0
  13. package/bootstrap +41 -0
  14. package/cypress.json +17 -0
  15. package/jest-addon.config.js +36 -0
  16. package/locales/volto.pot +0 -0
  17. package/mockups/README.md +1 -0
  18. package/package.json +49 -0
  19. package/razzle.extend.js +23 -0
  20. package/src/helpers/index.js +2 -0
  21. package/src/helpers/useClickOutside.js +30 -0
  22. package/src/helpers/usePrevious.js +9 -0
  23. package/src/i18n.js +180 -0
  24. package/src/index.js +6 -0
  25. package/src/semantic.less +262 -0
  26. package/src/ui/Avatar/Avatar.jsx +32 -0
  27. package/src/ui/Avatar/Avatar.stories.jsx +61 -0
  28. package/src/ui/AvatarGrid/AvatarGrid.jsx +49 -0
  29. package/src/ui/AvatarGrid/AvatarGrid.stories.jsx +66 -0
  30. package/src/ui/Banner/Banner.jsx +59 -0
  31. package/src/ui/Banner/Banner.stories.jsx +121 -0
  32. package/src/ui/Blockquote/Blockquote.jsx +16 -0
  33. package/src/ui/Blockquote/Blockquote.stories.jsx +48 -0
  34. package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx +76 -0
  35. package/src/ui/Breadcrumbs/Breadcrumbs.jsx +67 -0
  36. package/src/ui/Breadcrumbs/Breadcrumbs.stories.jsx +30 -0
  37. package/src/ui/Button/Button.stories.jsx +169 -0
  38. package/src/ui/Divider/Divider.jsx +7 -0
  39. package/src/ui/Footer/Contact.jsx +28 -0
  40. package/src/ui/Footer/Footer.jsx +52 -0
  41. package/src/ui/Footer/FooterActions.jsx +22 -0
  42. package/src/ui/Footer/FooterHeader.jsx +10 -0
  43. package/src/ui/Footer/FooterSites.jsx +33 -0
  44. package/src/ui/Footer/Social.jsx +25 -0
  45. package/src/ui/Footer/SubFooter.jsx +9 -0
  46. package/src/ui/FormFieldWrapper/FormFieldWrapper.jsx +51 -0
  47. package/src/ui/Header/Header.jsx +224 -0
  48. package/src/ui/Header/HeaderMenuPopUp.js +79 -0
  49. package/src/ui/Header/HeaderSearchPopUp.js +33 -0
  50. package/src/ui/InpageNavigation/InpageNavigation.jsx +61 -0
  51. package/src/ui/InpageNavigation/InpageNavigation.stories.jsx +166 -0
  52. package/src/ui/KeyContent/KeyContent.jsx +22 -0
  53. package/src/ui/KeyContent/KeyContent.stories.jsx +62 -0
  54. package/src/ui/Loader/Loader.stories.jsx +45 -0
  55. package/src/ui/Logo/Logo.jsx +31 -0
  56. package/src/ui/Popup/Popup.stories.jsx +97 -0
  57. package/src/ui/PublicationCard/PublicationCard.jsx +27 -0
  58. package/src/ui/PublicationCard/PublicationCard.stories.jsx +69 -0
  59. package/src/ui/Pullquote/Pullquote.jsx +44 -0
  60. package/src/ui/Pullquote/Pullquote.stories.jsx +101 -0
  61. package/src/ui/RelatedContent/RelatedContent.jsx +90 -0
  62. package/src/ui/RelatedContent/RelatedContent.stories.jsx +80 -0
  63. package/src/ui/Segment/Segment.stories.jsx +163 -0
  64. package/src/ui/Tag/Tag.jsx +13 -0
  65. package/src/ui/Tag/Tag.stories.jsx +21 -0
  66. package/src/ui/TagList/TagList.jsx +23 -0
  67. package/src/ui/TagList/TagList.stories.jsx +63 -0
  68. package/src/ui/Testimonial/Testimonial.jsx +53 -0
  69. package/src/ui/Testimonial/Testimonial.stories.jsx +51 -0
  70. package/src/ui/Timeline/Timeline.jsx +44 -0
  71. package/src/ui/Timeline/Timeline.stories.jsx +322 -0
  72. package/src/ui/index.js +31 -0
  73. package/templates/eea.hbs +50 -0
  74. package/theme/theme.config +122 -0
  75. package/theme/theme.less +64 -0
  76. package/theme/themes/eea/assets/images/EEA_Logo_Vertical.png +0 -0
  77. package/theme/themes/eea/assets/images/Footer/EEALogo.png +0 -0
  78. package/theme/themes/eea/assets/images/Footer/EULogo.png +0 -0
  79. package/theme/themes/eea/assets/images/Footer/Extras/Logo1.png +0 -0
  80. package/theme/themes/eea/assets/images/Footer/Extras/Logo10.png +0 -0
  81. package/theme/themes/eea/assets/images/Footer/Extras/Logo2.png +0 -0
  82. package/theme/themes/eea/assets/images/Footer/Extras/Logo3.png +0 -0
  83. package/theme/themes/eea/assets/images/Footer/Extras/Logo4.png +0 -0
  84. package/theme/themes/eea/assets/images/Footer/Extras/Logo5.png +0 -0
  85. package/theme/themes/eea/assets/images/Footer/Extras/Logo6.png +0 -0
  86. package/theme/themes/eea/assets/images/Footer/Extras/Logo7.png +0 -0
  87. package/theme/themes/eea/assets/images/Footer/Extras/Logo8.png +0 -0
  88. package/theme/themes/eea/assets/images/Footer/Extras/Logo9.png +0 -0
  89. package/theme/themes/eea/assets/images/Footer/Extras/abstract-visual.svg +32 -0
  90. package/theme/themes/eea/assets/images/Footer/Extras/footervisual.svg +1755 -0
  91. package/theme/themes/eea/assets/images/Footer/Vector1.png +0 -0
  92. package/theme/themes/eea/assets/images/Footer/Vector2.png +0 -0
  93. package/theme/themes/eea/assets/images/Header/EeaLogo.png +0 -0
  94. package/theme/themes/eea/assets/images/Header/Vector.png +0 -0
  95. package/theme/themes/eea/assets/images/Header/close-line.svg +1 -0
  96. package/theme/themes/eea/assets/images/Header/close.png +0 -0
  97. package/theme/themes/eea/assets/images/Header/down-arrow.png +0 -0
  98. package/theme/themes/eea/assets/images/Header/eea-logo.svg +14 -0
  99. package/theme/themes/eea/assets/images/Header/eea.png +0 -0
  100. package/theme/themes/eea/assets/images/Header/eeaIcon.png +0 -0
  101. package/theme/themes/eea/assets/images/Header/global-line.svg +1 -0
  102. package/theme/themes/eea/assets/images/Header/globeIcon.png +0 -0
  103. package/theme/themes/eea/assets/images/Header/hamburgerMenuIcon.png +0 -0
  104. package/theme/themes/eea/assets/images/Header/menu-left-arrow.svg +3 -0
  105. package/theme/themes/eea/assets/images/Header/menu-line.svg +1 -0
  106. package/theme/themes/eea/assets/images/Header/search-line.svg +1 -0
  107. package/theme/themes/eea/assets/images/Header/search.png +0 -0
  108. package/theme/themes/eea/assets/images/Header/searchIcon.png +0 -0
  109. package/theme/themes/eea/assets/images/arrow-down.svg +10 -0
  110. package/theme/themes/eea/assets/images/avatar.png +0 -0
  111. package/theme/themes/eea/assets/images/banner.png +0 -0
  112. package/theme/themes/eea/assets/images/eea-logo.png +0 -0
  113. package/theme/themes/eea/assets/images/eea_icon.png +0 -0
  114. package/theme/themes/eea/assets/images/europe-flag.svg +4 -0
  115. package/theme/themes/eea/assets/images/home-icon.svg +3 -0
  116. package/theme/themes/eea/assets/images/loaderImage.png +0 -0
  117. package/theme/themes/eea/assets/images/mega-menu-arrow.svg +3 -0
  118. package/theme/themes/eea/assets/logo/EEA-Logo-White-2.svg +9 -0
  119. package/theme/themes/eea/assets/logo/EEA-Logo-white.svg +9 -0
  120. package/theme/themes/eea/assets/logo/EIONETLogo.png +0 -0
  121. package/theme/themes/eea/assets/logo/bise.svg +47 -0
  122. package/theme/themes/eea/assets/logo/cca.svg +20 -0
  123. package/theme/themes/eea/assets/logo/copernicus.svg +62 -0
  124. package/theme/themes/eea/assets/logo/energy.svg +77 -0
  125. package/theme/themes/eea/assets/logo/fise.svg +37 -0
  126. package/theme/themes/eea/assets/logo/freshwater.svg +48 -0
  127. package/theme/themes/eea/assets/logo/industry.svg +40 -0
  128. package/theme/themes/eea/assets/logo/insitu.svg +43 -0
  129. package/theme/themes/eea/assets/logo/ipchem.svg +23 -0
  130. package/theme/themes/eea/assets/logo/marine.svg +63 -0
  131. package/theme/themes/eea/collections/breadcrumb.overrides +44 -0
  132. package/theme/themes/eea/collections/breadcrumb.variables +49 -0
  133. package/theme/themes/eea/collections/form.overrides +56 -0
  134. package/theme/themes/eea/collections/form.variables +211 -0
  135. package/theme/themes/eea/collections/grid.overrides +17 -0
  136. package/theme/themes/eea/collections/grid.variables +103 -0
  137. package/theme/themes/eea/collections/menu.overrides +84 -0
  138. package/theme/themes/eea/collections/menu.variables +471 -0
  139. package/theme/themes/eea/collections/message.overrides +34 -0
  140. package/theme/themes/eea/collections/message.variables +142 -0
  141. package/theme/themes/eea/collections/table.overrides +30 -0
  142. package/theme/themes/eea/collections/table.variables +249 -0
  143. package/theme/themes/eea/definitions/elements/icon.less +499 -0
  144. package/theme/themes/eea/elements/button.overrides +199 -0
  145. package/theme/themes/eea/elements/button.variables +405 -0
  146. package/theme/themes/eea/elements/container.overrides +98 -0
  147. package/theme/themes/eea/elements/container.variables +66 -0
  148. package/theme/themes/eea/elements/divider.overrides +17 -0
  149. package/theme/themes/eea/elements/divider.variables +53 -0
  150. package/theme/themes/eea/elements/flag.overrides +1235 -0
  151. package/theme/themes/eea/elements/flag.variables +13 -0
  152. package/theme/themes/eea/elements/header.overrides +205 -0
  153. package/theme/themes/eea/elements/header.variables +151 -0
  154. package/theme/themes/eea/elements/icon.overrides +5589 -0
  155. package/theme/themes/eea/elements/icon.variables +95 -0
  156. package/theme/themes/eea/elements/image.overrides +3 -0
  157. package/theme/themes/eea/elements/image.variables +44 -0
  158. package/theme/themes/eea/elements/input.overrides +83 -0
  159. package/theme/themes/eea/elements/input.variables +104 -0
  160. package/theme/themes/eea/elements/label.overrides +49 -0
  161. package/theme/themes/eea/elements/label.variables +267 -0
  162. package/theme/themes/eea/elements/list.overrides +28 -0
  163. package/theme/themes/eea/elements/list.variables +233 -0
  164. package/theme/themes/eea/elements/loader.overrides +3 -0
  165. package/theme/themes/eea/elements/loader.variables +73 -0
  166. package/theme/themes/eea/elements/placeholder.overrides +3 -0
  167. package/theme/themes/eea/elements/placeholder.variables +55 -0
  168. package/theme/themes/eea/elements/rail.overrides +3 -0
  169. package/theme/themes/eea/elements/rail.variables +34 -0
  170. package/theme/themes/eea/elements/reveal.overrides +3 -0
  171. package/theme/themes/eea/elements/reveal.variables +18 -0
  172. package/theme/themes/eea/elements/segment.overrides +8 -0
  173. package/theme/themes/eea/elements/segment.variables +154 -0
  174. package/theme/themes/eea/elements/step.overrides +18 -0
  175. package/theme/themes/eea/elements/step.variables +130 -0
  176. package/theme/themes/eea/extras/avatar.less +97 -0
  177. package/theme/themes/eea/extras/avatar.variables +34 -0
  178. package/theme/themes/eea/extras/avatarGrid.less +43 -0
  179. package/theme/themes/eea/extras/avatarGrid.variables +20 -0
  180. package/theme/themes/eea/extras/banner.less +213 -0
  181. package/theme/themes/eea/extras/banner.variables +77 -0
  182. package/theme/themes/eea/extras/blockquote.less +89 -0
  183. package/theme/themes/eea/extras/blockquote.variables +35 -0
  184. package/theme/themes/eea/extras/custom.overrides +0 -0
  185. package/theme/themes/eea/extras/custom.variables +0 -0
  186. package/theme/themes/eea/extras/divider.less +14 -0
  187. package/theme/themes/eea/extras/divider.variables +9 -0
  188. package/theme/themes/eea/extras/footer.less +273 -0
  189. package/theme/themes/eea/extras/footer.variables +109 -0
  190. package/theme/themes/eea/extras/header.less +691 -0
  191. package/theme/themes/eea/extras/header.variables +149 -0
  192. package/theme/themes/eea/extras/inpageNavigation.less +57 -0
  193. package/theme/themes/eea/extras/inpageNavigation.variables +30 -0
  194. package/theme/themes/eea/extras/keyContent.less +36 -0
  195. package/theme/themes/eea/extras/keyContent.variables +18 -0
  196. package/theme/themes/eea/extras/main.overrides +31 -0
  197. package/theme/themes/eea/extras/main.variables +33 -0
  198. package/theme/themes/eea/extras/publicationCard.less +62 -0
  199. package/theme/themes/eea/extras/publicationCard.variables +24 -0
  200. package/theme/themes/eea/extras/pullquote.less +76 -0
  201. package/theme/themes/eea/extras/pullquote.variables +34 -0
  202. package/theme/themes/eea/extras/select.overrides +0 -0
  203. package/theme/themes/eea/extras/select.variables +0 -0
  204. package/theme/themes/eea/extras/tag.less +37 -0
  205. package/theme/themes/eea/extras/tag.variables +22 -0
  206. package/theme/themes/eea/extras/tagList.less +50 -0
  207. package/theme/themes/eea/extras/tagList.variables +13 -0
  208. package/theme/themes/eea/extras/testimonial.less +28 -0
  209. package/theme/themes/eea/extras/testimonial.variables +13 -0
  210. package/theme/themes/eea/extras/timeline.less +114 -0
  211. package/theme/themes/eea/extras/timeline.variables +40 -0
  212. package/theme/themes/eea/globals/reset.overrides +454 -0
  213. package/theme/themes/eea/globals/reset.variables +6 -0
  214. package/theme/themes/eea/globals/site.overrides +27 -0
  215. package/theme/themes/eea/globals/site.variables +1135 -0
  216. package/theme/themes/eea/modules/accordion.overrides +83 -0
  217. package/theme/themes/eea/modules/accordion.variables +114 -0
  218. package/theme/themes/eea/modules/chatroom.overrides +3 -0
  219. package/theme/themes/eea/modules/chatroom.variables +3 -0
  220. package/theme/themes/eea/modules/checkbox.overrides +67 -0
  221. package/theme/themes/eea/modules/checkbox.variables +194 -0
  222. package/theme/themes/eea/modules/dimmer.overrides +3 -0
  223. package/theme/themes/eea/modules/dimmer.variables +58 -0
  224. package/theme/themes/eea/modules/dropdown.overrides +53 -0
  225. package/theme/themes/eea/modules/dropdown.variables +390 -0
  226. package/theme/themes/eea/modules/embed.overrides +3 -0
  227. package/theme/themes/eea/modules/embed.variables +53 -0
  228. package/theme/themes/eea/modules/modal.overrides +3 -0
  229. package/theme/themes/eea/modules/modal.variables +193 -0
  230. package/theme/themes/eea/modules/nag.overrides +3 -0
  231. package/theme/themes/eea/modules/nag.variables +74 -0
  232. package/theme/themes/eea/modules/popup.overrides +83 -0
  233. package/theme/themes/eea/modules/popup.variables +153 -0
  234. package/theme/themes/eea/modules/progress.overrides +3 -0
  235. package/theme/themes/eea/modules/progress.variables +113 -0
  236. package/theme/themes/eea/modules/rating.overrides +74 -0
  237. package/theme/themes/eea/modules/rating.variables +103 -0
  238. package/theme/themes/eea/modules/search.overrides +3 -0
  239. package/theme/themes/eea/modules/search.variables +163 -0
  240. package/theme/themes/eea/modules/shape.overrides +3 -0
  241. package/theme/themes/eea/modules/shape.variables +40 -0
  242. package/theme/themes/eea/modules/sidebar.overrides +3 -0
  243. package/theme/themes/eea/modules/sidebar.variables +45 -0
  244. package/theme/themes/eea/modules/sticky.overrides +3 -0
  245. package/theme/themes/eea/modules/sticky.variables +7 -0
  246. package/theme/themes/eea/modules/tab.overrides +13 -0
  247. package/theme/themes/eea/modules/tab.variables +17 -0
  248. package/theme/themes/eea/modules/transition.overrides +1087 -0
  249. package/theme/themes/eea/modules/transition.variables +10 -0
  250. package/theme/themes/eea/modules/video.overrides +3 -0
  251. package/theme/themes/eea/modules/video.variables +16 -0
  252. package/theme/themes/eea/views/ad.overrides +3 -0
  253. package/theme/themes/eea/views/ad.variables +13 -0
  254. package/theme/themes/eea/views/card.overrides +73 -0
  255. package/theme/themes/eea/views/card.variables +237 -0
  256. package/theme/themes/eea/views/comment.overrides +3 -0
  257. package/theme/themes/eea/views/comment.variables +98 -0
  258. package/theme/themes/eea/views/feed.overrides +3 -0
  259. package/theme/themes/eea/views/feed.variables +141 -0
  260. package/theme/themes/eea/views/item.overrides +8 -0
  261. package/theme/themes/eea/views/item.variables +157 -0
  262. package/theme/themes/eea/views/statistic.overrides +19 -0
  263. package/theme/themes/eea/views/statistic.variables +105 -0
@@ -0,0 +1,390 @@
1
+ /*******************************
2
+ Dropdown
3
+ *******************************/
4
+ @dropdownTextColor: @textColor;
5
+
6
+ // Pastanaga variable
7
+ @inputFontWeight: normal;
8
+
9
+ /*-------------------
10
+ Element
11
+ --------------------*/
12
+
13
+ @transition:
14
+ box-shadow @defaultDuration @defaultEasing,
15
+ width @defaultDuration @defaultEasing
16
+ ;
17
+ @borderRadius: @defaultBorderRadius;
18
+ @borderWidth: @1px;
19
+ @border: @borderWidth solid @midGray;
20
+
21
+ @raisedShadow: 0px 2px 3px 0px @borderColor;
22
+
23
+ /*-------------------
24
+ Content
25
+ --------------------*/
26
+
27
+ /* Icon */
28
+ @dropdownIconContent: '\f078';
29
+ @dropdownIconSize: 0;
30
+ @dropdownIconMargin: 0;
31
+
32
+ /* Current Text */
33
+ @textTransition: none;
34
+
35
+ /* Menu */
36
+ @menuBackground: #FFFFFF;
37
+ @menuMargin: 0em;
38
+ @menuPadding: 0em 0em;
39
+ @menuTop: 100%;
40
+ @menuTextAlign: left;
41
+
42
+ @menuBorderWidth: 1px;
43
+ @menuBorderColor: @borderColor;
44
+ @menuBorder: @menuBorderWidth solid @menuBorderColor;
45
+ @menuBoxShadow: @raisedShadow;
46
+ @menuBorderRadius: @borderRadius;
47
+ @menuTransition: opacity @defaultDuration @defaultEasing;
48
+ @menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")";
49
+ @menuZIndex: 11;
50
+
51
+ /* Text */
52
+ @textLineHeight: 1em;
53
+ @textLineHeightOffset: (@textLineHeight - 1em);
54
+ @textCursorSpacing: 1px;
55
+
56
+ /* Menu Item */
57
+ @itemFontSize: @medium;
58
+ @itemTextAlign: left;
59
+ @itemBorder: none;
60
+ @itemHeight: auto;
61
+ @itemDivider: none;
62
+ @itemColor: @dropdownTextColor;
63
+ @itemVerticalPadding: @mini;
64
+ @itemHorizontalPadding: @large;
65
+ @itemPadding: @itemVerticalPadding @itemHorizontalPadding;
66
+ @itemFontWeight: 300;
67
+ @itemLineHeight: 1em;
68
+ @itemLineHeightOffset: (@itemLineHeight - 1em);
69
+ @itemTextTransform: none;
70
+ @itemBoxShadow: none;
71
+
72
+ /* Sub Menu */
73
+ @subMenuTop: 0%;
74
+ @subMenuLeft: 100%;
75
+ @subMenuRight: auto;
76
+ @subMenuDistanceAway: -0.5em;
77
+ @subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
78
+ @subMenuBorderRadius: @borderRadius;
79
+ @subMenuZIndex: 21;
80
+
81
+ /* Menu Header */
82
+ @menuHeaderColor: @darkTextColor;
83
+ @menuHeaderFontSize: @relative11px;
84
+ @menuHeaderFontWeight: @bold;
85
+ @menuHeaderTextTransform: uppercase;
86
+ @menuHeaderMargin: 1rem 0rem 0.75rem;
87
+ @menuHeaderPadding: 0em @itemHorizontalPadding;
88
+
89
+ /* Menu Divider */
90
+ @menuDividerMargin: 0.5em 0em;
91
+ @menuDividerColor: @internalBorderColor;
92
+ @menuDividerSize: 1px;
93
+ @menuDividerBorder: @menuDividerSize solid @menuDividerColor;
94
+
95
+ /* Menu Input */
96
+ @menuInputMargin: @large @mini;
97
+ @menuInputMinWidth: 10rem;
98
+ @menuInputVerticalPadding: 0.5em;
99
+ @menuInputHorizontalPadding: @inputHorizontalPadding;
100
+ @menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
101
+
102
+ /* Menu Image */
103
+ @menuImageMaxHeight: 2em;
104
+ @menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2;
105
+
106
+ /* Item Sub-Element */
107
+ @itemElementFloat: none;
108
+ @itemElementDistance: @mini;
109
+
110
+ /* Sub-Menu Dropdown Icon */
111
+ @itemDropdownIconDistance: 1em;
112
+ @itemDropdownIconFloat: right;
113
+ @itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance;
114
+
115
+ /* Description */
116
+ @itemDescriptionFloat: right;
117
+ @itemDescriptionMargin: 0em 0em 0em 1em;
118
+ @itemDescriptionColor: @lightTextColor;
119
+
120
+ /* Message */
121
+ @messagePadding: @selectionItemPadding;
122
+ @messageFontWeight: @normal;
123
+ @messageColor: @unselectedTextColor;
124
+
125
+ /* Floated Content */
126
+ @floatedDistance: 1em;
127
+
128
+ /*-------------------
129
+ Types
130
+ --------------------*/
131
+
132
+ /*------------
133
+ Selection
134
+ --------------*/
135
+
136
+ @selectionMinWidth: 14em;
137
+ @selectionVerticalPadding: @inputVerticalPadding;
138
+ @selectionHorizontalPadding: @inputHorizontalPadding;
139
+ @selectionBorderEmWidth: @relative1px;
140
+ @selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
141
+ @selectionBackground: @inputBackground;
142
+ @selectionDisplay: inline-block;
143
+ @selectionIconDistance: @inputHorizontalPadding + @glyphWidth;
144
+ @selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
145
+ @selectionZIndex: 10;
146
+
147
+ @selectionItemDivider: none;
148
+ @selectionMessagePadding: @selectionItemPadding;
149
+
150
+ /* <select> */
151
+ @selectBorder: 1px solid @borderColor;
152
+ @selectPadding: 0.5em;
153
+ @selectVisibility: visible;
154
+ @selectHeight: 38px;
155
+
156
+ @selectionTextColor: @textColor;
157
+
158
+ @selectionTextUnderlayIconOpacity: @disabledOpacity;
159
+ @selectionTextUnderlayColor: @inputPlaceholderFocusColor;
160
+
161
+ @selectionBoxShadow: none;
162
+ @selectionBorderColor: @borderColor;
163
+ @selectionBorder: none;
164
+ @selectionBorderRadius: @borderRadius;
165
+
166
+ @selectionIconOpacity: 0.8;
167
+ @selectionIconZIndex: 3;
168
+ @selectionIconHitbox: @selectionVerticalPadding;
169
+ @selectionIconMargin: -@selectionIconHitbox;
170
+ @selectionIconPadding: @selectionIconHitbox / @dropdownIconSize;
171
+ @selectionIconTransition: opacity @defaultDuration @defaultEasing;
172
+
173
+ @selectionMenuBorderRadius: 0;
174
+ @selectionMenuBoxShadow: @raisedShadow;
175
+ @selectionMenuItemBoxShadow: none;
176
+
177
+ @selectionItemHorizontalPadding: @itemHorizontalPadding;
178
+ @selectionItemVerticalPadding: @itemVerticalPadding;
179
+ @selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding;
180
+
181
+ @selectionTransition: @transition;
182
+ @selectionMenuTransition: @menuTransition;
183
+
184
+ /* Responsive */
185
+ @selectionMobileMaxItems: 3;
186
+ @selectionTabletMaxItems: 4;
187
+ @selectionComputerMaxItems: 6;
188
+ @selectionWidescreenMaxItems: 8;
189
+
190
+ /* Derived */
191
+ @selectedBorderEMWidth: 0.1em; /* 1px / em size */
192
+ @selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
193
+ @selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems);
194
+ @selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems);
195
+ @selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems);
196
+ @selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems);
197
+
198
+ /* Hover */
199
+ @selectionHoverBorderColor: @selectedBorderColor;
200
+ @selectionHoverBoxShadow: none;
201
+
202
+ /* Focus */
203
+ @selectionFocusBorderColor: @focusedFormMutedBorderColor;
204
+ @selectionFocusBoxShadow: none;
205
+ @selectionFocusMenuBoxShadow: none;
206
+
207
+ /* Visible */
208
+ @selectionVisibleTextFontWeight: @normal;
209
+ @selectionVisibleTextColor: @hoveredTextColor;
210
+
211
+ @selectionVisibleBorderColor: @focusedFormMutedBorderColor;
212
+ @selectionVisibleBoxShadow: none;
213
+ @selectionVisibleMenuBoxShadow: none;
214
+
215
+ /* Visible Hover */
216
+ @selectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
217
+ @selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow;
218
+ @selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
219
+
220
+ @selectionVisibleConnectingBorder: 0em;
221
+ @selectionVisibleIconOpacity: 1;
222
+
223
+ @selectionIconPosition: static;
224
+ @selectionIconPadding: 0.625rem 0;
225
+ @selectionIconFontSize: 1rem;
226
+
227
+ /*--------------
228
+ Search
229
+ --------------*/
230
+
231
+ @searchMinWidth: '';
232
+
233
+ /* Search Selection */
234
+ @searchSelectionLineHeight: @inputLineHeight;
235
+ @searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
236
+ @searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
237
+ @searchSelectionHorizontalPadding: @selectionHorizontalPadding;
238
+ @searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding;
239
+
240
+ @searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
241
+ @searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
242
+ @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
243
+ @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
244
+
245
+ /* Inline */
246
+ @inlineIconMargin: 0em @relative7px 0em @relative3px;
247
+ @inlineTextColor: inherit;
248
+ @inlineTextFontWeight: @bold;
249
+ @inlineMenuDistance: @relative3px;
250
+ @inlineMenuBorderRadius: @borderRadius;
251
+
252
+
253
+ /*--------------
254
+ Multiple
255
+ --------------*/
256
+
257
+ /* Split Actual Padding Between Child and Parent (allows for label spacing) */
258
+ @multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
259
+ @multipleSelectionLeftPadding: @relative5px;
260
+ @multipleSelectionRightPadding: @selectionIconDistance;
261
+ @multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
262
+
263
+ /* Child Elements */
264
+ @multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
265
+ @multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding);
266
+ @multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin;
267
+ @multipleSelectionChildLineHeight: @relative17px;
268
+ @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
269
+
270
+ /* Dropdown Icon */
271
+ @multipleSelectionDropdownIconMargin: '';
272
+ @multipleSelectionDropdownIconPadding: '';
273
+
274
+ @multipleSelectionSearchAfterLabelDistance: @relative2px;
275
+
276
+ /* Selection Label */
277
+ @labelSize: @relativeMedium;
278
+ @labelHorizontalMargin: @4px;
279
+ @labelVerticalMargin: @2px;
280
+ @labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0em;
281
+ @labelBorderWidth: 1px;
282
+ @labelBoxShadow: 0px 0px 0px @labelBorderWidth @borderColor inset;
283
+
284
+ @labelVerticalPadding: @relative5px;
285
+ @labelHorizontalPadding: @relativeMini;
286
+ @labelPadding: @labelVerticalPadding @labelHorizontalPadding;
287
+
288
+ /*-------------------
289
+ States
290
+ --------------------*/
291
+
292
+ /* Hovered */
293
+ @hoveredItemBackground: @transparentBlack;
294
+ @hoveredItemColor: @dropdownTextColor;
295
+ @hoveredZIndex: @menuZIndex + 2;
296
+
297
+ /* Default Text */
298
+ @defaultTextColor: @inputPlaceholderColor;
299
+ @defaultTextFocusColor: @inputPlaceholderFocusColor;
300
+
301
+ /* Loading */
302
+ @loadingZIndex: -1;
303
+
304
+ /* Active Menu Item */
305
+ @activeItemZIndex: @menuZIndex + 1;
306
+ @activeItemBackground: transparent;
307
+ @activeItemBoxShadow: none;
308
+ @activeItemFontWeight: 300;
309
+ @activeItemColor: @selectedTextColor;
310
+
311
+ /* Selected */
312
+ @selectedBackground: none;
313
+ @selectedColor: @secondaryColor;
314
+
315
+ /* Error */
316
+ @errorLabelBackground: #EACBCB;
317
+ @errorLabelColor: @errorTextColor;
318
+
319
+ @errorItemTextColor: @errorTextColor;
320
+ @errorItemHoverBackground: #FFF2F2;
321
+ @errorItemActiveBackground: #FDCFCF;
322
+
323
+ /* Clearable */
324
+ @clearableIconOpacity: 0.8;
325
+ @clearableIconActiveOpacity: 1;
326
+
327
+ /*-------------------
328
+ Variations
329
+ --------------------*/
330
+
331
+ /* Scrolling */
332
+ @scrollingMenuWidth: 100%;
333
+ @scrollingMenuItemBorder: none;
334
+ @scrollingMenuRightItemPadding: ~"calc("(@itemHorizontalPadding)~" + "(@scrollbarWidth)~")";
335
+
336
+ @scrollingMobileMaxItems: 4;
337
+ @scrollingTabletMaxItems: 6;
338
+ @scrollingComputerMaxItems: 8;
339
+ @scrollingWidescreenMaxItems: 12;
340
+
341
+ @scrollingBorderEMWidth: 0em; /* 0px / em size */
342
+ @scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth;
343
+ @scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
344
+ @scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
345
+ @scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
346
+ @scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems);
347
+
348
+ /* Upward */
349
+ @upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
350
+ @upwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
351
+ @upwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
352
+ @upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;
353
+ @upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
354
+ @upwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
355
+ @upwardSelectionActiveHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
356
+ @upwardSelectionActiveHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
357
+
358
+ /* Flyout Direction */
359
+ @leftMenuDropdownIconFloat: left;
360
+ @leftMenuDropdownIconMargin: @itemLineHeightOffset 0em 0em 0em;
361
+
362
+ /* Left */
363
+ @leftSubMenuBorderRadius: @borderRadius;
364
+ @leftSubMenuMargin: 0em @subMenuDistanceAway 0em 0em;
365
+
366
+ /* Simple */
367
+ @simpleTransitionDuration: @defaultDuration;
368
+ @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
369
+
370
+ /* Floating */
371
+ @floatingMenuDistance: 0.5em;
372
+ @floatingMenuBoxShadow: @floatingShadow;
373
+ @floatingMenuBorderRadius: @borderRadius;
374
+
375
+ /* Pointing */
376
+ @pointingArrowOffset: -(@pointingArrowSize / 2);
377
+ @pointingArrowDistanceFromEdge: 1em;
378
+
379
+ @pointingArrowBackground: @white;
380
+ @pointingArrowZIndex: 2;
381
+ @pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
382
+ @pointingArrowSize: @relative7px;
383
+
384
+ @pointingMenuDistance: @mini;
385
+ @pointingMenuBorderRadius: @borderRadius;
386
+ @pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
387
+
388
+ /* Pointing Upward */
389
+ @pointingUpwardMenuBorderRadius: @borderRadius;
390
+ @pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px 0px @menuBorderColor;
@@ -0,0 +1,3 @@
1
+ /*******************************
2
+ Video Overrides
3
+ *******************************/
@@ -0,0 +1,53 @@
1
+ /*******************************
2
+ Video
3
+ *******************************/
4
+
5
+ /*-------------------
6
+ Element
7
+ --------------------*/
8
+
9
+ /* Simple */
10
+ @background: @lightGrey;
11
+ @transitionDuration: 0.5s;
12
+ @transitionEasing: @defaultEasing;
13
+
14
+ /* Placeholder */
15
+ @placeholderUnderlay: @background;
16
+
17
+ /* Placeholder Overlayed Background */
18
+ @placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
19
+ @placeholderBackgroundOpacity: 0.5;
20
+ @placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
21
+
22
+ /* Icon */
23
+ @iconBackground: @veryStrongTransparentBlack;
24
+ @iconSize: 6rem;
25
+ @iconTransition:
26
+ opacity @transitionDuration @transitionEasing,
27
+ color @transitionDuration @transitionEasing
28
+ ;
29
+ @iconColor: @white;
30
+ @iconShadow:
31
+ 0px 2px 10px rgba(34, 36, 38, 0.2)
32
+ ;
33
+ @iconZIndex: 10;
34
+
35
+ /*-------------------
36
+ States
37
+ --------------------*/
38
+
39
+ /* Hover */
40
+ @hoverPlaceholderBackground: @placeholderBackground;
41
+ @hoverPlaceholderBackgroundOpacity: 1;
42
+ @hoverIconColor: @white;
43
+
44
+
45
+ /*-------------------
46
+ Variations
47
+ --------------------*/
48
+
49
+ /* Aspect Ratios */
50
+ @squareRatio: (1/1) * 100%;
51
+ @widescreenRatio: (9/16) * 100%;
52
+ @ultraWidescreenRatio: (9/21) * 100%;
53
+ @standardRatio: (3/4) * 100%;
@@ -0,0 +1,3 @@
1
+ /*******************************
2
+ Theme Overrides
3
+ *******************************/
@@ -0,0 +1,193 @@
1
+ /*******************************
2
+ Modal
3
+ *******************************/
4
+
5
+ @background: @white;
6
+ @border: none;
7
+ @zIndex: 1001;
8
+ @borderRadius: 0;
9
+ @transformOrigin: 50% 25%;
10
+ @boxShadow:
11
+ 1px 3px 3px 0px rgba(0, 0, 0, 0.2),
12
+ 1px 3px 15px 2px rgba(0, 0, 0, 0.2)
13
+ ;
14
+
15
+ /* Close Icon */
16
+ @closeOpacity: 0.8;
17
+ @closeSize: 1.25em;
18
+ @closeColor: @black;
19
+
20
+ @closeHitbox: 2.25rem;
21
+ @closeDistance: 0.25rem;
22
+ @closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
23
+ @closePadding: @closeHitBoxOffset 0rem 0rem 0rem;
24
+ @closeTop: 11px;
25
+ @closeRight: 8px;
26
+
27
+ /* Header */
28
+ @headerMargin: 0em;
29
+ @headerVerticalPadding: 1.25rem;
30
+ @headerHorizontalPadding: 1.5rem;
31
+ @headerPadding: @headerVerticalPadding @headerHorizontalPadding;
32
+ @headerBackground: @white;
33
+ @headerColor: @darkTextColor;
34
+ @headerFontSize: 1.3rem;
35
+ @headerBoxShadow: none;
36
+ @headerFontWeight: @bold;
37
+ @headerFontFamily: @headerFont;
38
+ @headerBorder: none;
39
+
40
+ /* Content */
41
+ @contentFontSize: 1em;
42
+ @contentPadding: 1.5rem;
43
+ @contentLineHeight: 1.4;
44
+ @contentBackground: #FFFFFF;
45
+
46
+ /* Image / Description */
47
+ @imageWidth: '';
48
+ @imageIconSize: 8rem;
49
+ @imageVerticalAlign: top;
50
+
51
+ @descriptionDistance: 2em;
52
+ @descriptionMinWidth: '';
53
+ @descriptionWidth: auto;
54
+ @descriptionVerticalAlign: top;
55
+
56
+ /* Modal Actions */
57
+ @actionBorder: none;
58
+ @actionBackground: @white;
59
+ @actionPadding: 1rem 1rem;
60
+ @actionAlign: right;
61
+
62
+ @buttonDistance: 0.75em;
63
+
64
+ /* Inner Close Position (Tablet/Mobile) */
65
+ @innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
66
+ @innerCloseRight: 1rem;
67
+ @innerCloseColor: @textColor;
68
+
69
+ /* Mobile Positions */
70
+ @mobileHeaderPadding: 0.75rem 1rem;
71
+ @mobileContentPadding: 1rem;
72
+ @mobileImagePadding: 0rem 0rem 1rem;
73
+ @mobileDescriptionPadding: 1rem 0rem ;
74
+ @mobileButtonDistance: 1rem;
75
+ @mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
76
+ @mobileImageIconSize: 5rem;
77
+ @mobileCloseTop: 0.5rem;
78
+ @mobileCloseRight: 0.5rem;
79
+
80
+ /* Responsive Widths */
81
+ @mobileWidth: 95%;
82
+ @tabletWidth: 88%;
83
+ @computerWidth: 850px;
84
+ @largeMonitorWidth: 900px;
85
+ @widescreenMonitorWidth: 950px;
86
+
87
+ @mobileMargin: 0;
88
+ @tabletMargin: 0;
89
+ @computerMargin: 0;
90
+ @largeMonitorMargin: 0;
91
+ @widescreenMonitorMargin: 0;
92
+
93
+ @fullScreenWidth: 95%;
94
+ @fullScreenOffset: (100% - @fullScreenWidth) / 2;
95
+ @fullScreenMargin: 1em auto;
96
+
97
+ /* Coupling */
98
+ @invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
99
+
100
+ /*-------------------
101
+ States
102
+ --------------------*/
103
+
104
+ @loadingZIndex: -1;
105
+
106
+ /*-------------------
107
+ Types
108
+ --------------------*/
109
+
110
+ /* Basic */
111
+ @basicModalHeaderColor: @white;
112
+ @basicModalColor: @white;
113
+ @basicModalCloseTop: 1rem;
114
+ @basicModalCloseRight: 1.5rem;
115
+ @basicInnerCloseColor: @white;
116
+
117
+ @basicInvertedModalColor: @textColor;
118
+ @basicInvertedModalHeaderColor: @darkTextColor;
119
+
120
+ /* Top Aligned */
121
+ @topAlignedMargin: 5vh;
122
+ @mobileTopAlignedMargin: 1rem;
123
+
124
+ /* Scrolling Margin */
125
+ @scrollingMargin: 3.5rem;
126
+ @mobileScrollingMargin: 1rem;
127
+
128
+ /* Scrolling Content */
129
+ @scrollingContentMaxHeight: calc(80vh - 10em);
130
+
131
+ /*-------------------
132
+ Variations
133
+ --------------------*/
134
+
135
+ /* Size Widths */
136
+ @miniRatio: 0.4;
137
+ @tinyRatio: 0.6;
138
+ @smallRatio: 0.8;
139
+ @largeRatio: 1.2;
140
+
141
+ /* Derived Responsive Sizes */
142
+ @miniHeaderSize: 1.3rem;
143
+ @miniMobileWidth: @mobileWidth;
144
+ @miniTabletWidth: (@tabletWidth * @miniRatio);
145
+ @miniComputerWidth: (@computerWidth * @miniRatio);
146
+ @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
147
+ @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
148
+
149
+ @miniMobileMargin: 0;
150
+ @miniTabletMargin: 0;
151
+ @miniComputerMargin: 0;
152
+ @miniLargeMonitorMargin: 0;
153
+ @miniWidescreenMonitorMargin: 0;
154
+
155
+ @tinyHeaderSize: 1.3rem;
156
+ @tinyMobileWidth: @mobileWidth;
157
+ @tinyTabletWidth: (@tabletWidth * @tinyRatio);
158
+ @tinyComputerWidth: (@computerWidth * @tinyRatio);
159
+ @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
160
+ @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
161
+
162
+ @tinyMobileMargin: 0;
163
+ @tinyTabletMargin: 0;
164
+ @tinyComputerMargin: 0;
165
+ @tinyLargeMonitorMargin: 0;
166
+ @tinyWidescreenMonitorMargin: 0;
167
+
168
+ @smallHeaderSize: 1.3rem;
169
+ @smallMobileWidth: @mobileWidth;
170
+ @smallTabletWidth: (@tabletWidth * @smallRatio);
171
+ @smallComputerWidth: (@computerWidth * @smallRatio);
172
+ @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
173
+ @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
174
+
175
+ @smallMobileMargin: 0;
176
+ @smallTabletMargin: 0;
177
+ @smallComputerMargin: 0;
178
+ @smallLargeMonitorMargin: 0;
179
+ @smallWidescreenMonitorMargin: 0;
180
+
181
+ @largeHeaderSize: 1.6rem;
182
+ @largeMobileWidth: @mobileWidth;
183
+ @largeTabletWidth: @tabletWidth;
184
+ @largeComputerWidth: (@computerWidth * @largeRatio);
185
+ @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
186
+ @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
187
+
188
+
189
+ @largeMobileMargin: 0;
190
+ @largeTabletMargin: 0;
191
+ @largeComputerMargin: 0;
192
+ @largeLargeMonitorMargin: 0;
193
+ @largeWidescreenMonitorMargin: 0;
@@ -0,0 +1,3 @@
1
+ /*******************************
2
+ Theme Overrides
3
+ *******************************/