@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.
- package/.coverage.babel.config.js +13 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +50 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +50 -0
- package/.github/workflows/node.js.yml +59 -0
- package/.prettierignore +4 -0
- package/.project.eslintrc.js +45 -0
- package/.release-it.json +17 -0
- package/.storybook/manager.js +15 -0
- package/CHANGELOG.md +1025 -0
- package/DEVELOP.md +51 -0
- package/LICENSE.md +9 -0
- package/README.md +196 -0
- package/bootstrap +41 -0
- package/cypress.json +17 -0
- package/jest-addon.config.js +36 -0
- package/locales/volto.pot +0 -0
- package/mockups/README.md +1 -0
- package/package.json +49 -0
- package/razzle.extend.js +23 -0
- package/src/helpers/index.js +2 -0
- package/src/helpers/useClickOutside.js +30 -0
- package/src/helpers/usePrevious.js +9 -0
- package/src/i18n.js +180 -0
- package/src/index.js +6 -0
- package/src/semantic.less +262 -0
- package/src/ui/Avatar/Avatar.jsx +32 -0
- package/src/ui/Avatar/Avatar.stories.jsx +61 -0
- package/src/ui/AvatarGrid/AvatarGrid.jsx +49 -0
- package/src/ui/AvatarGrid/AvatarGrid.stories.jsx +66 -0
- package/src/ui/Banner/Banner.jsx +59 -0
- package/src/ui/Banner/Banner.stories.jsx +121 -0
- package/src/ui/Blockquote/Blockquote.jsx +16 -0
- package/src/ui/Blockquote/Blockquote.stories.jsx +48 -0
- package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx +76 -0
- package/src/ui/Breadcrumbs/Breadcrumbs.jsx +67 -0
- package/src/ui/Breadcrumbs/Breadcrumbs.stories.jsx +30 -0
- package/src/ui/Button/Button.stories.jsx +169 -0
- package/src/ui/Divider/Divider.jsx +7 -0
- package/src/ui/Footer/Contact.jsx +28 -0
- package/src/ui/Footer/Footer.jsx +52 -0
- package/src/ui/Footer/FooterActions.jsx +22 -0
- package/src/ui/Footer/FooterHeader.jsx +10 -0
- package/src/ui/Footer/FooterSites.jsx +33 -0
- package/src/ui/Footer/Social.jsx +25 -0
- package/src/ui/Footer/SubFooter.jsx +9 -0
- package/src/ui/FormFieldWrapper/FormFieldWrapper.jsx +51 -0
- package/src/ui/Header/Header.jsx +224 -0
- package/src/ui/Header/HeaderMenuPopUp.js +79 -0
- package/src/ui/Header/HeaderSearchPopUp.js +33 -0
- package/src/ui/InpageNavigation/InpageNavigation.jsx +61 -0
- package/src/ui/InpageNavigation/InpageNavigation.stories.jsx +166 -0
- package/src/ui/KeyContent/KeyContent.jsx +22 -0
- package/src/ui/KeyContent/KeyContent.stories.jsx +62 -0
- package/src/ui/Loader/Loader.stories.jsx +45 -0
- package/src/ui/Logo/Logo.jsx +31 -0
- package/src/ui/Popup/Popup.stories.jsx +97 -0
- package/src/ui/PublicationCard/PublicationCard.jsx +27 -0
- package/src/ui/PublicationCard/PublicationCard.stories.jsx +69 -0
- package/src/ui/Pullquote/Pullquote.jsx +44 -0
- package/src/ui/Pullquote/Pullquote.stories.jsx +101 -0
- package/src/ui/RelatedContent/RelatedContent.jsx +90 -0
- package/src/ui/RelatedContent/RelatedContent.stories.jsx +80 -0
- package/src/ui/Segment/Segment.stories.jsx +163 -0
- package/src/ui/Tag/Tag.jsx +13 -0
- package/src/ui/Tag/Tag.stories.jsx +21 -0
- package/src/ui/TagList/TagList.jsx +23 -0
- package/src/ui/TagList/TagList.stories.jsx +63 -0
- package/src/ui/Testimonial/Testimonial.jsx +53 -0
- package/src/ui/Testimonial/Testimonial.stories.jsx +51 -0
- package/src/ui/Timeline/Timeline.jsx +44 -0
- package/src/ui/Timeline/Timeline.stories.jsx +322 -0
- package/src/ui/index.js +31 -0
- package/templates/eea.hbs +50 -0
- package/theme/theme.config +122 -0
- package/theme/theme.less +64 -0
- package/theme/themes/eea/assets/images/EEA_Logo_Vertical.png +0 -0
- package/theme/themes/eea/assets/images/Footer/EEALogo.png +0 -0
- package/theme/themes/eea/assets/images/Footer/EULogo.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo1.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo10.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo2.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo3.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo4.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo5.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo6.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo7.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo8.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/Logo9.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Extras/abstract-visual.svg +32 -0
- package/theme/themes/eea/assets/images/Footer/Extras/footervisual.svg +1755 -0
- package/theme/themes/eea/assets/images/Footer/Vector1.png +0 -0
- package/theme/themes/eea/assets/images/Footer/Vector2.png +0 -0
- package/theme/themes/eea/assets/images/Header/EeaLogo.png +0 -0
- package/theme/themes/eea/assets/images/Header/Vector.png +0 -0
- package/theme/themes/eea/assets/images/Header/close-line.svg +1 -0
- package/theme/themes/eea/assets/images/Header/close.png +0 -0
- package/theme/themes/eea/assets/images/Header/down-arrow.png +0 -0
- package/theme/themes/eea/assets/images/Header/eea-logo.svg +14 -0
- package/theme/themes/eea/assets/images/Header/eea.png +0 -0
- package/theme/themes/eea/assets/images/Header/eeaIcon.png +0 -0
- package/theme/themes/eea/assets/images/Header/global-line.svg +1 -0
- package/theme/themes/eea/assets/images/Header/globeIcon.png +0 -0
- package/theme/themes/eea/assets/images/Header/hamburgerMenuIcon.png +0 -0
- package/theme/themes/eea/assets/images/Header/menu-left-arrow.svg +3 -0
- package/theme/themes/eea/assets/images/Header/menu-line.svg +1 -0
- package/theme/themes/eea/assets/images/Header/search-line.svg +1 -0
- package/theme/themes/eea/assets/images/Header/search.png +0 -0
- package/theme/themes/eea/assets/images/Header/searchIcon.png +0 -0
- package/theme/themes/eea/assets/images/arrow-down.svg +10 -0
- package/theme/themes/eea/assets/images/avatar.png +0 -0
- package/theme/themes/eea/assets/images/banner.png +0 -0
- package/theme/themes/eea/assets/images/eea-logo.png +0 -0
- package/theme/themes/eea/assets/images/eea_icon.png +0 -0
- package/theme/themes/eea/assets/images/europe-flag.svg +4 -0
- package/theme/themes/eea/assets/images/home-icon.svg +3 -0
- package/theme/themes/eea/assets/images/loaderImage.png +0 -0
- package/theme/themes/eea/assets/images/mega-menu-arrow.svg +3 -0
- package/theme/themes/eea/assets/logo/EEA-Logo-White-2.svg +9 -0
- package/theme/themes/eea/assets/logo/EEA-Logo-white.svg +9 -0
- package/theme/themes/eea/assets/logo/EIONETLogo.png +0 -0
- package/theme/themes/eea/assets/logo/bise.svg +47 -0
- package/theme/themes/eea/assets/logo/cca.svg +20 -0
- package/theme/themes/eea/assets/logo/copernicus.svg +62 -0
- package/theme/themes/eea/assets/logo/energy.svg +77 -0
- package/theme/themes/eea/assets/logo/fise.svg +37 -0
- package/theme/themes/eea/assets/logo/freshwater.svg +48 -0
- package/theme/themes/eea/assets/logo/industry.svg +40 -0
- package/theme/themes/eea/assets/logo/insitu.svg +43 -0
- package/theme/themes/eea/assets/logo/ipchem.svg +23 -0
- package/theme/themes/eea/assets/logo/marine.svg +63 -0
- package/theme/themes/eea/collections/breadcrumb.overrides +44 -0
- package/theme/themes/eea/collections/breadcrumb.variables +49 -0
- package/theme/themes/eea/collections/form.overrides +56 -0
- package/theme/themes/eea/collections/form.variables +211 -0
- package/theme/themes/eea/collections/grid.overrides +17 -0
- package/theme/themes/eea/collections/grid.variables +103 -0
- package/theme/themes/eea/collections/menu.overrides +84 -0
- package/theme/themes/eea/collections/menu.variables +471 -0
- package/theme/themes/eea/collections/message.overrides +34 -0
- package/theme/themes/eea/collections/message.variables +142 -0
- package/theme/themes/eea/collections/table.overrides +30 -0
- package/theme/themes/eea/collections/table.variables +249 -0
- package/theme/themes/eea/definitions/elements/icon.less +499 -0
- package/theme/themes/eea/elements/button.overrides +199 -0
- package/theme/themes/eea/elements/button.variables +405 -0
- package/theme/themes/eea/elements/container.overrides +98 -0
- package/theme/themes/eea/elements/container.variables +66 -0
- package/theme/themes/eea/elements/divider.overrides +17 -0
- package/theme/themes/eea/elements/divider.variables +53 -0
- package/theme/themes/eea/elements/flag.overrides +1235 -0
- package/theme/themes/eea/elements/flag.variables +13 -0
- package/theme/themes/eea/elements/header.overrides +205 -0
- package/theme/themes/eea/elements/header.variables +151 -0
- package/theme/themes/eea/elements/icon.overrides +5589 -0
- package/theme/themes/eea/elements/icon.variables +95 -0
- package/theme/themes/eea/elements/image.overrides +3 -0
- package/theme/themes/eea/elements/image.variables +44 -0
- package/theme/themes/eea/elements/input.overrides +83 -0
- package/theme/themes/eea/elements/input.variables +104 -0
- package/theme/themes/eea/elements/label.overrides +49 -0
- package/theme/themes/eea/elements/label.variables +267 -0
- package/theme/themes/eea/elements/list.overrides +28 -0
- package/theme/themes/eea/elements/list.variables +233 -0
- package/theme/themes/eea/elements/loader.overrides +3 -0
- package/theme/themes/eea/elements/loader.variables +73 -0
- package/theme/themes/eea/elements/placeholder.overrides +3 -0
- package/theme/themes/eea/elements/placeholder.variables +55 -0
- package/theme/themes/eea/elements/rail.overrides +3 -0
- package/theme/themes/eea/elements/rail.variables +34 -0
- package/theme/themes/eea/elements/reveal.overrides +3 -0
- package/theme/themes/eea/elements/reveal.variables +18 -0
- package/theme/themes/eea/elements/segment.overrides +8 -0
- package/theme/themes/eea/elements/segment.variables +154 -0
- package/theme/themes/eea/elements/step.overrides +18 -0
- package/theme/themes/eea/elements/step.variables +130 -0
- package/theme/themes/eea/extras/avatar.less +97 -0
- package/theme/themes/eea/extras/avatar.variables +34 -0
- package/theme/themes/eea/extras/avatarGrid.less +43 -0
- package/theme/themes/eea/extras/avatarGrid.variables +20 -0
- package/theme/themes/eea/extras/banner.less +213 -0
- package/theme/themes/eea/extras/banner.variables +77 -0
- package/theme/themes/eea/extras/blockquote.less +89 -0
- package/theme/themes/eea/extras/blockquote.variables +35 -0
- package/theme/themes/eea/extras/custom.overrides +0 -0
- package/theme/themes/eea/extras/custom.variables +0 -0
- package/theme/themes/eea/extras/divider.less +14 -0
- package/theme/themes/eea/extras/divider.variables +9 -0
- package/theme/themes/eea/extras/footer.less +273 -0
- package/theme/themes/eea/extras/footer.variables +109 -0
- package/theme/themes/eea/extras/header.less +691 -0
- package/theme/themes/eea/extras/header.variables +149 -0
- package/theme/themes/eea/extras/inpageNavigation.less +57 -0
- package/theme/themes/eea/extras/inpageNavigation.variables +30 -0
- package/theme/themes/eea/extras/keyContent.less +36 -0
- package/theme/themes/eea/extras/keyContent.variables +18 -0
- package/theme/themes/eea/extras/main.overrides +31 -0
- package/theme/themes/eea/extras/main.variables +33 -0
- package/theme/themes/eea/extras/publicationCard.less +62 -0
- package/theme/themes/eea/extras/publicationCard.variables +24 -0
- package/theme/themes/eea/extras/pullquote.less +76 -0
- package/theme/themes/eea/extras/pullquote.variables +34 -0
- package/theme/themes/eea/extras/select.overrides +0 -0
- package/theme/themes/eea/extras/select.variables +0 -0
- package/theme/themes/eea/extras/tag.less +37 -0
- package/theme/themes/eea/extras/tag.variables +22 -0
- package/theme/themes/eea/extras/tagList.less +50 -0
- package/theme/themes/eea/extras/tagList.variables +13 -0
- package/theme/themes/eea/extras/testimonial.less +28 -0
- package/theme/themes/eea/extras/testimonial.variables +13 -0
- package/theme/themes/eea/extras/timeline.less +114 -0
- package/theme/themes/eea/extras/timeline.variables +40 -0
- package/theme/themes/eea/globals/reset.overrides +454 -0
- package/theme/themes/eea/globals/reset.variables +6 -0
- package/theme/themes/eea/globals/site.overrides +27 -0
- package/theme/themes/eea/globals/site.variables +1135 -0
- package/theme/themes/eea/modules/accordion.overrides +83 -0
- package/theme/themes/eea/modules/accordion.variables +114 -0
- package/theme/themes/eea/modules/chatroom.overrides +3 -0
- package/theme/themes/eea/modules/chatroom.variables +3 -0
- package/theme/themes/eea/modules/checkbox.overrides +67 -0
- package/theme/themes/eea/modules/checkbox.variables +194 -0
- package/theme/themes/eea/modules/dimmer.overrides +3 -0
- package/theme/themes/eea/modules/dimmer.variables +58 -0
- package/theme/themes/eea/modules/dropdown.overrides +53 -0
- package/theme/themes/eea/modules/dropdown.variables +390 -0
- package/theme/themes/eea/modules/embed.overrides +3 -0
- package/theme/themes/eea/modules/embed.variables +53 -0
- package/theme/themes/eea/modules/modal.overrides +3 -0
- package/theme/themes/eea/modules/modal.variables +193 -0
- package/theme/themes/eea/modules/nag.overrides +3 -0
- package/theme/themes/eea/modules/nag.variables +74 -0
- package/theme/themes/eea/modules/popup.overrides +83 -0
- package/theme/themes/eea/modules/popup.variables +153 -0
- package/theme/themes/eea/modules/progress.overrides +3 -0
- package/theme/themes/eea/modules/progress.variables +113 -0
- package/theme/themes/eea/modules/rating.overrides +74 -0
- package/theme/themes/eea/modules/rating.variables +103 -0
- package/theme/themes/eea/modules/search.overrides +3 -0
- package/theme/themes/eea/modules/search.variables +163 -0
- package/theme/themes/eea/modules/shape.overrides +3 -0
- package/theme/themes/eea/modules/shape.variables +40 -0
- package/theme/themes/eea/modules/sidebar.overrides +3 -0
- package/theme/themes/eea/modules/sidebar.variables +45 -0
- package/theme/themes/eea/modules/sticky.overrides +3 -0
- package/theme/themes/eea/modules/sticky.variables +7 -0
- package/theme/themes/eea/modules/tab.overrides +13 -0
- package/theme/themes/eea/modules/tab.variables +17 -0
- package/theme/themes/eea/modules/transition.overrides +1087 -0
- package/theme/themes/eea/modules/transition.variables +10 -0
- package/theme/themes/eea/modules/video.overrides +3 -0
- package/theme/themes/eea/modules/video.variables +16 -0
- package/theme/themes/eea/views/ad.overrides +3 -0
- package/theme/themes/eea/views/ad.variables +13 -0
- package/theme/themes/eea/views/card.overrides +73 -0
- package/theme/themes/eea/views/card.variables +237 -0
- package/theme/themes/eea/views/comment.overrides +3 -0
- package/theme/themes/eea/views/comment.variables +98 -0
- package/theme/themes/eea/views/feed.overrides +3 -0
- package/theme/themes/eea/views/feed.variables +141 -0
- package/theme/themes/eea/views/item.overrides +8 -0
- package/theme/themes/eea/views/item.variables +157 -0
- package/theme/themes/eea/views/statistic.overrides +19 -0
- 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,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,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;
|