@ulu/frontend 0.6.31 → 0.6.33
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/dist/mcp-data.json
CHANGED
|
@@ -72,6 +72,24 @@
|
|
|
72
72
|
"description": "A centered layout for the hero section.",
|
|
73
73
|
"fullscreen": true,
|
|
74
74
|
"html": "<div class=\"basic-hero basic-hero--center\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Centered Hero Title</h1>\n <p class=\"type-large\">A brief and compelling reason to explore further.</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/20/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"title": "Main Content - Aligned Center",
|
|
78
|
+
"description": "A hero section with the main text content vertically centered alongside taller media.",
|
|
79
|
+
"fullscreen": true,
|
|
80
|
+
"html": "<div class=\"basic-hero basic-hero--main-center\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Vertically Centered Content</h1>\n <p class=\"type-large\">Notice how this text block sits perfectly in the middle of the available space created by the image.</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/30/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"title": "Main Content - Aligned End",
|
|
84
|
+
"description": "A hero section with the main text content aligned to the bottom.",
|
|
85
|
+
"fullscreen": true,
|
|
86
|
+
"html": "<div class=\"basic-hero basic-hero--main-end\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Bottom Aligned Content</h1>\n <p class=\"type-large\">This text aligns to the bottom (flex-end) of the container.</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/40/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"title": "Main Content - Aligned Start",
|
|
90
|
+
"description": "A hero section with the main text content explicitly aligned to the top (overriding any global center/end defaults).",
|
|
91
|
+
"fullscreen": true,
|
|
92
|
+
"html": "<div class=\"basic-hero basic-hero--main-start\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Top Aligned Content</h1>\n <p class=\"type-large\">This explicitly sets the alignment to the top (flex-start).</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/50/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
|
|
75
93
|
}
|
|
76
94
|
],
|
|
77
95
|
"breadcrumb": [
|
|
@@ -1339,6 +1357,12 @@
|
|
|
1339
1357
|
"type": "Color",
|
|
1340
1358
|
"description": "Background color of the hero",
|
|
1341
1359
|
"default": "\"color-hero-background\""
|
|
1360
|
+
},
|
|
1361
|
+
{
|
|
1362
|
+
"name": "main-vertical-align",
|
|
1363
|
+
"type": "CssValue",
|
|
1364
|
+
"description": "Vertical alignment of the main content",
|
|
1365
|
+
"default": "flex-start"
|
|
1342
1366
|
}
|
|
1343
1367
|
]
|
|
1344
1368
|
},
|
|
@@ -13986,8 +14010,8 @@
|
|
|
13986
14010
|
"name": "set",
|
|
13987
14011
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
13988
14012
|
"line": {
|
|
13989
|
-
"start":
|
|
13990
|
-
"end":
|
|
14013
|
+
"start": 51,
|
|
14014
|
+
"end": 53
|
|
13991
14015
|
}
|
|
13992
14016
|
}
|
|
13993
14017
|
},
|
|
@@ -13998,8 +14022,8 @@
|
|
|
13998
14022
|
"name": "set",
|
|
13999
14023
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14000
14024
|
"line": {
|
|
14001
|
-
"start":
|
|
14002
|
-
"end":
|
|
14025
|
+
"start": 51,
|
|
14026
|
+
"end": 53
|
|
14003
14027
|
}
|
|
14004
14028
|
}
|
|
14005
14029
|
},
|
|
@@ -14010,8 +14034,8 @@
|
|
|
14010
14034
|
"name": "get",
|
|
14011
14035
|
"code": "\n $value: utils.require-map-get($config, $name, \"basic-hero [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14012
14036
|
"line": {
|
|
14013
|
-
"start":
|
|
14014
|
-
"end":
|
|
14037
|
+
"start": 60,
|
|
14038
|
+
"end": 63
|
|
14015
14039
|
}
|
|
14016
14040
|
}
|
|
14017
14041
|
},
|
|
@@ -17108,10 +17132,10 @@
|
|
|
17108
17132
|
"context": {
|
|
17109
17133
|
"type": "mixin",
|
|
17110
17134
|
"name": "styles",
|
|
17111
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17135
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17112
17136
|
"line": {
|
|
17113
|
-
"start":
|
|
17114
|
-
"end":
|
|
17137
|
+
"start": 69,
|
|
17138
|
+
"end": 131
|
|
17115
17139
|
}
|
|
17116
17140
|
}
|
|
17117
17141
|
},
|
|
@@ -17120,10 +17144,10 @@
|
|
|
17120
17144
|
"context": {
|
|
17121
17145
|
"type": "mixin",
|
|
17122
17146
|
"name": "styles",
|
|
17123
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17147
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17124
17148
|
"line": {
|
|
17125
|
-
"start":
|
|
17126
|
-
"end":
|
|
17149
|
+
"start": 69,
|
|
17150
|
+
"end": 131
|
|
17127
17151
|
}
|
|
17128
17152
|
}
|
|
17129
17153
|
},
|
|
@@ -17132,10 +17156,10 @@
|
|
|
17132
17156
|
"context": {
|
|
17133
17157
|
"type": "mixin",
|
|
17134
17158
|
"name": "styles",
|
|
17135
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17159
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17136
17160
|
"line": {
|
|
17137
|
-
"start":
|
|
17138
|
-
"end":
|
|
17161
|
+
"start": 69,
|
|
17162
|
+
"end": 131
|
|
17139
17163
|
}
|
|
17140
17164
|
}
|
|
17141
17165
|
},
|
|
@@ -17144,10 +17168,10 @@
|
|
|
17144
17168
|
"context": {
|
|
17145
17169
|
"type": "mixin",
|
|
17146
17170
|
"name": "styles",
|
|
17147
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17171
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17148
17172
|
"line": {
|
|
17149
|
-
"start":
|
|
17150
|
-
"end":
|
|
17173
|
+
"start": 69,
|
|
17174
|
+
"end": 131
|
|
17151
17175
|
}
|
|
17152
17176
|
}
|
|
17153
17177
|
},
|
|
@@ -17156,10 +17180,10 @@
|
|
|
17156
17180
|
"context": {
|
|
17157
17181
|
"type": "mixin",
|
|
17158
17182
|
"name": "styles",
|
|
17159
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17183
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17160
17184
|
"line": {
|
|
17161
|
-
"start":
|
|
17162
|
-
"end":
|
|
17185
|
+
"start": 69,
|
|
17186
|
+
"end": 131
|
|
17163
17187
|
}
|
|
17164
17188
|
}
|
|
17165
17189
|
},
|
|
@@ -17168,10 +17192,10 @@
|
|
|
17168
17192
|
"context": {
|
|
17169
17193
|
"type": "mixin",
|
|
17170
17194
|
"name": "styles",
|
|
17171
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17195
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17172
17196
|
"line": {
|
|
17173
|
-
"start":
|
|
17174
|
-
"end":
|
|
17197
|
+
"start": 69,
|
|
17198
|
+
"end": 131
|
|
17175
17199
|
}
|
|
17176
17200
|
}
|
|
17177
17201
|
},
|
|
@@ -17180,10 +17204,10 @@
|
|
|
17180
17204
|
"context": {
|
|
17181
17205
|
"type": "mixin",
|
|
17182
17206
|
"name": "styles",
|
|
17183
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17207
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17184
17208
|
"line": {
|
|
17185
|
-
"start":
|
|
17186
|
-
"end":
|
|
17209
|
+
"start": 69,
|
|
17210
|
+
"end": 131
|
|
17187
17211
|
}
|
|
17188
17212
|
}
|
|
17189
17213
|
},
|
|
@@ -17192,10 +17216,10 @@
|
|
|
17192
17216
|
"context": {
|
|
17193
17217
|
"type": "mixin",
|
|
17194
17218
|
"name": "styles",
|
|
17195
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17219
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17196
17220
|
"line": {
|
|
17197
|
-
"start":
|
|
17198
|
-
"end":
|
|
17221
|
+
"start": 69,
|
|
17222
|
+
"end": 131
|
|
17199
17223
|
}
|
|
17200
17224
|
}
|
|
17201
17225
|
},
|
|
@@ -17204,10 +17228,10 @@
|
|
|
17204
17228
|
"context": {
|
|
17205
17229
|
"type": "mixin",
|
|
17206
17230
|
"name": "styles",
|
|
17207
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17231
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17208
17232
|
"line": {
|
|
17209
|
-
"start":
|
|
17210
|
-
"end":
|
|
17233
|
+
"start": 69,
|
|
17234
|
+
"end": 131
|
|
17211
17235
|
}
|
|
17212
17236
|
}
|
|
17213
17237
|
},
|
|
@@ -17216,10 +17240,22 @@
|
|
|
17216
17240
|
"context": {
|
|
17217
17241
|
"type": "mixin",
|
|
17218
17242
|
"name": "styles",
|
|
17219
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
17243
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17220
17244
|
"line": {
|
|
17221
|
-
"start":
|
|
17222
|
-
"end":
|
|
17245
|
+
"start": 69,
|
|
17246
|
+
"end": 131
|
|
17247
|
+
}
|
|
17248
|
+
}
|
|
17249
|
+
},
|
|
17250
|
+
{
|
|
17251
|
+
"description": "Prints component styles\n",
|
|
17252
|
+
"context": {
|
|
17253
|
+
"type": "mixin",
|
|
17254
|
+
"name": "styles",
|
|
17255
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
17256
|
+
"line": {
|
|
17257
|
+
"start": 69,
|
|
17258
|
+
"end": 131
|
|
17223
17259
|
}
|
|
17224
17260
|
}
|
|
17225
17261
|
},
|
|
@@ -33501,16 +33537,16 @@
|
|
|
33501
33537
|
"description": "Module Settings\n",
|
|
33502
33538
|
"commentRange": {
|
|
33503
33539
|
"start": 29,
|
|
33504
|
-
"end":
|
|
33540
|
+
"end": 33
|
|
33505
33541
|
},
|
|
33506
33542
|
"context": {
|
|
33507
33543
|
"type": "variable",
|
|
33508
33544
|
"name": "config",
|
|
33509
|
-
"value": "(\n \"background-color\" : #fafafa,\n \"padding-top\": 3rem,\n \"padding-bottom\" : 2rem,\n \"gap\" : (4rem 2rem),\n \"main-max-width\" : true,\n \"main-min-width\" : true,\n \"media-max-width\" : 20rem,\n \"media-vertical-align\" : center\n)",
|
|
33545
|
+
"value": "(\n \"background-color\" : #fafafa,\n \"padding-top\": 3rem,\n \"padding-bottom\" : 2rem,\n \"gap\" : (4rem 2rem),\n \"main-max-width\" : true,\n \"main-min-width\" : true,\n \"main-vertical-align\" : flex-start, // Added setting\n \"media-max-width\" : 20rem,\n \"media-vertical-align\" : center\n)",
|
|
33510
33546
|
"scope": "default",
|
|
33511
33547
|
"line": {
|
|
33512
33548
|
"start": 34,
|
|
33513
|
-
"end":
|
|
33549
|
+
"end": 44
|
|
33514
33550
|
}
|
|
33515
33551
|
},
|
|
33516
33552
|
"type": "Map",
|
|
@@ -33526,6 +33562,12 @@
|
|
|
33526
33562
|
"name": "background-color",
|
|
33527
33563
|
"default": "\"color-hero-background\"",
|
|
33528
33564
|
"description": "Background color of the hero"
|
|
33565
|
+
},
|
|
33566
|
+
{
|
|
33567
|
+
"type": "CssValue",
|
|
33568
|
+
"name": "main-vertical-align",
|
|
33569
|
+
"default": "flex-start",
|
|
33570
|
+
"description": "Vertical alignment of the main content"
|
|
33529
33571
|
}
|
|
33530
33572
|
],
|
|
33531
33573
|
"group": [
|
|
@@ -33544,16 +33586,16 @@
|
|
|
33544
33586
|
"path": "/sass/components/basic-hero/#mixin-set",
|
|
33545
33587
|
"description": "Change modules $config\n",
|
|
33546
33588
|
"commentRange": {
|
|
33547
|
-
"start":
|
|
33548
|
-
"end":
|
|
33589
|
+
"start": 46,
|
|
33590
|
+
"end": 49
|
|
33549
33591
|
},
|
|
33550
33592
|
"context": {
|
|
33551
33593
|
"type": "mixin",
|
|
33552
33594
|
"name": "set",
|
|
33553
33595
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
33554
33596
|
"line": {
|
|
33555
|
-
"start":
|
|
33556
|
-
"end":
|
|
33597
|
+
"start": 51,
|
|
33598
|
+
"end": 53
|
|
33557
33599
|
}
|
|
33558
33600
|
},
|
|
33559
33601
|
"parameter": [
|
|
@@ -33595,16 +33637,16 @@
|
|
|
33595
33637
|
"path": "/sass/components/basic-hero/#function-get",
|
|
33596
33638
|
"description": "Get a config option\n",
|
|
33597
33639
|
"commentRange": {
|
|
33598
|
-
"start":
|
|
33599
|
-
"end":
|
|
33640
|
+
"start": 55,
|
|
33641
|
+
"end": 58
|
|
33600
33642
|
},
|
|
33601
33643
|
"context": {
|
|
33602
33644
|
"type": "function",
|
|
33603
33645
|
"name": "get",
|
|
33604
33646
|
"code": "\n $value: utils.require-map-get($config, $name, \"basic-hero [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
33605
33647
|
"line": {
|
|
33606
|
-
"start":
|
|
33607
|
-
"end":
|
|
33648
|
+
"start": 60,
|
|
33649
|
+
"end": 63
|
|
33608
33650
|
}
|
|
33609
33651
|
},
|
|
33610
33652
|
"parameter": [
|
|
@@ -33642,16 +33684,16 @@
|
|
|
33642
33684
|
"path": "/sass/components/basic-hero/#mixin-styles",
|
|
33643
33685
|
"description": "Prints component styles\n",
|
|
33644
33686
|
"commentRange": {
|
|
33645
|
-
"start":
|
|
33646
|
-
"end":
|
|
33687
|
+
"start": 65,
|
|
33688
|
+
"end": 67
|
|
33647
33689
|
},
|
|
33648
33690
|
"context": {
|
|
33649
33691
|
"type": "mixin",
|
|
33650
33692
|
"name": "styles",
|
|
33651
|
-
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n",
|
|
33693
|
+
"code": "\n $prefix: selector.class(\"basic-hero\");\n\n #{ $prefix } {\n background-color: color.get(get(\"background-color\")); \n }\n #{ $prefix }__content {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: get(\"gap\"); \n padding-top: get(\"padding-top\");\n padding-bottom: get(\"padding-bottom\");\n }\n #{ $prefix }__content-main {\n $min-width: utils.fallback(get(\"main-min-width\"), get(\"main-max-width\"));\n\n // Using display flex to allow control for vertical align\n display: flex;\n flex-direction: column;\n justify-content: var(--ulu-basic-hero-main-align, get(\"main-vertical-align\"));\n\n // Using max/min-width so that we don't need to add selectors to change flex-basis\n // when centered. Using flex-basis: 0 to allow flexbox to decide the items width\n // allows it to expand/shrink within. min(100%... Never larger than parent\n min-width: min(100%, $min-width); \n max-width: get(\"main-max-width\");\n flex-shrink: 1;\n flex-grow: 1;\n flex-basis: 0;\n }\n #{ $prefix }__content-media {\n display: flex;\n align-items: center;\n align-self: get(\"media-vertical-align\");\n justify-content: center;\n flex: 0 0 auto; \n width: min(100%, get(\"media-max-width\"));\n }\n\n // Modifiers\n #{ $prefix }--center {\n #{ $prefix }__content {\n flex-direction: column;\n flex-wrap: nowrap;\n text-align: center;\n align-items: center;\n }\n }\n\n #{ $prefix }--main-start {\n --ulu-basic-hero-main-align: flex-start;\n }\n\n #{ $prefix }--main-center {\n --ulu-basic-hero-main-align: center;\n }\n \n #{ $prefix }--main-end {\n --ulu-basic-hero-main-align: flex-end;\n }\n",
|
|
33652
33694
|
"line": {
|
|
33653
|
-
"start":
|
|
33654
|
-
"end":
|
|
33695
|
+
"start": 69,
|
|
33696
|
+
"end": 131
|
|
33655
33697
|
}
|
|
33656
33698
|
},
|
|
33657
33699
|
"example": [
|
|
@@ -33701,6 +33743,10 @@
|
|
|
33701
33743
|
"type": "function",
|
|
33702
33744
|
"name": "get"
|
|
33703
33745
|
},
|
|
33746
|
+
{
|
|
33747
|
+
"type": "function",
|
|
33748
|
+
"name": "get"
|
|
33749
|
+
},
|
|
33704
33750
|
{
|
|
33705
33751
|
"type": "function",
|
|
33706
33752
|
"name": "get"
|
|
@@ -42141,7 +42187,7 @@
|
|
|
42141
42187
|
"context": {
|
|
42142
42188
|
"type": "variable",
|
|
42143
42189
|
"name": "config",
|
|
42144
|
-
"value": "(\n \"color\" : inherit,\n \"color-placeholder\" : \"type-tertiary\",\n \"drupal\" : false,\n \"error-color\" : \"danger\",\n \"error-highlight-color\" : rgb(251, 242, 242),\n \"error-selector\" : \".is-danger\",\n \"file-button-style\" : true,\n \"font-weight-label\" : bold,\n \"font-weight-legend\" : bold,\n \"font-weight-placeholder\" : normal,\n \"font-weight-input\" : null,\n \"font-weight-textarea\" : null,\n \"font-weight-select\" : null,\n \"input-border\" : element.get-rule-style(),\n \"input-border-radius\" : 3px,\n \"item-align-items\" : flex-start,\n \"item-border-radius\" : null,\n \"item-highlight-width\" : 6px,\n \"item-margin-y\" : 0.75em,\n \"input-padding-x\" : 0.5em,\n \"input-padding-y\" : 0.25em,\n \"input-min-width\" : 10em,\n \"input-background-color\" : white,\n \"required-color\" : \"danger\",\n \"text-input-margin-bottom\" : 0.5em,\n \"text-input-margin-top\" : 1em,\n \"warning-color\" : \"warning\",\n \"warning-highlight-color\" : rgb(255, 249, 237),\n \"warning-selector\" : \".is-warning\",\n \"check-input-color\" : currentColor,\n \"check-input-size\" : 1.15em,\n \"check-input-touch-size\" : 2em,\n \"check-input-background-color\" : white,\n \"check-input-background-color-checked\" : white,\n \"check-input-background-color-hover\" : white,\n \"check-input-background-color-indeterminate\": white,\n \"check-input-border\" : null,\n \"check-input-border-color-hover\" : null,\n \"check-input-border-color-checked\" : null,\n \"check-input-border-color-indeterminate\" : null,\n \"check-input-border-color-focus\" : null,\n \"check-input-outline\" : null,\n \"check-input-outline-hover\" : null,\n \"check-input-outline-checked\" : null,\n \"check-input-outline-focus\" : 1px solid white,\n \"check-input-touch-color-hover\" : #e8e8e8,\n \"check-input-touch-color-focus\" : null,\n \"check-input-radio-size\" : 0.3em,\n \"check-input-checkmark-width\" : 0.
|
|
42190
|
+
"value": "(\n \"color\" : inherit,\n \"color-placeholder\" : \"type-tertiary\",\n \"drupal\" : false,\n \"error-color\" : \"danger\",\n \"error-highlight-color\" : rgb(251, 242, 242),\n \"error-selector\" : \".is-danger\",\n \"file-button-style\" : true,\n \"font-weight-label\" : bold,\n \"font-weight-legend\" : bold,\n \"font-weight-placeholder\" : normal,\n \"font-weight-input\" : null,\n \"font-weight-textarea\" : null,\n \"font-weight-select\" : null,\n \"input-border\" : element.get-rule-style(),\n \"input-border-radius\" : 3px,\n \"item-align-items\" : flex-start,\n \"item-border-radius\" : null,\n \"item-highlight-width\" : 6px,\n \"item-margin-y\" : 0.75em,\n \"input-padding-x\" : 0.5em,\n \"input-padding-y\" : 0.25em,\n \"input-min-width\" : 10em,\n \"input-background-color\" : white,\n \"required-color\" : \"danger\",\n \"text-input-margin-bottom\" : 0.5em,\n \"text-input-margin-top\" : 1em,\n \"warning-color\" : \"warning\",\n \"warning-highlight-color\" : rgb(255, 249, 237),\n \"warning-selector\" : \".is-warning\",\n \"check-input-color\" : currentColor,\n \"check-input-size\" : 1.15em,\n \"check-input-touch-size\" : 2em,\n \"check-input-background-color\" : white,\n \"check-input-background-color-checked\" : white,\n \"check-input-background-color-hover\" : white,\n \"check-input-background-color-indeterminate\": white,\n \"check-input-border\" : null,\n \"check-input-border-color-hover\" : null,\n \"check-input-border-color-checked\" : null,\n \"check-input-border-color-indeterminate\" : null,\n \"check-input-border-color-focus\" : null,\n \"check-input-outline\" : null,\n \"check-input-outline-hover\" : null,\n \"check-input-outline-checked\" : null,\n \"check-input-outline-focus\" : 1px solid white,\n \"check-input-touch-color-hover\" : #e8e8e8,\n \"check-input-touch-color-focus\" : null,\n \"check-input-radio-size\" : 0.3em,\n \"check-input-checkmark-width\" : 0.45em,\n \"check-input-checkmark-height\" : 0.8em,\n \"check-input-checkmark-offset-y\" : -0.2em,\n \"check-input-checkmark-stroke-size\" : 0.21em,\n \"check-input-mark-color\" : currentColor,\n \"check-input-mark-color-hover\" : null,\n \"check-input-mark-color-focus\" : null,\n \"check-input-mark-color-checked\" : null,\n \"check-input-mark-color-indeterminate\" : null,\n \"check-input-disabled-opacity\" : 0.6,\n \"check-input-border-radius\" : 0,\n \"description-color\" : false,\n \"description-margin\" : (0.25em 0),\n \"description-max-width\" : 25em,\n \"description-line-height\" : true,\n \"fieldset-background\" : transparent,\n \"fieldset-border\" : none,\n \"fieldset-margin-bottom\" : 1rem,\n \"fieldset-margin-top\" : 1rem,\n \"fieldset-padding\" : 0,\n \"fieldset-margin-compact\" : 0,\n \"fieldset-border-radius\" : 0,\n \"fieldset-legend-color\" : inherit,\n \"fieldset-legend-border-bottom\" : null,\n \"fieldset-legend-padding-bottom\" : 0,\n \"fieldset-legend-margin-bottom\" : 0.5em,\n \"select-border-radius\" : 4px,\n \"select-background-color\" : null,\n \"select-border\" : null,\n \"select-padding-x\" : null,\n \"select-padding-y\" : null,\n \"select-image\" : null,\n \"select-image-size\" : 0.9em,\n \"select-image-offset\" : 0.7em,\n \"select-image-margin\" : 0.65em,\n \"inline-gap\" : 1em\n)",
|
|
42145
42191
|
"scope": "default",
|
|
42146
42192
|
"line": {
|
|
42147
42193
|
"start": 111,
|